Contoh Penempatan Kode Artikel Terkait Seluler Pada Template

Pada artikel dengan judul “Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot” telah diuraikan dengan jelas tentang cara pembuatan daftar artikel terkait pada template Blogspot untuk tampilan seluler. Demikian pula pada artikel dengan judul “Menyembunyikan Menu Ikon Mengapung Pada Tampilan Seluler” juga telah diuraikan tentang cara menyembunyikan menu ikon mengapung (floating menu with icons) agar tidak dimunculkan pada halaman blog untuk tampilan seluler. Namun demikian bagi Anda yang belum terbiasa menyisipkan kode atau script ke dalam template blog, bisa jadi hal tersebut akan terasa sangat membingungkan. Sehingga berikut ini disajikan beberapa contoh penerapan teknik pembuatan daftar artikel terkait pada template seluler yang berkenaan dengan penempatan kode atau script dalam menentukan letak daftar artikel terkait tersebut.

Dengan menggunakan beberapa contoh di bawah ini, diharapkan dapat membantu Anda yang belum terbiasa menyisipkan kode atau script ke dalam template blog, karena dengan demikian Anda tinggal menyalin kode yang terdapat dalam artikel ini sesuai dengan daftar artikel terkait yang dihasilkan oleh kode tersebut untuk mengganti kode yang terdapat pada template blog yang saat ini Anda gunakan.

Namun perlu diingat bahwa sebelum Anda menyalin kode di bawah ini untuk mengganti kode yang terdapat pada template blog yang saat ini Anda gunakan, terlebih dulu Anda harus menyisipkan kode seperti yang diuraikan pada langkah ‘Ketiga’ artikel sebelumnya yang berjudul “Membuat Daftar Artikel Terkait Pada Template Seluler Blogspot” tepat di atas kode </head>. Dan selanjutnya Anda tinggal menyalin kode di bawah ini untuk mengganti kode yang terdapat pada template blog yang saat ini Anda gunakan.

Contoh 1: Kode di bawah ini akan menempatkan daftar artikel terkait di atas tombol berbagi.

<div class='post-footer-line post-footer-line-2'>
              <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <div id='mobile-related-posts'>
                   <div style='text-align: justify;'>
                   <h4><b>Artikel Terkait: </b></h4>
                   <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop>
                   <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
                   </div>
                </div>
              </b:if>
              <b:if cond='data:top.showMobileShare'>
                <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/></a>
                </div>
              </b:if>
              <b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>
            </div>

Contoh 2: Kode di bawah ini akan menempatkan daftar artikel terkait di bawah tombol berbagi.

<div class='post-footer-line post-footer-line-2'>
              <b:if cond='data:top.showMobileShare'>
                <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
                  <a href='javascript:void(0);'><data:shareMsg/></a>
                </div>
              </b:if>
              <b:if cond='data:top.showDummy'>
                <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
              </b:if>
              <b:if cond='data:blog.pageType == &quot;item&quot;'>
                <div id='mobile-related-posts'>
                   <div style='text-align: justify;'>
                   <h4><b>Artikel Terkait: </b></h4>
                   <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop>
                   <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
                   </div>
                </div>
              </b:if>
            </div>

Sehingga dari kedua contoh tersebut akan menghasilkan daftar artikel terkait dengan tata letak seperti pada gambar berikut ini.