Sembunyikan Semua Widget - Lanjutan

Sebelumnya gue pernah nulis gmn cara nyembunyiin gadget di blogspot. 
Untuk lengkapnya, silakan baca di  menghilangkan-semua-widget-untuk-halaman-tertentu 

nah kali ini gue mau nambahin kode untuk kondisi2 tertentu. 
Jd, kita bisa nyembunyiin gadget hanya ketika loading ke home, post tertentu, atau halaman. 

Oke ini kodenya.

Ini hanya menampilkan widget pada halaman Home atau halaman utama saja

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

Style Widget

</b:if>

Ini hanya akan menampilkan widget selain Homepage atau halaman pertama

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

Style Widget

</b:if>

Ini hanya akan menampilkan widget pada Archive Page atau halaman arsip

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

Style Widget

</b:if>

Ini hanya akan menampilkan widget selain halaman Archive Page

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

Style Widget

</b:if>

ini hanya akan menampikan widget pada halaman postingan saja

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

Style Widget

</b:if>

Ini hanya akan menampikan widget selain halaman posting

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

Style Widget

</b:if>

Ini hanya akan menampilkan widget pada halaman static page

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

Style Widget

</b:if>

Ini hanya akan menampilkan widget selain halaman static page

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

Style Widget

</b:if>

Ini hanya akan menampikan widget  pada postingan tertentu

<b:if cond='data:blog.url == &quot;alamatpostingan&quot;'>

Style Widget

</b:if>

Ini hanya akan menampilkan widget selain postingan tertentu

<b:if cond='data:blog.url != &quot;alamaatpostingan&quot;'>

Style Widget

</b:if>

Cara penggunaannya: ganti statement kondisi di bawah ini dengan kondisi-kondisi di atas. paham kan?? hehe. moga paham. ^_^



<b:if cond='statemen kondisi''>
<style>
.sidebar{
            display: none !important;
}
.fauxcolumn-right-outer .fauxcolumn-inner{
           border: transparent;
}
    #main-wrapper, .post {
width: 900px;

    }
</style>
</b:if>


Semoga berhasil, kalau bingung, silakan tanya-tanya saja ya guys ^_^
Oleh Bani Adam Setiadi

Baca Selengkapnya ==> Sembunyikan Semua Widget - Lanjutan

Menambahkan Auto Read More pada blogspot - Script

Apa itu Auto Readmore?

Kalau kamu membuka halaman awal blog ini, maka kamu akan menemukan daftar posting artikel hanya menampilkan beberapa teks awal posting saja sebagai cuplikan dan di bawahnya akan terdapat link seperti Baca Selengkapnya ==> Judul Post
                                             
Yups, itu adalah Read More, tapi Read More kali ini lain karena semuanya sudah otomatis karena sudah diatur pada layout template html. Oleh karena itu maka disebut Auto Read More.

Gimana sih caranya buatnya?

Ayo kita sama-sama belajar untuk mencobanya.

1. Pertama, Pastinya kamu harus login dulu ke blog kamu. hehehe.
2. Lalu pergilah ke halaman Edit HTML (pada tab Perancangan)
3. Centang pada Expand Template Widget 
4. Masukkan script dibawah ini dimanapun, asal masih di dalam code html.
   
   <script type='text/javascript'>
   
   var thumbnail_mode = "float" ;
   summary_noimg = 250;
   summary_img = 250;
   img_thumb_height = 120;
   img_thumb_width = 120;
   
   </script>
   
   
   <script type='text/javascript'>
   
   //<![CDATA[
   
   /******************************************
   
   Auto-readmore link script, version 2.0 (for blogspot)
   (C)2008 by Anhvo
   visit http://en.vietwebguide.com to get more cool hacks
   ********************************************/
   function removeHtmlTag(strx,chop){
   if(strx.indexOf("<")!=-1)
   {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   strx = s.join("");
   }
   chop = (chop < strx.length-1) ? chop : strx.length-2;
   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
   strx = strx.substring(0,chop-1);
   return strx+'...';
   }
   
   function createSummaryAndThumb(pID){
   var div = document.getElementById(pID);
   var imgtag = "";
   var img = div.getElementsByTagName("img");
   var summ = summary_noimg;
   
   if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
   
   }
   
   var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
   div.innerHTML = summary;
   }
   //]]>
   </script>
5. Setelah itu cari (ctrl + f)  kode <data:post.body/> 
6. Ganti kode diatas dengan kode dibawah ini (ingat, diganti. bukan di sisipi. jadi tag diatas dihapus, lalu diganti dengan kode dibawah ini):
   
   <b:if cond='data:blog.pageType != "item"'>
   <div expr:id='"summary" + data:post.id'><data:post.body/></div>
   <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
   <span class='rmlink' style='float:left'><a expr:href='data:post.url' target='_blank'>READ MORE - <data:post.title/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
7. Silahkan langsung Simpan Template atau Pratinjau terlebih dahulu
8. Selamat blog anda sudah memiliki fitur Auto Read More

Keterangan :

berikut ini beberapa penjelasan tentang variabel pada kode JavaScript diatas:

var thumbnail_mode = "float";  ( letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float))
summary_noimg = 250; (Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Jumlah karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Tinggi thumbnail dalam piksel)
img_thumb_width = 120; (Tinggi thumbnail dalam piksel)

Pada  kode yang dibawah

target='_blank'

dapat dihapus jika tidak ingin membuka tab baru saat membuka halaman.


READ MORE - <data:post.title/>

READ MORE - dapat diganti sesukanya misalnya, Baca Selengkapnya di  atau Selanjutnya ==> atau terserah kreasi kamu.

Jika tidak ingin menampilkan judul halaman di sebelah Read More hapus kode <data:post.title/>

Yaps,.!! :-) Semoga Bermanfaat.

Oleh Bani Adam Setiadi

Baca Selengkapnya ==> Menambahkan Auto Read More pada blogspot - Script

Menghilangkan semua widget untuk halaman tertentu (full width page)

Alhamdulillah, saya sudah menemukan bagaimana cara menghilangkan komponen widget-lebih tepatnya menyembunyikan, hehehe- pada sebuah posting / halaman tertentu.

Caranya, kita masukkan kode berikut ke struktur html blog kita. tepatnya di atas </head>.

<b:if cond='data:blog.url == &quot;http://ldk-stmik-wit.blogspot.com/p/quran-explorer.html&quot;'>
    <style>
.sidebar{
            display: none !important;
}
.fauxcolumn-right-outer .fauxcolumn-inner{
           border: transparent;
}
    #main-wrapper, .post {
width: 900px;

    }
    </style>
    </b:if>

Teks yang berwarna jingga diganti dengan URL postingan/halaman yang kita inginkan.

Teks yang  berwarna hijau, kita sesuaikan dengan lebar maksimal dari blog kita.

Maksud teks yang merah itu: itulah komponen yang bener2 penting buat nyembunyiin fakta, eh maksudnya gadget/widget... hehehe. ^_^.

Dari kode diatas, kita bisa memodifikasi syaratnya. kalau diatas kan syartnya kalau url nya tersebut, maka style itu baru digunakan.. kita bisa merubahnya untuk jenis halaman statis saja. untuk kodenya nanti menyusul. hehehe.

Oke, sekian aja. sori kalau ngebingungin. hehehe.
moga gak bingung, dan bermanfaat. :-)

Oleh Bani Adam Setiadi

Baca Selengkapnya ==> Menghilangkan semua widget untuk halaman tertentu (full width page)

Tips Untuk Meninjau Struktur Blog atau Website, bagi yang sedang belajar web layout.

Hai guys, aku lagi belajar belajar html nih. udah jadi mahasiswa, tapi masih belum jago di dunia itu. tapi ga apa lah. yg penting sekarang gue sekarang mau belajar. :-)

Biasanya, kalau gue lihat suat website atau blog yang tampilannya menarik, gue coba untuk cari tau gimana itu bisa dibikin. Misalkan ada menu2 yang menarik, atau efek2 menarik lainnya.

Gue biasa ngintip isi sumber dari suatu blog atau website, hehehe. gak dosa kan? jadi, gue coba ngintip source code yang digunakan oleh websites atau blog tersebut.

Nah, browser yang bisa ngelakuin itu setahu saya sih Internet Explorer 7 keatas, Opera dan Google Chrome. Gak tau deh browser2 lainnya. coz gue cuma pernah pake itu sih. :-)

Kalau di Internet Explorer, namanya Developer Tools. Untuk mengaksesnya, klik menu Tools > Developer Tools (atau teken F12). Nanti muncul jendela baru untuk mengakses source code nya.

Kalau di Opera, bisa pake di menu View > Show atau Lihat > Tampilan.

Tampilan yang sudah diatur menampilkan Class dan ID

Terus kalau di Google Chrome, klik kanan terus pilih View Elements.

Nah, itu yang salah satu aku lakuin dalam belajar web.
O ya, kalau untuk ngliat kode sumber, biasanya masing-masing browser sudah menyediakan. biasanya ada ketika kita KLIK KANAN, terus pilih View Source atau yang lainnya sesuai browsernya. disana kita bisa lihat kode html yang digunakan.

Silahkan kalau yang mau nyoba. :-)

Baca Selengkapnya ==> Tips Untuk Meninjau Struktur Blog atau Website, bagi yang sedang belajar web layout.

Sembunyikan Navbar pada blogspot

Pernah ngrasa risih nggak akan keberadaan navbar bi blogspot? tau navbar kan? itu yang biasanya nongkrong diatas halaman blog kita, yang ada logo blogger nya.. ini nih gambarnya. hehehe.

Kalau yang gak ngrasa terganggu, oke2 aja. but, bagi kamu yang ngerasa risih akan kehadirannya, saya punya tips nih.. mau tau?? silahkan tau. hahaha.
kamu tinggal masukkan style ini: #navbar-iframe {visibility:hidden} atau #navbar-iframe {display:none} pada style blog kamu.
setelah itu, coba lihat blog kamu, masih adakah navbar padanya? hehehe.

uUps.. tapi katanya menghilangkan navbar termasuk melanggar perjanjian..
ya udah deh, kalau gitu. kita sembunyikan tapi tak menghilangkan navbarnya.
caranya, kita gunakan AutoHide pada navbar.
> gunakan style berikut:
#Navbar-iframe {opacity:0;filter(opacity=0);}
#Navbar-iframe:hover  {opacity:1;filter(opacity=100);}

Baca Selengkapnya ==> Sembunyikan Navbar pada blogspot

Pembukaan

PEMBUKAAN / PREAMBULE

Assalamu'alaikum

Bahwa blog ini adalah blog tempat gue ngotak-ngatik blog. disinilah gue ber-eksperimen dengan elemen-elemen blogspot.
Gue lagi belajar desain web, dan ini adalah lagkah pertama gue belajar dunia web, khususnya cara nyusunnya.
Sory nih, kalau blog ini jelek. ya namanya juga otakatik.. gue sekedar ngotak-ngatik aja.. kalau hasilnya bagus ya syukur, kalau jelek ya ga apa2. toh gue niatnya cuma belajar ngotak-ngatiknya.. hehehe.
kalau blog gue ini bermanfaat, syukur Alhamdulillah.... tpi smoga bermanfaat deh, Amin.
sebenarnya gue ini masih sangat awam dalam dunia kaya ginian, desain-desain blog. kalau gue liat di internet, banyak banget tuh tema2 bikinan orang2. kita2 yang belum bisa bikin tema sendiri, tinggal copy-paste aja tuh code HTML nya. (enak ya??).
Tapi, gue ga mau kreativitas gue mati gara2 itu. gue pengen nyoba sendiri untuk bikin template itu. dan langkah awalnya ya sekarang ngotak-ngatik dulu lah blog ini.. hehe. syukur2 nanti dapet iham untuk bikin banyak template yg menarik lagi.. (ngarep.. :-))..
Oke, bro and sista, akhi dan ukhti, ladiest and gentelment, Bravo Olahraga, ... eh, salah.. Bravo Blogging....
Wassalamu'alaikum Wr. Wb.

Indramayu, 1 Februari 2011
Atas nama bangsa maya.
Bani Adam Setiadi

Baca Selengkapnya ==> Pembukaan