Blogger İçin Artistik Subscribe + Search Box ~ Teknokirpi Kişisel Web Blog

Bu yazımızda blogger blog kullanıcıları için çekici bir Subscribe (Abonelik) ve Searc (Arama) box eklentisi kurulumu yapacağız.

Öncelikle hatırlatmam gereken birşey var CSS3 nimetleri günümüze yerleşmiş olup birçok web sitesi kurulumunda kullanılan ve web sitesinin hareketlerini kısıtlamayan,ayrıca web sitelerinin hareketlerini kontrol altına almaya yaran birçok css yazılımlarına sahipliğiyle tanınan mükemmelliktir.

Şimdi bloggerımıza entegre edeceğimiz bu eklenti sayesinde Subscribe button Subscribe mail button Follow me twitter button,Facebook profile button ve Share this sosyal paylaşım butonları eklemiş olacağız.

Öncelikle Blogger 'a giriş yapınız.

Sırasıyla Şablon - Şablonu Düzenle - Widget Şablonlarını Genişlet sekmelerini uygulayın ve CTRL + F klavye kısayol yardımıyla arama kutusunu açınız. Arama kutusuna < / head > kodlarını yazıp arayınız ve bulduğunuz kodun hemen üstüne gelecek şekilde aşağıda belirttiğimiz html kodları şablonunuza ekleyiniz.

Not : Html kod kısmının üzerinde bulunan View Plain - Print - ? sekmelerinden View Plaini tıklayarak,html kodlarını zahmetsizce yeni açılan pop-up pencere ekranından kopyala yapıştır yöntemiyle alabilirsiniz.

<!-- Subscribe + Search Box Teknokirpi -->
<style type="text/css">
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>
<!-- Subscribe + Search Box Teknokirpi End -->

Dip not : Bu kodlar CSS kodlarıdır.CSS bilgisi olan blog yazarları kendilerine göre düzenleyebilirler;

Şablonumuzun önizlemesini inceliyoruz ve hata yoksa şablonumuzu kaydedip buradan çıkıyoruz.

İkinci aşamamız Blogger Kumanda Paneli - Yerleşim sekmelerini kullanarak Page Elements sayfasına ulaşıyoruz burada Subscribe + Search Box 'ın görünmesini istediğimiz yerde Gadget Ekle sekmesinden HTML/JavaScript gadgetini seçerek aşağıdaki kodları kopyala yapıştır yöntemiyle bu gadgetin içerisine ekliyoruz.

Not : Html kod kısmının üzerinde bulunan View Plain - Print - ? sekmelerinden View Plaini tıklayarak,html kodlarını zahmetsizce yeni açılan pop-up pencere ekranından kopyala yapıştır yöntemiyle alabilirsiniz.

<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkDROs6g_7tntAM0RsJxVoNg6iIPG7oAWWPFtpXJ1uDJpgi0xGQKtyb9pWALGF5KDKky9Wp8z7JzgLVqgDaWIvIaLm1WvQFln1q8k8fwLdlbGMC65gAbQ1uEz-zpNfm8DX5XwOCda1gcLt/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXFqrlJYXvs11_kkVbRMQF9-X-r-Y4Kyqv3Yn5oJ9siygU2pstCZkyuYrfCau_WdqHbokXHVBQQrwofAIREAy8pqkZGMG2bk37rZe5y7vtKV5pzmDdtQ_WJHMfUQKecN_w_pm7PeQYhKEe/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-KULLANICI-ADINIZ" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTOx4NwWGZyTIMlyhFzVyLVb6L7bP2aw7ZKCPQD_eQgYkpZoPST3hZqDafDYfISqKVMkwt0kFA4a9EKa9eFsZlt5v0N63fNPAM4BIND08_lEDMjABt8aQA5uH9lLqMzAmtCp1Efnf1nTh/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWİTTER-KULLANICI-ADINIZ" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-KULLANICI-ADINIZ" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbgXkyCKIrUl4aVkHXMZc9Ip6mh6Z90qTyCKIVjiwOBQM-Bb-1bDKB7DVPktjXiHgtnJCDcjMWVI5iEhk57pAdtYY1D21upmDsdogImGEiMFKY752sTzTg6GbJV1DEX5FCIQuT4w78EwKk/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-KULLANICI-ADINIZ" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-TV2WIIp2hRlhAVS2jT2K4qGU5958qSiCzUNDNKUrPUCPCc71p9HNi3GbPka1lHU-S3TAQQ_wg4_nVkxxcxIg9fIrZQKMPas-B1q0C0nMjcr-3HCX4ktbzOv44LiMVLghZAOKafBNTAk/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRUmpQTHInzyYvXsxG83ftYHilS76ht9lIRS9t4jNAzkoEBjZG2NqY0oi33G3RuiE5FPIi7hp063V77so8jrFd1_m34q15PfzE0SdGmNZgXet_XlZf8RRUXsf23kJC1_yWPvG5G1W97mk/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKhklsF2WRjtyt2I4JSh2ABgrVo0LUNaP4NWpohdhozO0jPN2MfYTw3057a6dV4pSaHw_DhCQJlQMV88-seaOi9qR4PFvKBm5wPFdScohEHTvZrGtwyn4sicDWGqbXfUAj-U3HA7C0_Ao/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNbz_V049EUmCUnU1Dka-b5wWurZVILoGVOqIyeIdVl-sCFj65wa9nWp4gGgKT2UTjfgAkdr0zHf6KNryY0LzfdrOikAnpc82kh36sYchySV6_IvzpGrRlQ4xslAfyl0wphmZGQO3LazU/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCYlg3jHKc_ArwHIMiWRAjXpDlBZAPEPthoh33Wi-rcfL8hiAejZZA-6v12LSzVx-D9fJTN-zm_rK9_bqi8hRBs-bCKSTvncca5M4FRpZKLX1w1Dp979tWE9Lp0n8gwH6BE9gDgJxhv8w/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzsYtAuKO6N_Siz1PlUy9vWeOsVK-cSFGGPaZMaDu47LDV2lyYC3hq6D2Slztat2FS4A7Egvhgfd-HISXIfEoB9_5rMkMVOjZXDxfrf6ZCHa_CZdCQbsSss2UFOSRhGSx9q9sjScIe3DA/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjABiHmDZm8wNWRJdtDE8xPCeYQoWoiAnkNAsAuka7-Wv7JzQsOPLemuXKPb2I98j7WEOjcTahJ5SeISDr73_2Wqn-nq50jjLy2qTCmj6CmyBoNzs0nYZ1MOhaelCtX12f6nueh5DvKUto/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>

Yukarıdaki kodu düzenlemek için ;

TWİTTER-KULLANICI-ADINIZ yazan bölümlere kendi twitter kullanıcı adınızı yazınız.

FEEDBURNER-ID yazan bölümlere feedburner ID nizi yazınız.

FACEBOOK-KULLANICI-ADINIZ yazan bölümlere kendinizin veya sitenizin facebook sayfasının kullanıcı adını yazınız.

Kod içerisinde BloggerTipAndTrick.net'e ait reklam bulunmaktadır emeğe saygımızdan dolayı kaldırmadık siz kaldırmak isterseniz yukarıdaki kod kümesinden aşağıda vermiş olduğumuz kod kümesini silerseniz reklam kalkacaktır.

<p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p>

Veya bu kod kümesini kendinize göre düzenleyebilirsiniz.Artistlik Subscribe + Search Box eklentisini bloğumuza kurulumunu tamamladıktan sonra aşağıdaki gibi bir görünüme sahip olacaktır.

Kaynak : BloggerTipAndTrick.net

Demo :

Be a Fan

0 Yorum yapıldı “Blogger İçin Artistik Subscribe + Search Box”

Yorum Gönder

1 - Yorumlarınızın konuyla ilgili olmasına dikkat ediniz.

2 - Küfür,Hakaret vb. kelimeler içeren yorumlarda bulunmayınız.

Not : <b>, <i>, <a> gibi bazı HTML etiketlerini kullanabilirsiniz.

Dip not: Adı/URL seçeneğiyle yorum yapacak olanlar,URL başlarına Http:// protokolünü uygulamayı unutmasınlar...

Teknokirpi Kişisel Web Blog

1 Ağu 2011