 |
| 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!

Barusan 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!

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
- 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:

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

keterangan
untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera
begitu pula dengan warna huruf dan backgroundnya.
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!
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!