Showing posts with label Drop-Down Menu. Show all posts
Showing posts with label Drop-Down Menu. Show all posts

Memasang 'Side Fixed Menu'.

Blogspot

1. Sign in akaun blogger anda.

2. Pilih Layout --> Edit HTML.

3. Back Up Template anda dahulu untuk mengelakkan sebarang masalah.

4. Klik pada Expand Widget Template seperti screenshot di bawah ini.

Malaysia Blogger Hack

5. Cari kod ini.

]]></b:skin>

6. Copy kod di bawah dan letakkan di atas kod tadi.

#menulateral{
position:fixed; text-align:left;
/*Si la ubicación del menú no es la adecuada modifica los valores siguiente: */
margin-top:100px; margin-left:-28px; }
* html #menulateral{ /*para IE*/
position:absolute; }
#menulateral a img{
opacity:1; -moz-opacity:1;
filter:alpha(Opacity=100); }
#menulateral a:hover img{
opacity:0.8; -moz-opacity:0.8;
filter:alpha(Opacity=80);
position:relative;top:0px;left:2px; }
* html #menulateral a img{
filter:alpha(Opacity=100); }
#menulateral img{
margin-bottom: -5px; }
* html .menulateral{
margin-bottom: -3px; }

7. Cari kod ini.

<div id='content-wrapper'>

8. Copy kod di bawah dan letakkan di bawah kod tadi.

<div id='menulateral'>
<span>
<a href='http://syamzone.blogspot.com/' style='border:0;' title='Home'><img alt='Home' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYH_JDDsAFNnUDT1TiUejEZp1OVBNs0T37f7B2u8oSgeqw5i4-qUlUs4pAjrkzsnYeLoCT_5_MxslV-xBaJiQnScaZoBzh3wdBwz4czfEATlwBPanN9o7LEpHGd513m0fScrGjmGio1RY/s1600/menu-lateral-inicio.png'/></a>
<br/><a href='http://syamzone.blogspot.com/search/label/?max-results=999' style='border:0;' title='Show All Posts'><img alt='Archivo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRztVWL8CO8POxdv4WgmJmnEa6SfzEzO34EaJ-KdO7ir4w6nOrSzKWCApAXwPo2NwSNiXGkZFB5PPiBruwQJVJzlw0Ib5TtMrMzbwR8PGXr3iXCv6c08PGd8hiD6JqQ0KjpQlMQHhvZ6k/s1600/menu-lateral-archivo.png'/></a>
<br/><a href='mailto:EMAILANDA@yahoo.com' style='border:0;' title='Subscribe By Email'><img alt='Subscribe By Email' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7VJpp2OCazkXFxSTHt4wMS96_nxwI9Z3-gVBFioz9IQUcLhU_dvidO3djKMfmyWjWpM8npyut0b8l6IwFGGwDvG-35dxUCAydTrdXB9CeKbXdyd3h-jULtLjPZYHSVUaTrlmya4n9cTQ/s1600/menu-lateral-contacto.png'/></a>
<br/><a href='http://syamzone.blogspot.com/feeds/posts/default' rel='alternate' style='border:0;' title='Subscribe a post Feed' type='application/rss+xml'><img alt='Suscribe a post Feed' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukdW1x_OuqpdDQUPHBxbd_YidbcjSSzU4PjuWt3IPvIJKi_65_cEaU8DhFpDDXp1Vj0K0gjeyvkw3endZ30zXax3-2r06xxCWXRWl6Xyi3ss_a5X51BZUzj4_H32nB1U3LQ5Sikh1aow/s1600/menu-lateral-feed.png'/></a>
<br/><a href='http://syamzone.blogspot.com/feeds/comments/default' style='border:0;' title='Subscribe a comment Feed'><img alt='Suscribete a comment Feed' class='menulateral' src='http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Menu%20Fixed/feed-icon-16x16b_BG_G.png'/></a> <br/><a href='#header' style='border:0;' title='Back to top'><img alt='Back to top&quot;' class='menulateral' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8eGpdD7nIeR5mmdfxtvo0FJEw3i-wyhTeqFpqDTHOknpPzTl3FoI0nquJTkRAUH7TRoGJLIbzITpbyGcmdvQe0cKYR28M3gr5aJFBbXL1IvIu5nNOBigv3y1AZpTqvfJ79EJVCqFJJW4/s1600/menu-lateral-arriba.png'/></a>
</span>
</div>

9. Gantikan text / kod berwarna biru.

10. Anda mungkin perlu mengubah kod berwarna merah margin-top:100px margin-left:-28px mengikut kesesuaian template.

11. Pilih Preview.

12.Sekiranya anda berpuas hati Save template.

Perhatian !!! Kod <div id='content-wrapper'> mungkin berbeza jadi cari kod yang seumpama dengannya.

Rujukan Jaloe

READ MORE...

Pull 'Drop Down Menu.

Alternatif membuat 'Pull Drop-Down Menu ' dengan mudah.

'Pull Drop Down menu' ini boleh di jadikan alternatif untuk menjimatkan ruang blog anda agar kelihatan lebih kemas.

Untuk membuatnya memang mudah.

Mula-mula 'klik di sini Drop-Down Menu Generator

Kemudian masukkan 'URL' blog anda di 'Use Image Button'

Langkah seterusnya contoh: Jika anda mahu membuat drop-down menu untuk label, masukkan nama label anda di 'Text Shown' dan 'URL' halaman label anda di 'Link URL'

Setelah selesai klik 'Generate'

Copy kod Html dibawah dan Paste di blogger blog anda 'Layout==>'Page Element'==>'Add a Gadget'==> 'Html/Javascript' dan 'Save'.

READ MORE...

Membuat "Menu Dropdown" Untuk Label.

Mungkin anda sudah bosan dengan 'Menu Label' yang biasa.Anda boleh menukar menu label anda dengan 'Menu Dropdown'.

Mula-mula aktifkan 'Label' anda. Pilih 'Layout' dan 'Add a Gadget'-->'Html/javascript--> pilih 'Labels' dan 'Save'.

Sekarang labels anda telah aktif.

Langkah seterusnya ialah pilih 'Layout'.


Perhatikan 'Expand Template Widget' dan aktifkan. Kemudian cari kod Html dibawah :


<b:include data='post' name='post'/>


Gantikan kod Html di atas dengan kod Html di bawah ini :



<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>

<data:post.title/></a><br/><br/>
<b:else/>

<b:include data='post' name='post'/>

</b:if>
<b:else/>

<b:include data='post' name='post'/>
</b:if>



Setelah selesai langkah-langkah di atas pilih 'Preview' untuk melihat hasilnya.

Jika anda berpuas hati 'Save Template'.
READ MORE...