Kamis, 17 Juni 2010

Membuat Highlighting Current Page atau Current Menu di Blogger


Highlighting Current Page atau Current Menu biasanya diartikan sebagai
penanda halaman aktif
untuk saat ini ketika user berada dalam halaman tertentu, misalkan dalam halaman Home,
About, Help us dan Contact. Pada Blogger sendiripun sebenarnya baru-baru saja
sudah menanamkan fitur ini jika kita sedang mengaktifkan fitur untuk halaman (Page).
Namun entah kenapa kebanyakan blogger termasuk saya sendiri tidak begitu
tertarik menggunakan. Mungkin sudah telat kali ya :)


 


Yang membuat Saya tertarik untuk membahas fungsi Current Page ini karena
hampir semua template yang saya sediakan di
zoomtemplate.com sudah tertanam fitur
untuk menampilkan menu navigasi, sayangnya ya itu tadi, menu yang seharusnya
bagus malah seperti hanya sebagai hiasan pengganti link saja, dan kebanyakan hanya
terlihat cantik ketika user mengarahkan mouse (mouse hover) namun tidak memiliki
fitur penanda bahwa menu tersebut seharusnya terlihat ikut aktif dalam halaman
yang juga aktif.


 


Sebagai contoh silahkan rekan melihat demonya di
zoomtemplate.com


 




 



 



Disitu bisa rekan lihat saat kita berada dalam area halaman HOME, Link
menu HOME juga terlihat ikut aktif. Begitupula saat rekan berapa dalam
halaman FAQ'S dan beberapa Menu lainnya yang terlihat juga ikut aktif. 


 


Biar lebih mudah mempelajarinya silahkan Download contoh Demo Menu yang sudah
saya rancang disini.

 



 


OK langsung ke tutorial saja ya. Oh iya contoh menu dibawah ini tidak sama
dengan contoh menu di zoomtemplate.com, tapi rekan dapat mengedit menu tersebut sesuai
kebutuhan. Terus terang saya kesulitan menjelaskannya, karena hampir setiap kode
CSS
Menu memiliki rancangan yang unik dan berbeda.Tapi dengan contoh kali ini saya yakin
rekan paling tidak mempunyai sedikit gambaran bagaimana cara Aktive Curren Page
/ Current Menu ini bekerja.


 


1. Silahkan langsung tuju ke halaman Edit HTML


 


2. Letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

 


#nav ul {

background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TBoL1r2WrmI/AAAAAAAAGDo/RPFGeeHuA6M/s400/backgr.jpg) repeat-x left top;

margin:0;

border-bottom:3px solid #98CB00;

border-top:1px solid #00CCFF;

list-style-type:none;

height:31px;

}

#nav li {

float:left;

}

#nav li a {

display:block;

padding:5px 15px 4px;

font:bold 16px "Trebuchet MS";

font-stretch:condensed;

text-decoration:none;

color:#00CCFF;

letter-spacing: -0.1em;

}

#nav li a:hover {

color:#98CB00;

}

#nav li.current {

background:url(http://2.bp.blogspot.com/_C6KkooKXCEw/TBoL199-A9I/AAAAAAAAGDw/v2878UtlPsA/s400/current.gi) no-repeat center bottom;

color:#98CB00;

}


 


2. Letakan kode Javascript dibawah ini tepat diatas kode
</head>


 


<script type='text/javascript'>

//<![CDATA[


function extractPageName(hrefString)

{

var arr = hrefString.split('/');

return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() +
arr[arr.length-1].toLowerCase();

}

function setActiveMenu(arr, crtPage)

{

for (var i=0; i<arr.length; i++)

{

if(extractPageName(arr[i].href) == crtPage)

{

if (arr[i].parentNode.tagName != "DIV")

{

arr[i].className = "current";

arr[i].parentNode.className = "current";

}

}

}

}

function setPage()

{

hrefString = document.location.href ? document.location.href : document.location;



if (document.getElementById("nav")!=null)

setActiveMenu(document.getElementById("nav").getElementsByTagName("a"),
extractPageName(hrefString));

}


//]]>

</script>


 


3. Kemudian silahkan cari kode dibawah ini dalam barisan kode pada halaman
Edit HTML


 


<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>


 


Lalu letakan kode dibawah ini tepat diatas kode diatas.


 


<div id='nav'>

<ul>

<li><a href='/'>HOME</a></li>

<li><a href='
#'>FAQ'S</a></li>

<li><a href='
#'>HELP US</a></li>

<li><a href='
#'>CONTACT</a></li>

</ul>

<script language='javascript'>setPage()</script>

</div>


 


Agar Efek Current Page / Menu bisa bekerja, rekan harus mengganti tanda
# diatas dengan alamat url post yang aktif.


 


Untuk membuat dan mengedit tampilan menu jauh lebih cantik dari contoh menu diatas
rekan sebaiknya mau tidak mau harus banyak mempelajari pengkodean HTML, CSS dan
Javascript.


 


Selamat mencoba :)

Senin, 07 Juni 2010

Blogger Template: Baby Shop


Baby Shop Blogger Template merupakan desain template yang khusus saya
konversi buat rekan yang ingin membangun toko online sederhana terutama yang
ingin berjualan pernak pernik peralatan Bayi. Dengan style tampilan yang sangat
elegant dan terlihat profesional, template ini tentu saja dirancang khusus
bergaya Gallery plus Magazine, tidak lupa juga sudah saya tanam fitur SEO
didalamnya biar jualannya lancar hehehehe. Tapi sayang, karena terbatasnya
fasilitas di blogger ruang gerak saya untuk merancang memiliki fitur Shoping
Cart jadi batal, jadi pemesanan per item hanya bisa dilakukan secara manual. yah
anggap saja transkasi jual beli  dan pembayaran nanti dilakukan secara
manual saja via rekening bank atau via Paypal juga gak masalah. Ok selamat
berjualan :)




Demo:
http://babyshop-zoomtemplate.blogspot.com


Download:

http://www.zoomtemplate.com/2010/06/baby-shop.html