First of All

Tampilkan postingan dengan label Menu. Tampilkan semua postingan

Rabu, 23 September 2009

Membuat Efek List Menjorok di Blog

Apakah anda sudah pernah melihat sebuah list yang menjorok. List ini akan menjorok ke dalam apabila cursor mouse berada diatas posisi list tersebut. Kita bisa membuat list tersebut didalam postingan dengan efek menjorok. Oke mungkin kalian sudah penasaran apa itu list yang menjorok. Blog Trik dan Tips akan memberikan trik ini. Berikut ini adalah langkah untuk membuatnya:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Cari kode ini: </b:skin>
4. Paste kode dibawah ini setelah kode </b:skin>

<script type='text/javascript'>
function lm_toRight(obj) {
obj.marginValBackUp = parseInt(obj.style.marginLeft);
obj.style.marginLeft = (obj.marginBackUp + 5).toString() + "px";
}
function lm_restore(obj) {
obj.style.marginLeft = obj.marginBackUp.toString() + "px";
}
</script>

Keterangan:
- Sobat dapat mengatur seberapa jauh list tersebut menjorok ke dalam dengan mengubah angka kode berwarna merah

5. Untuk membuat list tersebut maka jangan lupa untuk memasang tag <li> seperti dibawah ini pada tulisan yang ingin dibuat efek tersebut

<li onmouseover='lm_toRight(this)' onmouseout='lm_restore(this)'>

Selamat mencoba semoga berhasil!!!

ReadFull Article ..

Senin, 21 September 2009

Cara Membuat Breadcrumb Navigasi di Blog

Breadcrumbs adalah sebuah petunjuk atau navigasi yang menginformasikan keberadaan posisi postingan yang aktif. Breadcrumb biasanya membentuk posisi horizontal yang terletak dibawah judul posting. Breadcrumb dapat berupa susunan link yang menghubungkan sebuah posting sesuai dengan beberapa kategori dalam posting tersebut. Breadcrumbs juga membantu pengunjung untuk menelusuri jalur yang telah dilaluinya sampai berada di posisi saat ini sehingga penggunjung dengan mudah dapat kembali ke halaman sebelumnya. Pada kesempatan ini saya akan memberikan trik kepada sobat blogger cara membuat breadcrumb pada blog. Berikut adalah caranya:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Centang Expand Widget Template
4. Letakan kode dibawah ini sebelum kode <b:includable id='main' var='top'>

<b:includable id='breadcrumbs' var='post'>

<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> >
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
> <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>

</b:includable>

5. Cari kode ini atau sejenisnya: <b:if cond=’data:post.dateHeader’>
6. Letakan kode dibawah ini sebelum kode pada langkah 5.

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

7. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

9. Simpan template sobat dan lihat hasilnya

ReadFull Article ..

Sabtu, 11 Juli 2009

Cara Membuat Dock Menu Horizontal di Blog

Dock Menu adalah pilihan menu navigasi animasi dengan efek zoom. Efek zoom ini membuat icon berubah dari ukuran normal ke ukuran yang lebih besar apabila cursor mouse berada diatas icon dock menu. Dock Menu dapat juga kita jumpai pada windows desktop, maupun OS lainnya. Kali ini blog trik dan tips akan memberikan trik cara membuat dock menu vertikal pada blog. Jika sobat tertarik untuk membuatnya ikuti aja trik berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Klik Expand Widget Template
4. Tambahkan kode dibawah ini dibawah kode <head>

<script src='http://defecafe-blogspot.googlecode.com/files/jquery.js' type='text/javascript'></script>
<script src='http://defecafe-blogspot.googlecode.com/files/interface.js' type='text/javascript'></script>

5. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

/* CSS Dock Menu
------------------------ */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

6. Langkah selanjutnya yaitu kita menempatkan dock menu dibawah header blog, caranya cari kode dibawah ini:

<div id='header-wrapper'>
.........
.........
</b:section>
</div>

7. Setelah ketemu kode diatas letakkan kode berikut ini dibawah kode diatas

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://defecafe.blogspot.com/'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</span></a>

</div>
</div>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>

7. Terakhir simpan template sobat....

Selamat mencobanya dan Good Luck!!!!

ReadFull Article ..

Rabu, 08 Juli 2009

Membuat Menu Hubungi Saya atau Menu Slide

Sudahkah anda pernah melihat menu hubungi saya....beberapa blogger memasang menu ini sehingga blog terlihat lebih menarik. Menu ini dapat ditampilkan pada sisi kiri maupun kanan tergantung dari pengaturannya. Menu ini akan bergerak ketika anda mengscroll halaman ke bawah atau keatas. Menu ini dibuat oleh Maximus dimana nama asli menu ini adalah Dynamic Fx Slide In Menus. Dibawah ini adalah langkah-langkah untuk membuat menu ini:

1. Download scriptnya klik DISINI
2. Ekstraklah file itu dengan menggunakan WinZip, WinRAR
3. Setelah di ekstrak, akan menghasilkan dua file (ssm.js & ssmItems.js) yang akan kita edit hanya file ssmItem.js saja, buka file itu dengan menggunakan program teks editor seperti NotePad.

5. Isi file ssmItem.js seperti sebagai berikut ini. Kode-kode ini untuk mengatur tampilan menu hubungi saya.

YOffset=200;
XOffset=0;
staticYOffset=150;
slideSpeed=20
waitTime=100;
menuBGColor="#d1d8ec";
menuIsStatic="yes";
menuWidth=180;
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="#000000";
hdrBGColor="#ffffff";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="300";
barBGColor="#86629f";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="#ffffff";
barVAlign="center";
barWidth=15;
barText="Hubungi saya";
ssmItems[0]=["<center><img src=http://domain.com/gambarfoto.jpg><br>kata-kata-kamu<br><img src=http://domain.com/gambaremail.jpg> "]
buildMenu();

Untuk lebih jelasnya penjelasan dari kode diatas adalah sebagai berikut ini:

00. mengatur posisi menu pada baris y axis layar monitor (vertical)
01. mengatur posisi menu pada x axis layar monitor (horizontal)
02. untuk mengatur posisi vertical menu, pada layar monitor
03. kecepatan slide
04. waktu tunggu lamanya menu muncul setelah mouse menjauhi menu
05. untuk mengatur warna background menu, gunakan kolor picker dibawah posting ini untuk melihat kodenya
06. untuk men-set apakah menu harus tetap statis pada layar
07. Mengatur lebar menu. Harus kelipatan dari angka 10! Tanpa tanda kutip
08. jumlah kolom
09. jenis huruf header
10. ukuran huruf header
11. warna teks header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
12. warna backround header. gunakan kolor picker dibawah posting ini untuk melihat kodenya
13. perataan teks header
14.perataan teks vertikal header
15. tinggi header
16. warna background bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
17. jenis huruf bar
18. ukuran huruf bar
19. warna huruf bar. gunakan kolor picker dibawah posting ini untuk melihat kodenya
20. perataan teks bar secara vertikal
21. lebar bar
22. kata2 yang akan muncul pada bar (hubungi saya)
23/24. ganti http://domain.com/gambarfoto.jpg dan http://domain.com/gambaremail.jpg dengan url dimana kamu upload gambar foto dan gambar email.dan jangan lupa ganti kata-kata-kamu dengan yang kamu inginkan
26. Buat menu

6. Jika sudah selesai mengedit file ssmItem.js simpan file tersebut, lalu upload-lah kedua file javascript itu ke server kamu, kamu bisa menggunakan googlepage untuk menghosting file itu
7. Kalau sudah di upload, jangan lupa untuk mengkopi alamat URL kedua file tersebut.
8. Sekarang saatnya memasukkan file java script tadi kedalam blog kita, silahkan ikuti langkah-langkah berikut ini :

9. Login ke Blogger klik Rancangan----> Edit HTML
10. Kopi dan paste kode/script berikut di atas kode </head>

<script src='http://defecafe-blogspot.googlepages.com/ssm.js' type='text/javascript'></script><script src='http://defecafe-blogspot.googlepages.com/ssmItems.js' type='text/javascript'></script>

Silahkan ganti teks berwarna merah dengan url dimana kamu upload file javascript-nya

10. Simpan dan lihat blog sobat.

ReadFull Article ..

Rabu, 01 Juli 2009

Membuat Drop Down Menu Sederhana

Apa sobat pernah melihat dropdown menu.....dropdown menu emang memiliki banyak fungsi, selain menghemat banyak ruang, drop down menu dapat memuat sumber link dari beberapa situs. He3 penasaran dengan dropdown menu....ini loh dropdown menu...

Sobat pasti tertarik untuk memasangnya pada blog. Berikut ini saya akan memberikan tips bagaimana cara membuat dropdown menu.:

1. Log in ke blog sobat.
2. Pilih Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML javaScript.
4. Masukan kode berikut:

<select onchange="document.location.href=this.options[this.selectedIndex].value;"><option value="0">Seputar Informasi Blog</option><option value="Links 1">Dropdown 1</option><option value="Links 2">Dropdown 2</option></select>

5. Simpan gadjet dan lihat hasilnya

Demikian cara simpel membuat drop down menu. Sobat tinggal modifikasi aja apabila sobat ingin menambahkan url pada drop down menu tersebut. Selamat mencoba...

ReadFull Article ..

Membuat Menu Tab View Sederhana

Sobat ingin membuat tab view yang sederhana. Tab view memiliki fungsi dan manfaat yang sangat penting. Tab view dapat menampilkan komentar, link, postingan dan lain sebagainya dalam sebuah kotak kecil. Tab view juga dapat menghemat space atau ruang dari blog sobat. Ingin tau bagaimana cara membuatnya ikuti langkah berikut:

1. Login ke blogger
2. Pilih Rancangan dan klik pada Edit HTML
3. Cari kode ]]></b:skin>
4. Kopi kode dibawah ini, letakkan diatas kode ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

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:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

Keterangan:
- Sobat dapat merubah kode diatas yang pada keterangan berwarna merah
- Sobat dapat juga mengganti background tab view berwarna ungu.

5. Kopi kode dibawah ini, letakkan dibawah kode ]]></b:skin>

<script src="http://defecafe-blogspot.googlecode.com/files/tabview.js" type="text/javascript"/>

6. Kemudian simpan template tersebut
7. Masuk ke Rancangan -- Elemen Laman, tambah gadjet kemudian pilih HTML/JavaScript
8. Masukan kode dibawah ini:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Judul Menu 1">Menu 1</a>
<a title="Judul Menu 2">Menu 2</a>
<a title="Judul Menu 3">Menu 3</a>
<a title="Judul Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">


<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 1

</div></div>



<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 2

</div></div>



<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 3

</div></div>



<div class="Page"><div class="Pad">

Isi keterangan atau widget anda disini untuk Menu 4

</div></div>


</div></div></form>

<script src='http://defecafe-blogspot.googlecode.com/files/linkblog.js' type='text/javascript'/>

9. Edit Tabview (isi judul dan keterangan serta widget yang ingin ditambahkan)
10. Simpan gadjet lalu lihat hasilnya!!

ReadFull Article ..

Cara Membuat Menu Horizontal yang Simpel

Jika sobat ingin membuat menu horizontal untuk menampilkan beberapa kumpulan artikel maka cobalah trik yang satu ini. Menu horizontal dapat sobat tampilkan di header maupun di footer. Untuk itu langsung saja kita buat menu horizontalnya...

1. Login ke blogger.
2. Masuk ke Rancangan dan klik pada Edit HTML
3. Klik Expand widget template
4. Back up dulu template sobat
5. Cari kode ini: ]]></b:skin>
6. Kopi kode dibawah ini dan paste diatas kode ]]></b:skin>

/* -- Horizontal Menu defecafe -- */
#horizontal-menu-defecafe {
float:left;
width:100%;
font-size:12px;
border-bottom:1px solid #2763A5; /* Bottom Line */
line-height:normal;
}

#horizontal-menu-defecafe ul {
margin:0;
padding:10px 10px 0 50px; /*Menu Position */
list-style:none;
}

#horizontal-menu-defecafe li {
display:inline;
margin:0;
padding:0;
}

#horizontal-menu-defecafe a {
float:left;
background: url("http://2.bp.blogspot.com/-ZHmnP8zb4gw/T5LHtBeFg8I/AAAAAAAADIs/rfQqFhpwuj4/s320/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}

#horizontal-menu-defecafe a span {
float:left;
display:block;
background: url("http://1.bp.blogspot.com/-bjmP5GpAPMw/T5LH9OMcjJI/AAAAAAAADI4/dlVjPxEUHLA/s320/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

#horizontal-menu-defecafe a span {float:none;}
#horizontal-menu-defecafe a:hover {
background-position:0% -42px;
}

#horizontal-menu-defecafe a:hover span {
background-position:100% -42px;
}

7. Jika sobat ingin memasang menu tersebut dibawah header maka cari kode <div id="content-wrapper">
8. Kopi kode dibawah ini dan paste sebelum kode <div id="content-wrapper">

<div id="horizontal-menu-defecafe">
<ul>
<li><a href="http://defecafe.blogspot.com"><span>Home</span></a></li>
<li><a href="http://defecafe.blogspot.com"><span>Contact</span></a></li>
<li><a href="http://defecafe.blogspot.com"><span>Profile</span></a></li>
<li><a href="http://defecafe.blogspot.com"><span>Gallery</span></a></li>
</ul>
</div>

9. Ganti url diatas dengan url menu sobat, serta ganti juga judul menu. Untuk menambah menu baru sobat tinggal tambahkan tag lt
10. Simpan template sobat lalu lihat hasilnya!

Untuk melihat DEMO klik DISINI

ReadFull Article ..

Membuat Menu D-Tree atau Menu Bercabang

Sobat ingin membuat menu Dtree? Apa itu Menu Dtree. Menu DTree sesuai namanya adalah sekumpulan arsip yang bercabang seperti cabang pohon. Menu Dtree terlihat seperti sobat membuka windows explorer. Menu Dtree digunakan bagi blogger yang mempunyai posting yang banyak karena Dtree ini dapat menghemat ruang. Jika sobat ingin membuatnya , ikuti langkah berikut:

1. Login ke blogger
2. Pilih Rancangan dan klik Edit HTML
3. Letakkan kode berikut diatas kode </head>

<link href='http://defecafe-blogspot.googlecode.com/files/dtree_defecafe.css' rel='StyleSheet' type='text/css'/>
<script src='http://defecafe-blogspot.googlecode.com/files/dtree_defecafe.js' type='text/javascript'/>

4. Kemudian Simpan template sobat.
5. Pindah ke Elemen Laman dan Tambah gadjet
6. Pilih HTML/JavaScript dan masukan kode dibawah ini:

<div class="dtree">
<p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
<script type="text/javascript">

</script>
</div>
<script src="http://defecafe-blogspot.googlecode.com/files/linkblog.js" type="text/javascript"/></script>

7. Simpan Template sobat.

Keterangan:
- Ganti tulisan "#.html" dengan link judul postingan
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’#.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Ganti tulisan berwarna hijau dengan url icon sobat.

DEMO - KLIK DISINI - 100% BERHASIL

ReadFull Article ..