Senin, Juni 10, 2013
Cara Membuat Widget Sharing With Hover Efeck Menakjukan
Membuat widget sharing social adalah hal biasa jika kita mencoba untuk membagikan suatu artikel menarik di media sosial, namun apa jadinya bila widget tersebut dibuat dengan properti baru dan daya tarik yang besar untuk benar benar membuat para pengunjung mencoba menyentuh widget tersebut dan membagikan di jejaring social, yah pasti itu akan membuat traffic dari blog kita lebih tinggi.. apakah sobat pernah menyentuh bagian yang ada digambar disamping, coba sentuh dengan kurso dan rasakan perbedaannya setelah disentuh,, letaknya ada dibawah artikel ini,,
Baiklah saya akan mencoba membuat Demo widget ini bekerja dipostingan saya..
Perhatkan yang dibawah ini :
Menarik bukan, terutama bagi para pecinta blogging, saya tidak akan menganggap ini menakjukan kalau saja diantara kalian yang telah bosan bergelut dengan CSS dan telah menguasai Javascript dan Telah mencoba berbagai code dari PHP, oh ya ini kan blogspot, jadi jangan berharap keunggulan anda di PHP bisa digunakan disini..
Lupakan saja,, Mari kita mulai..
Cara membuatnya yang pertama adalah :
- Masuk ke Blogger -- Pilih Blog yang ingin di Coba : Klik pada bagian Template
- Kemudian Edit HTML - dan Cari Code Berikut ini :
]]></b:skin>Setelah Ketemu copy dan paste code dibawah ini tepat diatas code ]]></b:skin>.
#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}Setelah di Paste, sekarang memilih tempat untuk meletekan widget ini dibawah posting, Cari code kira kira yang seperti ini:
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdza1rqLrIdEqTwNk7-MPF9OBFmNf1QNEfvkyYKzrATSu-qmEeGpAjbIINvkATsxa-GQLE_wWJsQAUNf2LyiOC3zWupDhF_b9Ob0c36ryrjPddAr6OfaqOu4jnYjoy7bWZHY_XCEWW5Zlc/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; }
#w2b-share ul li a.twitter {background-position: -0px -0px; }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px; }
#w2b-share ul li a.facebook {background-position: -32px -0px; }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.stumbleupon {background-position: -64px -0px; }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.digg {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover {background-position: -192px -33px;}
#w2b-share ul li a.reddit {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover {background-position: -160px -33px;}
#w2b-share ul li a.google {background-position: -128px -0px; }
#w2b-share ul li a.google:hover {background-position: -128px -33px;}
#w2b-share ul li a.del-icio-us {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.mixx {background-position: -96px -0px; }
#w2b-share ul li a.mixx:hover {background-position: -96px -33px; }
#w2b-share ul li a.technorati {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.linkin {background-position: -256px -0px; }
#w2b-share ul li a.linkin:hover {background-position: -256px -33px;}
#w2b-share ul li a.yahoobuzz {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more {background-position: -576px -0px; }
#w2b-share ul li a.more:hover {background-position: -576px -33px;}
<data:post.body/>Atau Bisa
<div class='post-footer-line post-footer-line-2'>
<div class='post-footer-line post-footer-line-1'>
Saya tunjukan diatas bukan berarti akan bekerja dibagian itu, jadi sesuaikan dengan bagian dari blog anda sendiri, jika untuk saya sendiri, saya meletakannya di bawah code <data:post.body/>. dan menambahkan code <div class="clear"/>. gunanya agar widget tidak ditampilkan dibagian beranda (HOME).. bisa juga anda menambahkannya diatas posting atau dibawah judul posting.. dengan meletekan code dibawah ini diatas code <data:post.body/>..
<b:if cond='data:blog.pageType == "item"'>
<div id='w2b-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>
baiklah jika telah di letakan, simpan template anda, dan lihat hasilnya.. bila anda kurang beruntung, bagikan sedikit pesan anda didalam komentar,, karena ini adalah tutorial.. jadi jangan berharap widget ini akan terlihat sesuai dengan keinginan anda..
|
Get Free Email Updates Daily! |
Langganan:
Posting Komentar (Atom)
thanks infonya gan ...
BalasHapusditunggu kunjungan baliknya