Setelah pernah memposting tombol share keren dibawah postingan, tombol share efek 3D, kini saatnya Kang AP memperlihatkan trik bagaimana cara menciptakan tombol share valid HTML5. Tanpa banyak ba bi bu lagi, silahkan ikuti langkah-langkah dibawah ini !
1. Login ke Blogger
2. Pilih Template » Edit HTML
3. Karena tombol share ini memakai webfont Oswald, untuk memanggilnya silahkan anda pasang arahan berikut dibawah arahan <head> kecuali bila template anda sudah terdapat webfont Oswald nya maka tidak perlu untuk menempelkan arahan ini
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css'/>
.share {
border-bottom: 1px dotted #999;
border-top: 1px dotted #999;
font-family: Oswald, Arial, sans-serif;
font-size: 16px;
line-height: 1.8em;
position: relative;
text-transform: uppercase;
margin: 20px 0;
padding: 3px 0 4px;
}
.share a {
color: #fff;
font-size: 14px;
margin-right: 10px;
text-align: center;
text-transform: none;
}
5. Selanjutnya pasang arahan dibawah ini sempurna dibawah arahan <data:post.body/>
Baca juga :
» Cara Praktis Membuat Kolom Langganan Keren Dibawah Postingan
» Cara Memasang Profile Keren Pada Blog
» Tips Paling Jitu Agar Daftar Adsense Praktis Diterima
<div class='share'>
<span style='float: left; margin-right: 15px; margin-top: 1px;'>Please Share » »</span>
<a class='share_facebook' expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.url' expr:onclick='"window.open(this.href,\"_blank\",\"height=430,width=640\");return false;"' rel='nofollow' title='Bagikan ke Facebook'>Facebook</a>
<a class='share_google' expr:href='"https://plus.google.com/share?url=" + data:blog.url' expr:onclick='"window.open(this.href,\"_blank\",\"height=600,width=530\");return false;"' rel='nofollow' title='Bagikan ke Google+'>Google+</a>
<a class='share_twitter' expr:href='"https://twitter.com/share?url=" + data:blog.url' expr:onclick='"window.open(this.href,\"_blank\",\"height=430,width=640\");return false;"' rel='nofollow' title='Bagikan ke Twitter'>Twitter</a>
</div>
6. Simpan dan lihat hasilnya
Demikian cara menciptakan tombol share valid HTML5 pada blog, biar sanggup membantu dan bermanfaat. Terima kasih telah berkunjung di blog yang sederhana ini. Happy blogging...!!
Sumber http://ap-thea.blogspot.com
EmoticonEmoticon