Script Widget HTML Jam Lucu Di Blog

Script  Widget HTML Jam Lucu Di Blog - Jika anda memiliki blog Personal ( Pribadi ) Pati tak di pungkiri lagi jika Ingin memperidah dan mempercantik Blog Di Blogger anda. Salah satunya Adalah Blog Catatan Diri ,diskripsi atau juga sering di sebut Dear Deary Blog.

Apa anda punya blog seperti Tema Blog di atas ?, Kalo saya sendiri tidak mempunyainya karena saya lebih tergolong orang untuk umum membantu sesama Blogger dengan Tutorial Asli tulisan saya. Kebanyakan Cewek yang mempunyai Blog Seperti Kreteria Di atas.

Nah Di sini saya akan Share Tutorial cara memasang / mempercabtik Blog anda Dengan Script  Widget HTML Jam Lucu Di Blog pilihan saya. Coba Lihat Jam yang ada di bawah ini, Mungkin bagi anda biasa saja, Akan tetapi bagi saya ini sangat lucu. hehehe

<a href=http://jontor.info>Jontor Clocks</a>Code :

<embed src=http://www.swfcabin.com/swf-files/1305682786.swf quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash width=150 height=127 wmode=transparent></embed><noembed><a href=http://Jontor.info>Jontor Clocks</a></noembed>

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=http://Jontor.info&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Jontor Clocks&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Code :

<embed src="http://www.swfcabin.com/swf-files/1278357812.swf" width="120" height="120" menu="false" quality="high" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer/"></embed><noembed><a href=http://Jontor.info>Jontor Clocks</a></noembed>

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=http://jontor.info&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Jontor Clocks&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Code : 

<embed src=http://www.swfcabin.com/swf-files/1305684025.swf?ygpunya=Jontor+Blog menu=false quality=high wmode=transparent type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer /></embed><noembed><a href=http://Jontor.info>Jontor Clocks</a></noembed>

Car untuk memasang jam Lucu di atas ke blog kita juga gampang kok, yang pertama yang harus anda lakukan adalah :

1. Log in ke akun Blogger Anda
2. Pilih Design
3. Eleman Halaman

4. Klik Tambah Gadget > HTML/ jAVA Script

5. Masukan Code pilihan jam di atas,, Simpan

Selamat Otak-atik Blog menjadi tampilan yang keren..!!

Membuat Link Otomatis Saat Artikel Kita Di Copy Paste (COPAS)

Cara Membuat Sumber Link Otomatis Saat Postingan Kita di Copas / Copy Paste - beberapa hari yang lalu saya *Zams Site Share Cara Mengecek Kecepatan Blog, dam kali ini saya akan Share yang lebih istimewa lagi hehehe :D, yaitu pas saat postingan kita di copy paste oleh orang lain, nanti pas di Paste akan ada URL posting kita, waw sangat menarik bukan? mau coba? eits, bayar dulu haha, Bercanda gan, :D, ini adalah Layanan Gratis untuk kita semua, cara ini juga bisa meningkatkan Backlink blog kita, karena ada url posting kita yang di copas oleh orang lain, tetapi tidak tahu kalau yang Copas PENJAHAT hahaha, posting tu Link bakal di hapus hehe, kalau copas artikel ini tolong beri sumber ya hehe terimakasih banyak, langsung saja ketopik, Tutorial Cara membuat Link Sumber Otomatis Saat Artikel Di Copy Paste Sumber Zams Site
1. Pertama-tama masuk di halaman ini dulu : https://id.tynt.com/account/log_in
2. Klik " Publisher "

3. Lalu Isi sedikit Formulis seperti di bawah ini, jangan lupa centang " I Agree to.. "

4. Copy JavaScritp yang di berikan Tynt

5. Copykan JS (java script) di atas kode

6. Kalau anda ingin mengganti Tulisan " Readmore : " gantilah Tulisan Readmore dengan kesukaan anda, misal : Selengkapnya, Sumber Artikel, dll

7. Semoga bermanfaat Tutorial dari Zams Site

Terimakasih telah membaca Membuat Link Otomatis Saat Artikel Kita Di Copy Paste (COPAS) dan anda bisa menemukan artikel Membuat Link Otomatis Saat Artikel Kita Di Copy Paste (COPAS) ini dengan url http://zamrudblog.blogspot.com/2012/08/membuat-link-otomatis-saat-artikel-kita.htmlTerimakasih Mengunjungi Artikel Membuat Link Otomatis Saat Artikel Kita Di Copy Paste (COPAS) - Membuat Link Otomatis Saat Artikel Kita Di Copy Paste (COPAS)

Sumber : http://zamrudblog.blogspot.com/2012/08/membuat-link-otomatis-saat-artikel-kita.html#ixzz23XNafmIj

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Pagi ini saya share salah satu trik untuk mempercantik tampilan blog kita yaitu Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan. Setelah saya berhasil mengaplikasikannya pada blog saya ini, akhirnya saya berkesempatan untuk mengsharingnya untuk Anda semua. Tentunya bagi Anda yang belum tahu, bagi yang sudah tahu dan paham mohon koreksinya bila menjumpai hal yang kurang pas. Maklum saja saya belajar otodidak. Saya hanya senang dengan hal-hal yang baru, try and error sudah menjadi kebiasaan akhirnya. Dengan mencoba sesuatu hal yang baru, kita mendapat ilmu yang baru juga. Related posts ini akan bergerak ke kiri dan ke kanan dan akan berhenti ketika mouse di arahkan ke atasnya.

 

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.

 

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

 

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.

<!-- Marquee Kompiajaib Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

 

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

 

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.

Read more: http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html#ixzz1yu16aVaG

Cara Membuat Situs Web Blog Gratis di Blogspot

Cara Membuat Blog Gratis di Blogspot ---Blogspot atau blogger merupakan aplikasi blog gratis pertama yang pernah ada. Blogspot juga merupakan salah satu layanan google yang gratis untuk membuat blog. Selain itu, blogspot juga memberikan kemudahan bagi para penggunanya dalam menciptakan sebuah blog untuk berbagai keperluan. Dari blog pribadi hingga blog yang dibuat dengan tujuan bisnis sekalipun tetap diakomodasi dengan baik oleh blogspot. Wajar saja jika blogspot merupakan aplikasi blog yang paling banyak digunakan hingga saat ini.
Untuk membuat Blog Gratis di Blogspot, setidaknya dibutuhkan dua tahap hingga bisa menciptakan sebuah blog, yaitu:

• Membuat sebuah akun di blogger atau blogspot.
• Membuat blog itu sendiri di akun blogspot yang sudah dibuat.

Cara membuat Akun Blogspot (Blogger)

1. Silahkan kunjungi halaman www.blogger.com/start?hl=id yang akan menghantarkan Anda kehalaman depan blogger atau blogspot untuk membuat akun terlebih dahulu sebelum bisa membuat Blog Gratis di Blogspot.
2. Pada halaman depan blogspot tersebut ada tiga tempat untuk menuju proses pembuatan akun ataupun blog gratis nantinya. Bisa mengklik daftar pada pojok kanan atas
   atau dengan mengklik memulai diatas deretan contoh template.
   
   Namun dalam tutorial blogspot kali ini, direkomendasikan untuk memulai membuat sebuah blog Gratis di Blogspot melalui kotak masuk email dan password. Untuk itu, pastikan dulu Anda sudah membuat sebuah akun email di gmail. Jika belum, silahkan untuk membuat email seperti pada postingan tentang Cara Membuat Email di Gmail.
   Jika sudah membuat email di gmail, maka tinggal masukkan alamat email di kolom email dan masukkan password email di tempat yang tersedia. Lalu klik "Masuk".
   
   
3. Maka tampilan selanjutnya akan seperti berikut:
   
4. Melengkapi isian seperti tertera pada gambar diatas:
   • Nama Tampilan: Nama tampilan ini adalah sekaligus sebagai nama Anda sebagai penulis Blog. Pada contoh gambar diatas, nama tampilan Andrean Wildan sekaligus akan menjadi nama akun blog.
   • Jenis Kelamin: Isi dengan jenis kelamin Anda.
   • Penerima Persyaratan: Centang Saya menerima Persyaratan dan Layanan. Jika sudah, klik "Lanjutkan".
5. Hingga tahap ini, pembuatan akun blog gratis di blogspot dengan judul Akun Blog Andrean Wildan sudah selesai dibuat.
   Namun, jika ada penawaran untuk menyambungkan profil akun blog Anda ke Google+ seperti gambar diatas, maka direkomendasikan untuk melakukan sinkronisasi. Klik "Memulai".
   
6. Tampilan selanjutnya adalah seperti berikut:
   
   Yang perlu Anda lakukan jika sudah membaca dan memahami pentingnya penyambungan ke profil Google+ adalah dengan mencentang persetujuan peralihan dan klik "Beralih Sekarang Juga".
   
7. Anda diminta untuk memasukkan sandi email di gmail sebagai verifikasi peralihan ke Google+.
   
8. Sekarang tampak akun blogspot Anda sudah ada foto profilnya seperti foto profil saat membuat email di Gmail sebelumnya. Foto tersebut akan selalu tampil disetiap layanan google yang kita gunakan dengan menggunakan akun email di gmail yang kita buat.

Selesai sudah tahap pembuatan akun blogger atau akun blogspot Anda. Selanjutnya mulai memasuki tahap cara membuat blog gratis di blogspot.
Cara Membuat Blog di Blogspot
Setelah Anda memiliki akun di blogspot, berarti sekarang Anda sudah bisa membuat blog di blogspot secara gratis. Hanya dengan menggunakan sebuah akun di blogspot ini, Anda tidak hanya bisa membuat blog gratis sebanyak satu buah, tapi bisa membuat beberapa blog yang kamu suka. Bisa blog personal yang berisi curhatan atau apa kumpulan celoteh Anda hingga blog dengan tema tertentu secam hobby yang Anda suka. Bahkan dalam tingkat lanjut, hanya dengan membuat blog gratis di blogspot, orang bisa berpenghasilan jutaan rupiah perbulan.
Berikut Cara Membuat Blog di Blogspot:

1. Klik "Blog Baru" seperti pada gambar terakhir diatas.
2. Setelah itu Anda akan mendapat tampilan untuk mengisi judul blog, alamat blog dan pilihan template (Tampilan Blog). Pada judul blog, Anda bebas mengisi dengan judul apa saja yang merujuk kepada isi blog Anda nantinya. Bisa blog personal, pendidikan, hobby, tutorial dan lainnya yang sesuai dengan isi yang ingin Anda tulis didalamnya.
   Pada pilihan alamat blog, ini perlu juga diperhatikan karena alamat blog inilah yang akan kita bagikan kepada umum agar bisa masuk ke blog kita. Untuk itu, carilah nama alamat blog yang juga sesuai dengan isi dan judul blog kamu. Namun terkatang nama alamat blog ini sudah dimiliki oleh orang lain. Dan jika alamat tersebut sudah ada di internet, maka tampilan akan seperti gambar dibawah saat diisi dengan nama alamat tersebut:
   Dan jika alamat yang kita masukkan unik atau belum ada di internet, maka tampilannya seperti berikut:
   
   Selanjutnya adalah memilih template atau tampilan blog. Dalam contoh ini memilih template "Picture Window". Lalu klik "Buat Blog!"
   
   
3. Blog selesai dibuat. Selanjutnya tinggal mengisi blog tersebut dengan tulisan, gambar, video ataupun lainnya yang Anda inginkan.
   
4. Dan ini tampilan blognya sebelum diisi dengan konten apapun. Baik tulisan, gambar, video atau lainnya.
   

Demikianlah cara membuat blog gratis di blogspot. Selanjutnya kita akan membahas cara membuat postingan di blogspot. Moga bermanfaat and happy blogging!
Temukan Berbagai Informasi Unik dan Menarik di Blog Aneh Tapi Nyata

Cara Menambahkan Tabview Section Pada Sidebar Blog

 

 

Terkadang ada untungnya ketika disuruh membuat blog oleh saudara. Meski dibayar ku nuhun alias gratis tapi selalu dapat ilmu baru tatkala mengobrak-abrik template. Seperti kejadian sekitar dua bulan lalu ketika membuat blog ini, ada tiga temuan yang bermanfaat dan menjadi perbendaharaan ilmu ngeblog saya, salah satunya adalah membuat Tabview Section.

Dibandingkan dengan Tabview Widget, yang cukup merepotkan ketika melakukan pengisian kontennya karena berada dalam satu widget, Tabview Section lebih mudah dan praktis karena selain bisa terdiri dari beberapa widget dalam satu Tabmenu, juga bisa memasukkan gadget tipe non-HTML/JavaScript sehingga membuat kita leluasa dalam mengisikan konten-konten kedalam widget-widget tersebut.

Lalu bagaimana cara membuat Tabview Section ini? Caranya gampang saja, kamu tinggal mengikuti langkah-langkah berikut. Kelihatannya memang ribet karena penjelasannya cukup panjang, tapi jika dipraktekkan akan terasa mudah. Coba saja...

Langkah Pertama

• Login ke akun Blogger kamu.
  
• Dari halaman Dasbor, pilih Rancangan - Edit HTML.
  
• Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
  
• Cari kode ]]></b:skin> (gunakan Control F atau F3).
  
• Kopi CSS berikut lalu tempelkan (paste) di atas kode ]]></b:skin> tadi (sebaiknya diletakkan di bawah CSS untuk sidebar)
  

  /*-- Tabview Section -- */
  .tabs-widget {
  list-style:none;
  list-style-type:none;
  margin:0;
  padding:0;
  height:24px;
  border-bottom:1px solid #A4A4A4;
  }
  .tabs-widget li {
  list-style:none;
  list-style-type:none;
  margin:0 0 0 4px;
  padding:0;
  float:left;
  }
  .tabs-widget li:first-child {margin:0}
  .tabs-widget li a {
  background-color:#d4d4d4;
  color:#000;
  text-shadow:1px 1px 1px #fff;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  -moz-border-radius-topleft:7px;
  -moz-border-radius-topright:7px;
  -khtml-border-radius-topleft:7px;
  -khtml-border-radius-topright:7px;
  -webkit-border-top-left-radius:7px;
  -webkit-border-top-right-radius:7px;
  border-right: 2px solid #adadad;
  padding:5px 10px;
  display:block;
  text-decoration:none;
  font:bold 11px Arial,Helvetica,Sans-serif;
  text-transform:uppercase;
  }
  .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current {
  background-color:#A4A4A4;
  color:#000;
  text-shadow:1px 1px 1px #fff;
  border-top-left-radius:7px;
  border-top-right-radius:7px;
  -moz-border-radius-topleft:7px;
  -moz-border-radius-topright:7px;
  -khtml-border-radius-topleft:7px;
  -khtml-border-radius-topright:7px;
  -webkit-border-top-left-radius:7px;
  -webkit-border-top-right-radius:7px;
  border-right: 2px solid #adadad;
  text-decoration:none;
  }
  .tabs-widget-content {margin-top:5px; background:#F4F4F4}
  .tabviewsection {margin:0 0 2px 0}
  

  
  
• Setelah itu letakkan sumber script berikut di bawah ]]></b:skin>.
  

  <script src='http://enes-sc.googlecode.com/files/jquery151.js' type='text/javascript'/>
  <script src='http://enes-sc.googlecode.com/files/tabsectionplugin.js' type='text/javascript'/>

  
  

  Catatan:
  

  • Bagi yang menggunakan frame work dari mootools, letakkan script tersebut di bawah script mootools.
    
  • Bagi yang menggunakan script jQuery, seperti pada perintah Top/Down Page, hapus salah satunya.
    

  
  
• Kemudian cari kode untuk widget sidebar, seperti berikut:
  

  <b:section class='sidebar' id='sidebar1' preferred='yes'>

  
  
• Setelah ketemu, kopi dan tempelkan script berikut di atasnya:
  

  <div class='tabviewsection'>
  
  <script type='text/javascript'>
  jQuery(document).ready(function($){
  $(&quot;.tabs-widget-content-widget-enes_sc-01-id&quot;).hide();
  $(&quot;ul.tabs-widget-widget-enes_sc-01-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
  $(&quot;.tabs-widget-content-widget-enes_sc-01-id:first&quot;).show();
  
  $(&quot;ul.tabs-widget-widget-enes_sc-01-id li a&quot;).click(function() {
  $(&quot;ul.tabs-widget-widget-enes_sc-01-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
  $(this).addClass(&quot;tabs-widget-current&quot;);
  $(&quot;.tabs-widget-content-widget-enes_sc-01-id&quot;).hide();
  var activeTab = $(this).attr(&quot;href&quot;);
  $(activeTab).fadeIn();
  return false;
  });
  });
  </script>
  
  <ul class='tabs-widget tabs-widget-widget-enes_sc-01-id'>
  <li><a href='#widget-enes_sc-01-id1'>Tabmenu 1</a></li>
  <li><a href='#widget-enes_sc-01-id2'>Tabmenu 2</a></li>
  <li><a href='#widget-enes_sc-01-id3'>Tabmenu 3</a></li>
  <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>
  </ul>
  
  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id1'>
  <b:section class='sidebar' id='sidebartab1' showaddelement='yes'>
  <b:widget id='HTML73' locked='false' title='' type='HTML'/>
  </b:section>
  </div>
  
  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id2'>
  <b:section class='sidebar' id='sidebartab2' showaddelement='yes'>
  <b:widget id='HTML74' locked='false' title='' type='HTML'/>
  </b:section>
  </div>
  
  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id3'>
  <b:section class='sidebar' id='sidebartab3' showaddelement='yes'>
  <b:widget id='HTML75' locked='false' title='' type='HTML'/>
  </b:section>
  </div>
  
  <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
  <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
  <b:widget id='HTML76' locked='false' title='' type='HTML'/>
  </b:section>
  </div>
  
  </div><!-- end tabviewsection -->
  <div style='clear:both;'/>

  
  

  Catatan:
  

  • Ubahlah judul Tabmenu 1, Tabmenu 2, Tabmenu 3, dan Tabmenu 4 sesuai dengan judul menu yang diinginkan.
    
  • Jika sidebar blog kamu kecil, hapuslah salah satu Tabmenu dengan cara menghapus kode, misalnya Tabmenu4:
    

    <li><a href='#widget-enes_sc-01-id4'>Tabmenu 4</a></li>

    
    dan kode:
    

    <div class='tabs-widget-content tabs-widget-content-widget-enes_sc-01-id' id='widget-enes_sc-01-id4'>
    <b:section class='sidebar' id='sidebartab4' showaddelement='yes'>
    <b:widget id='HTML76' locked='false' title='' type='HTML'/>
    </b:section>
    </div>

    
    
  • Jika ingin menambahkan, tambahkan kode-kode seperti pada cara penghapusan, hanya saja kamu harus mengubah id4 menjadi id5, id6, dst. Juga pada id='sidebartab4' harus diubah menjadi sidebartab5, sidebartab6, dst. Begitu juga pada id='HTML76' harus diubah menjadi HTML77, HTML78, dst.
    

  
  
• Simpan hasil kerjaan kamu. Jika ingin melihat hasil sementara, lakukan pratinjau, hasilnya akan tampak seperti ini:
  
  

Langkah Kedua

• Setelah disimpan, klik Elemen Laman
  
• Perhatikan perubahan yang terjadi, seperti gambar berikut:
  
  
• Edit atau masukkan widget-widget yang kamu kehendaki pada blok-blok Tabmenu yang ada.
  

  Catatan:
  

  • Pada setiap Blok Tabmenu, kamu bisa menambahkan lebih dari satu widget, termasuk yang non-HTML/JavaScript (bawaan blogger).
    
  • Jika ukuran tinggi widget pada setiap blok ingin berukuran sama, lakukan pengeditan pada HTML template. Caranya seperti membuat scrol pada bloglist, yaitu dengan mengubah kode:
    

    <div class='widget-content'>

    
    menjadi:
    

    <div class='widget-content' style='overflow:auto; height:250px'>

    
    

  
  
• Jika sudah selesai, ucapkan alhamdulillah...
  

Ok, segitu aja informasinya, sob... Semoga bermanfaat...

Cara Membuat Menu Dropdown Selected

Supaya tutorial ini rada lengkap dan agar kamu tidak pusing nyari kesana-kemari mengenai bahasan ini maka kali ini saya akan mengupas cara membuat menu dropdown select. Saya istilahkan demikian supaya tidak "pahili" (tertukar) dengan dropdown pada navbar menu.

Kayak gimana sih menu dropdown select ini? Mungkin itu pertanyaan kamu yang belum mengenalnya. Contoh menu dropdown select ini bisa kamu lihat pada Google Translate yang ada di sidebar blog ini. Nah, seperti itulah "makhluk" ini, dan cara membuatnyapun tidak terlalu sulit. Mau?

Cara membuat menu dropdown select ini sebagai berikut:

• Dari halaman dasbor, klik Tata Letak - Elemen Halaman.
• Kemudian klik Tambag Gadget dan pilih HTML/JavaScript.
• Masukkan kode berikut kedalamnya:
  

  <select onchange="document.location.href=this.options[this.selectedIndex].value;">
  <option value="0" selected />Judul Menu
  <option value="Link 1" />Nama Link 1
  <option value="Link 2" />Nama Link 2
  <option value="Link dst" />Nama Link dst
  </select>

  
  Ganti Judul Menu sesuai kebutuhan, Link 1, 2, dst. dengan link-link yang akan kamu masukkan, dan Nama Link 1, 2, dst. dengan nama dari link-link tersebut. Contohnya seperti ini:
  

  <select onchange="document.location.href=this.options[this.selectedIndex].value;">
  <option value="0" selected />Link Teman
  <option value="http://anastalove.blogspot.com" />Anasta Love
  <option value="http://sastraculun.blogspot.com" />Sastra Culun
  <option value="http://ruangsc.blogspot.com" />SC Community
  </select>

  
  Maka hasilnya akan seperti ini: Link Teman Anasta LoveSastra CulunSC Community
• Simpan hasil ini dan ucapkan Alhamdulillah.....

Agar link-link tersebut dibuka pada halaman (tab) baru, maka gantilah kode:

<select onchange="document.location.href=this.options[this.selectedIndex].value;">

dengan kode ini:

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

Ok, segitu aja sob. Semoga bermanfaat .....

Situs Widget Untuk Blog Anda

Berikut daftar alamat widget yang bisa dipasang di blog kamu. Blog yang tidak memasang widget pasti kurang menarik untuk dilihat, ibarat toko yang tidak mempunyai aksesoris sehingga sepi pengunjung dan akhirnya gulung tikar atau bangkrut. Tapi dalam blog, jika kamu terlalu banyak memakai widget akan berdampak pada kekuatan blog kamu dan blog kamu pun jadi berat, jadi berhati-hatilah dalam memasang widget, gunakan widget hanya sesuai kebutuhan saja.

 

1. Clock = http://www.mytictac.com/
2. Quotes = http://puisicinta.org/
3. CopyScape = http://copyscape.com/
4. Preview = http://www.snap.com/
5. Rank Widget = http://rankwidget.com/
6. Digg News = http://digg.com/
7. Feedjit = http://feedjit.com/
8. LineBuzz = http://linebuzz.com/
9. Flixn = http://www.flixn.com/
10. 3Jam = http://3jam.com/
11. Jaxtr = http://www.jaxtr.com/
12. Box Widget = http://box.com/
13. Weather = http://www.showmyweather.com/
14. ClockLink = http://clocklink.com/
15. Calendar = http://www.braveapps.com/calendar/
16. Widget Box = http://www.widgetbox.com/
17. Feed Burner = http://feedburner.google.com/
18. Technorat = http://technorati.com/
19. My Page Rank = http://mypagerank.net/
20. Kata-kata Mutiara Islam = http://wahidnh.blogspot.com/
21. Blog Counter = http://histats.com/
22. Blinkx = http://www.blinkx.com/
23. Skype Buttons = http://www.skype.com/
24. Rock You = http://rockyou.com/ry/home
25. Ayat-ayat Al-quran = http://wahidnh.blogspot.com/
26. Pet = http://bunnyherolabs.com/adopt/
27. Game = http://khemer.com/
28. Jadwal Sholat = http://islamicfinder.org/
29. Translate = http://translate.google.com/translate_tools?hl=id
30. Shoutbox = http://www.shoutmix.com/ 
31. Ip Addres = http://www.wieistmeineip.de/banner/ 
32. Alexa = http://www.alexa.com/
33. Banners Flash = http://flashvortex.com/

Terima Kasih sudah berkunjung, semoga artikel ini bermanfaat buat Anda...

NB: Blogger sejati selalu memberikan komentar...

Cara membuat menu drop down pada blogspot

Ketika sebuah blog tumbuh menjadi besar, maka semakin banyak pula menu dan link yang dibutuhkan. Jika kebetulan thema yang disediakan tidak mendukung, maka kita sendiri yang akan kebingungan dalam meletakan menu-menu tadi. Memang bisa kita mengganti thema kembali tetapi konsekuensinya kita harus melakukan setting ulang terhadap thema tersebut. Salah satu alternatif agar kita tidak perlu mengganti thema adalah dengan membuat menu drop down. Menu drop down merupakan menu tersembunyi di menu utama dan akan muncul ketika kita mengklik menu utama tadi atau hanya meletakan kursor di menu utama tadi. Bagaimana cara membuat menu drop down tadi ? Berikut ulasannya.
Drop Down Menu memang sangat populer dan sangat dibutuhkan pada saat ini. Jika di blog anda terdapat banyak link dan bingung untuk menaruhnya dimana. Nah, Drop-Down Menu adalah jawabannya. Drop Down Menu yang bagus dan indah ini dibuat full CSS tanpa JS (JavaScript). Sehingga anda tidak perlu khawatir jika loading blog anda lambat.

Langkah untuk membuat Drop-Down Menu :

1. Login ke blogger.com
2. Masuk ke menu Rancangan (Design) dan pilih Edit HTML
3. Centang Expand Widget Template
4. Cari kode <body>
5. Masukkan kode berikut dibawah kode <body>
   

   <link href=’http://dl.dropbox.com/u/11103024/menu.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/> <b:section id=’menu’ maxwidgets=’1′ showaddelement=’no’> <b:widget id=’HTML91′ locked=’false’ title=’Menu’ type=’HTML’/> </b:section>

6. Kode diatas berfungsi untuk membuat sebuah JavaScript/HTML di Elemen Laman.
7. Klik  Simpan Template
8. Masuk ke Elemen Laman Menu, kemudian klik Edit. Lihat Screenshoot !

            

      9.  Masukkan kode dibawah ini

1. <ul> <li><a href=”">Home</a></li> <li><a href=”#”>1 Column</a> <div> <div> <ul> <li><a href=”#”>Totto 1</a></li> <li><a href=”#”>Totto 2</a></li> <li><a href=”#”>Totto 3</a></li> <li><a href=”#”>Totto 4</a></li> <li><a href=”#”>Totto 5</a></li> <li><a href=”#”>Totto 6</a></li> <li><a href=”#”>Totto 7</a></li> <li><a href=”#”>Totto 8</a></li> <li><a href=”#”>Totto 9</a></li> <li><a href=”#”>More…</a></li> </ul> </div></div></li> <li><a href=”#”>2 columns</a> <div> <div> <h3>Totto 10</h3> <ul> <li><a href=”#”>Totto 11</a></li> <li><a href=”#”>Totto 12</a></li> <li><a href=”#”>Totto 13</a></li> </ul> </div> <div> <h3>Totto 14</h3> <ul> <li><a href=”#”>Totto 15</a></li> <li><a href=”#”>Totto 16</a></li> <li><a href=”#”>Totto 17</a></li> </ul> </div> <div> <h3>Totto 18</h3> <ul> <li><a href=”#”>Totto 19</a></li> <li><a href=”#”>Totto 20</a></li> <li><a href=”#”>Totto 21</a></li> </ul> </div> <div> <h3>Totto 22</h3> <ul> <li><a href=”#”>Totto 23</a></li> <li><a href=”#”>Totto 24</a></li> <li><a href=”#”>Totto 25</a></li> </ul> </div></div></li></ul>

Ganti kode # dengan URL tujuan. Ganti Totto 1, Totto 2, Totto 3, Totto… dengan anchor teks dari URL tersebut.
Kemudian Klik  Simpan Mudah bukan ? Sebenarnya semua hal tidak terlalu sulit seperti yang kita bayangkan.

6 perbedaan website dengan Weblog

Bayak diantara Newbie yang tidak tau apa itu website? apa itu weblog? apakah ini site? apakah ini situs? apa perbedaan antara website dengan weblog? bagaimana ciri-cirinya? yang pasti blog merupakan bagian dari website tapi belum tentu Website merupakan blog, bagaimana tambah bingung? ^_^, dengan perkembangan dan inovasi  dari para Blogger (pengelola blog) terkadang sulit juga membedakan antara website dengan blog, tapi gambarannya senagai berikut:

1. Pengelola: Kalau website biasanya yang punya perusahaan atau milik badan bersama, sedangkan blog milik perorangan.
2. Letak isi: Kalau Website berupa halaman, sedangkan Blog isi yang baru akan menimpa atau menggantikan yang lama.
3. Halaman: Website-->Terdiri dari page dengan link untuk mengakses, Blog berupa CSS (Cascading style Sheet) yaitu sistem halaman bergulir.
4. Alamat: Website-->Domain dan Hosting berbayar, Blog-->Sifatnya gratis
5. Template: Website-->Variatif sesuai dengan keahlian si pembuat website, Blog-->Menggunakan template yang sudah disediakan.
6. Tujuan: Website--> Komersil, sarana promosi, Blog-->Tempat menyalurkan ide, krease, aspirasi

Perbedaan yang saya utarakan diatas sebenarnya tidak mutlak dan baku tapi bersifat keumuman saja seperti saya sampaikan pada paragraf pertama dalam artikel ini yaitu dengan perkembangan dan inovasi  khusunya dalam dunia Blogger, sehingga sebuah blog hampir mirip dengan sebuah website.
Mudah-mudahan anda sedikit tidak terlalu bingung lagi dalam perbedaan antara website dengan weblog.