Sexy Social Bookmarks v2

March 16, 2012

Bismillah
Dalam posting kali ini saya akan menghadirkan tutorial yang berjenis Share atau bisa disebut juga Social Bookmark dan kode dalam tutorial ini menggunakan jQuery dan nama dari pada posting kali ini adalah Sexy Social Bookmarks v2, karena yang versi 1 ada kekurangannya maka saya langsung saja share yang versi 2, berikut cara penerapannya
Preview:

Sexy Social Bookmarks v2

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:

</head>

Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function() { // xhtml 1.0 strict way of using target _blank jQuery('.sexy-bookmarks a.external').attr("target", "_blank"); // this block sets the auto vertical expand when there are more than // one row of bookmarks. var sexyBaseHeight=jQuery('.sexy-bookmarks').height(); var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height(); if (sexyFullHeight>sexyBaseHeight) { jQuery('.sexy-bookmarks-expand').hover( function() { jQuery(this).animate({ height: sexyFullHeight+'px' }, {duration: 400, queue: false}); }, function() { jQuery(this).animate({ height: sexyBaseHeight+'px' }, {duration: 400, queue: false}); } ); } // autocentering if (jQuery('.sexy-bookmarks-center')) { var sexyFullWidth=jQuery('.sexy-bookmarks').width(); var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width(); var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length; var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth); var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth; var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2; jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px'); } }); </script><br /> <style type='text/css'> div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important} div.sexy-bookmarks-expand{height:29px; overflow:hidden} .sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9gtvp7uBSY4C18a0WPT-bfQkbhZnoeWQAe6-WkHbFWeBs6elsuug8iz20wcKsjsfvrY1Agqk4U2M4metwYxP2R2UaU1F8TP6ZahpfotwTm-7YSRHiCa4tiCrtC2JHqe3F9Xa-7FGfl1Y7/') !important; background-repeat:no-repeat} div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important} div.sexy-bookmarks ul.socials{width:95% !important; margin:0 !important; padding:0 !important; float:left} div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important} div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important} div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important} div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important} .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://bnote.googlecode.com/files/sexy-sprite-new.png') no-repeat !important;border: 0;outline: none;} .sexy-digg{background-position:-980px bottom !important} .sexy-digg:hover{background-position:-980px top !important} .sexy-reddit{background-position:-700px bottom !important} .sexy-reddit:hover{background-position:-700px top !important} .sexy-stumbleupon{background-position:-630px bottom !important} .sexy-stumbleupon:hover{background-position:-630px top !important} .sexy-delicious{background-position:-1190px bottom !important} .sexy-delicious:hover{background-position:-1190px top !important} .sexy-yahoobuzz{background-position:-1120px bottom !important} .sexy-yahoobuzz:hover{background-position:-1120px top !important} .sexy-blinklist{background-position:-1260px bottom !important} .sexy-blinklist:hover{background-position:-1260px top !important} .sexy-technorati{background-position:-560px bottom !important} .sexy-technorati:hover{background-position:-560px top !important} .sexy-myspace{background-position:-770px bottom !important} .sexy-myspace:hover{background-position:-770px top !important} .sexy-twitter{background-position:-490px bottom !important} .sexy-twitter:hover{background-position:-490px top !important} .sexy-facebook{background-position:-1330px bottom !important} .sexy-facebook:hover{background-position:-1330px top !important} .sexy-mixx{background-position:-840px bottom !important} .sexy-mixx:hover{background-position:-840px top !important} .sexy-scriptstyle{background-position:-280px bottom !important} .sexy-scriptstyle:hover{background-position:-280px top !important} .sexy-designfloat{background-position:-1050px bottom !important} .sexy-designfloat:hover{background-position:-1050px top !important} .sexy-newsvine{background-position:left bottom !important} .sexy-newsvine:hover{background-position:left top !important} .sexy-google{background-position:-210px bottom !important} .sexy-google:hover{background-position:-210px top !important} .sexy-comfeed{background-position:-420px bottom !important} .sexy-comfeed:hover{background-position:-420px top !important} .sexy-linkedin{background-position:-70px bottom !important} .sexy-linkedin:hover{background-position:-70px top !important} .sexy-friendfeed{background-position:-1750px bottom !important} .sexy-friendfeed:hover{background-position:-1750px top !important} .sexy-link{ margin-left:25px; float:left} .sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>

Langkah 6
Setelah selesai lanjut cari kode dibawah ini

<data:post.body/>.

Langkah 7
Setelah ketemu masukan (copy paste) kode dibawah ini dibawah kode pada langkah 6:

<div class="subbox"><div id='search' style='display:inline;'><form action='/search' id='searchform' method='get'><input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = "";}" type="text" value="Search..." /><br /> <input id="searchsubmit" type="submit" value="Search" /><br /> </form></div><table><tr> <td><div class="rssbox"><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCF74JyKeXqjmcES845-1dPKS5zZ-V1s-N58BFmdTHBqKE2PEA6tXycCv-cJUnP6JRVR9_B0Wosj0sxU_RtZkCv8AduhHQ1J-YSEES_OzbA7BVDJGnRkW9mrT_GbX2f9_JnBMIHTs7nmmP/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a><br /> </div></td> <td><div class="emailsbox"><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS_JBq01kuTisEDbOYqjVMdHMKwpHiIaLSGPPzduyBeW0g2ZFOB2a6BAU3rwhEMA-Te8QJVumPp13cuiEZa_A8dlfK7xSjfClRdSvs1NvSxPJym-Ls8pQgvntX95umbl2D4osA4iz7Sicj/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a><br /> </div></td> </tr><tr> <td><div class="twitterbox"><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYBEteFOO7Uvalm0uycseiLqEy3R_NjjnIA445NhPktCcSYxlbrWf-Ex9H_HqK8oeXasliuah-zv0VURs2lYO-iG8W-M2AM30DCAwjPeuQpHDyR7BsomX1A__wW7jCmqrBMlJYJvJmg78h/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a><br /> </div></td> <td><div class="facebookbox"><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGrAIx114nXt1c-9zatrurGZPJ6tUb4mskTBfhwvrzsmfoLgiXA5HW56fLijcPiW8n8CSn5DgNOHwMsI-fExA8t-_wKHqcmjWF8xNpHjwsbnZ8Vt2ph-ePaD90ogI_oA8AeoXV7Ex1DkQ/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a><br /> </div></td> </tr></table><p style="display:none;" align="center">Widget by <a href="http://www.ebloggertricks.com/" target="_blank">Eblogger Tricks</a></p><div class='addthis_toolbox'><div class='custom_images'><a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMsidnzV5jOmqyQ68F3A9PRgn4Ei3JeLTms0Jt6GoUuaxvAw4oeHm_PlE_UBiRhBIU3_2vDoWJGBHhP2Erg4EwZgXy-geyaGXl-L80Ynr0XeE2DXao0gBHXL8KBTYyB6sFWi7cq3duZD4/' width='32'/></a><br /> <a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJooTeU9zIlwaT5bT1U-516g3XJaE-wZfkA1XRnVdQmu8MXGSR8IxvsIOaTJWL4ccsDLKzsp0TduIP-t9ecju3ARiyhKIhM1BthxT9B4GUcqwEcX6vw_tFTli03axYxGNnboy83o10a4/' width='32'/></a><br /> <a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilaGIKTCDy_EN_5ga1Q4K-bQw1odgTKE1f6J8xp29mLkxkUiUClAGJqd_FA3E7ydnNNU5GyhNwarCdmPOYFUyO5nMrSOKnAkE4331wsL_H2M-nLS502grWmw4qw_2bbAPvDO8pe_tELNY/' width='32'/></a><br /> <a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRlOcWf_CJ2-HWEUnq_NrapDkgPatV-Z1XcY5R0j8jUo4SHfef4KBAW-Xg8yqQz3eC5ZDh2kbyC7WVQ5SR4eeCzC9u2XqGDsi-NC49JhjQ44H0XtcW1l3ZM1SN0GzWGGtS7VHtcHeUwbE/' width='32'/></a><br /> <a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7gu9JbnfbbrGpQpFdZYxmJG7lZurZuulkp9tDQlxGpxNRu66U4kHdFXGCu5pltevDynkBFM8h4cfLVKbaJ2p40paj7H3ROh7LXKwCsWZdgEfzdaHpw_xyhtfcOy9t0ryRanHRNhBzDSA/' width='32'/></a><br /> <a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJJsREh-0OuQ2Wd7dKLNKmRIyB_J2VqwpRsPBTDSmMG7Hpm8FX1FNPJf-TA6B7dM4OrhJFCzlO6NtBaivEFk12hlIs1_t7O5FJ2_SqQLshxCPWinVMDv8TkHnRA-drjFlm2e0HR14OZc/' width='32'/></a><br /> <a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSQgz428kpB8VNul7XBU1o1tMoKHS29MJWOJo9I7W7JBXDYanMThmNvodC3dXe8KZOPrcrZcnGiH8HgYLu4VdSMktBN17GoF5dv6qVNpjhg0k0KAsKGvO4H-peMzOewbdTtF7Dh0qNmw8/' width='32'/></a><br /> </div><script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> </div></div>

Langkah 8
Klik Simpan, selamat mencoba...

Labels: Blog Design, jQuery

koderator

Sexy Social Bookmarks v2

March 16, 2012

0 Komentar:

Post a Comment