oppaiyu

Hallo Semua ,, Jadi Kali Ini saya akan share Dengan Cara "  Membuat Sosial Media Slide Show Responsive Blog " nah,, orang jarang pasti nge-share inikan pasti saya punya solusinya :v , jadi,, tampilan slide show media sosial ini mirif dengan seocips dulu, sekarang udah ga ada lagi seocips entah kenapa tibaa-tiba di hapus dengan blogger,, yaaa udah saya share aja dengan ini terbongkar juga ekan ? ya udah ikutin tutorial ini yah !! 😆

•  Pertama tama anda harus ke Blogger
• sudahkah login ? nah buka EDIT Tema yah 
• Dan Tekan HTML Setelah Itu Tekan Keyboard Kalain Dengan Ctrl + F  
• Setelah Itu Cari Kode</head> Atau</body> 

Copikan Script CSS Dibawah Ini

<style type='text/css'>
/* EFEK SLIDESHOW SOSMED */
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0;float:right;}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0;border:1px solid #444;box-shadow:0 0 10px #111;}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85-aAb54ig1zHudLTNFgr3P2qo375lZpVZ548I-00fbY_eH4G-THP1GUsZKn4TLjqnyXuVd-11sgq3rKO4tJQshe11XZSOYl3_7gKFW30TlMOK67QzGI8QY3empa_dlJwXshHeAcyjQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85-aAb54ig1zHudLTNFgr3P2qo375lZpVZ548I-00fbY_eH4G-THP1GUsZKn4TLjqnyXuVd-11sgq3rKO4tJQshe11XZSOYl3_7gKFW30TlMOK67QzGI8QY3empa_dlJwXshHeAcyjQ/s1600/facebook.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVHbZwOKeyXC7RJjh_y1KfEAq-h23Bv-NiSUcY93L7pkGhZ77ESZ0hy6Y3UVDrhKjFLrcu6-M_gwxK9_Q0RzQHjnVTbB_nt3uVGgq_lzY_OGV1hH802GUqNEE5PUs1i-TnSsOUDwf5uw/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVHbZwOKeyXC7RJjh_y1KfEAq-h23Bv-NiSUcY93L7pkGhZ77ESZ0hy6Y3UVDrhKjFLrcu6-M_gwxK9_Q0RzQHjnVTbB_nt3uVGgq_lzY_OGV1hH802GUqNEE5PUs1i-TnSsOUDwf5uw/s1600/twitter-1.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbTfxm7pttqaDx-d2j5X5TwedxR_IMCI5p5IHbkggxnE0dvJqRCgeMQfQdEltj4g8W1t1Zesr2RsxvG6QSCwdnm3O8-5Wb-ZNpiEjtHAS5l7SLdTBd3Hg5_5vVVBzFESDfvHe1k2v2tQ/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbTfxm7pttqaDx-d2j5X5TwedxR_IMCI5p5IHbkggxnE0dvJqRCgeMQfQdEltj4g8W1t1Zesr2RsxvG6QSCwdnm3O8-5Wb-ZNpiEjtHAS5l7SLdTBd3Hg5_5vVVBzFESDfvHe1k2v2tQ/s1600/google.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrAuDWl9CNASd7YvOcySkmdUfJnqGuOgYxAe9Q7OrInKTPVSZ9jW3_22fameEnHRZyMy2Q5xVovzWqVXfyMoxXl7UWUGfuF-Xf_XhQz-qsbOCdJVruGRbFgj8aOYa6kIedSurRPObP4g/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrAuDWl9CNASd7YvOcySkmdUfJnqGuOgYxAe9Q7OrInKTPVSZ9jW3_22fameEnHRZyMy2Q5xVovzWqVXfyMoxXl7UWUGfuF-Xf_XhQz-qsbOCdJVruGRbFgj8aOYa6kIedSurRPObP4g/s1600/twitter.png) no-repeat 0 0;box-shadow:1px 1px 5px rgba(0,0,0,.8) inset;}

@media screen and (max-width:900px){
#header2{display:none;}
}
</style>

Setelah Itu Klik Save

• lagi dan lagi,, buka tata letak 
• dan klik tambahkan gadeget dengan header 2 
• setelah di klik gadget itu ,, buka HTML JAVA SCRIPT

Copikan Kode HTML JAVASCRIPT INI ke2nya

<div class="kotak">
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="# URL PROFILE / FANSPAGE FACEBOOK SOBAT" target="_blank" title='Find Me On Facebook'>Facebook</a></li>
<li><a class="twitter" href="# URL PROFILE TWITTER SOBAT" target="_blank" title='Find Me On Twitter'>Twitter</a></li>
<li><a class="google-p" href="# URL GOOGLE ACOUNT SOBAT" target="_blank" title='Find Me On Google Plus'>Google plus</a></li>
<li><a class="rss" href="/feeds/posts/default" target="_blank" title='Feedburner seocips'>Rss</a></li>
</ul>
</div></div>
<br />

 Dan Klik Save Jadilah  Sosial Media Slide Show Blog , dan jangan lupa ya share ke teman teman ke kamu.. untuk tampilannya demonya ada dibawah ,, Dan Yang Saya Tandai Warna Orange Itu Adalah Url Anda,, Demikian yah Dan tunggu tutorial selanjutnya Yah ! ^-^ 😋😊😊

• Result Lihat Hasilnya

Share Share Share

oppay