Gri Mavi Pembe Bloguna Kolay Arama Kutusu Ekle

Hayırlı sabahlar sevgili canlar..mailime son zamanlarda bloglarda kullanılan arama kutusuna dair yaşanan sorunlarla ilgili sorular ve yardım talepleri gelince bloglarımıza ekleyebileceğimiz işlevsel rengi cismi güzel bir arama kutusu paylaşımı yapmak istedim..

Bir çok blogdaşım bunu kullanmakta ve memnun olduklarını bildirmektedirler :)
Blogunuza kolayca ekleyebileceğiniz blogunuzun renklerine göre değiştirebileceğiniz sade ama oldukça hoş bir eklenti..

Renginizi seçin arama kutunuzu eklemeye geçin :))

GRİ RENK ARAMA KUTUSU İÇİN:

<style>
#search-box {
position: relative;
width: 110%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #eee;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #eee;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #ccc;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #222;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #eee;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='site içi ara' type='text'/>
<button id='search-button' type='submit'><span>ARA</span></button>
</form>
</div>

MAVİ RENK ARAMA KUTUSU İÇİN:

<style>
#search-box {
position: relative;
width: 110%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid #cfe2f3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #cfe2f3;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #ccc;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #222;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #cfe2f3;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='site içi ara' type='text'/>
<button id='search-button' type='submit'><span>ARA</span></button>
</form>
</div>

PEMBE RENK ARAMA KUTUSU İÇİN:

<style>
#search-box {
position: relative;
width: 110%;
margin: 0;
}

#search-form 
{
height: 40px;
border: 1px solid#f4cccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text 
{
font-size: 14px;
color: #f4cccc;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #ccc;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #222;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #f4cccc;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}
</style>

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='site içi ara' type='text'/>
<button id='search-button' type='submit'><span>ARA</span></button>
</form>
</div>

Henüz bloga nasıl ekleneceğini bilmeyen dostlar buradan adım adım bakıp eklentiyi bloglarını ekleyebilirler: GADGET/EKLENTİ NASIL EKLENİR?


Bu yayın ile ilgili her tür sorularınız için yorum kutusunu kullanabilirsiniz..

Son olarak cici mutfak gereçleri çekilişime çok az kaldı henüz katılmayan dostlara duyurulur..cicileri görmek ve katılmak için resme tıklamanız yeterli:

Sevgilerimle..

Bloguna En Çok Yorumlananlar Eklentisini Ekle

Selamünaleyküm sevgili dostlar hayırlı sabahlar :)
Uzuuuun zaman oldu blog tasarım hakkında bilgi ve cicler paylaşmayalı farkındayım şimdi bu boşluğu telafi etmek bir dünya ciciler eklentiler ve farklılıklar paylaşmanın zamanı geldi diye düşünüyorum..

Yaz bitti sayılır havalar bir çok yerde sıcak olmalarına rağmen bir çok yerde de Eylül ve sonbahar kendini hissettirmeye başladı..
Okullar da dolunca anneler nineler biraz nefeslenecektir dilerim:)

Bu gün bloglarımıza en çok yorum alan başka bir tabire göre de en popüler (tüm zamanların) konularını blogumuzun sağ veya sol tarafında sergileme ve listelemeyi göstermek istiyorum..

Kolayca yapılabilen kod bilgisi gerektrmeyen güzel bir eklenti olduğunu düşünüyorum özellikle de bloglarına bu tür eklentileri seven ancak hareketli resimli kısaca göz yorsun istemeyen ama olmasını arzulayanlar için ideal bir eklenti..

Daha evvel paylaştığım Gadget/Eklenti Nasil Eklenir bölümünden bu tür eklentilerin nasıl eklendiğini resimli olarak izah etmiştim buraya sözlü olarak nasıl eklendiğini ve kodu paylaşacağım görsel olarak yapmak isteyenler veya ilk kez yapacak olanlar Gadget/Eklenti Nasil Eklenir konuya giderek adım adım yapılışını görebilirler dostlar..




Bismillah..

KUMANDA PANELİ'nden YERLEŞİM diyoruz.
Karşımıza çıkacak olan seçeneklerden GADGET EKLE'ye tıklayarak beliren listeden HTML/Javascript diyelim..

Boş alana aşağıdaki kodu ekleyelim..

<!-- Popular posts with comment count Start -->
<script type="text/javascript">
function getYpipePP(feed) {
 document.write('<ol style="">');
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
 document.write(pList);
 document.write(pComment); //to remove comment count delete this line
 document.write('</a></li>');
 }
 document.write('</ol>');
 }
 </script>
 <script src="http://pipes.yahoo.com/pipes/pipe.run?
 YourBlogUrl=http://www.degmesinyagliboya.blogspot.com
 &ShowHowMany=10
 &_id=390e906036f48772b2ed4b5d837af4cd
 &_callback=getYpipePP
 &_render=json" 
type="text/javascript"></script>
<span style="font-size: 80%; float:right;"></span>
<!-- Popular posts with comment count End -->

Kodu yerleştirdikten sonra..

Kaynak:Bloggersentral

Resimde daire içine aldığım yere kendi blog adresinizi girerek KAYDET diyelim..

YERLEŞİM'de arzuladığımız yere eklentimizi sürükleyerek bırakalım..

Önizlemeye de gerek kalmaz o kadar kolay bir eklenti.
Dilerim seversiniz severek kullanırsınız..bu eklentinin işlevi ve kullanışı bu gün blogumda mevcutttur canlarım..

Konuyla alakalı yorumlarınızı yorum kutusuna konuyla alakalı olmayan benzer sorularınız içinse SORU SOR bölümünü kullanabilir sorularınızı veya sorunlarınızı iletebilirsiniz..

Hepsi bu :)

Kolaylıklar dilerim..

Sevgilerimle...

Google+ Üyeler Eklentisi Nasıl Eklenir

Selamünaleykum hayırlı sabahlar sevgili dostlar..
En son yayınım olan:İzlediğiniz blogları hızlıca Bloglovin'e Aktarabilirsiniz gelen yorumlar içerisinde konuyla alakalı olmayan ama gündemde olan Google+ eklentisi hakkında bir soru sorulmuştu..
O sorunun yanıtını bugün görsel olarak vermek istedim.
Soru Google+ Üyeler eklentisini eklemek ile ilgiliydi daha da doğrusu eklentideki üyelerin avatarları görüntülenmesiydi..ve bunun nasıl yapıldığı tabii ki..

Hızlıca ve kolayca resımlerle anlatmaya çalışacağım İlknur kardeşim dilerim işine yarar :)

Bismillah..

Kumanda Panelimizden YERLEŞİM>Gadget Ekle diyoruz (Bloga Gadget/Eklenti Nasil Eklenir?) 

Ardından Gadget listesinden Google+ Üyeleri adındaki Gadget'i yani eklentiyi seçiyoruz..

Karşımıza çıkacak olan penceredeki ayar seçeneklerinden Boyut kısmındaki Otomatik ve El ile belirtin şıklarını göreceksiniz..
Google+ üyelerinizin avatarları bende olduğu gibi görüntülenmesi için El ile belirtin seçeneğini tıklıyor ve şablonumuzun boyutlarına uygun verileri girdikten sonra Kaydet deyip çıkıyoruz arkadaşlar..

Oldukça basittir sanırım herkes kolaylıkla yapabilecektir :)

Değil mi?

Güzel bir gün diliyorum..

Sevgilerimle..