Diatas permintaan seseorang maka soleh pon mencari la tips buat dropdown menu ni.. kelebihannya dapat menjimatkan space di blog kita.. caranya cukup mudah..
Login ke blogger, terus masuk ke menu "Page Element" kemudian pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut :
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>Blog Category</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>
Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 anda.
Text yang berwarna biru adalah tulisan yang dipaparkankan. Gantikan mengikut kesesuaian anda.
Contohnya seperti ini :
<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">
<option value="0" selected>Blog Category</option>
<option value="http://myp4u.blogspot.com/search/label/About%20Me"> About Me </option>
<option value="http://myp4u.blogspot.com/search/label/Affiliate%20Program"> Affiliate Programe </option>
</select>
hasilnya akan seperti ini :
untuk menambahkan menu lagi, tambahkan kode seperti ini :
<option value="Links 2">Text 2</option>
sebelum kode </select>
ha, mcm ni jer..mudah kan? semoga berjaya..
Showing posts with label Menu Blogspot. Show all posts
Showing posts with label Menu Blogspot. Show all posts
Membuat Menu Vertikal
Sebelum ini aku pernah membuat posting tentang membuat menu horizontal, sekarang mari kita mencuba membuat menu vertikal. Menu vertikal ini sesuai kalau dipasang di sidebar karana bentuknya berjajar kebawah. Contohnya seperti gambar disebelah ini. Begini cara membuatnya :1. Login ke blogger pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode </head>
<script src='http://blog.superinhost.com/vertical/verticalmenu.js' type='text/javascript'/>
3. Setelah itu masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . senang cerite ditaruk di dalam Barisan kode CSS la.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika anda ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;
dan
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');
Pilihan Warna menu vertikal :
 | blue1.gif blue2.gif |
 | green1.gif green2.gif |
 | red1.gif red2.gif |
 | pink1.gif pink2.gif |
 | black1.gif black2.gif |
4. Kemudian di save.
5. Kemudian pergi ke menu "Page Elements"
6. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://myp4u.blogspot.com">Trik Blog</a></li>
<li><a href="http://myp4u.blogspot.com" >Free Template</a></li>
</li>
</ul>
Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang dipaparkan. Kalau nak menambahkan menu tingal buat lagi kode seperti yg berkelip2 dibawahnya.
Dah mcm 2 aja. senang kan????
Free Support Solehpolysas blog with add Solehpolysas Blog link at Your Blog/Web. TQ.
Create Tab View
Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below) div.TabView div.Tabs
Here is Tutorial how to create a tab view:
1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
4. You can change the code according to the red text explanation. To get html color code see HERE <script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/> <form action="tabview.html" method="get">
5. The next step is put the code below before </head>
6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.
Good luck every body.
Horizontal Tabs Menu
What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:
To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.
The first thing you have to di is create an image like this:
If you can't to create it, you can use my below images:blackleft.gif blackright.gif greenleft.gif greenright.gif redleft.gif redright.gif unguleft.gif unguright.gif yellowleft.gif yellowright.gif blueleft.gif blueright.gif whiteleft.gif whiteright.gif
Ok, let's begin
1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]></b:skin>, if you found it then put the code below above it
/*credits : http://myp4u.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:
background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;
background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;
5. Then copy the code below
<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://myp4u.blogspot.com"><span>Home</span></a></li>
<li><a href="http://myp4u.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://myp4u.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://myp4u.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http://myp4u.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
change http://myp4u.blogspot.com with your own link, and change the bold text with your own text.
6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.
- methode A:
Find this code :<div id="content-wrapper">. if you found it, paste the above code (code number five) above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do it more often until it's suitable for your template.
If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply methode A you can try methode B
- methode B:
Find the below code :<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
change the green text so that to become like this:<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.
Enjoy This Trick...
Subscribe to:
Posts (Atom)