Document Text sizer widget

Widget ini adalah sebagai alternatif tambahan untuk variasi pada blog agar lebih menarik dan inovatif.

Fungsi dari widgets ini adalah untuk mempermudah kita untuk mengatur ukuran huruf pada tampilan sesuai dengan kebutuhan lebih besar atau lebih kecil.

Untuk lebih jelasnya silakan lihat uraian dibawah ini :

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, cari kode ]]></b:skin>
• Copykan script berikut dan letakkan di bawah kode ]]></b:skin> tersebut.
• Tekan Control F atau F3 untuk mencarinya.

<script src='http://hdesign-ideas.googlecode.com/files/textsizer.js'>

</script>

Download external .js file textsizer.js

Langkah Kedua 

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini ( letakkan sesuai kebutuhan )

<a href="javascript:ts('body',1)">+ Larger Font</a> | <a href="javascript:ts('body',-1)">- Smaller Font</a href="javascript:ts('body',-1)">

Keterangan :

1.  + Larger Font : memperbesar font ( bisa diganti sesuai kebutuhan )
2.  - Smaller Font : memperkecil font ( bisa diganti sesuai kebutuhan )

Selamat mencoba..!

Menampilkan daftar isi pada label tertentu

Menampilkan daftar isi sebuah blog merupakan sebuah kebutuhan agar pembaca dapat memperoleh informasi apa yang kita sajikan dengan mudah, tapi dalam beberapa hal ini juga merupakan sebuah dilema karena dengan banyaknya artikel yang kita muat akan membuat loading saat membuka blog cukup lama sehingga bisa mengganggu kenyamanan pengunjung.

Ada beberapa cara untuk menampilkan isi blog diantaranya adalah :

• Recent Post ( artikel terbaru )
• Top Posting ( artikel populer )
• Random Post ( artikel acak )
• Membuat Daftar Isi
• Related Post, etc

Sekarang kita akan mencoba membahas mengenai daftar isi dengan menampilkan hanya sebagian berdasar label posting.

untuk lebih jelasnya ikuti langkah berikut :

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini
   

<script style="text/javascript">
var numposts = 500;
var standardstyling = true;
</script>

<script type='text/javascript' src='http://hdesign-code.googlecode.com/files/label-post.js'></script>

<h3>Arsitektur</h3>

<ul>
<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default/-/Arsitektur?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=100"></script>
</ul>
<br />

<h3>Rumah Adat</h3>

<ul>
<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default/-/Rumah%20adat?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=100"></script>
</ul>

Keterangan :

• <h3>Arsitektur</h3> = judul label posting yang dimaksud ( sesuai dengan label artikel yang ingin ditampilkan )
•  http://kibagus-homedesign.blogspot.com/feeds/posts/default/-/Arsitektur = alamat URL dan label artikel yang dimaksud ( ganti dengan alamat blog dan nama label = warna hijau )
• Untuk menampilkan lebih dari 3 label tinggal tambahkan kode pada bagian bawah, sesuai dengan kebutuhan.

Tips :

• Penggunaan daftar isi jenis ini harus di ikuti dengan pengaturan jenis label yang kita gunakan jangan sampai kita menggunakan label sebuah artikel dengan lebih dari 1 label karena pada tampilan daftar isi akan muncul judul artikel yang sama pada label yang berbeda.
• Tampilkan hanya beberapa jenis label yang utama.

Membuat Daftar Isi Otomatis versi 1

Salah satu bagian yang cukup penting dalam sebuah artikel adalah daftar isi, karena dengan itu pembaca bisa melihat isi dari artikel secara global tanpa harus membaca ( sudah tentu hanya judul saja ).

Pada website juga seperti itu, dengan adanya daftar isi atau minimal label posting, kita bisa membuat pengunjung / pembaca untuk tertarik berlama - lama.

Nah pada kesempatan ini kita coba membuat daftar isi yang otomatis, karena kita tidak perlu mengedit ulang wigdget yang ada. ( kalau dengan cara biasa yaitu membuat widget link akan sangat menyita waktu, apalagi bila posting kita sudah cukup banyak. Teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta dan blognya kang rahman yang sudah dimodifikasi dan sekarang aku coba untuk melakukan sedikit modifikasi agar tampil lebih menarik.

Kita langsung ke TKP saja biar jelas

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin>
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.
• Tekan Control F atau F3 untuk mencarinya.
  

#toc { border: 0px solid #8A4B08; background: transparent; padding:2px; width:495px; margin-top:10px;}

.toc-header-col1, .toc-header-col2,

.toc-header-col3 { background: #8A4B08; color: transparent; padding-left: 5px; width:250px;}

.toc-header-col2 { width:75px;}

.toc-header-col3 { width:125px;}

.toc-header-col1 a:link, .toc-header-col1 a:visited,

.toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link,

.toc-header-col3 a:visited { font-size:100%; text-decoration:none;}

.toc-header-col1 a:hover,

.toc-header-col2 a:hover,

.toc-header-col3 a:hover { font-size:100%; text-decoration:underline; color:#3D3F44;}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:100%; background: transparent;}

Keterangan : 

• Warna hijau menunjukan kode warna yang bisa kamu ganti sesuai dengan warna blog kamu.

Simpan Template.


Langkah Kedua

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini
   

<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>

<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>

<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

<br />

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: transparent url(#) no-repeat scroll 0 0 ; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: center; width: auto;">

<div id="toc"></div>

</div>

Keterangan :

• Pasang widget tersebut diatas posting, karena daftar isi ini membutuhkan tempat yang cukup lebar, kalau kamu ingin di pasang pada tempat lain dengan lebar minim tidak menjadi masalah karena pada script ini telah aku tambah script fungsi scroll ( warna kuning ) agar bisa fleksible dengan konsekuensi scroll akan muncul karena lebar template tidak cukup.
  
• Ganti  kode >LIHAT DAFTAR ISI< dengan kata kata kamu sendiri.
• Ganti  kode http://kibagus-homedesign.blogspot.com/feeds/posts/default dengan URL kamu sendiri.
• Kamu juga bisa merubah widget diatas menjadi 2 widget dengan tempat yang berbeda, kode pertama adalah LINK LIHAT DAFTAR ISI.

<div id="toclink"><a href="javascript:showToc();">LIHAT DAFTAR ISI</a><br /><br /></div>

<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/blogtoc.js"></script>

<script src="http://kibagus-homedesign.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

• Kode kedua adalah Isi dari daftar isi yang akan muncul pada saat kamu klik pada link "LIHAT DAFTAR ISI"

<div id="toc"></div>

___________________________________________
Ok.. mudah kan..!
Selamat mencoba..!                                                   CONTOH PENGGUNAAN..!

Semoga bermanfaat....!!

Membuat widgets daftar isi otomatis versi 2

Membuat daftar isi blog merupakan hal yang bisa kita lakukan untuk menampilan isi posting dalam blog secara lengkap dan juga bisa memudahkan pembaca untuk mengakses isi blog yang ada.

Sekarang kita akan mencoba membuat daftar isi yang menampilkan isi posting secara keseluruhan yang terbagi dalam label posting secara otomatis dalam bentuk yang berbeda. ini merupakan alternatif membuat daftar isi disamping posting membuat daftar isi otomatis dan Menampilan seluruh posting dalam satu widgets daftar isi otomatis yang dibahas beberapa waktu yang lalu.

Langkah Pertama

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

<div style="background: transparent url(#) no-repeat scroll 0 0; border:1px solid white; height:300px; overflow:auto; width:95%;">

<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="http://sites.google.com/site/kibagusnet/x-design/Daftarisi-hdx.js">

</script>
<script src="http://blog kamu.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">

</script></div>

Keterangan :

Kode Warna lime :

kode transparent menunjukan warna netral ( menggunakan warna dasar blog ) ganti dengan kode warna sesuai kebutuhan, Url(#) kode # berarti tidak menggunakan background image, bila ingin menggunakan image ganti dengan alamat URL image yang akan dipasang
width:95%, lebar widgets diatur secara otomatis menyesuaikan lebar kolom, ganti 100px bila ingin diatur secara manual, angka 100 menunjukan lebar widgets ( ganti sesuai kebutuhan )
height:400px, tinggi widgets angka 400 menunjukan tinggi widgets ( ganti sesuai kebutuhan )

Kode warna merah :

Alamat feed url blog kamu.

Simpan dan lihat hasilnya..      CONTOH PENGGUNAAN..!
Semoga bermanfaat..!
Terima kasih..!

Membuat widgets daftar isi otomatis versi 3

Membuat daftar isi blog merupakan hal yang bisa kita lakukan untuk menampilan isi posting dalam blog secara lengkap dan juga bisa memudahkan pembaca untuk mengakses isi blog yang ada.

Sekarang kita akan mencoba membuat daftar isi yang menampilkan isi posting secara keseluruhan yang terbagi dalam label posting secara otomatis. ini merupakan alternatif membuat daftar isi disamping posting membuat daftar isi otomatis yang dibahas beberapa waktu yang lalu.

Langkah Pertama

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

<div style="overflow:auto;
padding-left:5px;
border:1px solid white;

width:95%;

height:400px;

background:transparent url(#) no-repeat ;">

<script language="javascript">
numposts=9999;

home_page="BLOK KAMU.blogspot.com";

explanpost="new";

</script>
<ul><script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/sitemap-np.js"></script></ul>
</div>

 Keterangan :

Kode Warna merah :

width:95%, lebar widgets diatur secara otomatis menyesuaikan lebar kolom, ganti 100px bila ingin diatur secara manual, angka 100 menunjukan lebar widgets ( ganti sesuai kebutuhan )
height:400px, tinggi widgets angka 400 menunjukan tinggi widgets ( ganti sesuai kebutuhan )

Kode Warna orange :

kode transparent menunjukan warna netral ( menggunakan warna dasar blog ) ganti dengan kode warna sesuai kebutuhan, Url(#) kode # berarti tidak menggunakan background image, bila ingin menggunakan image ganti dengan alamat URL image yang akan dipasang

Kode warna kuning :

Alamat blog kamu

Kode warna hijau :

untuk menampilkan kode bagi posting yang baru ( terbaru ), ganti sesuai selera, "baru","terbaru", dll.

Simpanlah dan lihat hasilnya  ..   CONTOH PENGGUNAAN...!
Semoga bermanfaat...!
Terima kasih...!

Membuat Recent Post type teks berjalan tetap diatas atau dibawah screen

Membuat blog lebih informatif merupakan hal yang bisa dilakukan agar pembaca bisa memperoleh informasi/artikel secara mudah, Recent Post / Artikel terbaru adalah salah satu alternatif dimana kamu bisa menghemat tempat dengan isi yang sama.

Untuk lebih lengkapnya ikuti langkah berikut.

Langkah Pertama

• Login ke akun Blogger kamu.
  
• Dari halaman dashboard, pilih Edit HTML.
  
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  
• Copykan script berikut dan letakkan di bawah kode ]]></b:skin> tersebut..

<script src='http://hdesign-ideas.googlecode.com/files/Hdi-Headline.js'>
</script>

Simpanlah hasil editing tersebut.

Langkah Kedua

• Pilih tab Elemen Halaman ( Page Element ).
  
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  
• Copykan script berikut dan letakkan pada kotak Content ( dimana saja bisa ) yang tersedia :

<script type="text/javascript">
var hn_url_blog = "http://ALAMAT BLOG.blogspot.com/";

var hn_jumlah_post = 20;

var hn_warna_latar = "#000000";

var hn_warna_garis = "#084B8A";

var hn_posisi = "bottom";

var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>

<script src="http://hdesign-ideas.googlecode.com/files/Hdi-Headline.js">
</script>

Keterangan :
Warna merah :

• http://ALAMAT BLOG.blogspot.com/ = > ganti alamat blog yang dimaksud
• var hn_jumlah_post = 20 = > ganti jumlah posting yang ingin ditampilkan
• var hn_warna_latar = "#000000" = >  warna background teks sesuai kebutuhan
• var hn_warna_garis = "#084B8A" =  > warna border teks sesuasi kebutuhan
• var hn_posisi = "bottom" = posisi widget ( UP dan BOTTOM, pilih salah satu )

Untuk mengganti kode warna bisa kamu lihat disini KODE WARNA atau Menggunakan kode warna dalam blogging

Variasi Single Menu horizontal type automatically rotated and displayed

Jenis Menu horizontal ini sebenarnya bisa juga dikatakan sebagai teks bar ( pesan singkat ) yang akan muncul secara otomatis dengan navigasi kiri dan kanan.Variasi menu / teks bar ini bisa dipakai untuk menampilkan head line dari website/blog dengan berbagai variasi teks dan background.

Lihat contoh - sample blog -

Bagi yang ingin menggunakan cara ini silahkan mengikuti langkah berikut.

Langkah pertama

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

<style>
<!--
.scrollerstyle{
font-family:arial;background:#088A85;border:1px solid #000000;cursor:pointer;
}
-->
</style>

<script language="javascript">

var msgs = new Array(

"Analisa mengenai dampak lingkungan",

"Animasi",

"Dunia Arsitektur modern dan tradisional",

"Award",

"Kumpulan blog tutorial",

"Kumpulan blogger trick",

"Gallery Denah rumah",

"Dinamik widgets untuk blogger",

"Free download Mp3",

"Duit On line",

"Konsep green house",

"Info sekilas",

"Informasi dunia konstruksi",

"Konstruksi kayu",

"Menu navigasi untuk blogger",

"Monetize Blog",

"Informasi PTC gratis",

"Rencana Anggaran Biaya",

"Rumah adat sebagai kekayaan budaya dan alternatif design",

"Meningkatkan Pagerank dan traffic -S E O-",

"Perkembangan dunia teknis sipil",

"Variasi Posting untuk blogger",

"Variasi widgets untuk blogger" ); // No comma after last ticker msg

var msg_url = new Array(

"http://kibagus-homedesign.blogspot.com/search/label/Amdal",

"http://kibagus-homedesign.blogspot.com/search/label/Animasi",

"http://kibagus-homedesign.blogspot.com/search/label/Arsitektur",

"http://kibagus-homedesign.blogspot.com/search/label/Award",

"http://kibagus-homedesign.blogspot.com/search/label/Blog%20Tutorial",

"http://kibagus-homedesign.blogspot.com/search/label/Blogger%20Trick",

"http://kibagus-homedesign.blogspot.com/search/label/Denah%20Rumah",

"http://kibagus-homedesign.blogspot.com/search/label/Dinamik%20widgets",

"http://kibagus-homedesign.blogspot.com/search/label/Download%20Mp3",

"http://kibagus-homedesign.blogspot.com/search/label/Duit%20On%20line",

"http://kibagus-homedesign.blogspot.com/search/label/Green%20house",

"http://kibagus-homedesign.blogspot.com/search/label/Info%20sekilas",

"http://kibagus-homedesign.blogspot.com/search/label/Konstruksi",

"http://kibagus-homedesign.blogspot.com/search/label/Konstruksi%20kayu",

"http://kibagus-homedesign.blogspot.com/search/label/Menu%20navigasi",

"http://kibagus-homedesign.blogspot.com/search/label/Monetize%20Blog",

"http://kibagus-homedesign.blogspot.com/search/label/PTC",

"http://kibagus-homedesign.blogspot.com/search/label/rab",

"http://kibagus-homedesign.blogspot.com/search/label/Rumah%20adat",

"http://kibagus-homedesign.blogspot.com/search/label/S%20E%20O",

"http://kibagus-homedesign.blogspot.com/search/label/Sipil",

"http://kibagus-homedesign.blogspot.com/search/label/Variasi%20Posting",

"http://kibagus-homedesign.blogspot.com/search/label/Variasi%20widgets" ); // No comma after last ticker url

var barwidth='500px' //Enter main bar width in px or %

var setdelay=2000 //Enter delay between msgs, in mili-seconds

var mouseover_color='#084B8A' //Specify highlight color

var mouseout_color='transparent' //Specify default color
/////////////////////////////////////////////////////////////////////

var count=0;
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||ns6){
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)" class="scrollerstyle" style="width:80px; height:50px; border-right-width:1px;" name="prev" title="Previous News"><input type="button" name="news_bar_but" onclick="goURL();" style="color:#ffffff;background:transparent; width:'+barwidth+'; height:30px; border-width:1; border-color:#848484; cursor:hand" onmouseover="this.style.background=mouseover_color" onmouseout="this.style.background=mouseout_color"><input type="button" value="next" onclick="moveit(1)" class="scrollerstyle" style="width:80px; height:50px; border-left-width:1px;" name="next" title="Next News"></form>');
}
else{
document.write('<form name="news_bar"><input type="button" value="Previous" onclick="moveit(0)">')
if (navigator.userAgent.indexOf("Opera")!=-1)
document.write('<input type="button" name="news_bar_but" onclick="goURL();" style="width:'+barwidth+'" border="0">')
else
document.write('<input type="button" name="news_bar_but" onclick="goURL();" width="'+barwidth+'" border="0">')
document.write('<input type="button" value="Next" onclick="moveit(1)"></form>')
}

function init_news_bar(){
document.news_bar.news_bar_but.value=msgs[count];
}
//moveit function by Dynamicdrive.com
function moveit(how){
if (how==1){ //cycle foward
if (count<msgs.length-1)
count++
else
count=0
}
else{ //cycle backward
if (count==0)
count=msgs.length-1
else
count--
}
document.news_bar.news_bar_but.value=msgs[count];
}

setInterval("moveit(1)",setdelay)

function goURL(){
location.href=msg_url[count];
}

init_news_bar();

</script>

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran dan warna.

• warna merah, variasi huruf, warna dan border pada navigasi scroll kiri dan kanan ( ubah jenis font, kode warna dan tebal border silakan diganti sesuai keperluan )
• var barwidth='500px', lebar menu utama ( silakan diganti sesuai keperluan )
• var setdelay=2000 , kecepatan perputaran/pergantian teks/menu ( makin besar makin lambat -  silakan diganti sesuai keperluan )
• var mouseover_color='#088A85' , kode warna hover menu/teks ( silakan diganti sesuai keperluan )
• value="Previous" dan value="next" , Navigasi scroll arah kiri - kanan ( bisa diganti sesuai kebutuhan )
• width:80px; height:50px, lebar dan tinggi Navigasi scroll arah kiri - kanan
• Warna hijau , nama menu.teks yang dimaksud dan alamat URL menu teks secara berurutan.
• Warna kuning, warna huruf, background dan border menu utama 
• height:30px, tinggi menu utama

 Note :
untuk lebar menu bisa menyesuaikan sesuai dengan lebar kolom template ( ubah lebar  scroll kiri kanan dan menu/teks utama sesuai lebar kolom template )

Terima kasih..!
semoga bermanfaat .. !

Memasang Google Search pada blogger

Membuat website/blog yang terjangkau dalam arti kontent atau artikel yang mudah diakses adalah sesuatu yang wajib dilakukan agar pengunjung terasa nyaman dan tidak pusing gara gara mau cari artikel yang dimaksud tapi cukup kerepotan, tentu ini akan sangat merugikan kita karena kita sudah posting artikel cukup banyak tapi kurang pembaca gara gara tidak ada menu/widget pendukung untuk melakukan pencarian.

Membuat menu pencari ( search ) bisa menjadi alternatif disamping pemakaian menu, label, recent post, top posting, daftar isi yang bisa dipasang sebagai pendukung.

Ada 2 cara yang akan kita bahas pada kesempatan kali ini :

• Widget strandart blogger ( google search )
• Membuat google search sendiri

Cara Pertama
cara ini cukup mudah dan simple :

• login ke account blogger.com
• masuk ke layout
• add gadget cari Search Box (New!)

Cara Kedua
Cara ini bisa kita lakukan melalui fasilitas Google yang ada yaitu




Kelebihan dengan cara kedua ini :

• Membuat menu search sesuai dengan selera dan template yang kita pakai
• menggunakan menu search untuk memperoleh hasil tambahan selain iklan ( Melalui google adsense )
• Adanya statistik data yang bisa kita gunakan untuk mengetahui jumlah pemakai menu search yang ada diblog.website. 

Ikuti langkah berikut

login di google custom search
nanti akan muncul form isian untuk mesin pencari, isi sesuai kebutuhan :

Form isian ______________________________________

Edit / setting search engine_______________________________

Pilih control panel untuk memperoleh kode sript yang dimaksud

Setiing bentuk seacrh engine_____________________________

Pilih "Look and feel" untuk melakukan pilihan terhadap model search engine, ada 3 macam :

• Model Full width, Hasil search engine sesuai lebar kolom widget, hasil pencarian akan muncul dibawah menu search ( kode srcipt 1 buah )
• Model Compact,  Hasil search engine akan muncul pada halaman luar ( kode srcipt 1 buah )
• Model two colomn, hasil search engine akan muncul pada kolom yang dituju selain kolom gadget ( kode srcipt 2 buah, 1 untuk menu search engine 1 untuk lokasi hasil pencarian )

Untuk memilih warna dan model tampilan ada 6 jenis yang merupakan standart yang ada dan kesemuanya bisa diubah untuk jenis dan huruf warna, untuk lebih jelasnya lihat contoh dibawah ini :

Type Bubblegum - klik customize akan muncul tampilan dibawah ini, silakah diubah sesuai kebutuhan ( warna dan huruf )

 

Setelah selesai simpan dan ambil kode yang ada, copas pada blog ditempat yang dimaksud

Selamat mencoba ..
semoga bermanfaat...!!
terima kasih..!

Membuat menu horizontal Professional dropdown

Membuat menu horizontal sebenarnya ada banyak alternatif, untuk kali ini kita akan mencoba membuat jenis menu horizontal type professional dropdown, sebagaimana namanya tentunya ini akan membuat blog/site kita menjadi lebih tampak professional.

Kita langsung ke TKP saja biar jelas

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

/* ================================================================
This copyright notice must be kept untouched in the stylesheet at
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/pro_dropdown_3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

.preload1 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif);}
.preload2 {background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif);}

#nav {padding:0; margin:0; list-style:none; height:38px; background:transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) repeat-x; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFD700; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_0a.gif) no-repeat right top;}

#nav li:hover a.top_link {color:#fff; background: url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat;}
#nav li:hover a.top_link span {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down {background:url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/three_1a.gif) no-repeat right top; padding-bottom:3px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

#nav li:hover ul.sub
{left:1px; top:38px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:18px; width:88px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #50b5d0;}
#nav li ul.sub li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3f96a9; color:#fff; border-color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#ff6; border-bottom:1px solid #ff6; cursor:default;}

#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover a.fly,
#nav li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover a.fly,
#nav li:hover li:hover li:hover li:hover li:hover a.fly
{background:#3f96a9 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}

#nav li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li a.fly,
#nav li:hover li:hover li:hover li:hover li a.fly
{background:#50b5d0 url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

Simpan dan lihat hasilnya.

Keterangan :

• Warna Merah, Background image menu
• Warna Hijau,  Lebar dan tinggi menu

Langkah kedua

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini
   

<span class="preload1"></span>
<span class="preload2"></span>

<ul id="nav">
<li class="top"><a href="#" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#" id="Menu" class="top_link"><span class="down">Menu</span></a>
<ul class="sub">

<li><b>Judul1</b></li>
<li><a href="#" class="fly">Subjudul1</a>
<ul>
<li><a href="#" target="_blank">subitem1.1</a></li>
<li><a href="#" target="_blank">subitem2.1</a></li>
<li><a href="#" target="_blank">subitem3.1</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul2</a>
<ul>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>
</li>
<li><a href="#" class="fly">Subjudul3</a>
<ul>
<li><a href="#" target="_blank">subitem1.3</a></li>
<li><a href="#" target="_blank">subitem2.3</a></li>
<li><a href="#" target="_blank">subitem3.3</a></li>

<li><b>Subjudul3.1</b></li>
<li><a href="#">item1.3.1</a></li>
<li><a href="#">item2.3.1</a></li>
<li><a href="#">item3.3.1</a></li>

<li><b>Subjudul3.2</b></li>
<li><a href="#">item1.3.2</a></li>
<li><a href="#">item2.3.2</a></li>
<li><a href="#">item3.3.2</a></li>
</ul>
</li>


<li><b>Judul2</b></li>
<li><a href="#" target="_blank">subitem1.2</a></li>
<li><a href="#" target="_blank">subitem2.2</a></li>
<li><a href="#" target="_blank">subitem3.2</a></li>
</ul>


</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu2</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.2</a></li>
<li><a href="#" target="_blank">submenu2.2</a></li>
<li><a href="#" target="_blank">submenu3.2</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu3</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.3</a></li>
<li><a href="#" target="_blank">submenu2.3</a></li>
<li><a href="#" target="_blank">submenu3.3</a></li>
</ul>
</li>

</li>
<li class="top"><a href="#" id="services" class="top_link"><span class="down">menu4</span></a>
<ul class="sub">
<li><a href="#" target="_blank">submenu1.4</a></li>
<li><a href="#" target="_blank">submenu2.4</a></li>
<li><a href="#" target="_blank">submenu3.4</a></li>
</ul>
</li>

<li class="top"><a href="#" id="profil" class="top_link"><span>menu5</span></a></li></li></li></ul>

Simpan dan lihat hasilnya.

Keterangan :

• Warna Merah, Alamat URL yang akan kamu tuju sesuai dengan nama menu 
• Warna Hijau,  Nama nama menu sesuai dengan kebutuhan

________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Alternatif widget google translate untuk blogger

Penggunaan widget penterjemah pada blog / website bisa menjadi alternatif untuk memperoleh tambahan traffik karena dengan cakupan pembaca yang lebih luas dari berbagai negara dengan beragam bahasa.

Ada beberapa widget yang bisa kita gunakan untuk keperluan alih bahasa ini :

1. Google translate
2. Yahoo Babel Fish Translation
3. Microsoft Translator widget

Untuk lebih menarik kita juga bisa membuat widget sendiri, cukup banyak blog yang membahas mengenai hal ini caranya cukup mudah bagi anda yang tertarik untuk memasang widget ini, berikut adalah langkah-langkahnya :

1. Silahkan login ke blogger 
2. Klik Tata Letak
3. Klik tab Elemen Halaman
4. Klik Tambah Gadget
   
   
5. Klik tanda plus (+) untuk HTML/Javascript
   
   
6. Copy paste kode berikut :

<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="22" src="http://lh6.ggpht.com/_wC8_9aR_6uE/S-sB776niUI/AAAAAAAAC1U/53KmR8w--Po/English.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB8GWAHJI/AAAAAAAAC1Y/81fOTrIntO4/French.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCFFa5WmI/AAAAAAAAC1c/97SQ7axFB7o/German.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCYzIZffI/AAAAAAAAC10/vIA6TrkepxQ/Spain.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCFKZFwRI/AAAAAAAAC1g/KWQ1jFf8R7Y/Italian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB7-D9dsI/AAAAAAAAC1Q/-AKXc4EYB5k/Dutch.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sCY8sWqeI/AAAAAAAAC1w/zaeK8Jq_mrg/Russian.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCFq_2QyI/AAAAAAAAC1s/eKNJL3NTdNc/Portuguese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="22" src="http://lh6.ggpht.com/_wC8_9aR_6uE/S-sCFU6ZB2I/AAAAAAAAC1k/EKW0esnRZwM/Japanese.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sCFawv3ZI/AAAAAAAAC1o/5h0bMG8dAvs/Korean.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="22" src="http://lh4.ggpht.com/_wC8_9aR_6uE/S-sB7kqyAHI/AAAAAAAAC1I/P-sumP3J2fA/Arabic.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="22" src="http://lh5.ggpht.com/_wC8_9aR_6uE/S-sB7wEy9XI/AAAAAAAAC1M/uErl2x0JVGU/Chinese-Simplified.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="14" /></a>
</div>

Keterangan :

• kode warna merah : alamat URL image bendera sebagai icon ( bisa diganti dengan image yang lain sesuai kebutuhan )
• kode warna hijau : tinggi dan lebar image icon bendera ( ubah sesuai kebutuhan )
• posisi widget ini akan menyesuaikan lebar kolom yang ada sehingga bisa menjadi 1 / 2 /3 baris

Selamat mencoba
semoga bermanfaat..!
Terima kasih..!

Membuat Top Posting berdasar popularitas link page

Membuat top posting sebenarnya bukan hal baru,  sebenarnya ada 2 macam top posting yang saat ini ada yaitu :

1. Top Posting berdasar tingkat popularitas
2. Top Posting berdasarkan jumlah komentar yang ada.

Kali ini kita akan membahas mengenai top posting berdasarkan tingkat popularitas dari posting/halaman blog.

Ada 2 macam jenis Top Posting yang bisa kamu pakai untuk jenis ini :

Cara Pertama Top Posting dengan menggunakan Wigets W3Counter

• Daftarkan Account di W3Counter

 

 

• Login di Account baru dan tambahkan Website / blog ( untuk free widgets hanya 1 website / blog, untuk kebutuhan website / blog lebih dari satu bisa dengan UPGRADE atau dengan membuat account lebih dari 1 account )

•  ( 1 ) Tambahkan tracker code ( masukan script tracker code kedalam website/blog )
•  ( 2 ) Tambahkan Widgets yang kamu inginkan ada beberapa jenis free widgets yang tersedia :

1. A live feed of the most recent visits to your website
2. The visitor map widget
3. The visit graph widget
4. Popular pages  widget ( Top posting berdasar popularitas )
5. Top searches leading to your website widget
6. Top referring domains leading to your website

Cara Kedua Top Posting dengan menggunakan Free Feedjit Widgets

Cara ini merupakan alternatif yang bisa kamu bisa dipakai, caranya pada prinsipnya sama membuat account dan langsung bisa kamu ambil widget yang kamu inginkan, ada  beberapa jenis widget gratis :

• Live Traffic Feed ( sudah terintegrasi dengan Facebook dan Twitter )
• Live Traffic Map
• Recommended Reading
• Page Popularity ( Top Posting dengan dasar popularitas )

Kedua jenis widget ini bisa kamu pakai sebagai pilihan bila kamu ingin menampilkan Top Posting berdasar popularitas link page.

Selamat mencoba..!

Modifikasi Tab View dengan variasi background

Tab View ini merupakan tambahan dari posting Cara mudah membuat TAB VIEW WIDGET dengan penambahan berupa variasi background baik pada menu maupun kota utama.

Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: right;
display: block;
width: 100px; /* ukuran lebar menu */
text-align: center;
height: -24px; /* ukuran tinggi menu */
padding-top: 3px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #6E6E6E; /* warna border menu */
border-bottom-width: 1px solid #6E6E6E;;
font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
font-size: 12px; /* besar hurup menu */
letter-spacing: -1px;
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/DeepSea.gif) repeat scroll 0 0; /* warna latar menu */
color: #FAAC58; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:2px;
}
div.TabView div.Tabs a.Active {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/Golden.gif) repeat scroll 0 0; /* warna background menu aktif */
color: #66B5FF;
}
div.TabView div.Tabs a:hover {
background : transparent url(http://i864.photobucket.com/albums/ab206/kibagus/menu%20animasi/YellowContrast.gif) repeat scroll 0 0; /* warna background menu hover */
color: #B45F04;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #6E6E6E; /* warna border kotak utama */
overflow: hidden;
background: transparent url("http://lh4.ggpht.com/_wC8_9aR_6uE/Swl_FKbmLPI/AAAAAAAABxI/yoohAxlj0Q8/s640/columns_dark.jpg"); /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /* besar hurup kotak utama */
}

Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.

• warna merah, URL Image background ( disesuaikan dengan warna dan tema blog silakan diganti dengan image yang sesuai.
• warna orange, kode warna background ( disesuaikan dengan warna dan tema blog silakan diganti dengan warna yang sesuai. ( dapatkan kode warna disini )
• warna hijau,  ukuran untuk menu utama ( bentuk ujung lengkung / kotak, makin besar angka makin lengkung )

Langkah Kedua 

• untuk langkah selanjutnya bisa kamu lihat pada posting Cara mudah membuat TAB VIEW WIDGET.
• Lihat contoh penggunaan ------------------->  SAMPLE BLOG

Selamat Mencoba...!! 

Membuat Top Posting Berdasar jumlah komentar posting

Membuat Top Posting berdasar jumlah komentar terbanyak merupakan salah satu pilihan yang bisa kamu pakai sebagai tambahan widget untuk mempercantik blog.

Ada 2 macam top posting yang saat ini ada yaitu :

1. Top Posting berdasar tingkat popularitas
2. Top Posting berdasarkan jumlah komentar yang ada.

Caranya adalah sebagai berikut :

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

<h3>10 Posting Terpopuler</h3>
<br />
<script language="javascript">
titlebold=false;
numposts=9999;
maxshowresult=10;
explanation="komentar";
home_page="NAMA BLOG KAMU.blogspot.com";
</script>
<script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/toppost.js"></script>

Simpan dan lihat hasilnya.

Keterangan :

• Warna Merah, Alamat URL blog kamu
• Warna Hijau,  Keterangan yang akan muncul pada bagian akhir judul posting "Judul posting ( 30 Komentar )"
• Warna Kuning, Judul Top Posting ( Bisa kamu hilangkan atau kamu ganti dengan kata kata kamu sendiri )

______________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Membuat Menu Horizontal Sederhana

Menu horizontal/vertikal memang dibutuhkan karena bisa membuat blog kamu menjadi tampak lebih proffesional dan salah satu alternatif dimana kamu bisa menghemat tempat dengan menampilkan label atau link URL kamu sesuai dengan tema / label blog kamu.

Disini kamu bisa membuat menu dengan langkah sederhana dan sudah tentu hasilnya juga sederhana, tapi dengan sedikit kreativitas kamu bisa membuat menu ini jadi tampil lebih bagus.
Nah..! kalau kamu pingin ikuti langkah2 berikut :

Langkah Pertama

• Login ke akun Blogger kamu.
  
• Dari halaman dashboard, pilih Edit HTML.
  
• Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
  
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

/* Menu Horizontal
----------------------------------------------- */
.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #000000;}
.menuhorisontal ul{margin:0; padding:0; padding-left:0px; font:13px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#ffffff; background:#000000;}
.menuhorisontal li a:hover{color:#FFFFFF; background:#2E2EFE}

Pada bagian yang diberi warna merah, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada warna huruf maupun background sesuai dengan blog kamu. 

Langkah Kedua

• Masuk Layout
• Pilih tab Elemen Halaman ( Page Element ).
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
• Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<div style="overflow:no; width:100%; height:100%; padding:0px; border:1px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://kibagus-homedesign.blogspot.com/" target="_blank">HOME</a>

<a href="#" target="_blank">menu 1</a>

<a href="#" target="_blank">menu 2</a>

<a href="#" target="_blank">menu 3</a>

<a href="#" target="_blank">menu 4</a>

<a href="#" target="_blank">menu 5</a>

<a href="http://kibagus-homedesign.blogspot.com/" target="_blank">Kibagus-com</a>

</li>
</div>
</div>

Pada tulisan yang tercetak merah dapat kamu ubah disesuaikan dengan Alamat URL kamu tuju. Begitupun dengan judul Menu-1, dst dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara mengatur ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

simpan dan lihat hasilnya... contohnya adalah menu yang ada di blog punyaku ini...!!
Selamat Mencoba...!

Membuat menu horizontal dengan Tab Animasi warna warni

Membuat menu horizontal dengan animasi tentu akan sangat menarik, kali ini kita coba membuat menu horizontal dengan animasi tab warna warni.

sample - blog

 

sample - blog 

jenis menu ini hanya untuk single line, tidak ada drop menu.

Kita langsung ke TKP saja biar jelas
Langkah Pertama

• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
• Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut.

#info {height:auto;}

#outer {display:block; position:relative; background:transparent; padding:2em; text-align:center; margin:40px 15px;}

#outer h2 {margin-bottom:1em;}

#navigation {background:transparent; margin:0 auto; height:3em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}

#navigation li {display:block; float:left; margin:0 1px;}

.snazzy {background:transparent;}

.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:block; font-size:1px;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

.b1, .b2, .b3 {height:1px;}

.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}

.b1 {margin:0 5px; background:#fff;}

.b2 {margin:0 3px; border-width:0 2px;}

.b3 {margin:0 2px;}

.b4 {height:2px; margin:0 1px;}

.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}

a.menu:hover {background:transparent; cursor:pointer;}

a.menu:hover span {padding-top:10px; background:#888;}

a:menu:hover b {background:#888;}

.red {background:#c00;}

.orange {background:#f90;}

.yellow {background:#b8b800;}

.green {background:#090;}

.blue {background:#00c;}

.indigo {background:#309;}

.violet {background:#c6c;}

.grey {background:#888;}

a:hover b.red {background:#888;}

a:hover b.orange {background:#888;}

a:hover b.yellow {background:#888;}

a:hover b.green {background:#888;}

a:hover b.blue {background:#888;}

a:hover b.indigo {background:#888;}

a:hover b.violet {background:#888;}

.active {padding-top:10px; background:#888; cursor:default;}

#navigation2 {clear:both; background:transparent; margin:0 auto; height:3em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}

#navigation2 li {display:block; float:left; margin:0 1px;}

.pad {display:block; height:1em;

/* hide overflow:hidden from IE5/Mac */

/* \*/

overflow: hidden;

/* */ }

a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}

a.menu2:hover {background:transparent; cursor:pointer;}

a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}

a.menu2:hover .pad {height:0.2em;}

Simpan dan lihat hasilnya.

Keterangan :

• Warna Merah, Kode untuk animasi tab arah ke bawah
• Warna Hijau,  Kode untuk animasi tab arah ke atas
• Copy paste kode di atas secara keseluruhan warna merah dan hijau hanya menunjukan tempat untuk editing apabila kamu ingin merubah warna atau lainnya ( background, lebar menu, tinggi menu )

Langkah kedua

1. Klik Page Element
2. Klik Add Gadget
3.  
   
4. Klik plus button (+) for HTML/JavaScript. (img)
   
   
   
5. Copy and paste kode dibawah ini

Kode-1 untuk Tab animasi arah ke bawah :

<div id="info">
<div id="outer">
<div id="navigation">
<ul>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent red">1</span>
<b class="b4 red"></b><b class="b3 red"></b><b class="b2 red"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent orange">2</span>
<b class="b4 grey"></b><b class="b3 grey"></b><b class="b2 grey"></b><b class="b1"></b>
</b></a>
</li>
<li>

<a class="menu" href="#"><b class="snazzy"><span class="boxcontent yellow">3</span>
<b class="b4 yellow"></b><b class="b3 yellow"></b><b class="b2 yellow"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent green">4</span>
<b class="b4 green"></b><b class="b3 green"></b><b class="b2 green"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent blue">5</span>
<b class="b4 blue"></b><b class="b3 blue"></b><b class="b2 blue"></b><b class="b1"></b>
</b></a>
</li>

<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent indigo">6</span>
<b class="b4 indigo"></b><b class="b3 indigo"></b><b class="b2 indigo"></b><b class="b1"></b>
</b></a>
</li>
<li>
<a class="menu" href="#"><b class="snazzy"><span class="boxcontent violet">7</span>
<b class="b4 violet"></b><b class="b3 violet"></b><b class="b2 violet"></b><b class="b1"></b>
</b></a>
</li>
</ul>

</div> <!-- end of navigation --></div></div>

Simpan dan lihat hasilnya.

Kode-2 untuk Tab animasi arah ke atas :

<div id="navigation2">
<ul>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 red"></b><b class="b3 red"></b><b class="b4 red"></b><span class="boxcontent red">1</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 orange"></b><b class="b3 orange"></b><b class="b4 orange"></b><span class="boxcontent orange">2</span>
</b></a>
</li>
<li>

<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 yellow"></b><b class="b3 yellow"></b><b class="b4 yellow"></b><span class="boxcontent yellow">3</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 green"></b><b class="b3 green"></b><b class="b4 green"></b><span class="boxcontent green">4</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 blue"></b><b class="b3 blue"></b><b class="b4 blue"></b><span class="boxcontent blue">5</span>
</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 indigo"></b><b class="b3 indigo"></b><b class="b4 indigo"></b><span class="boxcontent indigo">6</span>

</b></a>
</li>
<li>
<a class="menu2" href="#"><b class="pad"></b><b class="snazzy"><b class="b1"></b><b class="b2 violet"></b><b class="b3 violet"></b><b class="b4 violet"></b><span class="boxcontent violet">7</span>
</b></a>
</li>
</ul>

</div> <!-- end of navigation2 -->
<!-- end of outer -->

<!-- end of info -->

Simpan dan lihat hasilnya.

Keterangan :

• Silahkan pilih salah satu kode yang akan kamu gunakan kode-1 atau kode 2 ( kamu bisa gunakan kedua duanya sekaligus )
• Warna Merah, Nama nama menu sesuai dengan kebutuhan
• Warna Hijau,  Alamat URL yang akan kamu tuju sesuai dengan nama menu

________________________________________________________

Ok.. Selamat mencoba..!

Semoga bermanfaat....!!

Sumber : Web design and Assistance-css play