Validasi HTML5 Dan CSS3 Magazine Template Dari Maskolis Template

Validasi HTML5 Dan CSS3 Magazine Template Dari Maskolis Template

Bola Hero Gawai

Validasi HTML5 Dan CSS3 Magazine Template Dari Maskolis Template

Validasi HTML5 Dan CSS3 Maskolis Template
Beberapa waktu yang lalu ada sahabat Kompi Ajaib yang request untuk validasi HTML5 dan CSS3 Maskolis Template yang berupa magazine template. Template ini cocok untuk blog gado-gado karena Anda bisa menampilkan widget dari berbagai label postingan.

Nah pada kesempatan ini saya akan share validasi template Maskolis ini bagi siapa saja yang ingin menggunakannya dan mencobanya.

Namun disayangkan untuk demo maskolis template aslinya sekarang tidak bisa lagi diakses karena dibannned seperti halnya template-template demo Maskolis lainnya. Template yang saya validasi ini berasal dari postingan Maskolis yang bisa Anda simak pada link di bawah ini:
  • http://www.maskolis.com/2012/12/2-template-ini-saya-bagikan-karena.html
Template ini memiliki susunan HTML blog yang jadul dari Maskolis karena berbeda dengan template-template baru yang Maskolis buat seperti halnya terlihat pada susunan h1, h2, dan h3 pada title-title blognya. Dan perubahan yang saya lakukan pada validasi di sini adalah:
  1. Validasi HTML5 dan CSS3 di homepage dan postpage (bisa Anda cek sendiri)
  2. Menghapus semua background gambar untuk meringankan loading blog.
  3. Asynchronous widget dan tombol sharing social media Facebook, Twitter, dan Google+
  4. Menambahkan breadcrumb valid HTML5 dan seo friendly.
  5. Menambahkan title tag pada semua link dan title serta alt tag pada thumbnail di widget.
  6. Related posts valid HTML5.
  7. Satu kolom di halaman statis.
  8. Postmeta di postpage dan statispage.
  9. Menggunakan komentar Google Plus, karena ini magazine template yang cocok buat blog gado-gado dan berita maka cocok menggunakan komentar G+ untuk lebih mudah menyebarkan artikelnya.
  10. Title blog dengan gambar dan clickable.
  11. Manipulasi title blog dan title postingan agar seo friendly yang bisa Anda simak dari postingan Maskolis di sini http://www.maskolis.com/2011/05/bagaimana-agar-template-anda-seo.html
  12. Tata letak user friendly setelah remove CSS Reset Blogger.
  13. Halaman error 404
  14. Dan lain-lain...
Sedangkan untuk tampilannya, saya buat sama seperti aslinya yang bisa Anda lihat pada link demo di bawah ini.

Blog validasi Mskolis Template



Untuk loading blognya saya rasa cukup ringan untuk jenis magazine blog yang menampilkan banyak widget dibanding dengan template demo aslinya.

Kustomisasi

1. Layout tampak seperti gambar di bawah ini:
Tata Letak

2. Untuk mengisi widget lebar di bawah Latest Post, widget bawah slider, dan widget di atas footer silahkan klik pada Edit di masing-masing gadgetnya kemudian silahkan isikan title widgetnya dan kolom bawahnya silahkan ketikan labelnya seperti gambar di bawah ini. Penulisan labelnya harus sesuai dengan label, misalnya label blog Anda seperti ini "Artis" maka Anda harus menulis seperti itu "Artis" jika Anda menulis "artis" maka widget label Anda tidak akan muncul.

Konfigurasi widget

3. Untuk mengisi widget Recent Post silahkan isi dengan kode di bawah ini:

<div style="background:none repeat scroll 0% 0%; border: 0px; height: 300px; overflow: auto; padding: 10px;">
<span id="pbl_labels"></span>
<div id="pbl_posts">
Recent Posts </div>

<script type="text/javascript">
var jumlah_maksimum_post = 10;
var dengan_ringkasan = true;
var jumlah_karakter_ringkasan = 100;
</script>

<script type='text/javascript'>
//<![CDATA[
/*
 * If you want to copy the code below, please DO NOT delete or modify this note
 *
 * Author  : Copycat91
 * Website : http://infotentangblog.blogspot.com/
 * Description :
 *     Creating a recent post widget classified by labels.
 *
 * Inspired from    : a comment on http://tutorial-jitu.blogspot.com/
 * Thanks a lot for : http://buzz.blogger.com/
 * Created by       : NetBeans IDE 6.5
 */

var num     = jumlah_maksimum_post;
var wsumm   = dengan_ringkasan;
var summlen = jumlah_karakter_ringkasan;

var json; var labels;

function entryHasLabel(entry, label){
    if(label == "*"){return true;} // always true if label is "*"
    var labels = getPostLabels(entry);
    return isExists(labels, label);
}
function getAllLabels(json){
    var labels  = [];
    var entries = json.feed.entry;
    for(var i=0; i<entries.length; i++){
        var entry = entries[i];
        var categories = entry.category;
        if(!categories){continue;}
        for(var j=0; j<categories.length; j++){
            var category = categories[j];
            var label = category.term;
            if(!isExists(labels, label)){labels.push(label);}
        }
    }
    labels.sort();
    return labels;
}
function getContent(entry){
    if(!wsumm){return "";}
    var content = entry.content ? entry.content.$t : entry.summary.$t;
    content = stripHTML(content);
    if(content.length <= summlen){return content;}
    content = content.substr(0, summlen);
    if(content.charAt(content.length-1) != " "){content = content.substr(0, content.lastIndexOf(" ")+1);}
    content += "...";
    return content;
}
function getPermalink(entry){
    var links = entry.link;
    if(!links){return null;}
    for(var i=0; i<links.length; i++){
        var link = links[i];
        if(link.rel == "alternate"){return link.href;}
    }
    return null;
}
function getPostLabels(entry){
    var labels     = [];
    var categories = entry.category;
    if(!categories){return labels;}
    for(var i=0; i<categories.length; i++){
        labels.push(categories[i].term);
    }
    return labels;
}
function getRecentPosts(json, label){
    // this widget is made by copycat91 in his blog
    var posts   = [];
    var entries = json.feed.entry;
    var i = 0;
    while(posts.length < num){
        if(i == entries.length){break;}
        var entry   = entries[i];
        if(entryHasLabel(entry, label)){
            var title   = entry.title.$t;
            var href    = getPermalink(entry);
            var content = getContent(entry);
            var post    = {"title" : title, "href" : href, "content" : content};
            posts.push(post);
        }
        i++;
    }
    return posts;
}
function isExists(array, val){
    for(var i=0; i<array.length; i++){
        if(array[i] == val){return true;}
    }
    return false;
}
function onLoadFeed(json_arg){
    json   = json_arg;
    labels = getAllLabels(json);
    showLabels(labels);
    showLabeledPosts("*");
}
function showLabeledPosts(label){
    // set label == "*" if you want to show all posts
    posts = getRecentPosts(json, label);
    showPosts(posts);
}
function showLabels(labels){
    var s = "";
    s += "<select onchange='showLabeledPosts(this.value)'>";
    s += "<option value='*'/>All Labels";
    for(var i=0; i<labels.length; i++){
        var label = labels[i];
        s += "<option value='"+label+"'/>" + label;
    }
    s += "</select>";
    document.getElementById("pbl_labels").innerHTML = s;
}
function showPosts(posts){
    var s = "";
    if(!wsumm){s += "<ul>";}
    for(var i=0; i<posts.length; i++){
        var post = posts[i];
        if(wsumm){
            s += "<p>";
            s += "<b><a href='"+post.href+"' title='"+post.title+"'>" + post.title + "</a></b> <br/>";
            s += post.content;
            s += "</p>";
        } else {
            s += "<li><a href='"+post.href+"' title='"+post.title+"'>" + post.title + "</a></li>";
        }
    }
    if(!wsumm){s += "</ul>";}
    document.getElementById("pbl_posts").innerHTML = s;
}
function stripHTML(s) {
    var c;
    var intag = false; var newstr = "";
    for(var i=0; i<s.length; i++){
        c = s.charAt(i);
        if(c=="<"){intag = true;}
        else if(c==">"){intag = false;}
        if(c == ">"){newstr += " ";}
        else if(!intag){newstr += c;}
    }
    return newstr;
}
//]]>
</script>

<script src="http://percobaanblogeuy.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed">
</script></div>

Pada akhir kode silahkan ganti nama blognya dengan nama blog Anda.

4. Untuk Popular Post silahkan setting dengan menampilkan Snippet dan Thumbnail.
5. Untuk widget Random Posts di sidebar silahkan isi dengan kode di bawah ini:

<div class="random-posts">
<script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=6;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + " title=" + entry.title.$t + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default/?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>
</div>

6. Kemudian untuk mengisi ketiga widget footer silahkan isi dengan kode di bawah ini:

<script type="text/javascript">
    var randarray = new Array();var l=0;var flag;
    var numofpost=6;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + " title=" + entry.title.$t + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    </script>
    <script src="/feeds/posts/default/-/blogger?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>

Perhatikan pada kode ini <script src="/feeds/posts/default/-/blogger?alt=json-in-script silahkan ganti blogger dengan label yang ingin Anda tampilkan.

7. Untuk mengganti title tag pada judul widget lebar di bawah latest post dan widget yang di bawahnya, silahkan temukan kode berikut di edit html.

<b:widget id='HTML10' locked='false' title='Tokoh Kita Hari Ini' type='HTML'>
    <b:includable id='main'>
<div class='bottomBox'>
<script>
document.write(&#39;&lt;span class=&quot;index&quot;&gt;&lt;a title=&quot;See all post&quot; href=&quot;/search/label/<data:content/>?max-results=7&quot;&gt;See all post&lt;/a&gt;&lt;/span&gt;&#39;);
document.write(&#39;&lt;h3&gt;&lt;a title=&quot;Tokoh Kita Hari Ini&quot; href=&quot;/search/label/<data:content/>?max-results=7&quot;&gt;<data:title/>&lt;/a&gt;&lt;/h3&gt;&#39;);
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts6+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts7\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</b:includable>
  </b:widget>

Silahkan samakan kode yang berwarna biru dengan kode yang berwarna merah (title widget). Begitu pula dengan 5 buah widget lainnya di bawah kode di atas, silahkan ikuti seperti cara di atas.


8. Untuk mengganti logo blog, silahkan temukan kode di bawah ini:

<b:includable id='main'>
<div id='header-inner'>
      <div class='titlewrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <h1 class='title'>
<img alt='home' expr:title='data:title' height='70' src='http://2.bp.blogspot.com/-61j3fzq22hE/T_CDlMGfcmI/AAAAAAAABn4/X_sYT6rwMuo/s1600/Untitled-2.png' width='225'/>
        </h1>
<b:else/>
        <p class='title'>
          <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><img alt='home' expr:title='data:title' height='70' src='http://2.bp.blogspot.com/-61j3fzq22hE/T_CDlMGfcmI/AAAAAAAABn4/X_sYT6rwMuo/s1600/Untitled-2.png' width='225'/></a>
        </p>
</b:if>
      </div>
    </div>
</b:includable>
Silahkan ganti kedua url logonya di atas dengan logo blog Anda.

9. Untuk mengisi widget Slider silahkan isikan kode di bawah ini:

<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/blogger?max-results="+numposts3+"&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/blogger?max-results="+numposts3+"&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
Silahkan ganti kode blogger pada kedua kode berikut /feeds/posts/default/-/blogger?max-results (slider sesuai dengan label). Jika ingin sesuai dengan recent post / postingan terbaru silahkan hapus kode -/blogger pada kedua kode di atas.


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

Setelah didownload silahkan copy seluruh kode dari notepad tersebut, kemudian hapus semua kode di edit HTML lalu pastekan kode yang tadi dicopy dari notepad ke edit HTML agar susunan widgetnya sesuai dengan Demo Blog.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

76 Comments Add Comment

jadi tambah mantab tu template magazinenya :D

Balas

Hehehe lumayan lah bung :)

Balas

Keren mas Lebih ringan daripada yang aslinya, kenapa nggak buat juga responsive di Latest postnya mas agar lebih keren

Balas

lumayan ringan mas loadingnya ketimbang yang dulu. joss |o|

Balas

Belum ada waktu lagi mas, nanti kalau ada waktu saya buatkan responsivenya :)

Balas

iya mas untuk jenis magazine ini sudah termasuk cepat loadingnya :)

Balas

waduh sip banget kang tempenya

Balas

kang mau tanya boleh gk, gimana cara buat subscribe email kyk punya kang Adhy
http://img404.imageshack.us/img404/938/wm1u.png

Balas

Mantap ringan sekali templatenya
ijin simpan.... :)

Balas

wah mantap kang ijin sedot template nya ;)

Balas

keren mas, sudah banyak perubahan ya :-bd

Balas

Heheheh apalagi kalau digoreng :ng

Balas

Oh itu sama seperti form subscribe lainnya, hanya menambah warna pada tombolnya saja :)

Balas

Iya mas soalnya banyak juga background image yang dibuang. :)
Silahkan :)

Balas

Iya sis lumayan banyak perubahannya :)

Balas

klw sebuah template udah dipermak ama yg namanya adhy suryadi, hasilnya pasti lebih mulus, rapi , deg..deg.. serr gicuu..|o|

Balas

wow.. keren kang.. gaya magazine-nya mantab

Balas

Kemaren Kang Ismet, sekarang Mas Adi yang bagiin template valid HTML5 & CSS3. Good job lah =)D

Balas

saya amankan di blog template saya om... :D

Balas

Keren kang templatenya. css3 nya bener2 valid Kang.. :-bd

Balas

Kayak mau ketemu pacar aja ya mas deg deg serr :p

Balas

Hehheehe terima kasih :D

Balas

Hehehe iya kang :D kebetulan aja ada waktu memenuhi request :D

Balas

Makasih mas :D

Balas

Silahkan mas Panjz :)

Balas

Iya kang hehehee :D

Balas

Wah jauh dari pertamax. keren Kang artikel template nya
Saya enakan tinggal ambil saja. ijin download yah Kang
Terima kasih atas validasi HTML5 CSS 3 Kang Adhy :-bd

Balas

Template super keren super valid segala valid, sae pisan Kang
Kade akh Kang Adminya jangan sampai palid,=D Sangat komplit
Template megazine sulapan dari Kang Adhy ini sukses terus Kang :)

Balas

saya coba pasang PHOTOSOP ONLINE.. tapi ga muncul kang yang ada hanya tulisan A PLUGIN IS NEEDED TO DISPLAY.. apa yang perlu ditambahin tu kang? thaks jawabannya

Balas

Untuk Firefox memang seperti itu :(, nanti saya share lagi perbaikannya :)

Balas

Moal kang da dicangcang hehehe :D

Balas

Wah, jadi tambah keren tuh sob templatenya,
izin download ya kang..

Balas

Mun di cangcang mah moal valid berarti yah Kang.
Saya ikut download nya Kang buat blog 2 saya :)

Balas

wow bin mantap nih kang ...
saya ambil beberapa saja ya hehe

Balas

wow mantap banget mass... jadi kepingin nie... template nya sangat menggoda...
good jobb mas brooo

Balas

Silahkan mas :D

Balas

Mangga kang Ruly hhehehee :D

Balas

Silahkan dicoba aja mas :D

Balas

Sayang ya mas yang bikin sudah lama gak tampil (maskolis) kangen ama kreatifitasnya

Balas

Sorry mas..OOT. Kalo widget sliding statis (sosial media) yang di kompi imut dibuat menjadi artikel rekomendasi caranya gimana mas? Minta tutornya dong.. :)

Balas

Betul mas, dimanakah dia gerangan? @@, maskolis oohh maskolis hehehe :p

Balas

Sudah dibikinin sama kang Ismet sis :D Coba aja cari di sana :)

Balas

Banyak widget gitu gak lama loadingnya mas?

Balas

Asli bingung saya mas.. nanti saya coba ngurut lagi dari awal tutorialnya.. eh iya, lama ga mampir, template mas Adhy berubah dan mantab banget menurut saya. Perpaduan warnanya cocok bgt.., trus tampilan home yang simple tapi asik :D
template ini dasarnya dari template mas Kolis yang mana ya mas?

Balas

Bisa dicoba loadingnya pada blog demonya mas :)

Balas

Template aslinya dari Johny Ajaib mas :)

Balas

slidingnya masih bisa mas..cuman artikel rekomendasinya sudah blank gak muncul. kenapa itu mas?

Balas

bujuk, itu tata letak banyak bener widget nya,, loading nya berat gak yah ??

Balas

Subhanallahh kerenn banget mas.. Sumpah deh ckckckckck

Balas

bagus kang hasilnya setelah lihat demo
saya masih setia dengan template lama yg saya pakai,tapi saya gak bisa tuh buat resposive apalagi valid html 5
mumet ngoprek template lagi....hehe

Balas

mantap surantap templatenya kang...apalagi template yang puny akang Adhi ini......

Balas

Sangat lengkap banget panduannya :)

Balas

Saya kalau lihat template kenapa jadi ngiler ya.... :D


Salam

Balas

:-bd Mantap Mas Adhy Udah Valid html 5 valid css 3, ini udah lengkap semua cara pemasangan widget :ng masih ada lagi bilang nanti di cloning :D Main ke Rumah Saya Mas Dalam Posingan " Template Seperti ini Hanya Punya Maskolis"

Balas

Kalau Tidak Keberatan :) Mas Adhy

Balas

Boleh dicoba demonya :)

Balas

Heheheh makasih :)

Balas

Betul mas, mumet tapi bikin ketagihan :)

Balas

Heheheh makasih kang :)

Balas

Biar persis sama demonya mas :)

Balas

Hati-hati mas itu bisa jadi penyakit wkwkwkw :ng

Balas

Yang itu udah saya baca kemarin-kemarin mas hehehehe :)
Jika ada yang bilang mengcloning berarti tidak baca judul dan postingannya mas hehehe

Balas

Oh iya kalau boleh tahu apa yang paling Kang Adhy sukai dari template maskolis ? :D

Balas

Susunannya mudah dimengerti mas :D

Balas

Kang ane rampok ya ni template.
mau tanya kang, supaya latest post keluar gambar gimana ya kang?
Soalnya ane gambar2nya menggunakan URL bukan gambar upload sendiri.
Ane pertama pake template yang kompi banget, terus ane ganti ini ternyata sama aja gambarnya gak mau tampil. Gimana ya kang caranya?

Balas

Coba di kang Kapuk, beliau punya template yang bisa menggunakan gambar dari url selain blogger :)

Balas

kapukonline,com ya kang.
Tapi ane sukanya template punya kang adhy. :)
Oke kang makasih, tak coba cari-cari tutorial

Balas

saya sangat suka dengan template buatan maskolis
tapi ada yang yang saya bingung cara agar jika di klik salah satu judul widget di homepage (misal kesehatan), nah saya ingin posting yang muncul tentang kesehatan saja tanpa widget2 di bawah dan sampingnya, maksudnya full gitu deh..(jadi ribet ngomongnya ^^)

template maskolis yg tipe magazine seperti itu semua, nah agan kompi tau caranya gak cara agar jika di klik salah satu label tampilannya jadi full?

thanks

Balas

Harus menggunakan tag conditional khusus untuk mengatur halaman tersebut.

Balas

Mas bagaimana cara menganti kotak komentarnya,

Balas

Mas Adhy Kok Pinter ya, :D
Oia saya ijin share template Kompi banget ya mas, Terimakasih. :)

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×