Social bookmark share box baru untuk blog kawan, dengan efek animasi di-hover. Dengan menambahkan ikon jaringan sosial ke blog kawan, yang pasti akan meningkatkan trafik dan tentunya bikin cantik penampilan blog kawan. Ok kawan.... langsung aja , jika kawan ingin pasang Social bookmark seperti blognya kawan Sing Stright , kawan bisa ikuti sedikit tutorial dibawah ini :
1. Kawan login dulu ke blogger.com
2. Masuk ke Rancangan >> Edit HTML >> Klik expand widget templates
3. Cara cepat tekan CTRL:+F kawan cari kode ]]></b:skin>
4. Copast kode dibawah ini sebelum kode tersebut kawan.
| /* Fancy SocialBookmark*/ #sharebox{ height:48px; width:400px; margin:0; padding:5px 0; } ul.sharebox { margin:0px; padding:0px; list-style:none; position:relative; display:block;} ul.sharebox li { float:left; margin:0 0 0 0px; padding:0px; position:absolute;} ul.sharebox li a { margin:0 0 0 -24px; display:block;} ul.sharebox li a:hover { margin:0 0 0 -8px; } ul.sharebox li img { border:none;} |
5. Cari kode </head> kawan, Copast kode script dibawah ini sebelum/diatas kode </head> kawan.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'>(function($){ $.fn.sharebox = function(){ var element = this; $(element).find("li").each(function(i){ $(this).css("z-index", 12- i); if (i>0) $(this).css("left", i * 24 + 100); }); } })(jQuery); </script> <script type='text/javascript'> $(document).ready(function(){ $("#sharebox").sharebox(); }); </script> |
6. Cari kode <data:post.body/> kawan, jika ada dua Copast kode dibawah ini sebelum atau sesudah kode <data:post.body/> yang ke dua kawan.
| <ul class="sharebox" id="sharebox"> <li><img alt="Share this" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx1UTkrzsv9jSKALfexnf7IAl5gRXDsbNf5sIUS-ueN_Wx6NlEo24tntDuL8ZMm-NLmZSCoxn7rk1G-LeX5Wai4a09f7dCW7Nm4SVNw9K7QOQcjLioqp3y2LULHTTwCvDZpNKpS18dpwE/s400/sharethis.png" /></li> <li><a expr:href="" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Digg" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnFKvnm934Gk0wvDhTN8ZqavW6sGO5fE6WdBVhPAs4xRejbsRGT6dMDg6IqtsS2K7KzOzymKSKtMWukPtm_bPpT1_WcCSnTrKwjLTehkZottktYVat9Jsqwf0VBQoQKsaf4uAcuUouog/s400/digg_48.png" /></a></li> <li><a expr:href="" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to StumbleUpon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm2jT82_D97JjEml8N4erjw6M3vAfZ-DISXVB0FEtanQriMvxLLznMAM_TiE7QD5gPqb6D9FljoD8wF6cnf60eKDRmCzvigfhevWb57aHo7fbjqRVwvc771ya2Tc2Aa53ED6Lcau7Mh2c/s400/sumbleupon_48.png" /></a></li> <li><a expr:href=""http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Delicious" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBlkVUWTxIEAKGD5cKosF-nvMd-OpW2zI2TZ4zUmWbDhfGSJiLdpY8Cvt0v7-DEpEVfnIAMor-If1rR6na-eklsWP422eD3Bh-77xEZxq4cWGgOFsvOacdN7-2nCjAZGsoB62tldYRsA/s400/delicious_48.png" /></a></li> <li><a expr:href="" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Technorati" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoaX6GKoAT3m3yvaZGjwxUdNH5tdu5FBwiCHyhzaOeWuXRKCJG05BEhr2QSkD9AwBoLclBXRKRvZm5Nmx4R8Zf53etTllhLfoxm5o25tF2ZXCtLt8sH1B3-uvL2udSARC7UYNR6r09Neo/s400/technorati_48.png" /></a></li> <li><a expr:href="" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Reddit" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdYN-dV4QLDBvE21SVhzEP3oc7_jBENv-W29kX5LWZMVjbntuVv2Gsfl7wMn6YBl_CpbyHjhZ2R38VOK2w-p_qzyxnD4iYAmvoxqdgJmSkD9141UCHW3_KmdgePflDB4-P1Or3yv5V6s8/s400/reddit_48.png" /></a></li> <li><a expr:href="" http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Mixx" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTECPlq3Bd2X9-zbAO6ZsuiZXakLYZQ3T4lhrE4SaYoyNu6bzsOOlhHEms0s66LJNLpBZWM0MEHTCJ_gImk9QoyQovoJImJw0YgaUB8qt2xtfvfyLspn2GP3Qqhplg9g5ZhyRqIMgHHOE/s400/mixx_48.png" /></a></li> <li><a expr:href=""http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url" href="" target="_blank"><img alt="Sumbit to Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETLOPQZ83uXKx1Yeb_SMIPp8R6QpsHQXD5WJIqYUzCG4if4AEO0WWL4RSNUL-mVMwYo8g80Nni7XpwHavCeZH3ZjV6wEB1MOVh4ptCq36HCWWZFyViN25zb8fLQSdZ7oodLnT9riHuug/s400/twitter_boxed_48.png" /></a></li> <li><a expr:href="" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Furl" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0YXxw4bLRRytDnIM3lSGfK4s4lmgUjscTtaTNbGt28YocvXbomk6iScFu_7js-Wx3LaKImEFImv5GxACTyYKES8ydgTIm8dKsWukzWK8afIBv4jVAkZ9wXb-H6vPVg4Hxrnpt2kfHN5g/s400/furl_48.png" /></a></li> <li><a expr:href=""http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Design Float" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZJbcIV60_KSSENmvUZvBkXyGi1f7Fl1GYcmTqemCRi6nOmMxPOe8kiRRuHYI5AGIw_fMPa_N6wvx68Ji4J-ra-Z5gRquc1CQPPd4Sx3JQhVTYgIbZrLU4kbIS7DFLIjPHKA8X9__xmA4/s400/designfloat_48.png" /></a></li> <li><a expr:href=""http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Blinklist" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9jICITHUI25H-_ZB5kPBREds-wEqHk2IO3CYBSgjkpsS0jO24qiDnxpHZ1Dbc8D7JjDe6YH7KzWEk1aZ-nsEcdIG8zp0vOLIAoD6EARTCP71uXpzU8UgCHclLuGivuJyomi8DHJEj4UU/s400/blinklist_48.png" /></a></li> <li><a expr:href=""http://buzz.yahoo.com/article/" + data:post.url" href="" target="_blank"><img alt="Sumbit to Yahoo Buzz" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaOkuOnV_daAWmvdlK-SIlT8SlyHLAIZzJ_lntbyiwi7AvAzdBgns1B8MEbJ2tigl3BarqKW04mlnxXrNmulkINXhVeurRyz9LbnlE5LMEBss47mRBQkdczJhzwsGzGPxzfuhFQuSWDyk/s400/yahoo_48.png" /></a></li> <li><a expr:href=""http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title" href="" target="_blank"><img alt="Sumbit to Google Bookmarks" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVVrRkBRjnIR3jEBhotpn2XWeqUumANOQb73Ow0jKKTjBhuVjThm3EHILRlNzinD9upuRQIS-Ykd_0G6seohAb4opzqVQdnoQLrmhv9bb7gvjQw8yPTfDkw2AdoAGamYCMxVwTBCqHv4/s400/google_48.png" /></a></li> </ul> |
7. Save/Simpan template
Nb. Sebelum kawan mengganti dengan code2 diatas mohon di backup dahulu template anda ini sangat penting apabila mengalami kegagalan.
