Blogger Popüler Yayınlar Eklentisi Renkli - Animasyonlu

Blogger popüler yayınlar eklentisi  güzel görünüm kazandırmaya ne dersiniz?
Blogger'de popüler yayınlar eklentisi var. bildiğiniz gibi bu var olan görünüme, daha renkli ve şık bir görünüm kazandıra bilirsiniz. renkli bir görünüm mausla üstüne gelince, dönem bir resim. popüler yayınların yanında nubaralandırma. blogger popüler yayınlarınıza, animasyonlu bir görünüm kazandırmak isterseniz. aşağıda gösterceğim uygulamayı izlemeniz yeterli olcak.

Blogger Popüler Yayınlar Eklentisi Blogguma Nasıl Uygularım?

1 Adım : Blogger  sayfanızı acın. Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin. Ctrl+F yardımıyla ]]></b:skin> kodunu bulun. buldugunuz ]]></b:skin> kodunun üstüne aşağıda verdigim, kodu kopyala yapışdır yapın, kaydet diyip cıkın işlemimiz bitmişdir.

<!-- popüler yayınlar eklentisi  -->
    <div class='noop-searchbox' id='noop-searchbox'>
      <form action='/search' id='noop-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...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnPxFQSD5Xx4GUnVHMZvimLip6-Mxp9l6KltVjDM65U4760lD6toPjG2HWrgkidmHeS_LRHrZPDCjIvOffYtylG307OJ6AWT24lFLpmiqIUkalkksuBvGTWkVygoED4YjVTI0aDzDoPNY/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- popüler yayınlar  eklentisi -->