Sunday, March 18, 2012

Memasang Widget "Do You Like This Story" di Bawah Postingan

9:44 AM Hzndi 2 comments


Menurut saya Widget ini adalah salah satu yang paling keren karena selain bisa memasukan alamat email pada form email subcription, Widget ini juga menyertakan berbagai macam fitur, seperti Twitter follower, dan juga Facebook like tentunya. Tunggu apalagi, segera dicoba widget yang fenomenal ini.

1. Masuk ke Akun Blogger kamu.

2. Klik Rancangan --> Edit HTML dan Jangan lupa untuk membackup template kamu terlebih dahulu.

3. Cari kode <data:post.body/>.

4. Masukan kode CSS di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.mbttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-NY6M6CanRxmDPex7C8N3ToE2SbsnXX-GD_GzNNx5OJiWIb6cgJsEBn2BgRJeVKPgPa57fqh3UwLXyv2HwDyqxjiGl-l63coru-oCvbLuAj_nOb37oyWJtOtyaM9xcRXUbTZMiOJVKG3Q/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.mbtbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>

<div id='doulike-outer'>
<div id='doulike'>
<table width='100%'>
<tbody>
<span style='font-style: italic; font-size: 30px; font-family: arial,sans-serif, verdana;  color:#FF683F;'>Do you Like this story..?</span>
<tr>
<td>

<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='300'/>

</td>

</tr>

<tr>

<td align='left'> <p style='color:#666; font-style:italic; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tntbystc&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='tntbystc'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='mbttext' 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='mbtbutton' title='' type='submit' value='Submit'/>
</form>
</td>


<td><p style='color:#666; font-style:italic; margin:0px 0px 5px 0px;  '>Follow us!</p>
<a href='MASUKAN URL FEEDBURNER KAMU' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEishLit3dURBh3odXzJjV67FXgYDyBpHG_0L-zNIF9xtqu-KCwYfhq5fdNkHKXjj6QCDOxlFW4KzT_2W24p-XRQp5J0F4F_oXoP7gChB-6vMuWyUmgdLhvD4hU4ZZSwOa1E_f_KCfk5-ibp/s40/w2bRSS+.png'/></a>

<a href='MASUKAN URL TWITTER KAMU' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlQe3Lnmc5kdtdYK2oJqIvh_B5wunLjaHwsCrGj8WDsemvfjOeTVQEc-qHWeWgEQomZ5iMQ3nmfJuTaUwIBF1kjVIVACtYL2fHY_0DxHPzVFvPXkXJepUwVZc12H740yaMwOZIjmEq18A/s40/w2bTwitter.png'/></a>

<a href='MASUKAN URL FANPAGE FACEBOOK ATAU FACEBOOK KAMU' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCqJ93ogBta6OLxb_UO6SXyuKFpYqFPGGo-qBsgkmYegocnT4xXfAMPvGm0b4W73bHnQh8RGB47kx24WtBFXFeEtrXN0ZQECRaip0J0AWfRTHXpITGjElT3zYZOpTGZuJtvKJxYU_S7q_L/s40/w2bFaceBook.png'/></a>
</td>

</tr>

</tbody></table></div></div>
</b:if>


NOTE :

1. Ganti kode color:#FF683F karena itu adalah kode warna.
2. Ganti kode http://feedburner.google.com/fb/a/mailverify?uri=tntbystc dengan alamat feedburner kamu,misalnya hzndi punya alamat http://feedburner.google.com/fb/a/mailverify?uri=hzndi.
3. Ganti kode yang berwarna biru 'hidden' value='tntbystc dengan judul feed kamu, misalnya 'hidden' value='hzndi'.


5. Simpan Template dan lihat hasilnya.

Jika ada pertanyaan, silakan beri di kotak komentar, Terima kasih untuk mybloggertricks.com atas kodenya :)

Postingan Terkait:

Blogger
Widget

Posted in: ,

2 comments:

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More