Content panel blogspot istimewa

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.

.pc_panel{position:fixed;background:transparent url(http://4.bp.blogspot.com/_VrWujqfSgyA/TTUfqh-maOI/AAAAAAAAAjc/fA4ngoJR1-0/s1600/bgSlide.png) repeat top left;color:#fff;font-size:11px;line-height:14px;width:100%;right:0px;display:none;font-family:Arial, Helvetica, sans-serif;}.pc_label{width:20px;height:20px;position:absolute;top:0px;text-align:center;letter-spacing:2px;text-shadow:0px 0px 1px #fff;cursor:pointer;}.pc_panel .expand{background:#010101 url(http://1.bp.blogspot.com/_VrWujqfSgyA/TTUfqe8EvMI/AAAAAAAAAjU/ncWKOP0LfRI/s1600/expand.gif) no-repeat center center;right:24px;}.pc_panel .collapse{background:#010101 url(http://3.bp.blogspot.com/_VrWujqfSgyA/TTUfqWGivmI/AAAAAAAAAjM/aaYlDfOE3pQ/s1600/collapse.gif) no-repeat center center;right:24px;}.pc_panel .close{background:#010101 url(http://4.bp.blogspot.com/_VrWujqfSgyA/TTUfqOhg-wI/AAAAAAAAAjE/KnbCkzw0hnA/s1600/close.gif) no-repeat center center;right:2px;}.pc_title{width:100%;height:20px;background:#000;font-size:9px;text-transform:uppercase;line-height:20px;text-indent:10px;letter-spacing:1px;}.pc_panel .selected{background:#222;}.pc_panel .selected img{border:4px solid #010101;}.pc_item{width:200px;height:120px;cursor:pointer;overflow:hidden;background:transparent url(http://4.bp.blogspot.com/_VrWujqfSgyA/TTUfqh-maOI/AAAAAAAAAjc/fA4ngoJR1-0/s1600/bgSlide.png) repeat top left;float:left;margin:5px 10px 15px 10px;-moz-border-radius:4px;-webkit-border-radius:4px;-moz-box-shadow:0px 0px 5px #000;-webkit-box-shadow:0px 0px 5px #000;box-shadow:0px 0px 5px #000;}.pc_item h2{padding:10px 0px 10px 10px;font-size:14px;height:32px;color:#009ac6;line-height:14px;clear:both;}.pc_item p{text-align:justify;font-size:10px;text-shadow:1px 1px 1px #000;padding:0px 10px 5px 10px;}.pc_item img{width:50px;float:left;margin:0px 10px 0px 10px;border:4px solid #191919;-moz-box-shadow:0px 0px 5px #000;-webkit-box-shadow:0px 0px 5px #000;box-shadow:0px 0px 5px #000;}.pc_more{display:none;}.pc_wrapper{overflow:hidden;position:relative;margin-top:10px;}.pc_slider{position:absolute;top: 100%;}.ui-widget-content {background:#000;}.ui-state-default, .ui-widget-content .ui-state-default{border:none;background-color:#aaa;outline:none;cursor:pointer;height:17px;width:10px;left:0px;margin-bottom:-10px;}.clear{clear:both;}

jQuery dana Javascript

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

<!-- The JavaScript --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/> <script type='text/javascript'> $(function() { //window width and height var window_w = $(window).width(); var window_h = $(window).height(); //the main panel div var $pc_panel = $('#pc_panel'); //the wrapper and the content divs var $pc_wrapper = $('#pc_wrapper'); var $pc_content = $('#pc_content'); //the slider / slider div var $pc_slider = $('#pc_slider'); //the element reference - reaching this element //activates the panel var $pc_reference = $('#pc_reference'); var maxWidth,maxHeight,marginL; buildPanel(); function buildPanel(){ $pc_panel.css({'height': window_h + 'px'}); hidePanel(); //we want to display the items in a grid. //we need to calculate how much width and height //the wrapper should have. //we also want to display it centered, so we need to calculate //the margin left of the wrapper //First, lets see how much of height: //maxHeight = Math.floor((window_h-20)/135)*135; //20 => pc_titles height //135 => 125 of each items height plus its margin (10) maxHeight = Math.floor((window_h-20)/135)*135; //maxWidth = Math.floor((window_w-35)/220)*220; //220 = item width + margins (left and right) maxWidth = Math.floor((window_w-35)/220)*220; marginL = (window_w - maxWidth)/2; $pc_wrapper.css({ 'width' : maxWidth + 20 + 'px', 'height' : maxHeight +'px', 'margin-left' : marginL + 'px' }); //innitialize the slider try{ $pc_slider.slider('destroy'); }catch(e){} //total_scroll is the number of how much we can scroll var total_scroll = $pc_content.height()-maxHeight; //add a slider to scroll the content div //hidden until the panel is expanded if(total_scroll > 0){ $pc_slider.slider({ orientation : 'vertical', max : total_scroll, min : 0, value : total_scroll, slide : function(event, ui) { $pc_wrapper.scrollTop(Math.abs(ui.value-total_scroll)); } }).css({ 'height' : maxHeight -40 + 'px',//40 extra 'left' : maxWidth + 20 + marginL + 'px', 'top' : 30 + 20 + 'px', //30 = 20 of title + 10 margin, 20 extra 'display' : 'none' }); } } //the panel gets positioned out of the viewport, //and ready to be slided out! function hidePanel(){ //165 => 20 pc_title + 120 item + margins $pc_panel.css({ 'right' : -window_w + 'px', 'top' : window_h - 165 + 'px' }).show(); try{ //position the slider in the beginning slideTop(); }catch(e){} $pc_slider.hide(); $pc_panel.find('.collapse') .addClass('expand') .removeClass('collapse'); } //resets the slider by sliding it to the top function slideTop(){ var total_scroll = $pc_content.height()-maxHeight; $pc_wrapper.scrollTop(0); $pc_slider.slider('option', 'value', total_scroll ); } $(window).bind('scroll',function(){ /* When we reach the element pc_reference, we want to show the panel. Let's get the distance from the top to the element */ var distanceTop = $pc_reference.offset().top - window_h; if($(window).scrollTop() > distanceTop){ if(parseInt($pc_panel.css('right'),10) == -window_w) $pc_panel.stop().animate({'right':'0px'},300); } else{ if(parseInt($pc_panel.css('right'),10) == 0) $pc_panel.stop().animate({'right': -window_w + 'px'},300,function(){ hidePanel(); }); } }).bind('resize',function(){ //on resize calculate the windows dimentions again, //and build the panel accordingly window_w = $(window).width(); window_h = $(window).height(); buildPanel(); }); //when clicking on the expand button, //we animate the panel to the size of the window, //reset the slider and show it $pc_panel.find('.expand').bind('click',function(){ var $this = $(this); $pc_wrapper.hide(); $pc_panel.stop().animate({'top':'0px'},500,function(){ $pc_wrapper.show(); slideTop(); $pc_slider.show(); $this.addClass('collapse').removeClass('expand'); }); }) //clicking collapse will hide the slider, //and minimize the panel $pc_panel.find('.collapse').live('click',function(){ var $this = $(this); $pc_wrapper.hide(); $pc_slider.hide(); $pc_panel.stop().animate({'top':window_h - 165 + 'px'},500,function(){ $pc_wrapper.show(); $this.addClass('expand').removeClass('collapse'); }); }); //clicking close will make the panel disappear $pc_panel.find('.close').bind('click',function(){ $pc_panel.remove(); $(window).unbind('scroll').unbind('resize'); }); //mouse over the items add class "selected" $pc_wrapper.find('.pc_item').hover( function(){ $(this).addClass('selected'); }, function(){ $(this).removeClass('selected'); } ).bind('click',function(){ window.open($(this).find('.pc_more').html()); }); }); </script>

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

<script language='javascript' src='http://pujangga.googlecode.com/files/Liberation_Sans.font.js'/><script language='javascript' src='http://pujangga.googlecode.com/files/cufon-yui.js'/>

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.

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.

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 :

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....