Id Tutor Plus

Menghapus Permalink (Bulan, Tahun dan HTML) di URL Blogspot

noreply@blogger.com (Id Tutor Plus) — Wed, 26 Aug 2020 19:58:00 +0700

<script type='text/javascript'>
// BloggerJS v0.3.1
// Copyright (c) 2017-2018 Kenny Cruz
// Licensed under the MIT License
// Configuration -----------
var postsDatePrefix = false;
var accessOnly = false;
var useApiV3 = false;
var apiKey = "AIzaSyDcPVlpXDnjoVWBOW2rOx0EAjkyufamY4c";
var blogId = "blogid";
// -------------------------
var postsOrPages=["pages","posts"],urlTotal,jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0],nextPageToken;function urlVal(){var url=window.location.pathname;var length=url.length;var urlEnd=url.substring(length-5);if(urlEnd===".html")return 0;else if(length&gt;1)return 1;else return 2}
function urlMod(){var url=window.location.pathname;if(url.substring(1,2)==="p"){url=url.substring(url.indexOf("/",1)+1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../"+url)}
else{if(!postsDatePrefix)url=url.substring(url.indexOf("/",7)+1);else url=url.substring(1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../../"+url)}}
function urlSearch(url,database){var pathname=url+".html";database.forEach(function(element){var search=element.search(pathname);if(search!==-1)window.location=element})}
function urlManager(){var validation=urlVal();if(validation===0){if(!accessOnly)urlMod()}
else if(validation===1){getJSON(postsOrPages[feedPriority],1)}
else if(validation===2){if(!accessOnly)history.replaceState(null,null,"/")}}
function getJSON(postsOrPages,index){var script=document.createElement('script');if(useApiV3){var jsonUrl="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+postsOrPages+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";if(nextPageToken)jsonUrl+="#pageToken="+nextPageToken;nextPageToken=undefined}
else var jsonUrl=window.location.protocol+"//"+window.location.hostname+"/feeds/"+postsOrPages+"/default?start-index="+index+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";jsonUrl=jsonUrl.replace(/#/g,amp);script.type='text/javascript';script.src=jsonUrl;document.getElementsByTagName('head')[0].appendChild(script)}
function bloggerJSON(json){var database=[];if(!useApiV3)if(urlTotal===undefined)urlTotal=parseInt(json.feed.openSearch$totalResults.$t);if(!useApiV3){try{json.feed.entry.forEach(function(element,index){var entry=json.feed.entry[index];entry.link.forEach(function(element,index){if(entry.link[index].rel==="alternate")database.push(entry.link[index].href)})})}
catch(e){}}
else{try{json.items.forEach(function(element,index){database.push(element.url)})}
catch(e){}
nextPageToken=json.nextPageToken}
urlSearch(window.location.pathname,database);if(urlTotal&gt;150){jsonIndex+=150;urlTotal-=150;getJSON(postsOrPages[feedPriority],jsonIndex)}
else if(nextPageToken){getJSON(postsOrPages[feedPriority])}
else if(secondRequest){nextPageToken=undefined;urlTotal=undefined;jsonIndex=1;secondRequest=!1;if(feedPriority===0){feedPriority=1;getJSON("posts",1)}
else if(feedPriority===1){feedPriority=0;getJSON("pages",1)}}}
function bloggerJS(priority){if(priority)feedPriority=priority;urlManager()}
bloggerJS();
</script>

GitHub Sebagai Media Penyimpanan Project Eksternal

noreply@blogger.com (Id Tutor Plus) — Fri, 12 Jun 2020 20:20:00 +0700

GitHub

Kalian tidak perlu takut dengan GitHub, dan tidak perlu takut juga untuk membaca artikel ini, karena di sini Saya tidak akan membahas mengenai konsep-konsep manajemen kode perangkat lunak. Di sini Saya hanya ingin menunjukkan kepada para pemula yang sebelumnya tidak pernah menyentuh GitHub, bahwa sebenarnya terdapat begitu banyak peluang untuk menggunakan GitHub sebagai media penyimpanan berkas-berkas eksternal pada blog kalian.

Sebenarnya Saya sudah pernah membahas mengenai cara menggunakan Google Code untuk menangani kasus serupa sebelumnya, hanya saja karena sejak 25 Januari 2016 yang lalu, Google memutuskan untuk mematikan layanan Google Code mereka, maka artikel tersebut kini sudah tidak ada gunanya lagi.

GitHub, sebagaimana Google Code, pada mulanya hanyalah sebuah situs layanan penyimpanan daring yang berfungsi untuk menyimpan dan merekam segala revisi dalam kode-kode perangkat lunak sepanjang waktu yang dikombinasikan dengan fitur media sosial, untuk mempermudah para pengembang dalam berinteraksi satu sama lain. Tanpa GitHub, kita hanya bisa melakukan perekaman revisi kode melalui tampilan antarmuka baris perintah (command line interface).

Kita umpamakan saja GitHub sebagai “media sosial untuk para pengembang”, dimana anggota-anggota di dalamnya tidak mengunggah foto dan mengepos pembaruan status, melainkan mengunggah kode-kode perangkat lunak dan melakukan revisi secara rutin pada kode-kode tersebut. Yang kemudian revisi-revisi tersebut akan tampil sebagaimana pembaruan-pembaruan status yang biasa kalian lihat pada media sosial. Kalian bisa memberikan komentar, dan juga memberikan reaksi. Namun belakangan ini, GitHub lebih banyak beralih fungsi sebagai media untuk membuat web statis; menampilkan halaman-halaman web yang (biasanya) dibuat secara otomatis melalui alat pembangun seperti Jekyll, Hugo dan GatsbyJS. Ini berarti bahwa hanya dengan GitHub saja kalian sebenarnya sudah bisa menampilkan berkas-berkas web secara langsung tanpa melalui perantara. Berkas-berkas seperti HTML, CSS dan JavaScript adalah yang paling umum ada pada GitHub karena fungsi dasar GitHub yang memang untuk menyimpan kode. Namun itu bukan berarati bahwa kalian tidak bisa menyimpan berkas-berkas yang lain seperti berkas fon, musik, video dan gambar.

Membuat Repositori untuk Pertama Kali

Ini sudah tahun 2019, sebuah tahun dimana anak-anak sekolah dasar saja sudah bisa membuat akun Twitter sendiri. Saya tidak ingin bertele-tele menjelaskan tentang bagaimana cara mendaftarkan diri ke GitHub langkah demi langkah. Saya anggap kalian sudah paham itu dan Saya anggap sekarang kalian sudah punya akun GitHub dan sedang dalam kondisi log masuk.

Untuk mulai menyimpan berkas-berkas blog kalian, pertama-tama buat sebuah repositori baru dengan cara mengeklik tombol “tambah” pada pojok kanan atas, kemudian pada menu yang tampil, pilih New repository:

Membuat repositori baru.

Tambahkan nama dan deskripsi bila perlu, kemudian klik Create repository:

Menentukan nama.

Sebuah repositori baru yang kosong akan dibuat pada URL https://github.com/nama-pengguna/blog. Untuk menambahkan berkas, klik pada tombol atau tautan yang bertuliskan Create a new file:

Membuat berkas baru.

Mengisi bidang nama dan konten berkas.

Tip: Untuk membuat folder, ketik nama folder pada bidang nama berkas kemudian ketik /, maka sebuah folder akan dibuat dan bidang nama akan kosong kembali. Setelah itu kalian bisa menuliskan nama berkas yang sifatnya wajib.

Setelah berkas selesai dibuat, klik tombol Commit new file. Sebuah berkas baru bernama layout.css akan tampil pada daftar, namun berkas ini masih bersifat mentah dan tidak bisa diakses secara langsung. Kalaupun memang bisa (dengan mencari tombol Raw pada berkas terkait), tipe MIME yang diberikan nanti adalah berupa text/plain sehingga berkas tersebut tidak akan bisa digunakan sebagai berkas CSS karena peramban menganggap berkas tersebut sebagai berkas teks biasa. Untuk mengatasi masalah tersebut, kalian perlu mengaktifkan fitur GitHub Pages.

Mengaktifkan Fitur Halaman GitHub

Untuk mengaktifkan fitur halaman GitHub, klik tab Settings kemudian temukan set bidang yang memiliki judul GitHub Pages. Pada bidang Source, ubah nilainya dari none menjadi master:

Mengaktifkan fitur halaman GitHub.

Fitur halaman sudah aktif. Sekarang kalian bisa mengakses akar repositori sebelumnya secara langsung melalui URL https://nama-pengguna.github.io/blog. Dan karena berkas layout.css berada pada akar halaman, maka kalian bisa mengaksesnya melalui URL https://nama-pengguna.github.io/blog/layout.css. Seperti ini hasilnya:

Melihat tipe MIME melalui tab Network pada alat pengembang.

Kalian bisa memuat URL tersebut pada elemen <link> dan <script> di dalam kode HTML tema seperti ini:

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> … </title>
    <link href="https://nama-pengguna.github.io/blog/layout.css" rel="stylesheet">
  </head>
  <body>
    …
    …
    <script src="https://nama-pengguna.github.io/blog/layout.js"></script>
  </body>
</html>

Memaksimalkan Performa

Saya tidak begitu yakin bahwa berkas yang diakses secara langsung melalui URL halaman GitHub akan disimpan sebagai tembolok dalam jangka waktu yang lama karena GitHub sangat kerap dengan aktivitas pembaruan kode. Jangka waktu tembolok yang lama agaknya tidak akan menguntungkan dari sisi pengguna. Akan selalu ada kemungkinan para pengguna mengalami kebingungan karena berkas yang sudah diperbarui ternyata tidak mengalami perubahan juga ketika dimuat ulang (kecuali dengan memuatnya secara paksa menggunakan kombinasi kunci Ctrl + R pada papan ketik). Untuk berkas-berkas yang biasa dimuat secara langsung seperti berkas HTML dan XML mungkin masih terbilang mudah untuk dipaksa, tapi bagaimana dengan berkas-berkas yang dimuat di dalam kode HTML seperti berkas CSS dan JavaScript? Hal ini yang membuat keputusan untuk memberikan jangka waktu tembolok yang pendek pada GitHub menjadi tampak lebih bijaksana.

Bandingkan waktu pada bidang Last-Fetched dengan waktu pada bidang Expires.

Akan tetapi, untuk memuat berkas CSS dan JavaScript pada situs web versi produksi dengan jangka waktu tembolok yang pendek tentu akan mengurangi performa situs web karena setiap kali halaman diakses, berkas-berkas CSS dan JavaScript yang ada akan selalu dianggap baru oleh peramban dan oleh karena itu mereka akan selalu dimuat melalui peladen GitHub dan tidak pernah bisa dimuat melalui tembolok yang telah tersimpan di peramban pada komputer masing-masing pengguna.

Ada sebuah situs web layanan pihak ke tiga yang sangat sesuai untuk menangani masalah ini yaitu Statically. Untuk menggunakannya, cukup tempelkan URL berkas versi mentah GitHub pada bidang URL repositori yang ada dan kemudian gunakan URL versi produksinya pada halaman web kalian:

Statically

Pada URL versi produksi tersebut selalu terdapat commit hash yang dapat digunakan sebagai penanda versi sebagaimana ketika kalian menambahkan parameter ?v=1.x.x di belakang URL berkas CSS dan JavaScript untuk memperbarui tembolok secara paksa. Setiap kali berkas direvisi, maka hash baru akan dibuat. Pastikan untuk menempelkan kembali URL berkas versi mentah yang baru pada bidang URL repositori untuk mendapatkan versi berkas yang sudah diperbarui. Setiap berkas yang dimuat melalui URL tersebut akan disimpan sebagai tembolok selama setahun:

Melihat tipe MIME melalui tab Network pada alat pengembang.

Yang Harus Diperhatikan

Untuk menghindari hal-hal yang tidak diinginkan seperti pemblokiran akun oleh pihak GitHub, pastikan untuk menggunakan GitHub sebagai media penyimpanan berkas-berkas yang bersifat terbuka. Versi minified masih bisa diterima, versi packed dan obfuscated mungkin akan cenderung dicurigai dan oleh karena itu akan memiliki potensi yang lebih besar untuk diblokir.
Meskipun bisa, Saya tetap tidak menyarankan kalian untuk menyimpan berkas-berkas dalam bentuk video dan musik karena sampai sekarang Saya masih belum pernah melihat berkas-berkas berjenis video dan musik di GitHub.
Kalau kalian ingin menyimpan berkas fon untuk dimuat pada halaman web, pastikan dulu lisensi fon yang ada apakah memang boleh untuk digunakan pada halaman web secara legal. Beberapa fon, meskipun diketahui bersifat gratis namun ada juga yang tidak boleh dimuat sebagai fon untuk web.

Cara yang paling mudah untuk mengakali kebijakan dan layanan GitHub untuk privasi semacam ini adalah dengan menge-fork repositori publik milik orang lain (atau kalian juga bisa menge-fork repositori khusus Blogger milik Saya) dan kemudian menambahkan berkas-berkas pribadi kalian ke dalam repositori tersebut. Meskipun berkas-berkas pribadi kalian tidak ditujukan untuk komunitas kode sumber terbuka, setidaknya beberapa berkas yang lain dari hasil fork tersebut akan membuat repositori kalian seolah-olah adalah repositori yang “ramah” seperti repositori-repositori pada umumnya. Risiko ditanggung sendiri.

Download Template Mirip Liputan 6 (Themes Liputan 9)

noreply@blogger.com (Id Tutor Plus) — Tue, 12 Feb 2019 22:45:00 +0700

Template Mirip Liputan 6 (Themes Liputan 9)

Lama gak update artikel pada Id Tutor Plus membuat kangen untuk blogging kembali, kali ini Admin akan bagikan template yang trendy di tahun 2019 ini secara gratis kepada pengunjung. Terutama bagi Anda yang memiliki konten portal berita online karena tempalte kali ini mirip banget dengan Website terkenal LIPUTAN 6, Template yang di desain oleh XMLThemes ini merupakan template premium yang sangat elegan dan seo freindly dengan fitur responsive

Lihat Demonya Langsung

Fitur Unggulan: Themes Liputan 9

Desain responsive di semua perangkat - Check
Data terstruktur sempurna - Check
Mobile Friendly Design - Check
Template profesional
Widget topik populer (Liputan6.com style)
Tombol share via WhatsApp
SEO Optimized
Ready untuk Google Adsense
Halaman dilengkapi postingan terbaru
Sticky Navigasi & Sidebar
Nomor urut dan popular star untuk postingan populer
Otomatis, sangat mudah untuk memposting
Theme-color Status Bar (mobile)
Auto resize thumbnail image
Komentar facebook yang otomatis terkoneksi dengan facebook pengunjung
Didukung Related posts
Social Media Icons di footer
Penulis & foto otomatis di setiap halaman
Compatibel dengan IE8+, Mozilla, Chrome, Safari
Dan banyak lagi...

Download

Setting: Themes Liputan 9

Cara Instal tema Liputan9 - Check
Cara Cara mempublikasikan postingan di Liputan9 - Check

WARNING!!!Template yang dibagikan ini masih terpassword untuk menghindari penyebaran sembarangan tanpa ijin, untuk itu silahkan berikan komentar dibawah dan meninggalkan jejakemail, Admin akan mengirim password via email kepada Anda. Terima kasih.

Daftar Salinan Berkas di Id Tutor Plus

noreply@blogger.com (Id Tutor Plus) — Thu, 3 Sep 2015 14:45:00 +0700

Setelah beberapa hari bahkan udah hampir setahun, Admin belum sempat posting artikel sama sekali, tiba-tiba ada pemberitahuan pada hostingan Google Code akan ditutup pada tanggal 25 Januari 2016 nanti atau saat ini file yang disimpan pada hosting gratis terbitan google tersebut saat ini dalam pengarsipan google server. Untuk itu, jika pengunjung dalam proses atau bahkan menyimpan file untuk mem back up secepatnya.

Layanan Google Code Akan ditutup

Termasuk Admin sudah melakukan back-up data sebagai antisipasi penutupan Google Code yang dimaksud, berikut daftar hosting yang sebelumnya pernah dibagikan sebagai tutorial bahkan tools pada blog.

File JavaScript

http://cekidot.96.lt/file/js/comments.v1.js
http://cekidot.96.lt/file/js/costumTOC.js
http://cekidot.96.lt/file/js/emotion.js
http://cekidot.96.lt/file/js/fabrastic.js
http://cekidot.96.lt/file/js/jquery-easing-1.3.pack.js
http://cekidot.96.lt/file/js/magicLine-navigation.js
http://cekidot.96.lt/file/js/member.js
http://cekidot.96.lt/file/js/new-costumTOC.js
http://cekidot.96.lt/file/js/notif-comments.js
http://cekidot.96.lt/file/js/pageNumber.js
http://cekidot.96.lt/file/js/perfectScrollbar.js
http://cekidot.96.lt/file/js/posts-comments-menu.js
http://cekidot.96.lt/file/js/recent.gallery.js
http://cekidot.96.lt/file/js/TableSorter.js
http://cekidot.96.lt/file/js/tabView.js
http://cekidot.96.lt/file/js/toc.v1.js
http://cekidot.96.lt/file/js/tocConfig.js

Sehubungan dengan banyaknya kerjaan yang gak bisa ditinggalkan sehingga belum update blogging dan banyak file-file yang Admin sharing sudah broken link. Berikut update terbaru file diatas:

//drive.google.com/file/d/1zNPuc9qizTiACuSVv8qZ6ay9S-tSdKVr (comments.v1.js)
//drive.google.com/file/d/1QTmHOmN36zq1Z4Q746zZPxK8EQ9W9nUm (costumTOC.js)
//drive.google.com/file/d/1zuXkP-23Jq52vLi9cE3FSQEQ400vntF2 (emotion.js)
//drive.google.com/file/d/1LI-xlYYOh78R4Wk4q3ceIT8rocRsHCT7 (fabrastic.js)
//drive.google.com/file/d/1urTRUenv3mqGX0OvZ1nYtumeji225zhT (jquery-easing-1.3.pack.js)
//drive.google.com/file/d/12-B5LWe79CVzzKZWXRNTAMfyhD0uzmuc (magicLine-navigation.js)
//drive.google.com/file/d/1MStgE8CZr4HStDQQjUoTjBKuF-LJKO9X (member.js)
//drive.google.com/file/d/1kXDt3IN6NThzZumNRCKgujfBwC_OfpXg (new-costumTOC.js)
//drive.google.com/file/d/1gcAkXxPGsqPCcHk9g4VNMKEkHco7aauh (notif-comments.js)
//drive.google.com/file/d/1ZdKVAbVfcgWVkybWY1DV1Lk8icfHk3DR (perfectScrollbar.js)
//drive.google.com/file/d/1maDBgAf-zscsFuKMxZyQZnnEpA9WRsun (posts-comments-menu.js)
//drive.google.com/file/d/1SnobVRHOU120ggPSJKtatyRyuW3EonDq (recent.gallery.js)
//drive.google.com/file/d/1FlKkaMZbg6dq2Kx0wwhDlMN1_Fsh0RVI (TableSorter.js)
//drive.google.com/file/d/165pHLNbEOS1SOXDYszDuGJyHM1ibxmqB (tabView.js)
//drive.google.com/file/d/1whcMyHtGnOeqV2237qBMhRzz1fOCJgeu (toc.v1.js)
//drive.google.com/file/d/1Vd_XykFc21DBRwjZV-sXkqhmqInZ3XBy (tocConfig.js)

Membuat MagicLine Navigation Menu Dengan jQuery

noreply@blogger.com (Id Tutor Plus) — Sun, 30 Aug 2015 23:16:00 +0700

Lagi-lagi pada bahasan masih seputar modifikasi navigasi menu pada blog. Beberapa contoh akan di paparkan pada artikel kali ini. Efek hover yang mengesankan akan membuat pengunjung akan terpanah untuk melihatnya.

Pada tulisan beberapa hari lalu udah dijelaskan pula tentang menu-menu yang bisa Anda terapkan dalam blog, silakan lihat disini.

<div class="itpmenu-wrap">
 <ul class="group" id="itpmenu-one">
  <li class="current_page_item"><a href="#">Home</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">Posting</a></li>
  <li><a href="#">Template</a></li>
  <li><a href="#">Widget</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">HTML 5</a></li>
  <li><a href="#">SEO</a></li>
 </ul>
</div

.itpmenu-wrap {
  margin:50px auto;
  background-color:rgba(0,0,0,0.6);
  border-top:2px solid white;
  border-bottom:2px solid white;
}

.group:after {
  visibility:hidden;
  display:block;
  content:"";
  clear:both;
  height:0;
}

*:first-child+html .group {
  zoom:1;
}

#itpmenu-one {
  margin:0 auto;
  list-style:none;
  position:relative;
  width:960px;
}

#itpmenu-one li {
  display:inline-block;
}

#itpmenu-one a {
  color:#bbb;
  font-size:14px;
  float:left;
  padding:6px 10px 4px 10px;
  text-decoration:none;
  text-transform:uppercase;
}

#itpmenu-one a:hover {
  color:white;
}

#magic-line {
  position:absolute;
  bottom:-2px;
  left:0;
  width:100px;
  height:2px;
  background:#fe4902;
}

.current_page_item a {
  color:white !important;
}

.ie6 #itpmenu-one li,
.ie7 #itpmenu-one li {
  display:inline;
}

.ie6 #magic-line {
  bottom:-3px;
}

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='http://cekidot.96.lt/file/js/magicLine-navigation.js'></script>
<script type='text/javascript'>
//<![CDATA[
// DOM Ready
$(function() {
    var $el, leftPos, newWidth;
    $("#itpmenu-one").append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");
    $magicLine
        .width($(".current_page_item").width())
        .css("left", $(".current_page_item a").position().left)
        .data("origLeft", $magicLine.position().left)
        .data("origWidth", $magicLine.width());
        
    $("#itpmenu-one li").find("a").hover(function() {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function() {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });    
    });
    $(".current_page_item_two a").mouseenter();
});
//]]>
</script>

Jika pada template blog Anda sudah terpasang jquery.min.js maka abaikan saja jquery/1.7.2/jquery.min.js diatas
Disarankan Anda memakai jquery.min.js versi terbaru

Cobalah

Perfect Plugin Scrollbar

noreply@blogger.com (Id Tutor Plus) — Mon, 17 Nov 2014 23:27:00 +0700

Modifikasi scrollbar menggunakan plugin

Perfect Plugin Scrollbar merupakan plugin yang jQuery dalam menampilkan scrollbar dengan efek yang menarik untuk diterapkan dalam blog atau website Anda. Biasanya ini diterapkan dalam konten tertentu tergantung darai mana dan bagaimana serta dimana Anda akan menrapkannya, seperti halnya widget blog yang bisanya diterapkan konten-konten tertentu.

Scrollbar dengan Perfect-scrollbar Plugin

.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;}
.ps-container:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60);}
.ps-container .ps-scrollbar-x-rail:hover,.ps-container .ps-scrollbar-x-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90);}
.ps-container .ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90);}
.ps-container .ps-scrollbar-y-rail{position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;}
.ps-container:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60);}
.ps-container .ps-scrollbar-y-rail:hover,.ps-container .ps-scrollbar-y-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90);}
.ps-container .ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90);}
.ps-container .ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear;}
.ps-container.ie6 .ps-scrollbar-x{font-size:0;}
.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x{background-color:#999;}
.ps-container .ps-scrollbar-y{position:absolute;right:0;width:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear;}
.ps-container.ie6 .ps-scrollbar-y{font-size:0;}
.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y{background-color:#999;}
.ps-container.ie .ps-scrollbar-x,.ps-container.ie .ps-scrollbar-y{visibility:hidden;}
.ps-container.ie:hover .ps-scrollbar-x,.ps-container.ie:hover .ps-scrollbar-y,.ps-container.ie.hover .ps-scrollbar-x,.ps-container.ie.hover .ps-scrollbar-y{visibility:visible;}

<script src='http://cekidot.96.lt/file/js/perfectScrollbar.js' type='text/javascript'/>
<script type="text/javascript">
$(document)
 .ready(function ($) {
  $('#content')
   .perfectScrollbar({
    wheelSpeed: 20, //ini merupakan kecepatan scroll, ganti nilainya sesuai keinginan, lebih besar angkanya lebih cepat juga scrollnya.
    wheelPropagation: false //ganti nilanya menjadi "true" jika anda tidak ingin mengunci mouse.
   });
 });
</script>

<div id="content" class="wrapper">
 <div>
  <p>Isi konten anda disini</p>
  <p>Isi konten anda disini</p>
  <p>Isi konten anda disini</p>
  <p>Isi konten anda disini</p>
 </div>
</div>

Contoh penggunaan:

<script type="text/javascript">
$(document)
 .ready(function ($) {
  $('#content')
   .perfectScrollbar({
    wheelSpeed: 20, //ini merupakan kecepatan scroll, ganti nilainya sesuai keinginan, lebih besar angkanya lebih cepat juga scrollnya.
    wheelPropagation: false //ganti nilanya menjadi "true" jika anda tidak ingin mengunci mouse.
   });
 });
</script>

Kode yang diwarnai diatas disesuaikan dengan id contents yang akan diterapkannya.

Lihat Demo

Penghitung Klik pada Link Download / Demo

noreply@blogger.com (Id Tutor Plus) — Mon, 3 Nov 2014 02:56:00 +0700

Penghitung klik dalam sebuah website sering kita jumpai terutama web/blog yang menyediakan link-link download ataupun demo. Ini lebih memperlihatkan sejauh mana pengunjung meng-klik link yang disediakan oleh Administrator. mungkin ini wajib hukumnya jika blog Anda penyedia aneka download

Silakan Klik ❖ ()Lihat Demo

Pemasangan ini merupakan plugin dari firebase, untuk itu sebelum Anda ingin menerapkan dalam blog Anda, silakan registrasi terlebih dahulu disini

Penerapannya

<script src="https://cdn.firebase.com/v0/firebase.js" type="text/javascript"></script>
<script type="text/javascript">
$.each($('[data-download-count=true]'), function (i, e) {
    var elem = $(e).parent().find('#download-count').addClass('loading');
    var id = $(e).closest('.post-body').siblings('a[name]').attr('name') + "-" + $(e).attr('id');
    var downloadStats = new Firebase("https://ID-data-firebase-anda.firebaseio.com/counter/id/" + id);
    var data = {}, isnew = false;
    downloadStats.once('value', function (snapshot) {
        data = snapshot.val();
        if (data == null) {
            data = {};
            data.value = 0;
            data.url = window.location.href;
            data.id = id;
            isnew = true;
        }
        elem.removeClass('loading').text(data.value);
    });
    $(e).click(function (e) {
        data.value++;
        if (isnew) downloadStats.set(data);
        else downloadStats.child('value').set(data.value);
    });
});
</script>

div.button-group {
  text-align:center;
  position:relative;
}

div.button-group a {
  display:inline-block;
  vertical-align:middle;
  margin:2px;
  font:italic 14px/32px Georgia,Serif;
  text-align:center;
  color:#fff;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(0,0,0,0.1);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.1),0 3px 0 rgba(0,0,0,0.1);
  padding:0 15px 3px;
  border-radius:5px;
}

div.button-group a.download {
  background-color:#82C43A;
}

div.button-group a:hover {
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.2),0 3px 0 rgba(0,0,0,0.3);
}

div.button-group a:active {
  position:relative;
  top:2px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,0.1),0 2px 0 rgba(0,0,0,0.1);
}

div.counternya {
  margin:0;
  font-weight:700;
  background-color:#659AE0;
  color:#FFF;
  display:inline-block;
  width:40px;
  height:33px;
  vertical-align:middle;
  padding:0;
  line-height:2.4em;
  box-shadow:0 -3px 0 rgba(0,0,0,0.1) inset,0 3px 0 rgba(0,0,0,0.1);
  border-radius:5px;
}

span.loading {
  background:url(https://www.warnerbros.com/sites/all/themes/wb/images/loading.gif) 50% 50% no-repeat;
  display:inline-block;
  width:30px;
  height:18px;
  margin:0 0 -3px;
}

<div class="button-group">
 <a class="download" data-download-count="true" href="/2014/11/counter-download-and-demo.html">Demo</a>
 <div class="counternya" id="download-count">
  <span class="loading"></span>
 </div>
</div>

Jangan lupa untuk memasang <a expr:name='data:post.id'/> dalam template Anda jika tidak ada, karena ID ini yang akan menjadi ID pada tiap file yang akan dihitung jumlah counternya oleh firebase.

Widget Daftar Pembaharuan Posting

noreply@blogger.com (Id Tutor Plus) — Mon, 3 Nov 2014 00:15:00 +0700

Widget daftar posting yang telah diperbaharui oleh Administrator

Meskipun artikel atau tulisan yang telah lama di posting oleh administrator bisa ditampilkan dalam widget yang telah diperbaharui alisan tampil dalam widget teratas. Ini memudahkan kepada pengunjung bahwa seoarang Admin dalam blog tersebut telah memperbaharui/update tulisan yang sudah usang diterbitkan.

Tulisan artikel ini memenuhi request dari pengunjung blog disini.

Penerapan Blog Widget

<ol id="posts-updated"></ol>

li.updated {
    list-style: none;
    height:60px;
    overflow:hidden;
    font-size:80%
}
.thumbnail-updated {
    float:left;
    margin:5px 10px 0 5px
}
.tanggalnya {
    display:block;
    font-size:90%
}

<script type='text/javascript'>
//<![CDATA[
function updatedPosts(a) {
    if (document.getElementById("posts-updated")) {
        var e = a.feed.entry,
            title, img, link, date, content = "",
            ct = document.getElementById("posts-updated");
        for (var i = 0; i < 7; i++) {
            for (var j = 0; j < 7; j++) {
                if (e[i].link[j].rel == "alternate") {
                    link = e[i].link[j].href;
                    break
                }
            }
            var title = e[i].title.$t,
                pd = e[i].published.$t.substring(0, 10),
                date = pd.replace(/-/g, "/");
            if ("media$thumbnail" in e[i]) {
                img = e[i].media$thumbnail.url
            } else {
                img = "https://cdn.staticaly.com/gh/idtutorplus/images/b085015c/no-images.gif" // Posting no image
            }
            content += '<li class="updated"><img src="' + img.replace(/\/s72-c/, "/s40-c") + '" class="thumbnail-updated" alt="thumb" height="40px" width="40px"/>';
            content += '<strong><a href="' + link + '" target="_blank">' + title + '</a></strong><span class="tanggalnya"> diposkan pada ' + date + "</span></li>";
        }
        ct.innerHTML = content
    }
}

function getScript(url) {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = url;
    document.body.appendChild(s)
}
getScript("https://nama-blog-anda.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=7&callback=updatedPosts");
//]]>
</script>

Coba sendiri

Kumpulan Link Plugins JQuery

noreply@blogger.com (Id Tutor Plus) — Fri, 31 Oct 2014 20:29:00 +0700

JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

Banyak kalang designer dunia maya memanfaatkan plugin untuk mendesign template mereka dengan berbagai plugin jQuery demi tampilan website menjadi menarik untuk dilihat, dinikmati dan dikunjungi. Pada Artikel ini, Admin ingin membagikan link-link plugin jQuery yang bisa Anda manfaatkan.

Artikel ini merupakan kumpulan link website yang menyediakan plugins jQuery.

Form Validation

File upload

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Halaman Error Page 403 Responsive

noreply@blogger.com (Id Tutor Plus) — Sat, 18 Oct 2014 16:53:00 +0700

Menciptakan Halaman error page 403 with Responsive

Halaman error ini untuk lebih menyajikan hal-hal dari kekurangan blog ata website. Jadi Admin pikir ini wajib diterapkan dalam blog kita. Seperti yang di tuliskan sebelumnya bagaimana cara menyajikan Halaman error page ini valid HTML5? kunjungi disini

Penerapannya

Carilah kode <body> dalam template Anda dan terapkan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
body {
  background:#FFF;
  font-family:Verdana,Geneva,sans-serif;
  color:#686868;
  font-size:14px;
  line-height:16px;
}

#error-page {
  position:relative;
  width:100%;
}

#my-logo-line {
  position:absolute;
  width:100%;
  height:1px;
  background:#acddef;
  top:62px;
  left:0;
  z-index:1;
}

#my-logo {
  position:relative;
  width:1000px;
  height:27px;
  margin:0 auto;
  padding:48px 0 0 0;
  z-index:5;
}

.my-logo {
  display:block;
  position:absolute;
  top:48px;
  left:135px;
  background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiylSkYRY6NYHnxe-USoHIQCpWGDuPF6A6yijUoS49WH_md7SEDCkvyplUCP370WFB3-rlMyiRBvEAW6_u__ROCV6YId14ATBoJYQ8zgxW7qqAuzecC6yM7ot_sjDCAk1k3gjs-ADVh8eE/s1600/icon.png) no-repeat 50% 0;
  width:75px;
  height:27px;
  font-size:0;
  color:transparent;
  text-decoration:none;
}

#error_page {
  width:1000px;
  margin:0 auto;
  padding:42px 0 301px 0;
}

#error_page.permission {
  padding:40px 0 389px 0;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aBOkQRlNFvgZgT-lz0vaZ8k2PqGHCNdjzRMjOJE9wQaUmETcChJly6M4nI-DF9MwA3SJVoXDOkIAzDER_Z4_KpwG0x9Usc8CV7Kjvh-vL0w-rXLWB0ulRM0PyltOXr6IZ7WnoSfI_Fs/s1600/permission.png) no-repeat 317px 100%;
  margin-bottom:55px;
}

.error-title {
  display:inline-block;
  position:absolute;
  width:76px;
  top:52px;
  left:50%;
  margin-left:-38px;
  text-align:center;
  background:#FFF;
  font-size:17px;
  line-height:18px;
  color:#6bc0e1;
}

#error_page-link {
  font-size:22px;
  line-height:26px;
  text-transform:uppercase;
  text-align:center;
  color:#6bc0e1;
}

.noactivated #error_page-link,
.noconfig #error_page-link,
.deactivated #error_page-link,
.domain #error_page-link,
#error_page-link.nofound {
  font-size:24px;
}

#error-descr {
  font-size:14px;
  line-height:25px;
  color:#686868;
  text-align:center;
  margin:18px 0 0 0;
  padding:0 100px;
}

#error-descr a {
  color:#6bc0e1;
  text-decoration:underline;
}

#error-descr a:hover {
  text-decoration:none;
}

@media screen and (max-width:1240px) {
  #my-logo {
    width:1000px;
  }
  #error_page {
    width:1000px;
  }
}

@media screen and (max-width:990px) {
  #my-logo {
    width:770px;
  }
  #error_page {
    width:770px;
  }
  #error_page.permission {
    background-position:203px 100%;
  }
}

@media screen and (max-width:793px) {
  #my-logo {
    width:550px;
  }
  .my-logo {
    left:10px;
  }
  #error_page {
    width:550px;
  }
  #error_page.permission {
    background-position:91px 100%;
  }
}

@media screen and (max-width:570px) {
  #my-logo {
    width:290px;
  }
  .my-logo {
    left:47%;
    margin-left:-30px;
    top:10px;
  }
  #error_page {
    width:290px;
  }
  #error-descr {
    padding:0;
  }
  #error_page.permission {
    padding:23px 0 277px 0;
    background-position:7px 100%;
    background-size:75%;
  }
  #error_page-link {
    line-height:30px;
  }
}
</style>
<div id='error-page'>
 <div id='my-logo'>
  <a class='my-logo' href='https://nama_blog.blogspot.com' target='_blank'>Title Blog</a>
  <span class='error-title'>403</span>
 </div>
 <div id='my-logo-line'/>
 <div class='permission' id='error_page'>
  <p id='error_page-link'>PESAN HALAMAN ERROR PAGE 403</p>
  <p id='error-descr'>Back to the <a expr:href='data:blog.homepageUrl'>home page</a></p>
 </div>
</div>
<b:else/>

Selanjutnya Anda cari kode </body> dan terapkan kode </b:if> diatasnya

Live Demo

XHTML Blogger - Elemen Halaman: Seksi dan Widget

noreply@blogger.com (Id Tutor Plus) — Wed, 15 Oct 2014 20:55:00 +0700

Sebuah seksi merupakan elemen <b:section>, sedangkan widget adalah elemen <b:widget>. <b:widget> harus berada di dalam <b:section>, dan <b:section> harus berada di dalam tag <body>

<b:section> dan <b:widget> selalu dilengkapi oleh beberapa atribut. Beberapa merupakan atribut wajib dan beberapa merupakan pilihan. Namun, untuk mengaktifkan sebuah <b:section>, minimal kita hanya membutuhkan atribut id dengan nilai yang spesifik:

<b:section id='widget-area'/>

Elemen di atas nantinya akan ditampilkan sebagai bagian terpenting dalam halaman Tata Letak, yaitu berupa tab pengeditan, penambahan & penghapusan widget seperti ini:

Contoh tampilan <b:section> di halaman Tata Letak

Dan saat ditampilkan sebagai elemen HTML, <b:section> akan tampil sebagai elemen ini:

<div class='section' id='widget-area'></div>

Daftar Atribut yang Biasa Muncul di dalam Elemen <b:section>
Atribut	Nilai/Contoh Nilai	Keterangan
id	`section-1`	Atribut wajib. Seperti ID dalam elemen HTML. Berupa huruf atau angka, dan harus spesifik.
class	`header`	Atribut opsional. Seperti kelas dalam elemen HTML. Tidak harus spesifik. Kelas-kelas standar dalam sebuah template blogspot adalah `navbar`, `header`, `main`, `sidebar` dan `footer`. Kelas-kelas standar tersebut sangat berguna bagi Blogger untuk mempermudah dalam menentukan tipe widget yang sesuai yang biasanya akan disisipkan/ditata ulang secara otomatis saat Anda mengunggah/mengganti template.
maxwidgets	`1`	Atribut opsional. Berupa jumlah. Atribut ini berguna untuk menentukan seberapa banyak widget yang bisa ditambahkan pada seksi terkait. Anda biasanya akan melihat atribut ini pada seksi header berupa `maxwidgets='1'`, yang akan membatasi penambahan widget sebanyak satu buah. Setelah sebuah elemen halaman ditambahkan, elemen halaman baru tidak diizinkan untuk masuk ke dalam seksi tersebut. Ciri khususnya adalah, sebuah tombol penambahan widget akan tampil saat seksi tersebut masih mengandung jumlah widget kurang dari nilai maksimal, dan akan menghilang saat jumlahnya telah mencapai nilai maksimal.
showaddelement	`yes` (default)	Atribut opsional. Jika bernilai `yes`, tombol penambahan widget akan ditampilkan. Jika bernilai `no`, tombol penambahan widget akan menghilang (pemilik blog tidak diizinkan untuk menambahkan elemen halaman).
showaddelement	`no`
growth	`vertical` (default)	Atribut opsional. Digunakan untuk menentukan apakah widget-widget halaman akan disusun secara menyamping atau bertumpukan.
growth	`horizontal`

Sebuah <b:widget> merupakan bagian dari <b:section> dan memiliki beberapa atribut wajib, yang akan terisi secara otomatis saat kita menambahkan elemen halaman/widget baru:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

Elemen di atas akan tampil sebagai item widget seperti ini saat kita berada di dalam halaman Tata Letak:

Contoh tampilan <b:widget> di halaman Tata Letak

Dan akan menjadi seperti ini saat tampil sebagai elemen HTML:

<div class='widget BlogArchive' id='BlogArchive1'>
  <h2>Blog Archive</h2>
  <div class='widget-content'>
    ...
  </div>
</div>

<div class='widget `type`' id='`id`'>
  <h2>`title`</h2>
  <div class='widget-content'>
    ...
  </div>
</div>

Daftar Atribut yang Biasa Muncul di dalam Elemen <b:widget>
Atribut	Nilai/Contoh Nilai	Keterangan
id	`BlogArchive1`	Atribut wajib. Seperti ID dalam elemen HTML. Berupa huruf atau angka, dan harus spesifik.
type	`BlogArchive`	Atribut wajib. Nilai terdaftar^[1] dan tidak bisa ditentukan sesuka hati. Digunakan untuk menentukan tipe widget.
locked	`true`	Atribut opsional. Digunakan untuk menentukan apakah widget bisa digeser-geser (diatur ulang susunannya) dan dihapus atau tidak. Ciri khusus tampak pada bagian bilah di samping item widget seperti ini
locked	`false`
title	`Blog Archive`	Atribut opsional. Digunakan untuk menentukan judul widget.
pageType	`all`	Atribut opsional. Digunakan untuk membuat widget tampil pada halaman spesifik (???)
	`archive`
	`main`
	`item`
mobile	`yes`	Atribut opsional. Jika `yes`, widget akan ditampilkan saat berada pada tampilan blog mobile. Jika `no`, widget tidak akan tampil saat berada pada tampilan blog mobile. Jika `only`, widget akan ditampilkan hanya pada tampilan blog mobile.
	`no`
	`only`

XHTML Blogger - Share Buttons

noreply@blogger.com (Id Tutor Plus) — Wed, 15 Oct 2014 20:44:00 +0700

Dalam Konsep

<b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'>
    <a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.emailThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showBlogThisButton'>
    <a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.blogThisMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showTwitterButton'>
    <a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToTwitterMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showFacebookButton'>
    <a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToFacebookMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showOrkutButton'>
    <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + &quot;&amp;target=orkut&quot;' expr:title='data:top.shareToOrkutMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToOrkutMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showPinterestButton'>
    <a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'>
      <span class='share-button-link-text'><data:top.shareToPinterestMsg/></span>
    </a>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <div class='goog-inline-block dummy-container'><data:post.dummyTag/></div>
  </b:if>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:top.showEmailButton	Boolean	`true`, `false`
data:top.showBlogThisButton	Boolean	`true`, `false`
data:top.showTwitterButton	Boolean	`true`, `false`
data:top.showFacebookButton	Boolean	`true`, `false`
data:top.showOrkutButton	Boolean	`true`, `false`
data:top.showPinterestButton	Boolean	`true`, `false`
data:top.showDummy	Boolean	`true`, `false`
data:post.sharePostUrl	Elemen ini akan menghasilkan URL berbagi	`https://www.blogger.com/share-post.g?blogID=52518732703774XXXX2&postID=703794562479435XXXX`
data:top.emailThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Kirimkan Ini lewat Email`
data:top.blogThisMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`BlogThis!`
data:top.shareToTwitterMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Twitter`
data:top.shareToFacebookMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Berbagi ke Facebook`
data:top.shareToOrkutMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Bagikan ke Orkut`
data:top.shareToPinterestMsg	Elemen ini akan menghasilkan judul/deskripsi tautan berbagi	`Bagikan ke Pinterest`
data:post.dummyTag	???	...

XHTML Blogger - Seksi Posting

noreply@blogger.com (Id Tutor Plus) — Wed, 15 Oct 2014 20:41:00 +0700

Dalam Konsep

Konten Halaman:

Prolog
Detail

Prolog:

Elemen posting pada umumnya adalah sebuah elemen <b:includable> dengan id='post' seperti ini:

<b:includable id='post' var='post'>
  ...
</b:includable>

Pada versi mobile, Anda akan melihatnya sebagai elemen ini:

<b:includable id='mobile-post' var='post'>
  ...
</b:includable>

Elemen tersebut berisi markup HTML yang mendukung penampilan posting:

<div class='post hentry'>
  <h2 class='post-title entry-title'>
    Judul Artikel...
  </h2>
  <div class='post-body entry-content' id='post-body-3907786755150251808'>
    Konten artikel...
  </div>
  <div class='post-footer'>
    Konten footer artikel...
  </div>
</div>

Judul Posting

Berupa elemen heading. Biasanya memiliki kelas post-title dan/atau entry-title:

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <b:if cond='data:blog.url != data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.link	Elemen ini akan menghasilkan tautan lampiran yang nilainya Anda atur melalui editor posting	`https://www.custom_link_url.com`
data:post.url	Elemen ini akan menghasilkan URL posting	`https://nama_blog.blogspot.com/2012/11/lorem-ipsum.html`
data:post.title	Elemen ini akan menghasilkan judul posting	`Lorem Ipsum`

Tubuh/Konten Posting

Berupa elemen divisi dengan kelas post-body dan/atau entry-content:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div class='clear'/> <!-- clear for photos floats -->
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.id	Elemen ini akan menampilkan ID posting	`3907786755150251808`
data:post.body	Elemen ini akan menampilkan konten posting	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.`
data:post.snippet	Elemen ini akan menghasilkan ringkasan posting dalam 100 kata + `...`	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut ...`
data:post.thumbnailUrl	Elemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi `s72-c`	`https://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s72-c/1389621_gaillardia.jpg`
data:post.firstImageUrl	Elemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi yang sesungguhnya	`https://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s1600/1389621_gaillardia.jpg`
data:post.authorPhoto.url	Elemen ini akan menghasilkan URL gambar foto profil penulis	`https://lh4.googleusercontent.com/-nxgZmVx9WAM/AAAAAAAAAAI/AAAAAAAAAAA/q7C64RWrrU0/s1600/photo.jpg`
data:post.authorProfileUrl	Elemen ini akan menghasilkan URL profil penulis	`https://www.blogger.com/profile/034065736413533XXXXX`
data:post.authorAboutMe	Elemen ini akan menghasilkan deskripsi profil penulis	`Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.`

Footer/Catatan Kaki Posting

Berupa elemen divisi. Biasanya memiliki kelas post-footer:

<div class='post-footer'>

  <div class='post-footer-line post-footer-line-1'>
    <span class='post-author vcard'>
      <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
        <span class='fn'>
          <data:post.author/>
        </span>
      </b:if>
    </span>
    <span class='post-timestamp'>
      <b:if cond='data:top.showTimestamp'>
        <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
      </b:if>
    </span>
    <!-- quickedit pencil -->
    <b:include data='post' name='postQuickEdit'/>
    <span class='post-comment-link'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </b:if>
    </span>
    <!-- Feature added by BTemplates.com -->
    <b:if cond='data:post.sharePostUrl'>
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-2'>
    <span class='post-labels'> ... </span>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-3'><span class='post-location'>
    <b:if cond='data:top.showLocation'>
      <b:if cond='data:post.location'>
        <data:postLocationLabel/>
        <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
      </b:if>
    </b:if>
  </span> </div>

</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:top.authorLabel	Label keterangan sebelum nama penulis	`Diposting oleh:`
data:post.author	Elemen ini akan menghasilkan nama penulis	`Taufik Nurrohman`
data:top.timestampLabel	Label keterangan sebelum waktu penerbitan	`pada`
data:post.timestampISO8601	Elemen ini akan menampilkan waktu penerbitan dalam format timestamp ISO 8601	`2012-10-28T22:42:00+07:00`
data:post.timestamp	Elemen ini akan menampilkan timestamp waktu penerbitan	`10:42`
data:post.addCommentUrl	Elemen ini akan menampilkan URL posting dengan tambahan hash `#comment-form`	`https://nama_blog.blogspot.com/2012/11/lorem-ipsum.html#comment-form`
data:post.addCommentOnclick	???	`...`
data:top.commentLabel	[?]	`-`
data:post.numComments	[?]	`-`
data:top.commentLabelPlural	[?]	`-`
data:shareMsg	???	`...`
data:post.dummyTag	???	`...`
data:top.showLocation	???	`...`
data:post.location	???	`...`
data:postLocationLabel	Elemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan posting	`Lokasi:`
data:post.location.mapsUrl	Elemen ini akan menghasilkan URL lokasi dalam peta Google (???)	`...`
data:post.location.name	Elemen ini akan menampilkan lokasi penerbitan posting yang telah dituliskan dalam formulir lokasi	`Banyumas, Indonesia`

Jump Link/Read More Link

Elemen ini akan muncul saat Anda mengaktifkan jump link pada posting/memotong artikel dengan cara menyisipkan kode :

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
      <data:post.jumpText/>
    </a>
  </div>
</b:if>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.jumpText	Elemen ini akan menampilkan teks “Baca Selengkapnya” dari pengaturan posting	`Read More »`

XHTML Blogger - Item Kontrol

noreply@blogger.com (Id Tutor Plus) — Wed, 15 Oct 2014 20:31:00 +0700

Tombol Edit Cepat Posting

Biasanya berbentuk gambar/ikon pensil dan terletak di dalam footer posting:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='https://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.editUrl	Elemen ini akan menghasilkan URL pengeditan posting	`https://www.blogger.com/post-edit.g?blogID=489094982896596XXXX&postID=622513084927827XXXX&from=pencil`
data:top.editPostMsg	Elemen ini akan menghasilkan deskripsi/pesan tautan pengeditan posting	`Edit Entri`
data:post.adminClass	Elemen ini akan menghasilkan kelas khusus administrator	`blog-admin pid-251761511`

Tombol Edit Cepat Widget

Berbentuk gambar/ikon kunci inggris dan terletak pada bagian bawah widget:

<b:include name='quickedit'/>

https://img1.blogblog.com/img/icon18_wrench_allbkg.png

Tombol Penghapusan Komentar

Lihat pada XHTML Blogger, Ikon Penghapusan Komentar

XHTML Blogger - Loop Label Posting

noreply@blogger.com (Id Tutor Plus) — Wed, 15 Oct 2014 20:10:00 +0700

Elemen ini biasanya tampil di bagian footer posting dan berfungsi untuk menampilkan daftar label yang diterapkan pada posting tersebut:

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.labels	Daftar label	???
data:postLabelsLabel	Elemen ini akan menampilkan label sebelum daftar kategori posting	`Label:`
data:label.url	Elemen ini akan menghasilkan URL halaman label/kategori	`https://nama_blog.blogspot.com/search/label/Liburan`
data:label.name	Elemen ini akan menghasilkan nama label/kategori	`Liburan`
data:label.isLast	Boolean untuk menyatakan label terakhir	`true`, `false`

Membuat Daftar Member Aktif / Komentator Aktif

noreply@blogger.com (Id Tutor Plus) — Wed, 15 Oct 2014 02:26:00 +0700

Untuk memastikan berapa banyak komentator dalam blog kita dan berapa banyak dia berkomentar? Jawaban ini tidak perlu dihitung sedatil mungkin, karena pada tutorial ini dengan sendirinya Anda akan melihat apa yang dimaksudkan. Dan caranyapun sangat mudah. Bahkan member yang akan ditampilkan akan menunjukkan sebuah link yang mengarah pada profil komentator.

Widget member aKtif dalam blog

Lihat Demo Coba sendiri

.cm-person{margin:0;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px;border:1px solid #ccc;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color:#FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}

<script type="text/javascript">
    //<![CDATA[
    var homepage = 'https://nama_blog.blogspot.com', // Ganti nilainya menjadi URL blog anda
        maxTopCommenters = 77,
        minComments = 1,
        numDays = 0,
        excludeMe = true,
        excludeUsers = ["Anonymous", "ITP", "Id Tutor Plus"], // Nama-nama yang tidak ditampilkan
        maxUserNameLength = 42,
        txtTopLine = '[image] [user]',
        txtNoTopCommenters = 'No top commentators at this time.',
        txtAnonymous = '',
        sizeAvatar = 80,
        cropAvatar = true,
        urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji1BCRMlKrrLoKJPdeCSJc8FN1-aQJaYd-nSfKuoS1gurX2sOCj6Dy1PiKvbXxfS5K45lWqBQExbhPk04xqd5AGUjQ6JilIOyxvXzEzEVS8OvOz7aOQFFL8ywmlAmroui2CkcyewXrQ6E/' + sizeAvatar + '/avatar_blue_m_96.png',
        urlAnoAvatar = 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
        urlMyProfile = '',
        urlMyAvatar = '';
    if (!Array.indexOf) {
        Array.prototype.indexOf = function(obj) {
            for (var i = 0; i < this.length; i++)
                if (this[i] == obj) return i;
            return -1
        }
    }

    function replaceTopCmtVars(text, item, position) {
        if (!item || !item.author) return text;
        var author = item.author;
        var authorUri = "";
        if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;
        var avaimg = urlAnoAvatar;
        var bloggerprofile = "https://www.blogger.com/profile/";
        if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {
            avaimg = author.gd$image.src
        } else {
            var parseurl = document.createElement('a');
            if (authorUri != "") {
                parseurl.href = authorUri;
                avaimg = 'https://www.google.com/s2/favicons?domain=' + parseurl.hostname
            }
        }
        if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
        if (avaimg == "https://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;
        var newsize = "s" + sizeAvatar;
        avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");
        if (cropAvatar) newsize += "-c";
        avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");
        var authorName = author.name.$t;
        if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;
        var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';
        if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';
        if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";
        var authorcode = authorName;
        if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
        text = text.replace('[user]', authorcode);
        text = text.replace('[image]', imgcode);
        text = text.replace('[count]', item.count);
        return text
    }
    var topcommenters = {};
    var ndxbase = 1;

    function showTopCommenters(json) {
        var one_day = 1000 * 60 * 60 * 24;
        var today = new Date();
        if (urlMyProfile == "") {
            var elements = document.getElementsByTagName("*");
            var expr = /(^| )profile-link( |$)/;
            for (var i = 0; i < elements.length; i++)
                if (expr.test(elements[i].className)) {
                    urlMyProfile = elements[i].href;
                    break
                }
        }
        for (var i = 0; i < json.feed.entry.length; i++) {
            var entry = json.feed.entry[i];
            if (numDays > 0) {
                var datePart = entry.published.$t.match(/\d+/g);
                var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
                var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));
                if (days > numDays) break
            }
            var authorUri = "";
            if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
            if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;
            var authorName = entry.author[0].name.$t;
            if (excludeUsers.indexOf(authorName) != -1) continue;
            var hash = entry.author[0].name.$t + "-" + authorUri;
            if (topcommenters[hash]) topcommenters[hash].count++;
            else {
                var commenter = new Object();
                commenter.author = entry.author[0];
                commenter.count = 1;
                topcommenters[hash] = commenter
            }
        }
        if (json.feed.entry.length > 200) {
            ndxbase += 200;
            document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
            return
        }
        var tuplear = [];
        for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);
        tuplear.sort(function(a, b) {
            if (b[1].count - a[1].count) return b[1].count - a[1].count;
            return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1
        });
        var realcount = 0;
        for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {
            var item = tuplear[i][1];
            if (item.count < minComments) break;
            document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));
            realcount++
        }
        if (!realcount) document.write(txtNoTopCommenters)
    }
    document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
    //]]>
</script>

Coba sendiri

XHTML Blogger - Navigasi Halaman/Blog Pager

noreply@blogger.com (Id Tutor Plus) — Sun, 12 Oct 2014 22:39:00 +0700

<b:includable id='nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>
  <div class='clear'/>
</b:includable>

Data	Keterangan	Tampilan/Contoh Tampilan
data:newerPageUrl	Indikator untuk menyatakan bahwa terdapat posting yang lebih baru sebelum posting/daftar posting yang sedang aktif/terlihat di halaman. Pada intinya, kondisi ini digunakan untuk memunculkan navigasi Posting Lebih Baru saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —misalnya, saat kita sedang berada di halaman muka, kita tidak akan melihat navigasi Posting Lebih Baru. Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih baru dari halaman yang sedang aktif.	`https://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&max-results=2`
data:olderPageUrl	Indikator untuk menyatakan bahwa terdapat posting yang lebih lama setelah posting/daftar posting yang sedang aktif/terlihat di halaman. Kondisi ini digunakan untuk memunculkan navigasi Posting Lama saat diperlukan dan akan menyembunyikannya saat tidak diperlukan —saat kita sedang berada di halaman terakhir, maka kita tidak akan melihat navigasi Posting Lama). Elemen/data ini juga berfungsi untuk menampilkan URL halaman (saat sedang berada di halaman indeks) atau URL posting (saat sedang berada di halaman item) yang lebih lama dari halaman yang sedang aktif.	`https://nama_blog.blogspot.com/search?updated-max=2012-12-21T16:36:00%2B07:00&max-results=2&reverse-paginate=true`
data:newerPageTitle	Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih baru	`Posting Lebih Baru`, `Newer Post`
data:olderPageTitle	Elemen ini akan menampilkan teks navigasi menuju halaman/posting yang lebih lama	`Posting Lama`, `Older Post`
data:widget.instanceId	[?]	`Blog1`
data:blog.homepageUrl	[?]	`https://nama_blog.blogspot.com/`
data:homeMsg	Elemen ini akan menampilkan teks navigasi ke halaman awal.	`Beranda`
data:mobileLinkUrl	Kode ini akan menggenerasikan URL blog versi seluler berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan `data:blog.url` dengan akhiran berupa `?m=1`).	`https://nama_blog.blogspot.com/?m=1`
data:desktopLinkUrl	Kode ini akan menggenerasikan URL blog versi desktop berdasarkan URL yang sedang aktif (lebih tepatnya, kode ini akan menghasilkan nilai yang sama dengan `data:blog.url` dengan akhiran berupa `?m=0`).	`https://nama_blog.blogspot.com/?m=0`
data:mobileLinkMsg	Elemen ini akan menampilkan teks navigasi menuju blog tampilan seluler.	`Lihat versi seluler`
data:desktopLinkMsg	Elemen ini akan menampilkan teks navigasi menuju blog tampilan web/desktop.	`Lihat versi web`

XHTML Blogger - Widget Label

noreply@blogger.com (Id Tutor Plus) — Sun, 12 Oct 2014 22:28:00 +0700

Sebuah widget Blogger bertipe Label dapat dinyatakan dalam kerangka seperti ini:

<b:widget id='Label1' locked='false' title='Category List' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <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>
  </b:includable>
</b:widget>

Saat Anda mencoba mengedit atau baru pertama kali menambahkan widget label di blog Anda, maka Anda akan menemukan dua opsi utama untuk menentukan tampilan widget yaitu model widget bertipe list dan cloud. Kode di atas sebenarnya juga sudah menunjukkan markup XML kedua model tersebut. Saya akan pisahkan bagian-bagiannya agar bisa lebih mudah dimengerti:

Judul Widget

Bagian ini menunjukkan markup judul widget. Kondisional yang mengelilinginya berfungsi untuk membatasi agar elemen <h2> pada widget ini hanya muncul jika formulir judul tidak kosong:

<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>

Kondisional Tipe Widget

Bagian ini menunjukkan kondisional yang berfungsi untuk memisahkan tampilan model list dan cloud:

<b:if cond='data:display == &quot;list&quot;'>
  <!-- Markup widget bertipe `list` -->
<b:else/>
  <!-- Markup widget bertipe selain `list` -->
</b:if>

Markup Widget Bertipe List

<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>

Markup Widget Bertipe Cloud

<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>

Data	Keterangan	Tampilan/Contoh Tampilan
data:display	Elemen ini akan menampilkan tipe tampilan widget. Berguna untuk membuat kelas spesifik, terutama pada elemen tubuh widget.	`list`, `cloud`
data:blog.url	[?]
data:label.url	Elemen ini akan menampilkan URL setiap item label.	`https://nama_blog.blogspot.com/search/label/-/Nama Label`
data:label.name	Elemen ini akan menampilkan nama label.	`Nama Label`
data:blog.languageDirection	[?]
data:showFreqNumbers	Kondisional untuk menyatakan apakah jumlah posting pada widget akan ditampilkan atau tidak.	`true`, `false`
data:label.count	Elemen ini akan menampilkan jumlah posting pada label terkait.	`20`
data:label.cssSize	Elemen ini akan menampilkan angka tingkatan berdasarkan perbandingan banyaknya jumlah posting antara label yang satu dengan label yang lainnya. Biasa digunakan sebagai akhiran nama kelas `label-size-` pada item label bertipe cloud* untuk mengatur besar ukuran masing-masing item melalui CSS.	`3`

Ikon Pengeditan Cepat

<b:include name='quickedit'/>

Contoh Markup Widget Label Hasil Modifikasi

Berikut ini adalah contoh markup XML yang akan mengubah tampilan widget label menjadi berbentuk tabel:

<b:widget id='Label1' locked='false' title='Category List' type='Label'>
  <b:includable id='main'>
    <b:if cond='data:title'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <table border='1'>
        <thead>
          <tr><th>Label</th><th>Total Posting</th></tr>
        </thead>
        <tbody>
          <b:loop values='data:labels' var='label'>
            <!--
              Kondisional `data:blog.url == data:label.url` tidak efektif dan tidak tepat sasaran!
              Gunakan cara Saya yang ini untuk menciptakan kondisional halaman label yang stabil.
            -->
            <b:if cond='data:blog.searchLabel == data:label.name'>
              <tr><td><strong><data:label.name/></strong></td><td><data:label.count/></td></tr>
            <b:else/>
              <tr><td><a expr:href='data:label.url'><data:label.name/></a></td><td><data:label.count/></td></tr>
            </b:if>
          </b:loop>
        </tbody>
      </table>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>

Notifikasi Komentar Pada Blog

noreply@blogger.com (Id Tutor Plus) — Sun, 12 Oct 2014 03:17:00 +0700

Pemasangan notifikasi/pemberitahuan komentar dalam blog mungkin sangatlah perlu untuk diterapkan dalam sebuah website, kenapa? Sebab dengan terpasangnya ini, maka akan lebih mempermudah Anda untuk mengetahui sejauh mana blog/website Anda dikunjungi oleh visitor serta untuk lebih cepatnya Anda membalas komentar pengunjung.

Demo Live

Lansung saja pada cara pemasangannya

Simpan kode dibawah ini diatas ]]></b:skin>

/* Notifikasi Komentar
----------------------------------------------- */
#notif {cursor:pointer;}
#notif:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNNq8IhWWoEoW0wr0bmCXohQZvZyIPRYX3FsYOch1bkTyWoc7CaC0ujf7SWtOhiLMrkLIdfdUq7f8t_oIhaTUBemNdOrmnWrmU9lIe_-mpiVPdRvloFG9LfwvJF9I85cxzE-M6vXcK7Js/s320/comment.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:295px;
  z-index:9997;
  transition:all 0.4s ease-out;
}
#notif:hover:before {opacity:.5;}
#show-total {
  position:fixed;
  top:8px;
  right:285px;
  z-index:9999;
  cursor:pointer;
  float:right;
}
.total-show {
  background-color:#f1c40f;
  color:white;
  padding:2px 6px;
  font-size:11px;
  border-radius:4px;
  font-weight:bold;
}
#cm-wrapper {
  width:352px;
  position:fixed;
  top:45px;
  right:-381px;
  z-index:9999;
  transition:0.5s ease;
}
#cm-wrapper .bubble {
  position:absolute;
  z-index:300;
  width:0;
  height:0;
  border-width:14px;
  border-style:solid;
  top:-6px;
  left:25px;
  border-color:transparent transparent rgb(211,211,211) !important;
}
#cm-scroll {
  width:100%;
  overflow:hidden;
  position:relative;
}
#comments-container {
  height:530px;
  margin:-18px -300px 0 0;
  padding-right:280px;
  padding-left:10px;
  overflow:auto;
  color:#666;
  font-family:Arial,Sans-serif;
  background:#e4e4e4;
  background:-moz-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e4e4e4),color-stop(20%,#e7e7e7),color-stop(37%,#eaeaea),color-stop(52%,#f1f1f1),color-stop(69%,#eaeaea),color-stop(88%,#e7e7e7),color-stop(99%,#e4e4e4));
  background:-webkit-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:-o-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:-ms-linear-gradient(top,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  background:linear-gradient(to bottom,#e4e4e4 0%,#e7e7e7 20%,#eaeaea 37%,#f1f1f1 52%,#eaeaea 69%,#e7e7e7 88%,#e4e4e4 99%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4e4e4',endColorstr='#e4e4e4',GradientType=0 );
  out-line:none;
  border-top:1px solid #fff;
  border-radius:0 0 0 6px;
  -webkit-border-radius:0 0 0 6px;
  -moz-border-radius:0 0 0 6px;
  -moz-box-shadow:0 0 2px rgba(255,255,255,0.6) inset,0 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 0 2px rgba(255,255,255,0.6) inset,0 2px 2px rgba(0,0,0,0.2);
  box-shadow:0 0 2px rgba(255,255,255,0.6) inset,0 2px 2px rgba(0,0,0,0.2);
}
#cm-scroll h4 {
  font-size:14px;
  font-weight:bold;
  color:#535252;
  text-shadow:0 1px 0 #e5e5e5;
  background:#d3d3d3;
  background:-moz-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d3d3d3),color-stop(52%,#c3c3c3),color-stop(99%,#b3b3b3));
  background:-webkit-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:-o-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:-ms-linear-gradient(top,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  background:linear-gradient(to bottom,#d3d3d3 0%,#c3c3c3 52%,#b3b3b3 99%);
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3',endColorstr='#b3b3b3',GradientType=0 );
  font-weight:900;
  padding:12px 25px;
  border-bottom:1px solid #999;
  color:#535252;
  text-shadow:0 1px 0 #dedede !important;
  border-radius:6px 0 0 0;
  -webkit-border-radius:6px 0 0 0;
  -moz-border-radius:6px 0 0 0;
  -moz-box-shadow:inset 0 1px 0 0 #ffffff;
  -webkit-box-shadow:inset 0 1px 0 0 #ffffff;
  box-shadow:inset 0 1px 0 0 #ffffff;
  font-weight:900 !important;
}
#cm-wrapper #cm-close {
  position:absolute !important;
  background-image:url(https://cekidot.96.lt/file/images/notice-spirt.png);
  background-repeat:no-repeat;
  width:29px;
  height:29px;
  overflow:hidden;
  text-indent:10em;
  top:28px;
  right:10px;
  background-position:0 0 !important;
  cursor:pointer;
}
#comments-container.cm-active {
  position:fixed;
  right:0;
  top:61px;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
.cm-outer pre {
  background-color:#141414;
  font-size:11px;
  color:#7c7c7c;
}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhqOmjEYZ2wKyxnULZpr8zJ5hsrEWE7gok-OYugoSlhphDL89kNppXO1cFHJbolXOXGtjIcAN574KxslS4nn8w9oQTXBgUfJuSTZwpggl1yzjAkyovEhuXngfGZGlcskH1V6dnE9GkG5-3/s1600/batas.png') repeat-x bottom;
  margin-right:10px;
}
.cm-outer code {
  color:#a6a658;
  font-size:11px;
}
.cm-outer li.selected {border-left:4px solid #fffe8c;}
.cm-outer li:first-child {border-top:none;}
.cm-outer li:last-child {border-bottom:none;}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px;}
.cm-header {
  margin:4px 0 8px 60px;
  font-size:12px;
  font-weight:normal !important;
}
.cm-header a {
  color:#168980;
  text-decoration:none;
  font-size:12px;
  font-weight:bold;
}
.cm-header a:hover {
  color:#e6e6e6;
  text-decoration:none;
}
.cm-outer .cm-content {overflow:hidden;}
.cm-content {margin-left:60px;}
.cm-outer img {
  display:block;
  float:left;
  overflow:hidden;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {
  color:#168980;
  text-decoration:none;
}
.cm-footer a:hover {
  color:#e6e6e6;
  text-decoration:none;
}
#cm-overlay {
  position:fixed !important;
  z-index:999;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:0.9;
  background-color:#111;
  display:none;
}

Kemudian simpan kode dibawah ini tepat diatas kode </body>

<div id='notif' title='Notifikasi'></div>
<div id='cm-wrapper'>
    <div class="bubble"></div>
    <div id="cm-scroll">
<h4>Komentar Baru!</h4>
        <div id='comments-container'>Loading...</div>
        <div id="cm-close">X</div>
    </div>
</div>
<div id='show-total'></div>
<div id='cm-overlay' />
<script>
var originalTitle = document.title;
var cm_config = {
    home_page: "https://url-blog-kamu.blogspot.com",
    max_result: 20,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: "Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function (total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>' + total + '</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
</script>
<script src="https://cekidot.96.lt/file/js/notif-comments.js"></script>

Konfigurasi Widget Lanjutan

Ada beberapa hal yang harus Anda ketahui mengenai konfigurasi lanjutan widget ini:

Opsi	Keterangan
home_page	Ganti nilainya dengan URL halaman muka blog Anda
max_result	Digunakan untuk menentukan jumlah komentar yang akan ditampilkan pada widget ini
t_w	Digunakan untuk menentukan lebar avatar
t_h	Digunakan untuk menentukan tinggi avatar
summary	Digunakan untuk menentukan jumlah karakter komentar yang ditampilkan
new_tab_link	Jika bernilai `true`, seluruh tautan yang ada di dalam widget ini akan terbuka di tab/jendela baru saat diklik
interval	Lihat deskripsi di bawah
~~alert~~	??

Opsi: interval

Digunakan untuk menentukan interval penyegaran feed komentar. Menggunakan satuan milidetik. Nilai 30000 artinya bahwa feed komentar akan disegarkan selama setengah menit sekali untuk memeriksa apakah terdapat komentar baru yang masuk atau tudak. Jika terdapat komentar baru yang masuk, maka widget ini akan menampilkan pesan bahwa komentar baru telah masuk.

Sekian, semoga artikel tersebut bermanfaat bagi anda semua

Pembuatan Sortir Table pada Sitemap Blog

noreply@blogger.com (Id Tutor Plus) — Thu, 9 Oct 2014 02:49:00 +0700

Modifikasi dalam sebuah blog bisa kita terapkan dalam berbagai elemen blog, tergantung dari bagaimana kita mau memulainya. Seperti halnya ini, penerapan tabel sorter yang dilakukan merupakan modifikasi dari sebuah table sorter yang pernah Admin tuliskan sebelumnya.

Coba Sendiri

Integrasi Widget ke Blogger

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Menambahkan halaman statis baru

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<style type="text/css">
.table-sortable {
    border-collapse:collapse;
    table-layout:fixed;
    width:100%;
    font:normal normal 13px/1.4 Arial, Sans-Serif;
    color:black;
    background-color:white;
}
.table-sortable th, .table-sortable td {
    margin:0;
    padding:5px 8px;
    border:none;
    vertical-align:top;
    text-align:left;
}
.table-sortable th {
    font-weight:bold;
    background-color:slategray;
    color:white;
    border-color:white;
}
.table-sortable tbody tr:nth-child(even) {
    background-color:whitesmoke
}
.table-sortable th {
    cursor:pointer
}
th.asc, th.desc {
    background-color:lightslategray
}
th.asc:before, th.desc:before {
    content:"";
    display:block;
    float:right;
    width:0;
    height:0;
    border:.4em solid transparent;
}
th.asc:before {
    border-bottom-color:inherit;
    border-top-width:0;
    margin-top:.4em;
}
th.desc:before {
    border-top-color:inherit;
    border-bottom-width:0;
    margin-top:.5em;
}
.table-sortable a {
    color:teal;
    text-decoration:none;
    font-weight:bold;
}
.table-sortable a:hover {
    text-decoration:underline
}
</style>
<div id="toc-container">Memuat...</div>
<script>
// Original code: https://stackoverflow.com/a/14268260/1163000
// Usage: `makeSortable(elem);`
(function () {
    function sortTable(table, col, reverse) {
        var tb = table.tBodies[0], // Use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
            tr = Array.prototype.slice.call(tb.rows, 0); // Put rows into array
        reverse = -((+reverse) || -1);
        tr = tr.sort(function (a, b) { // Sort rows
            return reverse * (a.cells[col].textContent.trim().localeCompare(b.cells[col].textContent.trim()));
        });
        for (var i = 0, len = tr.length; i < len; ++i) {
            tb.appendChild(tr[i]); // Append each row in order
        }
    }

    function makeSortable(table) {
        var th = table.tHead,
            i;
        th && (th = th.rows[0]) && (th = th.cells);
        if (th) {
            i = th.length;
        } else {
            return; // If no `<thead>` then do nothing
        }
        while (--i >= 0)(function (i) {
                var dir = 1;
                th[i].onmousedown = function () {
                    for (var j = 0, jen = th.length; j < jen; ++j) {
                        th[j].className = th[j].className.replace(/(^| )desc|asc( |$)/g, "$1$2");
                    }
                    sortTable(table, i, (dir = 1 - dir));
                    this.className += dir === 1 ? " desc" : " asc";
                    return false;
                };
            }(i));
    }
    window.makeSortable = makeSortable;
})();

// Fungsi untuk membuat Tabel Konten dengan JSON Blogger

function generateTOC(json) {
    var a = json.feed.entry,
        b, c, d, e, f = '<table class="table-sortable"><thead><tr><th>Judul Posting</th><th>Tanggal Terbit</th><th>Jumlah Komentar</th></tr></thead><tbody>',
        month = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'],
        z = '',
        g = document.getElementById('toc-container');
    for (var i = 0, len = a.length; i < len; ++i) {
        for (var j = 0, jen = a[i].link.length; j < jen; ++j) {
            if (a[i].link[j].rel == "alternate") {
                b = a[i].link[j].href;
                break;
            }
        }
        for (var k = 0, ken = a[i].link.length; k < ken; ++k) {
            if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
                c = a[i].link[k].title;
                break;
            }
        }
        d = a[i].title.$t;
        e = a[i].published.$t;
        z = '<time datetime="' + e + '" title="' + e + '">' + e.substring(8, 10) + ' ' + month[parseInt(e.substring(5, 7), 10) - 1] + ' ' + e.substring(0, 4) + '</time>'
        f += '<tr><td><a href="' + b + '" title="' + d + '">' + d + '</a></td><td>' + z + '</td><td>' + c + '</td></tr>';
    }
    f += '</tbody></table>';
    g.innerHTML = f;
    // Picu fungsi `makeSortable` setelah markup HTML terinjeksi ke `#toc-container`
    makeSortable(g.children[0]);
}


// Skrip asinkron untuk memanggil feed dan memicu fungsi `generateTOC`
(function () {
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('script');
    s.src = "https://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=generateTOC";
    h.appendChild(s);
})();
</script>

Tabel Konten Blogger dengan Pilihan Sortir + Komentar

noreply@blogger.com (Id Tutor Plus) — Wed, 8 Oct 2014 22:01:00 +0700

Lagi-lagi yang dibicarakan Admin tentang pembuatan daftar isi dari sebuah blog mungkin tidak akan ada habisnya, termasuk pada tutorial ini sebagai wujud dari kreasi dari berbagai elemen kode mulai dari CSS, HTML dan jQuery bahkan PHP. Untuk itu, mari kita belajar bersama tentang kekurangan dan kelebihan yang dimiliki kita masing-masing.

Daftar isi ini juga dilengkapi dengan sortir label dan komentar, artinya dalam sitemap ini juga menunjukkan berapa komentar dalam sebuah artikel dalam sebuah blog

DEMO

Coba Sendiri

<div id="toc-container">Memuat...</div>

var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
    theOptions = "Sortir...", // Label opsi 1
    theSortPosts = "Sortir berdasarkan Abjad", // Label opsi 2
    theSortLabels = "Sortir berdasarkan Label", // Label opsi 3
    theTitles = "Judul Artikel", // Header tabel 1
    theLabels = "Label Artikel", // Header tabel 2
    theDates = "Bulan Terbit", // Header tabel 3
    theComment = "Jumlah Komentar", // Header tabel 4
    theBlankLabels = "Tak Berlabel", // Label kosong
    theSiteUrl = "https://nama_blog.blogspot.com", // URL blog kamu
    theConfig = "toc-container",
    theCmtext = "Komentar";

// Original: https://www.threelas.com
// Modified by Id Tutor Plus(https://idtutorplus.blogspot.com)


function toc_sort_table(a) {
    var post = [],
        label = [],
        timepub = [],
        skeleton = "",
        g = document.getElementById(theConfig),
        b = a.feed.openSearch$totalResults.$t;
    if (b < theTotalPosts) theTotalPosts = b - 1;
    for (var c = 0; c <= theTotalPosts; c++) {
        post[c] = a.feed.entry[c].title.$t;
        label[c] = a.feed.entry[c].category[0].term;
        timepub[c] = a.feed.entry[c].published.$t.substring(0, 10);
    }
    var d = [];
    var cmnum = [];
    for (var c = 0; c <= theTotalPosts; c++) {
        for (var e = 0; e <= a.feed.entry[c].link.length - 1; e++) {
            if (a.feed.entry[c].link[e].rel == "alternate") {
                d[c] = a.feed.entry[c].link[e].href;
                break;
            }
        }
        for (var l = 0; l <= a.feed.entry[c].link.length - 1; l++) {
            if (a.feed.entry[c].link[l].rel == "replies" && a.feed.entry[c].link[l].type == "text/html") {
                cmnum[c] = a.feed.entry[c].link[l].title.split(" ")[0];
                break;
            }
        }
    }
    
    skeleton = '<select id="tocSort" onchange="displayMessage(this.options[this.selectedIndex].value);"><option value="0">' + theOptions + '</option><option value="0">' + theSortPosts + '</option><option value="1">' + theSortLabels + '</option></select>';
    skeleton += '<table border="1" id="tocTable"><thead><tr><th id="th-1">' + theTitles + '</th><th id="th-2">' + theLabels + '<th id="th-3">' + theDates + '</th><th id="th-4">' + theComment + '</th>';
    skeleton += '</tr></thead>';
    skeleton += '<tbody id="toc-09957862729274943614">'; // Unique ID doh...
    for (var c = 0; c <= theTotalPosts; c++) {
        if (a.feed.entry[c].category.length >= 1) {
            for (var e = 0; e <= a.feed.entry[c].category.length - 1; e++) {
                skeleton += '<tr>';
                skeleton += '<td class="toc-header-col-1">' + '<a href="' + d[c] + '" target="_blank">' + post[c] + "</a>" + '</td>';
                skeleton += '<td class="toc-header-col-2">' + '<a href="' + theSiteUrl + "/search/label/" + a.feed.entry[c].category[e].term + '" target="_blank">' + a.feed.entry[c].category[e].term + "</a>" + '</td>';
                skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
                skeleton += '<td class="toc-header-col-4">' + cmnum[c] + ' ' + theCmtext + '</td>';
                skeleton += '</tr>';
            }
        } else {
            skeleton += '<tr>';
            skeleton += '<td class="toc-header-col-1">' + '<a href="' + d + '" target="_blank">' + post[c] + "</a>" + '</td>';
            skeleton += '<td class="toc-header-col-2">' + theBlankLabels + '</td>';
            skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
            skeleton += '<td class="toc-header-col-4">' + cmnum[c] + ' ' + theCmtext + '</td>';
            skeleton += '</tr>';
        }
    }
    skeleton += '</tbody>';
    skeleton += '</table><div style="text-align:right;"><a href="https://idtutorplus.blogspot.com" target="_blank" style="font:normal bold 8px/normal Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.2);" title="Id Tutor Plus">ITP +]</a></div>';
    g.innerHTML = skeleton;
}



function getTextValue(a) {
    var b, c = "";
    for (b = 0; b < a.childNodes.length; b++) {
        if (a.childNodes[b].nodeType == document.TEXT_NODE) {
            c += a.childNodes[b].nodeValue;
        } else if (a.childNodes[b].nodeType == document.ELEMENT_NODE && a.childNodes[b].tagName == "BR") {
            c += " ";
        } else {
            c += getTextValue(a.childNodes[b]);
        }
    }
    return normalizeString(c);
}

function normalizeString(a) {
    var whtSpEnds = new RegExp("^\\s*|\\s*$", "g"),
        whtSpMult = new RegExp("\\s\\s+", "g");
    a = a.replace(whtSpMult, " ").replace(whtSpEnds, "");
    return a;
}

function compareValues(a, b) {
    var c = parseFloat(a),
        d = parseFloat(b);
    if (!isNaN(c) && !isNaN(d)) {
        a = c;
        b = d;
    }
    if (a == b) return 0;
    if (a > b) return 1;
    return -1;
}

function displayMessage(a) {
    var b = document.getElementById("toc-3244596497908171083");
    if (b.reverseSort == null) b.reverseSort = [];
    if (a == b.lastColumn) b.reverseSort[a] = !b.reverseSort[a];
    b.lastColumn = a;
    var c = b.style.display;
    b.style.display = "none";
    var d, e, f, g, h, i, j;
    for (e = 0; e < b.rows.length - 1; e++) {
        h = e;
        g = getTextValue(b.rows[e].cells[a]);
        for (f = e + 1; f < b.rows.length; f++) {
            i = getTextValue(b.rows[f].cells[a]);
            j = compareValues(g, i);
            if (b.reverseSort[a]) j = -j;
            if (j > 0) {
                h = f;
                g = i;
            }
        }
        if (h > e) {
            d = b.removeChild(b.rows[h]);
            b.insertBefore(d, b.rows[e]);
        }
    }
    b.style.display = c;
    return false;
}

if (document.ELEMENT_NODE == null) {
    document.ELEMENT_NODE = 1;
    document.TEXT_NODE = 3;
}

(function () {
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('script');
    s.src = "" + theSiteUrl.replace(/\/$/, "") + "/feeds/posts/summary?max-results=" + theTotalPosts + "&alt=json-in-script&orderby=published&callback=toc_sort_table";
    h.appendChild(s);
})();

#tocTable {
  border:2px solid white;
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
  margin:0 auto 5px;
}
#tocTable th,
#tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
  width:55%;
  background-color:#5A930D;
}
#th-2,#th-3,#th-4 {width:15%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
  padding:0 !important;
  background-color:#2372A7;
}
#tocTable td.toc-header-col-3,#tocTable td.toc-header-col-4 {background-color:#D7DEF0}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
  display:block;
  width:220px;
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  cursor:pointer;
  border:none;
  outline:none;
  background-color:#eee;
  margin:0px auto 5px;
  padding:5px;
}


#tocTable {
  border:2px solid white;
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
  margin:0 auto 5px;
}
#tocTable th,
#tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
  width:55%;
  background-color:#5A930D;
}
#th-2,#th-3,#th-4 {width:15%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
  padding:0 !important;
  background-color:#2372A7;
}
#tocTable td.toc-header-col-3,#tocTable td.toc-header-col-4 {background-color:#D7DEF0}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
  display:block;
  width:220px;
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  cursor:pointer;
  border:none;
  outline:none;
  background-color:#eee;
  margin:0px auto 5px;
  padding:5px;
}

Membuat Sitemap (Daftar Isi) Sortir Perlabel

noreply@blogger.com (Id Tutor Plus) — Wed, 8 Oct 2014 21:39:00 +0700

Penerapan sitemap atau yang lebih dikenal dengan daftar isi ini dilengkapi dengan media sortir perlabel dari blog yang Anda miliki. Ini merupakan tingkat lanjut dari tutorial sebelumnya yang bisa Anda kunjungi /2014/08/javascript-table-sorter.html sebagai media sortir tabel yang diterapkan melalu implementasi tabel.

Coba Sendiri

#tocTable {
  border:2px solid white;
  font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  border-collapse:collapse;
  text-align:left;
  margin:0 auto 5px;
}
#tocTable th,
#tocTable td {
  border:1px solid white;
  background-color:#fafafa;
  padding:10px 15px;
}
#tocTable th {
  background-color:#5d5d5d;
  font-weight:bold;
  color:white;
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
  width:55%;
  background-color:#5A930D;
}
#th-2,#th-3,#th-4 {width:15%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
  padding:0 !important;
  background-color:#2372A7;
}
#tocTable td.toc-header-col-3,#tocTable td.toc-header-col-4 {background-color:#D7DEF0}
#tocTable a {
  display:block;
  text-decoration:none;
  color:white;
  padding:10px 15px;
  background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
  background-color:#174B6F;
  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
  box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
  display:block;
  width:220px;
  font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
  color:#333;
  cursor:pointer;
  border:none;
  outline:none;
  background-color:#eee;
  margin:0 auto 5px;
  padding:5px;
}

var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
    theOptions = "Sortir...", // Label opsi 1
    theSortPosts = "Sortir berdasarkan Abjad", // Label opsi 2
    theSortLabels = "Sortir berdasarkan Label", // Label opsi 3
    theTitles = "Judul Artikel", // Header tabel 1
    theLabels = "Label Artikel", // Header tabel 2
    theDates = "Bulan Terbit", // Header tabel 3
    theBlankLabels = "Tak Berlabel", // Label kosong
    theSiteUrl = "https://nama_blog.blogspot.com", // URL blog kamu
    theConfig = "toc-container";

// Original: https://www.threelas.com
// Modified by Id Tutor Plus(https://idtutorplus.blogspot.com)


function toc_sort_table(a) {
    var post = [],
        label = [],
        timepub = [],
        skeleton = "",
        g = document.getElementById(theConfig),
        b = a.feed.openSearch$totalResults.$t;
    if (b < theTotalPosts) theTotalPosts = b - 1;
    for (var c = 0; c <= theTotalPosts; c++) {
        post[c] = a.feed.entry[c].title.$t;
        label[c] = a.feed.entry[c].category[0].term;
        timepub[c] = a.feed.entry[c].published.$t.substring(0, 10);
    }
    var d = [];
    for (var c = 0; c <= theTotalPosts; c++) {
        for (var e = 0; e <= a.feed.entry[c].link.length - 1; e++) {
            if (a.feed.entry[c].link[e].rel == "alternate") {
                d[c] = a.feed.entry[c].link[e].href;
                break;
            }
        }
    }
    skeleton = '<select id="tocSort" onchange="displayMessage(this.options[this.selectedIndex].value);"><option value="0">' + theOptions + '</option><option value="0">' + theSortPosts + '</option><option value="1">' + theSortLabels + '</option></select>';
    skeleton += '<table border="1" id="tocTable"><thead><tr><th id="th-1">' + theTitles + '</th><th id="th-2">' + theLabels + '<th id="th-3">' + theDates + '</th>';
    skeleton += '</tr></thead>';
    skeleton += '<tbody id="toc-3244596497908171083">'; // Unique ID doh...
    for (var c = 0; c <= theTotalPosts; c++) {
        if (a.feed.entry[c].category.length >= 1) {
            for (var e = 0; e <= a.feed.entry[c].category.length - 1; e++) {
                skeleton += '<tr>';
                skeleton += '<td class="toc-header-col-1">' + '<a href="' + d[c] + '" target="_blank">' + post[c] + "</a>" + '</td>';
                skeleton += '<td class="toc-header-col-2">' + '<a href="' + theSiteUrl + "/search/label/" + a.feed.entry[c].category[e].term + '" target="_blank">' + a.feed.entry[c].category[e].term + "</a>" + '</td>';
                skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
                skeleton += '</tr>';
            }
        } else {
            skeleton += '<tr>';
            skeleton += '<td class="toc-header-col-1">' + '<a href="' + d + '" target="_blank">' + post[c] + "</a>" + '</td>';
            skeleton += '<td class="toc-header-col-2">' + theBlankLabels + '</td>';
            skeleton += '<td class="toc-header-col-3">' + timepub[c] + '</td>';
            skeleton += '</tr>';
        }
    }
    skeleton += '</tbody>';
    skeleton += '</table><div style="text-align:right;"><a href="https://idtutorplus.blogspot.com" target="_blank" style="font:normal bold 8px/normal Arial,Sans-Serif;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.2);" title="Id Tutor Plus">ITP +]</a></div>';
    g.innerHTML = skeleton;
}



function getTextValue(a) {
    var b, c = "";
    for (b = 0; b < a.childNodes.length; b++) {
        if (a.childNodes[b].nodeType == document.TEXT_NODE) {
            c += a.childNodes[b].nodeValue;
        } else if (a.childNodes[b].nodeType == document.ELEMENT_NODE && a.childNodes[b].tagName == "BR") {
            c += " ";
        } else {
            c += getTextValue(a.childNodes[b]);
        }
    }
    return normalizeString(c);
}

function normalizeString(a) {
    var whtSpEnds = new RegExp("^\\s*|\\s*$", "g"),
        whtSpMult = new RegExp("\\s\\s+", "g");
    a = a.replace(whtSpMult, " ").replace(whtSpEnds, "");
    return a;
}

function compareValues(a, b) {
    var c = parseFloat(a),
        d = parseFloat(b);
    if (!isNaN(c) && !isNaN(d)) {
        a = c;
        b = d;
    }
    if (a == b) return 0;
    if (a > b) return 1;
    return -1;
}

function displayMessage(a) {
    var b = document.getElementById("toc-903298438493857447454");
    if (b.reverseSort == null) b.reverseSort = [];
    if (a == b.lastColumn) b.reverseSort[a] = !b.reverseSort[a];
    b.lastColumn = a;
    var c = b.style.display;
    b.style.display = "none";
    var d, e, f, g, h, i, j;
    for (e = 0; e < b.rows.length - 1; e++) {
        h = e;
        g = getTextValue(b.rows[e].cells[a]);
        for (f = e + 1; f < b.rows.length; f++) {
            i = getTextValue(b.rows[f].cells[a]);
            j = compareValues(g, i);
            if (b.reverseSort[a]) j = -j;
            if (j > 0) {
                h = f;
                g = i;
            }
        }
        if (h > e) {
            d = b.removeChild(b.rows[h]);
            b.insertBefore(d, b.rows[e]);
        }
    }
    b.style.display = c;
    return false;
}

if (document.ELEMENT_NODE == null) {
    document.ELEMENT_NODE = 1;
    document.TEXT_NODE = 3;
}

(function () {
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('script');
    s.src = "" + theSiteUrl.replace(/\/$/, "") + "/feeds/posts/summary?max-results=" + theTotalPosts + "&alt=json-in-script&orderby=published&callback=toc_sort_table";
    h.appendChild(s);
})();

<div id="toc-container">Memuat...</div>

Daftar Isi Tabulasi untuk Blog

noreply@blogger.com (Id Tutor Plus) — Wed, 8 Oct 2014 02:22:00 +0700

Berikut ini adalah sebuah widget daftar isi blog berbentuk tabulasi. Terdiri dari dua sisi berupa daftar kategori dan daftar posting. Setiap nama kategori akan menjadi tab, sedangkan daftar posting akan menjadi konten tab yang akan muncul setiap kali tab diklik:

Integrasi Widget ke Blogger

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Menambahkan halaman statis baru

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<style type="text/css">
#tabbed-toc {
  margin:5px auto 0;
  background-color:#292929;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  overflow:hidden;
  position:relative;
  color:#888;
}
#tabbed-toc .loading {margin:20px 47%;}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#ccc;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 10px;
  margin:0 5px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#222;
  color:white;
  padding:0 20px;
  margin:0 -5px;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#3c3c3c;
  color:#C4DEF0;
  font-size:13px;
  font-weight:bold;
  border-top:1px solid #444;
  border-bottom:1px solid #444;
  border-right:1px solid #222;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  padding:0 15px;
  margin:-1px -1px 0 0;
}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:#333;
  border-left:1px solid #222;
  border-right:1px solid #444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px/normal Helmet,Freesans,Sans-Serif;
  border-bottom:1px solid #444;
}
#tabbed-toc .panel li a.item-title {
  display:block;
  position:relative;
  font-weight:normal;
  font-size:13px;
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  line-height:28px;
  height:28px;
  padding:0 12px;
  text-transform:uppercase;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li.bold time {float:left;}
#tabbed-toc .panel li .summary {
  display:block;
  height:50px;
  padding:10px 12px 10px;
  font-style:italic;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #3c3c3c;
  background-color:#292929;
}
#tabbed-toc .panel li.bold {
  float:left;
  width:50%;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus {
  color:#999;
  outline:none;
  background-color:#3c3c3c;
  border-left:4px solid #066696;
}
#tabbed-toc .panel li.bold a.item-title:hover {
  background-color:#3c3c3c;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}
#tabbed-toc .panel li .itemfoot {
  clear:both;
  padding:5px 10px;
  color:#666;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
  position:relative;
}
#tabbed-toc .panel li .itemfoot a.itemrmore {
  font-weight:bold;
  color:#3B5998;
  text-decoration:none;
  position:absolute;
  top:5px;
  right:10px;
}
#tabbed-toc .panel li .itemfoot a.itemrmore:hover {
  color:#555;
  background-color:transparent;
  text-decoration:none;
  border-color:transparent;
}
</style>
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "https://nama_blog.blogspot.com",
    containerId: "tabbed-toc",
    activeTab: 1,
    showDates: false,
    showSummaries: false,
    numChars: 50,
    showThumbnails: false,
    thumbSize: 40,
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    monthNames: ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"],
    newTabLink: true,
    maxResults: 99999,
    preload: 0,
    sortAlphabetically: true,
    showNew: 7,
    rmoreText: "Selengkapnya &#9658;",
    newText: " - <em style='color:red;'>New!</em>"
};
</script>
<script src="https://cekidot.96.lt/file/js/toc.v1.js"></script>

Ganti URL yang Saya beri tanda dengan alamat blog Anda kemudian klik Publikasikan.

Lebih Lanjut

Pengaturan Lanjutan

Opsi	Keterangan
blogUrl	Ganti nilainya dengan alamat blog Anda.
containerId	ID elemen yang akan digunakan sebagai penampung JSON yang sudah diproses (abaikan jika tidak perlu).
activeTab	Digunakan untuk menentukan nomor urut tab yang aktif (nilai `1` akan membuat tab di urutan pertama menjadi aktif, begitu pula konten tab pertama juga akan terbuka saat pertama kali halaman diakses).
showDates	Ganti nilainya menjadi `true` untuk menampilkan waktu terbit posting.
showSummaries	Ganti nilainya menjadi `true` untuk menampilkan ringkasan posting.
showThumbnails	Ganti nilainya menjadi `true` untuk menampilkan thumbnail posting.
thumbSize	Digunakan untuk menentukan ukuran thumbnail.
noThumb	URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
monthNames	Digunakan untuk menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara tempat Anda tinggal.
newTabLink	Jika bernilai `true`, semua tautan akan membuka di tab/jendela baru saat diklik.
maxResults	Jumlah maksimal posting yang akan ditampilkan.
preload	Digunakan untuk menentukan waktu penundaan pemuatan JSON. Gunakan satuan milidetik atau cukup tuliskan `"onload"` agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.
sortAlphabetically	`false` untuk menyortir posting secara normal berdasarkan bulan terbit, `true` untuk menyortir posting berdasarkan alfabet.
showNew	`false` untuk menyembunyikan tanda New!. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!.
rmoreText	`Selengkapnya ►` text yang digunakan untuk menyatakan baca selengkapnya atau read more, anda dapat merubah textnya sesuka anda.
newText	Markup HTML bebas untuk membuat label New! pada posting-posting terbaru.

Fly Eye with CSS Animasi @Keyframes

noreply@blogger.com (Id Tutor Plus) — Tue, 23 Sep 2014 08:46:00 +0700

ber-Eksperimen Fly Eye with CSS Animasi @Keyframes

Seperti yang pernah dituliskan sebelumnya, pembuatan animasi melalui penerapan @Keyframes bisa Anda modifikasi berbagai arah, kekanan, kekiri, keatas, dan kebawah bahkan berputar sesuai dengan yang diinginkan oleh Anda. Contoh jelas yang Admin terapkan dalam blog ini pembuatan Fly Eye hanya menggunakan CSS @Keyframes yang di eksperimen berbagai arah.

Sebelum Anda mencobanya silakan kunjungi dulu halaman /2012/06/belajar-css-animasi-keyframes.html ini untuk lebih jelasnya.

●

Beda dengan sebelumnya, sample yang Admin berika ini sudah menggunakan efek :hover ketika disentuh oleh mouse.

.fly-eye {
  background-color:#e69138;
  background:-webkit-radial-gradient(ellipse at center,rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
  background:-moz-radial-gradient(ellipse at center,rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
  background:-ms-radial-gradient(ellipse at center,rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
  background:radial-gradient(ellipse at center,rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
  border-radius:100%;
  box-shadow:0 0 0 0.2em #555,0 0 0.1em 0.55em #555,inset 0 0.2em 0 0 #555;
  color:rgba( 40,40,40,0.8);
  line-height:1.1em;
  padding-left:0.18em;
  cursor:crosshair;
  position:relative;
  margin:20px auto 0;
  width:1em;
  height:1em;
  -webkit-transform-origin:center;
  -moz-transform-origin:center;
  -ms-transform-origin:center;
  transform-origin:center;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-transition:all 0.8s ease-in-out;
  -moz-transition:all 0.8s ease-in-out;
  transition:all 0.8s ease-in-out;
  -webkit-animation:eye 2.2s ease-in-out infinite,body 1.15s 1.8s linear infinite;
  -moz-animation:eye 2.2s ease-in-out infinite,body 1.15s 1.8s linear infinite;
  -ms-animation:eye 2.2s ease-in-out infinite,body 1.15s 1.8s linear infinite;
  animation:eye 2.2s ease-in-out infinite,body 1.15s 1.8s linear infinite;
}

.fly-eye:hover {
  -webkit-transform:scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
  -moz-transform:scaleY(0.9) scaleX(0.95) translateZ(0);
  -ms-transform:scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
  transform:scaleY(0.9) scaleX(0.95) translateZ(0);
}

.fly-eye:before,
.fly-eye:after {
  background:rgba(0,0,0,0);
  border-radius:100%;
  content:"";
  display:none;
  position:absolute;
  width:1em;
  height:0.1em;
  -webkit-filter:blur(1px);
  -webkit-transition:all 0.2s;
  -moz-transition:all 0.2s;
  transition:all 0.2s;
  -webkit-animation-duration:0.2s;
  -moz-animation-duration:0.2s;
  -ms-animation-duration:0.2s;
  animation-duration:0.2s;
  -webkit-animation-iteration-count:infinite;
  -moz-animation-iteration-count:infinite;
  -ms-animation-iteration-count:infinite;
  animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease-in-out;
  -moz-animation-timing-function:ease-in-out;
  -ms-animation-timing-function:ease-in-out;
  animation-timing-function:ease-in-out;
}

.fly-eye:before {
  top:25%;
  left:1.45em;
  margin-left:-1em;
  -webkit-transform-origin:left;
  -moz-transform-origin:left;
  -ms-transform-origin:left;
  transform-origin:left;
  -webkit-transform:rotate(-60deg);
  -moz-transform:rotate(-60deg);
  -ms-transform:rotate(-60deg);
  transform:rotate(-60deg);
  -webkit-animation-name:wings;
  -moz-animation-name:wings;
  -ms-animation-name:wings;
  animation-name:wings;
}

.fly-eye:after {
  top:25%;
  left:-2.2em;
  margin-left:1em;
  -webkit-transform-origin:right;
  -moz-transform-origin:right;
  -ms-transform-origin:right;
  transform-origin:right;
  -webkit-transform:rotate(60deg);
  -moz-transform:rotate(60deg);
  -ms-transform:rotate(60deg);
  transform:rotate(60deg);
  -webkit-animation-name:wings2;
  -moz-animation-name:wings2;
  -ms-animation-name:wings2;
  animation-name:wings2;
}

.fly-eye:hover:before,
.fly-eye:hover:after {
  background:#398080;
  display:block;
  margin-left:0;
  width:2em;
  height:0.3em;
}

@-webkit-keyframes updown {
  0% {
    top:0;
  }
  100% {
    top:-5px;
  }
}

@-moz-keyframes updown {
  0% {
    top:0;
  }
  100% {
    top:-5px;
  }
}

@-ms-keyframes updown {
  0% {
    top:0;
  }
  100% {
    top:-5px;
  }
}

@-o-keyframes updown {
  0% {
    top:0;
  }
  100% {
    top:-5px;
  }
}

@keyframes updown {
  0% {
    top:0;
  }
  100% {
    top:-5px;
  }
}

@-webkit-keyframes eye {
  5%,
  10% {
    line-height:1.2em;
    padding-left:0;
  }
  15%,
  20% {
    line-height:1.15em;
    padding-left:0.4em;
  }
  25% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 1em 0 0 #398080;
  }
  23%,
  27% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 0.2em 0 0 #398080;
  }
}

@-moz-keyframes eye {
  5%,
  10% {
    line-height:1.2em;
    padding-left:0;
  }
  15%,
  20% {
    line-height:1.15em;
    padding-left:0.4em;
  }
  25% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 1em 0 0 #398080;
  }
  23%,
  27% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 0.2em 0 0 #398080;
  }
}

@-ms-keyframes eye {
  5%,
  10% {
    line-height:1.2em;
    padding-left:0;
  }
  15%,
  20% {
    line-height:1.15em;
    padding-left:0.4em;
  }
  25% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 1em 0 0 #398080;
  }
  23%,
  27% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 0.2em 0 0 #398080;
  }
}

@keyframes eye {
  5%,
  10% {
    line-height:1.2em;
    padding-left:0;
  }
  15%,
  20% {
    line-height:1.15em;
    padding-left:0.4em;
  }
  25% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 1em 0 0 rgb(136,79,139);
  }
  23%,
  27% {
    box-shadow:0 0 0 0.2em #398080,0 0 0.1em 0.55em #398080,inset 0 0.2em 0 0 rgb(136,79,139);
  }
}

@-webkit-keyframes body {
  50% {
    width:1.4em;
    height:1.4em;
  }
}

@-moz-keyframes body {
  50% {
    width:1.4em;
    height:1.4em;
  }
}

@-ms-keyframes body {
  50% {
    width:1.4em;
    height:1.4em;
  }
}

@keyframes body {
  50% {
    width:1.4em;
    height:1.4em;
  }
}

@-webkit-keyframes wings {
  50% {
    -webkit-transform:rotate(65deg);
    -moz-transform:rotate(65deg);
    -ms-transform:rotate(65deg);
    transform:rotate(65deg);
  }
}

@-moz-keyframes wings {
  50% {
    -webkit-transform:rotate(65deg);
    -moz-transform:rotate(65deg);
    -ms-transform:rotate(65deg);
    transform:rotate(65deg);
  }
}

@-ms-keyframes wings {
  50% {
    -webkit-transform:rotate(65deg);
    -moz-transform:rotate(65deg);
    -ms-transform:rotate(65deg);
    transform:rotate(65deg);
  }
}

@keyframes wings {
  50% {
    -webkit-transform:rotate(65deg);
    -moz-transform:rotate(65deg);
    -ms-transform:rotate(65deg);
    transform:rotate(65deg);
  }
}

@-webkit-keyframes wings2 {
  50% {
    -webkit-transform:rotate(-65deg);
    -moz-transform:rotate(-65deg);
    -ms-transform:rotate(-65deg);
    transform:rotate(-65deg);
  }
}

@-moz-keyframes wings2 {
  50% {
    -webkit-transform:rotate(-65deg);
    -moz-transform:rotate(-65deg);
    -ms-transform:rotate(-65deg);
    transform:rotate(-65deg);
  }
}

@-ms-keyframes wings2 {
  50% {
    -webkit-transform:rotate(-65deg);
    -moz-transform:rotate(-65deg);
    -ms-transform:rotate(-65deg);
    transform:rotate(-65deg);
  }
}

@keyframes wings2 {
  50% {
    -webkit-transform:rotate(-65deg);
    -moz-transform:rotate(-65deg);
    -ms-transform:rotate(-65deg);
    transform:rotate(-65deg);
  }
}

<div class="fly-eye">&#9679;</div>

Coba sendiri

Id Tutor Plus

Menghapus Permalink (Bulan, Tahun dan HTML) di URL Blogspot

GitHub Sebagai Media Penyimpanan Project Eksternal

Membuat Repositori untuk Pertama Kali

Mengaktifkan Fitur Halaman GitHub

Memaksimalkan Performa

Yang Harus Diperhatikan

Download Template Mirip Liputan 6 (Themes Liputan 9)

Fitur Unggulan: Themes Liputan 9

Setting: Themes Liputan 9

Daftar Salinan Berkas di Id Tutor Plus

File JavaScript

Membuat MagicLine Navigation Menu Dengan jQuery

Perfect Plugin Scrollbar

Scrollbar dengan Perfect-scrollbar Plugin

Contoh penggunaan:

Penghitung Klik pada Link Download / Demo

Penerapannya

Widget Daftar Pembaharuan Posting

Penerapan Blog Widget

Kumpulan Link Plugins JQuery

Form Validation

File upload

Form – Select Box stuff

Form Basics, Input Fields, Checkboxes etc.

Time, Date and Color Picker

Rating Plugins

Search Plugins

Inline Edit & Editors

Audio, Video, Flash, SVG, etc

Photos/Images/Galleries

Google Map

Games

Tables, Grids etc.

Charts, Presentation etc.

Border, Corners, Background

Text and Links

Tooltips

Menus, Navigations

Accordions, Slide and Toggle stuff

Drag and Drop

XML XSL JSON Feeds

Browserstuff

Alert, Prompt, Confirm Windows

CSS

DOM, Ajax and other jQuery plugins

Recent Post dengan Thumbnail dan Tooltip

Penerapannya

Halaman Error Page 403 Responsive

Penerapannya

XHTML Blogger - Elemen Halaman: Seksi dan Widget

XHTML Blogger - Share Buttons

Dalam Konsep

XHTML Blogger - Seksi Posting

Konten Halaman:

Prolog:

Judul Posting

Tubuh/Konten Posting

Footer/Catatan Kaki Posting

Jump Link/Read More Link

XHTML Blogger - Item Kontrol

Tombol Edit Cepat Posting

Tombol Edit Cepat Widget

Tombol Penghapusan Komentar

XHTML Blogger - Loop Label Posting

Membuat Daftar Member Aktif / Komentator Aktif

XHTML Blogger - Navigasi Halaman/Blog Pager

XHTML Blogger - Widget Label

Judul Widget

Kondisional Tipe Widget

Markup Widget Bertipe List

Markup Widget Bertipe Cloud

Ikon Pengeditan Cepat

Contoh Markup Widget Label Hasil Modifikasi

Notifikasi Komentar Pada Blog

Lansung saja pada cara pemasangannya

Konfigurasi Widget Lanjutan

Opsi: interval

Pembuatan Sortir Table pada Sitemap Blog

Integrasi Widget ke Blogger