Cara Membuat/Memasang Widget Social Bookmark (Hover Effect):dede@net

Cara Membuat/Memasang Widget Social Bookmark (Hover Effect) - Masih dengan saya dengan postingan terbaru kali ini, tentunya yang berkategorikan Widget. Allhamdullilah dengan kesempatan yang bermanfaat ini saya dapat update di ANVITY Blog | Internet Learning. Widget yang akan saya bahas kali ini adalah widget Social Sharing/Bookmarking dengan gaya "Hover Effect". Mungkin judul (title of post) kali ini cukup panjang, tetapi tidak masalah. :D

- kembali ke laptop -

Widget sosial bookmark/sharing dengan gaya Popular Gray-scale/Color di blog/web. Maksudnya adalah ketika pointer/mouse ke salah satu icon di widget tersebut yang sebelumnya bewarna Abu-abu menjadi berwarna sesuai warna icon. Widget social yang saya berikan ini menurut saya cukup cool (baca: keren/indah) dengan dengan CSS3 dan jQuery. Widget ini sudah saya gunakan sejak lama karena saya suka sekali dengan widget ini. Maka dari itulah saya posting artikel ini. Untuk demo widgetnya silahkan lihat di halaman postingan bagian bawah blog ini.

Well, tanpa panjang lebar silahkan ikuti langkah-langkah dibawah ini.
1. Pastikan sahabat sudah login ke akun Blogger.
2. Masuk ke bagian "Template" pada Dashboard
3. Pilih (klik) "Edit HTML"
4. Cari kode ]]><b:skin> (Gunakan Ctrl+F)
5. Letakan kode CCS dibawah ini tepat dibawah kode ]]></b:skin>

#anvity-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#anvity-share ul li {display: inline;background:none;margin:0;padding:0;}
#anvity-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSoXy_5LQmCifefk59BVvBj9ViiQLJX8uhoFdd4ZNSV7zu-PeiCFiCt7u1dK3_fW8tBu0hZyc83-1FwMrRbf8llx3cEG4KZnye8v3CnfM6I0Vaa0Ma8hwpotOf2YQBSIW9GqcYDtGVhvEs/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#anvity-share ul li a.twitter {background-position: -0px -0px; }
#anvity-share ul li a.twitter:hover {background-position: -0px -33px; }
#anvity-share ul li a.facebook {background-position: -32px -0px; }
#anvity-share ul li a.facebook:hover {background-position: -32px -33px; }
#anvity-share ul li a.stumbleupon {background-position: -64px -0px; }
#anvity-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#anvity-share ul li a.digg {background-position: -192px -0px; }
#anvity-share ul li a.digg:hover {background-position: -192px -33px;}
#anvity-share ul li a.reddit {background-position: -160px -0px; }
#anvity-share ul li a.reddit:hover {background-position: -160px -33px;}
#anvity-share ul li a.google {background-position: -128px -0px; }
#anvity-share ul li a.google:hover {background-position: -128px -33px;}
#anvity-share ul li a.del-icio-us {background-position: -480px -0px; }
#anvity-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#anvity-share ul li a.mixx {background-position: -96px -0px; }
#anvity-share ul li a.mixx:hover {background-position: -96px -33px; }
#anvity-share ul li a.technorati {background-position: -416px -0px; }
#anvity-share ul li a.technorati:hover {background-position: -416px -33px;}
#anvity-share ul li a.linkin {background-position: -256px -0px; }
#anvity-share ul li a.linkin:hover {background-position: -256px -33px;}
#anvity-share ul li a.yahoobuzz {background-position: -448px -0px; }
#anvity-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#anvity-share ul li a.myspace {background-position: -512px -0px; }
#anvity-share ul li a.myspace:hover {background-position: -512px -33px;}
#anvity-share ul li a.more {background-position: -576px -0px; }
#anvity-share ul li a.more:hover {background-position: -576px -33px;}

6. Centang "Expand Widget Template" dan kemudian cari kode <data:post.body/> (Gunakan Ctrl+F)
7. Letakan kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='anvity-share'>
<ul>
<li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='"http://buzz.yahoo.com/submit/?url="+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u="+ data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

8. Save Template. Done!

Solusi untuk pencarian kode <data:post.body/>

Biasanya kode <data:post.body/> terdapat 3 buah, bahkan di HTML Template Blog ini sampai 4. So, untuk menyelesaikan masalah penemuan kode tersebut, silahkan letakan saja di salah satu ketiga kode berikut. Lebih bagus coba terlebih dahulu yang pertama dan lihat hasilnya.

<b:if cond='data:blog.pageType == "item"'><data:post.body/>

<div class='post-footer-line post-footer-line-1'>

<div class='post-footer'>

Enjoy and Happy Blogging!

Title Post: Cara Membuat/Memasang Widget Social Bookmark (Hover Effect)
Rating: 100% based on 9999989 ratings. 98 user reviews.
Author: Borneo08

Terimakasih sudah berkunjung di blog ini, Jika ada kritik dan saran silahkan tinggalkan komentar

Cara Membuat/Memasang Widget Social Bookmark (Hover Effect)

Solusi untuk pencarian kode <data:post.body/>

Entri Populer