Cara Membuat Efek Easing Sosial Media Bookmark Di Blog Tampilan Lebih Joss

Membuat Efek Easing Sosial Bokmark Di Blog . Apa yang Anda bayangkan bila template sesak dengan widget pelengkap seperti recent post dan banyak lagi, nah ada cara praktis untuk menimalisir untuk widget share sosial media berupa bookmark di blog bisa disiasati dengan membuat efek easing yang bisa membutuhkan tempat kecil dengan beragam widget seperti gambar di bawah.

Efek Easing Sosial Bokmark Di Blog . Widget ini terdapat sosial sosial media dan bookmark yang berada di sebelah kanan layar monitor,kita langsung sentuh seperti layar sentuh smartphone icon langsung bisa digerakan naik juga turun.jadi widget ini bisa memperkecil area widget yang minimalis banyak ikon untuk sekali sentuh dan pilih.Untuk membuat efek easing sosial media bookmark sangat bagus bila anda memilki struktur template dengan bentang pixel kecil maka kalau tidak di coba template tampilan blog anda terasa penuh. Penempatan efek easing soaial media bookmark di blog biasanya disidebar bagian kiri dan kanan bagian atas agar pengunjung bisa menggunakan untuk share atau mengikuti anda via sosial media misal facebook dan twitter yang ada di widget ini.

Seperti disinggung di atas penempatan sosial media efek easing seperti memoniitor pengguna yang mengikuti Anda dengan tampilan yang lebih ciamik dan keren abis, tak salah seorang pengembang widget ini versi gratisan dan banyak bloger memasang widget ini di templatenya.

Baca juga : Cara membuat daftar isi pada blog

Untuk lebih jelasnya inilah Cara membuat efek easing sosial media bookmark agar tampilan blog lebih keren seperti di bawah ini javascripnya juga panduannya pemasangannya, Selamat mencoba  :



MEMBUAT EFEK EASING SOSIAL BOOKMARK UNTUK BLOG LEBIH KEREN DAN LEBIH JOSS

Ok nih cara-cara membuatnya ikuti langsung langkah langkah di bawah ini:

1). Login ke Blogger dengan url http://bogger.com
2). Kemudian pilih sub menu Template seperti gambar di bawah ini

3). Maka akan terbuka tampila seperti gambar di bawah ini dan kemudia klik Edit HTML

4). Letakkan kode CSS di bawah ini diatas ]]></b:skin>:

st
.social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url( http://1.bp.blogspot.com /-KOzIiYFlBAk/UUmLwwZSs- I/AAAAAAAAAnA /h6G772N3cpI/s1600 /mas-icons.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter- btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google- btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest- btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube- btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social- text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}

5). Selanjutnya jquery dan javascript, masih diedit HTML letakkan kode berikut sebelum </head>

<script src=' http://ajax.googleapis.com /ajax/libs/jquery/1.8.3 /jquery.min.js' type='text/javascript'/><script src=' http://ajax.googleapis.com /ajax/libs/jqueryui/1.9.2 /jquery-ui.min.js' type='text/javascript'/>
<script>
$(window).load(function(){
$(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
$(this).stop();
$(this).animate({width:&#39 ;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
$(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
$(this).stop();
$(this).animate({width:&#39 ;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
});
});
</script>

6). Dan masukan kode HTML di bawah ini ,sebelum </body>:
Ganti tulisan your dengan ID anda

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href=' https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href=' https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href=' https://plus.google.com/your G ' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href=' http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href=' https://www.youtube.com /user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href=' http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

7). Ahir simpan di template anda.

Baca juga :
• Mengatasi Loading Berat Pada Blog
• Cara Membuat Cek Resi Jne Pos Dan Tiki
• Cara Membuat Recents Post Bergambar

Terima kasih anda sudah menyimak uraian Cara Membuat Efek Easing Sosial Media Bookmark Di Blog, semoga bermanfaat juga bisa menjadi artikel yang anda cari dan lebih bijak komentar dulu tentang uraian di atas.

Bagikan Artikel ini