Cara Membuat Halaman Navigasi

Sekarang saya akan mencoba berbagi dengan kawan cara membuat Halaman Navigasi, :z; untuk kawan Blogger yang konsen di Blogspot saya rasa pasti tak asing dengan yang namanya Navigasi, tapi tak ada salahnya untuk kawan yang belum mengetahui apa itu Navigasi, tak ada salahnya saya sampaikan Navigasi biasanya berada diatas Blog kita, tapi pada Blog saya ini saya taruh di bawah :x;

Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor pilih Template - Edit HTML - Lanjutkan
• Copas Script berikut diatas ]]></b:skin> 

#Bego-nav img {/* margin: 5px auto; */vertical-align: middle;}

#Bego-nav p.info {float: right;padding: 0 10px;margin: 0 auto 0;line-height: 1.6;height: 100%;vertical-align: bottom;}

#Bego-nav p {float: left;margin: 0 0 -5px 0; padding: 0 10px;line-height: 1.6;vertical-align: bottom;}

#Bego-nav a {color:#00F;text-decoration:none;}

#Bego-nav a:hover{color: #F00;}

#Bego-nav {align: center;position: fixed;border-top: 0px solid #DDD;border-bottom: 0px solid #030;background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfprAQeauje1h9LKyn_8kNg7nHKIYCr_en8G1sVFpVxALar8mY9oxbxt_7rc8TZ70Yc8u35Hl-UwSl1fYqnn_oeFuRwA-MUuQanEbYUp6kPFrZpGuQdEYWmSx9wjqn6IZ9-h-MNV6jPCY2/s1600/bg_nav-bego.png) repeat-x center center;width: 100%;left: 0px;text-align: left;color: #ffffff;font-family: verdana;font-size: 14px;z-index:10000;bottom:0px;}

Teks yang saya beri warna merah menunjukkan posisi Navigasi, kalau kawan ingin merubah posisim silahkan menggantinya, sedangkan 0px adalah menandakan nempel / mepet kepinggir, 

• Silahkan simpan sementara Template kawan :q;
• Selanjutnya Copas Script berikut diatas </body>

<div id='Bego-nav'>
Simpan disini File kawan
</div>

• Sebagai contoh yang sudah jadi saya gabung dengan Daftar Isi Plus Komentar Berjalan selengkapnya sebagai berikut :

<div id='Bego-nav'>

<table border='0' width='1000px'><tr><td align='center'>

<div style='width:250px; border: 0px solid #ccc; background:transparent;padding:10px 10px 0 10px;margin:0; text-shadow:2px 2px 2px #F00; font-size: 14px; COLOR: white;'><b>ARSIP BLOGBEGO CREATION :</b></div>

</td><td align='center'>

<div style='border: 2px solid #ccc; background: #FFF; padding:0px 10px; font-size: 14px; color:blue;margin:12px 10px 3px;'>

<b><!-- Alphabetical/chronological Post Title Listing with comment count Start -->

&lt;script type=&quot;text/javascript&quot;&gt;

function getYpipeTL(feed) {

document.write(&#39;&lt;marquee onmouseover=&quot;this.stop()&quot; onmouseout=&quot;this.start()&quot; scrollamount=&quot;4&quot;&gt;&#39;);

var i;

for (i = 1; i &lt; feed.count ; i++)

{

var href = &quot;&#39;&quot; + feed.value.items[i].link + &quot;&#39;&quot;;

var pTitle = feed.value.items[i].title + &quot;&lt;/a&gt; &amp;#187; &quot;;

var pComment = &quot; \(&quot; + feed.value.items[i].commentcount + &quot; komentar\) &amp;#171;&amp;nbsp; &quot;;

var pList = &quot;&lt;/a&gt;&quot; + &quot;&lt;a href=&quot;+ href + &#39;&quot;target=&quot;_blank&quot;&gt;&#39; + pTitle;

document.write(pList);

document.write(pComment); //to remove comment count delete this line

document.write(&#39;&lt;/a&gt;&lt;/li&gt;&#39;);

}

document.write(&#39;&lt;/marquee&gt;&#39;);

}

&lt;/script&gt;

&lt;script src=&quot;http://pipes.yahoo.com/pipes/pipe.run?

YourBlogUrl=http://blogbego-creation.blogspot.com

&amp;Order=alphabet

&amp;_id=401e43055731c1a29f1e1d3eb5e8e13f

&amp;_callback=getYpipeTL

&amp;_render=json&quot;

type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

&lt;span style=&quot;font-size: 8px; float:right;&quot;&gt; &lt;/span&gt;

<!-- Alphabetical Post Title Listing End --></b></div>

</td></tr></table>

</div>

• Kalau kawan ingin mencobanya, saya persilahkan untuk mengganti Link Blog saya, dan jangan lupa simpan Template kawan :y;

Read more ...