Gorontalo Blogger

Membuat Menu Navigasi Horizontal Dengan Sub Menu Navigasi Vertikal

noreply@blogger.com (Oebhan) — Sat, 5 Nov 2011 21:40:00 +0800

Mumpung mood lagi bagus,mumpung doku lagi tebel dan mumpung blog lagi sepi,saya mencoba untuk memposting kembali kaitannya belajar menghias blog.

Beberapa minggu lalu saya sudah bagikan dari informasi yang saya dapat dari dunia maya,bagaimana membuat menu navigasi css di blogger.

Bagi yang belom membaca,silakan langsung klik di sini.

Nah,dari email sahabat yang saya terima,menanyakan bagaimana sih membuat menu navigasi horisontal / horizontal dengan submenu / sub menu navigasi vertikel seperti pada blog ini?

Bukan suatu kesengajaan,menu navigasi dengan sub menu ini juga saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot.

Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikut ini.

Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger

Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

Gb.1
Selanjutnya pilih tab Edit Html (Gb.2).

Gb.2
Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

Gb.3
Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode]]></b:skin> tersebut.

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; 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: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; 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; }
Setelah itu Simpan Templates.
Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript(Gb.5)

Gb.4

Gb.5
Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.

<div class='menuhorisontal'> <ul id='nav'> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'></ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </div>
Lalu simpan,selesai dan lihat hasilnya

Membuat Menu Navigasi CSS Di Element Baru

noreply@blogger.com (Oebhan) — Sat, 5 Nov 2011 21:39:00 +0800

Membuat menu navigasi,adalah pelajaran yang paling banyak di pertanyakan oleh blogger-blogger pemula,termasuk saya beberapa hari yang lalu.

Disini kita akan membahas tentang bagaimana membuat menu makanan 4 sehat 5 sempurna,

Hus !! bukan,maksudnya Menu Navigasi dengan CSS.

Tapi tidak seperti kebanyakan,biasanya mereka meletakkan di bawah kode <body>,tapi di sini kita akan meletakkan kodenya di Element HTML/Javascript yang baru.

Apa itu CSS? kita akan bahas beberapa hari lagi,berhubung yang kita bahas kali ini Menu Navigasinya.

Seperti apa sich contoh Menu Navigasi?

Navigasi pada web / blog,sesuai dengan namanya,yaitu untuk menuntun jalan,supaya web / blog lebih mudah di telusuri.

Contoh bentuk fisiknya seperti di bawah ini :

Untuk membuatnya kali ini,kita minta bantuan CSS,apa itu CSS,kita bahas naa..ant :
(,tadi sudah di omongiiin!!!! #$%#!
.

Cara membuatnya sederhana sekali,berhubung kita dengan bantuan CSS,kita tak perlu membuat tabel untuk Menu Navigasi seperti di atas.

Tapi,yang paling surprise buat gw waktu aku jalan-jalan ke Blok-M,tiba-tiba aku ngliat yang belum pernah...OOee!!Ngemeng aja!ntar aja ceritanya ngapa !!

Ok! berhubung ntar malah tambah bikin rusuh suasana,kan dapet dosa tuh!,kalo dosa,kita masuuk Nera...@#$@#$@!!gUBRAK! gw bilang ntar ya ntar ceritanyaaa!!

Ya..ya.ntar aja ceritanya ya..Ok langsung ke topik,kita hari ini.

Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML.
Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini :

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; 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: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; 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; }

Jika kode sudah anda letakkan,lalu Simpan Template.
Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript.
Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih.



<ul id='nav'>

<li><a href='http:///'>Menu 1</a></li>

<li><a href='http:///'>Menu 2</a></li>

<li><a href='http:///'>Menu 3</a></li>

<li><a href='http:///'>Menu 4</a></li>

</ul>

Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya.

Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana?

Copy aja salah satu kode :

<li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya.

Membuat Address Bar Berjalan

noreply@blogger.com (Oebhan) — Fri, 4 Nov 2011 22:40:00 +0800

Banyak cara membuat tampilan blog terlihat berbeda dan agar menarik perhatian pengunjung, diantara adalah membuat adress bar menjadi berjalan. Teks berjalan bisa berupa sapaan, pemberitahuan ataupun yang lain.

Caranya cukup mudah, berikut langkah-langkahnya :

Login ke blogger.
Klik menu design/rancangan.
Untuk lebih aman sebaiknya sobat backup template terlebih dahulu.
Klik edit HTML. (jangan lupa centang "Expand Template Widget")
Cari kode </head> (tidak perlu scroll sampai kebawah, karena posisinya di bagian atas, atau untuk lebih mudah sobat bisa gunakan CTRL+F)
Setelah ketemu copy script di bawah ini tepat di bawahnya.

//<![CDATA[

msg = "...Selamat datang...";

msg = "...Selamat datang..." + msg;pos = 0;

function scrollMSG() {

document.title = msg.substring(pos, msg.length)+msg.substring(0, pos); pos++;

if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",100);

}

scrollMSG();

//]]>

</script>

7. Klik simpan, dan lihat hasilnya.

Catatan :

Tulisan berwarna biru bisa sobat rubah sesuai keinginan.
Angka 100 merupakan kecepatan teks itu berjalan, semakin besar nilai angka maka semakin lambat kecepatannya.

Membuat Teks Kedip Atau Bergerak Ke Kiri Dan Kanan

noreply@blogger.com (Oebhan) — Fri, 4 Nov 2011 22:27:00 +0800

Ketika kita membaca artikel pada suatu blog sering kita menjumpai teks terlihat berkedip-kedip (efek blink), bergerak dari kiri ke kanan, bergerak dari kiri ke kanan secara bolak-balik ataupun bergerak secara vertikal dari bawah.ke atas (efek marquee). Untuk membuat teks yang memiliki efek blink ataupun efek marquee sangatlah sederhana, kita hanya menambahkan beberapa kode yang disisipkan pada kata/kalimat target pada edit HTML. Bagi sobat yang belum tahu bagaimana caranya menerapkan efek ini pada postingan berikut caranya :

A. Membuat teks berkedip.

Kodenya : <blink>Masukan teks di sini</blink>

Maka hasilnya seperti ini :

Masukan teks di sini

B. Membuat teks bergerak dari kiri ke kanan.

Kodenya : <marquee>Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

C. Membuat teks bergerak dari kiri ke kanan bolak-balik.

Kodenya : <marquee behavior="alternate">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

D. Membuat teks bergerak dari bawah ke atas.

Kodenya : <marquee direction="up">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

E. Membuat teks bergerak dari bawah ke atas bolak-balik.

Kodenya : <marquee direction="down" behavior="alternate">Masukan teks di sini</marquee>

Maka hasilnya seperti ini :

Masukan teks di sini

Begitu mudah dan sederhana bukan...?

Cara Membuat Horizontal Acrobatic Menu

noreply@blogger.com (Oebhan) — Fri, 4 Nov 2011 22:23:00 +0800

Beberapa hari ini saya memang jarang update blog ini dikarenakan saya lagi mendalami untuk belajar WP. Tapi sebisa mungkin saya akan update blog sederhana ini meskipun hanya tutorial sederhana. Pada kesempatan kali ini kita akan membahas Cara Membuat Horizontal Acrobatic Menu. Tutorial ini saya dapatkan beberapa hari lalu dari sahabat saya Azis Lamayuda. Langsung saja lihat demonya.

LIVE DEMO

Untuk cara membuatnya, ikuti langkah-langkah di bawah ini.

1. Pasang kode css berikut di atas ]]></b:skin>

ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left top;
}
ul#topnav.v2 a{
color: #555;
background: url(http://lh5.ggpht.com/_7ZIYPUkIUEw/TL0HX2yw0sI/AAAAAAAAAB4/5tZqAjpcOnE/menu.png) repeat-x left bottom;
}

2. Pemasangan jquery di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {

$("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag

$("#topnav li").each(function() { //For each list item...
var linkText = $(this).find("a").html(); //Find the text inside of the a tag
$(this).find("span").show().html(linkText); //Add the text in the span tag
});

$("#topnav li").hover(function() { //On hover...
$(this).find("span").stop().animate({
marginTop: "-40" //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find("span").stop().animate({
marginTop: "0" //Move the span back to its original state (0px)
}, 250);
});

});
</script>

3. Selanjutnya cari kode berikut

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

4. Pasang kode HTML untuk menu berikut di bawah kode di atas

<ul class='v2' id='topnav'>

<li><a href='/' title='HOME'>HOME</a></li>

<li><a href='#' title='MENU 1'>MENU 1</a></li>

<li><a href='#' title='MENU 2'>MENU 2</a></li>

<li><a href='#' title='MENU 3'>MENU 3</a></li>

<li><a href='#' title='MENU 4'>MENU 4</a></li>

<li><a href='#' title='MENU 5'>MENU 5</a></li>

<li><a href='#' title='MENU 6'>MENU 6</a></li>
</ul>

5. Save template

Note: Untuk pemasangan menu, sobat tidak di haruskan meletakkan di bawah kode di atas tadi. Sobat bisa meletakkannya di add gadget, tinggal sesuaikan dengan template saja.

Semoga bermanfaat.
Alhamdulillah..

Cara Membuat Navigasi Halaman Blog

noreply@blogger.com (Oebhan) — Fri, 4 Nov 2011 21:56:00 +0800

Wah sudah lumayan lama tidak posting tentang tutorial blog nih, jadi agak kurang update deh blog ini. Setelah dulu saya pernah membahas tentang Mengganti Tulisan Posting Lama Dan Posting Baru Jadi Lebih Menarik(silahkan baca disini), sekarang kita akan membahas cara membuat navigasi halaman blog. Lihat gambar di bawah ini sebagai contoh.

klik gambar untuk live demonya

Memang cara ini sudah banyak sekali yang membahas, tapi tidak apa-apa saya bahas lagi untuk pengunjung setia blog ini. Navigasi halaman ini saya padukan dengan sedikit sentuhan css3 gradient, border radius, dan text sadhow. Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai template.

Oke langsung saja dengan menambahkan kode css berikut DI ATAS ]]></b:skin>

.showpageArea{padding:10px;background:#fff}

.showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none}

.showpageNum a{font-weight:bold;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #fff;background:#fff;}

.showpageNum a:hover{color:#fff;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;}

.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}

.showpage a:hover{background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}

Setelah itu tambahkan script berikut DI ATAS tag </body>

<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='◄';
var downPageWord ='►';
</script>
<script src='http://belajarblogging.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if>

Dan terakhir save template dan lihat hasilnya. Bagaimana, mudah kan? Kalau ada yang kesulitan, silahkan bertanya di kotak komentar di bawah.

Semoga bermanfaat.
Alhamdulillah...

Menambah Elemen Baru Di Atas Header

noreply@blogger.com (Oebhan) — Fri, 4 Nov 2011 21:33:00 +0800

Setelah pada postingan kemarin saya membahas tentang Cara Memubuat Footer Multi Kolom, pada postingan kali ini saya akan membahas cara menambah elemen baru atau add gadget di bagian atas header.

Menambahkan elemen baru di atas header memang mempunyai banyak fungsi. Selain bisa untuk meletakkan script iklan, juga bisa untuk menambahkan horizontal menu bagi blog yang belum ada horizontal menunya.
Ok, tanpa panjang lebar lagi langsung saja kita mulai acara ini
( Maksudnya tutorial ini hehehe... )

1. Login ke akun blogger sobat.
2. Pilih design lalu edit HTML.
3. Download full template dulu, takut kalau terjadi kesalahan.
4. Cari kode ]]></b:skin>
5. Pasang kode di bawah ini DI ATAS ]]></b:skin>

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

6. Cari kode <div id='header-wrapper'> dan pasang kode berikut DI ATAS <div id='header-wrapper'> tadi

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

7. Langkah terakhir save template dan lihat perubahannya.

Note: Tidak semua template memiliki kode yang sama, jadi cari yang mendekati dan jangan takut mencoba.

Semoga bermanfaat.
Alhamdulillah...

Membuat Link (2)

noreply@blogger.com (Oebhan) — Thu, 3 Nov 2011 23:36:00 +0800

Untuk anda pengguna Blogger baru, ada perbedaan dalam membuat link, silahkan ikuti langkah berikut ini :

Klik menu Layout

Klik Page Elements

Klik Add a Page Element

Klik ADD TO BLOG pada menu Link List

Tulis Judul link pada pada isian di sebelah form Title. Contoh dalam blog saya Adalah “ Link partner” atau silahkan terserah anda

Isi nomor link yang ingin anda tunjukan di blog anda pada form Number of Links to show in list, jika anda ingin membatasi jumlah link yang akan di tampilkan, jika anda tidak mau membatasi silahkan di kosongkan saja.

Pada form Sorting, silahkan anda pilih sort Alphabetically bila ingin link anda di urutkan berdasarkan huruf alphabet ( mulai dari A --> Z ), atau pilih sort revers Alphabetically apabila anda menginginkan Link yang anda buat di urutkan secara terbalik ( mulai dari Z --> A ). Bila anda tidak menginginkan keduanya, yakni Link yang tampil sesuai dengan yang anda buat, silahkan pilih Don’t Sort

Tulis alamat URL yang akan di Link pada form New Site URL. Contoh : http;//kolom-tutorial.blogspot.com

Tulis nama atau tulisan yang ingin muncul pada link yang anda buat pada form New site Name. contoh : Blog Tutorial.

Klik Add Link, jika link yang anda buat lebih dari satu. Silahkan isi semua form sesuai dengan langkah di atas.

Klik SAVE CHANGES bila sudah selesai

Bila anda ingin menempatkan Link yang anda buat tadi, silahkan arahkan mouse anda ke kotak link yang baru anda buat, lalu tekan mouse sambil di tahan pindahkan ke tempat yang anda inginkan ( di drag & drop ) .

Klik SAVE. Selesai

Membuat Link (1)

noreply@blogger.com (Oebhan) — Thu, 3 Nov 2011 23:35:00 +0800

Dalam dunia blog, tentu anda tidak asing lagi dengan yang namanya link. Apabila anda seorang blogger (tukang ngeblog kata orang jakarta mah), tentu saja membuat link adalah sebuah keharusan. Berbeda dengan website pada umumnya, di jagat per blog-an ada yang namanya link exchange atau bertukar link dengan blog lain, jadi kalau anda tidak bisa membuat link, ini dapat berakibat anda akan di asingkan alias di cuekin oleh blogger lainnya karena di anggap pelit dalam memberikan link. Dalam topik membuat link ini, saya akan mengulasnya dalam beberapa sub bagian yakni :
Link pada posting-an

Jika anda membuat sebuah artikel untuk di posting, trus di dalam nya ingin di buatkan sebuah link, misalkan artikel tersebut bercerita tentang bisnis yang anda ikuti pada sebuah website di internet, lalu anda ingin mengajak para pembaca artikel tersebut untuk mengunjungi website yang anda ceritakan. Misalkan dalam artikel tersebut ada kata –kata seperti Jika anda tertarik silahkan anda klik disini, nah untuk membuat link dari kata-kata tersebut silahkan ikuti langkah-langkah berikut :

Highlight kata-kata yang ingin di buat link, contoh di atas adalah klik disini.

Klik ikon yang bergambar seperti ini yang berada pada toolbar, maka setelah itu akan muncul tulisan http:// pada window baru yang berbentuk seperti gambar di bawah ini :

Isi kotak yang ada tulisan tersebut dengan alamat situs yang anda inginkan, misalkan : http://www.resepbisnis.com/?id=rohman

Klik OK. Selesai

Link dengan window baru

Mungkin anda punya pikiran, kalau anda membuat sebuah link trus pembaca mengkliknya, anda kwawatir kalau pengunjung blog kita akan meninggalkan blog kita. Untuk meminimalisir hal tersebut, bisa dilakukan dengan cara membuat window baru, jadi ketika pengunjung mengklik salah satu link yang kita buat, halaman blog kita tidak akan tertimpa dengan halaman baru tapi yang terjadi adalah halaman blog anda tetap ada dan halaman yang baru di klik akan muncul terpisah. Sebagai contoh, silahkan anda klik tulisan Resep Bisnis atau Obral plus pada banner header diatas. Ketika anda mengkliknya, akan tercipta window baru. Untuk membuat link seperti ini dapat di lakukan dengan cara :

Apabila sudah melakukan cara membuat link seperti keterangan diatas, klik menu yang ada pada toolbar.

Pada tulisan yang kita link tadi akan muncul kode seperti ini ( contoh tulisan klik disini di link ke http://www.resepbisnis.com/?id=rohman :

<a href="http://www.resepbisnis.com/?id=rohman">klik disini</a>

maka disini anda harus menambahkan embel-embel kode HTML target="new' ataupun target="_blank"pada awal ataupun akhir kode tersebut . Contoh kode yang sudah di modifikasi adalah :

<a href="http://www.resepbisnis.com/?id=rohman" target="new">klik di sini</a>

atau :

<a href="http://www.resepbisnis.com/?id=rohman" target="new">klik di sini</a>

atau bisa juga seperti ini :

<a href="http://www.resepbisnis.com/?id=rohman" target="_blank">klik di sini</a>

Buat Links di sidebar

Bila anda berkeinginan membuat link kepada teman anda di sidebar, cara termudah adalah seperti ini : ( khusus untuk template klasik)

Klik menu TEMPLATE

Klik Edit HTML

Klik Edit

Klik Find (on this page)… --> untuk mempercepat pencarian

Tuliskan kata dimana anda ingin tempatkan, contoh di blog saya adalah Links para sahabat, klik Find

Tuliskan link yang anda inginkan, contoh jika anda ingin membuat link ke blog saya, maka kode yang di tulis adalah :

<a href="http://kolom-tutorial.blogspot.com" target="_blank">Blog Tutorial</a>

Klik Save Template Changes. Selesai

Sedikit clue untuk anda. Jika anda sedang mengotak-atik kode Template sebaiknya sebelum di obrak-abrik, sebaiknya anda copy terlebih dahulu seluruh template ke dalam notepad, ini untuk jaga-jaga apabila anda melakukan kesalahan, anda bisa mengembalikan kesemula karena sudah mempunyai backup data template tersebut. Atau bisa juga sebelum anda klik Save Template Changes sebaiknya anda klik terlebih dahulu tombolpreview untuk melihat perubahan yang anda lakukan, apabila sudah cocok dengan perubahan tersebut baru disave Template Changes.

Bersambung : silahkan klik di sini

Cara Menghilangkan Navbar Blogger

noreply@blogger.com (Oebhan) — Thu, 3 Nov 2011 22:55:00 +0800

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

Klik menu Template

Klik menu Edit HTML

Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman

Copy kode berikut lalu paste di atas kode </style>

Klik tombol Simpan Perubahan Template

Selesai.

Untuk template baru

Klik menu Layout

Klik menu Edit HTML

Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data

Copy kode berikut lalu paste di atas kode ]]></b:skin>

Klik tombol Simpan Template

Selesai.

Selamat menikmati blog tanpa navbar !

Menghilangkan Icon Obeng Dan Tang / Quick Edit Blogger

noreply@blogger.com (Oebhan) — Thu, 3 Nov 2011 15:41:00 +0800

Menanggapi pertanyaan dari beberapa blogger… hehehe… kang Rohman serasa jadi konsultan blogger saja ya kalau posting biasanya pake kata-kata tersebut soalnya “ Your Questions is my inspiration” pertanyaan anda adalah inspirasiku. Jadi rahasia kenapa blog ini masih bisa bertahan sampai sekarang adalah karena masih ada yang bertanya ke kang Rohman. So, tentu saja ide untuk posting selalu ada. Eh..eh.. ko…gitu sich.. la ko jadi ngelantur nih, kembali ke judul posting ini ah.

Apa sih maksud dari judul posting ini, sepertinya agak aneh? begini nih teman-teman, jika kita sedangmengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.

Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

Klik Tata Letak.

Klik tab Edit HTML.

Cari kode seperti ini :

]]></b:skin>

Copy paste kode berikut persis di atas kode yang tadi :

.quickedit{
display:none;
}

Klik tombol Simpan template.

Selesai.

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

Membuat Account Liberty Reserve

noreply@blogger.com (Oebhan) — Mon, 31 Oct 2011 22:19:00 +0800

Cara Mendaftar Akun Liberty Reserve.

Untuk memulai bisnis di internet salah satu akun rekening yang wajib adalah Liberty Reserve. Liberty Reserve (LR) ini fungsinya tidak terlalu berbeda dengan PayPal yaitu untuk media pembayaran online atau media untuk menukar mata uang lokal menjadi mata uang asing atau sebaliknya. Untuk membuat akun di Libery Reserve silahkan ikuti petunjuk berikut :

Langkah pertama silahkan buka/KLIK INI :

http://www.libertyreserve.com/?ref=U8143364

Gambar 1

Setelah halaman terbuka silahkan klik "Create Account" dan akan tampil halaman seperti ini :

Gambar 2

Apabila muncul halaman seperti diatas silahkan isi semua data-data yang diminta sesuai identitas anda di KTP dan selanjutnya klik "Agre" maka akan beralih ke halaman selanjutnya yang berisi iformasi penting dari account anda seperti :

Pasword :
Login PIN :
Master Key :
Security Questions :
Answer :

Gambar 3

Simpan baik-baik informasi ini karena akan banyak digunakan. Selanjtunya anda akan diminta LOGIN tapi terlebih dahulu silahkan buka email yang anda gunakan untuk mendaftar karena pada email tersebut telah dikirimkan informasi tentang "Your Liberty Resereve Account Number" yang akan kita gunakan untuk login. Isi email tersebut seperti ini :

Gambar 4

Setelah itu silahkan silahkan klik LOGIN seperti pada Gambar 3 diatas dan selanjtunya akan terbuka halaman seperti ini :

Gambar 5

Silahkan isi "Account Number" dengan "Your Liberty Resereve Account Number" yang anda terima pada email lalu isi "Password" dengan pasword yang anda terima seperti padaGambar 3 dan selanjutnya klik "NEXT" maka akan muncul lagi halaman seperti dibawah ini :

Gambar 6

Pada halaman di atas anda diminta memasukkan "Verification PIN". Untuk memperoleh verification PIN ini. silahkan Cek kembali Inbox email anda untuk mendapatkan email yang berisi informasi verification PIN seperi ini

Gambar 7

Setelah memasukkan verification PIN silahkan klik tombol "Continue" (Gambar 6) dan akan muncul halaman selanjutnya seperti ini :

Gambar 8

Pada halaman di atas anda hanya diminta untuk memberi tanda centang pada kotak "I Confirm That My Custom Welcome Message Is Correct" dan selanjutnya klik lagi tombol"Continue" maka akan tampil halaman seperti ini :

Gambar 9

Pada halaman di atas ada 2 pilihan tombol untuk di klik yaitu "Login PIN" atau "One Time PIN". Saya sendiri memilih Login PIN dan setelah di klik muncul halaman seperti ini :

Gambar 10

Pada halaman di atas kita diminta untuk memasukkan "LoginPIN" (Lihat Gambar 3) dan silahkan klik "LOGIN" maka selanjutnya akan muncul halaman Regitration Part 2 of 2 seperti gambar dibawah :

Gambar 10

Pada halama di atas silahkan isi kembali data-data yang diminta seperti : Account Name : isi dengan nama unik anda contoh "tenriewa" Company : Masukkan URL situs anda kalau punya (boleh tidak diisi) Dan selanjutnya semua data di isi. Setelah selesai terakhir klik "Submit" maka sekarang proses sudah selesai dan akun anda siap digunakan untuk berburu dollar.

Gambar 10

Sekian Informasi dari saya, Semoga Bermanfaat !

Template Blogger 3 Kolom

noreply@blogger.com (Oebhan) — Mon, 31 Oct 2011 11:20:00 +0800

Setelah mengubek-ubek Google untuk mendapat template blogger gratis dengan design yang cocok untuk menaruh adsense, akhirnya saya menemukan juga sebuah design template blogger yang elegan dan professional. Semi professional sih. Tapi sangat cocok untuk menaruh beberapa adsense di situ.

Berikut screenshot dari blog tentang download template blogger yang mempunyai 3 kolom khusus untuk menaruh adsense.

Detail Preview | Download

File hasil download dari template blogger 3 kolom untuk adsense ini berextensi .zip jadi anda harus extract file terlebih dahulu, buka dan copy file yang berextensi .txt – pergi ke Edit HTML dari blog blogspot anda – Expand Template Widget – Hapus kode template yang ada – Paste kode template 3 kolom untuk adsense tadi – Simpan Perubahan.

Template blogger 3 kolom untuk adsense tersebut mempunyai 1 ruang diatas dibawah header halaman untuk menaruh adsense dengan ukuran 790×30. Tapi jangan lupa untuk mem parse kode dari adsense yang anda miliki di website parse kode html di www.blogcrowds.com atau di www.accessify.com. Hasil dari kode html yang di parse tersebut bisa langsung di taruh di bagian bawah header dari template tadi.

Setelah login di account blogger anda, pergi ke Rancangan – Edit HTML – Expand Template Widget dan cari kode <div class=’Syndicate’> . Dibawah kode tersebut tersimpan kode adsense punya saya. Anda bisa menggantinya dengan kode adsense punya anda yang sudah di parse tadi.

List Recomended Links di sidebar bawah :

Untuk yang ini, tinggal anda cari di Edit HTML dengan kata Recomended Links dan ubah alamat website yang ada dengan kumpulan alamat website anda beserta kata yang ingin di munculkan. Untuk caranya, bisa lihat kode satu demi satu di bawah kata Recomended Links tersebut ya. Saya nggak perlu menjelaskan lebih dalam.

Untuk yang di sidebar kanan, anda tinggal pergi ke menu Rancangan dan bisa lihat disana ada beberapa widget yang bisa di tambah dan dikurangi. Untuk memindahkannya, anda tinggal klik dan tahan widget yang telah di buat dan taruh dimana anda mau.

Sebagai catatan, sebelum Edit HTML, sebaiknya anda download dulu kodenya. Berjaga-jaga kalau seandainya tidak berhasil upload kode template blogger tersebut dan menyebabkan blog anda error maka masih ada copyannya.

Template ini saya ambil di Hakimtea dan sebenarnya belum mendapatkan izin resmi dari pemilik blog. Tapi mudah-mudahan saya nggak dimarahi karena edit beberapa bagian dari template blogger 3 kolom untuk adsense ini agar lebih terasa seperti punya kita sendiri. Thanks

Pasang LINK Di Postingan

noreply@blogger.com (Oebhan) — Sun, 30 Oct 2011 18:53:00 +0800

Ketika anda posting sebuah artikel dan biasanya anda ingin memasukkan sebuah link website atau blog orang lain kepostingan tersebut supaya bisa langsung dikunjungi oleh orang yang mengunjungi blog anda,anda sering lihat di blog-blog yang pernah anda baca misalnya dengan tulisan klik disini yang jika di klik langsung masuk ke halaman website yang ingin kita tampilkan,nah untuk membuat link tersebut ikuti langkah-langkah sebagai berikut:

Pertama masuk ke halaman menu posting.
Silakan ketik artikel yang akan anda buat beserta tulisan yang akan anda masukkan linknya, misalnya silakan klik disini atau nama website yang akan ada bikin linknya.
Highlight tulisan tersebut (disini) kemudian klik icon insert link yang berada ditoolbar halaman posting.
Akan tampil Explorer User Trompt box dgn tulisan http://...
Masukkan alamat situs yang anda inginkan misalnya http://gorontaloblogger.blogspot.com.
Terakhir klik Ok dan selesai