ဘေလာ့မွာထားဖို႔ Costom Search Box ေလးပါ

ကၽြန္ေတာ့္ဘေလာ့ရဲ႕ ညာဖက္ အေပၚဆံုးမွာထားထားတဲ့ Search Box ေလးပါ

CSS နဲ႔ေရးထားၿပီး Blog Platform အားလံးမွာ သံုးလို႔ရပါတယ္ ..
လုပ္ပံုလုပ္နည္းကေတာ့ Widget ထည့္႐ံုပဲမို႔ Template ကို ၀င္ျပင္ေနစရာမလိုတဲ့အတြက္ အမွားအယြင္းလံုး၀မရွိႏိုင္တဲ့
နည္းေလးတစ္ခုလည္း ျဖစ္ပါတယ္

Blogger ကေပးထားတဲ့ Search Box က ပံုလည္းတုန္းတဲ့အျပင္
Loading လုပ္တာလည္း ေတာ္ေတာ္ႀကီးကို အခ်ိန္ယူတဲ့အတြက္
အလည္လာတဲ့သူငယ္ခ်င္းေတြအေပၚ စိတ္အေႏွာက္အယွက္ ျဖစ္ေစပါတယ္ ( မွတ္ခ်က္ .. ေပၚတင္ ေက်းဇူးကန္းလိုက္ျခင္း ...:D )



ကဲ .. စလိုက္ၾကစို ...

1.ခါတိုင္းလိုပဲ Blogger ကို log in ၀င္ပါ
2. Layout ကို သြားပါ
3. ကိုယ္ထားခ်င္တဲ့ေနရာမွာ Add a widget ကိုႏွိပ္ပါ
4. Page element ေရြးရမယ့္ေနရာမွာ HTML/Java Script ကို ေရြးပါ
5. Title မွာ ဘာမွမေရးပဲ ခ်န္ထားခဲ့ပါ
6. Content အကြက္မွာ ဒီပို႕စ္ရဲ႕ေအာက္ဆံုးမွာေပးထားတဲ့ကုဒ္ကို ေကာ္ပီကူးၿပီး ထည့္ေပးလိုက္ပါ
7. ၿပီးရင္ Save ကိုႏွိပ္လိုက္ပါ
ဒါဆိုရင္ ဘေလာ့ထဲမွာ Search Box လွလွေလး ေရာက္သြားပါၿပီ

Beautiful Search Box With CSS For Blogger

1. Log in Blogger.
2. Click on 'Layout'.
3. Click on ' Add a widget'.
4. Choose 'HTML/Java Script'.
5. Leave the title field.
6. Copy and paste the below code in the content field.
7. Click on 'Save'.
Be Enjoy:)

<style type="text/css">
    #searchboxbytobt
    {
    background: #eaf8fc;
    background-image: -moz-linear-gradient(#fff, #d4e8ec);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d4e8ec),color-stop(1, #fff));

    -moz-border-radius: 35px;
    border-radius: 35px;

    border-width: 1px;
    border-style: solid;
    border-color: #c4d9df #a4c3ca #83afb7;
    width: 270px;
    height: 35px;
    padding: 10px;

    overflow: hidden;
    }

    #search, #submit
    {
    float: left;
    }

    #search
    {
    padding: 5px 9px;
    height: 23px;
    width: 180px;
    border: 1px solid #a4c3ca;
    font: normal 13px 'trebuchet MS', arial, helvetica;
    background: #f1f1f1;

    -moz-border-radius: 50px 3px 3px 50px;
    border-radius: 50px 3px 3px 50px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
    }

    /* ----------------------- */

    #submit
    {
    background: #6cbb6b;
    background-image: -moz-linear-gradient(#95d788, #6cbb6b);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #6cbb6b),color-stop(1, #95d788));

    -moz-border-radius: 3px 50px 50px 3px;
    border-radius: 3px 50px 50px 3px;

    border-width: 1px;
    border-style: solid;
    border-color: #7eba7c #578e57 #447d43;

    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;


    height: 35px;
    margin: 0 0 0 10px;
    padding: 0;
    width: 60px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #23441e;

    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    }

    #submit:hover
    {
    background: #95d788;
    background-image: -moz-linear-gradient(#6cbb6b, #95d788);
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95d788),color-stop(1, #6cbb6b));
    }


    #submit:active
    {
    background: #95d788;
    outline: none;

    -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;
    }


    #submit::-moz-focus-inner
    {
    border: none;
    }

    /* ----------------------- */

    #search::-webkit-input-placeholder {
    color: #9c9c9c;
    font-style: italic;
    }

    #search:-moz-placeholder {
    color: #9c9c9c;
    font-style: italic;
    }

    #search.placeholder {
    color: #9c9c9c !important;
    font-style: italic;
    }

    #search:focus
    {
    border-color: #8badb4;
    background: #fff;
    outline: none;
    }
    </style>
    <form id="searchboxbytobt" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="Type your search here" />
    <input id="submit" type="submit" value="Search" />
    </form>

ကဲ .. အဆင္ေျပပါေစဗ်ာ
နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး