Anda akan menemui demo di sini.
Ikut arahan di bawah untuk memasukkannya ke dalam blog anda.
Log masuk ke Blogger dan pada papan pemuka anda, pergi ke Template > Edit HTML.
Menggunakan Ctrl + F, cari ]]></b:skin>.
Paste kod CSS berikut sebelum/atas kode yang anda cari tadi:
.socialw {
width: 236px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: 100%;
}
#social1 {
border: 1px solid #292929;
width: 37px;
height: 62px;
margin-left: 1px;
float: left;
overflow: hidden;
}
#social2,#social3,#social4,#social5 {
border: 1px solid #292929;
width: 37px;
height: 62px;
float: left;
margin-left: 10px;
overflow: hidden;
}
/* ANIMATIONS */
.animate {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animate.queue {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
}
.animate.queue2s {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
}
.animate.queue3s {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
animation-delay: 3s;
}
.animate.queue4s {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-o-animation-delay: 4s;
animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-100px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-100px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-100px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
Klik pada Save Template.
Sekarang pergi ke Layout, klik pada HTML / JavaScript.
Copy dan paste kod di bawah:
<!-- Social Icons Start !-->
<div>
<!-- Dribbble !-->
<a href="http://dribbble.com/YOUR_USERNAME" target="_blank">
<div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
</a>
<!-- Dribbble !-->
<!-- Behance !-->
<a href="http://behance.com/ YOUR_USERNAME " target="_blank">
<div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
</a>
<!-- Behance !-->
<!-- Facebook !-->
<a href="http://facebook.com/ YOUR_USERNAME " target="_blank">
<div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
</a>
<!-- Facebook !-->
<!-- Twitter !-->
<a href="http://twitter.com/ YOUR_USERNAME " target="_blank">
<div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
</a>
<!-- Twitter !-->
<!-- Intagram !-->
<a href="http://instagram.com/ YOUR_USERNAME " target="_blank">
<div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
</a>
<!-- Instagram !-->
</div>
<!-- Social Icons End !-->
NOTA: Jangan lupa untuk menukar tulisan warna merah itu dengan usename anda.
TekanSimpan dan anda selesai!
Teruskan dan tengok blog anda. Tahniah! Anda kini mempunyai widget sosial yang baru.
thanks for sharing
BalasPadam:)
Padam