Membuat Tombol Share Minimalis dibawah Posting Blog

Memiliki Blog tanpa adanya pengunjung tentu seringkali menjadi permasalahan yang kita alami dalam mengawali karrir blogging, bergitu juga dengan saya, namun seiring berjalanya waktu, sendirinya kita akan mengetahui cara agar blog ramai pengunjung dan komentar, fase fase yang telah kita lewati, satu per satu mengajari kita apa itu arti sebuah blog, bukan hanya untuk memonetize blog dan melakukan bisnis online semata, namun juga untuk bertujuan untuk bermanfaat bagi sesama.

Seperti postingan sebelumnya, kita telah mengetahui bahwasanya ada jalan alternatif yang cukup ampuh "jika" kita tak lagi memprioritaskan search engine, dan jalur alternatif tersebut terbagi atas 2, yakni Pengiklanan dan Social Media, perbedaan dari kedua hal ini sebenarnya relatif sederhana, yaitu yang satu berbayar dan yang satu lagi tidak, tepatnya Pengiklanan membutuhkan biaya, sedangkan Social Media tidak, terkecuali jika kita membeli fans atau follower (organik) di situs-situs penyedia seperti Fiverr.

Akan tetapi, menurut salah satu survey yang diadakan di Amerika, hasil dari survey tersebut menunjukkan bahwa minat pengguna internet untuk mengunjungi situs pengiklan lebih kecil daripada minat mereka untuk mengunjungi tautan atau link yang dipromosikan di berbagai jejaring sosial, seperti Twitter, Facebook, dan Google+ yang saat ini sedang booming atau memimpin pasar Internet.

Tentu setelah melihat ulasan singkat diatas, kita akan lebih memilih Social Media, namun dari sisi lain, Pengiklanan sebenarnya juga sangat berpotensial untuk mendongkrak traffik kunjungan di blog kita, dengan syarat situs yang kita pasangkan iklan tersebut mempunyai tingkat relevansi atau kesamaan topik yang cukup tinggi dengan blog kita, dengan begitu, pengunjung yang mengklik atau mengunjungi iklan yang kita pasang tersebut juga datang berdasarkan "potensial" keinginanya untuk mengunjungi blog kita, jadi bukan sekedar mendatangkan pengunjung dari iklan semata.

Untuk memaksimalkan sektor Social Media, pada kesempatan kali ini saya akan membagikan suatu widget yang nantinya akan kita pasang di bawah postingan, widget ini berbentuk lingkaran dengan ikon dari masing-masing jejaring sosial dengan penampilan minimalis. Jika anda berminat untuk menerapkanya, silahkan disimak yang berikut ini.

Membuat Tombol Share Minimalis dibawah Posting Blog

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML.

4. Klik tanda panah hitam disebelah kode yang mirip <b:skin>...</b:skin> (untuk membuka kode css).

5. Cari kode ]]></b:skin> (gunakan CTRL+F), lalu letakkan kode berikut ini tepat diatas-nya.

ul.social_tuliskancom {
list-style:none;
display:inline-block;
margin:15px auto;
}
ul.social_tuliskancom li {
display:inline;
float:left;
background-repeat:no-repeat;
}
ul.social_tuliskancom li a {
display:block;
width:50px;
height:50px;
padding-right:10px;
position:relative;
text-decoration:none;
}
ul.social_tuliskancom li a strong {
font-weight:400;
position:absolute;
left:20px;
top:-1px;
color:#fff;
z-index:9999;
text-shadow:1px 1px 0 rgba(0,0,0,0.75);
background-color:rgba(0,0,0,0.7);
-moz-border-radius:3px;
-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-border-radius:3px;
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
border-radius:3px;
box-shadow:0 0 5px rgba(0,0,0,0.5);
padding:3px;
}
ul.social_tuliskancom li.abfacebook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1X8FMZFd98hRlU2w0xnLR0kv5y1UjAYaC31kEJnaYKyMzqQoC3KDScOFts4HfrK-p3A4ZQKWpJY-aYKHWw1BD-r1mR8iwnP9zQjYkHrRmMOB8PS_-OglPAu2vkZ5XYAXeJU4H1Ez6ldFC/s1600/btrix-facebook-icon.png);
}
ul.social_tuliskancom li.abtwitter {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUKXb0cTIVvKm52tGdVAikcnsBlUovTl4XM6rkcOPQk_ILyuSa1Ab8ed7BOQJ3IUxTsptRNO-zYGwNNfV6xBKIREe0Grn6SbpTnZuaUjqpPAnbhV589PD2ECKQL3CGX1lI4_xP2vrgg6O/s1600/btrix-twitter-icon.png);
}
ul.social_tuliskancom li.abgoogleplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTwiUUipHgNctCGWJFs2TG8OqFU92sKvhdpiTZ4UTDotGarD3thrQnAwPb_r_cBR9ImyZBVPMAGRvp_m0jjgA4im8ImQ-wfYZQNCIKgZkzXrwxiNRegSB9Wb2Ku547iEEq7mP4ZihTMk6d/s1600/btrix-google-icon.png);
}
ul li.abpinterest {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvyqRbyEQ5pwtj-r6_SCvc8x8-tnutv8PPj4KIjyo1DMd3IfNq8XQUj-K-7sQsQ-dk4W9ZjrPOLDQixyLnTISyf1CCyCAWADG12ddDCJbRug2nPCEPyF6oYCtA1svHFzSxw7pmMlYgm09/s1600/btrix-Pinterest-icon.png);
}
ul.social_tuliskancom li.abstumbleupon {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3SCFXJ0Tl1mtngcOAFGwOX0WEcQc5u1dUwzDDVGFFPrzNFPUAQ97Vz5C5c55UA-pSBHEP_UuK9DbKn8Fw1fVCa14p07AN4oxFJ7OUPXj2vcYIpqjafS0A33213BYsOnfQY5eA4kUwsFl5/s1600/btrix-StumbleUpon-icon.png);
}
ul.social_tuliskancom li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh46RkDQjbW9YcSrYYFG-xlW1Iw9benJXI38QtFvkSAzFI2NTP33tSNOB0fph7PR3UluRo-n2Qs1pKu6Ek2-K4btQQuPJ7hfsnY7BXPmoDiiOS8i7jZEQBUcPLooNr5LtlLdc1T0GwmccJ1/s1600/btrix-Digg-icon.png);
}
ul.social_tuliskancom li.ablinkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ_93biir-KXJUMG6A_bR2f3TLhZIfAChTtgt-_NEWF6_ZzYAuUMscTjJ-B73P638Sp33kVw6UoFzWxNLWdCKRZuM4CJuQwHen2QgC_Q3hW_yRJYQlpXfB28nOVE49GvbBaq3JrMZQndqY/s1600/btrix-Linkedin-icon.png);
}
#animation_tuliskancom:hover li {
opacity:0.2;
}
#animation_tuliskancom li {
-webkit-transition-property:opacity;
-webkit-transition-duration:500ms;
-moz-transition-property:opacity;
-moz-transition-duration:500ms;
}
#animation_tuliskancom li a strong {
opacity:0;
-webkit-transition-property:opacity, top;
-webkit-transition-duration:300ms;
-moz-transition-property:opacity, top;
-moz-transition-duration:300ms;
}
#animation_tuliskancom li:hover {
opacity:1;
}
#animation_tuliskancom li:hover a strong {
opacity:1;
top:-10px;
}

6. Masih di Edit HTML, selanjutnya cari kode </data:post.body>, namun jika anda sudah memasang read more otomatis, maka pilihlah kode </data:post.body> yang ke-3 atau ke-4, tergantung template yang anda gunakan.

7. Selanjutnya, letakkan kode berikut ini tepat dibawah </data:post.body>.

<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'>Share this article with your friends.</div>
<ul class='social_tuliskancom' id='animation_tuliskancom'>
<li class='abfacebook'>
<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'>Facebook</a>
</li>
<li class='abtwitter'>
<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'>Twitter</a>
</li>
<li class='abgoogleplus'>
<a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'>Google+</a>
</li>
<li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'>Pinterest</a>
</li>
<li class='abstumbleupon'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'>StumbleUpon</a>
</li>
<li class='abdig'>
<a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'>Dig</a>
</li>
<li class='ablinkedin'>
<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'>LinkedIn</a>
</li>
</ul>
</b:if>

8. Klik "Simpan/Save" Template, dan Selesai.

Demikian informasi terbaru tentang Membuat Tombol Share Minimalis dibawah Posting Blog, simak juga artikel menarik lainya seputar tutorial blog tentang Daftar 20 Situs RSS Directories untuk Submit Feed Blog, semoga bermanfaat, dan selamat mencoba.

Referensi:

Membuat Tombol Share Minimalis dibawah Posting Blog

Share this

Author : Admin

Related Posts