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 Popüler Yayınlar Eklentisi {Hover}

Blogger Popüler Yayınlar Eklentisi {Hover} Efektli

Yine yine yine kaliteli bir popüler yayınlar eklentisini size sunmak için şu anda klavyemin tuşlarını eskitmekteyim.Her neyse geçelim popüler yayınlar eklentimize yine kullanışlı şık görünümlü ve hover efektli bir eklenti.Yine uzatmadan eklenti tanıtımına geçmek istiyorum.

Şimdi eğer beğendiyseniz diğer adımlara geçelim.Yine yerleşim gatged ekle bölümünden ''Popüler Yayınlar Eklentimizi blogumuza ekliyoruz.Ama alt taraftaki resimde gördüğünüz gibi ekleyin yoksa istediğiniz sonuçları alamazsınız.

Popüler yayınlar eklentimizi eklediğimize göre Css kodlarımızı ekleyebiliriz demektir.Alt tarafdaki Css kodlarını Ctrl+F yardımı ile ]]></b:skin> kodunun hemen üzerine ekliyoruz.

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;   
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute; 
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;   
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);   
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Hepsi bu kadar arkadaşlar şablonu kaydedip çıkıyoruz sonra eklentinin keyfini sürüyoruz.Yapamadığınız yer olursa yorum kısmında belirtmeniz yeterli olur.

Blogger Resimli & Hover Efektli Son Yorumlar

Resimli & Hover Efektli Son Yorumlar Eklentisi

Yine bir eklenti yada gadget adına ne derseniz deyin.Ama bu eklenti rakiplerine göre çok iyi ve kullanışlı çünkü hem hover efektli hemde resimli bir eklentidir.Şahsen benimde sitemde kullandığın bu eklentiyi lafı uzatmadan sizlere sunmak istiyorum.

Arkadaşlar Önizlemesi sitemizde mevcut olduğu için buraya eklemiyorum.Sitemizde biraz aşağıya inerseniz görebilirsiniz.

<style type="text/css">
.rc{padding-left:24px; padding-top: 6px;}
.rc a:hover {color: #F3903E;text-decoration: none;}
.rc-ico{margin-left:-20px;margin-top:4px;float:left; margin-right:3px}
.rc-ico img {margin-top: -2px;margin-right:5px; border: 2px solid #fff;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-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; }
.rc-ico img:hover {-webkit-transform: rotate(360deg); 
-moz-transform: rotate(360deg); 
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);}
.rc-header{font-size: 13px;}
.rc-header a{}
.rc-body{font-style: italic; font-size:11px;padding: 0px 4px 1px 10px;border: 1px solid transparent;}
.rc-footer{font-size:11px; float: right;}
</style>
<script type="text/javascript">
var numRecentComments = 5;
var maxCommentChars = 67;
var trueAvatars = true; 
var urlMyAvatar = '';
var urlMyProfile = '';
var cropAvatar = true;
var sizeAvatar = 50;
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjaykdCHbQYsINskwLsUmym8Nmbpck2N9iDWhSN5V5KK5q0TsiqsATVQtSkxGnspDkQHV2VeQgfnR0J70Dd_9wIs3c5F8nlm_8LqHgd67wBqwWYPWm3gIIAoD3VwhBAaBoR06bNGxdcRU8/"+sizeAvatar+"/anonymous-Icon.jpg"; 
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var txtMore = '';
var txtWrote = ':';
var txtAnonymous = ''; 
var maxResultsComments = "";
var numPerPost = 2;
var maxPostTitleChars = 40; 
var getTitles = true;
var maxResultsPosts = ""; 
var txtTooltip = '[user] on "[title]" - [date MM-dd-yyyy hh:mm]';
var urlToTitle = {};
function replaceVars(text, user, title, date) {
text = text.replace('[user]', user);
text = text.replace('[date]', date.toLocaleDateString());
text = text.replace('[datetime]', date.toLocaleString());
text = text.replace('[time]', date.toLocaleTimeString());
text = text.replace('[title]', title.replace(/\"/g,'"'));
var i = text.indexOf("[date ");
if(i > -1) {
var format = /\[date\s+(.+?)\]/.exec(text)[1];
if(format != '') {
var txtDate = format.replace(/yyyy/i, date.getFullYear());
txtDate = txtDate.replace(/yy/i, date.getFullYear().toString().slice(-2));
txtDate = txtDate.replace("MM", String("0"+(date.getMonth()+1)).slice(-2));
txtDate = txtDate.replace("mm", String("0"+date.getMinutes()).slice(-2));
txtDate = txtDate.replace("ss", String("0"+date.getSeconds()).slice(-2));
txtDate = txtDate.replace("dd", String("0"+date.getDate()).slice(-2));
//or: txtDate = txtDate.replace("dd", date.getDate());
txtDate = txtDate.replace("hh", String("0"+date.getHours()).slice(-2));
//or: txtDate = txtDate.replace("hh", date.getHours());
text = text.replace(/\[date\s+(.+?)\]/, txtDate)
}
}
return text;
}
if(urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for(var i=0 ; i<elements.length ; i++)
if(expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break;
}
}
function getPostUrlsForComments(json) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i];
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
urlToTitle[href] = entry.title.$t;
}
}
function showRecentComments(json) {
var postHandled = {};
var j = 0;
if(numPerPost) {
while(numPerPost < numRecentComments) {
for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
if(postHandled[entry["thr$in-reply-to"].href] <= numPerPost)
j++;
}
}
if(j >= numRecentComments)
break;
numPerPost++;
j = 0;
postHandled = {};
}
if(numRecentComments == numPerPost)
numPerPost = 0;
}
postHandled = {};
j = 0;
for(var i = 0 ; j < numRecentComments && i < json.feed.entry.length ; i++ ) {
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="Blogger User") continue;
if(numPerPost && postHandled[entry["thr$in-reply-to"].href] && postHandled[entry["thr$in-reply-to"].href] >= numPerPost)
continue;
if(entry["thr$in-reply-to"]) {
if(!postHandled[entry["thr$in-reply-to"].href])
postHandled[entry["thr$in-reply-to"].href] = 1;
else
postHandled[entry["thr$in-reply-to"].href]++;
j++;
var href='';
for (var k = 0; k < entry.link.length; k++ ) {
if (entry.link[k].rel == 'alternate') {
href = entry.link[k].href;
break;
}
}
if(href=='') {j--; continue; }
var hrefPost = href.split("?")[0];
var comment = "";
if("content" in entry) comment = entry.content.$t;
else comment = entry.summary.$t;
comment = comment.replace(/<br[^>]*>/ig, " ");
comment = comment.replace(/<\S[^>]*>/g, "");
var postTitle="-";
if(urlToTitle[hrefPost]) postTitle=urlToTitle[hrefPost];
else {
if(hrefPost.match(/\/([^/]*)\.html/)) postTitle = hrefPost.match(/\/([^/]*)\.html/)[1].replace(/_\d{2}$/, "");
postTitle = postTitle.replace(/-/g," ");
postTitle = postTitle[0].toUpperCase() + postTitle.slice(1);
}
if(maxPostTitleChars && postTitle.length > maxPostTitleChars) {
postTitle = postTitle.substring(0, maxPostTitleChars);
var indexBreak = postTitle.lastIndexOf(" ");
postTitle = postTitle.substring(0, indexBreak) + "...";
}

var authorName = entry.author[0].name.$t;
var authorUri = "";
if(entry.author[0].uri && entry.author[0].uri.$t != "")
authorUri = entry.author[0].uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if(trueAvatars && entry.author[0].gd$image && entry.author[0].gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
avaimg = entry.author[0].gd$image.src;
else {
var parseurl = document.createElement('a');
if(authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
}
}
if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
avaimg = urlMyAvatar;
if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
avaimg = urlNoAvatar;
var newsize="s"+sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
if(cropAvatar) newsize+="-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
authorName = txtAnonymous;
var imgcode = '<img height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
if (authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
var clsAdmin = "";
if(urlMyProfile != "" && authorUri == urlMyProfile)
clsAdmin = " rc-admin";
var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

var txtHeader = txtWrote;
if(txtWrote.indexOf('[')==-1)
txtHeader = authorName + ' ' + txtWrote;
else
txtHeader = replaceVars(txtHeader, authorName, postTitle, cmtDate);

var tooltip = replaceVars(txtTooltip, authorName, postTitle, cmtDate);
if(!/#/.test(href)) href += "#comments";
document.write('<div title="'+tooltip+'" class="rc'+clsAdmin+'">
');
document.write('<div title="'+tooltip+'" class="rc-header'+clsAdmin+'">
<div title="'+tooltip+'" class="rc-ico'+clsAdmin+'">
'+imgcode+'</div>
<a title="'+tooltip+'" href="' + href + '">' + txtHeader + ' </a></div>
');
if(comment.length < maxCommentChars)
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">' + comment + '</div>
');
else {
comment = comment.substring(0, maxCommentChars);
var indexBreak = comment.lastIndexOf(" ");
comment = comment.substring(0, indexBreak);
document.write('<div title="'+tooltip+'" class="rc-body'+clsAdmin+'">
' + comment + '...</div>
');
if(txtMore != "") {
var moretext = replaceVars(txtMore, authorName, postTitle, cmtDate);
document.write('<div title="'+tooltip+'" class="rc-footer'+clsAdmin+'">
<a title="'+tooltip+'" href="' + href + '">' + moretext + '</a></div>
');
}
}
document.write('<div style="clear:both;">
</div>
</div>
');
}
}
}
if(getTitles)
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/posts/summary?redirect=false'+maxResultsPosts+'&alt=json-in-script&callback=getPostUrlsForComments"></'+'script>');
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false'+maxResultsComments+'&alt=json-in-script&callback=showRecentComments"></'+'script>');
</script>

Kodu eklemek için Yerleşim gadget ekle Html/Javascript yolunu takip ederek eklemeniz yeterli olacaktır.Başka ek olarak bişey yapmanıza gerek yok arkadaşlar.

Blogger Popüler Yayınlar Eklentisi

Blogger Popüler Yayınlar Eklentisi V.2

Yine çok şık ve kullanışlı olan popüler yayınlar eklentisi ile karşınızdayım.Buda diğer popüler yayınlar eklentisi gibi oldukça kullanışlı bir yapıya sahip.Hiç lafı uzatmadan önizlemesini ve kodları size vermek istiyorum.

<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2014/11/5-cool-recent-post-widgets-for-blogger.html" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none; color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;}
li.recent-post-title { padding: 5px 0px;}
.recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;}
.post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}
.recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}
</style></div>

Kod İçerisinde Yapmanız gereken bir değişiklik yok.Kodu Yerleşim Gadget ekle Html/Javascript bölümüne eklemeniz yeterli olacaktır.

Blogger {Resimli} Popüler Yayınlar Eklentisi

Resimli ve Renkli Popüler Yayınlar Eklentisi

Bu popüler yayınlar eklentisi ile siteniz neşelecek ve ziyaterçileriniz sitenizden zevk alacak.Sizde eski popüler yayınlar eklentisinden bıkmadınız mı ? Gelin hep birlikte eskileri klasörlere atalım ve yepyeni bir eklenti edinelim.Bende blogger eklentisi ararken çoğu yerde gömüştüm renkli popüler yayınlar eklentisi ama hem renkli hemde resimliye hiç rastlamamıştım.Uzun lafın kısası hemen size kodları verelim sizde deneyip görün istiyorum.

<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentpoststhumbs.js"></script>
<script>
var posts_no = 5;
var showpoststhumbs = true;
var Devamılink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet" type="text/css"></link>
<style type="text/css">
img.recent-post-thumb {width:50px;height:50px;float:right;margin: 5px -5px 0px 0px; border-radius: 100%; padding: 3px;background: #fff}
.recent-posts-container {font-family: 'Ubuntu Condensed', sans-serif; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px; }
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}
ul.recent-posts-container li {padding:5px 10px;min-height:50px; list-style-type: none; margin: 0px 5px -5px 5px; color: #777;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>

Arkadaşlar kod içerisinde hiçbir değişiklik yapmanıza gerek yok.Direk olarak Yerleşim gadget ekle Html/Javascript yolunu takip ederek ekliyoruz.Kendisi otomatik olarak sizin yayınlarınızı ekleyecektir.

Takip Et @Mcahitp

Pop-Up Açılır Facebook Beğen Kutusu

Pop-up Açılır Facebook Beğen Penceresi

Bugün sizlere yine şahane bir eklenti paylaşmak istiyorum.Ziyarerçileriniz sitenize geldiğinde onları Facebook beğen kutusu ile karamak istermisiniz?Bu şahane ve ekranda pek fazla yer kaplamayan eklenti ile hem ziyaretçilerinizi zorlamayacak hemde facebook sayfanızı beğendirmiş olacaksınız.Ayrıca bu kod her kullanıcıya sadece bir defa gözükmektedir.Üstelik sadece Html/Javascript bölümüne eklemeniz yeterli olacaktır.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Helplogger/120574614736021&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">
Powered by <a style="padding-left: 0px;" href="http://birsorumolacak.blogspot.com.tr/" rel="nofollow">Birsorumolacak</a></div>
</div>
</div>

Kod içerisinde değiştirmeniz gereken yerler:

https://www.facebook.com/pages/Helplogger/120574614736021 - yerine kendi facebook adresinizi yazınız.

.delay (5000) - bu kod ana sayfanız açıldıktan sonra facebook penceresinin kaç saniyi sanra açılacağını belirler.Değiştirmek için 5000 den küçük yada büyük sayı giriniz.

Bu kadar arkadaşlar yapamadığınız yer olursa yorum kutusunda belirtmeniz yeterli olur.

Takip Et @Mcahitp

Bloguma Hoşgeldiniz !

Mücahit Polat

Kategoriler :)

E-posta Aboneliği!