Menambah Kolom dibawah Header

Oke kawan-kawan semuanya, hari ini sepertinya hari yang menyenangkan bagi saya maklum sikecil HELWA ANNAJAH udah mulai bisa memanggil MAMA… senang rasanya. Tapi apa hubungannya dengan postingan yang satu ini ya.. kayaknya ngga ada dech.

Sekarang kebetulan saya lagi semangat dan ingin terus menulis, dan kebetulan teman saya setia yaitu ALIF yang terus mengikuti perkembangan myLOGIC menanyakan tentang cara membuat kolom baru, tapi letaknya diatas. Pembuatan kolom tersebut sebenarnya sudah pernah saya posting [DISINI] namun postingan tersebut membahas masalah menambahkan kolom dibagian bawah seperti pada templates myLOGIC sekarang ini.

Opps.. kepanjangan pengantarnya, karena saya yakin pasti ALIF sudah ngga sabar lagi ingin langsung praktek. Sekarang ikuti langkah-langkah dibawah ini :

Pertama silakan login dahulu diBlogger anda kemudian pilih Layout trus pilih Edit HTML

Karena ini sifatnya script sederhana, jadi Expand Widget Templates tidak usah ditandai..karena bikin kepala pusing melihat kebanyakan script/kode yang tidak diperlukan

Kemudian biasa copy-paste kode dibawah ini tepat diatas kode ]]></b:skin>

/* KolomAtas
—————————- */

#kolomatas {
width: 950px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}

#kolomatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 12px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#kolomatas ul {
padding: 0;
margin: 0;
}

#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #031c5d; */
}

#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#FFFF33;
text-decoration: none;

}
#kolomatas ul li a:hover {
background: #B1ACB1;
}

#left-kolomatas { /* yang ini nih kode kolom kiri */
width: 450px;
float: left;
padding-left:15px;
}

#right-kolomatas { /* kalo yg ini kode kolom kanan */
width: 450px;
float: left;
padding: 0 5px 0 15px;
}

Sedikit catatan bahwa pada bagian yang ditandai merah yaitu 950px itu adalah lebar kolom keseluruhan kemudian karena yang ingin dijadikan 2 kolom maka harus dibagi 2 menjadi 450px – 450px kiri dan kanan. Mungkin ada yang bertanya bahwa 450+450=900 bukan 950, ya itu benar. Kenapa total kolom 1 dan 2 cuma 900 itu dikurangi dengan jarak kiri (padding) kiri 15px, tengah 20px dan kanan 15px.

Kalau sudah di Copas (copy-paste), sekarang cari kode seperti dibawah

<div id=’outer-wrapper’>
<div id=’header-wrapper’>
<b:section class=’header’ id=’header’ maxwidgets=’1′>
<b:widget id=’Header1′ locked=’true’ title=’NAMA BLOG ANDA’ type=’Header’/>
</b:section>
</div>

Kalau sudah ketemu, copy-paste kode dibawah ini tepat berada dibawah kode tersebut diatas

<div id=’kolomatas’>
<b:section class=’kolomatas’ id=’left-kolomatas’>
</b:section>
<b:section class=’kolomatas’ id=’right-kolomatas’>
</b:section>
</div>

Kalau sudah silakan simpan templates anda, kemudian lihat hasilnya di bagian Page Elements

Kalau ternyata tidak ada perubahan terhadap template anda berarti ada kesalahan pada script tersebut dan perlu ceck ulang, namun kalau terdapat dua buah kolom baru dibawah header, maka dipastikan anda hampir menjadi webmaster

Oke teman-teman semua, itu dulu postingan saya hari ini. Walaupun semangat tapi tetap juga cape… jadi moga-moga ada manfaatnya. Kalau ada yang kesulitan ataupun yang sudah berhasil silakan balik lagi kesini dan kasih komentar dibawah.

Ingin Blog anda terkenal daftarkan saja [DISINI]

My logic

Menghilangkan Garis Bawah pada Link

Kecenderungan saya yang ingin terus berperang dan berjuang untuk berkreasi dengan templates terutama templates blogger dimana sekarang sudah mencapai titik terkecil (weee.. kaya orang serius ..padahal ngga). Maksud ketitik terkecil disini bukan berarti jago kandang melainkan baru bisa memperbaiki templates secara kecil-kecilan.

Kali ini saya ingin angkat bicara tentang menghilangkan garis bawah yang biasanya terdapat disebuah link dalam blog yang sudah ter-KLIK. Memang untuk hal ini sebenarnya tidak semua orang menginginkan adanya garis bawah tersebut dengan alasan mengurangi kecantikan blognya. Namun bagi anda yang masih menginginkan adanya garis bawah pada link silakan untuk tidak membaca postingan ini…(bukan mengusir ..ya)

Trus lagi, kebanyakan kawan-kawan blogger lain juga pernah mengulas masalah ini karena menurut saya pribadi CSS yang dirubah kebanyak sehingga kadang – kadang membingungkan para blogger yang masih awam.

Nah.. daripada kepanjangan menjelaskannya … padahal yang disampaikan cukup singkat yakni hanya menambahkan beberapa baris saja pada CSS.

Langkahnya adalah :

Masuk ke halaman Layout

Kemudian Edit HTML

Kemudian cari kode seperti ini ]]></b:skin>

Copy kode dibawah ini tepat diatas kode tersebut

a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}

Kalo sudah, jangan lupa simpan HTML anda

Singkat sekali bukan.. yah..cuman itu yang bisa. Namun kalo menurut saya tidak usah panjang-panjang yang penting hasilnya sama dengan yang disampaikan teman-teman blogger lainnya.

Oke..bos, sekarang silakan hasilnya..kalo tidak berhasil hubungi saya, karena semua script yang ada disini sudah saya pakai untuk membenahi templates yang sekarang anda lihat disini.

Terima kasih dan moga-moga bermanfaat…AKU CINTA KEINDAHAN….

Ingin Blog anda terkenal daftarkan saja [DISINI]

My logic