Blogger arama sonuçlarını sayfa içine taşımadan arama penceresi altında sıralı liste olarak gösteren Ajax, JQuery ile düzenlenmiş, Blogge...

...

Blogger arama sonuçlarını sayfa içine taşımadan arama penceresi altında sıralı liste olarak gösteren Ajax, JQuery ile düzenlenmiş, Blogger özel arama pencere eklentisi. Blogger’un varsayılan arama penceresinden sıkıldı iseniz kendi arama penceresini kurabilirsiniz. Aşağıda Türkçe çeviri yapılan eklentiyi blog gadgetlerinizden Html/javascrip gadgetini seçerek gadget olarak eklemeniz ve istediğiniz konuma sürüklemeniz yeterli olacaktır. Arama penceresine yazılan arama ile ilgili kelime sonuçları hemen pencerenin alt kısmında hizalı bir şekilde açılan bağlantı linkleri ile görülmeye başlayacaktır. Kodlar içinde Ara pencere arka plan rengini, arama sonuçları bağlantı link rengini ve pencere genişliğini blog temanıza göre ayarlayabilirsiniz. Arama pencere eklentisinin Demosunu inceleyin. DEMO Açılan pencerede sağ sidebar alt kısımda bir etiket aratın. Örnek : blog

Blogger Arama Pencere kurulumu :

1. Blogger kumanda panelinize giriş yapın.

2. Yerleşim → Gadget ekle yolunu takip ederek, Html/JavaScrip gadget’ini açın ve aşağıda verilen kodları ekleyerek gadget’inizi kaydedin.

3. Blog temanızın uygun bir bölümüne sürükleyerek konumlandırın blogunuzu kaydedin.

Html/JavaScrip gadget kodları :

<style type="text/css" scoped="scoped">
#ajax-search-form {
  position:relative;
  font:normal normal 13px/normal Arial,Sans-Serif;
}
#ajax-search-form a {
  color:#561ABE;
  text-decoration:none;
}
#ajax-search-form input {
  border:1px solid #ccc;
  border-top-color:#999;
  background-color:white;
  font:inherit;
  color:black;
  margin:0 0;
  padding:5px 5px;
  width:250px;
}
#ajax-search-form input::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}
#ajax-search-form input[type="submit"] {
  width:auto;
  background-color:#084670;
  border-color:transparent;
  color:#B4D8F0;
  font-weight:bold;
  cursor:pointer;
  padding-left:7px;
  padding-right:7px;
}
#ajax-search-form input[type="submit"]:hover,
#ajax-search-form input[type="submit"]:focus {background-color:#083E5F}
#search-result {
  border:1px solid #bbb;
  background-color:white;
  padding:10px 15px;
  margin:2px 0;
  width:auto;
  height:auto;
  position:absolute;
  top:100%;
  left:0;
  z-index:99;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  display:none;
}
#search-result ol,
#search-result li,
#search-result h4 {
  margin:0;
  padding:0;
}
#search-result h4,
#search-result strong {
  display:block;
  margin:0 30px 10px 0;
}
#search-result ol {margin:0 0 10px 28px}
#search-result ol a:hover {text-decoration:underline}
#search-result .close {
  display:block;
  position:absolute;
  top:6px;
  right:10px;
  line-height:normal;
  color:#17950F;
}
#search-result strong {color:#B75252}
</style>
<form action="/search" id="ajax-search-form">
    <input type="text" name="q" />
    <input type="submit" value="Ara" />
</form>
<script type="text/javascript">
(function($) {

    var $form = $('#ajax-search-form'),
        $input = $form.find(':text');
    
    // Append a search result container to the search form
    $form.append('<div id="search-result"></div>');
    var $result_container = $('#search-result');
    
    // When the keyword is submitted...
    $form.on("submit", function() {

        // Get the input value
        var keyword = $input.val();

        // Show the search result container and insert a `Loading...` text
        $result_container.show().html('Loading...');

        // Get the blog JSON via $.ajax() to show the search result
        // The URL format: http://blog_name.blogspot.com/feeds/posts/summary?alt=json-in-script&q={THE_KEYWORD}&max-results=9999
        $.ajax({
            url: 'http://guney5.blogspot.com/feeds/posts/summary?alt=json-in-script&q=' + keyword + '&max-results=9999',
            type: 'get',
            dataType: 'jsonp',

            // If success, grab the search result list...
            success: function(json) {
                var entry = json.feed.entry,
                    link, skeleton = "";
                if (entry !== undefined) {
                    skeleton = '<h4>Anahtar kelime için arama sonuçları &quot;' + keyword + '&quot;</h4>';
                    skeleton += '<a class="close" href="/">&times;</a><ol>';
                    for (var i = 0; i < entry.length; i++) {
                        for (var j = 0; j < entry[i].link.length; j++) {
                            if (entry[i].link[j].rel == "alternate") {
                                link = entry[i].link[j].href;
                            }
                        }
                        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
                    }
                    skeleton += '</ol>';
                    $result_container.html(skeleton);
                } else {
                    // If the JSON is empty ... (entry === undefined)
                    // Show the `not found` or `no result` message
                    $result_container.html('<a class="close" href="/">&times;</a><strong>No result!</strong>');
                }
            },
            error: function() {

                // If error, show an error message
                $result_container.html('<a class="close" href="/">&times;</a><strong>Error loading feed.</strong>');
            }
        });
        return false;
    });

    // Fade out the search result container if the close button is clicked
    $form.on("click", ".close", function() {
        $result_container.fadeOut();
        return false;
    });

})(jQuery);
</script>

Blogger Arama Penceresinin özelleştirilmesi

1. width 250px : 250 px değerini blog tema genişliğinize göre düzenleyin.

2. url : Blog içinde mavi ile gösterilen, “http://guney5.blogspot.com” Url’nin olduğu yere kendi blog linkinizi ekleyin.

3. #ajax-search-form input : Kod içinde background-color etiketinin yanındaki #084670 rengi ara isminin arka planını değiştirir. Arzu ettiğiniz onaltılık bir Hex renk kod bulucu ile değiştirin.

4. color:#B4D8F0 : Ara isminin rengini değiştirir.

5. color:#561ABE : Aranan etiket isim bağlantı link rengini değiştirir.

6. Arama sonucu çıkan pencereyi kapamak için sağ üst kısımdaki x tıklayın.

Blog aramalarında çıkan sonuçlar yazı etiketlerinizin sayısına bağlı olarak çoğalıp azalabilir. Aynı yazı sayfasına ait vermiş olduğunuz etiketinize bağlı filitreli sonuç yazılar görülür.

Takıldığınız yer varsa yorum yazarak yardım alabilirsiniz.