Update Terbaru, 8 November 2018
Cara Memasang Tombol Share Keren di Blog – Sobat Pena Indigo tentu pernah melihat tombol share yang dipasang pada samping postingan blog, diatas artikel dan dibawah artikel postingan blogspot. Ini bertujuan agar artikel kita dapat di share oleh pengunjung blog ke media sosial seperti Google Plus, Facebook, Twitter dan Whatsapp.
Jika artikel atau tutorial yang kita berikan sangat bermanfaat, pengunjung akan suka rela memberikan share melalui media sosial. Dengan memberikan tombol share maka pengunjung bisa dengan mudah berbagi artikel kita melalui tombol yang sudah tersedia. Tentu ini sangat menguntungkan, karena artikel kita bisa dibaca orang banyak.
Nah, Pada postingan kali ini saya akan berbagi cara memasang tombol share keren di bawah artikel blog. Tombol share ini sangat simple dan keren, mudah terlihat oleh pengunjung dan fast loading juga responsive. Kurang lebih tampilannya seperti gambar dibawah ini:
Jika anda tertarik silahkan ikuti langkah-langkahnya berikut ini:
Daftar Isi:
Cara Memasang Tombol Share Keren di Blog
- Silahkan login akun Blogger >> Tema >> Edit HTML
- Lalu letakkan kode berikut ini tepat diatas kode
]]></b:skin>/* Tombol Share */ .share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase; font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;} #share-container {margin: 20px auto;overflow: hidden;} #share {margin:0 0 8px;padding:0;overflow:hidden} #share p {display: block;padding: 5px 8px !important;margin: 0 3px 3px 0;font-weight: 700; text-align: center;text-transform: uppercase;} #share a {width: 25%;height: 40px;display: block;font-size: 24px;color: #fff; transition: opacity 0.15s linear;float: left;text-align: center;} #share a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)} .wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700} .wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222} .wa-button i{font-weight:400;margin:0 10px 0 0} .label-line {text-align: center;margin-bottom: 6px;position:relative;} .label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute; top: 50%;left: 0;margin-top: -2px;} - Kemudian letakkan kode HTML berikut ini tepat dibawah kode
<data:post.body/>(yang kedua atau ketiga) bisa anda coba satu persatu.<div id='share-container'> <div class='label-line'> <p class='share-judule'>Bagikan Artikel ini</p> </div> <div id='share'> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'><i class='fa fa-facebook'></i></a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'><i class='fa fa-google-plus'></i></a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a> <a data-action='share/whatsapp/share' style='background:#43d854' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'></i></a> </div> </div>
- Terakhir letakkan kode font awesome tepat diatas kode
</head><link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
- Simpan tema dan lihat hasilnya.
Jika tidak ada kesalahan, maka tombol share keren sudah terpasang dibawah halaman postingan blog anda.
Cara Membuat Tombol Share Keren Lengkap
Tombol share yang kedua ini lumayan lengkap, dengan 4 tampilan yaitu facebook, twitter, google plus dan whatsapp. Jika anda tekan tombol plus (+) maka akan muncul tombol share media sosial lainnya seperti telegram, pinterest, linkedin, tumblr, line, blogger share dan BBM.
Untuk lebih jelasnya bisa dipasang terlebih dahulu. Silahkan ikuti langkah-langkahnya berikut ini:
- Silahkan login akun Blogger >> Tema >> Edit HTML
- Lalu letakkan kode berikut ini tepat diatas kode
]]></b:skin>/* Share Button Keren */ .share-judule {display: inline-block;margin: 0;color: #afafaf;text-transform: uppercase; font-size: 16px;background: #fff;z-index: 1;position: relative;padding: 0 10px;font-weight: 500;} #share_btnper{margin:35px auto 0;padding:0;text-align:center;display:block} .showother{display:none} .share_btn{position:relative;margin:0;padding:0;display:block;overflow:hidden} .share_btn ul,ul .showother{position:relative;margin:0;padding:0;font-size:12px} .share_btn ul li{display:inline-block;overflow:hidden} .share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:inline-block;text-align:center;height:40px;line-height:40px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;border-radius:99em;overflow:hidden} .share_btn i{font-size:16px;padding:0;margin:0;line-height:40px;text-align:center} .shareplus{padding:0;background:#aaa;cursor:pointer} .share_btn a:hover{background:#333} .share_btn li a.fb{background:#4867aa} .share_btn li a.tw{background:#1da1f2} .share_btn li a.gp{background:#dc4a38} .share_btn li a.pt{background:#ca2128} .share_btn li a.le{background:#0673ab} .share_btn li a.tr{background:#43556e} .share_btn li a.em{background:#141b23} .share_btn li a.ln{background:#00c300} .share_btn li a.bm{background:#000} .share_btn li a.wa{background:#4dc247} .share_btn li a.tg{background:#22a9f7} .share_btn li a:hover,.shareplus:hover{-webkit-filter:grayscale(100%);opacity:0.8} .BlackBerry-Icon {width:42px;height:42px;padding-top:7px} #hideshare{display:none} .label-line {text-align: center;margin-bottom: 6px;position:relative;} .label-line:before {z-index: 1;content: "";width: 100%;height: 2px;background: #efefef;position: absolute; top: 50%;left: 0;margin-top: -2px;} - Kemudian letakkan kode HTML berikut ini tepat dibawah kode
<data:post.body/>(yang kedua atau ketiga) bisa anda coba satu persatu.<div class='share-wrpaper' id='share_btnper'> <div class='label-line'> <p class='share-judule'>Bagikan Artikel ini</p> </div> <div class='share_btn'><ul> <li><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=626,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/></a></li> <li><a class='tw' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li> <li><a class='wa' data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:19px!important'/></a></li> <li><a class='gp' expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li> <li><div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='inline-block';document.getElementById('showshare').style.display='none';document.getElementById('hideshare').style.display='inline-block''><i aria-hidden='true' class='fa fa-plus'/></span></div></li><li><div id='hideshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById('showother').style.display='none';document.getElementById('showshare').style.display='inline-block';document.getElementById('hideshare').style.display='none''><i aria-hidden='true' class='fa fa-minus'/></span></div></li></ul> <ul class='showother' id='showother'> <li><a class='tg' expr:href='"tg://msg?text=" + data:post.title + " - " + data:blog.url' rel='nofollow' target='_blank' title='Share on Telegram'><i aria-hidden='true' class='fa fa-telegram' style='font-size:20px!important'/></a></li> <li><a class='pt' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' target='_blank'><i class='fa fa-pinterest'/></a></li> <li><a class='le' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank' title='Share on LinkEdin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li> <li><a class='tr' href='http://www.tumblr.com/share' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li> <li><a class='ln' expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:post.url' target='_blank' title='Share On Line'> <svg class='icon icons8-LINE' viewBox='0 0 48 48'> <path d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23 C6,39.09,8.91,42,12.5,42z' style='fill:#00C300;'/> <path d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637 c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185 c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001 C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687 C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01 c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652 c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688 c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035 c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917 c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603 c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604 c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z' style='fill:#FFFFFF;'/> </svg> </a></li> <li><a class='em' expr:href='"http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=email"' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li> <li><a class='bm' expr:href='"bbmi://api/share?message=" + data:post.url + "?ref=bbm&userCustomMessage=" + data:post.title' target='_blank' title='Share On BBM'> <svg class='icon BlackBerry-Icon' viewBox='-350 0 5950 8390'> <rect height='5600' rx='600' ry='600' style='fill: black;width:40px;overflow:hidden' width='6500'/> <g> <path d='M1327 885l2018 0c141,0 269,58 361,150 93,93 150,221 150,361l0 1457c0,141 -57,268 -150,361 -92,93 -220,150 -361,150l-1584 0 -724 737c64,-258 143,-487 226,-741 -115,-15 -219,-68 -297,-146 -93,-93 -150,-220 -150,-361l0 -1457c0,-140 57,-268 150,-361 92,-92 220,-150 361,-150zm2018 135l-2018 0c-104,0 -197,43 -266,111 -68,68 -110,162 -110,265l0 1457c0,103 42,197 110,265 69,69 162,111 266,111l27 0 90 0 -26 87c-11,37 -57,177 -102,312l369 -379 20 -20 28 0 1612 0c104,0 198,-42 266,-111 68,-68 110,-162 110,-265l0 -1457c0,-103 -42,-197 -110,-265 -68,-68 -162,-111 -266,-111z' style='fill: white; fill-rule: nonzero;'/> <path d='M1655 1452l310 0c91,0 149,75 129,166l0 0c-19,91 -110,166 -201,166l-310 0 72 -332z' style='fill: white;'/> <path d='M1565 1938l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/> <path d='M2291 1452l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M2200 1938l309 0c92,0 150,74 130,165l0 0c-20,92 -111,166 -202,166l-309 0 72 -331z' style='fill: white;'/> <path d='M2872 1748l309 0c91,0 149,74 130,165l0 0c-20,92 -111,166 -202,166l-310 0 73 -331z' style='fill: white;'/> <path d='M2781 2233l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M2118 2419l309 0c91,0 150,75 130,166l0 0c-20,91 -111,166 -202,166l-309 0 72 -332z' style='fill: white;'/> <path d='M3819 1091l10 0c233,0 423,190 423,422l0 1715c0,232 -190,422 -423,422l-13 0 225 735 -719 -735 -1224 0c-165,0 -308,-96 -378,-235 17,2 34,2 51,2l1586 0c301,0 548,-246 548,-547l0 -1486c0,-107 -32,-208 -86,-293z' style='fill: white;'/> </g> </svg> </a></li> </ul> </div> </div>
- Terakhir letakkan kode font awesome tepat diatas kode
</head><link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>
- Simpan tema dan lihat hasilnya.
Update 08/11/18:
Perbaikan tombol share agar fast loading dan mudah memasangnya dibawah postingan blog.
Baca Juga: Cara Membuat Contact Form (Contact Us) Keren di Blog
Sekian informasi singkat tentang Cara Memasang Tombol Share Keren di Blog semoga dapat bermanfaat dan artikel anda dapat dibagikan ke berbagai media sosial. Jika tutorial ini bermanfaat silahkan share dengan tombol media sosial yang sudah tersedia.
tidak berhasil, sudah di save tapi tidak muncul tombol share nya??
Pemasangannya sudah benar atau belum mas? harap diperhatikan pemasangannya pada edit html. jika salah ya sudah pasti tidak muncul. sudah saya coba dan berhasil.
Halo mas, kok di blog saya bentuknya cuma tulisan memanjang ke bawah ya? Bisa buat share, tapi tampilannya itu.
Setelah saya cek, sepertinya kode CSSnya belum terpasang. Mohon untuk memasang kode2 yang sudah tersedia diatas dengan benar.
mantab gan makasi infonya
Makasih, kebetulan sy lagi belajar ini, sangat bermanfaat
Blog ini istimewa tutorialnya mudah dimengerti dan bisa langsung dipraktekkan, gak pake ribet gaeeesss and langsung terlihat hasil nya thank bro
Sama-sama gan, semoga semakin bermanfaat untuk semua pengunjung blog Pena Indigo.
Terimakasih gan share buttonya keren di blog saya, oiya gan saya mau tanya apakah memasang hal seperti ini di tempalte blog berpengaruh terhadap kecepatan website/blognya gan?
Tentu berpengaruh tapi tidak seberapa, sudah saya uji coba dan tetap fast loading.
Mantap artikelnya gan, ijin share yah
Silahkan gan, langsung dipasang di blognya biar pengunjung bisa langsung share postingan.
gan mohon pencerahannya, saya nyari blog post di html tidak ketemu,, sudah berbagai cara searching d google,, pusing
Blog post gmna ya maksudnya? ingin dibantu edit silahkan kirim url blog melalui email, whatsapp atau facebook pada halaman kontak yang sudah tersedia.
terima kasih gan informasinya sangat bermanfaat
ini yang saya cari2 gan, simpel dan work. makasih
Terima kasih gan….
Sama-sama semoga bermanfaat.
Makasih Gan.
Cuman karena google + udah gak ada,bisa diganti line atau pinterest gitu gimana bang?
Nanti akan saya perbarui untuk versi 1, kalau versi kedua tinggal hapus saja.
terimakasih penaindigo…. matursuwooon, mantab, mo pake
Mau tanya gan, kalau logo line tidak muncul di widget sharenya kenapa ya? Padahal sudah ada link font awesome nya
Pengaturan pada pemasangan font awesome, silahkan cari tutorialnya di internet karena permasalahanny biasanya beda2 ada yang memang karena strukture themenya yang tidak mendukung font awesome.
gan kenapa tombol share ke whatsapp gak bisa yah ?
bang tombol share versi ke 2 bawah sendiri, sudah saya terapin di edit html kok gak bisa ya? maksutnya gak muncul tombolnya
Mungkin ada kesalahan penempatak kode kedua, silahkan pilih kode
mohon bantuan mas,
supaya Tombol Share Keren_nya tidak tampil pada beranda blog gimana ya?
saya sih sudah berhasil, Tapi saya ingin Tombol Share_nya tidak tampil pada Beranda atau pada Home, mohon maaf baru belajar
Perhatikan pemasangan kode, yaitu harus dibawah kode
mantab artikel dan membantu
Kalau share lewat wa gak bisa ya bang?
Dulu saya coba bisa, tapi ini sudah lama gak saya cek. Lain waktu bisa saya uji coba.
Bang, untuk instagram gak ada ya? balas ya bang. makasih
Gak ada, sudah lama gak perbaiki kodenya soalnya belum sempat.
Termakasih Gan.. sudah berbagi, Artikenlya sangat bermanfaat. Tulisan terbarunya kami tunggu ya…
👍trima kasih gan, sngt membantu.
Terimakasih gan, sangat bermanfaat. sudah berhasil diaplikasikan ke blog saya..
Mas, cara memindahkan tombol share yang dari awalnya berada dibawah postingan ke atas postingan gimana ya?
Silahkan paste kode diatas kode data post body nanti akan muncul diatas postingan.
mas, saya pemula, bingung ngehare tulisan saya.
saya sudah googling, tapi kok gak ndapat titiknya. apakh bisa dibantu ?
Bisa, silahkan menghubungi saya melalui halaman kontak yang sudah tersedia nanti bisa dibantu.
mantul, gan. Saya hanya kurang sreg sama link font awsome karena tebukti mengurangi kecepatan loading saat memuat halaman librari ikon ikon mereka.
Ikon dapat di ganti dengan ikon SVG yang lebih cepat.
Terimakasih telah berbagi!
Terima kasih masukannya mungkin lain waktu bisa saya update kembali dengan dua pilihan.
Request tombol share untuk instagram gan, udah cari kesana kemari gak ketemu tombol share untuk instagram
Untuk share otomatis ke instagram belum ada gan, sementara pakai cara manual aja share foto ke instagram kasih keterangan dan tambahkan link postingan.
Iya.. apa emang gak ada ya. Infoin ya kalo ketemu. Di LP ku cuman bisa masuk ke innsta doang.
Alhamdulillah, work gan, hehe.
Jazakumullahu khairan…
Semoga tambah sukses bloggignya.
Terima kasih gan, awalnya gagal baru berhasil setelah pemasanganya kodenya diatas yang ke empat. hehehe
Semoga bermanfaat dan blognya terus berkembang sukses selalu.
kalu bisa update buang saja tombol G+, gpp kan update postingan lawas?
Terima kasih atas tutorialnya, sudah saya coba dan berhasil…. Kereeen
mantap jiwa, lanjutkan bosku ditunggu bw juga ya