Content panel blogspot istimewa ||Blogger tips||

Pujangga Blogs

22 January 2011

Content panel blogspot istimewa ||Blogger tips||

Ada yang baru nih....saya ingin mengajak anda untuk membuat content sliding panel yang keren dan menarik perhatian.istimewanya, content slide tersebut keluar pada titik yang telah ditentukan,dan akan menutup kembali apabila halaman web/blog kita scrolling ke atas.dan tidak hanya itu saja, kita akan menyediakan sebuah tombol pull out yang nantinya fungsi dari tombol tersebut akan membuat content slide tersebut melebar ke atas hingga menutupi halaman web/blog yang berisi content dan artikel yang kita masukan kedalamnya.

Bingung...!!?Coba kita lihat dulu versi demonya disini.

Tertarik untuk menerapkannya pada halaman blog anda..? Atau anda tidak tertarik sama sekali...!!
Ya atau tidak jawabannya itu terserah anda semua, yang jelas saya akan coba mulai project tutorial kita kali ini dengan langkah langkah yang mudah di mengerti.

Kode CSS

Seperti biasa, dalam penerapan design web pasti tak lepas dari prihal yang satu ini, yakni rangkaian kode style sheet untuk membentuk body design dari struktur html yang nantinya akan kita terapkan.
Untuk langkah awal, silahkan anda masukan kode css dibawah ini dan letakan pada bagian atas tag </b:skin> pada template HTML web/blog.


jQuery dana Javascript

Sekarang kita beralih kebagian javascrip.Kode javascript ini nantinya kita letakan pada bagian atas dari tag </body> template HTML :


Selanjutnya letakan plugin jQuery ini di bawah dari tag <head> template HTML :


Seperti apa yang sudah saya terangkan sebelumnya bahwa kita akan membuat content slide panel muncul pada posisi tertentu dari halaman.Untuk itu kita akan menambahkan selector id = "pc_reference" yang akan kita jadikan patokan kapan content itu muncul dan kapan content itu masuk dan hilang dari jendela halaman.Anda bebas akan diletakan dimana selector tersebut.Apakah anda akanmeletakannya pada akhir paragraf artikel, pada bagian sidebar paling bawah atau mungkin anda meletakannya pada bagian Copyright pada halaman web anda seperti contoh dibawah ini.

contoh selector

Tapi di tutorial ini, kita akan coba meletakan selector tersebut beserta struktur kode html nya pada sidebar.jadi sebelumnya...silahkan anda save dulu dari semua step step yang sudah kita kerjakan sejauh ini, kemudian masuk ke Page element » add a gadget » HTML/JavaScript.


Kode HTML

Struktur HTML yang akan kita gunakan adalah sebagai berikut :

<div class="pc_panel" id="pc_panel">
<div class="pc_label expand"></div>
<div class="pc_label close"></div>
<div class="pc_title">
More article on this blog</div>
<div id="pc_wrapper">
<div id="pc_content">

<div class="pc_item">
<h2>JUDUL CONTENT / ARTIKEL</h2>
<img src="URL IMAGE " alt=""/>
<p>
DESKRIPSI SINGKAT TENTANG ARTIKEL
</p>
<div class="pc_more">
URL menuju ke halaman content / artikel
</div>
</div>

<div class="clear"></div>
</div>
</div>
<div id="pc_slider" class="pc_slider"></div>
</div>

Tulisan yang berwarna merah itu bisa anda ganti seperti contoh dibawah ini :

Contoh :

<div class="pc_item">
<h2>Overlay Effect with jQuery </h2>
<img src="http://4.bp.blogspot.com/_VrWujqfSgyA/TTZiBMszQHI/AAAAAAAAAlM/z9J59Cc6_Ns/s320/capture1.jpg " alt=""/>
<p>
A slick overlay effect that let's you show notes on a portfolio item.
</p>
<div class="pc_more">
http://tympanus.net/codrops/2010/10/12/annotation-overlay-effect/
</div>
</div>

Keterangan :
Struktur yang saya tandai dengan warna "biru" adalah Container (wadah) dari item content/artikel yang nantinya akan kita masukan dan kita letakan , struktur dari item content itu adalah bagian seperti pada contoh yang ada diatas.Jadi, bila anda ingin menambahkan item content, anda cukup manambahkan selector "pc_item" tersebut dibawah item sebelumnya.

content

Nah...jika sejauh ini anda sudah paham dari semua penjelasan yang saya berikan, sekarang anda tinggal menambahkan selector <p id="pc_reference" class="meta"><a href="">My Sliding content</a></p> dibagian atas dari keseluruhan kode HTML tersebut, seperti contoh pada gambar dibawah :


html+javascript


Klik "SAVE" .
Lalu sekarang cobalah anda buka halaman blogspot anda dan scroll halaman tersebut sampai batas widget yagn telah anda tambahkan tadi.

Sekarang anda sudah memiliki Content panel blogspot istimewa di blog kesayangan anda.Semoga bermanfaat....


0 comments:


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment