Tutorial Keren Cara Membuat Widget Tab View menu versi 2 (abu farhan)

Akhirnya setelah beberapa lama mencoba membuat tab menu versi abu farhan. kelebihan tab ini dari sebelumnya yaitu pada versi ini kita dapat menyisipkan widget yang telah disediakan oleh blog itu sendiri, misalnya seperti Popular Post, Blog Arcive, adsense dan lain-lain.contohnya bisa aga liat diblog ini....
baik mungkin saya langsung aja memberikan langkahnya cukup mudah koq asal sesuai dengan intruksi dibawah.

Langkah awal, pasang kode CSS dibawah ini dengan meng-copy paste kode di bawah tepat di atas ]]></b:skin>.

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}


.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}


.widget-tab ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab ul li:last-child {
border-bottom:none;
}
.widget-tab ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content ul li a:hover {
color:#a59c83;
}
.tab-content ul li a:hover small {
color:#baae8e;
}


.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;


}


ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Keterangan: CSS diatas adalah untuk membentuk tampilan widget, jadi kalian bisa mengedit sesuai dengan keinginan kalian

Setelah itu, kita akan memasang script JQuery copy dan paste kode berikut tepat di atas </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

keterangan: Kalian tidak perlu memasang script ini jika script ini sudah ada di blog kalian. Kalau belum ada, copy dan paste kode diatas.

Yang terakhir, ini untuk menampilkan tab menu ini ke dalam blog kalian yaitu dengan meng-copy dan paste kode berikut juga di atas </head>.

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://www.yourjavascript.com/0293812025/bloggertabv1.0-min.js"></script>

Keterangan: coba kalian perhatikan kode yang bewarna merah
starttab         : nomor widget yang akan masuk dalam tab pertama
endtab          :  jumlah widget yang akan masuk ke dalam Tab Menu
sidebarname : nama id dari kolom yang akan di jadikan Tab Menu.


Untuk mencari tahu nomor widget yang akan dijadikan Tab Menu kalian bisa lihat gambar berikut:

 Keterangan:

Kalau ingin membuat Tab Menu terdiri dari Video, Murottal, & Blog Archive maka atur agar "starttab=0" dan "endtab=2". Apabila ingin mengikutsertakan Label, maka atur agar  "endtab=3".
Apabila ingin agar Tab Menu berada di bawah widget Video, atur agar "starttab=1", sehingga Tab Menu akan berisi Murottal, Blog Archive, dan Label.



Untuk mencari apa nama "id" dari sidebar, caranya cukup gampang, yaitu pada "Edit HTML" cari teks bertuliskan nama widget pertama. Contohnya seperti di atas, maka cari kata " 'Video' " maka akan tampil seperti berikut:

....<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Video' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Murottal' type='HTML'/>...

Nah...!!! yang berwarna biru itu adalah "id" dari sidebar kalian. Perhatikan "id" dari <b:section.. yang merupakan "id" yang harus di atur pada kode Tab Menu. Dengan begitu, isi "sidebarname=sidebar".

selesai deh....mudah kan apabila ngikutin sesuai yang diatas mudah-mudahan berjalan normal...
apabila ada pertanyanya silahkan posting dibawah...akan ane bantu sebisa ane....

Tutorial Keren Cara Membuat Widget Tab View menu jQuery

Sekedar sharing aja yang masih bingung dalam membuat seperti ini:

DEMO

DOWNLOAD <<<<< silahkan download javascriptnya disini

Saya akan berbagi tentang cara membuat tab menu diatas.

Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger

2.Pilih layout

3.Kemudian pilih edit HTML

4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)

5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>  

<title>jQuery UI Tabs Demo</title>  

<link href='style.css' rel='stylesheet' type='text/css'/>  

<script src='http://h1.ripway.com/faencool/tab%20wedget%20blog/1/jquery-1.2.6.min.js' type='text/javascript'/>  

<script src='http://h1.ripway.com/faencool/tab wedget blog/1/jquery-ui-personalized-1.5.2.packed.js  ' type='text/javascript'/>  

<script src=' http://h1.ripway.com/faencool/tab wedget blog/1/sprinkle.js' type='text/javascript'/>  

seperti gambar dibawah ini:

6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas ]]></b:skin>

* {  
margin: 0;  
padding: 0;  
}  
  
body {  
font-size: 75%;  
color: #222;  
background: #ffffff;  
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;  
line-height: 1.6em;  
}  
  
.widget {  
width: 310px;  
margin: 20px;  
padding: 10px;  
background: #f3f1eb;  
border: 1px solid #dedbd1;  
margin-bottom: 15px;  
}  
  
.widget a {  
color: #222;  
text-decoration: none;  
}  
  
.widget a:hover {  
color: #009;  
text-decoration: underline;  
}  
  
.tabnav li {  
display: inline;  
list-style: none;  
padding-right: 5px;  
}  
  
.tabnav li a {  
text-decoration: none;  
text-transform: uppercase;  
color: #222;  
font-weight: bold;  
padding: 4px 6px;  
outline: none;  
}  
  
.tabnav li a:hover, .tabnav li a:active, .tabnav li.ui-tabs-selected a {  
background: #dedbd1;  
color: #222;  
text-decoration: none;  
}  
  
.tabdiv {  
margin-top: 2px;  
background: #fff;  
border: 1px solid #dedbd1;  
padding: 5px;  
}  
  
.tabdiv li {  
list-style-image: url("star.png");  
margin-left: 20px;  
}  
  
.ui-tabs-hide {  
display: none;  
}  

seperti gambar dibawah ini:

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut:

lalu masukkan kode dibawah ini:

<div id="tabvanilla" class="widget">


<ul class="tabnav">
<li><a href="#popular">Popular</a></li>
<li><a href="#recent">Recent</a></li>
<li><a href="#featured">Featured</a></li>
</ul>


<div id="popular" class="tabdiv">
<ul>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
</ul>
</div><!--/popular-->


<div id="recent" class="tabdiv">
<p>Lorem ipsum dolor sit amet.</p>
</div><!--/recent-->


<div id="featured" class="tabdiv">
<ul>
<li><a href="#">Aliens Infiltrate Army Base In UK Town</a></li>
<li><a href="#">Are We Alone? A Look Into Space</a></li>
<li><a href="#">U2 Rocks New York's Central Park</a></li>
<li><a href="#">TA Soldiers Wear Uniforms To Work</a></li>
<li><a href="#">13 People Rescued From Flat Fire</a></li>
<li><a href="#">US Troops Abandon Afghan Outpost</a></li>
<li><a href="#">Sheep Rising From The Dead</a></li>
<li><a href="#">Blogosphere Daily Released!</a></li>
<li><a href="#">Apple iPhone 3G Released</a></li>
<li><a href="#">Welsh Zombie Sheep Invasion</a></li>
</ul>
</div><!--featured-->


</div><!--/widget-->

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>

<a href="collection-tipsfaen.blogspot.com/">collection-tipsfaen.blogspot.com/</a> | <a href="">Kembali Ke TUtorial</a>

silahkan mencoba.....
apabila ada pertanyaan silahkan posting aja dibawah....

Tutorial Keren Cara Membuat Widget Tab View menu jQuery 2

Sekedar sharing aja yang masih bingung dalam membuat seperti ini:

DEMO

DOWNLOAD <<<<< silahkan download javascriptnya disini

Saya akan berbagi tentang cara membuat tab menu diatas.

Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger

2.Pilih layout

3.Kemudian pilih edit HTML

4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)

5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<script src='http://tab-menu.googlecode.com/files/jquery-1.3.1.min.js ' type='text/javascript'/>
<script src='http://tab-menu.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'/>


<script>






$(document).ready(function() { 


//Get the height of the first item
$('#mask').css({'height':$('#panel-1').height()}); 


//Calculate the total width - sum of all sub-panels width
//Width is generated according to the width of #mask * total of sub-panels
$('#panel').width(parseInt($('#mask').width() * $('#panel div').length));


//Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
$('#panel div').width($('#mask').width());


//Get all the links with rel as panel
$('a[rel=panel]').click(function () {


//Get the height of the sub-panel
var panelheight = $($(this).attr('href')).height();


//Set class for the selected item
$('a[rel=panel]').removeClass('selected');
$(this).addClass('selected');


//Resize the height
$('#mask').animate({'height':panelheight},{queue:false, duration:500}); 


//Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
$('#mask').scrollTo($(this).attr('href'), 800); 


//Discard the link default behavior
return false;
});


});
</script>

seperti gambar dibawah ini:

6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas ]]></b:skin>

#scroller-header a {
text-decoration:none; 
color:#867863; 
padding:0 2px;
}


#scroller-header a:hover {
text-decoration:none; 
color:#4b412f
}


a.selected {
text-decoration:underline !important; 
color:#4b412f !important;
}


#scroller-header {
background:url(http://tab-menu.googlecode.com/files/header.gif) no-repeat;
width:277px;
height:24px;
padding:35px 0 0 15px;
font-weight:700;
}


#scroller-body {
background:url(http://tab-menu.googlecode.com/files/body.gif) no-repeat bottom center;
width:277px;
padding-bottom:30px;
}


#mask {
width:250px;
overflow:hidden;
margin:0 auto;
}


#panel {


}


#panel div {
float:left;


}


/* Extra styling for each panel*/


#panel ul {
list-style:none;
margin:0 5px;
padding:0;
}
#panel ul li {
padding:5px;
color:#557482;
border-bottom:1px dotted #ccc;
}


#panel ul li.last {
border-bottom:none !important;
}
#panel a {
text-decoration:none;
color:#557482;


}


#panel a:hover {
text-decoration:none;
color:#282828;


}




kode diatas bisa anda edit sesuai kenginan tampilan yang anda mau

seperti gambar dibawah ini:

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut:

lalu masukkan kode dibawah ini:

<div id="scroller-header">
<a href="#panel-1" rel="panel" class="selected">Populars</a>
<a href="#panel-2" rel="panel">Comments</a>
<a href="#panel-3" rel="panel">Recents</a>
<a href="#panel-4" rel="panel">Categories</a>
</div>
<div id="scroller-body">
<div id="mask">
<div id="panel">


<div id="panel-1">
<ul>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-tab-stuktur-menu.html">Cara Membuat Tab Struktur Menu</a></li>
<li><a href="http://bambangpage.blogspot.com/2009/11/cara-membuat-menu-multi-kolom-dengan.html">Cara Membuat Menu Multi Kolom dengan Tab Slide mode</a></li>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-jquery-slideshow-dengan.html">Cara Membuat Jquery Slideshow Dengan Cycle Plug In</a></li>
<li>Cara Membuat Simple JQuery Image Slide Show dengan Semi Transparent Caption</li>
<li>Cara Menghindari Spasi Di atas Table Di Postingan Blogger</li>
<li>Cara Membuat Menu Multi Kolom dengan Tab Slide mode</li>


<li>Cara Membuat News Update dengan gAjax RSS Ticker Pada Blog Atau Website anda</li>
<li>Cara Menambahkan Icon Atau image Disamping Title Sidebar</li>
<li>Cara Membuat Facebox Image Viewer</li>
<li>Cara Membuat Tulisan Berjalan Pada Address Bar</li>
<li class="last">Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
</ul>


</div>
<div id="panel-2">
<ul>
<li>Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
<li>Cara Membuat Kotak Komentar Blogger Dibawah Postingan</li>
<li>10 jQuery and non-jQuery javascript Rich Text Editors</li>
<li class="last">Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"</li>


</ul> 
</div>
<div id="panel-3">
<ul>
<li>Cara Mengganti Tanggal Postingan dg Icon Calendar</li>
<li class="last">Cara Menampilkan Postingan Terbaru Pada blogspot</li>
</ul> 
</div>
<div id="panel-4">


<ul>
<li>ajax</li>
<li>browser</li>
<li>cms</li>
<li>css-html</li>
<li>design</li>


<li>font</li>
<li>freebies</li>
<li>graphic</li>
<li>icon</li>
<li>inspiration</li>
<li>javascript</li>


<li>logo</li>
<li>photography</li> 
<li>photoshop</li>
<li>php</li>
<li>seo</li>
<li>template</li>


<li>tips</li>
<li>tools</li>
<li>trend</li>
<li>tutorial</li>
<li>usability</li>
<li>wallpaper</li>


<li class="last">wordpress</li>
</ul> 
</div> 
</div>
</div>
</div>

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>

<a href="collection-tipsfaen.blogspot.com/">collection-tipsfaen.blogspot.com/</a> | <a href="">Kembali Ke TUtorial</a>

silahkan mencoba.....
apabila ada pertanyaan silahkan posting aja dibawah....

Tutorial Keren Cara Membuat Widget Tab View menu jQuery 3

Sekedar sharing aja yang masih bingung dalam membuat seperti ini:

DEMO

DOWNLOAD <<<<< silahkan download javascriptnya disini

Saya akan berbagi tentang cara membuat tab menu diatas.

Adapun langkah-langkahnya sebagai berikut :

1.Seperti biasa anda harus log in dulu ke blogger

2.Pilih layout

3.Kemudian pilih edit HTML

4.centang Expand Widget Templates dan backup dulu templete anda (untuk menghindari apabila terjadi kesalahan)

5.Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>

<script src='http://tab-menu.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
<script type="text/javascript">

$(document).ready(function() {


//Get all the LI from the #tabMenu UL
$('#tabMenu > li').click(function(){

//perform the actions when it's not selected
if (!$(this).hasClass('selected')) {

//remove the selected class from all LI
$('#tabMenu > li').removeClass('selected');

//Reassign the LI
$(this).addClass('selected');

//Hide all the DIV in .boxBody
$('.boxBody div').slideUp('1500');

//Look for the right DIV in boxBody according to the Navigation UL index, therefore, the arrangement is very important.
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

}

}).mouseover(function() {

//Add and remove class, Personally I dont think this is the right way to do it, anyone please suggest
$(this).addClass('mouseover');
$(this).removeClass('mouseout');

}).mouseout(function() {

//Add and remove class
$(this).addClass('mouseout');
$(this).removeClass('mouseover');

});

//Mouseover with animate Effect for Category menu list
$('.boxBody #category li').click(function(){

//Get the Anchor tag href under the LI
window.location = $(this).children().attr('href');
}).mouseover(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','#888');
$(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
}).mouseout(function() {

//Change background color and animate the padding
$(this).css('backgroundColor','');
$(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
});

//Mouseover effect for Posts, Comments, Famous Posts and Random Posts menu list.
$('#.boxBody li').click(function(){
window.location = $(this).children().attr('href');
}).mouseover(function() {
$(this).css('backgroundColor','#888');
}).mouseout(function() {
$(this).css('backgroundColor','');
});

});

</script>

seperti gambar dibawah ini:

6.Untuk css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas ]]></b:skin>

body{font-family:arial;font-size:10px;color:#ccc;background-color:#555}
a {color:#ccc;text-decoration:none;}
a:hover {color:#ccc;text-decoration:none}
#tabMenu {margin:0;padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:30px;cursor:pointer;cursor:hand}

li.comments {background:url(http://tab-menu.googlecode.com/files/tabComment.gif) no-repeat 0 -32px;}
li.posts {background:url(http://tab-menu.googlecode.com/files/tabStar.gif) no-repeat 0 -32px;}
li.category {background:url(http://tab-menu.googlecode.com/files/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://tab-menu.googlecode.com/files/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://tab-menu.googlecode.com/files/tabRandom.png) no-repeat 0 -32px;}

li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}

.box {width:227px}
.boxTop {background:url(http://tab-menu.googlecode.com/files/boxTop.png) no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://tab-menu.googlecode.com/files/boxBottom.png) no-repeat;height:11px;}

.boxBody div {display:none;}
.boxBody div.show {display:block;}

.boxBody div ul {margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://tab-menu.googlecode.com/files/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li span {font-size:8px;font-style:italic; color:#888;}

seperti gambar dibawah ini:

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan Tab Stuktur Menu tersebut:

lalu masukkan kode dibawah ini:

<div class="box">
<ul id="tabMenu">
<li class="posts selected"></li>
<li class="comments"></li>
<li class="category"></li>
<li class="famous"></li>
<li class="random"></li>
</ul>
<div class="boxTop"></div>

<div class="boxBody">

<div id="posts" class="show">

<ul>
<li><a href="http://bambangpage.blogspot.com/2009/12/cara-membuat-jquery-slideshow-dengan.html">Cara Membuat Jquery Slideshow Dengan Cycle Plug In</a></li>
<li>Cara Membuat Simple JQuery Image Slide Show dengan Semi Transparent Caption</li>
<li>Cara Menghindari Spasi Di atas Table Di Postingan Blogger</li>
<li>Cara Membuat Menu Multi Kolom dengan Tab Slide mode</li>
<li>Cara Membuat News Update dengan gAjax RSS Ticker Pada Blog Atau Website anda</li>
<li>Cara Menambahkan Icon Atau image Disamping Title Sidebar</li>
<li>Cara Membuat Facebox Image Viewer</li>
<li>Cara Membuat Tulisan Berjalan Pada Address Bar</li>
<li class="last">Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
</ul>
</div>

<div id="comments">
<ul>
<li>Mengganti Kotak Komentar Haloscan menjadi Comment box Blogspot</li>
<li>Cara Membuat Kotak Komentar Blogger Dibawah Postingan</li>
<li>10 jQuery and non-jQuery javascript Rich Text Editors</li>
<li class="last">Mengganti Tulisan "Older Post / Newer Post" atau "Posting Lama / Posting Baru"</li>
</ul>
</div>

<div id="category">
<ul>
<li>Cara Mengganti Tanggal Postingan dg Icon Calendar</li>
<li class="last">Cara Menampilkan Postingan Terbaru Pada blogspot</li>
</ul>
</div>

<div id="famous">
<ul>
<li>Simple JQuery Modal Window Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>

<li class="last">Exclusive RSS Icons from Queness.</li>
</ul>
</div>

<div id="random">
<ul>
<li>50 Monochromatic Website Designs.</li>
<li>Breadcrumbs In Web Design: Examples And Best Practices.</li>
<li>Simple JQuery Modal Window Tutorial.</li>

<li>Navigation List menu + Jquery Animate Effect Tutorial.</li>
<li>Create a Simple CSS + Javascript Tooltip with jQuery.</li>
<li>Exclusive RSS Icons from Queness.</li>
<li>New Smashing Freebies For Designers and Bloggers.</li>
<li class="last">Food Plates and Creative Dishware Designs.</li>
</ul>
</div>


</div>

<div class="boxBottom"></div>

</div>

<div style="font-size:15px;color:#888">Terimakasih Atas Kunjungannya</div>

<a href="collection-tipsfaen.blogspot.com/">collection-tipsfaen.blogspot.com/</a> | <a href="">Kembali Ke TUtorial</a>

silahkan mencoba.....
apabila ada pertanyaan silahkan posting aja dibawah....

hello

selamat datang di blogku....
semoga bermanfaat...