Cara Pasang Tab Menu Di Bawah Header

Cara Pasang Tab Menu Di Bawah Header

Membuat/memasang Tab Menu di bawah header seperti yang ada di bawah header template seri.

Bagi template yang telah ada tab menu tapi yang biasa boleh juga mengubah dengan menggantikan kode css yang seri sediakan ini.

Panduan Memasang:

Masuk Ke Blogger
Klik Tab Design
Klik Tab Edit HTML
Cari kode ini, #header-wrapper{. Kode lengkap seperti di dalam petak di bawah.

#header-wrapper{
float:left;
margin:10px 5px 12px 5px;
padding:0px 0px 0px 0px;
width:908px;
height:200px;
background: url(http://i1234.photobucket.com/albums/ff405/seribahasa/headerbutterfly.jpg) top center repeat;
border-top:13px solid #009900;
border-bottom:13px solid #009900;
border-left:13px solid #006600;
border-right:13px solid #006600;
}
#header{width:885px;margin:0px 0px 0px 0px;padding:5px 5px 5px 5px;text-align:right}
#header h1{
color:#339900;
font:$blogTitleFont;
font-variant:small-caps;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 10px;
}
#header h1 a{text-decoration:none;color:$blogTitleColor}
#header h1 a:hover{text-decoration:none;color:$blogDescriptionColor}
#header .description{
color:#99cc00;
font:$blogDescriptionFont;
margin:0px 0px 0px 0px;
padding:1px 20px 25px 20px;
}
#header h1 p,
#header .description p{margin:0;padding:0}
#header1 a img{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border:0}

Salin kode di bawah ini dan pastekan di bawah kode CSS header.

#NavbarMenu{
width:919px; (Sesuaikan kelebaran NavbarMenu dengan saiz template)
float:left;
margin:0;
padding:0;
}
#nav{margin:0;padding:0;
}
#nav ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#nav li{
list-style:none;
margin:0;
padding:0;
}
#nav li a, #nav li a:link, #nav li a:visited{
background:#009900 url(http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center; (Tukar URL background mengikut kesesuaian template anda. Jika ingin mengunakan color kode buang kode bermula dari sini: (http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center.)
color:#7fff00; (Tukar warna mengikut kesesuai template)
display:block;
font-size:14px; (Ukuran saiz font)
font-family:trebuchet ms, Times New Roman;
font-weight:bold;
text-transform:none;
margin-right:1px; (Jarak antara petak Tab)
padding-top:6px; (Jarak antara Header dengan Menu Tab)
padding-bottom:5px; (Jarak antara Menu Tab dengan main-wrapper atau main-post)
padding-left:13px; (Jarak sebelah kiri Menu Tab dengan content-wrapper)
padding-right:13px; (Jarak sebelah kanan Menu Tab dengan content-wrapper)
border:2px solid #003300; (lebar serta warna sempadan Menu Tab)
-moz-border-radius-topleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-topright:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomright:15px; (Untuk mengubah bentuk tepi Menu Tab)
}
#nav li a:hover, #nav li a:active{
background: #CCFF99; (Warna latar)
color:#005b06; (Warna font)
margin:0;
padding-top:6px; (Jarak antara Header dengan Menu Tab)
padding-bottom:5px; (Jarak antara Menu Tab dengan main-wrapper atau main-post)
padding-left:13px; (Jarak sebelah kiri Menu Tab dengan content-wrapper)
padding-right:13px; (Jarak sebelah kanan Menu Tab dengan content-wrapper)
text-decoration: none;
-moz-border-radius-topleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-topright:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomleft:15px; (Untuk mengubah bentuk tepi Menu Tab)
-moz-border-radius-bottomright:15px; (Untuk mengubah bentuk tepi Menu Tab)
}
#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#CCFF99; (Warna latar)
width:150px; (Lebar Tab li)
color:#005b06; (Warna font)
font-size:14px; (Saiz font)
font-family:trebuchet ms, Times New Roman;
font-weight:normal;
text-transform:none;
float:none;
margin:0;
padding:7px 10px;
border:2px solid #006400; (lebar serta warna sempadan Menu Tab li)
}
#nav li li a:hover, #nav li li a:active{
background:#66CC33; (Warna latar)
color:#000066; (Warna font)
padding:7px 10px;
}
#nav li{
float:left;
padding:0;
}
#nav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; (Lebar Tab li)
margin:0;
padding:0;
}
#nav li ul a{width:140px;}
#nav li ul ul{
margin:-32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left: auto;}
#nav li:hover, #nav li.sfhover{position: static;}

Catatan:
Sila rujuk kepada ayat yang bertanda MERAH untuk melakukan pengubahsuaian.

Contoh #header-wrapper{ dan #NavbarMenu{ yang telah dicantum secara betul.

#header-wrapper{
float:left;
margin:10px 5px 12px 5px;
padding:0px 0px 0px 0px;
width:908px;
height:200px;
background: url(http://i1234.photobucket.com/albums/ff405/seribahasa/headerbutterfly.jpg) top center repeat;
border-top:13px solid #009900;
border-bottom:13px solid #009900;
border-left:13px solid #006600;
border-right:13px solid #006600;
}
#header{width:885px;margin:0px 0px 0px 0px;padding:5px 5px 5px 5px;text-align:right}
#header h1{
color:#339900;
font:$blogTitleFont;
font-variant:small-caps;
margin:0px 0px 0px 0px;
padding:10px 10px 0px 10px;
}
#header h1 a{text-decoration:none;color:$blogTitleColor}
#header h1 a:hover{text-decoration:none;color:$blogDescriptionColor}
#header .description{
color:#99cc00;
font:$blogDescriptionFont;
margin:0px 0px 0px 0px;
padding:1px 20px 25px 20px;
}
#header h1 p,
#header .description p{margin:0;padding:0}
#header1 a img{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border:0}

#NavbarMenuleft{
width:919px;
float:left;
margin:0;
padding:0;
}
#nav{margin:0;padding:0;
}
#nav ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#nav li{
list-style:none;
margin:0;
padding:0;
}
#nav li a, #nav li a:link, #nav li a:visited{
background:#009900 url(http://i755.photobucket.com/albums/xx200/Seri_07/Rosec1.jpg) top center;
color:#7fff00;
display:block;
font-size:14px;
font-family:trebuchet ms, Times New Roman;
font-weight:bold;
text-transform:none;
margin-right:1px;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border:2px solid #003300;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li a:hover, #nav li a:active{
background: #CCFF99;
color:#005b06;
margin:0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited{
background:#CCFF99;
width:150px;
color:#005b06;
font-size:14px;
font-family:trebuchet ms, Times New Roman;
font-weight:normal;
text-transform:none;
float:none;
margin:0;
padding:7px 10px;
border:2px solid #006400;
}
#nav li li a:hover, #nav li li a:active{
background:#66CC33;
color:#000066;
padding:7px 10px;
}
#nav li{
float:left;
padding:0;
}
#nav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0;
padding:0;
}
#nav li ul a{width:140px;}
#nav li ul ul{
margin:-32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left: -999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left: auto;}
#nav li:hover, #nav li.sfhover{position: static;}

Sekarang kita pergi di bahagian kode HTML dan cari kode ini, <div id='header-wrapper'>. Kode lengkap seperti di dalam petak di bawah.

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Seri Bahasa (Pengatas)' type='Header'/>
</b:section>
</div>

Salin kode di bawah ini dan pastekan di bawah kode HTML header-wrapper.

<div id='NavbarMenu'>
<ul id='nav'>
<li>
<a href='URL Blog Di Sini'>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Tajuk Utama Di Sini</a>
<ul>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
</ul>
</div>
<div style='clear:both;'/>

Contoh <div id='header-wrapper'> dan <div id='NavbarMenu'> yang telah di cantum secara betul.

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Seri Bahasa (Pengatas)' type='Header'/>
</b:section>
</div>

<div id='NavbarMenu'>
<ul id='nav'>
<li>
<a href='http://www.seribahasa.com/'>Peribahasa</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/05/peribahasa.html'>A</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Simpulan Bahasa</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/05/simpulan-bahasa.html'>Simpulan Bahasa</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>KKMS</a>
<ul>
<li><a href='http://www.seribahasa.com/2009/09/kurik-kundi-merah-saga-adat.html'>Adat</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Pantun Pilihan</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/05/pantun-anak-dagang.html'>Anak Dagang</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Sajak</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/07/aku-seorang-bloger.html'>Aku Seorang Bloger</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Blogger Tips</a>
<ul>
<li><a href='http://www.seribahasa.com/2010/05/rahsia-mendapat-pagerank.html'>Page Rank</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Blogger Tools</a>
<ul>
<li><a href='http://www.seribahasa.com/2011/01/panduan-membuat-kode-html-parser-box.html'>HTML Parser Box</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
<li>
<a href=''>Modifikasi Template</a>
<ul>
<li><a href='http://www.seribahasa.com/2011/03/modifikasi-blogger-template.html'>Modifikasi Template</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
<li><a href='URL Artikel Di Sini'>Tajuk Artikel Di Sini</a></li>
</ul>
</li>
</ul>
</div>
<div style='clear:both;'/>

Okey, last sekali Save Template kemudian klik View blog untuk melihat hasilnya. Kalau tak berapa faham sila tinggalkan pesan di komen box, seri akan jelaskan seberapa yang boleh.

menu horizontal blogg

Style Nav : O-OM template

Untuk Blogger.com

1. Login di Blogger
2. Rancangan » Edit HTML » Expand Template Widget
3. Cari ]]></b:skin>
4. Letakan kode CSS berikut, diatasnya

#nav { background:url(“http://3.bp.blogspot.com/_C6KkooKXCEw/TICgsEwQ6VI/AAAAAAAAGzc/uKEKlKRK6mY/s1600/topmenu-c.png”) no-repeat scroll 0 0 #FFFFFF; clear:both; height:32px; margin:0 auto; padding:4px 0 0; } #nav-left { display:inline; float:left; padding-left:6px; padding-top:1px; width:660px; } #nav-right { display:inline; float:right; padding-right:15px; padding-top:3px; width:200px; } #nav ul { font:bold 1em Verdana,Arial,Helvetica,sans-serif; margin:0; overflow:hidden; padding-left:0; position:relative; } #nav ul li { float:left; list-style:none outside none; } #nav ul li a, #nav ul li a:visited { color:#FFFFFF; display:block; margin:1px 4px; padding:4px; text-decoration:none; } #nav ul li a:hover { -moz-border-radius:3px 3px 3px 3px; background-color:#999999; color:#FFFFFF; margin:1px 4px; padding:4px; } #nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover { -moz-border-radius:3px 3px 3px 3px; background-color:#999999; color:#FFFFFF; margin:1px 3px; padding:4px; }

NB : Kamu bebas mengganti seperti warna background, ukuran lebar, dll sesuai selera kamu!
5. Untuk meletakanya di dalam template, cari kode : <div id=”header-wrapper”>
   kalau tidak ada, coba pakailah add-ons mozilla FIREBUG! untuk mempermudahnya
6. Setelah itu, pastekan kode HTML berikut di bawah kode tadi. Ini kode HTML-nya :

<div id=”nav”> <div id=”nav-left”> <ul> <li><a href=”#“><img border=”0″ style=”padding: 0px;” src=”http://2.bp.blogspot.com/_C6KkooKXCEw/TIKt4PnR_DI/AAAAAAAAG1M/fYAOYZ43bys/s200/icon-home.png”></a></li> <li><a  href=”#“>About Me</a></li> <li><a  href=”#“>Archives</a></li> <li><a  href=”#“>Contact</a></li> <li><a  href=”#“>Help Me</a></li> <li><a href=”#“>Guest Book</a></li> <li><a href=”#“>Testimonials</a></li> <li><a  href=”#“>Top Post</a></li> </ul> <script language=”javascript”>setPage()</script> </div> <div id=”nav-right”> <div id=”tsrc-m”> <div id=”src-m”> <form name=”searchform” method=”get” id=”searchform” action=”/search”> <input type=”text” value=”Cari artikel..” onfocus=”if (this.value == &quot;Cari artikel..&quot;) {this.value = &quot;&quot;}” onblur=”if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel..&quot;;}” name=”q” id=”s-m” class=”keyword”> <input type=”image” style=”border: 0pt none; vertical-align: top; padding-top: 3px;” src=”http://1.bp.blogspot.com/_C6KkooKXCEw/TIBqtV6pdmI/AAAAAAAAGyM/QUBsym_R9V0/s200/search-c.png”> </form> </div> </div> </div> </div>

NB : Ubahlah warna merah atau nama menu + URLnya sesuai kebutuhan kamu, seperti Contact, About Me, kamu dapat bebas menggantinya!
7. Selesai, dan Simpan Template, semoga berhasil!!
8. Semoga Bermanfaat

Cara Membuat Menu Horizontal Dengan CSS

Sebagian besar sudah banyak sobat blogger mengetahui bagaimana cara membuat menu horizontal, dan sudah banyak dibahas pada blog-blog sobat mengenai menu horizontal baik itu cara membuat atau meletakkan pada template.

Disini saya akan sedikit mengulas cara membuat menu horizontal sederhana dengan CSS dan sedikit berbagi apa yang saya ketahui kepada sobat blogger yang baru memulai untuk membuat blog… :)

Ok langsung saja tanpa banyak cerita, berikut langkah-langkahnya :

Membuat kode CSS nya seperti gambar diatas yang perlu sedikit kita ketahui bahwa kode CSS ditulis dengan banyak cara salah satu cara metode penulisan seperti yang saya buat berikut ini, dan kode tersebut pada umumnya diletakkan antara kode <head> dan </head> dan biasanya diletakkan diatas kode ]]></b:skin>

<style type="text/css" media="screen">
.menu_hor {
float:left;
padding:0;
margin:100px 70px
color:#FFFFFF;
background:#000000;
width:100%;
border:solid 1px #000000;
clear:both;
}
/*warna menu horizontal normal*/
.menu_hor a,
.menu_hor a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:12px;
color:#FFFFFF;
background-color:#000000;
text-decoration:none;
}
.menu_hor ul {
list-style-type:none;
padding:0; margin:0;
}
.menu_hor ul li {
float:left;
position:relative;
z-index:auto !important;
z-index:1000;
border-right:solid 1px #000000;
border-left:solid 1px #000000;
}
.menu_hor ul li a {
color: #FFFFFF;
background: #000000;
float:none !important;
float:left;
display:block;
height:30px;
line-height:30px;
padding:0 10px 0 10px;
text-decoration:none;
}
.menu_hor ul li ul {
display:none;
border:none;
color: #FFFFFF;
background: #000000;
width:1px
}
.menu_hor ul li:hover a {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li:hover ul {
display:block;
position:absolute;
z-index:999;
top:29px;
margin-top:1px;
left:0;
}
.menu_hor ul li:hover ul li a {
display:block;
width:12em;
height:auto;
line-height:1.3em;
margin-left:-1px;
padding:5px 10px 5px 10px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF; /*pemberian warna subcells*/
}
.menu_hor ul li:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna hover pada subcells*/
}
.menu_hor ul li a:hover {
background-color:#FFFF00;
text-decoration:none;
color:#000000; /*warna hovering main cells*/
}
.menu_hor ul li a:hover ul {
display:block;
width:12em;
position:absolute;
z-index:999;
top:29px;
left:0;
}
.menu_hor ul li ul li a:visited {
background-color:#0000FF;
color:#FFFFFF; /*warna subcells keadaan normal*/
}
.menu_hor ul li a:hover ul li a {
display:block;
width:12em;
height:1px;
line-height:1.3em;
padding:4px 16px 4px 16px;
border-left:solid 1px #000000;
border-bottom: solid 1px #000000;
background-color:#0000FF;
color:#FFFFFF;
}
.menu_hor ul li a:hover ul li a:hover {
background-color:#CA0000;
text-decoration:none;
color:#FFFF00; /*warna subcells hovering mode*/
}
</style>

Sobat perhatikan bahwa penulisan CSS ditulis diawali tag pembuka <style type="text/css" media="screen"> dan diakhiri tag penutup </style>.
Penulisan .menu_hor sebenarnya tidak mutlak dalam artian sobat bisa menggantinya dengan kata-kata lain seperti contoh misalnya .menu_horizontal atau .menuku dengan catatan bahwa pada saat menulis kode pemanggil sobat mesti konsisten dengan perubahan tersebut.

Membuat kode untuk memanggil dan menampilkan pada layout template kode CSS sebagai berikut :

<div class="menu_hor">
<ul><li><a href="#">Home</a>
</li></ul>
<ul><li><a href="#">new_item1</a>
</li></ul>
<ul><li><a href="#">new_item2</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</li></ul>
<ul><li><a href="#">new_item3</a>
</div>

Penggunaan kode untuk memanggil kode CSS biasanya penulisannya didahului tag pembuka <div class="menu_hor"> dan diakhiri tag penutup </div>. div clss=”menu_hor” yang saya maksud tadi pada pembahasan bagian pertama bahwa antara kode CSS dan kode pemanggil mesti dalam keadaan satu clas dalam hal ini kode CSS dan pemanggil berada dalam clss menu_hor.

Mudah bukan cara membuat menu horizontal, adapun dengan nilai-nilainya silahkan sobat berkreasi. Contoh diatas adalah dasar cara membuat menu horizontal. Untuk bagaimana cara memodifikasi silahkan googling dan banyak sobat-sobat blogger membahas cara memodifikasi menu horizontal dengan CSS. Selamat mencoba.

Membuat Menu Horizontal

Membuat Menu Horizontal

Kendhin

Menu-Menu

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:



Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.

blackleft.gif	blackright.gif
greenleft.gif	greenright.gif
redleft.gif	redright.gif
unguleft.gif	unguright.gif
yellowleft.gif	yellowright.gif
blueleft.gif	blueright.gif
whiteleft.gif	whiteright.gif

Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....

Membuat Menu Vertikal (Vertical)

Membuat Menu Vertikal (Vertical)

Kendhin

Menu-Menu

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.

Dah gitu aja. Gampang kan???? :D

Cara Cepat Daftarkan Blog Anda ke Berbagai Mesin Pencari

Cara Cepat Daftarkan Blog Anda ke Berbagai Mesin Pencari

Tulisan ini di tujukan bagi para blogger pemula yang baru mulai bergelut di dunia blogger.
Setelah anda selesai membuat, medesain, menulis segudang artikel tentu rekan-rekan blogger ingin tulisan yang sudah di tulis dengan sepenuh hati tersebut bisa terindex di mesin pencari seperti google, yahoo, msn dan banyak lagi mesin pencari lainnya sehingga banyak orang yang akan bisa membaca dan memahami ide-ide dalam tulisan yang rekan-rekan torehkan.
Bagi anda pengguna blogger, jangan kira biarpun blogger milik om google tanpa mendaftarkan blog anda, otomatis akan terindex di google..ngimpiii....!!!
Berikut adalah langka-langkahnya :

Buka situs http://www.submitexpress.com. Setelah masuk kesitus tersebut pilih FREE WEBMASTER TOOLS + FREE SUBMISSION, terlihat seperti gambar di bawah.

Setelah ke halaman Free Submission, rekan-rekan blogger akan diminta untuk mengisi kolom seperti yang terlihat pada gambar di bawah. Pada kolom url isikan dengan alamat blog rekan-rekan.

Jika rekan-rekan ingin menerima email informasi dari situs ini maka silahkan centang pada box newsletters seperti terlihat pada gambar di atas.
Terakhir klik tombol Submit Now untuk mendaftakrkan blog rekan-rekan ke berbagai jenis mesin pencari.

Membuat Menu di Bawah Header / Judul Blog

Membuat Menu di Bawah Header / Judul Blog

0digg

Bagi rekan blogger yang menggunakan template yang belum difasilitasi dengan menu horisontal dibawah header pada blognya, berikut saya postkan bagaimana cara membuat menu tersebut. Fungsi dan kegunaan menu ini adalah agar memudahkan kita dalam menelusuri  semua isi yang terkandung didalam blog tersebut (baca: easy to navigate)  .Yuk kita mulai...



Hal pertama yang harus dilakukan adalah login ke blogger > Layout/Tata Letak > Edit Html .
Selanjutnya Anda cari kode dibawah ini, untuk mempermudah pencarian silahkan gunakan CTRL+F

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Anda ubah kode showaddelement='no' menjadi  showaddelement='yes' , kalau sudah klik simpan ya

Setelah yang pertama sudah disimpan, sekarang klik Page elements / Elemen Laman > Tambah Gadget > HTML/Javascript , copy kode dibawah ini,simpan dan letakan tepat dibawah header.
Untuk menambah gadget dibawah header bisa baca  disini

<a href="http://www.masbugie.com " class="navigation">HOME</a>
<a href="http://www.masbugie.com " class="navigation">CONTACT</a>
<a href="http://www.masbugie.com " class="navigation">BUKU TAMU</a>
<a href="http://www.masbugie.com " class="navigation">FACEBOOK</a>
<a href="http://www.masbugie.com " class="navigation">TWITER</a>
<a href="http://www.masbugie.com " class="navigation">DOWNLOAD</a>
<a href="http://www.masbugie.com " class="navigation">LAIN-LAIN</a>
<a href="http://www.masbugie.com " class="navigation">CHATTING</a>

*Alamat url diatas silahkan sesuaikan dengan blog Anda.


Hal ketiga adalah supaya menu itu menimbulkan efek warna sehingga menjadi kelihatan menarik.

Klik Tata Letak > Edit HTML , cari kode </b:skin> , agar mudah gunakan tombol CTRL+F
Copy kode dibawah ini dan letakan tepat diatas kode  </b:skin> kemudian simpan.

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

Perhatikan kode yang berwarna biru adalah warna tombol dan efek hover dan bisa dirubah sesuka hati Anda.Dan yang berwarna merah adalah jarak antara tombol satu dengan lainnya, silahkan Anda sesuaikan sesuai selera.

Untuk mengetahui kode-kode warna dalam HTML silahkan lihat juga disini

Selesai, semoga bermanfaat....salam

Read more: Membuat Menu di Bawah Header / Judul Blog | Mas Bugie [dot] com http://www.masbugie.com/2010/05/membuat-menu-di-bawah-header-judul-blog.html#ixzz1f4skwm6Q

Langkah-langkah cara membuat Read More Otomatis di Blogspot

Cara membuat Read More otomatis di Blogspot dengan menambahkan kode javascript pada template blog. Kali ini yang akan saya bahas mengenai cara membuat read more di blogspot atau blogger. Kenapa cara membuat read more di wordpress tidak dibahas juga? wah kalao read more di wordpress tidak bisa dibuat secara otomatis, tapi dengan cara manual setiap postingan. Ok kita mulai bahasan mengenai cara membuat read more otomatis di blogspot.

Bagaimana Cara membuat Read More otomatis di blogspot?

Cara membuat read more otomatis di blogspot sangat mudah. Sebelum melangkah  ke cara membuat read more otomatis di blogspot lebih baik kita tahu apa itu read more? dan apa fungsi read more? Read more dalam bahasa indonesia yaitu " Baca Selengkapnya " dan fungsi read more itu sendiri adalah meminimalis penggunaan halaman blog agar terlihat lebih rapi dan menarik. Read more otomatis ini akan memotong tampilan depan artikel yang panjang dan anda bisa menentukan berapa banyak huruf yang akan ditampilkan di halaman depan, begitu pengunjung membuka Read more atau baca selengkapnya barulah pengunjung bisa membaca artikel penuh blog anda. Sekarang lanjut ke langkah cara membuat read more otomatis di blogspot.

Langkah-langkah cara membuat Read More Otomatis di Blogspot

• Login ke Blog anda
• Buka halaman design > Edit HTML > centang Expand template widget
• Cari kode </head> gunakan CTRL + F untuk mempermudah pencarian
• Paste kode berikut tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

• Selanjutnya cari kode <data:post.body/> atau <p><data:post.body/></p>  ( seperti biasan gunakan CTRL + F untuk mempermudah pencarian. Jika ditemukan 2 kode yang sama, gunakan atau ganti yang pertama.
• Jika sudah ketemu silahkan anda ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

• Finish simpan template dan lihat hasilnya

Cara membuat Read More otomatis di Blogspot ini bisa anda rubah sebagian. Yang bisa dirubah adalah berwarna merah saja dan berikut ini adalah keterangannya :

1. summary_noimg = 430; apabila artikel anda tanpa gambar satupun maka yang akan tampil pada halaman depan adalah 430 huruf
2. summary_img = 340; apabila artikel anda berisi gambar maka yang akan tampil pada halaman depan adalah 340 huruf dan gambar
3. img_thumb_height = 100; ini adalah ukuran tinggi gambar / thumbnail yang akan muncul di halaman depan
4. img_thumb_width = 120; sedangkan yang ini adalah lebar gambar / thumbnail di halaman depan.
5. Anda juga bisa mengubah Icon read more http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif silahkan diganti URL icon yang anda inginkan. Atau anda ingin mengubah Icon Read more tersebut menjadi tulisan saja misalnya " >> Read more ", maka anda tinggal menghapus / mengganti kode <img src="http://lh3.ggpht.com/_kTaFrEr_318/SkKGIoU-oPI/AAAAAAAAA9g/5A_nTHvFgiI/readmore_thumb%5B2%5D.gif"></img> menjadi tulisan >> Read More atau Baca selengkapnya dll.

Cara Membuat Foto Menjadi Lukisan

Bagikan 

Selasa, Februari 08, 2011

Apakah anda suka melihat gambar Lukisan atau foto - foto sketsa, jika suka pasti anda ingin sekali membuat foto atau gambar anda di buat seperti itu. Untuk itu anda pasti akan mengeluarkan uang untuk membuat foto menjadi lukisan atau sketsa.

Tapi sekarang anda tidak perlu lagi repot - repot untuk merubah foto menjadi sebuah Lukisan maupun sketsa, karena dengan software FotoSketcher v1.97 anda akan merubah foto sesuai dengan keinginan anda dan anda dapat melakukannya dengan sangat mudah.

FotoSketcher merupakan aplikasi yang dibuat khusus untuk merubah foto menjadi Lukisan yang indah, sketsa pensil dan masih banyak yang lainnya. Penggunaan FotoSketcher sangat mudah, karena memiliki tampilan yang sangat simple, sehingga tidak membingungkan anda pada saat menggunakannya.

Ada banyak pilihan "Drawing Style" yang telah disediakan, seperti Pencil Sketch, Pen and Ink Sketch, Painting, dll. Anda tinggal pilih sesuai selera. Kemudian anda tinggal atur settingan gambar yang tepat, anda dapat meliha perbuahan gambar secara langsung pada kotak preview, jika sudah sesuai anda tinggal meng-klik tombol "Draw It!" anda juga dapat menambahkan frame pada foto, dengan men-check list Add a Frame pada Drawing Parameters.

FotoSketcher 1.97 ini merupakan software yang dapat anda gunakan tanpa harus menggunakan Crack, SN, Keygen dan sejenisnya. Karena software ini 100% Freeware seperti yang dikatakan pada situs resminya.

http://www.fotosketcher.com/index.htm

FotoSketcher memiliki 2 versi, yaitu versi installer dan juga versi portable bagi anda yang ingin menggunakan aplikasi ini tanpa harus meng-instalnya terlebih dahulu..

Baiklah untuk mendownload FotoSketcher 1.97 ini, silakan anda klik link download dibawah ini..

FotoSketcher 1.97 full software
http://usershare.net/kkd7oo8ggaan (4.2 Mb)

FotoSketcher 1.97 portable software
http://usershare.net/49ay9wswv75l (3.9 Mb)

Sumber : http://teguhhariyadi.blogspot.com/2011/02/cara-membuat-foto-menjadi-lukisan.html#ixzz1HKdLOEhT

Cara Mengisi Paypal dengan Ipanel online - Survey Dapat Dollar

Cara Mengisi Paypal dengan Ipanel online - Survey Dapat Dollar. Jika paypal sobat sekarang sedang kosong, maka tak perlu bingung. Sobat bisa mengisinya dengan receh dollar gratisan yang bertebaran di internet. Dalam postingan kali ini kita akan membahas bagaimana cara mendapatkan dollar dengan mudah hanya dengan mengisi survey (tidak sama dengan AWs*rveys, situs survey yang akan kita bahas ini benar2 membayar). Sebelum membahas lebih jauh, silahkan untuk mempersiapakan akun/alamat paypal anda, karena situs ini akan membayar kita melalui paypal. Belum punya paypal dan belum tahu apa itu paypal? Silahkan baca tutorialnya di Cara Membuat Paypal.

Ipanelonline adalah Market Research International terpercaya karena termasuk dalam anggota/member ESOMAR (organisasi dunia yang menangani Market Research) yang didirikan sejak tahun 2004 di Shanghai China dan sudah mempunyai cabang di beberapa negara yaitu di HongKong, Taiwan, Japan, Singapore, Korea, India, Thailand, Malaysia, Australia, New Zealand, Philippines, Vietnam, dan juga negara kita tercinta, Indonesia.

Dengan Ipanelonline ini kita bisa mendapatkan uang hanya dengan cara mengisi atau ikut serta dalam survey. setiap kali kita mengikuti survey kita akan memperoleh poin dengan jumlah tertentu, di mana dengan poin (akumulasi poin) tersebut bisa kita tukar dengan barang maupun uang. Lalu bagaimana dengan biaya pendaftaran? Biaya pendaftaran gratis alias nggak dipungut biaya.. ;D

Oh iya, jika sobat masih ragu dengan keaslian Ipanelonline, silahkan di-search di Google dengan kata kunci "Bukti pembayaran ipanelonline", maka akan muncul hasil penelusuran yang sangat banyak sekali...berikut salah satu contoh bukti pembayaran yang diperoleh oleh seorang member Ipanelonline dari Indonesia (screenshoot berikut diperoleh dalam sehari)

Wao...banyak sekali ya...

Update:
Ternyata ipanelonline benar2 membayar, berikut bukti pembayarannya
1. Payout pertama - $18,72
2. Payout kedua - $114,75

Bagi sobat-sobat yang tertarik untuk bergabung dengan ipanelonline, silahkan ikuti langkah2 berikut:

1. Silahkan surfing ke situs Ipanelonline atau klik link http://id.ipanelonline.com/register.html?inviter_id=945317 (link reff)
2. Silahkan isi formulir yang ada dengan benar. Jika bisa, isilah dengan data asli sobat, karena itu lebih baik.
3. Silahkan buka email sobat, dan carilah email dari ipanelonline untuk melakukan konfirmasi
4. Seperti biasa, klik link yang berada di dalam email konfirmasi tersebut
5. Jika sudah, silahkan login ke akun ipanel anda
6. Untuk mendapatkan poin yang selanjutnya bisa diuangkan, sobat harus melakukan survey melalui menu berikut (perhatikan bagian yang saya tandai)

7. Klik pada bagian yang telah saya tandai (survei bisnis) maka nanti sobat akan dibawa ke halaman survey. Untuk memulai surtvey, silahkan untuk mengklik link survey yang memiliki tombol "ongoing" (khusus link survey yang ditandai dengan tombol "suspended", itu artinya sudah tidak tersedia untuk disurvey oleh kita)

8. Jika sudah, maka nanti sobat akan dibawa ke halaman seperti berikut

Untuk memulai survei, silahkan untuk mengklik tombol "Klik di sini untuk memulai penelitian"

9. Setelah itu sobat bisa melakukan survei, isi semua data yang diperlukan/yang diminta oleh pihak ipanelonline dengan jujur. Setelah itu, maka secara otomatis poin sobat akan bertambah sesuai dengan jumlah poin yang tertera (dijanjikan)

Lalu kapan bisa menukar poin menjadi uang?

Kita bisa mendapatkan uang kita jika kita sudah memilki poin dengan minimal 220, jika masih bingung...berikut rinciannya

-. poin 220 = Rp 20.000,- kalau di-dolarin sekitar $2,3 an (angka ini nanti yang kekirim ke paypal kita)
-. Lalu 520 = Rp 50.000,- dan
-. 1020 = Rp 100.000,-

Itu artinya jika sobat memiliki poin lebih dari 1020, maka sobat bisa menukarnya berkali2 hingga jumlah minimum di atas (220).

Trik dan tips penting dalam bermain di dunia ipanelonline:

• Peraturan paling nomor satu adalah, sobat harus jujur dengan artian dalam melakukan pengisian survey sobat harus serius alias nggak asal-asalan.
•  Data diri sobat juga diperlukan, hal ini termasuk email paypal sobat yang nantinya digunakan sebagai alat pembayaran. Jika sobat salah menulis alamat paypal, maka poin yang telah kita tukar tidak bisa kita minta kembali lagi walaupun uang yang kita request belum/tidak sampai ke akun paypal kita.
• Penting: Jangan pernah mengulangi survey yang sebelumnya pernah kita isi, karena ini termasuk pelanggaran, dan sudah jelas tertulis sebagai pelangaran oleh pihak ipanelonline.
•  Hah? Sobat merasa kesulitan dalam mendapatkan poin banyak? Santai saja, sobat bisa mengisi "survey investigasi" dan "survey mutual". Walau terbilang nilainya lebih kecil daripada "survey bisnis", tapi ingat pepatah para tetua kita..."sedikit demi sedikit lama-lama menjadi bukit"...hehe

•  Masih ada hubungannya dengan poin di atas: Jika memang sobat nggak sabaran, masih ada solusi lain kok...sobat bisa menggunakan link referral yang telah disediakan oleh pihak ipanelonline, dan nanti jika ada yang gabung dengan ipanelonline melalui link sobat, maka sobat akan mendapatkan komisi dengan jumlah poin tertentu, dan tentunya ini lumayan membantu sobat untuk mendapatkan poin yang banyak.

• Bukan hanya itu, sobat bisa meningkatkan poin sobat dengan cara ikut serta dalam menyumbang "Suara Anggota", sobat bisa menulis apa saja di sana, layaknya sobat update status di situs2 social network. Selain itu juga sobat bisa menulis artikel di kolom "Press Release", dan di setiap kegiatan sobat pada "suara anggota" dan "press release" akan mendapatkan poin yang lumayan besar juga yaitu berkisar antara 5-10.

Langkah2 Menukar Poin?

Jika sobat sudah memiliki poin yang banyak dan siap untuk ditukar, maka langkah2nya adalah sebagai berikut:

1. Klik menu "penukaran saya" lalu pilih => Poin penukaran. Maka nanti akan tampil halaman berikut

Penting: Sebelum menuju ke langkah berikut, pastikan email paypal anda benar melalui menu => Profil saya => Informasi akun => Lalu isikan "paypal payment" dengan alamat email paypal anda (jika belum tahu apa itu paypal silahkan baca tutorialnya di sini)

2. Jika sudah, silahkan untuk memilih mana saja. Yang penting sudah mencukupi poin sobat. Sebagai contoh saya akan menggunakan penukaran dengan poin sebesar 220 (Rp 20.000,-), maka akan tampil halaman seperti berikut

Klik penukaran sekarang => maka selanjutnya akan muncul halaman seperti berikut

Itu artinya transaksi berhasil, tinggal tunggu uang anda akan sampai ke akun paypal anda dalam waktu kurang lebih 24 jam...

Selamat menikmati sobat.

Jika ada masalah atau pertanyaan mengenai ipanelonline, silahkan untuk meninggalkan komentar sobat di bawah ini

Semoga bermanfaat

cara menambah gadget pada blogspot

kali ini saya akan sharing lagi bagaimana cara menambah gadget pada blogspot. Mohon maaf, sajian artikel berhubungan dengan blogspot. Hitung sebagai sharing ilmu dan informasi siapa tahu berguna juga buat reka blogger. Bagi yang sangat paham mengenahi blogging dengan blogspot, saya harapkan tidak kecewa membaca artikel ini. Atau berikan komentar berupa kritik dan saran untuk menambah kaya blog ini. Karena dengan saran dan kritik maka akan semakin menambah wawasan saya dalam dunia blogging. Jangan lupa saran atau kritik yang membangun ya. Tentu saja sampaikan dengan sopan agar yang lain juga senang membaca komentar anda.

Saya tidak akan menjelaskan di sini apa itu Gadget. Di samping karena saya kurang paham definisinya, juga blogger yang ahli telah banyak membahas tentang ini. Jadi saran saya untuk mengetahui apa itu Gadget, silahkan cari saja di google dengan kata kunci definisi Gadget. Saat ini saya akan menjelaskan pada anda bagaimana menambah gadget pada blog blogspot? Caranya sebenarnya sangat mudah. Silahkan ikuti tutorialnya dengan sangat singkat, yaitu :

Pertama, tentu saja anda harus login ke www.blogger.com. Jika anda tidak login saya bisa pastikan anda tidak akan bisa apa-apa. He he he.

Kedua, tuju ke alamat blog yang ingin anda tambahkan Gadgetnya lalu klik Design/Rancangan. Anda akan masuk ke halaman struktur blog anda berupa area tampilan posting dan side bar. Ini tergantung template dasar anda. Template macam-macam. Ada yang berformat side kanan dan kiri sementara di tengah adalah artikel. Ada yang side bar 1 saja di bagian kanan atau kiri. Di side bar inilah kita bisa menambah Gadget. Lihat gambar di bawah ini

Ketiga, klik Tambah Gadget/Add Gadget. Akan muncul window baru seperti di bawah ini.

Di sinilah kita bisa memanmbahkan Gadget yang kita inginkan dan tentu saja yang kita sukai. Untuk lebih mengenalkan, saya akan berikan listnya untuk anda berikut ini :

Ikuti lewat Email (Baru!), gadget agar visitor bisa mendaftarkan email sehingga mereka bisa mengikuti setiap artikel baru yang kita posting

Entri Populer (Baru!), jika anda memilih gadget ini maka akan muncul di side bar posting yang paling banyak dibaca visitor

Statistik blog, menampilkan lalu lintas pengunjung berupa angka yang menunjukkan berapa kali posting artikel anda dibaca

Daftar Link, Gadget untuk menambah link blog yang lain, misalnya blog teman.

HTML/JavaScript, gadget jika kita mau menambahkan banner, text html, script iklan adsense dll.

Gambar, tampilkan gambar anda di sini

Arsip Blog, tambahkan Gadget ini jika mau arsip artikel yang telah anda tulis muncul di side bar

Laman
Pengikut
Kotak Penelusuran
Kotak Penelusuran
Teks
Tampilan slide
Baris Video
Polling    Polling
Daftar Blog
Daftar
Feed
Newsreel
Label
Tautan Berlangganan
Logo
Profil
Header Halaman

Tidak saya jelaskan satu persatu ya gadgetnya. Soalnya tangan ini mulai capek. Banget capeknya. He he he ( dasar malas ). Bagaimana cara menambahkan gadget di atas? Caranya gampang kok.  Tuju Gadget yang ingin anda tambahkan lalu klik tanda + yang ada di samping kanannya. Misalnya anda mau menambahkan gadget Ikuti lewat email dan Entri Populer, klik saya tanda + seperti gambar di bawah ini.

Swwiiiiing, gadget anda telah ditambahkan. Kalau mau lihat tampilan gadgetnya klik saja alamat blogmu. owwwwww, keren ya. Jika anda mau menambahkan iklan adsense, tinggal copy saja kode script adsensenya lalu dipaste ke kolom di Gadget HTML/JavaScript. Beres. Selamat mencoba semoga manfaat.

Mempercantik Blog Dengan Gadget

Anda sering melihat tampilan Blog yang menarik, dilengkapi dengan tampilan tampilan jam, kalender, Blog messege, dll.. ?? caranya mudah dan gampang kok. coba disini anda akan mendapatkan banyak gadget yang menarik. tinggal clik add to your page dan get codenya anda sudah bisa menampilakan beberapa tampilan tambahan di blog anda. dan Untuk menempatkan pada Blog (Untuk Blogspot) ini caranya :

• Ambil Gadget dari Link di atas, kemudian copy kode gadgetnya.
• Buka Blogspot dengan menggunakan acount anda, kemudian masuk ke Tata Letak/Layout
• add Page Element/tambah elemen halaman pilih HTML/JavaScript kemudian clik tambahkan ke BLog.
• Setelah itu akan muncul konfigurasi HTML/JavaScript, paste script gadget yang tadi pada Textbox Konten. untuk pemberian judul itu terserah anda. dan simpan.
• Anda bisa mengatur susunan gadget sesuai dengan keinginan anda, coba lihat hasilnya pada tampilan blog anda... selamat mencoba.....;0)