Cara mencari Port yang di gunakan client untuk di batasi limitnya di Mikrotik

Ada banyak port port statis yang di gunakan client yang selain port yang kita ketahui seperti port 80 (http) dan port 443 (https),bagaimana mengetahui port port tersebut dan bagaimana cara melimitnya?..berikut Cara mencari Port yang di gunakan client untuk di batasi limitnya  di Mikrotik

• Tutorial ini hanya berlaku pada port yang Static(Port yang tidak berubah ubah)
• Tutorial ini berlaku dengan Mikrotik routing (bukan bridge) karna menggunakan src-address

• Jalankan Browser anda dan buka situs yang menggunakan flash atau anda bisa juga buka game online,dll…dengan catatan tutup browser yang lain atau aplikasi yang terhubung ke internet yang lain

• sambil menjalankan situs yang menggunakan flash atau  game online ,dll… Buka mikrotik anda dengan winbox selanjutnya edit dan pastekan perintah di bawah ini di “New Terminal” Winbox :
• Edit:

src-address=192.168.77.224 diganti menjadi ip address yang anda gunakan untuk menjalankan situs yang menggunakan flash atau  game online ,dll
interface=local di ganti menjadi nama interface mikrotik yang mengarah ke komputer yang anda gunakan untuk menjalankan situs yang menggunakan flash atau  game online ,dll

/tool torch port=any src-address=192.168.77.224 ip-protocol=any interface=local

• DST-PORT=1935 
• TX=2.5 MB
• IP-PROTOCOL=tcp

selanjutnya catat di notepad DST-PORT dan IP-PROTOCOL nya:

• Sekarang port dan protocol udah di ketahui ,tinggal kita limit..di halaman utama winbox buka “Ip” kemudian “Firewall” kemudian “Mangle”

• Selanjutnya klik + dan isi:
• Di tab “General”
• Chain=prerouting
• Protocol=yaitu nama protocol yang anda catat di notepad
• Dst. Port=yaitu port yang anda catat di notepad
• Di tab “Action”
• Action=mark connection
• New Connection Mark=LIMIT PORT
• Passthrough=Di centang
• dan klik OK

• Selanjutnya masih Di “Ip Firewall Mangle” klik + dan isi :
• Di Tab “General”:
• Chain=prerouting
• Connection Mark=LIMIT PORT
• Di Tab “Action”:
• Action=mark packet
• New Packet Mark=LIMIT PORT
• Passthrough=Tidak di centang
• dan klik OK

• Selanjutnya kita limit dengan “Simple Queue”
• Di halaman utama Winbox buka “Queue” kemudian “Simple Queue”  

• Selanjutnya klik + dan isi:
• Di Tab “General”:
• Name=LIMIT PORT
• Max Limit=Silahkan limit sesuai dengan keinginan anda Contoh disini 512Kbps
• Di Tab “Advanced”:
• Packet Mark=LIMIT PORT
• Dan klik OK

• Selanjutnya buka situs yang menggunakan flash atau anda bisa juga buka game online,dll yang port dan protocolnya yang udah di masukkan di “Ip Firewall Mangle Tadi” dan sambil membuka “Simple Queue” yang di Winbox

 Cara mencari Port yang di gunakan client untuk di batasi limitnya di Mikrotik telah berhasil .
selamat mencoba…

Cara Membuat Efek Hover Captions Dengan Animasi Pada Gambar Blog

cara membuat efek hover captions dengan animasi pada gambar Blog, maksudnya saat kursor menyentuh gambar tersebut maka secara otomatis akan muncul captions dengan animasi, deskripsi dan judul seperti gambar di bawah ini.

LIVE DEMO

Dan berikut cara membuat efek hover captions dengan animasi pada gambar blog.

1. Login ke Blog kamu.

2. Pilih Rancangan.

3. Pilih Edit HTML, cari kode ]]></b:skin> setelah ketemu letakan kode di bawah ini tapat di atas kode ]]><b:skin>

#image-hover {
}
#image-hover img{width:200px;height:200px}
#figure {
position:relative;
float:left;
margin:10px;
overflow:hidden;
padding: 1px;
}
#figure:hover {
-moz-box-shadow:0 0 20px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.75);
box-shadow:0 0 20px rgba(0,0,0,0.75);
}
#figure .caption {
position:absolute;
bottom:0;
left:0;
opacity: 0.75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
transition: margin-bottom;
transition-duration: 400ms;
transition-timing-function: ease-out;
}
#figure:hover .caption {
margin-bottom:0px;
}
#image-hover .caption {
width:190px;
height:90px;
padding:10px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
#image-hover .caption b {
text-shadow: 0px 2px 0px #000;
}
#image-hover .caption {
color: #ddd;
line-height: 20px;
font-size: 11px;
text-shadow: 0px 2px 0px #000;
}
#image-hover a:link,#image-hover a:visited{font-size:11px;font-weight:bold;color:#fff;text-decoration:none}
#image-hover a:hover{color:#ff9900;}

Untuk kode yang berwarana biru itu adalah Width(Lebar gambar)  Height(Tinggi Gambar) sesuaikan dengan selera kamu.
Dan untuk kode yang berwarna merah sesuaiakan saja dengan lebar gambar Width : (jika lebar gambar 200px, maka lebar yang ini 190px) dan Height : (tinggi captions saat di sorot mouse)

Dan sekarang untuk membuat gambar dengan efek captions animasi perhatikan baik-baik kode di bawah ini.

<div id="image-hover">
<div id='figure'>
<img src="http://4.bp.blogspot.com/-YU-X0rwFzR4/T7udB9KAiYI/AAAAAAAACvc/uM8UHSE_9Nw/s320/Images+Zoom+and+Hover+Efect.png"/>
<span class='caption'>
<a href="http://blazerracing.blogspot.com/2012/05/cara-memberi-efek-zoom-dan-hover-pada.html"/>Cara Memberi Efek Zoom Dan Hover Pada Gambar Dengan jQuery</a> <br/>
kali ini efek nya ditambah dengan efek zoom atau membesar,
</span>
</div>
</div>

Ganti kode yang berwarna biru dengan URL gambar.
Ganti kode yang berwarna merah dengan URL yang dituju.
Ganti kode yang berwarna Ungu dengan Judul.
Ganti kode yang berwarna orange dengan Deskripsi.
 dikutip dari : http://blazerracing.blogspot.com/2012/06/cara-membuat-efek-hover-captions-dengan.html

Cara Membuat Menu Horizontal Drop Down Versi 2

Cara Membuat Menu Horizontal Drop Down Versi 2 - Sudah lama yah saya ga menerbitkan Artikel Tutorial Blog, nah kali ini saya akan menjelaskan bagaimana Cara Membuat Menu Horizontal Drop Down Versi 2, Menu Horizontal Versi 2 ini agak mirip dengan Kompas.com.

Gimana sob udah lihat gambar diatas, jika sobat pingin tahu cara membuatnya dan ingin memasangkan nya di Blog sobat silahkan ikuti langkah-langkah di bawah ini.

• Login Ke Blog kamu.
• Pilih Rancangan.
• Pilih EDIT HTML.
• Lalu cari kode ]]></b:skin>
• Setelah ketemu Copy kode dibawah ini tepat diatas kode ]]></b:skin>

.nav { height:35px; background: url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x; position:relative; font-family:arial, verdana, sans-serif; font-size:11px; width:100%; z-index:100; margin:0; padding:0; } .nav .table { display:table; margin:0 auto; } .nav .select, .nav .current { margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap; } .nav li { margin:0; padding:0; height:auto; float:left; } .nav .select a { display:block; height:35px; float:left; font-weight:bold; background: url(http://3.bp.blogspot.com/-iYO_dq-SM3k/Ti1qX6kEh0I/AAAAAAAAE1g/riMnCYQz3_4/s1600/bg.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238; } .nav .select a:hover, .nav .select li:hover a { background: url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238; } .nav .select a b{ font-weight:bold; } .nav .select a:hover b, .nav .select li:hover a b { display:block; float:left; padding:0 30px 0 15px; background:url(http://2.bp.blogspot.com/-nVl9muJMq7Q/Ti1qYHKkioI/AAAAAAAAE1k/-xo6sTlGN-A/s1600/hover.gif) right top; cursor:pointer; } .nav .select_sub { display:none; } /* IE6 only */ .nav table { border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; } .nav .sub { display:table; margin:0 auto; padding:0; list-style:none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background:transparent; color:#2b3238; } .nav .select :hover .select_sub, .nav .current .show { display:block; position:absolute; width:100%; top:35px; background:url(http://1.bp.blogspot.com/-ha6EhdiZxBI/Ti1qXa6bmsI/AAAAAAAAE1c/A7NU-qQ_-Ls/s1600/back.gif); padding:0; z-index:100; left:0; text-align:center; } .nav .current .show { z-index:10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238; } .nav .current .sub li.sub_show a { color:#2b3238; cursor:default; } .nav .select .sub li a { font-weight:normal; } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility:visible; color:#73a0d2; } <!--[if IE]> .nav ul {display:inline-block;} .nav ul {display:inline;} .nav ul li {float:left;} .nav {text-align:center;} .nav .select a:hover b, .nav .select li:hover a b {float:none;} <![endif]-->

Silahkan sobat ganti yang berwarna merah dengan URL Background lainnya atau dengan Warna terserah sobat, sobat bisa kresikan sendiri. Klik simpan, nah setelah disimpan kamu Pilih Add Gadget HTML Java Script dan Copy kode dibawah ini.

<div class="nav"> <div class="table"> <ul class="select"> <li><a href="#"><b>Sample</b></a></li> </ul> <ul class="select"> <li><a href="#"><b>Sample Menu</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> <li><a href="#">Sample Menu</a></li> </ul> </div> </li> </ul> <ul class="select"> <li><a href="#"><b>Sample Menu</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Sample Menu 2</a></li> <li><a href="#">Sample Menu 2</a></li> <li><a href="#">Sample Menu 2</a></li> <li><a href="#">Sample Menu 2</a></li> <li><a href="#">Sample Menu 2</a></li> </ul> </div> </li> </ul> <ul class="select"> <li><a href="#"><b>Sample Menu</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Sample Menu 3</a></li> <li><a href="#">Sample Menu 3</a></li> <li><a href="#">Sample Menu 3</a></li> <li><a href="#">Sample Menu 3</a></li> <li><a href="#">Sample Menu 3</a></li> </ul> </div> </li> </ul> <ul class="select"> <li><a href="#"><b>Sample Menu</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Sample Menu 4</a></li> <li><a href="#">Sample Menu 4</a></li> <li><a href="#">Sample Menu 4</a></li> <li><a href="#">Sample Menu 4</a></li> <li><a href="#">Sample Menu 4</a></li> </ul> </div> </li> </ul> </div> </div>

Silahkan Sobat ganti kata Sample Menu dengan Nama, dan tanda # dengan Link URL tujuan. Nah selsai deh cara membuatnya, gimana mudahkan cara membuatnya.
dikutip dari: http://blazerracing.blogspot.com/2012/02/cara-membuat-menu-horizontal-drop-down_19.html

Cara Membuat Menu Horizontal Drop Down Dengan CSS3

Kali ini saya akan membahas bagaimana cara membuat Menu Horizontal Drop Down Dengan CSS3 menu drop down kali ini tampilan dan warna nya lebih menarik, selain itu menggunakan gaya CSS3 yang bisa memukau siapa saja yang melihat nya. Cara membuatnya tidak ribet cukup satu langkah langsung jadi. Baiklah bagi sobat yang pingin membuat menu CSS3 ini ikuti langkah-langkah di bawah ini:

Cara Membuat 
1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML JavaScript.

3. Dan copy kode di bawah ini.

<style> #css3pic{background: rgb(176,174,38); /* Fallback Background color */ background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%); background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));width:980px;border-top:1px solid #ccc;margin:0 auto;padding:0 auto;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid 1px #251400;} #css3wrapper{width:980px;height:27px;margin:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #css3bar{width:100%} #css3bar,#css3bar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #css3bar a{display:block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;color:#333;padding:8px 8px 8px} #css3bar a.trigger{padding:8px 13px 8px 9px} #css3bar li{float:left;position:static;width:auto} #css3bar li ul,#css3bar ul li{width:140px} #css3bar ul li a{text-align:left;color:#fff;font-size:11px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;} #css3bar li ul{z-index:100;position:absolute;display:none;background:#333;padding-bottom:5px;border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: solid 1px #251400;} #css3bar li:hover a,#css3bar a:active,#css3bar a:focus,#css3bar li.hvr a{;color:#fff;-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } #css3bar li:hover ul,#css3bar li.hvr ul{background: rgb(176,174,38); /* Fallback Background color */ background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%); background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));display:block} #css3bar li:hover ul a,#css3bar li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none} #css3bar li ul li.hr{border-top:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:2px 0} #css3bar ul a:hover{background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066); background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066); background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066); background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);!important;color:#fff!important;text-decoration:none} </style> <div id='css3pic'> <div id='css3wrapper'> <ul id='css3bar'> <li><a href='#'>Home</a></li> <li><a class='trigger' href='#'>Blogger</a> <ul> <li><a href='#'>Tutorial Blogger</a></li> <li class='hr'/> <li><a href='#'>Tips Blogger</a></li> <li class='hr'/> <li><a href='#'>Widget</a></li> <li class='hr'/> <li><a href='#'>CSS</a></li> <li class='hr'/> <li><a href='#'>jQuery</a></li> </ul> </li> <li><a class='trigger' href='#'>Lifestyle</a> <ul> <li><a href='#'>Health</a></li> <li class='hr'/> <li><a href='#'>Travel</a></li> <li class='hr'/> <li><a href='#'>Food</a></li> </ul> </li> <li><a class='trigger' href='#'>Design</a> <ul> <li><a href='#'>Art</a></li> <li class='hr'/> <li><a href='#'>Web</a></li> <li class='hr'/> <li><a href='#'>Blog</a></li> </ul> <li><a class='trigger' href='#'>Technology</a> <ul> <li><a href='#'>Handphone</a></li> <li class='hr'/> <li><a href='#'>Gadget</a></li> <li class='hr'/> <li><a href='#'>Computer</a></li> </ul> <li><a class='trigger' href='#'>Sports</a> <ul> <li><a href='#'>Tennis</a></li> <li class='hr'/> <li><a href='#'>Moto GP</a></li> <li class='hr'/> <li><a href='#'>Bulu Tangkis</a></li> </ul> <li><div id='coom'> <a class='trigger' href='#'>Community</a></div> </li> </ul> <br class='clearit'/> </div> <div style='clear:both;'/> </div>

Ganti kode warna biru (width atau lebar) sesuaikan dengan blog anda. Ganti tanda # dengan URL yang dituju saat di klik.

dikutip dari: http://blazerracing.blogspot.com/2012/06/cara-membuat-menu-horizontal-drop-down_17.html

Cara Memasukkan Tanda Tangan di Blog

Sebelumnya anda harus memiliki tanda tangan digital, yaitu tanda tangan yang berupa gambar. Tanda tangan ini bisa diperoleh dengan cara scan tanda tangan lalu upload di image hosting seperti picasa. Bisa juga dengan memanfaatkan situs pembuat tanda tangan online yang banyak dijumpai di internet. Setelah memiliki tanda tangan yang dimaksud, silahkan lanjutkan dengan melakukan tutorial CARA MEMBUAT TANDA TANGAN di blog berikut ini :(klik di sini situs pembuat tanda tangan)

• Silahkan buka bagian kode template blog anda. Bagi anda yang belum tahu cara masuk ke bagian ini, silahkan klik "Cara Edit Template" untuk membaca tutorialnya.
• Setelah membuka halaman kode template, berikan tanda checklist pada kotak yang ada di depan tulisan "Expand Template Widget".
• Cari kode <data:post.body/> lalu letakkan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='text-align:right; margin:55px 5px 0 0'><img alt='tanda tangan' src='http://3.bp.blogspot.com/-gAijRtIKSxY/UDy5YM_H8sI/AAAAAAAACus/qED6i1TgZYY/s1600/tanda+tangan.png' style='border:0px; width:100px;'/></div>
</b:if> 

• Simpan template lalu ucapkan alhamdulillah...
• Selesai... 
• ganti url( http://3.bp.blogspot.com/-gAijRtIKSxY/UDy5YM_H8sI/AAAAAAAACus/qED6i1TgZYY/s1600/tanda+tangan.png) dengan url tanda tangan anda

cara mudah membuat link pop up

CARA NYA YAITU



    Login to BloGGer

    Dasboard (Dasbor) : KLIK link Layout (Tata Letak) atau Design (Rancangan).
    Layout (Design) : Yang sampeyan lihat di bagian ini adalah Page Element (Elemen Laman).
    Page Element (Elemen Laman) : KLIK Tambah Gadget (Add Gadget).
    HTML/Javascript : KLIK HTML/Javascript.
    Copy-Paste : Copy-Paste Javascript pada box yang tersedia.
    SAVE/Simpan : KLIK SAVE (Simpan).

<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
 newwindow=window.open(url,'name','height=200,width=150');
 if (window.focus) {newwindow.focus()}
 return false;
}

// -->
</script>

 <a href="popupex.html" onclick="return popitup('popupex.html')"
 >Link to popup</a>

nb:
warna merah=atur tinggi dan lebar pop up nya
warna kuning=url yang akan di tampil kan
warna hijau=judul link

Cara Membuat Menu Drop Down Horizontal Dibawah Header Blog

Pada Tutorial Blog Sebelumnya ,Evanzip sudah menjelaskan  Pada Sobat Tentang Cara Membuar link Bergoyang Pada Tutorial Blog Kali Ini  Evanzip akan Menjelaskan Pada Sobat Tentang cara.Membuat Menu Drop Down Horizntal .Menu Drop down bertujuan untuk mempermudah para pengunjung untuk memilih menu sesuai dengan keinginan Pengunjung.

Contoh Menu Drop Down Bisa Sobat Liat Gambar Disamping Atau Juga Bisa Sobat Liat  Menu Yg Ada Di Blog Evanzip.gimana sobat ...?kalau sobat tertarik untuk membuatnya di blog sobat,yok ikuti langkah langkah berikut :

1. Login Ke akun Blog Sobat 
2. Pada Halaman Dasbor Sobat Pilih  Rancangan/Tata Letak/Design --> Edit HTML 
3. Cari Kode ]]></b:skin> (Tekan CTRL F/F3 untuk Mempermudah Pencarian) 
4. Masukan Kode Berikut Tepat Diatas Kode ]]></b:skin

#tejahtc{ height:33px; width:1000px; margin:0 auto; background:url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x; display:block; padding:0px 0 0px 0px; font-size:12px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; font-weight:normal; border-top:1px solid #252424; } #tejas{ margin: 0px; padding: 0px; width:1000px; background:#252525 url(http://4.bp.blogspot.com/_4HKUHirY_2U/S6mTqAdkycI/AAAAAAAAA2E/zxCSk-6MwLI/catmenu.jpg) repeat-x; height:33px; } #tejas ul { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li a, #tejas li a:link, #tejas li a:visited { color: #fae7df; display: block; margin: 0px; padding: 9px 10px 10px 10px; } #tejas li a:hover, #tejas li a:active { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x; color: #fff; margin: 0px; padding: 9px 10px 10px 10px; text-decoration: none; } #tejas li li a, #tejas li li a:link, #tejas li li a:visited { background:#ED4A05; width: 150px; color: #fae7df; font-family:Tahoma,century gothic,Georgia, sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 10px 10px; border-bottom: 1px solid #FF7800; } #tejas li li a:hover, #tejas li li a:active { background:url(http://3.bp.blogspot.com/_4HKUHirY_2U/S6mTqmy1HdI/AAAAAAAAA2M/6D7APyygWZA/catmenuhov.jpg) repeat-x; color: #fff; padding: 9px 10px 10px 10px; } #tejas li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; } #tejas li li { } #tejas li ul a { width: 140px; } #tejas li ul a:hover, #tejas li ul a:active { } #tejas li ul ul { margin: -34px 0 0 170px; } #tejas li:hover ul ul, #tejas li:hover ul ul ul, #tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul { left: -999em; } #tejas li:hover ul, #tejas li li:hover ul, #tejas li li li:hover ul, #tejas li.sfhover ul, #tejas li li.sfhover ul, #tejas li li li.sfhover ul { left: auto; } #tejas li:hover, #tejas li.sfhover { position: static; }

5.Setelah itu copy kode dibawah ini dan paste tepat dibawah kode <div id='content-wrapper'>

<div id='tejahtc'>
<div id='tejas'>

<ul>
<li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a>
<ul class='children'>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li>
</ul>
</li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li>
<li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li>
</ul>

</div>
</div>


<div class='clear'/>

6.Simpan Templatenya Dan Lihat Hasilnya

dikutip dari:http://evanzip.blogspot.com/2011/10/cara-membuat-menu-drop-down-horizontal.html

~ Selamat Mencoba Semoga Berhasil ~

Cara Memasang Script Iklan Melayang (Ads popout)

Pada kesempatan ini i akan beri you tips Cara Memasang Script Iklan Melayang (Ads popout) trik ini cocok untuk blog yang mempunyai banyak widget atau gak mau menuhin sidebarnya kayak blog saya ini wkwkwk,... langsung saja ke TKP masbro

Berikut Screenshotnya :

View Demo
Cara bikinnya sangat simple or mudah berikut langkah-langkahnya :

1. Tambah Gadget/Add Gadget Pilih HTML JAVA SCRIPT
2. Masukan Script Berikut Di dalamnya

<style type="text/css">
#topbar {
 position:absolute;
 z-index: 100;
 padding: 8px;
 background: #eee;
 background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
 background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
 border: 1px solid #fff;
 border-radius: 10px;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-box-shadow: #600 0 2px 15px;
 -moz-box-shadow: #600 0 2px 10px;
 margin:0 auto 10px;
 float:left;
 color:rgba(0, 0, 0, 0.75);
 font-size: 12px;
 font-family: Verdana, serif;
 text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
 border:none;
}
#topbar .tombol {
 margin:0;
 padding-bottom:5px;
 text-align:right;
}
#topbar .tombol button {
 color:#FFFFFF;
 border: solid 1px #494949;
 margin:0;
 padding:2px 15px;
 cursor: pointer;
 text-shadow: 0 1px 1px rgba(0,0,0,.6);
 background: #5f5f5f;
 background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
 background: -moz-linear-gradient(top, red,  #454545);
}
#topbar .isi_iklan {
 background-color:#FFFFFF;
 margin:0;
 padding:4px;
 width: 468px;
 border: 1px solid #999;
}
</style>
<script src="http://blogcunayz.googlecode.com/files/js_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<!-- Kode Iklan Taruh Disini-->
</div>
</div>

5. Ubah Kata <!-- Kode Iklan Taruh Disini--> Dengan Script Iklan sobat.
6.Simpan Dan Lihat Hasilnya.

Beuh kayaknya postingnya kependekan ya,...?? yaudah kalo ada yang mau kasih tambahan tulis di kotak komentar ya ^_^

sumber: http://blogcunayz.blogspot.com/2011/07/pasang-script-iklan-melayang-ads-popout.html

Download Template Keren Gratis

Ok deh langsung saya kasih screenshot dan link download Template Blog Keren dan Gratis. Berikut, ini

Cara Mengganti Template:
1. Login ke blogger.
2. Rancangan >> Edit Html.
3. Download template di bawah salah satu.
4. Jika sudah, pada Edit Html, klik tombol "Browse", lalu cari template yang di download tadi, Klik "Open".
5. Jika sudah klik tombol "Unggah". Tunggu beberapa saat.
6. Jika keluar pernyataan widget, klik saja tombol "PERTAHANKAN WIDGET".
7. Lihat blog anda :).

DOWNLOAD DISINI

DOWNLOAD DISINI

DOWNLOAD DISINI

DOWNLOAD DISINI

Itu saja template keren yang saya share. Semoga sobat ada yang suka dengan diantara template diatas. Saya tunggu komentar sobat. Terima kasih.

Sumber : http://putupunyablog.blogspot.com/2012/07/download-template-keren-gratis.html#ixzz24jT0xZ7o

Membuat Menu Navigasi Rocking Rolling Rounded

Pertama kali melihat tampilan Rocking Rolling Rounded Menu dengan JQuery dan CSS3
. Namun dalam versi yang saya  kali ini terdapat penambahan  efek animasi icon menu yang berputar menggunakan jquery sehingga tampilannya menjadi lebih bagus dan menarik. Selanjutnya tinggal pilih tempat terbaik untuk meletakkan menu ini, misalnya diatas header atau dibawah header. Sudah pasti tampilan blog sobat akan menjadi tambah keren dah !!





VIEW DEMO HERE

Membuat Rocking and Rolling Rounded Menu dengan Jquery dan CSS3 :

1.  Pastikan dalam template sobat sudah dilengkapi dengan JQuery 1.3.2 ya. Kalau belum pasang aja script dibawah ini dan letakkan diatas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2.  Kemudian letakkan juga kode dibawah ini sesudah atau tepat dibawah kode JQuery 1.3.2 tadi.

<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>

<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

3.  Selanjutnya copy kode CSS dibawah ini dan paste tepat di atas kode ]]></b:skin>  dalam template.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}

#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}

#rocking-rolling .item{
position:relative;
background-color:#f0f0f0;
float:right;
width:52px;
margin:0px 5px; height:52px;
border:2px solid #ddd;
-moz-border-radius:30px;
-webkit-border-radius:30px;
border-radius:30px;
-moz-box-shadow:1px 1px 3px #555;
-webkit-box-shadow:1px 1px 3px #555;
box-shadow:1px 1px 3px #555;
cursor:pointer;
overflow:hidden;
}

#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}

#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}

#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}

#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}

#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}

#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}

#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}

#rocking-rolling .item_content a{
background-color:transparent;
float:left;
margin-right:7px;
margin-top:3px;
color:#bbb;
text-shadow:1px 1px 1px #fff;
text-decoration:none;
font-size:12px;
}

#rocking-rolling .item_content a:hover{
color:#0b965b;
}

#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}

#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

4.  Terakhir adalah tag HTML untuk memanggil menu navigasi Rocking Rolling Rounded yang dapat diletakkan dimana sobat menginginkan menu ini tampil, misalnya dibawah header atau di atas header. Posisi header dalam template biasanya ditandai dengan kode <div id='header-wrapper'>.

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</h2>
<p>
<a href='#'>Email</a>
<a href='#'>Twitter</a>
<a href='#'>Facebook</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_help'></a>
<div class='item_content'>
<h2>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>

<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>

<div style='clear:both;'></div>
</div>

<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

5.  Silahkan diedit JUDUL MENU, NAMA MENU serta Link Referensi # sesuai keinginan sobat.
6.  Save template anda.

 Selamat bereksprimen coba Membuat Rocking Rolling Rounded Menu dengan JQuery ini, kalo belum berhasil coba terus aja yaaacchh…!! Salam Blogger and happy nice blogging !