Langsung ke konten utama

Cara buat artikel terkait dengan thumbnail

Cara membuat Artikel terkait dengan Thumbnail

Fungsi memasang artikel terkait atau related post sangat penting bagi blogger, karena dengan adanya related post kita telah menunjukkan kepada pembaca untuk membaca artikel-artikel yang berhubungan dengan posting yang dibacanya,otomatis jika pembaca tertarik maka pembacapun akan berlama-lama di blog kita.


 Artikel terkait dengan Thumbnail

Sebelumnya saya telah tulis tentang cara membuat artikel terkait bergambar dengan linkwithin Nah,kali ini Infonetmu akan memberikan tips blog tentang cara membuat related post dengan gambar thumbnail.lihat tampilan artikel terkait blog infonetmu ini:

Berikut cara memasang artikel terkait dengan thumbnail.

  1. Masuk ke akun Blogger Anda.
  2. Klik Rancangan.
  3. Klik tab Edit HTML.
  4. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.
  5. Beri tanda centang pada Expand Template Widget kamu.
  6. Cari kode </head> Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl + F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.
  7. Copy kode berikut dan paste di atas kode </head>
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == "item"'>
    <style type="text/css">
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, Times New Roman , Times, serif;
    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:#d4eaf2;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvy60vBzAGyPaj-9to74ofFKpnFtEIky0itmpvt9IyeySFF42X_6fdAvJYlGvTa7cJAwH8ohMq_tFjxGPZUAeDwtkAUAdskPunuc01ozs2f7ROko_wkMPvVFuoimY0Y8hD8m63DkgtcFc/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->
  8. Cari kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
  9. Copy kode berikut dan paste diatas kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>
    <!-- Related Posts with Thumbnails Code Start-->
    <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <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=6&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://infonetmu.blogspot.com/2011/12/cara-membuat-artikel-terkait-dengan.html'><img style="border: 0" alt="Cara membuat Artikel terkait dengan Thumbnail" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
    </b:if></b:if>
    <!-- Related Posts with Thumbnails Code End-->
  10. Klik tombol SIMPAN TEMPLATE.

Keterangan:
  • Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=5;
  • Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle="Related Posts";
  • Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvy60vBzAGyPaj-9to74ofFKpnFtEIky0itmpvt9IyeySFF42X_6fdAvJYlGvTa7cJAwH8ohMq_tFjxGPZUAeDwtkAUAdskPunuc01ozs2f7ROko_wkMPvVFuoimY0Y8hD8m63DkgtcFc/s400/noimage.png";
  • Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor="#d4eaf2";
 dimasnova.blogspot.com

Komentar

Postingan populer dari blog ini

Cara Mengetahui URL Mp3

saya coba share sedikit cara mengetahui url Mp3 di 4shared , indowebster , facebook DLL ... buat para master, buat yang udah tau .. Lewatkan aja artikel ini Yang Pertama agan harus siapkan ialah IDM .. (internet download manager) Kalau Belum Punya silahkan download dulu Disini Kalau sudah punya Lewati saja langkah ini .. Selanjutnya Pergi Ke 4shared, indowebster, facebook dll Misalkan di 4shared Jika sudah di posisi link Lagu , maka IDM otomatis akan kluar seperti gambar no. 1 Kmudian Klik aja , akan kluar gambar no.2 .. lihat url yang di kelilingi garis merah, itu lah UrL yang di inginkan ,,.. Begitu juga di indowebster, DLL .. fungsi Dari Url Mp3 itu apa ? fungsinnya ialah banyak .. bisa pasang di blog untuk lagu latar blog ., bisa juga untuk send Mp3 di wall facebook .. DLL ... gimana carannya ? Untuk Penjelasannya .. tunggu artikel slanjutnya . hehehe .. semoga berguna .. jangan lupa komentarnya ya?

Hari Pertama Kerja di PT Bina Artha Ventura

Syukur Alhamdulillah saya ucapkan kepada ALLAH SWT, yang telah memberikan saya sebuah pekerjaan yang nyaman, mempunyai prospek yang cerah, tidak membosankan, dan masih banyak lagi yang saya dapat dari pekerjaan ini, semua yang saya lakukan akhirnya ada hasil dan manfaatnya, kemauan saya yang besar dan semangat akhirnya menemui titik terang yang sangat berarti bagi Saya.