Trik Cara Membuat Cara Membuat Related Post Berkedip jQuery (Update)

Setelah beberapa hari kemarin kami saling sharing seputar belajar seo blogspot,kini saatnya kembali utak atik blog seputar tutorial jquery kembali.

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

CARA MEMBUAT SUB MENU PADA MENU UTAMA DI BLOGSPOT

Sub Menu

Salam luar biasa…

Sekarang banyak sekali informasi tentang cara menambah / membuat sub menu untuk menu utama di internet. Kita bisa dengan mudah mencari informasi tersebut hanya dengan mengetikkan kata tertentu sesuai maksud yang diinginkan pada salah satu mesin pencari (search engine) seperti google.com , maka akan tertera informasi yang kita inginkan.

Berdasarkan pengalaman saya, dari beberapa informasi yang kita maksud, terkadang kurang jelas cara atau langkah-langkah yang mesti dilakukan. Apalagi seperti saya yang masih awam dengan pengetahuan tentang blogger ini. 

Karena itu, saya akan membagi pengalaman saya tentang suatu informasi yaitu cara membuat sub menu pada menu utama di blogspot”.

Sebelumnya, saya sangat berterima kasih kepada Mas Ahmad Rifai (http://blog.ahmadrifai.net/2012/03/membuat-menu-serta-sub-menu-tanpa.html) walaupun kita belum saling mengenal satu sama lain.

Berikut ini langkah-langkah yang harus dilakukan :

1. Klik Menu Desain 

2. Pilih Menu Template lalu pilih menu Edit HTML 

3. Pilih/klik menu Lanjutkan

4. Pilih/klik menu Expand Template Widget

5. <div class='main-outer'> atau <div id='main-wrapper'> atau <div id='main'>

   Cari scrift berikut :

Agar lebih mudah, klik saja F3 pada keyboard lalu pilh salah satu scrift diatas. Berdasarkan pengalaman saya setelah membolak balik informasi di www.google.com maka yang cocok adalah :

div class='main-outer'>.

Bisa jadi beda dengan template yang lain…

Setelah dapat, copas scrift berikut tepat diatas scrift yang dicari tadi : 

<style>

/* -- Menu Horizontal + Sub Menu-- */

#cat-nav {background:#156994;margin:0 15px;padding:0;height:35px;}

#cat-nav a { color:#eee; text-decoration:none; text-shadow: #033148 0px 1px 0px;border-right:1px solid #156994;}

#cat-nav a:hover { color:#fff; }

#cat-nav li:hover { background:#000; }

#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:400; color:#fff; text-shadow:none;}

#cat-nav .nav-description { display:block; }

#cat-nav a:hover span { color:#fff; }

#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#0d5e88; }

#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:700; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}

#secnav li { float:left; width: auto; height:35px;}

#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}

#secnav li ul li  { height:30px; border-top:1px solid #fff; }

#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:400; color:#eee; }

#secnav li ul ul  { margin: -30px 0 0 180px; }

#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }

#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }

#secnav li:hover,#secnav li.hover  { position:static; }

#cat-nav #secnav {width:100%;margin:0 auto;}

</style>

<div id='cat-nav'>

<ul class='fl' id='secnav'>

<li><a href='#'>Beranda</a></li>

<li><a href='#'>Menu 1</a></li>

<li><a href='#'>Menu 2</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu2 a</a></li>

<li><a href='#'>Sub Menu2 b</a></li>

</ul>

</li>

<li><a href='#'>Menu3</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu3a</a></li>

<li><a href='#'>Sub Menu3b </a></li>

</ul>

</li>

<li><a href='#'>Menu4</a>

<ul id='sub-custom-nav'>

<li><a href='#'>Sub Menu4a</a></li>

<li><a href='#'>Sub Menu4b </a></li>

</ul>

</li>

<li><a href='#'>Menu5</a></li>

</ul>

</div>

PENJELASAN :

• Ganti tanda # (warna biru) dengan link/url yang anda inginkan. Bisa jadi link posting atau label (katagori) yang ada pada blog anda.
• Ganti Tulisan warna biru dengan menu dan sub menu yang anda inginkan.
• Setiap sub menu bisa ditambah atau dikurangkan sesuai keinginan. 

7. Setelah itu klik Pratinjau dulu untuk memastikan scrift sudah benar . Lalu simpanlah/save. Dan tutup edit HTML tersebut.

Saran : back up dulu template anda sebelum merubah/menambah scrift diatas, agar bisa dimanfaatkan kembali jika ada masalah dengan penambahan srcritf diatas.

8. Untuk menghilangkan tampilan tampilan dabel dengan Laman Utama, 
Maka ikutilah saran berikut :

• Masuk ke Menu Laman 
• Lalu pilih tampilan halaman dengan memilih "jangan tampilkan"
• Simpan setelan, maka laman utama akan tampil sendiri sesuai dengan scrift yang kita ketikkan tadi.

Blog sudah bisa dipublikasikan...

Semoga sharing yang saya buat ini bisa bermanfaat dan menambah khazanah pengetahuan kita semua.

Sumber

http://pandwalimamedan.blogspot.com

Trik Membuat Baner Iklan dengan Tombol (Anchor Link) Tutup / Close Button

Bismillah - hi kawan pakabar!? dah lama banget kita ga posting nih,ga ada waktu - job dari mas SpreiShop.Org dan FanspageId.Com aja sampai saat ini terlantarkan dan statusnya juga blm jelas,hehe.. maaf ya mas:D mungkin lain kali pent-),seperti pada screenshot gambar diatas gan,malam ini seperti janji beberapa hari yang lalu,Pelajaran Blog akan berbagi trik seputar membuat baner iklan popup dilengkapi dengan tombol tutup atau close button.

Namun tidak seperti 'trik membuat iklan popup jquery' seperti artikel yang terdahulu,kali ini widget yang akan kita ciptakan ini dalam posisi 'menetap' namun akan hilang saat kita klik close button-nya.
Yah,kurang lebih seperti iklan pada situs YouTube pada halaman awalnya namun hilang saat kita klik anchor link close-nya.

Untuk membuat menu dropdown

Untuk membuat menu dropdown,selain membuat situs lebih rapi,juga sambil belajar yuk!

Untuk kodenya copy paste kode di bawah ini :

---

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu><option value=0 selected>KATA YANG PERTAMA MUNCUL</option>
<option value="ISI ALAMAT YANG DI TUJU">ISI TEXT YANG INGIN DI TAMPILKAN</option>
</select></form>

---

Contoh penggunaan kode :

---

<form><select name="menu"
onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1
name=menu>
<option>Link</option>
<option value="http://www.youtube.com">Youtube</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.google.com">Google</option>
</select></form>


---

Yang hasilnya nanti akan seperti di bawah ini :

LinkYoutubeYahooGoogle

Sangat Mudah khan?
Selamat mencoba ya..!!

Menempatkan Vidio pada blog

Meskipun blogger sudah menyediakan upload untuk video,ga ada salahnya ya kita mencoba ngulik kode buat menempatkan sebuah video.
Hasilnya kurang lebih seperti di bawah ini,klik untuk memutar Video :

Jika anda ingin meletakkan video dari Youtube,anda hanya mengisi alamat/URL video tersebut,pada kode.Untuk kode,copy di bawah ini:

---

<object width="425" height="344"><embed src="http://www.youtube.com/v/sLLCAmr8vjs" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

---

Nah! Tulisan yang berwarna Hijau,gantilah dengan URL alamat video yang ingin anda tampilkan.
misal alamat pada browser video tersebut adalah:

---

http://www.youtube.com/watch?v=sLLCAmr8vjs

---

maka alamat URL dalam kode ganti menjadi:

---

http://www.youtube.com/v/sLLCAmr8vjs

---

Apabila anda malah pusing alias bingung,tinggal buka halaman Youtube,dan copy embed kode di sebelah kanan atas,dan paste kode tersebut kedalam halaman HTML anda.
Kenapa ga bilang dari Tadi!!!! !

Untuk ukuran,anda tentukan sendiri dengan mengatur width="246" height="171".
Jika ingin memasang video pribadi,tinggal membuat Account di Youtube dan Upload Video anda disana.

Trik Membuat Baner Iklan dengan Tombol x

Bismillah - hi kawan pakabar!? dah lama banget kita ga posting nih,ga ada waktu - job dari mas SpreiShop.Org dan FanspageId.Com aja sampai saat ini terlantarkan dan statusnya juga blm jelas,hehe.. maaf ya mas:D mungkin lain kali pent-),seperti pada screenshot gambar diatas gan,malam ini seperti janji beberapa hari yang lalu,Pelajaran Blog akan berbagi trik seputar membuat baner iklan popup dilengkapi dengan tombol tutup atau close button.

Cara Mudah Memasang Lagu / Musik / Streaming Mp3 di Blog

Akhirnya,hari ini saya dapat meluangkan waktu lagi buat ngeluarin unek-unek yang selalu menghantuiku (cyakellahhh..),bener sekali sob,jika beberapa waktu lalu sempet posting masalah membuat streaming mp3 di facebook kali ini cuman mau sharing bagaimana cara pasang atau memasang lagu,musik atau file mp3 dari komputer kamu supaya nanti setiap buka blog pengunjung langsung dapat mendengarkan file musik / lagu / mp3 [streaming] di blog kamu tanpa harus menekan tombol play.

aktivasi idm 6.xx

untuk aktivasi Internet download manager 6.xx silahkan download patch/crack pada link berikut ini:
http://myactivation.googlecode.com/files/Patch3.exe

windows 7 loader

Untuk mengaktifkan windows 7 agar genue atau asli silahkan download windows 7 loader disini http://myactivation.googlecode.com/files/Windows%20Loader%202.1_www.remo-xp.com.rar

Cara Menggunakan File Hosting Gratis Google Code

Beberapa hari lalu ada sahabat kami yang menanyakan bagaimana cara menggunakan google code file hosting gratis ini,nah sebagai bahan posting kali ini saya menggunakannya dengan salah satu manfaat dari file hosting gratis ini,yakni membuat link download untuk blogger

Namun selain dapat digunakan sebagai sarana untuk menempatkan sebuah file di komputer kamu yang ingin kamu share,Google Code juga mampu digunakan untuk fungsi javascript,php dan lain sejenisnya.Namun disini kita akan coba sharing bagaimana menggunakan file hosting gratis google code untuk membuat link download.