tag:blogger.com,1999:blog-19826688004631461702024-02-19T06:12:51.074+02:00HAPIA MesirHery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.comBlogger125125tag:blogger.com,1999:blog-1982668800463146170.post-62206134947748209892010-05-27T00:33:00.005+03:002010-05-27T02:00:05.530+03:00Cara Membuat jCarousel Dengan jQuery<div style="text-align: justify;"><span style="font-weight: bold; font-style: italic;">jCarousel</span> bisa di gunakan pada banyak hal. salah satunya adalah <a style="font-weight: bold; font-style: italic;" href="http://www.hapiamesir.org/2010/04/membuat-foto-gallery-dengan-jquery.html" title="Membuat Foto Gallery Dengan JQuery">foto gallery</a>. menggunakan sedikit tempat untuk memasang banyak gambar atau content.<br /></div><br /><img style="display: block; margin: 0px auto 10px; text-align: center; width: 320px; height: 118px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVTAG05sU79DCVNnBeiSD796AhH3LrPUa6Lw5KpphPxzsGcAI4ulS4XVsv20e3ambvIHYiW5PPu4pVp5DKGRWelJ6kSA2a3TDnQY8i5HkrNKoHK7QM-1bqfXYL_d8QTmyl2Tm7tNlQkTXc/s320/jCarousel.JPG" alt="Cara Membuat jCarousel Dengan jQuery" id="BLOGGER_PHOTO_ID_5475711322674209218" border="0" /><br />Dengan menggunakan <a style="font-weight: bold; font-style: italic;" href="http://www.hapiamesir.org/search/label/JQuery" title="JQuery">jQuery</a> yang cenderung lebih ringan dari pada javascript yang lainnya, menjadikan <span style="font-weight: bold; font-style: italic;">jCarousel</span> lebih multi fungsi.<br /><span class="fullpost"><br />Silahkan lihat demo <span style="font-weight: bold; font-style: italic;">jCarousel</span> pada link berikut :<br /><br /><center><a href="http://hapia-jquery-1-4-2.blogspot.com/2010/05/jcarousel-jquery-demo.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /><span style="font-weight: bold; font-style: italic;">Cara Membuat jCarousel Dengan jQuery</span> adalah sebagai berikut :<br /><br />- Silahkan login ke<span style="font-weight: bold;">Blogger</span> dengan account anda.<br />- Pergi Ke "Tata Letak" kemudian "Edit HTML".<br />- Gunakan <span style="font-weight: bold; font-style: italic;">jQuery versi 1.4.2</span>, copy paste code berikut dan letakkan di <span style="font-weight: bold; color: rgb(255, 0, 0);"><head></span> :<br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><br /></div></center><br />- Copy paste code berikut dan letakkan dibawah code diatas :<br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 450px; text-align: left;"><script src='http://hapiajavascript.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'/><br /><script><br /><br />jQuery(document).ready(function() {<br />jQuery(&#39;#mycarousel&#39;).jcarousel();<br />});<br /><br /></script><br /></div></center><br />- copy code <a style="font-weight: bold; font-style: italic;" href="http://www.hapiamesir.org/search/label/CSS%20Editing" title="CSS Editing">CSS</a> berikut dan pastekan diatas <span style="font-weight: bold; color: rgb(255, 0, 0);">]]></b:skin></span> :<br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 450px; height: 300px; overflow: auto; text-align: left;">.jcarousel-skin-tango .jcarousel-container {<br /> -moz-border-radius: 10px;<br /> background: #f0f0f0;<br /> border: 1px solid #333;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-container-horizontal {<br /> width: 245px;<br /> padding: 20px 40px;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-clip-horizontal {<br /> width: 245px;<br /> height: 75px;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-item {<br /> width: 75px;<br /> height: 75px;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-item-horizontal {<br /> margin-right: 10px;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-item-placeholder {<br /> background: #fff;<br /> color: #000;<br />}<br /><br />/**<br />* Horizontal Buttons<br />*/<br />.jcarousel-skin-tango .jcarousel-next-horizontal {<br /> position: absolute;<br /> top: 43px;<br /> right: 5px;<br /> width: 32px;<br /> height: 32px;<br /> cursor: pointer;<br /> background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmhsmBBDjYOWbCpyslhqedI7B9tFU5OtciK6G9-LtIRGGpdXjXDSvVc24mXYlqQLi7PtvI8EU11Vu_TjJT4qLlIHMNORnQGcCiza6BPbdww5EJaDU2wEaa-2qp2YtpfNeZldtylBT5iU/s1600/next-horizontal.png) no-repeat 0 0;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-next-horizontal:hover {<br /> background-position: -32px 0;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-next-horizontal:active {<br /> background-position: -64px 0;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,<br />.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,<br />.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {<br /> cursor: default;<br /> background-position: -96px 0;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-prev-horizontal {<br /> position: absolute;<br /> top: 43px;<br /> left: 5px;<br /> width: 32px;<br /> height: 32px;<br /> cursor: pointer;<br /> background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51IeAhbF-fi1wtKF6wFuO7qhhi2cvqQhgQHU87eNfR-yfb24VJq8xFa92DIg_hI3f2pvq8450pqht1YS-u5KjmFkv8LhNe-GTItiT3Swtz3h4e4udZKWd9WfjhIqyNM_cM2Shr6BMqk0/s1600/prev-horizontal.png) no-repeat 0 0;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {<br /> background-position: -32px 0;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-prev-horizontal:active {<br /> background-position: -64px 0;<br />}<br /><br />.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,<br />.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,<br />.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {<br /> cursor: default;<br /> background-position: -96px 0;<br />}<br /></div></center><br />- Simpan Template.<br /><br />- Letakkan code berikut di tempat yang anda inginkan :<br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 500px; height: 300px; overflow: auto; text-align: left;"><div class="jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"><ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 850px;"><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li></ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div></div></div><br /></div></center><br /># Pada code di atas ini disediakan 7 link gambar. silahkan anda tambah dengan perintah <span style="font-weight: bold; color: rgb(255, 0, 0);"><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li></span>.<br /># Lebar dan tinggi gambar pada tampilan adalah 75 pixel.<br /><br />Untuk tutorial aslinya silahkan kunjungi <a href="http://sorgalla.com/projects/jcarousel/" target="_blank">http://sorgalla.com/projects/jcarousel/</a>.<br />Selamat mencoba dan happy blogging.<br /></span>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com33tag:blogger.com,1999:blog-1982668800463146170.post-72799689605736321842010-05-24T17:59:00.004+03:002010-05-26T16:39:35.522+03:00Cara Mudah Pasang Tab View Di Blog<div style="text-align: justify;"><span style="font-weight: bold; font-style: italic;">Tab View</span> memperhemat tempat untuk pemasangan beberapa <a style="font-style: italic; font-weight: bold;" href="http://www.hapiamesir.org/search/label/JQuery" title="JQuery Widget">widget</a>. menampilkan salah satu dan menyembunyikan yang lain. yang lain akan tampak apabila diklik.<br /></div><br /><center><img alt="Cara Mudah Pasang Tab View Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimELsNjuRG94Ll7Nbv-VM8ZHqNMu6RZFi3Z6Fhvn_iu3mOUpL5XaR9FKXZNfXxcv5O4V5OxTVptdv3DEGT4K9Ocqv4jWpI5LLAlOHe8ddArVchgndkBbhWPTjuQ5ukcNRz2eOzF8VirvMg/s320/tab-view.JPG" /></center><br /><div style="text-align: justify;">Banyak sekali cara untuk <span style="font-weight: bold; font-style: italic;">membuat tab view</span>, sayang cara itu terlalu panjang, untuk kemudian memasangnya <span style="font-weight: bold; font-style: italic;">di sidebar</span>. akan tetapi sekarang ada cara yang sangat <span style="font-style: italic; font-weight: bold;">mudah</span> untuk <span style="font-weight: bold; font-style: italic;">memasang tab view di sidebar blog</span> anda.<br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span class="fullpost">Sebelum melanjutkan ke <span style="font-weight: bold; font-style: italic;">cara mudah pasang tab view di blog</span>, silahkan lihat demo berikut :</span><br /></div><span class="fullpost"><br /><center><a href="http://hapia-demos.blogspot.com/2010/05/best-banner-rotator.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /><span style="font-weight: bold; font-style: italic;">Cara Mudah Pasang Tab View Di Blog</span> adalah sebagai berikut :<br /><br />- Silahkan login ke<span style="font-weight: bold; font-style: italic;">Blogger</span> dengan account anda.<br />- Pergi Ke "Tata Letak".<br />- Klik "Tambah Gadget" dan pilih "HTML/JavaScript".<br />- Copy paste code berikut kedalamnya :<br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 500px; height: 350px; overflow: auto; text-align: left;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script><br /><script><br /><br />// When the document loads do everything inside here ...<br />$(document).ready(function(){<br /><br />// When a link is clicked<br />$("a.tab").click(function () {<br /><br />// switch all tabs off<br />$(".active").removeClass("active");<br /><br />// switch this tab on<br />$(this).addClass("active");<br /><br />// slide all content up<br />$(".content").slideUp();<br /><br />// slide this content up<br />var content_show = $(this).attr("title");<br />$("#"+content_show).slideDown();<br /><br />});<br /><br />});<br /></script><br /><style type="text/css" media="screen"><br /><!--<br /><br />.tabbed_area {<br />border:1px solid #494e52;<br />background-color:#333;<br />padding:8px;<br />}<br /><br />div.tabs {<br />margin-top:5px;<br />margin-bottom:6px;<br />}<br />div.tabs div {<br />display:inline;<br />}<br />div.tabs a {<br />background:#464c54;<br />color:#ffebb5;<br />padding:8px 14px 8px 14px;<br />text-decoration:none;<br />font-size:9px;<br />font-family:Verdana, Arial, Helvetica, sans-serif;<br />font-weight:bold;<br />text-transform:uppercase;<br />background-repeat:repeat-x;<br />background-position:bottom;<br />}<br />div.tabs a:hover {<br />background-color:#2f343a;<br />border-color:#2f343a;<br />}<br />div.tabs a.active {<br />background-color:#ffffff;<br />color:#282e32;<br />border:1px solid #464c54;<br />border-bottom: 1px solid #ffffff;<br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXdRwGmpldpBdqXUzh04-xg4KBKxP8-PMQzHWUcWOJoL_LaA2i8CUoDAL9BZ_a0aLhwNk4uEdBeLz4ee8rgX5QsO8acZi0LI8jGPaf-cgZBYj-JmYPOFhL2kF-X_m4t0AMUlDFo0qZMRdH/s320/tab_on.jpg);<br />background-repeat:repeat-x;<br />background-position:top;<br />}<br />.content {<br />background-color:#ffffff;<br />padding:10px;<br />border:1px solid #464c54;<br />font-family:Arial, Helvetica, sans-serif;<br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsvQq_mW1rCvgpjpae668o0Qdb889-4voVZnqfsevhnVJkjCOnZmi5Hhn9qNO8HG-mx9WDCoVU4wr2JMVUAHSThJS4DjNalPq6uAp_-dSM7BnyBhRSy-OVrRZ5UTUKpr-k9cxsNn6nrQ1P/s320/content_bottom.jpg);<br />background-repeat:repeat-x;<br />background-position:bottom;<br />}<br />#content_2, #content_3 { display:none; }<br /><br />.content ul {<br />margin:0px;<br />padding:0px 20px 0px 20px;<br />}<br />.content ul li {<br />list-style:none;<br />border-bottom:1px solid #d6dde0;<br />padding-top:15px;<br />padding-bottom:15px;<br />font-size:13px;<br />}<br />.content ul li:last-child {<br />border-bottom:none;<br />}<br />.content ul li a {<br />text-decoration:none;<br />color:#3e4346;<br />}<br />.content ul li a small {<br />color:#8b959c;<br />font-size:9px;<br />text-transform:uppercase;<br />font-family:Verdana, Arial, Helvetica, sans-serif;<br />position:relative;<br />left:4px;<br />top:0px;<br />}<br />.content ul li a:hover {<br />color:#a59c83;<br />}<br />.content ul li a:hover small {<br />color:#baae8e;<br />}<br />.content div {<br />margin:0px;<br />padding:0px;<br />}<br />--><br /></style><br /><div class="tabbed_area"><br /><br /> <div class="tabs"><br /> <div><a class="tab active" title="content_1" href="#<span style="font-weight: bold;">JUDUL1</span>"><span style="font-weight: bold;">JUDUL1</span></a></div><br /> <div><a class="tab" title="content_2" href="#<span style="font-weight: bold;">JUDUL2</span>"><span style="font-weight: bold;">JUDUL2</span></a></div><br /> <div><a class="tab" title="content_3" href="#<span style="font-weight: bold;">JUDUL3</span>"><span style="font-weight: bold;">JUDUL3</span></a></div><br /> </div><br /><br /> <div class="content" id="content_1"><br /> <div><br /><span style="font-weight: bold;"> CODE WIDGET DISINI</span><br /> </div><br /> </div><br /> <div class="content" id="content_2"><br /> <ul><br /> <li><a href=""><span style="font-weight: bold;">DAFTAR JUDUL</span></a></li><br /> <li><a href=""><span style="font-weight: bold;">DAFTAR JUDUL</span></a></li><br /> <li><a href=""><span style="font-weight: bold;">DAFTAR JUDUL</span></a></li><br /> <li><a href=""><span style="font-weight: bold;">DAFTAR JUDUL</span></a></li><br /> <li><a href=""><span style="font-weight: bold;">DAFTAR JUDUL</span></a></li><br /> </ul><br /> </div><br /> <div class="content" id="content_3"><br /> <ul><br /> <li><a href="/"><span style="font-weight: bold;">Home</span></a></li><br /> <li><a href="/"><span style="font-weight: bold;">About</span></a></li><br /> <li><a href="/"><span style="font-weight: bold;">All Category</span></a></li><br /> <li><a href="/"><span style="font-weight: bold;">Contact</span></a></li><br /> </ul><br /> </div><br /><br /></div><br /></div></center><br /><br />- Simpan.<br /><br />Selamat mencoba <span style="font-weight: bold; font-style: italic;">Cara Mudah Pasang Tab View Di Blog</span> dan happy blogging.<br /></span>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com31tag:blogger.com,1999:blog-1982668800463146170.post-57481571211897748342010-05-23T13:15:00.004+03:002010-05-23T13:57:00.681+03:00Cara Menghapus Navbar Blog Anda<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Navbar pada blogger. pada template-template biasa, navbar blogger masih selalu muncul. tapi pada template costum rata-rata telah menghapus navbar tersebut.</span><br /><br /><span style="font-weight: bold;">Navbar blogger yang tidak mempunyai peraturan yang jelas. untuk apa di pertahankan. lebih baik di hapus dari template anda.</span><br /></div><span class="fullpost"><br /><span style="background: none repeat scroll 0% 0% rgb(179, 255, 236); font-style: italic; font-weight: bold;">Cara mudah untuk menghapus navbar dari blog anda :</span><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><i style="font-weight: bold;">Blogger</i><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Bersihkan code CSS yang berkaitan dengan dengan navbar. cari code berikut (biasanya terletak di paling atas daftar code CSS) :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 400px; text-align: left;">#navbar-iframe<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Hapus semua code yang berkaitan dengan code diatas.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian cari code <span style="color: rgb(255, 0, 0);"></head></span> :</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Letakkan code berikut tepat di bawahnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 400px; text-align: left;"><!-- <body><br /><div></div> --><br /></div></center><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">- Maka akan nampak peringatan seperti ini :</span><br /><img style="display: block; margin: 10px auto; text-align: center; width: 470px; height: 219px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1rvanQcF_1B1OMtOtFaB1pQe20TDw0auPq5pp7Wcb5exgpiZX68rRehVUmz16gfGLFZjOvfIsCMDwO2z6wODkFvKWrWePBs1PXmsodqKOPtSvCfai0uOI7wtCAuh5UIbpIt5jkkyAR8Ri/s320/hapus-navbar.JPG" alt="Cara Menghapus Navbar Blog Anda" id="BLOGGER_PHOTO_ID_5474416452698285602" border="0" /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Klik "Hapus Widget".</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Jangan hapus code diatas setelah anda menyimpan template anda. biarkan code itu tetap tertanam dalam template anda.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com29tag:blogger.com,1999:blog-1982668800463146170.post-19528909250646949642010-05-21T18:05:00.007+03:002010-05-21T18:49:39.217+03:00Judul Postingan Yang SEO Friendly<div style="text-align: justify; font-weight: bold; color: rgb(51, 51, 255);">Menjadikan Blog kita <a style="color: rgb(153, 0, 0);" href="http://www.hapiamesir.org/2010/04/10-teknik-seo-yang-efektif.html" title="10 Teknik SEO Yang Efektif">nomer satu</a> atau berada di halaman awal mesin pencari dengan kata kunci tertentu mejadikan persentase di kliknya blog kita melalui <a style="color: rgb(153, 0, 0);" href="http://www.hapiamesir.org/2010/04/dasar-tentang-search-engine.html" title="Dasar Tentang Search Engine Optimization"><i>Search Engine</i></a> semakin besar. mendatangkan <i>traffic</i> secara natural ke blog kita melalui <i>search engine</i>.<br /></div><img style="display: block; margin: 10px auto; text-align: center; width: 270px; height: 170px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPli2xhPB5jOn_j5Aliv20_HhX-eZ2aiXNVu3Kh7qRfGakNLcwlugNVxZKbMlH3QkZQmhdf1IfroJMjKuoKkTn7quHbVR27mMpScfGY_DFqF_sn05rbVQYlgTq7BPZkInH022YvqGEE6-8/s320/SEO-Friendly.jpg" alt="Judul Postingan Yang SEO Friendly" id="BLOGGER_PHOTO_ID_5473749563889442338" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Dalam dunia </span><i style="font-weight: bold;">Blogger</i><span style="font-weight: bold;"> selain </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-meta-tags-untuk-blog.html" title="Membuat Meta Tags Untuk Blog">membuat <i>Meta Tag Keyword/DESCRIPTION</i></a><span style="font-weight: bold;">, hal lain yang paling berpengaruh adalah judul postingan. judul posting yang akan menjadi alamat url link suatu postingan adalah cara paling ampuh untuk mendatangkan </span><i style="font-weight: bold;">natural traffic</i><span style="font-weight: bold;"> dari search engine.</span><br /></div><span class="fullpost"><br /><b>- Pilih Judul Untuk Mewakili Isi Postingan</b><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Pilih kata-kata yang benar-benar mewakili isi dari inti postingan. Jika isi posting blog anda adalah tentang </span><i style="font-weight: bold;">tutorial</i><span style="font-weight: bold;">, maka tulislah judul yang simple dan jelas. contoh :</span></span><br /></div><span class="fullpost"><br /><a href="http://www.hapiamesir.org/2010/05/membuat-widget-random-post-di-blog.html" title="Membuat Widget Random Post Di Blog"><span style="background:#99DDFF;font-weight:bold;">Membuat Widget Random Post Di Blog</span></a>.<br /><br /><b>- Buatlah Judul Dengan Kata Kunci Postingan</b><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Jika anda menekankan suatu kata kunci tertentu pada postingan anda, maka buatlah judul postingan dengan menggunakan kata kunci tersebut. Contoh :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Kata Kunci : </span><i style="font-weight: bold;">Menu Navigasi</i><span style="font-weight: bold;">.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Judul Postingan : </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-menu-navigasi-dengan-jquery.html" title="Membuat Menu Navigasi Dengan JQuery"><i>Membuat Menu Navigasi Dengan JQuery</i></a><span style="font-weight: bold;">.</span></span><br /></div><span class="fullpost"><br /><b>- Cek Kata Kunci Anda Terlebih Dahulu</b><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Ceklah kata kunci yang akan anda gunakan terlebih dahulu. manfaatkan </span><a style="font-weight: bold;" href="http://www.google.com/trends" target="_blank"><i>Google Trends</i></a><span style="font-weight: bold;"> untuk mengecek seberapa popularkah kata kunci anda.</span></span><br /></div><span class="fullpost"><br /><b>- Optimasi Link Postingan Anda</b><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Menulis postingan tanpa meng-optimasi-nya sangatlah sulit untuk memosisikan judul postingan tersebut di halaman awal google. salah satu cara optimasi adalah dengan men-</span><i style="font-weight: bold;">submit</i><span style="font-weight: bold;"> link postingan ke beberapa situs penyedia bookmark online. </span><span style="background: none repeat scroll 0% 0% rgb(179, 255, 198); font-weight: bold;">ingat !! jangan submit ke banyak situs bookmark pada satu waktu.</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Semoga tips diatas bermanfaat. selamat memahami dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com23tag:blogger.com,1999:blog-1982668800463146170.post-89782225349451565412010-05-17T15:31:00.010+03:002010-05-18T12:03:48.650+03:005 Hal Yang Menjadikan Blog Berat<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Membuat dan memiliki blog dengan loading cepat adalah dambaan setiap </span><i style="font-weight: bold;">blogger</i><span style="font-weight: bold;">. membuat </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/2010/04/5-teknik-seo-yang-salah.html" title="5 Teknik SEO yang Salah"><i>robot google</i></a><span style="font-weight: bold;"> sering berkunjung ke blog kita. dan yang pasti tidak menjadikan para pengunjung menunggu lebih lama untuk mendapatkan </span><i style="font-weight: bold;">content</i><span style="font-weight: bold;"> dalam blog anda.</span><br /></div><img style="display: block; margin: 10px auto; text-align: center; width: 250px; height: 180px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ZtHa4COmhKAIXB2ipBOuN4ZDtSfJHMstWyp2iy4bIIAnqCpcZFhxCO_a7o1qmSJSsgCnh3IKDPnkdWTJ2mZJk-9cHryHT6PFn5ohiUAeLpyyYI9BdjblO1KaDU_Xtqp3QLwxd0mUVUVS/s320/blog-speed.jpg" alt="5 Hal Yang Menjadikan Blog Berat" id="BLOGGER_PHOTO_ID_5472240974911973458" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Pada postingan ini, </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/"><i>HAPIA Mesir</i></a><span style="font-weight: bold;"> ingin membahas tentang hal-hal yang dapat memberatkan atau memperlambat </span><i style="font-weight: bold;">loading</i><span style="font-weight: bold;"> blog. menjadikan para pengunjung harus menambah waktu </span><i style="font-weight: bold;">ekstra</i> <span style="font-weight: bold;">demi membaca</span> <i style="font-weight: bold;">contect</i><span style="font-weight: bold;"> yang sedang dinanti. walaupun tidak semua hal itu, </span><i style="font-weight: bold;">HAPIA Mesir</i><span style="font-weight: bold;"> bahas disini.</span><br /></div><span class="fullpost"><br /></span><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border: 1px solid rgb(51, 51, 51); width: 250px; float: right; margin: 10px; padding: 10px; font-weight: bold;"><div style="text-align: center;">Daftar isi<br /></div>-<a href="#Terlalu%20Banyak%20Memasang%20Widget">Terlalu Banyak Memasang Widget</a><br />-<a href="http://www.hapiamesir.org/2010/05/5-hal-yang-menjadikan-blog-berat.html#Terlalu%20Banyak%20Memasang%20Script">Terlalu Banyak Memasang Script</a><br />-<a href="http://www.hapiamesir.org/2010/05/5-hal-yang-menjadikan-blog-berat.html#Menggunakan%20Template%203%20Kolom">Menggunakan Template 3 Kolom</a><br />-<a href="http://www.hapiamesir.org/2010/05/5-hal-yang-menjadikan-blog-berat.html#Memasang%20Gambar%20Secara%20Berlebih">Memasang Gambar Secara Berlebih</a><br />-<a href="http://www.hapiamesir.org/2010/05/5-hal-yang-menjadikan-blog-berat.html#Memasang%20Banyak%20Iklan">Memasang Banyak Iklan</a><br /></div><br /><a style="font-weight: bold;" name="Terlalu Banyak Memasang Widget">- Terlalu <span style="color: rgb(255, 0, 0);">Banyak</span> Memasang Widget</a><span style="font-weight: bold;">.</span><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Memasang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/05/membuat-widget-random-post-di-blog.html" title="Membuat Widget Random Post di Blog"><i>widget di blog</i></a><span style="font-weight: bold;"> menjadikan fungsi dan tampilan blog menjadi lebih baik. akan tetapi memasang </span><i style="font-weight: bold;">widget</i><span style="font-weight: bold;"> terlalu banyak menjadikan blog lebih lama </span><i style="font-weight: bold;">loading</i><span style="font-weight: bold;">nya.</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span class="fullpost"><a style="font-weight: bold;" name="Terlalu Banyak Memasang Script">- Terlalu <span style="color: rgb(255, 0, 0);">Banyak</span> Memasang Script</a><span style="font-weight: bold;">.</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">JavaScript atau seperti </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/JQuery?max-results=100" title="JQuery"><i>JQuery</i></a><span style="font-weight: bold;"> dapat menambah fungsi beberapa perintah pada blog kita dan menjadikannya terlihat </span><i style="font-weight: bold;">profesional</i><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Akan tetapi </span><i style="font-weight: bold;">Banyak</i><span style="font-weight: bold;"> memasang script di sana sini, membuat </span><i style="font-weight: bold;">loading</i><span style="font-weight: bold;"> blog semakin bertambah. seperti </span><i style="font-weight: bold;">script iklan</i><span style="font-weight: bold;"> yang servernya lambat, atau </span><i style="font-weight: bold;">script auto click</i><span style="font-weight: bold;"> dapat menjadikan tidak nyamannya blog kita dimata para pengunjung.</span></span><br /></div><span class="fullpost"><br /><a style="font-weight: bold;" name="Menggunakan Template 3 Kolom">- Menggunakan Template 3 Kolom</a><span style="font-weight: bold;">.</span><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Menggunakan template 3 kolom maksudnya adalah template yang menjadikan </span><i style="font-weight: bold;">content</i><span style="font-weight: bold;"> postingan adal ditengah-tengah, yaitu yang terdapat sidebar kanan dan kiri.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Me-</span><i style="font-weight: bold;">load</i><span style="font-weight: bold;"> content sidebar terlebih dahulu menjadikan blog terkesan berat. karena setiap browser sepeti </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/01/download-firefox-37-alpha.html" title="Download Firefox 3.7 Alpha">firefox</a><span style="font-weight: bold;">, me-</span><i style="font-weight: bold;">load</i><span style="font-weight: bold;"> halaman web dari sebelah kiri browser.</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span class="fullpost"><span style="background: none repeat scroll 0% 0% rgb(227, 255, 199); font-weight: bold;">Saran : Gunakan template yang menjadikan content postingan di <i>load</i> terlebih dahulu dari pada sidebar, seperti tempate dengan content postingan disebelah kiri browser.</span></span><br /></div><span class="fullpost"><br /><a style="font-weight: bold;" name="Memasang Gambar Secara Berlebih">- Memasang Gambar Secara Berlebih</a>.<br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Menggunakan atau memasang gambar pada halaman utama blog secara berlebih jelas memperberat </span><i style="font-weight: bold;">loading</i><span style="font-weight: bold;"> blog. karena browser setiap kali membuka halaman berarti sedang men-</span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/Al-Quran%20mp3%20Download" title="Al-Quran Download MP3"><i>Download</i></a><span style="font-weight: bold;"> halaman tersebut. penggunaan banyak gambar menjadikan browser lebih banyak lagi men-</span><i style="font-weight: bold;">Download</i><span style="font-weight: bold;"> elemen pada halaman itu. apalagi memasang gambar yang di </span><i style="font-weight: bold;">upload</i><span style="font-weight: bold;"> di luar</span> <i style="font-weight: bold;">Blogger</i><span style="font-weight: bold;">.</span></span><br /></div><span class="fullpost"><br /><a style="font-weight: bold;" name="Memasang Banyak Iklan">- Memasang <span style="color: rgb(255, 0, 0);">Banyak</span> Iklan</a><span style="font-weight: bold;">.</span><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Memasang script iklan secara berlebih juga memperlambat loading blog. karena script iklan rata-rata menggunakan metode seperti </span><i style="font-weight: bold;"><iframe></i><span style="font-weight: bold;"> guna memanggil link iklan. dan situs penyedia iklan dengan server yang lambat, menjadikan loading blog lebih lambat lagi.</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Mungkin 5 hal diatas bukan semua faktor yang mempengaruhi loading blog, masing banyak lagi hal-hal yang menjadikan blog terasa berat.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Maka dari ke-5 hal diatas, bijaklah dalam men-</span><i style="font-weight: bold;">design</i><span style="font-weight: bold;"> blog anda. pasang apa yang memang anda perlukan untuk mendukung kinerja dan fungsi blog.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com25tag:blogger.com,1999:blog-1982668800463146170.post-69944838736049681112010-05-15T17:46:00.011+03:002010-05-26T16:46:45.035+03:00Membuat Widget Random Post Di Blog<div style="text-align: justify; color: rgb(51, 51, 255);"><i style="font-weight: bold;">Random Post</i><span style="font-weight: bold;">. seperti halnya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/05/membuat-widget-feed-reader.html" title="Membuat Widget Feed Reader"><i>widget recent post</i></a><span style="font-weight: bold;">, </span><i style="font-weight: bold;">Random Post</i><span style="font-weight: bold;"> memiliki fungsi yang sama, yaitu menampilkan daftar postingan yang telah lalu. akan tetapi berbeda metode, karena </span><i style="font-weight: bold;">Random Post</i><span style="font-weight: bold;"> memanggil </span><i style="font-weight: bold;">Feed</i><span style="font-weight: bold;"> secara acak, tidak seperti recent post yang memanggil dan menampilkan </span><i style="font-weight: bold;">Feed</i><span style="font-weight: bold;"> secara berurutan mulai dari yang paling baru.</span><br /></div><br /><img style="display:block; margin:0px auto 10px; text-align:center;width: 320px; height: 262px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNNpoWNBBZZO17S7ySStSWO14_oi0bsYZ56XQZlXvB9NneISMnF02q0S49-GLMSZOMrelANC8ovW8xWFFwUZcSD2S2Asrkm0gEY7_mr5BNymrPX8myosDv4jcr_IqOUIXsBbahbPOcE0ej/s320/random-post.JPG" border="0" alt="Membuat Widget Random Post Di Blog"id="BLOGGER_PHOTO_ID_5475574451626636850" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Mungkin beberapa blogger malas untuk </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2009/12/memasang-daftar-isi-blog.html" title="Memasang Daftar isi Blog"><i>memasang Daftar Isi Blog</i></a><span style="font-weight: bold;"> pada sidebar, karena pemanggilan </span><i style="font-weight: bold;">Feed</i><span style="font-weight: bold;">nya dilakukan secara maksimal sehinggal menampilkan semua daftar postingnya yang ada di blog tersebut.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><i style="font-weight: bold;">Cara Membuat Random Post</i><span style="font-weight: bold;"> di sidebar adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Tambah Gadget dan pilih "HTML/JavaScript".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste code berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; text-align: left; width: 450px; height: 350px; overflow: auto;"><style type="text/css" media="screen"><br /><!--<br />.RandomPost {<br />background:#333;<br />border:2px solid #48535e;<br />margin:0 auto;<br />width:300px;<br />padding:5px;<br />}<br />.RandomTitle {<br />margin:5px;<br />padding:5px;<br />background:#eee;<br />color:#333;<br />text-aling:left;<br />font-size:15px;<br />font-weight:bold;<br />}<br />.Randomline{<br />height:1px;<br />overflow:hidden;<br />background-color:#eee;<br />border-bottom:1px solid #687581;<br />margin:5px;<br />}<br />.RandomPost ul {<br />margin: 0px;<br />padding:5px;<br />}<br />.RandomPost li {<br />background:#EEE;<br />color:#555;<br />font-family:Tahoma,Arial,gothic;<br />text-align:left;<br />font-size:11px;<br />font-weight:bold;<br />margin-bottom:5px;<br />padding:5px;<br />padding-left:23px;<br /><br />-moz-border-radius:5px;<br />-webkit-border-radius:5px;<br />border-radius:5px;<br /><br />-moz-box-shadow:0 1px 1px black;<br />-webkit-box-shadow:0 1px 1px black;<br />box-shadow:0 1px 1px black;<br />}<br />--><br /></style><br /><div class="RandomPost"><br /><div class="RandomTitle">Random Posts</div><br /><div class="Randomline"></div><br /><script type="text/javascript"><br />var randarray = new Array();var l=0;var flag;<br />var numofpost=6;function randomposts(json){<br />var total = parseInt(json.feed.openSearch$totalResults.$t,10);<br />for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}<br />if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');<br />for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];<br />for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";<br />document.write(item);}}<br />}document.write('</ul>');}<br /></script><br /><script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script><br /></div><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># numofpost=6 adalah jumlah </span><i style="font-weight: bold;">random post</i><span style="font-weight: bold;"> yang tampil.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Terima kasih kepada </span><a style="font-weight: bold;" href="http://bloggerstop.net/2009/08/random-posts-widget-for-blogger-blogs.html" target="_blank">BloggerStop[dot]Net</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com20tag:blogger.com,1999:blog-1982668800463146170.post-5263418202902403172010-05-13T02:12:00.006+03:002010-05-26T16:42:23.973+03:00Membuat Menu Navigasi Dengan ToolTip<div style="text-align: justify; color: rgb(51, 51, 255);"><i style="font-weight: bold;">Menu Navigasi</i><span style="font-weight: bold;"> pada blog sangatlah diperlukan bagi kebanyakan blogger profesional. di tambah dengan fungsi </span><i style="font-weight: bold;">ToolTip</i><span style="font-weight: bold;"> menjadikan tampilan ini lebih profesional dan fungsional.</span><br /></div><div style="text-align: justify;"><img style="display: block; margin: 10px auto; text-align: center; width: 168px; height: 146px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZXnDajM3xVvXPHPt6LOuadbmtYaGpnvavwZ9WvC__esyP0d53mvjixGAZdrpa4jsqi8Bv5NWLaAz3-gnav-_KK9dONJIAoWCIhZRCU_cADoLpiKDs2SNx62x5mgNf111ydRM1hLWhwtJ/s320/jquery-logo.gif" alt="Membuat Menu Navigasi Dengan ToolTip" id="BLOGGER_PHOTO_ID_5470538394081219362" border="0" /><span style="font-weight: bold; color: rgb(51, 51, 255);">Pada tutorial sebelumnya, </span><a style="font-weight: bold; color: rgb(153, 0, 0);" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold; color: rgb(51, 51, 255);"> pernah memostingkan tentang beberapa model </span><i style="font-weight: bold; color: rgb(51, 51, 255);">menu navigasi</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> yang berbeda-beda, diantaranya : </span><a style="font-weight: bold; color: rgb(153, 0, 0);" href="http://www.hapiamesir.org/2010/04/membuat-menu-navigasi-dengan-jquery.html" title="Membuat Menu Navigasi Dengan JQuery">Membuat Menu Navigasi Dengan JQuery</a><span style="font-weight: bold; color: rgb(51, 51, 255);"> dan </span><a style="font-weight: bold; color: rgb(153, 0, 0);" href="http://www.hapiamesir.org/2010/04/membuat-navigasi-stylish-di-blog.html" title="Membuat Navigasi Stylish Di Blog">Membuat Navigasi Stylish Di Blog</a><span style="font-weight: bold; color: rgb(51, 51, 255);">. semua </span><i style="font-weight: bold; color: rgb(51, 51, 255);">navigasi</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> ini menggunakan </span><i style="font-weight: bold; color: rgb(51, 51, 255);">JQuery</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> masing-masing dan berbeda-beda.</span><br /></div><span class="fullpost"><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">Berikut adalah demo dari </span><i style="font-weight: bold; color: rgb(51, 51, 255);">menu navigasi dengan tooltip</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> :</span><br /><br /><center><a href="http://hapia-demos.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara membuat </span><i style="font-weight: bold;">menu navigasi dengan tooltip</i><span style="font-weight: bold;"> adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Gunakan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/05/membuat-slide-panel-di-blog.html" title="Membuat Slide Panel Di Blog">JQuery versi 1.2.3</a><span style="font-weight: bold;"> berikut pada template anda. copy paste JQuery berikut dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); width: 450px; padding: 10px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/><br /></div></center><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">- Copy paste script berikut dan letakkan dibawah JQuery 1.2.3 tadi :</span><br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); width: 450px; padding: 10px; text-align: left;"><script type='text/javascript'><br />$(document).ready(function(){<br /><br />$(".menu2 a").append("<em></em>");<br /><br />$(".menu2 a").hover(function() {<br /> $(this).find("em").animate({opacity: "show", top: "-75"}, "slow");<br /> var hoverText = $(this).attr("title");<br /> $(this).find("em").text(hoverText);<br />}, function() {<br /> $(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");<br />});<br />});<br /></script><br /></div></center><br /></span><div style="text-align: justify;"><span class="fullpost"><span style="font-weight: bold; color: rgb(51, 51, 255);">- Masukan code CSS berikut dan letakkan diatas <span style="color: rgb(255, 0, 0);">]]></b:skin></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); width: 500px; height: 350px; overflow: auto; padding: 10px; text-align: left;">.menu2 {<br />margin-top: -17px;<br />padding: 0;<br />list-style: none;<br />}<br />.menu2 li {<br />padding: 0;<br />margin: 0 2px;<br />float: left;<br />position: relative;<br />text-align: center;<br />}<br />.menu2 a {<br />padding: 14px 10px;<br />display: block;<br />color: #CCF2FF;<br />width: 136px;<br />text-decoration: none;<br />font-weight: bold;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhouHymvUBQMLA_W2eb95BfpUG4rMPPIt51FbkAPSyejNyOX175xy9WhQySIsz9JuMVjt6fIcUJVoQqX-OVQiqOfsWmu4S7HXNdb8gDjMvhRoxm-JW6B2QxPrXMAvFuLDKXszH7-iJuRr8/s1600/button.gif) no-repeat center center;<br />}<br />.menu2 li em {<br />font-weight: normal;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIXHAKFXiH5KcJZX-gCwruUkDH3MIizx4HXfm9g8VNSzAUC2V63LlMHcNMRT5xy2HZs4I0pUsekCnA7uswAmAfG1giEo6choUGuqFoacnHlTLbi0RsNbyvYQfVX5CNn0sT012jnhn5Do0/s320/black_arrow.png) no-repeat;<br />width: 180px;<br />height:35px;<br />position: absolute;<br />top: 25px;<br />left: -25px;<br />text-align: center;<br />color:#fff;<br />padding: 20px 12px 10px;<br />font-style: normal;<br />z-index: 2;<br />display: none;<br />}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk menampilkan </span><i style="font-weight: bold;">menu navigasi dengan tooltip</i><span style="font-weight: bold;">, lanjutkan langkah berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste code berikut dan letakkan ditempat yang anda inginkan (contoh dibawah </span><i style="font-weight: bold;">Header</i><span style="font-weight: bold;">) :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); width: 450px; height: 300px; overflow: auto; padding: 10px; text-align: left;"><ul class="menu2"><br /><li><br /> <a title="Go to homepage" href="/">Home</a> <br /></li><br /><li><br /> <a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">Tutorial</a><br /></li><br /><li><br /> <a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">JQuery Widget</a><br /></li><br /><li><br /> <a title="JUDUL LINK YANG NAMPAK DITOOLTIP" href="http://LINK-ANDA.COM">CSS Editing</a><br /></li><br /></ul><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">menu2</span> adalah class </span><i style="font-weight: bold;">menu navigasi</i><span style="font-weight: bold;"> ini.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">em</span> adalah class tooltip.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">menu2 a</span> adalah </span><i style="font-weight: bold;">menu navigasi</i><span style="font-weight: bold;"> itu sendiri.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">menu2 li em</span> adalah code tampilan tooltip.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">margin-top: -17px;</span> adalah jarak atas dan </span><i style="font-weight: bold;">menu navigasi</i><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk tutorial originalnya silahkan baca artikel dengan judul </span><a style="font-weight: bold;" href="http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/" target="_blank">jQuery Tutorials for Designers</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com36tag:blogger.com,1999:blog-1982668800463146170.post-12196804850082323732010-05-10T10:37:00.009+03:002010-05-10T12:06:42.481+03:00Imam Mahdi Dan Turunnya Nabi Isa<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Maha besar Allah yang telah mengawali alam semesta dan mengakhirinya, yang telah menciptakannya dalam 6 hari dan akan mengakhirinya dengan satu tiupan sangkakala.</span><br /></div><br /><img style="display: block; margin: 0px auto; text-align: center; width: 240px; height: 202px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQ6ELhQ0BNvjsRqApGDA6qwDi31zcKmnX_n5IUeVK412R2UAJIiv_U7NPo8UzB7Y-Jglq9MmJ6hzcDkWeTBWzInq-yF8ijhVmtyvqWIGiPjRL1mwyXfNUueKhbP3x98F7Mu5ibfaeGDG1/s320/kiamat.jpg" alt="Imam Mahdi Dan Turunnya Nabi Isa" id="BLOGGER_PHOTO_ID_5469561605765296242" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Ada 10 tanda besar sebelum terjadinya kiamat besar di alam semesta ini. diantaranya adalah munculnya seseorang dari </span><i style="font-weight: bold;">ahli bait</i><span style="font-weight: bold;"> yang disebut </span><i style="font-weight: bold;">Al-Mahdi</i><span style="font-weight: bold;">, dan turunnya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/03/bukti-nabi-isa-belum-wafat.html" title="Bukti Nabi Isa Belum Wafat">Nabi Isa ke bumi</a><span style="font-weight: bold;">.</span><br /></div><br /><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border: 2px solid rgb(51, 51, 51); width: 220px; float: right; margin: 15px; padding: 10px;"><span style="font-weight: bold;"><div style="margin-bottom:10px;font-weight: bold;text-align:center;">Daftar Bahasan</div>- </span><a style="font-weight: bold;" href="#munculnya%20Imam%20Mahdi">Munculnya Imam Mahdi</a><br /><span style="font-weight: bold;">- </span><a style="font-weight: bold;" href="#turunnya%20Nabi%20Isa">Turunnya Nabi Isa</a><br /></div><div style="text-align: justify;"><span style="font-weight: bold; color: rgb(51, 51, 255);">Keyakinan ini tidak dipengaruhi oleh keyakinan yang berkembang di kalangan </span><i style="font-weight: bold; color: rgb(51, 51, 255);">syi'ah</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> yang mana mereka senantiasa mengagung-agungkan </span><i style="font-weight: bold; color: rgb(51, 51, 255);">ahli bait</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> melebihi dari yang semestinya dan mengagungkan </span><i style="font-weight: bold; color: rgb(51, 51, 255);">Ali</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> -rodhiyallahu 'anhu- melebihi Rosulullah -sholallahu 'alaihi wasallam-. keyakinan akan munculnya </span><i style="font-weight: bold; color: rgb(51, 51, 255);">Imam Mahdi</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> dan turunnya </span><i style="font-weight: bold; color: rgb(51, 51, 255);">Nabi Isa</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> adalah keyakinan </span><i style="font-weight: bold; color: rgb(51, 51, 255);">Ahlu Sunnah</i><span style="color: rgb(51, 51, 255);"> <span style="font-weight: bold;">dari kalangan sahabat Nabi -sholallahu 'alaihi wasallam- dan ummat terbaik setelahnya.</span></span><br /><br /><span class="fullpost"><span style="font-weight: bold; color: rgb(51, 51, 255);">Banyak sekali dalil-dalil tentang munculnya </span><i style="font-weight: bold; color: rgb(51, 51, 255);">Imam Mahdi</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> dan turunnya </span><i style="font-weight: bold; color: rgb(51, 51, 255);">Nabi Isa</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> -'alaihi salam- yang telah dikabarkan oleh Rosulullah -sholallahu 'alaihi wasallam-, berikut adalah sebagian hadist tersebut :</span></span><br /></div><span class="fullpost"><br /><span style="font-weight: bold;">- </span><a style="font-weight: bold;" name="munculnya Imam Mahdi">Hadist-Hadist <i>Shohih</i> tentang munculnya <i>Imam Mahdi</i></a><span style="font-weight: bold;"> :</span><br /><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">Rosulullah -sholallahu 'alaihi wasallam- bersabda :</span><br /><br /><div style="color: rgb(0, 153, 0);" class="arabic1">لَا تَذْهَبُ الدُّنْيَا حَتَّى يَمْلِكَ الْعَرَبَ رَجُلٌ مِنْ أَهْلِ بَيْتِي يُوَاطِئُ اسْمُهُ اسْمِي</div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Artinya : "Dunia ini tidak akan pergi (kiamat) sampai seseorang memimpin (semua) Arab, dia dari keluargaku (</span><i style="font-weight: bold;">Ahli Bait</i><span style="font-weight: bold;">) dan namanya seperti namaku." (HR At-Tirmidzi - lihat Sunan At-Tirmidzi hadist no. 2156)</span></span><br /></div><span class="fullpost"><br /><div style="color: rgb(0, 153, 0);" class="arabic1">يَلِي رَجُلٌ مِنْ أَهْلِ بَيْتِي يُوَاطِئُ اسْمُهُ اسْمِي</div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Artinya : "Akan datang setelahku seseorang dari keluargaku (</span><i style="font-weight: bold;">Ahli Bait</i><span style="font-weight: bold;">) dan namanya seperti namaku." (HR At-Tirmidzi - lihat Sunan At-Tirmidzi hadist no. 2157)</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- </span><a style="font-weight: bold;" name="turunnya Nabi Isa">Hadist-Hadist <i>Shohih</i> tentang turunnya <i>Nabi Isa</i> -'alaihi salam-</a><span style="font-weight: bold;"> :</span></span><br /></div><span class="fullpost"><br /><div style="color: rgb(0, 153, 0);" class="arabic1">وَالَّذِي نَفْسِي بِيَدِهِ لَيُوشِكَنَّ أَنْ يَنْزِلَ فِيكُمْ ابْنُ مَرْيَمَ حَكَمًا مُقْسِطًا فَيَكْسِرُ الصَّلِيبَ وَيَقْتُلُ الْخِنْزِيرَ وَيَضَعُ الْجِزْيَةَ وَيَفِيضُ الْمَالُ حَتَّى لَا يَقْبَلَهُ أَحَدٌ</div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Artinya : "Dan demi Dzat yang jiwaku berada ditangan-Nya, sungguh telah dekat akan turunnya </span><i style="font-weight: bold;">Ibnu Maryam</i><span style="font-weight: bold;"> (Nabi Isa) diantara kalian sebagai hakim yang adil, akan mematahkan salib, membunuh babi, meletakkan </span><i style="font-weight: bold;">jizyah</i><span style="font-weight: bold;"> (pajak atas orang non-muslim) dan membagikan harta sampai tidak seorangpun yang ingin menerimanya." (HR Ahmad, Bukhori dan Muslim)</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Munculnya </span><i style="font-weight: bold;">Imam Mahdi</i><span style="font-weight: bold;"> dan turunnya </span><i style="font-weight: bold;">Nabi Isa</i><span style="font-weight: bold;"> adalah 2 diantara 10 tanda besar sebelum kiamat besar terjadi. dan tanda-tandi ini adalah keyakinan para ulama dari kalangan sahabat dan generasi seterusnya.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Diantara periwayat-periwayat hadist-hadist tentang munculnya </span><i style="font-weight: bold;">Imam Mahdi</i><span style="font-weight: bold;"> dan turunnya </span><i style="font-weight: bold;">Nabi Isa</i><span style="font-weight: bold;"> adalah Abu Daud, At-Tirmidzi, Ibnu Majah, Al-Bazzar, Al-Hakim, Ath-Thobrani dan Abu Ya'la Al-Maushili.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Dan diantara sahabat-sahabat Nabi -sholallahu 'alaihi wasallam- yang diriwayatkan dari mereka adalah Ali, Ibnu Abbas, Ibnu Umar, Thalhah, Abdullah bin Mas'ud, Abu Hurairah, Anas, Abu Said Al-Khudri, Ummu Habibah, Ummu Salamah, Tsauban, Qurrah bin Iyas, Ali Al-Hilali, Abdullah bin Al-Harist bin juz'.</span></span><br /></div><span class="fullpost"><br /><span style="color: rgb(204, 102, 0);"># Rujukan</span><br /><span style="color: rgb(204, 102, 0);">Sunan At-Tirmidzi (Edisi bahasa Arab), Karya Muhammad bin Isa bin Saurah bin Musa bin Adh-Dhohhak At-Tirmidzi.</span><br /><span style="color: rgb(204, 102, 0);">Tuhfah Al-Ahwadzi (Edisi bahasa Arab), karya Muhammad bin Abdurrahman bin Abdurrahim Al-Mubarakfuri.</span><br /></span>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com25tag:blogger.com,1999:blog-1982668800463146170.post-83712394865081330802010-05-09T06:38:00.007+03:002010-05-10T16:18:09.459+03:00Membuat Slide Panel Di Blog<div style="text-align: justify; color: rgb(51, 51, 255);"><i style="font-weight: bold;">Membuat Slide Panel Di Blog</i><span style="font-weight: bold;">. seperti halnya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-menu-accordion-dengan-jquery.html" title="Membuat Menu Accordion Dengan JQuery"><i>menu accordion</i></a><span style="font-weight: bold;">, </span><i style="font-weight: bold;">slide panel</i><span style="font-weight: bold;"> bisa dipasang di </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/03/membuat-spoiler-di-sidebar.html" title="Membuat Spoiler Di Sidebar"><i>sidebar</i></a><span style="font-weight: bold;"> ataupun di area posting. menghemat penggunaan tempat pada blog dan simple membuatnya. kemudian meletakkan gadget didalamnya.</span><br /></div><img style="display: block; margin: 10px auto; text-align: center; width: 320px; height: 102px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii0pmY2kd8-xrrXND-9L4K8Tb9h2smm2PeErhil-g0Iqovrgm4vwOiVlXffjheyy_g_QIkUBZhvXwcdFrcEM8qj41433XdQa-PIO3jweaysVhmF0cRrhLTKXaaEf5At2P3M-PHM_HSlgWR/s320/jquery.png" alt="Membuat Slide Panel Di Blog" id="BLOGGER_PHOTO_ID_5469125893174195602" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Layaknya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/01/membuat-simple-accordions.html" title="Membuat Simple Accordions"><i>Simple Accordions</i></a><span style="font-weight: bold;">, menu slide panel ini menyembunyikan content yang ada didalamnya kemudian akan ditampilkan setelah diklik.</span><br /></div><span class="fullpost"><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">Silahkan lihat demo menu </span><i style="font-weight: bold; color: rgb(51, 51, 255);">Slide Panel</i><span style="font-weight: bold; color: rgb(51, 51, 255);"> berikut :</span><br /><br /><center><a href="http://hapia-demos.blogspot.com/2010/05/simple-slide-panel-demo.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara membuat </span><i style="font-weight: bold;">Slide Panel DI Blog</i><span style="font-weight: bold;"> adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Gunakan <span style="color: rgb(255, 0, 0);">JQuery versi 1.2.3</span> berikut pada template anda. copy paste JQuery berikut dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste script berikut dan letakkan dibawah JQuery 1.2.3 tadi :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 450px; text-align: left;"><script type='text/javascript'><br />$(document).ready(function(){<br /> $(&quot;.btn-slide&quot;).click(function(){<br /> $(&quot;#panel&quot;).slideToggle(&quot;slow&quot;);<br /> $(this).toggleClass(&quot;active&quot;);<br /> });<br />});<br /></script><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Masukan code CSS berikut dan letakkan diatas <span style="color: rgb(255, 0, 0);">]]></b:skin></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 450px; height: 300px; overflow: auto; text-align: left;">#panel {background: #fff;border:2px solid #f0f0f0;border-bottom:none;text-align:left;padding:10px;<span style="color: rgb(255, 0, 0);">width:280px;height:200px;</span>display: none;}<br /><br />.slide {margin: 0;padding: 0;<span style="color: rgb(255, 0, 0);">width:304px;</span>border-top: solid 4px #422410;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwR29mn1aDwLySH7t5jiaYD-NZZQ86s6XWA5Vo52BBAw77i0D7XHNzbQuCH2WobCeqVWM263anTq3COsOO3N-TM1U42a0ILivo-SAsEu8AuGdzOvqGpy956c7aWDUW4uEAtJnbNmRkKg/s1600/btn-slide.gif) no-repeat center top;}<br /><br />.btn-slide {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPCzyBxECRGT61HmncUVZwT92Df6dkyZcSVaiLIxSlikKnCGCDrRuHuuQkTId0hSjxcL15OQUhXQv27RftLqmN_8MCu2ETMGsFCv04qK-RFGcU5Di6QVbW2q1nUNx6uKbgPzXw2Lx1PDY/s1600/white-arrow.gif) no-repeat right -50px;text-align:center;width: 144px;height: 31px;padding: 10px 10px 0 0;margin: 0 auto;display: block;font: bold 120%/100% Arial, Helvetica, sans-serif;color: #fff;text-decoration: none;}<br /><br />.active {background-position: right 12px;}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk langkah berikutnya adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste code berikut dan letakkan ditempat yang anda inginkan (postingan atau sidebar) :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><div id="panel" style="font-weight:bold;"><br /><br /><blink>LETAKKAN CONTENT ANDA DISINI</blink><br /><br /></div><div class="slide"><a class="btn-slide" href="#"><span style="color: rgb(255, 0, 0);">Slide Panel</span></a></div><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">width:280px;height:200px;</span> adalah lebar dan tinggi area content.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">width:304px;</span> adalah lebar border pada code class slide.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">Slide Panel</span> adalah tulisan pada tombol </span><i style="font-weight: bold;">slide panel</i><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk tutorial originalnya silahkan kunjungi postingan berjudul </span><a style="font-weight: bold;" href="http://www.webdesignerwall.com/tutorials/jquery-tutorials-for-designers/" target="_blank">jQuery Tutorials for Designers</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div><span class="fullpost"><br /><div style="background: none repeat scroll 0% 0% rgb(237, 255, 179); border: 2px solid rgb(180, 255, 153); color: rgb(255, 0, 0); padding: 10px; font-weight: bold;text-align:justify;"><blink><u>Sangat Penting !!!</u></blink><br />Jangan tanyakan apakah menu ini memberatkan loading blog atau tidak. Bijaklah dalam mendesain blog anda. buatlah apa yang memang anda butuhkan untuk blog anda. Semua content dalam dunia blogger berpotensi membuat loading blog bertambah. jangan asal memasang dan membuat. sehingga anda tidak akan lagi menanyakan apakah ini memberatkan blog atau tidak !!!<br /></div></span>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com28tag:blogger.com,1999:blog-1982668800463146170.post-68842658003544172072010-05-07T17:50:00.008+03:002010-05-12T10:50:39.746+03:00Membuat RSS Feed Dari Label Tertentu<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Membuat atau memanggil RSS feed hanya dari label tertentu, kemudian menjadikannya di beberapa widget seperti </span><i style="font-weight: bold;">recent post</i><span style="font-weight: bold;">. atau hanya sekedar ingin membuat daftar isi untuk postingan pada label tertentu saja. metode ini mempermudah dari pada harus memasukan link satu persatu.</span><br /></div><img style="display: block; margin: 0px auto 10px; text-align: center; width: 250px; height: 250px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Ss9oiuJOlReSdIOdWgmCTnTlB0AaS4Gl5NImnJZeHWDtz4GlxvaQvY28G7DHRRFcdW8GIUPrc8HOChzTx3bsC2_BBxRzLC9HScw1Sguss9I8XvJgV6q8NjiL6-lnqn09dPxZCkSm00By/s320/rss-feed-icon.jpg" alt="Membuat RSS Feed Dari Label Tertentu" id="BLOGGER_PHOTO_ID_5468550986372337378" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Salah satu widget yang menggunakan metode pemanggilan feed hanya dari label tertentu adalah </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/05/membuat-widget-feed-reader.html" title="Membuat Widget Feed Reader"><i>Widget Feed Reader</i></a><span style="font-weight: bold;">. dengan widget ini anda bisa mencantumkan daftar isi label tertentu tanpa memakan banyak tempat di blog anda.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Akan tetapi ada beberapa hal yang harus anda perhatikan sebelum membuat RSS Feed hanya dari label tertentu. hal-hal tersebut adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Dasar metode pemanggilan feed dari label tertentu adalah sebagai berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); width: 450px; padding: 10px;">http://www.URL-BLOG-ANDA.com/feeds/posts/default/-/NAMA LABEL<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Penambahan tanda "/-/" sebagai pemisah antara feed penuh dengan label, kemudian pemanggilan akan diteruskan dan dikhususkan untuk isi postingan pada label tertentu.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Perhatikan pada bentuk kapital atau biasa pada nama label; contoh : jika nama label anda adalah </span><i style="font-weight: bold;">Tutorial Blog</i><span style="font-weight: bold;"> (dengan T besar dan B besar), maka pada RSS Feed ini anda harus menuliskannya besar. jangan di tulis </span><i style="font-weight: bold;">tutorial blog</i><span style="font-weight: bold;"> (dengan t kecil dan b kecil).</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pada RSS Feed tertentu yang ingin anda masukkan dalam sebuah widget seperti </span><i style="font-weight: bold;">recent post</i> <span style="font-weight: bold;">atau</span> <i style="font-weight: bold;">Feed Reader</i><span style="font-weight: bold;">, maka cukup memasukkan link URL feed khusus label seperti cara diatas.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Jika anda telah merubah arah </span><i style="font-weight: bold;">Feed Default</i><span style="font-weight: bold;"> blog anda ke </span><i style="font-weight: bold;">FEED BURNER</i><span style="font-weight: bold;">, maka anda harus mengalihkan arah feed label tertentu ke </span><i style="font-weight: bold;">FEED BURNER</i><span style="font-weight: bold;"> juga dengan cara membuat feed baru dengan memasukan URL feed label anda.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Silahkan login ke </span><i style="font-weight: bold;">FeedBurner[Dot]Com</i><span style="font-weight: bold;"> menggunakan account blogger anda dan masukan URL feed label yang ingin anda buat. kemudian gunakan URL dari </span><i style="font-weight: bold;">FEED BURNER</i><span style="font-weight: bold;"> pada widget anda.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com24tag:blogger.com,1999:blog-1982668800463146170.post-14985042958607150192010-05-05T08:41:00.006+03:002010-05-10T16:19:37.086+03:00Membuat Widget Feed Reader<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Widget Feed Reader adalah sebuat widget yang dapat menampung dan me-load feed blog, seperti </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-jumlah-post-dan-komentar.html" title="Membuat Jumlah Post Dan Komentar">post atau komentar</a><span style="font-weight: bold;"> juga bisa di tambahkan feed blog teman jika ingin mengetahui postingan terakhir blog tersebut. seperti layaknya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-tab-view-dengan-jquery.html" title="Membuat Tab View Dengan JQuery">tab view</a><span style="font-weight: bold;"> yang bisa dipasang di sidebar.</span><br /></div><br /><div style="text-align: justify;"><img style="display: block; margin: 0px auto 10px; text-align: center; width: 185px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5m0q0txM56wEl43RNnY2VHdshLwjGP_WnTk7uwBeLmyHEI6sbprsEMfhHiGO0gRlej2c7OzYYxuAVS6n5Ogsdkbje4bm1L8P6-Vn6plOWDdU6rBI8QPW1Q6Rpdx6Bw1q9f8mFOlG7lkvv/s320/feed-reader.JPG" alt="Membuat Widget Feed Reader" id="BLOGGER_PHOTO_ID_5467670302004320386" border="0" /><span style="font-weight: bold; color: rgb(51, 51, 255);">Dipasang recent post atau recent comment untuk memudahkan pengunjung atau pun admin blog untuk mengontrol lalu lintas yang terjadi di blog. dengan menggunakan JQuery menjadikan widget ini lebih atraktif.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Silahkan lihat demo Widget Feed Reader berikut :</span></span><br /></div><span class="fullpost"><br /><center><a href="http://demo-hapiamesir.blogspot.com/2010/05/widget-feed-reader-demo.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara membuat Widget Feed Reader adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Sebelumnya pastikan blog anda telah tertanam didalamnya <span style="color: rgb(255, 0, 0);">JQuery versi 1.3.2</span>, jika belum silahkan copy <span style="color: rgb(255, 0, 0);">JQuery versi 1.3.2</span> dibawah ini dan letakkan dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /></div></center><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">- Silahkan masukan feed anda dalam script berikut :</span><br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 500px; height: 400px; overflow: auto;">/* Configuration: */<br /><br />var tabs = {<br /> "<span style="color: rgb(255, 0, 0);">@Tutorial</span>" : {<br /> "feed" : "http://feeds.feedburner.com/hapiamesir/tips_blogging",<br /> "function" : rss<br /> },<br /> <br /> "Latest Posting": {<br /> "feed" : "http://feeds.feedburner.com/HapiaMesir",<br /> "function" : rss<br /> },<br /> <br /> "CSS Editing": {<br /> "feed" : "http://feeds.feedburner.com/hapiamesir/css_editing",<br /> "function" : rss<br /> },<br /> <br /> "Download Mp3" : {<br /> "feed" : "http://feeds.feedburner.com/hapiamesir/download_mp3",<br /> "function" : rss<br /> },<br /> <br /> "Comments" : {<br /> "feed" : "http://feeds.feedburner.com/hapiamesir/comment",<br /> "function" : rss<br /> }<br />}<br /><br />var totalTabs;<br />$(document).ready(function(){<br /> /* This code is executed after the DOM has been completely loaded */<br /> <br /> /* Counting the tabs */<br /> totalTabs=0;<br /> $.each(tabs,function(){totalTabs++;})<br /> <br /><br /> $('#feedWidget').show().mouseleave(function(){<br /> <br /> /* If the cursor left the widet, hide the drop down list: */<br /> $('.dropDownList').remove();<br /> $('#activeTab').removeClass('hover');<br /><br /> }).mouseenter(function(){<br /> <br /> if(totalTabs>1) $('#activeTab').addClass('hover');<br /> <br /> });<br /><br /> $('#activeTab').click(showDropDown);<br /><br /> /* Using the live method to bind an event, because the .dropDownList does not exist yet: */<br /> $('.dropDownList div').live('click',function(){<br /> <br /> /* Calling the showDropDown function, when the drop down is already shown, will hide it: */<br /> showDropDown();<br /> showTab($(this).text());<br /> });<br /> <br /> <br /> /* Showing one of the tabs on load: */<br /> showTab('<span style="color: rgb(255, 0, 0);">@Tutorial</span>');<br /> <br />});<br /><br /><br />function showTab(key)<br />{<br /> var obj = tabs[key];<br /> if(!obj) return false;<br /> <br /> var stage = $('#tabContent');<br /> <br /> /* Forming the query: */<br /> var query = "select * from feed where url='"+obj.feed+"' LIMIT 5";<br /> <br /> /* Forming the URL to YQL: */<br /> var url = "http://query.yahooapis.com/v1/public/yql?q="+encodeURIComponent(query)+"&format=json&callback=?";<br /> <br /> $.getJSON(url,function(data){<br /><br /> stage.empty();<br /><br /> /* item exists in RSS and entry in ATOM feeds: */<br /> $.each(data.query.results.item || data.query.results.entry,function(){<br /> try{<br /> /* Trying to call the user provided function, "this" the rest of the feed data: */<br /> stage.append(obj['function'](this));<br /> <br /> }<br /> catch(e){<br /> /* Notifying users if there are any problems with their handler functions: */<br /> var f_name =obj['function'].toString().match(/functions+(w+)(/i);<br /> if(f_name) f_name = f_name[1];<br /> <br /> stage.append('<div>There is a problem with your '+f_name+ ' function</div>');<br /> return false;<br /> }<br /> })<br /> });<br /> <br /> $('#activeTab').text(key);<br />}<br /><br />function showDropDown()<br />{<br /> if(totalTabs<2) return false;<br /> <br /> if($('#feedWidget .dropDownList').length)<br /> {<br /> /* If the drop down is already shown, hide it: */<br /> $('.dropDownList').slideUp('fast',function(){ $(this).remove(); })<br /> return false;<br /> }<br /> <br /> var activeTab = $('#activeTab');<br /> <br /> var offsetTop = (activeTab.offset().top - $('#feedWidget').offset().top )+activeTab.outerHeight() - 5;<br /> <br /> /* Creating the drop down div on the fly: */<br /> var dropDown = $('<div>').addClass('dropDownList').css({<br /><br /> 'top' : offsetTop,<br /> 'width' : activeTab.width()<br /> <br /> }).hide().appendTo('#feedWidget')<br /> <br /> $.each(tabs,function(j){<br /> /* Populating the div with the tabs that are not currently shown: */<br /> if(j==activeTab.text()) return true;<br /> <br /> $('<div>').text(j).appendTo(dropDown);<br /> })<br /> <br /> dropDown.slideDown('fast');<br />}<br /><br /><br />function rss(item)<br />{<br /> return $('<div>').html(<br /> formatString(item.title.content || item.title)+<br /> ' <a href="'+(item.origLink || item.link[0].href || item.link)+'" target="_blank">[read]</a>'<br /> );<br />}<br /><br /><br />function formatString(str)<br />{<br /> str = str.replace(/<[^>]+>/ig,'');<br /> str=' '+str;<br /> str = str.replace(/((ftp|https?)://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');<br /> return str;<br />}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan script diatas dengan nama yang anda inginkan dengan ekstensi <span style="color: rgb(255, 0, 0);">.js</span> atau <span style="color: rgb(255, 0, 0);">.txt</span>, kemudian upload ke situs hosting anda.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian masukan ke template anda dibawah JQuery 1.3.2 diatas dengan format :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><script src='http://SITUS-HOSTING-ANDA.com/NAMA-FILE-ANDA.js' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Untuk pengaturan CSS, silahkan copy paste code css berikut dan letakkan di atas <span style="color: rgb(255, 0, 0);">]]></b:skin></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 450px; height: 400px; overflow: auto;">#feedWidget{<br /> background:#333;<br /> border:2px solid #48535e;<br /> margin:0 auto;<br /> width:200px;<br /> padding:5px;<br /> position:relative;<br /> <br /> /* Remains hidden if JS is not enabled: */<br /> display:none;<br /> z-index:20;<br />}<br /><br /><br />#activeTab.hover,.dropDownList{<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZu_LqhvAdbnx4g0-igGGUuB3obJiYaPtkkVo7dZCvpgf5hvxVvVncweaIsPacuVC8mHys7p5Wg93nLUj65pA-foGa0Ycg_3DenpWECRT3XSw-3RDLGv6_lsrNN03NQAev4WWkakJT7o/s1600/drop_arrow.png) no-repeat 95% 50% #758695;<br /> border:1px solid #38434d;<br /><br /> margin:-1px;<br /> <br /> cursor:pointer;<br /> <br /> /* CSS3 round corners: */<br /> -moz-border-radius:5px;<br /> -webkit-border-radius:5px;<br /> border-radius:5px;<br /> <br />}<br /><br />#activeTab,.dropDownList div{<br /> color:white;<br /> cursor:pointer;<br /> font-size:20px;<br /> margin:0 2px 0 0;<br /> padding:5px;<br /> <br /> text-shadow:0 1px 1px black;<br />}<br /><br />.line{<br /> height:1px;<br /> overflow:hidden;<br /> background-color:#eee;<br /> border-bottom:1px solid #687581;<br /> margin:10px 0;<br />}<br /><br />.dropDownList{<br /> background-image:none;<br /> position:absolute;<br /><br /> border-top:none;<br /> padding:5px;<br /> <br /> /* We reset the roundness of the top corners, inherited by a previous rule: */<br /> <br /> -moz-border-radius-topleft: 0;<br /> -moz-border-radius-topright: 0;<br /> -webkit-border-top-left-radius: 0;<br /> -webkit-border-top-right-radius: 0;<br /> border-top-left-radius: 0;<br /> border-top-right-radius: 0;<br />}<br /><br />.dropDownList div:hover{<br /> background-color:#505E6B;<br />}<br /><br />#tabContent div{<br /> /* The feed entry divs */<br /> <br /> background-color:#EEE;<br /> color:#555555;<br /> font-size:11px;<br />font-weight:bold;<br /> margin-bottom:11px;<br /> padding:5px;<br /> position:relative;<br /> <br /> -moz-border-radius:5px;<br /> -webkit-border-radius:5px;<br /> border-radius:5px;<br /> <br /> -moz-box-shadow:0 1px 1px black;<br /> -webkit-box-shadow:0 1px 1px black;<br /> box-shadow:0 1px 1px black;<br />}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian letakkan code berikut ditempat yang anda inginkan :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><div id="feedWidget" style="display: block;"><div id="activeTab" class=""></div><div class="line"></div><div id="tabContent"><div></div></div></div><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">@Tutorial</span>; pada script diatas jika anda ganti dengan tulisan yang anda inginkan, ganti juga tulisan <span style="color: rgb(255, 0, 0);">@Tutorial</span> yang kedua pada script tersebut, gunakan tulisan tanpa spasi jika anda ingin menggantinya.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># @Tutorial adalah nama feed yang pertama ditampilkan.</span></span><br /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;"># Bagi yang ingin menampilkan widget update tutorial dari </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> di blog anda, silahkan gunakan script berikut untuk menggantikan script kedua :</span><br /></div><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 400px;"><script src='http://hapiajavascript.googlecode.com/files/hapia-widget.js' type='text/javascript'/><br /></div></center><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk tutorial aslinya silahkan kunjungi </span><a style="font-weight: bold;" href="http://tutorialzine.com/2010/02/feed-widget-jquery-css-yql/" target="_blank">Making a Sleek Feed Widget With YQL, jQuery & CSS3</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com31tag:blogger.com,1999:blog-1982668800463146170.post-8423607949667570792010-05-02T09:37:00.006+03:002010-05-10T16:20:36.769+03:00Membuat Banner Iklan Di Blog<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Mempunyai blog banyak fungsinya, dan ketika blog kita telah ramai pengunjung maka akan dapat menarik minat <a href="http://www.hapiamesir.org/2009/12/pasang-iklan.html" title="Pasang Iklan">pemasang iklan</a> untuk mengiklankan produk atau situsnya. memasang banner iklan di sidebar adalah salah satu pilihan tempat yang paling tepat.</span><br /></div><br /><center><img style="width: 270px; height: 270px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhhj4pV_n7tBgvvC6tkqRotNrelrslJVWQKlbEtL8oRuOR3x99ESUAcua9bdNKXTDwk2-GldDaMnXIunkBjvaJ27zKjakUShrfCz12hCy6N62wPigKgsQBkrF5Djckd6c4-M1QxdgogIlt/s320/banner-box.JPG" alt="Membuat Banner Iklan Di Blog" id="BLOGGER_PHOTO_ID_5466558410685990242" border="0" /></center><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Membuat banner iklan terlihat rapi di sidebar yang berbentuk kotak-kotak kecil dengan sentuhan JQuery menjadikannya sangat indah dan lebih menarik. silahkan lihat demo berikut dan sorotkan mouse ke salah satu gambar :</span><br /></div><span class="fullpost"><br /><center><a href="http://slide-show-demo.blogspot.com/2010/05/simple-banner-rotator-demo.html" target="_blank"><img alt="Membuat Banner Iklan Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara membuat banner iklan seperti di demo adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Sebelumnya pastikan blog anda telah tertanam didalamnya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-mosaic-slideshow-di-blog.html" title="Membuat Mosaic SlideShow Di Blog">JQuery versi 1.4.2</a><span style="font-weight: bold;">, jika belum silahkan copy JQuery versi 1.4.2 dibawah ini dan letakkan dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste script berikut dibawah JQuery :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 450px;"><script src='http://hapiajavascript.googlecode.com/files/banner-box.js' type='text/javascript'/><br /></div></center><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">- Copy paste code CSS berikut di atas<span style="color: rgb(255, 0, 0);"> ]]></b:skin></span> :</span><br /><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 400px; height: 350px; overflow: auto;">.bannerHolder{<br />/* The main banner unordered list */<br /><br />height:270px;<br />width:270px;<br /><br />float:left;<br />margin:20px 15px;<br />padding:10px;<br />background:#f7f7f7;<br />border:1px solid #eee;<br /><br />/* CSS3 rounded corners */<br /><br />-moz-border-radius:12px;<br />-webkit-border-radius:12px;<br />border-radius:12px;<br />}<br /><br />.bannerHolder div{<br />/* Disabling the bullet of the div elements: */<br />list-style:none;<br />display:inline;<br />}<br /><br />.banner{<br />/* The banner divs */<br />position:relative;<br />width:125px;<br />height:125px;<br />overflow:hidden;<br />float:left;<br />margin:5px;<br />}<br /><br />.banner img{<br />/* The banner divs */<br />display:block;<br />border:none;<br />}<br /><br />.banner div{<br />/* The dark animated divs */<br /><br />position:absolute;<br />z-index:100;<br />background-color:#222;<br />width:60px;<br />height:60px;<br />cursor:pointer;<br /><br />/* Setting a really big value for border-radius<br /> will make the divs perfect circles */<br /><br />-moz-border-radius:100px;<br />-webkit-border-radius:100px;<br />border-radius:100px;<br />}<br /><br />/* Positioning the animated divs outside the<br />corners of the visible banner area: */<br /><br />.banner .cornerTL{ left:-63px;top:-63px; }<br />.banner .cornerTR{ right:-63px;top:-63px; }<br />.banner .cornerBL{ left:-63px;bottom:-63px; }<br />.banner .cornerBR{ right:-63px;bottom:-63px; }<br /><br />.banner p{<br />/* The "Visit Company" text */<br /><br />display:none; /* hidden by default */<br /><br />left:0;<br />top:37px;<br />width:100%;<br />z-index:200;<br />position:absolute;<br /><br />font-family:Tahoma, Arial, Helvetica, sans-serif;<br />color:white;<br />font-size:11px;<br />text-align:center;<br />cursor:pointer;<br />}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian pergi ke "Elemen Laman".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Klik "Tambah Gadget" dan pilih "HTML/JavaScript".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste code berikut kedalamnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 10px; width: 500px; height: 350px; overflow: auto;"><div class="bannerHolder"><br /><div class="banner"><br /><a href="<span style="color: rgb(255, 0, 0);">http://LINK-IKLAN-ANDA.com</span>"><img width="125" height="125" alt="<span style="color: rgb(255, 0, 0);">JUDUL GAMBAR</span>" src="<span style="color: rgb(255, 0, 0);">http://URL-BANNER-ANDA.gif</span>" /></a><br /><p style="display: none;"><span style="color: rgb(255, 0, 0);">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</span></p><br /><div class="cornerTL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /><div class="cornerTR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /><div class="cornerBL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /><div class="cornerBR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /></div><br /><div class="banner"><br /><a href="<span style="color: rgb(255, 0, 0);">http://LINK-IKLAN-ANDA.com</span>"><img width="125" height="125" alt="<span style="color: rgb(255, 0, 0);">JUDUL GAMBAR</span>" src="<span style="color: rgb(255, 0, 0);">http://URL-BANNER-ANDA.gif</span>" /></a><br /><p style="display: none;"><span style="color: rgb(255, 0, 0);">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</span></p><br /><div class="cornerTL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /><div class="cornerTR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /><div class="cornerBL" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /><div class="cornerBR" style="opacity: 0.4; overflow: hidden; width: 60px; display: block; height: 60px;"></div><br /></div><br /><div class="banner"><br /><a href="<span style="color: rgb(255, 0, 0);">http://LINK-IKLAN-ANDA.com</span>"><img width="125" height="125" alt="<span style="color: rgb(255, 0, 0);">JUDUL GAMBAR</span>" src="<span style="color: rgb(255, 0, 0);">http://URL-BANNER-ANDA.gif</span>" /></a><br /><p style="display: none;"><span style="color: rgb(255, 0, 0);">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</span></p><br /><div class="cornerTL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /><div class="cornerTR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /><div class="cornerBL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /><div class="cornerBR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /></div><br /><div class="banner"><br /><a href="<span style="color: rgb(255, 0, 0);">http://LINK-IKLAN-ANDA.com</span>"><img width="125" height="125" alt="<span style="color: rgb(255, 0, 0);">JUDUL GAMBAR</span>" src="<span style="color: rgb(255, 0, 0);">http://URL-BANNER-ANDA.gif</span>" /></a><br /><p style="display: none;"><span style="color: rgb(255, 0, 0);">TULISAN YG NAMPAK KETIKA DISOROT MOUSE</span></p><br /><div class="cornerTL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /><div class="cornerTR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /><div class="cornerBL" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /><div class="cornerBR" style="opacity: 0.4; width: 60px; display: block; height: 60px; overflow: hidden;"></div><br /></div><br /></div><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Tutorial asli adalah untuk situs yang berbasis bahasa PHP. tapi </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> modifikasi sehingga bisa dipraktekkan di blog yang basis bahasanya HTML. untuk tutorial originalnya silahkan kunjungi </span><a style="font-weight: bold;" href="http://tutorialzine.com/2010/04/simple-banner-rotator-with-php-jquery-mysql/" target="_blank">Simple Banner Rotator With PHP, jQuery & MySQL</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com35tag:blogger.com,1999:blog-1982668800463146170.post-58187232650523169852010-04-30T08:55:00.007+03:002010-05-10T16:20:57.113+03:00Membuat Mosaic SlideShow Di Blog<div style="text-align: justify; color: rgb(51, 51, 255);"><i style="font-weight: bold;">Membuat mosaic slide show di blog</i><span style="font-weight: bold;">. bagi sebagian blogger yang ingin membuat slide sendiri untuk memuat koleksi foto-fotonya dan ingin ditampilkan di blog. mungkin dengan menggunakan mosaic slide show ini akan lebih terlihat atraktif.</span><br /></div><br /><img style="display: block; margin: 0px auto 0px; text-align: center; width: 219px; height: 217px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihOcP2QODBYbPuR42UtSQH-ppfUW-rND9hPcNdloDmWHSedVMhPJdVkiAG4f3w3iFg9TNIK1Js0VF9LPyYBzdXbbPQg6Z_jMRI6UCX9Tq-rt5epnfHxdxoN5MGDQskDxieMa6j9EEf8T6a/s320/slideshowIcon.png" alt="Membuat Mosaic SlideShow Di Blog" id="BLOGGER_PHOTO_ID_5465814628151615746" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Dengan perpaduan JQuery versi 1.4.2 dengan script pembuat slide show menjadikan slider ini dapat berganti-ganti sendiri atau juga dapat di klik untuk mengganti foto/gambar.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk contoh </span><i style="font-weight: bold;">Membuat mosaic slide show</i><span style="font-weight: bold;"> silahkan klik tombol demo dibawah ini :</span></span><br /></div><span class="fullpost"><br /><center><a href="http://slide-show-demo.blogspot.com/2010/04/slide-show-slider-demo.html" target="_blank"><img alt="Membuat Mosaic SlideShow Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berikut cara membuat </span><i style="font-weight: bold;">Membuat mosaic slide show di blog</i><span style="font-weight: bold;"> dengan metode yang paling mudah :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.4.2, jika belum silahkan copy JQuery versi 1.4.2 dibawah ini dan letakkan dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 15px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Masukan link URL foto/gambar anda pada script berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 550px; height: 400px; overflow: auto; padding: 10px;">/* The slide images are contained in the slides array. */<br />var slides = new Array('<span style="color: rgb(255, 0, 0);">http://LINK-URL-FOTO1.jpg</span>',<br /> '<span style="color: rgb(255, 0, 0);">http://LINK-URL-FOTO2.jpg</span>',<br /> '<span style="color: rgb(255, 0, 0);">http://LINK-URL-FOTO3.jpg</span>',<br /> '<span style="color: rgb(255, 0, 0);">http://LINK-URL-FOTO4.jpg</span>',<br /> '<span style="color: rgb(255, 0, 0);">http://LINK-URL-FOTO5.jpg</span>',<br /> '<span style="color: rgb(255, 0, 0);">http://LINK-URL-FOTO6.jpg</span>');<br /><br /><br />$(document).ready(function(){<br />/* This code is executed after the DOM has been completely loaded */<br /><br />$('.arrow.left').click(function(){<br /> prev();<br /><br /> /* Clearing the autoadvance if we click one of the arrows */<br /> clearInterval(auto);<br />});<br /><br />$('.arrow.right').click(function(){<br /> next();<br /> clearInterval(auto);<br />});<br /><br />/* Preloading all the slide images: */<br /><br />for(var i=0;i<slides.length;i++)<br />{<br /> (new Image()).src=slides[i];<br />}<br /><br />/* Shoing the first one on page load: */<br />transition(1);<br /><br /><br />/* Setting auto-advance every 10 seconds */<br /><br />var auto;<br /><br />auto=setInterval(function(){<br /> next();<br />},10*1000);<br />});<br /><br />var current = {};<br />function transition(id)<br />{<br />/* This function shows the individual slide. */<br /><br />if(!slides[id-1]) return false;<br /><br />if(current.id)<br />{<br /> /* If the slide we want to show is currently shown: */<br /> if(current.id == id) return false;<br /><br /> /* Moving the current slide layer to the top: */<br /> current.layer.css('z-index',10);<br /><br /> /* Removing all other slide layers that are positioned below */<br /> $('.mosaic-slide').not(current.layer).remove();<br />}<br /><br />/* Creating a new slide and filling it with generateGrid: */<br />var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));<br /><br />/* Moving it behind the current slide: */<br />newLayer.css('z-index',1);<br /><br />$('#mosaic-slideshow').append(newLayer);<br /><br />if(current.layer)<br />{<br /> /* Hiding each tile of the current slide, exposing the new slide: */<br /> $('.tile',current.layer).each(function(i){<br /> var tile = $(this);<br /> setTimeout(function(){<br /> tile.css('visibility','hidden');<br /> },i*10);<br /> })<br />}<br /><br />/* Adding the current id and newLayer element to the current object: */<br />current.id = id;<br />current.layer = newLayer;<br />}<br /><br />function next()<br />{<br />if(current.id)<br />{<br /> transition(current.id%slides.length+1);<br />}<br />}<br /><br />function prev()<br />{<br />if(current.id)<br />{<br /> transition((current.id+(slides.length-2))%slides.length+1);<br />}<br /><br />}<br /><br />/* Width and height of the tiles in pixels: */<br />var tabwidth=50, tabheight=50;<br /><br />function generateGrid(param)<br />{<br />/* This function generates the tile grid, with each tile containing a part of the slide image */<br /><br />/* Creating an empty jQuery object: */<br />var elem = $([]),tmp;<br /><br />for(var i=0;i<param.rows;i++)<br />{<br /> for(var j=0;j<param.cols;j++)<br /> {<br /> tmp = $('<div>', {<br /> "class":"tile",<br /> "css":{<br /> "background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px'<br /> }<br /> });<br /> <br /> /* Adding the tile to the jQuery object: */<br /> elem = elem.add(tmp);<br /> }<br /><br /> /* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */<br /> elem = elem.add('<div class="clear"></div>');<br />}<br /><br />return elem;<br />}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan script diatas dalam notepad dan simpan dengan dengan nama terserah anda dan ekstensi <span style="color: rgb(255, 0, 0);">.js</span> atau <span style="color: rgb(255, 0, 0);">.txt</span> dan upload script anda ke hosting yang anda punya.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Letakkan link URL script anda tersebut dibawah JQuery 1.4.2 diatas dengan format sebagai berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 15px;"><script src='http://SITUSHOSTINGANDA/NAMA-FILE.js' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Masukan code CSS berikut dan letakkan diatas code <span style="color: rgb(255, 0, 0);">]]></b:skin></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; height: 400px; overflow: auto; padding: 10px;">#mosaic-slideshow{<br />/* The slideshow container div */<br />height:400px;<br />margin:0 auto;<br />position:relative;<br />width:570px;<br />}<br /><br />.mosaic-slide{<br />/* This class is shared between all the slides */<br />left:70px;<br />position:absolute;<br />top:10px;<br />border:10px solid #555;<br /><br />/* CSS3 rounded corners */<br />-moz-border-radius:20px;<br />-webkit-border-radius:20px;<br />border-radius:20px;<br />}<br /><br />.tile{<br />/* The individual tiles */<br />height:50px;<br />width:50px;<br />float:left;<br />border:1px solid #555;<br />border-width:0 1px 1px 0;<br />background-color:#555;<br />}<br /><br />.arrow{<br />/* The prev/next arrows */<br />width:35px;<br />height:70px;<br />background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOt86lOuXbuR4qsYDSVSkH8Js4q-vlEZCa2TIL3wRlOhbhNwRubfuOyFcTlcmPXjfH_469Ys1i69JjqE4ahF8rY8XClWBjrFSNOcGFUR1rf9uRGfMa6uP5zs0BFiyGXvN4mWCMzYhytmK/s1600/arrows.png") no-repeat;<br />position:absolute;<br />cursor:pointer;<br />top:50%;<br />margin-top:-35px;<br />}<br /><br />.arrow.left{<br />left:10px;<br />background-position:center top;<br />}<br /><br />.arrow.left:hover{<br />background-position:center -70px;<br />}<br /><br />.arrow.right{<br />right:10px;<br />background-position:center -140px;<br />}<br /><br />.arrow.right:hover{<br />background-position:center -210px;<br />}<br /><br />.clear{<br />/* This class clears the floats */<br />clear:both;<br />}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan template anda.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian copy paste code berikut ditempat yang ingin anda telatkan </span><i style="font-weight: bold;">mosaic slide show</i> <span style="font-weight: bold;">tersebut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 15px;"><div id="mosaic-slideshow" style="margin:0px;"><br /> <div class="arrow left"></div><br /> <div class="arrow right"></div><br /> </div><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Dan simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># Untuk hasil yang maksimal, gunakan gambar dengan ukuran 400X400 pixel pada script diatas.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk tutorial originalnya bisa di baca di </span><a style="font-weight: bold;" href="http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/" target="_blank">Making a Mosaic Slideshow With jQuery & CSS</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com33tag:blogger.com,1999:blog-1982668800463146170.post-25995861762675549272010-04-28T07:45:00.011+02:002010-05-10T16:21:28.854+03:00Membuat Tab View Dengan JQuery<div style="text-align: justify; color: rgb(51, 51, 255);"><i style="font-weight: bold;">Membuat Tab View Dengan JQuery</i><span style="font-weight: bold;">. Tab view dengan menggunakan JQuery versi 1.3.2 berguna untuk menghemat ruang. dengan jumlah gadget </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/2010/03/membuat-spoiler-di-sidebar.html" title="Membuat Spoiler Di Sidebar">di sidebar</a><span style="font-weight: bold;"> yang banyak bisa membuat sidebar tampak panjang kebawah. dengan tab view dapat memnghemat tempat sehingga sidebar tidak tampak panjang kebawah. dengan Tab view juga membuat blog lebih rapi.</span><br /><img style="display: block; margin: 10px auto; text-align: center; width: 315px; height: 197px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRKqkyJSHj9SnnTbTQhhY-c0HDBjM-SsST3gMJAd_RvApNddnNdk8b4BvJ1WHeo5vidWyZYA0EhVY1A73inNgPFneIkxPj2LDE38XQhtQbR3n96_W4gdQCqpGH-xueqnyd-KGsLaJaftE/s320/tab-view.JPG" alt="Membuat Tab View Dengan JQuery" id="BLOGGER_PHOTO_ID_5465067436664815986" border="0" /><br /><span style="font-weight: bold;">Untuk Demo </span><i style="font-weight: bold;">Tab View Dengan JQuery</i><span style="font-weight: bold;">, silahkan klik tombol demo berikut :</span><br /></div><span class="fullpost"><br /><center><a href="http://demo-hapiamesir.blogspot.com/2010/04/membuat-tab-view-dengan-jquery.html" target="_blank"><img alt="Membuat Tab View Dengan JQuery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara membuat </span><i style="font-weight: bold;">Tab View Dengan JQuery</i><span style="font-weight: bold;"> adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara Membuat Navigasi Stylish di Blog adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 10px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Letakkan Script Berikut dibawah JQuery 1.3.2 diatas tadi :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 500px; overflow: auto; padding: 10px;"><script type='text/javascript'><br />$(document).ready(function(){$(&quot;.tab_content&quot;).hide();$(&quot;ul.tabs li:first&quot;).addClass(&quot;active&quot;).show();$(&quot;.tab_content:first&quot;).show();$(&quot;ul.tabs li&quot;).click(function(){$(&quot;ul.tabs li&quot;).removeClass(&quot;active&quot;);$(this).addClass(&quot;active&quot;);$(&quot;.tab_content&quot;).hide();var activeTab=$(this).find(&quot;a&quot;).attr(&quot;href&quot;);$(activeTab).fadeIn(1500)})});<br /></script><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian letakkan code CSS berikut diatas <span style="color: rgb(255, 0, 0);">]]></b:skin></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 400px; height: 350px; overflow: auto; padding: 10px;">/* pageTabs */<br />.pageTabs {width: 300px; height:150px; margin:5px font-size:11px;}<br />ul.tabs {<br />margin-left: 5px;<br />padding: 0;<br />float: left;<br />list-style: none;<br />height: 32px;<br />border-bottom: 1px solid #999;<br />border-left: 1px solid #999;<br />width: 100%;<br />}<br />ul.tabs li {<br />float: left;<br />margin: 0;<br />padding: 0;<br />height: 31px;<br />line-height: 31px;<br />border: 1px solid #999;<br />border-left: none;<br />margin-bottom: -1px;<br />background: #e0e0e0;<br />overflow: hidden;<br />position: relative;<br />}<br />ul.tabs li a {<br />text-decoration: none;<br />color: #000;<br />display: block;<br />font-size: 1.2em;<br />padding: 0 20px;<br />border: 1px solid #fff;<br />outline: none;<br />}<br />ul.tabs li a:hover {<br />background: #ccc;<br />}<br />html ul.tabs li.active, html ul.tabs li.active a:hover {<br />background: #fff;<br />border-bottom: 1px solid #fff;<br />}<br />.tab_container {<br />margin-left: 5px;<br />border: 1px solid #999;<br />border-top: none;<br />clear: both;<br />float: left;<br />width: 100%;<br />background: #fff;<br />-moz-border-radius-bottomright: 5px;<br />-khtml-border-radius-bottomright: 5px;<br />-webkit-border-bottom-right-radius: 5px;<br />-moz-border-radius-bottomleft: 5px;<br />-khtml-border-radius-bottomleft: 5px;<br />-webkit-border-bottom-left-radius: 5px;<br />}<br />.tab_content {<br />padding: 20px;<br />font-size: 1.2em;<br />}<br />.tab_content h2 {<br />font-weight: normal;<br />padding-bottom: 5px;<br />border-bottom: 1px dashed #ddd;<br />font-size: 1.8em;<br />}<br />.tab_content h3 a{<br />line-height: 2em;<br />color: #254588;<br />}<br />.tab_content img {<br />float: left;<br />margin: 5px 10px 10px 0;<br />border: 1px solid #ddd;<br />padding: 5px;<br />}<br />.tab_content p{<br />padding-bottom:10px;<br />}<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan Template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Elemen Laman".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Tambah Gadget dan pilih "HTML/JavaScript".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste code berikut kedalamnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 400px; height: 350px; overflow: auto; padding: 10px;"><div class="pageTabs"><br /><ul class="tabs"><br /><li><a href="#tab1">TAB1</a></li><br /><li><a href="#tab2">TAB2</a></li><br /><li><a href="#tab3">TAB3</a></li><br /><li><a href="#tab4">TAB4</a></li><br /></ul><br /><br /><div class="tab_container"><br /><div id="tab1" class="tab_content"><br /><br />Isi Content Anda Utk Tab 1<br /><br /></div><br /><br /><div id="tab2" class="tab_content"><br /><br />Isi Content Anda Utk Tab 2<br /><br /></div><br /><br /><div id="tab3" class="tab_content"><br /><br />Isi Content Anda Utk Tab 3<br /><br /></div><br /><br /><div id="tab4" class="tab_content"><br /><br />Isi Content Anda Utk Tab 4<br /><br /></div><br /></div><br /></div><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><div style="text-align: justify;"><span style="font-weight: bold; color: rgb(51, 51, 255);"># Nilai <span style="color: rgb(255, 0, 0);">1500</span> pada </span><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">fadeIn(1500)</span> pada script diatas adalah kecepatan tampilnya konten tab view.</span></span><br /><span class="fullpost"></span></div><span class="fullpost"></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk tutorial aslinya bisa di cek di </span><a style="font-weight: bold;" href="http://www.bloggertipandtrick.net/2009/08/jquery-3d-tab-view-widget-to-blogger.html" target="_blank">How To Add jQuery 3D Tab View Widget to blogger</a><span style="font-weight: bold;">.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com22tag:blogger.com,1999:blog-1982668800463146170.post-11148815022228620362010-04-27T00:01:00.010+02:002010-05-04T21:04:37.647+03:00Membuat Jumlah Post Dan Komentar<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Untuk beberapa tutorial belakangan ini, </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> banyak mengulas tentang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-menu-accordion-dengan-jquery.html" title="Membuat Menu Accordion Dengan JQuery">JQuery</a><span style="font-weight: bold;">. akan tetapi untuk saat ini, HAPIA Mesir ingin membahas tentang widget jumlah post dan komentar.</span><br /></div><br /><img style="display: block; margin: 0px auto 10px; text-align: center; width: 290px; height: 178px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeqH_V5LvHZ1zGCP_w3Gn8TkYMg74R1xrGwVtxRDnTvK4P0AowerOhyLwPpFqeOy3o1nmry9HYS5nVJkGeRCQ1w5TkxMTDP3PIZlGhewg1ZGVbcOY4i0QR-HVYwHgRqSJAij9WTuT7uvbq/s320/comments-please.png" alt="Membuat Jumlah Post Dan Komentar" id="BLOGGER_PHOTO_ID_5464578769335022466" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Mungkin sudah banyak tutorial baik lama atau baru yang mengulas tentang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2009/12/memasang-widget-jumlah-post.html" title="Memasang Widget Jumlah Post">memasang widget jumlah post</a><span style="font-weight: bold;"> dan komentar. akan tetapi postingan ini tidak mengulang-ulang tutorial yang lalu. akan tetapi hanya sekedar berbagi informasi yang berkaitan dengan widget yang menampilkan jumlah post dan komentar.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Salah satu script yang biasa dipakai untuk menampilkan jumlah post dan komentar blog kita adalah sebagai berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 500px; padding: 10px;">Stats: <script style=""> function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }</script><script src="/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=showpostcount"></script> Posts,<script src="/feeds/comments/summary?max-results=0&amp;alt=json-in-script&amp;callback=showpostcount"></script> Comments<br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Silahkan perhatikan contohnya pada demo berikut :</span></span><br /></div><span class="fullpost"><br /><center><a href="http://hapia-demos.blogspot.com/2010/05/demo-jumlah-post-dan-komentar.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG"></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Ketika HAPIA Mesir blogwalking ke beberapa blog teman yang memasang widget ini, HAPIA Mesir mendapati jumlah komentar yang ditampilkan tidak akurat.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Perhatikan jumlah komentar diatas. maka angka yang tampil tidaklah akurat.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Coba perhatikan pada </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/03/membuat-spoiler-di-sidebar.html" title="Membuat Spoiler DI Sidebar">script</a><span style="font-weight: bold;"> bagian feed komentar </span><i style="font-weight: bold; color: rgb(255, 0, 0);">/feeds/comments/summary?max-results=0</i><span style="font-weight: bold;">. nilai maksimal adalah 0.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Untuk blog dengan jumlah postingan atau komentar yang banyak. silahkan ubah nilah 0 diatas, misalkan 5000. adalah untuk menampilkan jumlah komentar maksimal 5000 komentar.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Untuk perubahannya silahkan perhatikan pada demo diatas, antara sebelum dan sesudah dirubah.</span></span></div><br /><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># Jika belum akurat, itulah kelemahan feed blogger yang terkadang akurat dan terkadang tidak. apa lagi untuk blog dengan jumlah komentar yang banyak.<br /><br />Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com28tag:blogger.com,1999:blog-1982668800463146170.post-33139301450227679712010-04-24T06:37:00.006+02:002010-05-10T16:21:54.660+03:00Membuat Navigasi Stylish Di Blog<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Membuat Navigasi di blog adalah sebuah kebutuhan bagi setiap blog yang ingin memudahkan pengunjung untuk mengakses isi content yang ada pada blog tersebut. pada tutorial sebelumnya, </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> telah memberikan tutorial tentang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-menu-navigasi-dengan-jquery.html" title="Membuat Menu Navigasi Dengan JQuery">Membuat Menu Navigasi Dengan JQuery</a><span style="font-weight: bold;">, walaupun terlihat bagus akan tetapi banyak yang yang menganggapnya akan memberatkan loading blog.</span><br /></div><br /><img style="display: block; margin: 0px auto 10px; text-align: center; width: 200px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf0JMUcZDyQp9dg0BMpyQ2jH3rvDAyUMPFDqZnxhyphenhyphenuTLRn_MwIkCAD1RBL252oPm8bXtqhfUk_GVkb0HPPjOZEFbpCWyCtKr9FYf60gSeplRYkeJVbMPfXstFNkrdyw5Hr6uUt1THE5adL/s320/menu-navigasi.jpg" alt="Membuat Navigasi Stylish Di Blog" id="BLOGGER_PHOTO_ID_5463565913685115138" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Membuat navigasi stylish mungkin dapat menjadi solusi bagi yang ingin memasang menu navigasi akan tetapi takut akan menambah berat loading blog. walaupun menu navigasi ini juga menggunakan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-menu-accordion-dengan-jquery.html" title="Membuat Menu Accordion Dengan JQuery">JQuery</a><span style="font-weight: bold;">, akan tetapi tidak akan menambah lama loading blog, karena menu ingin termasuk paling ringan.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk Melihat contoh navigasi Stylish silahkan klik tombol demo dibawah ini :</span></span><br /></div><span class="fullpost"><br /><center><a href="http://demo-navigasi.blogspot.com/2010/04/stylish-navigation-menu-with-jquery.html" target="_blank"><img alt="Membuat Navigasi Stylish Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara Membuat Navigasi Stylish di Blog adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" title="Blogger" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Centang "Expand Template Widget".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Sebelumnya pastikan blog anda telah tertanam didalamnya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-jam-digital-dengan-jquery.html" title="Membuat Jam Digital Dengan JQuery">JQuery versi 1.3.2</a><span style="font-weight: bold;">, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 15px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian copy paste script berikut dibawah script diatas :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 15px;"><script src='http://hapiajavascript.googlecode.com/files/NavStylish.js' type='text/javascript'/></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Selanjutnya untuk bagian </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/CSS%20Editing" title="CSS Editing">CSS</a><span style="font-weight: bold;">, silahkan cari code <span style="color: rgb(255, 0, 0);">]]></b:skin></span> dan letakkan code CSS berikut diatasnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 400px; height: 350px; overflow: auto; padding: 15px;">ul{ /* the unordered list */<br /> height:25px;<br /> font-family:Arial, Helvetica, sans-serif;<br /> font-size:12px;<br />margin:0px;<br />margin-left:-40px;<br />}<br /><br />ul li{<br /> border:1px solid #444;<br /> display:inline-block; /* changing the display property */<br /> float:left; /* floating the list items to the left */<br /> height:25px;<br /> list-style-type:none; /* disabling the list icon */<br /> overflow:hidden; /* hiding the overflowing content */<br />}<br /><br />ul li a, ul li a:hover,<br />ul li a:visited{<br /> text-decoration:none; /* removing the underline text-decoration */<br />}<br /><br />/* styling the links */<br />.normalMenu, .normalMenu:visited,<br />.hoverMenu, .hoverMenu:visited,<br />.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */<br /> outline:none;<br /> padding:5px 10px;<br /> display:block;<br />}<br /><br />/* styles that are assigned individually */<br /><br />.hoverMenu,.hoverMenu:visited,<br />.selectedMenu,.selectedMenu:visited {<br /> margin-top:-25px;<br /> background:#eee;<br /> color:#333;<br />}<br /><br />.selectedMenu,.selectedMenu:visited {<br /> margin:0;<br />}<br /><br />.normalMenu, .normalMenu:visited{<br /> color:#fff;<br /> background: #333;<br />}</div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian cari code <span style="color: rgb(255, 0, 0);"><div id='content-wrapper'></span>, dan copy paste code berikut di atasnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 500px; padding: 15px;"><ul id="navigationMenu"><br /><li><a href="#" class="normalMenu">Home</a></li><br /><li><a href="#" class="normalMenu">Services</a></li><br /><li><a href="#" class="selectedMenu">Our clients</a></li><br /><li><a href="#" class="normalMenu">The team</a></li><br /><li><a href="#" class="normalMenu">About us</a></li><br /><li><a href="#" class="normalMenu">Contact us</a></li><br /></ul></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Untuk tutorial aslinya silahkan kunjungi </span><a style="font-weight: bold;" href="http://tutorialzine.com/2009/09/stylish-navigation-menu-jquery/" target="_blank">A Stylish Navigation Menu With jQuery</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com33tag:blogger.com,1999:blog-1982668800463146170.post-12768542476012687442010-04-21T12:49:00.004+02:002010-05-10T16:22:25.526+03:00Membuat Menu Accordion Dengan JQuery<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Membuat Menu Accordion Dengan JQuery. pada postingan yang lalu </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/" title="HAPIA Mesir">HAPIA Mesir</a><span style="font-weight: bold;"> pernah menulis postingan tentang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/01/membuat-simple-accordions.html" title="Membuat Simple Accordions">Membuat Simple Accordions</a><span style="font-weight: bold;"> yang hanya mengkolaborasikan antara script accordion dan HTML saja. dan pada tutorial saat ini, HAPIA Mesir ingin berbagi tentang cara membuat menu accordion dengan menggunakan </span><a style="font-weight: bold;" href="http://www.blogger.com/post-edit.g?blogID=1982668800463146170&postID=1276854247601268744" title="Membuat Jam Digital Dengan JQuery">JQuery</a><span style="font-weight: bold;">.</span><br /></div><br /><div style="text-align: justify;"><img style="display: block; margin: 0px auto 10px; text-align: center; width: 283px; height: 247px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHrgHgS1WMZV_5AO5MJ4cFX6qn_bF5LJppVx5VRC8rIlpir-xLwOytb4utU03ctMiYvDy5GVX3i0kbjduulERzC4imvX7d89g0pkj1xEfBG28xQ_FjzyPMUQ8kqpZw8gaPZveLTgx6c48/s320/demo-accordion.JPG" alt="Membuat Menu Accordion Dengan JQuery" id="BLOGGER_PHOTO_ID_5462540491244881890" border="0" /><span style="font-weight: bold; color: rgb(51, 51, 255);">Menu ini tidak terlalu memberatkan loading blog tanpa mengurangi tampilan menu yang colorful. untuk demonya silahkan dilihat pada link berikut :</span><br /></div><span class="fullpost"><br /><center><a href="http://demo-hapiamesir.blogspot.com/2010/04/membuat-accordion-dengan-jquery.html" title="Membuat Accordion Dengan JQuery" target="_blank"><img atl="Membuat Menu Accordion Dengan JQuery" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara Membuat Menu Accordion Dengan JQuery adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Sebelumnya pastikan blog anda telah tertanam didalamnya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-jam-digital-dengan-jquery.html" title="Membuat Jam Digital Dengan JQuery">JQuery versi 1.3.2</a><span style="font-weight: bold;">, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 15px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Kemudian copy paste script berikut dibawah script diatas :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; padding: 15px;"><script src='http://hapiajavascript.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/><br /><script src='http://hapiajavascript.googlecode.com/files/script.js' type='text/javascript'/></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Selanjutnya untuk bagian </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/CSS%20Editing" title="CSS Editing">CSS</a><span style="font-weight: bold;">, silahkan cari code <span style="color: rgb(255, 0, 0);">]]></b:skin></span> dan letakkan code CSS berikut diatasnya :</span></span><br /></div><span class="fullpost"><br /><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 450px; height: 400px; overflow: auto; margin-left: 60px; padding: 15px;">ul{<br />margin:0;<br />padding:0;<br />}<br /><br />ul.accordion{<br />/* The topmost UL */<br />width:240px;<br />margin:0;<br />padding:10px;<br />}<br /><br />li{<br />list-style:none;<br />text-align:left;<br />}<br /><br />li.menu{<br />/* The main list elements */<br />padding:5px 0;<br />width:100%;<br />}<br /><br />li.button a{<br />/* The section titles */<br />display:block;<br />font-family:BPreplay,Arial,Helvetica,sans-serif;<br />font-size:21px;<br />height:34px;<br />overflow:hidden;<br />padding:10px 20px 0;<br />position:relative;<br />width:200px;<br />}<br /><br />li.button a:hover{<br />/* Removing the inherited underline from the titles */<br />text-decoration:none;<br />}<br /><br />li.button a span{<br />/* This span acts as the right part of the section's background */<br />height:44px;<br />position:absolute;<br />right:0;<br />top:0;<br />width:4px;<br />display:block;<br />}<br /><br />/* Setting up different styles for each section color */<br /><br />li.button a.blue{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTa2gOEJYblVecKLdZK-f8tIQ8oyPvoPl9yBYibWu7ok7ZG6knW8R4zd7TtDPR7Jy_to3S5f48qpqSapAU8U8rXXylFLHCIIOvs4qerc3FIsMvON123t0jOd7ZCWHA4ZE2rhhFjBNmGXg/s320/blue.png) repeat-x top left; color:#074384;}<br />li.button a.blue span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTa2gOEJYblVecKLdZK-f8tIQ8oyPvoPl9yBYibWu7ok7ZG6knW8R4zd7TtDPR7Jy_to3S5f48qpqSapAU8U8rXXylFLHCIIOvs4qerc3FIsMvON123t0jOd7ZCWHA4ZE2rhhFjBNmGXg/s320/blue.png) repeat-x top right;}<br /><br />li.button a.green{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExq4daAYQPU13A2TyLVFZGFgv2v0JktU82PTB_umUPd23mdNUqn10SENYKWLDh0jRuVjKaOXqUU6TvSd4MLZ5wHJO5AaRs5zsx7w_yKm991qBFqYwIyAs77IxmC13hGKiA88l8yFUndQ/s320/green.png) repeat-x top left; color:#436800;}<br />li.button a.green span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExq4daAYQPU13A2TyLVFZGFgv2v0JktU82PTB_umUPd23mdNUqn10SENYKWLDh0jRuVjKaOXqUU6TvSd4MLZ5wHJO5AaRs5zsx7w_yKm991qBFqYwIyAs77IxmC13hGKiA88l8yFUndQ/s320/green.png) repeat-x top right;}<br /><br />li.button a.orange{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDrlqt1RAKNInCz1tVnlik6IS6ToCvBv6-Ct151pueFH8DzZrh5QBr6vjSsg8iqOOZJKMWa6w1A3C40vaOm5tKUkBmr0Dz7WuFQ5S53SBVzB4VKLdcH3II6oZFE1xVT9PbRmleIaiJRQ/s320/orange.png) repeat-x top left; color:#882e02;}<br />li.button a.orange span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWDrlqt1RAKNInCz1tVnlik6IS6ToCvBv6-Ct151pueFH8DzZrh5QBr6vjSsg8iqOOZJKMWa6w1A3C40vaOm5tKUkBmr0Dz7WuFQ5S53SBVzB4VKLdcH3II6oZFE1xVT9PbRmleIaiJRQ/s320/orange.png) repeat-x top right;}<br /><br />li.button a.red{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqrnO1rrPYr0osd6qnrCcga0w86nsLyh-qfHFNNtGodoNt39Jn57ckMnr5WGxArSZBy7VeSk213rLdwKnlqGrYqlzwSOuk7s3uAVMb9VW7ORYF2wozjiAL15ToP_4RWhOld7Mz5IOgmc/s320/red.png) repeat-x top left; color:#641603;}<br />li.button a.red span{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqrnO1rrPYr0osd6qnrCcga0w86nsLyh-qfHFNNtGodoNt39Jn57ckMnr5WGxArSZBy7VeSk213rLdwKnlqGrYqlzwSOuk7s3uAVMb9VW7ORYF2wozjiAL15ToP_4RWhOld7Mz5IOgmc/s320/red.png) repeat-x top right;}<br /><br />/* The hover effects */<br /><br />li.button a:hover{ background-position:bottom left;}<br />li.button a:hover span{ background-position:bottom right;}<br /><br />.dropdown{<br />/* The expandable lists */<br />display:none;<br />padding-top:5px;<br />width:100%;<br />}<br /><br />.dropdown li{<br />/* Each element in the expandable list */<br />background-color:#373128;<br />border:1px solid #40392C;<br />color:#CCCCCC;<br />margin:5px 0;<br />padding:4px 18px;<br />}</div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan Template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Elemen Laman" tambah gadget pada sidebar.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pilih "HTML/JavaScript" kemudian copy paste code berikut kedalamnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); width: 500px; height: 300px; overflow: auto; padding: 15px;"><ul class="accordion"><br /><li class="menu"><br /> <br /><ul><br /><li class="button"><a class="green" href="#">Judul 1 <span></span></a></li><br /><br /><li class="dropdown" style="display: none;"><br /><ul><br /><li><a href="#">Nama Content 1.1</a></li><br /><li><a href="#">Nama Content 1.2</a></li><br /><li><a href="#">Nama Content 1.3</a></li><br /></ul><br /></li><br /></ul><br /></li><br /> <br /><li class="menu"><br /> <br /><ul><br /><li class="button"><a class="orange" href="#">Judul 2 <span></span></a></li> <br /><br /><li class="dropdown" style="display: none;"><br /><ul><br /><li><a href="#">Nama Content 2.1</a></li><br /><li><a href="#">Nama Content 2.2</a></li><br /><li><a href="#">Nama Content 2.3</a></li><br /></ul><br /></li><br /></ul><br /></li><br /><br /><li class="menu"><br /> <br /><ul><br /><li class="button"><a class="blue" href="#">Judul 3 <span></span></a></li><br /><br /><li class="dropdown" style="display: none;"><br /><ul><br /><li><a href="#">Nama Content 3.1</a></li><br /><li><a href="#">Nama Content 3.2</a></li><br /><li><a href="#">Nama Content 3.3</a></li><br /></ul><br /></li><br /></ul><br /></li><br /><br /><li class="menu"><br /> <br /><ul><br /><li class="button"><a class="red" href="#">Judul 4<span></span></a></li><br /><br /><li class="dropdown" style="display: none;"><br /><ul><br /><li><a href="#">Nama Content 4.1</a></li><br /><li><a href="#">Nama Content 4.2</a></li><br /><li><a href="#">Nama Content 4.3</a></li><br /></ul><br /></li><br /></ul><br /></li><br /></ul></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># Untuk tutorial aslinya silahkan cek judul </span><a style="font-weight: bold;" href="http://tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/" title="Making a Fresh Content Accordion" target="_blank">Making a Fresh Content Accordion</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com24tag:blogger.com,1999:blog-1982668800463146170.post-24335824568460866102010-04-19T06:42:00.008+02:002010-05-10T16:22:39.855+03:00Membuat Jam Digital Dengan JQuery<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Kembali </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> masih ingin berbagi tentang </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/search/label/Tips%20blogging" title="Tips Blogging">tutorial blog</a><span style="font-weight: bold;">. dan sekarang HAPIA Mesir membuat widget Jam Digital dengan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-foto-gallery-dengan-jquery.html" title="Membuat Foto Gallery Dengan JQuery">menggunakan JQuery</a><span style="font-weight: bold;"> untuk lebih mempercantik tampilan jam digital.</span><br /></div><br /><img style="display: block; margin: 0px auto 10px; text-align: center; width: 240px; height: 163px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtOn6zxz4MwywQHPHEGXE1Mq3iw3m-zIl8qmUtHkDOhbM2MgLfGXJ2nP4mvKvclt4b7WGEzNtlYB4D0UPSMS3PyiH-jh5eTMm_0YVzHtKoYlWow4_3tzgG8HnoPwZG75Yd6F0OTKnZ0eC0/s320/digital-clock.jpg" alt="Membuat Jam Digital Dengan JQuery" id="BLOGGER_PHOTO_ID_5461714828283420738" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Banyak yang beranggapan dengan menanamkan JQuery diblog akan memperlambat loading blog tersebut. sebenarnya JQuery adalah </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/2010/01/solusi-top-post.html" title="Membuat Top Post Dengan Script">script</a><span style="font-weight: bold;"> seperti script-script yang lain, jika blog anda menggunakan script terlalu banyak maka akan membuat loading blog lebih lama. tapi dengan menggunakan secukupnya maka itu tidak mengapa untuk mendukung tampilan agar lebih baik.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berikut adalah contoh Jam Digital menggunakan JQuery :</span></span><br /></div><span class="fullpost"><br /><center><a href="http://demo-hapiamesir.blogspot.com/2010/04/membuat-jam-digital-hapia-mesir.html" title="Membuat Jam Digital" target="_blank"><img alt="Membuat Jam Digital" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" /></a></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berikut adalah cara membuat jam digital dengan JQuery :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" title="Blogger" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Sebelumnya pastikan blog anda telah tertanam didalamnya </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/01/membuat-tombol-sharing-animasi.html" title="Membuat Tombol Sharing Animasi">JQuery versi 1.3.2</a><span style="font-weight: bold;">, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <span style="color: rgb(255, 0, 0);"><head></span> :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 15px; width: 550px;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Selanjutnya cari code <span style="color: rgb(255, 0, 0);"><head></span> dan letakkan script berikut dibawahnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 15px; width: 550px;"><script src='http://hapiajavascript.googlecode.com/files/jquery.tzineClock.js' type='text/javascript'/><br /><script src='http://hapiajavascript.googlecode.com/files/timescript.js' type='text/javascript'/><br /></div></center><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Selanjutnya untuk bagian </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/CSS%20Editing" title="CSS Editing">CSS</a><span style="font-weight: bold;">, silahkan cari code <span style="color: rgb(255, 0, 0);">]]></b:skin></span> dan letakkan code CSS berikut diatasnya :</span></span><br /></div><span class="fullpost"><br /><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); margin-left: 40px; padding: 15px; width: 500px; height: 400px; overflow: auto;">#fancyClock{<br />margin:30px auto;<br />height:100px;<br />border:1px solid #111111;<br />width:300px;<br />}<br /><br />.clock{<br />/* The .clock div. Created dynamically by jQuery */<br />background-color:#252525;<br />height:100px;<br />width:100px;<br />position:relative;<br />overflow:hidden;<br />float:left;<br />}<br /><br />.clock .rotate{<br />/* There are two .rotate divs - one for each half of the background */<br />position:absolute;<br />width:100px;<br />height:100px;<br />top:0;<br />left:0;<br />}<br /><br />.rotate.right{<br />display:none;<br />z-index:11;<br />}<br /><br />.clock .bg, .clock .front{<br />width:50px;<br />height:100px;<br />background-color:#252525;<br />position:absolute;<br />top:0;<br />}<br /><br />.clock .display{<br />/* Holds the number of seconds, minutes or hours respectfully */<br />position:absolute;<br />width:100px;<br />font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />z-index:20;<br />color:#F5F5F5;<br />font-size:30px;<br />text-align:center;<br />top:40px;<br />left:0;<br /><br />/* CSS3 text shadow: */<br />text-shadow:4px 4px 5px #333333;<br />}<br /><br />/* The left part of the background: */<br /><br />.clock .bg.left{ left:0; }<br /><br />/* Individual styles for each color: */<br />.orange .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiPtAAXPnueoFbyDWD1ssdDoht1dxrGjaIubqi2x4yRg0Nk6vlG4dsiajUogrLSQTzWkxOW05MmI-WdCZqbr0-KITb-dh1izxOm8kQfn-iiAt78Bs2b93oq3yS9rilDV5Rh0SF7kBSxI/s320/bg_orange.png) no-repeat left top; }<br />.green .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG2CuWbqx-U6i9OzeQTkZ2OHrl4A5pxrE68nmb_w7oaSqdp9UR3JxV2u-ABKWKEaSa0HLxiF3NoSZr_0am7OBxkiJZWAZq6U512OZIBdMoFOzmGkKe9vde1eVR6V0UGHheZb-L8ik_LM/s320/bg_green.png) no-repeat left top; }<br />.blue .bg.left{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ud17RrYEX1RS6_fQvcdKXuBLxaEQ4uiVCYvKu1RL74SV7aaDfiLiVuSaPEp1fKsAmAWAEU6sBH8v7d69ox0FzPmeDDJxde_LmpNUnflWvnn99PvWafnzuryeDZ8HimuPjh62fT09qvc/s320/bg_blue.png) no-repeat left top; }<br /><br />/* The right part of the background: */<br />.clock .bg.right{ left:50px; }<br /><br />.orange .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIiPtAAXPnueoFbyDWD1ssdDoht1dxrGjaIubqi2x4yRg0Nk6vlG4dsiajUogrLSQTzWkxOW05MmI-WdCZqbr0-KITb-dh1izxOm8kQfn-iiAt78Bs2b93oq3yS9rilDV5Rh0SF7kBSxI/s320/bg_orange.png) no-repeat right top; }<br />.green .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidG2CuWbqx-U6i9OzeQTkZ2OHrl4A5pxrE68nmb_w7oaSqdp9UR3JxV2u-ABKWKEaSa0HLxiF3NoSZr_0am7OBxkiJZWAZq6U512OZIBdMoFOzmGkKe9vde1eVR6V0UGHheZb-L8ik_LM/s320/bg_green.png) no-repeat right top; }<br />.blue .bg.right{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Ud17RrYEX1RS6_fQvcdKXuBLxaEQ4uiVCYvKu1RL74SV7aaDfiLiVuSaPEp1fKsAmAWAEU6sBH8v7d69ox0FzPmeDDJxde_LmpNUnflWvnn99PvWafnzuryeDZ8HimuPjh62fT09qvc/s320/bg_blue.png) no-repeat right top; }<br /><br /><br />.clock .front.left{<br />left:0;<br />z-index:10;<br />}<br /></div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan Template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Langkah selanjutnya adalah menambah Gadget pada </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/03/membuat-spoiler-di-sidebar.html" title="Membuat Spoiler Di Sidebar">sidebar</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Elemen Laman".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Klik "Tambah Gadget" pada sidebar, pilih "HTML/JavaScript".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Letakkan code berikut didalamnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 15px; width: 250px;"><div id="fancyClock"></div><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># Widget Jam Digital ini telah HAPIA Mesir atur untuk dipasang di sidebar dengan ukuran lebar 300 pixel. untuk ukuran yang lain, silahkan atur pada bagian code CSS widget ini. jika anda ingin melihat tutorial aslinya silahkan cek di </span><a style="font-weight: bold;" href="http://tutorialzine.com/2009/12/colorful-clock-jquery-css/" title="A Colorful Clock With CSS & jQuery" target="_blank">A Colorful Clock With CSS & jQuery</a><span style="font-weight: bold;">.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat mencoba dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com27tag:blogger.com,1999:blog-1982668800463146170.post-56249549835765411772010-04-17T19:23:00.007+02:002010-05-10T16:22:58.467+03:00Membuat Foto Gallery Dengan JQuery<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Membuat Foto Gallery Dengan JQuery. sebenarnya tutorial ini belum terlalu sempurna, tapi </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> anggap sudah cukup untuk membuat foto gallery dengan thumbnail. memanfaatkan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-menu-navigasi-dengan-jquery.html" title="Membuat Menu Navigasi Dengan JQuery">JQuery</a><span style="font-weight: bold;"> untuk mempercantik tampilan, sehingga gallery ini tampil terlihat acak dan bisa di </span><i style="font-weight: bold;">Drop</i><span style="font-weight: bold;"> kekanan, kekiri, atas dan kebawah.</span><br /></div><br /><img style="display: block; margin: 0px auto 10px; text-align: center; width: 262px; height: 258px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy2v7yINxHNyrrG4iONmJ_kZzPxlQ9b_YII8fU5qCcO7m0HWqu0NLmXqF9OjPE5ATo2wPedmX06LW6GjwD4GsTXoE4bxbsMSotniqLhj1byh9fmcA18_vVNZM72Kg5Falo9ZLRd9gPxYOA/s320/random-gallery.jpg" alt="Membuat Foto Gallery Dengan JQuery" id="BLOGGER_PHOTO_ID_5461273376822736674" border="0" /><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">Untuk melihat contoh silahkan klik tombol demo berikut :</span><br /><span class="fullpost"><br /><a href="http://test-thisblog.blogspot.com/2010/04/demo-foto-gallery-dengan-jquery.html" title="Membuat Foto Gallery Dengan JQuery" target="_blank""><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 163px; height: 62px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMDCV0tdIsiOSebJyvPS2QFpII-91Rrz5PMJ11RccsEFFu5n1dz3E6uHY1jSeJOj0WjoybmCTL9nSC886YYpiMYMsyFXMUwMOJ3jJ5rZDGqesg9g4FFGd43dbcaSbF0nhvKo5QYaaBPnT/s320/bottom-demo.JPG" alt="Membuat Foto Gallery Dengan JQuery" id="BLOGGER_PHOTO_ID_5461260868701868210" border="0" /></a><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara Membuat Foto Gallery Dengan JQuery ada sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Cari code <span style="color: rgb(255, 0, 0);"><head></span> dan letakkan script berikut dibawahnya :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 15px; width: 550px;"><link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css' media='all' rel='stylesheet' type='text/css'/><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /><script src='http://hapiajavascript.googlecode.com/files/g-script.txt' type='text/javascript'/><br /></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Cari code <span style="color: rgb(255, 0, 0);">]]></b:skin></span> dan copy paste code </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/CSS%20Editing" title="CSS Editing">CSS</a><span style="font-weight: bold;"> berikut diatasnya :</span></span><br /></div><span class="fullpost"><br /><div style="margin-left: 40px; background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 15px; width: 500px; height: 400px; overflow: auto;">#gallery{<br /> /* The pics container */<br /> width:500px;<br /> height:580px;<br /> position:relative;<br />}<br /><br />.pic, .pic a{<br /> /* Each picture and the hyperlink inside it */<br /> width:100px;<br /> height:100px;<br /> overflow:hidden;<br />}<br /><br />.pic{<br /> /* Styles specific to the pic class */<br /> position:absolute;<br /> border:5px solid #EEEEEE;<br /> border-bottom:18px solid #eeeeee;<br /> <br /> /* CSS3 Box Shadow */<br /> -moz-box-shadow:2px 2px 3px #333333;<br /> -webkit-box-shadow:2px 2px 3px #333333;<br /> box-shadow:2px 2px 3px #333333;<br />}<br /><br />.pic a{<br /> /* Specific styles for the hyperlinks */<br /> text-indent:-999px;<br /> display:block;<br /> /* Setting display to block enables advanced styling for links */<br />}<br /><br />label, input{<br /> /* The modal dialog URL field */<br /> display:block;<br /> padding:3px;<br />}<br /><br />label{<br /> font-size:10px;<br />}<br /><br />fieldset{<br /> border:0;<br /> margin-top:10px;<br />}<br /></div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan Template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berikutnya adalah code untuk foto-foto yang akan anda buat gallery bisa anda letakkan dipostingan. ikuti cara dibawah ini :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Buat postingan yang akan anda jadikan foto gallery anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste code berikut untuk membuat gallery didalamnya :</span></span><br /></div><span class="fullpost"><br /><div style="margin-left: 30px; background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 8px solid rgb(51, 51, 51); padding: 15px; width: 550px; height: 400px; overflow: auto;"><div id="gallery"><br /><div style="cursor: -moz-zoom-in;top: 102px; left: 261px; background: url(&quot;http://LINK-FOTO-1.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(5deg);" class="pic ui-draggable" id="pic-1"><a onclick="window.open('LINK-FOTO-1.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO</a></div><br /><div style="cursor: -moz-zoom-in;top: 163px; left: 66px; background: url(&quot;http://LINK-FOTO-2.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-1deg);" class="pic ui-draggable" id="pic-2"><a onclick="window.open('http://LINK-FOTO-2.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 2</a></div><br /><div style="cursor: -moz-zoom-in;top: 223px; left: 14px; background: url(&quot;http://LINK-FOTO-3.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(29deg);" class="pic ui-draggable" id="pic-3"><a onclick="window.open('http://LINK-FOTO-3.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 3</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 387px; left: 312px; background: url(&quot;http://LINK-FOTO-4.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-2deg);" class="pic ui-draggable" id="pic-4"><a onclick="window.open('http://LINK-FOTO-4.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 4</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 285px; left: 387px; background: url(&quot;http://LINK-FOTO-5.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(6deg);" class="pic ui-draggable" id="pic-5"><a onclick="window.open('http://LINK-FOTO-5.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 5</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 400px; left: 19px; background: url(&quot;http://LINK-FOTO-6.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(26deg);" class="pic ui-draggable" id="pic-6"><a onclick="window.open('http://LINK-FOTO-6.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 6</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 298px; left: 110px; background: url(&quot;http://LINK-FOTO-7.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(33deg);" class="pic ui-draggable" id="pic-7"><a onclick="window.open('http://LINK-FOTO-7.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 7</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 57px; left: 133px; background: url(&quot;http://LINK-FOTO-8.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-15deg);" class="pic ui-draggable" id="pic-8"><a onclick="window.open('http://LINK-FOTO-8.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 8</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 10px; left: 201px; background: url(&quot;http://LINK-FOTO-9.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(35deg);" class="pic ui-draggable" id="pic-9"><a onclick="window.open('http://LINK-FOTO-9.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 9</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 419px; left: 170px; background: url(&quot;http://LINK-FOTO-10.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-16deg);" class="pic ui-draggable" id="pic-10"><a onclick="window.open('http://LINK-FOTO-10.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 10</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 174px; left: 228px; background: url(&quot;http://LINK-FOTO-11.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(5deg);" class="pic ui-draggable" id="pic-11"><a onclick="window.open('http://LINK-FOTO-11.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 11</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 338px; left: 318px; background: url(&quot;http://LINK-FOTO-12.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(38deg);" class="pic ui-draggable" id="pic-12"><a onclick="window.open('http://LINK-FOTO-12.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 12</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 253px; left: 157px; background: url(&quot;http://LINK-FOTO-13.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-18deg);" class="pic ui-draggable" id="pic-13"><a onclick="window.open('http://LINK-FOTO-13.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 13</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 87px; left: 373px; background: url(&quot;http://LINK-FOTO-14.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-21deg);" class="pic ui-draggable" id="pic-14"><a onclick="window.open('http://LINK-FOTO-14.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 14</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 78px; left: 60px; background: url(&quot;http://LINK-FOTO-15.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(-4deg);" class="pic ui-draggable" id="pic-15"><a onclick="window.open('http://LINK-FOTO-15.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 15</a><br /></div><br /><div style="cursor: -moz-zoom-in;top: 277px; left: 204px; background: url(&quot;http://LINK-FOTO-16.jpg&quot;) no-repeat scroll 50% 50% transparent; -moz-transform: rotate(37deg);" class="pic ui-draggable" id="pic-16"><a onclick="window.open('http://LINK-FOTO-16.jpg','popupwindow','toolbars=No,menubar=No,location=No,scrollbars=No,resizable=No,status=No,width=400,height=300,left=450,top=150,');return false">NAMA FOTO 16</a><br /></div><br /></div><br /></div><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">Selamat mencoba dan happy blogging.</span><br /></span>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com30tag:blogger.com,1999:blog-1982668800463146170.post-63867339513801239522010-04-16T14:42:00.011+02:002010-05-10T16:23:30.542+03:00Membuat Menu Navigasi Dengan JQuery<div style="text-align: justify;"><img style="display: block; margin: 10px; float: left; width: 168px; height: 168px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeIl0VRrFz0x-TwQSOi_RUjt6b4OUemm0w0kUt54WlzkDcI2i9nkq9v8DJsg4SB2ha1FG8K0gP16Ld7_289aVDHiurXctBCAwH1EFJm4sLhLlGv2lj-zMib0PxEi0HkHZuDWIZS0s8kys0/s320/jquery-logo.png" alt="Membuat Menu Navigasi Dengan JQuery" id="BLOGGER_PHOTO_ID_5460746551652618258" border="0" /><span style="font-weight: bold; color: rgb(51, 51, 255);">Membuat Menu Navigasi Dengan JQuery. terkadang </span><a style="font-weight: bold; color: rgb(51, 51, 255);" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="color: rgb(51, 51, 255);"> <span style="font-weight: bold;">sering ditanya tentang cara membuat menu navigasi, banyak sekali </span></span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/search/label/Tips%20blogging?max-results=100" title="Blogging Tips">tutorial</a><span style="font-weight: bold; color: rgb(51, 51, 255);"> yang menyajikan cara membuat menu ini. mulai dari yang paling sederhana sampai yang menggunakan perpaduan antara code </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/search/label/CSS%20Editing?max-results=100" title="CSS Editing">CSS</a><span style="font-weight: bold; color: rgb(51, 51, 255);"> dengan JQuery.</span><br /><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">Berikut adalah cara membuat menu navigasi menggunakan CSS dan JQuery yang </span><a style="font-weight: bold; color: rgb(51, 51, 255);" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold; color: rgb(51, 51, 255);"> sajikan bersumber dari </span><a style="font-weight: bold; color: rgb(51, 51, 255);" href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-lava-lamp-style-navigation-menu/" target="_blank">Net Tuts</a><span style="font-weight: bold; color: rgb(51, 51, 255);"> dengan beberapa penyesuaian. Untuk Melihat DEMO silahkan klik link dibawah ini :</span><br /></div><br /><img style="display: block; margin: 0px auto; text-align: center; width: 400px; height: 21px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr39YD9lVeGy6I6s0Np_rbxKUvkY3ggImZQm5lHO43uZoQJxUG5tHMkHqo422IgMcGqovqrKv4wKp6tdZl57awJG90oKKA4GJd0URecAOf0LajNeoC1yYPriQV5LBVp3mfQlYTR12JaPHo/s400/MenuNavigasi.JPG" alt="Membuat Menu Navigasi Dengan JQuery" id="BLOGGER_PHOTO_ID_5460747754111956658" border="0" /><br /><span class="fullpost"><br /></span><div style="text-align: center;"><span class="fullpost"><a href="http://test-thisblog.blogspot.com/" target="_blank"><u><b>Contoh Menu Navigasi</b></u></a></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Cara Membuat Menu Navigasi Dengan JQuery adalah sebagai berikut :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Login ke</span><a style="font-weight: bold;" href="http://www.blogger.com/" target="_blank">Blogger</a><span style="font-weight: bold;"> dengan account anda.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Tata Letak" kemudian "Edit HTML".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Cari code <span style="color: rgb(255, 0, 0);">]]></b:skin></span> untuk meletakkan code CSS berikut diatasnya :</span></span><br /></div><span class="fullpost"><br /><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); width: 450px; height: 400px; margin-left: 60px; padding: 15px; overflow: auto;">#container {<br />width: 1000px;<br />margin-top:-10px;<br />}<br /><br />ul, li {<br />margin: 0;<br />padding: 0;<br />}<br /><br />#blob {<br />background: #0b2b61;<br />border-right: 1px solid #0059ec;<br />border-left: 1px solid #0059ec;<br />position: absolute;<br />z-index: 1;<br />top: 0;<br />background: -moz-linear-gradient(top, #0b2b61, #1153c0);<br />background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));<br />-moz-border-radius: 4px;<br />-webkit-border-radius: 4px;<br />-moz-box-shadow: 2px 3px 10px #011331;<br />-webkit-box-shadow: 2px 3px 10px #011331;<br />}<br /><br />#nav {<br />padding:5px;<br />position: relative;<br />background: #292929;<br />float: left;<br />}<br /><br />#nav li {<br />float: left;<br />list-style: none;<br />border-right: 1px solid #4a4a4a;<br />border-left: 1px solid black;<br />}<br /><br />#nav li a {<br />color: #e3e3e3;<br />z-index: 2;<br />position: relative;<br />cursor: pointer;<br />float: center;<br />font-size: 20px;<br />font-family: helvetica, arial, sans-serif;<br />text-decoration: none;<br />padding: 30px 52px;<br />width: 100%;<br />}<br /></div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan Template.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Pergi ke "Elemen Laman".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Tambah Gadget dan pilih "HTML/JavaScript".</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Rata-rata template dari blogger telah terpasang "tambah Gadget" dibawah </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/tempat-yang-tepat-untuk-link-exchange.html" title="Tempat Yang Tepat Untuk Link Exchange"><i>Header</i></a><span style="font-weight: bold;">. jika belum anda silahkan cari tutorial untuk membuat gadget dibawah </span><i style="font-weight: bold;">Header</i><span style="font-weight: bold;">.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Copy paste code berikut kedalamnya :</span></span><br /></div><span class="fullpost"><br /><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border-left: 10px solid rgb(51, 51, 51); width: 550px; height: 400px; margin-left: 20px; padding: 15px; overflow: auto;"><div id="container"><br /><br /><ul id="nav"><br /> <li id="selected"><a href="/">Home</a></li><br /> <li><a href="about.html">About</a></li><br /> <li><a href="#">Blogging Tips</a></li><br /> <li><a href="#">Menu Navigasi</a></li><br /> <li><a href="#">Contact</a></li><br /></ul><br /><br /><br /><br /></div><br /><br /><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script><br /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><br /><script type="text/javascript" src="http://hapiajavascript.googlecode.com/files/NavScript.txt"></script><br /><br /><script type="text/javascript"><br />$('#nav').spasticNav();<br /></script></div><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Simpan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">width: 1000px;</span> adalah lebar menu navigasi.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">font-size: 20px;</span> adalah ukuran font pada menu navigasi.</span></span><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"># <span style="color: rgb(255, 0, 0);">padding: 30px 52px;</span> adalah jarak antara tulisan dengan garis atas dan bawah dengan nilai 30 pixel dan garis samping kanan dan kiri dengan nilai 52 pixel.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Selamat Mencoba dan Happy Blogging.</span></span><br /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Sekalian ingin memajang 2 award dari sahabat </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;">. dan awardnya sebagai berikut :</span><br /></div><br /><center><a href="http://www.hapiamesir.org/2010/04/membuat-menu-navigasi-dengan-jquery.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiGvt0sZyMvfWoORnKX6nuOCKNmeFHYj6jBsRIV14fP3icapNLLWhCxgkoOGNco7xaShlbMi01sFVrM7xSW-DD4FdigjGRc8UsZnAFbxp2WdPlXH3Oq2jWMIUUmCVFpHjc8-0pGrqW9hAN/s200/Award+dari+teman.jpg" alt="award dari sahabat" /></a></center><center style="font-weight: bold; color: rgb(51, 51, 255);">Dari <a href="http://planetaqidah.blogspot.com/2010/04/award-dari-sahabat-untuk-sahabat.html">Planet Aqidah</a></center><br /><center><a href="http://www.hapiamesir.org/2010/04/membuat-menu-navigasi-dengan-jquery.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcrHIV6MFJkQglzeVKWzBF8VrTJ0JyICdZ69j2aBtRFHw2gmC19RHr475SJyWDxY9rZCcakg7osEhVmj3KQ8mzG26xnMR3EE3l_Mz9IOoIAAz0DJCm0K0Cd-7EVWGweINfsGHfDX2_Pyw/s200/elok3a.jpg" alt="award dari sahabat" /></a></center><center style="font-weight: bold; color: rgb(51, 51, 255);">Dari <a href="http://bunglonblog.blogspot.com/2010/04/jurus-ampuh-mempercepat-loading-blog.html">Bunglon Blog</a></center><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com29tag:blogger.com,1999:blog-1982668800463146170.post-76330377835091533012010-04-15T06:20:00.006+02:002010-04-15T09:52:20.192+02:00Tips Mudah Menaikkan PageRank<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">TIPS MUDAH MENAIKKAN PAGERANK. jika kita perhatikan pada pembahasan sebelumnya, tentang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-pengertian-pagerank.html#Konsep%20PageRank" title="Konsep PageRank">konsep PageRank</a><span style="font-weight: bold;">, hal-hal yang mempengaruhi penilaian google dalam PageRank blog kita.</span><br /></div><br /><img style="display: block; margin: 0px auto 10px; text-align: center; width: 200px; height: 200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNd4u9jCEdYHAaDgnZuScib48FOL40b6WxGPBtKh9UrEGK97SF0KiN1Ql5umN33jXyL1UEnApkgMnOgvVFH_rFe6WQbyIB2oVdDwFs2s8D7rEnP7ZNsu4mgVoRL67fGZ4xzWzXs4QLGdQT/s320/pagerank_google.jpg" alt="Tips Mudah Menaikkan PageRank" id="BLOGGER_PHOTO_ID_5460265320012462962" border="0" /><br /><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">Banyak faktor yang mempengaruhi penilaian tersebut. diantaranya : Penggunaan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-meta-tags-untuk-blog.html" title="Membuat Meta Tags Untuk Blog"><i>META Tags</i></a><span style="font-weight: bold;">, isi postingan, penekanan pada isi content dan masih banyak lagi faktor-faktor yang dapat mempengaruhi PageRank.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berikut adalah beberapa TIPS MUDAH untuk MENAIKKAN PAGERANK blog anda :</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(243, 255, 204); border-left: 8px solid rgb(51, 51, 51); border-right: 8px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; margin: 20px; padding: 15px; width: 550px;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">1.</span> Perhatikan dalam penggunaan </span><i style="font-weight: bold;">META Tags</i><span style="font-weight: bold;">. isikan sesuai dengan isi blog anda. jika blog anda berisi tentang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/Tips%20blogging?max-results=100" title="Tips Blogging">tutorial blog</a><span style="font-weight: bold;">, isikan Meta Keywords dan Meta Description sesuai isi content blog anda.</span></div></span><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(243, 255, 204); border-left: 8px solid rgb(51, 51, 51); border-right: 8px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; margin: 20px; padding: 15px; width: 550px;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">2.</span> Postingkanlah mengenai suatu yang berkualitas. memang terkadang kita bingung dengan apa yang akan kita tuliskan. kehabisan bahan postingan dan ide. atau karena sudah lama tidak </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/02/meningkatkan-trafik-dengan-proxy.html" title="Meningkatkan Trafik Dengan Proxy">update blog</a><span style="font-weight: bold;"> menjadikan kita bingung tentang apa yang akan kita tuliskan. tapi tetap usahkan untuk menulis hal-hal yang berkualitas.</span></div></span><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(243, 255, 204); border-left: 8px solid rgb(51, 51, 51); border-right: 8px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; margin: 20px; padding: 15px; width: 550px;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">3.</span> Sertakan Link postingan anda yang lain. menulis suatu postingan dengan menyertakan link ke postingan yang lain dapat menjadi itu sebagai </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-tentang-search-engine.html" title="Dasar Tentang Search Engine Optimization">link in (link dalam)</a><span style="font-weight: bold;"> pada blog kita. disamping memudahkan pengunjung untuk dapat membaca postingan anda yang lainnya juga dapat memberikan rekomendasi kepada </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/5-teknik-seo-yang-salah.html" title="5 Teknik SEO Yang Salah"><i>Robot Google</i></a><span style="font-weight: bold;"> untuk dijadikan prioritas pada keyword tertentu yang terdapat pada isi content dan link tersebut.</span></div></span><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(243, 255, 204); border-left: 8px solid rgb(51, 51, 51); border-right: 8px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; margin: 20px; padding: 15px; width: 550px;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">4.</span> Buatlah penekanan pada keyword tertentu. penekanan dalam keyword dapat menjadikan </span><i style="font-weight: bold;">Robot Google</i><span style="font-weight: bold;"> perhatian pada keyword tersebut. dengan cara menjadikan penulisan keyword itu lebih tebal atau dengan memberikannya efek tulisan miring, atau apa saja yang sekiranya dapat menjadikannya beda.</span></div></span><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(243, 255, 204); border-left: 8px solid rgb(51, 51, 51); border-right: 8px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; margin: 20px; padding: 15px; width: 550px;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">5.</span> Submit postingan ke situs-situs </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/02/membuat-live-bookmark-pribadi.html" title="Membuat Live Bookmark Pribadi"><i>live bookmark</i></a><span style="font-weight: bold;">. submit ke situs-situs </span><i style="font-weight: bold;">live bookmark</i><span style="font-weight: bold;"> dapat memberikan kita </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/10-tool-untuk-mengecek-backlink.html" title="10 Tool Untuk Mengecek Backlink"><i>Back Link</i></a><span style="font-weight: bold;"> dan juga </span><i style="font-weight: bold;">inbound link (link masuk)</i><span style="font-weight: bold;"> untuk blog kita.</span></div></span><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(243, 255, 204); border-left: 8px solid rgb(51, 51, 51); border-right: 8px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; margin: 20px; padding: 15px; width: 550px;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">6.</span> Tinggalkan Link URL blog anda ketika meninggalkan komentar di blog lain. utamakan blog yang </span><i style="font-weight: bold;">DoFollow</i><span style="font-weight: bold;"> dan tinggalkan link URL anda, jangan Link Profil Blog. tuliskan nama blog anda dan bukan nama anda. usahakan jangan menggunakan link URL postingan dan judul postingan karena akan dianggap spam. cukup nama blog anda dan link URL.</span></div></span><br /></div><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Semoga beberapa tips diatas dapat membantu anda untuk menaikkan </span><i style="font-weight: bold;">PageRank</i><span style="font-weight: bold;"> blog anda. rata-rata update </span><i style="font-weight: bold;">PageRank</i><span style="font-weight: bold;"> google dilaksanakan kira-kira 3 bulan sekali. jika blog anda belum mendapatkan </span><i style="font-weight: bold;">PageRank</i><span style="font-weight: bold;"> dari google atau mendapat pengurangan </span><i style="font-weight: bold;">Rank</i><span style="font-weight: bold;"> cobalah baca beberapa prosedur tentang </span><i style="font-weight: bold;">PageRank</i><span style="font-weight: bold;"> atau bacalah keterangan dan peraturan </span><a style="font-weight: bold;" href="http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=34432"><i>google tentang Ranking</i></a><span style="font-weight: bold;">.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com38tag:blogger.com,1999:blog-1982668800463146170.post-49567442252394527562010-04-13T15:50:00.008+02:002010-04-13T16:50:19.555+02:00Dasar Pengertian PageRank<div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;">PageRank adalah sebuah algoritma yang telah dipatenkan yang berfungsi menentukan situs web mana yang lebih </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/01/solusi-top-post.html">penting/populer</a><span style="font-weight: bold;">. PageRank merupakan salah satu fitur utama mesin pencari Google dan diciptakan oleh pendirinya, Larry Page dan Sergey Brin yang merupakan mahasiswa Ph.D. Universitas Stanford.</span><br /></div><div style="text-align: center;"><img style="margin: 0pt 10px 10px 0pt; width: 249px; height: 254px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKeKSzhXSuvo8RPRwtDkW8wBr4rkOirRZNRc8buAXjbDqdXP3-1XfCL-BGK7yOmTJUQRgFr3bvcCEKd_hi43Jal_3DRRlu4dc6nR49Oef5slRLKMvzol7DL6rsyOk4UizE2ixI6Yb1JgJa/s320/pagerank.gif" alt="Dasar Pengertian PageRank" id="BLOGGER_PHOTO_ID_5459633191514584322" border="0" /><br /></div><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border: 2px solid rgb(51, 51, 51); float: right; width: 200px; margin: 15px; padding: 20px;"><div style="text-align: center; font-weight: bold;">Daftar Isi :</div><br /><span style="font-weight: bold;">1. </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-pengertian-pagerank.html#Cara%20Kerja%20PageRank">Cara Kerja PageRank.</a><br /><span style="font-weight: bold;">2. </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-pengertian-pagerank.html#Konsep%20PageRank">Konsep PageRank.</a><br /></div><span style="font-weight: bold;">1. </span><u style="font-weight: bold;"><a name="Cara Kerja PageRank">Cara Kerja PageRank.</a></u><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Sebuah situs akan semakin populer jika semakin banyak situs lain yang meletakkan link yang mengarah ke situsnya, dengan asumsi isi/content situs tersebut lebih berguna dari isi/content situs lain. PageRank dihitung dengan skala 1-10.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"> Contoh: Sebuah situs yang mempunyai Pagerank 9 akan di urutkan lebih dahulu dalam list pencarian Google daripada situs yang mempunyai Pagerank 8 dan kemudian seterusnya yang lebih kecil, tentunya dalam satu </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-tentang-search-engine.html">keyword tertentu</a><span style="font-weight: bold;">.</span></span><br /></div><span class="fullpost"><br /><span style="font-weight: bold;">2. </span><u style="font-weight: bold;"><a name="Konsep PageRank">Konsep PageRank.</a></u><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Banyak cara digunakan search engine dalam menentukan kualitas/rangking sebuah halaman web, mulai dari penggunaan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-meta-tags-untuk-blog.html" title="Membuat Meta Tags"><i>META Tags</i></a><span style="font-weight: bold;">, isi dokumen, penekanan pada content dan masih banyak teknik lain atau gabungan teknik yang mungkin digunakan. Link popularity, sebuah teknologi yang dikembangkan untuk memperbaiki kekurangan dari teknologi lain (Meta Keywords, Meta Description) yang bisa dicurangi dengan halaman yang khusus di desain untuk search engine atau biasa disebut doorway pages. Dengan algoritma ‘PageRank’ ini, dalam setiap halaman akan diperhitungkan inbound link (link masuk) dan outbound link (link keluar) dari setiap halaman web.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/10-teknik-seo-yang-efektif.html">PageRank</a><span style="font-weight: bold;">, memiliki konsep dasar yang sama dengan link popularity, tetapi tidak hanya memperhitungkan “jumlah” inbound dan outbound link. Pendekatan yang digunakan adalah sebuah halaman akan diangap penting jika halaman lain memiliki link ke halaman tersebut. Sebuah halaman juga akan menjadi semakin penting jika halaman lain yang memiliki rangking (pagerank) tinggi mengacu ke halaman tersebut.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Dengan pendekatan yang digunakan PageRank, proses terjadi secara rekursif dimana sebuah rangking akan ditentukan oleh rangking dari halaman web yang rangkingnya ditentukan oleh rangking halaman web lain yang memiliki link ke halaman tersebut. Proses ini berarti suatu proses yang berulang (rekursif). Di dunia maya, ada jutaan bahkan milyaran halaman web. Oleh karena itu sebuah rangking halaman web ditentukan dari struktur link dari keseluruhan halaman web yang ada di dunia maya. Sebuah proses yang sangat besar dan komplek.</span></span><br /><br /><div style="text-align: right; color: rgb(204, 102, 0);"># Sumber<br />WikiPedia[dot]org<br /></div></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com26tag:blogger.com,1999:blog-1982668800463146170.post-42485618988803231352010-04-11T15:35:00.013+02:002010-04-11T19:08:34.864+02:00Dasar Tentang Search Engine Optimization<a href="http://www.hapiamesir.org/2010/04/dasar-tentang-search-engine.html" title="Dasar Tentang Search Engine Optimization"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 300px; height: 130px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-JcCNcW4cInXeFp_rLylkp1CyN16RDKZXNeH7lT5xHqi4SnGnnjJ-n_9w4pXxmm1R9ZQCDK9nW0LI5YZ1Ih4kkH6P-lSkTDgwNlQEZHXyZmDYVABeOq2xHH1cvr6XEuP8gCblWyMaDvV/s320/seo.png" alt="Dasar Tentang Search Engine Optimization" id="BLOGGER_PHOTO_ID_5458926597311896802" border="0" /></a><div style="text-align: justify; color: rgb(51, 51, 255);"><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/5-teknik-seo-yang-salah.html">Search Engine Optimization</a><span style="font-weight: bold;"> atau dalam bahasa indonesia disebut optimasi mesin pencari yang kemudian populer dengan singkatan SEO adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/02/meningkatkan-trafik-dengan-proxy.html">kualitas trafik kunjungan</a><span style="font-weight: bold;"> melalui mesin pencari menuju blog/website tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut.</span><br /><br /><span style="font-weight: bold;">Tujuan dari </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/SEO">SEO</a><span style="font-weight: bold;"> adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.</span><br /></div><span class="fullpost"><br /><div style="background: none repeat scroll 0% 0% rgb(240, 240, 240); border: 2px solid rgb(51, 51, 51); float: right; width: 250px; margin: 15px; padding: 20px;"><div style="text-align: center; font-weight: bold;">Daftar Isi :</div><br /><span style="font-weight: bold;">1. </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-tentang-search-engine.html#webmasters%20Dan%20Mesin%20Pencari">webmasters Dan Mesin Pencari.</a><br /><span style="font-weight: bold;">2. </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-tentang-search-engine.html#Etika%20Dan%20Legalitas">Etika Dan Legalitas.</a><br /><span style="font-weight: bold;">3. </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/dasar-tentang-search-engine.html#Strategi%20Menjadi%20Nomer%20Satu">Strategi Menjadi Nomer Satu.</a><br /></div><u style="font-weight: bold;"><a name="webmasters Dan Mesin Pencari">webmasters Dan Mesin Pencari.</a></u><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Sejak tahun 1997 perusahaan mesin pencari menyadari bahwa beberapa webmaster (pengelola website) melakukan segala hal untuk dapat terindeks pada urutan teratas hasil pencarian, termasuk dengan cara-cara yang manipulatif dan ilegal. Infoseek, salah satu mesin pencari generasi pertama, melakukan perbaikan pada algortima mereka untuk mencegah manipulasi dengan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-meta-tags-untuk-blog.html">"meta tag"</a><span style="font-weight: bold;"> yang tidak relevan.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Mesin pencari besar seperti </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/10-tool-untuk-mengecek-backlink.html">Google dan Yahoo!</a><span style="font-weight: bold;"> menyediakan program dan panduan yang memungkinkan webmaster mengoptimalkan situsnya agar terindeks dengan baik. Google menyediakan aplikasi </span><a style="font-weight: bold;" href="https://www.google.com/webmasters/tools/">Webmaster Tool</a><span style="font-weight: bold;"> (anda harus mempunyai akun di Google guna melihat tool ini) dan memperkenalkan sitemap berbasis XML standar mereka, sedangkan Yahoo! menyediakan program </span><a style="font-weight: bold;" href="https://siteexplorer.search.yahoo.com/">Site Explorer</a><span style="font-weight: bold;"> (juga harus login dengan akun pengguna Yahoo! anda) yang memungkinkan webmaster mendaftarkan URL situs, mengecek jumlah halaman web mereka yang telah terindeks di data-base Yahoo!, dan melihat </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/SEO%20Tool">informasi link masuk</a><span style="font-weight: bold;">. Namun demikian mesin pencari tidak mentolerir metode SEO yang manipulatif dan menghalalkan segala cara.</span></span><br /></div><span class="fullpost"><br /><u style="font-weight: bold;"><a name="Etika Dan Legalitas">Etika Dan Legalitas.</a></u><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Sistem </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/10-teknik-seo-yang-efektif.html">PageRank</a><span style="font-weight: bold;">, walau menerapkan algoritma yang kompleks, belakangan juga tidak lagi sepenuhnya mampu menghadapi trik dan manipulasi. Sejumlah webmaster dan praktisi SEO telah mengembangkan beberapa metode yang memanfaatkan cara kerja PageRank agar halaman web klien mereka berada pada peringkat pertama hasil pencarian. Google secara resmi telah melarang penggunaan beberapa teknik ilegal seperti link farming, doorway pages, keyword stuffing, dan auto generated pages atau scraper pages. Situs atau layanan SEO yang tetap menggunakanannya terancam akan dihapus dari indeks pencarian.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Ancaman Google dan mesin pencari lain bukan hanya gertakan. Beberapa perusahaan layanan SEO beserta klien mereka yang tidak mengindahkan larangan tersebut menerima penalti yang serius karena perbuatan ilegal mereka. Pada tahun 2005, Matt Cutts dari Google mengatakan bahwa URL sebuah firma SEO bernama Traffic Power beserta klien-klien mereka telah dihapus dari indeks Google karena menggunakan teknik SEO ilegal. Kasus lain yang terkenal adalah ketika Google pada Februari 2006 menghapus situs web perusahaan BMW dan Ricoh Jerman dari daftar karena terbukti menggunakan metode SEO yang manipulatif. BMW dan Ricoh dengan segera meminta maaf kepada Google dan memperbaiki situs mereka. Google kemudian memasukkan kembali situs web mereka ke dalam indeks pencarian. Namun skandal tersebut tetap meninggalkan citra buruk dan memalukan bagi kedua perusahaan tersebut.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berdasarkan panduan resmi mesin pencari, SEO bukanlah teknik ilegal sepanjang dilakukan dengan mengikuti etika dan aturan yang ada. Hal tersebut untuk menjamin setiap situs web memperoleh kesempatan yang sama dalam pencarian, dan pemeringkatan dilakukan dengan obyektif, di mana yang paling berperan dalam menentukan peringkat suatu halaman web adalah kualitas dan manfaatnya bagi pengguna internet.</span></span><br /></div><span class="fullpost"><br /><u style="font-weight: bold;"><a name="Strategi Menjadi Nomer Satu">Strategi Menjadi Nomer Satu.</a></u><br /><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Banyak usaha yang dilakukan oleh para webmaster untuk menjadikan blog/websitenya diperingkat pertama atau setidaknya di halaman pertama pada mesir pencari dengan kata kunci tertentu. segala optimasi yang dilakukan baik itu </span><i style="font-weight: bold;">On Page</i><span style="font-weight: bold;"> atau </span><i style="font-weight: bold;">Off Page</i><span style="font-weight: bold;"> adalah sebagian kecil dari usaha-usaha optimasi tersebut. banyak hal-hal lainnya seperti memanfaatkan situs-situs penyedia submit otomatis keberapa search engine, juga dapat menggunakan software baik yang gratis atau yang berbayar.</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Pengecekan juga dapat dilakukan menggunakan beberapa <a href="http://www.hapiamesir.org/2010/04/10-tool-untuk-mengecek-backlink.html">SEO tool</a> yang banyak disediakan secara gratis. dan sebelum anda melangkah lebih jauh lagi tentang SEO, alangkah baiknya anda terlebih dahulu membaca </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/10-teknik-seo-yang-efektif.html">10 Teknik SEO Yang Efektif</a><span style="font-weight: bold;">.</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: right;"><span style="color: rgb(204, 102, 0);" class="fullpost">#Sumber</span><br /><span style="color: rgb(204, 102, 0);" class="fullpost">WikiPedia.org</span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com29tag:blogger.com,1999:blog-1982668800463146170.post-77442711270073382532010-04-10T01:54:00.007+02:002010-04-10T04:43:24.258+02:00Membuat Meta Tags Untuk Blog<div style="text-align: justify;"><img style="float: left; margin: 0pt 10px 10px 0pt; width: 270px; height: 190px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCyU3FOl49dMK6Rj6VschhTGjfsMMEExyfQOAcxMZpKRenFpU2609aMVMrAfej8-s2JtOgDy4zBV-aJKbSb8ANUHIndenmKWO_Swe7urisMaZr5C6WITBsmdeoLVvd8ohPh42cH3oJgdbM/s320/meta-tags.jpg" alt="Membuat Meta Tags Untuk Blog" id="BLOGGER_PHOTO_ID_5458323395435802034" border="0" /><span style="font-weight: bold; color: rgb(51, 51, 255);">META Tags sangat penting untuk blog. disamping berisikan informasi singkat tentang blog, juga karena </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/2010/04/10-teknik-seo-yang-efektif.html">robot search engine</a><span style="font-weight: bold; color: rgb(51, 51, 255);"> mendahulukan mengecek META tags untuk mendapatkan informasi tentang isi blog dari pada harus mencari-cari dipostingan atau tempat yang lain. lebih tepatnya, diantara yang diprioritaskan oleh robot search engine untuk diindex.</span><br /><br /><span style="font-weight: bold; color: rgb(51, 51, 255);">Walau postingan ini sudah banyak dipostingkan oleh para master terlebih dahulu, akan tetapi tidak mengapa untuk sekedar meramaikan </span><a style="font-weight: bold; color: rgb(204, 0, 0);" href="http://www.hapiamesir.org/2010/04/5-teknik-seo-yang-salah.html">google search</a><span style="font-weight: bold; color: rgb(51, 51, 255);">.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berikut Contoh <span style="color: rgb(255, 0, 0);">META tag DESCRIPTION</span> </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> yang telah terindex oleh google :</span></span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span class="fullpost"><img style="display: block; margin: 0px auto 10px; text-align: center; width: 430px; height: 252px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhkOh872pskNf9rztnO09RLX-l64EPy6O6zphm_peY8r29rUvPcvwJ5YRwJzXSsVgfxVoBpHr5PKqrzcm4n5-hIIc_fhhRrlY1df7nsRODIOCxXo6yrMlglsna8M0-n3-WCvAzg2psqJIZ/s320/contoh-meta-hapia.JPG" alt="Membuat Meta Tags Untuk Blog" id="BLOGGER_PHOTO_ID_5458324848823943874" border="0" /><span style="font-weight: bold; color: rgb(51, 51, 255);">Berikut beberapa META tags yang dapat anda tambahkan di template blog anda :</span></span><br /><br /><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Untuk membuat <span style="color: rgb(255, 0, 0);">META tags judul</span> blog bisa memakai META berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 350px; margin: 0pt; padding: 10px;"><b><TITLE><span style="color: rgb(255, 0, 0);">judul blog anda disini</span></TITLE></b></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Atau pakai META berikut yang otomatis akan mengindex nama / judul blog anda :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 350px; margin: 0pt; padding: 10px;"><b><TITLE><data:blog.pageTitle/></TITLE></b></div></center></span><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;"><br />- Untuk <span style="color: rgb(255, 0, 0);">META tag DESCRIPTION</span> atau uraian tentang isi blog anda, dapat menggunakan META berikut :</span></span><br /><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 500px; margin: 0pt; padding: 10px;"><b><META NAME="DESCRIPTION" CONTENT="<span style="color: rgb(255, 0, 0);">tuliskan sedikit ulasan tentang isi blog anda disini [utamakan penggunaan keyword]</span>"/></b></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Untuk <span style="color: rgb(255, 0, 0);">META tag KEYWORDS</span> bisa memakai META dengan format berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 500px; margin: 0pt; padding: 10px;"><b><META NAME="KEYWORDS" CONTENT="<span style="color: rgb(255, 0, 0);">keyword atau kata kunci blog anda disini</span>"/></b></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Anda juga dapat menambahkan nama anda sebagai <span style="color: rgb(255, 0, 0);">author blog</span> anda dengan menambahkan META berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 500px; margin: 0pt; padding: 10px;"><b><META NAME="PUBLISHER" CONTENT="<span style="color: rgb(255, 0, 0);">nama anda yang akan dipublikasikan</span>"/></b></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Gunakan META berikut untuk menjelaskan <span style="color: rgb(255, 0, 0);">bahasa</span> yang digunakan dalam content blog anda :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 500px; margin: 0pt; padding: 10px;"><b><META NAME="LANGUAGE" CONTENT="<span style="color: rgb(255, 0, 0);">tuliskan bahasa content blog anda</span>"/></b></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Tambahkan juga META berikut <span style="color: rgb(255, 0, 0);">robot search engine</span> dapat mengindex dan mencari link-link yang terdapat dalam blog anda :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 450px; margin: 0pt; padding: 10px;"><b><META NAME="ROBOTS" CONTENT="index"/><br /><META NAME="ROBOTS" CONTENT="follow"/></b></div></center><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">- Untuk memberitahukan mesir pencari kapan waktu untuk kembali bisa menggunakan META berikut :</span></span><br /></div><span class="fullpost"><br /><center><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 6px solid rgb(51, 51, 51); -moz-border-radius: 10px 10px 10px 10px; width: 450px; margin: 0pt; padding: 10px;"><b><META NAME="REVISIT-AFTER" CONTENT="<span style="color: rgb(255, 0, 0);">1 day</span>"/></b></div></center><br /></span><div style="text-align: justify; color: rgb(51, 51, 255);"><span style="font-weight: bold;"># Letakkan semua META Tags dibawah code <span style="color: rgb(255, 0, 0);"><head></span> pada template anda.</span><br /></div><br /><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Semoga Tips diatas bermanfaat, dan happy blogging.</span></span><br /></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com29tag:blogger.com,1999:blog-1982668800463146170.post-54931412757881910652010-04-08T14:48:00.006+02:002010-04-08T18:01:00.834+02:0010 Teknik SEO Yang Efektif<img style="float: left; margin: 0pt 10px 10px 0pt; width: 220px; height: 160px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSE_NDMmmHfG4t93pVTgTdoMdcnZ2g4ZEFcdfkplCjy1TwTXhGRYRXQZn_wuNxU1Xm1WStw_deuWvuHhSEorJ2-_ijDFmS6bdFpAzVihtsyOWcJ_FDu-L3YFj1nYd2FOe0UtHGccO3nc52/s320/seo_efektif.jpg" alt="10 Teknik SEO Yang Efektif" id="BLOGGER_PHOTO_ID_5457795795949268466" border="0" /><div style="text-align: justify; color: rgb(51, 51, 255);"><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/5-teknik-seo-yang-salah.html">Search Engine Optimisation</a><span style="font-weight: bold;"> atau yang kemudian lebih dikenal dengan singkatan </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/SEO">SEO</a><span style="font-weight: bold;"> adalah serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut.</span><br /><br /><span style="font-weight: bold;">Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung.</span><br /></div><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Berikut adalah 10 teknik SEO Yang Efektif yang </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/">HAPIA Mesir</a><span style="font-weight: bold;"> tawarkan :</span></span><br /></div><span class="fullpost"><br /></span><span class="fullpost"><div style="background: none repeat scroll 0% 0% rgb(230, 255, 153); border-left: 8px solid rgb(51, 51, 51); border-right: 8px solid rgb(51, 51, 51); -moz-border-radius: 15px 15px 15px 15px; width: 550px; margin-left: 20px; padding: 20px;"><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">1.</span> Pastikan blog/website Anda pada awalnya dirancang dengan optimasi mesin pencari dengan kebutuhan yang ada dalam pikiran anda. </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/tempat-yang-tepat-untuk-link-exchange.html">Search engine</a><span style="font-weight: bold;"> mencari teks, jadi tidak harus mempunyai grafis dan layout yang keren. blog situs dengan desain keren akan tidak berarti apa-apa jika tidak ada seorangpun yang mengetahuinya.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">2.</span> Setiap halaman di blog/website anda memiliki tag judul yang menjelaskan baik blog/website anda atau isi yang ada didalamnya. pastikan judul tersebut mengandung kata kunci dengan nama blog atau website anda atau kata kunci yang ada dalam postingan anda. kecuali anda menggunakan nama blog yang tidak populer, jadi anda cukup meng-optimasi atau mencantumkan kata kunci yang ada dalam postingan anda pada judul tersebut yang akan membawa pengunjung kepada blog atau website anda melalui mesin pencari.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">3.</span> Jika blog/website anda menggunakan domain, baik itu berbayar atau gratis, pertimbangkan terlebih dahulu penggunaan awalan </span><i style="font-weight: bold; color: rgb(0, 0, 0);">www</i><span style="font-weight: bold; color: rgb(0, 0, 0);"> untuk URL domain anda. jika anda memilih menggunakan </span><i style="font-weight: bold; color: rgb(0, 0, 0);">www</i><span style="font-weight: bold; color: rgb(0, 0, 0);"> untuk awalan URL domain anda, pastikan versi </span><i style="font-weight: bold; color: rgb(0, 0, 0);">Non-www</i><span style="font-weight: bold; color: rgb(0, 0, 0);"> atau yang tidak menggunakan </span><i style="font-weight: bold; color: rgb(0, 0, 0);">www</i><span style="color: rgb(0, 0, 0);"> </span><span style="font-weight: bold; color: rgb(0, 0, 0);">mengalihkan kepada blog/website anda.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold; color: rgb(0, 0, 0);">Pada penanaman URL dalam template blog atau website anda atau dalam posting, pastikan penggunaan </span><i style="font-weight: bold; color: rgb(0, 0, 0);">www</i><span style="font-weight: bold; color: rgb(0, 0, 0);"> jika anda memilih untuk menggunakan awalan tersebut. dan jangan menggunakan kedua-duanya.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">4.</span> Ketika anda merancang blog atau website anda, pastikan untuk menghindari penggunaan menu </span><i style="font-weight: bold; color: rgb(0, 0, 0);">Drop Down</i><span style="font-weight: bold; color: rgb(0, 0, 0);"> terlalu banyak, atau </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-efek-zoom-pada-gambar-thumbnail.html">gambar</a><span style="font-weight: bold;"> yang berlebihan. Jika anda harus menggunakan salah satu dari metode diatas, pastikan menyertakan banyak link teks yang disertakan pada postingan anda, dan berikan nama pada gambar dengan menuliskan nama gambar atau judul postingan pada </span><i style="font-weight: bold; color: rgb(0, 0, 0);">alt</i><span style="color: rgb(0, 0, 0);"> </span><span style="font-weight: bold; color: rgb(0, 0, 0);">gambar tersebut.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">5.</span> Tidak peduli apa pun jenis ekstensi situs yang Anda gunakan (seperti : html, Htm, Asp, Php). Mesin pencari tidak melihat ekstensi web dan tidak akan berdampak sama sekali pada hasil pencarian atau peringkat.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">6.</span> Setiap halaman dalam </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2010/04/membuat-multi-background-di-blog.html">blog atau website</a><span style="font-weight: bold;"> anda harus menyertakan link ke halaman utama blog/website anda, dan pastikan link tersebut adalah sama. jika anda menggunakan domain, pastikan penggunaan </span><i style="font-weight: bold; color: rgb(0, 0, 0);">www</i><span style="font-weight: bold; color: rgb(0, 0, 0);"> atau tanpa </span><i style="font-weight: bold; color: rgb(0, 0, 0);">www</i><span style="color: rgb(0, 0, 0);"> </span><span style="font-weight: bold; color: rgb(0, 0, 0);">tergantung pilihan anda diawal. dan jangan menggunakan tambahan /index.html atau .php (seperti : http://www.mydomain.com/index.html).</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">7.</span> Ada istilah "Content Is King" (Content adalah raja), sangat penting untuk anda selalu memperbarui content/posting blog/website anda secara berkala dengan memasukan kata kunci anda.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">8.</span> Orang lebih cenderung untuk memasukkan sebuah frase, bukan kata tunggal ketika melakukan pencarian di internet. jadi jika anda menulis sebuah informasi dalam postingan, pastikan penggunakan kata khusus yang menjelaskan isi postingan anda. sebagai contoh, jika anda menuliskan tentang liburan anda, tuliskanlah secara jelas dan lebih khusus seperti "</span><a style="font-weight: bold;" href="http://www.hapiamesir.org/2009/06/musim-panas-di-piramid.html">Liburan Musim Panas Di Piramid</a><span style="font-weight: bold;">" dan bukan "Liburan Musim Panas".</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">9.</span> Menulislah dengan alami. Hal terburuk yang dapat Anda lakukan adalah mencoba untuk menjejalkan kata kunci miliaran ke artikel atau blog entri, membuat berantakan dan sulit untuk dibaca. Search engine dapat menentukan apakah teks tersebut logis dan mereka akan mengabaikan konten dengan kepadatan kata kunci yang tinggi.</span><br /></div><br /><div style="text-align: justify;"><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">10.</span> Jangan pedulikan apa yang Anda dengar, jangan terlalu khawatir dengan Google PageRank situs Anda. Sebuah situs web yang dikembangkan dengan benar dan berisi konten yang baik bisa mengungguli website dengan PageRank yang lebih tinggi.</span></div></div></span><span class="fullpost"><br /></span><div style="text-align: justify;"><span style="color: rgb(51, 51, 255);" class="fullpost"><span style="font-weight: bold;">Semoga </span><a style="font-weight: bold;" href="http://www.hapiamesir.org/search/label/Tips%20blogging">Tips-tips</a><span style="font-weight: bold;"> diatas dapat membantu pemosisian blog/website anda di search engine. Happy Blogging.</span></span><br /><br /><div style="text-align: right; color: rgb(204, 102, 0);"># Sumber<br />wmtips.com<br /></div></div>Hery Prasetyohttp://www.blogger.com/profile/13157068793818220418noreply@blogger.com31