Sitenin Sağına Sosyal Düğmeler Ekle

Sosyal Düğmeler


Öncelikle temamız da 


    1. Öncelikle temamız da  ]]></b:skin> kodunu bulalım ve hemen üstüne aşağıdaki kodu ekleyelim.
    /* Sitenin Sağına Sosyal Düğmeler Ekle usengecadam.blogspot.com */ /* Sitenin Sağına Sosyal Düğmeler Ekle */ .MBC ul, .MBC li, .MBC h3 { padding: 0; margin: 0; list-style: none!important; } .MBC { font-size: 12px; color: #666; } .active.MBC .mbc-slider { -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); } .MBC a { text-decoration:none; } .MBC-content { position: relative; } .social-tabs li { padding: 4px; width: 27px; height: 26px; z-index: 10; } .active .social-tabs li { z-index: 10; -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.6); } .active .social-tabs li.active { z-index: 11; -webkit-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.6); } .static .social-tabs { padding-left: 8px; } .static .social-tabs li { float: left; margin-right: 2px; border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; } .top .social-tabs { padding-left: 8px; } .top.align-right .social-tabs { padding-left: 0; padding-right: 8px; } .top .social-tabs li { padding: 3px 4px; margin-right: 2px; float: left; border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; } .right .social-tabs { padding-top: 8px; } .right .social-tabs li { margin: 0 0 2px 0; border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; } .bottom .social-tabs { padding-left: 8px; } .bottom.align-right .social-tabs { padding-left: 0; padding-right: 8px; } .bottom .social-tabs li { padding: 4px 4px 2px 4px; margin: 0 2px 0 0; float: left; border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; } .left .social-tabs { padding-top: 8px; } .left .social-tabs li { margin: 0 0 2px 0; border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; } .mbc-slider, .MBC-slider { clear: both; overflow: hidden; } .tab-content { position: relative; overflow: hidden; z-index: 11; background: url no-repeat center 200px; } .tab-content ul { font-size: 11px; } .tab-content .tab-inner { background: #fff; overflow: hidden; } .tab-inner ul { padding: 0 10px; } .tab-inner .profile { position: relative; padding: 10px; border-bottom: 1px solid #ccc; background: #ececec; } .tab-inner .profile h3 { margin: 0; padding: 3px 0 3px 26px; position: relative; } .tab-inner .profile h3 a { font-size: 14px; text-decoration: none; } .tab-inner .profile h3, .tab-inner .profile h3 a { color: #555; text-shadow: 0 1px 0 #fff; } .tab-inner .MBC-btn { position: absolute; top: 10px; right: 10px; cursor: pointer; font: bold 12px/14px Arial, sans-serif; display:inline-block; text-decoration:none; outline:none; padding: 5px 8px; background: #fcfcfc url repeat-x 0 0; color: #fff; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .tab-inner .MBC-btn:hover{ background-position: 0 100%; color: #fff; } .tab-inner .profile a.avatar{ display:block; float:left; text-decoration:none; outline:none; margin:0 10px 0 0 } .tab-inner .profile a.avatar img{ padding:1px; background: #fff; border: 3px solid #ccc; display:block } .tab-rss .profile h3 { background: urlno-repeat 0 4px; } .tab-flickr .profile h3 { background: url no-repeat 0 4px; } .tab-delicious .profile h3 { background: url) no-repeat 0 4px; } .tab-twitter .profile h3 { background: url no-repeat 0 4px; } .tab-facebook .profile h3 { background: url no-repeat 0 4px; } .tab-fblike .profile h3 { background: url no-repeat 0 4px; } .tab-fbrec .profile h3 { background: url no-repeat 0 4px; } .tab-google .profile h3 { background: url no-repeat 0 4px; } .tab-youtube .profile h3 { background: url no-repeat 0 4px; } .tab-pinterest .profile h3 { background: url no-repeat 0 4px; } .tab-lastfm .profile h3 { background: url no-repeat 0 4px; } .tab-dribbble .profile h3 { background: url no-repeat 0 4px; } .tab-vimeo .profile h3 { background: url no-repeat 0 4px; } .tab-stumbleupon .profile h3 { background: url no-repeat 0 4px; } .static .mbc-slider, .static .MBC-slider { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .static .tab-content { padding: 10px; } .static .tab-inner { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .top .mbc-slider, .top .MBC-slider { border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; } .top .tab-inner { border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; } .top .tab-content { padding: 0 10px 10px 10px; } .right .mbc-slider, .right .MBC-slider { border-radius: 10px 0 0 10px; -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; } .right .tab-inner { border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; } .right .tab-content { padding: 10px 0 10px 10px; } .bottom .mbc-slider, .bottom .MBC-slider { border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; } .bottom .tab-inner { border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; } .bottom .tab-content { padding: 10px 10px 0 10px; } .left .mbc-slider, .left .MBC-slider { border-radius: 0 10px 10px 0; -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; } .left .tab-inner { border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; } .left .tab-content { padding: 10px 10px 10px 0; } .MBC .stream, .mbc .stream { overflow: hidden; } .stream p { margin: 0; padding: 0; } .tab-inner ul li { padding: 5px 0 20px 0; margin: 0; position: relative; overflow: hidden; background: none; border-bottom: 1px solid #ccc; border-top: 1px solid #fff; } .tab-inner ul li .thumb { float: left; margin: 0 10px 0 0; } .tab-inner ul li .thumb img { border: 3px solid #ececec; padding: 1px; background: #fff; } .tab-inner ul li .logo { margin-bottom: 3px; } .tab-inner ul li .title { display: block; font: bold 12px Arial, sans-serif; margin-bottom: 3px; } .tab-inner ul li .title.clear { clear: both; } .tab-inner ul li .text { display: block; } .tab-inner ul li .text br{ display: none; } .tab-inner ul li .date { position: absolute; bottom: 5px; left: 0; font-style: italic; color: #999; font-size: 90%; } .tab-inner ul li .meta { display: block; font-size: 90%; color: #999; } .tab-inner ul li .meta span { margin: 0 8px 5px 0; display: block; float: left; padding: 0 0 0 15px; line-height: 12px; } .tab-dribbble .tab-inner ul li .thumb img { margin-bottom: 5px; } .tab-lastfm .tab-inner ul li .title { background: url no-repeat 0 0; padding-left: 17px; margin-bottom: 0; } .tab-google .tab-inner ul li .title { margin-bottom: 5px; } .tab-vimeo .tab-inner ul li .text { margin-bottom: 5px; } .tab-inner ul li .meta span.plusones { padding-left: 0; } .tab-inner ul li .meta span.shares { background: url no-repeat 0 0; padding-left: 20px; } .tab-inner ul li .meta span.views { background: url no-repeat 0 0; padding-left: 18px; } .tab-inner ul li .meta span.likes { background: url no-repeat 0 0; padding-left: 16px; } .tab-inner ul li .meta span.comments { background: url no-repeat 0 0; } .tab-inner ul li .meta span.users { background: url no-repeat 0 0; } .tab-inner ul li .meta span.videos { background: url no-repeat 0 0; padding-left: 16px; } .tab-inner ul li.MBC-error { color: #990000; } .MBC-loading { background: url no-repeat 10px center; padding: 10px 30px 10px 42px; } .controls { position: absolute; left: 10px; height: 20px; padding: 5px 0; z-index: 12; display: none; background: url) repeat 0 0; } .controls ul { padding: 0 10px; } .controls li { display: inline; } .controls a { display: block; width: 20px; height: 20px; float: left; margin-right: 4px; background: url no-repeat 0 0; } .controls .prev { background-position: -40px 0; } .controls .next { background-position: -60px 0; } .controls .play { background-position: 0 0; } .controls .pause { background-position: -20px 0; } .controls .mbc-close { background-position: -80px 0; } .controls .prev:hover { background-position: -40px -20px; } .controls .next:hover { background-position: -60px -20px; } .controls .play:hover { background-position: 0 -20px; } .controls .pause:hover { background-position: -20px -20px; } .controls .mbc-close:hover { background-position: -80px -20px; } .static .controls { bottom: 10px; } .top .controls { bottom: 10px; } .right .controls { bottom: 10px; right: 0; } .bottom .controls { bottom: 0; } .left .controls { bottom: 10px; left: 0; } .tab-google .tab-inner .google-page { overflow: hidden; height: 55px; border-bottom: 1px solid #ccc; } .tab-google .tab-inner .google-page.standard { height: 117px; } .tab-google .tab-inner .google-page.small iframe{ height: 69px; margin-bottom: 0; } .tab-google .tab-inner .google-page.standard iframe{ height: 131px; margin-bottom: 0; } .tab-flickr .tab-inner ul { padding-top: 5px; } .tab-flickr .tab-inner li { float: left; padding: 0; margin: 0 5px 5px 0; border: none; } .tab-flickr .tab-inner li .thumb { margin: 0; } .tab-flickr .tab-inner li img{ height: 70px; } .youtube-subscribe { overflow: hidden; height: 105px; width: 100%; border: 0; } .tab-digg .digg-widget .digg-widget-head.premium, .tab-digg .digg-widget .digg-widget-head { height: auto; overflow: hidden; padding: 10px; position: relative; white-space: nowrap; border: none; border-radius: 0; -webkit-border-radius: 0; } .tab-digg .digg-widget .digg-widget-head h2 { font-size: 14px; font-weight: bold; line-height: 20px; margin: 0; overflow: hidden; padding: 0 0 0 26px; white-space: nowrap; text-shadow: 0 1px 0 #fff; background: url no-repeat 0 0; } .tab-digg .digg-widget .digg-widget-head a { top: 12px; } .tab-digg .digg-widget-content { border-top: 1px solid #ccc; } .tab-content.tab-linkedin .tab-inner { background: #fff url(../images/loader.gif) no-repeat center center; } .tab-twitter,.tab-twitter .MBC-btn, li.active.MBC-twitter, li.MBC-twitter:hover{background-color:#4ec2dc;}.tab-facebook,.tab-facebook .MBC-btn, li.active.MBC-facebook, li.MBC-facebook:hover{background-color:#3b5998;}.tab-fblike,.tab-fblike .MBC-btn, li.active.MBC-fblike, li.MBC-fblike:hover{background-color:#3b5998;}.tab-fbrec,.tab-fbrec .MBC-btn, li.active.MBC-fbrec, li.MBC-fbrec:hover{background-color:#3b5998;}.tab-google,.tab-google .MBC-btn, li.active.MBC-google, li.MBC-google:hover{background-color:#2d2d2d;}.tab-rss,.tab-rss .MBC-btn, li.active.MBC-rss, li.MBC-rss:hover{background-color:#FF9800;}.tab-flickr,.tab-flickr .MBC-btn, li.active.MBC-flickr, li.MBC-flickr:hover{background-color:#f90784;}.tab-delicious,.tab-delicious .MBC-btn, li.active.MBC-delicious, li.MBC-delicious:hover{background-color:#3271CB;}.tab-youtube,.tab-youtube .MBC-btn, li.active.MBC-youtube, li.MBC-youtube:hover{background-color:#DF1F1C;}.tab-digg,.tab-digg .MBC-btn, li.active.MBC-digg, li.MBC-digg:hover{background-color:#195695;}.tab-pinterest,.tab-pinterest .MBC-btn, li.active.MBC-pinterest, li.MBC-pinterest:hover{background-color:#CB2528;}.tab-lastfm,.tab-lastfm .MBC-btn, li.active.MBC-lastfm, li.MBC-lastfm:hover{background-color:#C90E12;}.tab-dribbble,.tab-dribbble .MBC-btn, li.active.MBC-dribbble, li.MBC-dribbble:hover{background-color:#F175A8;}.tab-vimeo,.tab-vimeo .MBC-btn, li.active.MBC-vimeo, li.MBC-vimeo:hover{background-color:#4EBAFF;}.tab-stumbleupon,.tab-stumbleupon .MBC-btn, li.active.MBC-stumbleupon, li.MBC-stumbleupon:hover{background-color:#EB4924;}.tab-tumblr,.tab-tumblr .MBC-btn, li.active.MBC-tumblr, li.MBC-tumblr:hover{background-color:#365472;}.tab-deviantart,.tab-deviantart .MBC-btn, li.active.MBC-deviantart, li.MBC-deviantart:hover{background-color:#B8C529;}.tab-linkedin,.tab-linkedin .MBC-btn, li.active.MBC-linkedin, li.MBC-linkedin:hover{background-color:#006DA7;}.social-tabs li {background:#7d7d7d;}
  1. Daha sonra kaydedip Yerleşim > Gadget Ekle > HTML/JavaScript gadgetini seçip aşağıdaki kodları ekleyelim.
<div id="MBC-2" class="MBC right align-top sliding" style="width: 360px; position: fixed; margin-right: -360px; top: 10px; right: 0px; "><div id="social-tabs" class="MBC-content"> <ul class="social-tabs" style="position: absolute; top: 0px; left: 0px; margin-left: -35px; width: 35px; "> <li class="MBC-twitter first"><a href="#" rel="0" title="twitter"><img src="http://1.bp.blogspot.com/-xBOKgPOlVjY/UBVYAYzsGtI/AAAAAAAACQo/AMDko1yTznw/s320/twitter.png" alt="" rel="twitter"></a></li> <li class="MBC-facebook"><a href="#" rel="1" title="facebook"><img src="http://1.bp.blogspot.com/--6Q5YLxZUKY/UBVWkh4rn1I/AAAAAAAACPI/HCcVF2YTJEI/s320/facebook.png" alt="" rel="facebook"></a></li> <li class="MBC-fblike"><a href="#" rel="2" title="fblike"><img src="http://3.bp.blogspot.com/-E8TsQgkPb0A/UBVWk_Q0fRI/AAAAAAAACPU/1RfGobJ8CRo/s320/fblike.png" alt="" rel="fblike"></a></li> <li class="MBC-fbrec"><a href="#" rel="3" title="fbrec"><img src="http://2.bp.blogspot.com/-eTJffp_XqN4/UBVXYDUCXoI/AAAAAAAACPg/DsDQ5g4R45g/s320/fbrec.png" alt="" rel="fbrec"></a></li> <li class="MBC-google"><a href="#" rel="4" title="google"><img src="http://1.bp.blogspot.com/-VpucjHQuLWk/UBVXYK-ZfbI/AAAAAAAACPs/WRJ3wLtJSfg/s320/google.png" alt="" rel="google"></a></li> <li class="MBC-linkedin"><a href="#" rel="5" title="linkedin"><img src="http://1.bp.blogspot.com/-9EjdzY2Cvs8/UBVY0XugIFI/AAAAAAAACRM/W2afpfxj3cI/s320/linkedin.png" alt="" rel="linkedin"></a></li> <li class="MBC-rss"><a href="#" rel="6" title="rss"><img src="http://2.bp.blogspot.com/-iUNrYWpW988/UBVXYxBHMCI/AAAAAAAACQQ/WOyuBxGREkA/s320/rss.png" alt="" rel="rss"></a></li> <li class="MBC-delicious"><a href="#" rel="7" title="delicious"><img src="http://1.bp.blogspot.com/--FNvyhhovqU/UBVWkB89feI/AAAAAAAACOk/i1tBmlFgaV0/s320/delicious.png" alt="" rel="delicious"></a></li> <li class="MBC-youtube"><a href="#" rel="8" title="youtube"><img src="http://4.bp.blogspot.com/-vbN6ifuNgGI/UBVYA3CJNOI/AAAAAAAACRA/YMiLLa8gW6w/s320/youtube.png" alt="" rel="youtube"></a></li> <li class="MBC-digg"><a href="#" rel="9" title="digg"><img src="http://2.bp.blogspot.com/-lqiOg4rwRyE/UBVWkR21FhI/AAAAAAAACOw/RVl9vY-rU0I/s320/digg.png" alt="" rel="digg"></a></li> <li class="MBC-pinterest"><a href="#" rel="10" title="pinterest"><img src="http://1.bp.blogspot.com/-O6jVOTHrd2Y/UBVXYus_ZjI/AAAAAAAACQE/KBGD_veEFj8/s320/pinterest.png" alt="" rel="pinterest"></a></li> <li class="MBC-lastfm"><a href="#" rel="11" title="lastfm"><img src="http://2.bp.blogspot.com/-T-aRYyLuBhs/UBVXYVrtkGI/AAAAAAAACP4/bkwq53L15Z8/s320/lastfm.png" alt="" rel="lastfm"></a></li> <li class="MBC-dribbble"><a href="#" rel="12" title="dribbble"><img src="http://3.bp.blogspot.com/-JxPFx4fln0s/UBVWkUY6ijI/AAAAAAAACO8/DHtm3WXhL0I/s320/dribbble.png" alt="" rel="dribbble"></a></li> <li class="MBC-vimeo"><a href="#" rel="13" title="vimeo"><img src="http://4.bp.blogspot.com/-8I2NKLKb2xA/UBVYAsBm5EI/AAAAAAAACQ0/FoMzvNKtMdE/s320/vimeo.png" alt="" rel="vimeo"></a></li> <li class="MBC-stumbleupon"><a href="#" rel="14" title="stumbleupon"><img src="http://4.bp.blogspot.com/-XutABgjQhno/UBVYAS-3SrI/AAAAAAAACQc/d3_vS_N_vKs/s320/stumbleupon.png" alt="" rel="stumbleupon"></a></li> </ul><ul class="MBC-slider"><li class="tab-content tab-twitter tab-active" style="height: 535px; width: 350px; position: relative; display: list-item; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-facebook" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-fblike" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-fbrec" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-google" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-linkedin" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-rss" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-delicious" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-youtube" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-digg" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-pinterest" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-lastfm" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-dribbble" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-vimeo" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> <li class="tab-content tab-stumbleupon" style="height: 535px; width: 350px; position: relative; display: none; "> <div class="tab-inner" style="height: 535px; width: 350px; "></div></li> </ul><div class="controls" style="width: 350px; display: none; "><ul><li><a href="#" class="pause"></a></li> <li><a href="#" class="prev"></a></li><li><a href="#" class="next"></a></li><li><a href="#" class="mbc-close close"></a></li></ul></div></div></div>



  • Kaydedelim ve artık işlem tamam :)
  • Google+'da Paylaş

    Yazar Taktik Ver

    Yazar Hakkında bilgi yazılacak
      Blogger Yorumları

    2 yorum:

    Argo içerilikli yorum attığınız taktirde hakkınızda dava açılır, site adresinizi yoruma attığınız taktirde ise bloğunuz google sıralamasından düşer.