Memasang Widget Facebook, RSS, Twitter, Subscribe RSS Keren di Blog

 

Pada tutorial kali ni saya akan berbagi ilmu kepada sahabat blogger tentang Memasang Widget Facebook, RSS, Twitter, dan Subscribe RSS di Blog yang saya curi dari sebuah website

Widget Ini Mempunyai 4 Fungsi Sekaligus Jadi Bisa Hemat Tempat Di Blog
-Untuk Facebook
-Untuk Twitter
-Untuk RSS
-Untuk Subscribe RSS

Bila sobat ingin membuat nya di blog sobat silahkan ikuti langkah-langkah nya :
1. Login ke blogger
2. Kik menu blogger lalu pilih Tamplate
3. Klik Edit HTML
4. Jangan lupa centang Expand Widget Tamplates
5. Lalu cari ]]></b:skin> (untuk mempermudah pencarian gunakan ctrl + f )
6. Copy kode css di bawah ini dan pastekan diatas kode ]]></b:skin>

#ft-content {
    background: url("http://www.cssheaven.org/wp-content/themes/cssheaven2/images/featuredbg.gif") no-repeat scroll left bottom transparent;
    float: right;
    height: 210px;
    position: relative;
    width: 417px;
}

.rsslink {
    display: block;
    height: 53px;
    position: absolute;
    right: 15px;
    top: 5px;
    width: 52px;
}

#topsubscribe {
    background: url("http://www.cssheaven.org/wp-content/themes/cssheaven2/images/topsubscribe.png") no-repeat scroll 0 65px transparent;
    height: 37px;
    margin: 0 auto;
    padding-top: 65px;
    width: 320px;
}

.substat {
    font: 10px Verdana,Geneva,sans-serif !important;
    height: 16px;
    margin: 0 auto;
    padding: 5px 0;
    width: 300px;
}
.twtrlink {
    bottom: 17px;
    display: block;
    height: 47px;
    position: absolute;
    right: 30px;
    width: 47px;
}
.fblink {
    background: none repeat scroll 19px 50% transparent;
    display: block;
    height: 44px;
    position: absolute;
    right: 141px;
    top: 154px;
    width: 44px;
}
.fldemail {
    display: block;
    float: left;
}
.fldemail input {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #4B453F;
    display: block;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 11px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    height: 37px;
    line-height: 37px !important;
    padding-left: 15px;
    width: 220px;
}
.fldbtn {
    float: right;
    padding: 6px 6px 0 0;
}
.readerstat {
    color: #A1A1A1;
    display: block;
    float: right;
    height: 15px;
    text-align: right;
    width: 100px;
}

7. Simpan tamplate
8. Masuk ke menu Layout
9. Klik Add a Gadget
10. Lalu pilih HTML/Javascript
11. Masukkan script di bawah ini

<div id="ft-content">

<a class="rsslink" href="/feeds/posts/default"><img height="53" width="52" alt="Subscribe To Feed" src="http://www.cssheaven.org/wp-content/themes/cssheaven2/images/rssicon.gif" /></a>

<div id="topsubscribe">
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=1put-blog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<div class="fldemail">
<input type="text" id="nlemail" onfocus="nl_focus(this);" value="Your email address.." name="email" /><input type="hidden" name="uri" value="CssHeaven-FreeWebsiteTemplates" /><input type="hidden" value="en_US" name="loc" />

</div>
<div class="fldbtn"><input type="image" class="nlsb" alt="Subscribe" src="http://www.cssheaven.org/wp-content/themes/cssheaven2/images/tsgobtn.png" /></div>


</form>
</div>
<div class="substat"><span class="nospam">Bukan Spam.</span> <span class="readerstat">100 Pembaca </span>

 </div>

<a class="twtrlink" rel="nofollow" href="http://twitter.com/Ramadana1puT/">
<img height="47" width="47" alt="Follow Me On Facebook" src="http://www.cssheaven.org/wp-content/themes/cssheaven2/images/twtricon.gif" /></a>

<a class="fblink" rel="nofollow" href="http://www.facebook.com/1putSingleAttacker"><img height="44" width="44" alt="Me On Facebook" src="http://www.cssheaven.org/wp-content/themes/cssheaven2/images/fbicon.gif" /></a> </div>

Keterangan
Ganti Warna Hijau Dengan Nama URL RSS Blog Anda
Ganti Warna Merah Dengan URL Twitter Anda
Ganti Warna Biru Dengan URL Facebook Anda

12. Simpan dan lihat hasilnya :)

Semoga Bermanfaat !!

Jangan lupa baca juga yang ini :)

Blogging

• Menampilkan Judul Posting Di Halaman Depan Blog
• Membuat Avatar Pada Kotak Komentar (Threaded Comment)
• Memasang Widget Facebook, RSS, Twitter, Subscribe RSS Keren di Blog
• Generator Smiley Chat Facebook
• Ringankan Beban Blog kalian Dengan Lazy Loader
• Pasang SEO Smart Link Untuk Blogspot
• About Me
• Banner Exc
• Link Exc