Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Pembaharuan 10 Juni 2015: Widget ini sudah usang. Lebih baik pakai yang ini.

artikel terkait blogspot

Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan deskripsi. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang hanya terdiri dari gambar dan judul saja. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jika tidak, mungkin kamu akan suka dengan tipe aplikasi artikel terkait thumbnail dan judul saja » baca tutorialnya di sini

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

  • Masuk ke halaman Editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

  • Salin kode di bawah ini, kemudian letakkan tepat di atas kode </head>:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <style type='text/css'>
              #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
              #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
              #relpost_img_sum:hover         {background:none;}
              #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
              #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
              #relpost_img_sum li:hover      {background-color:#F0ECE9;}
              #relpost_img_sum .news-title a {color:#2C6BA8;}
              #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
              #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
              #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
         </style>
         <script type='text/javascript'>
              var relnojudul = 0;
              var relmaxtampil = 10;
              var numchars = 200;
              var morelink = "baca selengkapnya";
         </script>
         <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'></script>
    </b:if>
  • Selanjutnya temukan kode ini:

    <div class='post-footer'>

    TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.

    Salin kode di bawah ini, kemudian letakkan tepat di atasnya:

    <!-- Artikel Terkait dengan Gambar dan Ringkasan -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <div id='related_posts'>
              <h4>Artikel Terkait</h4>
              <b:loop values='data:post.labels' var='label'>
                   <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
              </b:loop>
              <ul id='relpost_img_sum'>
                   <script type='text/javascript'>artikelterkait();</script>
              </ul>
         </div>
    </b:if>
    <!-- Akhir Artikel Terkait dengan Gambar dan Ringkasan -->
  • Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.

  • Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Penyesuaian

  • Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ … }, yaitu pada deklarasi width:55px dan height:55pxnya.
  • var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
  • var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
  • var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
  • Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.

Sumber: http://modification-blog.blogspot.com

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 14 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!