Just another free Blogger theme

Showing posts with label menu. Show all posts
Showing posts with label menu. Show all posts

Monday, July 29, 2013

Contoh Menu Scrolling Daftar Link
Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh dibawah ini!
    Cara membuat related post
    Ngeblog offline tanpa terhubung keinternet
    Mengganti Read More Dengan Image
    Cara membuat Recent Post

Cara buat menu scroll seperti diatas:
Copi code berikut:
<div style="padding-right: 10px; padding-left: 10px; padding-bottom: 10px; overflow: auto; width: 255px; padding-top: 10px; height: 141px" 1px="1px" solid="solid">   <ul>
    <p><a href="#">Cara membuat related post</a> </p>
    <p><a href="#">ngeblog offline tanpa terhubung keinternet</a> </p>
    <p><a href="#">Mengganti Read More Dengan Image</a> </p>
    <p><a href="#">Cara membuat Recent Post</a> </p>

  </ul>
</div>
Setelah itu paste pada tempat yang sobat inginkan di blog sobat , apakah pada postingan, sidebar dll. Untuk alamat URLnya sobat ganti dan sesuaikan sendiri!
Untuk memasangnya pada postingan sobat harus berada dalam tab edit HTML, sedangkan untuk memasangnya pada sidebar saran saya untuk sobat agar tak bingung menyesuaikan dengan lebar sidebar ganti lebarnya menjadi 100% kodenya widht: 100% cara memasangnya (untuk yang belum tahu ni):
  • Login ke blogger
  • Pada bagian dasbor pilih menu layout/ tata letak
  • Klik elemen halaman
  • Tambah gadget pada sidebar yang anda ingin tampilkan menu scroolnya!
  • Pilih tambah HTML/JavaScript
  • Beri titel, simpan codenya dalam konten
  • Save, lihat hasilnya diblog sobat !
Semoga bermanfaat!


 

Cara membuat Tab ViewBarusan posting cara memasang widget recent post atau postingan terbaru, komentar pertama yang diterima dari sahabat blogger pada postingan itu disertai lagi dengan pertanyaan cara membuat tabel, walau blm begitu ngerti jelas pertanyaannya mengarah ketabel yang mana? Mungkin yang ditanya, bagaimana cara membuat menu tab view atau justru tab view slide?
Baiklah anaa coba posting satu persatu, yang pertama bagaimana cara membuat menu tab view seperti screen shoot disamping:


  • Seperti biasa dalam keadaan loggin, klik Template=> edit HTML
  • masukkan kode berikut pada bagian header, antara <head> dan </head>, kalau bingung letakkan saja dibawah kode <head>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>
  • kemudian letakkan kode berikut diatas kode ]]></b:skin>
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
  • Janganlupa simpan template. kemudian klik pada elemen halaman=> tambah gadget=> HTML/JavaSript=> copi dan paste code berikut dalam content:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1 
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://digratisan.blogspot.com/" target="_blank" title="Tabview Widget">Get This Widget</a></div>
Silahkan anda ganti dan edit kode diatas, judul tab dan untuk warna
  • Save, kemudian save lagi. Silahkan lihat hasilnya diblog anda!
image_thumb4 Ikuti Tips berikut:

  • Download lengkap template sobat, agar bisa dikembalikan lagi seperti semula jika sobat tidak berhasil/ salah dalam pengeditan.
  • Setelah memasukkan kode tambahan sebelum menyimpan template pratinjau dulu, jika tidak ada pesan error atau template ditampilkan seperti awalnya/ tdk amburadul tata letaknya, berarti langkah-langkahnya sudah benar.
  • Saat mencari suatu code klik  Ctrl+F kemudian cari. Agar mudah menemukan codenya
  • Terakhir langsung cara membuat menu tab view slide
  1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ini ]]></b:skin> letekkan kode berikut diatas  ]]></b:skin>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}
-----------------------------------------------
2.kode ini
    
 <script type='text/javascript'>
//<![CDATA[
//** Tab Content script v2.0- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
//** Updated Oct 7th, 07 to version 2.0. Contains numerous improvements:
//   -Added Auto Mode: Script auto rotates the tabs based on an interval, until a tab is explicitly selected
//   -Ability to expand/contract arbitrary DIVs on the page as the tabbed content is expanded/ contracted
//   -Ability to dynamically select a tab either based on its position within its peers, or its ID attribute (give the target tab one 1st)
//   -Ability to set where the CSS classname "selected" get assigned- either to the target tab's link ("A"), or its parent container
//** Updated Feb 18th, 08 to version 2.1: Adds a "tabinstance.cycleit(dir)" method to cycle forward or backward between tabs dynamically
//** Updated April 8th, 08 to version 2.2: Adds support for expanding a tab using a URL parameter (ie: http://mysite.com/tabcontent.htm?tabinterfaceid=0)

////NO NEED TO EDIT BELOW////////////////////////

function ddtabcontent(tabinterfaceid){
    this.tabinterfaceid=tabinterfaceid //ID of Tab Menu main container
    this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
    this.enabletabpersistence=true
    this.hottabspositions=[] //Array to store position of tabs that have a "rel" attr defined, relative to all tab links, within container
    this.currentTabIndex=0 //Index of currently selected hot tab (tab with sub content) within hottabspositions[] array
    this.subcontentids=[] //Array to store ids of the sub contents ("rel" attr values)
    this.revcontentids=[] //Array to store ids of arbitrary contents to expand/contact as well ("rev" attr values)
    this.selectedClassTarget="link" //keyword to indicate which target element to assign "selected" CSS class ("linkparent" or "link")
}

ddtabcontent.getCookie=function(Name){
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
        return document.cookie.match(re)[0].split("=")[1] //return its value
    return ""
}

ddtabcontent.setCookie=function(name, value){
    document.cookie = name+"="+value+";path=/" //cookie value is domain wide (path=/)
}

ddtabcontent.prototype={

    expandit:function(tabid_or_position){ //PUBLIC function to select a tab either by its ID or position(int) within its peers
        this.cancelautorun() //stop auto cycling of tabs (if running)
        var tabref=""
        try{
            if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel")) //if specified tab contains "rel" attr
                tabref=document.getElementById(tabid_or_position)
            else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel")) //if specified tab contains "rel" attr
                tabref=this.tabs[tabid_or_position]
        }
        catch(err){alert("Invalid Tab ID or position entered!")}
        if (tabref!="") //if a valid tab is found based on function parameter
            this.expandtab(tabref) //expand this tab
    },

    cycleit:function(dir, autorun){ //PUBLIC function to move foward or backwards through each hot tab (tabinstance.cycleit('foward/back') )
        if (dir=="next"){
            var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
        }
        else if (dir=="prev"){
            var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
        }
        if (typeof autorun=="undefined") //if cycleit() is being called by user, versus autorun() function
            this.cancelautorun() //stop auto cycling of tabs (if running)
        this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
    },

    setpersist:function(bool){ //PUBLIC function to toggle persistence feature
            this.enabletabpersistence=bool
    },

    setselectedClassTarget:function(objstr){ //PUBLIC function to set which target element to assign "selected" CSS class ("linkparent" or "link")
        this.selectedClassTarget=objstr || "link"
    },

    getselectedClassTarget:function(tabref){ //Returns target element to assign "selected" CSS class to
        return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
    },

    urlparamselect:function(tabinterfaceid){
        var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i")) //check for "?tabinterfaceid=2" in URL
        return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
    },

    expandtab:function(tabref){
        var subcontentid=tabref.getAttribute("rel") //Get id of subcontent to expand
        //Get "rev" attr as a string of IDs in the format ",john,george,trey,etc," to easily search through
        var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
        this.expandsubcontent(subcontentid)
        this.expandrevcontent(associatedrevids)
        for (var i=0; i<this.tabs.length; i++){ //Loop through all tabs, and assign only the selected tab the CSS class "selected"
            this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
        }
        if (this.enabletabpersistence) //if persistence enabled, save selected tab position(int) relative to its peers
            ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
        this.setcurrenttabindex(tabref.tabposition) //remember position of selected tab within hottabspositions[] array
    },

    expandsubcontent:function(subcontentid){
        for (var i=0; i<this.subcontentids.length; i++){
            var subcontent=document.getElementById(this.subcontentids[i]) //cache current subcontent obj (in for loop)
            subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none" //"show" or hide sub content based on matching id attr value
        }
    },

    expandrevcontent:function(associatedrevids){
        var allrevids=this.revcontentids
        for (var i=0; i<allrevids.length; i++){ //Loop through rev attributes for all tabs in this tab interface
            //if any values stored within associatedrevids matches one within allrevids, expand that DIV, otherwise, contract it
            document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
        }
    },

    setcurrenttabindex:function(tabposition){ //store current position of tab (within hottabspositions[] array)
        for (var i=0; i<this.hottabspositions.length; i++){
            if (tabposition==this.hottabspositions[i]){
                this.currentTabIndex=i
                break
            }
        }
    },

    autorun:function(){ //function to auto cycle through and select tabs based on a set interval
        this.cycleit('next', true)
    },

    cancelautorun:function(){
        if (typeof this.autoruntimer!="undefined")
            clearInterval(this.autoruntimer)
    },

    init:function(automodeperiod){
        var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid) //get position of persisted tab (applicable if persistence is enabled)
        var selectedtab=-1 //Currently selected tab index (-1 meaning none)
        var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid) //returns null or index from: tabcontent.htm?tabinterfaceid=index
        this.automodeperiod=automodeperiod || 0
        for (var i=0; i<this.tabs.length; i++){
            this.tabs[i].tabposition=i //remember position of tab relative to its peers
            if (this.tabs[i].getAttribute("rel")){
                var tabinstance=this
                this.hottabspositions[this.hottabspositions.length]=i //store position of "hot" tab ("rel" attr defined) relative to its peers
                this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel") //store id of sub content ("rel" attr value)
                this.tabs[i].onclick=function(){
                    tabinstance.expandtab(this)
                    tabinstance.cancelautorun() //stop auto cycling of tabs (if running)
                    return false
                }
                if (this.tabs[i].getAttribute("rev")){ //if "rev" attr defined, store each value within "rev" as an array element
                    this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
                }
                if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
                    selectedtab=i //Selected tab index, if found
                }
            }
        } //END for loop
        if (selectedtab!=-1) //if a valid default selected tab index is found
            this.expandtab(this.tabs[selectedtab]) //expand selected tab (either from URL parameter, persistent feature, or class="selected" class)
        else //if no valid default selected index found
            this.expandtab(this.tabs[this.hottabspositions[0]]) //Just select first tab that contains a "rel" attr
        if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
            this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
        }
    } //END int() function

} //END Prototype assignment

//]]>
</script>


3. Copi kode tersebut dan paste sebelum kode </head>
4. Simpan template
5. Selanjutnya pilih elemen halaman=> tambah gadget=> HTML/JavaScript=> Masukkan code berikut pada kolom content

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="URLartikelkamu1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="tampilan mouse" width="240" src="URLgambar1?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu1">Judul Aritkel 1</a></h3></p>
Kamu tulis deskripsi dingkat artikel pertama kamu disini [...]
</div>
<div id="tab2" class="tabcontent">
<a href="URLartikelkamu2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URLgambar2?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu2">Judul Aritkel 2</a></h3></p>
Kamu tulis deskripsi dingkat artikel kedua kamu disini [...]
</div>
<div id="tab3" class="tabcontent">
<a href="URLartikelkamu3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URLgambar3?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URLartikelkamu3">Judul Aritkel 3</a></h3></p>
Kamu tulis deskripsi dingkat artikel ktiga kamu disini [...]
</div>
<div id="tab4" class="tabcontent">
<a href="URLartikelkamu4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URLgambar4?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="URLartikelkamu4">Judul Aritkel 4</a></h3></p>
Kamu tulis deskripsi dingkat artikel keempat kamu disini [...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>

Silahkan edit sesuai selera sobat, kemudian simpan dan lihat hasilnya.
Semoga bermanfaat.
Melanjutkan postingan sebelumnya sebagai jawaban pertanyaan seorang teman yang ingin mengetahui cara membuat menu tab navigator horizontal.
Sebenarnya pada banyak template baru, tab navigator horizontal ini sudah tersedia dan sobat dengan mudah bisa mendownloadnya dengan gratis dan tidak perlu susah membuatnya. Tapi bagi sobat yang tidak ingin untuk mengganti template baru lagi dan belum memiliki tab navigator horizontal pada headernya, berikut cara membuatnya:
1.Langkah Pertama
  • Loggin ke blogger
  • Pada dasbor klik tata letak
  • klik edit HTML kemudian cari kode ]]></b:skin>
  • kemudian letakkan kode berikut diatas ]]></b:skin>
menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
.menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;}
.menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}
hasilnya seperti ini:
tab menu navigator horizontal
atau kode berikut:
.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
.menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px}
.menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}
Untuk hasil seperti ini
tab menu navigator horizontal
keterangan untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera begitu pula dengan warna huruf dan backgroundnya. 
  • Simpan template.
2. Langkah Ke Dua
Klik tata letak=> elemen halaman=> tambah gadget pada bagian atas header atau bagian bawahnya=> HTML/JavaScrip
Copy dan paste kode berikut warna merah berikut pada content:

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">
<div class="menuhorisontal">
<li>

<a href="#">HOME</a>
<a href="#" target="_blank">Agama</a>
<a href="#" target="_blank">Tecnology</a>
<a href="#" target="_blank">Kesehatan</a>
<a href="#" target="_blank">Islamic Animation</a>
<a href="#" target="_blank">Glitter Teks</a>
<a href="#" target="_blank">Loggin Blogger</a>
</li>
</div>
</div>

Keterangan: untuk URL silahkan sobat ganti, begitu pula warna backgroundnya silahkan sesuaikan dengan selera. 
  • Simpan. simpan lagi... lihat blog anda!
Semoga berhasil dan bermanfaat!
image
Berikut anaa coba berbagi trik membuat menu slider versi dua. Mengapa versi dua? Karena sebelumnya anaa pernah posting trik membuat menu slide atau tab view slide versi 1 yang contonya bisa dilihat pada halaman awal (home) pada sidebar kanan blog ini.
Cara membuat menu slider versi 2


  • Langkah pertama pada dasbor klik tata letak=> edit  HTML=> cari kode ]]></b:skin>
letakkan kode berikut diatas kode tadi:
#slider    {
    background:url(YOUR-LINK-HERE/slide.png);
    height: 254px;
    overflow: hidden;
    position: relative;
    margin: 5px 0;
}
#mover {
    width: auto;
    position:absolute;
    overflow:hidden;
}

.slide {
    padding: 20px 0px;
    width: 1000px;
    float: left;
    position: relative;
    height:200px;
    }
.slide h2 {
    font-family:georgia, Helvetica, Sans-Serif;
    font-size: 24px;
    color: #ac0000;
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    width:500px;
    overflow:hidden;
    }

.slide h2 a:link, .slide h2 a:visited  {
    color:#fff;
    background-color: transparent;
    }
.slide h2 a:hover  {
    color: #ddd;
    background-color: transparent;
    }
span.slmet {
    color: #ee0909;
    font-size: 10px;
    font-family:Tahoma, georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    text-transform:uppercase;
}   
.slide p {
    color: #999;
    font-size: 12px;
    font-family:georgia, Helvetica, Sans-Serif;
    line-height: 20px;
    width: 500px; 
    padding:0px 0px 0px 30px;
    margin:0px 0px;
    }
.slide img {
    position: absolute;
    top: 20px;
    left: 577px;
    background:#fff;
    padding:10px 10px;
    }
#slider-stopper {
    position: absolute;
    font-family: Georgia, Helvetica, Sans-Serif;
    top: 113px;
    right: 65px;
    color: #AC0000;
    padding: 3px 8px;
    font-size: 14px;
    text-transform: uppercase;
    z-index: 1000;
    }   
  • Langkah ke dua letakkan script JQuery dan kode berikut sebelum </head>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/jquery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/slider.js' type='text/javascript'/>

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
    var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
Cari kode berikut:
<div id='header-wrapper'>
..........
.........
</b:section>

Letakkan kode berikut tepat di bawah kode tadi :


<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'> <span class='slmet'> Posted by Amatullah </span> <h2><a href='http://pengembarabiru.blogspot.com/2010/01/cara-membuat-menu-dtree.html'>Cara Membuat Arsip Seperti Menu Dtree?</a></h2> <p>Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image disamping</p> <img alt='Ngeblog Offline' src='http://i50.tinypic.com/dbk4tv.jpg'/>
</div> <div class='slide'> <span class='slmet'> Posted by aarieadie </span> <h2><a href='http://amatullah83.blogspot.com/2009/07/cara-membuat-menu-scrolling.html'>Cara Membuat Menu Scroll</a></h2> <p>Dengan membuat menu scroll untuk menyimpan catatan kita, link, atau banner akan menghemat tempat pada blog kita. Apa menu scroll itu? Baiknya langsung saja liat contoh disamping!</p> <img alt='Tab View Slide' src='http://i45.tinypic.com/b50h0y.jpg'/>
</div> <div class='slide'> <span class='slmet'> Posted byarieadie  </span> <h2><a href='http://pengembarabiru.blogspot.com/2009/11/cara-membuat-menu-tab-view.html'>Membuat menu tab view</a></h2> <p>Bagaimana cara membuat menu tab view sederhana seperti gambar disamping..</p> <img alt='tab view sederhana' src='http://i50.tinypic.com/25fimhu.jpg'/> </div> </div>
<!-- /Mover --> </div>
<!-- /Slider --> </div>
<div class='clear'/>
  • Silahkan edit tulisan yang berwarna biru, merah dan hijau dengan link, judul dan deskripsi postingan anda !
  • Terakhir jangan lupa save deh!
  • Semoga berhasil!
 Boxed 1
Langkah-langkah membuat tab menu navigation horizontal
1. Dalam keadaan sig in pada account blogger sobat, pada dasbor => klik Tata Letak=> klik Elemen Halaman
2. Klik Tambah Gadget pada kolom elemen halaman dibawah header atau diatas header
2. Pilih HTML/JavaScript
3. Copy semuae kode tab yang terdapat dalam teks area dibawah tab navigator horizontal pilihan sobat dan paste pada kolom konten
Untuk mengganti link, edit pada bagian HTML semua kode seperti berikut:
<li><a href="#"><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li>
  <li><a href="#" ><span>Link 5</span></a></li>
  <li><a href="#" ><span>Link 6</span></a></li>
  <li><a href="#" ><span>Link 7</span></a></li>
ganti kode (#) dengan halaman link sobat dan ganti Link1, Link2, Link3 dan seterusnya dengan titel halaman jika ingin menambahkan atau menghapus sebuah tab, sobat tinggal menambahkan atau menghapus bagian baris kode berikut:
<li><a href="#" ><span>Link n</span></a></li>
4. Terakhir jangan lupa simpan dan simpan. Lihat hasilnya pada blog.
Berikut kode 30 tab menu navigasi horizontal

MBT Navigation Menu #1

Black-Orange
MBT Navigation Menu #2
Purple-White-Navigation

MBT Navigation Menu #3
Boxed 1
MBT Navigation Menu #4
 LIGHT-GREY
MBT Navigation Menu #5
Bulleted-top-Navigation
Tabs Menu #6
Tab Menu I
Tabs Menu #7
 Tab Menu G
Tabs Menu #8
 Tab Menu F
Tabs Menu #9
 ZDnet Emulation
Tabs Menu #10
 Tab Menu E
Tabs Menu #11
 Tab Menu D
Tabs Menu #12
Tab Menu 12
Tabs Menu #13
 Tab Menu 11
Tabs Menu #14
Tab Menu 10
Tabs Menu #15
 Tab Menu 9
Tabs Menu #16
 Tab Menu 6
Tabs Menu #17
 Tab Menu 8
Tabs Menu #18
Tab Menu 7
Tabs Menu #19
Tab Menu K
Tabs Menu #20
Tab Menu 4
Tabs Menu #21
 Tab Menu 3
Tabs Menu #22
 Tab Menu 2
Tabs Menu #23 Square
Tabs Menu #24
Horizontal Buttons
Tabs Menu #25
Tab Menu H
Tabs Menu #26
 Tab Menu 1
Tabs Menu #27
 Tab Menu A
Tabs Menu #28 Tab Menu 5
Tabs Menu #29
 Tab Menu B
Tabs Menu #30 Tab Menu J
Thanks to My Blogger Trick
Read latest headlines in your favorite news reader
Sign up for our email news letter

blog