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şletDaha 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%);
}
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 == "") {this.value = "E-posta adresinizi yazın.";}" onfocus="if (this.value == "E-posta adresinizi yazın.") {this.value = ""}" 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.
