News mean Nothing: 2012

Kamis, 05 Januari 2012

Membuat Sidebar dalam Kotak yang Terpisah-pisah

Kadang kita ingin memodifikasi template blog menjadi lebih trendy dan tidak ketinggalan zaman. Dengan catatan tanpa membebani loading blog tentunya. Banyak cara dan trik optimasi agar blog tampil lebih oke, salah satunya adalah membuat tampilan sidebar dalam kotak yang terpisah-pisah.

Rekomendasinya trik blogger ini lebih bagus jika diterapkan pada template yang memiliki 2 (dua) kolom, karena akan kelihatan lebih hidup tanpa harus memikirkan perataan terhadap kolom-kolom elemen halaman sidebar. Tapi tidak menutup kemungkinan pula, apabila template yang mempunyai lebih dari 2 (dua) kolom untuk ikut serta menerapkan trik blogger ini.

Adapun langkah-langkahnya adalah sebagai berikut :

Login ke account blogger kamu.

Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari kode CSS sidebar antara <head> ... </head>

    .sidebar .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :

Kode template tiap blog mungkin berbeda tapi cari yang memiliki kemiripan (.sidebar .widget). Atau jika belum ada maka tambahkan kode tersebut.

Modifikasi kode .sidebar .widget, seperti dibawah ini.

    .sidebar .widget {
    background:#fff;
    border:1px solid #6E6E6E;
    margin:0 0 1.5em;
    padding:0.5em;
    }

Artinya setiap widget yang kamu tambahkan dalam elemen sidebar akan dipisahkan (margin:0 0 1.5em;) sebesar 1,5em ke bawah. Kotak sidebar tersebut berlatar putih (#fff) dan memiliki garis tepi berwarna abu-abu (#6E6E6E), sedangkan jarak teks dengan tepi kotak (padding:0.5em;) sebesar 0.5em.

Kamu bisa membuat kotak sidebar versi kamu sendiri dengan merubah kode-kode yang berwarna merah di atas.

Jangan lupa di simpan

Mengembalikan Navbar Blog yang Hilang

Anda tentu tahu resiko menghilangkan navbar blogger, yaitu account kita bisa di banned oleh google. Karena menghilangkan navbar adalah melanggar TOS ( TOS adalah perjanjian antara blogger dengan kita yang harus kita setujui ketika akan membuat blog ) .

Disana saya berpikir mengapa navbar pada blog mereka tidak dihilangkan. Kemudian saya mencari informasi di tempatnya mbah google, ternyata ada beberapa blogger yang accountnya di banned karena melanggar TOS. Sayang sekali kan apabila blog yang telah kita pelihara selama berbulan - bulan, bertahun - tahun kena banned. Kadang kala kita memasang template baru untuk blog kita yang tidak ada navbarya ataupun kita terlanjur menghilangkannya, Saya akan menerangkan tahap - tahap cara pembalian navbar di bawah ini :

1. Login lah ke blogger

2. Masuklah ke halaman edit HTML dan agar aman, sebaiknya backup lah template anda terlebih dahulu.

3. Cari kode di bawah ini : ( gunakan Ctrl+F untuk mempermudah pencarian )

#navbar-iframe {
display: none !important;
}

apabila sudah ketemu, hapuslah kode tersebut.

4. Apabila anda tidak menemukan kode tersebut, berarti kode template anda berbeda. Silakan cari kode di bawah ini :

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

Apabila sudah ketemu, hapuslah kode tersebut.

5. Apabila anda masih belum menemukan kodenya, carilah kode yang hampir mirip. Lalu hapus kode tersebut.

Membuat Auto Hide pada Navbar Blog

Merasa terganggu apa tidak dengan navbar? Mungkin ada yang merasa terganggu, makanya dulu pernah ada pelajaran untuk menghilangkan navbar. Sampai-sampai tidak hanya di blogger.com tapi juga di blogdetik navbarnya bisa kita hilangkan.

Sebenarnya navbar itu juga ada manfaatnya, yaitu untuk login atau menuju dasbor. Bahkan ada juga fitur untuk berbaginya (share) ke sosial media seperti twitter dan facebook. Oleh sebab itu kalau akan diberikan solusinya, dengan membuat auto hide pada navbar, kalau mouse kita gerakan di navbar maka akan muncul dan jika tidak ya akan tersembunyi.

Cara Membuat Auto Hide pada Navbar Blog

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode body {
6. Jika sudah ketemu taruh kode berikut di atasnya:

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

7. Simpan Template jika sudah selesai.

Menghilangkan Navbar di Blogdetik

Kali ini kita membahas tutorial untuk blogdetik, yaitu bagaimana cara menghilangkan navbar di blog yang dihosting oleh blogdetik?

Kalau di blogger.com sudah ada caranya menghilangkan navbarnya, Navbar adalah kepanjangan dari Navigation Bar. Navbar yang memang bawaan dari blogdetik, memang kadang dirasa mengganggu, nampang dipuncak halaman. Dengan tulisan dan link Blogdetik dan promo ingin daftar serta search box. Apalagi kadang juga menampilkan google adsense. Tapi mungkin ini juga merupakan timbal balik untuk blogdetik, karena kita sudah numpang di sana.

Cara Menghilangkan Navbar di Blogdetik

1. Login ke Blog Anda.
2. Pilih Appearance kemudian klik Widget.
3. Tambahkan Text (atau sisipkan di widget Text yang sudah ada)
4. Masukkan (copy-paste) kode berikut:

5. Simpan (save changes) jika sudah selesai.
6. Lihat blog anda, refresh atau F4

Membuat Tulisan Berjalan dan Aplikasinya

Jangan hanya diam, itu mungkin dapat mengambarkan sebuah makna yang banyak, artinya apa? kita harus berbuat untuk sesuatu yang bermanfaat. Jangan hanya diam berarti harus bergerak, oleh sebab itu kita akan membuat tulisan yang gak hanya diam, tapi juga bergerak. Memang suatu yang bergerak bisa menjadi daya tarik atau menarik perhatian orang.

Kita akan membuat tulisan berjalan, yang berjalan ke samping, dari kanan ke kiri. Dan juga tulisan yang berjalan dari bawah ke atas, yaitu dengan menggunakan kode marquee sehingga nantinya kita dapat menarik perhatian pembaca dengan tulisan yang berjalan itu, mungkin tulisan itu berisi sesuatu yang penting yang pembaca harus tahu.

Cara Membuat Tulisan Berjalan

Berikut ini adalah kode untuk tulisan berjalan ke samping

<marquee direction="left"><b>Selamat Datang di Belajar Ngeblog di BLOG </b></marquee>

Selamat Datang di Wibowo Family BLOG

Kita dapat menggati tulisan yang selamat datang itu dengan tulisan yang lain sesuai dengan keinginan kita.

Berikut ini adalah kode untuk tulisan berjalan ke atas

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()"><b>Selamat Datang di Belajar Ngeblog di BLOG</b> </marquee>

Selamat Datang di Wibowo Family BLOG

Selain tulisan, untuk kode yang berjalan ke atas juga dapat kita aplikasikan menjadi blogroll, contoh kode HTML nya menjadi sebagai berikut:

Bisa juga kita gunakan untuk aplikasi newsflash. Kode HTMLnya sebagai berikut

<marquee direction="up" onmouseout="this.start()" onmouseover="this.stop()">
<script src="http://www.geocities.com/uddin_81/recent-post.js">
</script> <script>
var numposts = 20; var showpostdate = false; var showpostsummary = false; var numchars = 100;
</script> <script src="http://kurniasepta.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>
</marquee>

Jangan lupa mengganti http://kurniasepta.blogspot.com dengan URL kamu sendiri, sebagai recent post.

Membuat Banner dan Tukeran Link Banner

Jika kita punya suatu produk, pasti kita ingin juga membuat sebuah logo dari produk kita tersebut, misalnya kita punya toko, tentu kita juga akan memberi nama toko kita itu, dengan nama yang bagus, yang mempunyai arti dan tentu saja mudah diingat, itu sama artinya saat kita punya blog, tentu kita akan menamainya dengan sesuatu nama atau brand dengan nama yang bagus dan mudah diingat.

Sebagai contohnya adalah blogger, yang sudah banyak dikenal orang, mungkin kenapa blogger juga banyak dikenal orang karena Logo Banner juga. Kita yang punya blog juga mengikuti atau setidaknya berusaha memperkenalkan blog kita pada khalayak umum dengan salah satu caranya dengan membuat Banner.

Salah satu pernak-pernik blog yang banyak digunakan dan tentunya akan berdampak positif dengan blog kita adalah Banner dan Tukeran Link Banner. Dengan pernak-pernik tersebut akan membawa manfaat terciptanya pertemanan derngan blogger yang lain, karena saling bertukeran link, yang akhirnya berimbas pada traffic blog kita.

Cara Membuat Banner dan Tukeran Link Banner

1. Login ke blogger
2. Pilih Tata Letak -> Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini

<a href="http://kurniasepta.blogspot.com" target="_blank">
<img border="0" width="123" title="KLIK!" src="http://images.cooltext.com/531532.gif" height="34"/></a>

<textarea rows="3" cols="16"><a href="http://kurniasepta.blogspot.com" target="_blank">
<img border="0" width="123" title="KLIK!" src="http://images.cooltext.com/531532.gif" height="34"/></a></textarea>

5. Sebelum disimpan, berikut ini hal-hal yang perlu kita ubah.

Diatas kode  adalah bannernya dan di bawahnya adalah textarea, kotak berisi kode banner.
http://kurniasepta.blogspot.com adalah URL yang dituju, kita ganti dengan URL kita sendiri.
http://images.cooltext.com/531532.gif adalah URL gambar atau logo banner.
Kita juga dapat mengatur lebar dan tinggi banner dengan mengubah angka-angka pada width dan height. dan kotak (textarea) dengan mengubah angka pada rows dan cols. Kalaupuan tidak diubah juga tidak akan jadi masalah

Mungkin diantara kita masih, masih belum bisa membuat logo banner sendiri, jangan khawatir, karena kita juga bisa membuat logo banner secara online dengan mudah dan cepat. Kita bisa membuatnya di cooltext.com disana kita tinngal memilih modelnya, menganti judul, tulisan, dan warna, setelah itu sedikit registrasi dan kita akan mendapatkan kode HTMLnya. Ambil saja URL gambar atau logonya saja.

Setelah kita pasang atau tambahkan ke blog kita nanti hasilnya akan seperti di atas, ada yang mau tukeran link banner dengan saya? atau ada yang ingin mengoleksi banner? Silahkan

Menambahkan Gadget di Header

Kita bisa menambahkan elemen gadget di sidebar kiri atau kanan, dan post area. Kadang kita ingin menambahkan gadget di area header, tapi tidak bisa. Kita bisa menambahkan banner di header atau tulisan berjalan. Sekarang kita akan belajar untuk mengedit template blog sehingga bisa menambahkan elemen gadget di bawah atau atas judul blog.

Cara Menambahkan Gadget di Header

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut;

6. Hapus kode maxwidgets='1' dan ganti showaddelement='no' dengan showaddelement='yes'
7. Simpan template jika suda selesai.

Sekarang di halaman Rancangan > Elemen Laman, kita sudah bisa menambahkan gadget.

Membuat "read more" Yang Praktis

Space atau ruang di blog kita sangat terbatas, jika kita menampilakan semua isi dari postingan atau entri maka akan memakan banyak space (tempat). Bayangkan saja orang melihat halaman yang luas, maka orang akan sulit untuk memfokuskan diri.

Sebenarnya ini sama dengan membuat read more, tapi lebih praktis, karena kita tidak perlu menambahkan sesuatu kode HTML saat memposting artikel kita. Read More yang akan kita buat akan membuat kita gampang atau mudah dalam memengal isi dari postingan kita. Beberapa kalimat akan muncul dan jika dalam postingan kita ada gambarnya juga akan disertai thumbnail (gambar diperkecil)

Ada yang memberi nama read more yang akan kita buat ini dengan nama read more liberal, oleh kang Jaloe. sekarang kita bersiap untuk mempraktekanya

Perhatikan dan baca seksama langkah-langkahnya.

Cara Membuat "read more" Yang Praktis

1. Login ke Blogger
2. Pilih Tata Letak kemudian pilih Edit HTML
3. Beri tanda cek (centang) pada “ Expand Widget Templates “
4. Cari kode di bawah ini

</head>

5. Jika sudah ketemu taruh kode berikut ini di bawahnya

6. Cari kode di bawah ini

<data:post.body/>

7. Ganti kode yang telah kita temukan di atas dengan kode berikut ini

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more “<data:post.title/>”</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

8. Simpan Template Kalau sudah beres

Silahkan kamu coba sekarang, tapi berikut ini catatan yang juga perlu kita ketahui:

summary noimg= 430 adalah tinggi artikel terpenggal tampa image
summary img=340 adalah tinggi artikel terpenggal dengan image

Mengganti Judul Blog Dengan Judul Postingan

Seperti yang dahulu orang katakan banyak jalan menuju Roma (kenapa ke Roma?) Begitu dengan kita, blogger banyak jalan menuju traffict yang lebih baik. Salah satu jalan yang dapat kita gunakan yaitu, menganti judul blog dengan judul postingan, karena ini akan membuat blog kita optimal dalam meraih page rank search engine.

Lalu bagaimana caranya merubah judul blog denganjudul postingan? Caranya cukup mudah, kita akan bersama mempraktekannya.

1. Pilih tata letak kemudian edit html
2. Jangan lupa beri tanda centang pada Expand Template Widget
3. Cari kode berikut ini: <data:blog.pageTitle/>
4. Jika sudah ketemu ganti dengan kode berikut

<b:if cond='data:blog.pageType == "index"' >
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

5. Kalau sudah di simpan.

Membuat Menu Horizontal Sederhana di Header

Bagaimana membuat menu di bawah judul blog.Layaknya header, adalah salah satu tempat yang sering dilihat. Ada judul blog kita, dan bisa kita beri menu di bawahnya, seperti yang saya lakukan.

Sekarang kita akan belajar membuat menu horizontal yang sederhana di header. Yang perlu ditekankan adalah kesederhaan itu. Karena memang menu itu saya buat hanya menggunakan kode HTML yang sederhana berupa deretan link-link. Menu navigasi yang mudah akan memberikan pengalaman yang baik bagi pembaca blog kita. Menu horizontal ini saya buat terlebih dulu dengan menambahkan elemen gadget di header. Jika sudah, langkah selanjutnya adalah sebagai berikut.

Cara Membuat Menu Horizontal Sederhana di Header

1. Pilih Rancangan
2. Klik Tambah Gadget yang ada di Header
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<b><div style="text-align: center;"> <a href="http://kurniasepta.blogspot.com">Home</a>| <a href="http://kurniasepta.blogdetik.com">Blogdetik</a>| <a href="http://kurniasepta.wordpress.com">Wordpress</a>| <a href="http://kurniasepta.multiply.com">Multiply</a>| <a href="http://kurniasepta.posterous.com">Posterous</a>| <a href="http://twitter.com/kurniasepta">Twitter</a>| <a href="http://www.facebook.com/kurniasepta">Facebook</a>| </div></b>

5. Teks yang berwarna hijau adalah URL yang dituju sedang yang berwarna merah adalah teks yang tampil. Kita bisa menambahkan lebih banyak link sesuai lebar header dan link yang ingin kita tampilkan, dengan menambahkan kode yang tercetak miring setelah | yang terakhir.

6. Simpan jika sudah selesai.