Membuat Tombol Social Share Facebook, Twitter, Google Plus dengan Font Awesome
December 7, 2015
Cara Membuat Tombol Social Share Facebook, Twitter, Google Plus, Pinterest, dan Linkedin dengan Font Awesome.
BERIKUT ini cara membuat tombol social share dengan menggunakan Font Awesome di bawah tiap posting blog.
Sebelumnya CB sudah share tips serupa: Memasang Icon Sosial Media di Sidebar Blog dengan Font Awesome.
Kode Social Share Button untuk membagikan tulisan blog ke berbagai media sosial ini tanpa gambar dan link eksternal, sehingga fast loading, selain simple banget. Ini penampakannya yang muncul di bawah postingan blog:
2. Pasang/Copas link Font Awesome berikut ini di bawah kode <head>
BERIKUT ini cara membuat tombol social share dengan menggunakan Font Awesome di bawah tiap posting blog.
Sebelumnya CB sudah share tips serupa: Memasang Icon Sosial Media di Sidebar Blog dengan Font Awesome.
Kode Social Share Button untuk membagikan tulisan blog ke berbagai media sosial ini tanpa gambar dan link eksternal, sehingga fast loading, selain simple banget. Ini penampakannya yang muncul di bawah postingan blog:
Membuat Tombol Social Share dengan Font Awesome
1. Template > Edit HTML2. Pasang/Copas link Font Awesome berikut ini di bawah kode <head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
3. Copas kode CSS Social Share berikut ini 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;
}
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. Copas kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga (jika ada lebih dari dua).
<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>
<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. Save template!
Kini Tombol Social Share Facebook, Twitter, Google Plus, Pinterest, dan Linkedin dengan Font Awesome sudah muncul di bawah posting blog Anda. Good Luck! (http://www.contohblog.com).*
Sumber Kode
Sumber Kode
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
CB Blogger
No comments on Membuat Tombol Social Share Facebook, Twitter, Google Plus dengan Font Awesome
Post a Comment