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 Template. 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.
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:
$(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.
<!DOCTYPE html> <html> <head> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <title>Blogger Table of Contents</title> <script type="text/javascript"> /** * CONTENT LIST * * Created by : Copycat91 On July 30th 2009 * Website : http://infotentangblog.blogspot.com/ * Original post : http://infotentangblog.blogspot.com/2009/08/membuat-daftar-isi-blog.html * * Special thanks to : * *) http://www.blogger.com for the free blog hosting * *) http://buzz.blogger.com for the tutorial to convert feed->json * *) NetBeans IDE 6.5 for the free IDE * *) And other tutorials about HTML, javascript, json, etc I have read */
var all_entries, entries, all_labels = [], json; function createEntries(json) { var entries_obj_list = []; var entries = json.feed.entry; for (var i = 0; i < entries.length; i++) { var entry = entries[i]; var entry_obj = new Object; entry_obj.id = entry.id.$t; entry_obj.title = entry.title.$t; entry_obj.href = getEntryHref(entry); entry_obj.content = getEntryContent(entry); entry_obj.labels = getEntryLabels(entry); entry_obj.published = entry.published.$t.substr(0, 10); entries_obj_list.push(entry_obj); } return entries_obj_list; }
function getEntryById(id) { for (var i = 0; i < all_entries.length; i++) { if (all_entries[i].id == id) { return all_entries[i]; } } return null; }
function getEntryContent(entry) { return entry.content ? entry.content.$t : entry.summary.$t; }
function getEntryHref(entry) { var links = entry.link; for (var i = 0; i < links.length; i++) { if (links[i].rel == "alternate") { return links[i].href; } } return null; }
function getEntryLabels(entry) { var labels = []; var categories = entry.category; if (!categories) { return labels; } for (var i = 0; i < categories.length; i++) { var label = categories[i].term; if (!isExists(all_labels, label)) { all_labels.push(label); } // while collecting all labels labels.push(label); } return labels; }
function getSomeEntries(cmp) { entries = []; for (var i = 0; i < all_entries.length; i++) { var entry = all_entries[i]; if (cmp(entry)) { entries.push(entry); } } return entries; }
function isExists(array, val) { for (var i = 0; i < array.length; i++) { if (array[i] == val) { return true; } } return false; }
function onLoadFeed(json_arg) { json = json_arg; setTimeout("onLoadFeedTimeout()", 100); }
function showEntries(entries) { var s = ""; for (var i = 0; i < entries.length; i++) { var entry = entries[i]; s += "<p>"; s += titleCode(entry); s += "<span style='font-size:80%;'>" + footlabel + " " + labelsCode(entry); s += " " + footon + " " + publishedDateCode(entry) + "</span>"; s += "</p>"; } document.getElementById("cl_content_list").innerHTML = s; }
function showHeaderOption() { var s = ""; s += "<table border='0' cellpadding='3'>"; s += "<tr>"; s += "<td style='text-align:right;'>" + sortby; s += "<td><select onchange='sortBy(this.value.substr(1), this.value.substr(0,1))' style='width:100%;'>"; s += "<option value='0published'>" + timepub + "</option>"; s += "<option value='1title'>" + ptitle + "</option>"; s += "</select>"; s += "<tr>"; s += "<td style='text-align:right'>" + labelsort; s += "<td><select onchange='showPostsWLabel(this.value)' id='cl_labels' style='width:100%;'>"; s += "<option value='*'>" + showall + "</option>"; for (var i = 0; i < all_labels.length; i++) { var label = all_labels[i]; s += "<option value='" + label + "'>" + label + "</option>"; } s += "</select>"; s += "<tr>"; s += "<td><td><button onclick='showPostsWLabel(\"*\");'>" + showall + "</button>"; s += "</table>"; document.getElementById("cl_option").innerHTML = s; }
function showHideSummary(obj) { var p = obj.nextSibling; while (p.className != "cl_content") { p = p.nextSibling; } var id = p.id; var entry = getEntryById(id); var content = shortenContent(entry); if (p.innerHTML == "") { p.innerHTML = content + "<br/>"; obj.innerHTML = "▼"; obj.title = hidesum; } else { p.innerHTML = ""; obj.innerHTML = "►"; obj.title = showsum; } }
function sortBy(attribute, asc) { var cmp = function(entry1, entry2) { if (entry1[attribute] == entry2[attribute]) { return 0; } else if (asc == '1') { return entry1[attribute].toLowerCase() > entry2[attribute].toLowerCase(); } else { return entry1[attribute].toLowerCase() < entry2[attribute].toLowerCase(); } } entries.sort(cmp); showEntries(entries); }
function stripHTML(s) { var c; var intag = false; var newstr = ""; for (var i = 0; i < s.length; i++) { c = s.charAt(i); if (c == "<") { intag = true; } else if (c == ">") { intag = false; } if (c == ">") { newstr += " "; } else if (!intag) { newstr += c; } } return newstr; }
// Functions Returning HTML Code function labelsCode(entry) { var s = ""; if (entry.labels.length == 0) { return " (tidak berlabel) "; } for (var j = 0; j < entry.labels.length; j++) { var label = entry.labels[j]; s += "<a href='javascript:showPostsWLabel(\"" + label + "\")' "; s += "title='" + showlabel + " " + label + "'>" + label + "</a>"; s += (j != entry.labels.length - 1) ? ", " : ""; } return s; }
function publishedDateCode(entry) { var y = entry.published.substr(0, 4); var m = entry.published.substr(5, 2); var d = entry.published.substr(8, 2); var s = "<a href='javascript:showPostsInDate(\"" + y + "\")' title='" + y + "'>" + y + "</a>/"; s += "<a href='javascript:showPostsInDate(\"" + y + "-" + m + "\")' title='" + y + "/" + m + "'>" + m + "</a>/"; s += "<a href='javascript:showPostsInDate(\"" + y + "-" + m + "-" + d + "\")'title='" + y + "/" + m + "/" + d + "'>" + d + "</a>"; return s; }
function titleCode(entry) { var s = "<span title='" + showsum + "' onclick='showHideSummary(this)' style='cursor:pointer'>►</span> "; s += "<b><a href='" + entry.href + "'>" + entry.title + "</a></b><br/>"; s += "<span class='cl_content' id='" + entry.id + "'></span>"; return s; }
// Selection Functions function showPostsInDate(date) { var cmp = function(entry) { return entry.published.indexOf(date) == 0; } var entries = getSomeEntries(cmp); showEntries(entries); }
function showPostsWLabel(label) { var cmp = function(entry) { if (label == "*") { return true; } for (var i = 0; i < entry.labels.length; i++) { if (entry.labels[i] == label) { return true; } } return false; } var entries = getSomeEntries(cmp); showEntries(entries); document.getElementById("cl_labels").value = label; }
Masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan. Cek Expand Template 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 type="text/javascript"> // ---------------------------------------------------------------------------- // Author: Abu Farhan - http://www.abu-farhan.com // Optimized by Taufik Nurrohman - http://hompimpaalaihumgambreng.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="http://hompimpaalaihumgambreng.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 template 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 template 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 template ... 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 template 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; } } }
Membuat formulir komentar blog terletak di bagian atas dimana semua daftar komentar berada di bawahnya.
Saya sudah mencoba ini pada salah satu template Blogger standar dan berhasil melakukanya dengan lancar.
Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil:
Mengedit HTML
Temukan kode yang kurang lebih tampak seperti ini:
Potong semua kode itu lalu gulung editor HTML template 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 template versi lama. Untuk template 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 Template kemudian klik Edit HTML dan klik Lanjutkan:
.emoKey { border:1px solid #ccc; background-color:white; font:normal bold 11px/normal Arial,Sans-Serif; padding:1px 2px; margin:0 0 0 2px; color:black; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap", putEmoAbove = "#comment-editor", emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol."; //]]> </script> <script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script>
Klik Simpan Template dan lihat hasilnya.
Kode yang Saya beri garis bawah adalah JQuery. Jika template 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].
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 tipografi slideshowAgile Carousel sehingga setiap slide menjadi lebih kaya akan konten:
/* * Orientasi Vertikal * CSS diatur secara manual pada versi aslinya * tapi di sini semuanya sudah cukup teratur */ #tinycarousel.vertical {width:242px} #tinycarousel.vertical ul.overview li { float:none; display:block; width:228px; margin:5px auto 10px !important; }
Jika bernilai true, bulan terbit artikel akan ditampilkan. Jika bernilai false, bulan terbit artikel akan disembunyikan.
slideOpenNewTab
Jika bernilai true, setiap tautan akan terbuka di tab/jendela baru. Jika bernilai false, setiap tautan akan terbuka di tab/jendela yang sama.
idMode
Jika bernilai true, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai false, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabels
Ubah nilainya menjadi true jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel slideLabelName.
slideLabelName
Digunakan untuk menentukan nama label yang spesifik setelah mengubah nilai slidebyLabels menjadi true.
pBlank
Adalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
text
Digunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_g
Digunakan untuk menentukan jumlah slide.
numchars_g
Digunakan untuk menentukan jumlah karakter ringkasan artikel.
showText & postText
Digunakan untuk mengubah teks "Menampilkan" N "Posting".
tinyprevNav
Digunakan untuk menentukan simbol navigasi mundur pada slideshow.
tinynextNav
Digunakan untuk menentukan simbol navigasi maju pada slideshow.
home_page
URL blog Anda.
Konfigurasi Slideshow
Terdapat beberapa konfigurasi standar yang sangat umum dijumpai pada plugin animasi JQuery. Yaitu kecepatan, delay, opsi animasi otomatis dan hal-hal umum lainnya:
Opsi
Nilai
Keterangan
start
1, 2, 3, ... (urutan)
Digunakan untuk menentukan slide nomor ke berapa yang akan tampil terlebih dulu saat halaman dikunjungi.
display
1, 2, 3, ... (jumlah)
Digunakan untuk menentukan berapa banyak slide yang akan bergeser dalam sekali klik navigasi/sekali animasi.
axis
'x'
Nilai 'x' akan membuat orientasi slideshow menjadi horizontal, nilai 'y' akan membuat orientasi slideshow menjadi vertikal.
'y'
interval
true
Nilai true akan membuat slideshow bergerak secara otomatis, nilai false akan membuat slideshow mati dan hanya bisa bergerak jika Anda mengeklik tombol navigasi.
false
intervaltime
500, 3000, ... (kecepatan)
Digunakan untuk menentukan lama waktu slide berhenti diantara animasi (hanya berlaku untuk animasi otomatis).
animation
true
Nilai true akan membuat slideshow bergerak dengan efek animasi, nilai false akan membuat slideshow bergerak kaku dan tampak meloncat.
false
duration
500, 3000, ... (kecepatan)
Digunakan untuk menentukan kecepatan animasi perpindahan slide.
callback
null
Digunakan untuk menerapkan fungsi tambahan yang akan dieksekusi setiap kali slide berpindah.
