Cara Mengatasi Data Terstruktur Tidak Terdeteksi Di Google Webmaster Tools

Pertama kali kita mendaftarkan blog kita di google webmaster dan kita cek pada

Tampilan penelusuran -->Data Terstruktur kita temukan kalimat : Kami tidak mendeteksi adanya data terstruktur apapun di situs anda.

Untuk blog yang baru didaftarkan, gak usah terlalu risau, karena dalam beberapa hari, data terstruktur dalam blog kita akan terbaca oleh google webmaster.

Solusi untuk mengatasi kegalauan kita adalah dengan mengecek blog yang baru kita daftarkan itu apakah tervalidasi pada google developer tidak. Google Developer Testing Tool adalah aplikasi yang disediakan google untuk mengecek apakah data dalam blog kita sudah terstruktur sesuai dengan pedoman webmaster atau tidak. apabila data blog kita semua bagus, maka tentu terbaca dan juga ditandai dengan all good warna hijau. dan apabila ada yang tdak beres dengan struktur data kita, akan ditandai dengan warningwarna merah.

gambar dibawah mengilustrasikan bahwa struktur data pada blog yang baru didaftarkan tidak ada masalah.

Namun, untuk blog yang belum dilakukan modifikasi dengan struktur data schema.org, laporan hasil pada testing tool hanya menampilkan hatom, yaitu menampilkan artikel yang kita tulis, ditandai dengan kotak warna merah pada gambar diatas.

Jadi, untuk blog yang baru, dibuat dan didaftarkan di webmaster. Coba langsung cek struktur data blog dengan testing tool untuk menjawab kegalauan peringatan webmaster bahwa blog kita belum mempunyai data terstruktur.

Demikian sedikit sharing pengalaman untuk menjawab kegalauan peringatan data terstruktur yang tidak terdeteksi google webmaster. Semoga bermanfaat

Cara Melihat Jumlah Pengunjung Blog

Jika agan-agan  termasuk blogger "kepo" yang ingin tahu aja atau ingin tau banget pembaca/pengunjung yang sedang membuka ke blog Anda, pasang saja widget pemantau pengunjung blog dari Who Amung Us.

Cara pasangnya mudah banget. Tidak perlu daftar (registrasi) dan gratis (free!). Anda kita tinggal pilih model, lalu Copy kode HTML yang disediakan di gallery-nya, dan Paste ke sidebar blog Anda.

Di blogspot, tinggal klik Layout > Add Gadget dan paste kodenya di sana.

Widget ini akan menampilkan data jumlah pengunjung yang sedang online di blog Anda, juga data/asal negara mereka. 

Menurut Who Amung Us, widget kecilnya ini sudah digunakan oleh 17 juta blogger di tahun pertama dan meningkat drastis menjadi 100 juta blogger di tahun keduanya! WOW...!

Jika Anda "malas" membuka langsung Who Amung Us, mau tinggal pasang, ini dia kode html untuk memantau pembaca/pengunjung blog kita:

<script id="_wauomn">var _wau = _wau || []; _wau.push(["classic", "hrjumq8cdm31", "omn"]);
(function() {var s=document.createElement("script"); s.async=true;
s.src="http://widgets.amung.us/classic.js";
document.getElementsByTagName("head")[0].appendChild(s);
})();</script>

Situs pemantau pengunjung blog lainnya masih banyak, antara lain Histats. Situs ini menyajikan data pengunjung lebih detaill. Selain menampilkan data realtime dan jumlah pengunjung, juga menampilkan daftar posting (tulisan) apa saja yang sedang dan telah dibuka oleh pengunjung.

Google Analytic: Terbaik dan Terlengkap!
Who Among Us dan Histats bisa menjadi "pembanding" bagi pemantau utama blog, yakniGoogle Analytic.

Kita "wajib" memanfaatkan Google Analytic untuk mengetahui jumlah pembaca/pengunjung per bulan, per minggu, per hari, bahkan per jam dan per menit! Di Google Analytic kita juga bisa memantau secara real time posting yang sedang dibuka dan jumlah pengunjung.

Selain Google Analytic, Blogger sendiri sudah menyediakan menu "Stats" (Statistik) tentang jumlah pageviews, posting terbanyak dibaca, media atau perangkat yang digunakan pengunjung untuk membuka blog kita (klik menu "Audience"), dll. Wasalam. (www.romelteamedia.com).*

Cara Memperlebar Kolom Template

Bagi agan yang masih bingung untuk mengubah ukuran templatenya sekarang gak usah bingung-bingung lagi karena sudah banyak blog yang sudah memposting artikel tentang Cara merubah ukuran template,  Memang tidak semua template sama tapi ini contoh dari sebagian besar template yang anda gunakan serta letaknya ,ini letak kode-kode untuk mengatur lebar kolom template :

Cara Membuat Widget Hitung Mundur Untuk Tahun Baru

Menjelang Tahun Baru biasanya hal yang paling ditunggu-tunggu yaitu saat kita menghitung mundur waktu menjelang Tahun baru, detik demi detik kita menghitung waktu hingga akhirnya sampai pada puncak waktu peringatan tahun baru itu hadir , nah biasanya kita menghitung mundurnya melalui televesi atau jam di gedung atau pusat tertentu , ya fungsinya tidak lain sebagai mengingatkan detik detik menjelang tahun baru , nah bagaimana jika menampilkan hitung mundur atau countdown ini di blog ? nah berikut adalah tutorial Cara Membuat Widget Hitung Mundur Untuk Tahun Baru Pada Blog.

Copy Kode berikut pada Widget Blog sobat:

Tata Letak - Tambahkan gadget - HTML/JavaScript - lalu Paste Kode berikut :

<style type="text/css" scoped="scoped">
#tahunbaru2017 {background:black;color:#5CAAFF;font-family:Oswald, Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
  .teks {color:white}
</style>
<div id="tahunbaru2017">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Jan 1, 2017").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
  
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
  
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
  
    // format countdown string + set tag value
  countdown.innerHTML = days + " <span class=\'teks\'>hari</span> " + hours + " <span class=\'teks\'>jam</span> "
  + minutes + " <span class=\'teks\'>menit</span> " + seconds + " <span class=\'teks\'>detik menuju Tahun</span> 2017";

}, 1000);
//]]>
</script>

Info :

1. new Date("Jan 1, 2017").getTime(); Ganti Tanggal Sesuai dengan Tahun Sekarang
2. Untuk Warna Dan Style Saya rasa sudah pada bisa semua hehe jadi sesuaikan saja dengan kreasi sobat

Nah Widget ini khusus untuk Menyambut tahun baru 2017 kalo tahun 2018 ya tinggal ganti style aja agan , oke sekian tutorialnya salam labeltutorialcom dan selamat tahun baru 2017 ya agan emoga agan semua bisa mencapai impian impian ditahun 2017 thanks happy blogging.

Cara Pasang Wdiget Jam Di Sidebar

Agar blog agan tampak cantik dan menarik untuk di lihat, maka anda bisa memasang beberapa aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa anda dapatkan secara gratis pada situs http://www.clocklink.com. 

Dan bagi anda yang berminat blognya di pasang jam juga, silahkan ikuti langkah-langkah berikut :

1. Silahkan kunjungi situsnya disini

2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Gallery

3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll, Jika sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi

4. Klik tombol yang bertuliskan Accept

5. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00

6. Set ukuran jam yang anda sukai di samping tulisan size

7. Copy kode HTML yang di berikan pada notepad

8. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan

9. Selesai

Cara Membuat Tombol Search Seperti Google

langsung aja nih kali ini saya akan share tentang tutorial blogger mengenai cara membuat tombol search seperti google , sebenernya sih udah banyak yang share buat tutorial ini , tapi apa salahnya kan ditulis ulang secara lengkap lagi itung itung buat dokumentasi oke lanjut aja ya ke tutorialnya.

simak baik baik ya script berikut : Copy kode css diberikut diatas kode ]]></b:skin>

#search {background: #fff;border-radius: 2px;}#search-form {color:gray;width:50%;padding:6px 70px 6px 10px;font:14px Arial;transition: all 0.2s linear 0s;margin:-10px 0 10px;border:1px solid #ccc;border-radius:2px;}.search-button,.search-button:hover{background-color:#4D90FE;width:60px;padding:2px 5px;margin:5px 0 0 -63px;top:4px;border-radius:0 2px 2px 0;font-size:13px;cursor:pointer;border:none;position:relative;}#search-form:hover{border:1px solid #aaa}#search-form:focus{border:1px solid #4D90FE;outline:none;color:black;}

Kemudian silahkan copy kode HTML dibawah ini dan taruh kodenya diwidget atau dimana anda ingin menampikannya :

<div id='search'>
<form id='searchform' action='/search' method='get' target='_blank'>
<input id='search-form' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Search here ...'/>
<button type='submit' class='search-button' title='Search'><img alt='search button' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigXzFA9cq5lOWJPKY0qY1879hf234TAKKwaz4IM9_k6KVT5ekpEsWOOodspUlf8YINMcGHAuGVLdXptJDI1QWmCx3suJu4cAohlB59fibWFgs4XwTnLltSqYp6DSPpRce_N5IygQloXKCZ/s1600/search.png' title='Search' width='21'/>
</button>
</form>
</div>

Nah ini hanya dari segi tampilannya saja. jika anda ingin menambahkan dengan Fungsi Custom Google Search bisa saja, tapi lanjut nanti lain kali ya agan-agan semua hehehe.

CARA MELIHAT BLOG YANG SUDAH RESPONSIVE

kalau agan sudah menjadi seorang blogger pastinya anda ingin blog anda terus berkembang mengikuti perkembangan yang ada ya salah satunya blog yang responsive , blog yang sudah responsive tentunya akan lebih flexibel jika mengikuti gadget atau device yang ada , nah bagi blogger yang yang bingung untuk menunjukan blog anda sudah responsive bisa gunakan tools dari website berikut ini :

1. Responsivetest.net

lihat demonya disini , nah disini anda bisa memilih berbagai device cukup banyak device yang disediakan disini

2. Responsinator.com

lihat demonya disini cukup berat load di web ini karena cara melihatnya dalam satu halaman tapi cukup lengkap juga loh buat liat berbagai ukuran blog kita di device

3. ami.responsivedesign.is

lihat demonya disini  , nah web ini  menarik karna berbeda dengan web test responsive lainnya di web ini bisa sekaligus dijadikan screenshoot seperti gambar diatas , biasanya digunakan untuk banner para penyedia template responsive.

nah bagaimana sobat ? dengan tester responsive ini ?jika sobat ingin mempunyai template blog yang sudah responsive bisa kunjungi artikel berikut :

 oke selamat mencoba agan-agan semua.

Cara Bikin Kode Verifikasi pada Komentar di Blog

Kali ini saya akan berbagi informasi ringan tentang Kode CAPTCHA kepada agan-agan semua.

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam perkomputeran untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu komputer. Proses ini biasanya melibatkan suatu komputer (server) yang meminta seorang pengguna untuk menyelesaikan suatu uji sederhana yang dapat dihasilkan dan dinilai oleh komputer tersebut. Karena komputer lain tidak dapat memecahkan CAPTCHA, pengguna manapun yang dapat memberikan jawaban yang benar akan dianggap sebagai manusia. Oleh sebab itu, uji ini kadang disebut sebagai uji Turing balik, karena dikelola oleh mesin dan ditujukan untuk manusia, kebalikan dari uji Turing standar yang biasanya dikelola oleh manusia dan ditujukan untuk suatu mesin. CAPTCHA umumnya menggunakan huruf dan angka dari citra terdistorsi yang muncul di layar.

Menurut beberapa blogger, pengaktifan kode captcha pada komentar di Blog itu penting, karena di anggap sebagai pencegah program spammer. Namun ada beberapa blogger yang beranggapan lain, menurut mereka blog seperti itu sangat tidak bersahabat dalam dunia blogging. Jadi menurut saya sebelum Anda menggunakan fitur ini sebaiknya pikirkan dulu baik buruknya.

Untuk mengaktifkan / menonaktifkan kode captcha pada komentar di Blog, berikut langkahnya :

1. Buka blogger.com, lalu login ke akun Anda
2. Silahkan pilih nama blog Anda
3. Masuk ke Setelan > Pos dan Komentar
4. Pada bagian "Tampilkan verifikasi kata" pilih "Ya" untuk mengaktifkan dan "Tidak" untuk menonaktifkan
   
5. Terakhir klik Simpan setelan
   

Selesai Terima Kasih Agan-Agan Sudah Berkungjung.

4 Cara Tips Dan Trik Mempromosikan Blog untuk Pemula

Suatu kesenangan tersendiri bagi seorang blogger jika tulisannya di blog dibaca orang, apalagi sampai meninggalkan komentar. Ini bisa terjadi jika tulisan dalam blog tersebut bisa ditemukan oleh pengunjung. Untuk bisa ditemukan, blog tentu saja harus dipromosikan selain pengunjung yang berasal dari mesin pencari tentunya.

Bagaimana mempromosikan blog? media apa saja yang bisa digunakan? Berikut ini beberapa tips mempromosikan blog khususnya buat pemula.

1. Memanfaatkan sosial media, seperti facebook atau twitter. Postinglah link url tulisan Anda di facebook atau twitter. Gunakan pengantar yang menarik sehingga mendorong orang untuk meng-klik dan membacanya. Misalnya, pernah bermasalah dengan komedo? Temukan di sini cara mengatasinya > link blog.
   Namun, perlu diingat untuk tidak melakukannya terlalu sering untuk satu postingan yang sama. Jangan sampai membuat teman atau follower Anda malah merasa terganggu.
2. Blog walking alias rajin jalan-jalan mengunjungi blog lain dan meninggalkan komentar yang berkualitas. Hindari melakukan komentar pendek seperti nice info gan atau wow… Selain sulit mendapat persetujuan untuk tampil dari yang punya blog, juga menjadikan orang malas untuk berkunjung balik ke blog Anda.
3. Aktif di forum yang Anda minati. Aktiflah ikut berdiskusi di forum online yang Anda minati dan jangan lupa untuk menggunakan signature alamat blog. Jika komentar Anda berbobot, tentu akan membuat anggota forum yang lain jadi ingin tahu lebih jauh tentang Anda.
4. Submit tulisan ke vlog vivanews. Cara ini terbukti sangat jitu meningkatkan pengunjung blog. Silakan baca syaratnya di http://ureport.vivanews.com/blog.

Cara Membuat Widget Google+ Follower

• Login ke akun Blogger sobat.
• Masuk ke bagian Tata Letak.
• Klik Tambahkan gadget di posisi yang sobat inginkan.
• Pilih mode HTML/Javascript.
• Masukan kode berikut

<style>.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 260px;
    padding: 10px 0 10px 10px;
    height: 280px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 3px solid #D3D3D3;
}
.bloggerspiceGplus:hover {
    border: 3px solid #D3D3D3;
    background-color: #D3D3D3;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/116159611196713950391" data-source="blogger:blog:followers" data-width="280"></div>
</div>

Keterangan:

1. Ubah kode berwarna merah dengan ID Google plus sobat.
2. Kode berwarna hijau adalah warna mula-mula pada widget.
3. Kode berwarna biru adalah warna pada widget ketika disentuh kursor.
4. Kode berwarna pink bercetak tebal adalah ukuran kotak yang membungkus widget.
5. Kode berwarna pink yang bercetak miring adalah ukuran widget Google+ Follower sendiri.

Untuk mengetahui ID Google plus sobat, silakan masuk ke halaman Google plus dan perhatikan id google plus terdapat di atas, yaitu di bagian url di tabulasi browser yang sobat gunakan. 

• Klik Simpan.
• Selesai

Mangatasi Iklan Adsense Hanya Tampil Di Halaman Berisi Content Saja

Hai agan-agan.Hari ini ini saya mau memberikan tips dan trik bagaimana cara supaya iklan google adsense yang ada di blog kalian tidak ditampilkan di halaman tanpa adanya content seperti halaman error 404, halaman archieve, halaman label, dan lain sebagainya. hal ini sangat perlu untuk dilakukan agar kita tidak melanggar kebijakan penempatan iklan adsense. jika kalian belum membaca tentang kebijakan pemasangan iklan silahkan kalian baca pada halaman url yang ada di bawah ini :
https://support.google.com/adsense/answer/1346295?hl=id .

Buat para agan-agan blogger semua yang ingin memasang tombol kembali menuju ke atas seperti di blog ini kayak yang ada di pojok kanan bawah, silahkan ikuti panduan lengkapnya di bawah ini :

1. Kalian harus login terlebih dahulu ke blogger
2. Kemudian klik menu dan pilih template
3. Menuju pengeditan kode html
4. Tambahkan kode di bawah ini ke dalam kode css, bisa di atas kode ]]></b:skin> atau </style> :

#backtotop{position:fixed;bottom:5px;right:5px;}

Jika ingin mengatur warna link-nya juga, tambahkan kode di bawah ini :

#backtotop a,#backtotop a:visited{font-size:13px;color:#cc4411;font-family:Arial,Helvetica,sans-serif;word-wrap:break-word;}
#backtotop a:hover{color:#000;}

Untuk kode color di atas kalian bisa atur sendiri, sesuaikan agar tampil menarik di blog kalian.
5. Tambahkan kode di bawah ini dan taruh di atas kode </body> :

<div id='backtotop'><a href='#' rel='nofollow' title='Kembali menuju ke Atas'>Kembali menuju ke Atas</a></div>

Kode merah bisa kalian ganti sesuai kata-kata kalian sendiri.
Dan jika ingin menambahkan gambar, ganti kode di atas dengan kode di bawah ini :

<div id='backtotop'><a href='#' rel='nofollow' title='Kembali menuju ke Atas'><img alt='Kembali ke Atas' src='url gambar punya agan taruh di sini' title='Kembali ke Atas' /></a></div>

Gunakan gambar dengan resolusi kecil dan yang terpenting harus ringan pastinya.
6. Simpan template dan lihat hasilnya.

Itulah Beberapa tips dan cara mengtasinya.

Memasang Meta Content Noarchive Di Halaman Label Dan Archieve

Halo agan-agan saya akan mengulas bagaimana cara memasang meta content noarchive, nofollow dan noindex pada halaman label dan archive di blogspot. Pemasangan meta content archive ini ini sangat perlu untuk dilakukan supaya semua link label dan archive yang ada di blog tidak diindex oleh robots google. Jika link label dan archive terindex di pencarian google maka dapat menyebabkan adanya duplikat content yang sangat banyak. Maka dari itu saya menyarankan agar kalian memasang meta content archive, nofollow, noindex ini di halaman label dan archive. Saya juga sudah menerapkannya di blogku sebelumnya. Untuk panduan lengkap tentang cara pemasangan meta content archive silahkan kalian lihat di bawah ini :

Berikut ini panduan cara memasang meta content archive di halaman label dan archive :
1. Pertama yang harus kalian lakukan adalah login terlebih dahulu ke blogger
2. Setelah itu kalian pilih menu template
3. Lalu klik menu edit html
4. Tambahkan kode di bawah ini dan taruh di bawah kode <head> :

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='nofollow, noarchive, noindex' name='robots'/>
<b:else/>
<b:if cond='data:blog.searchLabel'>
<meta content='nofollow, noarchive, noindex' name='robots'/>
</b:if>
</b:if>

  Untuk fungsi meta content noindex dan meta content nofollow pasti kalian sudah paham. Sedangkan fungsi meta content noarchive adalah supaya tidak di cache, jangan salah paham ya tentang fungsi meta content noarchive ini. Mungkin banyak yang menyangka bahwa meta content noarchive ini fungsinya agar archive tidak ada atau tidak terindex padahal hal tersebut salah besar. Jika kalian menggunakan meta content noarchive ini didalam postingan maka sudah dapat dipastikan beberapa hari kemudian cache blog pada artikel kalian akan mengalami error 404 not found.
5. Dan yang terakhir adalah kalian klik menu simpan template
6. Selesai.

  Untuk mengecek apakah pemasangannya sudah berhasil atau belum silahkan kalian buka halaman archive dan halaman label yang ada di blog kalian, setelah itu kalian tekan CTRL+U lalu kalian lihat kode di bawah kode <head>. Jika di bawah kode <head> ada kode <meta content='nofollow, noarchive, noindex' name='robots'/> berarti pemasangannya sudah berhasil dengan sukses. Selamat mencoba sahabat blogger semua.

Cara Membuat Widget Follower Blog Valid HTML5

Saya akan membantu agan agan semua untuk  membuat widget follower blog valid HTML5. mungkin jika agan mencari di pencarian google sudah banyak yang membuat artikel tentang cara membuat widget follower blog menjadi valid HTML5 dan kodenya bisa dibilang sedikit pula. tetapi, sedangkan yang akan saya bagikan kali ini adalah widget blog follower bawaan blogger yang sudah saya bikin valid HTML5. sebenarnya empat error html5 yang ada di widget blog follower bawaan blogger ini berasal dari kode di bawah ini :

<b:include data='post' name='postQuickEdit'/>

  Pasti kalian sudah tidak asing lagi dengan kode di atas. untuk menghilangkan errornya sebenarnya sangatlah mudah yaitu kita hanya perlu menghapus kode tersebut, tetapi setelah kita hapus dan kita klik simpan template terus kita keluar dari edit html dan masuk lagi ke edit html ternyata kode tersebut tetap ada lagi dan berkali-kali dicoba untuk di hapus tetap muncul lagi. mungkin kode tersebut mempunyai banyak nyawa he he. . maka dari itu saya akan bagikan widget blog follower yang valid HTML5 silahkan dibaca dan disimak baik-baik ya sobat.

Berikut ini tutorialnya :
1. Login ke blogger
2, Pilih template
3. Menuju tata letak
4. Tambahkan widget follower melalui tata letak dan simpan widget
5. Buka blog kalian di tab baru
6. Setelah itu kalian tekan Ctrl + U lalu cari dan salin kode yang mirip dengan kode di bawah ini ke dalam notepad :

<h2 class='title'>Followers</h2>
<div class='widget-content'>
<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<script type="text/javascript">
        if (!window.google || !google.friendconnect) {
          document.write('<script type="text/javascript"' +
              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
              '</scr' + 'ipt>');
        }
      </script>
<script type="text/javascript">
      if (!window.registeredBloggerCallbacks) {
        window.registeredBloggerCallbacks = true;

    

    
        gadgets.rpc.register('requestReload', function() {
          document.location.reload();
        });

    
        gadgets.rpc.register('requestSignOut', function(siteId) {
      
          google.friendconnect.container.openSocialSiteId = siteId;
          google.friendconnect.requestSignOut();
        });
      }
    </script>
<script type="text/javascript">

    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
    
      
        
        
              holder.currentPost = "http://www.blogger.com/feeds/2338053908648469715/posts/default/823738954893876629";
        
        
        
              holder.currentComments = "http://www.blogger.com/feeds/2338053908648469715/823738954893876629/comments/default";
        
            holder.currentPostUrl = "";
            holder.currentPostId = 823738954893876629
      
      
      
            holder.postFeed = "http://www.blogger.com/feeds/2338053908648469715/posts/default";
      
      
      
            holder.commentFeed = "http://www.blogger.com/feeds/2338053908648469715/comments/default";
      
          holder.currentBlogUrl = "http://shizenku.blogspot.com/";
          holder.currentBlogId = "2338053908648469715";
    
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height + 'px';
      }
    });


    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<div id="div-nwjqexx67y5h" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "Followers";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#000000";
    skin['ENDCAP_LINK_COLOR'] = "#000000";
    skin['ALTERNATE_BG_COLOR'] = "transparent";

    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#000000";
    skin['CONTENT_TEXT_COLOR'] = "#000000";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#000000";
    skin['CONTENT_HEADLINE_COLOR'] = "#000000";
    skin['FONT_FACE'] = "Arial";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-nwjqexx67y5h",
     height: 260,
 
 
 
     site: "05114586728307394973",
 
     locale: 'en' },
     skin);
  </script>
</div>
</div>
<div class='clear'></div>
</div>

7. Menuju tata letak lalu tambahkan widget HTML/Javascript baru
8. Buka notepad tadi atau yang ada di tutorial no.6 , Lalu salin kodenya dan taruh di widget baru ini.
9. Masih di dalam widget baru tadi, silahkan cari dan hapus kode yang hampir mirip di bawah ini yang letaknya di bagian paling bawah :

<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=2338053908648469715&widgetType=Followers&widgetId=Followers1&action=editWidget&sectionId=aside' onclick='return _WidgetManager._PopupConfig(document.getElementById("Followers1"));' target='configFollowers1' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>

10. Simpan widget.
11. Setelah itu kalian hapus widget follower yang kita buat tadi pada langkah ke-empat.
12. Masuk lagi ke dalam edit html template
13. Cari kode yang hampir mirip di bawah ini :

<b:widget id='HTML1' locked='false' mobile='yes' title='Followers' type='HTML'>
mulai dari sini
sampai dengan
</b:widget>

14. Setelah kode di atas ketemu silahkan kalian ganti dengan kode di bawah ini :

  <b:widget id='HTML1' locked='false' mobile='yes' title='Followers' type='HTML'>
    <b:includable id='main'>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
  </b:widget>

15. Yang terakhir klik simpan template.

Selamat mencoba agan-agan blogger. semoga artikel berjudul Cara terbaru membuat widget follower blog valid HTML5 ini bermanfaat buat kalian semua. happy blogging.