Labels

Tags:

Tampilkan postingan dengan label CSS. Tampilkan semua postingan
Tampilkan postingan dengan label CSS. Tampilkan semua postingan

Rabu, 27 Juni 2007

Tips Memodifikasi Navbar pada blogger.com

Seperti gambar Favicon, secara standar blogger.com juga telah menyertakan tampilan Navbar secara otomatis pada setiap template yang akan digunakan oleh para pengguna blogger.com.

Tampilan Navbar itu sendiri mempunyai beberapa fungsi yang dapat memudahkan para pengguna blogger.com, diantaranya :

1. Mempunyai fasilitas mesin pencari blog yang memudahkan kamu untuk melakukan pencarian terhadap suatu blog (blogger.com) berdasarkan query yang kamu ketikkan.

2. Menjadi penghubung antara blog yang dibuat sebelum dan sesudah blog kamu dibuat.

3. Memudahkan visitor untuk membuat blog pada blogger.com (jika mereka belum mempunyai blog dan berkeinginan untuk membuat blog)

4. Untuk Login kedalam blogger.com, dan sebagainya.

Dan meskipun tampilan Navbar telah tersedia secara otomatis pada setiap template blogger.com, bukan berarti kita tidak bisa memodifikasi tampilan Navbar tersebut. Karena blogger.com, 100% memberikan kebebasan kepada kita untuk memodifikasi tampilan template yang ada termasuk Navbar.

Nah, sekarang tentunya kamu ingin mengetahui bagaimana caranya memodifikasi tampilan Navbar pada blogger.com ?

Untuk memodifikasi tampilan Navbar blogger.com, ada 2 cara yang bisa kamu lakukan, yaitu :

A. Modifikasi standar blogger.com,
Mengapa saya menyebutkan demikian ? Karena pada cara ini yang dapat kamu lakukan hanyalah mengubah tampilan warna pada Navbar yang telah tersedia pada template blog kamu.

Caranya adalah :

1. Setelah Login kedalam blogger.com, klik "Layout"

2. Pada halaman tab "Page Elements" (Elemen Halaman) klik "Edit" yang terdapat pada bagian Navbar.

3. Setelah Popup Window Navbar terbuka, pilih salah satu tampilan warna Navbar yang kamu inginkan dengna meng-klik radio button yang tersedia.

4. Terakhir klik "Save Your Template" (Simpan Perubahan). Lalu lihat hasilnya dengan meng-klik "View Blog" atau Preview (Pratinjau).

B. Modifikasi Navbar dengan CSS.

Cara ini merupakan cara yang dapat dikatakn paling banyak digunakan oleh para blogger. Dengan menggunakan Style CSS, ada tiga (3) cara yang bisa kamu lakukan untuk memodifikasi tampilan Navbar blogger.com. Antara lain :

1. Menghilangkan Navbar
Caranya adalah tambahkan Style CSS di bawah ini kedalam template blog kamu.


/* NAVBAR STYLES
----------------------------------------------- */
#navbar {
height:0px;
visibility:hidden;
display:none;
}


*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>.

2. Show Navbar onmouseover
Caranya adalah tambahkan class CSS di bawah ini kedalam template blog kamu.


/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.0;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
filter:alpha(Opacity=100, FinishedOpacity=100)
}

*Note: Letakkan class CSS diatas diantara tag <head> dan tag </head>. (Hasilnya bisa kamu lihat pada blog ini, coba arahkan cursor mouse ke bagian paling atas dari blog ini)


3. Membuat tampilan Navbar menjadi Transparant
Untuk cara yang ketiga ini, hasil dari tampilan Navbar yang akan kamu peroleh adalah Navbar akan terlihat transparant. Caranya juga sama seperti kedua cara yang diatas.


/* NAVBAR STYLES
----------------------------------------------- */
#navbar-iframe {
opacity:0.2;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:0.5;
filter:alpha(Opacity=100, FinishedOpacity=50)
}


Simpan perubahannya kemudian lihat hasilnya di blog kamu.

Semoga Tips dan trik ini bisa membantu kamu.

Selamat mencoba....


»»  read more
Di tulis oleh : DBK , jam 27.6.07 4 Komentar
Kategori Blog , ,

Kamis, 07 Juni 2007

Membuat Menu Pop-it pada Blog

Hi Friends,

Kali ini saya akan memberikan sedikit trik untuk membuat Menu Pop-it dengan menggunakan Properti CSS dan kode Javascript.

Dari namanya, saja tentunya kamu sudah tahu bukan apa itu Menu Pop-it. But, kalo kamu masih belum mengerti... saya akan coba untuk sedikit menjelaskannya.

Menu Pop-it adalah Menu Link reguler yang dinamis dimana jika mouse berada di atas sebuah link maka akan muncul link-link lainnya dalam bentuk 2 level Pop up. Kira - kira begitu dech...:D

Untuk lebih jelasnya, coba kamu lihat contohnya yang ada dalam blog ini.

Coba kamu arahkan pointer mouse ke atas link Friends yang berada di sidebar sebelah kiri dibagian "Links".

Tentunya kamu ingin tahu gimana saya membuatnya...???

Jujur saja sich, script ini bukan saya sendiri yang membuatnya, tapi saya dapatkan dari Dynamicdrive.com, dengan sedikit modifikasi, saya menggunakannya dalam blog ini.

Oke, berikut ini adalah langkah-langkah yang saya lakukan dalam menggunakan script tersebut :

1. Klik menu Edit html

2. Copy dan paste Properti CSS berikut ini diantara tag <head> dan tag </head>

#popitmenu{
position: absolute;
background-color: white;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
}

#popitmenu a{
text-decoration: none;
padding-left: 6px;
color: black;
display: block;
}

#popitmenu a:hover{ /*hover background color*/
background-color: #CCFF9D;
}


3. Copy dan paste kode Javascript berikut diantara tag ]]></b:skin> dan tag </head> :


<script type='text/javascript'>
//<![CDATA[
/****************************************************************************/
/* Pop-it menu- © Dynamic Drive (www.dynamicdrive.com)                      */
/* Pesan ini harus ada untuk penggunaan yang sah                            */
/* Kunjungi http://www.dynamicdrive.com/ untuk mendapatkan kode sepenuhnya  */
/* Edited By : Kevin Alfonzo - http://chalforweb.blogspot.com/              */
/****************************************************************************/

var defaultMenuWidth="150px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='Alamat URL/Link 1'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='Alamat URL/Link 2'
linkset[0]+='Alamat URL/Link 3'
linkset[0]+='Alamat URL/Link 4'
linkset[0]+='Alamat URL/Link 5'

linkset[1]='Alamat URL/Link 6'
linkset[1]+='Alamat URL/Link 7'
linkset[1]+='Alamat URL/Link 8'
linkset[1]+='Alamat URL/Link 9'

////Kode script berikut ini tidak perlu dirubah atau di edit

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu
//]]>
</script>



4. Klik Add Page element trus klik HTML/Javascript pada tab add page element :

5. Kemudian masukkan kode berikut ini :

<a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()">Teks buat Links Level 1</a><br>
<a href="#" onMouseover="showmenu(event,linkset[1], '180px')" onMouseout="delayhidemenu()">Teks buat Links Level 2</a>


Penjelasan :

1. Kamu bisa merubah atau mengedit Properti Style CSS sesuai dengan selera kamu.

2. Ganti Teks Yang berwarna merah dengan alamat URL/Link yang kamu inginkan. Begitu juga teks yang berwarna hijau.

3. Alamat URL/Link yang berwarna merah merupakan Link yang berada pada level 1. Sedangkan Teks yang berwarna hijau merupakan Link yang berada pada level 2.

4. Ganti teks yang berwarna biru dengan Teks yang sesuai dengan keinginan kamu

Oke Friend,

Selamat Mencoba......:-)


»»  read more
Di tulis oleh : DBK , jam 7.6.07 1 Komentar
Kategori Blog , ,

Minggu, 20 Mei 2007

Horizontal Menu on Blogger

Untuk melihat isi keseluruhan dari posting ini silakan kunjungi blog baru saya yang beralamatkan di http://ontheblogger.blogspot.com/2008/02/bagaimana-membuat-menu-horizontal-pada.html
»»  read more
Di tulis oleh : DBK , jam 20.5.07
Kategori Blog , , ,
Langganan: Postingan (Atom)
 

Recent Post

Powered By Blogger

Status Rank


Pendukung



Do not copy Paste Only Powered By Blogger


» Top of Page «

Iklan