Birsorumoalcak » blogger sosyal medya eklentileri

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.

Sosyal Medya Eklentili Yazar Hakkında Widget

Blogger Yazar Profili Eklentisi

Yine çok kaliteli bir eklenti ile karşınızdayım.Bu eklentimiz Yazar profili eklentisi olup üstelik sosyal medya hesaplarınızı da hemen profilinizin altında sergilemenize olanak sunuyor.Yani hem sizin hakkınızda kısa açıklamanızı yazabilir hemde ziyaretçilerinize sosyal medya beğenileri yaptırabilirsiniz.Bence diğer yazar profili eklentilerinden çok kaliteli ve kullanışlı olan bu eklentinin hiç zaman kaybetmeden özizlemsini ve kodlarını sizinle paylaşmak istiyorum.

<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'/>
<style>
.wgauthr-widget {
background:#fff;
background-color:#fff;
overflow:hidden;
position:relative;
margin-bottom:30px;
padding:10px 26px;
}

.wg-crnrbckgr:before {
content:"";
position:absolute;
top:0;
right:0;
z-index:40;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display:block;
width:0;
border-color:#fff #eee #fff #fff;
border-style:solid;
border-width:0 16px 16px 0;
}

.wg-crnrbckgr {
position:relative;
background-color:#47C2DC;
height:90px;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg
img {
height:80px;
width:80px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo
span {
display:block;
letter-spacing:1px;
text-transform:uppercase;
}

.wg-avtlninfoaa {
font-size:14px;
line-height:21px serif,font-weight:normal,color:#666;
padding:22px 25px 8px;
}

.dwnlin {
margin-top:6px;
text-align:center;
border-top:2px solid #eee;
padding:8px 25px;
}

.wgauthr-widget.wgathrlns {
background:#fff;
margin-bottom:30px;
padding:0;
}

.wg-golblue {
width:100%;
height:50px;
padding:0 0 0 30px;
}

.wg-goliconn {
background:#47C2DC;
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}

.wg-goliconn:hover {
background:#ddd;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

.wg-goliconn img {
padding-top:5px;
padding-left:5px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg {
position:absolute;
bottom:-20px;
left:30px;
border-radius:50%;
overflow:hidden;
background-color:#fff;
border:5px solid #fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo {
padding-left:130px;
padding-top:46px;
color:#fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam {
font-size:14px;
line-height:16px;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju {
font-size:10px;
}
</style>




<div class="wgauthr-widget wgathrlns">
<div class="wg-crnrbckgr" style="background-image: url(http://i.hizliresim.com/YjYmLk.jpg)">

<div class="wgavtrg">
<img alt="Birsorumolacak" src="http://i.hizliresim.com/89q8kn.jpg" /></div>
<div class="wgavtinfo">
<span class="wgurnaam">Yazarın İsmi</span>
<span class="wgurju">Kısa açıklama</span></div>
</div>
<div class="wg-avtlninfoaa">
Kendiniz hakkındaki bilgileri bu bölüme yazınız. </div>
<div class="dwnlin">
</div>
<div class='wg-golblue'>
<div class='wg-goliconn'>
<a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>
<div class='wg-goliconn'>
<a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>
<div class='wg-goliconn'>
<a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>
<div class='wg-goliconn'>
<a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-goliconn'>
<a href='http://feeds.feedburner.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div>
</div>

Kod içerisinde değistirilmesi gereken yerler:

Not:Aşağıdaki bölümleri kod içerisinde Ctrl+F yardımı ile bulup değiştirebilirsiniz.

1/ http://www.plus.google.com/# ( # işareti yerine google + Id'niz)

2/ http://www.youtube.com/# ( # işareti yerine youtube Id'niz)

3/ http://feeds.feedburner.com/# ( # işareti yerine Rss Id'niz)

4/ http://www.twitter.com/# ( # işareti yerine Twitter Adresiniz)

5/ http://www.facebook.com/# ( # işareti yerine Facebook Id'niz)

6/ http://i.hizliresim.com/89q8kn.jpg yerine kendi profil fotoğrafınız.

7/ Son olarak da benim bilgilerim yerine kendi bilgilerinizi girin ve keyfini çıkarın.

8/ Vermiş olduğum kodu Yerleşim Gadget ekle Html/Javascript bölümünden ekleyebilirsiniz.

Yapamadığınız bölümleri butonunu kullanarak sorabilirsiniz.

Sekmeli Sosyal Medya Widget

Sekmeli Sosyal Medya Eklentisi

Arkadaşlar bugüne kadar birçok eklenti paylaştım.Fakat bence içlerinde en kullanışlı olanı bence bu eklenti.Neden diye soracak olursanız birçok sosyal medya eklentisi hem bir arada hemde sekmeli olduğu için fazla yer kaplamamış oluyor.Yani birçok sosyal medya hesabınızı bir arada kullanma fırsatı bulmuş oluyorsunuz.Vakit kaybetmeden hemen önizlemesini ve kodlarını sizinle paylaşmak istiyorum.

<style>
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* CSS Code Start */
    
    ul.tabs {
        padding: 7px 0;
        font-size: 0;
        margin: 0;
        list-style-type: none;
        text-align: left;
    }
    ul.tabs li {
        display: inline;
        margin: 0;
        margin-right: 3px;
        /*distance between tabs*/
    }
    ul.tabs li a {
        font: normal 12px Verdana;
        text-decoration: none;
        position: relative;
        padding: 25px 10px 0px 10px;
        border: 1px solid #CCC;
        border-bottom-color: #B7B7B7;
        color: #000;
        background: #F0F0F0 url(tabbg.gif) 0 0 repeat-x;
        border-radius: 3px 3px 0 0;
        outline: none;
    }
    ul.tabs li a:visited {
        color: #000;
    }
    ul.tabs li a:hover {
        border: 1px solid #B7B7B7;
        background: #F0F0F0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK9ojTdGS0abG0steH2xcleIDWoDZrRTK7Lu1TdofushYjwNG3NtrsoxXuuIVWKZiMU6mTn2Er9s4fMYDlyxjXNJFrVAiBzz0CT5tnZl3uhDSikdGe60_FQChY8_l6PlwnOBoEkd255-4/s1600/hb-tabbg.gif) 0 -50px repeat-x;
    }
    ul.tabs li.selected a,
    ul.tabs li.selected a:hover {
        position: relative;
        top: 0px;
        font-weight: bold;
        background: white;
        border: 1px solid #B7B7B7;
        border-bottom-color: white;
    }
    ul.tabs li.selected a:hover {
        text-decoration: none;
    }
    div.tabcontents {
        border: 1px solid #B7B7B7;
        padding: 10px;
        background-color: #FFF;
        border-radius: 0 3px 3px 3px;
        margin-top: -7px;
    }
    /* Tabbed Social Widget By Helper Blogger - helperblogger.com */
    /* End Code Start */
</style>


<script src="http://helperblogger.ucoz.com/code/hb-tabbed-social-widget.js" type="text/javascript"></script>
<ul class="tabs">
<li class="selected">
        <a href="#view1">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6GxTaN6FWQlj-9W7H8E5imxRHXMeUPMrQl2aCGezcbf0v-_EBp0qV9nyQDnOs1KgOfa6waOHv6ny4NBDoKDqLHdMKtIF7C255mF36xwjQ6OEvs_FZ8XTZSSL7V54dgYHFCQHlEoIw6s/s1600/helperblogger.com-fb.png" height="32" width="32" />
        </a>
    </li>
<li>
        <a href="#view2">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGQolhMSvxbAFgW1K7VaCyZOS0UL1dffq7vwL6aInN-W6gytTL3STeP4zkbP3Nw1pKqJgTxSjXYN32YN0FlOnyI5oa1LqIePVBThFxhAYHkr18yBwKmzoX0YpLFCG-QunjOXvQAUZFMg/s1600/helperblogger.com-twitter.png" height="32" width="32" />
        </a>
    </li>
<li>
        <a href="#view3">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7LXAz2Yt-bMFFZguqYUowY2Kp13nAojFTjfryBQ_jnHjq73zxcX7aLYijy4NZXYspfsL4oqrJSUDPDJkJ1jXR1xbVBNGLJ2w3Ngtm4Kpmys3ukx717Dxj89H3TDMVwoMXMLmzgHWaYnI/s1600/helperblogger.com-gplus.png" height="32" width="32" />
        </a>
    </li>
<li>
        <a href="#view4">
            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkhh07FhMhW9l44gdUv8bGqKlngG5JNRAlKLprmFwyS-oA0fza-6kre_WXA_pSUHy4LLBP20QCG1eCojoeDXIVSjaqd3NnNbmo909RC1cDMZIElEbWfRsG-Cta7f3wM6qVbUF2eIlwyrc/s1600/helperblogger.com-pinterest.png" height="32" width="32" />
        </a>
    </li>
</ul>
<div class="tabcontents">
    <div id="view1">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F408085549280135&width=285&height=180&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=409936535724253" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:250px;" allowtransparency="true"></iframe>
    </div>
<div id="view2">
        <div id="twitter-box">
</div>
<script>
            var tw_user = 'Mcahitp';
            var tw_width = 260;
            var tw_height = 250;
            var no_face = 8;
            (function() {
                var tw_box = document.createElement('script');
                tw_box.type = 'text/javascript';
                tw_box.async = true;
                tw_box.src = '//helperblogger.ucoz.com/code/hb-twitter.js';
                (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
            })();
        </script>
    </div>
<div id="view3">
        <script src="https://apis.google.com/js/platform.js" async defer></script>
        <div class="g-person" data-width="250" data-href="//plus.google.com/u/0/+MücahitPolat1992/posts" data-layout="landscape" data-rel="author">
</div>
</div>
<div id="view4">
        <a href="http://pinterest.com/mcahitpolat/">
            <img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest" />
        </a>
    </div>
<div style="clear: both; text-align: right;">
        <span style="font-size: xx-small;"></span>
    </div>
</div>

Kod içerisindeki değiştirilmesi gereken noktalar:

1/Facebook için 408085549280135 yazan yere kendi Id'nizi
2/Twitter için Mcahitp yazan yere kendi kullanıcı adınızı
3/Google+ için +MücahitPolat1992/posts yazan yere kendi Id'nizi
4/Pinterest için mcahitpolat/ yazan yere kendi Id'nizi

Yazmayı sakın unutmayın aksi takdirde sonuç alamazsınız.

Yapamadığınız Noktaları Butonunu kullanarak mesaj gönderebilirsiniz.

Hover Efektli Mini Sosyal İkonlar >>

Mini Sosyal İkonlar

Tasarımı ve kullanılabilirliği ile göz kamaştıran bu mini sosyal ikonları eminim sizde web sitenizde kullanmak isteyeceksiniz.Üstelik bu ikonlar hover efektli ve bence hem yazılarınızın altında hemde slidebarınızda çok şık duracak.Kurulumu kolay olan mini sosyal ikonları web sitenizin istediğiniz her yerinde kullanabilirsiniz.İsterseniz hemen önizlemesini ve kodları sizlerle paylaşalım.

1.Örnek:

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" rel="external" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" rel="external" title="googleplus">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" rel="external" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" rel="external" title="rss">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" rel="external" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" rel="external" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZXdi4XiRfXhFC6bxmtAVm2wuY5bSVejX6eNWJzXLYz9DR649VOHa9O79NDPmnI0nLkAz24nArZqMjXkkw6qrhj5bt0Ei_5Vwd5w04Yg7RiIeMWQfJ6iKXuuGyrfjnJuOGn7WJ16wrIEI/s1600/spice-social-gadget-sprite.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZXdi4XiRfXhFC6bxmtAVm2wuY5bSVejX6eNWJzXLYz9DR649VOHa9O79NDPmnI0nLkAz24nArZqMjXkkw6qrhj5bt0Ei_5Vwd5w04Yg7RiIeMWQfJ6iKXuuGyrfjnJuOGn7WJ16wrIEI/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 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.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -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>

2.Örnek

<style>
.social-follow ul li{border: 1px solid rgb(226, 226, 226);display:inline;float:left;overflow:hidden; margin-left: 5px;}
.social-follow ul li .icon{background-image:url(https://googledrive.com/host/0B8D3MQmcZTyvU1AteFRZSjVLdWs);}
.social-follow ul li a{background:#F1F1F1;float:left;transition:all .2s;-moz-transition:all .2s;-ms-transition:all .2s;-o-transition:all .2s;-webkit-transition:all .2s;width:30px;height:30px;}
.social-follow .facebook{background-position: 0 0px !important;}
.social-follow .facebook:hover{background-color:#3b5997; background-position:0px -30px !important;}
.social-follow .twitter{background-position:-30px -60px !important;}
.social-follow .twitter:hover{background-color:#00aced; background-position:-30px -90px !important;}
.social-follow .g-p{background-position:-88px -60px !important;}
.social-follow .g-p:hover{background-color:#dd4b39; background-position:-88px -90px !important;}
.social-follow .pinterest{background-position:-60px -60px !important;}
.social-follow .pinterest:hover{background-color:#cb2027; background-position:-60px -90px !important;}
.social-follow .youtube{background-position:-120px -60px !important; width:55px !important;}
.social-follow .youtube:hover{background-color:#ff0000; background-position:-120px -90px !important;}
.social-follow .linkedin{background-position:-173px -61px !important;}
.social-follow .linkedin:hover{background-color:#006699; background-position:-173px -91px !important;}
.social-follow .rss{background-position:-204px -61px !important;}
.social-follow .rss:hover{background-color:#ff6600; background-position:-204px -90px !important;}
</style>
<div class="social-follow">
<ul>
<li><a class="facebook icon" href="http://www.facebook.com/408085549280135" target="_blank"></a></li>
<li><a class="g-p icon" href="https://plus.google.com/u/0/+M%C3%BCcahitPolat1992/posts" rel="author" target="_blank"></a></li>
<li><a class="twitter icon" href="http://www.twitter.com/Mcahitp" target="_blank"></a></li>
<li><a class="pinterest icon" href="http://www.pinterest.com/mcahitpolat" target="_blank"></a></li>
<li><a class="youtube icon" href="http://www.youtube.com/user/Birsorumolacak.blog" target="_blank"></a></li>
<li><a class="linkedin icon" href="http://www.linkedin.com/in/Birsorumolacak" target="_blank"></a></li>
<li><a class="rss icon" href="http://feeds.feedburner.com/Birsorumolacak" target="_blank"></a></li>
</ul>
</div>

Bu kodu Yerleşim > Gadget ekle ardından Html/Javascript bölümüne eklemeniz yeterli olcaktır.

Kod içerisinde http://www.facebook.com/ ve benzeri bölümlere kendi sosyal medya hesaplarınızı eklemeyi unutmayınız.Aksi takdirde sonuç alamazsınız.

Yapamadığınız Noktaları Butonunu kullanarak mesaj gönderebilirsiniz.

Blogger Sosyal Menü Eklentisi//Hover Efektli

**Profosyonel Sosyal Menü[Hover Efektli]**

Çok profosyonel şekilde hazırlanmış bu hover efektli sosyal menü butonları ile blogunuza renk katacaksınız.Sayfanızın sol tarafında hiç yer kaplamayan bu sosyal menüyü sitenize eklemek ise çok basittir.Blogger yerleşim bölümünden gadget ekle dedikten sonra Html/javascript bölümüne eklemeniz yeterli olacaktır.

<div id='social-sidebar'>
<ul>
<li>
<a class='entypo-twitter' href='https://twitter.com/Mcahitp' rel="external nofollow">
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href='https://plus.google.com/u/0/100119104645461238989/posts' rel="external nofollow">
<span>Google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href='http://www.tumblr.net/mpolat1992/' rel="external nofollow">
<span>Tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href='https://www.facebook.com/profile.php?id=1027816099' rel="external nofollow">
<span>facebook</span>
</a>
</li>
<li>
<a class='entypo-rss' href='http://feeds.feedburner.com/BilgiHakkndaAradnzHerey' rel="external nofollow">
<span>Feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>

Kod içerisindeki gerekli ayarlamaları yapmayı unutmayınız.Yapamadığınız bir yer olursa yorum kısmında belirtiniz.

Bloguma Hoşgeldiniz !

Mücahit Polat

Kategoriler :)

E-posta Aboneliği!

Blogger Sosyal Medya Widget

Metro Tarzı Sosyal Medya Widget

Sosyal Medya Eklentili Yazar Hakkında Widget

Blogger Yazar Profili Eklentisi

Kod içerisinde değistirilmesi gereken yerler:

Sekmeli Sosyal Medya Widget

Sekmeli Sosyal Medya Eklentisi

Hover Efektli Mini Sosyal İkonlar >>

Mini Sosyal İkonlar

Blogger Sosyal Menü Eklentisi//Hover Efektli

**Profosyonel Sosyal Menü[Hover Efektli]**

Misafir Yazar Ol

-

Kategorilerimiz :)

Tavsiye Bağlantılar !

Sizin İçin Hazırladığımız Sayfalar !

Bana Mesaj Gönderin !