Kotak Komentar Berada Di Atas Komentar Pengunjung

Ada Sejuta Trik membuat komentar blogspot yang unik.  Kemarin saya juga posting membuat background avatar pengunjung (Klik untuk membacanya). Trik lain yang membuat komentar blog kita unik salah satunya membuat kotak komentar berada di atas komentar pengunjung. Apa maksud Kotak Komentar Berada di Atas Komentar Pengunjung? Berikut ini penjelasannya. Secara default kotak komentar berada di bawah komentar pengunjung. Sebagai urutannya adalah 

Judul Posting > Komentar Pengunjung > Kotak Komentar 

maka kita ganti dengan urutan

Judul Posting > Kotak Komentar > Komentar Pengunjung

Sebagai contoh lihat posting saya yang sudah ada komentarnya di cara menggunakan fitur facebook timeline.

Dari posting saya tersebut terlihat kotak komentar yang lain dari yang lain yaitu kotak komentarnya berada di atas pengunjung. Lantas bagaimana membuatnya? Caranya cukup mudah kok. Ikuti langkah-langkahnya dengan cermat. he2.

1. Loging Blogger

2. Klik Design

3. Klik Edit HTML

4. Centang    Expand Widget Templates nya.

5. Jangan lupa Download full Template agar bisa di kembalikan jika terjadi kesalahan.

6. Siapkan air putih agar tidak pusing melihat kodenya.

7. Jika sudah semua silakan cari kode yang mirip seperti milik saya berikut ini :

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

      </p>
    </b:if>

8. Jika sudah COPY dan CUT semuanya seperti kode di atas mulai dari <p class='comment-footer'> sampai </b:if>. 

Cara ini dimaksudkan untuk memindah form kotak komentar agar berada di atas komentar pengunjung.

9. Buka NOTE PAD dan PASTE semua kode no 7 tadi.

10. Sekarang penempatan kode yang sudah di pindah ke notepad tadi di pindah ke atas. Caranya:

Cari lagi code yang seperti ini: <dl expr:class='data:post.avatarIndentClass' id='comments-block'> jika tidak ketemu coba yang ini <dl id='comments-block'> atau yang ini <div id='comments-block'>.

11. Pastekan semua kode yang sudah kita pindah di notepad tadi di atas salah satu kode no. 10.

12. Klik untuk menyimpan pekerjaan sobat.

Dengan cara tersebut kita dapat memindah posisi form kotak komentar blogspot akan berada di atas komentar pengunjung seperti Sejuta Trik Blogger blog punya saya ini. Sekian sharing pengalaman saya membuat kotak komentar berada di atas komentar pengunjung. Semoga membantu.

Happy Blogging!
by. Sejuta Trik Blogger

Special Thanks To : Hantu Facebook on Post

Menyembunyikan Kotak Komentar 2

Menyembunyikan kotak komentar 2 adalah menyembunyikan form isian yang biasanya ada di bawah kotak posting. Menyembunyikan kotak komentar 2 ini berfungsi untuk mengganti dengan kotak komentar yang lebih menarik.

Menyembunyikan kotak komentar 2 ini adalah kelanjutan dari posting Menyembunyikan kotak komentar pada posting tertentu. Cara ini berbeda fungsi dengan posting saya yang terdahulu. Tujuan dari menyembunyikan kotak komentar ini adalah :

1.  Menyembunyikan kotak isian untuk berkomentar (comment form)

2. Walaupun kotak komentar disembunyikan tetapi masih menampilkan komentar pengunjung.

3.  Merapikan halaman posting dari form komentar itu sendiri. Sebagai contoh blog saya ini.

Untuk lebih jelasnya tentang menyembunyikan kotak komentar 2 ini, lihat gambar di bawah ini

OK, langsung saja kita praktek.

Cara 1 

Cari kode berikut ini  dan hapus

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

Cara 2 

Kita hanya menambah CSS kedalam blog kita. Seperti yang kita tahu bahwa CSS untuk kotak komentar adalah #comment-form atau .comment form { silakan disesuaikan. 

Cari kode CSS komentar blog dan pastekan kode berikut :

#comment-form {
display:none;
}

atau

.comment-form {
display:none;
}

Jika anda bingung, pastekan saja di atas ]]></b:skin>

Untuk cara no.1 memang kotak komentar sudah tersembunyi, tetapi untuk kelanjutannya, pengunjung tidak akan bisa berkomentar lagi. Saya menyembunyikan kotak komentar ini untuk memasang lightbox pada kotak komentar di blog ini. So, tentukan pilihan sahabat untuk tujuan apa kalian menyembunyikan kotak komentar tersebut!

Image by : Informasibisnis.net

Happy Blogging! by. Sejuta Trik Blogger

Mengatasi Duplikat Title Komentar Blogspot

Duplikat title atau judul ganda dapat terjadi di bagian judul artikel blog maupun di area komentar blogspot. Artikel ini saya khususkan untuk membahas trik mengatasi judul ganda pada area komentar blogspot. Template bawaan blogger perlu sedikit penambahan fungsi agar konten ganda tidak terjadi. Kamu akan menemukan masalah ini jika sebuah artikel sudah mempunyai komentar dan sudah diindeks sempurna oleh mesin pencari. Sebagai contoh lain duplikat title saat di Google Webmaster yaitu masalah duplikat tag dynamic view.

Masalah duplikat title jika diabaikan tidak begitu terlihat nyata dampaknya, namun lakukan perubahan ini untuk memenuhi kualitas SEO blog kamu. Tehnik SEO ini adalah tehnik SEO On Page dan jika tidak segera diperbaiki maka akan timbul masalah baru pada Google Webmaster Tools serta berpengaruh pada kualitas internal blog itu sendiri.

Dari pengalaman saya google juga akan menambahkan informasi lain terkait sebuah artikel dari area komentar juga. Artikel yang mendapat berbagai komentar dapat menambah kekuatan informasi artikel. Itulah sebabnya pemilik blog sebaiknya selektif dalam mempublikasikan komentar pengunjung. Komentar pengunjung yang tidak berkaitan dengan artikel sebaiknya dihapus.

Lanjut pada pembahasan belajar tentang SEO untuk mengatasi duplikat title komentar, perhatikan alamat berikut : http://namablogkamu/2012/01/memperbaiki-kode-komentar-blogspot.html serta http://namablogkamu/2012/01/memperbaiki-kode-komentar-blogspot.html?showComment=1234567891011#[id komentator]dan[id posting]

Alamat pertama adalah alamat artikel blog kita sedangkan alamat kedua adalah alamat artikel dan sudah terdapat komentar terpublish. Keduanya dapat dibaca oleh mesin pencari dalam satu halaman. Akan tetapi kode dalam komentar blogspot masih menggunakan tag yang sama dengan judul artikel. Itulah sebabnya banyak mesin pencari dapat mengindikasi terjadi duplikat title.
Untuk mengatasi masalah ini dapat dilakukan dengan cara mengganti kode url permalink komentar blogger dengan kode custom.
Berikut caranya :

Cari kode berikut
<a expr:href='data:comment.url' title='comment permalink'> <data:comment.timestamp/> </a>
Ganti dengan kode berikut
<b:if cond='data:post.commentPagingRequired'><a expr:href='data:comment.url' title='comment permalink'><data.comment.timestamp/></a><b:else/><a expr:href='data:blog.url +”#” + data:comment.anchorName’ rel=’nofollow' title='comment permalink'><data:comment.timestamp/></a></b:if>
Cara belajar SEO sederhana ini saya sudah buktikan dari beberapa tahun lalu dan hasilnya cukup untuk memperbaiki kesalahan tag title komentar blogger. Teman-teman bisa mengecek problem duplikat title ini pada website www.spotibo.com

Membuat Komentar Lightbox

Membuat Komentar Lightbox dengan Jquery ini memang jarang digunakan oleh kebanyakan blogger. Dikarenakan dapat menimbulkan error di Google web Master Tool. Akan tetapi tampilan akan semakin memancing orang untuk berkomentar di blog kita.

Sejuta trik tidak menjamin dengan membuat komentar lightbox di blogger akan menambah trafik atau membuat banyak pengunjung. So semua terserah pada sahabat semua. 

Bagi yang belum tahu apa itu lightbox, bisa berkunjung di Cara membuat Lightbox dengan Jquery. Jika sudah membaca? Sekarang sebagai contoh membuat komentar lightbox ini.

Lihat gambar di atas! Bagaimana sahabat? itulah yang disebut komentar lightbox dengan Jquery. Mau membuatnya?

Baiklah, kita mulai saja pembahasan tentang membuat komentar lightbox ini. Kometar lightbox ini menggunakan jquery sebagai dasar pembuatannya. Silakan lakukan dengan runtut langkah-langkah  berikut :

Langkah 1: Pemasangan CSS

Copy dan Paste kode di bawah ini :


#superbox-overlay{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%;background:#111;}
#superbox-wrapper{position:fixed;z-index:9999;top:0;display:table;width:100%;height:100%;}
#superbox-container{position:relative;display:table-cell;width:100%;height:100%;vertical-align:middle;margin:0;padding:0;}
#superbox{background:#fff;border:5px solid #ca1717;margin:0 auto;padding:10px;}
#superbox-container .loading{text-align:center;width:32px;height:32px;text-indent:-9999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4ljHYTSrY-GheRNAil91IBLGMA_cyBx7suVT-WFoJTsrQ1jtdLYiE8gRBPUHCuYjhATXbsBxPopk3azsztcQrbH5opjD6aB5oPGznAVJF5X0kIIHWQSGGnjl_UkroX203g7FQydljaPI/s320/loader.gif) no-repeat 0 0;margin:0 auto;}
* html #superbox-overlay{position:absolute;height:expression(document.body.scrollHeight>document.body.offsetHeight?document.body.scrollHeight+'px':document.body.offsetHeight+'px');}
* html #superbox-wrapper{position:absolute;margin-top:expression(0-parseInt(this.offsetHeight/2) 0 (document.documentElement&&document.documentElement.scrollTop||document.body.scrollTop) 0 px);}
#superbox-innerbox{padding:10px 0;}
#superbox.image{text-align:center;}
#superbox .close a{float:right;line-height:20px;background:#333;cursor:pointer;padding:0 5px;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;line-height:20px;background:#333;cursor:pointer;color:#fff;padding:0 5px;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
.author-comments{color:#0000ff;background:#ffffff;border:2px solid #0000ff;padding:3px;}
.status-msg-wrap,.feed-links,.comment-form{display:none;}
.post a:hover img,#searchform #s:focus{border:1px solid #999;}
#comments-block .comment-author,.profile-datablock{margin:.5em 0;}
:first-child+html #superbox-container,* html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
:first-child+html #superbox,* html #superbox{position:relative;top:-50%;display:block;}

Letakkan kode tersebut di atas ]]></b:skin>

Untuk kode aslinya anda bisa melihat sumber di Official Websitenya Superbox : Jquery Superbox

Dalam web tersebut sudah memuat javascript, jquery dan CSS yang digunakan untuk memanipulasi atau menampilkan efek lightbox pada form. Kita fokuskan pada kotak komentar.

Langkah 2: Menampilkan Link Komentar

Yang perlu kita lakukan adalah membuat sebuah link yang berfungsi menampilkan <div>#comment-form (Pemanggilan form kotak komentar) dalam bentuk modal Lightbox. Pertama-tama, carilah kode berikut ini:

<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'>
            <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:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl'><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>

kemudian tambahkan kode

<a href='#comment-form' rel='superbox[content][400x420]'>TINGGALKAN KOMENTAR</a>

Gunakan ukuran modal box yang sesuai. Pada kode di atas, [400x420] berarti modal box yang ditampilkan berukuran panjang 400px dan lebar 420px. (Kode ini menampilkan ajakan untuk berkomentar). Kalau diblog saya berupa gambar bertuliskan "Klick here to leave comment" Kemudian tambahkan kode tersebut tepat setelah kode:

</b:loop>

Langkah 3: Pemasangan Script Lightbox
Kemudian pasang javascript berikut di bawah </head> atau di atas </body> terserah sahabat mau memasang di mana.

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://viemonsta.googlecode.com/files/dev_mobile_for_blogger.js' type='text/javascript'/>
<script src='http://viemonsta.googlecode.com/files/devbook.js' type='text/javascript'/>
<script src='http://viemonsta.googlecode.com/files/jquery.superbox-min.js' type='text/javascript'/>

Catatan :
a. Jika kalian sudah memasang kode no 1, di hapus saja kode tersebut.
b. Kode JS tersebut sudah terpasang berbagai macam fungsi, seperti JS Back to Top, Mobile Template, dll.
c. Untuk di blog ini, saya hanya mengaktifkan superbox on form. Jadi pergunakan dengan sebaik-baiknya!

Langkah 4 : Menyembunyikan Kotak Komentar (Comment Form)

Jika sudah simpan template sobat. Jika semua berjalan dengan baik dan sudah bisa digunakan, langkah terakhir adalah menyembunyikan kotak komentar. Langkah ini adalah langkah yang paling sulit. Untuk komentar yang sudah dimodifikasi kadang perlu ketelitian. Gunakan dengan cara yang saya berikan di Cara Menyembunyikan Kotak Komentar 2. Lihat hasilnya dan semoga dalam membuat komenta lightbox sukses dan berjalan dengan baik. Jika ada kendala malasah efek lightbox pada komentar blogspot, Silakan tinggalkan pesan!

Happy Blogging! by. Sejuta Trik Blogger

JS Code by : www.Devbook.net

Menambah Background Avatar Pada Komentar Pengunjung

Berbicara kotak komentar memang banyak sekali hal-hal yang bisa kita utak-atik. Seperti merubah warna komentar admin berbeda dengan pengunjung, komentar dengan background dll. Nah terinspirasi dari web favorit saya kibagus. Dimana kotak komentarnya lain dari pada yang lain.

 

Pada blog tersebut bahwa setiap komentar apakah itu menggunakan profil blogger, anonymous, atau name dan url, akan muncul gambar avatar pada komentar pengunjung. Sebagai contoh lihat gambar di atas!

Untuk menambah background avatar pada komentar pengunjung ini juga sudah dijelaskan di Infonetmu. Namun tidak ada salahnya kalau kita berbagi pada orang yang belum tahu seperti saya ini. Belum lagi kasus saya mengikuti tutorial tersebut dimana salah satu kode gagal di temukan atau berbeda dengan yang dijelaskan. Baik langsung saja trik menambah background avatar pada komentar pengunjung.

1. Login ke blog kamu!

2. Klik Design

3.  Klik Edit HTML

4. Download Full template untuk backup template kamu

5. Jangan lupa : Centang   Expand Widget Templates

6. Cari kode :

]]></b:skin>

7. Copy dan paste kode ini di atasnya :

#comments-block .avatar-image-container img {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJwL9C7gnEvLbHiol9NnKT2fqAQSdW98lA-jfM8FOhRYLlORNlR5NzFN_8NYBxBpvUnyzL698FHa7JfDTqJ7l2cbAG9Q_lHIeuq63xNWFXpd0ncMX1VKMxQTP-jnxV-3eMszYWcIs71S5b/s1600/arrow-right+copye.png) no-repeat left top; width:35px;height:35px}

8. Cari kode di bawah ini :

<dl id='comments-block'>

Jika kode di atas tidak ketemu mungkin kodenya seperti ini : <dl class='comments-block' id='comments-block'>

9. Hapus kode no 8 dan ganti dengan kode :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

10. Cari lagi kode di bawah ini :

<a expr:name='data:comment.anchorName'/>

11. hapus dan Ganti juga kode no 10 dengan

<b:if cond='data:comment.favicon'>
      <img expr:src='data:comment.favicon'/>
      </b:if>
      <a expr:name='data:comment.anchorName'/>
      <b:if cond='data:blog.enabledCommentProfileImages'>
      <div expr:class='data:comment.avatarContainerClass'>
      <data:comment.authorAvatarImage/>
      </div>
      </b:if>

12. Jika sudah simpan template sobat.

Lihatlah salah satu posting sobat yang ada komentar dengan anonymous atau name dan url. Saya rasa sobat sudah bisa trik menambah background avatar pada komentar pengunjung. Dengan trik ini komentar anonymous atau komentar yang menggunakan name dan url akan terlihat avatarnya.

NB.

URL no.7 bisa sobat ganti dengan url sobat. Sebagai referensi sobat bisa menggunakan icon di bawah ini. Ukuran iconnya kurang lebih 35 x 35

Menyembunyikan Komentar Pada Posting Tertentu

Menyembunyikan komentar pada posting tertentu merupakan pilihan bagi admin blog. Entah apa maksud dari pemilik blog untuk menyembunyikan kotak komentar pada posting tertentu. Yang jelas itulah pilihannya. Atau malah mau mengubah kotak komentar berada di atas pengunjung? Klik saja untuk melihatnya! Emmm,

Belum lagi jatah pages di blogger hanya 10 halaman. Jelas ini kurang bagi saya jika halaman tersebut akan diposting untuk tidak ada komentarnya.

Untuk masalah komentar, blogger memang jarang sekali mengadakan pembaharuan. Sekali ada perubahan hanya masalah ukuran kotak komentar yang bisa didrag.

Untuk mengatasi masalah menyembunyikan kotak komentar pada posting tertentu, kita tidak usah mengedit HTML blog kita. Cukup pada saat posting seperti biasa. Kita pun sudah bisa menyembunyikan kotak komentar pada salah satu posting.

Nah, untuk cara hiden kotak komentar pada posting tertentu silahkan cermati cara berikut ini :

Posting Baru

1. Posting seperti biasanya
2. Jika sudah klik Post Options
3. Klik opsi seperti gambar di bawah ini

4. Klik Publish Post atau Preview
5. Selesai

Posting Lama
Caranya sama dengan Edit atau Publish ulang blog sahabat dengan cara seperti di atas.

Nah seperti itulah cara menyembunyikan komentar pada posting tertentu. Semoga kata-kata pembuka tips trik ini tidak menyurutkan niat sahabat dalam menyembunyikan kotak komentar pada posting tertentu yang sebenarnya sangat simple. he2

Happy Blogging!
by. Sejuta Trik Blogger

Membuat Komentar Facebook Valid HTML 5

Membuat Komentar Facebook Valid HTML 5 adalah pilihan ke2 setelah menambah komentar discus di blog untuk membuat kotak komentar yang valid HTML 5. Memang kotak komentar facebook memiliki banyak sekali eror. Belum lagi jika komentar pengunjung sudah saking buanyaknya. Justru akan menambah eror yang lebih banyak lagi.

Bagi sahabat yang sampai hari ini belum juga memasang komentar yang valid html 5. Ataupun bagi sahabat yang masih menggunakan template doctype STRICT atau TRANSITIONAL yang masih belum berhasil, Berikut cara yang mungkin dicoba.

DEMO

1. Silakan Menuju ke http://developers.facebook.com/setup/
2. Klik Aplikasi
3. Anda akan dibawa pada gambar di bawah ini (Isikan sesuai selera) Toh tidak terlihat siapa pun.

4. Klik lanjutkan dan Anda akan di bawa ke gambar di bawah ini

 5. Klik Kirim, dan akan menjumpai seperti di bawah ini

6. Simpan hasilnya. Dan menuju ke https://developers.facebook.com/docs/reference/plugins/comments/

7. Jika sudah klik Get Code

8. Kode di atas akan kita tempatkan berbeda tempat.

9. Kode no.1 kita taruh pada EDIT HTML di bawah <body>

10. Jika sudah, Klik simpan. Untuk kode no.2 kita taruh di ADD ELEMENT seperti menambahkan widget. (ukuran kotak komentar secara default adalah 500. Silakan edit sesuai selera.

11. Taruh dimana anda suka, entah dibawah posting, di bagian header atau footer terserah kita.


PENTING!
Kode HTML pada gambar 7 adalah kode untuk HTML 5. Jadi apabila kita menggunakan strict atau transitional silakan klik dulu iframe.

Nah. Itu saja tentang membuat komentar facebook valid html 5. Semoga membantu.

Update !
Untuk teman-teman yang ingin memiliki template valid HTML 5 sekaligus SEO Friendly khusus blogger silakan Download Template SEO Friendly Valid HTML 5

Happy Blogging! by. Sejuta Trik Blogger

Membuat Recent Comment Hanya Nama

Maksud Membuat Recent Comment Hanya Nama sesuai judul di atas maksudnya adalah menghilangkan tanggal posting, judul posting, dan isi komentar itu sendiri. Jadi dalam membuat recent comment hanya nama ini untuk menampilkan link nama komentator.

Sebagai contoh lihat gambar di bawah ini :

Nah untuk membuatnya, silakan Login ke Blogger>>Design>>Add HTML. (atau lebih mudahnya kita tambahkan widget seperti biasa) Kemudian pastekan di dalamnya kode di bawah ini :

<script>// ----------------------------------------
// SHOW RECENT COMMENTS
// ----------------------------------------
// This functions takes a blogger-feed in JSON
// format and displays it.
//
// Version: 1.0
// Date:    2006-12-01
// Author:  Hans Oosting
// URL:     beautifulbeta.blogspot.com
// ----------------------------------------

function showrecentcomments(json) {
  for (var i = 0; i < numcomments; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
   alturl = alturl.replace("#", "#comment-");
   var postlink = alturl.split("#");
   postlink = postlink[0];
   var linktext = postlink.split("/");
   linktext = linktext[5];
   linktext = linktext.split(".html");
   linktext = linktext[0];
   var posttitle = linktext.replace(/-/g," ");
   posttitle = posttitle.link(postlink);
   var commentdate = entry.published.$t;
   var cdyear = commentdate.substring(0,4);
   var cdmonth = commentdate.substring(5,7);
   var cdday = commentdate.substring(8,10);
   var monthnames = new Array();
   monthnames[1] = "Jan";
   monthnames[2] = "Feb";
   monthnames[3] = "Mar";
   monthnames[4] = "Apr";
   monthnames[5] = "May";
   monthnames[6] = "Jun";
   monthnames[7] = "Jul";
   monthnames[8] = "Aug";
   monthnames[9] = "Sep";
   monthnames[10] = "Oct";
   monthnames[11] = "Nov";
   monthnames[12] = "Dec";
   var comment = entry.content.$t;
   var re = /<\S[^>]*>/g;
   comment = comment.replace(re, "");
   if (showcommentdate == true) document.write('Tanggal ' + cdday + ' '+ monthnames[parseInt(cdmonth,10)] + ' ' + cdyear + ' ');
   document.write('<a href="' + alturl + '">' + entry.author[0].name.$t + '</a> ');
   if (showposttitle == true) document.write(' pada ' + posttitle);
   document.write('<br/>')
  }

}</script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = false;var standardstyling = false;</script> <script src="http://sejutatrik.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

Keterangan :

var numcomments = 5;            Jumlah komentar yang tampil

var showcommentdate = false; Tampilan tanggal komentar (ganti false dengan true untuk menampilkan)

var showposttitle = false;         Tampilan judul komentar(ganti false dengan true untuk menampilkan)

var numchars = false;               Rincian untuk komentar(ganti false dengan angka jumlah karakter komentar)

var standardstyling = false;       Tampilan komentar standar
ganti http://sejutatrik.blogspot.com/ dengan url blog sobat.

Kelebihan dari membuat recent comment hanya nama ini adalah kita tidak menggunakan javascript dari url blog lain. Jadi loading menjadi lebih cepat. Bukankah loading yang cepat salah satu kriteria blog itu SEO Friendly? Semoga menjadi telaah kita bersama. Nah akhir kata selamat mencoba.

Happy Blogging!
by. Sejuta Trik Blogger

Blogger Default Bisa Valid HTML5

Ternyata menggunakan Blogger Default Bisa Valid HTML5. Artinya dengan menggunakan widget, label, komentar, dan pernak-pernik lain bawaan blogger atau blogspot, blogger dapat Valid HTML5. Seperti kita tahu bahwa beberapa pernak-pernik bawaan blogger banyak mengandung eror. Seperi kotak komentar yang erornya banyak, Label blog, Kategori, bahkan yang ditakuti seperti navbar blogger.

Untuk kebanyakan blog Validasi Template Blogger memang dikesampingkan dengan alasan kurang memenuhi harapan si admin. Tapi bagi yang cinta validasi baik itu XHTML atau HTML5, Validasi perlu diusahakan walau sampai titik darah penghabisan :(

Saat blogwalking sejuta trik menemukan sebuah blog yang ternyata Valid HTML5. Tidak sekedar halaman depan atau home page saja. Tetapi blog tersebut lolos Valid HTML5 tiap artikel juga. Usut punya usut ternyata si admin menggunakan popup komentar blogger.

Untuk mengetahui blog yang sudah Valid HTML5 baik itu di halaman depan atau homepage maupun tiap artikel atau tiap posting, Berikut saya berikan nama blognya di Blog Mahesa Putra. Tidak seperti milik hendro prayitno yang menggunakan komentar Discus. Terus terang saya sendiri kurang familiar dengan komentar Discus ini. Bagaimana dengan sahabat?

Setelah melihat blog tersebut segera saya melakukan pengeditan template yang berfokus pada komentar blogger. Alhamdulillah dengan menggunakan template lama, saya juga berhasil membuat blog saya Valid HTML5 walaupun masih asal Valid. :D. Dan blog yang valid tiap postingnya adai di blog saya yang beralamat di :

http://ahmad-maryuki.blogspot.com/

Dengan begitu blogger default pun bisa Valid HTML5.Bagi sahabat yang menginginkan template blog Valid HTML5 bisa melihat pada artikel sebelumnya di :
Free Premium Blogger Template Valid HTML5
SEO Friendly Blogger Template Valid HTML5

Perhatian! Blog ini hanya untuk tutorial, Jadi untuk masalah Valid HTML5 bisa lihat hasilnya di posting tersebut.

Trik Optimasi SEO Menu Pengaturan Blogspot

Halo bloggers! Selamat datang di blogspot baru! Platform milik Google dengan sejuta fitur untuk media ngeblog. Bagi anda yang belum familiar dengan blogspot, atau baru saja blogging dan membuat blog. Artikel ini bertujuan agar blog memiliki performa maksimal khususnya optimasi seo blogspot. Untuk memaksimalkan performa dan kualitas SEO blog, perlu adanya pengaturan pada menu-menu blogger. Berikut ini kami sajikan beberapa trik optimasi menu pada pengaturan blogspot.

Tahukah anda blogger sudah mengalami perubahan (versi) sejak 2003 lalu. Anda bisa menghubungkan beberapa layanan google lainnya seperti Google Adsense, Search Console, Google Analytic, daftar blog bacaan dan beberapa layanan lainnya. Kesemua layanan itu dapat diakses melalui menu pengaturan blogspot ini. Halaman ini saya buat untuk menjadi pintu masuk membuat blog lebih SEO dan profesional. Berikut menu-menu pengaturan blogspot agar blog semakin baik.

1. POST

A. New Entri
B. All Posts
C. Draft
D. Publish

2. STATS

A. Ikhtisar
B. Postingan
C. Sumber Lalu Lintas
D. Pemirsa

3. COMMENTS

A. Diterbitkan
B. Menunggu Moderasi
C. Spam

4. EARNING

A. Dasboard Adsense
B. Pengaturan Tampilan Adsense
C. Tukar Akun Adsense
D. Bantuan Adsense

5. PAGES

A. New Entri Page
B. All Posts Page
C. Draft Page
D. Publish Page

6. LAYOUT

Berisikan widget yang terpasang pada blog serta tata letaknya.

7. THEME

A. Sesuaikan
B. Edit Template
C. Mobile View
D. Back to Default

8. SETTINGS

A. Setelan Dasar
1. Judul
2. Deskripsi
3. Privasi
4. Alamat Blog
5. HTTPS
6. Pembaca Blog
B. Post, Komentar, Berbagi
1. Tampilan Posting
2. Template Entri
3. Tampilan Gambar Lightbox
4. Lokasi Komentar
5. Siapa yang dapat mengomentari
6. Moderasi Komentar
7. Verivikasi Kata
8. Pesan Komentar
C. Setting Email
1. Alamat Email Entri untuk Blogspot
2. Email Notifikasi Komentar
3. Email Posting
D. Bahasa dan Setting Format
1. Bahasa
2. Aktifkan Transliterasi
3. Format Zona Waktu
4. Format Header Tanggal
5. Format Tamestamp
6. Format Stempel Komentar
E. Preferensi Penelusuran
1. Deskripsi Meta Tag
2. Pesan Khusus Erorr Page
3. Pengalihan Khusus
4. Google Search Console Blogger
5. Setting Robots.txt
6. Setting Tag Robot Tajuk Khusus
7. Ads.txt Khusus
F. Pengaturan Lainnya
1. Pengaturan Konten dan Isi Blog
2. Pengaturan Video di Blog
3. Pengaturan Penghapusan Blog
4. Feed Blog
5. Pengaturan Blog khusus Dewasa
6. Google Analytic di Blogspot
G. Setelan Pengguna
1. Profil Pengguna
2. Penggunaan Draf Blogger
3. Bahasa di Blogspot

9. READING LIST

Menampilkan artikel atas blog yang diikuti.

10. HELP

Untuk lebih jelasnya tentang pengaturan menu blogspot ini kunjungi pusat bantuan blogger dari Google help.

Kunjungi link tersebut untuk melihat artikel kami tentang menu-menu dan setting pengaturan blogger

Cara Compress Blogspot Yang Benar

Cara Compress Blogspot Yang Benar menurut Sejuta Trik Blogger adalah suatu cara optimasi blogspot menggunakan alat-alat website baik itu software (ofline) ataupun situs penyedia jasa compress (online) dengan maksud untuk mempercepat loading atau muat secara utuh suatu blog.

Di dalam SEO tentunya kecepatan atau loding suatu blog atau website menjadi pertimbangan bagi search engine agar tampil di posisi utama hasil pencarian. Memang saat blog kita lama memuat secara penuh juga akan membuat pengunjung blog kita kabur karena jengkel dengan loading blog yang sangat lama. Nah sahabat tidak ingin semua itu terjadi kan?

Setelah mondar-mandir di mbah google ternyata tutorial yang disajikan semuanya asal-asalan. Kenapa saya bilang asal-asalan, karena tidak mementingkan keselamatan dari blog pengunjung. (Mohon maaf jika kata-kata saya ini menyinggung blogger lain).

Saya sempat emosi, dikarenakan saya sudah percaya 100% eh ternyata setelah dipraktekkan blog menjadi rusak alias kurang sesuai harapan. Tapi tidak apa-apa dengan begitu saya jadi semangat menulis artikel ini. Bagi sahabat yang sudah mengalami kejadian seperti itu, saya harap setelah membaca artikel Cara Compress blogspot yang benar ini, kerusakan tidak terjadi lagi. Dan tujuan untuk mengkompress blogspot untuk mempercepat loading blogspot sesuai harapan.

Mari kita bahas dari langkah-langkahnya. Sebelum memulai kompresi blogspot diharapkan membaca ini :

a. Element Blogspot
Element Blogspot penyusun template kurang lebih ada tiga (3) pilar utama yaitu Cascading Style Sheet (CSS), Java Script, dan HTML.
b. Dari ketiga (3) macam element tadi harus dikompresi tersendiri.
c. Perhatian! Jangan mengcopy seluruh kode mulai dari <b:skin><![CDATA[ hingga ]]></b:skin> secara total dan mengcompress nya di tool compressor.
d. Backup dulu Template Sahabat sebelum melakukan kompresi
e. Kesabaran dan Ketelitian
f. Berdo'a

Jika dirasa sudah paham dan dilakukan, kita mulai dari CSS

1. Cascading Style Sheet (CSS)

Untuk kode CSS biasanya ditunjukkan/ dimulai dengan tanda bintang (*), Dot (.) dan Pagar (#). Untuk melakukan kompresi, Silakan copy semua kode yang ditunjukkan dengan tanda di atas. Jangan Centang satupun tool CSS Compressor. Dan pastikan hanya Kode CSS yang dimasukkan. Tool yang digunakan untuk mengkompress CSS Blogspot yaitu CSS Compressor.

Jika sudah, Copy paste dan Klik Compress.

TIPS
1) Untuk CSS sebenarnya dengan cara manual sudah bisa yaitu menghapus spasi dan enter di setiap kode CSS. Contoh :

#header-wrapper{

width:940px;

margin:10px auto;

padding:10px 0;

}

Menjadi :

#header-wrapper{width:940px;margin:10px auto;padding:10px 0;}        dan seterusnya. Hasinya pun hanya sekitar 2-5 Kb saja. Apakah kamu kurang kerjaan? he...he..

2) Jangan gunakan background gambar di bagian .body { url  kalaupun ada, ukuran gambar kira-kira 15-25 Kb saja dan jangan terlalu mencolok.

3) Usahakan jangan ada CSS yang ganda, selain eror juga menambah berat loading

2. Java Script atau Javascript code

Didalam javascrit juga harus memperhatikan kode javascript yaitu dimulai dengan tanda <script type='text/javascript'> atau <script> bisa juga <script scr='alamat js.'>. Untuk mengkompres javascript kita memerlukan tool yaitu yang bernama Javascript Compressor. Pastikan hanya kode javascript yang dimasukkan! Setelah itu compress.

TIPS
1) Untuk melakukan commpres javascript yang benar jangan compres memua kode, Hanya kode didalamnya saja yaitu kode yang diapit antara <script type='text/javascript'> atau <script> kode javasript yang dicompress </script> atau //]]>
2) Usahakan jangan menaruh javascript dari tempat hosting lain. Ini akan membuat loading berjalan lama.

3. HTML

Seperti halnya langkah Mengkompres CSS. Penggunaan backdash dan spasi dalam html blog akan membuat loading lama. Jadi disarankan penggunaan backdash dan spasi yang sewajarnya. Tool yang digunakan adalah HTML Kompressor

TIPS
1) Penggunaan backdash dan spasi di HTML Blog juga berpengaruh pada loading dan tampilan blogspot. Penggunaan backdash dan spasi biasanya digunakan sebagai batas antara element. Biasanya penggunaan paling banyak ada di bagian komentar Blogspot. Maka dari itu tampilan komentar mengandung rongga atau spasi ke bawah yang lebar.
2) Hapus di bagian yang menurut sahabat banyak menggandung lebar ke bawah yang tidak penting.

Tips lain berkaitan dengan Cara Compress Blogspot Yang Benar

* Upload gambar yang ukuran tidak terlalu besar

* Kurangi penggunaan flash yang berat

* Isi widget yang tidak terlalu banyak penggunaan javascript

* Hilangkan widget-widget yang sekiranya tidak bermanfaat seperti jam dll

* Tempatkan widget-widget yang memudahkan pengunjung menelusuri isi blog kita

* Jangan menampilkan Posting di halaman depan lebih dari 5 posting (solusinya tampilkan hanya judul saja)

* Jangan menggunakan emotion yang berlebihan pada kotak komentar

* Verifikasi kata pada kotak komentar

* Memasang auto musik dapat memberatkan blog

* Jangan menggunakan Jquery lebih dari 4 macam dalam 1 blog

* Compress setiap gambar sebelum diupload ke tempat hosting menggunakan Software Fast Photo Resizer 

Sekiranya itu saja yang sejuta trik blogger share tentang Cara Compress Blogspot Yang Benar. Mudah-mudahan artikel ini bermanfaat bagi pengunjung setia blog ini. Akhir kata, ayo semangat blogger Indonesia!

Image loading by : alexander-zulkarnain.blogspot.com

Happy Blogging! by. Sejuta Trik Blogger

Free Backlink Pagerank 9 Gratis Backlink PR 9

SEO Blogger | Free Backlink Pagerank 9 | Gratis Backlink PR 9

Dari sekian banyak blog-blog yang mengunjungi blog ini, mereka menanyakan bagaimana mendatangkan trafik blog? Menurut para master SEO Blogger mengatakan : SEO dipengeruhi oleh backlink. Walaupun artikel itu asli bikinan sendiri, tanpa adanya backlink pagerank tinggi, Apa gunanya? Dengan kata lain 1 hal yang mesti dilakukan adalah :

1. Edit Blogger

Banyak cara membuat blog kita terkenal. Salah satunya melakukan editing template blog. Dengan maksud memperbaiki tampilan blogger. Banyak template yang bagus bagus kan? Ada lagi tujuan pengeditan ini untuk meningkatkan SEO Blogger kita.

2. Promosi Blog

Banyak cara dilakukan untuk promosi blog agar blog kita tambah maknyus. Salah satunya blogwalking, promosi di jejaring sosial dsb. Tahu lah caranya bagaimana?

3. Backlink

Untuk yang poin backlink ini akan sejuta trik blogger jelaskan. Backlink sendiri artinya umpan balik atau link tautan. Semakin banyak link yang mengarah ke blog kita baik itu satu arah maupun referal atau tukaran link. Dari sumber SEO blogger yang saya baca, semakin besar pagerank yang berkenan memajang link blog kita, maka semakin besar pulan kesempatan tampil di google di urutan 1. Betul tidak? Sok atuh cari free backlink pagerank tinggi kalau bisa :D.

Untuk masalah SEO Blogger dalam kategori Backlink, sejuta trik blogger mempunyai 1 alamat Free Backlink Pagerank 9. Berikut bukti pagerank 9 tersebut.  

Logo di atas adalah Pagerank 9 dari pagerank.info yang dimiliki oleh mozilla.org. Nah bagaimana kita mendapat backlink dari pagerank 9 tersebut? Caranya cukup mudah, kita tidak mengeluarkan uang sepeserpun untuk mendapatkan gratis backlink pagerank 9 dari mozilla.org. Adapun cara mendapat gratis backlink PR9 yaitu

a. Masuk Quality.mozilla.org | QMO

b. Isikan semua form yang dibutuhkan

c. Pengalaman saya, Perlu 3 x memasukkan username. (Isikan 1 kata dengan huruf kecil)

contoh : freebacklinkpr9

d. Lengkapi biodata diri sobat. Blog kamu juga

e. Untuk form About bisa ditambah dengan homepage blog sobat. Isikan dengan  menambah misalnya : 

<a href="https://sejutatrik.blogspot.com/" target="_blank">Free Backlink PR9 | Sejuta Trik Blogger</a>

f. Simpan akun sahabat

Update Free Backlink PR 9:
Untuk link ke-2 ada di Adobe.com | Create an Adobe account

Ada lagi nih update backlink gratis dari pagerank tinggi. Berikut daftarnya :
1. Last.fm (Sahabat tinggal daftar dan tinggalkan jejak blog kita di sana pada profil)
2. Help.com (Gratis backlink pagerank tinggi, dari help.com)
3. Wordpress (Khusus blogger makin maknyus, Pemiliknya saja hanya PR8 :D)
4. AddThis juga pagerank tinggi. Ada di Forumnya, daftar saja sekalian coba-coba. Jangan hanya gunakan widgetnya saja :D
5. Drupal.org juga pagerank9. Saya memajang untuk link kontes SEO, hasilnya maknyus juga, tanpa tebar link sak abreg sudah melejit :D
6. Yang terakhir ada di Youtube.com. Masukkan link homepage kita di sana melalui profil kita. Saya yakin tambak kuat SEO Blog kita.

Dari keenam update gratis backlink pagerank tinggi di atas, masing-masing website atau forum memiliki pagerank tinggi yaitu PR9. Selamat mencoba, gak boleh untuk kontes SEO ya! nanti saya makin ke gusur :D

Dengan begitu tuntutan SEO Blogger dengan Free Backlink PR9 sudah terpenuhi bukan? Dengan kata lain kita mendapat backlink yang berada di mozilla.org. Hanya beberapa hari ini saya mendaftarkan pada akun yang lain, ternyata berdampak besar. Awalnya blog sepi, tapi setelah buka akun yang lain, saya mendapati 10 komentar menunggu. Apa tidak powerfull backlink dari Pagerank 9 ini? Jika sahabat memiliki referensi dari website yang menyediakan Free Backlink Pagerank 10 mohon pencerahannya di kotak komentar. Trims!

Posting Gambar Berdampingan Dengan Teks

Update 10 Oktober 2018
Posting Gambar Berdampingan dengan teks dapat dilakukan pada saat upload gambar dalam keadaan 'Edit HTML' saat posting. Tapi bagaimana jika kita mengedit posting yang sudah terlanjur diposting? Apakah harus upload lagi?

Tujuan Posting Gambar Berdampingan dengan teks ini membuat area posting menjadi penuh dan simpel. Jadi untuk menghemat tempat area posting namun tertata rapi agar pengunjung betah membaca artikel sampai habis. Dan dengan tujuan mendapatkan trafik blog dengan banyak kunjungan halaman.

Terdapat 2 cara atau metode untuk membuat gambar berjajar seperti berdekatan namun mempunyai fungsi sendiri. Menampilkan gambar di kiri dan kemudian menyisipkan teks di sebelah kanan gambar ataupun sebaliknya. Caranya dengan html tabel dan pengaturan CSS. Bagaimana melakukannya? Berikut penjelasan saya semoga mudah dipahami.

1. Membuat Posting 2 Gambar Menggunakan HTML Tabel

Caranya :

Saat posting artikel seperti biasa, posisi menulis pada 'edit html' jika masih keadaan "COMPOSE" Klik saja "EDIT HTML". Lalu tambahkan tag html tabel seperti ini :

<table><tr>
<td>alamat gambar sobat (kode gambar sobat)</td>
<td>alamat gambar sobat (kode gambar sobat)</td>
</tr></table>

Jika lebih dari 2 gambar sobat tinggal tambahkan kode <td>alamat gambar sobat (kode gambar sobat)</td> dan seterusnya sebelum </tr></table>

Maka hasilnya adalah sebagai berikut :

2. Posting Gambar Berdampingan Dengan Pengaturan CSS

→ Hasilnya seperti berikut ini:

Ada problem pertanyaan tentang Google Adsense? Kami siap membantu anda. Jika jawaban kami tidak dapat membantu, kunjungi beberapa pusat bantuan dan dukungan Google Adsense. Semoga anda puas dengan jawaban kami, terima kasih sudah berkunjung di blog ini. Komentar belum sempat di balas semua karena saya sedang belajar seo blogspot dan adsense :D


→ Sedangkan kodenya seperti ini :

<img alt="problem" class="kiri" height="100px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkhk_3UoX76qTOSkhGzKm-eCHrBqWL0bTFJsnsgSxJIyD6cOv3iUMci4rmCHlEam66F1nwdX91ny9pqaSugchZuigRi-54ubjBVnYhr0kwGfVB29Z5A1JtOBw7qDZhNnIor_7PEb8VtPqo/s1600/010-problem.png" title='problem'/> Ada problem pertanyaan tentang Google Adsense? Kami siap membantu anda. Jika jawaban kami tidak dapat membantu, kunjungi beberapa pusat bantuan dan dukungan Google Adsense. Semoga anda puas dengan jawaban kami, terima kasih sudah berkunjung di blog ini. Komentar belum sempat di balas semua karena saya sedang belajar seo blogspot dan adsense :D </br>

→ Lalu yang selanjutnya tambahkan css seperti berikut :

<style> img.kiri { float: left; margin: 5px;} img.kanan { float: right; margin: 5px; } </style>

Teman-teman bisa mengubah ukuran tinggi gambar dengan mengubah nilai css height dengan varian angka 'px' maupun '%' bagi teman-teman yang menggunakan design responsive. Pengaturan tinggi pendeknya serta lebar gambar dapat disesuaikan dengan selera kamu sesuai konten disampingnya.

2 Langkah mudah memposting gambar berdampingan yaitu dengan menggunakan HTML Table dan pengaturan CSS blogger. Beberapa blogger sering mengabaikan tehnik sederhana ini. Namun percayalah saat penggunaan format artikel gambar-text atau text-gambar bisa kanan bisa kiri, saya yakin artikel di blog kita terlihat rapi dan elegant. Untuk faktor seo terutama pengunjung akan dimudahkan dalam membaca dan mempelajari artikel. Terutama bagi aku yang sedang belajar seo blogspot apalagi pemula seperti saya bahwa penggunaan gambar posting berdampingan adalah hal yang selalu saya praktekkan saat posting seperti blog saya yang lain.

Sekarang New Page Blogger Menjadi 20 Page

Baru beberapa hari yang lalu saya menyembunyikan komentar pada posting tertentu. Cara tersebut saya maksudkan untuk menambah page yang dahulu kuota new page atau halaman page baru di blogger hanya 10. Dikarenakan kuota tersebut sudah saya pakai semua. Eh sekarang new page blogger menjadi 20 page. Nah berikut penampilan sebelum update dan sesudah update.

1. New page blogger yang masih 10 page atau halaman

2. New page blogger yang ditambah menjadi 20 page atau halaman

Entah dari kapan newpage blogger dari 10 menjadi 20. Yang jelas ini membuat saya senang dan tidak lagi menyembunyikan komentar pada posting tertentu. Nah bagi sobat yang belum mengetahui. Coba dilihat halaman edit pagesnya. Mudah-mudahan sama juga. Saya sudah membuka semua blog saya dan hasilnya pun sama. Ada penambahan kuota untuk new page di halaman blog. Tentu ini kelebihan blogger memudahkan SEO Blogger kita dengan urlnya bukan?

Akhir kata sekian update blog ini. Mudah-mudahan update dengan judul Sekarang new page blogger menjadi 20 page bermanfaat.

Happy Blogging!
by. Sejuta Trik Blogger