cara membuat floating social media

Cara membuat floating social media - tutorial cara membuat floating social media di blogspot. cara membuat floating social media ini sangat simpel ditambah dengan tampilan social media yang sederhana tapi tetap menarik. Untuk memastikan bagaimana tampilan tutorial cara membuat floating social media kali ini silahkan klik icon demo dibawah, nah bila anda tertarik memasangnya silahkan simak tutorial dibawah ini. langsung saja menuju TKP...

Demo

Sematkan code CSS dibawah ini dibagian CSS template anda atau <style>

Code CSS here..

 /*****************************************
 Name : floating social media
 By : Rivai Silaban | Ide Blogspot | Blog Design
 Update : Jumat 07 February 2014
 *****************************************/
.floating-social-media {position: fixed;width: 100px;height: 200px;left: 10px;top: 100px;}
.floating-social-media a{padding: 10px 0;margin:0;text-decoration: none;}
.floating-social-media a:hover{ opacity: .5;}
/* floating social media Ide Blogspot CSS end */ 

Code tag html ini dapat anda pasang dimanapun anda suka, bisa di widget atau langsung didalam code template tepatnya dibawah code <body>

Code HTML here..

 <!-- floating social media Ide Blogspot code start-->
 <div class="floating-social-media">
 <span><a href="https://www.google.com/+RivaiSilaban" target="_blank" rel="nofollow" title="Gplus"><img alt="Gplus invite" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvRflZipzqyZHV4fM9T7eVQ3UoStj9SfhMQJKb3QLadV6Y4RWzqq6MOwLi2NtnnB_Mx1FAP4TCcMR1OQHIdh_gcziLpXMkmXvfzhQznWdngQR6P9lgZ1hyphenhyphenGsI_yfYNfQWjdf4KiGVMOw4/s1600/G+.png" title="Gplus"/></a></span>
 <span><a href="https://www.facebook.com/rivaisilaban" target="_blank" rel="nofollow" title="Facebook"><img alt="Facebook like" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_TqezwGOnFIryLcM3ZyBSm0oqnEDKrhQZlRSzFMExcFCG8l38FLSH3i3hKCRaDBkXywkHFcmw_fM7C7Aj_sUxWb30FDZ5uXLRmptp63WYyfgCXLH5Y_ILHMuZ0KWEUO1jqCZ-TIszEg/s1600/FB.png" title="Facebook"/></a></span>
 <span><a href="https://twitter.com/Rivai_Silaban" target="_blank" rel="nofollow" title="RSS"><img alt="feed rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsVtB5PyGLPXr6aOAY6kRl04eN9QmDlHLdjy6boD0YrKuAp8At00vfS699f_JVPS0N2-_JFRR4Ldw_sjnV8IDPVkwIjOPrfwvaU8jv01T6HQO50cKDZASa9VoqNeO7BxXpigOpYRBeUjQ/s1600/TW.png" title="RSS"/></a></span>
 <span><a href="http://feeds.feedburner.com/idblogspot" target="_blank" rel="nofollow" title="Twitter"><img alt="Follow Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguCgIvSf5PhU8U8Ap9bvdbQqiHfN9p8ueBQ4TlYO3m6Z34OW3wx9bkPYNLH9XJ6lDsBLFm8cR9srTw_PZvKDVrEop3yv6Ckhqvpx5jcCIc3DVlZgF_rFJ_totIOReSwMbS4xV6H37RePw/s1600/RSS.png" title="Twitter"/></a></span></div>
<!-- floating social media Ide Blogspot code end-->

Code diatas merupakan code CSS dan code tag HTML dari cara membuat floating social media yang mungkin sudah anda lihat tampilannya pada halaman demonya, Buat teman teman yang masih belajar blogging sama seperti saya silahkan kunjungi halaman tata cara membuat floating social media lebih detail....

http://www.ideblogspot.com/2014/02/floating-social-media.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 3:07 PM

cara membuat floating social media

Rivai Silaban - Blog Design

System

Script Code

Support

Widget

Friday, February 7, 2014