Latest News

Cara Membuat/Memasang Share Button Sederhana (Template Evo Magz) Di Blogspot

Bagi kalian yang suka dengan kesederhanaan mungkin mampu mencoba memasang share button in untuk digunakan di blog anda. Share button ini sangat simple dan sederhana. Kesederhanaan tersebut mampu dilihat dari tampilannya. Tombol menyebarkan ini hanya memuat 4 media umum yakni facebook,twitter,google plus,dan linkedln.

Bagi

Share button ini juga dipakai di template evo magz yang original jadi mungkin bagi anda yang hanya memiliki evo magz clone dan ingin memasang share button yang sama menyerupai aslinya mampu ikuti langkah dibawah. 

Share button ini tidak ada fitur counter namun bila anda ingin membuat share button dengan fitur counter mampu baca artikel berikut Cara Memasang Sosial Share Button Dengan Counter . Bagaimana tertarik untuk memasang share button sederhana?  Berikut langkahnya :

Cara Memasang Share Button Di Blog

Langkah 1
Silakan anda buka blogger,pilih Template → Edit HTML

Langkah 2
Salin aba-aba dibawah ini dan letakkan diatas aba-aba </b:template-skin> atau ]]></b:skin> atau </style>

/* CSS Share Button */ .tombol-berbagi-anggasave{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #f0f0f0;margin:auto} .tombol-berbagi-anggasave-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit} .tombol-berbagi-anggasave-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #f0f0f0} .tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px} .tombol-berbagi-fb-label{color:#2d609b} .tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px} .tombol-berbagi-tw{background-position:0 -43px} .tombol-berbagi-tw-label{color:#00c3f3} .tombol-berbagi-gp{background-position:0 -86px} .tombol-berbagi-gp-label{color:#f00} .tombol-berbagi-lin{background-position:0 -129px} .tombol-berbagi-anggasave a{color:#999;transition:all .3s;} .tombol-berbagi-anggasave a:hover{color:#7cb0ed}  @media only screen and (max-width:640px){ .tombol-berbagi,.tombol-berbagi-anggasave-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit} .tombol-berbagi,.tombol-berbagi-anggasave-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}

Langkah 3
Cari aba-aba <data:post.body/> ,lalu salin aba-aba dibawah ini dan letakkan dibawah aba-aba <data:post.body/>

<!-- Tombol share media umum --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tombol-berbagi-anggasave'> <div class='tombol-berbagi-anggasave-fb'> <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='tombol-berbagi-anggasave-tw'> <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-lin' 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' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-lin-label' 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' rel='nofollow' target='_blank'>Share on LinkedIn</a> </div>   </div> </b:if>

Karena kode <data:post.body/> ada lebih didalam template blog silakan anda coba satu persatu atau pilih aba-aba yang ditemukan pertama kali.

Lalu simpan template dan lihat hasilnya.

Nah gimana hasilnya? Jika ada pertanyaan dan duduk perkara silakan pribadi komentar saja dibawah fast respon hehe. Cukup sekian artikel ini agar bermanfaat.