Archive for 06/06/12

Blogger Sosyal Paylaşım Widgeti

Way2Blogging’s Social Subscription Widget for Blogger / Blogspot Preview

Blogunuza widget olarak ekliyebileceğiniz sosyal paylaşım butonları, e-posta ile takip et ve rss butonu bulunan widgeti sizlerin kullanımına sunuyoruz.Widgeti blogunuza eklediğinizde resimdeki gibi bir görünüm elde edeceksiniz..Sosyal Paylaşım Butonları widgetini blogunuza eklemek için;
1.Adım:Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretledikten sonra kodlar içeriisnde Ctrl+F yardımı ile ]]></b:skin> kodunu bulun.Aşağıdaki kodu kopyalayıp bulduğunuz ]]></b:skin> kodundan önceki kısma yapıştırın.

@import url("http://fonts.googleapis.com/css?family=Oswald&amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
    font-family: 'Oswald', sans-serif;
    margin: 15px 0;
    overflow: hidden;
}
.w2bOldSocial ul li {
    float: left;
    width: 90px;
    padding: 0 0 0 55px !important;
    margin: 0 0 0 5px !important;
    line-height: 48px !important;
}
.w2bOldSocial ul li a {
    font-size: 20px !important;
    text-decoration:none;
    padding:0 !important;
    margin:0 !important;
    text-decoration:none;
}
.w2bOldSocial ul li a:hover {
    text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisIiy_J-Ok5GPk20dVsr6fsmk65LiSTq-8CrxSDlerHOfRDi-zlwTNLBr_lKyjVhj4gckIXSr_5TifhIFYM0rkBQfecZab3vIH-XMJbeAy8oYwZcpJVEmo7Cyqpt8_RjBB226jiDibgTFl/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ3Q6ih252itJ7DwgF0mhtLFGcpe5WV4HS3_decrR1XWvwyfVLYsld4WITVIBVcvCaXbpNNKRe6jyqivvTtC4WpVYS5L0xIaWEyPcT4A4kgYp5AJnrhJumpWUeHE9m2NIcejuulghhB4my/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2_6ARnNs_mI8o8ArhMFF5VWRGh_Rh8C_k7JcHkFzBJhpLV43ivgFgGcJfIExaIoMXk4HFR3NzgqMnA2A34QRXuPVKv70CkIF5mtD6Ueg7g3MwTGw3TAUjE1hmHDKG-YSnSTk7lhtDG8OW/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYDIyPFRSPJipMY6RRvJfS7MouLm8uDs7i891ZeSa1rKd7-PMlTBuid9jjzpuTGdtwB2WiFlxCB3RbU5SIvLnQ2hwZjPMDAYZ0p58iCmFkUFzEfa6w2NgNknO3pUmU_V7gALgt96ovN6S/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
    display: block;
    clear: both;
    margin: 10px 0;
}
form.w2bEmailform {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.emailText {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgUbDnSqRZHNb8U93tPYO9Z1oI01v4_vHQwxqfkPEzv6F4DPoQddIxrx8qlUJAuANH57rBLrQAJpKafg5z0eA4YDCQi8Y8oXU_fDvMsIg8l_nnAFJnPCWJy8-XFxPWn2PrpaOBh-g2UO3/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
    padding: 7px 15px 7px 35px;
    color: #444;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

2.Adım: Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine aşağıdaki kodu yapıştırın.

<div class="w2bOldSocial">
    <ul>
        <li class="w2brss"><a href="http://feeds.feedburner.com/blogokulu">RSS</a></li>
        <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogokulu" >Email</a></li>
        <li class="w2btwitter"><a href="http://twitter.com/blogokulu">Twitter</a></li>
        <li class="w2bfacebook"><a href="http://facebook.com/blogokulu">Facebook</a></li>
    </ul>
</div>
<div id="w2bEmailsub">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
        <input type="hidden" value="BlogOkulu" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}" onfocus="if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;}" value="E-Mail Adresiniz..." name="email" class="emailText" />
        <input type="submit" class="emailButton" value="Abone Ol" title='' />
    </form>
</div>

Kod içerisnde;

http://feeds.feedburner.com/blogokulu feed burner url
http://feedburner.google.com/fb/a/mailverify?uri=blogokulu Feedburner ID
http://twitter.com/blogokulu Twitter URL
http://facebook.com/blogokulu Facebook Sayfanızın URL
<input type="hidden" value="BlogOkulu" name="uri" /> Feedburner ID

adreslerini kendinize göre değiştirip gadgeti kaydediyoruz ve görünmesini istediğimiz yere sürükleyip bırakıyoruz.Sosyal paylaşım widgeti blogumuzda kullanıma hazır.

Devamını Oku