Advertise

Tampilkan postingan dengan label Navigasi. Tampilkan semua postingan
Tampilkan postingan dengan label Navigasi. Tampilkan semua postingan

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.
navigasi horizontal blue and black plus search box
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.

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.

navigasi horizontal tab pointer
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>

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.

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.

circle navigasi css3
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.

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.

next page buttom css3 style

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.