LKP SETYO TUNGGAL

Rabu, 09 Mei 2012

membuat menu dan sub menu pada blog

cara membuat sub menu.

Membuat Menu Serta Sub Menu Tanpa jQuery

Pada artikel kali ini saya akan menuliskan Tutorial/cara membuat menu serta sub menu di blogger tanpa menggunakan jQuery, yakni menggunakan kode html + css saja.

Demo Menu Horizontal

Home
Menu 1
Menu + Sub Menu
Menu
Menu + Sub
- Sub 1
- Sub 2
- Sub 3
- Sub 4
- Sub 5
- Sub 6

Langsung saja ya, tidak perlu basa-basi

Panduan Langkah Demi Langkah Membuat Menu Horizontal + Sub Menu Di Blogger

Seperti biasa, langkah pertama yang wajib dilakukan adalah login ke blogger.

Panduan Untuk Blogger Baru
Panduan Untuk Blogger Lama

Tutorial Membuat Menu Serta Sub Menu Tanpa jQuery Untuk Blogger Baru

1. Klik menu seperti ini

2. Klik menu / tulisan Template

3. Klik menu Edit HTML

4. Klik tulisan / menu Lanjutkan

5. Beri centang pada Expand Template Widget

Panduan Membuat Menu Serta Sub Menu Tanpa jQuery Di Blogger Lama

1. Klik Menu Rancangan / Design

2. Klik Menu Edit Html

3. Beri Centang Pada Bagian Expand Template Widget

Kode Yang Harus Di Cari / Temukan

Cari kode :

<div class='main-outer'> atau
<div id='main-wrapper'> atau
<div id='main'> baca : Cara Mudah + Cepat Mencari Kode Html di Blogger dengan cara menekan tombol ctrl+f

Setelah kode tersebut sudah ditemukan silakan pasang kode berikut tepat di atasnya

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav
 a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; 
font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav
 a { font-family:Georgia, "Times New Roman", Times, serif; 
font-style:italic; font-weight:700; font-size:14px; display:block; 
z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav
 li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; 
line-height:30px; padding:0 10px; font-size:11px; font-style:normal; 
font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav
 li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav
 li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { 
left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Home</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu + Sub Menu</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu 1</a></li>

<li><a href='#'>Sub Menu 2</a></li>

<li><a href='#'>Sub Menu 3</a></li>

</ul>

</li>

<li><a href='#'>Menu</a></li>

<li><a href='#'>Menu + Sub</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub 1</a></li>

<li><a href='#'>Sub 2</a></li>

<li><a href='#'>Sub 3</a></li>

<li><a href='#'>Sub 4</a></li>

<li><a href='#'>Sub 5</a></li>

<li><a href='#'>Sub 6</a></li>

</ul>

</li>

<li><a href='#'>Menu</a></li>

</ul>

</div>

Catatan:

Silakan ganti tanda PAGAR (#) dengan link/url yang kamu mau, boleh link posting atau link Label (Kategori)
Sub Menu dan Sub adalah sub menu dari menu (Menu + Sub Menu dan Menu + Sub), silakan ganti nama masing-masing menu sesuai selera.

Sabtu, 14 Januari 2012

cara masang foto profil facebook di blogspot

Ingat tutorial ini hanya deperuntukkan bagi yang sudah punya Facebook dan blog.....kalau belum punya. kasiaaaaaaan deh lho..... hari gini ndak punya FB..???? apa kata dunia...

begini caranya masang foto profil FB kita di blog yang kita punya

login Facebook dan blog secara bersamaan ( kok bersamaan....he..he..)
cari lencana di http://id-id.facebook.com/badges/

3. pilih lencana di atas sesuai yang anda sukai, lalu akan muncul gambar seperti di bawah ini.

4. klik blogger atau other . lalu kita akan di bawa masuk ke ADD PAGE ELEMENT

5.klik menambah widget ( ADD WIDGET)

6. blog kita sudah terpasang foto profil FB kita..

tulisan ini sekaligus sebagai peringatan hari meninggalnya ayam jago bangkok saya yang sudah siap di adu....dikarenakan tidak mau makan ayam tersebut akhirnya mati tertembus pisau dan masuklah ke perut saya...semoga amal kebaikanya selama ini mendapat balasan.....amin.....

Rabu, 11 Januari 2012

cara mudah memasang tombol like facebook dipostingan :

cara memasang tombol like di facebook posting :
toto coro masang nyunyu'an like facebook ing wedaran blog :
1. Login ke dashboard blog ( muncul wonten ing dasborad blog )

2. Masuk ke menu Rancangan --> Edit HTML ( lumebet ing rancangan --> Edit HTML )

3. cari kode <data:post.body/> ( padosi kode data:post.body/ )

4. Lalu copy kode dibawah ini dan letakkan diatas <data:post.body/> jika ingin tombol like diatas postingan atau dibawah <data:post.body/> jika ingin meletakkan tombol like dibawah postingan.

( lajeng dipun salin kode ngandap puniko dipun pasang ing nginggilipun data:post.body/ menawi ngersaaken nyunyu'an like ing nginggilipun wedaran utawi ing ngandapipun data:post.body/ menawi ngersakaken ing ngandapipun wedaran )

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

Keterangan : ( katerangan )

tampilan standar seperti ini : ( mekaten werdinipun standar )

Tampilan button_count ( werdinipun button_count )

pilih tampilan icon mana yang anda mau dengan mengganti code standard
Gunakan Light jika template sobat backgroundnya putih, atau dark jika hitam.

5. Save template sobat..

membuat menu di bawah header

Langkah - langkah membuat menu dibawah header blog adalah :

1. Masuk ke dashboard Blogspot, lalu ke menu Rancangan >> Edit HTML, centang ' Expand Template Widget'

2. Cari kode seperti dibawah atau cari yang mirip (CTRL+F , cara cepat untuk mencari kode).

<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='x-Demo (Header)' type='Header'>
<b:includable id='main'>

ganti maxwidgets='1' menjadi 2 atau lebih dan showaddelement='yes'>

3. Jika sudah selanjutnya sobat cari kode ]]></b:skin> ( gunakan Ctrl+f )

4. Hapus kode tersebut dan ganti dengan kode dibawah ini.

a.navigation {
background: #3333ff ;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #333333;
color: #ffffff;
text-decoration: none;
}

]]></b:skin>

Perhatikan kode yang di cetak tebal, untuk kode merah adalah warna yang tampiannya bisa sobat ganti dengan kode warna html.
Kemudian tebal hitam adalah size jarak antar menunya bisa sobat rubah jika ingin merubahnya.

5. Save template lalu klik Elemen Laman atau klik rancangan.

6. kemudian klik tambah gadget >> pilih HTML/JavaScript

7. Copykan kode berikut kedalam kotak tersebut

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center" width="100%" height="60">

<a href="http://mursiditompak.blogspot.com/ " class="navigation">HOME</a>

<a href="http://mursidipetani.blogspot.com/" class="navigation">PETANI</a>

<a href="http://lawang.org/ " class="navigation">PASAR TANI</a>

<a href="http://www.facebook.com/mursi.di2 " class="navigation">FACEBOOK</a>

<a href="http://sppqt.or.id/ " class="navigation">SPPQT</a>

<a href="http://lsd-sppqt.blogspot.com/" class="navigation">FORUM LSD</a>

<a href="http://mursiditarubatang.blogspot.com/ " class="navigation">FOTO-FOTO</a>

<a href="http://wikimapia.org/#lat=-7.4940023&lon=110.4767816&z=19&l=0&m=b&search=lsd%20setyo%20tunggal " class="navigation">PETA RUMAH</a>

<a href="http://mivo.tv/home.php " class="navigation">TV STREAMING</a>

<a href="http://mursiditompak.blogspot.com/2011/12/rangkaian-nama-bayi.html" class="navigation">NAMA BAYI</a>

<a href="

http://lsdtarubatangselo.blogspot.com/
" class="navigation">LAIN-LAIN</a>

</marquee>

Ganti yang berwarna biru dengan keinginan nama menu. dan warna merah alamat menu.

7. SAVE lalu lihat hasilnya..

MURSIDI BLOG AMBURADUL: membuat tulisan bergerak

MURSIDI BLOG AMBURADUL: membuat tulisan bergerak: 1. Marquee dari Kiri ke Kanan. kode HTML adalah sperti bawah ini : <MARQUEE align="center" direction="right" height=" 200 " scrollamo...

membuat tulisan bergerak

1. Marquee dari Kiri ke Kanan.

kode HTML adalah sperti bawah ini :

<MARQUEE align="center" direction="right" height="200" scrollamount="2" width="30%">

mursidi tompak tarubatang

</MARQUEE>

cara masang di blogspot sebagi berikut :

Copy srcipt HTML di atas paste pada pada java script di blogspot anda dengan cara : login ke blogspot------pilih rancangan------tambah gatget-----pilih HTML java Scipt------paste scrip jam di atas-------lalu simpan

tulisan berwarna merah dapat anda ubah

2. Marquee Bolak-balik
kode HTML adalah sperti bawah ini :
<MARQUEE align="center" direction="left" height="200" scrollamount="3" width="70%" behavior="alternate">

mursidi tompak tarubatang

</MARQUEE>

cara masang di blogspot sebagi berikut :

tulisan berwarna merah dapat anda ubah

3. Marquee Diam Jika Ditunjuk.
kode HTML adalah sperti bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center">

mursidi tompak tarubatang
</marquee>

cara masang di blogspot sebagi berikut :

tulisan berwarna merah dapat anda ubah

mudah bukan? semoga berhasil....

pos by mursidi

CARA MEMSANG JAM DI BLOGSPOT

CARA MEMASANG JAM DI BLOG SPOT ADALAH SEBAGAI BERIKUT

dapatkan scripnya dulu di http://www.clocklink.com/gallery.php
pilih galerry bagian kiri.....pilih sesuai selera anda.
kemudian klik " view HTML tag" lalu tekan "accept"
Copy srcipt HTML jam yang sudah terpilih lalu paste pada pada java script di blogspot anda dengan cara : login ke blogspot------pilih rancangan------tambah gatget-----pilih HTML java Scipt------paste scrip jam di atas-------lalu simpan

mudah bukan.........pos by mursidi tompak tarubatang