Blogger Sosyal Medya Takip Eklentileri

Sosyal medya ile blogumuzu daha geniş kitlelere ulaştırmamız mümkün. Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz



KAYMA EFEKTLİ SOSYAL MEDYA TAKİP EKLENTİSİ

<style>
.SlidingSocial span{float:left;display:inline;margin-right:8px}.SlidingSocial span a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}.SlidingSocial span a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("http://3.bp.blogspot.com/-56lQy84q4bM/UnbGA3lTiLI/AAAAAAAALP4/E-EQdYSPLMM/s1600/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;opacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}#iconTwitter{background-position:-33px -33px}#iconTwitter:hover{background-position:-33px 0}#iconFacebook{background-position:-66px -33px}#iconFacebook:hover{background-position:-66px 0}#iconRSS{background-position:0 -33px}#iconRSS:hover{background-position:0 0}#iconYouTube{background-position:-99px -33px}#iconYouTube:hover{background-position:-99px 0}#iconGooglePlus{background-position:-132px -33px}#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class="SlidingSocial">
<span><a title="RSS Feed" href="FEEDBURNER URL" target="_blank" id="iconRSS">RSS</a></span>
<span><a title="Twitter" href="TWITTER URL" target="_blank" id="iconTwitter">Twitter</a></span>
<span><a title="Facebook Page" href="FACEBOOK URL" target="_blank" id="iconFacebook">Facebook</a></span>
<span><a title="YouTube Channel" href="YOUTUBE URL" target="_blank" id="iconYouTube">YouTube</a></span>
<span><a title="Google Plus" href="GOOGLEPLUS URL" target="_blank" id="iconGooglePlus">YouTube</a></span>
</div>

DEMO





HOVER EFEKTLİ SOSYAL MEDYA TAKİP EKLENTİSİ

<style>
.techsperiahover img {
opacity: 0.5;
}
.techsperiahover img:hover {
opacity: 1;
}
</style>
<div class='techsperiahover'>
<a title="RSS Feed" href="FEEDBURNER URL" target="_blank"><img src="https://lh3.googleusercontent.com/-QBG_ac0hm6c/Ugu8TaEGP4I/AAAAAAAABl0/UMf6jOZ3rVA/s32/Rss-Feed-Metro-32.png"/></a>
<a title="Twitter" href="TWITTER URL" target="_blank"><img src="https://lh4.googleusercontent.com/-2mn5m1IhAC0/Ugu8UDXgRuI/AAAAAAAABmE/u1TErFG6-1U/s32/twitter-bird-white-on-blue.png"/></a>
<a title="Facebook Page" href="FACEBOOK URL" target="_blank"><img src="https://lh3.googleusercontent.com/-u-aR_SPf5QA/Ugu8SfReb4I/AAAAAAAABlg/GDQQfFCUNY4/s32/Facebook-F-Metro-32.png"/></a>
<a title="Google Plus" href="GOOGLEPLUS URL" target="_blank"><img src="https://lh6.googleusercontent.com/-GL2pUN_kHvA/Ugu8SWk59HI/AAAAAAAABlw/MkdMIR1VfPg/s32/Google%252B-Alt-Metro-32.png"></a>
<a title="YouTube Channel" href="YOUTUBE URL" target="_blank"><img src="https://lh5.googleusercontent.com/-PmvYU9s74Mw/Ugu8UMvVjyI/AAAAAAAABmA/Pi6P3NzwhVA/s32/Youtube-Red-Metro-32.png"/></a>
<a title="Email Feed" href="EMAİL URL" target="_blank"><img src="https://lh3.googleusercontent.com/-ZazAUlZ8kM0/Ugu8SR7mjUI/AAAAAAAABlk/uSLK7EBtZI4/s32/Live-Hotmail-Metro-32.png"/></a>
</div>

DEMO








ZOOM EFEKTLİ SOSYAL MEDYA TAKİP EKLENTİSİ

<style>
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 40px;
height: 40px;
border:0;
margin-right: 4px;
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="GOOGLE PLUS URL"><img src="http://2.bp.blogspot.com/-LffgfsHnAj0/UPwQ23I0QAI/AAAAAAAAGas/-0InJDs-Cew/s1600/bloggertrix-google-icon.png" title="Google plus" /></a></li>
<li><a href="FACEBOOK URL"><img src="http://2.bp.blogspot.com/-7w_IO2RiuAE/UPwQ2SXEnYI/AAAAAAAAGak/6PxOch3eQ44/s1600/bloggertrix-facebook-icon.png" title=" Facebook" /></a></li>
<li><a href="PİNTERES URL"><img src="http://3.bp.blogspot.com/-1otZEseg04g/UPwUW46qq-I/AAAAAAAAGbk/ycvQIf9iKdI/s1600/bloggertrix-pinterest-icon.png" title=" Digg" /></a></li>
<li><a href="TWITTER URL"><img src="http://2.bp.blogspot.com/-3x7cybjuGY0/UPwQ3_mdIKI/AAAAAAAAGa0/2S7L05Wssv4/s1600/bloggertrix-twitter-icon.png" title="Twitter" /></a></li>
<li><a href="FEEDBURNER URL"><img src="http://3.bp.blogspot.com/-4JDhfVVlW1U/UPwQ2iEcPtI/AAAAAAAAGao/kDO6rfj_-sg/s1600/bloggertrix-rss-feed-icon.png" title="Rss Feed" /></a></li>
</ul>
</center>

DEMO








HARAKET EFEKTLİ SOSYAL MEDYA TAKİP EKLENTİSİ

<style>
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://3.bp.blogspot.com/-xSocl4Oqsog/UnbLxbJMvzI/AAAAAAAALQc/DmcFWg98wv8/s320/spot.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<a class='rss' href="RSS URL" rel='external nofollow' target='_blank'></a>
<a class='googleplus' href="GOOGLE PLUS URL" rel='external nofollow' target='_blank'></a>
<a class='facebook' href="FACEBOOK URL" rel='external nofollow' target='_blank'></a>
<a class='twitter' href="TWITTER URL" rel='external nofollow' target='_blank' ></a>
</div>

DEMO



















AÇILMA EFEKTLİ SOSYAL MEDYA TAKİP EKLENTİSİ


<style>
#social-hover {
float: right;
position: relative;
height: 40px;
}
#social-hover a{
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
width: 40px;
transition:width 0.4s;
-webkit-transition:width 0.4s;
-moz-transition:width 0.4s;
}
#social-hover a:hover{
width: 115px;
}
#social-hover ul, #top-menu ul { margin: 0; }
#social-hover li,
#social-hover li a,
#social-hover li .ts-icon,
#social-hover li .ts-text {
display: block;
position: relative;
width: 40px;
height: 40px;
}
#social-hover li,
#social-hover li a,
#social-hover li .ts-text {
float: left;
width: auto;
overflow: hidden;
}
#social-hover li a {
width: 40px;
line-height: 40px;
color: #FFF;
font-size: 12px;
font-weight: bold;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
#social-hover li.ts-rss a { background-color: #F88F16; }
#social-hover li.ts-rss .ts-icon { background: url("https://lh6.googleusercontent.com/-oQGmKZI7eJs/UlLJ-4f81II/AAAAAAAACV4/F3IcLsUKqsY/s16/rss.png") no-repeat center center; }
#social-hover li .ts-icon { float: left; }
#social-hover li.ts-facebook a { background-color: #3B5998; }
#social-hover li.ts-facebook .ts-icon { background: url("https://lh6.googleusercontent.com/-EcJsEGuE1QA/UlLJ-nbtGOI/AAAAAAAACVs/dizwfAR_0KU/s16/facebook.png") no-repeat center center; }
#social-hover li.ts-twitter a { background-color: #3CF; }
#social-hover li.ts-twitter .ts-icon { background: url("https://lh6.googleusercontent.com/-k9dXtRP_KG4/UlLJ_VpWtJI/AAAAAAAACWA/fsGPNo1tkjw/s16/twitter.png") no-repeat center center; }
#social-hover li.ts-gplus a { background-color: #BD3518; }
#social-hover li.ts-gplus .ts-icon { background: url("https://lh6.googleusercontent.com/-zwl2BMOWHWs/UlLJ-yjUF_I/AAAAAAAACWE/2z5vF-txseA/s16/gplus.png") no-repeat center center; }
</style>
<div id="social-hover">
           
<ul>
<li class="ts-rss"><a href="FEEDBURNER URL" rel="nofollow" target="_blank"><div class="ts-icon">
</div>
<div class="ts-text">
RSS Feeds</div>
</a></li>
<li class="ts-facebook"><a href="FACEBOOK URL" rel="nofollow" target="_blank"><div class="ts-icon">
</div>
<div class="ts-text">
Facebook</div>
</a></li>
<li class="ts-twitter"><a href="TWITTER URL" rel="nofollow" target="_blank"><div class="ts-icon">
</div>
<div class="ts-text">
Twitter</div>
</a></li>
<li class="ts-gplus"><a href="GOOGLE PLUS URL" rel="nofollow" target="_blank"><div class="ts-icon">
</div>
<div class="ts-text">
Google+</div>
</a></li>
</ul>
</div>

DEMO







MİNİMALİST EFEKTLİ SOSYAL MEDYA TAKİP EKLENTİSİ

<style>
ul.spicesocialwidget li {float: left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('http://1.bp.blogspot.com/-gJvBjPkAX48/UnbOkfuW2NI/AAAAAAAALQw/mByZcI_72YA/s400/mini-social-icons.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('http://1.bp.blogspot.com/-gJvBjPkAX48/UnbOkfuW2NI/AAAAAAAALQw/mByZcI_72YA/s400/mini-social-icons.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>
<ul class="spicesocialwidget">
<li class="rss">
<a rel="nofollow" href="FEEDBURNER URL" target="_blank" title="RSS Feeds"></a></li>
<li class="facebook">
<a rel="nofollow" href="FACEBOOK URL" target="_blank" title="Facebook"></a></li>
<li class="googleplus">
<a rel="nofollow" href="GOOGLE PLUS URL/107015367605965056336" target="_blank" title="Google Plus"></a></li>
<li class="twitter">
<a rel="nofollow" href="TWITTER URL" target="_blank" title="Twitter"></a></li>
<li class="youtube">
<a rel="nofollow" href="YOUTUBE URL" target="_blank" title="YouTube"></a></li>
</ul>

DEMO







NOT : Kodları ben yazmadım, sadece düzenledim ve ufak tefek hataları düzeltim hızları etkilemesin diye bazı ayarlar yaptım.


2 yorum:

  1. Rakipleri kadar güçlü %100 Türk yapımı olan https://www.reachpod.com ile tüm sosyal ağları canlı takip edebilir, ileri tarihli haber yayınlayabilir, anahtar kelimeleri takip edebilir ve takipçilerinle iletişime geçebilirsin.Kısacası Sosyal Medya hesaplarını kolaylıkla ve güvenle yöneterek öne çıkartabilirsin.En önemlisi %100 Türk yapımı sadece bu yüzden bile destek vermeli ve mutlaka denemelisin...

    YanıtlaSil
  2. http://fontawesome.io/

    YanıtlaSil