Cara membuat Sosial Network slide di Blog

Posted by : Unknown Senin, 16 Desember 2013

Berikut langkah-langkah pembuatannya :

Klik Untuk Liat Kode

1. Login ke Blogger
2. Masuk ke Template >> Edit HTML (centang expand widget templates)
3. Letakkan kode CSS di bawah ini diatas ]]> :

<center>
.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;
}

4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum :

5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum :

<center>
<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'>Follow via Facebook</a>
<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'>Follow via Twitter</a>
<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'>Follow via Google</a>
<a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'>
Follow via Pinterest</a>
<a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'>Follow via Youtube</a>
<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'>Follow via RSS</a>
</div>

Thanks All buat yang dah mau mampir ............ !!!

Sisip kan Saran, Pesan dan Komentar anda .. Mudah-mudahan dengan Komentar yang anda berikan Akan memberikan Motivasi buat saya untuk membuat blog ini menjadi lebih menarik Lagi.

Subscribe to Posts | Subscribe to Comments

Cara membuat Sosial Network slide di Blog

Leave a Reply

Post-post Terpopuler

Anda yang Ke ...

Tanslate

Blog Archive

BloG ku Yang Lain

Tips "N Trick Blogger

Selamat Datang Di Tips 'aNd TriCK BloGGeRs DiTHa SoB

Sekilas Tentang Admin NicH