Tampilkan postingan dengan label kotak komentar. Tampilkan semua postingan
Tampilkan postingan dengan label kotak komentar. Tampilkan semua postingan

Kamis, 06 November 2008

Kotak Komentar Blogger Sudah Normal kembali

blogger-team Jika pada dua hari kemarin sempat heboh dengan isu kotak komentar blogger yang Error, sehingga untuk mengatasinya harus mengubah Pengaturan bahasa yang di gunakan menjadi inggris (inggris raya). Sekarang sudah tersiar kabar kembali bahwa pihak pengembang blogger sudah berhasil mengatasi masalah ini.

Isu yang lain adalah gadget Follower yang tadinya hanya bisa di gunakan jika pengaturan bahasa di ubah ke bahasa inggris, sekarang sudah mendukung yang berbahasa Indonesia juga, Jadi bagi yang ingin mengubah pengaturan bahasa ke bahasa indonesia sudah bisa di lakukan.

Happy blogging with Blogger!

Senin, 25 Agustus 2008

Memilah Milah Komentar

Informasi ringan namun mudah-mudahan bermanfaat, karena ternyata masih ada yang menanyakan tentang bagaimana cara memilah-milah kemunculan kotak komentar posting, tepatnya pertanyaan tersebut seperti ini “ gimana ya cara ngilangin komentar dalam satu postingan seperti dalam postingan kontak kami?”.

Sebenarnya kotak komentar suatu posting tentu saja bisa kita atur agar bisa di munculkan atau disembunyikan pada posting tertentu, caranya terbilang sangat mudah. Sekarang silahkan anda login ke blogger, kemudian pilih posting baru seolah-olah anda akan memposting suatu artikel. Untuk mengatur apakah pada postingan tersebut akan di munculkan kotak komentarnya atau bahkan di sembunyikan, maka anda tinggal klik tulisan Pilihan Posting di sudut kiri bawah kotak posting. Setelah di klik maka akan terbuka opsi yang bisa anda pilih, yaitu :

 

Komentar Pembaca :

  • Ijinkan
  • Jangan di ijinkan.

 

Tugas anda adalah memberi tanda pada radio button di samping tulisan tersebut, jika anda memilih ijinkan maka kotak komentar nantinya akan muncul dan pembaca postingan tersebut tentu saja bisa memberi komentar. Nah jika anda tidak menginginkan kotak komentar muncul, maka anda tinggal memilih opsi Jangan diijinkan dan tentunya nanti kotak komentar tidak akan muncul, contohnya seperti pada posting kang rohman tentang Kontak Kami. Sangat mudah bukan? atau masih bingung, nih kang rohman berikan screenshot nya, klik pada gambar jika ingin memperbesar :

 

kotak-komentar

 

Apakah postingan yang lama bisa di edit kembali? tentu saja bisa, namun opsi pilihannya berbeda dengan yang baru, yaitu :

 

Komentar Pembaca :

  • Ijinkan
  • Jangan ijinkan, tayangkan yang telah ada
  • Jangan ijinkan, sembunyikan yang telah ada

 

Jika anda memilih opsi yang kedua, maka kotak komentar akan di sembunyikan namun komentar yang sudah terlanjur masuk masih tetap tayang. Nah apabila memilih opsi yang ke tiga, maka kotak komentar akan di sembunyikan dan komentar yang telah masukpun akn ikut di sembunyikan sehingga artikel tersebut tidak ada koementarnya.

 

Semoga bermanfaat.

Selasa, 19 Agustus 2008

Cara Modifikasi Kotak Komentar

Hiks... setelah membaca beberapa pesan yang masuk ke kotak shoutbox, kotak komentar serta kiriman email, rupanya banyak sekali yang menyukai tampilan dari kotak komentar yang kang rohman pakai yaitu kotak komentar yang seperti ini :

 

komentar

Seperti biasanya, kalau banyak yang suka pasti kang rohman di berondong oleh permintaan agar di buatkan tutorial cara membuat kotak komentar yang seperti gambar di atas. Nah, untuk memenuhi hasrat beliau-beliau ini maka kang rohman menyempatkan diri untuk membuatkan tentang bagaimana membuat kotak komentar ini.

Perlu di ketahui sebelumnya bahwa setiap kode template antara yang satu dengan yang lain bisa berbeda bisa juga sama, jika tutorial ini tidak sama dengan kode yang ada pada template anda, maka maaf saja berarti anda kurang beruntung. Sebagai contoh, kang rohman memakai kode template Minima.

Agar tidak terlalu ngalor ngidul karena sekarang kang rohman punya penyakit males ngetik banyak-banyak, maka langsung saja kepada langkah bagaimana cara memodifikasi kotak komentar ala blog kang rohman.

 

  1. Login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Klik tulisan Download Template Lengkap. Silahkan backup dulu templatenya (penting!).
  5. Beri tanda centang/tik pada kotak kecil di samping tulisan Expan template Widget.

     

    expand widget template

     

  6. Tunggu beberapa saat ketika proses sedang berlangsung.

  7. Cari kode pada bagian CSS yang seperti ini :

     

    #comments h4 {
      margin:1em 0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: $sidebarcolor;
      }

    #comments-block {
      margin:1em 0 1.5em;
      line-height:1.6em;
      }
    #comments-block .comment-author {
      margin:.5em 0;
      }
    #comments-block .comment-body {
      margin:.25em 0 0;
      }
    #comments-block .comment-footer {
      margin:-.25em 0 2em;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.1em;
      }
    #comments-block .comment-body p {
      margin:0 0 .75em;
      }
    .deleted-comment {
      font-style:italic;
      color:gray;
      }

     

     

  8. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

     

    #comments h4 {
      margin:0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform:uppercase;
      letter-spacing:.2em;
      color: #000;
      }

    #bg_commentblock {
        width: 548px;
        background: #ffffff;
        float: left;
        padding:20px;
        margin:0 0 10px 0;
        border:1px solid #C0C0C0;
        }

    #commentblock {
        width: 510px;
        background: #E8E8E8;
        text-align:left;
        padding: 20px 20px 10px 20px;
        margin: 10px 0px 0px 0px;
        border-top: 2px solid #333333;
        border-bottom: 1px solid #333333;
        }
    #commentblock ol {
        list-style-type: square;
        margin: 0px 0px 0px 10px;
        padding: 0px 0px 10px 0px;
        }
    .commentdate {
        font-size: 12px;
        padding-left: 0px;
        }
    #commentlist li p {
        margin-bottom: 8px;
        line-height: 20px;
        padding: 0px;
        }

    .commentname {
        color: #333333;
        margin: 0px;
        padding: 5px 5px 5px 0px;
        }

    .commentinfo{
        clear: both;
        }

    .commenttext {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1OGo7mncb7C3m3gzWdfMS3Si_FQ9AKbPMjfmV4hXBSZNmJF30L3YTWLc3GzRs21Tl3AdzrtlFncSkcvMQaRP976URHdr_Sn0kKawu95tcIJByw1iLaVa-CXLrVJ489Bqc9W38Bf-UjPV/s320-r/comment.gif) no-repeat top left;
        }

    .commenttext-admin {
        clear: both;
        margin: 3px 0px 10px 0px;
        padding: 20px 10px 5px 10px;
        width: 490px;
        background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA1OGo7mncb7C3m3gzWdfMS3Si_FQ9AKbPMjfmV4hXBSZNmJF30L3YTWLc3GzRs21Tl3AdzrtlFncSkcvMQaRP976URHdr_Sn0kKawu95tcIJByw1iLaVa-CXLrVJ489Bqc9W38Bf-UjPV/s320-r/comment.gif) no-repeat top left;
        }

     

     

  9. Lihat Ke bagian bawah, dan cari kode yang seperti ini :

     

    <b:includable id='comments' var='post'> 
    <div class='comments' id='comments'> 
    <a name='comments'/> 
    <b:if cond='data:post.allowComments'> 
    <h4> 
    <b:if cond='data:post.numComments == 1'> 
              1<data:commentLabel/>:
            <b:else/>
              <data:post.numComments/> <data:commentLabelPlural/>:
            </b:if>
          </h4>

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

          <dl 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'>
                <a expr:name='data:comment.anchorName'/>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                <b:else/>
                  <data:comment.author/>
                </b:if>
                <data:commentPostedByMsg/>
              </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'>
                <span class='comment-timestamp'>
                  <a expr:href='data:comment.url' title='comment permalink'>
                    <data:comment.timestamp/>
                  </a>
                  <b:include data='comment' name='commentDeleteIcon'/>
                </span>
              </dd>
            </b:loop>
          </dl>

          <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>
              <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>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>

          <p class='comment-footer'>

            <b:if cond='data:post.embedCommentForm'>
              <b:include data='post' name='comment-form'/>
            <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>

          </p>
        </b:if>

     

  10. Hapus / delete kode di atas lalu ganti dengan kode yang ada di bawah ini :

     

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

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

    <div id='bg_commentblock'>

    <h4>

    Komentar :

       </h4>

       <div id='commentblock'><!--commentblock-->

    <strong>ada</strong> <b:if cond='data:post.numComments == 1'>1
            <b:else/>
               <strong><data:post.numComments/> <data:commentLabelPlural/> ke &#8220;<data:post.title/>&#8221;</strong>
            </b:if>

          <dl class='commentlist'>
            <b:loop values='data:post.comments' var='comment'>
              <span><dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
                <a expr:name='data:comment.anchorName'/>
                <b:if cond='data:comment.authorUrl'>
                  <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                <b:else/>
                  <data:comment.author/>
                </b:if>
                <data:commentPostedByMsg/>
              </dt>pada hari&#160;<dd class='comment-footer' style='display:inline; margin:0px'>
                <span class='comment-timestamp'>
                  <a expr:href='data:comment.url' title='comment permalink'>
                    <data:comment.timestamp/>
                  </a>
                  <b:include data='comment' name='commentDeleteIcon'/>
                </span>
              </dd></span>
              <dd class='commenttext'>
                <b:if cond='data:comment.isDeleted'>
                  <span class='deleted-comment'><data:comment.body/></span>
                <b:else/>
                  <p><data:comment.body/></p>
                </b:if>
              </dd>
            </b:loop>
          </dl>
          <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>
              <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>
              <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
                <data:post.newestLinkText/>
              </a>
            </span>
          </b:if>

          <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>

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

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

    </p>
        </div><!--end commentblock-->

    </div>
        </b:if>

     

     

  11. Klik tombol Simpan Template.

  12. Selesai. Silahkan lihat hasilnya.

      

Kode-kode diatas tentunya tidaklah mutlak harus seperti itu, jika anda sedikit familiar dengan css, maka anda bisa berkreasi lebih. Terutama pada bagian lebar kotak komentar, anda harus menyesuaikan dengan lebar kotak komentar template anda. Sedikit petunjuk, untuk mengubah lebar kotak koemntar di atas, anda tinggal mengganti nilai dari width nya, contoh : width: 548px; di ubah jadi width: 500px; atau berapa saja sesuai dengan template anda.

Nah itulah tutorial singkat yang anda tunggu-tunggu selama berbulan-bulan, semoga dapat mengobati rasa kesal yang selama ini mengganjal di hati anda.

 

Selamat mencoba.

Rabu, 09 Januari 2008

Comment box inside post untuk template klasik


Dulu ketika saya pertama kali membuat blog, saya lebih menyukai
template klasik daripada template yang baru, alasan utamanya yaitu
untuk template klasik kode html templatenya sangat mudah untuk
di otak-atik dan tidak seribet template baru yang sering muncul
pesan error ketika melakukan editting. Maka pada waktu
tutorial yang saya tulispun lebih dominan membahas tentang yang berhubungan
dengan template klasik.


Seiring berjalannya waktu saya tergoda untuk memakai template baru karena
semakin hari semakin banyak pula fasilitas yang di tawarkan oleh pihak blogger,
maka akhirnya saya putuskan untuk bermigrasi ke
template baru. Setelah perpindahan tersebut rupanya perilaku saya dalam menulispun
ikut terbawa, sekarang tulisan saya hampir semuan berhubungan dengan
yang namanya template baru sehingga template klasik hampir sudah di lupakan.


Hal ini rupanya membuat sedikit kurang nyaman bagi pembaca setia blog saya yang masih menggunakan
template klasik, ambil contoh saya pernah memposting sebuah artikel yang membahas tentang bagaimana cara membuat
kotak komentar yang langsung di dalam halaman posting
tanpa harus membuka window baru layaknya kotak komentar blogger pada umumnya. Tulisan tersebut
memang saya tujukan bagi mereka yang menggunakan template baru, terus bagaimana
kalau untuk template klasik?
begitulah permintaan beberapa orang pembaca yang
masih menggunakan template klasik.


Hmmmmmm.... tampaknya memang tak adil juga ya perilaku saya selama ini. Untuk
sedikit memenuhi hasrat beliau-beliau yang masih menggunakan template klasik,
maka tulisan kali ini saya akan mencoba membahas bagaimana cara membuat kotak
komentar yang langsung di bawah postingan.


Sebelumnya saya tegaskan bahwa tulisan ini khusus bagi anda yang memakai
template klasik bukan untuk template baru, namun demikian kalau untuk sebatas
pengetahuan saja tentunya tidak di larang, silahkan saja di baca.


Perlu anda ketahui bahwa desain template sangatlah variatif, sehingga mungkin
kode-kode yang saya terangkan tidak akan sama persis dengan kode template yang anda miliki.
untuk itu tulisan ini saya merujuk kepada kode template yang standar di pake oleh template blogger
dalam hal ini saya mengambil contoh pada template minima (template asli blogger).


Terlalu lama berbasa-basi? Ok,.. langsung saja. Untuk membuat kotal komentar
langsung di dalam posting pada template klasik, silahkan ikuti langkah-langkah berikut :


Langkah #1



  1. Sign in di blogger dengan ID anda.


  2. Pada halaman dashboard, klik Pengaturan.


  3. Klik tab Komentar.


  4. Cari tulisan Tampilkan komentar dalam sebuah window popup?, pilih ya. Perhatikan gambar di bawah :


  5. kotak komentar

     


  6. Klik tombol   simpan pengaturan

 



langkah #2

  1. Klik tab Edit HTML


  2. Copy seluruh kode html template anda, lalu paste pada notepad kemudian Save dulu untuk backup (penting jangan sampai tidak di lakukan).


  3. Cari kode seperti di bawah ini :




  4. <a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>>

    <span style="text-transform:lowercase"><$I18NNumComments$></span></a>


     


  5. Hapus/delete kode di atas, lalu ganti dengan kode berikut :















  6. Cari kode seperti ini :




  7. <BlogItemCommentsEnabled><a name="comments">



  8. Hapus/delete kode di atas, lalu ganti dengan kode berikut :















  9. Coba tuju ke bagian bawah, lalu cari kode seperti berikut :




  10. <p class="comment-timestamp">

    <a href="<$BlogURL$>"><< <$I18NHome$></a>

    </p>


    </div>

    </itempage>




  11. Hapus/delete kode di atas, lalu ganti dengan kode berikut :















  12. Klik tombol Simpan Perubahan Template.


  13. Selesai. Silahkan lihat hasilnya!


 



Manilik kepada pengalaman yang lalu pada template baru, ada beberapa
komentar yang masuk bahwa beliau-beliau ini sudah berulang kali mencoba
akan tetapi gagal terus, setelah saya coba riview blog nya ternyata kotak komentarnya
sudah berhasil di buat, ini ada kemungkinan beliau ini meriview blognya di bagian
halaman depan saja dan tidak membuka halaman posting. Untuk itu saya
tegaskan bahwa ketika anda ingin melihat hasilnya, anda harus membuka sebuah
halaman posting. Caranya yaitu apabila halaman post anda mempunyai sistem Read more..
maka klik lah link Read more.. tersebut untuk membuka sebuah poastingan.
Jika tidak mempunyai sistem Read more.., silahkan klik pada judul yang ada
di posting sebelumnya (untuk template klasik).


Untuk sekedar melihat contoh dari yang saya terangkan di atas, silahkan anda klik di sini!


Informasi tambahan saja bahwa sebenarnya tutorial ini pernah di bahas oleh sahabat
saya mas abi,
bagi yang merasa kesulitan dengan yang saya terangkan, coba kunjungi saja blog beliau. Mungkin pembahasan beliau
lebih mudah untuk di pahami.


Selamat mencoba !

Sabtu, 01 September 2007