RSS FEED
Tampilkan postingan dengan label Gambar. Tampilkan semua postingan
Tampilkan postingan dengan label Gambar. Tampilkan semua postingan

Menyembunyikan Image Pada Read More Otomatis

image Menjawab pertanyaan sobat alhadi pada postingan revisi read more dan slider pada soft template, yang menanyakan bagaimana cara menghapus read more yang berupa gambar pada template, atau merubah read more berupa gambar menjadi read more text. Dari pertanyaan itu, mungkin yang di maksud adalah menyembuyikan image atau gambar pada read more otomatis sebelum tampil pada halaman penuh.

 

Jika sobat sudah membaca postingan saya tentang membuat read more otomatis, maka sobat akan menemukan kode script seperti berikut :

 

<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; visibility:hidden; display:none"><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>

 

kode yang berwarna merah adalah kode yang baru saya tambahkan, kode tersebut berfungsi untuk membuat image tidak tampil pada halaman postingan sebelum read more di klik sampai tampil pada halaman penuh.

 

Selamat mencoba !

READ MORE - Menyembunyikan Image Pada Read More Otomatis

Penggunaan Format Gambar Untuk Blog

format-gambar Hal yang kurang kita perhatikan dalam urusan penempatan gambar blog adalah dalam penggunaan format dan ukuran gambar yang kadang tidak sesuai kebutuhan blog. Penggunaan gambar yang salah akan mempengaruhi dalam urusan loading blog dan lagi-lagi traffic jadi ikut-ikutan ambil bagian.

 

Contoh orang yang menggunakan modem dengan kecepatan 56kb misalnya, akan rela menunggu loading blog yang akan mereka kunjungi. Tapi jika dalam waktu 10 detik gagal me-load, mungkin mereka akan pergi meninggalkan blog kita. Oleh karena itu, penggunaan format dan ukuran gambar yang sekecil mungkin akan sangat membantu dalam kecepatan browser me-load blog kita.

 

Untuk mengoptimalkan gambar, sobat harus menggunakan format dan ukuran gambar sesuai dengan jenisnya. Dibawah ini beberapa keterangan dari format gif, jpeg dan png. Semoga bisa menjadi acuan dalam penempatan gambar dalam blog sobat.

 

  1. GIF adalah singkatan dari Graphics Interchange Format. Format GIF sangat dihubungkan dengan sejarah internet, terutama karena ukurannya yang kecil. Saat ini GIF hanya bisa maksimal dengan 256 warna. Sobat harus menggunakan format ini untuk gambar berwarna seperti logo, tombol atau teks gambar. GIF juga format pilihan untuk gambar animasi.

     

  2. JPEG adalah singkatan dari Joint Photographic Experts Group. Format ini diciptakan untuk foto-foto dan seni rupa tingkat tinggi. Sobat harus menggunakan gambar JPEG setiap kali sobat menampilkan foto atau gambar dengan warna full color. Jika sobat mengkompress untuk mengurangi ukuran file gambar, sobat harus menggunakan tingkat kompresi 50% untuk hasil yang optimal.

     

  3. PNG adalah singkatan dari Portable Network Graphics. Format PNG diciptakan khusus untuk Internet, dengan tujuan menggantikan gambar GIF. Keuntungan utama PNG adalah format ini yang mendukung warna 24-bit dan alpha transparansi. Sobat harus menggunakan format PNG untuk gambar sederhana yang membutuhkan lebih dari 256 warna.

 

Untuk mengoptimalkan format gambar diatas, sobat bisa menggunakan jasa dari PunyPNG atau tools yang lebih mumpuni seperti Dynamic Drive, disini sobat bisa mengkompres gambar dari format gif, jpeg atau png dan sekaligus bisa meng-convert gambar tersebut.

 

Semoga berhasil dalam memilah-milah gambar yang akan sobat tempatkan di blog sobat. Jangan khawatir untuk meng-kompres file gambar sobat dengan tools diatas, kerana tools tersebut tidak akan mengurangi kualitas dari gambar yang sobat kompres.

READ MORE - Penggunaan Format Gambar Untuk Blog

Optimalkan Feedburner Dengan Memasang Pageflip

contoh pageflip Menjawab pertanyaan sobat Taufik pada komentarnya di postingan elegant style template, yang menanyakan cara membuat gambar di pojok kanan atas seperti kertas di lipat dan memasang feedburner di dalamnya. Mungkin maksudnya cara membuat pageflip kali ya, semoga benar perkiraan saya.

Dan kebetulan saya belum pernah buat postingan ini, tidak ada salahnya kita bahas sama-sama, walaupun tutorial ini sudah basi dan usang. Buat yang belum tau apa itu pageflip, bisa melihat contoh demonya disini.

Gambar hidup yang dipojok kanan atas itulah yang disebut pageflip, jika disorot dengan mouse akan terbuka dan jika di klik akan menuju ke halaman yang dimaksud. Dan halaman yang dimaksud tersebut adalah feed kita yang sudah kita daftarkan di feedburner. Dibawah ini adalah 2 gambar yang akan kita gunakan untuk membuat pageflip.

page flip image page flip

Sebelumnya saya mohon maaf jika saya mengambil gambar pageflip ini tanpa seijin yang empunya. Karena saya sendiri tidak tau persis siapa yang mempunyai hak paten atas gambar pageflip ini, dan saya mengambilnya lewat search engine. Begitu saya lihat, sangat banyak gambar yang sama sehingga saya tidak tau dan tidak bisa mencantumkan sumber pemilik gambar yang asli.

Buat sobat blogger, ini tutorialnya semoga bermanfaat :
Keterangan :
  1. Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
  2. Tulisan yang berwarna biru adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.
Silahkan sobat kreasikan sendiri gambarnya dan jika ingin membuat pageflip dengan tujuan halaman yang lain sobat tinggal ganti kode <a href='http://feeds.feedburner.com/blog-zone' target='_blank'> dengan alamat url yang lain, misalnya alamat url untuk mengajak pengunjung blog menjadi referral sobat dalam suatu bisnis online yang sobat ikuti.

Semoga tutorial ini bisa bermanfaat, selamat mencoba !
READ MORE - Optimalkan Feedburner Dengan Memasang Pageflip
Return top