News Update :

Monday, January 16, 2012

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

Share this article :

13:20 |


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=cheatssoul', '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/Cheats Soul/">
<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/pages/Cheats-Soul/186256631429562"><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. Lihat hasilnya

Luangkan waktu sobat untuk memberi komentar 

Note :- Kindly g+1 this post if you found it useful
Euro Live Streaming
You Might Also Like :


Post a Comment