Pluspedia: Kamus Blogspot | Tutorial Blog

Modifikasi Tampilan dan Teks pada Status Message

Posted by Unknown Posted on 04.35 with No comments

Custom Status Message for Blogger — Contoh tampilan *‘status message’* yang sudah dimodifikasi.

Status Message adalah sebuah pesan yang akan muncul di atas posting ketika kita sedang berada di halaman hasil pencarian atau halaman label. Memodifikasi tampilannya mungkin mudah, yaitu dengan cara menimpa CSS bawaan Blogger dengan kode CSS baru yang mengandung pengaturan tampilan yang berbeda seperti ini:

.status-msg-wrap {
  font-size:110%;
  width:90%;
  margin:10px auto;
  position:relative;
}

.status-msg-border {
  border:1px solid #000;
  filter:alpha(opacity=40);
  -moz-opacity:.4;
  opacity:.4;
  width:100%;
  position:relative;
}

.status-msg-bg {
  background-color:#ccc;
  opacity:.8;
  filter:alpha(opacity=30);
  -moz-opacity:.8;
  width:100%;
  position:relative;
  z-index:1;
}

.status-msg-body {
  text-align:center;
  padding:.3em 0;
  width:100%;
  position:absolute;
  z-index:4;
}

.status-msg-hidden {
  visibility:hidden;
  padding:.3em 0;
}

.status-msg-wrap a {
  padding-left:.4em;
  text-decoration:underline;
}

Tapi bagaimana jika kita ingin memodifikasi tulisan di dalamnya?

Untuk melakukan itu, kita mau tidak mau harus menghapus elemen tersebut dan menggantinya dengan markup yang baru seperti ini:

<!-- b:include data='top' name='status-message'/ -->
<b:if cond='data:blog.searchQuery'>
  <b:if cond='data:numPosts != 0'>
    <p class='custom-status-message'>Menampilkan semua entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong></p>
  <b:else/>
    <p class='custom-status-message-error'>Pencarian entri dengan kata kunci <strong>&amp;#8220;<data:blog.searchQuery/>&amp;#8221;</strong> tidak ditemukan.</p>
  </b:if>
</b:if>
<b:if cond='data:blog.searchLabel'>
  <p class='custom-status-message'>Menampilkan semua entri dengan kategori <strong>&amp;#8220;<data:blog.searchLabel/>&amp;#8221;</strong></p>
</b:if>

Salin kode di atas, kemudian gunakan untuk menggantikan kode yang tampak seperti ini di dalam template (biasanya ada dua):

<b:include data='top' name='status-message'/>

Kemudian tambahkan kode CSS ini di atas ]]></b:skin> atau </style>:

.custom-status-message,
.custom-status-message-error {
  font:normal normal 13px Segoe,"Segoe UI",Calibri,"Helvatica Neue",Arial,Sans-Serif;
  color:white;
  text-shadow:0 -1px 0 rgba(0,0,0,.4);
  padding:7px 14px;
  margin:5px 5px 1.7em;
  background-color:#5A6777;
  background-image:-webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-moz-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-ms-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:-o-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.1));
  border:2px solid #404B55;
  border-bottom-color:#212729;
  border-top-color:#8E97A2;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}

.custom-status-message-error {
  background-color:#600;
  border-color:#700 #500 #300;
}

.custom-status-message strong {color:#AADD99}
.custom-status-message-error strong {color:#ff0}

Label: Desain Tampilan, Kamus Blogspot, panduan blogger, Posting, Sidebar, Tag Kondisional

Menciptakan Tampilan yang Berbeda Hanya Pada Posting Pertama

Posted by Unknown Posted on 19.04 with No comments

Ini adalah contoh tampilan pembangun deret posting yang masih normal (loop posting):

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Dan ini adalah loop posting yang sudah dimodifikasi:

<!-- posts -->
<div class='blog-posts hfeed'>
  <b:include data='top' name='status-message'/>
  <data:defaultAdStart/>
  <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>

    <b:if cond='data:post.isFirstPost'>
      <div class='first-post'><b:include data='post' name='post'/></div>
    <b:else/>
      <b:include data='post' name='post'/>
    </b:if>

    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:include data='post' name='comment_picker'/>
    </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
      <data:adStart/>
    </b:if>
  </b:loop>
  <b:if cond='data:numPosts != 0'>
    &lt;/div&gt;&lt;/div&gt;
  </b:if>
  <data:adEnd/>
</div>

Kode di atas akan secara otomatis meliputi posting pertama dengan elemen <div class='first-post'>, sehingga kita bisa melakukan sesuatu dengan kelas itu untuk mengubah tampilannya:

.first-post {border:10px solid red}
.first-post .post {font-size:150%}

Kuncinya ada pada kondisional <b:if cond='data:post.isFirstPost'>

Label: Desain Tampilan, Kamus Blogspot, panduan blogger, Posting, Tag Kondisional, Tingkat Lanjut

Konsep Auto Read-More Baru dengan Bantuan Textarea

Posted by Unknown Posted on 00.16 with No comments

Auto Readmore Hack for Blogger with Textarea — Mencoba memanfaatkan **<textarea>** untuk mencegah peramban memparse kode HTML di dalam posting.

Selama ini kita telah mengenal kode JavaScript pembuat ringkasan posting otomatis yang hanya bekerja dengan cara mengambil HTML di dalam posting, kemudian mengurangi jumlahnya untuk menciptakan ringkasan dan menampilkannya lagi dengan cara mengganti konten posting awal dengan ringkasan teks baru yang sudah dikurangi. Namun terkadang cara ini tidak efektif, karena biasanya peramban masih tetap bisa mengakses dan memparse semua kode HTML di dalam posting. Karakter posting memang terpotong, tapi beban muat tidak berubah.

Saat ini tidak ada cara yang bisa dibilang paling tepat untuk mengatasi masalah ini, dan satu-satunya cara yang paling sesuai dengan prosedur adalah dengan memanfaatkan elemen <data:post.snippet/> yang sebenarnya merupakan elemen untuk blog tampilan seluler (baca di sini).

Tapi, sebenarnya masih ada cara yang sederhana untuk mencegah peramban mengakses semua kode HTML posting saat kita belum memasuki halaman tunggal posting tersebut, yaitu dengan cara mengubah data yang dipanggil (dalam hal ini adalah konten posting) menjadi sesuatu yang bukan kode HTML, sesuatu yang lebih ringan dan tidak memicu peramban untuk mengerjakan apapun kecuali mengunduh teks yang ada. Yaitu dengan cara memanfaatkan <textarea>

Bungkus semua konten posting yang ada dengan elemen <textarea> sehingga kode HTML apapun yang ada di dalamnya tidak akan pernah diparse oleh peramban karena peramban hanya akan menganggapnya sebagai teks biasa yang ringan dan tidak memberikan beban permintaan HTTP tambahan (misalnya dari gambar atau video yang ada di dalam posting):

<textarea id='text-1234'><data:post.body/></textarea>

Konsepnya hanya seperti itu. Dan sisanya, kita bisa menggunakan JavaScript untuk menampilkan sebagian konten dari area teks tersebut, kemudian kita masukkan hasilnya ke dalam kontainer lain sebagai HTML:

<textarea id='text-1234'>
  <data:post.body/>
</textarea>
<div id='container-1234'></div>
<script>

  // Ambil teks dari `<textarea>`, kemudian kurangi jumlah karakternya (menjadi 200 karakter)
  var summary = document.getElementById('text-1234').value.substring(0,200);

  // Sisipkan karakter yang telah dikurangi tersebut ke dalam kontainer di bawahnya
  document.getElementById('container-1234').innerHTML = summary + '&hellip;';

</script>

Thumbnail posting bisa kita dapatkan melalui elemen <data:post.thumbnailUrl/> dengan resolusi yang sudah diubah, sedangkan elemen <textarea> bisa kita sembunyikan dengan CSS. Proses penerapan selengkapnya bisa Anda baca mulai dari sini.

Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea

Sebelum melakukan modifikasi, terlebih dahulu backup kode template Anda untuk berjaga-jaga jika terjadi kesalahan.

Pertama-tama, masuklah ke editor HTML template Anda kemudian cek Expand Template Widget. Temukan kode ini:

</head>

Salin kode ini kemudian letakkan di atasnya:

<script type='text/javascript'>
// Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
//<![CDATA[
var configSummary = {
    thumbnailSize: 100, // Define the post thumbnail size
    summaryLength: 300, // Define the summary length
    noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // `no image` URL
};
function createPostSummary(a,b,c) {
    var text, doc = document, d = configSummary,
        copyFrom = doc.getElementById(a).value,
        pasteTo = doc.getElementById(b),
        postThumbnail = (c === "") ? d.noThumbUrl : c;
    text = copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");
    pasteTo.innerHTML = '<img class="post-thumbnail" src="'+postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:'+d.thumbnailSize+'px;">' + text.substring(0,d.summaryLength) + '&hellip;';
}
//]]>
</script>

Setelah itu cari baris kode yang tampak kurang lebih seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

Ganti semua kode di atas menjadi kode ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    <b:else/>
      <textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>
        <p class='post-summary' expr:id='&quot;summaryContainer-&quot; + data:post.id'>
          <!-- for non/inactive JavaScript browsers -->
          <b:if cond='data:post.thumbnailUrl'>
            <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>
          </b:if>
          <b:if cond='data:post.snippet'>
            <data:post.snippet/>
          </b:if>
          <!-- end for non/inactive JavaScript browsers -->
        </p>
        <p class='post-more-link'>
          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>
            <data:post.jumpText/>
          </a>
        </p>
        <script>createPostSummary(&quot;postData-<data:post.id/>&quot;,&quot;summaryContainer-<data:post.id/>&quot;,&quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;);</script>
    </b:if>
  </b:if>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

Sisanya tinggal menambahkan kode CSS ini yang berfungsi untuk menggeser thumbnail gambar ke samping kiri ringkasan artikel. Letakkan kode ini di atas ]]></b:skin> atau </style>:

.post-thumbnail {
  display:block;
  float:left;
  margin:.2em 1em 0 0;
}

Klik Simpan Template.

Untuk template versi standar yang sekarang mungkin kodenya menjadi sedikit lebih rumit karena ada beberapa microdata yang disusun secara otomatis oleh Blogger. Mungkin suatu saat yang Anda temukan adalah baris kode seperti ini:

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
  <!-- Then use the post body as the schema.org description,
       for good G+/FB snippeting. -->
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
    <data:post.body/>
    <div style='clear:both;'/> <!-- clear for photos floats -->
  </div>
<b:else/>
  <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
    <data:post.body/>
    <div style='clear:both;'/> <!-- clear for photos floats -->
  </div>
</b:if>

Tidak masalah. Ganti semua kode di atas dengan kode ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
  <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <data:post.body/>
    <b:else/>
      <textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>
        <p class='post-summary' expr:id='&quot;summaryContainer-&quot; + data:post.id'>
          <!-- for non/inactive JavaScript browsers -->
          <b:if cond='data:post.thumbnailUrl'>
            <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>
          </b:if>
          <span itemprop='description'>
            <b:if cond='data:post.snippet'>
              <data:post.snippet/>
            </b:if>
          </span>
          <!-- end for non/inactive JavaScript browsers -->
        </p>
        <p class='post-more-link'>
          <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>
            <data:post.jumpText/>
          </a>
        </p>
        <script>createPostSummary(&quot;postData-<data:post.id/>&quot;,&quot;summaryContainer-<data:post.id/>&quot;,&quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;);</script>
    </b:if>
  </b:if>
  <div style='clear:both;'/> <!-- clear for photos floats -->
</div>

Unduh Sampel Template

Template Minima Black dengan posting yang sudah dimodifikasi. Silakan dipelajari:

Unduh Sampel Template

Label: Kamus Blogspot, panduan blogger, Pemecahan Masalah, Posting

Bekerja dengan Blog Seluler

Posted by Unknown Posted on 06.35 with No comments

Berikut ini adalah beberapa cara yang bisa Anda lakukan untuk menangani tampilan blog versi mobile/perangkat seluler. Namun sebelum memulainya, ada beberapa hal penting yang harus Saya jelaskan terlebih dahulu sebagai pondasi:

1. URL Blog Desktop dan Seluler

Menampilkan tampilan blog blogspot versi seluler bisa dilakukan dengan cara menambahkan kueri berupa ?m=1 pada URL. Sebagai contoh, jika alamat blog Anda adalah http://nama_blog.blogspot.com, maka untuk menampilkan tampilan blog perangkat seluler, Anda harus mengubah URLnya menjadi http://nama_blog.blogspot.com/?m=1. Tampilan blog versi biasa bisa Anda akses dengan mengubah nilai m menjadi 0, atau cukup buang kueri tersebut dari URL:

URL Blog Seluler: http://nama_blog.blogspot.com/?m=1
URL Blog Normal: http://nama_blog.blogspot.com/?m=0
URL Blog Normal: http://nama_blog.blogspot.com/

2. Perbedaan Elemen HTML Blog Desktop dengan Blog Seluler

Setiap widget posting yang masih asli akan selalu dilengkapi dengan duplikat markup HTML khusus untuk tampilan blog seluler. Ini ditandai dengan munculnya beberapa elemen <b:includable> dengan atribut-atribut bernilai (atau setidaknya memiliki imbuhan kata) “mobile”.

Berikut ini adalah contoh susunan XHTML navigasi halaman blog pada versi tampilan biasa:

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

Beberapa gulungan layar ke bawah, Anda akan menemukan kode yang nyaris sama dengan kode di atas. Perbedaan hanya terlihat pada karakteristik berupa ditambahkannya kelas-kelas dengan imbuhan “mobile” dan/atau hilangnya beberapa elemen HTML dari kode mirip yang pertama kali Anda temukan:

<b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>&amp;lsaquo;</a>
      </div>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>&amp;rsaquo;</a>
      </div>
    </b:if>

    <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </div>

    <div class='mobile-desktop-link'>
      <a class='home-link' expr:href='data:desktopLinkUrl'><data:desktopLinkMsg/></a>
    </div>

  </div>
  <div class='clear'/>
</b:includable>

Fungsinya adalah untuk membedakan markup HTML antara blog tampilan layar desktop dengan blog tampilan seluler. Sehingga, sebagai contoh, jika kita mengakses halaman blog kita pada perangkat desktop, maka kita akan melihat kode HTML seperti ini pada sumbernya:

<div class='blog-pager' id='blog-pager'>
  <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' href='...' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a>
  </span>
  <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' href='...' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a>
  </span>
  <a class='home-link' href='/'>Beranda</a>
  <div class='blog-mobile-link'>
    <a href='/?m=1'>Lihat versi seluler</a>
  </div>
</div>
<div class='clear'></div>

Namun, saat kita membuka halaman blog pada perangkat seluler, kita akan melihat bahwa elemen-elemen navigasi blog telah berubah:

<div class='blog-pager' id='blog-pager'>
  <div class='mobile-link-button' id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' href='...' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>&amp;lsaquo;</a>
  </div>
  <div class='mobile-link-button' id='blog-pager-older-link'>
    <a class='blog-pager-older-link' href='...' id='Blog1_blog-pager-older-link' title='Posting Lama'>&amp;rsaquo;</a>
  </div>
  <div class='mobile-link-button' id='blog-pager-home-link'>
    <a class='home-link' href='/'>Beranda</a>
  </div>
  <div class='mobile-desktop-link'>
    <a class='home-link' href='/?m=0'>Lihat versi web</a>
  </div>
</div>
<div class='clear'></div>

Logikanya seperti itu.

Masing-masing elemen <b:includable> akan ditampilkan sesuai keadaannya (dalam hal ini adalah mengenai apakah kita sedang berada pada perangkat desktop ataukah perangkat seluler), yang dalam sebuah widget dapat dikondisikan dengan kondisional <b:if cond='data:mobile'>:

<b:if cond='data:mobile'>
  <!-- menampilkan navigasi halaman versi mobile pada perangkat seluler -->
  <b:include name='mobile-nextprev'/>
<b:else/>
  <!-- menampilkan navigasi halaman versi desktop pada perangkat desktop -->
  <b:include name='nextprev'/>
</b:if>

<b:if cond='data:mobile'> hanya berlaku jika diletakkan/dideklarasikan di dalam <b:includable> dan tidak bisa bekerja di luar elemen itu. Kondisional universal untuk menyatakan tampilan seluler bisa dinyatakan sebagai ini:

<b:if cond='data:blog.isMobile'> ... </b:if>

Anda bisa menerapkan kondisional di atas di mana saja.

Pastikan Fitur Blog Seluler Aktif

Jika tidak, aktifkan kembali dengan cara masuk ke tab Template kemudian klik ikon roda gigi yang berada di bawah penayang blog seluler Anda:

Mengaktifkan Fitur Blog pada Perangkat Seluler — Mengaktifkan fitur blog seluler.

Setelah itu Anda akan mendapati pilihan untuk mengaktifkan atau tidak mengaktifkan fitur blog seluler. Pilih untuk mengaktifkan fitur blog seluler.

Dua Metode Modifikasi

Setelah mengerti tentang bagaimana Blogger bisa menangani tampilan blog seluler terhadap tampilan blog biasa, kita bisa memulai untuk mengetahui dua ide yang biasa digunakan untuk membedakan tampilan antara blog versi biasa dengan blog versi seluler.

Metode 1: Menambahkan Kelas Khusus Tampilan Seluler pada Tag <body>

Blogger sudah memiliki tag data tersendiri yang akan menggenerasikan kelas bernama mobile berdasarkan tipe tampilan blog, yaitu data:blog.mobileClass yang bisa kita letakkan pada tag HTML di dalam template sebagai nilai kelas. Misalnya pada tag <body> seperti ini:

<body expr:class='data:blog.mobileClass'>

Dengan cara di atas, maka kita akan mendapati bahwa tag <body> telah dilengkapi dengan kelas mobile pada blog tampilan seluler seperti ini:

<body class=' mobile'>

Saat kita membuka blog pada tampilan desktop, nilai mobile pada atribut akan menghilang. Sehingga kita bisa membedakan tampilan blog seluler dengan blog biasa melalui kelas blog seluler tersebut melalui CSS:

#header-wrapper {
  background-color:#000;
  color:#fff;
}

#main-wrapper {
  width:900px;
  margin:0 auto;
}

/* mobile */
body.mobile #header-wrapper {
  background-color:#fff;
  color:#000;
}

body.mobile #main-wrapper {
  width:auto;
  margin:0 10px;
}

Metode 2: Memanfaatkan Kondisional Seluler

Kita juga bisa menggunakan kondisional universal yang digunakan untuk menyatakan tampilan blog seluler sebagai pembatas tampilnya elemen-elemen HTML —termasuk tag <style>— dengan cara seperti ini:

Membedakan CSS Blog Desktop dengan Blog Seluler

<b:if cond='data:blog.isMobile'>
  <style type='text/css'>
  body {background-color:black} /* blog akan berwarna hitam pada tampilan seluler */
  </style>
<b:else/>
  <style type='text/css'>
  body {background-color:white} /* blog akan berwarna putih pada tampilan desktop */
  </style>
</b:if>

Menghilangkan/Menampilkan Elemen HTML

Beberapa pola yang biasa digunakan:

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
  <div id='header-wrapper' class='desktop-header'>
    Header Blog Tampilan Layar Desktop
  </div>
</b:if>

<b:if cond='data:blog.isMobile'>
  <div id='header-wrapper' class='mobile-header'>
    Header Blog Tampilan Seluler
  </div>
</b:if>

<b:if cond='data:blog.isMobile == &quot;true&quot;'>
  <div id='header-wrapper' class='mobile-header'>
    Header Blog Tampilan Seluler
  </div>
</b:if>

<b:if cond='data:blog.isMobile != &quot;true&quot;'>
  <div id='header-wrapper' class='desktop-header'>
    Header Blog Tampilan Layar Desktop
  </div>
</b:if>

Menggunakan Kondisional Seluler Sebagai Bagian dari Kelas

Pada dasarnya, data:blog.isMobile akan menampilkan nilai berupa true atau false tergantung dari apakah blog tersebut dibuka pada tampilan seluler ataukah pada layar desktop. Sehingga, sebenarnya kita juga bisa menggunakan data tersebut sebagai nama kelas (bagian dari nama kelas) untuk menyatakan bahwa blog tersebut sedang dibuka pada perangkat seluler atau perangkat desktop:

<body expr:class='&quot;mobile-&quot; + data:blog.isMobile'>

Kode di atas akan menampilkan dua kemungkinan nilai kelas, yaitu:

<body class='mobile-true'>

atau

<body class='mobile-false'>

tergantung dengan perangkat apa kita membuka halaman blog tersebut. Sehingga:

/* blog normal */
body.mobile-false #header-wrapper {
  background-color:white;
  color:black;
}

body.mobile-false #sidebar-wrapper {
  background-color:white;
  color:black;
}

/* blog seluler */
body.mobile-true #header-wrapper {
  background-color:black;
  color:white;
}

body.mobile-true #sidebar-wrapper {
  background-color:white;
  color:black;
}

body.mobile-true .desktop-elem {
  display:none !important;
  visibility:hidden;
}

/* dan seterusnya... */

Terakhir...

Agar pengeditan CSS pada blog tampilan seluler bisa bekerja, jangan memilih jenis template apapun pada opsi template seluler. Pilihlah opsi Tersesuai:

Pilih Pilihan Tersesuai — Tidak memilih template seluler apapun dengan cara memilih opsi **Tersesuai**

Label: Browser, HTML, Kamus Blogspot, panduan blogger, Tag Kondisional, Tingkat Lanjut

XHTML Blogger - Navigasi Halaman/Blog Pager

Posted by Unknown Posted on 03.28 with No comments

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:newerPageUrl	Indikator untuk menyatakan bahwa terdapat posting yang lebih baru sebelum posting/daftar posting yang sedang aktif/terlihat di halaman. Pada intinya, kondisi ini digunakan untuk memunculkan navigasi Posting Lebih Baru saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —misalnya, saat kita sedang berada di halaman muka, kita tidak akan melihat navigasi Posting Lebih Baru. Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih baru dari halaman yang sedang aktif.	`http://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&max-results=2`
data:olderPageUrl	Indikator untuk menyatakan bahwa terdapat posting yang lebih lama setelah posting/daftar posting yang sedang aktif/terlihat di halaman. Kondisi ini digunakan untuk memunculkan navigasi Posting Lama saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —saat kita sedang berada di halaman terakhir, maka kita tidak akan melihat navigasi Posting Lama). Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih lama dari halaman yang sedang aktif.	`http://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&max-results=2&reverse-paginate=true`
data:newerPageTitle	Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih baru	`Posting Lebih Baru`, `Newer Post`
data:olderPageTitle	Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih lama	`Posting Lama`, `Older Post`
data:widget.instanceId	[?]	`Blog1`
data:blog.homepageUrl	[?]	`http://nama_blog.blogspot.com/`
data:homeMsg	Elemen ini akan menampilkan teks navigasi ke halaman awal.	`Beranda`
data:mobileLinkUrl	Kode ini akan menggenerasikan URL blog versi seluler berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan `data:blog.url` dengan akhiran berupa `?m=1`).	`http://nama_blog.blogspot.com/?m=1`
data:desktopLinkUrl	Kode ini akan menggenerasikan URL blog versi desktop berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan `data:blog.url` dengan akhiran berupa `?m=0`).	`http://nama_blog.blogspot.com/?m=0`
data:mobileLinkMsg	Elemen ini akan menampilkan teks navigasi menuju blog tampilan seluler.	`Lihat versi seluler`
data:desktopLinkMsg	Elemen ini akan menampilkan teks navigasi menuju blog tampilan web/desktop.	`Lihat versi web`

Label: Kamus Blogspot, Navigasi, panduan blogger, Tingkat Lanjut

Menonaktifkan Komentar Tanpa Menyembunyikan Komentar yang Sudah Ada

Posted by Unknown Posted on 04.57 with No comments

<b:if cond='data:post.allowComments'> adalah kondisional template yang berfungsi untuk menyatakan bahwa pemilik blog mengizinkan pengunjung untuk menuliskan komentar. Anda biasanya akan melihat kode ini membungkus semua elemen di dalam seksi komentar sehingga jika administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung lain menuliskan komentar baru melalui panel pengaturan utama (bukan opsi pada pengaturan posting), maka seluruh komentar yang telah masuk akan ikut menghilang (disembunyikan):

<div class='comments' id='comments'>
  <b:if cond='data:post.allowComments'>

    Seluruh konten di bagian ini akan menghilang jika
    Administrator mengeset opsi pengaturan untuk tidak mengizinkan pengunjung
    menuliskan komentar baru.

  </b:if>
</div>

Biasanya hal ini akan merugikan blog-blog bertipe diskusi yang ramai pengunjung, terutama jika komentar-komentar yang diterbitkan berguna untuk pembaca lain sebagai referensi tambahan.

Suatu saat mungkin Anda akan mengalami masa-masa sibuk atau katakanlah “sedang tidak mampu untuk membalas komentar-komentar yang masuk”. Saat Anda mengalami itu biasanya hal yang akan Anda lakukan adalah menutup komentar posting secara temporer dengan cara menyembunyikannya seperti ini:

Menonaktifkan Sekaligus Menyembunyikan Komentar — Menonaktifkan sekaligus menyembunyikan komentar pada semua posting.

Untuk menjaga agar komentar-komentar lama tidak hilang, Anda bisa memindahkan/memperbaharui wilayah kekuasaan kondisional <b:if cond='data:post.allowComments'> menjadi lebih sempit. Cukup hilangkan formulir komentarnya saja dan biarkan komentar-komentar yang sudah ada tetap pada tempatnya. Caranya adalah hapus kode <b:if cond='data:post.allowComments'> ... </b:if> yang mengelilingi elemen <div class='comments' id='comment'> sehingga akan tersisa seperti ini:

<div class='comments' id='comments'>
  ...
</div>

Kemudian cari elemen ini:

<b:include data='post' name='comment-form'/>

Ganti dengan ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='comment-form'/>
</b:if>

Temukan juga kode ini:

<b:include data='post' name='threaded-comment-form'/>

Ganti dengan kode ini:

<b:if cond='data:post.allowComments'>
  <b:include data='post' name='threaded-comment-form'/>
</b:if>

Masing-masing kode biasanya akan ditemukan dua buah, termasuk juga untuk seksi komentarnya. Dimana salah satu adalah elemen komentar yang akan aktif pada blog versi biasa dan satunya lagi aktif pada blog tampilan mobile.

Label: Kamus Blogspot, Komentar, panduan blogger, Pemecahan Masalah, Tag Kondisional, Tingkat Lanjut

XHTML Blogger, Loop Label Posting

Posted by Unknown Posted on 07.31 with No comments

Elemen ini biasanya tampil di bagian footer posting dan berfungsi untuk menampilkan daftar label yang diterapkan pada posting tersebut:

<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 != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.labels	Daftar label	???
data:postLabelsLabel	Elemen ini akan menampilkan label sebelum daftar kategori posting	`Label:`
data:label.url	Elemen ini akan menghasilkan URL halaman label/kategori	`http://nama_blog.blogspot.com/search/label/Liburan`
data:label.name	Elemen ini akan menghasilkan nama label/kategori	`Liburan`
data:label.isLast	Boolean untuk menyatakan label terakhir	`true`, `false`

Label: Kamus Blogspot, panduan blogger, Posting, Tautan, Tingkat Lanjut

XHTML Blogger, Share Buttons

Posted by Unknown Posted on 06.51 with No comments

Dalam Konsep

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'>
    <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showBlogThisButton'>
    <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showTwitterButton'>
    <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showFacebookButton'>
    <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showOrkutButton'>
    <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:top.showEmailButton	Boolean	???
data:top.showBlogThisButton	Boolean	???
data:top.showTwitterButton	Boolean	???
data:top.showFacebookButton	Boolean	???
data:top.showFacebookButton	Boolean	???
data:top.showDummy	Boolean	???
data:post.sharePostUrl	Elemen ini akan menghasilkan URL berbagi	`http://www.blogger.com/share-post.g?blogID=52518732703774XXXX2&postID=703794562479435XXXX`
data:top.emailThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Kirim Ini lewat Email`
data:top.blogThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`BlogThis!`
data:top.shareToTwitterMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Twitter`
data:top.shareToFacebookMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Facebook`
data:top.shareToOrkutMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Orkut`
data:post.dummyTag	???	...

Label: Footer, Kamus Blogspot, panduan blogger, Tautan, Tingkat Lanjut

XHTML Blogger, Item Kontrol

Posted by Unknown Posted on 06.25 with No comments

Tombol Edit Cepat Posting

Biasanya berbentuk gambar/ikon pensil dan terletak di dalam footer posting:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.editUrl	Elemen ini akan menghasilkan URL pengeditan posting	`http://www.blogger.com/post-edit.g?blogID=489094982896596XXXX&postID=622513084927827XXXX&from=pencil`
data:top.editPostMsg	Elemen ini akan menghasilkan deskripsi/pesan tautan pengeditan posting	`Edit Entri`
data:post.adminClass	Elemen ini akan menghasilkan kelas khusus administrator (???)	`blog-admin pid-251761511`

Tombol Edit Cepat Widget

Berbentuk gambar/ikon kunci inggris dan terletak pada bagian bawah widget:

<b:include name='quickedit'/>

http://img1.blogblog.com/img/icon18_wrench_allbkg.png

Tombol Penghapusan Komentar

Lihat pada XHTML Blogger, Ikon Penghapusan Komentar

Label: Kamus Blogspot, Komentar, panduan blogger, Posting, Tingkat Lanjut, Widget

XHTML Blogger, Elemen Halaman: Seksi dan Widget

Posted by Unknown Posted on 05.08 with No comments

Sebuah seksi merupakan elemen <b:section>, sedangkan widget adalah elemen <b:widget>. <b:widget> harus berada di dalam <b:section>, dan <b:section> harus berada di dalam tag <body>

<b:section> dan <b:widget> selalu dilengkapi oleh beberapa atribut. Beberapa merupakan atribut wajib dan beberapa merupakan pilihan. Namun, untuk mengaktifkan sebuah <b:section>, minimal kita hanya membutuhkan atribut id dengan nilai yang spesifik:

<b:section id='widget-area'/>

Elemen di atas nantinya akan ditampilkan sebagai bagian terpenting dalam halaman Tata Letak, yaitu berupa tab pengeditan, penambahan & penghapusan widget seperti ini:

Widget — Contoh tampilan **<b:section>** di halaman Tata Letak

Dan saat ditampilkan sebagai elemen HTML, <b:section> akan tampil sebagai elemen ini:

<div class='section' id='widget-area'></div>

Daftar Atribut yang Biasa Muncul di dalam Elemen <b:section>
Atribut	Nilai/Contoh Nilai	Keterangan
id	`section-1`	Atribut wajib. Seperti ID dalam elemen HTML. Berupa huruf atau angka, dan harus spesifik.
class	`header`	Atribut opsional. Seperti kelas dalam elemen HTML. Tidak harus spesifik. Kelas-kelas standar dalam sebuah template blogspot adalah `navbar`, `header`, `main`, `sidebar` dan `footer`. Kelas-kelas standar tersebut sangat berguna bagi Blogger untuk mempermudah dalam menentukan tipe widget yang sesuai yang biasanya akan disisipkan/ditata ulang secara otomatis saat Anda mengunggah/mengganti template.
maxwidgets	`1`	Atribut opsional. Berupa jumlah. Atribut ini berguna untuk menentukan seberapa banyak widget yang bisa ditambahkan pada seksi terkait. Anda biasanya akan melihat atribut ini pada seksi header berupa `maxwidgets='1'`, yang akan membatasi penambahan widget sebanyak satu buah. Setelah sebuah elemen halaman ditambahkan, elemen halaman baru tidak diizinkan untuk masuk ke dalam seksi tersebut. Ciri khususnya adalah, sebuah tombol penambahan widget akan tampil saat seksi tersebut masih mengandung jumlah widget kurang dari nilai maksimal, dan akan menghilang saat jumlahnya telah mencapai nilai maksimal.
showaddelement	`yes` (default)	Atribut opsional. Jika bernilai `yes`, tombol penambahan widget akan ditampilkan. Jika bernilai `no`, tombol penambahan widget akan menghilang (pemilik blog tidak diizinkan untuk menambahkan elemen halaman).
showaddelement	`no`
growth	`vertical` (default)	Atribut opsional. Digunakan untuk menentukan apakah widget-widget halaman akan disusun secara menyamping atau bertumpukan.
growth	`horizontal`

Sebuah <b:widget> merupakan bagian dari <b:section> dan memiliki beberapa atribut wajib, yang akan terisi secara otomatis saat kita menambahkan elemen halaman/widget baru:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

Elemen di atas akan tampil sebagai item widget seperti ini saat kita berada di dalam halaman Tata Letak:

Contoh tampilan <b:widget> di halaman Tata Letak

Dan akan menjadi seperti ini saat tampil sebagai elemen HTML:

<div class='widget BlogArchive' id='BlogArchive1'>
  <h2>Blog Archive</h2>
  <div class='widget-content'>
    ...
  </div>
</div>

<div class='widget `type`' id='`id`'>
  <h2>`title`</h2>
  <div class='widget-content'>
    ...
  </div>
</div>

Daftar Atribut yang Biasa Muncul di dalam Elemen <b:widget>
Atribut	Nilai/Contoh Nilai	Keterangan
id	`BlogArchive1`	Atribut wajib. Seperti ID dalam elemen HTML. Berupa huruf atau angka, dan harus spesifik.
type	`BlogArchive`	Atribut wajib. Nilai terdaftar^[1] dan tidak bisa ditentukan sesuka hati. Digunakan untuk menentukan tipe widget.
locked	`true`	Atribut opsional. Digunakan untuk menentukan apakah widget bisa digeser-geser (diatur ulang susunannya) dan dihapus atau tidak. Ciri khusus tampak pada bagian bilah di samping item widget seperti ini
locked	`false`
title	`Blog Archive`	Atribut opsional. Digunakan untuk menentukan judul widget.
pageType	`all`	Atribut opsional. Digunakan untuk membuat widget tampil pada halaman spesifik (???)
	`archive`
	`main`
	`item`
mobile	`yes`	Atribut opsional. Jika `yes`, widget akan ditampilkan saat berada pada tampilan blog mobile. Jika `no`, widget tidak akan tampil saat berada pada tampilan blog mobile. Jika `only`, widget akan ditampilkan hanya pada tampilan blog mobile.
	`no`
	`only`

Label: Kamus Blogspot, panduan blogger, Tingkat Lanjut

XHTML Blogger, Utilitas Sistem Komentar V2

Posted by Unknown Posted on 20.40 with No comments

Dalam Konsep

JavaScript Thread Komentar

<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'></script>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                } else if (entry.gd$extendedProperty[k].name == 'blogger.displayTime') {
                  comment.displayTime = entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.commentSrc	Elemen ini akan menghasilkan URL sebuah script untuk keperluan fitur komentar	`//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js`
data:post.commentJso	Elemen ini akan menghasilkan JSON komentar yang telah diterbitkan di dalam posting terkait	Sampel
data:post.commentMsgs	Elemen ini akan menghasilkan objek berupa variabel untuk menyatakan pesan-pesan tertentu yang akan tampil dalam sistem komentar versi ke dua	Sampel
data:post.commentConfig	Elemen ini akan menghasilkan nilai-nilai konfigurasi komentar, menyangkut ID blog, ID posting, URL feed, nama penulis administrator, URL profil administrator, URL Blogger dan kedalaman thread (beberapa tampaknya masih dalam konsep)	Sampel

CSS Thread Komentar

<b:includable id='threaded_comment_css'>
<style>
.comments {}
.comments .comments-content {}
.comments .comment .comment-actions a, .comments .continue a {}
.comments .comment .comment-actions a:hover, .comments .continue a:hover {}
.comments .comments-content .comment-thread ol {}
.comments .comments-content .inline-thread {}
.comments .comments-content .comment-thread {}
.comments .comments-content .comment-thread:empty {}
.comments .comments-content .comment-replies {}
.comments .comments-content .comment {}
.comments .comments-content .comment:first-child {}
.comments .comments-content .comment:last-child {}
.comments .comments-content .comment-body {}
.comments .comments-content .user {}
.comments .comments-content .icon.blog-author {}
.comments .comments-content .datetime {}
.comments .comments-content .comment-header, .comments .comments-content .comment-content {}
.comments .comments-content .comment-content {}
.comments .comments-content .owner-actions {}
.comments .comments-replybox {}
.comments .comment-replybox-single {}
.comments .comment-replybox-thread {}
.comments .comments-content .loadmore a {}
.comments .thread-toggle {}
.comments .continue {}
.comments .comments-content .loadmore {}
.comments .comments-content .loadmore.loaded {}
.comments .thread-chrome.thread-collapsed {}
.comments .thread-toggle {}
.comments .thread-toggle .thread-arrow {}
.comments .thread-expanded .thread-arrow {}
.comments .thread-collapsed .thread-arrow {}
.comments .avatar-image-container {}
.comments .avatar-image-container img {}
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {}
}
</style>
</b:includable>

Sudah tidak berlaku lagi?

Label: JSON Blogger, Kamus Blogspot, panduan blogger, Tingkat Lanjut

XHTML Blogger, Formulir Komentar

Posted by Unknown Posted on 19.49 with No comments

Dalam Konsep

TemplatesV1

<b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup' style='width:100px;height:20px;'/>
    </b:if>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:postCommentMsg	Elemen ini akan menghasilkan label judul komentar	`Poskan Komentar:`
data:blogCommentMessage	Elemen ini akan menghasilkan pesan di atas formulir komentar	`Be nice, No spam!`
data:blogTeamBlogMessage	???	...
data:post.commentFormIframeSrc	Elemen ini akan menghasilkan URL formulir komentar mentah	`http://www.blogger.com/comment-iframe.g?blogID=29890010286969XXXX&postID=556779452392602XXXX`
data:post.friendConnectJs	???	...
data:post.cmtfpIframe	Elemen ini akan menghasilkan script	`<script type="text/javascript" src="//www.blogger.com/static/v1/jsbin/2468562941-comment_from_post_iframe.js"></script>`
data:showCmtPopup	[?]	-
data:post.appRpcRelayPath	???	`http://www.blogger.com/rpc_relay.html`
data:post.communityId	???	`0665491695519118XXXX`

TemplatesV2

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form' id='comment-form'>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:mobile	Boolean	`true`, `false`

Label: Footer, Kamus Blogspot, Komentar, panduan blogger, Tingkat Lanjut

XHTML Blogger, Ikon Penghapusan Komentar

Posted by Unknown Posted on 19.02 with No comments

Dalam Konsep

<b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
    <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
      <img src='//www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:comment.adminClass	Elemen ini akan menghasilkan kelas khusus administrator (???)	`blog-admin pid-615478996`
data:comment.deleteUrl	Elemen ini akan menghasilkan URL penghapusan komentar	`http://www.blogger.com/delete-comment.g?blogID=672954121565214XXXX&postID=294509636837564XXXX`
data:top.deleteCommentMsg	Elemen ini akan menghasilkan deskripsi (nilai atribut `title`) tautan penghapusan komentar	`Delete Comment`, `Hapus Komentar`

Label: Kamus Blogspot, Komentar, panduan blogger, Tingkat Lanjut

XHTML Blogger, Seksi Komentar

Posted by Unknown Posted on 05.36 with No comments

Dalam Konsep

Konten Halaman:

Prolog
Detail
1. TemplatesV1
2. TemplatesV2

Prolog:

Seksi komentar adalah elemen <b:includable>. Pada template versi pertama, elemen <b:includable> akan dilengkapi dengan id='comments'. Pada versi ke dua, elemen <b:includable> akan dilengkapi dengan id='threaded_comments':

TemplatesV1:

<b:includable id='comments' var='post'>
  ...
</b:includable>

TemplatesV2:

<b:includable id='threaded_comments' var='post'>
  ...
</b:includable>

Detail:

TemplatesV1

Terdapat lima bagian utama dalam kerangka komentar pada template versi pertama yaitu header, navigasi, daftar komentar, footer komentar dan backlink:

<div class='comments' id='comments'>

  <!-- header -->
  <h4>0 Komentar:</h4>

  <!-- navigasi -->
  <span class='paging-control-container'> ... </span>

  <!-- daftar komentar -->
  <div id='Blog1_comments-block-wrapper'>
    <dl class='avatar-comment-indent' id='comments-block'>
      ...
    </dl>
  </div>

  <!-- navigasi -->
  <span class='paging-control-container'> ... </span>

  <!-- footer komentar -->
  <div class='comment-footer'> ... </div>

  <!-- kontainer backlink -->
  <div id='backlinks-container'> ... </div>

</div>

Header Komentar

Adalah sebuah elemen heading. Biasanya berupa elemen H4 dengan tulisan yang menunjukkan jumlah komentar:

<h4>
  <b:if cond='data:post.numComments == 1'>1
    <data:commentLabel/>:
  <b:else/>
    <data:post.numComments/>
    <data:commentLabelPlural/>:
  </b:if>
</h4>

<!--

Catatan: Seluruh elemen di atas juga bisa diwakili oleh satu elemen ini:
<h4><data:post.commentLabelFull/>:</h4>

-->

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.numComments	Elemen ini akan menghasilkan angka berupa jumlah komentar yang telah masuk	`3`
data:commentLabel	Elemen ini akan menghasilkan label komentar singular	`Comment`, `Komentar`
data:commentLabelPlural	Elemen ini akan menghasilkan label komentar plural	`Comments`, `Komentar`
data:top.commentLabel	Sama dengan `data:commentLabel`	`Comment`, `Komentar`
data:top.commentLabelPlural	Sama dengan `data:commentLabelPlural`	`Comments`, `Komentar`
data:post.commentLabelFull	Sebuah paket elemen untuk mewakili semua markup di atas	`0 Comment`, `4 Comments`, `4 Komentar`

Navigasi Komentar

Berupa elemen <span> dengan kelas paging-control-container. Hanya akan muncul jika jumlah komentar sudah melebihi 200 buah (?)

<b:if cond='data:post.commentPagingRequired'>
  <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
      <data:post.oldestLinkText/>
    </a>&#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
      <data:post.olderLinkText/>
    </a>&#160;
    <data:post.commentRangeText/>&#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
      <data:post.newerLinkText/>
    </a>&#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
      <data:post.newestLinkText/>
    </a>
  </span>
</b:if>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.commentPagingRequired	Boolean untuk menyatakan apakah navigasi komentar sudah layak ditampilkan atau tidak	`true`, `false`
data:post.oldLinkClass	???	...
data:post.newLinkClass	???	...
data:post.olderLinkUrl	???	...
data:post.oldestLinkUrl	???	...
data:post.newerLinkUrl	???	...
data:post.newestLinkUrl	???	...
data:post.olderLinkText	???	...
data:post.oldestLinkText	???	...
data:post.newerLinkText	???	...
data:post.newestLinkText	???	...
data:post.commentRangeText	???	...

Daftar Komentar

Berupa daftar komentar yang telah masuk, biasanya dibangun dengan elemen definition list atau ordered list:

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
      <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass'
      expr:id='data:comment.anchorName'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;'
          width='16px' />
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <b:if cond='data:comment.authorUrl'>
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <data:commentPostedByMsg/>
        <b:else/>
          <data:comment.author/> <data:commentPostedByMsg/>
        </b:if>
        <span class='comment-timestamp'>
          <a expr:href='data:comment.url' title='comment permalink'>
            <data:comment.timestamp/>
          </a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
      </dt>
      <dd class='comment-body'>
        <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'>
            <data:comment.body/>
          </span>
          <b:else/>
            <p><data:comment.body/></p>
        </b:if>
      </dd>
      <dd class='comment-footer'></dd>
    </b:loop>
  </dl>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.postAuthorClass	???	...
data:widget.instanceId	[?]	-
data:post.avatarIndentClass	Elemen ini akan menghasilkan nama kelas indentasi avatar	`avatar-comment-indent`
data:comment.authorClass	Elemen ini akan menghasilkan nama kelas administrator	`blog-author`
data:comment.anchorName	Elemen ini akan menghasilkan deret karakter yang nantinya akan berguna sebagai pendukung permalink komentar (diawali dengan hruf `c`, dan diikuti oleh ID komentar)	`c3630901959249728956`
data:comment.favicon	Elemen ini akan menghasilkan favicon komentator yang tidak memiliki foto profil	??? [biasanya berupa logo Blogger]
data:blog.enabledCommentProfileImages	[?]	-
data:comment.authorAvatarImage	Elemen ini akan menghasilkan foto profil	Sampel
data:comment.authorUrl	Elemen ini akan menghasilkan tautan profil penulis komentar	`http://www.blogger.com/profile/0513752219663605XXXX`
data:comment.author	Elemen ini akan menghasilkan nama penulis komentar	`Taufik Nurrohman`
data:commentPostedByMsg	Elemen ini akan menghasilkan label kata kerja setelah nama komentar	`mengatakan...`, `said...`
data:comment.url	Elemen ini akan menghasilkan URL permalink komentar (URL halaman dengan akhiran berupa hash `data:comment.anchorName`	Sampel
data:comment.timestamp	Elemen ini akan menghasilkan timestamp penerbitan komentar	`Jumat, 02 November 2012 10:20:00 WIB`
data:comment.isDeleted	Boolean untuk menyatakan bahwa komentar sudah dihapus	`true`, `false` ???
data:comment.body	Elemen ini akan menghasilkan badan komentar	`Lorem ipsum dolor sit amet!`
data:comment.id	Elemen ini akan menghasilkan ID komentar (seperti `data:comment.anchorName`, tapi tanpa awalan `c`. Hanya angka)	`3630901959249728956`
data:comment.inReplyTo	Elemen ini akan menghasilkan ID komentar induk. Elemen ini hanya akan menampilkan ID komentar induk jika komentar tersebut merupakan komentar balasan dari salah satu komentar yang ada	`3630901959249728956`

Footer/Kaki Komentar

Elemen ini umumnya berisi pesan komentar dan formulir komentar:

<div class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='comment-form'/>
    <b:else/>
      <data:post.noNewCommentsText/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.allowComments'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.embedCommentForm	Boolean untuk menyatakan opsi peletakkan formulir komentar tersemat di bawah posting	`true`, `false`
data:post.allowNewComments	Boolean untuk menyatakan bahwa administrator memperbolehkan masuknya komentar baru	`true`, `false`
data:post.allowComments	Boolean untuk menyatakan bahwa administrator memperbolehkan pengunjung untuk berkomentar	`true`, `false`
data:post.noNewCommentsText	Elemen ini akan menghasilkan pesan bahwa komentar baru tidak diperbolehkan	`Komentar baru tidak diperbolehkan untuk posting ini.`
data:post.addCommentUrl	Elemen ini akan menghasilkan URL komentar jendela munculan (???)	...
data:post.addCommentOnclick	???	...
data:postCommentMsg	Elemen ini akan menghasilkan label tautan pengeposan komentar	`Poskan Komentar`

Backlink Container

???

<div id='backlinks-container'>
  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
    <b:if cond='data:post.showBacklinks'>
      <b:include data='post' name='backlinks'/>
    </b:if>
  </div>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.showBacklinks	???	...

TemplatesV2

Terdapat lima bagian utama dalam kerangka komentar pada template versi ke dua yaitu header, daftar komentar, footer komentar, popup komentar dan backlink:

<div class='comments' id='comments'>

  <!-- header -->
  <h4>0 Komentar:</h4>

  <!-- daftar komentar -->
  <div class='comments-content'>
    <script> ... </script>
    <div id='comment-holder'> ... </div>
  </div>

  <!-- footer komentar -->
  <p class='comment-footer'> ... </p>

  <!-- popup komentar -->
  <div class='comment-popup'> ... </div>

  <!-- kontainer backlink -->
  <div id='backlinks-container'> ... </div>

</div>

Header Komentar

Adalah sebuah elemen heading. Biasanya berupa elemen H4 dengan tulisan yang menunjukkan jumlah komentar:

<h4>
  <b:if cond='data:post.numComments == 1'>1
    <data:commentLabel/>:
  <b:else/>
    <data:post.numComments/>
    <data:commentLabelPlural/>:
  </b:if>
</h4>

Lihat pada bagian TemplatesV1 - Header Komentar

Daftar Komentar

Berupa daftar komentar yang telah masuk, dibangun oleh elemen-elemen ordered list di dalam elemen <div class='comments-content'>:

<div class='comments-content'>
  <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='threaded_comment_js'/>
  </b:if>
  <div id='comment-holder'>
     <data:post.commentHtml/>
  </div>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.commentHtml	Elemen ini akan menghasikan seluruh markup daftar komentar	Sampel

Footer/Kaki Komentar

Elemen ini berisi pesan komentar dan formulir komentar:

<p class='comment-footer'>
  <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='threaded-comment-form'/>
  <b:else/>
    <data:post.noNewCommentsText/>
  </b:if>
</p>

Lihat pada bagian TemplatesV1 - Footer/Kaki Komentar

Popup Komentar

???

<b:if cond='data:showCmtPopup'>
  <div id='comment-popup'>
    <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
    </iframe>
  </div>
</b:if>

Data	Keterangan	Tampilan/Contoh Tampilan
data:showCmtPopup	???	...

Backlink Container

Lihat pada bagian TemplatesV1 - Backlink Container

Label: Kamus Blogspot, Komentar, panduan blogger, Tingkat Lanjut

Membuat Posting Auto Read-More Blogspot Versi Manipulasi Textarea

Unduh Sampel Template

1. URL Blog Desktop dan Seluler

2. Perbedaan Elemen HTML Blog Desktop dengan Blog Seluler

Pastikan Fitur Blog Seluler Aktif

Dua Metode Modifikasi

Metode 1: Menambahkan Kelas Khusus Tampilan Seluler pada Tag <body>

Metode 2: Memanfaatkan Kondisional Seluler

Membedakan CSS Blog Desktop dengan Blog Seluler

Menghilangkan/Menampilkan Elemen HTML

Menggunakan Kondisional Seluler Sebagai Bagian dari Kelas

Terakhir...

Tombol Edit Cepat Posting

Tombol Edit Cepat Widget

Tombol Penghapusan Komentar

JavaScript Thread Komentar

CSS Thread Komentar

TemplatesV1

TemplatesV2

Konten Halaman:

Prolog:

TemplatesV1:

TemplatesV2:

Detail:

TemplatesV1

Header Komentar

Navigasi Komentar

Daftar Komentar

Footer/Kaki Komentar

Backlink Container

TemplatesV2

Header Komentar

Daftar Komentar

Footer/Kaki Komentar

Popup Komentar

Backlink Container

Fotografi

Photoshop

Tutorial Blog

Iklan

Random