TUTORIAL KEPSUKTV

Archive for 2012-08-26

01 September 2012

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…

30 August 2012

BLOGGER

Cara Membuat Efek Hover Captions Dengan Animasi Pada Gambar Blog

Leave a Reply

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

BLOGGER

Cara Membuat Menu Horizontal Drop Down Versi 2

Leave a Reply

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4wjXQhBtZnSXxICdGDfh1XBN-XaG0WHZqRqfmraeJwMgXSNypWIoKNqMfAE3j2KIEmvPRC3zP9JTpDGPYm0mA63ENTBHdJzVV0CtnVwGP6UHLML-W30XQPYYdiETuL9ZPqpyxVCPkI2-/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFHfI60KK1gSnGc1T375zC02HEgJXziidPvdG0i6VSMmgQ_ZUCmRs4QUZoHoV1PeHPoBFpaCT_Kfsgy_7UpUMDVlNYQ6QPuVwnao2jH-Z8Ou3i8FaaFFZ93xLroOA0nxJfaGs0yda_8dT8/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWbj6fYrg7bRVWsiKQ1q7HD52eS8sLN-NhJyH7SkNWUtEtuPyZ6lngV-8cBGG1w8C9mouaefbikKmYF5aLHfIK7Wz3QM3ePAhbcOll5VljgGafbv_D1WsogbYL9cX-sL9b2x7kkrt4zwrO/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWbj6fYrg7bRVWsiKQ1q7HD52eS8sLN-NhJyH7SkNWUtEtuPyZ6lngV-8cBGG1w8C9mouaefbikKmYF5aLHfIK7Wz3QM3ePAhbcOll5VljgGafbv_D1WsogbYL9cX-sL9b2x7kkrt4zwrO/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuMo71i2EwxKQjIVIElTUT_h3iQvOWjqPc4jTUmG01hkHHRMyYadHaQeWavGC3Dn7bmK7g8yPMCocxCCqAGC7SuRcuWT__rgPmw9q0Uid8G2y7ffYeZNdEviI37cIQj7c-WoUoiE80tB8I/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;
}

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

BLOGGER

Cara Membuat Menu Horizontal Drop Down Dengan CSS3

Leave a Reply

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

28 August 2012

BLOGGER

Cara Memasukkan Tanda Tangan di Blog

Leave a Reply

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 == "item"'>
<div style='text-align:right; margin:55px 5px 0 0'><img alt='tanda tangan' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAnMcKdvJxARQ2Zf7ls9Mkan6LlBnJkSfigpRnGfwaLUz0FhmZXKcDypCe5BaFABRkWPG5-uBpBh44Q6TBlsLRTIHSG1wktJJ-X9QwB4olKSOWirFULg4AKllI7Q3u8eqzmyQ8CSyyFg/s1600/tanda+tangan.png' style='border:0px; width:100px;'/></div>
</b:if>

Simpan template lalu ucapkan alhamdulillah...
Selesai...
ganti url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJAnMcKdvJxARQ2Zf7ls9Mkan6LlBnJkSfigpRnGfwaLUz0FhmZXKcDypCe5BaFABRkWPG5-uBpBh44Q6TBlsLRTIHSG1wktJJ-X9QwB4olKSOWirFULg4AKllI7Q3u8eqzmyQ8CSyyFg/s1600/tanda+tangan.png) dengan url tanda tangan anda

27 August 2012

BLOGGER

cara mudah membuat link pop up

Leave a Reply

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

26 August 2012

BLOGGER

Cara Membuat Menu Drop Down Horizontal Dibawah Header Blog

Leave a Reply

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 :

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

#tejahtc{ height:33px; width:1000px; margin:0 auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBg22sBT6z2iy-GtOj1Cls-vFs1Aspjm-wCDo5VZqBSdubxCEIveQdj1G9XP44KH1OM7nO_zo8taBBK0L38ZBRpMzajEHm1LKOnUThXb1UbghBtem_kvW-1wCWffeKpuK3Bi0x55hxQ0m7/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBg22sBT6z2iy-GtOj1Cls-vFs1Aspjm-wCDo5VZqBSdubxCEIveQdj1G9XP44KH1OM7nO_zo8taBBK0L38ZBRpMzajEHm1LKOnUThXb1UbghBtem_kvW-1wCWffeKpuK3Bi0x55hxQ0m7/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4wjXQhBtZnSXxICdGDfh1XBN-XaG0WHZqRqfmraeJwMgXSNypWIoKNqMfAE3j2KIEmvPRC3zP9JTpDGPYm0mA63ENTBHdJzVV0CtnVwGP6UHLML-W30XQPYYdiETuL9ZPqpyxVCPkI2-/) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4wjXQhBtZnSXxICdGDfh1XBN-XaG0WHZqRqfmraeJwMgXSNypWIoKNqMfAE3j2KIEmvPRC3zP9JTpDGPYm0mA63ENTBHdJzVV0CtnVwGP6UHLML-W30XQPYYdiETuL9ZPqpyxVCPkI2-/) 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'>

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 ~

BLOGGER

Cara Memasang Script Iklan Melayang (Ads popout)

Leave a Reply

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

</div>
</div>

5. Ubah Kata  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

BLOGGER

Download Template Keren Gratis

Leave a Reply

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8tdOcDeDvS41DZ2yevH4U0Z50Iq2ai0WGykEMgVrTqOif66xuASkTUKX6g7M5lXxA7872ZKtk6ekpsXcOro4ZwJBxKIZ92N8Sz6g7Z9KIc_yZr63aY_vxMeOAuNvqVCSpgMslnjvJxEW1/s200/2.jpg

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

BLOGGER

Membuat Menu Navigasi Rocking Rolling Rounded

Leave a Reply

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 + "search/"' 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 !

01 September 2012

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

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

30 August 2012

Cara Membuat Efek Hover Captions Dengan Animasi Pada Gambar Blog

Cara Membuat Menu Horizontal Drop Down Versi 2

Cara Membuat Menu Horizontal Drop Down Dengan CSS3

28 August 2012

Cara Memasukkan Tanda Tangan di Blog

27 August 2012

cara mudah membuat link pop up

26 August 2012

Cara Membuat Menu Drop Down Horizontal Dibawah Header Blog

Cara Memasang Script Iklan Melayang (Ads popout)

Download Template Keren Gratis

Membuat Menu Navigasi Rocking Rolling Rounded

Search Bar

Popular Posts

Labels

Followers