Cara Menggunakan Plugins Highslide Blogdetik

1 Nov 2011

th_highslide-plugins

Highslide merupakan sebuah widget plugins multi fungsi yang dapat memberi banyak keuntungan bagi penggunanya. Sekalipun secara umum banyak digunakan sebagai image galllery, highslide mempunyai kemampuan lain yang sebenarnya merupakan fungsi utamanya. Dia berguna sebagai sebuah box preview. Jadi saat sampeyan ingin menggunakan bukan sebagai image preview (image gallery), gunakanlah sebagai div (box) preview, iframe preview atau mungkin juga untuk menampilkan image dalam bentuk file flash. Karena secara umum lebih banyak dimanfaatkan sebagai image preview, maka bagi blogger yang sering menggunakan image sebagai bagian dari posting atau yang fokus postingnya pada bidang gambar/image, highslide layak dipertimbangkan untuk digunakan sebagai pelengkap blog. Cara menggunakan highslide cukup sederhana, dimana kita hanya perlu mengaktifkan (install) plugins highslide dan menambahkan sedikit kode CSS pelengkap widget yang berfungsi untuk sedikit meminimalisasi xHTML serta beberapa buah image dalam ukuran besar (ukuran sebenarnya) dan kecil (thumbnail). Kode CSS tambahan kita simpan dalam box sudah disediakan di halaman “Highslide Options” , sedangkan xHTML disimpan melalui Widgetize Any HTML.

Cara Kerja Highslide

Sebagai sebuah image/box preview, highslide terlihat sangat menarik ketika mempreviewkan image/teks dalam sebuah gallery yang terdiri dari sekumpulan thumbnail. Saat salah satu thumbnail di-klik maka image dalam ukuran sesungguhnya akan ditampilkan. Image tersebut akan kembali menghilang ke arah gallery ketika thumnail yang lain kita klik. Beberapa variabel control seperti NEXT, PREVIOUS, CLOSE serta MOVE disertakan juga di dalamnya. Highslide menjadi lebih menarik karena efek yang disertakan serta kemampuannya untuk dikembangkan dalam berbagai bentuk tampilan.

Keuntungan menggunakan Plugins Highslide
  1. Link javascript dan link css utama serta beberapa image yang berfungsi sebagai pelengkap highslide telah disediakan blogdetik sehingga kita tak perlu susah-susah mencari, download sekaligus menguploadnya.
  2. Mampu berfungsi sebagai image gallery sekaligus pendisplay gambar dan teks secara sempurna.
  3. Dilengkapi efek menarik.
  4. Mampu menciptakan efisiensi ruang serta loading blog karena image yang ditampilkan di halaman blog berupa thumbnail berukuran kecil atau hanya berupa teks.
  5. Image berukuran sesungguhnya tetap ditampilkan di tempat yang sama (halaman blog) sehingga pengunjung akan merasa lebih nyaman.
  6. Display dilengkapi caption.
  7. Dapat melengkapi display dengan link dan berbagai teks lain.
D E M O
  1. Demo-1 : Demo highslide: Widget plugins blogdetik
  2. Demo-2 : Demo highslide: Widget plugins blogdetik
  3. Jika demo-1 dan 2 tidak bekerja silahkan buka berikut :

    Demo-3 : Demo highslide: Widget plugins blogdetik

Cara menggunakan Plugins Highslide

Menambah kode CSS pada box Edit the javascript below to customize highslide di halaman Highslide Options.

  1. login di Blogdetik.
  2. Dasbor : Cari dan klik link menu Plugins yang bisa anda lihat di sebelah kiri atau atas halaman.
  3. Pilih dan klik WP-Highslide plugins.
  4. Arahkan cursor di atas link menu Settings kemudian pilih dan klikWP-Highslide“.
  5. Copy dan pastekan kode CSS Highslide pada box yang tersedia di halaman Highslide Options, tepat di bawah link kode css dan javascript yang ada dalam box.
Kode CSS Highslide
<style type="text/css">
.boks_image{
    float:left;
    width:75px;
    height:75px;
    margin:5px 0 0 5px;
    border:1px solid #999;
    background:rgba(0,0,0,0.2);
    text-align:center;
    padding:2px 2px 15px 2px;
    border-radius:5px;
}
.boks_image:hover{
    background-color:#900;	
}
.boks_image a{
    border:none !important;	
    padding:0 !important;
    margin:0 !important;
}
.boks_image a img{
    width:75px;	
    height:75px;
    border-radius:4px;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
}
.boks_image a:hover{
	background:none !important;
    background-color:transparent !important;
}
.highslide-caption p.capt{
    clear:both;	
    display:block;
    padding:4px 8px;
    margin:5px -10px;
    background: #C7BE21;
    color:#eee;
    text-shadow:0 0 3px #000;
    line-height:16px !important;
    text-align:center;
}
.highslide-caption{
    border-top:3px double #888 !important;	
}
.highslide-caption a{
    background:#aaa !important;
    display:block;
    padding:2px 4px;
    color:#fff !important;
    text-shadow:0 0 3px #000;
}
a.highslide-move{
    cursor:move;	
}
</style>
Cara menyimpan xHTML
  1. Simpan xHTML melalui Widgetize Any HTML.
  2. Arahkan cursor di atas Appearance. Pilih dan klikWidget“.
  3. Buka box “Widgetize Any HTML“. Copy dan pastekan xHTML ke dalamnya.
  4. Klik Save Settings.
  5. Buka blog dan lihat hasilnya.
xHTML Highslide
<div style="margin-left:5px;"><!-- start gallery -->


<div class="boks_image"><!-- start image-1 -->
<a href="http://uc.blogdetik.com/767/76791/files/2011/10/punakawan-400.jpg" class="highslide"  onclick="return hs.expand(this, {captionId: 'caption-for-gambar1'})"> <img src="http://uc.blogdetik.com/767/76791/files/2011/10/th_punakawan.jpg" alt="Pejabat Tinggi Negara" border="0" id="gambar1" title="Punakawan" /></a> 
<div class='highslide-caption' id='caption-for-gambar1'><!-- start caption-1 -->
<a href="javascript:void(0)" class="highslide-previous" onclick="return hs.previous(this)">Previous</a>
<a href="javascript:void(0)" class="highslide-next" onclick="return hs.next(this)">Next</a>
<a href="#" onclick="hs.close(this)" class="highslide-close">Close</a>
<a href="#" onclick="return false" class="highslide-move control">Move</a> 
<p class="capt">Anggota DPR RI tak ubahnya wayang?</p>
</div><!-- start caption-1 -->
</div><!-- end image-1 -->


<div class="boks_image"><!-- start image-2 -->
<a href="http://uc.blogdetik.com/767/76791/files/2011/10/img_sumpah-pemuda-bagi-rakyat-miskin.jpg" class="highslide"  onclick="return hs.expand(this, {captionId: 'caption-for-gambar2'})"><img src="http://uc.blogdetik.com/767/76791/files/2011/10/th_sumpah-pemuda-bagi-rakyat-miskin.jpg" alt="Sumpah Pemuda" border="0" id="gambar2" title="Apa Arti Sumpah Pemuda Bagi Rakyat Miskin?" /></a> 
<div class='highslide-caption' id='caption-for-gambar2'><!-- start caption-2 -->
<a href="javascript:void(0)" class="highslide-previous" onclick="return hs.previous(this)">Previous</a>
<a href="javascript:void(0)" class="highslide-next" onclick="return hs.next(this)">Next</a>
<a href="#" onclick="hs.close(this)" class="highslide-close">Close</a>
<a href="#" onclick="return false" class="highslide-move control">Move</a>   	
<p class="capt">Sumpah Pemuda moment tepat bagi penguasa kembali berpihak kepada rakyat!</p>
</div><!-- end caption-2 -->
</div><!-- end image-2 -->


<div class="boks_image"><!-- start image-3 -->
<a href="http://uc.blogdetik.com/767/76791/files/2011/10/img_komodo-nusa-tenggara-timur.jpg" class="highslide"  onclick="return hs.expand(this, {captionId: 'caption-for-image3'})"> 
<img src="http://uc.blogdetik.com/767/76791/files/2011/10/th_komodo-nusa-tenggara-timur.jpg" alt="Pulau Komodo" border="0" id="image3" title="Komodo dan New7Wonders" /></a> 
<div class='highslide-caption' id='caption-for-image3'><!-- start caption-3 -->
<a href="javascript:void(0)" class="highslide-previous" onclick="return hs.previous(this)">Previous</a>
<a href="javascript:void(0)" class="highslide-next" onclick="return hs.next(this)">Next</a> 
<a href="#" onclick="hs.close(this)" class="highslide-close">Close</a> 
<a href="#" onclick="return false" class="highslide-move control">Move</a> 	
<p class="capt">Polemik seputar New7Wonders dan Komodo: kenapa pemerintah diam saja?</p>
</div><!-- end caption-3 -->
</div><!-- end image-3 -->


<div class="boks_image"><!-- start image-4 -->
<a href="http://www.kemlu.go.id/hongkong/GalleryPhoto/Bali/Tari%20Oleg-Bali.jpg" class="highslide"  onclick="return hs.expand(this, {captionId: 'caption-for-image4'})"><img src="http://uc.blogdetik.com/767/76791/files/2011/10/th_kebocoran-pipa-konsentrat_freeport.jpg" alt="Freeport" border="0" id="image4" title="Kebocoran pipa konsentrat tambang Freeport" /></a>
<div class='highslide-caption' id='caption-for-image4'><!-- start caption-4 -->
<a href="javascript:void(0)" class="highslide-previous" onclick="return hs.previous(this)">Previous</a>
<a href="javascript:void(0)" class="highslide-next" onclick="return hs.next(this)">Next</a>
<a href="#" onclick="hs.close(this)" class="highslide-close">Close</a>
<a href="#" onclick="return false" class="highslide-move control">Move</a>  	
<p class="capt">Segera ambil kembali Freeport demi rakyat!</p>
</div><!-- end caption-4 -->
</div><!-- end image-4 -->


<div class="boks_image"><!-- start image-5 -->
<a href="http://uc.blogdetik.com/767/76791/files/2011/10/img_nunun-nurbaety.jpg" class="highslide"  onclick="return hs.expand(this, {captionId: 'caption-for-gambar5'})"><img src="http://uc.blogdetik.com/767/76791/files/2011/10/th_nunun-nurbaety.jpg" alt="Nunun si Koruptor" border="0" id="gambar5" title="mas Nunun" /></a>
<div class='highslide-caption' id='caption-for-image5'><!-- start caption-5 -->
<a href="javascript:void(0)" class="highslide-previous" onclick="return hs.previous(this)">Previous</a>
<a href="javascript:void(0)" class="highslide-next" onclick="return hs.next(this)">Next</a>
<a href="#" onclick="hs.close(this)" class="highslide-close">Close</a>
<a href="#" onclick="return false" class="highslide-move control">Move</a> 	
<p class="capt">Banyak orang tertipu: Ternyata Nunun Nurbaety sembunyi di bunker!</p>
</div><!-- end caption-5 -->
</div><!-- end image-5 -->


</div><!-- end gallery -->
<div style="clear:both;"></div>
Catatan/Keterangan:
  1. Lakukan percobaan seperti langkah di atas terlebih dahulu hingga Higslide terpasang dengan suxes.
  2. Setelah percobaan selesai ganti image dan thumbnail sengan milik sampeyan sendiri>
  3. Untuk menampilkan link, sampeyan bisa tambahkan di bawah teks caption.
  4. Untuk menyesuaikan dengan ruang blog yang tersedia, lakukan perubahan ukuran pada thumbnail dan box-nya melalui width dan height di kode CSS pada syntax .boks_image dan .boks_image a img.
  5. Pengaturan gallery supaya center of position terhadap lebar sidebar (ruang yang tersedia), rubah nilai margin pada tag pembuka xHTML (start xHTML) yang bernilai 5px. Semakin besar maka gallery akan semakin ke kanan.

Tutorial Lain

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan :

Happy Blogging


TAGS Tutorial BlogDETIK Panduan BlogDETIK Plugins Blogdetik


-

Author

Follow Me