Membuat Tombol Share Blog Ala Igniel
Membuat Tombol Share Blog Ala Igniel - SusahTidur - Yuhuu selamat datang kembali, pada kesempatan kali ini saya akan membagikan sebuah tutorial Cara Membuat Tombol Share Blog Ala Igniel. Belum tahu? yang bener? pastinya sudah tahu lah, jika belum kunjungi ke blog nya mbak Igniel dulu sana atau ke blog demo juga sudah saya pasang.
Tombol ini mirip dengan apa yang ada di blog Igniel ya mirip dong saya inspect 😅, maaf ya mbak Igniel. Bedanya mungkin tidak ada Counter nya atau jumlah yang sudah share, karena itu pakai Script tambahan. Namun sobat tidak usah khawatir, dengan itu saja sudah cukup keren dan ringan kok.
Tutorial ini saya jalankan pada template VioMagz mas Sugeng ya, jadi untuk sobat selain pengguna VioMagz yang ingin memasang Tombol Share Blog Ala Igniel ini bisa kalian modifikasi sendiri hehe. Tutorial ini cukup panjang, jadi mari langsung esekusi.
Membuat Tombol Share Blog Ala Igniel
- Jangan bosen ya, untuk yang pertama login dulu ke Dashboard Blogger sobat
- Masuk menu Tema > Edit HTML > Cari kode #wrapper dan akan muncul kode sepaket seperti di bawah ini
#wrapper { background: $(posts.background.color); max-width: 1000px; margin: 0 auto; padding: 70px 30px 30px; overflow: hidden; }
Kode yang saya blok warna biru yaitu "hidden" lalu ganti dengan "unset" maka hasilnya akan seperti ini
#wrapper { background: $(posts.background.color); max-width: 1000px; margin: 0 auto; padding: 70px 30px 30px; overflow: unset; }
- Lanjut kita masih di Edit HTML ya, yang kita lakukan sekarang menghapus dulu kode tombol share bawaan VioMagz, cari kode /* Share button */ maka yang akan muncul sepaket kode tombol share bawaan VioMagz seperti di bawah ini
/* Share button */ .share-this-pleaseeeee { display: inline-block; margin: 0; color: $(label.color);; text-transform: uppercase; font-size: 16px; background: $(label.bg.color); z-index: 1; position: relative; padding: 0 10px; font-weight: bold; } #share-container { margin: 20px auto 30px; overflow: hidden; } #share { width: 100%; text-align: center; } #share a { width: 25%; height: 40px; display: block; font-size: 24px; color: #fff; transition: opacity 0.15s linear; float: left; } #share a:hover { opacity: 0.8; } #share i { position: relative; top: 50%; transform: translateY(-50%); } .facebook { background: #3b5998; } .twitter { background: #55acee; } .linkedin { background: #0077b5; } .pinterest { background: #cb2027; } .whatsapp { background: #25d366; }
Silahkan ganti kode di atas (semua yang tertera ya, awas fokus) dengan kode di bawah ini
#share-container { width:100%; display: inline-block; flex-wrap: nowrap; align-items: center; background-color: transparent; margin-top: 10px; padding: 10px 0px 0px; position: sticky; position: -webkit-sticky; bottom: 0px; z-index: 1; }
- Lalu masukkan CSS di bawah ini tepat di atas </b:skin>/* Tombol Share Ala Igniel By www.susahtidur.my.id */ <div id='share-container'> .susahtidurShare{position:relative;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;background-color:#fff;color:#fff;padding:10px 0;border-top:7px dotted #ddd;z-index:1;transition:all .3s ease}.susahtidurShare.show{position:sticky;position:-webkit-sticky;bottom:0}.susahtidurShare svg{width:17px;height:17px;margin:auto;text-align:center}.susahtidurShare .facebook svg,.susahtidurShare .pinterest svg,.susahtidurShare .tumblr svg{margin:0}.susahtidurShare svg path{fill:#fff} .susahtidurShare .count{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;font-weight:500;color:#7bbefa;font-size:1.5em;margin-right:20px}.susahtidurShare .count svg path{fill:#7bbefa}.susahtidurShare i{font-style:normal;margin:0 3px;line-height:0}.susahtidurShare a{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;width:100%;color:#fff;padding:7px;border-radius:25px;box-shadow:none;transition:all .3s ease}.susahtidurShare a:not(:last-child){margin-right:7px}.susahtidurShare a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}.susahtidurShare a.facebook{background-color:#3a579a}.susahtidurShare a.twitter{background-color:#00abf0}.susahtidurShare a.pinterest{background-color:#cd1c1f}.susahtidurShare a.linkedin{background-color:#2554BF}.susahtidurShare a.tumblr{background-color:#314358}.susahtidurShare a.whatsapp{background-color:#4dc247}.susahtidurShare a.messenger{background-color:#448aff} .susahtidurShare i{display:none}.susahtidurShare .facebook svg,.susahtidurShare .pinterest svg,.susahtidurShare .tumblr svg{margin:auto} @media screen and (max-width:900px){ .susahtidurShare i{display:block}.susahtidurShare .facebook svg,.susahtidurShare .pinterest svg,.susahtidurShare .tumblr svg{margin:0}} @media screen and (max-width:680px){ .susahtidurShare{justify-content:space-between}.susahtidurShare a i{display:none}.susahtidurShare a{justify-content:center}.susahtidurShare a:not(:last-child){margin-right:5px}.susahtidurShare .facebook svg,.susahtidurShare .pinterest svg,.susahtidurShare .tumblr svg{margin:auto}} @media screen and (max-width:480px){ .susahtidurShare a:not(:last-child){margin-right:3px}.susahtidurShare .count{margin-right:15px}} /* Setting Mode Malam Tombol Share */.Night .susahtidurShare{background-color:#292e38}Jika sobat sudah memasang mode malam di blog nantinya tombol share di atas juga akan mengikuti mode malam, belum pasang?
- Kemudian cari <div id='share-container'> maka hasilnya akan seperti ini
<div id='share-container'> <div class='label-line-c'> <p class='share-this-pleaseeeee'><b:switch var='data:blog.locale'><b:case value='id'/>Bagikan Artikel ini<b:default/>Share this post</b:switch></p> </div> <div id='share'> <!-- facebook --> <a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a> <!-- twitter --> <a class='twitter' expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a> <a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/></a> <a class='whatsapp' expr:href='"https://api.whatsapp.com/send?phone=&text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a> </div> </div>
Silahkan ganti kode diatas dengan kode di bawah ini<div id='share-container'> <div class="susahtidurShare"> <span class="count"> <svg viewbox="0 0 24 24"> <path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"></path> </svg> <i>SHARE</i> </span> <a class="facebook" expr:href='"https://www.facebook.com/sharer.php?u=" + data:blog.url' onclick="window.open(this.href,"sharer"," toolbar=0,status=0,width=626,height=436");return false;" rel="nofollow" title="Share to Facebook"> <svg viewbox="0 0 24 24"> <path d="M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z"></path> </svg><i>Share</i></a> <a class="whatsapp" expr:href='"https://api.whatsapp.com/send?phone=&text=" + data:post.title + "%20%2D%20" + data:post.url' onclick="window.open(encodeURI(this.href)," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;" rel="nofollow" title="Share to WhatsApp"> <svg viewbox="0 0 24 24"> <path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"></path> </svg></a> <a class="messenger" href='fb-messenger://share?link= data:post.url' rel="nofollow" title="Share to WhatsApp"> <svg viewbox="0 0 24 24"> <path d="M12,2C6.5,2 2,6.14 2,11.25C2,14.13 3.42,16.7 5.65,18.4L5.71,22L9.16,20.12L9.13,20.11C10.04,20.36 11,20.5 12,20.5C17.5,20.5 22,16.36 22,11.25C22,6.14 17.5,2 12,2M13.03,14.41L10.54,11.78L5.5,14.41L10.88,8.78L13.46,11.25L18.31,8.78L13.03,14.41Z"></path> </svg></a> <a class="twitter" expr:href='"https://twitter.com/intent/tweet?text=" + data:post.title + "&url=" + data:post.url' onclick="window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=436" ); return false;" rel="nofollow" title="Share to Twitter"> <svg viewbox="0 0 24 24"> <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"></path> </svg></a> <a class="pinterest" data-pin-config="beside" expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&media=" + data:post.firstImageUrl + "&description=" + data:post.title' onclick="window.open(this.href," sharer" ," toolbar=0,status=0,width=626,height=500" ); return false;" rel="nofollow" title="Share to Pinterest"> <svg viewbox="0 0 24 24"> <path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z"></path> </svg><i>Pin</i></a> <a class="linkedin" expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:post.canonicalUrl' onclick="window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;" rel="nofollow" title="Share to Linkedin"> <svg viewbox="0 0 24 24"> <path d="M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z"></path> </svg></a> <a class="tumblr" data-notes="right" expr:href='"https://tumblr.com/share/link?url=" + data:post.canonicalUrl + "&name=" + data:post.title + "&description=" + data:post.snippet' onclick="window.open(this.href," sharer" ,"toolbar=0,status=0,width=626,height=500"); return false;" rel="nofollow" title="Share to Tumblr"> <svg viewbox="0 0 24 24"> <path d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17"></path> </svg><i><i>Share</i></i></a> </div> </div> - Sebenarnya itu pun sudah jadi namun tombol kembali ke atas nya (back to top) bentrok sama paket share-container, lalu bagaimana caranya ? berikut ini kalian cari kode .back-to-top lalu ganti bottom: 30px menjadi bottom: 80px jika masih kurang silahkan perbesar lagi angka 80px tersebut.
- Selesai, Simpan Tema
Oke dah jadi Cara Membuat Tombol Share Blog Ala Igniel, Demo? perasaan udah di atas deh.
Jika masih bingung dalam pemasangan Tombol Share Blog Ala Igniel di atas, silahkan bertanya di kolom komentar yang tersedia.
Sekian dan terimakasih telah berkunjung ke SusahTidur, meniru? tinggalkan izin dikomentar dan jangan lupa cantumkan sumber kode ya.
Wah mantap gan sekalian belajar ngoding hehe
BalasHapusWah syukurlah, Terimakasih sudah berkunjung ke SusahTidur mas, awas nanti ikutan SusahTidur hehe
Hapuskalo buat tombol share kaya di blog ini gimana ya?
BalasHapusMaaf mas itu buat sendiri hihi. Terimakasih sudah mampir
Hapusdah aku pasang dong. keren banget. thanks yaa
BalasHapuswah sudah saya cek beneran pas banget mas di blog Tatangga sampean hehe
HapusTerimakasih kembali sudah berkunjung ke SusahTidur, awas jangan sampai ikutan SusahTidur berat kamu ga akan kuat biar aku aja hihi
Halo mas terimakasih tutorialnya, namun saya kesulitan menerapkannya di template Linkmagz, sepertinya overflow tidak berpengaruh di template ini, ada pencerahan min?
BalasHapus