Cara Menciptakan Tombol Share Buttons Keren, Responsive Di Blogger

Baca Juga

Mungkin tombol share ini sudah tidak absurd lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya yaitu biar pengunjung sanggup membagikan sebuah postingan anda di Sosial Media. Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas sebuah blog. Kaprikornus bila blog anda ingin menjadi popularitas harus rajin dan konsisten mendistribusikan artikel anda ke banyak sekali sosial media yang anda miliki. Hal ini biar orang tahu blog Anda untuk melihat terus-menerus alamat blog anda di Timeline mereka.

Tujuan membuatkan ke sosial media yaitu untuk meningkatkan pengunjung bila pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk membuatkan postingan ke sosial media yaitu dengan cara memasang tombol share buttons. Dengan tombol share buttons, pengunjung sanggup dengan gampang membuatkan artikel ke sosial milik ia dengan hanya satu klik. Dan kali ini aku akan mempostingan sesuai judul yaitu Cara Membuat Tombol Share Buttons Responsive di Blogger

Screenshoot : 

Cara Membuat Tombol Share Buttons Keren, Responsive di  Blogger

Cara Pertama :
1. Buka Blogger - Kemudian Login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL + F >kode ]]></b:skin> atau </style>

2. Copy & Paste isyarat berikut ini, dan Letakkan diatas kode ]]></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;}

3. Jika sudah dipasang? Temukan lagi <CTRL +F > kode </head>
4. Copy & Paste isyarat berikut ini, dan Letakkan diatas isyarat </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>

5. Terakhir, silakan Anda Temukan <CTRL+F> kode <data:post.body/>
6. Copy & Paste isyarat berikut ini, dan letakkan dibawah kode <data:post.body/>
Catatan : 

". Biasanya isyarat ini, lebih dari satu silakan anda pilih yang kedua dari atas. Atau anda sanggup mencobanya satu/satu."

<div class='share-post'> <ul class='entry-share-list clearfix'> <li>Share This</li> <li class='facebook_share'> <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a> </li> <li class='twitter_share'> <a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> </li> <li class='google_share'> <a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a> </li> <li class='linkedin_share'> <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a> </li> <li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li> </ul> </div>

7. Simpan Template.

Sekian Tips blogger kali ini, bila ada kesalahan? Jangan sungkan untuk berkomentar. Terakhir silakan anda lihat postingan blog anda. Sekian dari saya Semoga Bermanfaat! Thank's For Reading & Sharing and Visited; Cara Membuat Tombol Share Buttons Keren, Responsive di Blogger