05 April 2022

Ikon Share Medsos Melayang di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Ikon Share Medsos Melayang di Blog

Ikon Medsos Melayang menjadi trend untuk trik membuat share Media Sosial di Blog. Dengan ikon melayang dan menempel di sisi sidebar browser akan menambah gaya sebuah blog.

Kegunaan share Medsos ini tidak lain tidak bukan adalah untuk membuat blog kita menjadi lebih terkenal karena dengan Media Sosial inilah promosi blog yang bisa dibilang sangat ampuh.

Baca Juga : 2 Cara Memasang Ikon Medsos di Pojok Blog dengan JQuery dan CSS HTML

Apalagi media sosial jaman sekarang menjadi trend semua kalangan pengguna internet baik di perangkat desktop maupun perangkat HP. Sehingga dengan widget ini kemungkinan kita sudah melakukan promo blog kita.

Lihat saja kemajuan media sosial sekarang ini, misal Facebook, Twitter, Pinterest dan Instagram. Mereka para raksasa Media Sosial dunia menjadi raja search engine, lihat saja ketika mengetikkan keyword, pastilah nama mereka muncul.

Baca Juga : Ikon Whatsapp Terpasang di Pojok Atas Kanan Blog

Kembali ke share medsos. Kali ini kita akan membuat share medsos tidak hanya terpampang di bagian bawah postingan, tapi akan berada melayang di sisi kanan blog. Untuk itu ayo kita lakukan bersama.

Caranya adalah :

Ikon Share Medsos Melayang di Blog


Langsung saja kalian masuk ke template ya. Klik Tema kemudian pilih Sesuaikan : Edit HTML dan cari kode ]]></b:skin> kemudian tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut. Kodenya ini
<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:&#39;\f105&#39;;font-family:FontAwesome}
input:checked#hideshare ~ label span.show:after{content:&#39;\f104&#39;}
/*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>


Masih di template yang sama. Sekarang kalian cari kode </body> dan tempelkan kode dibawah ini diatas kode </body> ini. Awas ! jangan lupa diatasnya bukan dibawahnya.
<div class='sosmed'>
<ul class='sticky'>
        <input id='hideshare' type='checkbox'/>
        <li class='share facebook'><span><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:blog.url'><i aria-hidden='true' class='fa fa-facebook-square'/> <b>Facebook</b></a></span></li>
        <li class='share twitter'><span><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;lang=id&quot;'><i aria-hidden='true' class='fa fa-twitter-square'/> <b>Twitter</b></a></span></li>
        <li class='share google'><span><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url'><i aria-hidden='true' class='fa fa-google-plus-square'/> <b>Google+</b></a></span></li>
        <li class='openall'><input id='openall' type='checkbox'/><label class='switch' for='openall'><span><i aria-hidden='true' class='fa fa-plus'/></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&amp;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 + '&amp;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 + '&amp;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(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Alifacode&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                        <input class='email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Alamat Email&quot;;}' onfocus='if (this.value == &quot;Alamat Email&quot;) {this.value = &quot;&quot;;}' type='text' value='Email'/>
                        <input name='uri' type='hidden' value='Alifacode'/>
                        <input name='loc' type='hidden' value='en_US'/>
                        <input class='signin' type='submit' value='Sign In'/>
                    </form>
                </div>
            </ul>
        </li>
        <label class='switch' for='hideshare'><span class='show'/></label>
    </ul>
</div> 


Catatan :
Untuk nama Alifacode pada Feedburner ganti dengan ID Feedburner kamu.


Bila ikon medsos tidak muncul tapi hanya muncul ikon kotak-kotak. Tempelkan kode Bootstrap dibawah ini diatas kode </head>. Ini kodenya
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>


Nah setelah semua sudah dilakukan sekarang saatnya kamu save kerjaan kamu dan lihat. Wow sudah terlihat itu ikon medsosnya melayang di blog kamu iya khan. Semoga dengan ikon medsos melayang ini bisa membuat blog kamu semakin ringkas dan tidak memakan tempat ketika akan menempelkan ikon medsos ya. Terima kasih kalian sudah mampir disini membaca artikel Ikon Share Medsos Melayang di Blog. Sampai jumpa lagi di artikel berikutnya. Saya akan berbagi dengan kalian tentang blog dengan tutorial yang sederhana dan gampang dipahami. Sekian dan terima kasih. Wassalam.

Bagikan ke teman-teman kamu
Label Postingan : Tips Blog

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Ikon Share Medsos Melayang di Blog . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon