membuat tombol share Melayang Terkeren di Blog – Tampilan tema bagi seorang blogger adalah menjadi salah satu hal yang harus di perhatikan, selain enak dipandang juga dapat membuat pengunjung lebih nyaman lagi ketika mengunjungi situs Anda, dan salah satu tampilan yang harus diperhatikan dan sekaligus dapat meningkatkan pengunjung adalah dengan memasanh tombol share disetiap postingan blog, tidak asal memasang, tempatnyapun harus strategis dan yang paling tepat menurut banyak orang adalah dengan memasang tombol share melayang agar selalu dilihat pengunjung, nah pada kesempatan kali ini Admin akan memberikan tutorial pemasangannya.
Share Button pada sebuah blog sangatlah penting, jika banyak artikel Anda yang berkualitas dan menarik maka pengunjung akan cenderung membagikannya kesosial media seperti Facebook, whatsapp, instagram, path, twitter dan masih banyak yang lainnya, dengan pengunjung membagikan artikel Anda maka secara otomatis visitor akan terus bertambah dan nama blog Anda pun semakin dikenal.
Namun bagi Anda yang merasa sudah membuat artikel menarik, berkualitas, rinci namun masih minim yang share, hal itu bisa disebabkan karena penempatan tombol share di blog Anda yang kurang tepat, biasanya ada yang meletakkan dibawah judul, diakhir postingan dan ada juga yang membuat tombol share sticky atau melayang baik itu dibawah dan disamping, tombol share sticky lebih cenderung membuat pengunjung membagikan artikel Anda, karena posisinya yang selalu terlihat dan terus ada walaupun di scroll keatas dan kebawah.
Tetapi banyak juga yang tidak memasang share button sosial media karena hal hal tertentu, mungkin pemiliknya yang ingin nama blognya tidak dikenal banyak orang atau takut ada orang yang menjahili blognya, namun sangat disarankan untuk selalu memasang tombol share/fixed disetiap postingan blog agar selalu berkembang, dan tetap membuat konten yang bermanfaat berkualitas dan mudah dipahami pembaca.
Baca Juga : Cara Promosi Blog Di Search Engine
Pada kesempatan kali ini Admin akan membagikan tutorial cara pasang sticky share button di blog dengan desain yang keren kekinian dan tidak jadul, dijamin bikin blog Anda lebih menarik lagi. Apakah ini responsive? Admin jamin tidak akan memberatkan loading blog Anda, karena hanya terdiri dari CSS dan HTML saja itupun tidak terlalu banyak, berikut tutorialnya :
Cara Membuat Tombol Share Melayang/Sticky di Blog
Langkah langkahnya tidak lah sulit, Anda pasti bisa mempraktekkannya langsung dirumah, script ini Admin ambil dari sumber blog Mastamvan karena menurut Admin inilah yang paling keren dan responsive cocok di pasang di blog kesayangan Anda.
- Pertama pastikan sudah login di Blogger.com.
- Lalu klik tulisan “Tema” pada dashboard blog Anda.
- Lalu klik tulisan “Edit HTML” .
- Selanjutnya cari kod </head>, untuk memudahkan pencarian, klik saja CTRL + F.
- Dan masukkan kode dibawah ini tepat diatas kode </head>.
<style type=”text/css”> .sosmed{padding:0;margin:0;position:fixed;right:-119px;top:20%;width:200px} .sosmed input#hideshare,.sosmed input#openall{display:none} .sosmed ul,.sosmed ul li{list-style:none;list-style-type:none} .sticky li.openall{margin:0;padding:0} .sticky li.share{background-color:#333;color:#efefef;height:43px;padding:0;margin:0 0 1px 0;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;cursor:pointer} .sticky li.share:hover{margin-left:-10px;-webkit-transform:translateX(-115px);-moz-transform:translateX(-115px);-o-transform:translateX(-115px);-ms-transform:translateX(-115px);transform:translateX(-115px)} .sticky li.share i{float:left;margin:11px;margin-right:15px;color:white;font-size:20px} .sticky li.share b{padding:0;margin:0;text-transform:uppercase;line-height:43px} .sticky li a{text-decoration:none;color:white} .sosmed li.facebook{background:#3b5999} .sosmed li.twitter{background:#55acee} .sosmed li.google{background:#dd4b39} input:checked#hideshare ~ li.share,input:checked#hideshare ~ li.openall{display:none} label span.show,.sosmed li.openall label{position:relative;cursor:pointer;display:block;width:43px;font-size:20px} .sosmed li.openall label{text-align:center;background:#bbb;color:white} input:checked#hideshare ~ label span.show{padding:5px;text-align:center} label span.show:after{content:’f105′;font-family:FontAwesome} input:checked#hideshare ~ label span.show:after{content:’f104′} /*Popup*/ input:checked#openall ~ .allsosmed{position:fixed;top:20%;left:20%;right:20%;background:#fafafa;transition:opacity 500ms;width:50%;margin:0 auto;padding:2%;box-sizing:border-box;-webkit-transition:width 2s;/* Safari */ transition:width 2s;z-index:999;box-shadow:0 0 15px rgba(0,0,0,.1);overflow:auto;max-width:500px} @media screen and (max-width:700px){input:checked#openall ~ .allsosmed{left:10%;right:10%;width:70%}} @media screen and (max-width:500px){input:checked#openall ~ .allsosmed{left:5%;right:5%;width:80%}.allsosmed li a{font-size:12px}} @media screen and (max-width:300px){input:checked#openall ~ .allsosmed{top:5%}.openall .allsosmed li a{width:100%}} .allsosmed{width:0%;-webkit-transition:width 2s;/* Safari */ transition:width 2s;position:absolute;z-index:-99} .allsosmed li a{float:left;position:relative;margin:2px;overflow:hidden;line-height:0;width:48%;padding:10px;box-sizing:border-box;border-radius:3px} .allsosmed li a i{margin-right:5px} .allsosmed li.pinterest a{background:#b8191c} .allsosmed li.digg a{background:#546b9f} .allsosmed li.linkedin a{background:#007ab8} .allsosmed li.stumbleupon a{background:#ed4a13} .allsosmed li.delicious a{background:#3398fc} .allsosmed li.tumblr a{background:#32506d} .allsosmed .login{display:inline-block;position:relative;width:100%;text-align:center} .allsosmed .login p{margin:10px 0;padding:0} .allsosmed .login form input{border:none;padding:15px 5px;background-color:#b1b6bd;font-weight:600;color:rgba(0,0,0,0.5);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:3px;color:#fafafa;margin:3px} .allsosmed .login form input.email{width:75%} .allsosmed .login form input.signin{width:20%;min-width:80px;cursor:pointer} </style>
- Langkah selanjutnya cari lagi kode </body> dan letakkan kode share button melayang dibawah ini tepat diatas kode </body>
<div class=”sosmed”> <ul class=”sticky”> <input id=’hideshare’ type=”checkbox” /> <li class=”share facebook”><span><a expr:href=’"https://www.facebook.com/sharer.php?u=" + data:blog.url’><i class=”fa fa-facebook-square” aria-hidden=”true”></i> <b>Facebook</b></a></span></li> <li class=”share twitter”><span><a expr:href=’"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"’><i class=”fa fa-twitter-square” aria-hidden=”true”></i> <b>Twitter</b></a></span></li> <li class=”share google”><span><a expr:href=’"https://plus.google.com/share?url=" + data:blog.url’><i class=”fa fa-google-plus-square” aria-hidden=”true”></i> <b>Google+</b></a></span></li> <li class=”openall”><input id=’openall’ type=”checkbox” /><label for=”openall” class=”switch”><span><i class=”fa fa-plus” aria-hidden=”true”></i></span></label> <ul class=”allsosmed”> <script type=”text/javascript”> //<![CDATA[ var siteurl = window.location.href; document.write(‘<li class=”pinterest”><a href=”javascript:pinIt();”><i class=”fa fa-pinterest-square” aria-hidden=”true”></i> <span>Pinterest</span></a></li> <li class=”digg”><a href=”//www.digg.com/submit?url=’ + siteurl + ‘” target=”_blank” title=”Share This On Digg”><i class=”fa fa-digg” aria-hidden=”true”></i> <span>Digg</span></a></li> <li class=”linkedin”><a href=”//www.linkedin.com/shareArticle?mini=true&url=’ + siteurl + ‘” target=”_blank” title=”Share This On Linkedin”><i class=”fa fa-linkedin-square” aria-hidden=”true”></i> <span>Linkedin</span></a></li> <li class=”stumbleupon”><a href=”//www.stumbleupon.com/submit?url=’ + siteurl + ‘&title=’ + encodeURIComponent(document.title) + ‘” target=”_blank” title=”Share This On Stumbleupon”><i class=”fa fa-stumbleupon” aria-hidden=”true”></i> <span>Stumbleupon</span></a></li> <li class=”delicious”><a href=”//delicious.com/post?url=’ + siteurl + ‘&title=’ + encodeURIComponent(document.title) + ‘” target=”_blank” title=”Share This On Delicious”><i class=”fa fa-delicious” aria-hidden=”true”></i> <span>Delicious</span></a></li> <li class=”tumblr”><a href=”https://www.tumblr.com/share/link?url=’ + siteurl + ‘&name=’ + encodeURIComponent(document.title) + ‘&description=’ + encodeURIComponent(document.title) + ‘” target=”_blank” title=”Share This On Tumblr”><i class=”fa fa-tumblr-square” aria-hidden=”true”></i> <span>Tumblr</span></a></li> ‘); function pinIt() { var t = document.createElement(“script”); t.setAttribute(“type”, “text/javascript”), t.setAttribute(“charset”, “UTF-8”), t.setAttribute(“src”, “https://assets.pinterest.com/js/pinmarklet.js?r=” + 99999999 * Math.random()), document.body.appendChild(t) }; //]]> </script> <div class=”login”> <p>Login</p> <form action=”https://feedburner.google.com/fb/a/mailverify” method=”post” onsubmit=”window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=MasTamvan’, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”> <input class=”email” name=”email” onblur=”if (this.value == "") {this.value = "Alamat Email";}” onfocus=”if (this.value == "Alamat Email") {this.value = "";}” value=”Email” type=”text” /> <input name=”uri” value=”MasTamvan” type=”hidden” /> <input name=”loc” value=”en_US” type=”hidden” /> <input class=”signin” value=”Sign In” type=”submit” /> </form> </div> </ul> </li> <label for=”hideshare” class=”switch”><span class=”show”></span></label> </ul> </div>
Dan terakhir adalah klik Simpan.
Kode diatas adalah bisa membuat tombol share disamping kiri / kanan blog Anda, tampil di mode mobile ataupun desktop, sekarang Anda sudah berhasil bikin sticky button share dan tinggal tunggu pengunjung Anda membagikan artikel dengan tombol baru, itulah script keren yang bisa Anda coba, cukup sekian dari Admin dan jangan lupa baca artikel menarik lainnya hanya di Inovatifku Tutorials! Sekian dan terimakasih.