Tutorial kali ini saya share tentang Widget Kotak Pencari Dengan Social Media Buttons di Blog. Gimana cara pasangnya? silahkan ikuti tutoria...
Tutorial kali ini saya share tentang Widget Kotak Pencari Dengan Social Media Buttons di Blog. Gimana cara pasangnya? silahkan ikuti tutorial berikut ini.
Login ke accunt blogger sobat.
Pilih rancangan atau tatak letak kemudian, Klik tambah gadget.
Pilih opsi HTML/Javascript
Lalu copy-pastekan salah satu kode dibawah ini.
<style type="text/css">
/* ---------Masdabang.blogspot.com----------- */
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhof-JEBjBTRewGjw5UuKLUZB7IKask6xs2MI0OCOuDHC9fZkcEI0L5nXfHeGF9yEdwsihJ74A8kb5zl087hGdKYmd5a7oeQem-eJqkUb-dTYccn5ag1Ag_GNF6oCEBasFqasxYdc0emwU/s1600/whitez+by+abt+-+Copy.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<div id="Bt-searchbox">
<form id="Bt-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>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcFTbaNMdEDQGZq11hLkMLMcOagdzMSFA0gjEPUMI1IvbdXknPQ6q-DPcH9hk7ms91cO1u1ZpSFqpliPXCH0Naqic_gEAnvELil-DpmX723sY4QvTex6vTgTjxTKj6_gr7h_XzuUl6JmE/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaL-0zps2HlcZZXASPdY1hI1Yj0u_RCYiEqXV_8xvDjDokwBjB4OzBW1gUp0Fao9vj4OJJ4tY9es5_q_eA6l552FOdkGhdmxX8omW6NiX8UL_tVvUPpujKQUMbqf0YTpL3gfpC47qKU28/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbm3zQXTEcbCAco0lmdJ22BVuXzLS7ASPaXA9-MEfwc4WUVV6MnMzWVVwGrApe2Vg6xAVaW1lR_M_kiyzWEnQld7vI0FsHp6AhonFjgjqF16D1lekrAlNge84klSzWierfWMO31Aq6u8/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOlFrTwt2KAh9RnjsaQzIsvCKVhQuVRJ8aK-B8AlUfEIOfMTXOMb43jF0wuwDx52hsN6cjEcfoX5d_p5FiRDMvM_jus1PTmVzsP3RVJJ0Ga2S48nSIOhfRoadbxOQgcq4Rl61y1e28Eg/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqmaCgyZ99NJIlVSUc8LgEJAq2sqCU4GW3bkg5HdNu2AvytmWbXnfSzYicPVBR7xQc8ITvQJgI_fwRu_GvhWny4TTm8MModdzrc9qOqdtUbuKFhCOeVFQRel1AhhM8JUHrLMEKS2VYSI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZ3DXte09XN36yCtlB28Xaoosn_pFaRQCJGq-v2lAwHVD6iHLNSDPc9YuYOK-z_bsYG6EvNRoTpWDlq2z_o1qcU94leulgXgS0l588cubRLwjZzRVGLVOA_Bdndp6y6OM6Vdr-H53hsI/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTe6nQequr98NuTejAr-fIAPiawOMkWd8oBTJz8hHvYqBOkrQH4xDpF1vKVd0P_ztlUcorjPhYJnksGxwHbKMYF8ElOrgk-q0gs-LGPKtZ4OffCeBc_cTp_EVqLfTvfV0MOnql6hVwn1Q/s1600/image.png' target='_blank'/></a>
</div>
<style type="text/css">
/* ---------Masdabang.blogspot.com----------- */
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ZN5qmPA9x9dx0HUK0F_63p6ZS1UHDbGOcLzfgePJvg29dHo8B9IDwGDm9dMQHzvbKUr5xm8eg1NVQPLXLOqG2YAjOgaBVkRgRdd588JS5L9eW3EwdesyEaiwIZdnogY-DrixPJTn9b0/s1600/pink.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<div id="Bt-searchbox">
<form id="Bt-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>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcFTbaNMdEDQGZq11hLkMLMcOagdzMSFA0gjEPUMI1IvbdXknPQ6q-DPcH9hk7ms91cO1u1ZpSFqpliPXCH0Naqic_gEAnvELil-DpmX723sY4QvTex6vTgTjxTKj6_gr7h_XzuUl6JmE/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaL-0zps2HlcZZXASPdY1hI1Yj0u_RCYiEqXV_8xvDjDokwBjB4OzBW1gUp0Fao9vj4OJJ4tY9es5_q_eA6l552FOdkGhdmxX8omW6NiX8UL_tVvUPpujKQUMbqf0YTpL3gfpC47qKU28/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbm3zQXTEcbCAco0lmdJ22BVuXzLS7ASPaXA9-MEfwc4WUVV6MnMzWVVwGrApe2Vg6xAVaW1lR_M_kiyzWEnQld7vI0FsHp6AhonFjgjqF16D1lekrAlNge84klSzWierfWMO31Aq6u8/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOlFrTwt2KAh9RnjsaQzIsvCKVhQuVRJ8aK-B8AlUfEIOfMTXOMb43jF0wuwDx52hsN6cjEcfoX5d_p5FiRDMvM_jus1PTmVzsP3RVJJ0Ga2S48nSIOhfRoadbxOQgcq4Rl61y1e28Eg/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqmaCgyZ99NJIlVSUc8LgEJAq2sqCU4GW3bkg5HdNu2AvytmWbXnfSzYicPVBR7xQc8ITvQJgI_fwRu_GvhWny4TTm8MModdzrc9qOqdtUbuKFhCOeVFQRel1AhhM8JUHrLMEKS2VYSI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZ3DXte09XN36yCtlB28Xaoosn_pFaRQCJGq-v2lAwHVD6iHLNSDPc9YuYOK-z_bsYG6EvNRoTpWDlq2z_o1qcU94leulgXgS0l588cubRLwjZzRVGLVOA_Bdndp6y6OM6Vdr-H53hsI/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTe6nQequr98NuTejAr-fIAPiawOMkWd8oBTJz8hHvYqBOkrQH4xDpF1vKVd0P_ztlUcorjPhYJnksGxwHbKMYF8ElOrgk-q0gs-LGPKtZ4OffCeBc_cTp_EVqLfTvfV0MOnql6hVwn1Q/s1600/image.png' target='_blank'/></a>
</div>
<style type="text/css">
/* ---------Masdabang.blogspot.com----------- */
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc30MWOvIl4qLibe_ByZOrp_uyKOupvLM4J_zyzBTXvkumBYWw14kNVkHL8IC4VNeuXv_eSq9EllZ8xoQp5LoOc-RjvHo9tAv1HMqQ0oN4pVMmtsgAes8VcasPr-2oQ5cwUB1-eaNheWc/s1600/orange.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<div id="Bt-searchbox">
<form id="Bt-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>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcFTbaNMdEDQGZq11hLkMLMcOagdzMSFA0gjEPUMI1IvbdXknPQ6q-DPcH9hk7ms91cO1u1ZpSFqpliPXCH0Naqic_gEAnvELil-DpmX723sY4QvTex6vTgTjxTKj6_gr7h_XzuUl6JmE/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaL-0zps2HlcZZXASPdY1hI1Yj0u_RCYiEqXV_8xvDjDokwBjB4OzBW1gUp0Fao9vj4OJJ4tY9es5_q_eA6l552FOdkGhdmxX8omW6NiX8UL_tVvUPpujKQUMbqf0YTpL3gfpC47qKU28/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbm3zQXTEcbCAco0lmdJ22BVuXzLS7ASPaXA9-MEfwc4WUVV6MnMzWVVwGrApe2Vg6xAVaW1lR_M_kiyzWEnQld7vI0FsHp6AhonFjgjqF16D1lekrAlNge84klSzWierfWMO31Aq6u8/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOlFrTwt2KAh9RnjsaQzIsvCKVhQuVRJ8aK-B8AlUfEIOfMTXOMb43jF0wuwDx52hsN6cjEcfoX5d_p5FiRDMvM_jus1PTmVzsP3RVJJ0Ga2S48nSIOhfRoadbxOQgcq4Rl61y1e28Eg/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqmaCgyZ99NJIlVSUc8LgEJAq2sqCU4GW3bkg5HdNu2AvytmWbXnfSzYicPVBR7xQc8ITvQJgI_fwRu_GvhWny4TTm8MModdzrc9qOqdtUbuKFhCOeVFQRel1AhhM8JUHrLMEKS2VYSI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZ3DXte09XN36yCtlB28Xaoosn_pFaRQCJGq-v2lAwHVD6iHLNSDPc9YuYOK-z_bsYG6EvNRoTpWDlq2z_o1qcU94leulgXgS0l588cubRLwjZzRVGLVOA_Bdndp6y6OM6Vdr-H53hsI/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTe6nQequr98NuTejAr-fIAPiawOMkWd8oBTJz8hHvYqBOkrQH4xDpF1vKVd0P_ztlUcorjPhYJnksGxwHbKMYF8ElOrgk-q0gs-LGPKtZ4OffCeBc_cTp_EVqLfTvfV0MOnql6hVwn1Q/s1600/image.png' target='_blank'/></a>
</div>
<style type="text/css">Catatan :
/* ---------Masdabang.blogspot.com----------- */
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7TsE04R6vFQCQ6efjR-mZxkPC4wh5tAWwjgPpgY55GYaISbhyk2j91FprkYlpk4tfshyphenhyphenyM7VqlVowl86386INnBA-sqIc50L-GoxC_Mg0t8J13XzC1uJXy4PLtq6Ykl4TCZa3L7yAIcA/s1600/black.png) no-repeat scroll center center transparent;width:290px;height:80px;display:block;border:1px solid #000000;}
form#Bt-searchform{display: block;padding: 10px 12px;margin:0;}
form#Bt-searchform #s{padding: 6px;margin-left:7px;width: 235px;font-size:14px;color:#000000;vertical-align: top;border:none;background:transparent;}
form#Bt-searchform #sbutton{margin-left:215px;margin-top: -30px;padding:0;height:30px;width:60px;vertical-align: top;border:none;background:transparent;}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}
.social-connect-widget img:hover{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<div id="Bt-searchbox">
<form id="Bt-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>
<div class='social-connect-widget' style='margin-top:-30px;margin-bottom:10px;margin-left:15px;'>
<a href='http://twitter.com/username'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcFTbaNMdEDQGZq11hLkMLMcOagdzMSFA0gjEPUMI1IvbdXknPQ6q-DPcH9hk7ms91cO1u1ZpSFqpliPXCH0Naqic_gEAnvELil-DpmX723sY4QvTex6vTgTjxTKj6_gr7h_XzuUl6JmE/s1600/twitter.png' title='Follow Us on Twitter!'/></a>
<a href='http://facebook.com/username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaL-0zps2HlcZZXASPdY1hI1Yj0u_RCYiEqXV_8xvDjDokwBjB4OzBW1gUp0Fao9vj4OJJ4tY9es5_q_eA6l552FOdkGhdmxX8omW6NiX8UL_tVvUPpujKQUMbqf0YTpL3gfpC47qKU28/s1600/facebook.png' title='Be Our Fan'/></a>
<a href='http://stumbleupon.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHbm3zQXTEcbCAco0lmdJ22BVuXzLS7ASPaXA9-MEfwc4WUVV6MnMzWVVwGrApe2Vg6xAVaW1lR_M_kiyzWEnQld7vI0FsHp6AhonFjgjqF16D1lekrAlNge84klSzWierfWMO31Aq6u8/s1600/stumbleupon.png' title='Follow Us'/></a><a href='https://plus.google.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVOlFrTwt2KAh9RnjsaQzIsvCKVhQuVRJ8aK-B8AlUfEIOfMTXOMb43jF0wuwDx52hsN6cjEcfoX5d_p5FiRDMvM_jus1PTmVzsP3RVJJ0Ga2S48nSIOhfRoadbxOQgcq4Rl61y1e28Eg/s1600/google.png' title='Follow Us'/></a>
<a href='http://digg.com/Username'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDqmaCgyZ99NJIlVSUc8LgEJAq2sqCU4GW3bkg5HdNu2AvytmWbXnfSzYicPVBR7xQc8ITvQJgI_fwRu_GvhWny4TTm8MModdzrc9qOqdtUbuKFhCOeVFQRel1AhhM8JUHrLMEKS2VYSI/s1600/digg.png' title='Follow Us'/></a>
<a href='http://feeds.feedburner.com/feedname'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZ3DXte09XN36yCtlB28Xaoosn_pFaRQCJGq-v2lAwHVD6iHLNSDPc9YuYOK-z_bsYG6EvNRoTpWDlq2z_o1qcU94leulgXgS0l588cubRLwjZzRVGLVOA_Bdndp6y6OM6Vdr-H53hsI/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTe6nQequr98NuTejAr-fIAPiawOMkWd8oBTJz8hHvYqBOkrQH4xDpF1vKVd0P_ztlUcorjPhYJnksGxwHbKMYF8ElOrgk-q0gs-LGPKtZ4OffCeBc_cTp_EVqLfTvfV0MOnql6hVwn1Q/s1600/image.png' target='_blank'/></a>
</div>
Ganti USERNAME dengan Twitter User name.
Ganti USERNAME dengan faceook User name.
Ganti USERNAME dengan stumbleupon User name.
Ganti USERNAME dengan digg User name.
Ganti FEEDNAME dengan feedburner name.
COMMENTS