Tips Membuat Headline dalam Bentuk Slide Gambar

Minggu, 10 November 2013

Browse Manual » Wiring » bentuk » dalam » gambar » headline » membuat » slide » tips » Tips Membuat Headline dalam Bentuk Slide Gambar

Tips Membuat Headline dalam Bentuk Slide Gambar

Hari ini saya ingin berbagi tips untuk mendesain blog terlihat lebih menarik.

Desain apakah itu?

Yup, bener banget. Seperti judul artikel di atas, tips yang ingin saya bagikan adalah mendesain headline yang berbentuk slide.

Saya yakin hampir semua teman-teman yang suka berpetualang di dunia maya, pernah melihat situs-situs yang menayangkan headline berita mereka dalam bentuk gambar slide yang berisi sedikit keterangan. Tampilan ini tentu sangat menarik bukan?

Apakah anda ingin blog anda di desain seperti itu?

Makanya ikuti terus langkah-langkah dari tips ini ya!

Baiklah, langsung saja ke TKP ya!

Langkah-langkah yang harus dilakukan untuk membuat headline blog berupa slide gambar yaitu :

Pertama, masuk ke blog anda

Kemudian masuk ke templete (jangan lupa check Expand Templete Widget)

Temukan tag ]]></b:skin>

Kemudian taruh script berikut di atasnya

.img400{width:340px;height:250px;}.img400 img{width:340px;height:250px;border:0;z-index:80;}.cursor{cursor:pointer;}.h250{height:250px;}.min250{margin-top:-250px;}.des_4{background:#000;padding:3px 8px;filter:alpha(opacity=80);-moz-opacity:.80;opacity:.80;width:60px;color:#F60;margin-bottom:2px;z-index:990;}.des_1{background:#000;height:57px;padding:3px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;z-index:990;}.des_1a{background:#000;height:50px;padding:10px 10px 0 10px;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;margin-top:-60px;}.font16{font-size:13px;}.font16{font-size:14px;}.c_white{color:#FFF;}.c_white a{text-decoration:none;color:#FFF;}.c_white a:hover{text-decoration:underline;}.page_hl a{font:bold 12px arial;color:#FFF;text-decoration:none;padding:2px 5px;display:inline;background:#000;filter:alpha(opacity=60);-moz-opacity:.60;opacity:.60;}.page_hl a:hover,.page_hl a.selected{color:#FFF;text-decoration:none;background:#000;filter:alpha(opacity=95);-moz-opacity:.95;opacity:.95;}.page_hl span a{color:#FFF;text-decoration:none;background:#F30;filter:alpha(opacity=90);-moz-opacity:.90;opacity:.90;}.pd_5{padding:5px;}.clearit{clear:both;margin:0;padding:0;}.pb_10{padding-bottom:10px;}

Di bawah tag ]]> taruh script berikut :

Selanjutnya anda masuk ke layout/tata letak

Kemudian add gadget (HTML/Javascript)

Masukan kode berikut di dalamnya (biarkan judulnya tetap kosong)

<div id="gal1" class="img400"><div class="h250"><img alt="" src="http://akhatamdotcom.googlecode.com/files/holiday.jpeg" /></div><div class="min250"><div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div><div class="des_1 font16 c_white"><span class="font11 c_orange">ADVERTISING</span><br /><strong>Prepare Your Holiday</strong></div></div></div><div id="gal2" style="display:none;" class="img400"><div class="h250"><img alt="" src="URL GAMBAR" /></div><div class="min250"><div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div><div class="des_1 font16 c_white"><span class="font11 c_orange">JUDUL</span><br /><strong>ISI POSTING</strong></div></div></div><div id="gal3" style="display:none;" class="img400"><div class="h250"><img alt="" src="URL GAMBAR" /></div><div class="min250"><div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div><div class="des_1 font16 c_white"><strong>ISI POSTING</strong></div></div></div><div id="gal4" style="display:none;" class="img400"><div class="h250"><img alt="" src="URL GAMBAR" /></div><div class="min250"><div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div><div class="des_1 font16 c_white"><strong>ISI POSTING</strong></div></div></div><div id="gal5" style="display:none;" class="img400"><div class="h250"><img alt="" src="URL GAMBAR" /></div><div class="min250"><div style="margin-top:168px;" class="des_4"><strong>HEADLINE</strong></div><div class="des_1 font16 c_white"><strong>ISI POSTING</strong></div></div></div><div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5">1 2 3 4 5 </div></div><div class="clearit"></div><div class="clearit pb_10"></div><script type="text/javascript">var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000) </script>

Tempatkan gadget tersebut di atas postingan anda

Jangan lupa ganti URL POSTING dan URL GAMBAR

Kemudia save dan lihat hasilnya!

Demikian tips bagaimana cara membuat headline blog berupa gambar slide yang bisa saya bagikan untuk hari ini. Semoga tips ini bisa bermanfaat buat teman-teman.

Selamat Mencoba, Good Luck J

Cara

Minggu, 10 November 2013

Tips Membuat Headline dalam Bentuk Slide Gambar

Tidak ada komentar:

Posting Komentar