MY TSM

Template Blog Keren, SEO Friendly, Fast Loasing, dan Responsive New Johny Wuss V2 bisa diubah-ubah lagi alis dimodifikasi, misalnya dari sisi warna dan jenis huruf.

Bisa pula dimodifikasi bagian featured post-nya, diganti dengan versi featured image post/content slide yang lain. Ini dia contoh New Johny Wuss V2 versi Modifikasi.

Di template New Johny Wuss V2 versi Modifikasi ini ada sedikit perubahan dan tambahan fitur:

1. Top Menu menjadi lebar 100% dan berubah warna.
2. Search Box (Kotak Pencarian) otomatis ada di Sidebar.
3. Featured Post diganti dengan Featured Post gaya Metro UI Template.
4. Perubahan pada warna latar bagian Footer Credit.

Cara Membuat Kotak Pencarian Menu Search di Blogspot sangat mudah. Tinggal klik LayOut, "Add Gadget", dan pilih Gadget "Search Box" atau "Kotak Penelusuran". Save!

Kurang berkenan dengan tampilan menu search atau kotak pencarian versi blogger? Ini dia alternatif   Kotak Pencarian Menu Search di Blogspot yang Contoh Blog kumpulkan dari berbagai sumber dan sudah dites satu-satu.

Setelah "Add a Gadget", pilih "HTML Javascript", dan pilih salah satu kode Kotak Pencarian atau Menu Search berikut ini. Dicoba saja satu-satu, lihat hasilnya, dan pilih yang menurut Anda bagus.

Kode Kotak Pencarian Menu Search Blog #1

<form action="http://namablog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Kode ini yang dipake CB Blogger di Sidebar:

<form action="http://contohblognih.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="33" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form><br/>

Kode Kotak Pencarian Menu Search Blog #2

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVsiqujiRM3KL2Jnrq4dpH8PF5gXBCIQn6uHG8wiYbh5PLwmRqnqNS7dyDJyXz6-SFNEN3NgVdqNlPPLVTaKHhB9DhDrP9SbTZNccqfwrde5wEVDiEcaUohQtm7AaHSXSw5tjkuJqbWC6T/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search Here..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Kode Kotak Pencarian Menu Search Blog #3

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Search Here...."/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
 width: 300px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
 position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPlhjrJ7hHi_d-D186Msr5swr-glU4tdtswjJYxsMvcQBfpraAVnGO6Rz8xrehP4QJP2D3Jw34ApQjEmSJKgwjw5jkzI94hi0j_pXplrOXwqp00BlBFxrneLoYiXUNYrASaBGUCXwb-0/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

Kode Kotak Pencarian Menu Search Blog #4

<style type="text/css">#mediablogger-searchbox {    border-radius: 5px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk6YVXrP03UP7ChX57-jsIFDhlFHOCM1OSOWeiW9ZGPNwiZ6CQ5V9IN_LEgE-ulxXDxtdF80gUk9P8EhVrvECfG9zpxwtfT2HRInmSVWNuBrA-5mL7f3lPRpO-dulokI9rOYnlStV-qMnD/s1600/impoint.blogspot.com-green.png) no-repeat scroll center center transparent;    width: 307px;    height: 50px;    disaply: block;}  form#mediablogger-searchform {    display: block;    padding: 9px 16px;    margin: 0;}  form#mediablogger-searchform #s {    padding-left: 24px !important;    padding: 7.5px;    margin: 0;    width: 198px;    font-size: 16px;    font-family: georgia;    font-style: italic;    color: #666666;    vertical-align: top;    border: none;    background: transparent;}  form#mediablogger-searchform#sbutton {    margin: 0;    padding: 0;    height: 40px;    width: 74px;    vertical-align: top;    border: none;    background: transparent;}</style><div id="mediablogger-searchbox">    <form id="mediablogger-searchform" action="/search" method="get">        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'        onblur='if (this.value == "") {this.value = "Search...";}' /></form></div>

Kode Kotak Pencarian Menu Search Blog #5

<style type="text/css">
#a-searchbox{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGheugGniF3LQKP_T7FJpb6s3_ujo_IceQfTGYISk8msCXgPgTMIKu2JZ0-Wc95cLAYw-zUppJgQBT3ArI3wj4CoBZWoCXnUQ8cnqaF0QA_u7hRyr3gmfLvfbzvR-QQsXn3_01MFbKoZpS/s1600/lostsector-search-box-blue.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#a-searchform{display: block;padding: 10px 12px;margin:0;}
form#a-searchform #a{padding: 6px;margin-left:20px;width: 205px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<center>
<div id="a-searchbox">
<form id="a-searchform" action="/search" method="get">
<input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" />
</form>

</div></center>

Kode Kotak Pencarian Menu Search Blog #6

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>