Cara Mengubah Lebar Menu Navigasi

saya ingin berbagi informasi kepada pembaca sekalian khususnya bagi yang menggunakan template seperti yang saya pakai saat ini yaitu Thesis SEO Blogger Template karya dari Blog Juragan.

Sebelumnya pada template ini, saya hanya dapat memasukkan maksimal lima tautan menu navigasi dalam satu baris. Bila saya memasang tautan yang ke-enam maka posisinya akan berada di bawah baris menu navigasi tersebut seperti yang terlihat pada gambar di bawah ini.

Tampilan menu navigasi sebelum diubah lebarnya.

Nah, agar tautan menu yang ke-enam dapat berada di sebelah tautan yang ke-lima, seperti yang terlihat pada gambar di bawah ini, maka kita perlu mengubah lebar dari menu navigasi tersebut.

Tampilan menu navigasi setelah diubah lebarnya.

Bagaimana cara untuk mengubah lebar dari menu navigasi tersebut? Silakan simak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk berjaga-jaga kalau nanti terjadi kesalahan kita sudah mempunyai back-up-nya.

4. Cari kode seperti di bawah ini. Gunakan fungsi pencarian dengan menekan tombol Ctrl + F lalu masukkan kata kunci #menu ul {.

#menu ul {
border-left:1px solid #DDDDDD;
float:left;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:630px;
}

5. Ganti lebarnya, yaitu 630px menjadi 900px (sesuai lebar wrapper) sehingga hasilnya menjadi seperti di bawah ini.

#menu ul {
border-left:1px solid #DDDDDD;
float:left;
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
list-style-type:none;
margin:0;
padding:0;
width:900px;
}

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai.

semoga bermanfaat. http://ribuan-cara.blogspot.com

Read More

Cara Membuat Menu Navigasi Horizontal - Vertikal pada blogspot

kali ini ribuan-cara.blogspot.com akan membahas tentang Cara Membuat Menu Navigasi Horizontal - Vertikal pada blogspot.

Pada beberapa template Blogger hasil mengunduh dari layanan penyedia template Blogger gratisan kita dapat menemukan adanya menu navigasi horizontal dengan sub menu-sub menu vertikal. Namun, hal berbeda kita temui saat menggunakan template yang disediakan oleh pihak Blogger. Di sana belum tersedia menu navigasi yang dimaksud. Akan tetapi, kita dapat menambahkan menu navigasi horizontal dengan sub menu-sub menu vertikal pada template tersebut. Bagaimana cara membuatnya? Silakan simak langkah-langkahnya di bawah ini.

Sekadar mengingatkan, tutorial di bawah ini masih menggunakan antarmuka Blogger yang lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Backup template dulu dengan mengeklik Download Template Lengkap.

4. Cari kode ]]></b:skin> gunakan tombol Ctrl + F untuk mempercepat pencarian.

5. Selanjutnya copy kode di bawah ini dan paste di atas kode tersebut.

#NavbarMenu {
background: #000;
width: 400px;
height: 10px;
font-size: 11px;
font-family: Trebuchet MS, Tahoma, Verdana;
color: #fff;
margin: 0px;
padding: 0px;
}

#NavbarMenuleft {
width: 400px;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
background: #222222;
height: 15px;
color: #fff;
display: block;
font-size: 11px;
font-family: trebuchet ms, ;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;}

#nav li a:hover, #nav li a:active {
background: #222222;
color: #ffffff;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 150px;
color: #222222;
font-size: 11px;
font-family: trebuchet ms,;
font-weight: normal;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #222222;
color: #ffffff;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

6. Klik tombol SIMPAN TEMPLATE.

7. Kemudian ke menu Elemen Laman dan klik Tambah Gadget yang ada di bawah header.

8. Pilih HTML/JavaScript.

9. Lalu copy kode di bawah ini dan paste di Konten.

<div class='menuhorisontal'>
<ul id='nav'>

<li><a href='url menu 1'>MENU 1</a></li>

<li><a href='url menu 2'>MENU 2</a>
<ul>
<li><a href='url sub menu 2.1'>SUB MENU 2.1</a></li>
<li><a href='url sub menu 2.2'>SUB MENU 2.2</a> </li>
<li><a href='url sub menu 2.dst'>SUB MENU 2.dst</a></li>
</ul>
</li>

<li><a href='url menu 3'>MENU 3</a>
<ul>
<li><a href='url sub menu 3.1'>SUB MENU 3.1</a></li>
<li><a href='url sub menu 3.2'>SUB MENU 3.2</a> </li>
<li><a href='url sub menu 3.dst'>SUB MENU 3.dst</a></li>
</ul>
</li>

<li><a href='url menu 4'>MENU 4</a>
<ul>
<li><a href='url sub menu 4.1'>SUB MENU 4.1</a></li>
<li><a href='url sub menu 4.2'>SUB MENU 4.2</a> </li>
<li><a href='url sub menu 4.dst'>SUB MENU 4.dst</a></li>
</ul>
</li>

<li><a href='url menu dst'>MENU dst</a></li>

</ul>
</div>

• Silakan diganti tulisan-tulisan yang berwarna merah dengan yang Anda inginkan.

10. Klik tombol SIMPAN.


semoga bermanfaat... silahkan di coba.

Read More

Cara Membuat 3 Kolom di Bawah Header pada Blogger

B

erikut ini langkah-langkah dalam membuat 3 (tiga) kolom atau elemen di bawah Header di Blogger. Selamat menyimak.. Semoga berhasil..

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Hal ini untuk mengantisipasi jika nanti terjadi kesalahan dalam pengeditan kita dapat dengan mudah mengembalikan template ke seperti semula.

4. Cari kode ]]></b:skin>. Untuk mempercepat pencarian, silakan tekan Ctrl + F lalu masukkan kodenya.

6. Copy kode di bawah ini dan paste di atas kode tersebut.

#box-main-container {

clear:both;

} 

.box-column {

padding:0px 10px 10px 10px;

border:1px dotted $bordercolor;

}

7. Cari kode <div id='main-wrapper'> atau bila tidak ada, silakan cari <div class='main-outer'>.

8. Copy kode di bawah ini dan paste di atas salah satu kode tersebut.

<div id='box-main-container'>

<div id='box1' style='width: 30%; 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: 40%; float: left; margin:0; text-align: left;'>

<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

9. Klik tombol SIMPAN TEMPLATE.

Read More

Cara Menghilangkan Ikon Pensil pada Blog

Ikon pensil biasanya muncul di bawah posting saat kita sudah masuk di Blogger. Sama halnya seperti ikon obeng dan tang yang muncul kalau telah login di akun Blogger. Walaupun kita dapat melihat ikon ini, namun tidak begitu halnya dengan para pengunjung yang melihat blog kita dari komputer lain.

Ikon pensil ini digunakan untuk melakukan pengeditan cepat terhadap suatu posting atau artikel yang sudah diterbitkan. Jadi, adanya ikon ini memudahkan kita dalam mengedit posting karena tanpa perlu lagi melakukan beberapa kali klik guna menemukan menu "Edit" pada posting tertentu.

Beberapa blogger mungkin tidak menyukai kehadiran ikon pensil ini sehingga mereka memutuskan untuk menghilangkan saja tampilan dari ikon ini. Bagaimanakah cara untuk menghilangkan ikon pensil tersebut? Berikut ini langkah-langkahnya:

1. Masuk ke akun Blogger Sobat.

2. Klik menu "Opsi lainnya" lalu pilih "Tata Letak".

3. Kemudian klik "Edit" pada Blog Posts (Posting Blog).

4. Lalu hilangkan tanda centang pada "Tunjukkan Pengeditan Cepat".

5. Klik tombol "Simpan".

6. Lihat artikel Sobat, apakah sudah hilang atau belum ikon pensil tersebut.

Read More

Cara Menghilangkan Bingkai Gambar di Posting

Bingkai gambar

Bingkai gambar atau border image merupakan garis yang muncul di sekeliling gambar pada posting. Pada sebagian template, bingkai atau border ini masih muncul pada gambar yang diunggah dalam artikel. Namun, pada sebagian template yang lain, bingkai gambar ini sudah tidak terlihat lagi.

Jika dirasa kemunculan bingkai ini mengurangi nilai keindahan tampilan dari gambar itu sendiri, maka kita dapat menghilangkan bingkai tersebut. Sebenarnya kita tidak menghilangkan, hanya saja membuatnya tidak terlihat karena kita menentukan nilai ketebalan bingkai itu menjadi  nol piksel.

Kalau sewaktu-waktu nanti kita ingin mengembalikan border image tersebut, kita tinggal memberi nilai kembali ketebalan dari border tadi. Berikut langkah-langkah dalam menghilangkan bingkai gambar.

1. Masuk ke akun Blogger Anda.

2. Klik segitiga hitam dropdown (Opsi lainnya) lalu pilih menu "Template".

3. Klik tombol "Edit HTML" kemudian klik tombol "Lanjutkan".

4. Kemudian carilah kode yang mirip dengan kode di bawah ini (.post img).

.post img {
border:4px solid #DDDDDD;
}

5. Selanjutnya ganti ketebalan border menjadi 0px sehingga kodenya menjadi seperti di bawah ini.

.post img {
border:0px solid #DDDDDD;
}

6. Klik tombol "Simpan template" dan lihat hasilnya pada postingan Anda yang mengandung gambar.

Read More

Cara Mengurangi Lebar Sidebar pada Template Thesis

Setidaknya ada 2 macam template Thesis untuk Blogspot yang saya temui. Ada template Thesis yang pada bagian sidebar-nya terdapat 2 kolom seperti pada template yang sedang saya gunakan ini. Ada pula template Thesis yang mengandung satu kolom saja di sidebar-nya.

Saya merasa sidebar tersebut terlalu lebar sehingga membuat lebar kolom halaman posting terlihat menjadi agak sempit. Sebenarnya sidebar yang cukup lebar tersebut memang didesain untuk menaruh unit iklan (adsense). Namun, saya ingin mengurangi lebar dari sidebar itu.

Screenshot sidebar sebelum dikurangi lebarnya.

Mengurangi lebar sidebar harus dibarengi dengan menambahkan lebar halaman posting. Yang mana nilai pengurangan lebar sidebar sama dengan nilai untuk menambahkan lebar halaman posting. Misalnya, saya mengurangi lebar sidebar sebesar 60px, maka saya juga harus menambahkan lebar halaman posting sebesar 60px.

Berikut ini langkah-langkah yang saya lakukan untuk mengubah nilai lebar halaman posting dan lebar sidebar pada template yang sedang saya pakai ini.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian klik "Template".

3. Klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template.

4. Lalu klik tombol "Edit HTML" dan klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Kemudian saya mencari kode-kode seperti di bawah ini untuk menemukan lebar halaman posting dan lebar sidebar. Dari kode-kode di bawah ini kalau lebar halaman posting sebesar 507px, lebar sidebar atas dan sidebar bawah sebesar 362px, lebar sidebar-wrapper1 sebesar 160px, dan lebar sidebar-wrapper2 sebesar 182px.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px  dotted #dddddd;
border-bottom: 1px  dotted #dddddd;
border-top: 1px  dotted #dddddd;
border-right: 1px  dotted #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:8px;
}
#sidebar-wrapper1 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:15px;
margin:18px 0px 5px 0px;
width:160px;
word-wrap:break-word;
}
#sidebar-wrapper2 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:182px;
word-wrap:break-word;
}
#sidebar-bottom {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:362px;
word-wrap:break-word;
}

7. Di sini saya akan membuat lebar sidebar atas dan sidebar bawah menjadi 300px. Dengan demikian saya harus mengurangi lebar kedua sidebar tersebut sebesar 62px karena 362px dikurang 300px sama dengan 62px. Setelah mengurangi lebar sidebar sebesar 62px, berarti saya juga harus menambah lebar halaman posting sebesar 62px juga. Dengan demikian lebar halaman posting menjadi 569px (507px + 62px).

Sekarang saya harus menyesuaikan lebar untuk sidebar-wrapper1 dan side-wrapper2. Seperti diketahui, saya telah mengurangi lebar sidebar-top dan sidebar-bottom masing-masing sebesar 62px, untuk itu saya harus mengurangi juga lebar kedua sidebar-wrapper tersebut sebesar 62px. Agar lebih mudahnya saya bagi 2 saja angka 62px ini sehingga lebar (width) sidebar-wrapper1 yang 160px itu saya kurangi 31px. Dengan demikian lebarnya menjadi 129px. Begitu pula lebar side-wrapper2 saya kurangi 31px sehingga menjadi 151px (182px - 31px).

8. Karena lebar kolom komentar dan lebar kotak komentar sama dengan lebar halaman posting (sebelum diubah) yakni sebesar 507px, maka ada baiknya kita menambahkan pula lebar kedua elemen tersebut agar tampak serasi yaitu menjadi 569px (sama dengan lebar halaman posting setelah diubah).

Untuk mencari kedua lebar elemen tersebut, carilah kode-kode seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

9. Kemudian gantilah kedua angka 507 tersebut menjadi 569.

10. Klik tombol "Simpan template" dan lihat hasilnya.

Screenshot sidebar yang lebarnya sudah dikurangi

Sedangkan untuk mengurangi lebar sidebar pada Template Thesis SEO Blogger yang mengandung 1 kolom, caranya tidak jauh berbeda dengan cara di atas. Pada template ini, kode lebar halaman posting dan lebar kedua sidebar terdapat pada kode-kode seperti di bawah ini.

#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf97VWK-2dEL7p6BWBHid1YEZ_Myij5VOnvM1tlmsywqmMWb6KphDZ7f946MIY6CYO_9Rl2vLduVwpzRgNi3rpw-lAwivUlr8kSLbc6ZXVH5niGroZBqRyyQT4-vHbMuWIkd5KP1C1kmLj/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}

Misalnya saya juga ingin membuat lebar kedua sidebar (sidebar-top dan sidebar-wrapper) menjadi 300px maka saya tinggal mengurangi 362px dengan 62px. Dengan demikian saya juga harus menambah lebar halaman posting (main-wrapper) sebesar 62px. Hasilnya adalah 569px (507px + 62px).

Setelah itu jangan lupa untuk mengubah lebar kolom komentar dan lebar kotak komentar. Yang tadinya mempunyai lebar 507 diganti menjadi 569. Tujuannya adalah agar serasi dengan lebar halaman posting sekarang. Kode-kode untuk kedua elemen tersebut adalah seperti di bawah ini.

#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>

Berikut screenshot sidebar pada template Thesis 1 kolom sidebar, baik yang sebelum diganti lebarnya maupun setelah dikurangi lebarnya.

Sidebar yang belum dikurangi lebarnya.

Sidebar yang sudah dikurangi lebarnya.

Setelah melakukan perubahan pada lebar sidebar dan lebar halaman posting, kita perlu juga mengatur ulang banyaknya karakter atau huruf pada widget readmore otomatis agar tampilan home page menjadi lebih serasi.

Read More

Border Style Multiple pada 3 Kolom Widget

Sudah beberapa bulan ini saya menerapkan 3 kolom widget di atas footer blog ini. Memang saya sebelumnya pernah melakukan hal yang serupa, namun beberapa waktu kemudian saya menghapus kembali 3 kolom widget tersebut. Kini saya telah memasang kembali kolom widget tersebut.

Ada yang berbeda jika dibandingkan dengan pemasangan 3 kolom widget pada waktu sebelumnya. Di manakah letak perbedaannya? Pertama, dari segi widget-widget yang saya pasang pada ketiga kolom tersebut. Sekarang saya memasang widget-widget yang berhubungan dengan statistik blog ini yaitu info pagerank, info Alexa rank, total tayangan laman, user online status, dan jumlah pengunjung.

Perbedaan kedua adalah mengenai pemanis yang saya tampilkan pada ketiga kolom widget tersebut. Bila pada waktu sebelumnya saya menambahkan border dobel pada bagian atas, maka pada kali ini saya menambahkan border style multiple.

Border Style Multiple pada 3 Kolom Widget

Sedangkan mengenai cara pemasangannya dapat saya tuliskan di bawah ini. Kalau ada yang ingin menerapkannya pada template selain yang saya gunakan ini, mungkin hasil yang berbeda akan didapat.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" lalu pilih "Template".

3. Kalau mau membuat salinan template, bisa mengeklik tombol "Cadangkan / Pulihkan" terlebih dahulu.

4. Setelah itu klik tombol "Edit HTML" dan tombol "Lanjutkan".

5. Kemudian cari kode ]]></b:skin> lalu letakkan kode berikut di atas kode tersebut.

#tiga-kotak-bawah {
clear:both;
border-color: orange;
border-style: dotted dashed solid double;
border-width: 6px;
margin-bottom: 6px;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}

6. Selanjutnya cari kode <div id='footer'> lalu taruh kode berikut di atas kode tersebut.

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

7. Klik tombol "Simpan template" dan lihat hasilnya di menu "Tata Letak".

Read More

Memunculkan Lebih Dari Satu Label pada Menu Breadcrumbs

Pada template Thesis SEO Blogger yang sedang saya gunakan ini (saat artikel ini ditulis) memang sudah tertanam 'menu breadcrumbs'. Namun, jika artikel atau posting yang mempunyai label lebih dari satu, label yang tampil pada 'menu breadcrumbs' tersebut hanya satu. Tidak semua label yang dimiliki artikel tersebut muncul.

Label yang muncul hanya satu pada menu breadcrumbs.

Untuk menyiasati agar artikel yang mempunyai beberapa label dapat tampil label-labelnya pada 'menu breadcrumbs', maka kita perlu mengedit sedikit kode 'menu breadcrumbs' tersebut. Berikut ini langkah-langkah untuk membuat semua label tampil pada 'menu breadcrumbs' pada template Thesis SEO Blogger.

1. Masuk ke akun Blogger.

2. Klik "Opsi lainnya" kemudian pilih menu "Template".

3. Selanjutnya klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template. Hal ini berguna untuk memudahkan mengembalikan template ke keadaan semula bila terjadi kesalahan dalam pengeditan.

4. Klik tombol "Edit HTML" lalu klik tombol "Lanjutkan".

5. Beri tanda centang pada "Expand Template Widget".

6. Cari kode seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

7. Perhatikan kode <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> lalu tambahkan kode &#187; sehingga menjadi <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

Selanjutnya amati kode:

<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Kemudian ganti tanda"=" yang pertama dengan "!" dan tukar letak kedua kode tersebut sehingga menjadi seperti di bawah ini:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

8. Setelah kode nomor 6 diedit, maka hasilnya akan menjadi seperti di bawah ini.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<!-- No breadcrumb on home page -->

<b:else/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- breadcrumb for the post page -->

<p class='breadcrumbs'>

<span class='post-labels'>

<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

<b:if cond='data:label.isLast != &quot;true&quot;'> &#187;

</b:if>

</b:loop>

<b:else/>

&#187;Unlabelled

</b:if>

&#187; <span><data:post.title/></span>

</b:loop>

</span>

</p>

<b:else/>

9. Klik tombol "Simpan template" dan periksa hasilnya pada artikel yang mempunyai lebih dari satu label.

Semua label tampil pada menu breadcrumbs.

Read More

Cara Mem-backup Template pada Blogger

Sebelum mengedit template, ada baiknya kalau kita mem-backup atau menyimpan sebuah salinan dari template tersebut. Hal ini berguna untuk mengantisipasi kalau nanti terjadi kesalahan dalam proses pengeditan template, kita dapat dengan mudah mengembalikan ke template seperti semula. Type file dari template ini adalah XML Document. Biasanya file ini bernama template-blogIDAnda.xml Untuk mem-backup template, Anda dapat menyimak langkah-langkahnya di bawah ini.

1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Pada bagian Backup/Restore, silakan klik Download Template Lengkap.
4. Kemudian silakan klik tombol yang mengarahkan Anda untuk menyimpan file template tersebut di komputer Anda.

Read More

Hilangkan Link Posting Lebih Baru, Beranda, Posting Lama

Link Posting Lebih Baru (Newer Post), Beranda (Home), dan Posting Lama (Older Post) merupakan deretan link navigasi yang biasanya terletak di bawah kolom komentar. Link ini dapat membantu pengunjung untuk melihat posting yang berikutnya atau posting yang sebelumnya atau untuk kembali ke halaman depan atau home. Namun, bila Anda tidak menyukai dengan keberadaannya, link-link ini dapat dihilangkan agar tidak terlihat lagi. Berikut ini cara menghilangkan link Posting Lebih Baru, Beranda, dan Posting Lama.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Silakan klik Download Template Lengkap untuk menyalin templat guna mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.

4. Untuk menghilangkan link Posting Lebih Baru, silakan cari kode seperti di bawah ini. Gunakan Ctrl + F untuk memudahkan pencarian.

#blog-pager-newer-link {
float:left;
}

5. Tambahkan kode display:none; sehingga hasilnya menjadi seperti di bawah ini.

#blog-pager-newer-link {
float:left;

display:none;

}

6. Untuk menghilangkan link Posting Lama, silakan cari kode seperti di bawah ini.

#blog-pager-older-link {
float:right;
}

7. Kemudian tambahkan kode display:none; sehingga hasilnya menjadi seperti di bawah ini.

#blog-pager-older-link {
float:right;
display:none;

}

8. Terakhir, untuk menghilangkan link Beranda, silakan cari kode seperti di bawah ini.

#blog-pager {
text-align:center;
}

9. Selanjutnya, tambahkan kode display:none; lagi sehingga hasilnya menjadi seperti di bawah ini.

#blog-pager {
text-align:center;
display:none;

}

10. Klik tombol SIMPAN TEMPLATE.

11. Selesai dan lihat artikel Anda untuk melihat hasilnya.

Read More

Cara Menghilangkan Icon Obeng dan Tang pada Blogger

Saat kita sedang mengedit template dan melihat hasilnya, maka akan terlihat icon obeng dan tang pada pojok-pojok elemen atau widget blog. Icon tersebut berfungsi untuk melakukan pengeditan widget secara cepat. Jadi, saat kita ingin mengedit kembali elemen tersebut, kita tinggal klik saja shortcut yang bergambar obeng dan tang tersebut tanpa perlu lagi ke tab Elemen Laman.

Sebenarnya, icon obeng dan tang ini hanya muncul apabila kita masuk ke akun Blogger kita. Namun, icon ini tidak akan terlihat di komputer pengunjung lain walaupun kita sedang log in.

Bila Anda tidak menyukai keberadaan icon obeng dan tang ini, Anda dapat menghilangkannya dengan cara menambahkan sedikit kode CSS pada HTML template blog. Berikut ini langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template.

4. Cari kode ]]></b:skin> (Gunakan Ctrl + F untuk mempercepat pencarian.)

5. Copy kode di bawah ini dan paste di atas kode tersebut.

.quickedit{
display:none;
} 

6. Klik tombol SIMPAN TEMPLATE.

7. Selesai dan lihat hasilnya.

Kalau Anda ingin menampilkan kembali icon obeng dan tang, tinggal dihapus saja kode tersebut.

Read More

Cara Mengganti Template di Blogger

Template blog merupakan sebuah desain tampilan halaman blog dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa pemograman dan siap pakai. Seperti yang Anda lihat pada blog ini,  di situ terlihat tatanan gambar dan tulisan di layar monitor Anda, inilah yang dinamakan template.

Di Blogger, Anda dapat mengganti template dengan leluasa sesuai selera dan keinginan masing-masing. Bila Anda telah mahir dalam membuat template, Anda dapat menggunakan template tersebut untuk blog Anda. Namun, bila Anda masih awam, Blogger telah menyediakan beberapa template yang dapat Anda pilih sesuai keinginan. Selain itu, Anda dapat pula mengunduh atau men-download template dari penyedia template Blogger.

Kembali ke bahasan utama, cara mengganti template di Blogger atau Blogspot ada dua macam, yakni mengganti template dengan template yang disediakan oleh Blogger atau mengganti template dengan template yang didapat dari penyedia template Blogger. Berikut ini pembahasannya:

Cara Mengganti Template dengan Template yang Disediakan Blogger

1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Perancang Template.
3. Klik pada pilihan template yang tersedia. Selain itu, Anda dapat juga mengedit background-nya, menyesuaikan lebar template, dan lain sebagainya.

4. Jika telah cocok, klik tombol APPLY TO BLOG.
5. Selesai.

Cara Mengganti Template dengan Template dari Penyedia Template

1. Unduh atau download terlebih dahulu template yang Anda sukai pada situs penyedia template Blogger secara gratis.
2. File template yang diunduh biasanya masih dalam bentuk terkompresi (.zip atau .rar). Oleh karena itu, Anda perlu mengekstraknya dengan software ekstraktor seperti WinZip atau WinRar.
3. File yang nantinya diunggah atau di-upload ke Blogger adalah file yang berekstensi .xml.
4. Masuk ke akun Blogger Anda.
5. Klik Rancangan > Edit HTML.
6. Klik Download Template Lengkap terlebih dahulu, untuk berjaga-jaga kalau-kalau Anda nanti ingin kembali ke template yang lama.
7. Klik tombol Telusuri untuk mencari file template yang sudah Anda ekstrak tadi (file berekstensi .xml)
8. Klik tombol Unggah.
9. Bila muncul peringatan tentang widget, klik tombol PERTAHANKAN WIDGET.
10. Selesai.

Read More

Mengganti Posting Lebih Baru dan Lama dengan Judul Posting

Hari ini saya berkeinginan untuk memodifikasi link "Posting Lebih Baru" dan "Posting Lama" agar menjadi seperti yang ada di blog WordPress. Sehingga nantinya link "Posting Lebih Baru" atau "Newer Post" dan "Posting Lama" atau "Older Post" akan berganti dengan "Judul Posting" seperti yang tampak pada gambar di bawah ini.

Tulisan "Posting Lebih Baru" dan "Posting Lama" telah berganti dengan "Judul Posting".

Bagi yang ingin mengganti link-link tersebut bisa mengikuti langkah-langkahnya di bawah ini. Namun, bila sebelumnya Anda pernah menghilangkan link tersebut atau menggantinya dengan gambar, sebaiknya kembalikan dahulu seperti semula agar nantinya dapat berjalan dengan lancar.

Berikut langkah-langkah untuk mengganti tulisan link "Posting Lebih Baru" dan "Posting Lama" dengan "Judul Posting". Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan >> Edit HTML.

3. Cari kode </head>. Gunakan fitur pencarian dengan menekan tombol Ctrl + F atau F3.

4. Copy kode di bawah ini dan paste di atas kode </head> tersebut.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

5. Klik tombol SIMPAN TEMPLATE.

6. Selanjutnya silakan menuju Elemen Laman >> Tambah Gadget >> HTML/JavaScript.

7. Kemudian copy kode di bawah ini dan paste di "Konten"

<style type="text/css">

#blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;}

#blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;}

</style>

<script type="text/javascript">

$(document).ready(function(){

var olderLink = $("a.blog-pager-older-link").attr("href");

$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

var olderLinkTitle = $("a.blog-pager-older-link").text();

$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt

});

var newerLink = $("a.blog-pager-newer-link").attr("href");

$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

var newerLinkTitle = $("a.blog-pager-newer-link:first").text();

$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);

});

});

</script>

• Silakan sesuaikan ukuran huruf dan lebarnya dengan keadaan template Anda.

8. Klik tombol SIMPAN.

9. Selesai dan lihat blog Anda.


Sumber: http://www.themasdoyok.com/2011/04/mengganti-older-newer-link-post-dengan.html

Read More

Cara Membuat 3 Kolom Widget di Atas Footer pada Template Thesis

Bila Sobat juga menggunakan template Thesis seperti yang ane pakai ini dan ingin menambahkan 3 kolom widget di atas footer, Sobat bisa melihat langkah-langkahnya di bawah ini. Postingan membuat 3 kolom di atas footer ini bisa dibilang merupakan kebalikan dari posting yang berjudul Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO.

Berikut langkah-langkah membuat 3 kolom widget pada footer. Nanti, hasilnya akan seperti yang terlihat di blog ini yaitu adanya border pada bagian atasnya. Semoga berhasil.

1. Masuk ke akun Blogger.

2. Klik Rancangan >> Edit HTML.

3. Untuk berjaga-jaga, silakan back-up template dulu dengan mengeklik Download Template Lengkap sehingga bila nanti terjadi kesalahan kita dapat dengan mudah mengembalikan tempate seperti semula.

4. Carilah kode ]]></b:skin>. Untuk pencarian cepat, tekan tombol Ctrl + F pada keyboard lalu masukan kode tersebut.

5. Kemudian copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#tiga-kotak-bawah {
clear:both;
border-top:3px double #e6e4e3;
}
.kolom-kotak {
padding:0px 10px 10px 10px;
}

• Silakan diubah paddingnya sesuai keinginan Sobat.

Catatan: Jika ketiga kolom tidak diberi "Judul", Anda dapat mencoba menambahkan kode margin-top:14px; di bawah kode border-top:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

6. Selanjutnya cari kode <div id='footer'>.

7. Letakkan kode di bawah ini di atas kode <div id='footer'> tersebut.

<div id='tiga-kotak-bawah'>
<div id='kotak1' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol1' preferred='yes' style='float:left;'/>
</div>
<div id='kotak2' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol2' preferred='yes' style='float:left;'/>
</div>
<div id='kotak3' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='kolom-kotak' id='kol3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

8. Klik tombol SIMPAN TEMPLATE.

9. Selesai.

3 kolom widget di atas footer.

Read More

Cara Membuat 3 Kolom di Bawah Header pada Template Thesis SEO

Tutorial berikut saya tujukan khusus bagi yang menggunakan template yang sama dengan yang saya pakai yaitu Thesis SEO Blogger Template karya dari Blog Juragan. Langsung saja, untuk membuat 3 kolom di bawah header, silakan simak langkah-langkahnya di bawah ini. Semoga berhasil.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membuat salinan template. Bila nanti terjadi kesalahan dalam pengeditan kita sudah mempunyai backupnya sehingga dengan mudah mengembalikan template seperti semula.

4. Cari kode ]]></b:skin>. Gunakan fitur pencarian pada browser agar cepat menemukannya.

5. Copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.

#box-main-container {
clear:both;
border-bottom:3px double #e6e4e3;
}
.box-column {
padding:0px 10px 10px 10px;
}

Catatan: Jika ketiga kolom tidak diberi "Judul", tambahkan kode margin-top:14px; di bawah kode border-bottom:3px double #e6e4e3; agar konten tidak mepet dengan border atas.

6. Selanjutnya cari kode <div id='main-wrapper'>.

7. Copy kode di bawah ini dan paste di atas kode tersebut.

<div id='box-main-container'>

<div id='box1' style='width: 33%; 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: 34%; float: left; margin:0; text-align: left;'>

<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>

</div>

<div id='box3' style='width: 33%; float: right; margin:0; text-align: left;'>

<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

8. Klik SIMPAN TEMPLATE.

9. Selesai.

Setelah ditambahkan widget, maka hasilnya akan tampak seperti gambar di bawah ini.

3 kolom di bawah header.

Read More