> Update >>
Showing posts with label Navigasi. Show all posts
Showing posts with label Navigasi. Show all posts

Membuat navigasi breadcrumb

----->Widget ini telah di pertingkatkan dari yang lama,mengikut peredaran masa.<-----
Menu breadcrumb ini hanya akan muncul diatas artikel ketika kita membuka halaman suatu posting dan bukan halaman utama blogspot korang.

Cara membuat breadcrumb.

Pada Design, kemudian pilih Edit HTML,klik pada Expand Widget Templates.
dan cari kod berikut.

<b:if cond='data:post.title'>

Setelah jumpa ,letakkan kod dibawah ini dibawah kod tadi.

<b:if cond='data:blog.pageType == "item"'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>


Kemudian klik save Templates, dan siap sepenuhnya.
READ MORE - Membuat navigasi breadcrumb

Cara Membuat Slide Navigation dengan JQuery


Banyak cara membuat Navigation/Tab,kali ini kita akan membuat Cara Membuat  Slide Navigation dengan JQuery pula.

Cara-cara Membuat  Slide Navigation dengan JQuery.

Macam biasa mestilah membuka blog dengan ruang edit html.
Cari code berikut ]></b:skin>
Salin code css dibawah ini dan letak diatas ]></b:skin> tadi.


.headerfixed {
width:600px;
height:56px;
position:absolute;
top:50%;
left:10px;
background:#fff url(title.png) no-repeat top left
}

ul#navixed {
position:fixed;
top:0;
right:10px;
list-style:none;
z-index:999999;
width:721px;
margin:0;
padding:0
}

ul#navixed li {
width:103px;
display:inline;
float:left
}

ul#navixed li a {
display:block;
float:left;
margin-top:-2px;
width:100px;
height:25px;
background-color:#000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0 0 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)
}

ul#navixed li a:hover {
background-color:#000
}

ul#navixed li a span {
letter-spacing:2px;
font-size:11px;
color:#FFF
}

ul#navixed .home a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOZ4zfv6VOI0be2Dp5QPQo1wArQLUtws02Z1-fdPHb5yO-k2EtcKqh-LO9B3n1TNQ4hp712G160ZKxsgmgLQJlbb42tndU5UZA1HTwQeTmdoyPCfai_APVCOxsgC0_hWdI9kzsbfRqlKo/s1600/home.png)
}

ul#navixed .about a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaO83xRxdkmCOWbluyqyQafW-IEp5c1hhDsMMate5qbVzdgb5cjwMcZplkoe80LnVIAXch4QUaffdj52l_E-Ji5K2m374T0ZTsFIaswdzx82VgHu4x281XhVHQmYiZBNlkX6qXMbI3v7s/s1600/id_card.png)
}

ul#navixed .search a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu_l4HzgTJYjdur0X837sn_B5LEA_O7dv2BDOPdqFwQCQx3qPkYl2QiB4VMrG0CgVb-xfYKzgxdhBBZ10C_VsA9UGFHEZh-Dq9qIqtA42hmR6DPp-qY7AwnfKFdsF0NlUyecvEDr5jnHs/s1600/search.png)
}

ul#navixed .podcasts a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Tlk_ODD8Cm5qnphfBDTEIIEYry1nYawvYYCgRTEDsKd_jQbPt5f9GrbAl_HwZEl3pHamX6H4LbW2xvfp6ko7tCO2N7g9maqBVx0rGrh1Leyo7U9XtNR3dnHA9tKrS49lkdaxghRw2N0/s1600/ipod.png)
}

ul#navixed .rssfeed a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEingxxYyYUrPUjVIOjTR6wFGOEfsAuxIxYWg3y5SyL3WYW12TA8K5VRI4sAEpJrXsnMHMS5dWFnM5pr0y8ZLOruCbuMIRtLTncJyBhANpuHluCGIhlXRGe8RSJnfajaFUYZb4fPF3sgwao/s1600/rss.png)
}

ul#navixed .photos a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgogQciYR7vFkxKdD9yYQeMwYlRWQ1JA0vX_EVF3MuSbXp24Ak0Evpq4_f3ta6ctYXunSG9osMtsa2jhEJgCZpBZBK3Pn5yIMjj3PFFV-qYfOiGOeil7K_UDer5hCEfWn0BYqTkdX0MbgU/s1600/camera.png)
}

ul#navixed .contact a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWguVNvXV9CfDxTb7IDf9zi3hqMWKtjyCaJaYqderCL6JArFGfuVYbOslT4nrr2G5jWzFvO3tGavglE2tqnwESQ-_kKNgW4dDxSzx7SwrKK2m1FTn3W2qZBnahDF727xHiMWdZi3V9C-U/s1600/mail.png)
}


Cari code </head> pula
Salin code dibawah ini dan letak diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='https://sites.google.com/site/listblogtutorial/sitemap/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $(&#39;#navixed a&#39;).each(function(){ $(this).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },d+=150); }); $(&#39;#navixed &gt; li&#39;).hover( function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-2px&#39; },200); }, function () { $(&#39;a&#39;,$(this)).stop().animate({ &#39;marginTop&#39;:&#39;-80px&#39; },200); } ); }); </script>


Cari lagi code <body>
Salin dan letak code dibawah ini diatas code <body>

<ul id='navixed'><li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li>
<li class='search'><a href='#'><span>Search</span></a></li>
<li class='photos'><a href='#'><span>Photos</span></a></li>
<li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li>
</ul>

Klik simpan template.
Buka kembali edit HTML untuk anda edit code no3 mengikut kesesuaian blog anda.

Selamat mencuba
READ MORE - Cara Membuat Slide Navigation dengan JQuery

Sorok navbar blog


Untuk menghilangkan Navbar atau sorok untuk penampilan lebih menarik.

Caranya hanya menambah code Css sahaja.

Cari code Css berikut:


body{font:normal

Salin code Css di bawah ini dan letak di atas code Css tadi.


#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}


Simpan templat.

Selesai.
READ MORE - Sorok navbar blog

Membuat Page Number atau Navigasi Halaman version 2

Membuat Page Number atau Navigasi Halaman version2 ini dengan mudah.
Anda copy code di bawah ini dan paste di sidebar.



<style type="text/CSS">
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #999999;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #999999;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #999999;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #999999;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #999999;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #999999;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #999999;
background-color: #FFFFFF;
}
</style>
<script type="text/JavaScript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".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 = 2;
var displayPageNum = 5;
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 += '<span class="showpagePoint">'+thisNum+'</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 = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
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>

Kemudian anda seret dan letak di bawah posting.
Klik simpan dan selesai
READ MORE - Membuat Page Number atau Navigasi Halaman version 2

Membuat Page Number atau Navigasi Halaman

Page Number atau Navigasi Halaman dengan menggunakan nomor atau angka adalah sebagai alat navigasi yang berfungsi mengantikan LinkWithin



selanjutnya cari kode berikut:]]></b:skin>;
masukkan kode dibawah ini diatasnya:

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;

}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}


Lalu cari kode:</body>dan masukkan kode dibawah ini diatasnya juga.

<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='https://sites.google.com/site/listblogtutorial/widget/blogger-page.js' type='text/javascript'/>
</b:if>

Selanjutnya carilah kode ini : 'data:label.url'
Hapus kode ini : 'data:label.url' dan gantilah dengan kode di bawah ini:

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

Setelah itu Klik Simpan Selesa.
READ MORE - Membuat Page Number atau Navigasi Halaman
 
list blog tutorial
Ambil banner

Template

More on this category »
Submit ExpressSEO Tools My Ping in TotalPing.com

tutorial

© All Rights Reserved | Best View With Google Chrome