Cara Membuat Related Post di Blogger Dengan Style CSS

Jika Anda ingin meningkatkan lalu lintas di blog Anda dan mengurangi tingkat bouncing blog bisa dengan menampilkan postingan yang terkait dibawah posting dengan thumbnail atau disebut juga Related Post. Misalnya jika pengunjung Anda selesai membaca artikel dan mereka tertarik dengan artikel yang terkait, ini akan menjadi nilai plus buat blog Anda dengan keterlibatan mereka dalam membaca postingan Anda lebih lama dan berada lebih lama di blog Anda sehingga hal ini berpengaruh pada mesin pencarian. Disini kita akan melalui dua tahap untuk membuat Related Post di blog Anda, untuk lebih jelasnya ikuti langkah di bawah ini :

Tambahkan LinkWithin Di Blogger Anda :

Masuk ke Halaman LInkWithin
Masukan beberapa informasi dan klik Get Widget!, lihat gambar dibawah ini :

Selanjutnya akan terbuka halaman baru dan klik pada Install widget pada pilihan no.1

Selanjutnya klik pada Edit Template dan ganti kode yang ada didalam kotak dengan kode di bawah ini :

<b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>

Sekarang klik tombol Menambah Widget dan otomatis tersimpan di blog Anda, masih di halaman Tata Letak dan drug/tarik LinkWithin di bawah post body.
Dan klik Simpan setelan.

Sampai disini Anda telah berhasil menambahkan Related Posts di blog Anda, namun hasilnya tampilannya masih sangat sederhana. Pada tahap kedua saya akan menambahkan style sehingga kita harus menambahkan beberapa kode CSS ke dalam template. Ikuti lankah selanjutnya...

Mengubah Style Related Posts LinkWithin :

Login ke Blogger Anda
Masuk ke halaman Template
Cadangkan/backup template sebelum Anda melakukan perubahan pada template
klik Edit HTML,
Setelah klik Edit HTML, tekan Ctrl+F dan cari kode : ]]></b:skin>

Setelah Anda menemukan kode yang di maksud di atas tambahkan kode di bawah ini tepat di atasnya

    /*---Related Posts ---*/
    #linkwithin_logolink_0 {
    display:none!important;
    }
    #lws_0 {
    clear: both!important;
    margin: 0 0 20px 0!important;
    }
    .linkwithin_outer {
    margin: 1px 0px !important;
    background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDskOZ9P_lMGkNiJthvAy6TWZFN3GCtKi-jhyD_SchGOWUWjOiat0BArJpol_MD2wTZ_OtxcoObAaTCHdd3sVltoMJsNY3-LTJfWceEhz7K4VDaYM37eJjnASWrngp6eKQrkIUPvgeCDob/w323-h306-p-o/mbt-related-posts.gif") repeat scroll rgb(42, 42, 42);
    height: 260px;
    width:590px!important;
    padding: 0px !important;
    box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
    border-radius: 5px 5px 5px 5px;
    }
    .linkwithin_inner {
    width:590px!important;
    }
    .linkwithin_text {
    margin: 0px !important;
    padding: 10px !important;
    font-family: "Droid Sans",Helvetica,Arial,sans-serif;
    font-size: 1.35em;
    color: rgb(255, 255, 255);
    font-weight: 700;
    line-height: 1.35em;
    text-transform: capitalize;
    background-color: rgb(18, 18, 18);
    border-bottom: 1px solid rgb(0, 0, 0);
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-image: -moz-linear-gradient(center top , rgb(36, 36, 36), rgb(18, 18, 18));
    }
    .linkwithin_posts a {
    border-right:0px!important;
    margin: 10px 0px 10px 20px !important;
    }
    .linkwithin_posts a:hover {
    border-right:0px!important;
    margin: 10px 0px 10px 20px !important; background:none!important;
    }
    #linkwithin_logo_0 {display:none;}
    .linkwithin_img_0 {
    border: 1px solid #666 !important;
    padding: 1px !important;
    width: 100px !important;
    height: 70px !important;
    margin-right: 20px !important;
    overflow: hidden;
    background:#666!important;
    }
    .linkwithin_img_0:hover {
    border: 1px solid #666!important;
    opacity:0.8;
    }
    .linkwithin_img_0 div {
    width: 100px !important;
    height: 70px !important;
    }
    .linkwithin_title {
    color: rgb(255, 255, 255) !important;
    font-size: 1.1em !important;
    display: block;
    padding: 0px 10px 0px 0px !important;
    font-weight: 700 !important;
    line-height: 1.45em !important;
    margin-top: 10px !important;
    font-family: "Droid Sans",Helvetica,Arial,sans-serif !important;
    text-decoration:none!important;
    width:120px!important;
    }
    .linkwithin_title:hover {
    text-decoration:underline!important;
    }

Langkah terakhir klik Simpan Template Selesai !

Akhirnya selesai juga dan pastinya Anda telah berhasil menambahkan Related Posts di blog Anda. Tapi jika ada dari Anda yang mendapatkan kesalahan dari mengikuti cara diatas silahkan tinggalkan komentar Anda dan dengan senang hati saya akan membantu.

Anda baru saja membaca artikel tentang - Cara Membuat Related Post di Blogger Dengan Style CSS . Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)