Kotak Pencarian Bertombol Sosial Media

Setelah mengetahui dan merasakan langsung kekuatan dari Social Media seperti Facebook, Twitter, dan lain-lain maka tidak salah bila anda menerapkan tombol sharing Social Media ini dengan kotak pendarian di blog anda. Sangat menarik bukan?! Simak tutorialnya berikut ini.

• Masuk ke akun blogger, lalu klik Layout - Add Gadget - HTML/javascript

• Lalu masukkan kode berikut:

Kode Style 1

Scriptnya :

<style type="text/css">
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7hp7rsFgN3T7-iHMBXK2RS71QfdhlhvcnhTqX4rsuXxvk-HNO6kDCM_tRq7p0IdT1yMPFHNAxE5OD7WiB12m9WbTYJodhU14p4pwQnS8z9yng7hlSVc_5V88J27GgNEIIYofH_QZrrNI/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/AVvXsEjXpfyOuhjc4pZUrFxflva82sBit64CE3ggaD3SSSTp8r_WrRjoC7bYvmqaUQd16WepcLgmnYAVF9sibZ4xfBKvzutTLKURZ4hc3CzEIdWq0cY6O7rTIM9c4ccMKFNCISAF4J8dfjWRSVU/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/AVvXsEgbRbDZB7Ci2ur_nGzhDPuPUIt7_fy2LBnj6ca3XRCftVDRXwWqGaTpQcqRzh3A1zVVwE3M2y-1zJAz3SbKUDbNX7suJtrLc5ZNIPg1AEHWAFAYzpEM8Knu-o-KQs4VuXDXj6JmGddcAag/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/AVvXsEiZ0IliGKfJ0skjWvOWMLUBWpIFTQiX2tT_DEb_POc8-_LnQSRB0sAsaHFi_slOeVeOqpnnfZkYw3D56dFME_d6wYKhkjgfKhCevU_iYo6rNu-pxXDlMDGxxqEg7QH5xcB7u6NZkDRBJzw/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/AVvXsEjGbdftPRBjpAC2E4MXLgQkHtrhhMYee-NY7pIUBWF-huOCajahnIrZQ7FkFgE2QBLWtUmGcYzesi1pf1kdz-wx2BSa3RmSjDI2bkl3jVrnGRGnXLg5rsWTF8ETDUn5PjmZPOdISXCVzlQ/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/AVvXsEglvgKsmlL7SxHlq2IzkTE6T4_jUKL2CcD-SHdmLMaxqXW-7ObKTRYSdAmQe96VQvASxEoZtHOu2g72M63_a3H787n-kYWPID4B3y2hnuMW0v8s966J7jtCgweOb_ooi1XJrJBGHgCaAKY/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/AVvXsEhezcKAi3gUMNeglwl3F5UZzjCk_zNfOd5qhwZjWexm1afJ5K0JNvoYcczgLULs_jv6McESTJ1QoHR6k0IPfrasd7kIO4cnKBrDDumuhwsuE7VoM5aTy_7yFeZZZoh4vnf6zMdbLENiVdk/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lTLdkxfTJyvSIfIEJDT4PZvaLTcTHbP6tI4nk8DzyrPaOyLbvoS4xJDBLnTgFwEK76Ten-ufLBzgTx3upafiJ_8j22ZcDn7fSrEa6crP7Z3FLApbtFSMH9rvY_4lBzSMlGlr_jeb9uI/s1600/image.png' target='_blank'/></a>
</div>

Kode Style 2

Scriptnya :

<style type="text/css">
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFGS68lScOLiHryQlMSDrpQUEr6mU8g8FQti9YzMdbwWWvVIlAKIozFZSG4kZBDGgijPCaVcRR4k33NCUeNjZ2B2PwazyJgXVu7aVpv27y0kR5jAOvNgfghb8NV5iFW0A0PKv3oNaCUA/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/AVvXsEjXpfyOuhjc4pZUrFxflva82sBit64CE3ggaD3SSSTp8r_WrRjoC7bYvmqaUQd16WepcLgmnYAVF9sibZ4xfBKvzutTLKURZ4hc3CzEIdWq0cY6O7rTIM9c4ccMKFNCISAF4J8dfjWRSVU/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/AVvXsEgbRbDZB7Ci2ur_nGzhDPuPUIt7_fy2LBnj6ca3XRCftVDRXwWqGaTpQcqRzh3A1zVVwE3M2y-1zJAz3SbKUDbNX7suJtrLc5ZNIPg1AEHWAFAYzpEM8Knu-o-KQs4VuXDXj6JmGddcAag/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/AVvXsEiZ0IliGKfJ0skjWvOWMLUBWpIFTQiX2tT_DEb_POc8-_LnQSRB0sAsaHFi_slOeVeOqpnnfZkYw3D56dFME_d6wYKhkjgfKhCevU_iYo6rNu-pxXDlMDGxxqEg7QH5xcB7u6NZkDRBJzw/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/AVvXsEjGbdftPRBjpAC2E4MXLgQkHtrhhMYee-NY7pIUBWF-huOCajahnIrZQ7FkFgE2QBLWtUmGcYzesi1pf1kdz-wx2BSa3RmSjDI2bkl3jVrnGRGnXLg5rsWTF8ETDUn5PjmZPOdISXCVzlQ/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/AVvXsEglvgKsmlL7SxHlq2IzkTE6T4_jUKL2CcD-SHdmLMaxqXW-7ObKTRYSdAmQe96VQvASxEoZtHOu2g72M63_a3H787n-kYWPID4B3y2hnuMW0v8s966J7jtCgweOb_ooi1XJrJBGHgCaAKY/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/AVvXsEhezcKAi3gUMNeglwl3F5UZzjCk_zNfOd5qhwZjWexm1afJ5K0JNvoYcczgLULs_jv6McESTJ1QoHR6k0IPfrasd7kIO4cnKBrDDumuhwsuE7VoM5aTy_7yFeZZZoh4vnf6zMdbLENiVdk/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lTLdkxfTJyvSIfIEJDT4PZvaLTcTHbP6tI4nk8DzyrPaOyLbvoS4xJDBLnTgFwEK76Ten-ufLBzgTx3upafiJ_8j22ZcDn7fSrEa6crP7Z3FLApbtFSMH9rvY_4lBzSMlGlr_jeb9uI/s1600/image.png' target='_blank'/></a>
</div>

Kode Style 3

Scriptnya :

<style type="text/css">
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicLUwEQ7luo4c2Y2iTJWylJ0o2CqSiv1RM5exnfGhII-4fgwun334cnZz53fiqOf3Jr4p9IqtexcMRJkqnemIGPHO4Cp_bLvRdgF5uNo-KDMc-WU8_eupu7b8WF2dnOiVPNGsgPZl3pzk/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/AVvXsEjXpfyOuhjc4pZUrFxflva82sBit64CE3ggaD3SSSTp8r_WrRjoC7bYvmqaUQd16WepcLgmnYAVF9sibZ4xfBKvzutTLKURZ4hc3CzEIdWq0cY6O7rTIM9c4ccMKFNCISAF4J8dfjWRSVU/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/AVvXsEgbRbDZB7Ci2ur_nGzhDPuPUIt7_fy2LBnj6ca3XRCftVDRXwWqGaTpQcqRzh3A1zVVwE3M2y-1zJAz3SbKUDbNX7suJtrLc5ZNIPg1AEHWAFAYzpEM8Knu-o-KQs4VuXDXj6JmGddcAag/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/AVvXsEiZ0IliGKfJ0skjWvOWMLUBWpIFTQiX2tT_DEb_POc8-_LnQSRB0sAsaHFi_slOeVeOqpnnfZkYw3D56dFME_d6wYKhkjgfKhCevU_iYo6rNu-pxXDlMDGxxqEg7QH5xcB7u6NZkDRBJzw/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/AVvXsEjGbdftPRBjpAC2E4MXLgQkHtrhhMYee-NY7pIUBWF-huOCajahnIrZQ7FkFgE2QBLWtUmGcYzesi1pf1kdz-wx2BSa3RmSjDI2bkl3jVrnGRGnXLg5rsWTF8ETDUn5PjmZPOdISXCVzlQ/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/AVvXsEglvgKsmlL7SxHlq2IzkTE6T4_jUKL2CcD-SHdmLMaxqXW-7ObKTRYSdAmQe96VQvASxEoZtHOu2g72M63_a3H787n-kYWPID4B3y2hnuMW0v8s966J7jtCgweOb_ooi1XJrJBGHgCaAKY/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/AVvXsEhezcKAi3gUMNeglwl3F5UZzjCk_zNfOd5qhwZjWexm1afJ5K0JNvoYcczgLULs_jv6McESTJ1QoHR6k0IPfrasd7kIO4cnKBrDDumuhwsuE7VoM5aTy_7yFeZZZoh4vnf6zMdbLENiVdk/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lTLdkxfTJyvSIfIEJDT4PZvaLTcTHbP6tI4nk8DzyrPaOyLbvoS4xJDBLnTgFwEK76Ten-ufLBzgTx3upafiJ_8j22ZcDn7fSrEa6crP7Z3FLApbtFSMH9rvY_4lBzSMlGlr_jeb9uI/s1600/image.png' target='_blank'/></a>
</div>

Kode Style 4

Scriptnya :

<style type="text/css">
#Bt-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1Xgf9eLP-zl8iWSbTdTH_4_JWZQD_H5xRzpm-OvtKqXNIpOFjBc-bZWitr_eDqpmlUtOY7aDeWHET7E2tpoIM5mphmOAyRQzSbtbE8ulCICRjqgA9l53hKThOdtAGY2d06q5-tDXIqkA/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/AVvXsEjXpfyOuhjc4pZUrFxflva82sBit64CE3ggaD3SSSTp8r_WrRjoC7bYvmqaUQd16WepcLgmnYAVF9sibZ4xfBKvzutTLKURZ4hc3CzEIdWq0cY6O7rTIM9c4ccMKFNCISAF4J8dfjWRSVU/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/AVvXsEgbRbDZB7Ci2ur_nGzhDPuPUIt7_fy2LBnj6ca3XRCftVDRXwWqGaTpQcqRzh3A1zVVwE3M2y-1zJAz3SbKUDbNX7suJtrLc5ZNIPg1AEHWAFAYzpEM8Knu-o-KQs4VuXDXj6JmGddcAag/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/AVvXsEiZ0IliGKfJ0skjWvOWMLUBWpIFTQiX2tT_DEb_POc8-_LnQSRB0sAsaHFi_slOeVeOqpnnfZkYw3D56dFME_d6wYKhkjgfKhCevU_iYo6rNu-pxXDlMDGxxqEg7QH5xcB7u6NZkDRBJzw/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/AVvXsEjGbdftPRBjpAC2E4MXLgQkHtrhhMYee-NY7pIUBWF-huOCajahnIrZQ7FkFgE2QBLWtUmGcYzesi1pf1kdz-wx2BSa3RmSjDI2bkl3jVrnGRGnXLg5rsWTF8ETDUn5PjmZPOdISXCVzlQ/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/AVvXsEglvgKsmlL7SxHlq2IzkTE6T4_jUKL2CcD-SHdmLMaxqXW-7ObKTRYSdAmQe96VQvASxEoZtHOu2g72M63_a3H787n-kYWPID4B3y2hnuMW0v8s966J7jtCgweOb_ooi1XJrJBGHgCaAKY/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/AVvXsEhezcKAi3gUMNeglwl3F5UZzjCk_zNfOd5qhwZjWexm1afJ5K0JNvoYcczgLULs_jv6McESTJ1QoHR6k0IPfrasd7kIO4cnKBrDDumuhwsuE7VoM5aTy_7yFeZZZoh4vnf6zMdbLENiVdk/s1600/rss.png' title='RSS Feed'/></a><a href='http://www.bloggertrix.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lTLdkxfTJyvSIfIEJDT4PZvaLTcTHbP6tI4nk8DzyrPaOyLbvoS4xJDBLnTgFwEK76Ten-ufLBzgTx3upafiJ_8j22ZcDn7fSrEa6crP7Z3FLApbtFSMH9rvY_4lBzSMlGlr_jeb9uI/s1600/image.png' target='_blank'/></a>
</div>

• Silahkan ganti kode merah dengan URL anda

Demikian informasi tentang Kotak Pencarian Bertombol Sosial Media, semoga dapat bermanfaat.