Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML / TIPS BLOGGER

Cara Menciptakan Tombol Share Button Model Show Hide Di Blog


Di blog ini mungkin sudah ada beberapa artikel yang pernah saya posting wacana cara memasang share button di blog dan salah satu nya adalah Cara menciptakan tombol social share serta tombol whatsapp di blog. Tapi untuk share button yang akan saya bagikan kali ini berbeda model nya. Tombol share button ini model nya ada tombol show dan hide nya.

Dan Share Button Model Show Hide ini mungkin pernah teman lihat di template - template menyerupai pada template yang saya gunakan di blog ini, yang dimana share button nya ada tombol show hide nya. Dan berdasarkan saya model tombol share button ini sangat simple dan tidak menciptakan blog teman jadi berat loh.

Tapi bagaimana pun juga semua model share button sama saja fungsi nya adalah untuk mempermudah bagi kita untuk membagikan artikel yang kita buat. Walaupun dari aneka macam model niscaya nya ada yang menciptakan blog jadi berat dan ada yang tidak.

Termasuk yang mana kah model share button yang teman miliki kini ini? Bila teman ingin mencoba atau ingin ganti model share button yang teman punya dengan model share button yang akan saya bagikan kali ini, teman dapat ikuti langkah - langkah nya sebagai berikut.

Cara Membuat Tombol Share Button Model Show Hide Di Blog

Langkah pertama yang harus teman lakukan adalah jika di template teman sebelum nya sudah ada isyarat CSS Share button maupun isyarat HTML nya, silahkan teman hapus terlebih dahulu.

Dan selanjut nya silahkan teman copy isyarat CSS di bawah ini kemudian letakan isyarat tersebut di atas isyarat </style> pada template sobat.

 /* CSS Share Button */ #share_btnper{margin:5px;padding:0} .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{float:left;display:inline-block;overflow:hidden} .share_btn li a,.shareplus{color:#fff;padding:0;width:40px;display:block;text-align:center;height:35px;line-height:35px;transition:all 0.25s;margin:0 5px 5px 0;text-transform:uppercase;letter-spacing:1px;border-radius:4px;overflow:hidden} .share_btn i{font-size:16px;padding:0;margin:0;line-height:35px;text-align:center} .shareplus{padding:0;background:#aaa;cursor:pointer} .share_btn li a.fb i,.share_btn li a.tw i{width:20px;text-align:left} .share_btn a:hover{background:#333} .share_btn li a.fb{background:#4867aa;padding:0 35px;width:auto} .share_btn li a.tw{background:#1da1f2;padding:0 35px;width:auto} .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:hover,.shareplus:hover{-webkit-filter:grayscale(100%);opacity:0.8} @media screen and (max-width:600px){ .share_btn li a.fb,.share_btn li a.tw{padding:0 37px}} @media screen and (max-width:480px){ .share_btn li a.fb,.share_btn li a.tw{padding:0 25px}} @media screen and (max-width:320px){ .share_btn ul li a.fb,.share_btn ul li a.tw{padding:0 14px}}

Dan selanjut nya silahkan teman cari isyarat menyerupai di bawah ini.

           <b:includable id='shareButtons' var='post'/>

Bila sudah ketemu, silahkan teman copy isyarat di bawah ini dan letakan isyarat tersebut sempurna di bawah isyarat yang di atas tadi.

           <b:includable id='sharethis' var='post'> <div class='share_btn'><ul> <li><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=626,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' title='Share to Facebook'><i class='fa fa-facebook'/> SHARE</a></li> <li><a class='tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/> SHARE</a></li> <li><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Share on Google+'><i class='fa fa-google-plus'/></a></li> <div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;none&apos;'><i aria-hidden='true' class='fa fa-plus'/></span></div> </ul> <ul class='showother' id='showother'> <li><a class='pt' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;amp;description= + data:post.title&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' target='_blank'><i class='fa fa-pinterest'/></a></li> <li><a class='le' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);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,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-tumblr'/></a></li> <li><a class='ln' expr:href='&quot;https://timeline.line.me/social-plugin/share?url=&quot; + 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><whatsapp expr:href='data:post.url' expr:text='data:post.title'/><a class='wa' expr:href='&quot;whatsapp://send?text=&quot;+ data:post.url'><i aria-hidden='true' class='fa fa-whatsapp' style='clear:both;font-size:24px!important'/></a></li> <li><a class='em' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' expr:title='data:top.emailThisMsg' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><i class='fa fa-envelope-o'/></a></li> <li><a class='bm' expr:href='&quot;bbmi://api/share?message=&quot; + data:post.url + &quot;?ref=bbm&amp;userCustomMessage=&quot; + 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> <div id='showshare'><span class='shareplus' href='javascript:void(0)' onclick='document.getElementById(&apos;showother&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;showshare&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-minus'/></span></div>   </ul>   </div> </b:includable>

Dan langkah selanjut nya silahkan teman copy isyarat pemanggil share button di bawah ini dan isyarat ini bebas dapat teman letakan di bawah judul artikel maupun di bawah artikel.

 <div class='share-wrapper' id='share_btnper'> <b:include data='post' name='sharethis'/>   </div>

Terakhir save template teman dan silahkan lihat hasil nya.

Setiap template memiliki ukuran yang berbeda - beda, jadi bilamana share button ini ukuran nya tidak menyesuaikan dengan template sobat, teman cukup edit CSS nya saja.

Untuk demo teman dapat lihat share button yang ada di bawah artikel pada blog ini. Bagaimana berdasarkan sobat? Praktis bukan! Bagi yang belum paham dengan tutorial ini silahkan teman tanyakan di kolom komentar di bawah.

Mungkin itu saja yang dapat saya bagikan pada kesempatan kali ini. biar artikel ini dapat bermanfaat buat teman yang sedang mencari Cara Membuat Tombol Share Button Model Show Hide Di Blog. Selamat mencoba!