Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.
Wednesday, March 28, 2012
Membuat Halaman Muka Blog Tersendiri (Tanpa Posting)
Sebuah impian mungkin, bagi kalian untuk memiliki halaman muka blog tersendiri yang terbebas dari daftar posting yang telah diterbitkan. Dulu Saya juga begitu, sampai Saya mempelajari tag kondisionalBlogger lebih jauh. Kali ini Saya akan membagikannya kepada kalian tentang bagaimana cara menghilangkan semua posting dan menambahkan pesan selamat datang di halaman muka. Yang kita butuhkan pada dasarnya hanya satu jenis tag kondisional, yaitu tag kondisional halaman muka seperti ini:
Seperti yang kalian lihat bahwa apa yang kalian lakukan sebenarnya hanyalah menggandakan elemen <b:section> dimana salah satu hanya akan tampil di halaman muka, sedangkan satunya lagi hanya akan tampil selain di halaman muka.
Klik Simpan Tema. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:
Widget posting akan menghilang, dan sebuah elemen untuk menambahkan widget baru akan tampil seperti halnya pada sidebar blog.
Dari elemen itu Anda bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka. Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.
Catatan: Menerapkan manipulasi ini akan membuat fitur pratinjau pada editor posting tidak berfungsi. Sebenarnya bukannya tidak berfungsi, hanya saja saat Anda mengeklik tombol Pratinjau, yang akan Anda lihat selalu berupa widget yang Anda tambahkan, sedangkan posting yang seharusnya ingin Anda lihat tidak akan tampil.
Penanganan JavaScript pada Peramban yang Menonaktifkan JavaScript
Ini adalah tentang bagaimana cara kita menangani masalah-masalah umum yang akan timbul pada situs-situs yang membutuhkan pengaktifan JavaScript. Katakanlah kita memiliki sebuah menu navigasi bertingkat dengan efek JavaScript. Namun biasanya syarat yang harus kita penuhi agar efek animasi berjalan dengan baik adalah dengan menghilangkan setiap item yang akan ditampilkan/disembunyikan dengan efek JavaScript:
nav ul ul {
display:none;
}
Anda bisa mempelajari maksud dari kode di atas pada artikel ini.
Tidak masalah (bahkan sebuah keharusan) jika kita menghilangkan elemen dengan deklarasi display:none karena JavaScript selalu bisa menampilkannya dengan efek yang baik. Tapi bagaimana jika JavaScript dinonaktifkan?
Menonaktifkan JavaScript
Kita tidak membicarakan tentang mengapa mereka melakukan itu, tapi katakanlah jika itu dilakukan, apa yang akan terjadi?
Yang terjadi adalah sub-sub menu navigasi yang seharusnya muncul saat induk menu disorot akan mati karena tidak ada mesin yang bisa membuat mereka muncul kecuali JavaScript. Dan sekarang JavaScript telah dinonaktifkan.
Hal yang biasanya kita lakukan adalah menuliskan sebuah pesan yang akan muncul hanya jika JavaScript dinonaktifkan. Itu bisa dilakukan dengan <noscript>:
<noscript>
<div id="js-message">Anda harus mengaktifkan JavaScript untuk melihat halaman ini!</div>
</noscript>
Dan mungkin sedikit kode CSS untuk membuatnya tampak sebagai tabir yang akan menutupi seluruh layar:
Tapi Saya rasa cara itu tidak sepenuhnya keren jika setiap kali kita menonaktifkan JavaScript, sebuah tabir/overlay besar akan muncul menutupi seluruh layar. Kita harap kita bisa memberikan fallback yang baik tanpa harus menghilangkan apa yang seharusnya bisa kita lihat. Kita mencoba untuk melihat kepada CSS.
Kita harap, jika JavaScript dinonaktifkan, maka CSS bisa menggantikannya untuk menampilkan/menyembunyikan elemen dengan baik, meski dengan efek yang sangat terbatas.
Berikut ini adalah sebuah kerangka menu navigasi bertingkat sederhana. Terdiri dari empat menu utama dan dua level submenu:
Seperti yang Anda lihat bahwa Saya menambahkan kelas/classfallback pada masing-masing anak menu (tidak harus bernama fallback. Itu hanya contoh).
Kelas tersebut akan kita gunakan pada kode CSS hanya jika JavaScript dinonaktifkan. Dalam artian: Kita akan menghilangkan kelas tersebut dengan JavaScript saat JavaScript diakifkan. Dan ini bisa dilakukan dengan cara yang sangat sederhana:
$('nav ul.fallback').removeClass('fallback');
Pada dasarnya inilah yang akan kita lakukan: Saat JavaScript dinonaktifkan, kita harap kita bisa mengakses elemen yang menghilang untuk ditampilkan dan disembunyikan dengan CSS tanpa harus mengganggu animasi JavaScript saat JavaScript diaktifkan. Itu bisa dilakukan dengan cara bergiliran. Saat JavaScript diaktifkan, kita harap kita bisa memberikan efek animasi yang baik saat sub-sub menu ditampilkan dan disembunyikan:
Namun saat JavaScript dinonaktifkan, kita tetap bisa memastikan bahwa sub-sub menu tersebut bisa tampil dan hilang dengan baik:
nav li ul {
display:none;
}
nav li:hover > ul.fallback {
display:block;
}
Gambaran Selengkapnya
Ini adalah gambaran selengkapnya. Saat JavaScript diaktifkan, maka kita akan menghilangkan kelas fallback pada semua elemen <ul>:
$('nav ul.fallback').removeClass('fallback');
Dengan begitu kode CSS pada bagian ini tidak akan bisa menampilkan dan menyembunyikan sub-sub menu, karena kelas fallback pada elemen submenu sudah menghilang:
nav li ul {
/* ... */
display:none;
}
nav li:hover > ul.fallback {
display:block; /* Ini sudah tidak berlaku lagi, karena class="fallback" telah dihilangkan */
}
Namun itu tidak mengapa, karena saat ini JavaScript sedang diaktifkan, maka efek animasi JavaScript bisa kita dijalankan:
Dan saat JavaScript dinonaktifkan, maka fungsi-fungsi animasi dalam JavaScript tidak akan bekerja. Diutamakan pada bagian ini, sebagai perhatian utama kita:
$('nav ul.fallback').removeClass('fallback');
Oleh karena itu kelas fallback akan tetap berada pada tempatnya. Sehingga kode CSS pada bagian ini akan bekerja:
nav li:hover > ul.fallback {
display:block;
}
Coba Anda buka halaman ini kemudian perhatikan bahwa saat ini efek animasi .slideDown() dan .slideUp() masih bisa bekerja. Setelah itu nonaktifkan JavaScript pada peramban Anda dan segarkan halaman tersebut. Anda akan melihat bahwa sub-sub menu masih bisa ditampilkan dan disembunyikan meski dengan efek yang sangat terbatas:
nav {
font:bold 12px Arial,Sans-Serif;
background-color:black;
margin:0px 0px;
padding:0px 0px;
}
nav ul {
margin:0px 0px;
padding:0px 0px;
display:block;
position:relative;
height:30px;
}
nav li {
margin:0px 0px;
padding:0px 0px;
float:left;
display:inline;
list-style:none;
position:relative;
}
nav li a {
display:block;
margin:0px 0px;
padding:0px 14px;
color:white;
text-decoration:none;
line-height:30px;
height:30px;
}
nav a:hover {
background-color:#456;
}
nav ul ul {
width:120px;
height:auto;
position:absolute;
top:100%;
left:0px;
z-ndex:10;
background-color:black;
display:none;
}
nav ul ul li {
float:none;
display:block;
}
nav ul ul ul {
top:0px;
left:100%;
}
/* CSS Fallback */
nav li:hover > ul.fallback {
display:block;
}
jQuery
$(function() {
// Singkirkan class "fallback" pada anak <ul>
// sehingga kode nav li:hover > ul.fallback {display:block;} tidak akan bekerja.
$('ul.fallback').removeClass('fallback');
// Lakukan seperti biasa mulai dari sini...
$('nav#nav li').hover(function() {
$(this).children('ul').slideDown('fast');
}, function() {
$(this).children('ul').slideUp('fast');
});
});
Lainnya
Selain itu, beberapa elemen seperti panel juga lebih banyak mengutamakan .hide() atau .css('display', 'none') untuk menyembunyikannya dibandingkan dengan menuliskan display:none secara langsung dengan CSS. Ini akan membuat panel tertutup saat JavaScript diaktifkan dan bisa terbuka saat sebuah pemicu (misalnya tombol) diklik. Tapi saat JavaScript dinonaktifkan, tombol-tombol tersebut tidak lagi berfungsi untuk membuka/menutup panel, sementara panel yang tadinya tertutup kini akan tetap terbuka. Kelihatannya memang jelek, tapi setidaknya kita masih tetap bisa melihat isinya.
Masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan. Cek Expand Tema Widget agar seluruh elemen pembangun posting tampil:
Mengedit HTML
Temukan kode apa saja yang tampak kurang lebih seperti ini (fokuslah pada atribut expr:href, beberapa atribut lain mungkin juga ditemukan di dalam tag yang sama misalnya expr:dir):
<a expr:href='data:label.url'>
TIP: Tekan CTRL + F kemudian ketik expr:href='data:label.url untuk mempermudah pencarian.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Blogger Table of Content</title>
<script>
// ----------------------------------------------------------------------------
// Author: Abu Farhan - http://www.abu-farhan.com
// Optimized by Taufik Nurrohman - http://dte-feed.blogspot.com
// ----------------------------------------------------------------------------
var postTitle = new Array(),
postUrl = new Array(),
postDate = new Array(),
postLabels = new Array(),
postNew = new Array(),
newText = " - <strong><em style='color:red;'>Baru!!</em></strong>",
tocLoaded = false,
postFilter = "",
numberfeed = 0;
function loadtoc(a) {
function b() {
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var n = a.feed.entry[h],
e = n.title.$t,
m = n.published.$t.substring(0, 10),
j;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "alternate") {
j = n.link[g].href;
break
}
}
var o = "";
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "enclosure") {
o = n.link[g].href;
break
}
}
var c = "";
if ("category" in n) {
for (var g = 0; g < n.category.length; g++) {
c = n.category[g].term;
var f = c.lastIndexOf(";");
if (f != -1) {
c = c.substring(0, f)
}
postLabels[ii] = c;
postTitle[ii] = e;
postDate[ii] = m;
postUrl[ii] = j;
if (h < 10) {
postNew[ii] = true
} else {
postNew[ii] = false
}
ii = ii + 1
}
}
}
}
}
b();
sortBy = "titleasc";
sortPosts(sortBy);
sortlabel();
tocLoaded = true;
displayToc2()
}
function filterPosts(a) {
scroll(0, 0);
postFilter = a;
displayToc(postFilter)
}
function allPosts() {
sortlabel();
postFilter = "";
displayToc(postFilter)
}
function sortPosts(d) {
function c(e, g) {
var f = postTitle[e];
postTitle[e] = postTitle[g];
postTitle[g] = f;
var f = postDate[e];
postDate[e] = postDate[g];
postDate[g] = f;
var f = postUrl[e];
postUrl[e] = postUrl[g];
postUrl[g] = f;
var f = postLabels[e];
postLabels[e] = postLabels[g];
postLabels[g] = f;
var f = postNew[e];
postNew[e] = postNew[g];
postNew[g] = f
}
for (var b = 0; b < postTitle.length - 1; b++) {
for (var a = b + 1; a < postTitle.length; a++) {
if (d == "titleasc") {
if (postTitle[b] > postTitle[a]) {
c(b, a)
}
}
if (d == "titledesc") {
if (postTitle[b] < postTitle[a]) {
c(b, a)
}
}
if (d == "dateoldest") {
if (postDate[b] > postDate[a]) {
c(b, a)
}
}
if (d == "datenewest") {
if (postDate[b] < postDate[a]) {
c(b, a)
}
}
if (d == "orderlabel") {
if (postLabels[b] > postLabels[a]) {
c(b, a)
}
}
}
}
}
function sortlabel() {
sortBy = "orderlabel";
sortPosts(sortBy);
var a = 0, b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
firsti = a;
do {
a = a + 1
} while (postLabels[a] == temp1);
b = a;
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
function sortPosts2(d, c) {
function e(f, h) {
var g = postTitle[f];
postTitle[f] = postTitle[h];
postTitle[h] = g;
var g = postDate[f];
postDate[f] = postDate[h];
postDate[h] = g;
var g = postUrl[f];
postUrl[f] = postUrl[h];
postUrl[h] = g;
var g = postLabels[f];
postLabels[f] = postLabels[h];
postLabels[h] = g;
var g = postNew[f];
postNew[f] = postNew[h];
postNew[h] = g
}
for (var b = d; b < c - 1; b++) {
for (var a = b + 1; a < c; a++) {
if (postTitle[b] > postTitle[a]) {
e(b, a)
}
}
}
}
function displayToc2() {
var a = 0, b = 0;
document.write("<ol>");
while (b < postTitle.length) {
temp1 = postLabels[b];
document.write('<li><b><a href="/search/label/' + temp1 + '">' + temp1 + "</a></b><ol>");
firsti = a;
do {
document.write("<li>");
document.write('<a href="' + postUrl[a] + '">' + postTitle[a] + "</a>");
if (postNew[a] == true) {
document.write(newText)
}
document.write("</li>");
a = a + 1
} while (postLabels[a] == temp1);
b = a;
document.write("</ol></li>");
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
document.write("</ol>");
}
</script>
</head>
<body>
<script src="//dte-feed.blogspot.com/feeds/posts/default/?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</body>
</html>
Seperti yang pernah Saya tuliskan bahwa tag kondisional bisa menahan pemanggilan elemen (baca di sini), maka jika Anda hanya memanfaatkan tag kondisional error_page untuk menampilkan tabir, itu hanya akan membuang-buang waktu saja terutama jika dilihat dari segi komunikasi, tentang bagaimana cara kita memberitahukan bahwa halaman yang sedang mereka akses itu tidak ada. Kabar buruk jika Anda memiliki halaman blog yang lambat diakses. Jika itu terjadi, maka pesan kesalahan yang ingin Anda sampaikan tidak akan pernah tersampaikan dengan benar.
Pernyataan Saya di atas tidak akan berlaku lagi jika Anda bisa membuat akses halaman kesalahan menjadi lebih cepat. Dan cara terbaik untuk melakukan itu adalah dengan menerapkan logika pengingkaran pada tag kondisional halaman kesalahan/error page. Berikut ini adalah cara paling sederhana untuk melakukan itu:
<body>
<b:if cond='data:blog.pageType != "error_page"'>
...
...
Daerah ini berisi bagian-bagian utama dalam sebuah blog seperti posting, widget, sidebar dan yang lainnya.
Daerah ini akan diabaikan karena kita berada di dalam kondisi pengingkaran.
...
...
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<div id='error-page'>
<h1>Tuliskan sesuatu di sini. Bagian ini hanya akan tampil saat halaman tidak ditemukan.</h1>
</div>
</b:if>
</body>
Sisanya, mungkin Anda ingin menambahkan beberapa kode CSS:
Berikut ini adalah beberapa tutorial Blogger Thread Comment Hack yang berhasil Saya kumpulkan dari hasil penelusuran. Jika Anda tidak bisa mengaktifkan fitur thread comment pada tema Blogger Anda, tutorial-tutorial berikut ini mungkin bisa menjadi alternatif:
Shams’ Blog
Saya tidak begitu familiar dengan ini, tapi sepertinya ini adalah versi pertama dari sekian banyak versi tutorial modifikasi komentar Blogger. Sangat jelas jika Anda melihat dari tanggal penerbitan postingnya:
Ini adalah versi yang Saya pakai, karena beberapa kali Saya mencoba metode lainnya, ternyata tetap tidak berhasil. Beberapa alasan yang paling masuk akal mungkin karena di sini Anda harus mengedit keseluruhan kerangka daftar komentar pada tema sehingga masalah ID, kelas dan susunan kerangka komentar tidak akan mempengaruhi:
Versi paling aman diantara sekian banyak tutorial, karena beliau menggunakan metode yang sama dengan cara kerja fitur thread comment dari Blogger. Pastikan saja Anda tidak salah paham dengan bagian ini. Mohon dibaca dengan teliti:
... here comes the current code
... that is in the tema
... that generates the comments
... and what we won't touch
Versi ini adalah versi termudah dalam hal instalasi, hanya saja tutorial ini memiliki satu keterbatasan. Saya sempat memeriksa kode dalam tutorialnya dan Saya bisa memutuskan bahwa modifikasi ini hanya bekerja untuk tema blogspot dengan kerangka komentar seperti ini:
Ini adalah versi tutorial yang Saya ketahui sebagai dasar dari pengembangan dalam beberapa tutorial pada blog Artisteer Tutorials (beliau sempat membicarakan blog tersebut dalam salah satu tutorialnya):
Ini adalah hasil karya baru dari VNBlogspot. Saya bisa mengatakan bahwa ini adalah sistem thread commenting terbaik meskipun masih dalam tahap pengembangan, karena saat kita mengeklik tombol Balas, kita tidak akan melihat pop-up window lagi seperti versi sebelumnya. Jika Anda tidak suka dengan pop-up window yang tapil pada sistem thread commenting versi sebelumnya, Anda bisa menggunakan ini:
Sampai pada akhirnya Saya menemukan JSUnpack yang luar biasa namun tidak begitu terkenal dan masih dirahasiakan/dalam tahap pengembangan (ini cuma dugaan Saya, karena selama ini Saya tidak pernah menemukan forum yang bisa memecahkan masalah Saya mengenai kompresi JavaScript model ini).
Saya menggunakan alat itu dan kemudian mencoba menerapkan script itu kembali tapi justru tidak memberikan hasil kerja yang sama karena kode yang tergenerasi tidak lengkap. Jadi Saya mencoba untuk menelusuri kata kunci dengan script yang tidak lengkap tersebut hingga Saya menemukan ini ⇒ http://pastebin.de/22000.
Sungguh di luar dugaan bahwa Saya bisa menemukan apa yang sangat ingin Saya cari dan Saya cari tahu cara kerjanya belakangan ini. Saya akan menyimpannya di sini! Mungkin beberapa di antara kalian ada yang ingin tahu cara kerja Blogger Thread Comment Hack ini:
// No attribution. Who created this???
// Strongest possible source: http://www.vnblogspot.com/2011/12/comment-phan-cap-cho-blogger.html
var Cur_Url_ThreadCM = window.location.href;
var Cm_Block = document.getElementById('cm_block');
var Cm_Block_Content = Cm_Block.innerHTML;
var Cm_Item_Id = [];
var Cm_Item_Content = [];
var Cm_Item_Level = [];
var Cm_Num = 0;
var Cm_Item_Id_T = '';
var Cm_Item_Content_T = '';
var Cm_Item_Level_T = '';
var i = 0;
var j = 0;
var k = 0;
var h = 0;
var strout = '';
var str_t1 = "";
var str_t2 = "";
function getInternetExplorerVersion() {
var rv = -1;
if (navigator.appName == 'Microsoft Internet Explorer') {
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[.0-9]{0,})");
if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
}
return rv;
}
var IE_ver = getInternetExplorerVersion();
if (IE_ver == -1 || IE_ver >= 9) {
while (Cm_Block_Content.indexOf('id="c') != -1) {
i = Cm_Block_Content.indexOf('id="c');
Cm_Block_Content = Cm_Block_Content.substring(i + 4);
i = Cm_Block_Content.indexOf('"');
Cm_Item_Id[Cm_Num] = Cm_Block_Content.substring(0, i);
Cm_Block_Content = Cm_Block_Content.substring(i);
Cm_Item_Content[Cm_Num] = document.getElementById(Cm_Item_Id[Cm_Num]).innerHTML;
Cm_Item_Level[Cm_Num] = 0;
Cm_Num++;
}
for (i = 0; i < Cm_Num - 1; i++) {
for (j = i + 1; j < Cm_Num; j++) {
if (Cm_Item_Content[j].indexOf(Cm_Item_Id[i]) != -1) {
Cm_Item_Id_T = Cm_Item_Id[j];
Cm_Item_Content_T = Cm_Item_Content[j];
Cm_Item_Level[j] = Cm_Item_Level[i] + 1;
Cm_Item_Level_T = Cm_Item_Level[j];
for (h = i + 1; h < j; h++) {
if (Cm_Item_Level[h] < Cm_Item_Level_T) {
break;
}
}
for (k = j; k > h; k = k - 1) {
Cm_Item_Id[k] = Cm_Item_Id[k - 1];
Cm_Item_Content[k] = Cm_Item_Content[k - 1];
Cm_Item_Level[k] = Cm_Item_Level[k - 1];
}
Cm_Item_Id[h] = Cm_Item_Id_T;
Cm_Item_Content[h] = Cm_Item_Content_T;
Cm_Item_Level[h] = Cm_Item_Level_T;
}
}
}
for (i = 0; i < Cm_Num; i++) {
j = Cm_Item_Content[i].indexOf('@<a href="#c');
if (j != -1) {
str_t1 = Cm_Item_Content[i].substring(0, j);
str_t2 = Cm_Item_Content[i].substring(j + 1);
j = str_t2.indexOf('</a>');
str_t2 = str_t2.substring(j + 4);
Cm_Item_Content[i] = str_t1 + str_t2;
}
j = Cm_Item_Content[i].indexOf('class="cm_wrap"');
if (j != -1) {
str_t1 = Cm_Item_Content[i].substring(0, j);
str_t2 = Cm_Item_Content[i].substring(j);
if (Cm_Item_Level[i] > 6) Cm_Item_Level[i] = 6;
Cm_Item_Content[i] = str_t1 + 'style="width:' + (100 - Cm_Item_Level[i] * 5) + '%" ' + str_t2;
}
strout += Cm_Item_Content[i];
}
strout += '<div class="clear"></div>';
Cm_Block.innerHTML = strout;
Cm_Block.style.display = 'block';
var Cm_Total_Obj = document.getElementById('cm_total').innerHTML;
var Cm_Total = parseInt(Cm_Total_Obj);
if (Cm_Total > 200) {
strout = '<div style="float:left">Page ';
var Cm_Page_Num = (Cm_Total - Cm_Total % 200) / 200 + 1;
var Org_Url_ThreadCM = '';
var Cm_Cur_Page = 1;
i = Cur_Url_ThreadCM.indexOf('.html');
if (i != -1) {
Org_Url_ThreadCM = Cur_Url_ThreadCM.substring(0, i + 5);
} else {
Org_Url_ThreadCM = Cur_Url_ThreadCM;
}
i = Org_Url_ThreadCM.indexOf('#comments');
if (i != -1) {
Org_Url_ThreadCM = Org_Url_ThreadCM.substring(0, i);
}
i = Cur_Url_ThreadCM.indexOf('?commentPage=');
if (i == -1) {
Cm_Cur_Page = 1;
} else {
Cm_Cur_Page = parseInt(Cur_Url_ThreadCM.substring(i + 13));
}
for (i = 1; i <= Cm_Page_Num; i++) {
if (i == Cm_Cur_Page) {
strout += '<span>' + i + '</span>';
} else {
strout += '<a href="' + Org_Url_ThreadCM + '?commentPage=' + i + '#comments">' + i + '</a>';
}
}
if (Cm_Cur_Page * 200 <= Cm_Total) {
strout += '</div><div style="float:right">' + (((Cm_Cur_Page - 1) * 200) + 1) + ' - ' + (Cm_Cur_Page * 200) + ' of ' + Cm_Total + ' comments</div>';
} else {
strout += '</div><div style="float:right">' + (((Cm_Cur_Page - 1) * 200) + 1) + ' - ' + Cm_Total + ' of ' + Cm_Total + ' comments</div>';
}
var Cm_Page_Obj = document.getElementById('cm_page');
Cm_Page_Obj.innerHTML = strout;
Cm_Page_Obj = document.getElementById('cm_page_copy');
Cm_Page_Obj.innerHTML = strout;
if (Cm_Cur_Page < Cm_Page_Num) {
strout = '<style type="text/css">.cm_author_reply {display: none}</style>';
var Cm_ReplyCSS_Obj = document.getElementById('cm_reply_css');
Cm_ReplyCSS_Obj.innerHTML = strout;
}
}
} else {
while (Cm_Block_Content.indexOf('id=c') != -1) {
i = Cm_Block_Content.indexOf('id=c');
Cm_Block_Content = Cm_Block_Content.substring(i + 3);
i = Cm_Block_Content.indexOf('>');
Cm_Item_Id[Cm_Num] = Cm_Block_Content.substring(0, i);
Cm_Block_Content = Cm_Block_Content.substring(i);
Cm_Item_Content[Cm_Num] = document.getElementById(Cm_Item_Id[Cm_Num]).innerHTML;
Cm_Item_Level[Cm_Num] = 0;
Cm_Num++;
}
for (i = 0; i < Cm_Num - 1; i++) {
for (j = i + 1; j < Cm_Num; j++) {
if (Cm_Item_Content[j].indexOf(Cm_Item_Id[i]) != -1) {
Cm_Item_Id_T = Cm_Item_Id[j];
Cm_Item_Content_T = Cm_Item_Content[j];
Cm_Item_Level[j] = Cm_Item_Level[i] + 1;
Cm_Item_Level_T = Cm_Item_Level[j];
for (h = i + 1; h < j; h++) {
if (Cm_Item_Level[h] < Cm_Item_Level_T) {
break;
}
}
for (k = j; k > h; k = k - 1) {
Cm_Item_Id[k] = Cm_Item_Id[k - 1];
Cm_Item_Content[k] = Cm_Item_Content[k - 1];
Cm_Item_Level[k] = Cm_Item_Level[k - 1];
}
Cm_Item_Id[h] = Cm_Item_Id_T;
Cm_Item_Content[h] = Cm_Item_Content_T;
Cm_Item_Level[h] = Cm_Item_Level_T;
}
}
}
for (i = 0; i < Cm_Num; i++) {
j = Cm_Item_Content[i].indexOf('@<A href="#c');
if (j != -1) {
str_t1 = Cm_Item_Content[i].substring(0, j);
str_t2 = Cm_Item_Content[i].substring(j + 1);
j = str_t2.indexOf('</A>');
str_t2 = str_t2.substring(j + 4);
Cm_Item_Content[i] = str_t1 + str_t2;
}
j = Cm_Item_Content[i].indexOf('class=cm_wrap');
if (j != -1) {
str_t1 = Cm_Item_Content[i].substring(0, j);
str_t2 = Cm_Item_Content[i].substring(j);
if (Cm_Item_Level[i] > 6) Cm_Item_Level[i] = 6;
Cm_Item_Content[i] = str_t1 + 'style="width:' + (100 - Cm_Item_Level[i] * 5) + '%" ' + str_t2;
}
strout += Cm_Item_Content[i];
}
strout += '<div class="clear"></div>';
Cm_Block.innerHTML = strout;
Cm_Block.style.display = 'block';
var Cm_Total_Obj = document.getElementById('cm_total').innerHTML;
var Cm_Total = parseInt(Cm_Total_Obj);
if (Cm_Total > 200) {
strout = '<div style="float:left">Page ';
var Cm_Page_Num = (Cm_Total - Cm_Total % 200) / 200 + 1;
var Org_Url_ThreadCM = '';
var Cm_Cur_Page = 1;
i = Cur_Url_ThreadCM.indexOf('.html');
if (i != -1) {
Org_Url_ThreadCM = Cur_Url_ThreadCM.substring(0, i + 5);
} else {
Org_Url_ThreadCM = Cur_Url_ThreadCM;
}
i = Org_Url_ThreadCM.indexOf('#comments');
if (i != -1) {
Org_Url_ThreadCM = Org_Url_ThreadCM.substring(0, i);
}
i = Cur_Url_ThreadCM.indexOf('?commentPage=');
if (i == -1) {
Cm_Cur_Page = 1;
} else {
Cm_Cur_Page = parseInt(Cur_Url_ThreadCM.substring(i + 13));
}
for (i = 1; i <= Cm_Page_Num; i++) {
if (i == Cm_Cur_Page) {
strout += '<span>' + i + '</span>';
} else {
strout += '<a href="' + Org_Url_ThreadCM + '?commentPage=' + i + '#comments">' + i + '</a>';
}
}
if (Cm_Cur_Page * 200 <= Cm_Total) {
strout += '</div><div style="float:right">' + (((Cm_Cur_Page - 1) * 200) + 1) + ' - ' + (Cm_Cur_Page * 200) + ' of ' + Cm_Total + ' comments</div>';
} else {
strout += '</div><div style="float:right">' + (((Cm_Cur_Page - 1) * 200) + 1) + ' - ' + Cm_Total + ' of ' + Cm_Total + ' comments</div>';
}
var Cm_Page_Obj = document.getElementById('cm_page');
Cm_Page_Obj.innerHTML = strout;
Cm_Page_Obj = document.getElementById('cm_page_copy');
Cm_Page_Obj.innerHTML = strout;
if (Cm_Cur_Page < Cm_Page_Num) {
strout = '<style type="text/css">.cm_author_reply {display: none}</style>';
var Cm_ReplyCSS_Obj = document.getElementById('cm_reply_css');
Cm_ReplyCSS_Obj.innerHTML = strout;
}
}
}
Potong semua kode itu lalu gulung editor HTML tema Anda ke atas perlahan-lahan sampai Anda menemukan kode ini:
<div class='comments' id='comments'>
Letakkan kode yang baru saja Anda potong tepat di bawahnya dan simpan perubahan yang Anda lakukan.
Jika tidak berhasil atau tidak menemukan kode yang terlihat di atas, mungkin itu karena Anda sedang memakai tema versi lama. Untuk tema versi lama, kodenya akan tampak kurang lebih seperti ini:
Saya baru memutuskan bahwa eksperimen ini telah berhasil sekitar satu hari yang lalu (sepertinya begitu). Ini adalah fasilitas emoticon otomatis yang akan mengubah simbol-simbol seperti :), :(, dan yang lainnya menjadi gambar tertentu yang telah ditentukan. Saya menggunakan jQuery karena mungkin konsep emoticon dengan jQuery belum ada. Dan juga, lagipula Saya belum begitu berbakat untuk menuliskan kode dengan JavaScript metah. Meskipun di luar sana sudah ada beberapa tutorial sejenis misalnya Add Yahoo Smiley Emoticons on Blogger Comment, tapi Saya hanya ingin memberikan sesuatu yang sedikit berbeda dan dengan proses instalasi yang sangat mudah.
Untuk membuatnya, pertama-tama masuklah ke menu Tema kemudian klik Edit HTML dan klik Lanjutkan:
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!
Lebih Jauh Lagi
Di situ terdapat setidaknya tiga variabel untuk pengaturan lanjutan:
emoRange digunakan untuk menentukan daerah mana saja yang akan dikenai manipulasi ini. Pada opsi di atas Saya menargetkan manipulasi pada elemen p yang berada di dalam elemen #comments dan juga pada elemen baris emoticon utama. Anda juga bisa menargetkannya pada elemen lain, misalnya pada posting. Untuk memberlakukan manipulasi ini pada posting, cukup tambahkan selektor .post-body pada variabel tersebut dengan memisahkannya menggunakan tanda koma.
putEmoAbove digunakan untuk menentukan di mana (di atas elemen apa) jQuery harus meletakkan daftar emoticon. Di sini Saya menuliskan nilainya pada #comment-editor untuk meletakkannya tepat di atas formulir komentar. Terkadang mungkin ini tidak berhasil. Anda harus mencoba untuk mengubahnya dengan div.comment-replybox-thread atau yang lainnya sebagai elemen sasaran. Intinya adalah, carilah elemen formulir komentar pada blog Anda dan temukan ID atau kelasnya sebagai petunjuk peletakkan daftar emoticon.
emoMessage digunakan untuk menentukan pesan yang akan muncul saat pertama kali pengunjung mengeklik salah satu emoticon. Anda bisa mengubah pesan itu sesuka hati.
Bagaimana Manipulasi ini Bekerja?
Pada dasarnya Saya hanya menggunakan regex sederhana untuk mencari format teks tertentu. Dan dengan menggunakan fungsi .replace() Saya mengubah setiap susunan karakter yang cocok dengan elemen <img> dengan alamat gambar tertentu.
Sebagai contoh, Saya akan mengubah teks :) menjadi <img src='smile.gif'>. Maka yang Saya butuhkan hanyalah dua buah fungsi jQuery yaitu .html() untuk menyalin dokumen dan .replace() untuk mengubah teks/karakter tertentu di dalam dokumen:
Kode di atas akan mengubah semua karakter dengan format “satu spasi di depan + simbol :)” menjadi elemen <img src='smile.gif'>.
Dalam regular expression, karakter spasi diwakili dengan simbol \s. Dan juga, karena simbol ) merupakan salah satu karakter khusus dalam regex, oleh karena itu kita harus menonaktifkan karakter tersebut dengan cara menuliskan karakter \ di depannya, dengan begitu komputer tidak akan membaca karakter tersebut sebagai fungsi, melainkan sebagai teks biasa.
g adalah global, artinya bahwa fungsi ini akan mencari semua karakter yang cocok tanpa terkecuali kemudian dia akan mengubahnya menjadi elemen gambar.
Dalam forum-forum tertentu mungkin Anda juga akan melihat peraturan yang berbeda untuk menyisipkan gambar, misalnya seperti ini:
[img]emoticon.gif[/img]
Tidak ada perbedaan dengan semua itu. Pada dasarnya kita lah yang membuat peraturan. Dalam metode penyisipan emoticon yang ke dua, Anda harus mengubah baris karakter tersebut menjadi elemen <img> dengan nilai src berupa teks yang berada di antara simbol [img]...[/img].
Slideshow Otomatis Blogger dengan TinyCarousel (Custom)
Pembaharuan: 25 November 2013
Menjawab permintaan dari It's a Hardlife, Saya mencoba untuk memodifikasi jQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tata letak slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:
Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu klik Simpan.
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!
Konfigurasi Widget
Opsi
Keterangan
url
Ganti nilainya dengan URL blog Anda.
numPosts
Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
labelName
Ganti nilainya menjadi nama label untuk menampilkan posting dengan label yang spesifik. Misalnya, menentukan nilai labelName: "Widget" akan membuat widget ini menampilkan posting berlabel Widget saja.
containerId
ID kontainer penampung widget.
newTabLink
Ganti nilainya menjadi true untuk membuat semua tautan terbuka di tab/jendela baru secara otomatis.
summaryLength
Digunakan untuk menentukan panjang ringkasan posting.
monthArray
Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage
URL gambar thumbnail pengganti untuk posting yang tidak memiliki gambar.
nav => prevText
Teks navigasi mundur.
nav => nextText
Teks navigasi maju.
nav => showText
Teks indikator jumlah posting.
carousel => axis
Ganti nilainya menjadi "y" untuk menampilkan carousel vertikal.
carousel => itemwidth
Digunakan untuk menentukan lebar masing-masing item carousel.
carousel => itemheight
Digunakan untuk menentukan tinggi masing-masing item carousel.
carousel => itemmargin
Digunakan untuk menentukan margin masing-masing item carousel.
carousel => itempadding
Digunakan untuk menentukan padding masing-masing item carousel.
carousel => visible
Digunakan untuk menentukan jumlah item yang ingin ditampilkan dalam satu baris.
carousel => display
Digunakan untuk menentukan jumlah item yang akan tergeser dalam satu kali gerakan.
carousel => start
Digunakan untuk menentukan indeks permulaan item (normalnya dimulai dari indeks pertama).
carousel => interval
Ganti nilainya menjadi false untuk membuat animasi berjalan secara manual (dengan cara mengeklik tombol navigasi).
carousel => intervaltime
Digunakan untuk menentukan waktu interval animasi (hanya berlaku jika opsi interval bernilai true).
carousel => animation
Ganti nilainya menjadi false untuk mematikan efek animasi.
Saat JavaScript pada peramban diaktifkan, semua elemen tautan yang mengandung URL berpola youtube.com/embed akan berubah menjadi video, dan jika JavaScript dimatikan, maka video tidak akan tampil pada posting komentar namun masih tetap meninggalkan elemen aslinya yaitu <a>, sehingga saat tautan tersebut diklik, Anda akan dibawa menuju ke halaman video satu layar penuh:
Salin kode tersebut dan letakkan di atas </body> kemudian simpan semua perubahan.
Untuk menyisipkan video, caranya cukup dengan menyalin URL kode embed yang ada di dalam textarea (ambil URL-nya saja). Lalu kita gunakan URL tersebut sebagai pengisi atribut href pada tautan:
<a href="Letakkan URL video di sini">Video</a>
Ambil URL pada elemen <iframe>
Atau jika Anda telah menciptakan sistem untuk menghapus tautan pada semua posting komentar (seperti Saya), Anda bisa menggunakan cara lama seperti ini:
Dan sebagai tambahan lagi, karena ini adalah manipulasi <iframe>, maka Anda sebenarnya tidak harus membatasi diri dengan video. Apa saja yang bisa tampil pada elemen <iframe> bisa ditampilkan pada posting komentar Blogger dengan metode ini.
Pembaharuan
Ucapan terimakasih kepada Mbah Qopet atas petunjuknya mengenai kekurangan metode ke dua. Masalahnya adalah, jika URL video yang dituliskan tidak sesuai dengan apa yang kita kehendaki, akan ada beberapa hal buruk yang mungkin terjadi. Misalnya, akses halaman menjadi sangat lambat karena iframe telah mengakses URL yang salah. Belum lagi mengenai para komentator yang mungkin saja merupakan orang jahat sehingga mereka bisa saja menyisipkan URL berbahaya pada manipulasi ini. Untuk metode pertama relatif lebih aman karena di situ dengan jelas Saya telah membatasi format URL yaitu hanya untuk elemen <a> yang mengandung URL youtube.com/embed. Di luar syarat itu, tautan tidak akan diubah menjadi video.
Cara sederhana untuk membatasi URL pada metode ke dua adalah dengan mendeteksi apakah nilai atribut src pada iframe mengandung URL youtube.com/embed atau tidak. Jika tidak, hapus atribut src pada iframe tersebut sehingga hal-hal buruk yang mungkin terjadi karena kesalahan URL video YouTube bisa diatasi. Berikut ini adalah kode selengkapnya untuk menyisipkan video dengan metode ke dua:
<script>
//<\[\/iframe\]/ig, "<iframe width='420' height='315' src='$1'></iframe>")
);
// Jika URL pada `iframe.video` tidak mengandung path `youtube.com/embed` ...
// ... segera hapus atribut `src` pada elemen tersebut ...
// ... lalu tambahkan latar belakang berupa gambar yang menyatakan peringatan kesalahan.
$('iframe.video:not([src*="youtube.com/embed"])')
.removeAttr('src')
.css('background', '#900 url(error.png) no-repeat 50% 50%');
});
//]]>
</script>
Saya masih tetap menyarankan Anda untuk menggunakan metode pertama yang jauh lebih sederhana. Metode ke dua ini hanya sebagai alternatif saja untuk blog-blog dengan peraturan komentar yang tidak begitu bebas seperti di blog Saya.
Teknik yang paling umum digunakan adalah dengan cara menyisipkan kode CSS pada tag kondisional pengingkaran terhadap halaman item dan halaman statis untuk menghilangkan elemen <div class='post-body'> dan <div class='post-footer'> seperti ini:
Coba Anda letakkan kode tersebut di atas </head> maka Anda akan melihat bahwa daftar posting dalam blog Anda sekarang hanya akan menampilkan judulnya saja pada halaman non-item dan non-statis.
Anda pikir ini akan membuat blog Anda menjadi jauh lebih cepat karena Anda telah menghilangkan isi posting secara keseluruhan, namun anehnya itu sama sekali tidak terjadi.
Mengapa? Karena apa yang Anda pikir sebagai menghilangkan sesuatu sebenarnya hanyalah menghilangkan wujudnya saja, sedangkan elemen-elemen yang ada di dalam <div class='post-body'> dan <div class='post-footer'> sebenarnya masih ada. Jika Anda membuka paragraf pada elemen ini maka Anda akan melihat keseluruhan konten (Bahkan Anda juga bisa dengan mudah melihatnya pada mode view source):
Isi posting masih ada meski wujudnya tidak terlihat di layar.
Selain itu, tidak semua tema memiliki kelas .post-body dan .post-footer. Bisa saja mereka menggunakan kelas .entry dan juga .postmeta atau bahkan yang lainnya seperti contoh tema yang Saya gunakan sebagai bahan percobaan.
display:none tidak akan mencegah elemen untuk terpanggil, mereka hanya menghilangkan wujudnya saja. Jadi, betapapun usaha Anda untuk menghilangkan elemen dengan deklarasi display:none, elemen tersebut akan tetap selalu ada, hanya wujudnya saja yang tidak terlihat.
Metode Terbaik
Metode terbaik adalah dengan cara menyisipkan tag kondisional secara langsung pada elemen yang dimaksud. Ini akan benar-benar mencegah elemen terpanggil oleh browser. Cara ini memang sedikit sulit, karena kita harus berhadapan secara langsung dengan elemen, yang (anehnya) terkadang elemen-elemen tersebut tampak jauh lebih panjang dari apa yang kita lihat di layar.
Namun pada intinya, jika kita ingin menyembunyikan isi posting, sebenarnya ada satu panduan sederhana untuk mengetahuinya yaitu tag <data:post.body/>.
Temukan saja kode itu dan cari elemen induk terdekat seperti ini:
Diavlo is a free blogger tema adapted from WordPress with 2 columns, right sidebar, perfect for photologs, minimalist and neutral colors.
Excellent layout for blogs about movie, music or photography.
