Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs. Karena ini memang diperlukan. Hal ini sangat bermanfaat, di antaranya adalah agar pengunjung dapat membagi sebuah postingan Anda di Sosial Media. Menulis-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Jadi jika blog Anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel Anda ke berbagai sosial media yang Anda miliki. Hal ini agar orang tahu blog Anda untuk melihat terus-menerus alamat blog Anda di Timeline mereka.
Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi posting ke sosial media yaitu dengan cara memasang tombol share buttons. Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik. Dan kali ini saya akan mempostingan sesuai judul yaitu Tombol Share Buttons Keren, Responsive di Blogger Dan Cara Membuatnya
Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi posting ke sosial media yaitu dengan cara memasang tombol share buttons. Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik. Dan kali ini saya akan mempostingan sesuai judul yaitu Tombol Share Buttons Keren, Responsive di Blogger Dan Cara Membuatnya
screenshoot:
Tombol Share Buttons Keren, Responsive di Blogger Dan Cara Membuatnya
Cara Pertama:
1. Buka Blogger - Kemudian Login.
2. Dashboard - Template.
3. Edit HTML.
Proses Pembuatan:
1. Mencari <CTRL + F> Resmi ]]> </ b: skin> Atau </ style>
2. Copy & Paste kod di bawah ini, dan Letakkan diatas kod ]]> </ b: skin> atau </ style>
/* Share Button */
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;}4. Copy & Paste kode di bawah ini, dan Letakkan diatas kode </ head>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>6. Copy & Paste kode di bawah ini, dan letakkan dibawah kode <data: post.body />
catatan:
". Biasanya kode ini, lebih dari satu silakan Anda pilih yang kedua dari atas. Atau Anda dapat mencoba satu / satu. "
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='"http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&title=" + data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title="+ data:post.title' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:post.snippet' onclick='window.open(this.href, 'windowName', 'width=550, height=600, left=24, top=24, scrollbars, resizable'); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li>
</ul>
</div>Sekian Tips blogger kali ini, bila ada kesalahan? Jangan ragu-ragu untuk memberi komen. Terakhir sila anda lihat posting blog anda. Sekian dari saya Semoga Bermanfaat! Thank 's For Reading & Sharing and Visited:
Tombol Share Buttons Keren, Responsive di Blogger Dan Cara Membuatnya..SEKIAN TERIMA KASIH.
EmoticonEmoticon