Tuesday, February 11, 2014

Form Feedburner di bawah Post Blog




Masih seperti artikel kemarin tentang modifikasi form feedburner, kali ini saya akan berbagi modifikasi form feedburner yang bisa di letakkan di bawah postingan blog.

1. Login blogger
2. Template > edit html
3. cari kode <data:post.body/> dan letakkan kode css dan html berikut di bawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}

.style{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDrLsztMcd545vHM9eWexAORSx0K_wMT2R0dcsw-1-r-UK0lB9E0OBFmNAACowSJ5LFMp__i9BW62f_k2KGOL1_Gbdr22ncNncaEtag3Rq8fWD_fS2Tzsdu-lJZYzJudnmgnA-gTyHuME/s1600/email-icon.png) no-repeat scroll -8px center #fff;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
} .submit{
background-color:#ffc477;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-moz-border-radius-topright:20px;
border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-moz-border-radius-bottomright:20px;
border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-moz-border-radius-bottomleft:20px;
border-bottom-left-radius:20px;
text-indent:-3.44px;
border:1px solid #eeb44f;
display:inline-block;
color:#ffffff;
font-family:Arial;
font-size:16px;
font-weight:bold;
font-style:normal;
height:27px;
line-height:27px;
width:86px;
text-decoration:none;
text-align:center;
}

#emailwidget-outer {
background: none repeat scroll 0 0 #fff;
border: 1px solid #D3D3D3;
padding: 8px;
width:520px;
}

#emailwidget-outer td{
padding:3px 0;
}

</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>

<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='mig33eagle'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='style' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>

<input alt='' class='submit' title='' type='submit' value='Submit'/>
</form>
</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs0aqhXG98oNlhyCbmgZcXCZEPH5LMs3fkDxzBd-gr_jidg1gvoQw67sK9QbGTIh8sHc-vdwDt1j7FN-jzZXRLWhHOE39WS_JJJvW_Oyp4bD4XbY_etIWqds80Ys6ru75aDH6LBLBcADY/s200/rss.png'/></a>

<a href='http://twitter.com/mig33eagle' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZNcgfmquSvON0mFXkgW9DVgzGf9xGsaFMD3drPCHDK8jtgQtOd2cdTHCc6ArMK8j2BRQPCJffgEB-yXudCNLQb8sHnJrgZSAJSgmOXohD7hgifunyZxEVzzFdvbo2NSnTdBl3nKkZOLc/s1600/twitter.png'/></a>

<a href='https://www.facebook.com/pages/Mig33-Eagle/327653677253564' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpR2dfF2oinTY_L9zTRwn64py91c8kyOM_JZzzKXP_IJdj4VYQVaj3FHWxSSbTC-ZS6fJjCfSpqTAGXz67qXug_TzwfLIc0lchzB8iDN3Mj0OQ_8D5gCM6TjIaBRWSRIX0Wq1x5kjCyS8/s200/facebook.png'/></a>

<a href='https://plus.google.com/u/0/+AshNareswari/posts' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Hy_9UzBYbpbStC2YvKS4UvhenAqKJHTYOchHp1BflcGi1ghzxdpnqxfRvmQtxNyiE8BSSrbvgEkU8xdmeKK54Hw1lmKMhzPpj01gkyuqnVBlI_upN4XLtVnssSbwZvqsm_xCreN-_CE/s1600/google+.png'/></a>

</td>
</tr>
</tbody></table>

<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #3333FF;'><a href='http://www.mig33eagle.com/2014/02/form-feedburner-di-bawah-post-blog.html' style='text-decoration: none;' target='_blank'><font color='#3333FF' decoration='none'>Get this widget</font></a></span></div>
</div></div>

</center></b:if>

4. Simpan template

note:
Ganti yang berwarna di kode atas dengan akun sosial anda.

Hasilnya:


Get free daily email updates!
Follow us!

Labels:

Monday, February 10, 2014

Modifikasi Form Feedburner









Kemarin saya telah menuliskan tutorial tentang modifikasi email subscriber.

Sama dengan form feedburner. Widget ini diperuntukkan bagi yang ingin memperoleh konten gratis langsung dikirimkan via email..



Modifikasi form feedburner kali ini simpel:

1. Login blogger

2. Layout > add gadget >html/javascript

3. Masukkan kode css dan html berikut


<style>

.form {

border:1px solid #ccc; /* warna garis pinggir form */

background: #ffffff /* warna background form */

padding:3px; /* spasi form */

width:380px; /* panjang form */

height:180px /* tinggi form */

}

.rss {

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Q9ANnVb_FtuAelaAPGMbHcePQgAaWjhv1tJzJmamV0nldkRUbGLek6vN2pn8lswUkd5NKzWq7issDFZ5X_T_BBDlB0VrH8DtfzBUgzTJlbvdhofh0Dla6kQhvWUP7WUqSar0volBHO8/s1600/images.png") no-repeat bottom right;

}

.button {

background: #006699; /* warna tombol subscribe */

color: #FFFFFF; /* warna font subscribe */

font-size: 11px; /* ukuran font subscribe */

font-family: Arial, Tahoma, Verdana; /* font subscribe */

margin-left: 5px; /* margin kiri tombol subscribe */

border: 1px solid #234B69; /* warna garis pinggir tombol subscribe */

padding:3px 5px 3px 5px; /* jarak antara font dengan garis pinggir tombol subscribe */

font-weight: bold;

}

</style>

<div class="form">

<div class="rss">

<div style="font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;"><a href="http://feeds.feedburner.com/mig33eagle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQvhI8eB5U_Kd4OgrM01ZaWOkigR5LA9MK0VL5X2WbYDu8KRsgygg_YCzbkNHk_c6d8mWLPRwN56IOoiexuei_wumAaIxXcvk32axDMMm1F1j2YAZRcE6mW_2bNqnb88eqCwuJBOz97xs/s800/005.png" /></a> <a href="http://feeds.feedburner.com/mig33eagle">GET UPDATE VIA RSS</a></div>

<div style="font-weight:bold; padding:10px 10px;">GET UPDATE VIA EMAIL</div>

<div style="padding-left:10px">Dapatkan kiriman artikel terbaru langsung ke email anda!</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mig33eagle', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><div style="padding-left:10px; padding-bottom:10px; padding-top:10px"><input type="text" style="width:160px; height:18px" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}" onfocus="if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Ketik email anda disini..." /> <input type="hidden" value="mig33eagle" name="uri" /><input type="hidden" name="loc" value="en_US" /><input class="button" type="submit" value="GO" /></div></form>

<div style="padding-left:10px"><a href="http://feeds.feedburner.com/mig33eagle"><img src="http://feeds.feedburner.com/~fc/mig33eagle?bg=ff7c00&amp;fg=444444&amp;anim=0" width="88" height="26" style="border:0" alt="" /></a></div>

</div></div>



mig33eagle berwarna cyan diatas adalah nama akun feedburner, ganti saja dengan nama akunfeedburner anda.

4. Simpan dan selesai.



Hasil dari kode css dan html di atas:



Labels:

Saturday, February 8, 2014

Modifikasi Form Email Subscription








Apa FeedBurner Email?



Email FeedBurner adalah layanan yang memungkinkan penerbit untuk menyampaikan konten pakan mereka ke pelanggan melalui email.



Siapa yang butuh layanan ini dan mengapa?



Blogger, podcasters, dan penerbit pribadi dan komersial yang ingin pelanggan untuk memiliki metode alternatif untuk menerima konten umpan - pengaturan akrab inbox email mereka.



Apa yang akan membantu penerbit bahwa mereka tidak dapat lakukan hari ini?



Hari ini, jika pelanggan ingin membaca / melihat / menonton konten online sindikasi, mereka biasanya harus pergi ke mana konten-host atau tahu bagaimana untuk berlangganan feed dan mengkonsumsi konten dalam agregator atau pembaca (misalnya MyYahoo!, FeedDemon, iTunes, dll) Dengan kemampuan langganan email, pelanggan kini dapat menerima informasi ini dalam inbox mereka, mirip dengan e-newsletter.



Bagaimana cara kerjanya?



Dari dalam Publicize tab aplikasi, penerbit mengaktifkan layanan dengan mudah klik, kemudian paste kode ke dalam template blog atau situs web. Lihat apa ini tampak seperti di blog atau dibangun langsung ke halaman BrowserFriendly Anda . Sebuah digest harian yang berisi konten baru dari feed dikirimkan ke pelanggan yang telah memilih untuk menerima konten ini. Lihat email sampel .



Mengapa FeedBurner Email begitu istimewa?



Selain yang didukung oleh segel FeedBurning persetujuan, email FeedBurner memiliki fokus yang sangat spesifik - itu adalah benar-benar layanan publisher. Tidak ada halaman arahan pelanggan di FeedBurner dan tidak ada dashboard bagi pelanggan untuk masuk ke dan mengelola email mereka. Selain kesederhanaan dalam konfigurasi dan pengiriman, FeedBurner Email olahraga fitur utama sebagai berikut:



Mudah dibaca, teks atau email HTML berisi pesan-pesan terbaru.

Pesan sebagian besar "brandless," yang berarti bahwa a) email dikirim sebagai "dari" penerbit, tidak FeedBurner dan b) tidak ada sundulan FeedBurner dan hanya sangat ringan "yang disampaikan oleh" footer.

Penerbit memiliki akses ke alamat email yang berlangganan feed mereka, dan mereka dapat mengekspor alamat ini dan bergerak dari FeedBurner ke layanan lain setiap saat.



Nah agar form feedburner tidak membosankan, kita modif aja. Kali ini saya kasi nama style form email subscription 1. Karena, kalau ada kesempatan otak atik lagi, saya akan bikin style yang lain.



Cara Modifikasi Form Email Subscription:

1. Login blogger

2. Layout >HTML/javascript

3. Copast css dan html berikut


<style type="text/css">

.subscribe_outer {

     background: url("http://dl9.glitter-graphics.net/pub/1317/1317309lsk5aj07xu.gif") no-repeat ;

float:left;margin: 0px -10px;padding: 5px 0px;

border:double 3px #0099ff;

-moz-border-radius: 2px;

-webkit-border-radius: 2px;

border-radius: 2px;

}

.subscribe_wrapper {

     background: url("http://dl9.glitter-graphics.net/pub/1317/1317309lsk5aj07xu.gif") no-repeat transparent;font-size: 15px;line-height: 20px;

text-align:center;padding: 38px 50px 18px 38px;



}

.stext {

     color: #000;

font-weight:bold;

}

.sidebar .subscribe_wrapper h5,.subscribe_wrapper h5 {

     color:#FF7F29;

font-size:18px

}

#btntEmailsub {

     clear: both;display: block;margin: 10px 0px;

}

form.btntEmailform {

     clear: both;display: block;margin: 20px 0px 0px;width: auto;

}

.emailText {

     background: url("http://lh6.googleusercontent.com/-mrp8bAEiUas/ULc875mjBCI/AAAAAAAAAAY/ORduMx38cYI/s800/email.png") no-repeat scroll 10px center #FFFFFF;border-radius: 4px 4px 4px 4px;border: 0px none;

     box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05) inset;

     color: #444444;margin: 0px 0px 15px;padding: 10px 40px;text-decoration: none;width: 70%;

}

.emailButton {

    -moz-border-radius:3px;

    -webkit-border-radius:3px;

    border-radius:3px;

    -moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);

    -webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);

    box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);

    background: -moz-linear-gradient(19% 65% 90deg,#0087B4, #0099CC, #0099CC 51%);

    background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0087B4));

    color:#f0f0f0;float:left; font-family:arial,helvetica,sans-serif;font-size:14px;font-weight:bold;

    text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);

    border: 1px solid #267ed4;padding: 10px 40px;

    cursor: pointer;

    width:100%;

}

.emailButton:hover {

    background: -moz-linear-gradient(19% 65% 90deg,#0082AD, #0099CC, #0099CC 51%);

    background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0082AD));

    color: #f1f1f1;

}

</style>

<div class="subscribe_outer">

 <div class="subscribe_wrapper">

  <h5>Subscribe Via Email</h5>

  <p class="stext">Subscribe to our newsletter to get all the latest updates to your inbox..!</p>

    <div id="btntEmailsub">

    <form target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=[YOUR_FEED_NAME]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">

    <input type="hidden" value="[YOUR_FEED_NAME]" name="uri">

    <input type="hidden" value="en_US" name="loc">

    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email">

    <input type="submit" value="Signup Now!" title="" class="emailButton"><br/>

    </form>

    </div>

  </div>

</div>



[YOUR_FEED_NAME] = nama akun feedburner, misal "mig33eagle"



4. Simpan



hasilnya dari style form di atas:











Labels: