Shizenku Blog

Informasi unik, populer dan menarik lainnya

Cara terbaru membuat widget follower blog valid HTML5

Setelah hari kamis kemarin saya sudah membagikan tutorial agar widget follow by email menjadi valid HTML5 sekarang kita masih akan membahas tutorial yang masih ada kaitannya lagi dengan valid HTML5 yaitu cara terbaru membuat widget follower blog valid HTML5. mungkin jika kalian 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 sahabat blogger semuanya. semoga artikel berjudul Cara terbaru membuat widget follower blog valid HTML5 ini bermanfaat buat kalian semua. happy blogging.

29 komentar : Cara terbaru membuat widget follower blog valid HTML5

Tampaknya saya menjadi pertamax ini. :d kebetulan saya sudah punya widget follower tapi entahlah valid atau tidak

Diposting oleh 

sampai sekarang saya tak pasang widget tersebut, bukan berarti tak menghargai teman-teman, tapi blog saya sudah terlalu berat untuk ditambahi widget :D

Diposting oleh 
 · Admin mengatakan...

@Baskoro Suryandriyo : Sebaiknya dibikin valid html5 gan ,.biar seo friendly. .:D

@Intan Sudibjo : Ok gan, . ya itu hak juragan, .he he. . mau di pasang atau tidak he he :D

Diposting oleh 

Di blog saya yang satunya masih ada, tapi gak tau masih valid atau gk, tapi kayaknya masih valid kok soalnya masih bisa kebuka kok :D

Diposting oleh 
 · Admin mengatakan...

@Yobert Parai : kalo udah valid ya bagus, .he he makasih atas kunjungannya gan, .:D

Wah thanks mas atas tutorialnya. Agak lumayan panjang juga ya untuk modifikasi widget follower blogger ini. Dicoba dulu dech :)

Saya sangt mmperhitungkan ttg validasi,, kalau utk masang... gak dulu deh sob,, mikir2 sama loading blog, takut beratt -___-

Diposting oleh 

aku masih bawaan standar blogpsot. terimakasih atas sharingnya.

Diposting oleh 

nice tutornya sob,,
lepas ni pasti saya coba,,,,thank ya broo

Diposting oleh 

memang kalo valid html5 itu seo friendly ya?

Diposting oleh 
 · Admin mengatakan...

@Wahyu Eka Prasetiyarini : Iya mbak ,.agak panjang. .e he
aku juga pasang di artikel ini. .

@Agri Ahyar Prasetya : Iya gan, .memang widget blog follower ini agak berat , .tapi kalo dah pake html5 kayaknya ringan-ringan aja tuh .

@Djangkaru Bumi : Ok gan,.

@Aan Apk : Ok sob,. selamat mencoba.

@Intan Sudibjo : Cepet terindex gan ,.cuma butuh beberapa detik doang, .kadang nggak nyampe 1 detik. ,

Template blog ini jadi agak kecil ya. Nggak seperti dulu yang bisa lebar. Emang gimana sih cara edit ukuran lebar template itu :)

Diposting oleh 
 · Admin mengatakan...

@Wahyu Eka Prasetiyarini : lebar blog ini saya kecilin sementara buat experiment mbak,. untuk melihat apakah ada elemen yang lebarnya melewati batas, . he he . .sekarang udah saya bikin full responsive, .disemua layar ukuran lebarnya jadi fullscreen.

emangnya mbak mau ngelebarin blognya he he, . kalo iya nanti saya bantu ,. :peace: ..

Wah canggih bangtet ya blog nya bisa responsive. Pasti sulit banget ya mas buat nya hehehe :D
kalau saya sudah agak malas edit-edit template mas. Lebih baik untuk blogwalking dan menulis artikel, soalnya alokasi waktu untuk ngeblog relatif terbatas :)

Diposting oleh 
 · Admin mengatakan...

@Wahyu Eka Prasetiyarini : Nggak sulit kok mbak buat bikin blog jadi responsive, asalkan udah ngerti tentang kode2 css :D ..

Diposting oleh 

hadir kembali untuk menyimak cara membuat widget follower valid HTML5

Diposting oleh 
 · Admin mengatakan...

@Djangkaru Bumi : Ok gan , .sip . trimakasih atas kunjungan paginya, . he he ^_^

Nah itu masalahnya mas. Saya nggak tahu tentang kode css html dkk :D

Diposting oleh 
 · Admin mengatakan...

@Wahyu Eka Prasetiyarini : dulu saya juga begitu mbak, .kalo belajar tentang dasar html kayaknya susah karena jarang ada artikel yg membahasnya, .saya aja belajar sendiri mbak ,gx ada yg ngajarin, yg penting pengalaman mbak, soalnya q dah punya pengalaman dari mulai kelas 1 sma tahun 2010 kalo gx salah, .

Diposting oleh 
 · Admin mengatakan...

@Andre Kocak : Sip,..he he siap ke tkp gan, .trimksih atas kunjungan sorenya gan,. :D

Diposting oleh 

Akan lebih indah jika mengasi DEMO nya nih pak hehe :)
Oh iya saya juga kebeteulan udah pasang widget followersnya :

Diposting oleh 
 · Admin mengatakan...

@Muhammad Luthfi : demonya bisa lihat di sidebar blog ini paling bawah. .

Diposting oleh 

Komentar ini telah dihapus oleh administrator blog.

Diposting oleh 
 · Admin mengatakan...

@taf id : widget-widget yang gx terlalu penting udah ane copot , .. he he :D
blog agan juga keren tuh,. tapi berat -_-

Diposting oleh 
 · Admin mengatakan...

@PERMANA : iya gan,.. banyak widget bikin berat blog, apalagi ditambah banyak iklan,.. bisa lola banget dah,.. -_-
Ok gan,. nanti ane mampir..
ane jarang ngeblog gan, lagi main-main ke forum sebelah.. he he :D

Diposting oleh 

wah rumit juga y :)

Diposting oleh 
 · Admin mengatakan...

@Jagad Kawula : ha ha ha,.. iya rumit :D

Diposting oleh 

Banyak sekali kodenya mas.. jadi puyengg...

Diposting oleh 
 · Admin mengatakan...

pelan-pelan biar gak puyeng... :D

Posting Komentar : Cara terbaru membuat widget follower blog valid HTML5

Baca dulu Peraturan Berkomentar di Blog Ini ! Supaya komentar anda tak sia-sia. Admin sangat senang jika tidak ada komentar yang mengandung spam :)

.::Peraturan Berkomentar::.

• Gunakan bahasa dan kata-kata yang sopan dan tidak menyinggung semua pihak manapun, baik ketika dilihat anak kecil maupun orang dewasa.
• Usahakan untuk tidak menggunakan kata-kata yang menyinggung RAS, SARA, dan berbau P*RNO.
• Dilarang menaruh link Aktif di dalam kotak komentar.
• Berkomentar Out Of Topic atau Oot saya perbolehkan apabila komentar tersebut berupa pertanyaan penting, asalkan tidak berlebihan dan tidak berbau SPAM!

Komentar akan dibalas paling lambat 3 hari kemudian. Terimakasih atas perhatiannya.
Widgets
Copyright © 2012 . Simo Responsive Template Design oleh . Publisher oleh Shizenku Blog.
Powered by Blogger and AMP ⚡ HTML