Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id - Hallo sobat blogger yang berbahagia Home of Technology, bertemu kembali dengan saya, Posting yang saya unggah pada kali ini adalah Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id , Artikel ini bertujuan untuk memudahkan kalian mencari apa yang kalian inginkan, kami telah mempersiapkan artikel ini dengan baik untuk kalian baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel tutorial-blogger, yang kami tulis ini dapat kalian pahami dengan baik, semoga artikel ini berguna untuk kalian, jika ada kesalahan penulisan yang dilakukan oleh penulis mohon dimaafkan karena penulis masih belajar. baiklah, selamat membaca.

Judul : Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id
link : Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id

Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id

Sudah banyak nya tutorial untuk membuat sharing button di blog atau website, kali ini saya akan bahas bagaimana cara membuat share button di blog dengan efek slide. yang pastinya akan membuat terlihat menarik.

Cara Membuat Tombol Share Efek Slide

1. Login ke Blogger dan pilih Blog yang ingin anda pasangin widget ini.
2. Klik Template � Edit HTML
3. Tambahkan kode CSS berikut ini diatas kode ]]></b:skin> atau </style>

#button-count-share {

    width: 100%;

    overflow: hidden;

    background: transparent;

    margin: 0 auto;

    padding: 3px;

}

#button-count-share span {

    float: left;

    position: relative;

    font-size: 13px;

    color: #fff;

    margin: 12px 5px 12px 5px;

}

.button-share {

    background: #dce0e0;

    position: relative;

    display: block;

    float: left;

    height: 40px;

    overflow: hidden;

    width: 140px;

    margin: 4px;

    border-radius: 3px;

}

.ikons {

    display: block;

    float: left;

    position: relative;

    z-index: 3;

    height: 100%;

    vertical-align: top;

    width: 38px;

    text-align: center;

}

.ikons i {

    color: #fff;

    line-height: 33px;

}

.slide-share {

    z-index: 2;

    display: block;

    height: 100%;

    left: 38px;

    position: absolute;

    width: 108px;

    margin: 0;

}

.slide-share p {

    font-family: Verdana;

    font-weight: 400;

    border-left: 1px solid rgba(255,255,255,0.35);

    color: #fff;

    font-size: 14px;

    left: 0;

    position: absolute;

    text-align: center;

    top: 10px;

    width: 100%;

    margin: 0;

}

.button-share .slide-share {

    transition: all 0.4s ease-in-out;

}

.facebook .fb_iframe_widget {

    display: block;

    position: absolute;

    right: 5px;

    top: 0;

    z-index: 1;

}

.twitter iframe {

    left: 50px;

    top: 10px;

    z-index: 1;

    display: block;

    position: absolute;

}

.google #___plusone_0 {

    width: 90px!important;

    top: 10px;

    right: 5px;

    position: absolute;

    display: block;

    z-index: 1;

}

.facebook .ikons,.facebook .slide-share {

    background: #4f79bc;

}

.twitter .ikons,.twitter .slide-share {

    background: #63cef2;

}

.google .ikons,.google .slide-share {

    background: #f36261;

}

.facebook:hover .slide-share,.twitter:hover .slide-share,.google:hover .slide-share {

    left: 180px;

    opacity: 0.6;

}

4. Berikutnya silahkan caari kode </head> Lalu letakkan kode dibawah ini tepat diatas kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

5. Terakhir cari kode <data:post.body/> lalu letakkan kode dibawah ini tepat dibawah <data:post.body/>,  Biasanya kode <data:post.body/> ada lebih dari satu kode yang sama. sobat pilih kode <data:post.body/>. Sobat coba saja satu persatu biasanya ada di kode kedua atau ketiga. Oh iya jika sudah ada widget share di template anda silahkan hapus dan ganti dengan kode html di bawah ini..

<div class='clear'/> 

<div id='button-count-share'>

<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>

<div class='slide-share'>

<p>Share</p>

</div>

<a class='fb-share-button' name='fb_share' rel='nofollow' share_url='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' type='button_count'/>

</div>

<div class='facebook button-share'><i class='ikons'><i class='icon-facebook icon-large'/></i>

<div class='slide-share'>

<p>Like</p>

</div>

<div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false'/>

</div>

<div class='google button-share'><i class='ikons'><i class='icon-google-plus icon-large'/></i>

<div class='slide-share'>

<p>G+</p>

</div>

<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url' rel='nofollow'/>

<script type='text/javascript'>

  window.___gcfg = {lang: &#39;id&#39;};

  (function() {

    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;

    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;

    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);

  })();

</script>

</div>

<div class='twitter button-share'><i class='ikons'><i class='icon-twitter icon-large'/></i>

<div class='slide-share'>

<p>Tweet</p>

</div>

<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>

<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

</div>

<div class='clear'/>

</div>

<div class='clear'/>

6. Simpan Template dan lihat hasinya.

7. Untuk memunculkan widget hanya di halaman posting, Pada kode No.5 diatas silahkan tambahkan kode berikut ini dan letakan paling atas:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

dan tambahkan kode dibawah ini di paling bawah kode No.5.

</b:if>

Demikianlah Artikel Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id

Sekianlah artikel Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Informasi Teknologi Cara Membuat Tombol Share Efek Slide di Blog, homitech.blogspot.co.id dengan alamat link https://homitech.blogspot.com/2015/02/informasi-teknologi-cara-membuat-tombol.html

Tweet