Tombol Social Share dengan Font Awesome ini cukup ringan untuk dibuka, karena tidak ada gambar yang diloading, semuanya berupa script dari web-nya Font Awesome yang dipanggil, sehingga tidak akan membuat berat Blog Anda.
Bagi Anda yang tertarik ingin memasangnya, silakan ikuti prosedur di bawah ini :
1. Masuk ke Template >> Edit HTML
2. Pasang dulu Kode pemanggil Font Awesome di Blog Anda (jika sudah ada lewati langkah ini). Copy dan paste Kode di bawah ini setelah Kode <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
3. Salin kode CSS Social Share di bawah ini dan letakkan di atas kode ]]></b:skin> atau </style>
.share_posting {
overflow: hidden;
margin-top: 20px;
padding: 2px 0;
border-top: 1px solid #eee;
}
.share_posting h3 {
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
color: #757575;
float: left;
display: inline-block;
padding-top: 1px;
}
.share_posting li {
display: inline-block;
float: left;
padding-left: 10px;
}
.share_posting li a {
color: #757575;
font-size: 13px;
text-decoration: none;
}
.share_posting li a:hover {
text-decoration: underline;
}
.share_posting li a:active {
color: #3775DD;
}
4. Salin kode di bawah ini dan letakkan setelah Kode <data:post.body/>. Kode <data:post.body/>. biasanya ada lebih dari satu, silakan Anda coba satu persatu sampai ketemu yang cocok.
<div class='share_posting'>
<h3>Share This:</h3>
<li><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> Facebook</a></li>
<li><a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> Twitter</a></li>
<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/> Google Plus</a></li>
<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/> Pinterest</a></li>
<li><a expr:href='"http://www.linkedin.com/shareArticle?url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=600, height=400, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin-square'/> Linkedin</a></li>
</div>
5. Simpan template Blog Anda. Sekarang Tombol Social Share dengan Font Awesome di bawah Postingan sudah ada di Blog Anda.
Contohnya bisa Anda lihat di Blog BTB ini. Thanx.
No comments:
Post a Comment