Bissmilah
Social Bookmark merupakan salah satu penghubung trafic dari blog kita, dengan adanya Social bookmark ini artikel kita bisa di share oleh berbagai kalangan, dan bagi yang suka dengan social bookmark mungkin ini adalah pilihan terakhir, karena social bookmark ini dirancang sedemikian rupa



Cara Membuat Menu Social Bookmark Dengan Fade Effect

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"); }
Langkah 6
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 == &quot;item&quot;'>
<ul class="social" id="jquery">
<li class="delicious">
<a href="http://del.icio.us/post?url=%22%20+%20data:post.url%20+%20%22&amp;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&amp;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&amp;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&amp;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&amp;title=%22%20+%20data:post.title"></a>
</li>
</ul>
</b:if>
Untuk penempatan bisa menurut selera sobat masing-masing
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>
Langkah 9
Klik Simpan Template

Semoga bermanfaat, Selamat mencoba dan semoga berhasil

Labels:

0 Komentar:

Post a Comment

© 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger