Template Blog Game Online Valid HTML5 dan CSS3

Template Blog Game Online
Sebenarnya ini adalah template blog game online saya yang sudah lama enggak diurus. Baru sadar ketika beberapa waktu yang lalu ada teman di Google+ yang meminta template blog game online ini. Ketika saya lihat lagi blognya, ternyata enggak disangka-sangka blog yang sudah lama enggak diurus ini telah mendapatkan PR3 dari Google.

Template blog game online ini sebenarnya dulunya buatan Maskolis yaitu template Johny Coba Dulu yang kemudian saya modif lagi sekalian belajar modif blog. Jadi ya modifnya juga asal jadi hehehehe. Nah karena kemarin-kemarin ada temen G+ yang meminta templatenya, jadi saya bagikan saja templatenya sekalian dibetulkan lagi susunan templatenya.

Dasar template ini ada dinamis yang artinya tidak responsive karena waktu Maskolis buat template ini belum zamannya responsive. Namun karena ini memang dibuat dan saya modif untuk game online, jadi memang sengaja tidak dibuat responsive. Dan optimasi blog yang saya lakukan pada template ini lumayan banyak. Selain merubah tampilannya, di bawah ini beberapa optimasi yang saya lakukan.
  • Validasi HTML5 dan CSS3 untuk homepage dan postingan (bisa Anda cek sendiri).
  • Mengganti tag h1, h2, dan h3 menjadi tag dinamis.
  • Asynchronous social media button dan beberapa js widget.
  • Optimasi komentar blog dengan Threaded Comments Hack dan Google+, namun saat ini saya hanya memunculkan komentar Google+ saja tanpa menghapus threaded comments hack.
  • Menambahkan struktur data schema.org.
  • Penempatan slot iklan yang strategis untuk game online.

Game Online

Perhatian! Untuk mendownload di DataFileHost silahkan hilangkan tanda centang pada tulisan "Use our download manager and get recommended downloads" di bawah tombol download.

1. Untuk mengatur widget tab

Widget Tab

Untuk merubah judul tab silahkan cari kode di bawah ini pada kode javascript.


Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Racing";Title5="Sport";Title6="Strategy";Title7="Fighting";

Untuk isi widgetnya silahkan temukan kode di bawah ini.


<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Adventure Game?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Action Game?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
........
........
........
<div class='clear'/>
</div></div>

Silahkan ganti Adventur Game dan yang lainnya dengan Label game Anda.

2. Untuk Slider Homepage

Silahkan masuk ke Tata Letak kemudian tambahkan kode di bawah ini pada gadget HTML seperti pada gambar di bawah ini.


<div id='slider'>
<div id='loopedSlider'>
<div id="ribbon"></div>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<a class='previous' href='#'></a>
<a class='next' href='#'></a>
<script type='text/javascript'>
    $(function(){
        $('#loopedSlider').loopedSlider();
    });
</script>
</div>
</div>

Slider

3. Recent Post By Label di bawah widget tab

Silahkan ketikan Label pada gadget HTML seperti di bawah ini

Recent Posts By Label

Recent Posts By Label

4. Popular Posts

Untuk Popular Posts adalah gadget Games Of The Week, silahkan atur hanya thumbnails dengan pilihan 6 posts.

5. Slot Iklan di postingan

Cari kode seperti di bawah ini


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin:0 auto;text-align:center'>
IKLAN 728 X 90
      </div>
<div class='clear'/>
  <data:post.body/>
<div class='isorkanan'>
IKLAN DI BAWAH KIRI 300 X 250
</div>
</b:if>

6. Iklan di samping komentar


<div style='width:300px;height:250px;position:absolute;top:40px;right:-320px;padding:0'>
IKLAN DI SAMPING KOMENTAR 300 X 250
</div>

7. Membuat Postingan

Silahkan gunakan Post Template di bawah ini untuk membuat postingannya.


<div style="background: none; border-bottom: 2px solid #000; margin: 10px 0; padding: 10px 0 5px; width: 100%;">
<div style="text-align: center;">
<div class="video-player">
<iframe height="600" src="http://www.gamezhero.com/get-game-code/36fa3ecc0b2d2bfe0bec0f2b369f24db" width="600"></iframe>
</div></div>
<div style="text-align: justify;">
<br /></div>
</div>
<table><tbody>
<tr><th><div style="text-align: justify;">
<span style="font-size: x-large;"><b>Fractured</b>
</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img alt="Fractured" height="155" src="http://1.bp.blogspot.com/-i2wJnYS3zWI/UP5cLKT828I/AAAAAAAAVpU/3bHlstPSN8s/s200/Fractured.jpg" title="Logo Fractured" width="200" /></div>
<div style="text-align: justify;">
Bantulah dude yang funky untuk menemukan cara untuk menuju Angel dengan melalui labirin retak. Sebuah permainan yang sangat menyentuh dan sulit.</div>
</th></tr>
</tbody></table>

Silahkan ganti iframe untuk game online-nya dengan iframe game online yang ingin Anda tampilkan, Fractured adalah untuk judul game, untuk image silahkan ganti url imagenya beserta alt dan title tagnya dan untuk lebar serta tingginya biarkan saja. Silahkan ganti juga kalimat untuk menggambarkan game online Anda (deskripsi game).

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments