Blogunuz İçin Hazır Sosyal Paylaşım Eklentisi - 3

Blogger için hareketli sosyal medya eklentisi.

Üzerine geldiğinizde büyüyen iconları bloggerınızı görselini artıracaktır.

Blognuza eklemek için Bloggerınızın Click Kumanda Panelinden Yerleşimi seçip Gadget Ekle diyoruz daha sonra Temel sekmesinden HTML/JavaScript diyoruz ve kodu ekliyoruz.

• Facebook
• Twitter
• Google+
• RSS
• Youtube

<style type="text/css"> div.cap.left { position: absolute; bottom: 0px; left: 0px; } div.cap.right { background-position: right bottom; position: absolute; top: 0px; right: 0px; }ul.osx-dock li { display: block; position: relative; float: left; width: 50px; height: 50px; margin: 60px 0 4px 0; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; text-align: center; } ul.osx-dock li a { display: block; height: 50px; padding: 0 1px; -webkit-transition: 0.15s linear; -webkit-transition-property: -webkit-transform margin; margin: 0; -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25))); } ul.osx-dock li a img { width: 48px; } ul.osx-dock li:hover { margin-left: 9px; margin-right: 9px; z-index: 200; } ul.osx-dock li:hover a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.5); } ul.osx-dock li.nearby { margin-left: 6px; margin-right: 6px; z-index: 100; } ul.osx-dock li.nearby a { -webkit-transform-origin: center bottom; -webkit-transform: scale(1.25); } ul.osx-dock li span { background: rgba(0,0,0,1); position: absolute; bottom: 80px; margin: 0 auto; display: none; width: auto; font-size: 11px; font-weight: bold; padding: 7px 6px; -webkit-border-radius: 6px; color: #fff; }ul.osx-dock li:hover span { display: block; } div#dockContainer { bottom: 12px; height: 150px; padding: 0px 0 0; text-align: center; -webkit-border-radius: 6px; moz-border-radius: 6px; width: 100%; line-height: 1; z-index: 100; } div#dockWrapper { width: auto; display: inline-block; position: relative; border-bottom: solid 2px rgba(255,255,255,.35); line-height: 0; } </style><br /> <br /> <div id="dockContainer"> <div id="dockWrapper"> <div class="cap left"> </div> <ul class="osx-dock"> <li class="active"> <span>Facebook</span> <a href="http://www.facebook.com/#" title="Facebook" target="_blank"><img src="https://lh5.googleusercontent.com/-jP2jdy9mx_c/VAY_A72JE_I/AAAAAAAALco/x98lTOz4EWI/s48-no/facebook-icon.png" /></a> </li> <li> <span>Twitter</span> <a href="http://www.twitter.com/# " title="Twitter" target="_blank"><img src="https://lh5.googleusercontent.com/-cBJ_XgmpW3Y/VAY_NVKn-uI/AAAAAAAALc4/XD9GAWp8GIg/s48-no/twitter-icon.png" /></a> </li> <li> <span>Google+</span> <a href="http://www.plus.google.com/#" title="Google+" target="_blank"><img src="https://lh4.googleusercontent.com/-ntME4z9VY-A/VAY_cL-JnFI/AAAAAAAALdI/AAKa1PV2Jf8/s48-no/google-icon.png" /></a> </li> <li> <span>RSS</span> <a href="http://feeds.feedburner.com/#" title="RSS" target="_blank"><img src="https://lh4.googleusercontent.com/-QAXl9vf168k/VAY_nB2r4PI/AAAAAAAALdY/20WXBADYimA/s48-no/rss-icon.png" /></a> </li> <li> <span>Youtube</span> <a href="http://www.youtube.com/#" title="Youtube" target="_blank"><img src="https://lh6.googleusercontent.com/-xgTes4QYLyk/VAY_zd3gxpI/AAAAAAAALdo/ekpqemQMCmU/s48-no/youtube-icon.png" /></a> </li> </ul> </div> </div> <center> <br /> </center>

# ile olan yere sosyal medya adresinizi yazıyorsunuz.. Yardım için yoruma yazmanız yeterli..

Paylaş

Yazar : KODBLOGCUM

Benzer Yayınlar