Ads 728x90

» » Membuat Tombol Share Floating di Blog menggunakan HTML
Dede Ubed 23 Oktober 0 komentar Read
adscblog
Tombol share merupakan salah satu tombol yang sangat berperan penting di setiap blog,suatu blog bisa menjadi blog yang terkenal dan bahkan mempunyai banyak Visitor yang datang dari salah satu Media Social yang terdapat di Blog tersebut

Karena dengan ada nya tombol media social untuk menshare setiap artikel yang mereka sukai sehingga menaik perhatian ribuan orang yang terdapat di setiap akun media social yang mereka miliki
Maka jangan heran jika ada suatu blog yang pengujung nya kebanyakan dari Media social,baik itu dari Facebook,Twitter,Google+,Pinteres ataupun yang lain nya,oleh Karena itu menurut saya tombol Share Media Social ini sangat lah penting dan sangat berperan penting demi kelangsungan suatu blog

Dan Pada Umum nya,tombol Share Media Social nya terdapat di bagian bawah postingan,bahkan ada juga yang memasang nya di bagian atas suatu halaman postingan blog,sehingga dapat terlihat jelas dan memudahkan para pengujung blog untuk mengklik tombol Share tersebut

Namun Kali ini tidak sedikit para pengguna Blogger yang memasang tombol share ini di letakan di bagian samping kiri suatu halaman blog,sehingga tombol share tersebut selalu terlihat oleh para pengujung blog

Tombol Share tersebut dengan tampilan nya yang melayang di bagian kri blog sehingga para pengunjung akan selalu melihat jelas tombol shae tersebut dan besar kemungkinan para pengujung akan mengklik tombol share tersebut dan membagikan artikel yang mereka miliki

Namun biasa nya tombol share Floating atau melayang ini,para blogger mendapat kan nya di situs yang menyediakan tombol tersebut,tetapi disini saya akan berbagi Tombol Share tersebut dengan memasang kode HTML nya di bagian template blog

Cara memasang tombol Share Melayang/Floating di halaman blog

Nah utnuk itu jika anda tertarik dengan tombol share Floating ini,anda dapat mengikuti tutorial pemasangan tombol Share Floating tersebut di bawah ini
  • Seperti biasa sialahkan anda masuk ke Blogger anda menggunakan Email dan Juga Pasword nya
  • Setelah itu silahkan anda klik Template yang berada di bagian kiri Dashboard Blogger tersebut
  • Setelah itu klik edit html
  • Setelah anda berada di bagian edit html silahkan anda cari kode </head>,untuk memudahkan anda dalam pencarian kode tesebut,silahkan tekan kode CTRL+F secara bersamaan,lalu letakan kode berikut tepat di atas kode </head> tersebut
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Floating Social Share Button Bar Version 2.0
Designed by:: http://www.twistblogger.com
Shares by:: http://www.infotrens.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome 4.2.0
**************** Do Not Remove These Credits *****************
------------------------------------------------------------*/
.infotrens_SocialBar {
position:fixed;
bottom:30%;
padding:0;
left:0;
background:none;
text-align:center;
margin:0 auto;
z-index:99999999
}

.infotrens_SocialBar label:hover {
cursor:pointer;
opacity:1
}

.infotrens_SocialBar label {
text-align:center;
opacity:.4;
width:50px;
background:#3A3939;
color:#FFF;
border:0;
font-family:FontAwesome;
display:block;
font-size:12px;
padding:0;
border-radius:0;
-webkit-transition:all .4s ease-in-out;
-moz-transition:all .4s ease-in-out;
-ms-transition:all .4s ease-in-out;
-o-transition:all .4s ease-in-out;
transition:all .4s ease-in-out;
position:absolute;
line-height:1.5em;
margin-top:346px
}

input.ShowHide_Button:checked + label {
transform-origin:50% 0!important;
-webkit-transform-origin:50% 0!important;
-moz-transform-origin:50% 0!important;
-ms-transform-origin:50% 0!important;
-o-transform-origin:50% 0!important;
opacity:1;
-webkit-transform:translateX(0px) rotateY(-180deg);
-moz-transform:translateX(0px) rotateY(-180deg);
-ms-transform:translateX(0px) rotateY(-180deg);
-o-transform:translateX(0px) rotateY(-180deg);
transform:translateX(0px) rotateY(-180deg);
-webkit-transition-delay:.2s;
-moz-transition-delay:.2s;
-ms-transition-delay:.2s;
-o-transition-delay:.2s;
transition-delay:.2s;
border:1px solid #3A3939;
border-radius:50px 0 0 50px;
width:30px;
max-width:30px
}

input.ShowHide_Button ~ .ShowHideMe {
-webkit-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);
-moz-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);
-ms-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);
-o-transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620);
transition:.6s all cubic-bezier(0.730,-0.485,0.145,1.620)
}

input.ShowHide_Button:checked ~ .ShowHideMe {
margin-left:-75px!important
}

input.ShowHide_Button {
display:none
}

.infotrens_SocialBar .social_menu {
display:inline-block;
float:left;
list-style:none;
max-width:50px;
margin:0;
padding:0
}

.infotrens_SocialBar .social_menu .button_facebook {
background:#3a579a
}

.infotrens_SocialBar .social_menu .button_facebook:hover {
background:#314a83
}

.infotrens_SocialBar .social_menu .button_twitter {
background:#00abf0
}

.infotrens_SocialBar .social_menu .button_twitter:hover {
background:#0092cc
}

.infotrens_SocialBar .social_menu .button_googleplus {
background:#df4a32
}

.infotrens_SocialBar .social_menu .button_googleplus:hover {
background:#be3f2b
}

.infotrens_SocialBar .social_menu .button_pinterest {
background:#cd1c1f
}

.infotrens_SocialBar .social_menu .button_pinterest:hover {
background:#ae181a
}

.infotrens_SocialBar .social_menu .button_stumbleupon {
background:#ea4b24
}

.infotrens_SocialBar .social_menu .button_stumbleupon:hover {
background:#c7401f
}

.infotrens_SocialBar .social_menu .button_linkedin {
background:#2554BF
}

.infotrens_SocialBar .social_menu .button_linkedin:hover {
background:#224EB4
}

.infotrens_SocialBar .social_menu .button_facebook .count,.infotrens_SocialBar .social_menu .button_twitter .count,.infotrens_SocialBar .social_menu .button_googleplus .count,.infotrens_SocialBar .social_menu .button_pinterest .count,.infotrens_SocialBar .social_menu .button_stumbleupon .count,.infotrens_SocialBar .social_menu .button_linkedin .count {
color:#fff!important;
padding-top:4px;
font-size:13px!important;
line-height:1.2em;
font-family:sans-serif;
font-weight:700
}

.infotrens_SocialBar .social_menu > ul {
margin:0;
padding:0;
list-style:none
}

.infotrens_SocialBar .social_menu .share {
background:#FFF;
color:#807F7F;
font-size:11px;
height:45px!important
}

.infotrens_SocialBar .social_menu .share .count.h4 {
font-size:18px;
font-family:sans-serif;
color:#424242;
height:25px!important;
line-height:1.5em;
font-weight:700;
margin:0!important
}

.infotrens_SocialBar .social_menu .share .h6 {
padding-bottom:3px;
font-family:sans-serif;
margin:0!important;
line-height:1.5em;
font-size:11px
}

.infotrens_SocialBar .social_menu > ul > li {
margin:0;
position:relative;
text-align:center;
list-style:none;
list-style-type:none;
padding:0;
border:0;
border-left:0 solid rgba(0,0,0,.4);
height:50px;
width:50px;
overflow:hidden;
display:block;
box-sizing:border-box;
background:none;
box-sizing:content-box;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}

.infotrens_SocialBar .social_menu > ul > li a {
display:block;
width:100%;
height:100%;
box-sizing:border-box;
padding:5px 0;
cursor:pointer;
text-decoration:none
}

.infotrens_SocialBar .social_menu > ul > li:hover {
border-left:5px solid rgba(0,0,0,.3);
width:40px
}

.infotrens_SocialBar .social_menu > ul > li i {
color:#fff!important;
font-family:FontAwesome;
font-size:20px;
font-style:normal;
font-weight:400;
line-height:1em;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
-ms-transition:all .3s ease-in-out;
-o-transition:all .3s ease-in-out;
transition:all .3s ease-in-out
}

.infotrens_SocialBar .social_menu > ul > li:hover i {
opacity:.9
}

@media only screen and (min-width:768px) and (max-width:979px) {
.infotrens_SocialBar {
bottom:20%!important
}
}

@media only screen and (min-width:480px) and (max-width:767px) {
.infotrens_SocialBar {
bottom:15%!important
}
}

@media only screen and (max-width:479px) {
.infotrens_SocialBar {
bottom:10%!important;
display:none!important
}
}
Catatan : Coba anda perhatikan tulisan yang di bawah ini merah di atas,jika kode tersebut sudah terpasang di blog anda,maka kode tersebut tidak usah di pasang kembali
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  • Langkah selanjut nya silahkan anda cari kode </body> pada umum nya kode tersebut berada di bagain akhir kode template,setelah ketemu lalu anda pasang kode berikut sebelum kode tersebut
     <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div class='infotrens_SocialBar'>
      <input class='ShowHide_Button' id='trens' type='checkbox'/>
      <label for='trens'><i class='fa fa-arrow-left'/></label>
      <div class='ShowHideMe'>
      <div class='social_menu'>
    <div class='share'>
        <div class='share-btn' data-service='total'>
            <div class='count h4'/>
            <div class='h6'>SHARES</div>
      </div></div>
    <ul>
    <li class='button_facebook'>
    <a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
    <strong><i class='fa fa-facebook'/>
    <div class='share-btn' data-service='facebook'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_twitter'>
    <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @TwistBlogger - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'><strong><i class='fa fa-twitter'/>
    <div class='share-btn' data-service='twitter'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_googleplus'>
    <a expr:href='&quot;   https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'><strong><i class='fa fa-google-plus'/>
    <div class='share-btn' data-service='google'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_pinterest'>
    <a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &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'><strong><i class='fa fa-pinterest'/>
    <div class='share-btn' data-service='pinterest'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_stumbleupon'>
    <a expr:href='&quot;   http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;   &amp;   title=&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'><strong><i class='fa fa-stumbleupon-circle'/>
    <div class='share-btn' data-service='stumbleupon'>
            <div class='count'/></div></strong>
    </a>
    </li>
    <li class='button_linkedin'>
    <a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'><strong><i class='fa fa-linkedin'/>
    <div class='share-btn' data-service='linkedin'>
            <div class='count'/></div></strong>
    </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    <script type='text/javascript'>//<![CDATA[
    $(document).ready(function () {
      var shareUrl = document.location.href.toLowerCase();
        $.getJSON('http://sharecount.twistblogger.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
            shares = data.shares;
            $(".count").each(function (index, el) {
                service = $(el).parents(".share-btn").attr("data-service");
                count = shares[service];
                if (count > 1000) {
                    count = (count / 1000).toFixed(1);
                    if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                    else count = count + "k";
                }
                $(el).html(count);
            });
        });
    });
    //]]></script>
    </b:if>
    </b:if>
  • Save template dan lihat hasil nya
Nah itulah cara memasang tombol share melayang atau floating di halaman blog,semoga artikel ini bisa membantu sobat blogger semua,dan semoga bermanfaat,salam blogger
adscblog

Recommendation Apps
ads1
Posted by Dede Ubed, Published at 23 Oktober and have 0 komentar
Dede Ubed

I manage this blog and post tutorials related to Blogger, SEO, Software Tools, Windows, CSS and Social Media. Did you find this blog helpful? Please socialize with us !!


Perlihatkan Semua Komentar Tutup Semua Komentar

* Silahkan Berkomentar Tetapi Sopan
* Jangan Meninggalkan Spam atau terkait lain nya
* Jangan Promosi

Ads 728x90