Obesity Strike

Paduan Lengkap Membuat Template Blog untuk Pemula

noreply@blogger.com (Unknown) — Thu, 29 Sep 2016 21:43:00 +0700

Tutorial kali ini saya khususkan bagi pemula yang ingin mencoba belajar membuat template sendiri, tutorial ini hanya khusus untuk platfrom blogger saja. Pertama tama bahan yang harus digunakan adalah kerangka, kerangka tersebut akan menjadi dasaran utama sebelum membuat template, sudah saya sediakan kerangka sederhana untuk membuat template sendiri, pastikan anda buat dulu sebuah blog baru khusus hanya untuk uji coba template yang nantinya akan dijadikan sebagai bahan pengerjaan proyek template dan jangan lupa buat minimal 1 posting demo, setelah kamu membuat sebuah blog baru, silahkan kamu pilih template sembarang dlu yang sudah disediakan oleh blogger, toh nantinya template tersebut tidak akan kita pakai karena kita akan membuat template sendiri, sekarang kamu masuk pada bagian dasbord blogger, karena kita akan mengedit edit bagian template maka kamu harus pilih pada bagian menu template

Kerangka Template

Berikut ini bahan utama yang sudah saya siapkan yaitu kerangka template, salin dan tempelkan kerangka ini pada Edit HTML template kamu.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>
  <head>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title>
        <data:blog.pageTitle/>
      </title>
      <b:else/>
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>
          404: Page Not Found ~ 
          <data:blog.title/>
        </title>
        <b:else/>
        <title>
          <data:blog.pageName/>
          ~ 
          <data:blog.title/>
        </title>
      </b:if>
    </b:if>
    <b:skin>
      <![CDATA[
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
a,abbr,acronym,address,
big,cite,code,del,dfn,
em,img,ins,kbd,q,
s,samp,small,strike,strong,
sub,sup,tt,
var,b,u,i,center,
dl,dt,dd,
ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,
footer,header,hgroup,menu,nav,
output,ruby,
section,summary,
time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,
figcaption,figure,footer,
header,hgroup,menu,nav,section {
  display:block;
}

body {
  line-height:1;
}

ol,ul {
  list-style:none;
}

blockquote,q {
  quotes:none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* ===============
   FRAMEWORK START
   =============== */
body {
  font:normal normal .8125em/1.4 Arial,Sans-Serif;
  background-color:white;
  color:#333;
}

strong,b {
  font-weight:bold;
}

cite,em,i {
  font-style:italic;
}

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

a img {
  border:none;
}

abbr,
acronym {
  border-bottom:1px dotted;
  cursor:help;
}

sup,
sub {
  vertical-align:baseline;
  position:relative;
  top:-.4em;
  font-size:86%;
}

sub {
  top:.4em;
}

small {
  font-size:86%;
}

kbd {
  font-size:80%;
  border:1px solid #999;
  padding:2px 5px;
  border-bottom-width:2px;
  border-radius:3px;
}

mark {
  background-color:#ffce00;
  color:black;
}

p,blockquote,pre,
table,figure,hr,form,
ol,ul,dl {
  margin:1.5em 0;
}

hr {
  height:1px;
  border:none;
  background-color:#666;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  margin:1.5em 0 0;
}

h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}

ol,ul,dl {margin-left:3em}
ol {list-style:decimal outside}
ul {list-style:disc outside}
li {margin:.5em 0}

dt {font-weight:bold}
dd {margin:0 0 .5em 2em}

input,
button,
select,
textarea {
  font:inherit;
  font-size:100%;
  line-height:normal;
  vertical-align:baseline;
}

textarea {
  display:block;
  box-sizing:border-box;
}

pre,
code {
  font-family:"Courier New",Courier,Monospace;
  color:inherit;
}

pre {
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
}

blockquote {
  margin-left:2em;
  margin-right:2em;
  border-left:4px solid #ccc;
  padding-left:1em;
  font-style:italic;
}

table th,
table td,
table caption {
  border:1px solid;
  padding:.5em 1em;
  text-align:left;
  vertical-align:top;
}

th {
  font-weight:bold;
}

table caption {
  border:none;
  font-style:italic;
}
.hidden,[hidden] {
  display:none;
}

.invisible {
  visibility:hidden;
}

.visually-hidden {
  position:absolute !important;
  overflow:hidden;
  clip:rect(0px 0px 0px 0px);
  clip:rect(0px,0px,0px,0px);
  height:1px;
  width:1px;
  margin:-1px 0 0;
  padding:0;
  border:0;
}

.clear {
  display:block;
  clear:both;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}

.clearfix:after {
  clear:both;
}

.clearfix {
}

.pull-left {
  float:left;
}

.pull-right {
  float:right;
}

.centered {
  clear:both;
  display:block;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.text-center {
  text-align:center;
}

.text-left {
  text-align:left;
}

.text-right {
  text-align:right;
}

.text-justify {
  text-align:justify;
}

.btn {
  color:white;
  background-color:black;
  /* ... */
}

.btn:hover {
  /* ... */
}

.btn:active {
  /* ... */
}
#outer-wrapper{overflow:hidden}
#main-wrapper{width:60%;float:left}
#sidebar-wrapper{width:38%;float:right}
*/]]>
    </b:skin>
  </head>
  <body expr:class='data:blog.pageType' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
    <div id='outer-wrapper'>
      <!-- Disini posisi elemen outer-wrapper -->
      <header class='header-wrapper' id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'/>
      </header>
      <div id='main-wrapper' itemprop='mainContentOfPage'>
        <!-- Disini lokasi untuk posting dan komentar dan b:section dibawah ini adalah widget untuk posting dan komentar -->
        <b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
        </b:section>
      </div>
      <aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
        <!-- Disini Lokasi sidebar blog yang berisi widget, dan kode b:section dibawah ini adalah kode untuk widget sidebar -->
        <b:section class='sidebar' id='sidebar-kanan' showaddelement='yes'/>
      </aside>
      <footer class='footer-wrapper clear' id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
        <!-- Disini lokasi footer, bisa di isi widget dan copyright desainer -->
        <div class='credit' id='credit'>
          Desain Template oleh : Namamu
        </div>
      </footer>
    </div>
    <!-- Akhir dari outer-wrapper -->
  </body>
</HTML>

Simpan, dan coba klik Lihat Blog pada bagian atas dasbord blogger kamu, dan lihat hasilnya, template blank putih

Menambahkan Widget Header Blog

Buatlah dulu header blog, header blog sendiri akan menampilkan Nama Blog Kamu dan deskripsi dari blog kamu
Untuk membuatnya pertama tama masuk pada bagian Tata Letak, dan klik Tambahkan Gadget pada bagian atasnya widget posting

Tulis Judul Blog Kamu Pada Bagian Judul Blog
Tulis Deskripsi Blog Kamu Pada Bagian Deskripsi Blog

Pembuatan pondasi utama sudah selesai, sekarang tinggal mempercantik tampilannya dengan menambahkan CSS pada tiap tiap wrapper

Mulai Mendesain Template

Pertama tama pasanglah dulu Framework CSS Reset ini, CSS ini akan menormalkan semua tampilan elemen HTML —kecuali elemen-elemen formulir— menjadi seragam/normal.

Azkaverb VST Plugin Reverb Freeware

noreply@blogger.com (Unknown) — Sat, 25 Jun 2016 13:47:00 +0700

Harap maklum bila masih banyak kekurangannya ya, soalnya baru kali ini buat vst plugin. dan sementara hanya tersedia untuk win 32bit.

Untuk Instalasinya masih pakai cara manual, Ekstrak file rar lalu copy folder "Azkaverb" dan paste ditempat dimana kamu menyimpan VST plugin mu, biasanya terletak di C:Program Files:Vstplugin

Download

Javascript Email Validation

noreply@blogger.com (Unknown) — Fri, 5 Jun 2015 15:27:00 +0700

Javascript ini digunakan untuk mengetes valid atau tidaknya sebuah alamat email yang dimasukkan pada sebuah form input email, cara ini dapat mengurangi spammer.

Markup HTML

<form>
    <input type="text" id="email" />
    <button type="button" id="submit">Validate</button>
</form>

Javascript

<script type="text/javascript">
//<![CDATA[ 
var submit = document.getElementById('submit');
submit.addEventListener("click", function () {
    var email = document.getElementById('email').value,
        filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
    if (!filter.test(email)) {
        alert('Please enter a valid email!');
    }
}, !1)
//]]>
</script>

Apabila email yang disubmit tidak valid, maka window akan muncul Dialog yang bertuliskan Please enter a valid email!

Demo

2 Cara Mengatasi Render Blocking Javascript Library JQuery

noreply@blogger.com (Unknown) — Mon, 20 Apr 2015 12:23:00 +0700

Bagi sobat blogger, kalian pasti pernah mengalamai hal tidak mengenakkan ini, tentunya sobat pengguna template custom blogger, yaitu masalah render blocking JQuery, render blocking adalah sebuah file JavaScript eksternal yang memblokir di bagian paro atas laman, sedangkan JQuery ini adalah sebuah library javascript yang fungsinya untuk mempermudah penggunaan javascript, karena penggunaan javascript mentah lumayan sulit menurut saya :p.

Okelah kembali ke topik, mengapa JQuery menjadi masalah render blocking ? karena JQuery itu sendiri diletakkan diatas kode </head>, dengan begitu JQuery akan termuat terlebih dahulu, baru setelah itu artikel akan dimuat. okelah dibawah ini dua cara mengatasi render Blocking JQuery:

1. Menambahkan Atribut Async pada JQuery

Metode ini adalah metode pertama, dengan menambahkan atribut async, blog anda akan terlepas dari render blocking JQuery, contoh penggunaan:

Masuk pada EDitor HTML Template , lalu tekan CTRL + F dan cari kode jquery.min.js, setelah ketemu maka penampakannya kurang lebih seperti ini:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

Sekarang tambahkan atribut async='async' pada jquery tersebut, jadi penampakannya kurang lebih menjadi seperti ini:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>

Simpan Template anda, dan sukses, sekarang blog anda sudah terlepas dari render blocking jquery,

namun ada kekurangan dari metode ini yaitu jquery tidak akan bekerja dihalaman homepage/beranda, melainkan script jquery akan bekerja pada halaman selanjutnya, itulah efek menggunakan atribut async ini.

2. Menaruh JQuery diatas kode `</body>`

Metode inilah yang paling bagus, karena tidak ada kekurangannya sama sekali, metode ini saya temukan sendiri karena cari sana sini tidak berhasil juga akhirnya saya cari cara sendiri aja :p, harap diperhatikan, dengan menggunakan metode ini maka kamu harus menaruh semua script JQuery tepat dibawah kode <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>, karena apabila script JQuery tersebut diletakkan diatas/sebelum kode JQuery maka script tersebut tidak akan berjalan karena script library nya berada dibawahnya. cara menggunakan metode ini ialah masuk pada Editor HTML Template lalu tekan CTRL + F dan cari kode jquery.min.js, bila sudah ketemu maka hasilnya kurang lebih sama dengan cara pertama, kemudian kamu ambil JQuery tersebut lalu pindahakan diatas kode </body>, contoh penggunaannya dan contoh menaruh script JQuery nya:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
---taruh semua script JQuery disini---
//]]>
</script>
</body>

Ciri ciri script JQuery biasanya diawali dengan kode $ contohnya dibawah ini:

$(function () {
    $('.Label h2').on("click", function (t) {
        $(this).toggleClass("on").next().slideToggle(200);
        t.stopPropagation()
    });
    $(document.body).on("click", function () {
        $('.Label').find(".on").removeClass("on").next().slideUp(200);
    });
});

Bila ada kesulitan silahkan tanyakan dikolom komentar, semoga bermanfaat!

Daftar Salinan Berkas Proyek dari Blog ini

noreply@blogger.com (Unknown) — Sun, 5 Apr 2015 11:15:00 +0700

Post ini saya buat karena Google Code pada tanggal 26 Januari 2016 nanti akan mematikan layanannya, karena secara keseluruhan hampir semua berkas proyek blog ini saya upload di Code Google, kemungkinan berkas berkas tersebut juga akan hilang, jadi saya beri salinannya untuk anda download dan bisa anda upload lagi di Google Drive, ataupun di hosting anda sendiri, berikut ini daftar salinan berkasnya:

Nama File	Kategori	Download
Elegant Shared Count	CSS	Download
Minima Shared Count	CSS	Download
Emoticon	Javascript	Download
Recent Comment with Animation	Javascript	Download
Recent Post Preloader	Javascript	Download
Slider SKitter	Javascript	Download
Social Count	Javascript	Download
Syntax Highlighting	Javascript	Download

RAF Responsive Premium Template

noreply@blogger.com (Unknown) — Sat, 4 Apr 2015 12:09:00 +0700

Agar mendapatkan loading yang bisa dibilang cukup cepat, saya melakukan beberapa optimasi, diantaranya memasang Plugin Lazy Loading Image untuk Blogger dan Memuat CSS Tanpa menghalangi Render.

Testing Speed loading template ini versi PageSpeed Insights, pada tampilan mobile kecepatannya 98 / 100 , dan pada tampilan desktop kecepatannya 96 / 100, lihat langsung saja Tested on PageSpeed Insights

Template ini saya buat responsive, dengan begitu anda perlu menonaktifkan tempilan selular template anda.

Valid Schema.org

Fitur Template

Responsive ⇒ view
Auto Readmore tanpa Javascript
Thread Comment Hack Ringan
Artikel Terkait
Valid Schema.org
Dan masih banyak lagi lainnya yang tidak dapata saya sebutkan satu persatu...

Lihat Demo Buy Now $8

Untuk membeli template ini, silahkan klik Tombol Buy Now dan anda akan dibawa menuju halaman kontak, dan silahkan kontak saya untuk membeli template ini, terima kasih

Memuat CSS Tanpa menghalangi Render

noreply@blogger.com (Unknown) — Fri, 3 Apr 2015 11:39:00 +0700

Metode inilah yang akan memberikan konten yang bisa digunakan untuk pengunjung lebih cepat dibandingkan dengan metode pemuatan css/font secara sinkron lainnya.

Trik untuk memicu stylesheet dimuat secara asinkron adalah dengan menggunakan elemen <link> dan menetapkan nilai yang tidak valid untuk atribut media (Saya menggunakan media="none"). Ketika permintaan media yang bernilai false, browser masih akan men-download stylesheet, tapi tidak akan menunggu untuk konten akan tersedia sebelum render halaman.

<link rel="stylesheet" href="css.css" media="none"></link>

Setelah stylesheet selesai men-download, atribut media harus diset ke nilai yang valid sehingga aturan gaya akan diterapkan langsung ke dokumen. ,metode onload event lah yang digunakan untuk mengeset properti media menjadi all :

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"></link>

Hasil Akhir

Berikut ini ialah hasil akhir yang langsung dapat anda gunakan, cara menggunakannya salin html berikut ini dan tempelkan diatas kode </head> dan ganti atribut href nya menjadi url link css/font anda:

<link rel="stylesheet" href="your-link-the.css" media="none" onload="if(media!='all')media='all'"></link>

Beberapa Kekurangan dari trik ini

Metode ini tidak bekerja di Android <4.4.
Beberapa browser tampaknya masih memblokir CSS meskipun atribut medianya diset tidak valid. Ini berarti CSS akan dimuat seperti biasa.

Sumber Referensi ⇒ Loading CSS without blocking render

Javascript Lazy Loading Image untuk Blogger

noreply@blogger.com (Unknown) — Sat, 14 Mar 2015 16:31:00 +0700

Javascript ini cocok untuk template blog yang menggunakan gambar thumbnail dengan ukuran yang sedikit agak besar, karena dapat mengurangi beban loading blog.

Disini saya sedikit memodifikasi javascript ini agar gambar yang diload dapat ditentukan lebar dan tingginya. sesuai keinginan.

Demo

Contoh penggunaan, plugin ini akan bekerja pada gambar yang memilik atribut class lazy:

<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">

blank.gif adalah gambar pengganti sebelum gambar asli dimuat.
data-src disi dengan url gambar asli
width untuk menentukan lebar dari gambar tersebut, harus disi
height untuk menentukan tinggi dari gambar tersebut, harus disi

Simpan Javascript ini diatas kode </body>

<script type="text/javascript">
//<![CDATA[
/* lazyload.js (c) Lorenzo Giuliani
 * MIT License (http://www.opensource.org/licenses/mit-license.html)
 *
 * expects a list of:  
 * `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
 * modified by Rifan Hidayat <http://obesitystrike.blogspot.com>
 */! function (e) {
    function t(e, t) {
        var n = new Image,
            r = e.getAttribute("width"),
            p = e.getAttribute("height"),
            l = e.getAttribute("data-src").replace(/\/s[0-9]+(\-c)?/, "/w" + r + "-h" + p + "-c");
        n.onload = function () {
            e.parent ? e.parent.replaceChild(n, e) : e.src = l, t ? t() : null
        }, n.src = l
    }

    function n(t) {
        var n = t.getBoundingClientRect();
        return n.top >= 0 && n.left >= 0 && n.top <= (e.innerHeight || document.documentElement.clientHeight)
    }
    for (var r = function (e, t) {
        if (document.querySelectorAll) t = document.querySelectorAll(e);
        else {
            var n = document,
                r = n.styleSheets[0] || n.createStyleSheet();
            r.addRule(e, "f:b");
            for (var l = n.all, c = 0, a = [], i = l.length; i > c; c++) l[c].currentStyle.f && a.push(l[c]);
            r.removeRule(0), t = a
        }
        return t
    }, l = function (t, n) {
        e.addEventListener ? this.addEventListener(t, n, !1) : e.attachEvent ? this.attachEvent("on" + t, n) : this["on" + t] = n
    }, c = new Array, a = r("img.lazy"), i = function () {
        for (var e = 0; e < c.length; e++) n(c[e]) && t(c[e], function () {
            c.splice(e, e)
        })
    }, o = 0; o < a.length; o++) c.push(a[o]);
    i(), l("scroll", i)
}(this);
//]]>
</script>

Show hide Label dengan JQuery

noreply@blogger.com (Unknown) — Tue, 10 Feb 2015 12:31:00 +0700

Inilah Widget label dengan animasi show hide dan dengan desain Flat UI yang super ganteng yang akan lebih menghemat ruang pada sidebar blog anda.

Demo

Okelah simak saja berikut ini langkahnya:

Bagi yang templatenya sudah dilengkapi dengan widget Label, lewati saja langkah ini ! Pertama tama buatlah dahulu sebuah widget label dengan cara masuk Dasboard Blogger lalu masuk ke menu Tata Letak dan klik tulisan Tambahkan Gadget lalu pilih widget Label dan atur menu Tampilkan menjadi Daftar dan centang Tampilkan jumlah entri per label.

Sekarang masuk menu Template lalu Edit HTML Template, lalu cari kode ]]></b:skin> atau </style> , setelah ketemu tempelkan CSS ini diatasnya:

.Label .on {
    background-color:#48C9B0
}
.Label h2 {
    position:relative;
    padding: 10px 39px 10px 15px;
    font-size: 15px;
    line-height: 1.4;
    border-radius: 4px;
    color: #FFF;
    background-color: #1ABC9C;
    display: block;
    cursor:pointer;
    margin:10px 0
}
.Label h2:after {
    content:"";
    border-width: 8px;
    border-color: #fff transparent transparent;
    border-style: solid;
    position: absolute;
    right: 15px;
    top: 17px
}
h2.on:after {
    border-color: transparent transparent #fff;
    top: 8px
}
.Label .count {
    display: block;
    float: right;
    min-width: 25px;
    text-align: center;
    border-radius: 2px;
    background-color:#D6DBDF
}
.Label li:hover .count, .actived .count {
    color: #FFF;
    background-color: #1ABC9C;
}
.list-label-widget-content {
    border-radius: 4px;
    background-color: #F3F4F5;
}
.Label ul, .Label li {
    padding: 0px;
    margin: 0px;
    list-style: outside none none;
}
.Label ul {
    border-radius: 4px;
    overflow:hidden
}
.Label li a {
    padding:10px;
    color: rgba(52, 73, 94, 0.85);
    display:block;
    font-size: 14px;
    text-decoration:none
}
.Label li a:hover, .Label .actived {
    color: inherit;
    background-color: #E1E4E7;
    text-decoration:none
}

Sekarang cari kode title='Label' type='Label', setelah ketemu gulir sedikit mouse kebawah dan temukan sebaris kode ini:

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    <b:include name='quickedit'/>
  </div>

Ganti deretan kode diatas dengan kode dibawah ini:

<div expr:class='&quot;widget-content hidden &quot; + data:display + &quot;-label-widget-content&quot;'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
      <b:loop values='data:labels' var='label'>
        <li>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <a class='actived' expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'>
              <data:label.name/>
                <b:if cond='data:showFreqNumbers'>
                <span class='count' dir='ltr'><data:label.count/></span>
              </b:if>
            </a>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'>
              <data:label.name/>
                <b:if cond='data:showFreqNumbers'>
                <span class='count' dir='ltr'><data:label.count/></span>
              </b:if>
            </a>
          </b:if>
        </li>
      </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.searchLabel == data:label.name'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
  </div>

Langkah terakhir, simpan Javascript ini diatas kode </body>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    $('.Label h2').on("click", function (t) {
        $(this).toggleClass("on").next().slideToggle(200);
        t.stopPropagation()
    });
    $(document.body).on("click", function () {
        $('.Label').find(".on").removeClass("on").next().slideUp(200);
    });
});
//]]>
</script>

Kode yang saya beri garis bawah itu adalah JQuery, bila template anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut !

Membuat Emoticon pada Komentar Blogger

noreply@blogger.com (Unknown) — Sun, 8 Feb 2015 11:59:00 +0700

Emoticon akan bekerja jika blog anda sudah dilengkapi dengan JQuery.

Dengan adanya emoticon, membuat komentar lebih menarik karena komentator dapat mengungkapkan persaannya lewat emoticon tersebut

Pemasangan pada Blogspot

Pertama - tama kamu masuk dulu Menu Template lalu Edit HTML Template.

Sekarang Tekan CTRL + F lalu cari kode ]]></b:skin> atau </style> , setelah ketemu tempelkan CSS ini diatasnya:

.emo {
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
    font: inherit;
}
.emoKey {
    border: none;
    padding: 1px;
    width: 2em;
    line-height: 1;
    margin: -2px 0 -2px 4px;
    box-shadow: none;
    font-weight: bold;
}

Sekarang temukan kode </body>, salin dan tempelkan Javascript berikut ini diatasnya:

<script src='http://obesity-project.googlecode.com/svn/trunk/js/emoticon.js' type='text/javascript'></script>

Menempatkan Emoticon

Aku akan memberikan contoh emoticon ini akan diletakkan didalam formulir komentar, pertama - tama masuklah pada Setelan lalu Post dan komentar dan pastekan kode dibawah ini didalam formulirnya:

 :) :( =( :waaa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :yaya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ \m/ **p <3 0:) ^o^ :-a 7:O *fck* xV x@ X@ ~x( <:) <=) (-.-,) *=p =p* ''J :W :bye: :i-am-here: :cendol: :rolled: *bang* :drummer: :guitarist: :vocalist:

kalo bingung lihat gambar dibawah ini:

Klik Simpan Template, udah gitu aja

CSS3 Info Box dengan Icon Font Awesome

noreply@blogger.com (Unknown) — Sat, 7 Feb 2015 10:24:00 +0700

Untuk memperganteng tampilannya saya menggunakan icon dari Font Awesome , dengan begitu pada langkah pemasangannya kamu harus memanggil fontnya terlebih dahulu.

Demo

Pemasangan pada Blog

Pada Dasboard Blogger pilih menu Template lalu Edit HTML tekan keyboard CTRL + F dan cari kode </head> setelah ketemu, letakkan link css ini tepat diatas kode yang kamu temukan itu.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>

Masih pada bagian Template, Sekarang cari kode ]]></b:skin> atau kode </style>. Setelah ketemu, Letakkan CSS ini tepat diatasnya

.catatan, .info, .alert, .instruksi, .update {
    display: block;
    font-style: normal;
    color: #333;
    padding: 15px 18px 15px 48px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius:3px;
    margin:0 0 10px;
    color:#FFF
}
.catatan:before, .info:before, .alert:before, .instruksi:before, .update:before {
    font-family:"FontAwesome";
    display: block;
    position: absolute;
    top: 15px;
    left: 16px;
    color: rgba(0, 0, 0, 0.15);
    font-size: 22px;
    line-height: 1;
}
.catatan:before {
    content:'\f11d'
}
.info:before {
    content:'\f05a'
}
.alert:before {
    content:'\f071'
}
.instruksi:before {
    content:'\f028'
}
.update:before {
    content:'\f085'
}
.catatan {
    background-color:#49A5D7
}
.info {
    background-color:#FF9531
}
.alert {
    background-color:#B25A5A
}
.instruksi {
    background-color:#FAD163;
    color: #000;
}
.update {
    background-color:#69A24A
}

Cara Menggunakan

Terdapat beberapa macam info box yang saya tuliskan disini, seperti catatan, info, alert, instruksi, dan yang terkahir update.

Untuk penggunaanya hampir sama, hanya saja pada kelasnya yang berbeda, untuk menampilkannya pada posting blog, pertama tama masuk HTML Post bukan Compose , dan tempelkan HTML dibawah ini

<div class='catatan'>. . Teks anda Disini. .</div>

Perhatikan class yang saya beri tanda, itu adalah class dari jenis info box apa yang akan digunakan, misal akan membuat info box pemberitahuan tentang posting yang telah diupdate, maka class yang digunakan adalah class Update.

Semoga Bermanfaat!

Membuat Animasi Memantul dengan JQuery

noreply@blogger.com (Unknown) — Sun, 1 Feb 2015 13:38:00 +0700

Sebenarnya ada cara lain untuk membuat animasi memantul ini yaitu dengan menggunakan CSS Key Frames, namun penggunaan CSS Key Frames tidak valid CSS3 jadi saya buat alternatif lain yaitu menggunakan JQuery

CSS

CSS ini berfunsi untuk memperhalus animasi yaitu dengan menambahkan efek transisi

#max {
    transition:all 0.25s ease 0s
}

HTML

<img id="max" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3lhZwYfm-2H3MYglHykDdC5j_6phFajauyuBVolgJYtBJ1YqMyeL58CtkWXWXHZMD6g4yRaUqKMmBb1vy20LTJMO15q1cuGaIPk2v7wPl4eav8l0fKy3vrYkjuKF7W1aTm1rYApWzZA/w353-h354-no/logoku.png" />

JQuery

function R(n) {
    n = $("#max");
    window.setInterval(function () {
        n.css("margin-top", n.css("margin-top") == "10px" ? "-10px" : "10px")
    }, 300)
}
R();

Lihat Demo

Widget Recent Post dimuat Secara Asinkron

noreply@blogger.com (Unknown) — Wed, 7 Jan 2015 10:56:00 +0700

Dengan demikian, widget ini tidak akan membuat loading blog menjadi semakin berat, karena widget ini saya buat seramah mungkin, yaitu dengan menggunakan fitur asinkron, asinkron = akan termuat setelah seluruh halaman termuat.

Lihat Demo

Widget ini juga bisa menampilkan post terbaru perlabel, untuk pemasangannya cukup mudah, ikuti saja langkah langkahnya dibawah ini

Pada Dasboard Blogger pilih Tata Letak dan Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style scoped="scoped">
#recent_post {
    font: 12px Arial
}
#recent_post ul, #recent_post li {
    margin: 0px;
    padding: 0px;
    list-style: outside none none;
}
#recent_post li {
    line-height: 1.3em;
    margin: 0px;
    padding: 5px 0px;
    border-bottom: 1px dashed #DDD;
    clear:both;
    min-height: 80px
}
.thumbnail-iki {
    display: block;
    float: left;
    max-width: none;
    max-height: none;
    background-color: #CCC;
    margin: 0 10px 0 0;
    overflow: hidden;
    padding:3px
}
.title-iki, .content-iki, .meta-iki {
    display: block;
}
.content-iki, .meta-iki {
    margin-left:90px;
}
.meta-iki {
    padding-bottom:5px;
    font-size:10px
}
</style>
<div id='recent_post'></div>
<script>
//<![CDATA[
var alamat = "http://obesitystrike.blogspot.com",
    caracter = 100,
    thubmnailSize = 75,
    jumlah = 10,
    ByLabel = false,
    newTab = true,
    noImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    bulan = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
//]]>
</script>
<script src='http://obs-project.googlecode.com/svn/js/recent_post.js'></script>

Konfigurasi Widget

Opsi	Keterangan
alamat	Ganti dengan URL blog Anda.
caracter	Digunakan untuk menentukan jumlah karakter ringkasan posting.
thubmnailSize	Digunakan untuk menentukan ukuran thumbnail. Ubah lebarnya menjadi `0` untuk tidak menampilkan thumbnail.
jumlah	Digunakan untuk menentukan jumlah posting yang akan ditampilkan.
ByLabel	Ganti nilai `false` menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: `ByLabel = "Seo"` akan menampilkan semua posting dengan label Seo.
newTab	Jika bernilai `true`, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik.
noImage	Gambar Thumbnail cadangan jika posting yang tampil dalam widget tidak memiliki gambar.
bulan	Tentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda.

Membuat Post View Counter untuk Blogspot

noreply@blogger.com (Unknown) — Fri, 2 Jan 2015 13:59:00 +0700

Hampir sama dengan tutorial yang pernah saya tuliskan disini Memasang Download Counter pada Blog dengan Plugin dari Firebase, hanya pada event nya saja yang berbeda.

Lihat Demo

Dengan begitu, anda akan mengetahui seberapa seringnya post anda dilihat / dibaca. Untuk pemasangannya ikuti langkah demi langkah dibawah ini.

Membuat Akun Firebase
Membuat Data Firebase
Memasang Post View Counter pada Blog

Pada dasboard blogger pilih menu Template klik Edit HTML dan klik lagi CTRL + F kemudian cari kode </head>

Salin dan letakkan JQuery berikut tepat diatas kode yang anda temukan, bila template anda sudah dilengkapi dengan JQuery, lewati langkah ini !

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Membuat Akun Firebase

Silahkan lakukan registrasi terlebih dahulu di Firebase, klik klik disini

Membuat Data Firebase

Untuk membuat data firebase bisa lihat gambar dibawah ini :

Ingat nama APP nya, karena itu akan menjadi ID untuk Database anda

Memasang Post View Counter pada Blog

Klik lagi CTRL + F kemudian cari kode </b:skin> atau </style>

Salin dan letakkan CSS ini tepat diatas kode yang anda temukan tadi

.post-header-line-1 {
    overflow:hidden
}
.viewers {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAChUlEQVR42pWTy24ScRTGYSE+gVsTm5j4Ei7swgfQ+AAmdmfixjQNoSBpqEAQ2bhwo5ZSliZGaVptqablNvf7UC4CkrRUUCGlMCng8fyHS6ldGEm+kMyc73euY7EMf1aU7T9ltUyZr87Ozs7Z7fagw+kI/UuLrsXnq9HVB2OAjZhj6x9UlmdBEIW/xIMgCSBOSZJFYFgKukb3pQkgmYmZojMXxVBAYzDD0sByYzGQoVLQ6/UGJoCURbIRAwlUNRV4nhsQM8nEjEwcP5LAQOVbGQaDQfscIEOloVqt/gYAulQuBz9/2amaRjTwAjuUyEKhmINKpdzvdrv3zwHSmRTUjmptBNwiL9xup0vEGfAih7PgsH8eZFWERqMOkchK1DCMd1MA3iy10+kYHo/nET6/sbTkuKZqimmWZBwmZj9uH8PWp4+7K+FXa6enp70JQFIkaLVasLERE7z+ZV88vlWP72zrDJO+jYCqgpmbzV8gSeLRs6DPy7AZo9fvgQlwuV2hk5M2JBJ7sj/gC5BZSLIAxJRM7h42Gj8fYlvRZrP51umyL1N06lDXJeiPAJei0ahfUeWjpz6PN5Hca5Fex2Vrmgy17zUGAVcw9rLdsfCkUimAposTgDUcDt8LhoIvcOp1siYybXNgCqkCD0fif/gCvjsYezOy9uZ1qZQDPXtWgW3m+szd2Pp7juycE1hzWCT7ECBisIwbSjS2dzaThYIOubwK+zn5DDA//9jP4NGwo+zD8tGMAFVDgC5DLqfC19I+5PMaFIs6/it4SP1JC3M0Aig6bV4ey9O4ewbbYEHGSlRsg/SczRKQgmYVDg4q5BJh/EFZ8KoiuFdy3xdESj1T38xMzKiFP8CmvksDbxaWAAAAAElFTkSuQmCC") no-repeat scroll 3px 50% #F5F5F5;
    font:13px"Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
    padding: 8px 5px 8px 25px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: block;
    float:left
}
.loading {
    display:inline-block;
    width:82px;
    height:9px;
    background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWyu71B174mBn8kFp2PbmjKNdyNv1dnEykmvv7ZyrNDWRq4TvSJvxcHXP4M55TgCX3yk2vbzVpfagtaFpQ32Fb5OXjx1ER7Lft5FHDQrOvZ7XKEIJpAG6AUfby-AfzImUCpQed0YMjZwHy/s1600/loading.gif') no-repeat 0 0
}

Sekarang cari kode </body>, dan letakkan JQuery ini diatasnya

<script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function () {
    var b = $('.viewers');
    b.each(function () {
        var v = $(this).attr('id'),
            d = new Firebase('Isi dengan Database yang tadi anda buat' + v);
        d.once('value', function (snapshot) {
            var data = snapshot.val();
            if (data == null) {
                data = 1;
            } else if (window.location.pathname != '/') {
                data++;
            }
            d.set(data);
            b.children('span').removeClass('loading').html(data);
        });
    });
});
//]]>
</script>

Klik lagi CTRL + F sekarang cari kode <div class='post-header'>

Pada template yang masih standart, pasti anda akan menemukan hasil kurang lebih seperti ini:

<div class='post-header'>
  <div class='post-header-line-1'/>
</div>

Pada bagian <div class='post-header-line-1'/>, ganti dengan kode dibawah ini:

<div class='post-header-line-1'>
    <div class='viewers' expr:id='&quot;obs-&quot; + data:post.id'>Dilihat sebanyak :<span class='loading' />Kali</div>
</div>

Pada baris yang saya beri tanda atau baris ini Isi dengan Database yang tadi anda buat, ganti dengan url Database yang anda buat pada langkah ke-2 tadi

Selesai, klik SIMPAN template anda

Thread Comments Blogger Hack tanpa Pop Up

noreply@blogger.com (Unknown) — Sun, 28 Dec 2014 10:34:00 +0700

Update. Merubah tampilan dan Menambahkan emotikon simple ala facebook, photo avatar tanpa javascript dengan ukuran s35-c atau 35px x 35px

Kali ini saya akan sedikit berbagi untuk anda yang suka dengan thread comment hack (Sistim Komentar Bersarang) dengan kedalaman dari 2 level / lebih, sebenarnya Thread comment yang akan saya bagikan ini adalah thread comment hack buatan Artisteer Tutorials

Karena thread comment hack dari beliau ini menggunakan pop up window untuk melakukan reply (Balas) pada komentarnya, saya mencari solusi agar reply (Balas) Komentarnya tidak menggunakan pop up window

Alhasil, saya menemukan sebuah elemen data untuk blogger yang akan menampilkan sebuah ID Komentar induk (ParentID) dari komentar balasan tersebut, saya temukan kode tersebut disini ⇒ bX-NicoNico, dengan begitu kita tidak perlu menggunakan pop up window untuk memasukkan ID komentar induknya, karena saya akan otomatis menampilkan pada komentar yang memiliki induk dengan tag kondisional.

Maka bisa disebut juga Thread Comment ini gabungan dari dua metode, hehe..

Lihat Demo

Mengaktifkan Fitur Komentar Bersarang Hack pada Blogger

Masuklah pada Editor HTML Template anda, dan temukan kode ]]></b:skin> atau </style>

Salinlah kode ini dan letakkan diatasnya

/*----------------------------------------------------
          {--------}  Comment {--------}
----------------------------------------------------*/
.comments{background-color:#fff;font:13px "Lucida Grande",Tahoma,Verdana,Arial,sans-serif!important;color:#999;padding:20px}
.comments a{color:#2D5E7B}
.cf:before,.cf:after{content:"";display:table}
.cf:after{clear:both}
.cl{display:block;clear:both}
#comments h4{font-size:18px;font-weight:normal;margin:20px 0}
.cm_wrap{margin-bottom:30px}
.delete{border-radius:4px;padding:9px 12px;color:#FFF;background-color:#8D2079}
.avatar-image-container{float:left;background-color:#F4F4F4;border:thin solid #E6E6E6;width:35px;height:35px;padding:4px;border-radius:6px}
.avatar-image-container img{width:35px;height:35px}
.avatar-image-container img[src$="blogblog.com/img/blank.gif"]{background:url('http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=35') no-repeat center center;}
.cm_reply,.cm_delete{padding:6px;color:#fff;text-align:center;text-decoration:none;border-radius:2px;background-color:#E5E5E5;font:11px/18px sans-serif;display:inline-block;width:44px;margin:3px 0 0;line-height:1;cursor:pointer;border-width:1px;border-style:solid;border-right:1px solid #C4C4C4;border-color:#E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4}
.cm_reply:hover,.cm_delete:hover{text-decoration:none!important;background-color:#fefefe}
.cm_body{padding:15px;border:1px solid #DDD;margin-left:50px}
.inner{padding:15px;border:1px solid #DDD}
.cm_header{padding:0;margin:0 0 10px;overflow:hidden}
.name{margin:0;padding:0;float:left}
.cm_text{margin:0 0 15px;font-size:13px;color:#333}
pre,i[rel="pre"]{padding:0.8em 1em;margin:0;background-color:#222;border-left:4px solid #40627E;font-size:13px;color:#839496;font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;line-height:1.4em;position:relative;word-wrap:normal;white-space:pre;overflow:auto}
blockquote,b[rel="quote"]{margin:0;position:relative;font-style:italic;border-left:3px solid #C69F73;padding:0 18px}
.cm_date{font-size:11px;color:#999;text-decoration:none;text-align:right}
.cm_pagenavi{font-size:10px;text-transform:uppercase;color:#666;text-shadow:1px 1px white;font-weight:bold}
.cm_pagenavi a{color:#666;text-decoration:none;padding:10px}
.cm_pagenavi a:hover{text-decoration:underline}
.cm_pagenavi span{color:#888;background:white;padding:4px;border:1px solid #E0E0E0}
.comment-form iframe{width:100%;height:240px;margin:0 0 20px}
.comment-form p{margin:40px 0 0;background-color:#fff;padding:10px;color:#000;line-height:20px;font-size:11px;border-radius:3px;position:relative;border:1px solid #ddd}
.comment-form p:before,.comment-form p:after{content:"";width:0;height:0;position:absolute;top:100%;left:15px;border-width:12px;border-image:none;border-style:solid;border-color:#ddd transparent transparent}
.comment-form p:after{left:17px;border-width:10px;border-color:#fff transparent transparent}
.loader{background-image:url('data:image/gif;base64,R0lGODlhKwALAPEAAP///2aZzLPM5WaZzCH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAKwALAAACMoSOCMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64oCAyTBUAACH5BAkKAAAALAAAAAArAAsAAAI9xI4IyyAPYWOxmoTHrHzzmGHe94xkmJifyqFKQ0pwLLgHa82xrekkDrIBZRQab1jyfY7KTtPimixiUsevAAAh+QQJCgAAACwAAAAAKwALAAACPYSOCMswD2FjqZpqW9xv4g8KE7d54XmMpNSgqLoOpgvC60xjNonnyc7p+VKamKw1zDCMR8rp8pksYlKorgAAIfkECQoAAAAsAAAAACsACwAAAkCEjgjLltnYmJS6Bxt+sfq5ZUyoNJ9HHlEqdCfFrqn7DrE2m7Wdj/2y45FkQ13t5itKdshFExC8YCLOEBX6AhQAADsAAAAAAAAAAAA=');background-repeat:no-repeat;background-position:50% 50%}
.batal{margin:0;padding:10px;border:1px solid #4B81AA;color:#fff!important;text-align:center;text-shadow:0 -1px 0 white;text-decoration:none;border-radius:2px;background-color:#468BC1;display:none;height:15px;width:30px}
.emo{cursor: pointer;width:17px;height:16px;display:inline-block;background-image:url("data:image/png;base64,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");background-repeat:no-repeat;background-size:auto auto;vertical-align:middle}
.smile{background-position:0 -324px}
.sad{background-position:0 -103px}
.melet{background-position:0 -375px}
.mrangas{background-position:0 -154px}
.oo{background-position:0 -120px}
.ok{background-position:0 -426px}
.koco{background-position:0 -137px}
.kocoi{background-position:0 -358px}
.uu{background-position:0 -392px}
.nangis{background-position:0 -69px}
.jahat{background-position:0 -86px}
.apa{background-position:0 0}
.kiss{background-position:0 -222px}
.hati{background-position:0 -189px}
.imut{background-position:0 -205px}
.lha{background-position:0 -341px}
.ori{background-position:0 -52px}
.oka{background-position:0 -35px}
.sepet{background-position:0 -409px}
.pacman{background-position:0 -239px}
.wkwk{background-position:0 -18px}
.emotki{margin:20px 0}
.emone{text-align:center;float:left}
.texte{padding:0;text-align:center;margin:0 0 0 3px;letter-spacing:1px;width:2em;vertical-align:middle;border:1px solid #ddd;box-shadow:medium none}
.batal:hover{text-decoration:none}
.cm_wrap .batal{display:block}
.cm_wrap[style*="margin-left:25%"] .cm_reply{display:none}

Sekarang cari kode <b:includable id='comments' var='post'> dan ganti kode tersebut dengan kode dibawah ini, sampai kode penutupnya yaitu kode </b:includable>

<b:includable id='comments' var='post'>
<b:if cond='data:blog.url == &quot;http://obs-demo.blogspot.com/2014/12/thread-comment-hack-whitout-popup-window.html&quot;'>
<div class='comments' id='comments'>
  <b:if cond='data:post.allowComments'>
    <h4>
      <b:if cond='data:post.numComments &gt; 0'>
        <b:if cond='data:post.numComments == 1'>
          <span id='cm_total'>
            1
          </span>
          comment
          <b:else/>
          <span id='cm_total'>
            <data:post.numComments/>
          </span>
          comments
        </b:if>
      </b:if>
    </h4>
    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container cl cf'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160;
        <data:post.commentRangeText/>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div id='comment_block'>
      <b:loop values='data:post.comments' var='comment'>
        <b:if cond='data:comment.author == data:post.author'>
          <div expr:id='&quot;a&quot; + data:comment.id'>
            <div class='cm_wrap admin cl cf' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.isDeleted'>
                <div class='delete'>
                  <data:comment.body/>
                </div>
                <b:else/>
                <div class='avatar-image-container admin vcard'>
                  <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc'/>
                </div>
                <div class='cm_body'>
                  <section class='inner'>
                    <header class='cm_header cf'>
                      <h5 class='name'>
                        <b:if cond='data:comment.authorUrl'>
                          <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                            <data:comment.author/>
                          </a>
                          <b:else/>
                          <data:comment.author/>
                        </b:if>
                      </h5>
                    </header>
                    <div class='cm_text admin'>
                      <b:if cond='data:comment.inReplyTo'>
                        @<a expr:href='&quot;#a&quot; + data:comment.inReplyTo'>Balasan</a>
                      </b:if>
                      <data:comment.body/>
                    </div>
                    <footer class='cm_date'>
                      <a class='comment_tanggal' expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                        <data:comment.timestamp/>
                      </a>
                    </footer>
                  </section>
                  <footer class='response' style='margin-bottom: -26px;'>
                    <a class='cm_reply' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'>
                      Reply
                    </a>
                    <a class='cm_delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
                      Hapus
                    </a>
                  </footer>
                </div>
              </b:if>
            </div>
          </div>
          <b:else/>
          <div expr:id='&quot;a&quot; + data:comment.id'>
            <div class='cm_wrap cl cf' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.isDeleted'>
                <div class='delete'>
                  <data:comment.body/>
                </div>
                <b:else/>
                <div class='avatar-image-container admin vcard'>
                  <img expr:alt='data:comment.author' expr:src='data:comment.authorAvatarSrc'/>
                </div>
                <div class='cm_body'>
                  <section class='inner'>
                    <header class='cm_header cf'>
                      <h5 class='name'>
                        <b:if cond='data:comment.authorUrl'>
                          <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                            <data:comment.author/>
                          </a>
                          <b:else/>
                          <data:comment.author/>
                        </b:if>
                      </h5>
                    </header>
                    <div class='cm_text visitor'>
                      <b:if cond='data:comment.inReplyTo'>
                        @<a expr:href='&quot;#a&quot; + data:comment.inReplyTo'>Balasan</a>
                      </b:if>
                      <data:comment.body/>
                    </div>
                    <footer class='cm_date'>
                      <a class='comment_tanggal' expr:href='data:comment.url' rel='nofollow' title='comment permalink'>
                        <data:comment.timestamp/>
                      </a>
                    </footer>
                  </section>
                  <footer class='response' style='margin-bottom: -26px;'>
                    <a class='cm_reply' expr:href='&quot;javascript:replyTo(&amp;quot;&quot; + data:comment.id + &quot;&amp;quot;);&quot;'>
                      Reply
                    </a>
                    <a class='cm_delete' expr:href='&quot;http://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:comment.id' expr:title='data:top.deleteCommentMsg'>
                      Hapus
                    </a>
                  </footer>
                </div>
              </b:if>
            </div>
          </div>
        </b:if>
      </b:loop>
    </div>
    <b:if cond='data:post.commentPagingRequired'>
      <span class='paging-control-container cl cf'>
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
          <data:post.oldestLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
          <data:post.olderLinkText/>
        </a>
        &#160;
        <data:post.commentRangeText/>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
          <data:post.newerLinkText/>
        </a>
        &#160;
        <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
          <data:post.newestLinkText/>
        </a>
      </span>
    </b:if>
    <div class='comment-form' id='comment-form'>
      <p>
        <data:blogCommentMessage/>
        Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
        <br/>
        Untuk menyisipkan tautan dengan aman, gunakan kode 
        <code>
          [url=http://nama_situs.com]Teks Tautan[/url]
        </code>
        <br/>
        Untuk menyisipkan kode, gunakan tag 
        <code>
          &amp;lt;i rel=&quot;code&quot;&amp;gt;KODE ANDA&amp;lt;/i&amp;gt;
        </code>
        <br/>
        Kode yang panjang bisa menggunakan tag 
        <code>
          &amp;lt;i rel=&quot;pre&quot;&amp;gt;KODE PANJANG ANDA&amp;lt;/i&amp;gt;
        </code>
        <br/>
        Untuk menyisipkan gambar, gunakan kode 
        <code>
          [img]URL GAMBAR[/img]
        </code>
        <br/>
        Untuk menyisipkan judul, gunakan tag 
        <code>
          &amp;lt;b rel=&quot;h4&quot;&amp;gt;JUDUL ANDA DI SINI...&amp;lt;/b&amp;gt;
        </code>
        <br/>
        Untuk menciptakan efek tebal gunakan tag 
        <code>
          &amp;lt;strong&amp;gt;TEKS ANDA DI SINI...&amp;lt;/strong&amp;gt;
        </code>
        <br/>
        Untuk menciptakan efek huruf miring gunakan tag 
        <code>
          &amp;lt;em&amp;gt;TEKS ANDA DI SINI...&amp;lt;/em&amp;gt;
        </code>
        <br/>
        <br/>
        <br/>
      </p>
      <div class='emotki' id='emo_box'> :) :( :p :D :o ;) 8-) 8:) :/ :&#39;( 3:) O:) :* &amp;lt;3 ^_^ -_- o.O O.o &gt;:o :v :3
      </div>
      <data:blogTeamBlogMessage/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
      </b:if>
      <div>
        <iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' style='overflow:auto'/>
      </div>
      <a class='batal' href='javascript:replyTo(&quot;cancel&quot;);'>
        Batal
      </a>
      <data:post.friendConnectJs/>
      <data:post.cmtfpIframe/>
      <script type='text/javascript'>
        BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
      </script>
    </div>
  </b:if>
</div>
<script type='text/javascript'>
  //<![CDATA[
!function(e,a){function s(){var e=-1;if("Microsoft Internet Explorer"==navigator.appName){var a=navigator.userAgent,s=new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");null!=s.exec(a)&&(e=parseFloat(RegExp.$1))}return e}function l(e){var s=e.target.id,l=a.querySelector("#emo_box #"+s);l.parentNode.insertBefore(y,l.nextSibling),y.type="text",y.className="texte",y.value=l.title,y.select()}var r=(e.location.href,a.getElementById("comment_block")),t=r.innerHTML,n=[],o=[],i=[],c=0,p="",m="",d="",g=0,f=0,u=0,b=0,v="",h="",$="",x=a.getElementById("emo_box"),y=a.createElement("input"),k=a.getElementById("comment-editor").src.split("#");e.replaced=function(e,a){var s=a,s=s.replace(/^(<br ?\/?>|&nbsp;)+/i,"").replace(/(<br ?\/?>)+(:|;|\^|=)/gi,"<br> $2").replace(/^(&nbsp;|<br ?\/?>| <br ?\/?>)+/gi,"").replace(/\@<a href="\#c([0-9]+)\"( rel="nofollow")?>.*?<\/a>\:? ?/g,"").replace(/\s:\)+/g," <span class='emo smile' id='emo1' title=' :)'></span>").replace(/\s:\(/g," <span class='emo sad' id='emo2' title=' :('></span>").replace(/\s;\)/g," <span class='emo ok' id='emo3' title=' ;)'></span>").replace(/\s:p/gi," <span class='emo melet' id='emo4' title=' :p'></span>").replace(/\s:3/g," <span class='emo wkwk' id='emo5' title=' :3'></span>").replace(/\s:v/g," <span class='emo pacman' id='emo6' title=' :v'></span>").replace(/\s:D/g," <span class='emo mrangas' id='emo7' title=' :D'></span>").replace(/\so.O/g," <span class='emo ori' id='emo8' title=' o.O'></span>").replace(/\sO.o/g," <span class='emo oka' id='emo9' title=' O.o'></span>").replace(/\s:o/g," <span class='emo oo' id='emo10' title=' :o'></span>").replace(/\s:\//gi," <span class='emo uu' id='emo11' title=' :/'></span>").replace(/\s:'\(/g," <span class='emo nangis' id='emo12' title=' :&#39;('></span>").replace(/\s\^(\_|)\^/g," <span class='emo imut' id='emo13' title=' ^_^'></span>").replace(/\s\-(\_|)\-/g," <span class='emo lha' id='emo14' title=' -_-'></span>").replace(/\s&gt;:o/gi," <span class='emo sepet' id='emo15' title=' &gt;:o'></span>").replace(/\s&lt;3/gi," <span class='emo hati' id='emo16' title=' &lt;3'></span>").replace(/\s:\*/g," <span class='emo kiss' id='emo17' title=' :*'></span>").replace(/\sO:\)/g," <span class='emo apa' id='emo18' title=' O:)'></span>").replace(/\s3:\)/g," <span class='emo jahat' id='emo19' title=' 3:)'></span>").replace(/\s8:\)/g," <span class='emo kocoi' id='emo20' title=' 8:)'></span>").replace(/\s8-\)/g," <span class='emo koco' id='emo21' title=' 8-)'></span>").replace(/\[note\](.*?)\[\/note\]/gi,"<div class='note'>$1</div>").replace(/\[(youtube|iframe)\](.*?)\[\/(youtube|iframe)\]/gi,"<div class='loader'><iframe class='video' src='$2' frameborder='0'></iframe></div>").replace(/<em rel="note">(.*?)<\/em>/gi,"<div class='note'>$1</div>").replace(/<b rel="quote">(.*?)<\/b>/gi,"<blockquote>$1</blockquote>").replace(/<i rel="pre">(.*?)<\/i>/gi,"<pre><code>$1</code></pre>").replace(/<i rel="code">(.*?)<\/i>/gi,"<code>$1</code>").replace(/<b rel="h([0-6])">(.*?)<\/b>/gi,"<h$1>$2</h$1>").replace(/<i rel="anchor">(.*?)<\/i>/gi,"<a class='allow' href='$1' rel='nofollow'>$1</a>").replace(/\[(link|url)\](.*?)\[\/(link|url)\]/gi,"<a class='allow' href='$2' rel='nofollow'>$2</a>").replace(/\[url\=('|")?(.*?)('|")?\](.*?)\[\/url\]/gi,"<a class='allow' href='$2' rel='nofollow'>$4</a>").replace(/(<i rel="image">|\[img\])(.*?)(<\/i>|\[\/img\])/gi,"<img class='center besar' src='$2' alt='Loading...'>").replace(/<\/h([0-6])>(<br ?\/?>)+/g,"</h$1>");e.innerHTML=s},e.replyTo=function(e){var s=a.getElementById("comment-editor"),l=a.getElementById("comment-form"),r=a.getElementById("cancel"!=e?"c"+e:"comments"),t=k;s.className+=" transparent",s.parentNode.className+=" loader",s.src="cancel"!=e?t[0]+"&parentID="+e+"#"+t[1]:t[0]+"#"+t[1],r.insertBefore(l,null),s.onload=function(){this.className=this.className.replace(/ transparent/g,""),this.parentNode.className=this.parentNode.className.replace(/ loader/g,"")}};var E=s();if(-1==E||E>=9){for(;-1!=t.indexOf('id="a');)g=t.indexOf('id="a'),t=t.substring(g+4),g=t.indexOf('"'),n[c]=t.substring(0,g),t=t.substring(g),o[c]=a.getElementById(n[c]).innerHTML,i[c]=0,c++;for(g=0;c-1>g;g++)for(f=g+1;c>f;f++)if(-1!=o[f].indexOf(n[g])){for(p=n[f],m=o[f],i[f]=i[g]+1,d=i[f],b=g+1;f>b&&!(i[b]<d);b++);for(u=f;u>b;u-=1)n[u]=n[u-1],o[u]=o[u-1],i[u]=i[u-1];n[b]=p,o[b]=m,i[b]=d}for(g=0;c>g;g++)f=o[g].indexOf('@<a href="#a'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f+1),f=$.indexOf("</a>"),$=$.substring(f+4),o[g]=h+$),f=o[g].indexOf('class="cm_wrap'),-1!=f&&(h=o[g].substring(0,f),$=o[g].substring(f),i[g]>6&&(i[g]=6),o[g]=h+'style="margin-left:'+(0+5*i[g])+'%" '+$),v+=o[g];replaced(r,v),replaced(x,x.innerHTML),r.style.display="block"}else replaced(r,"<h4><em>Old IE Suck!</em></h4>");for(var p=0;p<x.children.length;p++){var N=x.children[p];N.addEventListener("click",l,!1)}var O=[".texte"];e.addEventListener("mouseup",function(e){for(var s=0;s<O.length;s++){var l=a.querySelector(O[s]);e.target!=l&&e.target.parentNode!=l&&l.parentNode.removeChild(l)}})}(window,document);
  //]]>
</script>
      </b:if>
</b:includable>

Terakhir, tinggal mengaktifkan thread comment ini, yaitu dengan cara mencari semua kode yang nampak seperti ini:

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

Di manapun Anda menemukan kode itu, segera ganti dengan kode ini:

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

Klik Simpan dan selesai !

Ireng Template Blogger Responsive

noreply@blogger.com (Unknown) — Fri, 26 Dec 2014 15:10:00 +0700

Dalam template ini, saya menggunakan Thread Commnet (Komentar Bersarang) dari bX-NicoNico, Karena menurut saya metode dari beliau sangat bagus, sedikit saran untuk anda yang sebelumnya telah menggunakan template dengan Thread Comment lebih dari dua level seperti blog saya, dianjurkan untuk merubah thread commentnya dengan Threaded Comment yang sudah lebih dari 2 level tingkatannya, karena apabila tidak, komentar balasan lama Anda akan berada di level ke tiga dan seterusnya, komentar-komentar tersebut tidak akan tampil dalam posting Anda dikarenakan ID komentar induknya tidak sempat lolos penyaringan terhadap data:var.inReplyTo pada anak komentar di level tersebut.

Lihat Demo Unduh Template

Beberapa fitur dari template ini

Responsif
Valid HTML5 dan CSS3
Thread comment ringan versi bX-NicoNico
Auto Read More tanpa Javascript
Seo ? Sudah saya maksimalkan
Recent Comment Preloader dengan Notifikasi
Tooltip dari mas taufik nurrohman DTE:]
Dan masih banyak lagi

Konfigurasi

1. Merubah gambar ADS pada bawah Post

Masuk kehalaman Edit HTML Template, Tekan CTRL + F dan cari kode

<img alt='Adsense Bawah' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFfOa738dzw-_Yq0RLELU0TmqQ2F48I7m-9WPsxR_rD6RpCFsBonnZ4QJ-7tJzaWkjRJJhiJTg7YK5u_J67_yB9_HId6pEoN4Xv_enty3WHvJrQFsjphzMPysJPVl6xHrRTci9jgZzhs/s1600/asia.jpeg'/>

3. Memodifikasi Menu Navigasi

Tekan CTRL + F lalu ketik <div class='nav2 cf' id='nav2' untuk menemukan deret kode seperti ini:

<div class='nav2 cf' id='nav2' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
    <ul class='nav cf'>
        <li id='home'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>Beranda</a>
        </li>
        <li class='adasub'><a href='#'>Alat</a>
            <ul>
                <li><a href='#'>Generator Kode Warna</a>
                </li>
                <li><a href='#'>Generator Lorem Ipsum</a>
                </li>
            </ul>
        </li>
        <li><a href='/p/privacy-policy.html'>Static Page</a>
        </li>
        <li><a href='/rifanganteng'>Error</a>
        </li>
    </ul>
.........

Konsep Kotak Penelusuran dengan Keyboard

noreply@blogger.com (Unknown) — Thu, 25 Dec 2014 09:10:00 +0700

Berikut ini adalah konsep sederhana membuat Kotak Penelusuran dengan menekan keyboard CTRL + F

CSS

.form-search.sticked {
    position: fixed;
    top: 5px;
    left: 50%;
    z-index: 9999;
    margin-left: -122px;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
}
.form-search .form-search-text {
    display:block;
    border:1px solid #ccc;
    padding:4px;
    margin:0 0;
    width:250px;
    font:inherit;
    line-height:normal;
    color:inherit;
    box-shadow:inset 0 1px 3px -1px rgba(0, 0, 0, .2);
}

HTML

<form action="/search" class="form-search" id="form-search" method="get">
    <input class="form-search-text" name="q" type="text"></input>
</form>

Jquery

(function (a, k) {
    var fs = a('.form-search');
    a(k).on("keydown", function (e) {
        if (e.ctrlKey && e.keyCode == 70) {
            fs.toggleClass("sticked").find(".form-search-text").trigger("focus");
            return false
        }
    });
})(jQuery, document);

Lihat Demo

Coba bereksperimen sendiri dengan key code lain : Key and Character Codes vs. Event Types

Rodok Seo Responsive Template Blogger

noreply@blogger.com (Unknown) — Sat, 20 Dec 2014 13:31:00 +0700

Pada template ini, saya memfokuskan pada loading dan desian minimalisnya agar ramah lingkungan.

Lihat Demo Unduh Template

Template ini dilengkapi dengan beberapa ruang iklan, pada bagian atas disamping header blog, disana terdapat ruang iklan berukuran 728x90 , pada sidebar blog dan pada bawah post, tepatnya disamping widget artikel terkait terdapat ruang iklan dengan ukuran 300x250

Terdapat juga emoticon pada komentarnya

Konfigurasi

1. Merubah gambar ADS pada bawah Post

Masuk kehalaman Edit HTML Template, Tekan CTRL + F dan cari kode

<img alt='Adsense Bawah' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFfOa738dzw-_Yq0RLELU0TmqQ2F48I7m-9WPsxR_rD6RpCFsBonnZ4QJ-7tJzaWkjRJJhiJTg7YK5u_J67_yB9_HId6pEoN4Xv_enty3WHvJrQFsjphzMPysJPVl6xHrRTci9jgZzhs/s1600/asia.jpeg'/>

2. Mengaktifkan Responsive Design

Template ini dilengkapi dengan fitur responsive, bila anda ingin mengaktifkan fitur responsive silahkan masuk : Dashboard > Template > Klik icon “Gear” di bawah preview template seluler > dan pilih “Tidak. Tampilkan template seluler di perangkat seluler.“ > Simpan, apabila tidak suka dengan fitur responsive, abaikan langkah ini !

3. Memodifikasi Menu Navigasi

Tekan CTRL + F lalu ketik <div class='nav2 cf' id='nav2' untuk menemukan deret kode seperti ini:

<div class='nav2 cf' id='nav2' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
    <ul class='nav cf'>
        <li id='home'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>Beranda</a>

        </li>
        <li class='adasub'><a href='#'>Alat</a>

            <ul>
                <li><a href='#'>Generator Kode Warna</a>

                </li>
                <li><a href='#'>Generator Lorem Ipsum</a>

                </li>
            </ul>
        </li>
        <li><a href='/p/privacy-policy.html'>Static Page</a>
        </li>
        <li><a href='/rifanganteng'>Error</a>
        </li>
    </ul>
.........

Widget Recent Comment dengan Animasi

noreply@blogger.com (Unknown) — Fri, 19 Dec 2014 10:33:00 +0700

Untuk membuat widget recent comment dengan tampilan sederhana seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:

Lihat Demo

<div id='recent_comments'></div>
<style type="text/css">
#recent_comments {
    background: none repeat scroll 0% 0% #FFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
    font-family: Helvetica, Arial, "lucida grande", tahoma, verdana, arial, sans-serif;
    font-size: 12px;
}
#recent_comments a {
    color:#000;
    text-decoration:none;
}
#recent_comments a:hover {
    text-decoration:underline;
}
#recent_comments ol, #recent_comments li {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#recent_comments li {
    border-bottom: 1px solid #DDD;
    overflow: hidden;
    color: #333;
    display: block;
    outline: medium none;
    padding: 7px 27px 7px 8px;
    position: relative;
}
.avatar {
    display: block;
    height: 50px;
    margin-right: 8px;
    width: 50px;
    float:left;
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #EEE;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: #FF0066 #CC00FF #FF00FF #9900FF;
}
#recent_comments .title_content {
    font-weight:bold
}
#recent_comments .title_content, #recent_comments .comment_content, #recent_comments .date {
    display: block;
}
#recent_comments .comment_content, #recent_comments .date {
    margin-left: 70px;
}
#recent_comments .date {
    font-size: 80%;
    color: #666;
    clear:both
}
</style>
<script type="text/javascript">
var c = {
    blogURL: "http://obesitystrike.blogspot.com/",
    numComments: 10,
    characters: 60,
    id_containrc: "#recent_comments",
    avatarSize: 50,
    LoadingText: "Memuat...",
    Showimage: true,
    noAvatar: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzKaN75y1wvgD1HbJLXjQzGWA7C7OurVe_0b2l5A10tSsEAQ7s3zSPAG0EKacbwq7qXEfdor1awaPvFEy23BRYC6ukVG47H1FuFbYN5-4JvIDns6DeUXcrfTVUY_Fx-jmzfTWmn7mKWztJ/s70/user-anonymous-icon.png",
    MonthNames: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"],
    maxfeeds: 50,
    adminBlog: ""
};
</script>
<script type='text/javascript' src='http://obs-project.googlecode.com/svn/js/recent_anim.js'></script>

Opsi Lanjutan

Opsi	Keterangan
blogURL	Isi dengan URL blog anda contoh : http://obesitystrike.blogspot.com/, atau boleh abaikan saja
numComments	Jumlah Komentar yang akan ditampilkan
characters	Jumlah ringkasan komentar yang akan ditampilkan, misal 100 karakter
id_containrc	ID tempat widget akan ditampilkan, default : `#recent_comments`
avatarSize	Ukuran Avatar komentar, default : 50px
LoadingText	Tulisan yang akan muncul sebelum widget berhasil dimuat (loading)
Showimage	Pengaturan penampil avatar komentar, bila nilainya true, maka avatar akan tampil, begitu juga sebaliknya
noAvatar	Link gambar untuk komentar yang tidak memiliki avatar, contoh : Anonim
MonthNames	Nama Bulan komentar
maxfeeds	Tidak jauh berbeda dengan `numComments` , saran saya apabila komentar yang ditampilkan sejumlah 10 feed, lebih baik atur juga `maxfeeds` sama dengan jumlah komentar yang ditayangkan, untuk mengurangi loading widget ini
adminBlog	Apabila tidak ingin menampilkan komentar admin, isi dengan Nama admin, contoh : Rifan Hidayat

Javascript Asinkron dilengkapi dengan fungsi Callback

noreply@blogger.com (Unknown) — Thu, 18 Dec 2014 16:36:00 +0700

Fungsi ini berguna untuk memuat file javascript / css secara asinkron, asinkron sendiri ialah, sebuah fungsi untuk memuat file setelah seluruh halaman berhasil termuat.

Dengan menggunakan fungsi ini, loading blog akan menjadi lebih baik dari pada memuat file secara langsung, karena file tersebut dimuat secara tidak langsung menggunakan javascript

function async(type, url, id, callback) {
    var a;
    if (type == "js") {
        a = document.createElement("script");
        a.id = id;
        a.src = url
    } else {
        if (type == "css") {
            a = document.createElement("link");
            a.rel = "stylesheet";
            a.href = url
        }
    }
    a.onload = function () {
        if (typeof callback == "function") {
            callback()
        }
        callback = null
    };
    a.onreadystatechange = function () {
        if (s.readyState == 4 || s.readyState == "complete") {
            if (typeof callback == "function") {
                callback()
            }
            callback = null
        }
    };
    document.getElementsByTagName("head")[0].appendChild(a)
}

Contoh Penggunaan untuk Javascript

Sebagai contoh, saya akan memuat skrip Json Comments secara tidak langsung. Namun pada saat yang bersamaan saya juga ingin memastikan agar eksekusi plugin terjadi hanya jika skrip tersebut telah berhasil dimuat:

async("js", "http://obesitystrike.blogspot.com/feeds/comments/default?alt=json-in-script&orderby=published&max-results=20&callback=rc", "rc", function () {
    alert('Berhasil Dimuat!')
})

Contoh Penggunaan untuk CSS

Sebagai contoh, saya akan memuat CSS Fonts Roboto dari Google Fonts secara tidak langsung.

async("css", "http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700|Ropa+Sans|Oswald")

Lihat Demo

Membuat Auto Read More Blogspot Tanpa Javascript

noreply@blogger.com (Unknown) — Thu, 18 Dec 2014 11:45:00 +0700

Berikut ini ialah cara membuat auto readmore untuk blogspot tanpa menggunakan javascript, dengan demikian pemanggilan data ringkasan artikel dan thumbnail posting akan jauh lebih cepat dibanding menggunakan auto read more dengan javascript, karena auto readmore ini murni menggunakan tag data dari Blogger untuk mengambil ringkasan artikel dan thumbnail postingnya.

Cari kode ]]></b:skin> atau </style>

Letakkan kode css ini diatasnya, CSS ini akan mengatur letak thumbnail post dan link baca selengkapnya

.post-thumbnail {
    width:72px;
    height:72px;
    float:left;
    margin:2px 10px 0 0;
    background-color: #FFF;
    border: 1px solid #EEE;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
    padding:5px
}
.read-more {
    float:right;
    clear:both;
    font-weight:bold
}

Bila posting Anda masih berupa posting normal bawaan template blogspot, carilah kode ini:

<data:post.body/>

Biasanya terdapat lebih dari satu kode tersebut, ganti semua code tersebut dengan kode ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.thumbnailUrl'>
      <a expr:title='data:post.title' expr:href='data:post.url'><img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/></a>
    <b:else/>
      <a expr:title='data:post.title' expr:href='data:post.url'><img class='post-thumbnail' expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2ebtXCcKEzZn4IjG_drNCM_oElImGYstmvxs3Ts0O-VpQb61xF0Tzs8N16DVfkjC14HDJQ_69_UFknuR4hZEjis3UkISpl4wsxxVzaFUq6Wvy6CvWkjmq_t0CXLfS6hX_vFsRVPqBCdc/s72-c/noimage.jpg'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='read-more'>
      <a expr:href='data:post.url' title='Baca Selngkapnya'>Selengkapnya ►</a>
    </div>
  </b:if>
</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>

kode yang saya beri tanda itu adalah link/url gambar cadangan untuk posting yang tidak memiliki gambar, silahkan bisa diganti sesuka hati

Membuat Form Kontak Blogger dengan Formulir Kontak Google Doc

noreply@blogger.com (Unknown) — Tue, 16 Dec 2014 12:29:00 +0700

Seperti yang dikatakan mas Taufik Nurrohman, bahwa sbenarnya Google Doc bukan merupakan layanan semacam ini, namun dengan memanfaatkan fiturnya Formulir Kontak Google Doc kita bisa membuat form kontak untuk blogger.
Sebenarnya cara kerja dari sistim ini ialah mengirimkan data dari tabel spreadsheet yang masuk dari Formulir Kontak Google Doc ke Email kita.
Dan hal ini juga menjadi salah satu solusi bagi para pengguna Blogspot yang telah menyembunyikan JS Bloggernya namun ingin menggunakan fitur Kontak Form, karena seperti yang kita ketahui, apabila JS bawaan blogspot kita sembunyikan maka beberapa fiturnya tidak dapat bekerja lagi,

Okelah kembali ke topik, kali ini saya akan memberikan panduan lengkap membuat Kontak Form ini dari awal sampai akhir,

Membuat Formulir Kontak

Langkah pertama, anda harus membuat formulir kontak menggunakan Google Doc.
Silahkan menuju halaman dasboard Google Drive anda, dan buatlah sebuah formulir

Silahkan setting judul dan deskripsi formulir, serta buatlah beberapa kotak pertanyaan yang umum terdapat pada formulir kontak di web. Contohnya anda bisa menggunakan ini: Perihal, Nama, Email, Alamat Web dan Pesan, untuk menambahkan kotak pertanyaan, klik Tambahkan Item dan set Jenis Pertanyaannya menjadi Teks:

Pada bagian Laman Konfirmasi, tuliskan pesan terima kasih yang ingin Anda tampilkan ketika pesan telah berhasil terkirim:

Sekarang, pilih menu tab Tanggapan dan pilih lagi Pilih Tujuan Tanggapan lalu cek opsi Spreasheet baru. Berikan judul, misalnya Data1 Tanggapan, dan uncek Selalu buat spreadsheet baru:

Klik tombol Buat. dan tunggu sampai tombol Lihat Tanggapan muncul. tombol Lihat Tanggapan akan muncul untuk menggantikan tombol Pilih Tujuan Tanggapan. Klik tombol tersebut untuk melihat spreadsheet formulir kontak Anda.

Mengelola Data yang Masuk

Setelah spreadsheet selesai dibuat, sekarang adalah saatnya untuk mengelola data yang masuk agar setiap kali data baru terkirim ke dokumen, maka salinan data tersebut bisa langsung masuk ke kotak pesan email.

Pada Halaman Data1 Tanggapan yang anda buat pada langkah pertama, Pilih menu Alat » Editor skrip:

Anda akan dibawa menuju halaman proyek tak berjudul. Pada formulir bernama Kode.gs tempelkan JavaScript ini:

function sendFormByEmail(e) {

  // Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
  var emailSubject = "PESAN BARU!";

  // Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
  var yourEmail = "email@domain.com";

  // Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
  // Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
  var docKey = "1rSY38gC56-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  // Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
  // Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
  var useEditors = 1;

  // Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
  // Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
  // Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
  var extraColumns = 0;

  if (useEditors) {
    var editors = DocsList.getFileById(docKey).getEditors();
    var notify = (editors) ? editors.join(',') : yourEmail;
  } else {
    var notify = yourEmail;
  }

  // Variabel `e` memegang semua data di dalam array.
  // Loop semua data di dalam array dan sisipkan nilainya ke pesan.
  var s = SpreadsheetApp.getActive().getSheetByName("Data1");
  if (extraColumns) {
    var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
  } else {
    var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
    var message = "";
  }
  for (var i in headers) {
    message += headers[i] + ' = ' + e.values[i].toString() + '\n';
  }
  MailApp.sendEmail(notify, emailSubject, message);
}

Tentukan subjek email yang akan masuk ke kotak masuk pesan, alamat email anda dan kunci/ID spreadsheet yang tadi Anda buat. ID spreadsheet bisa Anda temukan pada URL spreadsheet terkait:

https://docs.google.com/spreadsheets/d/9wTZ19gC56-XXXXXXXXXXXXXXXXXX/edit#gid=3

Data1 adalah nama dari spreadsheets yang anda buat tadi, untuk melihat nya ada dibawah di pojok kiri, apabila namanya bukan Data1, silahkan ubah nama nya menjadi Data1:

Sekarang pilih menu Sumber Daya » Pemicu proyek saat ini. Akan muncul kata “No triggers set up. Click to add one now”. Klik pada tautan tersebut untuk menambahkan trigger. Pada kolom Events, pastikan opsi yang terpilih adalah From spreadsheet dan On form submit.

Klik pada tautan opsi notification. Pada opsi ke dua di kotak dialog Execution failure notifications, pilih immediately.

Klik OK.

Akan muncul pesan authorisasi skrip. Klik tombol Terima/Authorize. Ini akan menyetujui authorisasi untuk trigger yang Anda buat.

Anda akan dibawa kembali menuju layar editor. Klik Simpan/Save. Sekarang Anda sudah bisa mencoba mengirimkan pesan melalui formulir kontak buatan Anda. Pembuatan formulir kontak ini sudah selesai, untuk mencobanya bisa dilakukan dengan klik menu Lihat bentuk jadi .

Tidak Mengirimkan pesan apabila Email terdeteksi sebagai Spam

Karena formulir kontak Google Doc ini tidak memiliki captcha maka seringkali Anda akan mendapatkan pesan-pesan spam atau pesan yang aneh-aneh. Berikut ini adalah sebuah cara untuk membuat agar pesan spam tidak akan dikirimkan ke email Anda:

function sendFormByEmail(e) {

  // Tentukan teks subjek/perihal yang nantinya akan muncul pada pesan masuk email setiap kali pesan baru terkirim
  var emailSubject = "PESAN BARU!";

  // Tentukan alamat email di sini atau beberapa alamat email sekaligus yang dipisahkan dengan tanda koma
  var yourEmail = "email@domain.com";

  // Masukkan kunci spreadsheet yang terhubung dengan formulir kontak ini
  // Bisa ditemukan pada URL ketika Anda melihat spreadsheet tersebut
  var docKey = "0Ah0bOy8H_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";

  // Jika Anda menginginkan skrip ini mengirim data secara otomatis ke semua editor sheet, set nilainya menjadi `1`
  // Jika Anda hanya ingin mengirimkan data ke `yourEmail`, set nilainya menjadi `0`
  var useEditors = 1;

  // Apakah Anda telah menambahkan kolom yang ternyata tidak Anda gunakan pada formulir?
  // Jika ya, set nilai ini ke nomor urut kolom terakhir yang Anda tambahkan pada spreadsheet.
  // Sebagai contoh: Kolom `C` ada pada nomor urut ke 3
  var extraColumns = 0;

  if (useEditors) {
    var editors = DocsList.getFileById(docKey).getEditors();
    var notify = (editors) ? editors.join(',') : yourEmail;
  } else {
    var notify = yourEmail;
  }

  // Cek pesan spam: `0` berarti tidak ada spam
  var isSpam = 0;

  // Isi dengan pola-pola spam yang ingin Anda blokir dalam format regular ekspresi
  var spamKeywords = [
  "bajingan",
  "sex",
  "www.nama_web_1.com",
  "www.nama_web_2.com",
  "cabe-cabean",
  "spam"
  ];

  // Variabel `e` memegang semua data di dalam array.
  // Loop semua data di dalam array dan sisipkan nilainya ke pesan.
  var s = SpreadsheetApp.getActive().getSheetByName("Data1");
  if (extraColumns) {
    var headers = s.getRange(1, 1, 1, extraColumns).getValues()[0];
  } else {
    var headers = s.getRange(1, 1, 1, s.getLastColumn()).getValues()[0];
    var message = "";
  }
  for (var i in headers) {
    message += headers[i] + ' = ' + e.values[i].toString() + '\n';
    for (var j = 0, sk = spamKeywords.length; j < sk; ++j) {
      // Jika data terdeteksi sebagai spam, tingkatkan nilai variabel `isSpam`
      if (spamKeywords[j].test(e.values[i].toString())) isSpam++;
    }
  }
  if (isSpam === 0) { // Kirimkan notifikasi jika nilai `isSpam` adalah `0`
    MailApp.sendEmail(notify, emailSubject, message);
  }
}

Anda bisa mengatur pola spam pada variabel spamKeywords sesuka hati dengan jumlah pola sebanyak yang Anda mau dalam bentuk regular ekspresi:

var spamKeywords = [
  "bajingan",
  "sex",
  "www.nama_web_1.com",
  "www.nama_web_2.com",
  "cabe-cabean",
  "spam"
  ];

Walaupun begitu, cara ini hanya bisa digunakan untuk mencegah terkirimnya ke pesan masuk email saja, dan tetap akan masuk pada data spreadsheet. Saya sarankan Anda untuk secara rutin membuka sheet terkait formulir kontak ini minimal setiap satu bulan sekali untuk menghapus data-data yang tidak diperlukan. Karena Saya tidak bisa menjamin tentang apa yang akan terjadi pada data Google Doc Anda jika jumlah data yang masuk nanti sudah terlalu besar.

Sumber sebagian gambar dan bacaan : www.dte.web.id/2013/09/membuat-formulir-kontak-google-doc-agar.html

NGD Flat v.2.00 Responsive

noreply@blogger.com (Unknown) — Fri, 12 Dec 2014 10:12:00 +0700

Template ini adalah kelanjutan template dari yang pernah saya buat, yaitu NGD Flat atau lebih tepatnya template ini adalah template versi update dari template sebelumnya, banyak fitur fitur yang saya rubah didalamnya, termasuk desain tampilannya..

Fitur template ini tidak jauh beda dari versi yang sebelumnya, seperti Optimasi seo nya, Valid HTML dan CSS3 nya juga

Lihat Demo Unduh Template

Konfigurasi

1. Merubah gambar ADS pada bawah Post

Masuk kehalaman Edit HTML Template, Tekan CTRL + F dan cari kode

<img alt="Adsense Bawah" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHFfOa738dzw-_Yq0RLELU0TmqQ2F48I7m-9WPsxR_rD6RpCFsBonnZ4QJ-7tJzaWkjRJJhiJTg7YK5u_J67_yB9_HId6pEoN4Xv_enty3WHvJrQFsjphzMPysJPVl6xHrRTci9jgZzhs/s1600/asia.jpeg">

dan ganti kode tersebut dengan gambar ADS Anda

2. Merubah Teks "Search"

Pada halaman Edit HTML Template Tekan CTRL + F lalu ketik value='Search' . Kode yang Saya beri tanda di bawah ini adalah yang harus diganti:

<input class='form-search-button' value='Search' type='submit'>

3. Memodifikasi Menu Navigasi

Tekan CTRL + F lalu ketik 'nav cf' untuk menemukan deret kode seperti ini:

<div class='nav2 cf' id='nav2' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<ul class='nav cf'>
<li id='home'><a href='/' title="NGD Flat V2 ">Beranda</a>
</li>
<li class='adasub'><a href='#'>Alat</a>
<ul>
<li><a href='#'>Generator Kode Warna</a>
</li>
<li><a href='#'>Generator Lorem Ipsum</a>
</li>
</ul>
.....

Menciptakan Halaman Error 404 dengan Mudah

noreply@blogger.com (Unknown) — Wed, 10 Dec 2014 16:46:00 +0700

Dalam tutorial kali ini kita akan menggunakan Tag Kondisional Halaman error untuk membuatnya, karena dengan menggunakan Tag kondisional, pengerjaan tutorial kali ini akan lebih mudah dan halaman Error dapat tereload dengan cepat sabagai mana mestinya, karena tidak menggunakan Redirect.

Berikut inilah cara sederhana untuk menciptakan Halaman Error 404, pertama kita bungkus dulu halaman yang tidak akan tampil pada halaman Error 404 / halaman kecuali halaman Error, berikut konsepnya

<body>
    <b:if cond="data:blog.pageType != &quot;error_page&quot;">
        ...
        ...
        Daerah ini berisi bagian-bagian utama dalam sebuah blog seperti main-wrapper, sidebar-wrapper, hingga footer-wrapper.
        Daerah ini akan diabaikan karena kita berada di dalam kondisi pengingkaran.
        ...
        ...
    </b:if>
    <b:if cond="data:blog.pageType == &quot;error_page&quot;">
        <div id="error-page">
           Tuliskan sesuatu di sini. Bagian ini hanya akan tampil saat halaman tidak ditemukan.
        </div>
</b:if>
</body>

Sisanya tinggal menambahkan CSS untuk memperganteng Halaman 404 nya

#error-page {
    text-align: center;
    z-index: 99999;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    padding: 50px 0px;
    background-color:#fff 
}

Lihat Demo

Membuat Tombol Cancel pada Balas Thread Comment Hack Blogspot

noreply@blogger.com (Unknown) — Mon, 8 Dec 2014 16:41:00 +0700

Tombol ini berfungsi untuk menutup kotak komentar ketika tombol balas / reply diklik..
Sebenarnya hal ini tidak terlalu penting juga, tapi setidaknya bisa digunakan sebagai pelengkap formulir komentar..

Langkah Pemasangannya

Masuk dasboard Blogger, lalu pilih Template dan pilih lagi Edit HTML,
Setelah Standby Pada Edit HTML Template, klik tombol CTRL + F dan cari kode </style> atau */]]></b:skin>

Salin CSS ini dan tempelkan diatas kode yang tadi kamu cari

.cancel {
    width:42px;
    text-align:center;
    border-radius:2px;
    font-size:14px;
    padding:5px;
    background-color:#4d90f0;
    border:1px solid #3079ed;
    color:#fff !important;
    font-weight:700;
    cursor:pointer;
    display:none
}
.cancel:hover {
    background:#377cea;
    border-color:#2f5bb7;
    text-decoration:none !important
}
.comment_reply_form .cancel {
    display:block
}
.comment_reply_form .comment-form p {
    display:none
}

Langkah terakhir, tekan CTRL + F dan cari kode dibawah ini :

<iframe class='blogger-iframe-colorize blogger-comment-from-post'

Pada Markup Standart Template Blogspot susunan iframe komentarnya seperti diatas.
Setelah ketemu, tambahkan HTML dibawah ini tepat dibawah iframe yang anda temukan tadi

<a class='cancel' onclick='Reset_Comment_Form()'>Batal</a>

Obesity Strike

Paduan Lengkap Membuat Template Blog untuk Pemula

Kerangka Template

Menambahkan Widget Header Blog

Mulai Mendesain Template

Azkaverb VST Plugin Reverb Freeware

Javascript Email Validation

Markup HTML

Javascript

2 Cara Mengatasi Render Blocking Javascript Library JQuery

1. Menambahkan Atribut Async pada JQuery

2. Menaruh JQuery diatas kode </body>

Daftar Salinan Berkas Proyek dari Blog ini

RAF Responsive Premium Template

Valid Schema.org

Fitur Template

Memuat CSS Tanpa menghalangi Render

Hasil Akhir

Beberapa Kekurangan dari trik ini

Javascript Lazy Loading Image untuk Blogger

Show hide Label dengan JQuery

Membuat Emoticon pada Komentar Blogger

Pemasangan pada Blogspot

Menempatkan Emoticon

CSS3 Info Box dengan Icon Font Awesome

Pemasangan pada Blog

Cara Menggunakan

Membuat Animasi Memantul dengan JQuery

CSS

HTML

JQuery

Widget Recent Post dimuat Secara Asinkron

Konfigurasi Widget

Membuat Post View Counter untuk Blogspot

Membuat Akun Firebase

Membuat Data Firebase

Memasang Post View Counter pada Blog

Thread Comments Blogger Hack tanpa Pop Up

Mengaktifkan Fitur Komentar Bersarang Hack pada Blogger

Ireng Template Blogger Responsive

Konfigurasi

1. Merubah gambar ADS pada bawah Post

3. Memodifikasi Menu Navigasi

Konsep Kotak Penelusuran dengan Keyboard

CSS

HTML

Jquery

Rodok Seo Responsive Template Blogger

Konfigurasi

1. Merubah gambar ADS pada bawah Post

2. Mengaktifkan Responsive Design

3. Memodifikasi Menu Navigasi

Widget Recent Comment dengan Animasi

Opsi Lanjutan

Javascript Asinkron dilengkapi dengan fungsi Callback

Contoh Penggunaan untuk Javascript

Contoh Penggunaan untuk CSS

Membuat Auto Read More Blogspot Tanpa Javascript

Membuat Form Kontak Blogger dengan Formulir Kontak Google Doc

Membuat Formulir Kontak

Mengelola Data yang Masuk

Tidak Mengirimkan pesan apabila Email terdeteksi sebagai Spam

NGD Flat v.2.00 Responsive

Konfigurasi

1. Merubah gambar ADS pada bawah Post

2. Merubah Teks "Search"

3. Memodifikasi Menu Navigasi

Menciptakan Halaman Error 404 dengan Mudah

Membuat Tombol Cancel pada Balas Thread Comment Hack Blogspot

Langkah Pemasangannya

2. Menaruh JQuery diatas kode `</body>`