Seo I Backlink I Blogger Temaları I Blog Eklentileri I Blog İpuçları: Blogger Sosyal Medya Widget

Biz site sahipleri için sosyal medya eklentileri olmazsa olmazlardandır.Şık ve kullanışlı eklentiler kullanmak isteriz.İşte bu yüzden bende size bu kriterlere uyan iki adet eklenti buldum ve sizlere sunmak istiyorum.

Umuyorum ki çok işinize yarayacak ve çok beğeneceksiniz.

-------------------------------------------------------------------------------------------

<div id="mbl-social-hover">

<div class="tota2">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIcFHLOVNwSqJIzihUYk2o8LWD5W3Ql2LV27n55aaBvFj66MgDRdSQ11OALx6N9exuptFlRKnaBhw33tDf8L6o8OWcao3mA1_mBcxoOeDTZh1xXejwFnDLDDPm6CVqgUB1kw9k8eh_foQ/s1600/SUB-BAN.png" /></div>
<div id="links">
<a href="http://twitter.com/Mcahitp" class="twitter" title="Twitter" target="_blank"><div class="tota">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLJUMCxomHNBc4It60kfD42-qz4Wo0mRlt1S87ljnCl1dMgbpfqcg6xpNzdMOcYhSYJxXx4d9ZgQ3AhlcptTAfJ9AHvAClj1LYTNAK6L1tDIRZhSQsWpLeDG5UGJLG6WypoVoZKcvHYtc/s1600/twitter.png" /></div>
</a>

<a href="http://www.facebook.com/408085549280135" class="facebook" title="Facebook" target="_blank"><div class="tota">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLqNfsOt02zew0NaC6bWU_qRjLk-qnhGPLCercB3sOU3hB8p2H_7n3juHrBfyJux9V8UXSTU7h5Nh1GFk5LWJgfY4KhH7i0eLzo1fe1y5FUbEDSH92XhEhKM-hElhwr8Z2qr04fQnxUFU/s1600/FB.png"  /></div>
</a>

<a href="https://plus.google.com/u/0/+MücahitPolat1992" class="google" title="Google Plus" target="_blank"><div class="tota">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKjF3cqAS0rFOhvaaSVyBojfUctaxDNDU8HAc-zzlXSP0CNl8li8LvcOGQ3T8O9Alu87gsktpkutbWRBjYFuVysDgyHHFj2MU80j9DvvFyC9Nx_et91OHHm2L0mmDY4WpAi_7qKQZ79X4/s1600/google.png" /></div>
</a>

<a href="http://pinterest.com/mcahitpolat/" class="pinterest" title="Pinterest" target="_blank"><div class="tota">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGqvVQa8RrkhKIuqEFYmK7L4xUG_cqX4U83bmUS9PU5NNLK9yGCa6LIf-S1A-VhI67O3LkjPINdyoLRUgZRlhNA2wYWbblZq9LYF5pZvJbU7Ms6yxKKc1GbarU3kZbsZ5r8yh6SzBUvWI/s1600/pin.png" /></div>
</a>

<a href="http://feeds.feedburner.com/BilgiHakkndaAradnzHerey" class="rss" title="Feedburner" target="_blank"><div class="tota">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKQ2UpysB3o8Fp2HW0bOZlR8PjY6llKdSWlVe_S-dEurs0gOYgikbnu_s3bq5MdrNFwauLthuRYwOH5Ngkl-c6BkOhCGfrLCTnU59s5ycboeMyoX27BBIuJx-4o8ItHdvkfRWZtBvQUs4/s1600/rss.png" /></div>
</a>
</div>
</div>
<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPfd6H1mgrxnTu6s7PkMN6e30_5o9ZX4O1PKWO6xkonwixc2hyphenhyphenBlhJteLx3CQM0HZBBboVz9ZVvCqxrUu4mYdNsJXIBNPmOifXxEhMCxbm_ORPwV4dcsvhcqUJ90z___HzLwWXyEKimM/s1600/vintage.png");}#mbl-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-social-hover #links{position:absolute;bottom:0;width:100%;}#mbl-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider</style>

Kod içerisindeki benim sosyal medya hesaplarım yerine kendi sosyal medya hesaplarınızı yazmayı sakın unutmayınız.

---------------------------------------------------------------------------------

Metro Tarzı Sosyal Medya Widget

<div class="metro-social">
<br />
<br />
<li><a class="fb" href="http://www.facebook.com/Faceebook Idniz" rel="nofollow"></a></li>
<li><a class="tw" href="http://twitter.com/Twetter Idniz"></a></li>
<li><a class="gp" href="https://plus.google.com/Google+ Idniz"></a></li>
<li><a class="pi" href="http://pinterest.com/Pintrest Idniz"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/Linkedin Idniz"></a></li>
<li><a class="yt" href="http://www.youtube.com/Youtube Idniz"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/Feedburner Idniz"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Yine aynı şekilde kodun içerisindeki sosyal medya hesaplarınızı ayarlamayı unutmayınız.

24 Mart 2015

Blogger Sosyal Medya Widget

Metro Tarzı Sosyal Medya Widget

Hiç yorum yok:

Yorum Gönder