Membuat Tombol Share Blog Ala Igniel - Susah Tidur

Membuat Tombol Share Blog Ala Igniel

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 

  1. Jangan bosen ya, untuk yang pertama login dulu ke Dashboard Blogger sobat
  2. 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;
    }
  3. 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;
    }
    
  4. 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? 


  5. 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
      <!-- twitter -->
      <a class='twitter' expr:href='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
      <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;amp;description=&quot; + data:post.title' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/></a> 
      <a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + 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='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick="window.open(this.href,&quot;sharer&quot;,&quot; toolbar=0,status=0,width=626,height=436&quot;);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='&quot;https://api.whatsapp.com/send?phone=&amp;text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url' onclick="window.open(encodeURI(this.href),&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); 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='&quot;https://twitter.com/intent/tweet?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url' onclick="window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); 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='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.canonicalUrl + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick="window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); 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='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.canonicalUrl' onclick="window.open(this.href,&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); 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='&quot;https://tumblr.com/share/link?url=&quot; + data:post.canonicalUrl + &quot;&amp;name=&quot; + data:post.title + &quot;&amp;description=&quot; + data:post.snippet' onclick="window.open(this.href,&quot; sharer&quot; ,&quot;toolbar=0,status=0,width=626,height=500&quot;); 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>
  6. 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.
  7. 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.
"Membuat Tombol Share Blog Ala Igniel "
Tampilkan Komentar
Sembunyikan Komentar

7 Komentar untuk "Membuat Tombol Share Blog Ala Igniel "

  1. Wah mantap gan sekalian belajar ngoding hehe

    BalasHapus
    Balasan
    1. Wah syukurlah, Terimakasih sudah berkunjung ke SusahTidur mas, awas nanti ikutan SusahTidur hehe

      Hapus
  2. kalo buat tombol share kaya di blog ini gimana ya?

    BalasHapus
    Balasan
    1. Maaf mas itu buat sendiri hihi. Terimakasih sudah mampir

      Hapus
  3. dah aku pasang dong. keren banget. thanks yaa

    BalasHapus
    Balasan
    1. wah sudah saya cek beneran pas banget mas di blog Tatangga sampean hehe

      Terimakasih kembali sudah berkunjung ke SusahTidur, awas jangan sampai ikutan SusahTidur berat kamu ga akan kuat biar aku aja hihi

      Hapus
  4. Halo mas terimakasih tutorialnya, namun saya kesulitan menerapkannya di template Linkmagz, sepertinya overflow tidak berpengaruh di template ini, ada pencerahan min?

    BalasHapus

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel