Hot Todays

Thursday, July 5

Cara membuat/memasang Menu Tersembunyi Unik dengan CSS

menu tersembunyi
Kemarin beberapa kawan blogger bertanya bagaimana cara membuat menu navigasi yang tampil beda tapi lumayan ringan alias tidak mengganggu saat loading blog. Ini bukan suatu widget yang terbaiuk, tapi setidaknya ini adalah tawaran yang mungkin bisa memecah kebuntuan dari kebutuhan tersebut. Sekarang mari kita bahas cara membuat menu tersembunyi unik dengan css. Ikuti langkah berikut.

Masuk blogger
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode ]]></b:skin>
.blogonol-hiddenmenu{ position:fixed;font-family:Arial;font-size:12px;width:30px;overflow:hidden;left:-10px; padding:4px; border:6px solid transparent;bottom:0;height:158px;background:url(http://i1138.photobucket.com/albums/n524/blogonol/blogonol-moreinfo-1.jpg) bottom right no-repeat;transition:width 0.5s ease-out 0.8s,background 0.4s linear;-o-transition:1s ease-outwidth 0.5s ease-out 0.8s,background 0.4s linear;-moz-transition:width 0.5s ease-out 0.8s,background 0.4s linear;-webkit-transition:width 0.5s ease-out 0.8s,background 0.4s linear;-ms-transition:width 0.5s ease-out 0.8s,background 0.4s linear}
.blogonol-hiddenmenu:hover{z-index:11;width:390px;left:0;height:425px;background:#666;border-color:#aaa}
.blogonol-hiddenmenu:hover, .blogonol-hiddenmenu .hiddenmenu ul li{transition:0.5s ease-out;-o-transition:0.5s ease-out;-moz-transition:0.5s ease-out;-webkit-transition:0.5s ease-out;-ms-transition:0.5s ease-out}
.blogonol-hiddenmenu .hiddenmenu{float:left;padding:5px;background:transparent;opacity:0;margin:3px;border-radius:8px}
.blogonol-hiddenmenu:hover .hiddenmenu{opacity:1.0;background:#aaa}
.blogonol-hiddenmenu .hiddenmenu ul{margin:0;padding:0 3px 0 3px;width:368px;height:380px;list-style:none;float:left;background:#eee;overflow:auto}
.blogonol-hiddenmenu .hiddenmenu ul li{padding:5px 6px 5px 30px;background:#888 url(http://i1138.photobucket.com/albums/n524/blogonol/blogonol-trail6.gif) 6px 7px no-repeat;line-height:18px;border-bottom:1px dotted #999;margin:0}
.blogonol-hiddenmenu .hiddenmenu ul li:hover{ background-color:#aaa;  border-left:6px solid red}
.blogonol-hiddenmenu .hiddenmenu ul li a{ text-decoration:none;  color:#000;  text-shadow:#888 2px 2px 2px}
.blogonol-hiddenmenu .hiddenmenu ul li a:hover{ color:#C30}
.blogonol-link{display:inline-block; padding:5px 15px; width:91%; text-align:right; font-size:14px; text-shadow:3px 3px 3px #000; color:#09F; margin:2px; background:#555; text-decoration:none}
.blogonol-link:hover{color:red}

Klik Simpan Template
Selanjutnya Klik lagi Rancangan
Klik Tambah Gadget
Pilih HTML/ JavaScript
Masukkan kode berikut ke dalamnya
<div class="blogonol-hiddenmenu">
<div class="hiddenmenu">
   <ul>
<li><a href='MASUKKAN ALAMAT LINK ANDA DI SINI' target='_blank'>JUDUL</a></li>
<li><a href='MASUKKAN ALAMAT LINK ANDA DI SINI' target='_blank'>JUDUL</a></li>

..........DST..........
   </ul>
</div>
<a class="blogonol-link" target="_blank" href="blogonol.blogspot.com">blogonol | blogger tutorial</a>
</div>
DST itu hanya contoh saja dalam pemasangannya jangan di masukkan gan.

Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu

Sumber : http://blogonol.blogspot.com/2012/06/menu-tersembunyi-unik-dengan-css.html

Widget Sharing Is Caring - Cara Memasang Widget Caring Is Sexy

Share posting ke beberapa social bookmark maupun social media lain merupakan hal penting untuk promosi blog dan artikel blog. Menyediakan tool untuk pengunjung agar lebih mudah melakukan sharing membuat mereka mudah melakukannya. Salah satu bookmarking widget yang cukup menjadi favorit adalah "Sharing is caring/sexy bookmarking widget", karena tampak atraktif dan animatif sehingga dapat menjadi nilai plus juga untuk desain blog.
Widget ini banyak ditemui dan dishare oleh banyak blog. Sebagian menggunakan javascript/jquery library, yang memang tampak lebih animatif. Namun kekurangannya, waktu load yang dibutuhkan lebih lama. Sehingga bagi blog yang sudah terlalu banyak menggunakan javascript, widget ini dapat menambah beban/berat blog dan membuat waktu load lebih panjang. Untuk versi widget sharing is caring ini, saya melakukan beberapa modifikasi pada jenis button bookmark apa saja yang digunakan dan juga menggunakan CSS sprite (image sprite) garapan CSSReflex tanpa javascript/jquery.
  • Demo 1 (Sharing is caring): lihat di bawah
  • Demo 2 (Sharing is sexy): Click here


Cara Memasang Widget Sharing is Caring/Sexy di Blogger

Widget bookmark sharing blogger ini akan ditampilkan di bawah posting blog.

1. Masuk ke dashboard > template > Edit HTML
2. Centang 'Expand Widget Templates'. Jika perlu, backup template terlebih dahulu.
3. Cari </head> (Ctrl+F), letakkan kode CSS berikut tepat di atasnya.

<!--sharing-sexy-buka-rahasia.blogspot.com-starts-->
<style type='text/css'>
div.beauty-bookmarks {height:54px;background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfXp5eZ7J2icgavlz9Sr-vZHR5AE8cbinrxBg1NlTlnkcU2YloBrhutfRDPJZo8D3BxzifbuL3ECa95pHI5FWw-0HnKM7yUHIuXpSIen6scjGn837HjHBV-1uFjwrIR9ojeXhjxAle-ep/s1600/buka-rahasia-sharing-background.png&#39;) no-repeat left top;position:relative;width:540px;}
div.beauty-bookmarks span.beauty-rightside {width:17px;height:54px;background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEfXp5eZ7J2icgavlz9Sr-vZHR5AE8cbinrxBg1NlTlnkcU2YloBrhutfRDPJZo8D3BxzifbuL3ECa95pHI5FWw-0HnKM7yUHIuXpSIen6scjGn837HjHBV-1uFjwrIR9ojeXhjxAle-ep/s1600/buka-rahasia-sharing-background.png&#39;) no-repeat right top;position:absolute;right:-17px;}
div.beauty-bookmarks ul.socials {margin:0 !important;padding:0 !important;position:absolute;bottom:0;left:10px;}
div.beauty-bookmarks ul.socials li {display:inline-block !important;float:left !important;list-style-type:none !important;margin:0 !important;height:29px !important;width:48px !important;cursor:pointer !important;padding:0 !important;}
div.beauty-bookmarks ul.socials a {display:block !important;width:48px !important;height:29px !important;font-size:0 !important;color:transparent !important;}
.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgMBNgoOyNKp1j6-jj9CUZVgE0ysqq2sL245ZuVa9YNJntL4mQevPm1NSg1baeSJB0bnnE7O7mNLatjo_fjzkcX813NigUzzIZwSbmV5LkXkm5TvLJdP3zcc0MTS-VS8AK6QgUSwCmUXkH/s1600/bukarahasia-sexysprite.png&#39;) no-repeat !important;}
.beauty-furl {background-position:-300px top !important;}
.beauty-furl:hover {background-position:-300px bottom !important;}
.beauty-digg {background-position:-500px top !important;}
.beauty-digg:hover {background-position:-500px bottom !important;}
.beauty-reddit {background-position:-100px top !important;}
.beauty-reddit:hover {background-position:-100px bottom !important;}
.beauty-stumble {background-position:-50px top !important;}
.beauty-stumble:hover {background-position:-50px bottom !important;}
.beauty-delicious {background-position:left top !important;}
.beauty-delicious:hover {background-position:left bottom !important;}
.beauty-yahoo {background-position:-650px top !important;}
.beauty-yahoo:hover {background-position:-650px bottom !important;}
.beauty-blinklist {background-position:-600px top !important;}
.beauty-blinklist:hover {background-position:-600px bottom !important;}
.beauty-technorati {background-position:-700px top !important;}
.beauty-technorati:hover {background-position:-700px bottom !important;}
.beauty-myspace {background-position:-200px top !important;}
.beauty-myspace:hover {background-position:-200px bottom !important;}
.beauty-twitter {background-position:-350px top !important;}
.beauty-twitter:hover {background-position:-350px bottom !important;}
.beauty-facebook {background-position:-450px top !important;}
.beauty-facebook:hover {background-position:-450px bottom !important;}
.beauty-mixx {background-position:-250px top !important;}
.beauty-mixx:hover {background-position:-250px bottom !important;}
.beauty-script-style {background-position:-400px top !important;}
.beauty-script-style:hover {background-position:-400px bottom !important;}
.beauty-designfloat {background-position:-550px top !important;}
.beauty-designfloat:hover {background-position:-550px bottom !important;}
.beauty-syndicate {background-position:-150px top !important;}
.beauty-syndicate:hover {background-position:-150px bottom !important;}
.beauty-email {background-position:-753px top !important;}
.beauty-email:hover {background-position:-753px bottom !important;}
</style>
<!--sharing-sexy-buka-rahasia.blogspot.com-ends-->

Kostumisasi CSS:
Secara default, CSS di atas saya set untuk menampilkan quote "sharing is caring". Untuk mengubah menjadi "sharing is sexy", perhatikan pada bagian CSS background positioning di atas yang saya tandai dengan warna biru: ganti left top dengan left bottom, dan right top dengan right bottom.

4. Cari <data:post.body/> (Ctrl+F), paste kode berikut TEPAT setelah/dibawahnya:
<!--sharing-widget-buka-rahasia.blogspot.com-starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center><div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/dedeazisnagara/nBAe' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div></center>
</b:if>
<!--sharing-widget-buka-rahasia.blogspot.com-ends-->

Ganti
http://feeds.feedburner.com/dedeazisnagara/nBAe dengan url feedburner blogmu.
5. Save templates.

Cara menurunkan ranking alexa

Sudah banyak sekali blogger yang sharing tentang cara menurunkan ranking Alexa. Dan kali ini saya ingin berbagi juga cara saya pribadi melangsingkan Alexa. Mungkin cara saya ini berbeda dengan blogger lain, mungkin juga sama. Yang pasti cara ini selalu berhasil untuk saya, dan kalau berhasil untuk saya seharusnya bisa juga berhasil untuk Anda.
Cara saya menurunkan ranking Alexa sangat mudah:

  1. Pasang toolbar Alexa di browser.
    Selama ini saya pakai di 2 browser, Firefox dan Chrome. Yang lebih sering saya gunakan adalah Firefox. Jadi saya selalu menggunakan Firefox untuk browsing ke website milik sendiri. Untuk Chrome saya masih coba, tapi seharusnya sama saja. Download toolbar Alexa di sini.
  2. Posting setiap hari 1 artikel saja.
    Banyak pendapat beredar tentang jumlah posting ini. Ada yang menyarankan setiap hari minimal 2 posting bahkan 5 posting. Ada juga yang menyarankan untuk blog baru tidak perlu posting tiap hari, dan lain sebagainya. Untuk saya sendiri, cukup posting 1 artikel saja setiap hari. Kadang 1 artikel saja suka males ya
Mungkin cukup 2 cara saja ya. tidak usah banyak-banyak. kalau ada yang ingin menambahkan, di kolom komentar saja. 
Sumber : http://gammarizky.blogspot.com/2012/06/cara-jitu-menurunkan-alexa-rank.html

Tips Agar Blog Banyak Pengunjung


Tips Agar Blog Banyak PengunjungSemua blogger pasti menginginkan banyak traffic ke blog/websitenya, blogger mana yang tidak mau lebih banyak pengunjung dan pelanggan???

Ada waktu yang berharga yang pernah dialami oleh para blogger pemula (newbie), yaitu dimana baru memulai membuat blog yang hanya baru mempunyai satu orang pembaca/pengunjung setia yaitu Anda sendiri.

Mungkin beberapa hari kemudian, Anda bisa mendapat tambahan pembaca/pengunjung karena telah memberitahukan kepada adik (misalnya), kakak, orang tua, pacar, teman, atau orang lain yang belum Anda kenal bahwa Anda telah memiliki blog/web.

Ada begitu banyak posting tentang bagaimana untuk meningkatkan pengunjung ke blog Anda. Saya telah membaca banyak jumlah artikel yang membahas tentang bagaimana meningkatkan jumlah traffic blog sebelum mengembangkan taktik sendiri.

Disini saya coba paparkan beberapa teknik rahasia agar blog Anda banyak pengunjung, atau saya berikan judul ini dengan "Tips agar blog banyak pengunjung".

Berikut ini beberapa teknik rahasia agar blog Anda mendapatkan banyak pengunjung, yaitu:
  1. Tulislah sedikitnya 5 artikel utama
  2. Artikel utama adalah merupakan bentuk model posting tutorial yang bertujuan mengajarkan sesuatu pada pembaca/pengunjung. Artikel utama ini biasanya terdiri lebih dari 500 kata dan juga berbentuk tips dan triks atau nasihat maupun anjuran. Artikel/posting yang saat ini sedang Anda paca merupakan salah satu contoh dari Artikel utama.

  3. Tulislah sedikitnya 1 posting per hari
  4. Ini akan mengandung kesan baik bagi pembaca/pengunjung, karena mereka memandang blog/web Anda selalu di update per hari dan kemungkinan mereka akan berkunjung kembali untuk esok harinya agar tidak merasa ketinggalan posting atau tips/trik terbaru dari blog/web Anda. Tapi ingat! usahkan membuat posting dalam kata-kata Anda sendiri, karena ini penting agar cepat terindex di search engine (google, yahoo, dll).

  5. Gunakan nama domain
  6. Jika bener-benar ingin serius dengan blog/web Anda, maka gunakanlah nama domain supaya terkesan profesional. Dalam pemilihan domain, agar memakai yang sudah umum seperti (.com, .net, dll) dan dengan nama domain yang simple dan juga mudah diingatnya. Sebagai contoh dalam pemilihan nama domain yaitu: www.google.com, www.yahoo.co.id, www.ukafahrurosid.com, dan sebagainya.

  7. Desain Template dan Judul
  8. Bila Anda memilih desain untuk blog, pastikan Anda memilih template yang tepat, yang google friendly dan eyes catching, juga dengan pilihan judul yang banyak dicari dan tidak kikuk.

  9. Berkomentar di blog/web lain
  10. Salah satu cara untuk mendapatkan pembaca/pengunjung ke blog/web Anda ialah dengan aktif berkomentar di blog/web orang lain dengan tidak melakukan spamming yaitu dengan berkomentar bertubi-tubi yang akan dianggap spamming dan kurang sopan. Pada kotak komentar saat ini sudah dilengkapi dengan fasilitas link URL dimana bila suatu saat pemilik blog atau orang lain yang melihat komentar Anda bisa dengan mudah meng-klik link URL Anda, dan tentunya bermanfaat untuk mendapatkan pengunjung baru.

  11. Sertakan link URL blog/web orang lain (trackback) dalam posting
  12. Trackback ini secara sederhana merupakan percakapan antar pemilik blog/web. Dengan cara ini memang merupakan salah satu teknik yang dapat membantu Anda dalam menjaring pengunjung, karena triks trackback ini dapat memberikan perhatian bagi pemilik blog/web yang artikelnya di kutip atau di rangkum oleh Anda dengan menyertakan link URL-nya pada blog/web Anda sehingga pasti pemilik link URL tersebut akan dengan senang hati melihat bahkan memantau posting Anda. Mereka mungkin saja suatu saat bisa menjadi pengunjung setia blog/web Anda, atau setidaknya minimal dapat memantau blog/web Anda walaupun tidak sesering mungkin.

  13. Anjurkan orang lain untuk berkomentar
  14. Untuk memancing atau menganjurkan pembaca/pengunjung meninggalkan komentar, Anda bisa menyertakan sebuah pertanyaan pada tiap posting, seperti misalkan: "Bagaimana menurut Anda?" atau "Apa Anda punya tips lain yang bisa di sharingkan?" dan lain sebagainya yang Anda bisa kembangkan sendiri.

  15. Daftarkan ke Directory RSS Feed
  16. Anda perlu mendaftarkan blog Anda ke situs Directory RSS Feed Feedburner.com untuk mendapatkan pengunjung lebih banyak.

  17. Daftar dan Manfaatkan Artikel Anda Pada Situs Directory
  18. Tersedia banyak sekali situs yang menyediakan layanan publikasi dari artikel Anda. Sebagian contoh yaitu BlogCarnival.com, Blogtopsites.com, EzineArticles.com, Lintasberita.com dan Infogue.com Submit artikel Anda dan buat judul semenarik mungkin untuk memikat minat pengunjung ke blog Anda, tunggu kebanjirang pengunjung!! Blog Carnival adalah kumpulan ringkasan artikel dari berbagai blog/website dengan berbagai topik-topik tertentu yang beragam. Situs Blog Carnival bisa Anda akses di www.blogcarnival.com, Blog Top Sites dan yaitu tidak jauh berbeda dengan Blog Carnival. Anda bisa cari kategori sesuai dengan isi blog Anda dan kemudian "submit" dan setelah itu Anda harus copy-paste kode Blogtopsites.com kedalam blog Anda. Ezine Articles yaitu mensubmit artikel Anda dengan harapan dapat dibaca orang lain. Cara ini memang tidak langsung mendapat banyak pengunjung secara instans, akan tetapi ini juga akan bermanfaat jangka panjang karena bisa jadi artikel Anda diterbitkan di media cetak online atau offline oleh orang lain yang berkepentingan dan akan beruntung sekali bila link URL Anda di sertakan pada blog/web mereka. Lintasberita dan Infogue merupakan sarana promosi blog/web Lokal dari Indonesia dengan men-submit artikel Anda di directorynya.

  19. Bergabung di Forum
  20. Aktif dalam forum-forum yang anda ikuti dan sesuai dengan blog Anda, dan tentunya jangan sekali-kali melakukan spam, karna itu dilarang dan pasti keanggotaan Anda di Forum akan di hapus. Beberapa forum besar diantaranya Kaskus.us dan Detik.com, buat posting yang menarik dan pancing pembaca supaya datang ke blog Anda atau bila memungkinkan Anda bisa gunakan signature pada forum dengan mencantumkan nama dan URL blog Anda.

  21. Web Traffic
  22. Mungkinkah bila ada penawaran 1000 pengunjung gratis ke blog anda? jawabannya mungkin. Ada beberapa penyedia web traffic yang berbayar maupun yang gratis. Menarik bukan bila blog anda kebanjiran pengunjung dari web traffic secara gratis. Anda bisa coba dan manfaatkan layanan web traffic disini.

  23. Link Exchanger
  24. Buat widget link exchanger di blog anda, dan sarankan teman-teman untuk me-link satu sama lain, contoh link exchanger bisa anda pelajari dan anda kembangkan seperti disini.

  25. Video Marketing
  26. Akhir-akhir ini orang bisa langsung mendadak jadi artis berkat video yang di upload ke Internet, Anda mungkin sudah tidak asing lagi dengan Youtube yang sampai saat ini sangat populer. Anda dapat memanfaatkan youtube dengan mencantumkan URL link blog Anda di video yang di Unggah.

  27. Website Groups
  28. Anda bisa memanfaatkan groups yang sudah tidak asing lagi yaitu Yahoo Groups, Google Groups, dll untuk membangun kelompok kecil anda dengan bahasan yang sesuai dengan blog Anda.

  29. File Downloads
  30. Anda bisa memposting download film gratis, mp3 populer, games, software, tutorial, dll dalam blog Anda dan cantumkan dalam file download itu URL blog Anda untuk dikunjungi.

  31. Tawarkan Javascript
  32. Bila anda mengerti dalam hal javascript, Anda dapat membuat javascript yang berguna untuk gadget di sidebar blog seperti javascript untuk recent post, recent comment, popular post, dll. Anda dapat mencantumkan link blog Anda dalam javascript yang Anda buat, tapi URL link blog Anda yang dicantumkan dalam javascript dengan tampilan yang bijak.

  33. Perdalam SEO
  34. Search Engine Optimization (SEO) penting untuk meningkatkan traffic kunjungan dari search engine, Anda bisa pelajari SEO tentang Meta Title, Meta Description, Meta Keyword, dll.

  35. Manfaatkan media yang ada
  36. Media lain yang bisa Anda manfaatkan itu sangat banyak sekali diantaranya: Facebook, youtube, friendster, group, milis, mail, chat, messenger, iklanbaris, iklan banner, download e-book/mp3/video/dsb, atau bisa dengan memanfaatkan media offline.

  37. Perbanyak artikel dan sebar link URL
  38. Ada banyak sumber yang mengatakan bahwa semakin banyak artikel/posting di blog/web Anda, maka dimungkinkan akan semakin banyak pula pembaca/pengunjungnya. Namun akan lebih maksimal bila ditambah dengan gencar dalam penyebaran link URL-nya.

  39. Be creative mind
  40. Tips terakhir itu tergantung dengan kreatifitas imajinasi pikiran Anda dalam menjaring pengunjung di Internet untuk mendapat banyak pembaca/pengunjung ke dalam blog/web Anda. So, Be Creative!!

Bagaimana menurut Anda???

Sumber : http://www.ukafahrurosid.com/2009/03/tips-agar-blog-banyak-pengunjung.html

Tips Promosi Blog

Setelah anda punya blog tapi masih sepi dengan pengunjung rasanya juga ndak pas kan, sudah capek capek nulis tapi ternyata ndak ada yang baca ya mending nulis saja di buku diary terus di pasang gembok kayak abg ituh :)
Nah kali ini saya hanya sekedar bagi bagi tips promosi blog ke beberapa situs search engine, tentu saja bertujuan untuk memancing orang lain mampir ke blog sampean. Selain rajin blogwalking dan meninggalkan komentar di blog blog yang anda kunjungi, ada baiknya juga anda bantu mempromosikan blog anda sendiri dengan menggunakan layanan web submission atau directory gratis. Selain menggunakan layanan web submission anda juga bisa menggunakan iklan baris, tapi yang ini etis ndak sih ? tapi sebelum ada undang undang patut dicoba.
Sedangkan link berikut adalah layanan web submission yang saya gunakan untuk mempromosikan beberapa blog saya, dan enakknya sekali mendaftarkan blog kita sudah otomatis masuk ke beberapa web search engine.
  • http://www.Addme.com
  • http://blog-indonesia.com
  • http://www.sitelevel.com
  • http://www.jayde.com
  • http://www.fybersearch.com/
Setelah blog kita terdaftar di web submission tersebut, maka blog kita akan dimasukkan ke berbagai index Search Engine seperti Google.com, Yahoo.com, dan Msn.com. Nah setelah blog kita laris manis, maka saatnya memikirkan bagaimana supaya  bisa menghasilkan uang dari blog tesebut :) , itung itung buat ganti biaya ngenet sama biaya domain hosting.

Pasang link dibayar mau ? |
Dapatkan 1000 backlinks dg gratis

Peluncuran New Ipad Apple di Indonesia

New Ipad, Produk tablet unggulan dari Apple, diluncurkan secara resmi di Indonesia pada hari ini, Jum'at, 29 Juni 2012.
Sejumlah fitur unggulan diusung oleh iPad generasi ketiga ini diantaranya layar berteknologi Retina display dengan resolusi 2048x1536 pixel, kamera 5MP yang mampu merekam video 1080p pada 30fps dengan fitur stabilizer, dan chip grafis berteknologi quad-core. 
New iPad tersedia di gerai-gerai iBox mulai hari ini dengan warna putih dan hitam dan dalam dua tipe utama, yaitu Wi-Fi + Cellular dan Wi-Fi. Pada tipe Wi-Fi + Cellular ditanamkan teknologi wireless data LTE. Anda juga bisa memilih kapasitas yang diinginkan: 16GB, 32GB, atau 64GB. 
Promo menarik dari iBox di hari pertama peluncuran ini adalah program cicilan 0% sampai 12 bulan dan sejumlah potongan harga menarik untuk pembelian aksesoris new iPad. Selain itu setiap iPad dan Mac yang dibeli di iBox bergaransi resmi Apple dan mendapatkan perlindungan asuransi iProtectZ yang melindungi iPad Anda dari kerusakan yang tidak disengaja seperti tersiram, terjatuh, terbakar, ataupun bencana alam selama 12 bulan sejak tanggal pembelian. iProtectZ adalah program kerja sama ekslusif antara iBox Apple Premium Reseller dengan Zurich Insurance dan hanya tersedia di iBox. 
Anda bisa mendapatkan New iPad di semua gerai iBox pada lokasi berikut ini:
Plaza Indonesia eX
1st Floor #EX15, 16
Tel. (021) 314 9578 
Central Park Mall
Lower Ground #L-146
Tel. (021) 5698 5095 
Pondok Indah Mal 1
1st Floor #118A
Tel. (021) 750 6768
Grand Indonesia
East Mall 3rd Floor #09
Tel. (021) 2358 0988/89 
Cilandak Town Square
Ground Floor #043
Tel. (021) 7592 0311/12
Summarecon Mall Serpong
Ground Floor #212
Tel. (021) 5420 5211 
Ratu Plaza
1st Floor #8
Tel. (021) 572 4778 
Menteng Central
1st Floor #106 - 109
Tel. (021) 390 0220
Plaza Indonesia Extension
4th Floor #E24, E25i
Tel. (021) 316 0884
Senayan City
4th Floor #29
Tel. (021)7278 1695/96
Mall Kelapa Gading 3
Ground Floor # 40
Tel. (021) 4585 3581 
Gandaria City
1st Floor #189
Tel. (021) 2905 2896 
Hayo silahkan mengante bagi anda yang ingin membeli New Ipad
T

UNESCO menetapkan Subak Bali Jadi warisan dunia

Siapapun pasti mengakui bahwa bali merupakan tujuan wisata dunia. Dan saat ini lengkap sudah dengan diperolehnya pengakuan persawahan Bali yang hijau subur dan memukau wisatawan jadi warisan budaya Dunia yang dikukuhkan oleh UNESCO. 
Pada sidang UNESCO ke-36 yang diselenggarakan di St Peterburg pada Jumat 29 Juni 2012 pukul 17.30 waktu setempat, badan organisasi ini mengetukkan palu dan mengesahkan Subak Bali sebagai warisan dunia bidang Cultural Landscape.
Indonesia telah melakukan perjuangan panjang selama 12 tahun untuk mengenalkan Subak pada organisasi dunia ini. Disamping itu, para wisatawan asing pun sudah mengakui Subak berkontribusi dalam indahnya persawahan di Bali.
Bupati Gianyar dan Badung yang hadir dalam perhelatan itu tampak gembira dan bertepuk tangan bersama 1000-an peserta sidang. Hadir juga dalam sidang, Dubes RI untuk Rusia Djauhari Oratmangun.
Bilamana anda nanti berlibur ke bali, maka mampirlah ke Ubud dan Badung untuk menikmati hijaunya persawahan nan indah disana. Bila UNESCO saja sudah mengakuinya, lalu bagaimana dengan kita sekalian ini?

Kota Rio de Janeiro Brazil sebagai situs warisan dunia

Kota Rio de Janeiro Brazil telah di tetapkan oleh UNESCO sebagai situs warisan dunia. Kiranya tak salah ketetapan dari badan dunia ini, karena di kota Rio de Janeiro anda akan mendapatkan Alam yang masih terjaga dalam kehidupan metropolis yang tercipta di sini, dua faktor inilah yang menjadi pertimbangan utama gelar bergengsi dari UNESCO tersebut.
Seperti dilansir oleh News.com, Rio de Janeiro memiliki area terbuka yang menghadap ke laut. Pantai cantik dengan pasir putih dan mentari khas daerah tropis jadi magnet bagi para turis. Selain itu, Taman Nasional Tijuca jadi area hutan terbesar di dunia yang berada di sekitar hiruk pikuk kota juga jadi hal yang menarik.
Kota ini juga memiliki patung Yesus paling terkenal, dan disamping itu kota ini juga menjadi pusat inspirasi banyak kalangan seperti pemusik, metropolis dan juga pecinta alam. Beberapa tempat menjadi pendukung kuat pemilihan ini. Salah satu landmark kuat di sini adalah patung Yesus yang berjudul "Christ the Redeemer" atau Kristus Sang Penembus. Patung yang berdiri di ujung Gunung Corcovado menjadi daya tarik terkuat kota yang pernah jadi ibukota Brazil ini.
Jardim Botanico atau Kebun Raya Rio de Janeiro jadi pertimbangan selanjutnya dalam pengangkatan kota ini sebagai situs warisan dunia. Kebun raya cantik yang dibangun oleh Portugis pada tahun 1808 ini memiliki lebih dari 6.500 spesies flora, beberapa di antaranya sudah terancam punah.
Pantai Copacabana di Rio yang berpasir putih dan berbukit granit kerap membuat orang berdecak kagum. Pantai ini jadi pertimbangan selanjutnya mengapa Rio de Janeiro masuk dalam daftar situs warisan dunia dalam kategori campuran. Perpaduan alam dan bangunan yang ada di kota inilah yang membuatnya masuk dalam kategori situs warisan campuran.

Alifstone Park - Taman Batu Jaman Megalitik terindah di Indonesia

Alif Stone Park
Alif stone Park - Tak bisa dipungkiri bahwa Indonesia memiliki taman nasional dan taman laut yang sudah terkenal hingga mancanegara. Namun siapa sangka ternyata indonesia juga memiliki taman batu yang sangat indah bernama Alifstone Park, terletak di Kepulauan Riau dan beratasan langsung dengan Malaysia.
Alif Stone Park merupakan taman berbatu yang terletak di tepi pantai Desa Sepempang, Kecamatan Bunguran Timur, Kabupaten Natuna, Provinsi Kepulauan Riau. Taman seluas tiga hektare itu menyimpan ribuan bongkah batu Megalitith, berpadu dengan keindahan dan kejernihan pantai yang membuat pengunjung tak kan bisa melupakannya.
Bongkahan batu-batuan besar berwarna putih berjejer cantik di sini. Pasir pantai yang putih ditambah birunya langit cerah menjadikan latar belakang pemandangan yang sempurna. Tidak percaya? Datang saja sendiri!
Diantara ribuan bongkah batu tersebut ada sebongkah batu bergaris putih terletak paling tinggi dari batu lainnya menyerupai hurup alif dalam bahasa arab. Karena itulah maka penduduk setempat menamakannya Batu Alif, dan akhirnya terkenal dengan sebutan Alif Stone Park. Tempat itu merupakan keajaiban alam yang dimiliki Natuna karena memiliki batuan megalitith jaman purba.
Lokasi taman ini mudah dicapai karena hanya berjarak kurang dari tiga kilo meter dari Ibu Kota Natuna yakni Ranai atau sekitar 15 menit perjalanan. Lokasi juga mudah dicapai oleh seluruh alat transportasi karena infrastruktur jalannya cukup tersedia. Anda bisa bersantai sambil duduk duduk di bebatuan menikmati sunset, dan juga bisa dengan leluasa memilih lokasi bersantai di celah-celah batu untuk berendam. Air laut di lokasi sangat jernih sehingga bisa melihat ikan ikan kecil atau ikan hias berwarna warni serta terumbu karang dengan mata telanjang. 
Andapun juga bisa menapaki kawasan lain yang posisinya lebih menanjak, dimana terdapat batu raksasa megalitith seolah saling menyandar sehingga membentuk semacam lorong menyerupai goa. Di sisi bawahnya yang menjorok ke pantai ada bebatuan berukuran sedang terhampar memenuhi hampir seluruh celah permukaan pantai. Dari sinilah anda bisa leluasa menyaksikan momen menakjubkan yakni ketika matahari kembali ke peraduannya.

Mengenal Negara Pulau Maldives

Pulau Maldives
Pulau maldives menyimpan pesona terpendam, alam yang indah dengan laut yang sangat jernih dan biru. Pulau ini merupakan salah satu negara terkecil di dunia, terletak di Samudera India, di bawah Srilanka. Bila anda berencana menuju negara pulau ini, maka dari Singapore ada penerbangan ke Maldives setiap hari etd 08:30 dan eta 22:30 (waktu Maldives 2 jam lebih lambat dari Jakarta, dengan waktu terbang sekitar 4,5jam). 
Daerah ini dikenal sebagai negara berkembang dengan pertumbuhan ekonomi yang terus naik dari tahun ke tahun. Disamping itu maldives terkenal di antero honeymooners sebagai salah satu tempat honeymoon terbaik di dunia, dimana kita bisa melakukan perjalanan wisata alam, yang memang menjadi ciri khas dari negara ini.
Kebudayaan
Kepulauan Maldives terletak dan berada pada jalur perdagangan di perairan samudra Hindia. Kepulauan Maldives memiliki posisi yang sangat nyaman dan indah, para pendatang dari segala penjuru dunia sudah berkunjung saat kepulauan ini tercipta. Hal tersebut sedikit banyaknya berpengaruh kepada kebudayaan mereka baik itu penduduknya, bahasanya, kepercayaan, seni budaya serta kehidupan penduduk lokalnya.
Penduduk lokal Maldives mungkin berbeda antara satu kepulauan pesisir dengan pesisir yang lain, campuran antara Asia Selatan, Africa dan Arab. Bahasanya menggunakan bahasa Dhivehi, tetapi memiliki sedikit perbedaan dialek pada masing-masing wilayah.
Penduduk lokal Maldives juga memiliki suatu dasar kepercayaan antara agama dan budaya, agama Islam masih mendominasi , walaupun pengaruh dari nenek moyang mereka yang memiliki kepercayaan supranatural masih kental di lakukan oleh sebagian besar komunitas di kepulauan tersebut. Masih juga ada beberapa penduduk yang menganut tradisi dan kepercayaan yang mengarah ke agama Budha. 
Letak Geografis 
Setiap karang di perairan Maldives terdiri dari coral yang mengelilingi sebuah pantai, setiap pulau memiliki karang yang saling mengelilingi daerah mereka yang dihuni oleh bermacam-macam makhluk laut dan vibrant coral yang memproteksi kepulauan Maldives dari dari terjangan ombak besar. 
99 % dari kepulauan Maldives berada dan tercipta diatas lautan. Orang-orang yang tinggal dan hidup di kepualaun Maldives tersebar disekitar kepulauan yang dikelilingi karang , dihuni oleh sekitar 200 oang dimasing-masing kepulauan. Sekitar 90 pulau telah dibangun resort dan hampir semuanya tidak berpenghuni sebelumnya atau hanya digunakan sebagai tempat untuk bercocok tanam yang semata-mata hanya sebagai tempat mata pencaharian bagi kelangsungan hidup mereka.

Tuesday, July 3

Cara membuat Buku tamu melayang Dengan Light Effect jQuery

Cara membuat Buku tamu melayang Dengan Light Effect jQuery - Buku Tamu kali ini adalah buku melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya.
Untuk membuatnya sangat simple, kita tidak perlu mengutak-atik kode pada template kita, karena kalian tinggal memasangnya pada widget di Elemen Halaman. Untuk lebih jelasnya silahkan ikuti tahap-tahap pemasangannya dibawah ini:

Berikut Cara membuat Buku tamu melayang Dengan Light Effect jQuery :
1. Login Ke Blogger kalian
2. Pilih Rancangan ---> ELEMEN halaman
3. Tambah Gadget ---> Pilih HTML/Java Script
4. Simpan kode berikut dalam konten HTML/JavaScript .

<!-- Start Shoutbox light effect by Kiss -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var semahHeight = $(document).height();
var semahWidth = $(window).width();
//Set heigth and width to semah to fill up the whole screen
$('#semah').css({'width':semahWidth,'height':semahHeight});
//transition effect
$('#semah').fadeIn(1000);
$('#semah').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#semah').hide();
$('.window').hide();
});
//if semah is clicked
$('#semah').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script>
<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#semah {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#wadah .window {
position:fixed;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#wadah #kid53 {
background:url(http://i809.photobucket.com/albums/zz15/yuda03/REDGUESTBOOK.png) no-repeat 0 0 transparent;
width:272px;
height:460px;
padding:56px 0 20px 5px;
}
#tutupan {
padding:2px 0 0 0;
}
</style>
<ul><center> <a href="#kid53" name="modal"><img src="http://i809.photobucket.com/albums/zz15/yuda03/shoutboxtabRED.png" border="0" width="158" height="58" /></a> </center> </ul>
<div id="wadah">
<!-- Start Shoutbox -->
<div id="kid53" class="window">

Kode Buku Tamu Anda

<div id="tutupan"><input type="button" value="Close" class="close" />
</div></div><!-- End Shoutbox -->
<div id="semah"></div></div>
<!-- End of Shoutbox light effect by Kiss -->
</div> 

Keterangan : Ganti yang berwarna merah dengan kode Buku tamu Sobat

5. Jangan lupa disimpan

Monday, July 2

Cara Membuat/Memasang Menu Tab View di Blog

Menu Tab View Menu Tab View di Blog - Cara Membuat Menu Tab View di Blog - Menu Multi kolom.  Adakalanya kita pun dipusingkan dengan penempatan widget yang terlalu banyak, ingin membuat kesan tampilan apik dan indah, anmun malah berantakan. Untuk menyiasati hal ini diperlukan satu tempat widget namun bisa menyimpan banyak widget.
Penggunaan Menu Tab View di Blog ini sangatlah tepat dan bermanfaat terutama bagi kita yang ingin menghemat ruang untuk menampilkan banyak widget dalam blog kita. Desain yang menarik juga membuat tampilan blog kita terlihat apik dan menawan ini memungkinkan blog kita seolah profesional. Langkahnya pembuatannya sangatlah mudah, namun tetap saya anjurkan bila dalam oprek template ini sebaiknya kita jangan lupa untuk mendonloadnya terlebih dahulu, agar terhindar dari kesalahan fatal.
Langka yang harus sobat ikuti .
1. Masuk ke akun blogger kita masing-masing.
2. Klik Rancangan.
3. Klik edit HTML.
4. Klik Expand Template Widget.
5. Lalu cari kode berikut. ]]></b:skin> Letakan kode berikut di atasnya.
/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #0414FC; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
div.TabView div.Tabs a.Active {
background-color: #FC0C0C; /*warna background menu aktif*/
color: #FFFFFF;
}
div.TabView div.Tabs a:hover {
background-color: #0CFC0C; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

6. Cari kode berikut.]]></b:skin>
Letakan javascript berikut di bawahnya.
 <script src="http://evawangi.googlecode.com/files/tabview.js" type="text/javascript"/>
Sampai sini Save Template sobat, lalu :

7. Langkah Selanjutnya :
Klik menu rancangan.
Klik add gadget.
Pilih HTML/JavaScript.
Masukan kode berikut.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->
<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->
</div></div></form>
<script type="text/javascript"> tabview_initialize ('TabView'); </script>

8. Klik Save Gadget dan selesai, mudah khan ? Semoga bisa bermanfaat !

Sumber : http://evawangi.blogspot.com/2012/06/menu-tab-view-di-blog.html

Cara Membuat Gambar Berdampingan pada posting

Cara Membuat Gambar Berdampingan.Kadang kala bila kita membuat satu postingan memerlukan penempatan gambar yang berdampingan,bak itu dua baris ataupun lebih.Menbuat Gambar Berdampingan ini adalah cara mudah yang anda bisa tempatkan di postingan ataupun widget anda untuk kerluan iklan atau jenis lainnya. 

Shaka InghetS mencoba untuk sharing cara membuat sebuah gambar berdampingan ini di postingan blog atau  diwidget.Untuk tips ini saya kasih contoh gambar saja ya,nanti anda bisa menggantinya dengan kode scrift atau kode gambar anda sesuai kehendak.Berikut ini langkah-langkah cara membuat gambar bersebelahan di blog anda:

Langkah-langkah dan cara membuat 2 gambar atau widget berdampingan seperti dibawah ini:
Login ke Blog anda
Klik Rancangan
Masuk pada kolom Postingan seperti biasa anda posting.

<table><tr>
<td>Letakkan kode Gambar 1</td>
<td>Letakkan kode Gambar 2 </td>
</tr></table>

Gambar 1 Jeruk
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihg9maW7km3pokhHBPDavNx2n-JXQUKCWpR56ZgDgilBzAK_IBoobaj-D3VBthfHh3IwlfIusR8mK6JYlny8xohiVx31RIApuoS7axwE-zB0f9OR9KXFYalJBoXa4KwSN1ruO0Rpu937t2/s1600/Apel.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Apel" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihg9maW7km3pokhHBPDavNx2n-JXQUKCWpR56ZgDgilBzAK_IBoobaj-D3VBthfHh3IwlfIusR8mK6JYlny8xohiVx31RIApuoS7axwE-zB0f9OR9KXFYalJBoXa4KwSN1ruO0Rpu937t2/s200/Apel.jpg" width="198" /></a>
Apel


Gambar 2 Jeruk
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaoCGEqW2ap6pAXmjQ9ePEbSx0oH0bGuOufDWvxaF_IMhljUkBSUKDFuLju7F4yHhTMp8ENFqVz5hNoFw41w7wEJHU0FzHm4bYy9TVFtHV2iJ9X-D54-z7aHWlMCw1q1sxe0pt6fyn9dB/s1600/Jeruk.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Jeruk" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaoCGEqW2ap6pAXmjQ9ePEbSx0oH0bGuOufDWvxaF_IMhljUkBSUKDFuLju7F4yHhTMp8ENFqVz5hNoFw41w7wEJHU0FzHm4bYy9TVFtHV2iJ9X-D54-z7aHWlMCw1q1sxe0pt6fyn9dB/s200/Jeruk.jpg" width="185" /></a>
Jeruk

Bila di satukan kodenya akan tampak seprti dibawah ini:

<table><tr>
<td>Gambar 1 Jeruk
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihg9maW7km3pokhHBPDavNx2n-JXQUKCWpR56ZgDgilBzAK_IBoobaj-D3VBthfHh3IwlfIusR8mK6JYlny8xohiVx31RIApuoS7axwE-zB0f9OR9KXFYalJBoXa4KwSN1ruO0Rpu937t2/s1600/Apel.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Apel" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihg9maW7km3pokhHBPDavNx2n-JXQUKCWpR56ZgDgilBzAK_IBoobaj-D3VBthfHh3IwlfIusR8mK6JYlny8xohiVx31RIApuoS7axwE-zB0f9OR9KXFYalJBoXa4KwSN1ruO0Rpu937t2/s200/Apel.jpg" width="198" /></a>
</td>
<td>
Gambar 2 Jeruk
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaoCGEqW2ap6pAXmjQ9ePEbSx0oH0bGuOufDWvxaF_IMhljUkBSUKDFuLju7F4yHhTMp8ENFqVz5hNoFw41w7wEJHU0FzHm4bYy9TVFtHV2iJ9X-D54-z7aHWlMCw1q1sxe0pt6fyn9dB/s1600/Jeruk.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="Jeruk" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnaoCGEqW2ap6pAXmjQ9ePEbSx0oH0bGuOufDWvxaF_IMhljUkBSUKDFuLju7F4yHhTMp8ENFqVz5hNoFw41w7wEJHU0FzHm4bYy9TVFtHV2iJ9X-D54-z7aHWlMCw1q1sxe0pt6fyn9dB/s200/Jeruk.jpg" width="185" /></a>
</td>
</tr></table>

Nanti Hasinya Akan tampak seperti Gambar dibawah ini :
Gambar 1 Jeruk
Apel

Gambar 2 Jeruk
Jeruk
Catatan:
 Letakkan kode Gambar  1 dan kode Gambar 2 yang anda miliki.
 Lalu Terbitkan Entri dan Lihat hasilnya,semoga bermanfaat untuk anda,selamat berkarya.

Cara Membuat Menu Horizontal Drop Down Dengan Animasi

Cara Membuat Menu Drop Down Dengan Animasi - Apakah kamu mau mempunyai Menu Drop Down yang cantik, jika mau, saya akan memberitahu anda bagaimana Cara Membuat Menu Horizontal Drop Down Dengan Animasi, dengan bantuan CSS dan jQuery kita bisa membuat menu drop down ini dengan animasi, tapi untuk membuka menu drop down nya klik tanda panah yang ada disebelah kata TOP, Atau Lifestyle maka menu nya akan langsung terbuka. Baiklah langsung saja cara membuat nya.

LIHAT DEMO

1. Login ke Blog kamu.
2. Pilih Rancangan > Pilih EDIT HTML.
3. Cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat di atas kode ]]></b:skin>
#menu {
background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:980px;
padding:0;
}
#menu li {
background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:10px;
background:url(https://lh3.googleusercontent.com/-gFAQMKL4pgM/TwRCDsvg6VI/AAAAAAAAUWQ/9d5MpcUv5LI/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://lh6.googleusercontent.com/-z4RWmllD834/TwRCBkfDDxI/AAAAAAAAUV4/x7Zb2x3khas/s1600/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(https://lh6.googleusercontent.com/-YlKLpa3YYjQ/TwRCGYl8QYI/AAAAAAAAUWk/BXxZS25kbqs/s1600/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(https://lh6.googleusercontent.com/-0ZqyXhOjKwU/TwRCEUrEpUI/AAAAAAAAUWg/4Su-OLYXnQI/s1600/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}
Jika lebar nya tidak sesuai dengan Blog anda, anda boleh ubah kode yang berwarna biru dari 980px menjadi 1000px atau jika terlalu besar anda boleh memperkecil lebar nya. Terserah anda saja.

4. Selanjutnya Cari kode </head> setelah ketemu letakan kode dibawah ini tepat di atas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>
5. Simpan Template nya.
6. Cari kode yang mirip dengan dibawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Blazer Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
Kode datas merepukan kode bagian Header, takut setiap blog berbeda, coba cari saja yang ada kata (Header) setelah ketemu letakan kode di bawah ini tepat di bawah kode diatas yang nomor 6. Intinya cari kode bagian header anda supaya lebih mudah, apa nama judul blog anda yang di header misal judul nya Demo Blazer Blog, Cari saja kata Demo Blazer Blog.
<ul id='menu'>
<li><a href='alamat blog kamu'>Home</a></li>
<li><a href='#'>Top</a>
<ul class='submenu'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Development</a></li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
</li>
<li><a href='#'>Lifestyle</a>
<ul class='submenu'>
<li><a href='#'>Food</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Travelling</a></li>
</ul>
</li>
<li><a href='#'>Entertainment</a>
<ul class='submenu'>
<li><a href='#'>Celebs</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>News</a>
<ul class='submenu'>
<li><a href='#'>Nasional</a></li>
<li><a href='#'>Internasional</a></li>
<li><a href='#'>Indonesiaku</a></li>
</ul>
</li>
<li><a href='#'>Sports</a>
<ul class='submenu'>
<li><a href='#'>Sepakbola</a></li>
<li><a href='#'>Basket</a></li>
<li><a href='#'>MotoGP</a></li>
</ul>
</li>
<li><a href='#'>Download</a>
<ul class='submenu'>
<li><a href='#'>Mp3</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>Technology</a>
<ul class='submenu'>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#'>Handphone</a></li>
</ul>
</li>
<li><a href='#'>Blogger</a>
<ul class='submenu'>
<li><a href='#'>Tips Blog</a></li>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
</ul>
Sehingga susunan nya kayak gambar dibawah ini.

Ganti kata-kata yang dicetak tebal dengan kata-kata lainnya.
Ganti tanda # dengan URL yang dituju.
Simpan dan lihat hasilnya.

Perhatian :
"Kenapa supaya mudah ga dipilih Add Gadget HTML Java Script, entah kenapa nantinya ga bisa di buka Submenu nya, jadi supaya bisa di buka letakan saja secara langsung di menu EDIT HTML di bagian bawah kode bagian HEADER BLOG anda"

Jika anda menemukan masalah alangkah baiknya meninggalkan pesan di kotak komentar, dan kami pasti akan menjawab nya.
Sumber : http://blazerracing.blogspot.com/2012/05/cara-membuat-menu-horizontal-drop-down_14.html

Cara Memasang Menu Horizontal Kwicks JQuery Slide

Disini sya mau berbagi kepada sahabat blogger sekalian tentang Cara Membuat Menu Horizontal Kwicks JQuery Slide. Contoh nya bisa dilihat seperti yang di bawah ini.

Langkah 1
Letakkan Kode CSS dibawah ini Tepat diatasnya kode ]]></b:skin>


.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
Langkah 2
Kemudian Masukkan dan letakkan kode JQuery dibawah ini tepat dibawahnya kode ]]></b:skin>

<script class='jsbin' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'>
</script>
<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.kwicks&#39;).kwicks({
duration: 500,
max: 170,
spacing: 0
});
});
</script>


Langkah 3
Simpan perubahan template anda kalau sudah proses pemasangan Kode diatas selesai

Langkah 4
Masuk ke Menu Design atau Rancangan. Setelah itu Tambahkan Gadget HTML/JavaScript, Lalu masukkan kode dibawah ini.


<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://lora-malunk.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://lora-malunk.blogspot.com/' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://lora-malunk.blogspot.com/' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://lora-malunk.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>

Langkah 5
Simpan Template dan lihat hasilnya. Semoga bermanfaat. Sukses selalu.

Sunday, July 1

Cara mudah memasang Iklan diatas postingan



Tutorial blog kali ini saya akan jelaskan bagaimana cara memasang Iklan PPC(Pay Per Click) pada blog blogspot. Dan cara yang bagus meletakan Iklan PPC, seperti Google Adsense, Adsense Camp, Kumpul blogger atau yang lain adalah diatas, ditengah, dan dibawah postingan artikel. Sebab potensi iklan diklik pengunjung semakin besar.
Dan kali ini saya akan berikan cara pasang iklan yang berada diatas postingan. Silahkan ikuti langkah-langkah berikut ini : 

Tapi sebelum kita menyisipkan kode atau script iklan pada template, kode atau script iklan harus di PARSE DISINI terlebih dahulu. Baru ke langkah berikutnya :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML. 







4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Jangan lupa Klik tombol "Expand Widget Templates"







6. Cari kode yang mirip dengan kode ini :  
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

7. Letakkan kode atau script iklan yang sudah di parse tadi seperti kode dibawah ini :
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p align="center">
 DISINI LETAK KODE / SCRIPT IKLAN
</p>
 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

8. Simpan Template
Lihat hasilnya iklan langsung terpasang. Selamat mencoba dan semoga bermanfaat.

Advertisements