1) Dua kolom di atas header                   2) Dua kolom di bawah header

Langsung saja ya, berikut langkahnya :

1. Login ke akun blog anda

2. Pilih Design >> Edit HTML

3. Centang Expand Template Widget

Untuk menambah 2 kolom di atas header, copy kode yang ada di dalam kotak, lalu letakkan di atas kode <header>

Untuk menambah 2 kolom di bawah header, copy kode yang ada di dalam kotak, lalu letakkan di atas kode </header> 

 

keterangan;

ukuran kolom dapat anda sesuaikan

width:50% 

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

Suatu waktu mungkin kita bosan dengan background postingan kita yang warnanya putih atau hitam polos, atau mungkin sekedar ingin mencoba bereksperimen kecil maka kita boleh mencoba merubah backgroun postingan dengan cara-cara berikut ini, karena pengetahuaan yang baru pasti sangat menyenangkan. Nah cara membuat backgroun postingan yang saya tahu saat ini baru dua cara...

• Yang Pertama untuk membuat background warna, caranya...

Letakkan kode berikut pada awal postingan

<div style="background:kode warnanya disini">

Dan diakhir postingan, harus di tutup dengan kode seperti ini :
</div>
Tulisan kode warnanya disini anda ganti dengan kode warna yang anda inginkan. Bisa lihat macam-macam kode warnanya disini. Yang perlu diperhatikan saat anda meletakkan kode tersebut, anda harus memilih tab edit HTML, jangan Compose.
Sebagai contoh backgroun dengan warna pink...
<div style="background:#FFCCFF">

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

</div>
Hasilnya akan seperti ini :

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

• Yang kedua Membuat background dengan Gambar

Jika anda memiliki gambar khusus untuk dijadikan backgroud uploud dulu ke website hosting seperti photobucket atau tempat hosting lainnya untuk memperoleh URL addresnya.
Yang harus diperhatikan anda harus berada pada posisi edit HTML, berikut kode diawal postingan:
<div style="background:url(alamat gambarnya disini) no-repeat;">
Diakhir postingan tutup dengan kode berikut:
</div>
Ganti tulisan alamat gambarnya disini dengan alamat gambar yang ingin anda tampilkan.
Seperti halnya pada background dengan warna, kode inipun bisa anda tambah-tambahin sesuai dengan keinginan.
Contoh, saya ingin membuat posting dengan background yang beralamat di http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif, background ingin di simpan di sebelah kanan atas posting tanpa repeat, padding sebesar 10 pixel, besar hurup 90% :
<div style="background:url(http://i685.photobucket.com/albums/vv220/amatullah_sy/713599gidcqc66ex.gif) no-repeat center top; text-align:justify; font-size:90%; padding:10px">

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

 </div>
Maka hasilnya seperti ini:

Pada setiap tempat engkau akan mendapatkan kegelapan dalam hidupmu, maka tidak ada yang mesti engkau lakukan kecuali menghidupkan lentera yang ada di dalam jiwamu.

Optimislah walaupun engkau berada dalam terpaan bencana.

Besok kita menanti pohon raihan akan berbunga, kesedihan akan sirna dan kebahagiaan akan menjelma.

Emasmu adalah agamamu, perhiasanmu adalah akhlakmu, dan hartamu adalah budi pekertimu.

Setiap manusia akan hidup; orang yang mempunyai istana dan orang yang hidup didalam gubuk…akan tetapi siapakah yang bahagia?

Biarkanlah orang yang zalim dihadapkan pada pengadilan akhirat, yang pada saat itu tidak ada hakim kecuali Allah.

Penyakit adalah berita yang membawa kabar gembira dan sehat adalah perhiasan yang berharga.

Nah jika kita ingin mempatenkan background tersebut sebagai backgroud pada setiap postingan kita agar tak capek mengeditnya, caranya masuk menu pengaturan/ settinf =>klik tab format=>pada bagian akhir kolom format letakkan kode diatas

Nah selamat mencoba, semoga bermanfaat! Untuk melihat postingan saya lainnya yang memiliki background klik  disini

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

Ketika manusia meninggal dunia hanya meninggalkan tiga perkara. Sodakoh/amal jariah, anak yang soleh dan solekhah serta ilmu pengetahuan yang bermanfaat. Barang siapa menyebarkan ilmu pengetahuan niscaya ilmunya akan tetap bermanfaat walaupun penciptanya telah meninggal dunia.
Segala sesuatu yang saya posting dalam blog ini semata mata hanya menyebarkan ilmu kepada orang lain dan untu mengingat diriku tentang BLOG maka kali ini kita akan Membuat Kolom Scroll Pada Blog Archive. Sama halnya dengan komentar yang apabila memiliki lebih dari 50 komentar, akibatnya akan membuat blog panjang ke bawah, nah Blog Archive ini pun sama.

Sewaktu teman-teman memposting suatu artikel dan di-archive-kan secara Hierarki dan Judul Artikelnya ditampilkan, maka semua artikel yang ada di Blog Archive tersebut akan tampil memanjang ke bawah. Nah untuk membuatnya terlihat sedikit rapi agar tidak memanjang terlalu ke bawah, maka kita akan membuat Kolom Scrollnya.

Untuk membuatnya silahkan ikuti langkah-langkah di bawah ini:1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut <div id='ArchiveList'> atau ArchiveList

Note: Untuk menemukan kode 
atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara, klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.

4. Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:

 <div class='widget-content'>

<div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>

<b:include name='quickedit'/>
</div>
</b:includable>
...
 5. Harap disesuaikan saja kodenya, karena tidak semua templates sama,
6. Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height: 200px,
7. Jika sudah klik Save templates dan lihat hasilnya.

Seperti itulah Cara Membuat Kolom Scroll Pada Blog Archive, semoga bisa bermanfaat untuk teman-teman semua dan selamat mencoba. Sucess selalu untuk anda.....

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

1 comment

Di postingan sebelumnya kita telah mempelajari bagaimana membuat menu drop down dengan menggunakan CSS. Nah, sekarang kita akan mempraktekkan bagaimana memasang menu drop down dengan CSS pada blog, dan kali ini tentu masih pada blogspot. Kebetulan saya webwalking (istilah apaan tuh?) tadi malam dan menemukan sebuah situs yang meyediakan struktur menu drop down CSS yang sangat bagus menurut saya. Oleh karena itu, saya akan memberikan tips bagaimana memasang menu tersebut pada blog pembaca. Jika pembaca ingin melihat struktur lain, silahkan kunjungi situsnya langsung di www.cssmenumaker.com. Untuk membuat menu drop down tersebut pada blogspot caranya sama dengan yang sebelum-sebelumnya. Berikut langkah-langkahnya:

1. Silahkan login terlebih dahulu pada akun Blogspot pembaca.
2. Klik link Tata Letak kemudian pilih sub tab menu Edit HTML
3. Silahkan backup terlebih dahulu template pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik link Download Template Lengkap pada bagian Backup/Restore Template
4. Beri centang pada kotak kecil disamping tulisan Expand Template Widget
5. Cari struktur ]]></b:skin> pada kotak Edit Template tersebut
6. Jika sudah ketemu, copy paste struktur CSS berikut ini tepat diatas struktur ]></b:skin>.
   @charset "utf-8";
/* CSS Document */
/*^'^ Navigation Structure ^'^*/
.nav-container-outer{
background: #990000;
padding: 0px;
height: 74px;
background: url(http://nestoriko.googlepages.com/nav-bg.jpg);
}
.float-left{
float: left;
}
.float-right{
float: right;
}
.nav-container .divider{
display:block;
font-size:1px;
border-width:0px;
border-style:solid;
}
.nav-container .divider-vert{
float:left;
width:0px;
display: none;
}
.nav-container .item-secondary-title{
display:block;
cursor:default;
white-space:nowrap;
}
.clear{
font-size:1px;
height:0px;
width:0px;
clear:left;
line-height:0px;
display:block;
float:none;
}
.nav-container{
position:relative;
zoom:1;
margin: 0 auto;
}
.nav-container a, .nav-container li{
float:left;
display:block;
white-space:nowrap;
}
.nav-container div a, .nav-container ul a, .nav-container ul li{
float:none;
}
.nav-container ul{
left:-10000px;
position:absolute;
}
.nav-container, .nav-container ul{
list-style:none;
padding:0px;
margin:0px;
}
.nav-container li a{
float:none
}
.nav-container li{
position:relative;
}
.nav-container ul{
z-index:10;
}
.nav-container ul ul{
z-index:20;
}
.nav-container ul ul ul{
z-index:30;
}
.nav-container ul ul ul ul{
z-index:40;
}
.nav-container ul ul ul ul ul{
z-index:50;
}
li:hover>ul{
left:auto;
}
#nav-container ul {
top:100%;
}
#nav-container ul li:hover>ul{
top:0px;
left:100%;
}
/*^'^ Primary Items ^'^*/
#nav-container a{
padding:7px 17px 7px 18px;
margin: 10px 0px 0px 0px;
color: #FFFFFF;
font-family: Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:14px;
text-decoration:none;
font-weight: bold;
background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: top;
}
#nav-container a:hover{
color: #6C3600;
background: url(http://nestoriko.googlepages.com/item-primary-bg.gif);
background-repeat: no-repeat;
background-position: center;
}
/*^'^ Secondary Items Container ^'^*/
#nav-container div, #nav-container ul{
padding:10px 4px 10px 4px;
margin:0px 0px 0px 0px;
background: url(http://nestoriko.googlepages.com/item-secondary-container-bg.jpg);
background-repeat: repeat-x;
background-color: #FF9900;
border-bottom: 1px solid #CA6500;
}
/*^'^ Secondary Items ^'^*/
#nav-container div a, #nav-container ul a{
padding:3px 10px 3px 6px;
background-color: #FFFFFF;
background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
background-repeat: no-repeat;
background-position: 0px 22px;
font-size:11px;
border-width:0px;
border-style:none;
margin: 0px 0px 0px 0px;
width: 149px;
}
/*^'^ Secondary Items Hover State ^'^*/
#nav-container div a:hover, #nav-container ul a:hover{
background-color: #FFFFFF;
background: url(http://nestoriko.googlepages.com/item-secondary-bg.jpg);
background-repeat: no-repeat;
color:#CC0000;
}
/*^'^ Secondary Item Titles ^'^*/
#nav-container .item-secondary-title{
cursor:default;
padding:4px 0px 3px 7px;
color: #6C3600;
font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;
font-size:11px;
/* background: url(http://nestoriko.googlepages.com/item-secondary-title-bg.jpg); */
background-repeat: no-repeat;
font-weight:bold;
}
/*^'^ Horizontal Dividers ^'^*/
#nav-container .divider-horiz{
border-top-width:1px;
margin:5px 5px;
border-color: #C16100;
}
/*^'^ Vertical Dividers ^'^*/
#nav-container .divider-vert{
border-left-width:1px;
height:15px;
margin:4px 2px 0px 2px;
border-color:#AAAAAA;
}
   
7. Temukan struktur berikut pada template pembaca:
   <b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
   
8. Copy paste struktur menu berikut ini tepat dibawah struktur yang Anda temukan pada langkah 7:
   <div class="nav-container-outer">
<img src="http://nestoriko.googlepages.com/nav-bg-l.jpg" alt="" class="float-left" />
<img src="http://nestoriko.googlepages.com/nav-bg-r.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#" target="_self">MENU1</a>
<ul style="width:150px;">
<li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#" target="_self">MENU2</a>
<ul style="width:150px;">
<li><a href="URL" title="sample" target="_self" >Sub Menu1</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu2</a></li>
<li><a href="URL" title="sample" target="_self" >Sub Menu3</a></li>
</ul>
</li>
<li><span class="divider divider-vert" ></span></li>
<li class="clear"> </li>
</ul>
</div>
   
9. Perhatikan bagian yang diberi warna merah. Bagian tersebut merupakan struktur untuk 1 buah menu beserta sub menu-seb menu di dalamnya. Jika pembaca ingin menambah menu baru, silahkan buat lagi struktur seperti yang berwarna merah tersebut dan letakkan setelah struktur menu yang lain, misalnya setelah struktur "MENU2", dan seterusnya. Kemudian ganti "URL" dengan alamat halaman yang akan dituju jika sub menu diklik.
   
10. Setelah itu klik tombol SIMPAN TEMPLATE

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

1 comment

Menu drop down sangat berguna untuk halaman blog yang memiliki ruang sidebar terbatas.menu drop down sangat simpel,karena dalam satu kotak kecil saja dapat memuat puluhan menu.seperti memuat menu daftar link.

Contoh menu drop down:






Yang menarik menu tersebut dapat dipasang dimana saja.termasuk di halaman posting seperti contoh tersebut.nah..bagaimana? Tertarik untuk membuatnya? Jika tertarik simak caranya seperti dibawah ini.

1.login ke blogger.

2.klik rancangan.

3.klik tambah gadget lalu pilih HTML/JavaScript.

4.selanjutnya masukan script dibawah ini pada kolom HTML/JavaScript.

<select onChange="document.location.href=this.options
[this.selectedIndex].value;">
<option value="0" selected>Daftar link</option>
<option value="URL">Nama link</option>
<option value="URL">Nama link</option>
</select>

Untuk URL ganti dengan alamat blog.sedangkan Nama link ganti sesuai selera.

5.Jangan lupa klik simpan.

6.selesai...!

Selamat mencoba dan semoga berhasil !

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

1. Seperti biasa, sobat harus masuk ke akun blogger, dan bukan akun twitter, heheh . . .

2. Selanjutnya pada menu sobat klick Rancangan ➨ Edit HTML.

3. Lalu dalam edit template sobat cari </body> jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari kode HTML.

4. Jika sudah ketemu sekarang sobat copy kode berikut dan paste atau letakkan di bawah kode tadi.

<script type='text/javascript'>var tujuan ='http://Alamat Url Feeds Sobat'</script>
<script src='http://otowebsite.googlecode.com/files/efek_lipatan.js' type='text/javascript'/>

5. Klick pertinjauan terlebih dahulu ya, kalo sudah muncul baru klick save template sobat.


Keterangan:
Ganti teks warna merah dengan Url Feed bunner sobat.

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments

Memasang menu read more pada template sangat berguna untuk menghemat ruang.karena berfungsi untuk memangkas sebagian kalimat posting yang berada dihalaman depan (home).memangkas bukan berarti menghapusnya.melainkan memotong sebagian kalimat dengan memberi link read more kepada pembaca untuk melihat isi posting secara utuh.

Nah bagaimana dengan template blog sobat? apa sudah memasang menu read more? jika belum,untuk membuatnya langkahnya sebagai berikut:

1.Login ke blogger.

2.setelah masuk.klik rancangan lalu klik edit html.

3.Simpan terlebih dahulu template yang sedang digunakan.dengan cara klik link Download template lengkap.ini untuk mengantisipasi jika nanti terjadi kesalahan.

4.Setelah selesai.selanjutnya beri centang pada kotak kecil disamping expand template widget.

5.Langkah selanjutnya cari kode seperti dibawah ini.

<data:post.body/>

Atau...

<p><data:post.body/></p>

Agar lebih mudah dalam mencarinya gunakan fungsi Ctrl+F.atau secara manual yang penting ketemu kodenya.

6.setelah ketemu.hapus kode tersebut (pada poin 5) lalu ganti dengan kode seperti dibawah ini.

<b:if cond='data:blog.pageType
== &quot;item&quot;'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a
expr:href='data:post.url'>Read
More.....</a>
</b:if>

tulisan Read more bisa diganti sesuai selera.seperti Baca selengkapnya atau Selanjutnya.

7.setelah selesai.klik Simpan template.

8.jika langkahnya benar,maka akan ada keterangan Perubahan anda telah disimpan 'lihat blog'.

9.klik lihat blog untuk melihat perubahan.

Sampai disini sobat sudah berhasil memasang menu atau link read more.untuk mengatur berapa kalimat yang ingin dipotong sisipkan kode berikut.

<span class="fullpost">

</span>

Read more »

These icons link to social bookmarking sites where readers can share and discover new web pages.

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

0 Comments