Cara Membuat Tombol Share Menarik di Blog

Bagikan :

Cara Membuat Tombol Share Menarik 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

<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 bawah kode ]]>

atau

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 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

Agar tombol share (button share) hanya muncul di halaman posting blog tambahkan kode sebelum kode button share di atas dan tag penutup di bawah kode button share

Itulah Cara Membuat Tombol Share Menarik di Blog dari saya, semoga bermanfaat.

Facebook

Twitter

Google+

Pinterest

Posted by : Rizal Firdaus

2 Comments

Minggu, 26 April 2015