Retro stil sosyal medya butonların üzerinde yıldız işareti ve yakın temas ile güzel bir eklenti.Sosyal medya butonları şu sıralar oldukça fazla paylaştığım bir durum ama herkesin zevki farklı olduğu için birilerine güzel bir buton stili vermek istiyorum.Örnek demo yazının en altında,eklemesi ise oldukça kolay daha önceki durumlar gibi HTML/JavaScrtip içine ekliyoruz.
<style> /* Blogger Turkey Retro Stil Sosyal Medya Butonları*/ .bubblewrap{ list-style-type:none; margin:0; padding:0; } .bubblewrap li{ display:inline; width: 60px; height:60px; } .bubblewrap li img{ width: 50px; /* width of each image.*/ height: 50px; /* height of each image.*/ border:0; margin-right: 4px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ } .bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }</style> <br /> <center> <br /> <ul class="bubblewrap"> <li><a href="http://www.plus.google.com/UserID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuNBgMtQbOdNttwrLMmfN9C4LyJ4ifYyOGgeKB9xMpjB1Kwy3WBFF0q4QIXJSn-i_lmozqzdSHe6vimwucuX8YbZ5lv72IL9A5h4wKRQIeCsW6HeOYsacxzWNU3TM7TU8bOAgk5xS_do/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li> <li><a href="http://www.facebook.com/bloggerturkey"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiroYVeGJhfDRyyMgXc88pc0wMSCmlRJeHgkyjALe_zt7Yjzgog368WDJ3ut8LJej3yzCer7yl-yxDgLZxzV_BJk0wOFCIvE0FaD0tLMyRQ3N6AuITTEpT2_7bcClK4sjUBjUkxyyDC05U/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li> <li><a href="http://www.pinterest.com/bloggerturkey"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNMIJN5nlhyG7BczcHX4_qEXpJNqV0KR1yJOR2dB1ekkcJXFOre3MCd9uzvS7cnB627Qo7p1xp3zOWk4QrVGGa4Zcef4uQGCQnLXcCUoXK5x_gSc1fblpf7X7IPmqYmTjG66m7-DUFCI/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li> <li><a href="http://www.twitter/bloggerturkey"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicwuWHKqcJPFE90GzWLkwe49sxMKpd7mytJJvN8pr_xgavZSKxKBn9svKtFeHJfPS9lPvRFR-GSiNRiIQ-eosVQvMmXlzbuB6p9P-dGpmM0Mlbra4P2BwDzkZMb7zpoWZUnhhdwa48hGk/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li> <li><a href="http://feeds2.feedburner.com/bloggerturkey"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi68WmF-KiOLSkk2Qjugk9sYacsov9B3j8u-4i333USVHfbZ-Yrr3qKwu5HEVabSUiVgmn6r7XgSZemOasMs19uyf7tit9OQU3A986Aw4dIfpmyN8cYzeXC5uVXsEBb-zNByl2fstmacKg/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li> </ul> </center>
- Yukardaki kodlar içersinde değiştirmeniz gereken yerleri kırmızı ve mavi renk ile boyadım sizde kendi sosyal adreslerinizi yazın
0 yorum:
Yorum Gönder