Cara Membuat Tombol Share Seperti di Blog Igniel

Cara Membuat Tombol Share Seperti di Blog Igniel

Cara Membuat Tombol Share Seperti di Blog Igniel

Coretancode.com - Pada kesempatan kali ini admin ingin sedikit berbagi tutorial seputar dunia blogging yang pasti akan kalian cari jika sedang meredesign sebuah template entah itu baru ataupun lama.

Dengan adanya tombol berbagi ini, tentu sangatlah membantu para publisher agar postingannya dapat menjangkau area yang lebih luas tentunya dengan bantuan pengunjung yang mau dengan senang hati menyebarkan postingan yang publisher buat.

Jika sudah begini, bisa dipastikan trafik blog dapat meningkat secara cepat. Melakukan aktifitas share dapat dilakukan dengan 2 cara, yaitu menggunakan tombol itu sendiri, atau bisa juga dengan cara yang lebih susah yaitu menggunakan salin URL artikel.

Kenapa saya membagikan cara memasang tombol share seperti di blog igniel? Ada 2 alasan dari saya yaitu karena tombol sosial media yang disediakan sudah cukup lengkap, dan tentunya karena design yang minimalis dan kekinian.

Untuk membuat tombol share seperti ini cukuplah mudah, anda hanya perlu menambahkan beberapa kode CSS dan HTML pada template. Mau tau lebih jelasnya? Silahkan ikuti tutorial dibawah ini.

Cara Membuat Tombol Share Seperti di Blog Igniel

Tutorial berikut ini admin khususkan untuk kalian yang menggunakan template Viomagz, selain pada template tersebut silahkan kreasikan sendiri.
  1. Pastikan sudah login ke Blogger.com
  2. Pada menu dashboard, silahkan anda klik Template > lalu klik Edit HTML
  3. Kemudian cari kode #wrapper lalu ganti tulisan yang sudah di tandai seperti berikut.
    // Sebelum di ganti //
    #wrapper {
    background: $(posts.background.color);
    max-width: 1000px;
    margin: 0 auto;
    padding: 70px 30px 30px;
    overflow: hidden;
    }
    
    // Sesudah di ganti //
    #wrapper {
    background: $(posts.background.color);
    max-width: 1000px;
    margin: 0 auto;
    padding: 70px 30px 30px;
    overflow: unset;
    }
  4. Lalu cari juga kode .share-this-pleaseeeee seperti berikut,
    /* 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;
    }
  5. Ganti semua kode pada (langkah no.4) dengan kode berikut 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;
    }
  6. Selesai.

Memasang CSS Share Button

  1. Cari kode ]]></b:skin> di template.
    Untuk memudahkan pencarian, gunakan tombol pintasan CTRL+F di keyboard.
  2. Lalu salin kode berikut, dan letakkan diatas kode pada (langkah no.1)
    /* 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}
  3. Selesai.

Memasang HTML Share Button

  1. Cari kode yang seperti berikut 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>
  2. Kemudian ganti semua kode tersebut dengan kode HTML yang baru dibawah 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>
  3. Save Template.

Apabila semua kode telah terpasang sesuai tutorial diatas, bisa dipastikan tidak akan ada kesalahan di template selama proses pemasangan. Jika terjadi, silahkan kalian tanyakan melalui kolom komentar yang tersedia dibawah postingan ini.

Mungkin sekian dulu artikel tentang Cara Membuat Tombol Share Seperti di Blog Igniel, semoga selalu bermanfaat untuk kalian semuanya.
Terima kasih
Load comments