Tombol Share Keren Buat Blog (Hasil modiv sendiri)

Bagaimana cara membuat tombol share yang keren buat blog? Sebelumnya harus tahu dulu manfaat dari tombol share. Share berarti berbagi yaitu membagikan sesuatu. Sharing berbagi pikiran dengan orang lain. Dalam dunia internet mengandung maksud berbagi informasi yang diperoleh dari website.

Pengunjung situs website biasanya ingin berbagi informasi yang dianggapnya menarik dan bermanfaat. Karena memiliki kecenderungan ingin berbagi dan menebarkan manfaat kepada orang lain seperti yang telah dia dapatkan dari sebuah situs web, orang tersebut membagikannya lewat berbagai macam media sosial.

Untuk mempermudah mereka membagikan informasi lewat berbagai sosial media maka pemilik situs web mendisain situsnya dengan menambahkan tombol share yang sering disebut social book mark. Begitu juga para blogger pun tidak mau ketinggalan. Mereka pun menerapkan tombol share tersebut pada blog miliknya.

Sebenarnya cara memasang social book mark atau tombol share pada situs web kita sangat mudah. Silakan Anda menuju ke menu Template pada blog Anda lalu pilih HTML mode. Untuk tampilan tombol share keren ini

Silakan Anda cari kode ]]></b:skin> dan letakkan kode berikut di atasnya:

/*Tombol share*/   
    .bagikan {
        overflow: hidden;
        margin-top: 20px;
        padding: 2px 0;
        border-top: 1px solid #eee;
    }
    .bagikan h3 {
        font-weight: 700;
        text-transform: uppercase;
        font-size: 23px;
        color: #FF0000;
        float: left;
        display: inline-block;
        padding-top: 1px;
    }
    .bagikan li {
        display: inline-block;
        float: none;
        padding-left: 1px;
    }
    .bagikan li a {padding-left: 1px; font-size: 30px;text-decoration: none; color: none;}
 
   
    .bagikan li a:hover {
        text-decoration: none;
        color: #99FF00;
    }
    .bagikan li a:active {
        color: none;
    }


Selajutnya menuju ke bagian badan artikel. Cari kode <data:post.body/>. Apabila ingin tombol tersebut terletak di atas artikel maka letakkan kodenya di atas kode <data:post.body/>. Jika ingin tombol terletak di bawah artikel, letakkan kodenya di bawah kode <data:post.body/>. Silakan letakkan kode berikut sesuai keinginan Anda.

<!-- Icon Share Start -->
<div class='bagikan'>  
<li><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=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='color:#0033CC; ' target='_blank'><i class='fa fa-facebook'/></a>

<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=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='color:#80C8FE;' target='_blank'><i class='fa fa-twitter'/></a>
  
<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=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='color:#FF6600;' target='_blank'><i class='fa fa-google-plus'/></a>

<a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='color:#FF0000;' target='_blank'><i class='fa fa-pinterest'/></a>

<a expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' style='color:#000000;' target='_blank'><i class='fa fa-linkedin-square'/></a></li></div>
<!-- Icon Share End --> 

Simpan template Anda dan buka halaman artikel blog. Lihat hasilnya!

Bagaimana caranya agar tombol share berada di kanan, tengah, atau kiri artikel?

Agar tombol share terletak di kanan artikel, silakan tambahkan kode <right> di bawah kode <!-- Icon Share Start --> dan tambahkan kode penutupnya <right/> di atas kode <!-- Icon Share End -->

Agar tombol share terletak di tengah artikel, silakan tambahkan kode <center> di bawah kode <!-- Icon Share Start --> dan tambahkan kode penutupnya <center/> di atas kode <!-- Icon Share End --> 

Agar tombol share terletak di kiri artikel, silakan tambahkan kode <left> di bawah kode <!-- Icon Share Start --> dan tambahkan kode penutupnya <left/> di atas kode <!-- Icon Share End --> atau biarkan tanpa tambahan kode tersebut karena posisi kiri merupakan posisi default bawaannya.

Bagaimana cara membuat tombol share batang?

Baca selengkapnya>>>

Tweet