Kotak Tutorial

Cara Membuat Navigasi Horisontal

noreply@blogger.com (Kotak Tutorial) — Fri, 15 Jan 2010 10:21:00 -0800

Anda tentu tahu Navbar Blogger bukan? Sebuah widget navigasi blog yang begitu banyak fungsinya. Karena kode dasar navbar blogger berbentuk sripct code, maka cenderung agak sulit untuk diubah dan diutak-atik. Lain halnya jika suatu widget berbentuk HTML code, mungkin akan lebih mudah bagi kita untuk memainkannya sesuka hati. Tidak bisa dipungpikir bahwa widget navigasi adalah kebutuhan mendasar yang memilki fungsi dan kegunaan bagi para bloggers. Untuk itu, Kotak Tutorial akan memberikan tips untuk membuat Navigasi Horisontal di Blog Anda.

Langkah pertama, seperti biasa Anda terlebih dahulu login di account blogger Anda. Setelah itu langsung menuju ke halaman edit HTML. Cari kode ]]></b:skin>. Lalu letakkan kode CSS di bawah ini tepat di atas kode tersebut :

/* Menu Horizontal
---------------------------------------------*/
.menuhorisontal{background:#ddd; width: 918px;height:30px;float:center; overflow: hidden; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

.menuhorisontal ul{ margin: 0; padding: 0; padding-left: 0px; font: bold 11px Arial;color:#555; text-transform:uppercase; list-style-type: none; letter-spacing:.0001em; }
.menuhorisontal li{ display: inline; margin: 0; }

.menuhorisontal li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 8px 10px; border-right: 1px solid #efefef; color: #555}

.menuhorisontal li a:visited{ color: #555; }

.menuhorisontal li a:hover, .menuhorisontal li.selected a{background:#fff;color:#000; /*Background Setelah Pointer Diarahkan */ }

Setelah itu, cari kode di bawah ini :

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

Copy paste kode berikut, lalu letakkan tepat di bawah kode di atas :

<div class='menuhorisontal'>
<ul>
<li><a href='http://kotaktutorial.blogspot.com'>Home</a></li>
<li><a href='http://kotaktutorial.blogspot.com/search/label/Blog%20Tutorial'>Blog Tutorial</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Blogger Hack</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Blogger Tricks</a></li>
<li><a href='http://kotaktutorial.blogspot.com/search/label/Blogger%20Tips'>Blogger Tips</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Free Template</a></li>
<li><a href='http://kotaktutorial.blogspot.com'>Bisnis Online</a></li>
<li><a href='http://kotaktutorial.blogspot.com/search/label/Blogging'>Blogging</a></li></ul>
</div>

Jangan lupa untuk mengganti alamat URL link sesuai dengan keinginan Anda. Begitu pula dengan ukuran dan warna Navigasi Horisontal. Anda harus menyesuaikan lebar dan tinggi sesuai dengan ukuran template Anda. Selesai, silahkan simplate template dan lihat hasilnya.

Cara Menghilangkan Navbar Blogger

noreply@blogger.com (Kotak Tutorial) — Thu, 14 Jan 2010 07:17:00 -0800

Navbar blogger merupakan navigasi dasar yang disediakan oleh template blogger. Namun terkadang tampilan navbar ini membuat blog kita terlihat kurang profesional, paling tidak menurut sebagian besar bloggers. Untuk itu, banyak yang memilih untuk menghilangkan navbar bawaan blogger tersebut. Ada dua alternatif untuk menghilangkan navbar blogger ini, yakni : pertama, menghilangkan secara statis. Dalam artian, jika kursor kita arahkan ke posisi navbar, maka navbar Anda akan muncul kembali. Dan kedua, Anda dapat menghilangkan navbar secara permanen, alias tidak akan muncul kembali. Berikut tutorial menghilangkan navbar di blogger.

Cara pertama, menghilangkan navbar secara statis. Silahkan login terlebih dahulu ke account blogger Anda, dan langsung masuk ke halaman edit HTML. Tambahkan kode CSS di bawah ini, tepat di atas kode ]]></b:skin> :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Cara kedua, menghilangkan navbar secara permanen. Sama seperti cara pertama di atas, namun Anda tinggal mengganti kode di atas dengan kode di bawah ini :

/* Navbar Frame
----------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none}

Selesai, silahkan simpan template dan lihat hasilnya. Namun sebelum Anda menghilangkan navbar blogger tersebut, ada baiknya Anda membaca TOS blogger secara teliti, sebab menghilangkan navbar, bisa jadi termasuk salah satu bentuk pelanggaran, yang bisa jadi membuat blog Anda ditutup oleh pihak blogger . Jika Anda tetap ingin menghilangkan navbar tersebut, resiko dan konsekuensi ditanggung sendiri ya.

Tutorial Memasang Drop Cap

noreply@blogger.com (Kotak Tutorial) — Wed, 13 Jan 2010 10:16:00 -0800

Drop Cap atau huruf awal yang memilki size lebih besar dari huruf lainnya, merupakan salah satu gaya tulisan yang sering digunakan oleh koran atau majalah Drop cap tersebut biasanya diletakkan di setiap awal kalimat atau frase kata sebuah content blog. Selain kelihatan lebih menarik, drop cap ini juga mampu menyajikan tampilan atraktif yang dijamin dapat memuaskan pengunjung blog Anda. Tertarik untuk menggunakannya?. Berikut tutorial drop cap yang dapat Anda ikuti.

Untuk memulainya, silahkan login terlebih dahulu ke account blog anda, dan masuk ke halaman Edit HTML. Setelah itu, silahkan masukkan kode di bawah ini tepat di atas kode : ]]></b:skin>

/* Drop Cap
----------------------------------------------- */
.dropcap { float:left; color: #000000; line-height:80px; padding-top:1px;
padding-right:5px; font-family:times; font-size:100px; }

Setelah memasang kode CSS-nya, tinggal mengujinya ke dalam postingan atau content Anda. Adapun cara menggunakannya sangat mudah. Masukkan kode di bawah ini diantara huruf yang Anda inginkan untuk diperbesar, pada saat melakukan entri baru.

<span class="dropcap"> letakkan huruf yang akan diperbesar disini </span>

Selesai. Mudah bukan?. Silahkan menuju ke TKP dan selamat mencoba. Keep blogging....

Cara Membuat Blog di Blogger

noreply@blogger.com (Kotak Tutorial) — Wed, 13 Jan 2010 03:15:00 -0800

Bagi Anda yang senang dengan menumpahkan pikiran dengan menulis aktivitas keseharian di buku diary, mungkin ada baiknya Anda beralih ke media elektronik online alias internet. Salah satu fasilitas internet yang tepat untuk bercerita dan menulis, adalah Blog. Jangan khawatir, Anda tidak perlu mengeluarkan biaya sepersen-pun kok, alias gratis 100 persen. Platform blog sebenarnya ada puluhan, bahkan mungkin ratusan. Diantaranya blogger atau blogspot, wordpress, multiply, blogsome, dan lain sebagainya.

Namun kali ini, Kotak Tutorial ingin memberikan tips bagaimana membuat blog di blogger.com. Salah satu platform blog yang paling banyak penggunanya. Berikut tahapan dan cara mendaftar di blooger :

Pertama, sebelum mendaftar di blogger, terlebih dahulu Anda harus memiliki alamat email. Kalau boleh memberi saran, sebaiknya Anda menggunakan alamat email gmail atau yahoo.

Kedua, silahkan masuk ke alamat www.blogger.com. Dan Anda akan melihat tampilan sebagai berikut :

Setelah masuk ke halaman blogger.com, silahkan klik tautan "Buat Blog" dan Anda akan diarahkan ke halaman berikutnya, seperti gambar di bawah ini :

Silahkan masukkan alamat email, pasword, nama tampilan yang Anda inginkan dan jangan lupa code untuk verifikasi kata. Setelah itu, klik lanjutkan. Tahapan terakhir, Anda tinggal memasukkan nama blog Anda, pilih template dasar dan silahkan memulai blogging pertama Anda. Selesai. Mudah bukan?. Ayo, tunggu apa lagi?. Segera meluncur ke TKP dan selamat bergabung di dunia blogger.

Selamat Datang di Kotak Tutorial

noreply@blogger.com (Kotak Tutorial) — Wed, 13 Jan 2010 01:52:00 -0800

Blog Kotak Tutorial adalah media yang menyediakan segala jenis tutorial, tips dan trik tentang blogger. Dunia blogging memang semakin maju seiring dengan perkembangan dunia maya. Blog ini memberikan kemudahan bagi anda yang ingin belajar lebih dalam mengenai blogger dan anatominya. Mulai dari HTML code, CSS Style, hingga widget yang mungkin saja berguna bagi anda. Blogger turorial memang telah banyak disajikan oleh para bloggers. Namun tidak ada salahnya Kotak Tutorial ikut memberikan kontribusi bagi Anda yang membutuhkannya, dengan harapan Anda bisa lebih membangun kreatifitas dalam menggeluti dunia blog. Prinsipnya, tidak ada yang mustahil jika Anda ingin bertul-betul belajar.

Akhir kata, semoga blog Kotak Tutorial ini dapat memberikan manfaat bagi Anda. Semua isi dari content blog ini, boleh Anda copy paste sepuasnya, sepanjang demi kebutuhan saling belajar dan berbagi antar sesama.