Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail

artikel terkait blogspot


Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan judul artikel. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang terdiri dari gambar, judul beserta ringkasan artikelnya. 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 deskripsi artikel » baca tutorialnya di sini


Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail


  • Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil.
  • Salin kode di bawah ini, kemudian letakkan di atas kode </head>


    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <style>
            #at-gambar         {text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
            #at-gambar a       {color:#895F30;overflow-x:hidden;text-align:left;}
            #at-gambar a:hover {background-color:#EAE7DB;color:#666;}
            #at-gambar img     {width:84px !important;height:84px !important;}
        </style>
        <script>
            var defaultnoimage    = "//1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF";
            var maxresults        = 5;
            var splittercolor     = "#EBEBEB";
            var relatedpoststitle = "Catatan Lainnya:";
        </script>
        <script src='http://reader-download.googlecode.com/svn/trunk/terkaitlib.js'></script>
    </b:if>

  • Selanjutnya temukan kode ini:


    <div class='post-footer'>



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



  • Jika sudah ketemu, salin kode ini kemudian letakkan di atasnya:


    <!-- Artikel Terkait dengan Gambar -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div id='at-gambar'>
            <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=999&quot;'></script>
            </b:loop>
            <script>
                removeRelatedDuplicates_thumbs();
                printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
            </script>
        </div>
        <div style='clear:both'/>
    </b:if>
    <!-- Akhir Artikel Terkait dengan Gambar -->

  • 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 embel-embel post-footer umumnya memang berada di bawah posting. Begitu saja logikanya. Titik.
  • Jika sudah selesai, klik Simpan Template. Sekarang kita tinggal melakukan beberapa penyesuaian.

Penyesuaian-Penyesuaian


  • Atur ukuran thumbnail dengan mengubah nilai dalam selektor #at-gambar img{ ... }, yaitu pada deklarasi width:84px dan height:84px.
  • var defaultnoimage adalah tampilan untuk thumbnail cadangan jika posting yang dimaksud tidak memiliki gambar (umumnya menggunakan gambar "No Image").
  • var maxresults adalah variabel untuk menentukan jumlah posting maksimal yang akan ditampilkan.
  • var splittercolor adalah variabel untuk menentukan warna garis batas.
  • var relatedpoststitle adalah variabel untuk menentukan judul artikel terkaitmu (dalam hal ini adalah "Catatan Lainnya:").

  

Berlangganan

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

 6 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!