 |
Terima kasih telah berkunjung ke blog saya Maestro.
Kali ini saya akan memberikan agan agan Tips Cara Membuat Tombol Share di Blog — Tombol Share (button share) kali ini mempunyai tampilan yang sangat menarik dan lengkap, di antaranya efek hover berwarna serta fully share. Untuk cara membuatnya simak langkah-langkah berikut ini:
1. Login ke Blogger dan masuk ke dashboard blog
2. Pilih "Template" dan klik "Edit HTML"
3. Salin dan letakkan kode berikut ini di bawah kode <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
4. Setelah itu salin dan letakkan CSS berikut ini tepat di Atas kode ]]></b:skin>
Untuk mempermudah pencarian kode tekan tombol CTRL + F di keyboard kemudian tuliskan kode tersebut di kolom pencarian yang telah tersedia dan tekan enter.
/* CSS Button Share */ .sharepost { overflow:hidden; text-align:center; margin:20px auto; } .sharepost li { width:19%; padding:0; list-style:none; float:left; margin-right:1.2%; } .sharepost li a { padding:10px 0; background-color:#aaa; color:#fff; display:block; transition:all 0.3s linear; } .sharepost li a:hover { opacity:1; color:#fff; transition:all 0.3s linear; background:#444; } .sharepost li .twitter { background-color:#55acee; } .sharepost li .facebook { background-color:#3b5998; } .sharepost li .gplus { background-color:#dd4b39; } .sharepost li .pinterest { background-color:#cc2127; } .sharepost li .linkedin { background-color:#0976b4; } .sharepost li:last-child { margin-right:0; } .sharepost li .fa:before { margin-right:5px; } .sharepost ul { margin-left:20px; margin-right:20px; }
5. Selanjutnya cari kode <data:post.body/> kemudian letakkan kode ini tepat di bawahnya
Biasanya kode tersebut berjumlahkan lebih dari satu, maka letakkan kode ini di bawah kode yang kedua atau yang ketiga (Desktop dan Mobile).
<div class='sharepost'> <ul> <li><a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li> <li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li> <li><a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus'/>Share</a></li> <li><a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li> <li><a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.title' target='_blank'><i class='fa fa-pinterest'/>Share</a></li> </ul> </div>
6. Save Template dan lihat hasilnya di halaman posting blog Anda :P
Agar tombol share (button share) hanya muncul di halaman posting blog tambahkan kode <b:if cond='data:blog.pageType == "item"'> sebelum kode button share di atas dan tag penutup </b:if> di bawah kode button share.
Itulah Cara Membuat Tombol Share di Blog dari saya, semoga bermanfaat.
Ditulis Oleh : Unknown ~ http://welcometomaestro.blogspot.com/
Sobat sedang membaca artikel tentang Cara Membuat Tombol Share di Blog . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini :p, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya :p
0 komentar:
Posting Komentar