Merubah Ukuran Halaman Posting Blogspot

Senin, 20 Desember 2010

Artikel ini saya tulis untuk menjawab pertanyaan sobat saya soal Cara Merubah Ukuran Halaman Posting Blogspot ketika postingan di klik. Ini juga sekaligus sebagai pelengkap artikel sebelumnya. Jadi, artikel kali untuk membahas Cara Merubah Ukuran Halaman Posting Blogspot ketika postingan di klik. Misalnya pada halaman home, tampilan blog kita terdiri dari 2 sidebar, yaitu kiri dan kanan dan halaman posting berada di tengah, maka pada saat salah satu artikel blog kita di klik oleh pembaca, maka tampilan tersebut berubah, sidebar kanan atau kiri menghilang kemudian ukuran halaman posting berubah menjadi lebar (sesuai lebar maksimum body blog kita).

Akan tetapi, sobat harus tahu bahwa tidak semua template blogger memiliki id elemen yang sama, itu tergantung pembuat template tersebut. Jadi agak repot untuk menjelaskannya. Untuk mentaktisinya, berikut saya berikan contoh blog yang menggunakan template bawaan blogger (Template Blog ini telah saya ganti, tapi Insya Allah Fungsinya masih berjalan, kebetulan saya masih admin di sana, hihi) silahkan klik di sini. Saya memberikan contoh blog saya tersebut agar lebih mudah dipahami karena sepengetahuanku, semua template milik blogger memiliki id elemen yang sama.

Coba perhatikan blog Situs Fakta Islam (setelah tutorial ini diperbaharui, blog DEMO sudah diganti, insya Allah modelnya sama, dan ini hanya sekedar gambaran, jika agan bingung, silahkan bertanya di kotak komentar). Pada halaman home, terdiri dari halaman posting dan sidebar kiri dan kanan. Coba klik salah satu postingan, maka sidebar kiri akan hilang dan halaman postingan menjadi lebar (mudah-mudahan itulah yang dimaksud sobat saya, Kang Fahrur). Triknya sangat sederhana, hanya menggunakan kode berikut ini (kode ini berlaku untuk template blog lain):

<style type='text/css'>

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

#sidebar-right-1 {display:none;}

.post {width:884px;border:2px solid #952842;}

.blog-pager {background: $(paging.background); width:884px;}

</b:if>
</style>

Keterangan:

• Yang berwarna merah adalah perintah yang kira-kira maksudnya "jika halaman single page atau halaman postingan dikli, maka..."
• Sidebar Kanan jangan ditampilkan atau tidak akan muncul, #sidebar-right-1 adalah id sidebar kanan (yang berwarna hijau)
• Postingan akan berubah ukuran menjadi 884px, garis bordernya 2px dengan kode warna #952842 (lihat kode warna biru di atas)
• Blog pager (yang bertuliskan postingan lama atau postingan baru; berada di bawah postingan) juga ikut bertambah lebar, yaitu 884px (perhatikan kode berwarna ungu di atas). Kenapa blog pager ikut dilebarkan? Agar serasi dengan halaman postingan yang juga lebar :)

Nah, ternyata Cara Merubah Ukuran Halaman Posting Blogspot ketika postingan di klik cukup simple... Mohon maaf jika saya tidak mampu menjelaskan dengan baik, soalnya butuh kasus untuk hal ini sebab sekali lagi, id elemen template blogger berbeda-beda, terutama jika kita menggunakan custom template (template yang didownload melalui penyedia template). Jika sobat ingin berdiskusi, bisa menghubungi facebook saya. Semoga Kang Fahrur dan juga sobat lainnya terbantu. Terima Kasih :)

Read Post | komentar

Cara Agar Tampilan blog blogger Berubah-ubah

Kamis, 09 Desember 2010

Melanjutkan postingan blogku sebelumnya tentang Cara Membuat Halaman Home Blogger Blogspot lebih Dinamis, dan cara membuat halaman beranda / home di blogspot, sekarang saya mencoba berbagi tentang cara agar tampilan blog berbeda ketika postingan blog diklik. Jika sobat belum membaca postinganku sebelumnya, saya sarankan untuk membacanya.

Sebelum sobat mempraktekkannya, sebaiknya membuat satu blog khusus untuk latihan karena ini dapat dapat merusak tampilan blog sobat jika tidak berhati-hati.

Pada postingan sebelumnya di sini, saya memberikan blog Demo (blog contoh hasil praktek), di mana pada halaman home atau beranda berbeda dengan halaman postingan (single page). Jika ingin melakukan hal yang sama, silahkan sobat membaca postingan ini secara cermat.

Sebenarnya, banyak trik yang dapat kita gunakan, namun pada kesempatan ini, saya hanya memosting trik yang paling sederhana dan mudah dipraktekkan. Walaupun sederhana, tetapi efeknya sangat luar biasa tergantung kemampuan sobat mengembangkannya sendiri (hal ini dikarenakan masing-masing template biasanya memiliki karakter yang berbeda dengan template yang lain).

Perhatikan kode di bawah ini:

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML5 {display:none;}
</b:if>
</style>

Kode tersebut saya letakkan (paste) di atas kode </head>.

Yang berwarna merah adalah id gadget yang akan saya hilangkan ketika pengunjung berada pada halaman postingan (ketika artikel di klik). Bagaimana Jika gadget HTML5 tersebut tidak ingin dihilangkan, melainkan ukurannya di ubah? Bandingkan dengan kode di bawah ini:

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML5 {width:150px;height:200px;}
</b:if>
</style>

Nah, bedanya ada pada display:none, yang artinya HTML5 tidak ingin ditampilkan. Terus, Bagaimana jika bukan hanya HTML5 yang ingin saya ubah ketika halaman postigan diklik? Kita tambahkan saja kode gadget atau elemen lainnya seperti di bawah ini:

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML5 {display:none;}
#HTML2 {display:none;}
#HTML7 {display:none;}
</b:if>
</style>

Nah, Itulah dasar untuk membuat tampilan blog lebih dinamis seperti website yang profesional. Sebenernya teknik ini membutuhkan dasar-dasar CSS, bagaimana mengilangkan, bagaimana merubah ukuran, bagaimana merubah warna, bagaimana memberi background gambar dan seterusnya. Jika sobat sudah mengerti dasar-dasar CSS tersebut, maka teknik di atas akan sangat mudah dan sobat akan dapat mengembangkannya jauh lebh baik. Selain itu, sobat juga harus tahu id masing-masing elemen blog, misalnya elemen header, elemen body, elemen widget, elemen footer dan id-id unik masing-masing gadget.

Saya sarankan sobat banyak berlatih pada blog khusus (jangan menggunakan blog utama untuk latihan karena dapat berpengaruh pada posisi blog kita di google atau search engine lainnya). Kembali pada motto blog ini, kita belajar setahap demi setahap dan otodidak tanpa harus ikut kursus alias gratis (paling cuma butuh biaya internet, hihi)

Jika sobat ingin berdiskusi khusus dengan saya, silahkan bergabung di facebook dan silahkan berkomentar di wall

Read Post | komentar

Cara Membuat Halaman Home Blogger Blogspot lebih Dinamis

Jumat, 12 November 2010

Artikel cara membuat halaman home blogger blogspot lebih dinamis ini adalah sambungan dari atikel sebelumnya tentang cara membuat halaman beranda atau home di blogger (silahkan klik untuk melihatnya).Namun, artikel tersebut hanya membahas cara membuat halaman home yang sederhana. Seperti yang pernah saya katakan sebelumnya, ada beberapa cara untuk membuat halaman home di blogspot, nah berikut ini adalah membuat halaman home blogger blogspot yang lebih dinamis (namun pada kesempatan ini, mohon maaf saya belum menjelaskan triknya, hanya mencoba memberi pemahaman. Saya tidak jelaskan trik ini secara detail karena sebenarnya dibutuhkan kasus yang lebih jelas [maklum saya juga baru belajar, hihihi]).

Teknik yang akan saya sharing ini sebenarnya bukan teknik yang baru, hanya saja penggunaanya cukup melelahkan dan dibutuhkan kesabaran serta kecermatan pada saat melakukan pengeditan. Saya merekomendasikan sahabat untuk terlebih dahulu memahami dasarnya di sini (tempat di mana saya belajar). Mengapa harus? Sebab teknik ini berbeda dengan teknik sebelumnya di mana kita hanya melakukan pengaturan pada tanggal penerbitan. Sekarang kita akan berhubungan dengan KODE yang ada pada halaman EDIT HTML. Meskipun ini agak rumit, tapi hasilnya akan lebih memuaskan tentunya.

Sebelum saya menjelaskan langkah-langkahnya, terlebih dahulu buka blog fakta islam di sini. (Template blog tersebut telah diganti, namun masih menggunakan trik dinamis tersebut, silahkan bandingkan tampilan halaman home dengan halaman posting, pasti berubah, Insya Allah). Di blog saya tersebut, perhatikan tampilan awal yang muncul. Di sana ada Slider (foto yang bergerak), di bawahnya ada 5 postingan terbaru, kemudian di bagian tengah ada sidebar yang kecil, kemudian paling kanan ada sidebar yang sedikit lebih lebar. Nah, coba klik salah satu postingan yang ada di sana... Tampilannya akan berubah... Slider (foto bergerak) yang tadinya besar berubah menjadi kecil kemudian posisinya bergeser dari kanan ke kiri. Selain itu, halaman postingan mejadi lebar. Pertanyaannya, di mana sidebar tengah yang kecil tadi? apakah ditutupi oleh halaman postingan yang berubah menjadi lebar? Tidak... melainkan dihilangkan... dia hanya muncul pada hamalam home saja... Jika sobat perhatikan lagi, masih ada satu gadget yang hanya muncul ketika postingan dibuka????

Seperti itulah halaman home blogger blogspot yang lebih dinamis. Untuk membuat blog dinamis ini, tentu kita harus berhadapan dengan kode HTML yang ribet. Silahkan baca artikel "cara agar tampilan blog berubah-ubah". Di sana saya menjelaskan penerapan kode dinamis.

Read Post | komentar

Membuat Read More Otomatis (Auto Read More) dengan gambar/thumbnail

Sabtu, 02 Oktober 2010

Sebenarnya, alternatif untuk membuat "Read More" di blog blogspot/bogger sudah banyak, apalagi secara default blogger sudah menyiapkan fasilitas itu. Akan tetapi, yang akan saya paparkan (cie, yg lagi pemaparan...hohoho) kali ini berbeda dengan yang lain. Membuat Read More Otomatis (Auto Read More) dengan gambar/thumbnail ini termasuk teknik terbaru untuk blogger.

Ada beberapa keunggulan atau kelebihan Read More Otomatis (Auto Read More) ini, yaitu:

1. Kita tidak usah repot membuat atau memasukkan kode Read More setiap kali memosting karena aplikasi ini akan bekerja otomatis (namanya juga Auto Read More, Iy G?, hehe).
2. Kita dapat mengatur jumlah karakter tulisan yang dimunculkan
3. Jika dalam postingan kita terdapat foto atau gambar, secara otomatis gambar tersebut akan berfungsi sebagai thumbnail dengan ukuran yang dapat diatur atau disetting se-suka kita.
4. Pada akhirnya, ini akan membuat blog kita terlihat cantik dan profesional, hihi

Jika sobat tertarik Membuat Read More Otomatis (Auto Read More) dengan gambar / thumbnail di blognya, silahkan ikuti langkah-langkahnya berikut ini:

1. Masuk ke halaman Edit HTML di blog sobat, centang "Expand widget template", kemudian copy dan paste kode berikut di atas kode </head>

<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>

2. Kemudian cari kode <data:post.body/> Jika sudah ditemukan, ganti kode tersebut dengan semua 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'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

3. Klik Save dan lihat hasil kerja kerasnya :)

Keterangan:
var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Perhatikan, biasanya cara ini tidak berfungsi jika sebelumnya kita pernah membuat atau memasang kode read more "klasik". Solusinya, hapus semua kode yang pernah di pasang (kode read more klasik) sebelum memasang kode di atas. 

Oya, hampir lupa, READ MORE - dapat sobat ganti dengan apa saja yang dinginkan, bisa diganti Selengkapnya>> atau apalah...

*) Tutorial ini diambil dari blog blogger senior yang ternama, namun sayang, karena terlalu banyak blog yang jadi referensi dan tidak segera memperhatikan pertanggung jawaban artikel, akhirnya admin lupa sumber jelasnya, maaf.

Read Post | komentar

Cara Membuat Halaman Beranda / Home di Blogspot

Minggu, 19 September 2010

Cara Membuat Halaman Beranda / Home di Blogspot - Bagaimana caranya membuat halaman Beranda / Home di blogspot? Pertanyaan itu yang saya sering lontarkan pada diriku sendiri sejak memulai berkenalan dengan blog. Setelah beberapa lama mencari di om google, akhirnya pertanyaan tersebut dapat terjawab.

Sebenarnya, ada beberapa cara membuat halaman beranda / home di blogspot, namun yang saya posting kali ini adalah trik paling mudah dan yang saya terapkan di blog ini dan beberapa blog sobat yang pernah kuedit (editor kacangan). Bagaimana saya membuat halaman beranda atau homepage di blog ini?

PEMBERITAHUAN: Setelah template blog ini diubah, cara ini sudah tidak digunakan di blog ini, tetapi fungsinya masih bisa dipake oleh sobat blogger. Terima Kasih :)

Secara garis besar, ada 3 (tiga) hal yang harus dilakukan:

1. Membuat postingan yang umum, yang menjelaskan garis besar isi blog.
2. Merubah format tanggal penerbitan postingan umum tersebut.
3. Merubah jumlah postingan yang muncul pada halaman utama/beranda/homepage.

Berikut Penjelasannya:

1. Membuat postingan yang umum, yang menjelaskan garis besar isi blog.

Pada saat kita melihat (membuka) sebuah website yang memiliki hosting sendiri dan mengklik halaman berandanya, yang muncul adalah halaman index yang berisikan sambutan atau penjelasan secara umum isi website tersebut. Saya berpikir untuk membuat hal yang sama dengan website berbayar itu, padahal hosting blogku di blogger. Apakah ini bisa di lakukan? Jawabnya bisa, sebagai langkah awal adalah membuat postingan yang umum, yang menjelaskan garis besar isi blog (Lihat contohnya di blog ini, silahkan klik "home" menu di atas). Meskipun pada contoh blog ini masih amburadul, tapi untuk memperbaikinya tinggal melakukan 'edit entri'.

2. Merubah format tanggal penerbitan postingan umum tersebut.

Setelah membuat postingan seperti langkah nomor 1 di atas, segera terbitkan kemudian edit kembali. Lihat gambar berikut:

Setelah masuk pada halaman 'edit entri', pilih "postingan umum" tersebut (postingan yang akan dijadikan homepage).

Selanjutnya, jika sudah masuk pada halaman pengeditan, silahkan langsung mengklik "Opsi Entri" atau "Post Options".

Rubah Format tanggal penerbitannya, usahakan di rubah pada tanggal terbaru.

Pada gambar di atas, entri ini diterbitkan pada tanggal 30 bulan 11 tahun 2009. Jika sekarang adalah tanggal 20 bulan 9 tahun 2010, berarti postingan ini akan berada di urutan belakang (jika ada postingan yang lebih baru). Tapi jika format tanggal tersebut dirubah menjadi tanggal 30 bulan 11 tahun 2012, maka tulisan atau entri tersebut akan selalu berada di depan (ingat, pada pengaturan default blogger, postingan terbaru selalu berada di atas).

Nah, jika ingin menjadikan "postingan umum" (yang telah dibuat pada langkah nomor 1) selalu muncul pada halaman beranda atau home, ubahlah tanggalnya "semuda mungkin" (di blog saya ini, saya merubahnya menjadi tanggal 17 Juli 2012 dengan format penulisan "12/07/17"). Untuk melihat hasilnya, perhatikan gambar berikut:

Yang saya beri lingkaran merah adalah "Postingan Umum" milik saya. Meskipun tulisan ini (Cara Membuat Halaman Beranda / Home di Blogspot) lebih belakangan saya posting, tetapi toh "postingan umum" tersebut selalu berada di atas.

Jika sobat telah mengerti dan merubah format tanggalnya, silahkan klik "terbitkan entri".

3. Merubah jumlah postingan yang muncul pada halaman utama/beranda/homepage.

Langkah terakhir adalah mengatur atau merubah jumlah postingan yang muncul pada halaman utama. Caranya,

1. Masuk ke halaman Dasbor, atau klik di sini

2. Masuk Pada halaman "pengaturan"

3. Setelah masuk pada halaman pengaturan, klik "Format"

4. Carilah tulisan "Tampilkan", rubahlah angka yang ada menjadi 1. Perhatikan gambar di bawah:

Pada gambar di atas, angka 5 diubah menjadi 1. Pastikan pada menu dropdownnya pilih 'posting'. Artinya, jika kita memilih angka 1, berarti kita 'memerintahkan' agar jumlah tulisan yang muncul pada halaman utama adalah 1, yaitu tulisan / postingan terbaru. Terakhir, klik Save atau "simpan setelan".

Logikanya, Postingan yang telah dirubah format tanggalnya menjadi format "tanggal terbaru" akan selalu muncul pada halaman Homepage.

Update: Cara membuat halaman home di blogger blogspot lebih dinamis, ---klik

PERHATIKAN: Pengaturan seperti ini cocok jika sobat menyediakan menu yang mudah dilihat oleh pengunjung, seperti menu horizontal dan menu pada sidebar. INTINYA, JANGAN TAKUT MENCOBA. Semoga bermanfaat. Jika butuh diskusi, silahkan sobat berkomentar

*)Tutorial ini pernah dipublish di blog lama (SOE86)

Read Post | komentar