27 May 2017

Cara Membuat Tombol Share Bergaya Flat di Blogger

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

(Baca Juga: Cara Membuat Tombol Demo dan Download Ringan Responsive di blogger)
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.

Cara Membuat Tombol Share Bergaya Flat

  • Masuk ke akun blogger kalian
  • Pilih menu Tema, kemudian pilih Edit HTML
  • Masukan kode di bawah ini, sebelum kode </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}
  • 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'/>
  • 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>
  • Sekarang pilih Simpan tema.

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.

3 comments

Bagus nihh buat pemula seperti saya ☺

Keren tombol sharenya :)

ok gan silahkan di coba :)

Tinggalkan Komentar anda...
Karena itu sangat membantu saya dalam membangun sebuah blog.

Perhatian, dilarang membuat Link aktif di dalam komentar.
EmoticonEmoticon