Cara Memasang Share Button di Bawah Postingan Ala Arlina Design

Siapa yang tidak mengenal Arlina Design? Ya, situs blog yang telah menyumbangkan memiliki banyak karya template kepada para blogger di dunia terutama di Indonesia. Penggunaan template hasil karya Arlina Design telah merambat ke berbagai wilayah, sehingga sekarang ini situs blog tersebut mampu mencapai tingkat eksistensi yang tinggi dan dikenal oleh kalangan blogger manapun.

Tak heran jika jumlah pengunjung yang didapatkan situs tersebut mencapai puluhan ribu per hari. Itu merupakan sungguh pencapaian yang sangat besar nilai pengunjung situs blog Arlina Design bila dibandingkan dengan situs blog milik saya yang hanya berkisar ribuan saja dari total visitor blog.

Memasang Share Button di Bawah Postingan Ala Arlina Design

Salah satu widget yang paling banyak diminati di blog Arlina Design merupakan widget share button yang berada di bawah postingan. Kebetulan saya menemukan Instruksi, CSS, Tooltip dan HTML-nya dari artikel yang dibagikan oleh Arlina Fitriyani. Widget Share Button (tombol share) 100% identik yang pernah digunakan di blog Arlina Design. Berikut Cara Memasang Share Button di Bawah Postingan Ala Arlina Design :

Memasang Share Button di Bawah Postingan Ala Arlina Design

Note: Sebelumnya anda sudah harus menerapkan link tag Font Awesome di HTML template, jika belum cantumkan kode berikut ini di bawah kode <head>:

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

Langkah 1: Masuk ke Blogger.com

Langkah 2: Klik Template dan buka Edit HTML, cari kode seperti ini ]]></b:skin> atau </style> lalu tambahkan kode tersebut di atasnya.

/* CSS Tooltip */
.awesome-tooltip {position:relative;display:inline-block;}
.awesome-tooltip:before, .awesome-tooltip:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;} 
.awesome-tooltip:hover:before, .awesome-tooltip:hover:after {opacity:1;}
.awesome-tooltip:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}  
.awesome-tooltip:after {content:attr(data-awesome-tooltip)!important;background:#494158;color:#fff;padding:6px 8px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.awesome-tooltip-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#494158;}
.awesome-tooltip-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}

/* CSS Share Button */
.bagikan-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .bagikan-post ul {padding:0;}
.bagikan-post li{float:left;margin:0 1%;width:18%;padding:0;list-style:none;position:relative;}
.bagikan-post li a{padding:6px 7px 6px 38px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;}
.bagikan-post li a:hover{color:#fff;}
.bagikan-post li .twitter{background-color:#19bfe5;}
.bagikan-post li .facebook{background-color:#3b5998;}
.bagikan-post li .gplus{background-color:#d64136;}
.bagikan-post li .pinterest{background-color:#cb2027;}
.bagikan-post li .tumblr{background-color:#304e6c;}
.bagikan-post li .twitter:hover,.bagikan-post li .facebook:hover,.bagikan-post li .gplus:hover,
.bagikan-post li .pinterest:hover,.bagikan-post li .tumblr:hover{color:#fff;}
.bagikan-post li:last-child{margin-right:0}
.bagikan-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.bagikan-post li:hover .fa:before{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.bagikan-post li .fa {display:initial;}

@media only screen and (max-width:640px){
.bagikan-post li a{padding:6px 0 6px 0;}
.bagikan-post li .fa:before{display:none;}}

@media screen and (max-width:480px) {
.bagikan-post li{width:100%}}

Langkah 3:  Kemudian, tambahkan kode yang seperti di bawah ini tepat di atas kode </article>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bagikan-post'>
              <ul>
                <li><a class='twitter awesome-tooltip awesome-tooltip-top' data-awesome-tooltip='Share on Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/>Twitter</a></li>
                <li><a class='facebook awesome-tooltip awesome-tooltip-top' data-awesome-tooltip='Share on Facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/>Facebook</a></li>
                <li><a class='gplus awesome-tooltip awesome-tooltip-top' data-awesome-tooltip='Share on Google Plus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/>Google</a></li>
                <li><a class='tumblr awesome-tooltip awesome-tooltip-top' data-awesome-tooltip='Share on Tumblr' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/>Tumblr</a></li>
                <li><a class='pinterest awesome-tooltip awesome-tooltip-top' data-awesome-tooltip='Share on Pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.title' target='_blank'><i class='fa fa-pinterest'/>Pinterest</a></li>
              </ul>
         </div>
<div style='clear:both'/>
</b:if>

Langkah 4: Simpan template.

Demikianlah Cara Memasang Share Button Di Bawah Postingan Ala Arlina Design. Perlu di ingat HTML button share tersebut telah diberi conditional tag khusus halaman item (posting), sehingga hanya muncul di halaman posting blog milik anda. 
Tag: CSS, HTML, Widget

Berlangganan: Masukkan e-mail Anda untuk memperoleh kiriman artikel teraktual dari librasbr.com tepat di pesan kotak masuk.

feedburner

35 Komentar untuk "Cara Memasang Share Button di Bawah Postingan Ala Arlina Design"

avatar

mantap nih gan artikel & templatenya,, Thanks gan udh share :)

avatar

Artikelnya bermanfaat nih gan, ijin nyoba :D

avatar

Thanks yah gan artikelnya sangant bermanfaat

avatar

wah udah masang iini diblog saya sob =D , Jadi kelihatan keren |o|

avatar

kebetulan nih gan ane mau masang juga thanks gan

avatar

artikel bener" bermanfaaat ini yang saya cari" saya izin coba gan soalnya lagi butuh widget ini :D

avatar

wehhh bermanfaat sekali, ini nih yang saya cari, saya coba dulu ajah deh ya gan :D

avatar

Terima kasih, terus follow up situs ini ya :)

avatar

Pasti blog Anda kelihatan makin bagus dan menarik deh setelah memasang widget share button ini :D

avatar

Wah ternyata banyak yang minat sama share button-nya, silakan dipasang =D

avatar

Templatenya mirip sama Kang Mousir yah

avatar

Benar Mas Dinan, tetapi punya saya sudah sedikit dimodif dan diperbaiki

avatar

keren gan tombol sharenya nanti ane mau pasang ah

avatar

Terima kasih Mas, memang keren nih, sip :ng

avatar

wah nemu juga nih tutor yang kayak gini

thanks infonya

avatar

Semoga bermanfaat, thank you :ng

avatar

Oh dengan senang hati silakan dicoba

avatar

Wah jadi begitu caranya? :D . Terimakasih telah berbagi ^_^ .

avatar

Oke, silakan biar makin keren blognya

avatar

Mantep nih artikel :D
Stiap ane mampir pasti udah ada yg baru |o|

avatar

Yang pasti kita harus selalu update ^_^

avatar

Thank You gan,, Atas Tutorialnya,, ^_^

avatar

Ya, sama-sama. Semoga berkah :D

avatar

punya saya gak ada ini <> gmn donk gan solusinya?

KETENTUAN BERKOMENTAR

↳ Berkomentarlah sesuai isi dan topik artikel
↳ Dilarang menyisipkan PRANALA (link) AKTIF