Latest News

Cara Membuat Efek Easing Sosial Media Bookmark

Cara Membuat Efek Easing Sosial Media Bookmark. Memang Efek easing sangat diharapkan apabila teman 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 mampu teman tampilkan dengan ruangan widget kecil,

Efek Easing Sosial Media Bookmark. Kegunaanya efek esing ini menyerupai kita melihat artikel panjang di ponsel, alasannya ponsel ukuran layar paling besar cuma 6 inci tapi kita mampu menggerakan jari ke atas dan kebawah bahkan kiri kanan di karenakan uraian suatu artikel tidak muat pada ukuran posel, menyerupai itu gambaran dari efek easing untuk kegunaan untuk suatu blog.

Baca juga : Cara Membuat Akun Youtube Pada Android Dan Komputer

Membuat Efek Easing Sosial Media Bookmark


Untuk lebih jelasnya cara buat efek easing sosial media dan bookmark di blog sebagai berikut :

Pasang Efek Easing Soaial Media Dan Bookmark


A. Silahkan teman login ke Blogger dengan url http://bogger.com
B. Selanjutnya buka Menu Template dan Edit HTML dengan menycentang expand widget template
C. Setelah itu letakan isyarat CSS di bawah ini diatas isyarat berikut :

]]></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 isyarat CSS di atas selanjutnya isyarat Jquery masih diedit HTML silahkan letakkan isyarat 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>


E. Selanjutnya isikan isyarat HTML di bawah ini ,sebelum

</body>

Ganti goresan pena 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 teman untuk Cara membuat efek easing sosial media dan bookmark di blog . Silahkan klik tombol simpan.

Terima kasih teman sudah menyimak uraian di atas supaya bermanfaat. Good luck.