Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!

Ge-eR

Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Buat Widget Related Posts: Pancing Pengunjung Buka Lebih Banyak Posting

Posted by cah ndeso kluthuk

Widget Related Post bekerja berdasarkan label yang dibuat blogger saat posting, sehingga ketika sebuah label digunakan pada banyak posting maka "related posts" akan memuat semakin banyak daftar posting terkait. Hal seperti ini membuat sebuah widget related posts menjadi terasa "sangat pantas dan layak" karena dapat "menjadi salah satu sumber dibukanya lebih banyak posting oleh pengunjung". Jika banyak posting anda mempunyai kwalitas yang baik, dapat dipastikan salah satu atau beberapa link yang terdapat di boks related posts akan "di klik". Menggunakan widget related posts juga memberi nilai lebh sepanjang posting terkait yang ditampilkan tidak terlalu banyak karena akan semakin memudahkan pengunjung memilih posting.

Membuat widget related posts sebenarnya tidaklah sulit. Yang terutama diperlukan adalah ketelatenan untuk memasang dan menyimpan kode yang digunakan, terutama xHTML yang harus disimpan di bagian body diantara tag pembuka dan penutup body (<body> dan </body>). Jika anda menginginkan lebih banyak lagi posting dibaca pengunjung, silahkan ikuti panduan cara menggunakannya di bawah ini:

O..., ya ..., sebelum dilanjut silahkan buka demonya terlebih dahulu. Lihat di kolom posting bagian terbawah (di atas box komentar!



  1. Login ke Blogger
  2. Beberapa saat setelah login anda akan masuk di halaman "Dasbor (Dasboard)". Silahkan cari dan klik "Rancangan (Design)". Tunggu beberapa saat hingga halaman baru terbuka!
  3. Klik "Edit HTML".
  4. Lakukan "Backup Template" terlebih dahulu agar bila terjadi kesalahan template bisa dipulihkan kembali seperti sedia kala.
  5. Cari kode ]]></b:skin>
  6. Copy dan kode css berikut tepat di atas kode ]]></b:skin>.
    Kode CSS :
    #GRrelated-posts{
        padding:10px;
        display:block;
        clear:both;
        border-top:5px double #444;
        border-bottom:5px double #333;
        margin:15px 0;
}
h3.GRrelated-post{
        border-bottom:3px double #666;
        font-weight:bold;
        line-height: 1.2;
        margin:25px 15px 5px;
        padding:0 6px;
        text-transform:uppercase;
        font-size:14px;
}
#GRrelated-posts a:hover{
        text-decoration:none;
}
#GRrelated-posts ul{
        list-style-type:none;
        margin:10px 0;
        padding:0;
}
#GRrelated-posts li{
        background: url('https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png') no-repeat scroll 3px 50% transparent;
        display:block;
        list-style-type:none;
        padding:0 0 0 30px;
        line-height:20px;
        margin:0;
}
#GRrelated-posts li:hover{
        background-position:20px 50%;
        padding-left:35px;
}

]]></b:skin>
  7. Copy dan pastekan javascript berikut di bawah ]]></b:skin>
    Javascript :
    ]]></b:skin>

<script src='http://gubhugreyotprojects.googlecode.com/svn/widgets/GR_related-posts.js' type='text/javascript'></script>
  8. Klik "Simpan Template (Save Template)".
  9. Lanjutkan dengan klik "Expan Widget Template"
  10. Cari kode <div class='post-footer'>. Kode ini ada 2 (dua). Gunakan yang posisinya di atas. Sebagai tambahan imformasi, di atas kode tersebut terdapat kode </b:if>.
  11. Copy dan paste-kan xHTML berikut di antara </b:if> dan <div class='post-footer'>
    xHTML :
    </b:if>

<b:if cond='data:blog.pageType == "item"'>
   <h3 class='GRrelated-post'>Related Posts</h3>
      <div id='GRrelated-posts'>
         <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast != "true"'></b:if>
            <b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/></b:if>
         </b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
   var maxresults=10;
   removeRelatedDuplicates(); printRelatedLabels();
</script>
      </div>
</b:if>

<div class='post-footer'>

    Keterangan: pada beberapa template kode berbentuk spt ini:
    <p class='post-footer'>
  12. Klik "Simpan Template (Save Template)".
  13. Buka blog dan lihat hasilnya yang letaknya di atas kolom komentar atau di bawah posting.
  14. Seeee...le....saiiiiiiiii.....iiiii!!!!

Catatan/Keterangan :
  1. Box Related Posts akan terletak di bawah posting.
  2. Untuk merubah jumlah jumlah posting yang ditampilkan dlam widget related posts, rubah nila (angka) 10 yang terdapat di xHTML sesuai jumlah yang diinginkan.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


Posting » Ngahad    WAGE, Maret, 11, 2012

» Happy Blogging - gubhugreyot «

Labels: , , , ,
at 3/10/2012

13 komentar:

  1. jhoni Milala12 Maret 2012 pukul 04.25

    Galat saat mengurai XML, baris 1764, kolom 94: The reference to entity "callback" must end with the ';' delimiter.

    BalasHapus
  2. cah ndeso kluthuk12 Maret 2012 pukul 05.12

    Pro : JHONI MILALA

    Silahkan ulangi di xHTML. Ada sedikit kesalahan penulisan kode dan saat ini sudah direvisi!

    gubhugreyot

    BalasHapus
  3. Anonim17 Maret 2012 pukul 07.49

    tq y gan,,
    ane butuh bgt bimbingn dri gan nie,,al na ane msh pmula..

    salam kenal agil

    BalasHapus
  4. Baimzz22 Maret 2012 pukul 10.14

    Salam Pak,
    Bpk lalunya belajar basa HTML CSS Javascript & PHP di mana? sy mau belajar juga.

    BalasHapus
  5. Unknown26 Maret 2012 pukul 09.40

    Hitam ulu hadir merangin bangko .....

    BalasHapus
  6. Unknown26 Maret 2012 pukul 09.41

    Hitam ulu hadir merangin bangko .....

    BalasHapus
  7. Aldy28 Maret 2012 pukul 23.05

    gan, kok link demonya nipu sih?

    BalasHapus
  8. Anonim6 April 2012 pukul 03.00

    boleh nanya pak ???ketika saya mengklik special tutorial kan ada tuh kotak bertuliskan "klik disini : bla... bla.. bla... "

    itu menggunakan efek apa ????

    apakah ada tutorialnya ????

    BalasHapus
    Balasan
    1. cah ndeso kluthuk6 April 2012 pukul 06.19

      Pro : adam rivai
      Dapatkan tooltipnya di sini :
      http://gubhugreyot.blogspot.com/2010/10/membuat-javascript-jquery-zigzaglap.html

      Salam buat smua n thank's udah follow, jg tas kunjungan seXgus komen-nya. Smg tutorialnya bermanfaat bagi Xan smua!

      gubhugreyot

      Hapus
    2. Anonim7 April 2012 pukul 21.26

      trima kasih :D

      Hapus
  9. Anonim30 April 2012 pukul 06.03

    hatur nuhun gan....!!! ijin kopas ajj ye gan.,.,!!

    BalasHapus
  10. Ki Tani20 Juli 2012 pukul 21.25

    Terimakasih ini sangat membantu.

    BalasHapus
  11. Unknown22 Januari 2015 pukul 20.42

    Nice Info Gan
    Gampang juga cara'a abis liat tutornya disini

    Kunjungi Juga http://jellygamat-gold.net/

    BalasHapus

Langganan: Posting Komentar (Atom)
 
GR | Edited by | gubhug reyot