Memperbaiki Kekeliruan Format Posting

Kemungkinan ketika Anda telah melakukan instalasi, ternyata terdapat beberapa pengkodean yang kurang mendukung dengan apa yang Anda inginkan, seperti penempatan gambar, penggunaan post-header, dan sebagainya. Posting ini akan mencoba untuk mengupas tentang bagaimana beberapa pengkodean yang kurang sesuai dapat sesuai dengan standar posting di Blogger.com.

Dalam menempatan gambar (image), biasanya pada Blogger.com akan diapit dengan kode <div>. Contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="#" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="#" width="200"/></a></div>

Sedangkan pada template MiMspot memasukkan markah gambar secara manual.

<a href="#"><img class="aligncenter" src="#" height="200" width="200" alt="MiMspot Posting" style="margin-bottom:1.5714em;margin-top:1.5714em;"/></a>

Jika Anda selalu menggunakan penambahan gambar sesuai dengan bantuan dari Blogger.com pada editor posting, sebaiknya lakukan penghapusan pada selector img dalam kode CSS (Cascading Style Sheets).

img {
background: none;
border: 0;
display: block;
}

Menampilkan post-header di bawah judul posting, seperti published date, author, & komentar.

   <div class='post-header-line-1'>
      <p><span class='post-timestamp updated'>
        <b:if cond='data:top.showTimestamp'>
        <b:if cond='data:post.url'>
          <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr>
        </b:if>
        </b:if>
      </span> <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>
        <b:if cond='data:blog.pageType != "static_page"'>
          <b:if cond='data:post.allowComments'>
            <span class='sep'> // </span><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
            <data:post.commentLabelFull/>
            </a>
          </b:if>
        </b:if>
        </b:if>
      </span></p>
    </div>

Termasuk juga kode CSS berikut yang menunjukkan mirip dengan gambar “tangan menulis”.

.post-header-line-1 p:before {
content: '\270d';
margin-right: .25em;
}

Sementara pengkodean sebenarnya terletak pada post-footer, namun dalam MiMspot pengkodean tersebut disembunyikan dengan menambahkan CSS-inline (warna merah).

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard' style='display:none;'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp' style='display:none;'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link' style='display:none;'>
        <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:blog.pageType != "static_page"'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'><span class='subscribe-rss'><a href='/feeds/posts/default' title='Berlangganan posting via feedburner'>Subscribe</a></span> <span class='sep'>| </span>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> <span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType != "item"'>
           <b:if cond='data:blog.pageType != "static_page"'>
             <b:if cond='data:post.showBacklinks'>
               <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
             </b:if>
           </b:if>
         </b:if>
       </span> </div>

      <div class='post-footer-line post-footer-line-2'><span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span></div>
      <div class='post-footer-line post-footer-line-3'><p class='foot-info small'>Anda baru saja membaca posting dengan judul “<data:post.title/>” dan Anda pun dapat membuat penanda ke <a expr:href='data:post.url' expr:title='data:post.title' itemprop='url' rel='bookmark'>permalink</a>.</p></div>
    </div>

Sedangkan kode berwarna hijau merupakan penambahan untuk taut berlangganan yang juga terkait dengan CSS seperti di bawah ini.

.subscribe-rss,
.feed-links {
background: url(https://lh5.googleusercontent.com/-_Xx2x3BvBK0/UGPQTe6YiWI/AAAAAAAABfw/XW4c686TU4M/s800/mimicon.png) no-repeat -10px -93px;
padding-left: 1.5714em;
}

Selanjutnya penambahan kode yang berwarna biru terkait dengan CSS berikut.

.foot-info {
border: 1px dotted #ddd;
color: #666;
font-style: normal;
margin-top:  1.5714em;
padding: 15px;
}
.foot-info a {
color: #3268c4;
font-weight: bold;
}

Memperbaiki posisi daftar pada posting terkait, yakni terjadi ketika judul sebuah posting sangat panjang sehingga menempatkan dua atau tiga baris teks. Cari kode CSS berikut:

.related-posts ul {
list-style: none;
margin-left: 0;
}
.related-posts li:before {
content: '\2023';
margin-right: 1.2em;
}

Ganti dengan:

.related-posts ul {
list-style: none;
}
.related-posts li:before {
content: '\2023';
margin-left: -1.5em;
padding-right: 1.2em;
}

Mungkin yang lain — tidak berhubungan dengan posting — adalah menu horizontal. Untuk kode yang ditandai dengan # harus diganti dengan URL (Uniform Resource Locator) tujuan, bukan ditambahkan. Contoh: http://namablog.blogspot.com/p/about dan bukan http://namablog.blogspot.com/p/about#. Kecuali untuk menu dropdown induk.

Silakan beri komentar di sini, jika dalam penginstalan MiMspot kurang/tidak sesuai dengan format demonstrasi ini.

15 komentar dapat Anda baca di bawah ini atau tambahkan satu.

  1. mas, kenapa ya saat aku melakukan pencarian dilabel misal dengan jumlah post label 40. tidak muncul page navigasi nya? kan kalo ke 40 tampil semua bakal berat..

    alhasil aku batasi jumlah yang keluar setiap label menjadi 6 saja, tapi masalahnya tadi, page navigation tidak muncul pada halaman ini, dan menjadi post pada label tersebut menjadi tertutup alias tidak ada untuk page selanjutnya. apakah harus diedit bagian var pospager?

    BalasHapus
    Balasan
    1. Maaf, gan ada kesalahan tag kondisional tapi sudah diperbaiki. Terima kasih

      Hapus
    2. hehe, jadi apa mesti dibenerin sob? apakah yg harus diubah dan ditambah?

      Hapus
    3. Sudah dikirim via email, gan. Ngga bisa input kode di sini.

      Hapus
  2. sob, dimana tag memperbanyak jumlah posting terkaitnya?? disitu kan cuman tampil 5 saja?

    BalasHapus
    Balasan
    1. Script yang ditandai dengan huruf tebal, gan
      <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>

      Hapus
    2. oh dah ada kok sob,, script yg di comment ini ada yg salah dikit.. :D hehehe

      Hapus
    3. trnyata bner, tetep gk bisa jadi banyak, :D max 5 aja :D

      Hapus
    4. O iya, ada yang kelupaan, gan. Mungkin oleh karena proses kompresi, ganti juga script antara <head>…</head>.

      bla... bla... while(a<relatedTitles.length&&a<5){document.write('<li><a href="'+relatedUrls[b]+'">'+relatedTitles[b]+"</a></li>");if(b<relatedTitles.length-1){b++}else{b=0}a++}document.write("</ul>")};
      //]]>
      </script>

      Bla... berarti kodenya panjang, kemudian ganti pula kode yang pakai huruf tebal dan sesuaikan dengan kode sebelumnya. Terima kasih atas koreksinya, gan.

      Hapus
  3. yg perlu diganti angka 5 nya aja sob.. ?? atau mulai while(a< relatedTitles.lenghth&&a<5)blablablabla... ?

    BalasHapus
  4. Gan ane sangat berminat dengan template ini, Mohon di kirim gan versi refisi terbaru nya.? ke email rendi.hadi@gmail.com

    BalasHapus
  5. saya suka templatenya sangat ringan dengan deaisn yang minimalis

    BalasHapus
  6. template ini bagus, simple dan sangat menarik, khususunya menu navigasinya,
    so....
    bisakah saya menerapkan menu tersebut di template saya?

    BalasHapus

Posting Komentar

Harap berkomentar sesuai dengan isi posting & komentar spam akan dihapus. Anda dapat menggunakan tag HTML: <a href=""></a>, <strong></strong>, <b></b>, <em></em>, <i></i>.