Permasalahan Membuat Halaman Penuh Tanpa Sidebar

Sebelumnya saya telah posting tentang bagaimana membuat halaman penuh tanpa sidebar, dan ternyata banyak yang masih gagal membuatnya. Beberapa akhirnya konsultasi langsung dengan saya dan sukses dan tentu masih banyak yang belum bisa membuatnya dan ternyata hanya karena masalah kecil.

#1 Sidebar Id
Permasalah pertama hanyalah pada masalah sidebar ID. Mari kita lihat dulu kode pada tutorial sebelumnya tentang pembuatan halaman penuh tanpa sidebar. Kode berikut diinstruksikan untuk diletakkan di atas </head>

<b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>
    <style>
.sidebar {
display: none !important;
}
    #main-wrapper, .post {
width: 640px;
    }
    </style>
    </b:if>

Yang berwarna merah adalah class sidebar. Anda bisa menggantinya manual sesuai dengan model template Anda. Misalkan template Anda terdiri dari satu sidebar saja, maka secara umum sidebar id nya menggunakan sidebar-wrapper, sehingga kodenya:

#sidebar-wrapper {
display: none !important;
}

Beberapa template menggunakan beberapa model sidebar, seperti dua sidebar, atau bahkan ada yang memakai sidebar lebar di atas dan dua sidebar di bawah sidebar utama. Nah, caranya sama saja. Anda hanya perlu mengetahui Id Sidebar Anda (Id diawali pagar : #). Pisahkan antar id dengan koma. Kodenya menjadi seperti berikut ini:

#idsidebar1, #idsidebar2, #idsidebar3, #idsidebar4 {
display: none !important;
}

misalnya saja menjadi:

#sidebar-wrapper, #mid-sidebarleft, #mid-sidebarright, #sidebar-bottom {
display: none !important;
}

Jadi permasalahan utama soal ini Adalah Anda harus bisa menemukan id sidebar yang ingin dihilangkan.

#2 Kebingungan Menghilangkan Widget
Setelah menghilangkan sidebar, tentu semua widget pada sidebar akan ikut hilang. Namun banyak yang kebingungan bagaimana cara menghilangkan widget-widget di bawah postingan seperti tombol like button. Widget HTML yang ditambahkan langsung seperti tombol like facebook (baca: memasang tombol suka/like facebook) tidak mempunyai class selector atau id selector. Seperti disebutkan pada permasalahan 1, kita harus bisa menemukan id sidebar untuk menghilangkannya. Begitupun dengan widget. Lalu bagaimana jika widget tidak mempunyai id atau class? Jawabannya adalah kita beri sendiri.

Tambahkan css kosong misalnya seperti berikut ini di atas ]]></b:skin>

#hilangsaja {border: 0;}

Sekarang pada kode penghilangan sidebar tadi tambahkan id hilangsaja sehingga misal seperti berikut ini:

#sidebar-wrapper, #hilangsaja {
display: none !important;
}

Nah, kode di atas berarti semua widget yang memiliki id hilangsaja maka akan dihilangkan. Terakhir adalah memberikan id hilangsaja pada gadget yang akan dihilangkan. Caranya adalah mengapit kode widget yang akan dihilangkan, sehingga seperti berikut ini:
<div id="hilangsaja">
kode widget yang ingin dihilangkan disini
</div>

#3 Penentuan Halaman Tertentu
Pada postingan menjelaskan penghilangan sidebar pada halaman tertentu. Perhtaikan kode baris pertama:

<b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>

Maka Anda diminta untuk mengganti yang berwarna merah dengan alamat postingan Anda yang ingin ditampilkan tanpa sidebar. Jika Anda ingin membuatnya di keseluruhan halaman postingan Anda, maka Anda cukup mengganti kode tersebut dengan
<b:if cond='data:blog.pageType == &quot;item&quot;'>

Untuk berbagai kustomisasi lain, misal kebalikannya dengan membuat pengaturan tanpa sidebar untuk halaman selain posting, untuk homepage saja, untuk static page saja atau sebagainya, baca daftar selected code lengkap di postingan: Penampilan Widget di Halaman Tertentu

Selamat siang dan semoga bermanfaat....

Read More......

Menyembunyikan Sidebar Pada Homepage - Minima Today #5

Banyak sekali yang bertanya tentang widget related posts di blog ini. Widget berwarna hijau yang hanya tampil pada halaman postingan. Sebenarnya itu mudah sekali dibuat. Template ini saya ubah menjadi 3 kolom satu kolom saya sembunyikan di halaman depan.

Secara berurutan template ini terdiri dari main-wrapper, sidebar1 dan sidebar2. Gadget related posts (baca: Membuat Related Posts di Sidebar) saya letakkan di sidebar tengah dan sidebar tengah hanya ditampilkan pada halaman postingan.

Menyembunyikan Sidebar di Halaman Depan
Seperti biasa, mari kita gunakan contoh template Minima. Pada percobaan lalau kita telah menambahakan satu sidebar baru pada tempalte (baca: Menambah Kolom Sidebar Pada Template), sekarang kita akan menyembunyikannya. Yang akan kita sembunyikan adalah sidebar tengah (midsidebar-wrapper, kode pada tempalte Anda bisa berbeda.). Sebaiknay Sidebar yang akan dihilangkan di homepage dikosongkan dari widget terlebih dahulu.

- Login blogger
- Rancangan/Design
- Edit HTML
- Centang Expand Template Widget
- Cari kode seperti berikut ini:
 <div id='midsidebar-wrapper'>
        <b:section class='sidebar' id='midsidebar' preferred='yes'>
</b:section>
 </div>

Yang berwarna merah, menandakan sidebar yang akan dihilangkan. Apit kode tersebut dengan kode penampilan hanya dihalaman postingan, sehingga menjadi seperti berikut ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='midsidebar-wrapper'>
        <b:section class='sidebar' id='midsidebar' preferred='yes'>
</b:section>
 </div>
</b:if>

- Simpan template Anda.
Langkah pertama selesai, karena Anda telah berhasil menyembunyikan sidebar di homepage.

Melebarkan Area Postingan di Homepage
Karena satu sidebar dihomepage dihilangkan, maka akan terjadi area kosong bekas sidebar tersebut. Mari kita penuhi area kosong tersebut dengan melebarkan area postingan khusus di homepage.

Tambahkan kode berikut ini di atas </head>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style>
    #main-wrapper{
width: 710px;
    }
    </style>
    </b:if>

Pada width sesuaikan dengan kondisi lebar template Anda (formatnya: lebarmainwrapper asli + lebarsidebar yang dihilangkan). Jika sudah silahkan simpan template Anda. Sekarang perhatikan bagian elemen halaman Anda, area kosong telah hilang. Area postingan bertamabah lebar.

Menambahkan Gadget Pada Sidebar Yang di Sembunyikan
Kita sudah berhasil menyembunyikan sidebar pada homepage dan membuat area postingannya bertambah lebar. Perhatikan gambar di atas. Namun, bagaimana cara kita menambahkan gadget ke sidebar yang dihilangkan sedangkan kolom untuk penambahan di elemen halaman hilang? Mari kita tambahkan melalui edit HTML. (mungkin inigin anda baca juga: Pindah Gadget Manual Jika Terjadi Galat)

Pertama, Tambahkan Gadget Ke Sidebar Lain yang masih tampak. Jika Anda menggunakn dua sidebar. Yang satu disembunyikan dan yang satu tidak. Kita bisa menggunakan bntuan sidebar yang tidak disembunyikan. Tambahkan gadget seperti biasa. Kita coba dengan menambahkan widget HTML/JavaScript. Dam misalnya kita beri nama gadget tersebut dengan gadget contoh.

Kedua, Pindahkan Gadget tersebut ke sidebar yang disembunyikan.
- Login blogger
- Design/Rancangan
- Edit HTML, centang expand template widget .
- Cari kode gadget contoh untuk menemukan keseluruhan kode gadget yang ingin kita pindah.
Jika sudah ketemu, silahkan pindahkan ke section sidebar lain Anda seperti gambar berikut ini:

Pastikan kode ditutup dengan benar, karena sidebar kosong kadang tidak akan memiliki penutup </b:section> Tambahkan jika tidak ada, sehingga seperti gambar di atas. Semoga bermanfaat...

Read More......

Membuat Related Post / Artikel Terkait di Sidebar

Ini salah satu tutorial paling banyak di request. Bagaimana cara membuat artikel terkait atau related posts di sidebar. Di blog ini, muncul setelah Anda msuk ke salah satu postingan pada gadget berjudul, Silahkan Anda Baca. Nah, tutorial ini berbeda dari cara membuat artikel terkait di bawah postingan (Baca: Membuat Artikel Yang Berkaitan). Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Anda harus mempunyai label (Baca: Pentingnya Label dan Permasalahannya) karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.

Instalasi Script
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Template Widget
5. Letakkan kode berwarna biru berikut di atas </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

6. Kemudian cari kode berikut
<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <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;'>,</b:if>
  </b:loop>
  </b:if>

Ganti dengan

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<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;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Pada yang berwarna merah max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label. Jadi bisa ditampilkan hanya 7, atau bisa juga hingga 15 jika postingan Anda memiliki lebih dari satu label.

7. Simpan Template Anda.

Penempatan Gadget
Sekarang beralihlah ke bagian Tata Letak. Pilih dimana gadget akan ditambahkan. Klik Add Gadget. Pilih HTML/JavaScript.

Lalu masukkan kode berikut ini di gadget Anda.


<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Nah, begitulah rangkaian tutorial menambahkan artikel terkait atau related posts di sidebar Anda. Ini akan membantu meningkatkan page view blog Anda. Semoga bermanfaat. Mengalami kesulitan untuk tutorial lain? Request saja...

Read More......