Senin, 29 September 2014

0 Cara, Niat Serta Syarat Shalat Jamak dan Qashar

shalat jamak

Shalat Jamak dan Qashar adalah shalat yang dilakukan dalam menunaikan shalat fardhu ruba’iyah ( berjumlah empat rakaat). Shalat ini terutama dilakukan jika seseorang dalam keadaan safar (musafir). Orang yang sedang dalam perjalanan jauh diperbolehkan memendekkan (meringkas) shalat atau yang lebih dikenal dengan cara meng-qashar shalat, atau dengan cara mengumpulkan dua shalat dalam satu waktu.

Ada perbedaan dikalangan ulama mengenai apakah mengqashar shalat merupakan ‘azimah (kemutlakan) yang tidak boleh ditinggalkan atau hanya sebuah rukhsah (keringanan) yang menjadi pilihan antara mengqashar atau menyempurnakan shalat.
Menurut Imam Hanafi, mengqashar shalat adalah ‘azimah, sedangkan Imam Syafi’i serta Imam Mazhab yang lainnya berijtihad bahwa qashar shalat sifatnya rukhsah, mengerjakan shalat bisa dengan cara qashar atau dengan cara menyempurnakan.
Dalam Al-Qur’an surah An-Nisa’ :

وَإِذَا ضَرَبْتُمْ فِي الأرْضِ فَلَيْسَ عَلَيْكُمْ جُنَاحٌ أَنْ تَقْصُرُوا مِنَ الصَّلاةِ إِنْ خِفْتُمْ أَنْ يَفْتِنَكُمُ الَّذِينَ كَفَرُوا إِنَّ الْكَافِرِينَ كَانُوا لَكُمْ عَدُوًّا مُبِينًا (١٠١)

Artinya : dan apabila kamu bepergian di muka bumi, Maka tidaklah mengapa kamu men-qashar[343] sembahyang(mu), jika kamu takut diserang orang-orang kafir. Sesungguhnya orang-orang kafir itu adalah musuh yang nyata bagimu.

Cara Shalat Jamak dan Qashar

Shalat Jamak dilakukan diawal waktu dinamakan jamak takdim seperti melaksanakan shalat dhuhur dan ashar, berarti pelaksanaannya dilaksanakan pada waktu shalat dhuhur, akan tetapi bila pelaksanaannya dilakukan pada waktu shalat ashar, atau shalat maghrib dengan shalat isya’pada waktu isya’ dinamakan shalat jamak takhir.
Shalat Qashar dilakukan dengan cara meringkas shalat yang berjumlah 4 rakaat seperti shalat dhuhur dan ashar  dalam satu waktu.

Niat  Shalat Jamak dan Qashar

Shalat Dhuhur Jamak Takdim dengan Shalat Ashar
(shalat dilakukan waktu shalat dhuhur)

 Niat Shalat Dhuhur Jamak Takdim dengan Shalat Ashar

اُصَلِّى فَرْضَ الظُّهْرِاَرْبَعَ رَكْعَا تٍ مَجْمُوْعًا مَعَ العَصْرِ مَأْمُوْمًا \ اِمَامًا لِلهِ تَعَالَى

 Niat Shalat Ashar Jamak Takdim dengan Shalat Dhuhur

 اُصَلِّى فَرْضَ العَصْرِاَرْبَعَ رَكْعَا تٍ مَجْمُوْعًا مَعَ الظهر مَأْمُوْمًا \ اِمَامًا لِلهِ تَعَالَى

Shalat Dhuhur Jamak Takhir dengan Shalat Ashar
(shalat dilakukan waktu shalat ashar)

Niat Shalat Dhuhur Jamak Takhir dengan Shalat Ashar

اُصَلِّى فَرْضَ الظُّهْرِاَرْبَعَ رَكْعَا تٍ مَجْمُوْعًا مَعَ العَصْرِ مَأْمُوْمًا \ اِمَامًا لِلهِ تَعَالَى

 Niat Shalat Ashar Jamak Takhir dengan Shalat Dhuhur

اُصَلِّى فَرْضَ العَصْرِاَرْبَعَ رَكْعَا تٍ مَجْمُوْعًا مَعَ الظُّهْرِ مَأْمُوْمًا \ اِمَامًا لِلهِ تَعَالَى

Shalat Dhuhur Jamak Takdim Serta Qashar Dengan Shalat Ashar
Dilaksanakan pada waktu shalat dhuhur, masing-masing dua rakaat

Niat Shalat Dhuhur Qashar taqdim dhuhur dan ashar

اُصَلِّى فَرْضَ اْلظُهْرِ قَصْرَا مَجْمُوْعًا مَعَ اْلعَصْرِ جَمْعَ تَقْدِيْمٍ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

Niat Shalat Ashar Qashar taqdim dhuhur dan ashar (dilaksanakan pada waktu shalat dhuhur)

اُصَلِّى فَرْضَ اْلعَصْرِ قَصْرَا مَجْمُوْعًا مَعَ اْلظُهْرِ جَمْعَ تَقْدِيْمٍ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

Shalat Dhuhur Jamak Takhir Serta Qashar Dengan Shalat Ashar
dilaksanakan pada waktu shalat ashar

Niat Shalat Dhuhur Qashar Takhir Dhuhur dan Ashar.

اُصَلِّى فَرْضَ اْلظُهْرِ قَصْرَا مَجْمُوْعًا مَعَ اْلعَصْرِ جَمْعَ تَأْخِيْرٍ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

Niat Shalat Ashar Qashar Takhir Dhuhur dan Ashar

اُصَلِّى فَرْضَ اْلعَصْرِ قَصْرَا مَجْمُوْعًا مَعَ اْلظُهْرِ جَمْعَ تَأْخِيْرٍ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

Shalat Maghrib Jamak Takdim Dengan Shalat Isya
Dilaksanakan pada waktu shalat maghrib

Niat Shalat Maghrib Jamak Taqdim

اُصَلِّى فَرْضَ اْلمَغْرِبِ ثَلاَثَ رَكَعَاتٍ مَجْمُوْعًا مَعَ اْلعِشَاءِ جَمْعَ تَقْدِيْمٍ مَأْمُوْمًا\ اِمَامٌا لِلّهِ تَعَالَى

Niat Shalat Isya Jamak Taqdim

اُصَلِّى فَرْضَ اْلعِشَاءِ قَصْرَا مَجْمُوْعًا مَعَ اْلمَغْرِبِ جَمْعَ تَقْدِيْمٍ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

Shalat Maghrib Jamak Takhir Maghrib Dengan Shalat Isya
Dilaksanakan pada waktu shalat isya’

Niat Shalat Jamak Takhir Maghrib

اُصَلِّى فَرْضَ اْلمَغْرِبِ ثَلاَثَ رَكَعَاتٍ مَجْمُوْعًا مَعَ اْلعِشَاءِ جَمْعَ تَأْخِيْرٍ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

 Niat Shalat Jamak Takhir Isya

اُصَلِّى فَرْضَ اْلعِشَاءِ مَجْمُوْعًا مَعَ اْلمَغْرِبِ جَمْعَ تَأْخِيْرٍمَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

 Shalat Maghrib Jamak Takdim Serta Qashar Dengan Shalat Isya
dilaksanakan pada waktu shalat Maghrib

 Niat Shalat Maghrib

اُصَلِّى فَرْضَ اْلمَغْرِبِ ثَلاَثَ رَكَعَاتٍ مَجْمُوْعًا مَعَ اْلعِشَاءِ جَمْعَ تَقْدِيْمٍ مَأْمُوْمًا\ اِمَامٌا لِلّهِ تَعَالَى

Niat Shalat Isya’

اُصَلِّى فَرْضَ العِشَاءِ رَكْعَتَيْنِ قَصْرًا مَجْمُوْعًا مَعَ المَغْرِبِ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

 Niat Shalat Maghrib Jamak Takhir Maghrib Qashar dan Isya.
dilaksanakan pada waktu shalat isya’

Niat Shalat Maghrib

اُصَلِّى فَرْضَ اْلمَغْرِبِ ثَلاَثَ رَكَعَاتٍ قَصْرَا مَجْمُوْعًا مَعَ اْلعِشَاءِ جَمْعَ تَأْخِيْرٍ مَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

Niat Shalat Jamak Takhir Qashar Isya’.

اُصَلِّى فَرْضَ اْلعِشَاءِ قَصْرَا مَجْمُوْعًا مَعَ اْلمَغْرِبِ جَمْعَ تَأْخِيْرٍمَأْمُوْمًا \ اِمَامٌا لِلّهِ تَعَالَى

Syarat Syarat Qashar Shalat

  1. Menempuh jarak minimal 80,5 Kilometer
  2. Bepergian untuk tujuan yang bersifat mubah
  3. Qashar shalat ketika sudah melewati tapal batas kota
  4. Tidak boleh bermakmum pada orang yang mukim (tidak qashar shalat)
Syarat Jamak Takdim
  1. Tertib, misalnya shalat dhuhur dahulu,kemudian ashar. Dan maghrib dahulu kemudian Isya’
  2. Niat jamak pada shalat yang pertama, misalnya Dhuhur.
  3. Berurutan (muwalat), antara dua shalat yang dijamak tanpa diselingi dengan aktifitas shalat sunat, langsung bangkit untuk shalat kedua.
Syarat Jamak Takhir
  1. Niat jamak takhir diwaktu shalat yang pertama.
  2. Masih dalam perjalanan tempat datangnya waktu shalat yang kedua.
Semoga bermanfaat, Wallahu A’lam
====
Silahkan like Facebook Fan Page albadarparepare atau follow twitter ponpesalbadar
====

Selasa, 02 September 2014

0 Cara Paling Jitu Memperbaiki Icon Program dan Shortcut Berubah

" Silahkan Anda Like Blogku Blogmu di Facebook yang akan diperbarui setiap kali kami menemukan tutorial yang menarik dan inovatif yang Insya Allah bermanfaat "

Hari ini klikblogmu kedatangan user yang memiliki masalah “Semua Icon, shortcut, dan default program berubah”. Kronologinya beliau mendownload file dan membukanya dengan open with aplikasi (pake klik kanan) trus di daftar program pembuka nya beliau milih adobe. Akibatnya, semua aplikasi (.exe dan teman-temannya) gak bisa diexekusi karena alplikasi pembukanya udah berubah. Shortcut di dekstop juga udah berubah.

Awalnya klikblogmu menyangka terkena virus, tapi diagnosa cepat antivirus bahkan scan dengan antivirus yang update tidak menemukan gejala terinfeksi virus. Mulai tuh utak-atik ngerubah properties, shortcut secara manual dan satu-satu, masih nihil. Sampai ngutak-ngatik registry windowsnya…..masih gak ketemu.

Karena penasaran mulailah nanya si mbah google. Hasil baca sana-sini ternyata nemuin beberapa trik, dan salah satunya ane tulis disini dengan judul Cara Jitu Memperbaiki Icon program dan shortcut berubah.

Solusi masalah diatas adalah dengan menginjeksi registry windows 7 dengan dua file ini.
1.    Download default_exe.reg dan default_lnk.reg disini Atau disini Atau Jugak disini (maaf ada iklannya)
2.    Klik dua kali file registry tersebut.
3.    Muncul peringatan, ketik “yes”
4.    Restart

Gubrak……ternyata komputer kembali normal seperti sedia kala…lanjut browsingnya deh.
Semoga bermanfaat.

Senin, 25 Agustus 2014

0 Cara Mudah Bikin Vidio Melayang Di Pembuka'an


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.

 

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

0 Cara Membuat Menubar Animation Transform

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

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[
function removeHtmlTag(e, t) { if (e.indexOf("<") != -1) { var n = e.split("<"); for (var r = 0; r < n.length; r++) { if (n[r].indexOf(">") != -1) { n[r] = n[r].substring(n[r].indexOf(">") + 1, n[r].length) } } e = n.join("") } t = t < e.length - 1 ? t : e.length - 2; while (e.charAt(t - 1) != " " && e.indexOf(" ", t) != -1) t++; e = e.substring(0, t - 1); return e + "..." } $(document).ready(function() { var e = $("#Copas").val(); if (e == null) { window.location.href = "http://zimibot.blogspot.com/" } $("#Copas").attr("href", "http://zimibot.blogspot.com/") });
// ]]>

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

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

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

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script src='https://binal33.googlecode.com/svn/trunk/sound-ganteng.js' type='text/javascript'></script>
<link href='http://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'/>

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> &#174;</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

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

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 :
  1. Login ke Blogger.
  2. Setelah Dasbor (Dasboard) telihat, cari dan klik "Design (Rancangan)".
  3. Halaman baru kembali akan terlihat. Klik "Edit HTML".
  4. Lakukan "Backup Template".
  5. Cari kode "]]></b:skin>"
  6. Copy dan pastekan kode css di atas kode "]]></b:skin>"
  7. Klik "Simpan Template (Save Template)".
  8. Lanjutkan dengan menyimpan xHTML melalui "Add a Gadget" yang terdapat di "Elemen Laman (Page Elemen)".
  9. 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 :
  1. 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.
  2. 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>
  3. 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)

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