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* 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
Labels: Widget
Post a Comment