Cara Membuat Tombol Share Bergaya Flat di Blogger

Tombol share adalah hal yang wajib di miliki setiap blog, karena dengan tombol share ini, blog kita akan semakin di terkenal. Pada tutorial kali ini saya akan membagikan tutorial tentang cara membuat tombol share bergaya flat desain di blogger.

Baca juga : Cara Membuat Gambar Flat Design Secara Otomatis

Apabila pengunjung merasa puas atas konten atau artikel yang kita sediakan, tidak sedikit pengunjung akan menekan tombol share yang ada sehingga konten yang kita miliki akan di sebarkan oleh mereka.

Tombol share biasanya terdiri dari kode CSS, HTML, dan JAVASCRIPT. Namun ada juga yang hanya berupa plugin, seperti yang sering di pakai blog-blog yang sudah cukup terkenal.

Kali ini saya hanya membahas cara membuat tombol share yang biasa saja, dan tidak memakai plugin. Tombol share ini sudah di gunakan pada template milik Arlina Design, yaitu pada template Minima Colored 3.

Bagi kalian yang penasaran bagaimana cara membuatnya, ikuti langkah-langkah dari saya berikut ini.

Baca juga : Membuat Widget Social Media Button Flat Design di Blog

Cara Membuat Tombol Share Bergaya Flat di Blogger

1. Masuk ke akun Blogger kalian.
2. Pilih menu Tema, kemudian pilih Edit HTML.
3. Masukan kode di bawah ini, sebelum kode </style>.

/* CSS Share Button flat design */
.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}

4. Sekarang masukan kode di bawah ini sebelum kode </head>.

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

5. Masukan kode HTML di bawah ini sebelum kode <data:post.body/>.

<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>

6. Sekarang pilih Simpan tema.
7. Jika berhasil maka tampilannya akan seperti ini.
   

Baca juga : Cara Membuat Widget Social Media Button Efek Berputar

Demikian tutorial singkat dari saya mengenai cara membuat tombol share bergaya flat di blog, jika ada pertanyaan mengenai hal ini silahkan masukan di kolom komentar.

Terima kasih sudah berkunjung di blog saya ini, untuk tutorial yang lainnya silahkan tetap kunjungi tutorialumum.com.

Share this