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.
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.
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>
#anandadonie-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;} #anandadonie-share ul li {display: inline;background:none;margin:0;padding:0;} #anandadonie-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPGhVn5aYW_3dItY2yNIYZeIlNQ0aoS8jNFEsyp5hyphenhyphenLbfZiJ7vcTrwwCKiM11u5Rd6scxzcQDHNPRwNk3kT6-8SeKvmICTqiBm6SyoOKxpsOr6vU2I6eJ-795LT2zKWu5dKNcUuzS0AbQK/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; } #anandadonie-share ul li a.twitter {background-position: -0px -0px; } #anandadonie-share ul li a.twitter:hover {background-position: -0px -33px; } #anandadonie-share ul li a.facebook {background-position: -32px -0px; } #anandadonie-share ul li a.facebook:hover {background-position: -32px -33px; } #anandadonie-share ul li a.stumbleupon {background-position: -64px -0px; } #anandadonie-share ul li a.stumbleupon:hover{background-position: -64px -33px; } #anandadonie-share ul li a.digg {background-position: -192px -0px; } #anandadonie-share ul li a.digg:hover {background-position: -192px -33px;} #anandadonie-share ul li a.reddit {background-position: -160px -0px; } #anandadonie-share ul li a.reddit:hover {background-position: -160px -33px;} #anandadonie-share ul li a.google {background-position: -128px -0px; } #anandadonie-share ul li a.google:hover {background-position: -128px -33px;} #anandadonie-share ul li a.del-icio-us {background-position: -480px -0px; } #anandadonie-share ul li a.del-icio-us:hover{background-position: -480px -33px;} #anandadonie-share ul li a.mixx {background-position: -96px -0px; } #anandadonie-share ul li a.mixx:hover {background-position: -96px -33px; } #anandadonie-share ul li a.technorati {background-position: -416px -0px; } #anandadonie-share ul li a.technorati:hover {background-position: -416px -33px;} #anandadonie-share ul li a.linkin {background-position: -256px -0px; } #anandadonie-share ul li a.linkin:hover {background-position: -256px -33px;} #anandadonie-share ul li a.yahoobuzz {background-position: -448px -0px; } #anandadonie-share ul li a.yahoobuzz:hover {background-position: -448px -33px;} #anandadonie-share ul li a.myspace {background-position: -512px -0px; } #anandadonie-share ul li a.myspace:hover {background-position: -512px -33px;} #anandadonie-share ul li a.more {background-position: -576px -0px; } #anandadonie-share ul li a.more:hover {background-position: -576px -33px;}
6. Centang "Expand Widget Template" dan kemudian cari kode (Gunakan Ctrl+F)
<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>
<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
Biasanya kode 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'>
[Semoga Bermanfaat]
© copyright by Ananda Donie | Tutorial Blog, Cinema, Pendidikan, Mutiara Bijak, Download
"
"
"
Tidak ada komentar :
Posting Komentar
Accept criticism and suggestions from friends for the perfection of this Blog.
Hopefully this article useful,
Thank you :)