Cara Membuat Flat Social Share Buttons di Blogger

Menge-share artikel ke sosial media mungkin merupakan salah satu cara untuk meningkatkan popularitas dan terkenalnya sebuah blog/situs. Tujuan berbagi ke sosial media adalah untuk meningkatkan pengunjung jika pengunjung tersebut tertarik dan meng-klik bersama. Salah satu cara untuk berbagi postingan ke sosial media yaitu dengan cara memasang tombol share buttons di blog Anda. Mungkin tombol share ini sudah tidak asing lagi dikalangan web atau situs. Karena ini memang dibutuhkan. Hal ini sangat bermanfaat, diantaranya adalah agar pengunjung dapat membagikan sebuah postingan anda di Sosial Media.

Pada kesempatan kali ini, saya akan membagikan Flat Social Share Buttons. Dengan tombol share buttons, pengunjung dapat dengan mudah berbagi artikel ke sosial milik dia dengan hanya satu klik saja.

Baca Juga :

Screenshoot :

Cara Membuat Flat Social Share Buttons di Blogger

Cara Pertama :

1. Buka Blogger - Kemudian Login.

2. Dashboard - Kemudian Template.

3. Edit HTML.

Proses Pembuatan :

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

2. Copy & Paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* CSS Share Button */
.sharepost li{width:19%;padding:0;list-style:none;}
.sharepost li a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li a:hover{opacity:1;color:#444;border:double #fff;}
.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 .twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li .pinterest:hover,.sharepost li .linkedin:hover{background-color:#444;color:#fff;}
.sharepost li{float:left;margin-right:1.2%}
.sharepost li:last-child{margin-right:0}
.sharepost li .fa:before{margin-right:5px}

3. Jika sudah dipasang? Temukan lagi kode <data:post.body/>
4. Copy & Paste kode berikut ini, dan letakkan dibawah kode <data:post.body/>
Catatan :

" Bisanya kode ini lebih dari satu, silakan anda pilih yang kedua. Atau anda bisa mencobanya satu/satu."

<b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='sharepost'>
                <ul>
                <li><a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter'/>Tweet</a></li>

                <li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/>Share</a></li>

                <li><a class='gplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + 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='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' target='_blank'><i class='fa fa-linkedin'/>Share</a></li>

                <li><a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' target='_blank'><i class='fa fa-pinterest'/>Share</a></li>

                </ul>
         </div> </b:if>

5. Supaya Responsive? Sekarang kita pasang script Bootstrapcdn atau Font Awesome. Karena Icon pada tombol share ini, menggunakan font awesome icons "Contoh : fa fa-facebook"
6. Selanjutnya Temukan kode </head>
7. Copy & Paste kode berikut ini, dan letakkan diatas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

8. Terakhir, Simpan Template.

Sekian Tutorial Blogger kali ini, bila ada kesalahan? Silakan 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 Flat Social Share Buttons di Blogger

Cara Membuat Flat Social Share Buttons di Blogger

2 Responses to "Cara Membuat Flat Social Share Buttons di Blogger"