Social Media Widget with Search Box

Blog သူငယ္ခ်င္းမ်ားအတြက္ Social Media Widget နဲ႕ Search box အသစ္ေလးပါ
ႏွစ္သက္တဲ့သူငယ္ခ်င္းမ်ားအတြက္ေအာက္မွာ HTML Code နဲ႕နည္းလမ္းေလး
ေလ့လာၾကည့္ေပးပါ။

အရင္ဆံုးကိုယ့္ရဲ႕ Blog ကို Sing in ၀င္ပါ

ေအာက္မွာျပထားတဲ့အတိုင္း Add a Gadget ကိုႏိုပ္ျပီး HTML/JAVA Script ကိုႏုိပ္ပါ

ေအာက္ပါ Code မ်ားကိုကူးထဲ့ျပီး Save ပါ။

<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}

#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanm_J1r3fZQaOSFpxS3NY8_8opX57kSyA7Rgn9ajx5pgHTajjmP0jGmksWJKQkMVbu2DOXXUk04NH3S1eTiY7GDvLrc2bOc1Y06RtPc5F3T-CGIOa3Ytb1ZnPpmKxTu-wcoHCuWLpYRdI/s1600/blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}
  
form#btrix-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}
  
form#btrix-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#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>

<div id="btrixwidget"><center>
<a href="ကိုယ့္ရဲ႕twitter.com link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfMDELj5Jdv0PtalzYFe5ALQ8WE1ENHI0jdKS1AOO3Ye70BnIacYVm6gMIh4ZUUuJK0lAThpr8fyIpoZl6zaRolNgtavQEce4_dOiXCY0y5_zEA0Tn4Q7nRv2RXvlLbNLMwrrWVZBvtSU/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>

<a href="ကိုယ့္ရဲ႕ facebook.com Link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv47N974NEkYqHJCElmdGXOHQTsP6pFhSfXf8rEnxH-unDE5ZfGr1DoEWQDW6Puh7admNTGEu8A42VvguvNlrjlrvrW9qK07RK19JSfiFuKCwAIZ6SRAwv1ga7NplHwei8JFu3VGA0jyg/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>

<a href="ကိုယ့္ရဲ႕feeds.feedburner.com link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfNBPraOpke1A34O6tUQl536Bj1W8-odcgqPlWSF-YvAulfdbx8_LP0XIpg87NxuckkdVDBpJovaVuI4wVRC4Uua9TOTbhJXmfwWctxAR20sWzcqfXOLHs-G-rPta5R_wqhnRjRoB_YlA/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251"></a>

<a href="ကိုယ့္ရဲ႕ au.linkedin.com link ကိုထဲ့ပါ" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyYn_GNfgSYAUxuz2rmx4ZfEDkTfDcL8K5O4LhFKLAr5NcYO2y7BbdOjI19D3YoiXTfbPYDDKnLozHy7MDT5Oyw5aK4p6SCJQW4ZitnnSjpNHmaINVdsbXD2eXwNmsXjsdmEahW2gS-iI/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>

<div id="btrix-searchbox">
    <form id="btrix-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...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
</center>
</div>

twitter , facebook , feeds.feedburner , au.linkedin စသည့္ေနရာေတြမွာကိုယ့္ရဲဲ႕
Link ထဲ့လိုက္ပါ။

Posted in: Blog နည္းပညာမ်ား