Labels: Widget
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode beerikut ini: ]]></b:skin>
Langkah 5
Letakkan kode CSS dibawah ini diatas kode langkah 4
* SOCIAL ICONS - GENERAL *
***********************************/
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.delicious { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYVOIVYH64ZciVHfwxQVIiKjeuJSB7M7Q64XDXYVw1WFw2moeanUBWEwEI4HTElG7UURhSu5Am0LJ6RBceYxG1iq_PKr1_v8TbTsUHeLwoSBrGYaWOF3S8ts-71PihM-C4NLhwMZq6GYY/s1600/delicious.png"); }
li.digg { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigST3GdniGwOVrU_eKolsOpBibpSpuJfibdCnqS9cY3Epkib_re_lCa1aP1cMR9pGIFtcSKD5rb2Had3AsF-pwRsfJzVP9rOiZ4PuVPC7J8lefZ0k1gPR5bjRIl5mwlCUiDY9TlmSmNVY/s1600/digg.png"); }
li.facebook { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQHrp09-4uTAnu-qKmuKg9bX5Nvqi5NEd8UK6CZbTlt9ZHs9HlC0O_iwYWhxMBWSbrCkGyyR0-oHTzmoCXV8iuA4VPSSLLnuBz6aH1EOoE4B-tslXeyImxB8WJywZDs8CVTySorTgXVGE/s1600/facebook.png"); }
li.flickr { background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhooFt-UPXJZnUZwy6LgyvcLg-tMpkspenTiA5m26mlST7bYCBNiJ-mkkFVAHQWe6gnG2RWHBeUMezSsxrLoyAbfP7YIKPt9OQgps2cBSw2YWKvcbcOXmJx7ZwIdg9gwV_FXLro18zRv70/s1600/flickr.png"); }
li.linkedin { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnH7rFar7gdY753LcmDHF-qFv8WPKrpuOGXTB3GJhFgpdUO7Tl8yGNBH3ljOG_YnBNrgnH4EjpFpLa-gms3MYZrvhC1JwrNPIHp0OyzrJhJo6fN0RQ-n-YRyUDTMe1OjxXHi-FzQzpPwg/s1600/linkedin.png"); }
li.reddit { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIGvuXR2TctGYUOPsky7NW7lsXfDPaQmwyfeqc4Ocn0G1LnLY06oYQYW7xJueq2BvZVspSkiPvMJAbC1fpWUyfOXzcbn5wMvdQySTzwzT0xnX4ouH6Ee7Gp71QoLOE6D0_acoivNymbDA/s1600/reddit.png"); }
li.rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinLoPYGYc5k4jPV9VGKdQ1hcd407BJMV0xMdHPMk8T4cnVnkNS16sCOkO72ZEdNu1tnHw0td0ipNJRn3NSSEz1Un1aMTd1-XUfZlE8VTveYxH2FJ8HnJ2R9I0KD3dXLhDBezBojzYJLHQ/s1600/rss.png"); }
li.twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwof7Ln6L13ciQBmKJMZ8vUvv68MlzCKWiFkAlkmKk1mLZHNFVrTw8sM-dMm1Qvb304YO1Qbh8XNUcDS7XkzSBLh9O6seK87jOz6Q58Y1n54QdDFuAF8odPw7ww6JKgUioSH1hYGdLjS8/s1600/twitter.png"); }
Setelah itu berikutnya cari kode <div class='post-footer'>
Langkah 7
Dan letakkan kode dibawah ini diatas kode langkah 6
<b:if cond='data:blog.pageType == "item"'>
<ul class="social" id="jquery">
<li class="delicious">
<a href="http://del.icio.us/post?url=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title"></a>
</li>
<li class="digg">
<a href="http://digg.com/submit?url=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title"></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/sharer.php?u=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title"></a>
</li>
<li class="flickr">
<a href="http://www.flickr.com/people/59053382@N04/"></a>
</li>
<li class="linkedin">
<a href="http://www.linkedin.com/"></a>
</li>
<li class="reddit">
<a href="http://www.reddit.com/submit?url=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title"></a>
</li>
<li class="rss">
<a href="http://feeds.feedburner.com/JqueryShareBookmark"></a>
</li>
<li class="twitter">
<a href="http://twitthis.com/twit?url=%22%20+%20data:post.url%20+%20%22&title=%22%20+%20data:post.title"></a>
</li>
</ul>
</b:if>
Langkah 8
Letakkan kode dibawah ini diatas kode </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://koderator.googlecode.com/files/fadescript.js" type="text/javascript">
</script>
Klik Simpan Template
Semoga bermanfaat, Selamat mencoba dan semoga berhasil
Post a Comment