0 Horizontal Navigasi Plus Search Box Simple And Cool

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image, kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background.

Lihat Demo

Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat.
Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini :

<style type="text/css">

.black{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: #499bea;
background: -moz-linear-gradient(top, #999 0%, #000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}

.black ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }

.black li{
display: inline; margin: 0;}

.black li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}

.black li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}

#searchboxo{
width:250px; float:right; padding: 4px; margin:0px; }

#searchboxo form input.searchinput{
background: #fff; padding:6px; margin:0px; width: 160px;
border: solid 1px #999; outline: none;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
-moz-box-shadow: inset 0 1px 3px #666;
-webkit-box-shadow: inset 0 1px 3px #666;
box-shadow: inset 0 1px 3px #aaa; }

#searchboxo form input.submitbutton{
cursor:pointer; width: 60px;
background: #FCFCFC;
background: -moz-linear-gradient(top, #FCFCFC 0%, #E8E8E8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FCFCFC), color-stop(100%,#E8E8E8));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCFCFC', endColorstr='#E8E8E8',GradientType=0 );
border:1px solid #d8d8d8;
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
color:#000; padding:4px; text-shadow:1px 1px #fff;}

</style>

<div class='black'>
<ul><li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Galery</a></li>
</ul>

<div id='searchboxo'>
<form action='/search' id='searchform' method='get'> <input class='searchinput' id='searchbox' name='q' onblur='if (this.value == "") {this.value = "Insert keyword here...";}' onfocus='if (this.value == "Insert keyword here..."{this.value = "";}' type='text' value='Insert keyword here...'/><input class='submitbutton' type='submit' value='Search'/></form></div></div>

Silahkan ganti alamat url-nya dengan url atau link yang blogger inginkan.
selamat mencoba.

0 Horizontal Navigasi Dengan Tab Pointer No Image

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah.


Demo Navigasi

Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini.

Kode CSS (Cascading Style Sheet)

.menu {
padding:0; margin:0; list-style-type:none; white-space:nowrap; }
.menu li {
float:left; min-width:100px; }
.menu a {
position:relative; display:block; text-decoration:none; min-width:100px; float:left; }
* html .menu a { width:100px; }
.menu a span {
display:block; color:#fff; background:#7cbc0a; border:1px solid #fff;
border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; }
* html .menu a span { width:100px; cursor:hand; w\idth:66px; }
.menu a b { display:block; border-bottom:2px solid #06a; }
.menu a em { display:none; }
.menu a:hover { background:#fff; }
.menu a:hover span { color:#fff; background:#08c; }
.menu a:hover em {
display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff;
border-width:6px 6px 0 6px; position:absolute; left:50%; margin-left:-6px; }

Kode HTML

<ul class="menu">
<li><a href="#"><b><span>Menu Satu</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu kedua</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu ketiga</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Empat</span></b><em></em></a></li>
<li><a href="#"><b><span>Menu Lima</span></b><em></em></a></li>
</ul>

0 Modifikasi Label - Tag Seperti Menu Navigasi Ala WordPress

Tutorial kali ini saya akan memodifikasi tampilan tag atau label pada postingan, untuk blogger biasanya label dipisahkan dengan menggunakan tanda koma[,] contohnya seperti ini : Tutorial blogger, Modifikasi label, Tag Ala Wordpress. dst, Pemisah antara tag atau label ini bisa kita modifikasi seperti menu navigasi.

Lihat screen shoot gambar dibawah ini :

Jika anda tertarik untuk membuat tag atau label seperti menu navigasi silahkan ikuti tutorialnya di bawah ini ::

Pertama Masuk pada Edit HTML - Expand Template Widget
Selanjutnya kita sembunyikan dulu comment - Author - dan Label dengan cara menambahkan kode dibawah ini pada bagian body.

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

Untuk mempercepat pengerjaan saya menggabungnya kode diatas pada bagian Tag, jadi hasil kode keseluruhan seperti berikut :

.post-comment-link a{display:none;}
.post-author{display:none;}
.post-labels{display:none;}

div.tag{font-size:11px;padding-top:5px; color:#999999; margin-top:10px;}
.post-tag{font-family:Georgia; font-size:12px; margin-top:15px;}
.post-tag a:link, .post-tag a:visited{color:#444; font-style:italic;}
.post-tag a:hover {color:#ff0000; font-style:italic;}

Masukan kode di atas, pada bagian body tepatnya diatas kode ]]></b:skin>

Selanjutnya cari koda <data:post.body/>
Masukan kode di bawah ini, dibawah kode <data:post.body/>

<div class='post-tag'> <b style='background:#ff0000; -moz-border-radius:5px; -webkit-border-radius:5px; padding:8px 10px; color:#fff; margin-right:10px;'>Tag</b>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ &quot;?max-results=5&quot;' rel='tag' style='border-right:solid 1px #CCCCCC; padding-right:8px; margin-right:8px;'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</b:if>
<b:if cond='data:post.allowComments'>
<a class='comment' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b style='font-style:normal; padding:0px; font-size:16px;margin:0px;'><data:post.numComments/></b></a>
</b:if>
</div>

Sekarang pratinjau terlebih dahulu kalau sudah cocok silahkan disimpan.

NB :: Anda bisa mengcustom tampilan tag navigasi ini pada bagian kode diatas sesuai selera anda. selamat mencoba.

0 Circle Horizontal Navigasi Menu Dengan CSS3

postingan kali ini saya akan memberikan tutorial pembuatan menu navigasi dengan model circle atau lingkaran menggunakan css3. Menu navigasi ini full menggunakan css3 tanpa image, Circle Horizontal navigasi menu css3 ini cukup lumayan walaupun hasil dari iseng-iseng membuat lingkaran dengan css3 sehingga terpikir untuk di implementasikan kepada menu navigasi horizontal, ternyata cukup memuaskan hasilnya. Untuk contohnya lihat gambar dibawah ini.


Untuk kode css3 lingkaran atau circle sebenarnya menggunakan border radius contoh kodenya seperti dibawah ini:

-moz-border-radius:100px; -webkit-border-radius:100px;

Langsung pada pembuatan circle menu navigasi dengan css3 :
Untuk lebih mudah tanpa obrak abrik kode template, jadi saya memasang navigasi ini langsung di widget.

Masuk pada Rancangan >> Tambah Gadget >> HTML/JavaScript
Masukan kode di bawah ini :

<style type="text/css">

ul#circle { display: inline;list-style: none; }
ul#circle li { margin-right:6px; float:left;width: 65px;height:65px; }
ul#circle li a {
text-decoration: none; width: 55px;height:55px; padding:5px;
font-size:8pt; font-weight:bold; font-family:georgia;
text-align:center; line-height:50px;
border: 1px solid #ff0000;
-moz-border-radius:100px; -webkit-border-radius:100px;
background: #ffffff; display:block; color:#000; }
ul#circle li a:hover {
background:#ff0000; border: 1px solid #000;
color:#fff; font-size:8pt; font-weight:bold; }

</style>

<div id='circle'>
<ul id='circle'>
<li><a href='http://chugygogog.blogspot.com' >HOME</a></li>
<li><a href='http://chugygogog.blogspot.com' >BLOG</a></li>
<li><a href='http://chugygogog.blogspot.com' >GRAFIS</a></li>
</ul>
</div>

Ganti teks warna merah dengan link anda, ganti juga warna biru dengan judul link yang diinginkan. Jika sudah silahkan di simpan.

NB :: Untuk penulisan judul link di usahakan tidak terlalu panjang karena menu ini menggunakan lebar dan tinggi yang sama sehingga jika penulisan judul linknya terlalu panjang maka teksnya akan keluar dari lingkaran menu tersebut. Selamat mencoba.

0 Membuat Buttom Next Page,Home,Back Page dengan CSS3

Postingan ini saya coba menjawab pertanyaan [Rizky2009] yang menanyakan cara membuat navigasi Next Page - Home - Back Page dengan menggunakan Button CSS3, untuk contohnya bisa lihat ilustrasi gambar dibawah, atau link next page di bagian bawah.



Langsung pada cara membuat Button Next Page - Home - Back Page Dengan CSS3.

Pertama pastikan anda sudah memasang Button CSS3 pada template anda agar button bisa diterapkan, Untuk lebih jelasnya baca postingan sebelumnya yaitu :

"Membuat Tombol Dengan CSS3 - Buttom CSS3 Style"

Sekarang masuk pada Edit HTML > Expand Template Widget
Cari kode seperti dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#8592; Back Page</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Page &#8594;</a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'>Home Page</a>

</div>

Untuk lebih cepat gunakan [Ctrl + F] untuk menemukan kode diatas.
Setelah itu hapus kode diatas dan ganti dengan kode di bawah ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<p><a class='buttom' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&#8592; Back Page</a></p>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<p><a class='buttom' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Next Page &#8594;</a></p>
</span>
</b:if>

<p><a class='buttom' expr:href='data:blog.homepageUrl'>Home Page</a></p>

</div>

Pratinjau terlebih dahulu, kalau sudah cocock bisa langsung disimpan.
selamat mencoba.

0 Menu Navigasi Gradient Linear Dengan CSS3 "Slick Navigasi Black Dop"

Postingan kali ini saya coba menulis seputar CSS3 lagi, sebagai pelengkap dari CSS3 yang lalu yaitu Hover background transitions , Hover Tab menu dan juga Postingan yang lalu saya pernah membahas membuat menu navigasi CSS3 dengan menggunakan Free CSS3 Menu Maker.

dan kali ini saya coba membuat menu navigasi horizontal dengan menggunakan background gradient linear full CSS3 tanpa image dengan warna Black Dop.

Seperti apa bentuknya menu navigasi dengan CSS3 ini lihat screen shoot di bawah ini.



Menu Navigasi diatas menggunakan background Gradient linear CSS3 dengan kode warna #444444 pada bagian atas dan #666666 untuk bagian bawah. dan juga ronded corner pada bagian ujung kiri dan kanan, semuanya menggunakan CSS3.

Untuk contoh kode Gradient linear seperti ini :

background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
background: -moz-linear-gradient(top, #444444, #666666);

Model navigasi seperti ini kalau dalam bahasa sundanya sih Slick navigasi kalau ga salah tentunya blogger lebih tahu.

Jika blogger ingin memasangnya silahkan lihat source kodenya dan caranya di bawah ini untuk lebih mudah saya memansangnya langsung pada gadget HTML/Javascript :

Pertama masuk Rancangan > Element halaman > Tambah Gadget > Pilih HTML/JavaScript.
masukan kode di bawah ini :

<style>
#main-navigation {
width: 100%;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
background: -moz-linear-gradient(top, #444444, #666666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');
border: 1px solid #444;
list-style: none;
padding: 8px;
margin: 4px;
float: left;
}

#main-navigation li {
float: left;
border-right: 1px solid #777;
}

#main-navigation li a {
font: 14px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
padding: 12px 20px;
border-right: 1px solid #333;
display: block;
color: #fff;
}

#main-navigation li a:hover {
background:#000000;
text-decoration:underline;
}

</style>

<ul id="main-navigation">
<li><a href="http://chugygogog.blogspot.com/">Home</a></li>
<li><a href="http://chugygogog.blogspot.com /">Themes</a></li>
<li><a href="http://chugygogog.blogspot.com/">Demos</a></li>
<li><a href="http://chugygogog.blogspot.com /">Blog</a></li>
</ul>

Kalau blogger tertarik untuk memasangnya silahkan dicoba.

NB :: Seperti biasa ganti url diatas yaitu teks tebal dengan url blogger.
Kode yang berwarna merah " filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');. merupakan filter untuk bisa menampilkan warna gradient linear ini pada internet explorer.

0 Hover Tab Menu CSS3 Tanpa Javasript

Akhirnya bisa beres juga mengganti tampilan template blog ini, walaupun cukup lama dalam pengeditan dan koneksi inet yang lagi ngadat tapi alhamdullilah akhirnya beres juga dan bisa kembali menulis postingan lagi, sebelumnya saya meminta maaf kalau pengunjung blog ini dibuat tidak nyaman dengan tampilan blog ini.

Masih seputar CSS3, Untuk sekarang saya akan membahas cara membuat Hover Tab Menu CSS3 tanpa Javasript. Tab menu mungkin sudah tidak asing lagi untuk blogger karena dari sekian blog yang pernah saya singgahi hampir 50% memasang tab menu.



Lihat demo Hover Tab Menu CSS3 tanpa Javascript

Tab menu ini cukup simple dan menarik dan saya rasa belum banyak yang memansang tab menu seperti ini. Tab Menu CSS3 ini di buat oleh www.kamikazemusic.com jadi silahkan blogger langsung ke situsnya untuk melihat atau mencoba membuat hover tab menu CSS3 tanpa Javascript.

Langsung pada Tutorial pembuatan Hover Tab Menu CSS3

0 Bikin Menu Dengan CSS3 Style "Free CSS3 Menu Maker"

Kayanya masih seputar CSS3 yang akan di bahas untuk postingan sekarang, mudah mudahan tidak bosan ya. Untuk kali ini saya akan memberikan info cara membuat Menu CSS3 Style simple nan cantik dengan bantuan program dari CSS Menu yaitu Free CSS3 Menu Maker.

Postingan sebelumnya seputar CSS3 bisa lihat di bawah ini.
(+) Buat Box Shadow dengan CSS3
(+) Menambahkan Stroke Pada Teks "Judul Blog Dengan Stroke"



Program Free CSS3 Menu Maker ini bisa di download secara gratis, Free CSS3 Menu Maker akan memudahkan anda untuk membuat menu navigasi dengan gaya CSS3.

Lihat Demo →
Link Download →

0 Modifikasi Page Number Dengan CSS3

Postingan ini sebagai tambahan untuk Navigasi Page Number 123 yang sebelumnya telah saya bahas silahkan dilihat kembali pembuatan Page Number 123 untuk blogger. Sekarang saya coba Memodifikasi page number 123 ini dengan menggunakan CSS3, yang pasti akan lebih menarik dibandingkan dengan navigasi page number sebelumnya.

Contohnya seperti gambar di bawah ini ::


Dengan Memasangkan CSS3 pada page number, page number terlihat seperti menggunakan background image (Gradasi dua warna) seperti yang anda lihat pada gambar di atas. padahal itu hanya permainan dari CSS3 mungkin itu yang menjadi unggulan untuk CSS3. Betul tidak bang [Hendro].

Langsung saja pada cara pemasangan page number dengan CSS3 ::

Pertama masuk pada Dashboard > Rancangan > Element Halaman > Tambah Gadget > Pilih HTML/JavaScript.

Masukan Script di bawah ini ::

<style>

.showpageArea {
padding:2px;margin-top:8px;margin-bottom:8px;
}
.showpageArea ul{
margin: 0 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
text-align: center;
font-size: 12px;
color:#333;
}

.showpageArea li{
padding: 8px;padding-top:6px; padding-bottom:6px;
margin: 0 2px;
list-style-type: none;
display: inline;
padding-bottom: 1px;
}

.showpageArea a, .showpageArea a:visited{
margin: 0 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
text-decoration: none;
color:#000;
}

.showpageArea a:hover, .showpageArea a:active{
margin: 2px 2px;
padding: 8px;padding-top:6px; padding-bottom:6px;
border: 1px solid #940f04;
color: #940f04;
background-color: #fff;
}

.showpagePoint {font-size:12px;
padding: 8px;padding-top:6px; padding-bottom:6px;
margin-right:3px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
-moz-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
-webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.4);
color:rgba(0,0,0,0.9);
text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border:1px solid rgba(0,0,0,0.5);
background:-webkit-gradient(linear,0% 0%,0% 100%,from(rgba(255,255,255,1)),to(rgba(185,185,185,1)));
background:-moz-linear-gradient(top,rgba(255,255,255,1),rgba(185,185,185,1));
color: #940f04;
background-color:#fff;
}

.showpageArea a.disablelink, .showpageArea a.disablelink:hover{
background-color:none;
cursor: pointer;
color: #940f04;
font-weight: normal !important;
}

.showpageArea a.prevnext{
color: #000;
font-weight: bold;
}

</style>

<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=2;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding:4px;margin:2px;border: 0px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

Untuk meng-Eksekusinya silahkan klik Simpan.

NB :: Script Page Number ini Sekaligus revisi untuk script page number sebelumnya. Script ini lebih cepat dalam loading, serta pengaturan paddingnya telah saya rubah sehigga posisi atau jarak number dengan kotak tidak terlalu dekat. Anda juga bisa mengcustom warna gradasinya dari kode CSS3 di atas. Selamat mencoba.

0 Cara Mudah Membuat Menu Navigasi Dengan CSS Tab Designer

Buat blogger yang tampilan blognya masih perlu penambahan menu navigasi sebagai sarana untuk mempermudah pengunjung melihat konten atau isi di blog anda, Tapi anda masih bingung ingin membuat menu navigasi seperti apa yang pas dan menarik ?

Disini saya akan memberikan alternative bagi anda yang belum mendapatkan menu navigasi yang sesuai dengan selera anda anda tidak perlu repot mendesain menu navigasi dari awal sampai akhir , anda cukup menggunakan program dari CSS Tab designer ini semuanya bisa dilakukan dengan sangat mudah.

Khusus bagi anda yang ingin membuat navigasi vertikal maupun horizontal yang super cepat dengan hasil yang bagus dan profesional anda bisa menggunakan program CSS Tab Designer V 2.0.

Program CSS Tab Designer V 2.0 ini akan membantu anda membuat berbagai macam navigasi baik vertical maupun horizontal dengan cara yang cukup cepat dan mudah kaena program CSS Tab Designer V 2.0 telah menyediakan beragam macam menu navigasi vertikal dan horizontal dengan banyak pilihan warna dan bentuk menu navigasi yang bisa anda gunakan.

Anda bisa lihat Screen Shoot gambar di bawah ini. yang merupakan tampilan dari program CSS Tab Designer. Silahkan di klik Full Image untuk melihat ukuran yang lebih besar.

(+) Full Image.


Bagi anda yang ingin menggunakan program ini silahkan anda ambil program CSS Tab Designer V 2.0 di link di bawah ini

http://www.4shared.com/file/ydlcuxlW/css_tab.html

File Size 1.35 MB Silahkn anda instal programnya di PC anda dan mulai memilih menu navigasi yang cocok dan pas dengan template blog anda.

0 Membuat Navigasi Page Number 123 Langsung di Gadget

Kalau sebelumnya membahas cara membuat Navigasi page number 123 pada Edit HTML, sekarang saya coba membuat Page number 123 langsung pada Gadget Elemen Laman. cara ini akan lebih mudah di lakukan karena anda tidak perlu ubrak abrik kode HTML pada template blog anda, cukup dengan menambahkan gadget pada elemen halaman maka Page Number ini sudah bisa terpasang.

Langsung saja pada cara pembuatanya.

Pertama anda masuk pada Rancangan >> tambah Gadget >> HTML/JavaScript.
Masukan Kode di bawah ini :

<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style='text/javascript' src='http://blogergadgets.googlecode.com/files/blogger-page-nav-v2.js'></script>

Selamat mencoba.

NB : Anda bisa meletakan Gadget ini di mana saja karena Numbering Page ini akan otomatis terpasang di bawah posting Trimakasih.

0 Navigasi Page Number 123 Untuk Blogger

Mungkin untuk sebagian blogger sudah tahu ataupun sudah menggunakan menu Navigasi page number atau page 123 pada postingan. dan mungkin juga telah banyak yang memposting navigasi page number 123 seperti ini. Tapi tidak apa sebagai pelengkap tutorial blog di blog chugygogog.blogspot.com. Tutorial atau cara Membuat menu navigasi page number ini dikhususkan buat teman blogger yang belum tahu dan ingin memasang page number di blognya. Untuk yang sudah tahu silahkan baca postingan yang lain saja.

Langsung saja pada cara pembuatanya :

Langkah pertama masuk pada Rancangan >> Edit HTML >> Expand Widget Templates

Cari kode ]]></b:skin>
Setelah ketemu,letakkan kode di bawah ini tepat di atas ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#f3f3f3;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #f3f3f3;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #f3f3f3;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Lalu,cari lagi kode seperti ini </body>
Jika sudah ketemu, letakkan script dibawah ini tepat di atas kode </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>

Langkah terakhir Carilah kode berikut : 'data:label.url'
Jika sudah ketemu,hapus kode tersebut dan gantilah dengan kode di bawah ini:

'data:label.url + &quot;?&amp;max-results=5&quot;'

Jika sudah silahkan di simpan Selamat mencoba.

NB : Seperti biasa anda bisa mengcustom Navigasi Page Number ini dengan merubah kode CSS nya seperti border, background dll.

0 Membuat Navbar Menu Secara Online Dengan Graphic Navbar Generator

Navbar atau Navigasi Bar adalah sebuah Navigasi atau Menu yang di gunakan untuk menyimpan Link Link Menu pokok atau penting di Blog atau Website. Navigasi ini bisa berbentuk Vertical ataupun Horizontal. Navigasi Bar ini bisa dibuat dengan menggunakan image ataupun background warna saja dengan berbagai macam variasi.

Di Postingan sebelumnya saya pernah membahas bagaimana Cara Membuat Menu Horizontal Yang Simple dan Cantik.
silahkan di baca baca dulu untuk flash back memory anda. Kalau sudah silahkan lanjukan bacanya.

Untuk kali ini saya akan memberikan informasi cara membuat Navbar atau Menu Navigasi ini secara online, yaitu dengan menggunakan Pasilitas dari Graphic navbar Generator.

Graphic Navbar Generator ini menyediakan pasilitas pembuatan Navbar secara online, Sehingga Anda tidak perlu repot repot untuk membuat sebuah Navbar Menu. Baik Navbar verical maupun horizontal.

Anda tinggal memilih Navbar yang sudah disediakan dengan banyak pilihan yang menarik, lihat screen shoot gambar diatas yang di ambil dari situsnya langsung, kita juga bisa memodifikasi Tampilan Navbar ini sesuai selera anda.

Dan Untuk penggunaannya sangat mudah anda tinggal memilih navbar yang disediakan, Terus Mengisi alamat Link nya, Judul Link nya dan anda tinggal klik Create untuk mengambil kodenya Cukup mudah saya rasa.

Gimana Anda tertarik untuk membuat Navbar Menu secra Online, silahkan saja kunjungi situsnya langsung di http://www.free-webmaster-tools.com/toolbar-generator-gui.htm Silahkan klik saja linknya untuk nyampe di TKP.

Selamat mencoba.

0 Dropdown Menu Hemat Dan Padat

Mungkin postingan seperti ini sudah banyak yang memposting tapi tidak apalah untuk update postingan saja sekalian memberikan tips bagi yang belum tahu cara membuat menu Dropdown. Dropdown menu merupakan solusi bagi anda yang ingin menghemat tempat di blog anda karena dengan menggunakan Dropdown menu ini kita bisa menyembunyikan banyak link dalam satu menu dropdown. Lihat contoh menu Dropdown di bawah ini.

DropDown Menu Tutorial Blog Tutorial Flash Desain Grfis Multimedia Dan Lain lain

Gimana anda tertarik ingin membuatnya. Kalau tertarik Silahkan ikuti caranya di bawah ini.

silahkan anda masuk ke Blogger.
lalu pilih Tata Letak - Element Halaman.
Pilih Tambah Gadget lalu pilih HTML/ JavaScript.
Masukan code di bawah ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>DropDown Menu</option>
<option value="Link Anda"> Judul Link Anda </option>
<option value="Link Anda"> Judul Link Anda </option>
<option value="Link Anda"> Judul Link Anda </option>
<option value="Link Anda"> Judul Link Anda </option>
</select>

Ganti teks warna merah dengan Link yang ingin di pasang.
Dan teks Warna biru adalah judul untuk link Anda.
Teks warna hijau merupakan judul dari menu anda, anda bisa mengganti dengan teks yang anda inginkan.
Kalau sudah silahkan anda Simpan.

Gimana cukup mudah bukan. Selamat mencoba

0 Modifikasi Vertical Menu Dengan Ronded Corner

Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner, Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini.

Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini.

seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja :

1. Masuk ke Blog anda.
2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman.
3. Tambah Gadget - Lalu pilih HTML/JavaScript.
4. Masukan Kode HTML di bawah ini :

<style type="text/css">

/* vertikal vertikal merah di mulai
---------------------------------------- */

/*Credits: CSS Library */
/*URL: http://css-lybrary.blogspot.com */

#vertikal-merah{

border-bottom-width: 0;
}

#vertikal-merah ul{
margin: 0px;
padding:0px;
font: normal 100% 'georgia; /*pemilihan bentuk huruf */
}

#vertikal-merah a{
display: block;
padding: 4px;
padding-left: 10px;
border:1px solid #ccc;
-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
text-decoration: none; /*agar link tidak bergaris bawah */
color: black;
border-top:1px solid #f3f3f3;
border-bottom:1px solid #f3f3f3;
border-right:1px solid #f3f3f3;
background-color: #fff;
border-left: 10px solid #ccc;
}

#vertikal-merah a:hover {
background-color: #f2f2f2;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
border-right:10px solid #ccc;
color: #cc0000;
}
</style>


<!-- silahkan ganti dengan link milik anda -->

<div id="vertikal-merah">
<ul>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Bisnis%20Online">Bisnis Online</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Desain%20Grafis">Desain Grafis</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tutorial%20Flash%2008">Tutorial Flash 8</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tutorial%20Blog">Tutorial Blog</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Komputer%20Internet">Komputer Internet</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tips-Trik">Tips N Trik</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Free%20Artikle">Free Artikle</a>
<!-- untuk menambah link baru simpan di sini -->
</ul></div><p></p>

Ganti Link nya dengan link yang ingin anda gunakan.
Berikan judul untuk widget ini misalnya Menu Vertical atau apa saja terserah anda.
Jika sudah Simpan.

Tentunya anda sudah paham untuk merubah warna background ataupun warna teks jika kode di atas tidak sesuai dengan keinginan anda silahkan anda menggantinya....!!
Selamat mencoba.

0 Menu Link Vertical Dengan Hover Backgroun

Menu vertical ini biasanya di gunakan atau di tempatkan pada bagian sidebar. Mungkin untuk menu link vertical ini biasanya tidak menggunakan background hanya menggunakan teks tanpa backround paling untuk hover menggunakan perubahan warna saja pada teks tanpa menggunakan background.

Disini saya coba membuat Menu Link Vertikal dengan menggunakan Hover background. Maksudnya yaitu ketika mouse menyentuh link tersebut maka background akan muncul atau berganti warna. Link hover seperti ini juga biasanya di gunakan untuk link Horizontal yang biasa di letakan di bagian atas blog atau di bawah header.

Kelebihan dari kode HTML di bawah ini bisa di pasang langsung pada widget template tanpa membuka edit HTML. Jadi kita bisa memodifikasi setiap Widget link yang ada di sidebar menjadi berbeda beda.

Langsung saja Ikuti caranya seperti di bawah ini :

• Yang pertamaMasuk Ke Blogger
• Pilih Tata Letak
• Pilih Elemen Halaman dan Klik Tambah Gadget
• Pilih HTML/JavaScript
• Masukan Kode di bawah ini.

<style type="text/css">

#coolmenu{
border: 0px solid black;
width: 100%;
background-color: #fff;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: #f3f3f3;
color: black;
}

</style>

<div id="coolmenu">
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Bisnis%20Online">Bisnis Online</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Desain%20Grafis">Desain Grafis</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tutorial%20Flash%2008">Tutorial Flash 8</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tutorial%20Blog">Tutorial Blogg</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Komputer%20Internet">Komputer Internet</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tips-Trik">Tips N Trik</a>
<a href="http://ilmu-desain-grafis.blogspot.com/search/label/Free%20Artikle">Free Artikle</a>
</div>

Ganti Link-nya dengan Link yang blogger inginkan. Anda juga bisa merubah warna background-color dan background untuk Hover dengan mengganti kode warna yang di inginkan.

Jika sudah klik save dan lihat hasilnya. Selamat mencoba.

0 Membuat Menu Link Horizontal Langsung di Widget

postingan ini saya buat sebagai pilihan untuk posting sebelumnya yaitu membuat menu horizontal yang simple, berhubung ada teman yang koment Katanya kurang paham dengan postingan tersebut, jadi Saya membuat postingan mengenai cara membuat menu horizontal yang lebih mudah yang diletakan langsung pada widget, jadi kita tidak perlu membuka edit HTML. Mudah mudahan bisa dimengerti.

Cara ini Sangat mudah sekali karena ini cuma menambah Kode HTML yang ada di bawah ini ke dalam Gadget + HTML/Javascript.
Silahkan Ikuti caranya di bawah ini.

Pertama Buka blog Blogger
Kedua Pilih Tata Letak + Elemen Laman + Tambah Gadget + Pilih HTML/JavaScript
Lalu Masukan Kode Di bawah ini :

<style type="text/css">


ul.menu {
margin:0px;
padding:0px;
}
ul.menu li {
list-style:none;
float:left;
width:100px;
text-align:center;
font:11px/25px verdana,arial,sans-serif;
height:auto !important;
height:25px;
}
ul.menu li a {
display:block;
text-decoration:none;
background:#EFEFEF;
color:#000000;
}
ul.menu li a:hover {
background:#000000;
color:#FFFFFF;
}

</style>

<ul class="menu">
<li><a href="http://ilmu-desain-grafis.blogspot.com/"target="_blank">HOME</a></li>
<li><a href="http://ilmu-desain-grafis.blogspot.com/2009/02/daftar-isi.html"target="_blank">DAFTAR ISI</a></li>
<li><a href="http://ilmu-desain-grafis.blogspot.com/search/label/Desain%20Grafis"target="_blank">D GRAFIS</a></li>
<li><a href="http://ilmu-desain-grafis.blogspot.com/search/label/Tutorial%20Flash%2008"target="_blank">T FLASH</a></li>
</ul>

Ganti Teks yang berwarna hijau Dengan Link yang di inginkan.
jangan lupa klik Simpan, ok bozzz mudah-mudahan bisa di mengrti, Thanks.

0 Membuat Menu Horizontal Yang Simple Dan Cantik

Ada beberapa macam menu link horizontal yang biasa di pakai untuk sebuah blog ataupun website, dari yang menggunakan warna dasar sampai dengan menggunakan image, tapi toh fungsinya tetap sama yaitu menuju link yang diinginkan. Untuk membuat sebuah menu atau link yang horizontal tidaklah sulit. Disini saya coba untuk membuat menu link horizontal yang sederhana tatapi akan terlihat cantik.

Silahkan ikuti langkah - langkahnya berikut ini :

Masuk pada Tata Letak dan Edit HTML
Masukan kode di bawah ini diatas kode ]]></b:skin>
*********************************************************

/* horizontal solid menu di mulai
------------------------------------------- */

/*Credits: CSS Library for new blogger (beta) */

.menu-solid{
margin: 0;
padding: 0;
float: left;
font: bold 12px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: #000 ;
}
.menu-solid {
display: inline;
}
.menu-solid a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
}
.menu-solid a:visited{
color: #cc0000;
}

.menu-solid a:hover, .menu-solid .current{
color: #000;
background: #f3f3f3;
text-decoration:none;
}

Setelah itu Klik Simpan.

Masih pada Tata Letak Masuk pada Eleman Halaman dan tambah Widget dibawah Header, Pilih Java Script.
Lalu Masukan Kode Di bawah ini
*********************************************************

<!-- silahkan anda ganti alamat linknya dengan kepunyaan anda -->
<div class='menu-solid'>
<a href='http://chugygogog.blogspot.com'target="_blank">Home</a>
<a href='http://ilmu-desain-grafis.blogspot.com/2009/02/daftar-isi.html'target="_blank">Daftar Isi</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/desain%20grafis'target="_blank">Grafic Desain</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/komputer%20internet'target="_blank">I - Komp</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/tutorial%20flash%2008'target="_blank">Tutorial Flash</a>
<a href='http://ilmu-desain-grafis.blogspot.com/search/label/tutorial%20blog'target="_blank">Blogging</a>

</div> <!-- akhir menu solid -->

Terakhir Klik simpan.
Jangan Lupa ganti alamat Link-nya. Cukup mudah bukan Selamat mencoba.