Mereund Blog

Home » All posts

Modifikasi Tampilan Judul Posting saat Mengklik Label

Dulu OB pernah memposting "Klik Label yang Tampil Judul Posting Saja", namun tampilan judul posting tersebut mengikuti default background dalam kode CSS "main". Bagaimana jika kamu ingin tampil beda? Yah, mau tidak mau kamu harus melakukan modifikasi terhadap template blog yang telah ada. Kode dalam memodifikasi tampilan judul posting ini disadur dari kode membuat daftar isi dari Kang Rohman. Dan sebaiknya diterapkan setelah kamu melakukan trik klik label yang tampil judul posting saja, membuat sidebar dalam kotak yang terpisah, dan membuat posting dalam kotak yang terpisah. Harapannya agar tampilan blog kelihatan serasi, selaras, dan seimbang [kaya tujuan rencana pembangunan lima tahun (REPELITA) saja he.. he.. he...]

Baiklah, supaya kepala tidak tambah puyeng dan dikitari oleh lebih banyak bintang-bintang. Let's go to start this trik :

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

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 di bawah ini.

<b:if cond='data:blog.homepageUrl !=

data:blog.url'>

<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'>

<data:post.title/></a><br/><br/>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

<b:else/>

<b:include data='post' name='post'/>

</b:if>

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 HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan trik klik label yang tampil judul posting saja.

Ganti kode yang berwarna merah dengan kode berikut.

<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>

<data:post.title/></div></a>

Catatan :

Silakan rubah kode yang berwarna hijau dengan kode warna yang sesuai dengan blog kamu.

Cara menambahkan image panah biru di depan title post adalah dengan trik menyisipkan kode berwarna biru di bawah ini, ke dalam kode yang baru ditambahkan sebelumnya. Kode selengkapnya :

<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'>

<img alt='>>>' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvysulv3Omv8Gkp5i2d6OSwTxHPyXP7wplZioHG8zq5SL4KUt5uhgfkY_bMrKrQUUVhMGdJvCIbCFd8SM89jvsMT_0wCS6PRQ16Ne8V50XlWq-w04abOyw7ohRNHfhhUjgsomzmu2n6V4/s144/Arrobblue.png'/>

<data:post.title/></div></a>

Jangan lupa disimpan.

Selamat memodifikasi judul posting saat mengklik label...

Membuat Posting dalam Kotak yang Terpisah-pisah

Kalau sebelumnya kamu telah membuat sidebar dalam kotak yang terpisah-pisah, sekarang bagaimana dengan posting "apakah bisa juga diterapkan?" Ternyata dengan sedikit menambah atau memodifiksi kode CSS, posting pun dapat ditampilkan dalam kotak yang terpisah-pisah. Penasaran dimana letak kode yang perlu ditambah atau dimodifikasi, mari bersama-sama kita ikuti trik bloggernya sebagai berikut.

Pilih Tata Letak --> Edit HTML.

Cari kode CSS .post antara <head> ... </head>. Kodenya lebih kurang seperti berikut.

.post {

margin:.5em 0 1.5em;

padding-bottom: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 mungkin berbeda tapi cari yang memiliki kemiripan (.post). Atau jika belum ada maka tambahkan kode tersebut.

Modifikasi kode .post, seperti dibawah ini.

.post {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Tambahan :

Rasanya kurang afdol apabila posting ditampilkan dalam kotak terpisah tanpa diikuti pula dengan komentar, karena akan kelihatan janggal dan kurang seimbang. Nah, untuk membuat komentar dalam kotak yang terpisah cukup dengan menambahkan kode berikut (tergantung karakteristik kode template masing-masing blog).

.comments {

background:#fff;

border:1px solid #6E6E6E;

margin:0 0 1.5em;

padding:0.5em;

}

Catatan :

Sesuaikan kode dengan tampilan template blog kamu, jangan asal copy-paste.

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

Jangan lupa di simpan.

Selamat membuat posting dalam kotak yang terpisah-pisah...

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 :

Pilih Tata Letak --> Edit HTML.

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

Sumber : Membuat Sidebar Dalam Kotak-Kotak Terpisah by Kang Rohman

Selamat membuat kotak sidebar terpisah-pisah...

Unknown Title..

Sudah hampir seminggu lebih tidak ada postingan terbaru di blog ini ya,
biasanya minimal 3x seminggu selalu saja ada postingan yang segar2 dari
o-om.com, berhubung memang minggu2 ini banyak style="font-weight: bold;">perjalanan wisata
keluar kota, dimana saya harus nyetir sendirian melintasi banyak kota
yang tersebar sepanjang
daerah Jatim dan Jateng, trus ditambah lagi demam href="http://id-id.facebook.com/people/Agus-Ramadhani/525338069"
target="_blank">facebook
yang makin menjadi-jadi saja, makanya blog ini semakin rada jarang tersentuh :(

Jujur saja, sebenarnya pengen sekali cerita panjang lebar perjalan
wisata saya kemaren, berhubung hampir semua cerita tidak penting ini
sudah saya tayangkan langsung di Facebook makanya sudah
terlalu basi untuk saya ulas kembali huhuhuhu. ini salah satu poto penampakan diambil langsung menggunakan camera amatir dipantai pacitan *halah PD mode on wkwkwkw

Ya sudah segini aja dulu, postingan kali ini sebagai pemasan saja,
silahkan ditunggu postingan berikutnya. So
keep stay tune on o-om.com OK.

Membuat Menu Horizontal

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

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.

/* navbar

================== */

#bg_nav {

background: #ffffff;

width: 850px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #000000;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #000000;

border-bottom: 1px solid #ffffff;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #000000;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #000000;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}

#navleft {

width: 500px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 220px;

font-size: 11px;

float: right;

margin: 0px;

padding: 3px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 3px 5px 0px 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #ffffff;

color: #000000;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #ffffff;

}

#nav a:hover {

background: #c06000;

color: #000000;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}

#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #ffffff;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #ffffff;

border-left: 1px solid #ffffff;

border-right: 1px solid #ffffff;

}

#nav li li a:hover, #nav li li a:active {

background: #c06000;

padding: 7px 30px 7px 10px;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

Catatan :

Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.

Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.

Untuk kode pewarnaan, kamu bisa melihatnya di kode warna ini.

Kemudian cari kembali kode seperti di bawah ini.

<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'/>

... dan seterusnya ...

</b:section>

</div>

Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>

<div id='navleft'>

<div id='nav'>

<ul>

<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

<li><a href='http://Link_yang_dituju'>Add Link</a></li>

</ul>

</div>

</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>

</form>

</div>

</div>

Jangan lupa disimpan

Baca juga postingan : Dasar Pembuatan Menu Horizontal

Sumber : Tutorial Membuat Horizontal Navigasi by Kang Rohman

Update

Permasalahannya terjadi pada dropdown yang blink ketika di dekati mouse. Kode CSS yang perlu diperbaiki adalah sebagai berikut

#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
position:absolute;
}

Kemudian agar teks dalam menu utama dapat menyesuaikan dengan ukuran karakter yang Anda masukkan, maka perlu pula memperbaiki kode CSS seperti yang tampak di bawah ini.

#nav li {
float: left;
margin: 0px;
padding: 0px;
position:relative;
}

Kode CSS yang berwarna merah merupakan penambahan dari kode CSS navigasi menu horizontal sebelumnya. Saya mohon maaf atas ketidak nyamanan ini.

Update 26 September 2011

Jika Anda terasa sulit untuk menerjemahkan beberapa kode yang cukup banyak di atas. Saya menyediakan tautan lain untuk membuat menu navigasi horizontal yang tutorialnya mudah diikuti. Silakan klik tautan berikut untuk menuju ke artikel yang saya maksud Mudahnya membuat Menu Horizontal dan Dropdown Menu Navigasi Horizontal.

Galat Blogger Berkode bX-193ra1

Ternyata OB baru-baru ini (selama 3 hari) mengalami error di blogger. Error tersebut berkode "bx-193ra1", OB dibuat kelimpungan dengan galat tersebut. OB juga cari-cari informasi di blogger help dan hasilnya nihil. Memang ada sih beberapa pengguna blogger yang mengalami galat bx-193ra1, tapi masih belum ada jawabannya. Mungkin kamu pada bertanya seperti ini "Apa maksud dari galat berkode bx-193ra1 itu? Galat bx-193ra1 berarti blog kamu tidak bisa disimpan ketika kamu melakukan "Edit Layout" (Tata Letak --> Elemen Halaman). Coba bayangkan saat kita memindah posisi elemen, namun tidak bisa disimpan dan tiba-tiba muncul jendela error blogger bertuliskan bx-193ra1. Keblinger kan!!!

Alhamdulillah... Setelah selidik punya selidik dan sedikit melakukan bongkar pasang kode HTML, akar permasalahan tersebut dapat ditemukan. Rupa-rupanya yang menjadi biang keringat ...eh... biang keladi maksudnya adalah kode berikut :

<b:if cond='data:blog.pageType == "item"'>

</b:if>

Eit.. jangan langsung menarik kesimpulan kepagian dong. Apabila digunakan secara normal dengan mengikuti sistem pengkodean yang benar, kode HTML di atas tidak akan menimbulkan permasalahan. Karena kode tersebut berfungsi untuk menyembunyikan perangkat widget/gadget pada halaman depan blog kamu dan akan terlihat jika kamu atau pengunjung blog mengklik sebuah posting.

Kemudian yang menjadi masalah adalah apabila kode HTML itu diletakkan diantara kode <widget> ... </widget> (tidak didalam perangkat widget/gadget), sehingga jika kamu membuka "Edit Layout" (Tata Letak --> Elemen Halaman) widget tersebut tidak akan terlihat sama sekali. Adapun alternatif pemecahannya adalah dengan menghilangkan atau memindahkan kode HTML yang bersangkutan ke tempatnya yang benar, yakni didalam perangkat widget.

Contoh penempatan kode yang tepat :

<b:widget id='HTML111' locked='false' title='Poting yang berkaitan' type='HTML'>

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Contoh penempatan kode yang kurang/tidak tepat :

<b:if cond='data:blog.pageType == "item"'>

<b:widget id='HTML111' locked='false' title='Poting yang berkaitan' type='HTML'>

<b:includable id='main'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>

</b:includable>

</b:widget>

</b:if>

Sekarang sudah tahu kan tentang serba-serbi galat bx-193ra1 ...

Membuat Widget Label Berborder Bawah

Sulit juga bikin judul yang mengena dengan isi postingan, pokoknya seperti itulah. Agar tidak membayangkan yang lain, seperti apa rupanya langsung lihat contoh di sidebar kanan widget blog OB. Nah, di sana tempat lahir beta... Ups!?? Maksudnya kamu lihat label yang ada tambahan icon di depan label (panah biru) dan bergaris putus-putus di bawahnya. Dan ini juga sekaligus jawaban atas pertanyaan Caplin_Banjar dalam komentarnya di posting "Trik Memasang Fungsi Scroll".

Dengan tidak panjang lebar langsung kita kupas trik blogger untuk membuat label tersebut :

Pilih Tata Letak --> Edit HTML.

Cari kode berikut diantara <head> ... </head>:

.sidebar li {

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

atau kode-kode yang sejenis dalam template blog kamu.

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.

Tambahkan kode yang berwarna hijau berikut, di bawah kode di atas

background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;

border-bottom:1px dotted #000000;

Artinya : Kamu mengganti icon daftar urutan dengan image di alamat penyimpanan file image kamu (ex : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvysulv3Omv8Gkp5i2d6OSwTxHPyXP7wplZioHG8zq5SL4KUt5uhgfkY_bMrKrQUUVhMGdJvCIbCFd8SM89jvsMT_0wCS6PRQ16Ne8V50XlWq-w04abOyw7ohRNHfhhUjgsomzmu2n6V4/s144/Arrobblue.png) dan menambah border (warna hitam) di bawah item daftar urutan label dengan garis putus-putus.

Sehingga full kodenya adalah

.sidebar li {

background:url("http://Alamat_Penyimpanan_Image_Kamu") no-repeat 0px .20em;

border-bottom:1px dotted #000000;

margin:0;

padding:0 0 .25em 17px;

line-height:1.2em;

}

Jangan lupa disimpan

Posting yang berkaitan : Trik Blogger | Menghilangkan Angka Jumlah Label

Mudah bukan, selamat membuat widget label berborder bawah...

Lama Tak Jumpa

Sudah lama banget rasanya ngga bikin posting. Waktu terasa begitu cepat, maklum OB sambil kerja jadi tidak selalu online. Kali ini pun postingan masih berkisar tentang kata-kata mutiara, tanpa ada embel-embel tips SEO atau trik blogger. Di kantor tempat OB bekerja memerlukan target pencapaian yang sedemikian sulit, sehingga waktu untuk online pun tersita bahkan ngga online sampai lebih dari seminggu. Mungkin ada teman-teman yang berkomentar dan mengunjungi blog Optimasi Blog belum dibalas komentar serta kunjungannya, OB minta maaf (he..he..he).

Sekarang OB akan balas kunjungan dan komentarnya ke blog kamu. Nantikan OB di blog kamu serta jangan menyesal telah mengunjungi Optimasi Blog. Karena Blog tanpa kunjungan akan terasa hampa, sebaliknya blog yang telah mendapat kunjungan tapi ngga balas mengunjungi, nanti dikatain sombong.

Yuk, saling mengunjungi dan berikan komentar dalam blog yang kamu kunjungi...

Modifikasi Tampilan Judul Posting saat Mengklik Label

Membuat Posting dalam Kotak yang Terpisah-pisah

Membuat Sidebar dalam Kotak yang Terpisah-pisah

Unknown Title..

Membuat Menu Horizontal

Update

Update 26 September 2011

Galat Blogger Berkode bX-193ra1

Membuat Widget Label Berborder Bawah

Lama Tak Jumpa

Popular Posts

Arsip Blog

Label Blog

Total Pageviews

- Mereund Blog