adsense link 728px X 15px

Friday, July 23, 2010, 

membuat current page navigasiCurrent page merupakan tampilan pada navigasi yang berfungsi untuk menandai page yang sedang aktif pada navigasi. Untuk lebih jelasnya bisa anda lihat pada image di samping. Berhubung current page ini sudah saya aplikasikan pada template saya kemarin, anda bisa melihat livenya di sini. Selain berfungsi untuk menandai page aktif, current page juga membuat tampilan blog menjadi lebih elegant dengan sedikit pengembangan.

Mengenai bagaimana cara membuatnya silakan ikuti langkah di bawah ini.

  1. Login ke blogger.com
  2. Klik Rancangan
  3. Klik Edit HTML, tidak perlu memberi centang pada Expand Widget Template
  4. Cari kode berikut

    </head>

  5. Copy kode di bawah ini dan letakkan tepat sebelum (di atas) kode tadi

    <style type='text/css'>
    #menu-wrapper {
    margin: 0;
    padding: 5px 10px 5px 0;
    background: #b7b7ff;
    font-size: .9em;
    line-height: 22px;
    border-top: 1px solid #a8a8ff;
    border-bottom: 1px solid #a8a8ff;
    }
    .menu {
    margin: 0;
    float: left;
    height: 26px;
    }
    .menu ul {
    margin: 0;
    padding: 6px 0 0 10px;
    font-weight: bold;
    list-style-type: none;
    text-align: left;
    }
    .menu li {
    display: inline;
    margin: 0;
    }
    .menu li a {
    text-decoration: none;
    margin: 0;
    padding: 4px 10px;
    color: #32527a;
    }
    .menu li a:hover {
    background: #c6c6ff;
    color: #64527a;
    }
    .current-cat{
    padding: 5px 10px;
    color: #64527a;
    background:#c6c6ff;
    border: 1px solid #a8a8ff;
    -moz-border-radius: 5px; -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    .actived a {
    color: #64527a !important;
    }
    </style>

    <script type='text/javascript'>
    function currentpage (url,current,name) {
    var name = name ;
    var url = url;
    var current = current;
    if (current == url) {
    document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
    }
    else {
    document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
    }
    }
    </script>
    p
  6. Cari lagi kode seperti ini

    <div id='header-wrapper'>
  7. Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi (langkah ini menentukan letak navigasi anda, apabila diletakkan sebelum kode tadi maka menu anda akan berada di atas header. Dan sebaliknya apabila kode diletakkan setelah end tag kode tadi maka navigasi akan berada di bawah header.)

    <div id='menu-wrapper'>
    <b:section class='menu' id='menubar' showaddelement='no'>
    <b:widget id='LinkList1' locked='false' title='' type='LinkList'>
    <b:includable id='main'>
    <ul>
    <b:loop values='data:links' var='link'>
    <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
    </b:loop>
    </ul>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
  8. Klik Simpan

     Untuk menambahkan link pada navigasi, silakan masuk Rancangan » Elemen Halaman » pilih Daftar Link. Tambahan Url yang ingin anda pasang pada navigasi. Setelah selesai jangan lupa klik Simpan. Sekarang cek ke blog anda, ^^, semoga bermanfaat dan happy blogging....







43 Comments:

Rock said...  on  July 23, 2010 at 3:39 AM

Wahhh... kayaknya keren juga nich...

Etc News said...  on  July 23, 2010 at 3:40 AM

Kodenya banyak banget ya....

secangkir teh dan sekerat roti said...  on  July 23, 2010 at 5:10 AM

dicoba dah :)

tapi buat yang baru dulu..

Laksamana Embun said...  on  July 23, 2010 at 6:37 AM

Dtang buat menjawab pertanyaan mas masdazine..

Pertanyaan : file rar ama zip bagusan mana ya??

Jawab : “Sebenarnya kedua aplikasi ini memiliki konsep yang sama sebagai archive dan compress tapi dari kedua aplikasi ini WinRAR sdikit lebih unggul dari WinZIP karena dalam segi Compress File, Winrar sangat bagus dan menyakinkan karena bisa mengcompress file sampai 1/4 dari ukuran sebenarnya (Ilustrasinya seperti yang Saya buat kemren dengan Mengcompress file 1,20GB, dgn winRAR bisa menjadi 800MB)dan juga winRAR memiliki security dalam archivenya jadi WinRAR bisa dikunci tanpa perlu aplikasi apapun”. Mungkin ini yang bisa saya jelaskan untuk saat ini.. Mksih atas responya Mas,.

Amdhas said...  on  July 23, 2010 at 7:05 AM

mantap sob terus buat aku dukung sepenuhnya..
hovernya ga di beri rounded ya sob..kalau di kasih lebih bagus sepertinya..
aku belum ke w3c tapi tag awal java sepertinya harus merapat untuk xhtml untuk html5 tidak menerima " tapi harus lewat amp;
(sekedar opini)

om rame said...  on  July 23, 2010 at 8:16 AM

kudu di coba nih biar bisa monitoring page yang Lagi dikunjungi.
terima kasih atas sharenya, coba-coba duLu di tempLate untuk mengetes. semoga berhasiL.

ariefborneo said...  on  July 23, 2010 at 8:44 AM

met malam sob...thnxssss infonya...

munir said...  on  July 23, 2010 at 9:11 PM

senang bisa jumpa blog tutorial yang bagus ini

elok langita said...  on  July 23, 2010 at 10:58 PM

mkashy buat informasinyaaaaaa... :D

elok ntar nyobaaa aah.. mkashy udah nge-share ilmu iah.. :D

om rame said...  on  July 24, 2010 at 8:44 AM

terima kasih atas sharenya.
seLamat berakhir pekan om, seLamat istirahat dan saLam sehat seLaLu.

Untuk Siefa said...  on  July 24, 2010 at 9:25 AM

keren sob, akan saya uji coba dulu yah

encosgoblog said...  on  July 25, 2010 at 6:25 PM

Jalan jalan pagi sob ?

Ferdinand said...  on  July 25, 2010 at 8:40 PM

kayanya keren juga Brow... OK deh ane save dulu ntar klo sempet ikutan praktek hhe..

slam knal Sob.. ane Follow sekalian(DJ Site).... Follow balik ya Sob..thnx......happy blogging.....

Masda said...  on  July 25, 2010 at 8:56 PM

Sip mas ferdinand, segera saya meluncur ke home anda, ;)

mansuka life said...  on  July 26, 2010 at 5:13 AM

mampir mass... wah masih setia bikin post tutorial ya.... guuud jobb

Koko Bota said...  on  July 26, 2010 at 6:48 AM

nice info kawan.......

lama tak berkunjung ke sini makin hebat aja hehhehe...

Koko Bota said...  on  July 26, 2010 at 6:49 AM

ada post baru tuh di blog aku kasih coment ya....:)

om rame said...  on  July 26, 2010 at 10:21 AM

kunjungan seperti biasa om, mohon maaf Lagi enggak bisa Lama-Lama nih. harap makLum.
seLamat beristirahat aja yah om.

ToMy said...  on  July 27, 2010 at 12:13 AM

dcoba dcoba....8-}

imtikhan said...  on  July 27, 2010 at 8:44 PM

met siang sob
thanks infonya sangat bermanfaat

Yohan Wibisono said...  on  July 27, 2010 at 11:44 PM

"Nice artikel, inspiring ditunggu artikel - artikel selanjutnya, sukses selalu, Tuhan memberkati anda, Trim's :)

attayaya said...  on  July 29, 2010 at 2:18 AM

ya, banyak kulihat blog udah memakai cara ini
untuk mempermudah navigasi

Umy Diary said...  on  July 31, 2010 at 6:32 AM

banyak tutornya ya

ariefborneo said...  on  August 1, 2010 at 6:21 PM

Kunjungan pagi sob...info yg bermanfaat

Gaphe said...  on  August 2, 2010 at 5:46 AM

hihihi..*garuk-garuk kepala*... butuh waktu lama bagi saya buat memahami :)

apadibalikkotakku said...  on  August 5, 2010 at 7:23 AM

Mksh bwt infonya ych kunjungi jg ych apadibalikkotakku.blogspot.com

imtikhan said...  on  August 5, 2010 at 8:37 PM

halo sobat met beraktifitas semoga sukses
terima kasih

desiisna said...  on  August 5, 2010 at 8:39 PM

ikutan gabung gak papa ya
makasih

Fajri Alhadi said...  on  August 17, 2010 at 4:54 PM

mas...
kok kotak pencariannya ga ada ya ?

Yudi said...  on  September 27, 2010 at 10:09 AM

wah, kalo warna backgroundnya putih gimana sob?
Apakah bisa berfungsi juga?
Thanks a lot :D

Belajar wordpress terlengkap said...  on  October 26, 2010 at 2:40 AM

Menarik...coba dulu gan!

riya said...  on  December 7, 2010 at 6:09 PM

maksih infonya mas

vicode said...  on  January 1, 2011 at 3:16 PM

klo buat kotak dibawah gmn caraX gan,,,

Klik Menarik said...  on  September 20, 2011 at 1:03 AM

Menambah Wawasan Untuk Berkreasi !!

ana said...  on  December 16, 2011 at 7:28 PM

nice blog

mampir ke web q gan

http://mixzoneshop.com/

mksh

oprekzone said...  on  March 4, 2012 at 4:22 PM

Bagus sekali artikelnya bro... trim's...

Bisnis Online said...  on  May 31, 2016 at 1:56 AM

ijin share yaa

cara membangun backlink dengan aman said...  on  November 3, 2017 at 5:36 AM

sangat berguna sekali gan

cara mencari backlink berkualitas secara gratis said...  on  November 3, 2017 at 5:40 AM

cara ini sangat berguna hingga saat ini gan saya sangat menyukai nya

Siska said...  on  July 30, 2018 at 6:35 AM

sabung ayam peru

Unknown said...  on  November 22, 2018 at 5:52 PM

daftar situs judi sabung ayam online

EZSLOT99 said...  on  January 29, 2022 at 2:30 PM

Hi thanks for ur blog, its great please visit back my site at https://ez99slot.org/ and https://pencetterus.online/

RatuBola303 said...  on  March 15, 2022 at 10:14 PM

Yuk Gabung di EZSLOT99: Situs Resmi Slot Gacor Online
Bonus yang diberikan EZSLOT99
* Bonue Welcome Slot 100%
* Bonus Rollingan 1% setiap senin di bagikannya
* Bonus Jackpot yang dapat anda dapatkan dengan mudah
* Minimal Depo 25.000 , WD 50.000
Info lebih lanjut kunjungi:
Website: EZSLOT99
Whatsapp : +6281385291633

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

 

It's Me

My Photo
Masda
Seorang blogger "KOTA GADIS" yang selalu penasaran dengan sesuatu hal yang baru. Belajar, belajar, dan terus belajar serta berusaha untuk menerapkannya. Karena menurut saya "Ilmu itu untuk diterapkan bukan untuk dipelajari".

Facebook Twitter
View my complete profile

Exchange Link

MasdaZine

Followers