.

18 Eki 2012

Blogger 3D arama kutusu Eklentisi


Blogger blogunuz için 3d arama kutusu ( butonu ) eklentisi istermisiniz ?

Özellikle blogger blogunda , arama kutusu olmayanlar için , yada olupta beğenmeyenler için bu eklenti işe yarayabilir..

Görüntü olarakta oldukça şık olduğunu düşündüğümüz blogger 3d arama kutusunu blogger blogunuza eklemek için aşağıdaki anlatımı takip ediniz..

Blogger blogunun yönetim paneline giriniz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim.
<style type="text/css">
.form-wrapper {
width: 250px;
padding: 8px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 160px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 70px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<form class="form-wrapper" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="ARA.." />
    <input id="submit" type="submit" value="ARA.." />
</form>
Yapmamız gereken sadece bu kadar , artık blogger blogunuzda , 3d bir arama kutusuna sahipsiniz..

DEMO


<<< Bu Yazı için Arama Sonuçları  >>> 

Blogger 3D arama kutusu Eklentisi , Blogger 3D arama kutusu , Blogger 3D arama Eklentisi , Blogger Arama Kutusu , Blogger Arama butonu , Blogger Search Bar , Blogger 3D search box


Eklentileri.blogspot.com Hakkında.


Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..

Bizi Facebook ve Twitter üzerinden de takip edebilirsiniz..

9 yorum:

Adsız dedi ki...

ama benim 3d gözlüğüm yok :P şaka bi yana güzel eklenti

Cimbom dedi ki...

Merhabalar,

Bu eklentiyi temanın sağ üst köşesine nasıl ekleyebiliriz? Arama çubuğu sayfanın sağ üst köşesinde, kullandığım tema; http://blogtemplate4u.com/?visit=thecars-pbtemplate.blogspot.com gördüğünüz gibi arama çubuğu sağ üstte yer alıyor, sizin tarif ettiğiniz şekilde oraya yerleştirmem imkansız. Bu kodları tema içerisinde nereye koymalıyım?

Saygılarımla.

Eklentileri.Blogspot dedi ki...

@Cimbom

Merhabalar , almak mümkün...

Temanızın demosunu indirip , inceleyeceğim...bana mail atarsanız ordan eklemeniz gereken kodları yazarım.. mail : eklentileri.blogspot@gmail.com

Eklentileri.Blogspot dedi ki...

@Cimbom

Mail adresinize gerekli anlatım yapıldı , kodlar içerdiği için spam klasörünüze gidebilir kontrol etmeyi unutmayın..

iyi günler..

Unknown dedi ki...

merhaba ben ekledim ama bende normal gözukuyor 3d değil neden acaba dedğinz gb de yaptım photocum.blogspot.com

Eklentileri.Blogspot dedi ki...

@Efe Akça

Kodu tam olarak kopyaladığınızdan emin olun , css kodlarında eksiklik var gibi..

Adsız dedi ki...

ÇOK teşekkürler oldu bakın http://transformicehackerciturk.blogspot.com/ adminin dedği gibi doğru yanlış yapıştırmışsın:)

Unknown dedi ki...

Hocam selamlar ben boyutunu küçültmek istiyorum ama orjinali bozuluyor hangi kodlarla oynamam gerekir bilgi verebilir misin?

Eklentileri.Blogspot dedi ki...

@Serkan ÇOKAYDIN

İki yeri değiştirmeniz gerekli..

1. kısım , width: 250px; ( Komple arama kutusu )

2. kısım , width: 160px; ( Sadece arama alanı beyaz yer )

ikisini birden değiştirirseniz orantılı olarak olacaktır..

width: 250px; >> width: 230px;
width: 160px; >> width: 140px;

gibi..Sizin blogunuzda tahmimce yukarıda değerler ile tam oturacaktır arama alanı , olmazda değerleri biraz daha azaltın dışarda kalmasın.

Yorum Gönder

Blogger tarafından desteklenmektedir.