Blogger Sosyal Medya ve Abone Ol Kutusu

Bugün sizlere yeni temamda kullandığım Sosyal Medya ve Abonelik eklentisini sizler ile paylaşmak istiyorum.Bu eklentimiz yaptığım diğer Sosyal Medya sürümlerine benzemiyor.Bu sefer eklentimizi CSS ile zenginleştirmiş bulunuyorum.








Tasarım > HTML'yi Düzenle > Widget Şablonlarını Genişlet

Daha sonra aşağıdaki kodu bulun.



]]></b:skin>




Bulduğunuz kodun hemen üstüne aşağıdaki CSS kodlarını ekleyin.Şablonu kayıt edin.


@import url("http://fonts.googleapis.com/css?family=Oswald&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/AVvXsEhv9jENFpb0mzqBWtMbckmyX3VGrDzmK11-EBJwNesaKvnHGGa2Gyi0AWskGeHg7bveITwv7R_cxmRQoHvSZCbvwst5_vPPRfrkrOc_nux5PQW_40EqUWN-hzf8Bt1PLgolSYndm-THVKrp/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1FBF3GE_tejtugiNu2p1I7-hFD9pe_T5UbtUm2xFXfbmw8H6PFAwTCIFqRvKjTzgn8B847T_nyFO4fYA26RR_kANSaN-eU9-Lb5c0n9jzN5qlUTjtAcII_Hjd1c90fZtEbE-2Iq3zPzQE/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibNewEbu8HSXtYhHQJULyE8HZ8BUOz9ql40rSXO8ASernbOYz32G1CqjnKZ5RD3cusTi1rQI6Lv7hHk64xIDe021yiAzoN_TYTEgsc0_PhEuHaa6aCvLrQcp4xxoiaHLo9uaTdQQhFDZ-Y/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiex4aoAEdjezJ7L8wHki-3wa_99t0D0rm0XbI8lUC2_u5G8DDZVfColQF5lrDYw0itzhW-AykpXQ13qRfGFBrdWK3kH-KO646nEc3TvP7AOkFJQEw53FAc23Y-VctSU6motu-Mvu1O3pz2/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/AVvXsEj_V1wr38t9Nw0HYDaAddqK70lATLSeY41ZwXADl0WfpJNSLLQaWfRDbSEywdVE_5hoswACawuqJ48njBQ-f8DiRFbEvLNaY1575w7zyQAcQYIC4xhzdAGbiNRJiLU_5bD9Scrwe46BbtSr/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%);
}



CSS kodlarını ekledikten sonra aşağıdaki kodları Tasarım > Sayfa Öğeleri > Gadget Ekle > HTML/JavaScript yolunu izleyerek ekliyoruz.Daha sonra gadgetı nereye uygun görürseniz oraya taşıyabilirsiniz.

<center><a href="http://www.facebook.com/websehri" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/elegantmediaicons/PNG/facebook.png" /></a><a href="http://www.twitter.com/ardaerakman" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/elegantmediaicons/PNG/twitter.png" /></a><a href="https://plus.google.com/111946372959768014016/posts" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/elegantmediaicons/PNG/google.png" /></a><a href="http://feeds.feedburner.com/aerakmanBlog" target="_blank"><img src="http://cdn1.iconfinder.com/data/icons/elegantmediaicons/PNG/rss.png" /></a></center>


<center>
<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=aerakmanblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
        <input type="hidden" value="aerakmanBlog" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-posta adresinizi yazın.&quot;;}" onfocus="if (this.value == &quot;E-posta adresinizi yazın.&quot;) {this.value = &quot;&quot;}" value="E-posta adresinizi yazın." name="email" class="emailText" />
        <input type="submit" class="emailButton" value="Kayıt" title='' />
    </form>
</div>
</center>

Önizleme:

Değiştirmeniz kısımlar belli.Abonelik Formunda ve Sosyal Medya Profillerinizi kendinizinki ile değiştirin.

İyi bloglamalar.