Related Post Widget Untuk Blogger (Keren Abis!)

UPdate! Trik Membuat Related Post Widget Untuk Blogger (Keren Abis!),Sudah Direvisi! Dijamin Berhasil 100%

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Jika related post widget untuk blogger yang satu ini masih valid,contohnya bisa sobat lihat di SINI.
Tapi sebelumnya memang sobat diharuskan membuat label terlebih dahulu,caranya sobat bisa baca di SINI.

Setelah label telah diciptakan,dan pastikan rss sobat valid(available rss),seperti rss pelajaran blog,bisa sobat klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.

1.Related Post Widget for Blogger dengan Javascript

Teknik ini menggunakan javascript dari http://theblogtemplates.com/scripts/Related_posts_hack.js,lihat sumbernya.
Jika javascript tersebut masih valid alias tersedia,maka widget ini akan bekerja dengan baik.

Contoh gambarnya sobat bisa lihat dibawah ini:

Lihat Gambar Besar

Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

• Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.
  
  
  Gb.1
  
  
• Selanjutnya pilih tab Edit Html (Gb.2).
  
  
  Gb.2
  
  
• Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).
  
  
  Gb.3

Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js' type='text/javascript'/>

Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Setelah itu simpan,selesai.

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)

Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:


Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?

Read more > Related Post Widget Untuk Blogger (Keren Abis!)

Membuat Menu Navigasi Horizontal dengan Sub Menu Navigasi Vertikal

Mari Belajar Membuat Menu Navigasi Dengan Sub Menu Mumpung mood lagi bagus,mumpung doku lagi tebel dan mumpung blog lagi sepi,saya mencoba untuk memposting kembali kaitannya belajar menghias blog. Beberapa minggu lalu saya sudah bagikan dari informasi yang saya dapat dari dunia maya,bagaimana membuat menu navigasi css di blogger. Bagi yang belom membaca,silakan langsung klik di sini. Nah,dari email sahabat yang saya terima,menanyakan bagaimana sih membuat menu navigasi horisontal / horizontal dengan submenu / sub menu navigasi vertikel seperti pada blog ini? Bukan suatu kesengajaan,menu navigasi dengan sub menu ini juga saya peroleh dari hasil surfing berbagai blog tutorial untuk blogspot. Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikkut ini. Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini. Gb.1 Selanjutnya pilih tab Edit Html (Gb.2). Gb.2 Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3). Gb.3 Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut. #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; 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 { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; 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; } Setelah itu Simpan Templates. Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan. Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5) Gb.4 Gb.5 Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut. <div class='menuhorisontal'> <ul id='nav'> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'></ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a> <ul> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </li> <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li> </ul> </div> Lalu simpan,selesai dan lihat hasilnya :D ** Untuk http://tulis_alamat_url_tujuan gantilah sesuai tujuan kamu kemana link akan diarahkan,misal; http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html dan tulisan Ganti Sesuai Keinginan gantilah denga keterangannya,misal dengan keterangan Membuat Navigasi Css dengan Sub Menu,maka dalam penulisannya; <li><a href='http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html'>Membuat Navigasi Css dengan Sub Menu</a> </li>

Read more > Membuat Menu Navigasi Horizontal dengan Sub Menu Navigasi Vertikal

Membuat Menu Navigasi CSS Di Element Baru

Membuat menu navigasi,adalah pelajaran yang paling banyak di pertanyakan oleh blogger-blogger pemula,termasuk saya beberapa hari yang lalu. Disini kita akan membahas tentang bagaimana membuat menu makanan 4 sehat 5 sempurna, Hus !! bukan,maksudnya Menu Navigasi dengan CSS. Tapi tidak seperti kebanyakan,biasanya mereka meletakkan di bawah kode <body>,tapi di sini kita akan meletakkan kodenya di Element HTML/Javascript yang baru. Apa itu CSS? kita akan bahas beberapa hari lagi,berhubung yang kita bahas kali ini Menu Navigasinya. Seperti apa sich contoh Menu Navigasi? Navigasi pada web / blog,sesuai dengan namanya,yaitu untuk menuntun jalan,supaya web / blog lebih mudah di telusuri. Contoh bentuk fisiknya seperti di bawah ini : Edit Aku Edit Aku Edit Aku Edit Aku Untuk membuatnya kali ini,kita minta bantuan CSS,apa itu CSS,kita bahas naa..ant : (,tadi sudah di omongiiin!!!! #$%#! . Cara membuatnya sederhana sekali,berhubung kita dengan bantuan CSS,kita tak perlu membuat tabel untuk Menu Navigasi seperti di atas. Tapi,yang paling surprise buat gw waktu aku jalan-jalan ke Blok-M,tiba-tiba aku ngliat yang belum pernah...OOee!!Ngemeng aja!ntar aja ceritanya ngapa !! Ok! berhubung ntar malah tambah bikin rusuh suasana,kan dapet dosa tuh!,kalo dosa,kita masuuk Nera...@#$@#$@!!gUBRAK! gw bilang ntar ya ntar ceritanyaaa!! Ya..ya.ntar aja ceritanya ya..Ok langsung ke topik,kita hari ini. Langkah pertama,pergi ke Dashboard (untuk blogspot),lalu pilih Tata Letak,selanjutnya pilih tab Edit HTML. Lalu cari kode ]]></b:skin>,jika sudah ketemu,tepat diatasnya,letakkan kode di bawah ini : #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; 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 { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; 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; } Jika kode sudah anda letakkan,lalu Simpan Template. Selanjutnya pilih Tab Tata Letak,dan buat Element Baru / Add New Widget,pilih HTML / Javascript. Lalu letakkan kode di bawah ini pada halaman HTML / Javascript yang baru saja anda pilih. <ul id='nav'> <li><a href='http:///'>Menu 1</a></li> <li><a href='http:///'>Menu 2</a></li> <li><a href='http:///'>Menu 3</a></li> <li><a href='http:///'>Menu 4</a></li> </ul> Jika kode sudah anda letakkan,lalu pilih Simpan,dan anda bisa langsung lihat hasilnya. Untuk http:/// ,anda isi dengan alamat URL yang akan di tuju,sedagkan untuk Menu 1,2,3,4 ,Untuk tulisan yang akan tampil,sedangkan jika ingin menambahkan satu kolom lagi,anda tinggal menulis satu baris lagi,baris yang mana? Copy aja salah satu kode : <li><a href='http:///'>Menu 4</a></li>,dan paste persis di bawahnya. Sekarang tinggal nglanjutin cerita di Blok-M tadi,jadi gini nich..@#$@#%$! Gubrak ! Baca Juga Yang Ini.. Menghilangkan Navbar Blog Disable Right Click Memasang Link pelajaran-blog.blogspot.com

Read more > Membuat Menu Navigasi CSS Di Element Baru

Hack Cara Mendapatkan atau Mengirimkan Status Update User / Orang Lain Lewat Email

Ingin Mendapatkan Update Status User Lain Langsung ke Email Kamu? Mas,tiap kali posting kok ngomongin Hack sih,emang pinter nghack ya? lalu Pujiantoro said:hahaha emang pinter gue,saking penternya ampe di hack berkali-kali,hihihi.. :( Sekali lagi ya,ini sebenarnya 'it's not seems look like guys!',hanya biar nyak pengunjungnya aja,hehehe.. Tapi jangan beranjak dulu sob,siapa tahu nanti kamu membutuhkan hal seperti ini. Misal,saya tidak ingin ketinggalan apa yang telah diupdate oleh Facebook milik pak Mario Teguh.Sedangkan saya ingin mengetahui setiap saat apa yang telah diupdates pak Mario Teguh dari jutaan teman saya dalam Facebook (jutaan teman? ngayal kalee! :D) Dan TERNYATA saya hanya memerlukan beberapa langkah cara untuk dapat melakukan itu,ingin tahu caranya ga sob? Langkah dan Cara Hack Mendapatkan atau Mengirimkan Status Update User / Orang Lain Lewat Email Yup! jalan satu-satunya saya akan mengirimkan setiap update statusnya pak Mario Teguh via email yang saya miliki. Saya menggunakan www.rssforward.com untuk melakukan trik ini,namun ini baru melihat dari sarananya ya. Cara mengetahui update status user lain dengan rss.forward.com ini sangat mudah sekali,ikuti ya sob! Pertama,kita harus menjadi friend atau menyukai dari target,misal saya ingin melihat setiap pak Mario Teguh melakukan update status dapat langsung terkirim ke email saya,maka saya menjadi member atau menyukai katakanlah menjadi fan dari Bp.Mario Teguh. Selanjutnya,kita buka rssforward.com. Setelah itu,kemali ke facebook pak Mario Teguh,dan klik gambar feed rss pada sudut sebelah kanan pada browser kamu,bisa lihat gambar dibawah ini: Nah,setelah itu akan tampil halam feed dari Facebook pak Mario Teguh,kamu copy url halaman pak Mario Teguh tersebut pada browser kamu,lihat gambar ya: Nah,tinggal sekarang kamu kunjungi situs www.rssforward.com,dan paste url yang baru saja kamu copy pada kolom Web Site / Url dari situs rssforward.com tersebut,lihat gambar lagi ya(jd kaya anak TK,hihihi): Nah,nanti akan tampil halaman seperti ini: Kamu tinggal klik tombol Subscribe,dan setiap status pak Mario Teguh atau pak Mario Teguh melakukan update status dan teman yang ingin kamu jadiin target dapat terikirim otomatis di email kamu. Selesai,dan semoga berhasil ya :D

Read more > Hack Cara Mendapatkan atau Mengirimkan Status Update User / Orang Lain Lewat Email