tutorialsamak: Agustus 2014

Senin, 25 Agustus 2014

0 Cara Mudah Bikin Vidio Melayang Di Pembuka'an

Diposting oleh Unknown di 04.00

Apa Kabar Sobat Semua Di Akhir Pekan,ini Dan Pada Kesempatan Kali,ini Kami Mau
Berbagi Bagaimanah Cara Pasang Vidio Melayang Di Pembuka'an Di Blog Sobat. Pada Umumnya Itu Fanz Facebook Atau Iklan Yang Sering Kami Temuai
Tapi Kali,ini Kami Mau Yang Berbeda Tapi Vidio Yang Melayang Kayak Hantu Heheheh..
Buat Sobat Yang Mau Pasang Buat Sambutan Para Pengunjung Blog Sobat Silakan
Tapi Kalu Sebagian Menggagu Gak Usah Di Pasang Beri Comments Saja'y Heheh

Seperti Biasa Yuk Lihat Demonya Dulu Kaya Apa,ci Hasilnya Demonya Vidio Melaya2

Gambar Di Atas Kira2 Contohnya Mas Bro.
Yang Mau Pasang Silakan Sobat Copy Code Di Bawah Pastekan Pas Di Atas Code <head>

Langkah 2: Copy Css Nya Di Bawah Pastekan Pas Di Bawah Code <head>
Silakan Sobat Bisa Di Ganti Dengan Vidio Sabat. Sobat Tinggal Ganti
http://www.youtube.com/embed/DugzzBwwKgs. Dengan Alamat Youtube
Sobat.

.iclose {
float: right;
background: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZbnNLywJH06BpZkIf9DNAub7MVfwTepUMSq5BsgYLRkQ1oy7d76XCCl8e9JRGLHqT6OCx8x2cTmhxelnJiNC4dQwsaOdvm9eLgrIQF0ATh0fKhvGFTY0wQH_GoyJZiPrwnljixrGDOXo/s1600/Stop+Mas+Selladrt.PNG)
 no-repeat;
width: 20px;
height: 20px;
cursor: pointer;
}

#ivc {
width: 100%;
height: 100%;
opacity: 0.25;
position: fixed;
background: black;
z-index: 1;
top: 0;
left: 0;
display: block;
}
#ivcontent {
width: 500px;
padding: 15px 15px 15px 15px;
-webkit-box-shadow: #2A407A 0px 0px 10px inset;
border-radius: 10px;
background-color: rgba(147, 164, 197, 0.36);
background: #cedbe9; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #cedbe9 0%, #aac5de 10%, 
#3a84c3 36%, #6199c7 50%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b
 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, 
color-stop(0%,#cedbe9), color-stop(10%,#aac5de), 
color-stop(36%,#3a84c3), color-stop(50%,#6199c7), 
color-stop(59%,#419ad6), color-stop(71%,#4bb8f0), 
color-stop(84%,#3a8bc2), color-stop(100%,#26558b)); /* Chrome,Safari4+ 
*/
background: -webkit-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 
10%,#3a84c3 36%,#6199c7 50%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 
100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 10%,#3a84c3 
36%,#6199c7 50%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* 
Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #cedbe9 0%,#aac5de 10%,#3a84c3 
36%,#6199c7 50%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* 
IE10+ */
background: linear-gradient(135deg,  #cedbe9 0%,#aac5de 10%,#3a84c3 
36%,#6199c7 50%,#419ad6 59%,#4bb8f0 71%,#3a8bc2 84%,#26558b 100%); /* 
W3C */
filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* 
IE6-9 fallback on horizontal gradient */
float: left;
left: 400px;
top: 100px;
position: absolute;
z-index: 2;
}

</style>

Sekian Dulu Dari Kami Cara Mudah Bikin Vidio Melayang Di Pembuka'an
Semoga Berguna Buat Sobat Semuah.

0 Cara Membuat Menubar Animation Transform

Diposting oleh Unknown di 03.18

Assalamu'alaikum. Apakabar sobat semuah pada kesempatan kali ini kami mau berbagi tentang Tutorial Cara Membuat Menubar Animation Transform kenapa kami namakan Menubar Horizontal Animation Transform karna Menubar Animation Transform delengkapi dengan Css Animation Transform sehingga
kelihatan 3D nya D: heheh.

Menubar Animation Transform Mempunya Kelebihan dari Menubar yang lain karna jika
Mous sobat menyentuhnya maka akan Muncul Linik yang sobat sentuh Dari bawah keatas
sobat bisalihat Gambar yang di atas aq kasih tanda panah
mau tau kaya apa si Menubar Animation Transform silakan Lihat demonya
LIHAT DEMONYA

Buat sobat yang mau pasang silakan ikuti langkah-langkah di bawah
Langkah: 1 Seperti biasa sobat masuk ke blog sobat semuah
Langkah: 2 Copy Kode Css di bawah Pastekan pas di atas kode </b:skin>


<style>
/* Horyzontal Droupdown menu
Original : Desain Selladrt  
Website : By Url www.bloggertutoria.com
----------------------------------------------- */
#sella-wrapper{background:#1A1A1A;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #00ff00;border-top:3px solid #00ff00;}
#barsella{width:900px;height:50px;margin:0 auto}
#selladrtmarkotop{width:100%}
#selladrtmarkotop,#selladrtmarkotop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#selladrtmarkotop a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#selladrtmarkotop a.arrow{background:#222;/* Original : Desain Selladrt */background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#selladrtmarkotop li{float:left;position:static;width:auto;}
#selladrtmarkotop li ul,#selladrtmarkotop ul li{width:170px}
#selladrtmarkotop ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: /* Original : Desain Selladrt */rotate(360deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);}
#selladrtmarkotop li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;}
  #selladrtmarkotop li:hover a,#selladrtmarkotop a:active,#selladrtmarkotop a:focus,#selladrtmarkotop li.hvr a{background:transparans;color:#00ff00;font-size:15px;border-top:1px solid #cccccc;border-left:6px solid #069;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-animation:transform-translate 1s;
-moz-animation:transform-translate 1s;
-ms-animation:transform-translate 1s;
-o-animation:transform-translate 1s;
animation:transform-translate 1s;}
#selladrtmarkotop li:hover ul,#selladrtmarkotop li.hvr ul{display:block}
#selladrtmarkotop li:hover ul a,#selladrtmarkotop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#selladrtmarkotop li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#selladrtmarkotop ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#selladrtmarkotop a span,#selladrtmarkotop a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;/* Original : Desain Selladrt */text-shadow: 1px 2px 2px #000}
#selladrtmarkotop li:hover a span,#selladrtmarkotop li:hover a.arrow span{color:#f1c822}
.clearfix:after{content:&quot;.&quot;;display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#blogger {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#tutorial{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #tutorial{margin-right:-143px;voice-family: &quot;\&quot;}\&quot;&quot;; voice-family:inherit; }
* html #tutorial{margin-right:17px;}
* html #blogger {position:absolute;}</style>

Langkah:3 Copy Kode Html Atau Div nya di bawah Pastekan Pas Di bawah Kode <body>


<div id='blogger'>
<div id='tutorial'>
<div id='sella-wrapper'>
<div id='barsella'>
<ul id='selladrtmarkotop'>
<li><a href='http://www.bloggertutoria.com/' title='Bloggertutorial'><span>Bloggertutorial</span>Halaman Depan</a></li>
<li><a href='http://www.bloggertutoria.com/2013/01/daftar-linik.html' target='_blank' title='Sitemap'><span>Sitemap</span>Daftar Isi</a></li>
<li><a class='arrow' href='#'><span>Support</span>Kontak Kami</a>
<ul>
<li><a href='#' target='_blank' title='Google Plus'>Google Plus</a></li>
<li class='hr'></li>
<li><a href='https://twitter.com/selladrt' target='_blank' title='Twitter'>Twitter</a></li>
<li class='hr'></li>
<li><a href='https://www.facebook.com/selladrt' target='_blank' title='Facebook'>Facebook</a></li>
</ul>
</li>
<li><a class='arrow' href='#' title='Tutorial Blog'><span>Tutorial Blog</span>Berbagai Tutorial</a>
<ul>
<li><a href='#' rel='nofollow' target='_blank' title='Widget Blog'>Widget Blog</a></li>
<li class='hr'></li>
<li><a href='#' rel='nofollow' target='_blank' title='CSS'>CSS</a></li>
<li class='hr'></li>
<li><a href='#' rel='nofollow' target='_blank' title='Seo'>Seo</a></li>
</ul>
</li>
<li><a href='http://www.bloggertutoria.com/search/label/Template' target='_blank' title='Template'><span>Template</span>Antar Blogger</a></li>
<li><a href='http://www.bloggertutoria.com/2012/12/teman-yang-terbaik-top-commenters.html' target='_blank' title='Sahabat'><span>Sahabat</span>Sahabat</a></li>
<li><a href='http://www.bloggertutoria.com/' target='_blank' title='CSS'><span>CSS</span>CSS</a></li>
<li><a href='http://www.bloggertutoria.com/' target='_blank' title='Tutorial'><span>Tutorial</span>Tutorial</a></li>
<li><a href='http://www.bloggertutoria.com/' target='_blank' title='Modiv Komentar'><span>Modiv Komentar</span>Modiv Komentar</a></li>
</ul></div></div></div></div>

Minggu, 24 Agustus 2014

0 Cara Membuat Credit Tidak Bisa Di Hapus

Diposting oleh Unknown di 21.26

Kali Ini saya akan membuat tutorial agar credit ga bisa di hapus.. Dengan memakai JS Dan Encrypt.. silahkan lihat tutorialnya di bawah ini.. baca dengan teliti..

1. Pertama-tama siapkan script creditnya....

2. Copas javascript di bawah ini di atas </head>

<script type='text/javascript'>
	//<![CDATA[

// ]]>
	</script>

Kalau udh di Copas Ganti Url yg warna Merah Dengan Url Kamu, Dan ganti Id Scriptnya yg bewarna Orange Dengan Id script Credit kamu Contoh id script ={<div id="Copas" />}

3. Kalau sudah selesai tahap 1dan2 Sekarang Script Creditnya di encrypt {Disini}

Contoh SS Cara encrypt Javascript

klik Convert to JavaScript syntax → untk agar scriptnya menjadi Javascript

Kalau sudah jadinya akan kaya gini

document.write("<div id=\"copas\"><span>Copyright:Zimibot<\/span>:<span><a href=\"\"> Design: Harris Munahar<\/a><\/span><\/div>");

Dan tambahin kaya di bawah ini Di atas dan di bawah..

<script type='text/javascript'> //<![CDATA[ Javascript Credit // ]]> </script>

Kalau sudah jadinya begini..

<script type='text/javascript'> //<![CDATA[

document.write("<div id=\"copas\"><span>Copyright:Zimibot<\/span>:<span><a href=\"\"> Design: Harris Munahar<\/a><\/span><\/div>");

// ]]> </script>

4. Kalau sudah jadi kaya tahap 3.. silahkan engcrypt kembali javascript Creditnya pada tahap3 Ke ecnrypt mode2 {Disini}

Screenshotnya kaya gni

Klik OBFUSCATE Untuk Mengencryptnya

Kalau sudah jadinya kaya gni..
<script type='text/javascript'> //<![CDATA[
var _0x117e=["\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x63\x6F\x70\x61\x73\x22\x3E\x3C\x73\x70\x61\x6E\x3E\x43\x6F\x70\x79\x72\x69\x67\x68\x74\x3A\x5A\x69\x6D\x69\x62\x6F\x74\x3C\x2F\x73\x70\x61\x6E\x3E\x3A\x3C\x73\x70\x61\x6E\x3E\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x22\x3E\x20\x44\x65\x73\x69\x67\x6E\x3A\x20\x48\x61\x72\x72\x69\x73\x20\x4D\x75\x6E\x61\x68\x61\x72\x3C\x2F\x61\x3E\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65"];document[_0x117e[1]](_0x117e[0]);

// ]]> </script>

tambahin kaya gni lagi di atas dan di bawahnya

<script type='text/javascript'> //<![CDATA[ <<Atas Bawah>> // ]]> </script>

Kalau sudah ganti credit yg asli dengan Credit Javascript...

Semoga Berhasil :3

0 TUTORIAL CLLONE BLOG KE BLOG

Diposting oleh Unknown di 21.25

Emang ngeclone template itu Gampang-gampang sulit karena itu saya membuat tutorialnya untuk kalian

Kali ini saya akan membuat tutorial cara ngeclone template secara cepat dan sampai ke akarnya.. silahkan pelajarin tahap-tahapnya di bawah ini..

1. Siapkan Template kosong yang tidak ada cssny,js dan script.. yang hanya ada 1 widget yang di sisahin..

Contoh gambar template kosong..

Tampilan di edit Bloggernya

Tampilan Di Blognya

Bener-bener kosong

Demo

Kalau ga mau susah-susah cara membuat template kosongnya silahkan download ajah template kosongnya disini >>Download Template Kosong <<<

2. Lalu cari target untuk di clone.. Contohnya targetnya blog ini >> Demo yang menurut saya gampang untuk di clone.. Kalau sudah ke target. CTRL-U pada Blognya lalu ambil scriptnya. lihat gambar di bawah ini

3. kalau sudah di copy pastekan Script pada gambar yang ada di atas ke template kosong di bawah <body>.. Seperti gambar di bawah ini..

4. Tinggal di simpen Templateny..

5. Kalau ada kesalahan kaya begini.. Tinggal Hapus kaya beginian </i> yg di tandain warna merah pada gambar di bawah ini..

6. kalau sudah di hapus semua tanda kaya beginian </i> Tinggal di simpen lagi templateny..

7. kalau sudah tidak ada kesalahan lagi pada templateny.. Kembali pada Blog si target >> Target <<

8. Lalu ambil Semua cssny Dan Js Sperti Gambar di bawah ini..

#Kalau sudah Simpen kembali Templateny.. Kalau berhasil kesimpen silahkan Lihat blognya..

#Itu masih Postingannya Masih blom otomatis masih bawaan Blog target. Nanti bikin postingannya di Part2 yg akan datang..

Semoga Bermanfaat.. :3

0 Cara memasang 2 Tema Dalam 1 Blog

Diposting oleh Unknown di 20.23

Kali ini saya akan memberi tau cara membuat 2 Tema Dalam 1 Blog. Silahkan di simak Tutorialnya di Bawah ini :)

Pertama-tama kalian harus memasukan Stylenya terlebih dahulu.. Taroh Css Di bawah ini di atas </head>

<style> /*Dock Skin*/ #dock-skin{display:none;overflow:hidden;font:18px Courier New,Courier,monospace;color:#A9A9F5; } #dock-skin{background:#A9A9F5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAADCAYAAACwAX77AAAAFklEQVQI12NgYGCQ+v//PwM6ZiBZAgBcVS0iPBgVUgAAAABJRU5ErkJggg==) repeat center;position:fixed;top:0;left:0;width:99%;height:98%;overflow:hidden;cursor:move;border-left:5px solid #8181F7;border-right:5px solid #8181F7;border-top:5px solid #8181F7;border-bottom:10px solid #8181F7;box-shadow:inset 0 0 0 2px #C4CDE0,inset 0 0 15px #000;z-index:9; } #h3{width:100%;height:95px;position:absolute;top:55px;font:bold 105px/95px Courier New,Courier,monospace;text-transform:capitalize;letter-spacing:-15px;background:#8181F7;box-shadow:0 0 0 2px #C4CDE0,0 0 15px #000;cursor:help; } .h3-first{font:bold 140px/50px Courier New,Courier,monospace;background:#8181F7;padding-left:10px;letter-spacing:10px;color:#A9A9F5;margin-left:10px;border-radius:10px;border:2px solid #C4CDE0;box-shadow:inset 0 0 10px #000,0 0 5px #000; } .copy{position:absolute;top:70px;right:5px;background:#A9A9F5;display:inline-block;padding:3px;border:4px double #8181F7;font:12px Verdana;line-height:10px;color:#8181F7;letter-spacing:1px; } .nice:hover{color:#8181F7; } .nice{position:absolute;bottom:15%;right:50px;z-index:-999;font:bold 60px Courier New,Courier,monospace;color:#C4CDE0;letter-spacing:-10px;text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000,0 0 5px #000; } #dock-skin a:link,#dock-skin a:visited{color:#A9A9F5;text-shadow: -1px 0px #000, 0px 1px #000, 1px 0px #000, 0px -1px #000,0 0 10px #000;text-decoration:none;-webkit-transition:all 0.2s ease-out;transition:all 0.2s ease-out; } #dock-skin a:hover{color:#ddd; } #lefdock{position:absolute;width:100%;height:30%;bottom:30%;left:0;display:block;padding:0 9% 0 9%; } #lefdock a{float:left;display:inline-block;width:15%;height:80%;border-radius:20px;padding:5px;border:2px solid #C4CDE0;box-shadow:0px 0px 15px #8181F7,0 0 40px #000,inset 0 0 30px #000;text-align:center;font-size:0px; } #lefdock a:hover{border-radius:5px;background-size:85% 95%;display:inline-block;width:15%;height:90%;background-color:#ddd;box-shadow:0 0 50px #000,inset 0 0 10px #000;border:2px solid #C4CDE0;-webkit-transform: rotate(10deg);transform: rotate(10deg);z-index:9; } #lefdock .home{background:#8181F7 url(https://sites.google.com/site/binkbenk77/omah.png) no-repeat center;background-size:80% 60%; } #lefdock .isi{background:#8181F7 url(https://sites.google.com/site/binkbenk77/isi.png) no-repeat center;background-size:80% 60%; } #lefdock .quest{background:#8181F7 url(https://sites.google.com/site/binkbenk77/blog.png) no-repeat center;background-size:80% 60%; } #lefdock .follow{background:#8181F7 url(https://sites.google.com/site/binkbenk77/quest.png) no-repeat center;background-size:80% 60%; } #lefdock .fb{background:#8181F7 url(https://sites.google.com/site/binkbenk77/kontak.png) no-repeat center;background-size:80% 60%; } #thempik{height:55px;width:100%;margin:0 auto;position:absolute;bottom:10px;z-index:-999; } #sikil{color:#BDBDBD;font:bold 18px Courier New,Courier,monospace;text-align:center;text-shadow:2px 2px 2px #000;margin:0 auto;width:95%;padding:10px;background:#8181F7;box-shadow:inset 0 0 20px #000,0 0 10px #000;border-radius:5px;border:2px solid #C4CDE0; } #sikil a{color:#BDBDBD;text-shadow:2px 2px 2px #000; } #sikil a:hover{color:#ddd;text-shadow:-1px 0 #000,0 1px #000,1px 0 #000, 0 -1px #000; } /*button change skin*/ .open{display:block;position:absolute;top:10px;right:100px;padding:5px;background:#ddd;border-radius:0 0 5px 5px;border:1px solid #fff;cursor:pointer;box-shadow:0 0 0 1px #888,inset 0px 0 1px #555;opacity:0.8;font:10px Verdana; } .open:before{content:"Change Skin";font:10px Verdana;color:#444; } .open:hover{background:#fa0;padding-top:15px;transition:all 0.5s;-webkit-transition:all 0.5s; } .closed{display:block;position:absolute;top:-5px;right:150px;padding:5px;background:#8181F7;border-radius:5px;border:1px solid #C4CDE0;box-shadow:0 0 5px #000;cursor:pointer;font:12px Verdana; } .closed:before{content:"Change Skin";font:12px Verdana;color:#ddd;text-shadow:0 0 2px #000; } .closed:hover{padding-top:15px; } /*tooltip dock skin*/ #tooltip{position:relative; } #tooltip span{display:block;position:absolute;top:-1000px;font:11px Courier New,Courier,monospace;color:#fff;text-align:center;padding:5px;border-radius:10px;box-shadow:0px 0px 0 1px #000;border:1px solid #ddd;background:#08088A;opacity:0.7;width:200px;z-index:9; } #tooltip span:before{content:"i";position:absolute;top:-10px;left:-10px;font:bold 40px/40px Courier New,Courier,monospace;color:#ddd;text-shadow:0 0 3px #000;border-radius:100%;background:#000;border:1px solid #ddd;padding:5px;width:40px;height:40px; } #tooltip:hover span{position:absolute;top:-50px;left:0;-webkit-transform:rotate(-10deg);transform:rotate(-10deg); } .closed:hover #tooltip span{position:absolute;top:20px;left:0; } .open:hover #tooltip span{position:absolute;top:10px;right:0;width:200px;background:#aa0; } #tooltip p{font:bold 20px/35px Courier New,Courier,monospace;margin:0 0 0 30px; } #tooltip em{font:bold 20px/20px Courier New,Courier,monospace; }</style>

Yang Saya tandai Warna merah ganti penempatan menu change skinnya sesuka Kalian :)

Cara Ke dua Taroh Javascript Di bawah ini di atas </head> Juga

Cara Ke Tiga Taroh Script Di bawah ini di bawah <body>

<a class='open' href='javascript:toggle6()' onclick='clicksound.playclip()'><div id='tooltip'>

<span><p>

Information</p>

<em>V</em>iew On Dock Skin</span></div>

</a><div id='dock-skin'>

<a class='closed' href='javascript:toggle6()' onclick='clicksound.playclip()'><div id='tooltip'>

<span><p>

Information</p>

<em>V</em>iew On Sledding Skin</span></div>

</a><div id='h3'>

<a href=''><span class='h3-first'>H</span>arris Munahar</a> ®</div>

<div class='copy'>

My Personal Blog</div>

<div class='loading' id='lefdock'>

<a class='home' href='/p/portal.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()'>BLOG portal<span><p>

Blog Portal</p>

<em>U</em> can see my portal</span></a><a class='isi' href='/p/archive.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Blog Archive<span><p>

Blog Archive</p>

<em>A</em>ll Blog Content</span></a><a class='quest' href='/p/new-entry.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Blog Entry<span><p>

Blog Entry</p>

<em>U</em> Can Read New Entry</span></a><a class='follow' href='/p/forum.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Blog Forum<span><p>

Blog Forum</p>

<em>U</em> Can Write Anything</span></a><a class='fb' href='/p/about-me.html' id='tooltip' onclick='clicksound.playclip()' onmouseover='mouseoversound.playclip()' target='_blank'>Contact Us<span><p>

Contact Us</p>

<em>U</em> Can Find My Place</span></a></div>

<div class='nice'>

Share Any More</div>

<div id='thempik'>

<div id='sikil'>

||Copyright 2013 By : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>| |Template Created By : <a href=' http://tutorealsamak.blogspot.com/

'>Harris Munahar</a>||</div>

</div>

</div>

Selamat Mencoba :)

Dan jadinya akan seperti blog ini http://tutorealsamak.blogspot.com /

Screen SHotnya

After

Before

Minggu, 10 Agustus 2014

0 Buka Tutup - Show Hide Komentar Blogger

Diposting oleh Unknown di 05.36

Selamat datang kembali,anda sedang membuka halaman Buka Tutup - Show Hide Komentar Blogger yang telah kami publikasikan di blog sederhana berkonsep Tutorial Blog dan Seo Blogspot ini.Kami menyampaikan terima kasih atas kunjungan anda,dan kami ucapkan selamat membaca!

Cara Membuat Buka Tutup Komentar Blogger / Expand-Collapse Comment jQuery Slide

Untuk screenshotnya lihat gambar ini gan:

buka tutup show hide comment collapse blogger.

Lihat DEMO-nya di SINI

Bagaimana Langkah dan Cara Menerapkan Show Hide Comment Box / Expand Collapse Komentar Blogger?

Pilih Dashboard lalu pilih Templates kemudian pilih Edit HTML,dan cari kode berikut (Gunakan Ctrl+F):

</head>

Jika sobat sudah menemukannya,tepat diATASnya letakkan script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ var panelSelector = '#comments', openPanelText = "Tampilkan Komentar", closePanelText = "Tutup Komentar", slideDownPanelSpeed = 600, slideUpPanelSpeed = 400; //]]> </script> <script type='text/javascript'> </script> <script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

Setelah itu,cari kode berikut:

]]></b:skin>

Jika sudah sobat ketemukan,tepat diATASnya letakkan barisan kode ini:

a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative; }a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white; }a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222; }div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Simpan template.

Catatan:
Sobat harus mengaktifkan komentar di blogger terlebih dahulu,untuk bantuan mungkin sobat bisa rujuk di bagaimana mengatur komentar blog.
Selamat mencoba :D

Sabtu, 09 Agustus 2014

0 CSS Floating Menu plus css3 Effects

Diposting oleh Unknown di 19.04

CSS Floating Menu ini telah dikembangkan dengan melibatkan kode css3 transition dan css3 transformation sehingga terlihat jauh lebih dinamis dibandingkan apbila kita hanya menggunakan kode css saja. CSS3 transition & css3 transformation difungsikan untuk menciptakan gerak animatif saat pemunculan menu sekaligus memberi efek animatif saat cursor menyentuh link menu. Penggunaan scroller dimaksudkan agar menu punya kapasitas daya tampung lebih (sebanyak anda suka).

DEMO

Cara membuat :

Login ke Blogger.
Setelah Dasbor (Dasboard) telihat, cari dan klik "Design (Rancangan)".
Halaman baru kembali akan terlihat. Klik "Edit HTML".
Lakukan "Backup Template".
Cari kode "]]></b:skin>"
Copy dan pastekan kode css di atas kode "]]></b:skin>"
Klik "Simpan Template (Save Template)".
Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget" yang terdapat di "Elemen Laman (Page Elemen)".
Selesai (Finish).

Kode CSS :

#GRboxfloatingmenu{
       position:fixed;
       top:100px;
       left:-360px;
       width:400px;
       height:150px;
       transition:0.8s ease-in 3s;
       -o-transition:0.8s ease-in 3s;
       -moz-transition:0.8s ease-in 3s;
       -webkit-transition:0.8s ease-in 3s;
       -ms-transition:0.8s ease-in 3s;
}
#GRboxfloatingmenu:before{
       position:absolute;
       top:55px;
       right:-55px;
       transform:rotate(-90deg);
       -o-transform:rotate(-90deg);
       -moz-transform:rotate(-90deg);
       -webkit-transform:rotate(-90deg);
       -ms-transform:rotate(-90deg);
       width:130px;
       height:40px;
       content:"Daftar Menu";
       background:rgba(0,0,0,0.5);
       color:#6FF;
       padding-left:20px;
       line-height:36px;
       font-size:18px;
       font-weight:bold;
}
#GRboxfloatingmenu:hover{
       left:0;
       z-index:9;
}
#GRboxfloatingmenu:hover,.floating-menu a{
       transition:0.8s ease-in;
       -o-transition:0.8s ease-in;
       -moz-transition:0.8s ease-in;
       -webkit-transition:0.8s ease-in;
       -ms-transition:0.8s ease-in;
}
.floating-menu{
       postion:absolute;
       right:-400px;
       top:0;
       border-top:40px solid #888;
       border-left:4px solid #666;
       border-right:4px solid #888;
       border-bottom:20px solid #666;
       background:#eee;
       width:320px;
       height:350px;
       z-index:100;  
       overflow:auto;
       color:#FFCC33;
       padding:20px 15px;
}
.floating-menu h3{
       font-size:16px;
       font-weight:bold;
       margin:3px 0;
       padding:3px 6px;
       background:#444;
}
.floating-menu a{
       display:block;
       padding:2px 6px;
       border-bottom:1px dotted #888;
       color:#111;
       font-family:Arial;
       text-shadow:2px 2px 2px #888;
       font-size:12px;
       text-decoration:none;
       line-height:20px;
}
.floating-menu a:hover{
       background:#930;
       color:#fff;
}

xHTML :

<div id="GRboxfloatingmenu">
<div class="floating-menu">
<h3>Judul Menu Pertama</h3>
<a href="Link_Menu-1">Menu-1</a>
<a href="Link_Menu-2">Menu-2</a>
<a href="Link_Menu-3">Menu-3</a>
<a href="Link_Menu-4">Menu-4</a>
<a href="Link_Menu-5">Menu-5</a>
<a href="Link_Menu-6">Menu-6</a>
<a href="Link_Menu-7">Menu-7</a>
<a href="Link_Menu-8">Menu-8</a>

<h3>Judul Menu Kedua</h3>
<a href="Link_Menu-1">CSS</a>
<a href="Link_Menu-2">HTML</a>
<a href="Link_Menu-3">Javascript</a>
<a href="Link_Menu-4">Adobe Photoshop</a>
<a href="Link_Menu-5">Animasi Gif</a>
<a href="Link_Menu-6">Menu Horisontal</a>
<a href="Link_Menu-7">Menu Vertical</a>
<a href="Link_Menu-8">Text Effects</a>
</div>
</div>

Catatan/Keterangan :

Jika anda membutuhkan panduan dan tutorial tentang cara "Backup Template", "Cara mencari kode html" dan berbaga "Cara menyimpan javascript, kode css dan xHTML", silahkan buka Special Tutorials di menu sebelah kiri halaman.

Link_Menu-1 s/d Link_Menu-8 merupakan URL setiap menu yang digunakan.
Contoh menggunakan link:

<a href="http://gubhugreyot.blogspot.com/2012/03/menampilkan-profil-pengunjung-dg-hover.html" title="Cara membuat hover efek untuk menampilkan gambar berbeda dengan css3">Cara menampilkan profil pengunjung..</a>

Untuk menambah daftar menu dilakukan dengan menambah xHTML :

<h2>Judul Menu Kedua</h2>
<a href="Link_Menu-1">CSS</a>
....
....
<a href="Link_Menu-...">CSS</a>

0 Membuat Menu melayang tetap diatas (Sticky Navigation Menu)

Diposting oleh Unknown di 18.23

Kali ini saya akan berbagi tentang membuat menu melayang diatas diatas halaman atau istilah kerenya Sticky Navigation Menu. Sticky navigation menu ini akan bekerja pada sebuah halaman web yang tingginya melebihi ukuran layar/screen dan halaman tersebut discroll ke bawah. Model menu ini dibuat dengan menggabungkan jquery dan css.
berikut codeh nya

<html>
<head>
<title>Menu melayang tetap diatas (Sticky Navigation Menu)</title>
<style type="text/css">
#halaman {
    width:560px;
    margin:0 auto;
    font:14px "Trebuchet MS";
}
#header, #footer {
    height:80px;
    background-color:#009900;
    padding:5px;
    box-shadow:#666 1px 1px 2px;
    text-align:center;
}
#menu {
    padding:10px;
    background-color:#00CC00;
    width:540px;
    margin:auto;
    box-shadow:#666 1px 1px 2px;
}
#menu ul {
    list-style:none;
    margin:0;
    padding:0;
}
#menu ul li {
    display:inline;
    padding:1px;
}
#menu a {
    color:#fff;
    background-color:#006600;
    text-decoration:none;
    padding:3px 10px;
}
#menu a:hover {
    background-color:#008000;
}
#konten {
    background-color:#E2FEE4;
    padding:5px;
}
#topNav {
    width:100%;
    z-index: 99;
    bottom:auto;
}
</style>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function() {
    // menentukan objek yang dijadikan menu melayang yaitu #topNav
    var float_nav_offset_top = $('#topNav').offset().top;
    var float_nav = function(){
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // kondisi jika halaman di scroll maka menu melayang diletakkan di posisi atas
        if (scroll_top > float_nav_offset_top) {
            $('#topNav').css({ 'position': 'fixed', 'top':0, 'left':0 });
        } else {
            $('#topNav').css({ 'position': 'relative' });
        }
    };
    // menjalankan fungsi
    float_nav();
    $(window).scroll(function() {
        float_nav();
    });
});
</script>
</head>
<body>
<div id="halaman">
<div id="header">
    <h1>www.zainalhakim.web.id</h1>
</div>
<div id="topNav">
    <div id="menu">
      <ul>
        <li><a href="#">Beranda</a></li>
        <li><a href="#">Tentang Saya</a></li>
        <li><a href="#">Kontak</a></li>
        <li><a href="#">Buku Tamu</a></li>
      </ul>
    </div>
</div>
<div id="konten">
    <p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
    <p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
    <p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
    <p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
    <p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
    <p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
    <p>Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. Selama anda mau mencoba dan belajar pasti ada harapan untuk bisa. </p>
    <p><a href="www.zainalhakim.web.id">www.zainalhakim.web.id</a></p>
</div>
<div id="footer"><a href="www.zainalhakim.web.id">www.zainalhakim.web.id</a></div>
</div>
</body>
</html>

Baris perintah diatas berfungsi untuk mengontrol bagian menu agar tetap pada posisi atas pada saat scrollbar digerakkan.

Anda bisa terapkan teknik sticky navigation menu ini pada semua jenis web seperti blogspot, wordpress, joomla, drupal dll. Jika masih ada keraguan atau kebingungan, harap jangan panik. Jangan malu untuk bertanya, silahkan isikan komentar atau pertanyaan anda pada kolom komentar dibawah.

Silahkan anda lihat demo berikut : Demo Sticky Navigation Menu

Silahkan Download Sourcecode lengkap Contoh Sticky Navigation Menu

Semoga Bermanfaat dan selamat mencoba.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html

Teknik sticky navigation menu ini diterapkan pada kasus seperti diatas agar pada saat scroll digerakkan kebawah dan menu menyentuh garis atas browser maka menu tersebut akan tetap berada diatas. Tujuan penerapan ini cukup sederhana yaitu agar pengunjung lebih mudah melakukan explorasi halaman web tanpa harus turun naikkan scrollbar.
Berikut ini contoh script html dan css seperti halaman diatas :
- See more at: http://www.zainalhakim.web.id/posting/membuat-menu-melayang-tetap-diatas.html#sthash.NHKjJ3fx.dpuf

Kamis, 07 Agustus 2014

0 Cara bongkar Laptop Toshiba Satellite L355/L355D

Diposting oleh Unknown di 14.46

Langkah 1.
Lepaskan baterai laptop.
Lepaskan dua sekrup penutup cover harddisk kemudian lepaskan dari tempatnya.
Lepaskan satu sekrup penutup cover memori dan lepaskan dari tempatnya.
(klik gambar agar lebih jelas)

Lihat Gambar:

Langkah 2.
Tarik harddisk ke kiri lalu Lepaskan dari motherboard.
lepaskan juga kedua modul memori.

Lihat Gambar:

Langkah 3
lepas satu sekrup penahan DVD drive ( lingkaran merah ).
Dorong DVD drive dengan obeng min kecil atau dengan sebuah testpen
lepaskan DVD drive dari laptop.

Lihat Gambar:

Langkah 4.
lepaskan semua sekrup di bagian bawah laptop.

Lihat Gambar:

Langkah 5.
Lepaskan panel keyboard menggunakan obeng min berukuran kecil, lakukan dengan hati-hati panel tersebut gampang patah.

Lihat Gambar:

Langkah 6.
Lepaskan empat buah sekrup penahan keyboard.
Tekan kunci plastik ( panah merah ) dan melepaskan keyboard.

Lihat Gambar:

langkah 7.
Angkat keyboard dengan Hati-hati karena kabel konektor keyboard masih melekat pada motherboard.

Lihat Gambar:

Langkah 8.
buka konektor keyboard dengan menggeser kunci konektor berwarna coklat kearah atas dari rumah konektor sekitar 1-2 mm.
setelah kunci konektor terbuka, cabut kabel keyboard.

Lihat Gambar:

Langkah 9.
Cabut dan lepaskan kabel yang ditunjukan dengan panah merah.

Lihat Gambar:

Langkah 10.
Pisahkan casing penutup atas dari casing laptop bagian bawah.
Masukkan pick gitar diantara pembatas casing penutup atas dan casing bawah laptop.
lakukan dengan hati-hati saat memindahkannya pick gitar di sepanjang sisi pembatas casing.

Lihat Gambar: