Cara Membuat Tombol Share Mirip Blog Igniel

Tombol Share Igniel

IkhsanCoegraphy - Hallo kembali lagi bersama admin, banyak yang ngirim email ke admin suruh buatin tutorial cara buat share button mirip blog igniel.com. Tombol share pada blog ini juga sangat penting bagi blog kita kalau kalian belum tahu, dikarenakan bisa untuk membagikan tautan url postingan blog kita ke berbagai media sosial untuk mendapatkan visitor atau pengunjung.

Untuk tutorialnya ini admin menggunakan template viomagz ya, untuk template yang lain work atau tidaknya admin tidak tahu, silahkan di coba terlebih dahulu, tutorialnya bisa kalian simak selengkapnya di bawah ini.

Cara Membuat Share Button Mirip Igniel

  1. Masuk ke Akun Blogger kalian terlebih dahulu.
  2. Kemudian pilih Tema lalu  Edit Html
  3. Kalian cari kode #wrapper di template kalian, kemudian ubah text / tulisan seperti di bawah ini.
    overflow: hidden;

    menjadi seperti ini

    overflow: unset;

    Jadi kalian hanya tinggal mengubah text hidden menjadi unset.

  4. Kemudian cari kode /* Sharre button */ atau lebih jelasnya seperti 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;
    }

    Kalau sudah ketemu, tinggal kalian hapus kode tersebut kemudian ganti 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;
    }
  5. Cari kode ]]></b:skin>, dan pastekan kode di bawah ini tepat di atas kode tersebut.
    /* Igniel Share Button */
    .ignielshare{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}
    .ignielshare.show{position:sticky;position:-webkit-sticky;bottom:0}
    .ignielshare svg{width:17px;height:17px;margin:auto;text-align:center}
    .ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:0}
    .ignielshare svg path{fill:#fff}
    .ignielshare .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}
    .ignielshare .count svg path{fill:#7bbefa}
    .ignielshare i{font-style:normal;margin:0 3px;line-height:0}
    .ignielshare 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}
    .ignielshare a:not(:last-child){margin-right:7px}
    .ignielshare a:hover{box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.25)}
    .ignielshare a.facebook{background-color:#3a579a}
    .ignielshare a.twitter{background-color:#00abf0}
    .ignielshare a.pinterest{background-color:#cd1c1f}
    .ignielshare a.linkedin{background-color:#2554BF}
    .ignielshare a.tumblr{background-color:#314358}
    .ignielshare a.whatsapp{background-color:#4dc247}
    .ignielshare a.messenger{background-color:#448aff}
    .ignielshare i{display:none}
    .ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
    @media screen and (max-width:900px){
    .ignielshare i{display:block}
    .ignielshare .facebook svg,
    .ignielshare .pinterest svg,
    .ignielshare .tumblr svg{margin:0}
    }
    @media screen and (max-width:680px){
    .ignielshare{justify-content:space-between}
    .ignielshare a i{display:none}
    .ignielshare a{justify-content:center}
    .ignielshare a:not(:last-child){margin-right:5px}
    .ignielshare .facebook svg,.ignielshare .pinterest svg,.ignielshare .tumblr svg{margin:auto}
    }
    @media screen and (max-width:480px){
    .ignielshare a:not(:last-child){margin-right:3px}
    .ignielshare .count{margin-right:15px}
    }
    /* Igniel Share Button Dark Mode */
    .Night .ignielshare{background-color:#292e38}
    
  6. Cari lagi kode <div id="share-container"> atau seperti di bawah 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:default></b:case></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"></i></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"></i></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"></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"><i aria-hidden="true" class="fa fa-whatsapp"></i></a>
    </div>
    </div>
    

    Kemudian kalian hanya tinggal menghapus kode tersebut dan ganti dengan kode di bawah ini

    <div id="share-container">
    <div class="ignielshare"> 
    <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>
  7. Selesai...

Akhir kata

Cukup sekian tutorial cara membuat tombol share di blogger mirip igniel, kalau ada yang belum paham silahkan bertanya di kolom komentar atau melalui halaman contact yang ada di bawah, terimakasih.