Cara Membuat Efek Easing Sosial Media Bookmark
Cara Membuat Efek Easing Sosial Media Bookmark. Memang Efek easing sangat diperlukan apabila sobat ingin mempecantik tampilan blog dan menyimpan widget di tataletak yang memerlukan ukuran kecil, maka ini suatu tindakan seorang blogger untuk menampakan berupa entri populer, entri menurut label, atau url dari sosial media atau juga berupa bookmark yang ada bisa sobat tampilkan dengan ruangan widget kecil
Efek Easing Sosial Media Bookmark. Kegunaanya efek esing ini seperti kita melihat artikel panjang pada ponsel, karena ponsel ukuran layar paling besar cuma 6 inci tapi kita bisa menggerakan jari ke atas dan kebawah bahkan kiri kanan dikarenakan uraian suatu artikel tidak bisa muat pada ukuran ponsel, seperti itu gambaran alasan membuat efek easing untuk kegunaan untuk suatu blog.
Baca juga : Cara Membuat Akun Youtube Pada Android Dan Komputer
Untuk lebih jelasnya cara membuat efek easing sosial media dan bookmark di blog sebagai berikut :
Pasang Efek Easing Soaial Media Dan Bookmark
A. Silahkan sobat login ke Blogger dengan url http://bogger.com
B. Selanjutnya buka Menu Template dan Edit HTML dengan centang expand widget template
C. Setelah itu letakan kode CSS di bawah ini diatas kode ]]></b:skin>
.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;
float: left;
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;
}
D.Setelah memasukan kode CSS di atas selanjutnya kode Jquery masih diedit HTML silahkan 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(){
$('.social-buttons .social-icon').mouseenter(function(){
$(this).stop();
$(this).animate({width:' ;160'}, 500, 'easeOutBounce',function(){});
});
$('.social-buttons .social-icon').mouseleave(function(){
$(this).stop();
$(this).animate({width:' ;43'}, 500, 'easeOutBounce',function(){});
});
});
</script>
E. Selanjutnya isikan kode HTML di bawah ini ,sebelum
</body>
Ganti tulisan your ID dengan ID sobat
<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>
Baca juga artikel keren lainnya ya
F. Tahap ini coba pratinjau dulu apabila sudah sesuai keingin sobat untuk Cara membuat efek easing sosial media dan bookmark di blog . Silahkan klik tombol simpan.
Terima kasih sobat sudah menyimak penjelasan di atas semoga bermanfaat. Good luck.