Cara Memasang Widget Sharing Dengan Tampilan Keren

Cara Memasang Widget Sharing Dengan Tampilan Keren - Beberapa hari yang lalu salah satu dari sobat setia pembaca blog Mashasih merequest permintaannya tentang bagaimana cara membuat widget sharing is sexy di blog. Untuk itu guna memenuhi request sobat pembaca tersebut, dalam postingan kali ini saya akan memberikan tutorial tentang hal tersebut, yaitu cara membuat widget sharing is sexy tepat di atas kotak subscribe (langganan) email di bawah postingan seperti pada blog doodey ini.

Jika sobat melihat langsung di bawah postingan artikel ini, terdapat kotak subscribe email yang di atasnya terpasang widget sharing is sexy seperti yang dimaksud. Tampilannya begitu simple dan tentunya juga sangat irit tempat. Sangat efektif bukan?!

Langsung saja, berikut adalah tutorial cara membuat widget sharing is sexy :

Silakan sobat tuju dulu ke halaman Edit HTML, lalu pastekan kode di bawah ini tepat sebelum Tag/kode ]]></b:skin>

div.sexy-bookmarks { height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat left bottom;position:relative; width:540px }

div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://img709.imageshack.us/img709/57/sharing.png) no-repeat right bottom; position:absolute; right:-17px }

div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }

div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important }

div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://img406.imageshack.us/img406/9198/sexyy.png) no-repeat !important }

.sexy-furl { background-position:-300px top !important }

.sexy-furl:hover { background-position:-300px bottom !important }

.sexy-digg { background-position:-500px top !important }

.sexy-digg:hover { background-position:-500px bottom !important }

.sexy-reddit { background-position:-100px top !important }

.sexy-reddit:hover { background-position:-100px bottom !important }

.sexy-stumble { background-position:-50px top !important }

.sexy-stumble:hover { background-position:-50px bottom !important }

.sexy-delicious { background-position:left top !important }

.sexy-delicious:hover { background-position:left bottom !important }

.sexy-yahoo { background-position:-650px top !important }

.sexy-yahoo:hover { background-position:-650px bottom !important }

.sexy-blinklist { background-position:-600px top !important }

.sexy-blinklist:hover { background-position:-600px bottom !important }

.sexy-technorati { background-position:-700px top !important }

.sexy-technorati:hover { background-position:-700px bottom !important }

.sexy-myspace { background-position:-200px top !important }

.sexy-myspace:hover { background-position:-200px bottom !important }

.sexy-twitter { background-position:-350px top !important }

.sexy-twitter:hover { background-position:-350px bottom !important }

.sexy-facebook { background-position:-450px top !important }

.sexy-facebook:hover { background-position:-450px bottom !important }

.sexy-mixx { background-position:-250px top !important }

.sexy-mixx:hover { background-position:-250px bottom !important }

.sexy-script-style { background-position:-400px top !important }

.sexy-script-style:hover { background-position:-400px bottom !important }

.sexy-designfloat { background-position:-550px top !important }

.sexy-designfloat:hover { background-position:-550px bottom !important }

.sexy-syndicate { background-position:-150px top !important }

.sexy-syndicate:hover { background-position:-150px bottom !important }

.sexy-email { background-position:-753px top !important }

.sexy-email:hover { background-position:-753px bottom !important }

Lalu cari kode <data:post.body/>

Jika sobat sudah menggunakan read more Otomatis, maka akan terdapat 2 kode <data:post.body/>. Letakkan kode dibawah ini setelah kode <data:post.body/> yang pertama

<div class='sexy-bookmarks'>

<ul class='socials'>

<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/miscah' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>

<span class='sexy-rightside'/></div>

Kemudian Simpan Template.


Lalu bagaimana cara membuat kotak Admin? Baca Di Cara Memasang Widget Blog Kotak Admin Dibawah Posting

Read More

Cara Memasang Widget Blog Kotak Admin Dibawah Posting

Cara Memasang Widget Blog Kotak Admin Dibawah Posting  - Banyak cara untuk membuat tampilan blog menjadi lebih baik dan komunikatif. Salah satunya adalah dengan membuat/memasang kotak admin dibawah postingan yang berisikan keterangan dari Penulis/Author blog tersebut tentang artikel yang ditulisnya. Ulasan yang dibuat di kotak keterangan dari admin (penulis/author)ini terserah pada kreasi masing-masing. Sobat blogger bisa juga menuliskan kata-kata lucu didalamnya. Yang jelas untuk link nama penulis/author, judul posting dan tanggal publish postingan sudah saya sertakan dalam script widget kotak admin ini, sehingga sobat tidak perlu lagi mengisikan linknya secara manual. Sobat dapat melihat langsung contoh kotak admin (about author box) yang saya pasang dibawah postingan blog ini sebagai demo-nya.

Cara Membuat Kotak Admin Di Blogspot :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan >> Edit HTML, centang Expand template widget.

3.       Cari kode <div class='post-footer'> pada template.

4.   Copy  script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.

<!-- Kotak Admin -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='admin-tulisan'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>

<div class='kontainer'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26V0CxCztTBh8qZ2q3J5gLsKKO-0h__WG19SYie2EQalINzhlzTiyS8vS47f3n1auTK6o2q1tgBxwutnGL9SFjcPu4doCjXVV4XqxfZLV1WCF3ZglRs7p5rXXD8JdfiZ-iddViIwFaNg/s220/AVATAR+KU-128.jpg'/>

Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

5.       Kemudian cari lagi kode ]]></b:skin>pada template sobat.

6.      Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

.admin-tulisan{

display:block;

width:auto;

background:#CFE2E0;

border:2px solid #fff;

box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;

padding:0;

margin:30px 0 10px 0;

font:normal 12px Arial, Sans-Serif;

color:#222;

}

.admin-tulisan .kontainer{padding:5px;}

.admin-tulisan h4{

background:#8A9C04;

border:none;

border-bottom:1px solid #699019;

color:#fff;

text-transform:normal;

text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);

font:bold 12px Arial,Sans-Serif;

padding:5px 10px;

margin:0 0 0 0;

display:block;

}

.admin-tulisan h4 a{color:#FEEA83;}

.admin-tulisan img{

width:70px;

height:70px;

margin:0 10px 0 0;

float:left;

border:1px solid #954B02;

padding:2px;

background:#C36702;

box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;

}

7.      Silahkan ganti link URL gambar profil yang berwarna merah dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kata ulasannya di notepad.

8.      Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan.

9.      Preview dulu hasil kotak admin yang dibuat. Jika editing sudah dirasa cukup, Save/Simpan template anda.

Nah sekarang kotak admin yang keren sudah nampang dibawah postingan sobat. Ayo tuangkan ide kreasi kamu untuk membuat kotak admin dibawah postingan blog sobat jadi tuambah keren lagi. Tadinya untuk Penulis/Authornya saya juga mau memakai kata-kata "Ditulis Oleh : Ayu Ting Ting yang sedang mencari alamat palsu". Namun batal karena takut diprotes ama Ayu Ting Ting yang beneran..hi..hi.

Read More

Widget Melayang/Floating Follower Google Friend Connect Twitter dan Facebook Fan Page Like Box

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Fan Page Like Box  - Inilah persembahan 3 in 1 floating widget yang menurut saya merupakan salah satu widget blogger terbaik di penghujung tahun 2011 ini. 3 buah widget melayang
yang digabung dalam 1 gadget ini merupakan sequel jilid 2 dari posting saya sebelumnya Cara Membuat Floating Facebook Like Box dimana dalam gadget ini memuat widget follower blogger (Google Friend Connect), widget update status Twitter dan widget Facebook Like Boxsekaligus !! Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like ini akan kita bedah bersama (hiks..!) dalam tips blogging kali ini.

Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :

1.   Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2.       Copy script master widget dibawah ini dan paste pada gadget.

<style type="text/css">

.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3cPW_nYFzYET78Fjhyphenhyphenu0ZMfNfHXgHHg2D9XyguAFN3khHvKkhyphenhyphenbEBkCADa-kVwrARtz56ywtlI38KsH42w6ZrLSXxj0_lqhBo-iCJ_23SNgPPUZYieDMhDgjR8wBszMR4tgUk4gBkwNn/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}

.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKYQ5B72MR3vEEAdIC6EyR6RV1e8CTBVTTpsH_adUTmEfzXfgxNI7wZIm7og8-IiM7OBp682BRHpeurvIj4GRQILYeRU6LB5vfllIyGSLSxSzlVt0XXNB9GO6ANfER9S2ZDcVZhXztGJi5/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}

.barconteblogger{margin:5px 0 0 47px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Lu_0cdgiyPUBMxzZIFTLXvp0lchO8zrWNm5QmvYLN22fPLq3aFFRdxXWzAI1V1SDsuv1RlWez7BzaMU0a2eo49nIrFx6NsI42tRbfO3YiElnxC15BYRWv6RrxsNYrGl6sWjUUDaptggI/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifqHCLwhe99Y9_kRQ7nEq93IeONVOrl4-vonrMu7hSqB_kDNj364Dizr9YX8p0ChrGOTfMKKwsR1iySD1UstgjtaYIxBypKDZsNlnAHq8niIpjeZZFmdXqjwZGi1GvJffKj-kq9VHYjZx2/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}

.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPYl95qjUYRnaq3Lxqak2t-Luv8tIapsAIkpBOdap7Fok85wIuO_bkYY0JZfv8Fqo9H_VoxF2zwuvA_ftgMUUKTyXIlrH0s_jozT5CPm2KIr73ooWxegZmvLEhvoMrToa1_k9TVuKck19l/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoIy8T1JsGAupnYPXOuH0komzhsEsIrEGP1wx2dix51UZFIDQRx2gkVqfwm2o_Lz7Vv5kFJFNwjGekQ2x4qsLtlreiTSZZHvpzKfb3VH2Lm04nsDx1fGfAnx0BexhZpfsqW1n8XBi6W0at/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">

<div class="barconteblogger">

CONTENT BLOGGER HERE

</div>

</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">

<div class="barcontetwitter">

CONTENT TWITTER HERE

</div>

</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

CONTENT FACEBOOK HERE

</div>

</div>

3.       Kustomisasi widget :

• Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.

• Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.

• Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.

4.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :

<style type="text/css">

.barrightblogger{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3cPW_nYFzYET78Fjhyphenhyphenu0ZMfNfHXgHHg2D9XyguAFN3khHvKkhyphenhyphenbEBkCADa-kVwrARtz56ywtlI38KsH42w6ZrLSXxj0_lqhBo-iCJ_23SNgPPUZYieDMhDgjR8wBszMR4tgUk4gBkwNn/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}

.barrightbloggerc{

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKYQ5B72MR3vEEAdIC6EyR6RV1e8CTBVTTpsH_adUTmEfzXfgxNI7wZIm7og8-IiM7OBp682BRHpeurvIj4GRQILYeRU6LB5vfllIyGSLSxSzlVt0XXNB9GO6ANfER9S2ZDcVZhXztGJi5/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}

.barconteblogger{margin:5px 0 0 47px}

.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8Lu_0cdgiyPUBMxzZIFTLXvp0lchO8zrWNm5QmvYLN22fPLq3aFFRdxXWzAI1V1SDsuv1RlWez7BzaMU0a2eo49nIrFx6NsI42tRbfO3YiElnxC15BYRWv6RrxsNYrGl6sWjUUDaptggI/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}

.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifqHCLwhe99Y9_kRQ7nEq93IeONVOrl4-vonrMu7hSqB_kDNj364Dizr9YX8p0ChrGOTfMKKwsR1iySD1UstgjtaYIxBypKDZsNlnAHq8niIpjeZZFmdXqjwZGi1GvJffKj-kq9VHYjZx2/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}

.barcontetwitter{margin:5px 0 0 47px}

.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPYl95qjUYRnaq3Lxqak2t-Luv8tIapsAIkpBOdap7Fok85wIuO_bkYY0JZfv8Fqo9H_VoxF2zwuvA_ftgMUUKTyXIlrH0s_jozT5CPm2KIr73ooWxegZmvLEhvoMrToa1_k9TVuKck19l/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}

.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoIy8T1JsGAupnYPXOuH0komzhsEsIrEGP1wx2dix51UZFIDQRx2gkVqfwm2o_Lz7Vv5kFJFNwjGekQ2x4qsLtlreiTSZZHvpzKfb3VH2Lm04nsDx1fGfAnx0BexhZpfsqW1n8XBi6W0at/');background-

repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}

.barcontefacebook{margin:5px 0 0 47px}

</style>

<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">

<div class="barconteblogger">

<!-- Include the Google Friend Connect javascript library. -->

<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<!-- Define the div tag where the gadget will be inserted. -->

<div id="div-5280101236238054965" style="width:225px;border:1px solid #cccccc;"></div>

<!-- Render the gadget into a div. -->

<script type="text/javascript">

var skin = {};

skin['BORDER_COLOR'] = '#cccccc';

skin['ENDCAP_BG_COLOR'] = '#ff9900';

skin['ENDCAP_TEXT_COLOR'] = '#333333';

skin['ENDCAP_LINK_COLOR'] = '#0000cc';

skin['ALTERNATE_BG_COLOR'] = '#ffffff';

skin['CONTENT_BG_COLOR'] = '#ffffff';

skin['CONTENT_LINK_COLOR'] = '#0000cc';

skin['CONTENT_TEXT_COLOR'] = '#333333';

skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';

skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';

skin['CONTENT_HEADLINE_COLOR'] = '#333333';

skin['NUMBER_ROWS'] = '5';

google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);

google.friendconnect.container.renderMembersGadget(

 { id: 'div-5280101236238054965',

   site: '13497557564014853740&#039; },

  skin);

</script>

</div>

</div>

<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">

<div class="barcontetwitter">

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script>

new TWTR.Widget({

  version: 2,

  type: 'profile',

  rpp: 2,

  interval: 30000,

  width: 220,

  height: 220,

  theme: {

    shell: {

      background: '#333333',

      color: '#ffffff'

    },

    tweets: {

      background: '#333333',

      color: '#f3f5f0',

      links: '#eb9f07'

    }

  },

  features: {

    scrollbar: true,

    loop: false,

    live: false,

    behavior: 'all'

  }

}).render().setUser('@rayhanzhampiet').start();

</script>

</div>

</div>

<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">

<div class="barcontefacebook">

<iframe allowtransparency="true" frameborder="0" scrolling="no"

src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Share-With-Irfan-Blogs/322414587773378&amp;width=24

0&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=320" style="border: none; height: 320px;

overflow: hidden; width: 240px;background: #fff;"></iframe>

</div>

</div>

5.     Kalau mau gampang sobat tinggal mengganti ID akun Google Friend Connect, Twitter dan Facebook Like milik saya yang sudah saya tandai dengan tulisan warna merah dengan ID atau kode akun milik anda.

6.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

Buat yang masih kesulitan untuk mengetahui kode ID Google Friend Connect (GFC) berikut ini tutorialnya :

1.       Login ke Google Friend Connect menggunakan akun blogger/gmail anda.

2.       Klik nama blog anda pada sidebar kiri dan pilih Add the member gadget.

3.     Anda akan dibawa ke halaman kustomisasi gadget seperti gambar dibawah ini. Lakukan kustomisasi lebar gadget, jumlah baris follower yang ingin ditampilkan, warna background, border, huruf dan lain-lain dihalaman ini.

 4.        Jika kustomisasi sudah selesai, klik tulisan Generate code pada langkah ke-3 Create the HTML code, maka kode HTML gadget follower / Google Friend Connect milik anda sudah selesai dan siap dicopy atau disimpan di notepad.

Untuk pengaturan widget update status Twitter silahkan meluncur ke halaman http://twitter.com/about/resources/widgets, sedangkan untuk Facebook Like Boxdapat sobat membuatnya dihalaman ini http://www.facebook.com/pages/create.php. Mohon maaf kalau saya tidak bisa menuliskan secara lengkap tutorial ketiganya berhubung tangan ane sudah pegel-pegel ngetiknya he he. Selamat mencoba sendiri membuat widget melayang Google Friend Connect, Twitter dan Facebook Like Box ini, jangan cepat menyerah kalau ternyata sobat gagal memasang dan melakukan pengaturan pada widget
ini. Blogger sejati tidak mengenal kata MENYERAH kecuali anda ingin menyandang gelar NEWBIE FOREVER selamanya. Selamat menyongsong Tahun Baru 2012 sahabat..!

Read More

Cara Membuat 3 Column Fotter With Style Keren Di Blog

Cara Membuat 3 Column Fotter With Style Keren Di Blog - Mungkin, Sobat Mempunyai 3 Kolom Fotter Di Blog Sobat. Dengan Untuk Mendapatkan Tampilan Yang Bagus, Sobat Harus Menambahkan Widget Yang Enak Di Pandang. Kadang-Kadang Colum Ini Dipakai Untuk Widget Pengikut Dan Yang Lainnya Seperti widget (Google Friend Connect), Recent posts, Recent comments,  Atau Iklan. Tetapi Sobat Bisa Menambahkan Beberapa Widget Lagi. Sekarang, Rizki Akan Memberitahukan Tentang Cara Membuat 3 Column Fotter With Style Di Blog Sobat, Ini Dia Turitorialnya Sob.


Turitorial Cara Membuat 3 Column Fotter With Style Di Blog

1. Log in Ke Akun Blogger Sobat
2. Pergi Design --> Edit HTML
3. Copas Kode Di Bawah Ini, Dan Simpan Sebelum Tag/Kode ]]></b:skin>

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word;
       overflow: hidden;
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
      margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

 

=> Ubah Yang Berwarna Merah Dengan Warna Backaground Yang Sobat Inginkan => Ubah Yang Berwarna Biru Dengan Lebar Widget Yang Sobat Inginka. => Ubah Yang Berwarna Hijau Warna Yang Sobat Inginka. => Ubah Yang Berwarna => Ubah Yang Berwarna Biru Langit Dengan Ukuran Text dan Font Yang Sobat Inginkan => Ubah Yang Berwarna Ungu Untuk Tampilan dan Warna Judul Border Yang Sobat Inginka
=> Ubah Yang Berwarna Pink Dengan Ukuran, Tampilam Dan Warna Links Border.

4. Kemudian copy code Dibawah ini, Dan Simpan Sebelum Tag/Kode </body>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>

 

5. Kemudian Save Template. Check Di Design --> Page Elements


Semoga Berhasil : Cara Membuat 3 Column Fotter With Style Di Blog

Read More

Cara Merubah Foto Pengguna Anonymous Di Blogger

Cara Merubah Foto Pengguna Anonymous Di Blogger - Hi Sobat! Sekarang, Rizki Akan Menshare Tentang Bagaimana Cara Membuat Avatar Untuk Komentar Anonim. Kadang-Kadang, Seseorang Berkomentar Ke Blog Sobat, Tetapi Dia Memilih Pengguna/Account "Anonymous" Di Dalam Kotak Komentar. Komentar Tersebut Terlihat, Tetapi Foto Pengguna Anonim Menggunakan Foto Anonim Default Blogger. Tidak Masalah. Sobat Bisa Merubah Foto Anonim itu. Bagaimana Caranya? Mudah Caranya Sobat Tinggal Mengikuti Turitorial Langkah-Langkah Untuk Cara Merubah Foto Pengguna Anonim Di Blogger.



 Turitorial Cara Merubah Foto Pengguna Anonymous Di Blogger
1. Log in Ke Akun Blogger Sobat
2. Pergi Ke Design --> Edit HTML
3. Copas Kode Di Bawah Ini Diataa Tag/Kode ]]></b:skin>

.avatar-image-container { background: url
("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_A9O3326mGqrZRN8mHmMhvXy7zYWGO-ZxEYYNA5INz3w5AX3ACpvEYo8AdirgENks5WXATpJiRRfXSXKULaqYy3Cs6gyrnzai4nFDPtrIJ91z6bJapMGlDDCDabMnjpeIzkKEdMFOYKA/s1600/avatar.png")
 no-repeat scroll center center;}

=> Ganti Text Yang Berwarna Merah Dengan Url Gambar Sobat
4. Kemudian klik SAVE TEMPLATE

Semoga Berhasil Dengan : Cara Merubah Foto Pengguna Anonymous Di Blogger

Read More

Cara Memata-matai/Mengetahui Detail Blog Seseorang/Orang Lain

Cara Memata-matai/Mengetahui Detail Blog Seseorang/Orang Lain - Hi! Kali Ini Rizki Punya Berita Merarik nih, Apakah Sobat Pernah Berpikir Untuk Memata-matai Blog Seseorang/Orang Lain. Bagaimana Cara Mengetahuinya? iya, Sangat Mudah Sekali Sobat Tinggal Melihat Widget Counter Seperti Histats, Geocuounter, ShinyStats. Tetapi Sobat Bisa Mengetahuinya Dengan Lengkap Seperti Berapa Banyak Visitor, Page Views, Alexa Rank, Blogger Stats, Dan Lain-lain. Coba Saja Pergi Ke CheckSiteTraffic.com. Ini Adalah Situs Untuk Mengetahui :

• Website Title
• Website Description
• Categories
• Traffic Data
• Alexa Rank Trend
• Google Trend
• Server Information
• Server Physical Location
• Contact Information
• Whois Domain Information

Banyak Bukan? Sekarang Sobat Bisa Mengetahui Dari Suatu Blog Yang Sobat Tidak Ketahui. Dengan Mengikuti Langkah- Langkahnya Sobat Dapat Mengetahuinya.


Langkah-Langkahnya
1. Pergi Ke CheckSiteTraffic.com
2. Enter a blog address, dan Klik Spy!

3. Selesai Deh! Mudah Bukan?

OK, that's all friends... Hopefully useful....Hahahahaha..........

Semoga Berhasil Dengan :  Cara Memata-matai/Mengetahui Detail Blog Seseorang/Orang Lain

Read More

Cara Membuat Widget Preloader Status Loading Keren Di Blog

Cara Membuat Widget  Preloader Status Loading Keren Di Blog - Sebelumnya, Rizki Pernah Menshare Cara Membuat Status Loading Di Blog. tetapi Pengunjung Berkomentar Karena Widget Yang Saya Share Sebelumnya Tidak Bekerja. Jadi Rizki Menghapusnya Dan Menggantikannya Dengan Postingan Ini. Sekarang Rizki Akan Menggantikan Widget Tersebut Dengan Widget Preloader Loading Status Yang Lebih Keren Dan Bagus. Sobat Hanya Perlu Mengikuti Langka-Langkah Cara Membuat Widget Preloader Status Loading Di Blog.



 Turitorial Cara Membuat Widget  Preloader Status Loading Keren Di Blog
1. Log in Ke Akun Blogger Sobat
2. Pergi Ke Design --> Edit HTML
3. Copas Kode Dibawah Ini, Sebelum Tag/Kode </head>

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>

4. Kemudian Cari Kode </body> Dan Simpan Kode Di Bawah Ini sebelum Tag/Kode </body>

<script>
    QueryLoader.selectorPreload = &quot;body&quot;;
    QueryLoader.init();
</script>

5. Kemudian, Cari Kode ]]></b:skin>, Dan Simpan Kode Di Bawah Ini sebelum Tag/Kode ]]></b:skin>

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

Pengaturan :
=> #000000 Ganti Dengan Kode Warna Yang DiInginkan Klik Disini Untuk Mengetahui Kode Warna
=> #CCCCCC Ganti Dengan Warna Bar Yang Sobat Inginkan
=> #FF530D Ganti Dengan Warna Text Loading Yang Sobat Inginkan

6.Ok, Sekarang Klik  Save Template



Semoga Berhasil Dengan : Cara Membuat Widget  Preloader Status Loading Keren Di Blog

Read More

Cara Membuat Kolum Label Keren Dengan Thumbnail Dan Sumarry

Cara Membuat Kolum Label Keren Dengan Thumbnail Dan Sumarry - Finally, Rizki Menemukan Trick Yang Bagus Untuk DiShare Ke Sobat. Rizki Akan Menshare Tentang Bagaimana Cara Membuat Label Artikel Blog Dengan Thumbnail Sumarry. Ini Adalah Tricks Untuk Sobat Supaya Bisa Memperlihatkan Kepada Para Pengunjung Posting Dengan Label Blog Sobat. Hasilnya Jadi Pengunjung Yang Masuk Ke bLog Sobat Dapat Memilih Beberapa Kategori Label Sobat Dengan Mudah Dan Jelas. Sobat Yang Tertarik Untuk Memiliki Widget Ini Di Blog Sobat Silahkan ikuti Turitorial Langkah-langkah Cara Membuat Kolum Label Keren Untuk Blog Sobat.

Turitorial Cara Membuat Kolum Label Keren Dengan Thumbnail Dan Sumarry
1. Log in Ke Akun Blogger Sobat
2. Pergi Ke Design --> Edit HTML
3. Kemudian Centang "Expand Widget Templates" box
4. Copas Kode Di bawah Ini, Sebelum Tag/Kode  ]]></b:skin>

/*** Featured Categories ***/
     img.label_thumb{
        float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
     img.label_thumb:hover{
background:#f7f6f6;
}
     .label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
     ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
    .label_with_thumbs a {}
    .label_with_thumbs strong {}

5. Sesudah Itu, Copas Kode Di Bawah Ini Sebelum Tag/Kode </head>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaV6wbAQoCfLlZOQfHNHwCjPIz3I_NpmB92AnwAEQIScx_Q0vXqjpYcT6SRlzNk5StzB3D5gWv2QaCq3p0ZP_MYPovZ7yQ3TXnGujuP7B6wCOpnuUJusFzBHIeTQbvlL_AeIeJIKo_RlD6/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

6. Ok, Kemudian Save Template


Semoga Berhasil Dengan : Cara Membuat Kolum Label Keren Dengan Thumbnail Dan Sumarry

Read More

Widget Glowing Navigation Menu Dengan JQuery Untuk Blogger

Widget Glowing Navigation Menu Dengan JQuery Untuk Blogger - Hi Sobat! Kali Ini Rizki Akan Menshare Tentang Bagaimana Cara Membuat Widget Glowing Navigation Dengan Menggunakan JQuery Untuk Blogger. 
Sobat Pasti Sudah Tahu Kan Apa Artinya Navigation Menu, Jadi Rizki Tidak Perlu Menjelaskannya. Untuk Demo Klik Disini. Ok guys kita Mulai Cara Membuat Widget Glowing Navigation Menu, Ini dia Turitorialnya :



Turitorial Cara Membuat Glowing Navigation Dengan Menggunakan JQuery :
1. Log in Ke Akun blogger 
2. Go to Design --> Editt HTML
3. Copy Kode Di bawah, dan letakan Sebelum TAG ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}

4. Sesudah itu Copas Kode Dibawah Ini,dan Letakan Sebelum Tag </head>

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery-1.2.3.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

5. Click SAVE TEMPLATE
6. Sekarang, Pergi Ke Design --> Page Elements --> Add Gadget,  Pilih "HTML/Java Script"

7. Sesudah itu, Copy Kode Di bawah dan Letakan di "HTML/Java Script"

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='#' title='Home'>Home</a></li>
<li id='kwick2'><a href='#' title='Contents'>Blog</a></li>
<li id='kwick3'><a href='#' title='About'>About</a></li>
<li id='kwick4'><a href='#' title='Futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='Contact us'>Contact</a></li>
<li id='kwick6'><a href='#' title='Recomended links'>Resource</a></li>
</ul>
</div>
</td>
<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

=> Ganti tanda # Dengan Url Yang Sobat Inginkan
8. Click SAVE 

SEMOGA BERHASIL : CARA MEMBUAT WIDGET GLOWING NAVIGATION MENU DENGAN JQUERY UNTUK BLOGGER

Read More

Cara Membuat Widget Kotak Pencarian Google Dengan Tampilan Keren

Cara Membuat Widget Pencarian Google Dengan Tampilan Keren - Kali Ini Rizki Akan Memberikan Turitorial Bagaimana Cara Membuat Widget Search Box Google Dengan Tampilan Baru Dan Keren. Kenapa Dikatakan Tampilan Baru Dan Keren? Karena Google Sekarang Telah Memperbaharui Widget Kotak Pencarian Dengan Kerennnn Banget Sob Lihat aja

Google Search Box

 For Blogger

Keren Kan! Ok Sekarang Kita Mulai Cara Membuat Widget Google Search Box Untuk Blogger, Ini Turitorialnya Sob. Untuk DEMO Klik Disini

Turitorial Cara Membuat Widget Pencarian Dengan Tampilan Baru dan Keren
1. Login Ke Akun Blogger Anda
2. Pilih Menu Design Lalu Pilih Edit HTML
3. Untuk Bejaga-jaga Download Template Blogmu
4. Lalu Klik Expand Widget Templates
5. Copas Kode Di Bawah ini Sebelum ]]></b:skin>, Supaya Cepat Gunakan CTRL+F

/* div container containing the form */
#searchContainer {
margin:20px;
}

/* Style the search input field. */
#field {
float:left;
width:200px;
height:27px;
line-height:27px;
text-indent:10px;
font-family:arial, sans-serif;
font-size:1em;
color:#333;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-right:none;
}

/* Style the "X" text button next to the search input field */
#delete {
float:left;
width:16px;
height:29px;
line-height:27px;
margin-right:15px;
padding:0 10px 0 10px;
font-family: "Lucida Sans", "Lucida Sans Unicode",sans-serif;
font-size:22px;
background: #fff;
border:solid 1px #d9d9d9;
border-top:solid 1px #c0c0c0;
border-left:none;
}
/* Set default state of "X" and hide it */
#delete #x {
color:#A1B9ED;
cursor:pointer;
display:none;
}
/* Set the hover state of "X" */
#delete #x:hover {
color:#36c;
}
/* Syle the search button. Settings of line-height, font-size, text-indent used to hide submit value in IE */
#submit {
cursor:pointer;
width:70px;
height: 31px;
line-height:0;
font-size:0;
text-indent:-999px;
color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLL9cocdOOOm_CNCCrolxZIlTi6hUmcrjiKr-Xt3dRuRchPq55fVDzPHlJ0x7b3OOzi3jmZpYOJHfmT4vHbFCZu-uIlQkMCzkccQsOUJeObfMRLkXqVoXy4ayfRG5HYQ1Q_I-8novIuxf/s1600/ico-search.png) no-repeat #4d90fe center;
border: 1px solid #3079ED;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
/* Style the search button hover state */
#submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLL9cocdOOOm_CNCCrolxZIlTi6hUmcrjiKr-Xt3dRuRchPq55fVDzPHlJ0x7b3OOzi3jmZpYOJHfmT4vHbFCZu-uIlQkMCzkccQsOUJeObfMRLkXqVoXy4ayfRG5HYQ1Q_I-8novIuxf/s1600/ico-search.png) no-repeat center #357AE8;
border: 1px solid #2F5BB7;
}
/* Clear floats */
.fclear {clear:both}

=>Ganti Yang Warna Biru Sesuai Dengan Ukuran Lebar Yang Anda Inginka

6. Copas Kode Di Bawah Ini Sebelum Tag </head>, Supaya Cepat Gunakan CTRL+F

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script type='text/javascript'>
$().ready(function() {
// if text input field value is not empty show the &quot;X&quot; button
$(&quot;#field&quot;).keyup(function() {
$(&quot;#x&quot;).fadeIn();
if ($.trim($(&quot;#field&quot;).val()) == &quot;&quot;) {
$(&quot;#x&quot;).fadeOut();
}
});
// on click of &quot;X&quot;, delete input field value and hide &quot;X&quot;
$(&quot;#x&quot;).click(function() {
$(&quot;#field&quot;).val(&quot;&quot;);
$(this).hide();
});
});
</script>

7. Kemudian Save Template

8. Lalu Tambahkan Script Kode Search Box Google di:
a. Pergi Ke Design Lalu Klik Page Element Kemudian Add Gadget
b. Pilih HTML/JavaScript
c. Lalu Copas Kode Di Bawah Ini Ke Dalamnya

<div id="searchContainer">
<form name="SUYB" action="/search" method="get">
<input type="text" id="field" id="s" name="q"/>
<div id="delete"><span id="x">x</span></div>
<input type="submit" name="submit" id="submit" value="Search" />
</form>
</div>

 d. Klik Save

Nah Itulah Cara Membuat Widget Pencarian Google Dengan Tampilan Keren dan Baru.

SEMOGA BERHASIL

Read More