Sintia

Tampilkan postingan dengan label gambar. Tampilkan semua postingan

Sabtu, 07 Desember 2013

Membuat CSS Sprite Pada Link link Yang Memakai Gambar

Pada tulisan sebelumnya, mengenai cara membuat CSS Sprite, saya menjelaskan bagaimana CSS Sprite mampu mempersingkat waktu pemanggilan gambar dari image hosting sehingga membuat loading page menjadi sedikit lebih ringan (cepat) dibanding biasanya.

Namun tulisan tersebut hanya memuat seputar pembuatan CSS saja, tidak mengupas bagaimana membuat CSS Sprite untuk gambar-gambar yang diletakkan pada HTML dan digunakan sebagai link, seperti untuk readmore, blog pager, social bookmark, sticky social, dll.

Untuk membuat CSS Sprite pada gambar-gambar yang dijadikan link tersebut harus dibuat dua buah gambar: Satu gambar berupa gabungan beberapa gambar untuk CSS Sprite, dan satu lagi berupa gambar transparan (dengan format png) untuk link.

Sebagai contoh, misalkan menggabungkan gambar social icon dengan ukuran 36 x 36 dan membuat gambar transparan berukuran 32 x 32, seperti gambar berikut:

Maka untuk CSS gambar tersebut (yang diletakkan di atas ]]></b:skin>) dibuat seperti ini:

img.icon1 { background:url(URL Gambar Sprite) 0 0; width:36px; height:36px; }

img.icon2 { background:url(URL Gambar Sprite) -36px 0; width:36px; height:36px; }

img.icon3 { background:url(URL Gambar Sprite) -72px 0; width:36px; height:36px; }

img.icon4 { background:url(URL Gambar Sprite) -108x 0; width:36px; height:36px; }

img.icon5 { background:url(URL Gambar Sprite) -144px 0; width:36px; height:36px; }

Catatan:
Bisa juga nama icon1, icon2, icon3, dst., diganti dengan facebook, twitter, google, dll.

Kemudian pada link icon-icon tersebut dibuat seperti ini:

<a href="Link Facebook"><img class="icon1" src="URL Gambar Transparan" /></a>

<a href="Link Twitter"><img class="icon2" src="URL Gambar Transparan" /></a>

<a href="Link Google"><img class="icon3" src="URL Gambar Transparan" /></a>

<a href="Link Friendster"><img class="icon4" src="URL Gambar Transparan" /></a>

<a href="Link hi5"><img class="icon5" src="URL Gambar Transparan" /></a>

Dengan membuat CSS Sprite seperti ini maka gambar icon-icon tersebut tidak dipanggil 5 kali melainkan hanya 2 kali, 1 kali ke gambar sprite dan 1 lagi ke gambar transparan.

Ok, segitu aja sob. Semoga bermanfaat .....

ReadFull Article ..

Minggu, 24 November 2013

Tips Mengecilkan Ukuran File Gambar atau Foto

- Kecepatan halaman menjadi faktor di internet saat ini, penting untuk mengetahui bagaimana kita dapat dengan mudah menghemat waktu ketika membuka halaman. Dengan mengurangi ukuran, resolusi dan format yang benar, kita dapat dengan mudah memotong penggunaan bandwidth dan waktu loading halaman. Berikut adalah tips yang dapat kalian gunakan untuk menguranginya.

Periksa resolusi gambar. Untuk internet kita tidak harus menggunakan gambar resolusi tinggi, karena akan mengambil waktu pengunjung jika file tersebut besar. Resolusi optimal web adalah 72 dpi. Jika ingin menggunakan resolusi lebih tinggi untuk galeri foto, coba gunakan gambar thumbnail resolusi rendah. Ini akan membuat halaman lebih cepat terbuka daripada mencoba untuk menampilkan file lebih besar pada halaman web utama.
Kembali ukuran gambar Anda. Jangan menggunakan HTML untuk mengecilkan area tampilan gambar. Jika perlu gambar ukuran 300x250 pixel, tidak menggunakan gambar 600 x 500 pixel. File gambar yang lebih besar akan memakan waktu setidaknya dua kali lebih lama ketika membuka situs. Sebaiknya mengurangi ukuran gambar dalam editor foto, semakin kecil dapat membuat ukuran file semakin cepat memuat situs web.
Gunakan format gambar yang tepat untuk pekerjaan itu. Format JPG yang terbaik untuk menampilkan foto karena mereka memiliki kualitas terbaik dan dianggap warna yang benar. Mereka juga file yang lebih besar dan memakan waktu lebih lama untuk load. Untuk grafis web dasar, anda harus menggunakan format loading lebih cepat seperti gif atau png. File-file ini telah mengurangi kedalaman warna dan palet warna yang berkurang membuat mereka memuat lebih cepat. Ada faktor kualitas berkurang, tetapi untuk grafis web yang paling yang memiliki wilayah yang lebih luas dari warna datar, format ini akan tampil lebih baik.
Tentukan lebar gambar dan tinggi. Hal ini sangat penting untuk kecepatan halaman. Ketika browser memuat halaman, itu akan mulai dari atas ke bawah. Setiap gambar yang tidak memiliki ukuran didefinisikan dengan HTML akan menyebabkan browser untuk menunggu gambar untuk sepenuhnya memuat sebelum itu beban seluruh isi halaman. Dengan mendefinisikan ruang gambar akan mengambil pada halaman, browser dapat menggunakan informasi sebagai semacam tempat dudukan dan pergi untuk memuat seluruh konten halaman dengan gambar yang diload.

ReadFull Article ..

Selasa, 12 November 2013

Tips Cara Membuat Read More Bentuk Gambar dan Otomatis di Blog

Pernahkah anda melihat sebuah situs yang artikelnya seperti diringkas, kemudian diisi dengan keterangan read more/selengkapnya? Terlihat lebih menarik bukan ?

Ada beberapa manfaat kenapa perlu adanya ringkasan seperti ini:

Pertama, artikel dan tampilan blog akan terlihat lebih menarik. Ini penting agar pengunjung memberikan kesan positif dan beranggapan bahwa pemilik blog adalah seorang blogger yang profesional dan layak untuk selalau dikunjungi.

Kedua, menghemat ruang. Ketika kita memberikan sejumlah ruang di halaman utama blog kita, kemudian kita membatasi jumlah postingan yang bisa dimunculkan di halaman tersebut, maka sangat penting untuk meringkas masing-masing artikel. Kenapa ? Agar pembaca tidak harus membaca satu persatu artikel untuk mengetahui semua artikel yang ada di halaman utama. Sehingga ini bisa memberikan kemudahan bagi pengunjung, karena tidak harus repot-repot melihat sampai jauh ke bawah untuk mengetahui artikel apa saja yang ditulis pemilik blog di halaman utama.

Bagaimana cara membuat read more secara otomatis ?

Langkah Pertama

Masuk ke blog anda

Langkah Kedua

Klik templete

Langkah Ketiga

Edit HTML (jangan lupa centang Expand Widget Templete)

Langkah Keempat

Temukan (Ctrl + F) tag </head>, setelah itu letakan kode script berikut tepat diatasnya :

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>

Langkah Kelima A

Membuat read more bentuk gambar

Temukan (Ctrl + F) tag <data:post.body/> atau <p><data:post.body/> </p> kemudian gantilah tag tersebut dengan kode script berikut.

<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 style=float:right><a expr:href=data:post.url><img alt=Read More.. src=http://i1339.photobucket.com/albums/o719/nym_artopraph/Tombol%20WEb/buttton10_zps0ff4b929.png/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>

Langkah Kelima B

Membuat read more otomatis

Temukan (Ctrl + F)tag <data:post.body/> atau <p><data:post.body/></p> kemudian gantilah tag tersebut dengan kode script berikut.

<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 style=float:right><a expr:href=data:post.url>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Langkah Keenam

Kemudian save dan lihat hasilnya!

NOTE :

Untuk yang terlanjur menggunakan read more secara manual, tinggal hapus kode:

<b:if cond=data:blog.pageType == "item">
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href=data:post.url><strong>Selengkapnya...</strong></a></p>
</b:if>

Demikianlah sedikit tips cara membuat read more secara otomatis baik menggunakan gambar atau pun secara otomatis dengan tulisan. Semoga tips ini bisa bermanfaat buat anda.

Salam

ReadFull Article ..

Jumat, 08 November 2013

Cara menghilangkan gambar kunci dan blog pada blog baru blog tata letak

Anda sudah mencoba menghilangkan gambar kunci dan obeng namun belum berhasil juga he..he..he...

Bingung ya ?

Sama,saya juga pernah mengalaminya tetapi setelah berkeliaran di mbah google akhirnya nemu juga

Langsung saja,begini caranya

1. Silahkan anda login dulu di blog anda

2. Klik tomblol dasbort

3. Klik tombol rancangan

4. klik tombol edit HTML

5. Beri centang pada "expand template widget"

6. Cari kode <b:include name=quickedit/>

7.Jika sudah ketemu hapus saja tanda tersebut

Nb: Kode tersebut mewakili 1 gambar ,banyaknya gambar tergantung banyaknya widget

Hapus semua kode

8. Save

ReadFull Article ..