Tampilkan postingan dengan label blogger. Tampilkan semua postingan
Tampilkan postingan dengan label blogger. Tampilkan semua postingan

Senin, 11 Februari 2013

macam Widget keren utuk blog




Widget merupakan cara untuk menambahkan beberapa pernak-pernik dan keunikan ke blog Anda. Apakah Anda ingin menampilkan statistik pengunjung blog anda atau menampilkan visitor situs anda yang terhubung ke situs web Anda, Anda bisa melakukannya dengan widget.
Baru-baru ini saya mendapatkan situs yang berisi 50 Great widgets yang berguna untuk blog Anda dan ingin membagikannya untuk Anda. Sebagian besar dari widgets ini bekerja dengan baik untuk Blogger dan WordPress sehingga tidak masalah untuk platform blogging yang anda gunakan.
Melalui list widgets tersebut silahkan anda memilih dan memasang beberapa widget baru untuk menguji drive pada blog Anda. Saya sarankan tidak berlebihan menghiasi blog Anda dengan terlalu banyak pernak-pernik, karena akan mengurangi kegunaan dan fungsionalitas dari widget tersebut atau justru sebaliknya akan menimbulkan kekacauan diblog anda, sebuah blog dengan terlalu banyak widget hanya akan membingungkan dan menghalangi pandangan orang terhadap konten di situs Anda.
Berikut ini 50 more great widgets untuk blog anda :
  • MyBlogLog’s Recent Readers – Widget ini memperlihatkan avatar dari pengunjung blog Anda.Dengan kepopuleran widget ini manajemen MyBloglog mampu meyakinkan Yahoo untuk membeli sahamnya, anda harus mempunyai account yahoo untuk mendapatkan widget ini.
  • Mashable – Widget ini menyediakan semacam news reel (headline news) dalam element blogger yang memberikan cuplikan berita/postingan dari sosial networking. Ada pilihan warna yang bisa disesuaikan dengan layout blog Anda.
  • Flickr Flash Photo Stream Badge –Menampilkan photo-photo dari profil flickr dengan sentuhan flash. Untuk mendapatkan widget ini Anda memerlukan account yahoo.
  • Preview Anywhere – bagi pengguna blogger disebut snapshots untuk wordpress widget ini tersedia di pengaturan. Fungsinya untuk melihat preview link keluar dengan tampilan small popup ketika pengunjung mengarahkan mouse pada teks atau banner yang “mengandung” link.
  • Twitter Badge – Jika kehidupan Anda banyak hal-hal menarik serta ingin agar orang lain tahu kegiatan apa yang sedang anda lakukan setiap saat, anda bisa menampilkan cuplikan kalimat-kalimat pendek ‘satu paragraf misalnya’ Maka widget ini cocok untuk dipasang pada blog Anda.Widget ini akan menampilkan “tweet” terbaru Anda.
  • Digg News – Manampilkan Link terakhir yang masuk ke Digg (sebuah sosial bookmarking) dengan pilihan theme dan mudah untuk diatur sesuai dengan template blog Anda.
  • FEEDJIT – Menampilan real time data pengunjung blog secara langsung, yang bisa dipasang di sidebar blog anda.
  • LineBuzz – inline komentar untuk Blog Anda. Sangat support untuk blog dengan frekuensi tinggi diatas 900 mhz diskusi/komentar yang berkepanjangan.
  • Flixn – Jika laptop Anda terpasang webcam, maka widget ini bisa menampilkan/ memperlihatkan ekspresi Anda langsung melalui blog Anda .Jadi pengunjung blog tidak hanya membaca postingan Anda tapi bisa menyaksikan ‘konser’ Anda didepan monitor, mirip webcam yahoo.
  •  3Jam – Pengunjung blog dapat berinteraksi dengan Anda dengan mengirimkan SMS pada handphone Anda,tanpa mereka tahu nomor HP Anda.
  •  Jaxtr – Seperti halnya widget 3jam di atas, dengan widget Jaxtr ini, pengunjung blog bisa menghubungi HP Anda tanpa mereka tahu nomor HP Anda, nomor HP Anda dijamin kerahasiaannya.
  • LinkedInABox – Menampilkan profile Anda di LinkedIn. Dan widget ini sangat cocok untuk personal blog.
  • Box Widget – Dengan widget ini, memudahkan pengunjung blog Anda untuk mengupload file ke tempat penyimpanan online box.net melalui widget box.net pada blog Anda.
  • Price of gas – Menampilkan harga bahan bakar kendaraan bermotor secara online (US$), “sangat cocok” dipasang untuk blog yang membahas masalah traffic/traveling (caranya tidak perlu mendaftar hanya mengcopas script yang disediakan Gas-Cost.Net)
  • iBegin Weather Widget – Menampilkan informasi laporan cuaca di sidebar blog anda. Seperti widget Price of Gas, widget ini hanya cocok untuk blog yang memang membahas masalah yang sama.
  • ClockLink – Menampilkan jam dalam berbagai macam daerah waktu dengan sentuhan flash yang bagus.
  • Film Loops – Menampilkan kesimpulan film terakhir yang Anda tonton melalui account FilmLoops Anda.
  • Daily Painters – menampilkan lukisan-lukisan dari pelukis terkenal di dunia di blog anda.
  • WhoLinked – Memperlihatkan kepada pengunjung blog Anda situs-situs yang telah melink pada blog Anda,tidak perlu mengupdate karena WhoLinked ini otomatis mengupdate sendiri web/blog yang melink blog Anda.
  • Criteo AutoRoll – memperlihatkan link menuju blog-blog yang serupa dengan blog Anda.
  • Bitty Browser – Menampilkan mini web browser pada sidebar blog Anda.
  • Leafletter – Widget ini membuat mini website dan menyimpannya pada blog Anda.
  • WikiSeek – Menampilkan widget untuk pencarian pada Wikipedia.
  • FeedCount – Menampilkan jumlah pengunjung blog Anda melalui banner kecil dan widget ini berhubungan dengan account feedburner Anda.
  • Technorati Link Count – Menampilkan reaksi jumlah link yang menuju blog Anda dari salah satu directory blog terbesar dan terpopuler.
  • MyPageRank – Inilah cara lain untuk menunjukkan betapa hebat dan bermanfaatnya blog Anda dengan menampilkan Ranking Google atau Google PageRank (PR). Penilaian PR google dihitung berdasarkan rangking 1 sampai 10, semakin besar berarti blog anda semakin populer.
  • CheckPageRank – Pilihan lain untuk menampilkan PR blog Anda, namun kelebihannya widget ini menampilkan juga ranking Alexa anda.
  • BlinkxIt – Menampilkan banner kecil dibawah setiap postingan blog Anda, ketika banner BlikxIt itu di klik maka keluar mini popup seperti snapshot dan menampilkan video yang berhubungan dengan postingan blog Anda.
  • Skype button – Seperti widget yang menampilkan status online YM pada blog Anda, widget ini hampir sama cuma bedanya status online/offline pada accountskype Anda yang ditampilkan.
  • RockYou Horoscope – Widget ini menampilkan primbon/ramalan dan dirancang bagus didalam kotak penuh warna, Tidak menganjurkan/sebaiknya widget ini tidak dipasang pada blogger muslim.
  • del.icio.us Tagometer – Widget ini menampilkan berapa banyak pengguna del.icio.us membookmark blog Anda.
  • del.icio.us Linkrolls – Widget ini menampilkan bookmarks terakhir Anda dari del.icio.us.
  • Timelines – Perlu membuat timeline untuk blog Anda? Maka widget ini cukup mudah digunakan, hanya perlu memasukan RSS blog Anda lalu memasukkan ukuran lebar dan tingginya.
  • PollDaddy – PollDaddy memberikan Anda kemudahan membuat sebuah poling atau survey interaktif dengan theme yang sangat cantik dan menampilkannya dib log anda.
  • Vizu – Pilihan widget lain untuk membuat poling pada blog Anda, kelebihannya widget ini cocok dengan platform blog manapun.
  • AnswerTips – Menampilkan jawaban dari Answers.com untuk berbagai macam istilah yang terdapat pada blog Anda.
  • 37. pengunjung blog Anda untuk memasukan istilah yang tidak dimengerti dan memperoleh jawaban dari Answer.Com.
  • Now Playing – Jika Anda ingin sharing playlist musik yang sedang Anda dengarkan dan ingin agar pengunjung blog Anda juga mendengarkan,Signamp yang akan melakukan triknya bagaimana hal itu bisa terjadi.
  • BuzzBoost – Menampilkan headline dari RSS FeedBurner blog Anda, atau blog lainnya.
  • LibraryThing – memperlihatkan buku terakhir yang telah Anda baca.
  • Plaxo Address Book – Izinkan pengunjung setia Anda untuk mengakses buku tamu mereka langsung dari blog Anda.
  • AuctionAds – Widget yang menampilkan pelelangan barang dari eBay, dan memberi anda persentase dari harga yang dibayar jika suatu saat ada yang membeli barang.
  • aStore – Serupa dengan AuctionAds di atas, hanya saja widget ini datangnya dari Amazon. Buat ’toko online sederhana’ di blog anda, anda akan mendapatkan bonus jika sesorang membeli barang melalui toko online anda.
  •  Plazes – Widget ini menampilkan peta dimana posisi Anda berada sekarang.
  • Stockalicious – Perlihatkan portfolio Anda dengan widget ini, dan sharing dengan blogger lain. Biar semua orang tahu berapa banyak dana yang telah Anda keluarkan untuk ngeblog.
  • Yahoo! For Good – Widget ini untuk membuat ‘kotak amal’ dan akan didonasikan kepada yang berhak menerimanya.
  • Giftspace –Teman anda tidak pernah tahu apa yang akan dibelinya untuk hadiah ulang tahunmu? Nah melalui widget ini biarkan mereka tahu kado apa yang sebenarnya Anda inginkan.
  • MixMap – Melihat dimana pengunjung profile MySpace Anda dari sebuah Peta.
  • Google Map Widget – Menampilkan pencarian pada peta google dari blog Anda.
  • Google Video Search – Menampilkan form pencarian video dari video pilihan pada blog Anda.
  • Shoutbox – Fungsi shoutbox adalah untuk menampung pesan singkat teman atau para blogger yang tengah blogwalking.
  • This Day in History – Widget ini menampilkan cuplikan bahwa hari ini ada sejarah apa pada masa lalu.
  • Headline News – Seperti widget mashable, widget ini pun menampilkan cuplikan headline berita dari situs-situs di seluruh penjuru dunia.
  • Calendar – meskipun di platform wordpress widget calender sudah tersedia, namun widget ini masih bisa dipasang baik di wordpress maupun blogger.
  • 55. Counter Statistic – Bagi Anda yang ingin melihat jumlah pengunjung Anda sehari-hari, maka widget ini adalah salah satu yang menyediakan fasilitas tersebut.
  • 56. Histats.Com web counter – Widget ini memungkinkan Anda bisa melacak pengunjung datang dari mana saja, dan menghitung berapa jumlah pengunjung blog Anda sehari-hari, melihat IP Address pengunjung blog Anda dan lain-lain.
  • 57. Bravenet Horoscope – Seperti halnya widget RockYou Horoscope, bravenetpun menyediakan widget horoscope untuk blog Anda.
  • 58. Deal of The Day – Masih dari Amazon.com, merupakan widget paling baru yang direlease amazon.com. Yang menarik dari widget ini adalah diskon besar-besaran yang ditawarkan untuk pengunjung blog Anda.
Sebenarnya masih banyak lagi widget-widget untuk mempercantik blog anda yang betebaran di internet yang sesuai dengan template blog anda dan yang anda sukai, namun setidaknya artikel “50 more great widgets for your blog” ini membantu anda menemukan widget-widget yang anda inginkan.
Selamat mencoba, semoga bermanfaat bagi Blog anda…

Kamis, 25 Oktober 2012

Cara Membuat Recent Post Berjalan di Blog



Recent post atau dalam bahasa indonesianya posting terakhir atau artikel terkini adalah widget yang bisa anda pasang di blog dengan tujuan memberikan informasi tentang postingan atau artikel terkini.
Recent post biasanya menampilkan sejumlah judul artikel yang belum lama sobat posting dalam deretan ke bawah dan tak jarang juga ada yang bergerak ( animasi ) ke bawah. Contohnya sobat bisa lihat di sidebar blog ini.

Kali ini saya akan share bagaimana cara memasang recent post di blog. anda berminat? silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode berikut ke dalam konten.



<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});

</script>
<ul id="rp_plus_img"><script>
var numposts = 5;
var numchars = 0;

</script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
<small><a href="http://infhlaap.blogspot.com/2012/10/cara-membuat-recent-post-berjalan-di.html" target="_blank">klik disini untuk membuat ini</a></small>

4. save dan lihatlah hasilnya.

anda bisa merubah kode tersebut sesuai selera dan kreatifitas anda.
Semoga membantu 

Membuatcara membuat Effect Berputar dan Zoom otomatis di setiap posting

Nah,,,Postingan Saya kali ini membahas Cara Membuat Effect Berputar dan Zoom otomatis di setiap postingan.

DEMO


hahaha,, ingin membuatnya?
simak aja caranya di bawah ini:


  • Login ke Blogger Sobat 
  • Pilih Template lalu Pilih Edit HTML tekan Lanjutkan 
  • Kalu takut error silahkan di backup dulu template sobat 
  • Kemudian Centang Expand Template Widget 
  • Terus Cari Kode ]]></b:skin> (gunakan CTRL + f)
  • Tambahkan Kode Berilut Tepat diatsa kode ]]></b:skin> atau bisa di urutkan di .post img{ 

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}



  • save template
  • lihat hasilnya
nah sekarang langkah tutorial kita sudah selesai, anda bisa mengubah kode-kode diatas sesuai dengan kreatifitas dan selera anda.

Semoga Bermanfaat

Rabu, 24 Oktober 2012

Cara Membuat Widget Social Bookmark Homepage Blog

hallo, ingin membuat widget social bookmark dan jejaring sosial di blog anda?
nah, sekarang simak caranya,
caranya sangat mudah sekali, anda tinggal mengcopas kode yang ada di dalam kotak di bawah:



<div style="background:#ffffff;border:1px;"><a href="http://www.facebook.com/share.php?u=%20" title="Share on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcl7Oab7Z7gu4qPWvzJ2ETv7HAX9PtedG1fmcxY4DIVBOa3dVoqDN8XA66lEUMVM4AREW9-TX7H8xZN6b3s1P702vq-K20Iy9tvLSFg7FEXfWFt-w1t_ILAgpskhyphenhyphenhB_Sp5IIM8U7hYn4/s400/facebook_32.png" alt="Facebook" style="border:0px solid;" /></a>
<a href="http://twitter.com/home?status=I%20am%20currently%20on:%20%20" title="tweet it!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6jRN4D4uU4Q2RoooUPu3gwhyvdZ-d0UbCsqMrxs-vHcYiphesujHk2x1MceytfU2LVy2QpdKyYsf2WQI7mh08Dpym4K8HqsIa1d0pkQ5Aqef9xpDmWYrdaEaUPVNKpWKJFMUCK1q85Iw/s400/twitter_32.png" alt="Twitter" style="border:0px solid;" /></a>
<a title="Buzz This!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAggTsBZfOW-dloQ7VEV86BuAqtTUhaW43k2Yy8JoNQQPt7uEeHRBZgy4DYP725rOtzss23YynTRteLTTARyZRrGF1cI2OI7VyEacWkeSsCtt3s7aXF3xF45oeAvknFRaukBb7XdsbanY/s400/googlebuzz.png" alt="Google Buzz" style="border:0px solid;" /></a>
<a href="http://del.icio.us/post?url=%20http://bloguntuksemua.mywapblog.com%20&title=%20Blog%20Untuk%20%20Semua" title="Bookmark to Delicious"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhHlgaFOBcra_tHmD8RrGpprcKKAEpdrzK0F5SckkGG32drIQKzBPGNPtRKFOHGKSM06SLqLzLySJhuoJzZIWVeJvLVV9_3HXc19L_87qZxHNe3jY3jvNtxvtQc_6PxcC2vbEyKcQUn48/s400/delicious_32.png" alt="Delicious" style="border:0px solid;" /></a>
<a href="http://www.digg.com/post?url=%20http://bloguntuksemua.mywapblog.com%20&title=%20Blog%20Untuk%20%20Semua" title="Digg It!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP66THKLYZraM_ud7si8A_xYASVZiQm1fvxvRxjRXIIB97M_WUT1fnxQNxHKmOhhac5Gu3xhO9ZJ5m7qCcOQUk2luPyO2vqEOnPF9-IxPM6P0eCzhchwINUZSMmw7YC9uDPKe9mJmlYsc/s400/digg_32.png" alt="Digg" style="border:0px solid;" /></a>
<a href="http://www.stumbleupon.com/submit?url=%20http://bloguntuksemua.mywapblog.com%20&title=%20Blog%20Untuk%20%20Semua" title="Stumble it!"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIu_YgFf_Qa5OAQd3AGv3f5yXUFs5jfdTzXux9VzkpsidalVsSjwKN5sq2q0sgBaH2CA-7Mm3NrVJzvtCkHJiQaJXe4b2ZO9kj6V8sxlEU6fOb4JWmGMzr2X7aqBo7pdPQwZNSTjO-7bo/s400/stumbleupon_32.png" alt="Stumbleupon" style="border:0px solid;" /></a>
<div style="clear:both;height:0;"></div>
<a href="http://www.linkedin.com/shareArticle?mini=true&url=%20http://bloguntuksemua.mywapblog.com%20&title=%20Blog%20Untuk%20%20Semua" title="Share on Linkedin"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwOSLswACDkDCGKSGCHe7nS6Y4QaACOnBpxipCcQwo5KZsSCTa3BBIqteZ8Xw9s_ZBfjIz7EP-kntj5hRP5aeov9oLPt1D4EwNP1gVLjH2rLpx853IjGH-b9QTwtm1vWiQd_0aTCRB1EY/s400/linkedin_32.png" alt="Linkedin" style="border:0px solid;" /></a>
<a href="http://myweb2.search.yahoo.com/myresults/bookmarklet?u=http://bloguntuksemua.mywapblog.com%20&=%20Blog%20Untuk%20%20Semua" title="Bookmark to Yahoo! Bookmarks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho48t4DeIecVf4AiCbzMiECeCJmzNp7wJpjvKV6BQDSORiqPq4DLB5-mTtZn-EKnLyhHfEj2LITa27ZbDqtZLgKRW2RMQYWAdpTR6nZerPLb8nRWGwid0aG3y5GtsadEfhLKaWwqfxOXo/s400/yahoo_32.png" alt="Yahoo! Bookmarks" style="border:0px solid;" /></a>
<a href="http://www.google.com/bookmarks/mark?op=add&bkmk=%20http://bloguntuksemua.mywapblog.com%20/&title=%20Blog%20Untuk%20%20Semua" title="Bookmark to Google Bookmarks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jXNTFbEotrUYByfqKT4XIj6TBHpdDdBDSOndUm_cfCbL2uw5yccpm9kiMCVsAARzlAjNZkBsHwyboBlS6gr3MiQsGKixzRxL8avdorKfMZUkUlLyvOk0jsXzrVgi3fbE2EXhOJiJBmY/s400/google_32.png" alt="Google Bookmarks" style="border:0px solid;" /></a>
<a href="http://reddit.com/submit?url=%20http://bloguntuksemua.mywapblog.com%20/&title=%20Blog%20Untuk%20%20Semua" title="Reddit"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhcPJ3wTxBFHhpf6Co-CpL0AA2ydIUV0ZbDrVOwkuOr3QPnZRg6nL16iWf-8yGDfsoGsnZuQUJP7tNofZDpYpal6P76t0a1kHI5HHqODHE-JzzyOHkbelFXERFXqn_g_yIpsQTBeujh0M/s400/reddit_32.png" alt="Reddit" style="border:0px solid;" /></a>
<a href="http://www.mixx.com/submit?page_url=%20http://bloguntuksemua.mywapblog.com" title="Share on Mixx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNeQIWnmmPonj1Z2tNw72QyZrzwdDV82Fi75QnQgUcvdqJQ5gPg4QXPLxsXstPpdfpq0tDq56338dYG6YCXRfoS_ExcrHTSFgg2BCRAsGu7C2XQduVCZKKbbklN77GZtJ6VlsEaVhrdmU/s400/mixx_32.png" alt="Mixx" style="border:0px solid;" /></a>
<a href="http://technorati.com/faves?add=%20http://http://bloguntuksemua.mywapblog.com%20&title=%20Blog%20Untuk%20%20Semua" title="Fave this to Technorati"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY20EPPToVndB2yN7c3AFF3Jxrl13L1Nl-q45OIqSHuWbHp-4NeG3BAZzQG1FCceapDSr6URy0QQwx8FdqnujdBpWq4xkdyTXfAaVLMu9JdsXdgyxrqblwXbqgiv1p6tGTjlmmTAokqNI/s400/technorati_32.png" alt="Technorati" style="border:0px solid;" /></a></div>


nah sekarang ganti URL dan Blognya sesuai Selera anda! 
selamat mencoba

Senin, 22 Oktober 2012

Cara Mudah Membuat Menu Navigasi Dropdown pada Blog

Jadi buat kamu yang ingin punya menu navigasi dropdown, sekaranglah saatnya hahaa




Okelah, langsung saya beri tahu langkah-langkah untuk memasang menu navigasi dropdownya..




  • Login ke Blogger >> klik Tata Letak >> Edit HTML. 
  • Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap 
  • Cari Code :
  • ]]></b:skin> 
Copy paste code di bawah ini tepat di atasnya kode ]]></b:skin>

/* Navigasi Dropdown Menu */
      #navdropdownmenu{
      background:black; /*Warna Latar Belakang */
      width:100%;
      height:auto;
      margin:0;
      padding:0;
      }
      #navdropdownmenu ul{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
      }
      #navdropdownmenu li{
      list-style:none;
      float:left;
      }
      #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
      color:yellow; /* Warna Teks */
      display:block;
      padding:9px 10px 9px 10px;
      font-size: 12px; /* Ukuran Teks */
      font-family: verdana; /* Jenis font */
      text-decoration:none;
      }
      #navdropdownmenu li a:hover{
      background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
      color:black; /* Warna teks saat kursor mouse berada di atasnya */
      padding:9px 10px 9px 10px;
      }
      #navdropdownmenu li ul{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
      float:none;
      background:black; /* Warna latar belakang submenu */
      width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
      border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
      border-style:solid;
      border-color:#ffff66; /* Warna garis pinggir submenu */
      }
      #navdropdownmenu li ul li a:hover{
      background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
      color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
      }
      #navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
      z-index:10;
      position:absolute;
      height:auto;
      width:200px; /* Lebar submenu */
      left:auto;
      }
      .ngumpet{
      display:none;
      }
      .muncul{
      display:block;
      }
 


Selanjutnya cari kode </head>
copy kode dibawah ini tepat diatas kode </head>


<script>
      var auahgelap = &#39;&#39;;
      function petakumpet(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan == &#39;ngumpet&#39;) {
      if (auahgelap != &#39;&#39;) {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = &#39;ngumpet&#39;;
      }
      menu.className = &#39;muncul&#39;;
      auahgelap = id;
      } else {
      menu.className = &#39;ngumpet&#39;;
      }
      }
      function umpetpetak(id)
      {
      var menu = document.getElementById(id);
      var sangmantan = menu.className;
      if (sangmantan != &#39;ngumpet&#39;) {
      if (auahgelap == &#39;&#39;) {
      var terlalu = document.getElementById(auahgelap);
      terlalu.className = &#39;muncul&#39;;
      }
      menu.className = &#39;ngumpet&#39;;
      auahgelap = id;
      } else {
      menu.className = &#39;muncul&#39;;
      }
      }
      </script>

Cari kode yang mirip kode berikut.


<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
      </b:section>
      </div>

Dibawahnya, ketikkan kode berikut:




<div id='navdropdownmenu'>
      <ul id='navdropdownmenu'>
      <li><a href='#'>Home</a></li>
      <li onmouseout='petakumpet(&quot;submenu1&quot;)' onmouseover='umpetpetak(&quot;submenu1&quot;)'><a href='#'>Software PC</a>
      <div class='ngumpet' id='submenu1'>
      <ul>
      <li><a href='#'>Application</a></li>
      <li><a href='#'>Anti Virus</a></li>
      <li><a href='#'>Internet Browser</a></li>
      <li><a href='#'>Utility</a></li>
      <li><a href='#'>Themes</a></li>
      <li><a href='#'>Desktop</a></li>
      <li><a href='#'>Games</a></li>
      <li><a href='#'>Hack Tools</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet(&quot;submenu2&quot;)' onmouseover='umpetpetak(&quot;submenu2&quot;)'><a href='#'>Mobile Software</a>
      <div class='ngumpet' id='submenu2'>
      <ul>
      <li><a href='#'>Application</a></li>
      <li><a href='#'>Games</a></li>
      <li><a href='#'>Themes</a></li>
      <li><a href='#'>Anti Virus</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet(&quot;submenu3&quot;)' onmouseover='umpetpetak(&quot;submenu3&quot;)'><a href='#'>Tips And Tricks</a>
      <div class='ngumpet' id='submenu3'>
      <ul>
      <li><a href='#'>Blogger</a></li>
      <li><a href='#'>Tutorials</a></li>
      <li><a href='#'>Computers</a></li>
      </ul>
      </div>
      </li>
      <li onmouseout='petakumpet(&quot;submenu4&quot;)' onmouseover='umpetpetak(&quot;submenu4&quot;)'><a href='#'>Music</a>
      <div class='ngumpet' id='submenu4'>
      <ul>
      <li><a href='#'>Indo Hits</a></li>
      <li><a href='#'>Rock</a></li>
      </ul>
      </div>
      </li>
      <li><a href='#'>News Update</a></li>
      </ul>
      </div>


Keterangan:
* Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
* Anda bisa menambah atau mengurangi menu diatas.


Lalu klik >> Simpan Template (Di anjurkan untuk mempratinjau dulu sebelum menyimpan!)

Lihat Hasilnya.. Semoga Membantu..


NB: Apabila hasilnya tumpukan dengan menu navigasi bawaan template.. anda bisa menghapus menu navigasi bawaan template tsb..

Rabu, 17 Oktober 2012

Cara Membuat Related Post Bergambar

bagaimana cara membuat related post? nah, buruan deh baca artikelnya dibawah, good luck!!


Oke to the Point,Caranya cukup simpel Petama masukkan kode berikut tepat diatas kode </head>:



<!-- Cob22.Blogspot.Com Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
font-size
}

#related-posts h2{
font-size: 1.4em;
font-weight: bold;
color: black;
font-family: Georgia;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#E0F8E0;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic3ccwTDkK1w8ks3rQumwV89w3LkdrUl-J87Nb0LsUut0QsV7iz6BWp1vgtShe5vjoKQkVpxTsbs0qwbWdLkKQ7YdPeSGTCmasz6yoRqnNm5VpORi_7cpibiVhSMFxiAXGuXBcW6R0n1E/s400/noimage.png&quot;;
var maxresults=5;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;&quot;;
</script>
<script src='http://javascriptbtsnts.googlecode.com/files/btsnts-related-posts004.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Cob22.Blogspot.ComRelated Posts with thumbnails Scripts and Styles End-->



Next Step:Silahkan Centang Dulu Expand Widget Templates,Lalu Cari kode berikut <div class='post-header-line-1'/> Atau
<div class='post-body entry-content'>
Paste kode dibawah ini tepat di bawah kode tersebut:






<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>




<div id='related-posts'>
<h2>Baca Juga Artikel lainya dari Informasi Hlaap!!</h2>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.helperblogger.com/2012/01/related-posts-widget-with-thumbnail-for_22.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAPbHxzfVAeiFwuuLwYGBfpKkbNwvVBKJ_6MKuv4VvyBgRpOWsFC04_pG9KVtz2evTsJV8MqFSgo4ubK567fe_OgxZjKhVbwflpFiBFl2gnuW8ffQAuMCy_8C6sPO8NRvZvs1pLsZI4Z8/h120/hepler-blogger-related-posts.png' style='border: 0'/></a><a href='http://helperblogger.com/'><img alt='Blogger Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0L9vxkQBhJyoOaCkP3UejXJ4CCt14K_uosaANZ3M7aspHDjWqdZ7TK-PMyUgbTPolZAVUm65fc5myGuxowdE6-WAU6nI-TOnKr277qiU_r9ah1Cha9yrnqGTkMFVzWIVGazc9iQBeZOU/h120/helper-blogger-related-posts1.png' style='border: 0'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Semoga bermanfaat

Selasa, 16 Oktober 2012

Cara membuat SubMenu di Blogspot

hallo, kali ini saya akan membahas tentang submenu.
Membuat submenu bukanlah hal yang mudah tetapi setelah bertemu dengan postingan ini saya rasa hal ini akan terasa mudah dan tidak sedikitpun merasa sulit.
nah untuk mengetahui Cara Membuat SubMenu di Blogspot dapat anda ikuti langkah berikut :
1. log in dulu pada ID Blogspot kita
2. klik tata letak
3. pilih edit HTML
4. Copas kode berikut tepat diatas ]]></b:skin>





/* ----- NAVBAR MENU ----- */
#NavbarMenu {
width: 875px;
height: 35px;
background:#FF6600 url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
color: #ffffff
margin: 0 auto 0;
padding: 0;
font: bold 11px Arial, Tahoma, Verdana;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #ffffff;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#FF6600;
color: #ffffff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff url(http://i802.photobucket.com/albums/yy308/penerjemah/navbar-hitam.png) repeat-x top;
width: 150px;
color: #ffffff;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #FF6600;
color: #ffffff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}



5. cari kode berikut





<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Blog Title (Header)' type='Header'/>
</b:section>
</div>



6. jika langkah no. 5 sudah ketemu kemudian copas kode berikut dibawah kode no. 5




<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li><a href='#'>Menu-1</a>
<ul>
<li><a href='#'>SubMenu-1-1</a></li>
<li><a href='# '> SubMenu-1-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-2</a>
<ul>
<li><a href='#'>SubMenu-2-1</a></li>
<li><a href='#'> SubMenu-2-2</a></li>
</ul>
</li>
<li><a href='#'>Menu-3</a>
<ul>
<li><a href='#'>SubMenu-3-1</a></li>
<li><a href='# '> SubMenu-3-2</a></li>
<li><a href='#'> SubMenu-3-3</a></li>
</ul>
</li>
<li><a href='#'>Menu-4 </a></li>
</ul>
</div>
</div> <!-- end navbar -->



7. lalu di simpan
mudah bukan??
SELAMAT MENCOBA!!