Contoh Tombol Share dengan CSS3 seperti dibawah ini.
Bagi sobat yang ingin menggunakan button share seperti contoh diatas. ikuti langkah di bawah :1. Login ke Blogger.
2. Buka Dashboard blogger sobat lalu arahkan pada menu rancangan / Design / Template
3. Masuk pada Edit HTML > Expand Template Widget
4. Masukan kode dibawah ini sebelum kode ]]></b:skin>
#bookmarks {
padding:6px 0px;text-align:left; overflow: hidden;}
#bookmarks a {
padding:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border: solid 1px #c0c0c0; background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }
#bookmarks a:hover {
background: #ededed; border: solid 1px #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }
padding:6px 0px;text-align:left; overflow: hidden;}
#bookmarks a {
padding:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border: solid 1px #c0c0c0; background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }
#bookmarks a:hover {
background: #ededed; border: solid 1px #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }
5. Lalu cari kode <data:post.body/>
6. Copy Code dibawah ini :
<div id='bookmarks'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
<a class='tweet' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@BBW)"' rel='nofollow' title='Tweet This!'><img src='http://a1.twimg.com/a/1286563368/images/favicon.ico' style='vertical-align:middle;'/> Twitter</a>
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'><img src='http://cdn1.diggstatic.com/img/favicon.a015f25c.ico' style='vertical-align:middle;'/> Digg this</a>
<a class='save' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://secure.delicious.com/favicon.ico' style='vertical-align:middle;'/> Del.icio.us</a>
<a class='stumble' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='http://cdn.stumble-upon.com/favicon.ico' style='vertical-align:middle;'/>Stumble It</a>
</div>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
<a class='tweet' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@BBW)"' rel='nofollow' title='Tweet This!'><img src='http://a1.twimg.com/a/1286563368/images/favicon.ico' style='vertical-align:middle;'/> Twitter</a>
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'><img src='http://cdn1.diggstatic.com/img/favicon.a015f25c.ico' style='vertical-align:middle;'/> Digg this</a>
<a class='save' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://secure.delicious.com/favicon.ico' style='vertical-align:middle;'/> Del.icio.us</a>
<a class='stumble' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='http://cdn.stumble-upon.com/favicon.ico' style='vertical-align:middle;'/>Stumble It</a>
</div>
- Button Share diatas postingan : paste kode diatas <data:post.body/>
- Button Share dibawah postingan : paste kode dibawah <data:post.body/>
Letakkan pada <data:post.body/> yang kedua., jika template blog sobat hanya memiliki satu buah <data:post.body/>, tambahkan kode berwarna merah, hingga menjadi seperti dibawah ini:
<b:if cond='data:blog.pageType == "item"'>
==== Paste kode langkah ke-6 disini ===
==== Paste kode langkah ke-6 disini ===
</b:if>
Selamat Mencoba. :)
