Setelah pernah memposting tombol share keren dibawah postingan, tombol share efek 3D, sekarang saatnya Kang AP memberikan trik bagaimana cara membuat 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 menggunakan webfont Oswald, untuk memanggilnya silahkan anda pasang kode berikut dibawah kode <head> kecuali jika template anda sudah terdapat webfont Oswald nya maka tidak perlu untuk menempelkan kode 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 kode dibawah ini tepat dibawah kode <data:post.body/>
Baca juga :
» Cara Mudah Membuat Kolom Langganan Keren Dibawah Postingan
» Cara Memasang Profile Keren Pada Blog
» Tips Paling Jitu Agar Daftar Adsense Mudah 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 membuat tombol share valid HTML5 pada blog, semoga dapat membantu dan bermanfaat. Terima kasih telah berkunjung di blog yang sederhana ini. Happy blogging...!!
0 Response to "Cara Membuat Tombol Share Valid HTML5 Pada Blog"
Post a Comment