Sunday, February 26, 2012

Fix Problem Reply Threaded Comments

Posted by dav On 4:03 AM
Beberapa hari yang lalu Blogger Tune-Up mencoba memasang Threaded Comments pada blog ini, pada mulanya semua berjalan lancar-lancar saja. Namun setelah beberapa hari pemasangan, tombol Reply/Balas tidak bereaksi apa-apa ketika di klik. Setelah menunggu satu hari dengan berharap semua membaik, namun tombol reply/balas untuk fasilitas komentar tetap tidak bekerja. Saya mengira hal ini terjadi karena pihak pengembang Blogger sedang memperbaiki fasilitas ini, namun ternyata blogger lain pun mengalami hal sama. Sempat menyampaikan pesan melalui twitter, melalui bantuan Blogger tapi tetap tidak ada solusi, maka Blogger Tune-Up mencoba mencari solusinya sendiri. Setelah melakukan pencarian diberbagai blog, terutama blog resmi dari pihak Google, maka dibawah ini ada 2 (dua) solusi yang ditemukan untuk memperbaiki masalah (Fix Problem Reply Threaded Comments) tombol reply/balas threaded comments dan 1 (satu) solusi yang ditemukan Blogger Tune-Up.
Fix Problem Reply Threaded Comments

Perbaikan Masalah Threaded Comments

Solusi I (Dari Blogger Buzz)
Solusi ini dijelaskan secara langsung melalui blog resmi Blogger Buzz
[Untuk Antar Muka Blogger Lawas]
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Setelan - Komentar
Langkah 3
Cari "Penempatan Formulir Komentar" kemudian pilih "Disemat di bawah entri"
Langkah 4
Klik tombol "Simpan Setelan"
Langkah 5
Masuk ke Setelan - Feed Situs
Langkah 6
Cari "Izinkan Feed Blog" dan pilih "Penuh"
Langkah 7
Klik tombol "Simpan Setelan"

[Untuk Antar Muka Blogger Baru]
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Setelan - Pos dan komentar
Langkah 3
Cari Komentar - Lokasi Komentar dan pilih "Tersemat"
Langkah 4
Klik tombol "Simpan setelan"
Langkah 5
Cari Lainnya - Umpan situs dan pada Bolehkan Umpan Blog pilih "Penuh"
Langkah 6
Klik tombol "Simpan setelan"

Solusi II (Dari Blogger Developers Network)
Solusi ini dijelaskan secara langsung melalui blog resmi Blogger Developers Network
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Template - Edit HTML dan aktifkan "Expand Template Widget"
(Backup dulu template untuk menjaga dari kemungkinan kesalahan pengeditan)
Langkah 3
Cari kode dibawah ini (kode ini lebih dari satu):
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
Langkah 4
Ganti (replace) kode diatas dengan kode dibawah ini:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
Langkah 5
Simpan Template

Solusi III (Ditemukan Blogger Tune-Up)
Ini solusi terakhir Blogger Tune-Up setelah melakukan 2 solusi diatas tapi tetap saja Reply Threaded Comments tidak bisa bekerja, yaitu dengan mengganti script JSON Threaded Comments baru dengan script JSON Threaded Comments lama.
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Template - Edit HTML dan aktifkan "Expand Template Widget"
(Backup dulu template untuk menjaga dari kemungkinan kesalahan pengeditan)
Langkah 3
Cari kode dibawah ini:
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var postId = &#39;<data:post.id/>&#39;;
var feed = &#39;<data:post.commentFeed/>&#39;;
var authorName = &#39;<data:post.author/>&#39;;
var authorUrl = &#39;<data:post.authorUrl/>&#39;;
var blogId = &#39;<data:top.id/>&#39;;
var baseUri = &#39;<data:post.commentBase/>&#39;;

// <![CDATA[
feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = feed;
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == authorName
&& comment.author.profileUrl == authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var tok = 'comment-form_';
var hash = window.location.hash || '';
var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

// Configure commenting API:
var configJso = {
'maxDepth': 2
};
var provider = {
'id': postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
Langkah 4
Ganti (replace) kode diatas dengan kode dibawah ini:
<script type='text/javascript'>
(function() {
var items = <data:post.commentJso/>;
var msgs = <data:post.commentMsgs/>;
var config = <data:post.commentConfig/>;

// <![CDATA[
var cursor = null;
if (items && items.length > 0) {
cursor = parseInt(items[items.length - 1].timestamp) + 1;
}

var bodyFromEntry = function(entry) {
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
return '<span class="deleted-comment">' + entry.content.$t + '</span>';
}
}
}
return entry.content.$t;
}

var parse = function(data) {
cursor = null;
var comments = [];
if (data && data.feed && data.feed.entry) {
for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
var comment = {};
// comment ID, parsed out of the original id format
var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
comment.id = id ? id[2] : null;
comment.body = bodyFromEntry(entry);
comment.timestamp = Date.parse(entry.published.$t) + '';
if (entry.author && entry.author.constructor === Array) {
var auth = entry.author[0];
if (auth) {
comment.author = {
name: (auth.name ? auth.name.$t : undefined),
profileUrl: (auth.uri ? auth.uri.$t : undefined),
avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
};
}
}
if (entry.link) {
if (entry.link[2]) {
comment.link = comment.permalink = entry.link[2].href;
}
if (entry.link[3]) {
var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
if (pid && pid[1]) {
comment.parentId = pid[1];
}
}
}
comment.deleteclass = 'item-control blog-admin';
if (entry.gd$extendedProperty) {
for (var k in entry.gd$extendedProperty) {
if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
}
}
}
comments.push(comment);
}
}
return comments;
};

var paginator = function(callback) {
if (hasMore()) {
var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
if (cursor) {
url += '&published-min=' + new Date(cursor).toISOString();
}
window.bloggercomments = function(data) {
var parsed = parse(data);
cursor = parsed.length < 50 ? null
: parseInt(parsed[parsed.length - 1].timestamp) + 1
callback(parsed);
window.bloggercomments = null;
}
url += '&callback=bloggercomments';
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
};
var hasMore = function() {
return !!cursor;
};
var getMeta = function(key, comment) {
if ('iswriter' == key) {
var matches = !!comment.author
&& comment.author.name == config.authorName
&& comment.author.profileUrl == config.authorUrl;
return matches ? 'true' : '';
} else if ('deletelink' == key) {
return config.baseUri + '/delete-comment.g?blogID='
+ config.blogId + '&postID=' + comment.id;
} else if ('deleteclass' == key) {
return comment.deleteclass;
}
return '';
};

var replybox = null;
var replyUrlParts = null;
var replyParent = undefined;

var onReply = function(commentId, domId) {
if (replybox == null) {
// lazily cache replybox, and adjust to suit this style:
replybox = document.getElementById('comment-editor');
if (replybox != null) {
replybox.height = '250px';
replybox.style.display = 'block';
replyUrlParts = replybox.src.split('#');
}
}
if (replybox && (commentId !== replyParent)) {
document.getElementById(domId).insertBefore(replybox, null);
replybox.src = replyUrlParts[0]
+ (commentId ? '&parentID=' + commentId : '')
+ '#' + replyUrlParts[1];
replyParent = commentId;
}
};

var hash = (window.location.hash || '#').substring(1);
var startThread, targetComment;
if (/^comment-form_/.test(hash)) {
startThread = hash.substring('comment-form_'.length);
} else if (/^c[0-9]+$/.test(hash)) {
targetComment = hash.substring(1);
}

// Configure commenting API:
var configJso = {
'maxDepth': config.maxThreadDepth
};
var provider = {
'id': config.postId,
'data': items,
'loadNext': paginator,
'hasMore': hasMore,
'getMeta': getMeta,
'onReply': onReply,
'rendered': true,
'initComment': targetComment,
'initReplyThread': startThread,
'config': configJso,
'messages': msgs
};

var render = function() {
if (window.goog && window.goog.comments) {
var holder = document.getElementById('comment-holder');
window.goog.comments.render(holder, provider);
}
};

// render now, or queue to render when library loads:
if (window.goog && window.goog.comments) {
render();
} else {
window.goog = window.goog || {};
window.goog.comments = window.goog.comments || {};
window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
window.goog.comments.loadQueue.push(render);
}
})();
// ]]>
</script>
Langkah 5
Simpan Template

Demikian tahapan demi tahapan untuk mengaktifkan kembali (Reply) Threaded Comments yang tidak bisa bekerja dengan baik. Mudah-mudahan bisa memberikan solusi pada blog anda yang mengalami masalah sama. Selamat mencoba dan semoga berhasil. Happy Blogging :)

Saturday, February 25, 2012

Kumpulan Link Untuk Belajar CSS

Posted by dav On 6:05 PM
Kumpulan Link Untuk Belajar CSS ~ Berikut ini adalah link untuk kita dapat belajar CSS dan juga untuk melihat demonya. Silahkan anda copy di address browser anda untuk melihat Web nya.

http://cssbeauty.com/
http://cssremix.com/
http://bestwebgallery.com/
http://www.cssmania.com/
http://www.cssdrive.com/
http://www.unmatchedstyle.com/
http://cssbased/
http://cssbloom.com/
http://www.cssclip.com/
http://www.csscollection.com/
http://css-demo.com/
http://cssdrive.com/
http://www.csselite.com/
http://www.cssflavor.com/
http://www.cssgalaxy.com/
http://cssglobe.com/
http://www.cssimport.com/
http://www.cssimpress.com/
http://cssmess.com/
http://www.cssprincess.com/
http://www.cssreboot.com/
http://www.cssshowcase.com/
http://csssmoothoperator.com/
http://cssspot.com/
http://www.designmeltdown.com/
http://www.lightondark.com/
http://www.cssliquid.com/
http://www.mostinspired.com/
http://www.submitcss.com/
http://www.dailyslurp.com/
Selamat belajar Guys.

Ref. alkode.com

Friday, February 3, 2012

Blogger Tune-Up Refresh

Posted by dav On 9:33 AM
Alhamdulillah. Setelah beberapa hari melakukan pertimbangan yang cukup berat, akhirnya Blogger Tune-Up mengambil keputusan untuk mengganti wajah. Biasanya desain yang saya buat selalu dominan warna gelap, namun kali ini saya ingin sesuatu yang yang berbeda, lebih cerah, redup, rapi namun tetap kalem. Maka seperti inilah tampilan akhir Blogger Tune-Up.
Namun demikian, desain Blogger Tune-Up ini masih jauh dari sempurna. Dan saya mengambil resiko untuk memperbaiki artikel demi artikel yang telah ditulis, hal ini karena desain yang dibuat total merupakan kode baru, tanpa mengikuti kode lama. Walau demikian hal itu tidak bisa ditawar. Maka jika sahabat blogger menemukan artikel yang tampil berantakan, saya mohon ma'af sekali karena keterbatasan koneksi dan waktu, tapi tetap semua itu akan segera diperbaiki. Dan saya mengucapkan "Selamat Datang di Blogger Tune-Up Refresh"

Banjarsari, 04 Februari 2012 [00.32 WIB]

Hendriono

Saturday, December 17, 2011

jQuery Menu Malu

Posted by dav On 5:47 AM
Bismillah. Alhamdulillah. Sebelum menulis artikel ini, aku sudah "lemes" tertawa sendiri. Seperti tidak ada judul lain saja menggunakan nama "jQuery Menu Malu". Penamaan ini sebenarnya spontanitas ketika melihat hasil akhir dari efek menu tersebut. Kronologi kejadiannya itu tadi malam, karena tidur terlalu sore (sekitar jam 10) maka terbangun masih dini hari (sekitar jam 3), mata langsung segar dan bingung mau melakukan apa. Buka-buka buku menemukan naskah pidato Bacharudin Jusuf Habibie waktu di kampus UI sebanyak lima halaman. Begitu selesai otak justru menjadi "njlimet" antara mengerti dan tidak mengerti dengan isi pidato tersebut. Akhirnya buka laptop dan cari-cari inspirasi, mata tiba-tiba tertuju pada suatu gambar background berwarna gelap (yang nanti akan kita gunakan), maka lahirlah inspirasi untuk menulis kode jQuery. Menulis kode jQuery-nya juga cukup lama, hampir satu jam karena berganti-ganti ide dan efek yang digunakan. Dan akhirnya efek yang digunakan adalah on-hover, un-hover, slideUp dan slideDown seperti demo dibawah ini.
jQuery Menu Malu

Deskripsi jQuery Menu Malu

jQuery Menu Malu pada mulanya disembunyikan, kemudian ditampilkan saat awal halaman di-load, beberapa saat kemudian menu kembali disembunyikan. Ketika mouse berada pada wilayah menu (on-hover) maka menu akan memanjang sendiri tanpa di klik dan menu pun akan ditampilkan. Ketika mouse meninggalkan area menu (un-hover) maka menu akan memendek sendiri tanpa di klik dan menu pun disembunyikan. Pada saat menu membuka efek slide dibuat lambat (slow) dan ketika menu menutup efek slide dibuat cepat jadi seakan-akan seperti malu-malu. Makanya kemudian di beri nama jQuery Menu Malu. Menu ini harus di sentuh baru membuka dan menutup jika di tinggalkan.

Skenario HTML jQuery Menu Malu

Dibawah ini adalah susunan kode HTML yang digunakan untuk membuat jQuery Menu Malu:
<div id="menumalu">
<div id="topi"></div>
<div id="isimenu">
<ul>
<li><a href="http://URL_1">Menu 1</a></li>
<li><a href="http://URL_2">Menu 2</a></li>
<li><a href="http://URL_3">Menu 3</a></li>
<li><a href="http://URL_4">Menu 4</a></li>
<li><a href="http://URL_5">Menu 5</a></li>
</ul>
</div>
<div class="sepatu"><span class="panwah">&nbsp;</span></div>
</div>
Penjelasan:
  • Jika diperhatikan maka menu ini terdiri dari satu wadah (container) utama yaitu <div id="menumalu">. Didalam container utama terdiri dari 3 bagian yaitu; <div id="topi"> (topi berarti bagian atas), <div id="isimenu"> (berisi menu-menu, sebenarnya bebas mau diisi apa saja), dan <div class="sepatu"> (sepatu berarti bagian bawah).
  • Pada bagian '"sepatu" memiliki sebuah "span" yang nantinya akan digunakan untuk container anak panah. Jika menu terbuka maka anak panah menunjukan arah ke atas, jika menu tertutup maka anak panah menunjukan arah ke bawah. Inilah fungsi "span" pada bagian sepatu.
  • Sedangkan untuk menu-menu yang ada didalamnya (didalam "isimenu") silahkan sesuaikan saja dengan kebutuhan.

Skenario CSS jQuery Menu Malu

Dibawah ini adalah susunan kode CSS yang akan digunakan untuk mempengaruhi tampilan HTML dan fungsi jQuery:
#menumalu{
top: .4em;
left:2em;
width:230px;
position: fixed;
z-index: 200;
}
#topi {
margin:0 ;
padding:0;
height:55px;
background:url(malusprite.png) no-repeat 0 0;
border-bottom:1px solid #000;
}
#isimenu{
margin:0 ;
padding:0;
width:230px;
background:url(malubg.png) repeat-y;
}
.sepatu{
margin:0;
padding:0;
height:78px;
background:url(malusprite.png) no-repeat 0 -80px;
display:block;
border-top:1px solid #302F2F;
}
span.panwah,span.pantas{
width:27px;
height:26px;
display:block;
margin-left:103px;
margin-top:35px;
}
span.panwah{
background:url(malusprite.png) no-repeat 0 -158px;
}
span.pantas{
background:url(malusprite.png) no-repeat -27px -158px;
}
Penjelasan:
Kode CSS ini tidak akan di jelaskan satu persatu, jadi (ma'af) silahkan dipelajari sendiri. Hanya bagian pentingnya saja yang akan dijabarkan. Perhatikan kode CSS diatas sepeti ditulis ulang dibawah ini:
#menumalu{
top: .4em;
left:2em;
width:230px;
position: fixed;
z-index: 200;
}
Kode ini digunakan untuk menempatkan posisi menu, seperti:
  • top: .4em; digunakan untuk menentukan jarak dari bagian atas halaman ke menu. Ubah nilai .4em sesuai keinginan, jika tidak menemukan posisi tepat silahkan ganti satuannya. Gunakan satuan pixel agar lebih mudah dalam mengatur posisinya (misal; .4em diubah menjadi 4px).
  • left:2em; digunakan untuk menentukan jarak dari sisi sebelah kiri halaman ke menu. Silahkan ubah nilainya atau ganti satuannya dengan pixel (misal; 2em diubah menjadi 20px). Jika anda ingin memposisikan menu pada sebelah kanan halaman, ubah "left" menjadi "right" maka menu akan berpindah pada sebelah kanan.
  • width:230px; Nilai ini jangan diubah karena sudah disesuaikan dengan lebar gambar yang digunakan. Kecuali jika ingin mengganti gambarnya.
  • position: fixed; Ini digunakan untuk menempatkan posisi menu dimana saja tanpa terpengaruh oleh elemen lain. Ini juga tidak perlu diubah.
  • z-index: 200; Ini digunakan untuk menempatkan posisi menu terhadap elemen lain. Jika menu ini berada dibelakang menu lain, ubah nilai 200 menjadi lebih besar.

Skenario jQuery jQuery Menu Malu

(Nek urung kroso mumet, monggo di lajeng. Nanging ojo mekso... Ngunjuk tuyo kopi benter rumiyen sinambi ngeses...)
Di bawah ini adalah kode jQuery yang digunakan untuk memberikan efek pada menu:
$(document).ready(function () {

jQuery('#isimenu').hide();
jQuery(window).load(function () {
jQuery('#isimenu').slideDown(1500, function () {
jQuery('#isimenu').slideUp(200, function () {});
});
});
jQuery('#menumalu').mouseenter(function () {
jQuery('#isimenu').slideDown(1000, function () {
jQuery('.sepatu span').removeClass('panwah').addClass('pantas');
});
});
jQuery('#menumalu').mouseleave(function () {
jQuery('#isimenu').slideUp(200, function () {
jQuery('.sepatu span').removeClass('pantas').addClass('panwah');
});
});

});
Penjelasan:
$(document).ready(function () {
Kode di atas adalah kode wajib dalam menulis kode-kode jQuery
jQuery('#isimenu').hide();
Saat pertama kali halaman dipanggil #isimenu akan disembunyikan
jQuery(window).load(function () {
Pada saat halaman di load fungsi akan dimulai
jQuery('#isimenu').slideDown(1500, function () {
#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1500 milidetik dan fungsi lain dimulai...
jQuery(this).slideUp(200);
#isimenu kemudian akan ditutup lagi dengan efek slide keatas pada kecepatan 200 milidetik
});
Efek slide ditutup
});
Fungsi load halaman di tutup

jQuery('#menumalu').mouseenter(function () {
Pada saat pointer mouse berada di area #menumalu maka fungsi dimulai...
jQuery('#isimenu').slideDown(1000, function () {
#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1000 milidetik dan fungsi lain dimulai...
jQuery('.sepatu span').removeClass('panwah').addClass('pantas');
'class' dengan nama "panwah" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "pantas"
});
Fungsi menampilkan #isimenu akan ditutup
});
Fungsi pointer mouse pada area menu akan ditutup

jQuery('#menumalu').mouseleave(function () {
Pada saat pointer mouse meninggalkan area #menumalu maka fungsi dimulai...
jQuery('#isimenu').slideUp(200, function () {
#isimenu akan ditutup dengan efek slide ke atas pada kecepatan 200 milidetik dan fungsi lain dimulai...
jQuery('.sepatu span').removeClass('pantas').addClass('panwah');
'class' dengan nama "pantas" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "panwah"
});
Fungsi menutup #isimenu akan ditutup
});
Fungsi pointer mouse meninggalkan area menu akan ditutup
});
Fungsi jQuery ditutup

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Friday, December 16, 2011

Bismillah. Alhamdulillah. Plugin Autolink Mini MP3 Player for Blogger Version 2.0 adalah pengembangan dan perbaikan dari Autolink Mini MP3 Player for Blogger Version 1.0. Terima kasih untuk para pembaca setia Blogger Tune-Up atas kritik, saran dan masukannya sehingga Autolink Mini MP3 Player for Blogger terus dikembangkan dengan harapan akan semakin mendekati kebutuhan para Blogger tanah air. Secara garis besar plugin Mini Music Player kali ini masih berbasis dari script plugin sebelumnya dan dengan player yang sama pula. Lalu apa pengembangannya? Hanya sedikit tapi lumayanlah lebih bagus dari sebelumnya...
Autolink Mini MP3 Player for Blogger Version 2.0

Update 15-12-2011 Autolink Mini MP3 Player Versi 2.0

  • Seluruh file diletakan pada server Google, sehingga loading lebih cepat (mudah-mudahan akun Blogger Tune-Up di Google Code tidak ditutup lagi)
  • Disertakan pengaturan penggantian keterangan file MP3 yang ada dibawah player
  • Disertakan pengaturan penggantian keterangan file MP3 yang ada dibawah player saat mouse diatas link Unduhan (hover)

Kekurangan Autolink Mini MP3 Player Versi 2.0

  • Background Keterangan file MP3 yang ada dibawah Player masih belum bisa di setting sesuai keinginan
  • Baru bisa mengenali file dengan ekstensi .mp3 saja, untuk .ogg, .wav, dan .swf (khusus untuk .swf sebenarnya tidak diperlukan player) belum bisa mengenalinya
  • Mohon bantuan untuk menemukan kelemahan dan kekurangan lainnya

Integrasi Autolink Mini MP3 Player Versi 2.0

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini (pilih salah satu saja):
</head>
atau:
</body>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
var unduhan ="Download";
var mos = "Right click - Save Target As for download";
//]]>
</script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/minimusicplayer.min.js"></script>
Langkah 5
Simpan template...

Setting Keterangan Autolink Mini MP3 Player Versi 2.0

  • var unduhan ="Download"; ubahlah kata "Download" sesuai dengan keinginan anda (misal; Unduh, Sedot, Hisap, Sikat dan lain sebagainya). Kata ini akan muncul sebagai keterengan pada bagian bawah player.
  • var mos = "Right click - Save Target As for download"; ubahlah kata "Right click - Save Target As for download" sesuai dengan kalimat yang anda sukai. Kalimat ini akan muncul pada saat mouse berada diatas keterangan file yang berada dibawah player.

Memasukan File MP3 pada Artikel/Widget

Untuk memasukan file MP3 pada artikel blog atau widget, caranya sama saja seperti versi sebelumnya. Silahkan baca disini.

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Thursday, December 15, 2011

Link Kredit Efek jQuery Ease Out Bounce

Posted by dav On 12:09 AM
Bismillah. Alhamdulillah... Kali ini kita akan membahas proses pembuatan suatu efek Ease Out Bounce yang di terapkan pada link kredit yang biasanya terdapat pada bagian bawah halaman blog. Mungkin sebagian blogger menyebutnya sebagai tooltips namun sebenarnya lebih dari sekedar tooltips dan saya lebih cocok menyebutnya sebagai Credits Ease Out Bounce. Kata Ease Out Bounce sendiri di ambil dari efek yang dihasilkan dari sebuah plugin jQuery Easing yang dibuat oleh George McGinley Smith. Penekanan pada artikel ini lebih ke pemahanan tentang pemanfaatan plugin jQuery Easing sehingga setelah artikel ini anda baca, pembaca bisa mengembangkannya sesuai dengan imajinasinya sendiri. Artikel ini tidaklah bersifat copy paste dan langsung dapat digunakan namun hanya berupa pancingan mengenai indahnya menulis script jQuery. Mari mulai bermain-main dengan jQuery...

Skenario Efek

Ketika pointer mouse (hover) berada diatas link kredit maka seketika sebuah kotak kecil akan muncul dengan efek melebar hingga mencapai ukuran yang telah ditentukan dan kemudin di ikuti oleh sebuah kotak kecil lainnya yang ditempatkan diatas kotak awal yang muncul dengan efek meninggi hingga mencapai ukuran tertentu. Setelah kedua kotak ini tampil maka di ikuti tampilnya informasi yang berada di dalam kotak tersebut dengan efek fade.
Ketika pointer mouse meninggalkan link kredit maka kotak kecil paling atas akan menutup dengan efek layaknya slide down sehingga informasi yang ada di dalam kotak akan tertutup dan menghilang, sedangkan kotak kecil paling bawah juga akan tertutup dengan efek memendek hingga menghilang.

Skenario HTML

Dibawah ini skenario yang akan digunakan untuk membuat Link Kredit Efek jQuery Ease Out Bounce:
<div id="kredit">
<div id="latarkredit"></div>
<div id="latarlinkredit"></div>
<div id="kotakredit">
<p>Hendriono is a blogger and web designers especially as jQuery, CSS and HTML.</p>
<ul>
<li id="alamat"><a href="http://www.hendriono.web.id/">Read more Hendriono Online</a></li>
<li id="facebook"><a href="http://www.twitter.com/dedehendriono">Follow Dede Hendriono on Twitter</a></li>
<li id="twitter"><a href="http://www.facebook.com/dede.hendriono">Follow Dede Hendriono on Facebook</a></li>
<li id="rss"><a href="http://www.facebook.com/dede.hendriono">Follow Dede Hendriono on Facebook</a></li>
</ul>
</div>
<p id="urlkredit"><a href="http://modification-blog.blogspot.com/">Website kindly created by <span>henstudio</span></a></p>
</div>
Penjelasan skenario kode HTML:
  • Jika diperhatikan kode HTML diatas maka akan diketahui bahwa kita akan melibatkan 4 buah container yaitu <div id="kredit"><div id="latarkredit"><div id="latarlinkredit"> dan <div id="kotakredit">
  • <div id="kredit"> adalah container utama yang mewadahi 3 container lainnya.
  • <div id="latarkredit"> adalah container paling atas
  • <div id="latarlinkredit"> adalah container paling bawah
  • <div id="kotakredit"> adalah container yang berisi informasi-informasi yang akan kita masukan

Skenario CSS

Dibawah ini merupakan kode CSS yang membentuk kotak-kotak kecil dan beberapa informasi yang ada didalamnya:
#kredit { position:relative; float:right; margin:-5em 2em 0 0; width:28em; height:13em; }
#kredit a { text-decoration:none; }
#latarkredit { display:none; position:absolute; bottom:3.5em; width:28em; height:0; border:1px solid #555759; border-bottom:0; background:#040607; opacity:0.95; border-top-right-radius:5px; border-top-left-radius:5px; -moz-border-top-right-radius:5px; -moz-border-top-left-radius:5px; z-index:10; }
#latarlinkredit { display:none; position:relative; z-index:10; width:0; margin:0 auto; top:9.5em; height:3.5em; background:#16191b; border:1px solid #555759; border-bottom-right-radius:5px; border-bottom-left-radius:5px; -moz-border-bottom-right-radius:5px; -moz-border-bottom-left-radius:5px; }
#urlkredit { position:absolute; bottom:0; left:0; width:28em; height:3.5em; z-index:20; }
#urlkredit a { display:block; width:28em; height:3.5em; text-align:center; color:#a0a1a1; line-height:3.5em; vertical-align:middle; border:0; }
#urlkredit a span { text-indent:-9999em; display:inline-block; width:75px; margin:0 2px 1.35em; height:12px; line-height:3.5em; vertical-align:bottom; background:url('logohens.png') no-repeat; }
#urlkredit a:hover span, #urlkredit a.active span { background-position:0 -12px; }
#kotakredit { display:none; position:absolute; width:28em; height:9.5em; z-index:15; top:0em; }
#kotakredit p { position:relative; top:0; left:0; margin:1em; }
#kotakredit p a { color:#a0a1a1; font-size:1.1em; font-family:"DroidSerifRegular", Georgia, Times New Roman, serif; }
#kotakredit ul { list-style-type:none; position:relative; margin:0; }
#kotakredit ul li { border:0; display:inline-block; margin:0; padding:0; }
#kotakredit ul li#alamat, #kotakredit ul li#facebook, #kotakredit ul li#twitter, #kotakredit ul li#rss { height:34px; line-height:34px; vertical-align:middle; }
#kotakredit ul li#facebook, #kotakredit ul li#twitter { width:45px; }
#kotakredit ul li#alamat { padding:0 1em 0 1em; }
#kotakredit ul li#alamat a { color:#bbb; text-decoration:underline; font-size:1.1em; }
#kotakredit ul li#alamat a:hover { color:#fff; }
#kotakredit ul li#facebook a, #kotakredit ul li#twitter a, #kotakredit ul li#rss a { width:45px; padding:0; height:34px; display:block; text-indent:-9999em; background:url('followus.png') no-repeat 0 -34px; }
#kotakredit ul li#facebook a:hover { background-position:0 0;}
#kotakredit ul li#twitter a { width:45px; height:34px; background-position:-45px -34px; }
#kotakredit ul li#twitter a:hover { background-position:-45px 0; }
#kotakredit ul li#rss a { width:45px; height:34px; background-position:-90px -34px; }
#kotakredit ul li#rss a:hover { background-position:-90px 0; }
Perhatikan gambar dibawah ini:
Penjelasan kode CSS hanya membahas tentang kunci dari efek saja, selebihnya silahkan jabarkan sendiri. Berikut penjelasannya :
  • Kode CSS pada #kredit hanya menentukan lebar (width) sebesar 28em dan tinggi (height) sebesar 13em dengan posisi (position) relative
  • Kode CSS pada #latarkredit justru menentukan tingginya (height) sebesar 0. Dengan nilai 0 ini berarti kotak tidak memiliki tinggi. Tinggi #latarkredit kemudian akan ditentukan pada kode jQuery pada bagian bawah.
  • Kode CSS pada #latarlinkredit juga menentukan lebar (width) sebesar 0, itu artinya kotak tidak memiliki lebar. Lebar #latarlinkredit kemudian akan ditentukan pada kode jQuery.
  • Jika diperhatikan kode CSS diatas maka #latarkredit harus meninggi sebesar 9.5em karena tinggi #latarlinkredit sudah ditentukan sebesar 3.5em. Jadi #latarkredit 9.5em + #latarlinkredit 3.5em = 13em. Nilai 13em sama dengan yang telah ditentukan pada tinggi (height) #kredit sebesar 13em. Maka efek jQuery harus diberi nilai tinggi untuk #latarkredit sebesar 9.5em. (Catat #latarkredit height : 9.5em)
  • Sedangkan #latarlinkredit belum ditentukan lebarnya (width). Jika merujuk pada kode #kredit maka lebarnya adalah 28em, maka #latarlinkredit juga harus diberi nilai sama yaitu 28em. (Catat #latarlinkredit width : 28em)

Skenario jQuery

(Ngaso rumiyen nek kroso mumet, monggo di unjuk kopi benter sampean sinambi ngeses... sueger!!!)
Dibawah ini adalah kode jQuery yang akan kita gunakan:
<script src='http://yandex.st/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.min.js' type='text/javascript'/>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {

$('#urlkredit > a').mouseenter(function() {
$('#latarlinkredit').show().stop().animate({width: '28em'}, 400, 'easeOutBounce', function() {
$(this).css("border-top","0");
$('#latarkredit').show().stop().animate({height: '9.5em'}, 400, 'easeOutBounce', function() {
$('#kotakredit').fadeIn(100);
});
});
});

$('#kredit').mouseleave(function() {
$('#kotakredit').stop().fadeOut(100);
$('#latarkredit').stop().animate({height: '0'}, 200, function() {
$(this).hide();
$('#latarlinkredit').stop().animate({width: '0'}, 200, function() {
$(this).hide();
$(this).css("border-top","1px solid #555759");
});
});
});

});
//]]></script>

Framework, Plugin dan Aturan Dasar
Ini adalah hal penting yang tidak boleh tertinggal dan hukumnya wajib untuk diikutsertakan dalam setiap menulis kode jQuery. Terdiri dari 3 bagian secara berurutan, yaitu framework jQuery, Plugin jQuery Easing dan aturan dasar penulisan kode jQuery.
<script src='http://yandex.st/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.min.js' type='text/javascript'/>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
<!-- tulis kode jQuery disini -->
});
//]]></script>

Ketika mouse berada diatas Link (mouseenter)
Perhatikan penjelasan kode berikut :
$('#urlkredit > a').mouseenter(function() {
Ketika mouse masuk kedalam link #urlkredit maka...
$('#latarlinkredit').show().stop().animate({width: '28em'}, 400, 'easeOutBounce', function() {
#latarlinkredit akan ditampilkan dan dihentikan dengan animasi melebar 28em selama 400 milidetik dengan efek pantul melebar (easeOutBounce) dan...
$(this).css("border-top","0");
Border top #latarlinkredit akan dihilangkan dengan nilai 0 dan dilanjutkan...
$('#latarkredit').show().stop().animate({height: '9.5em'}, 400, 'easeOutBounce', function() {
#latarkredit akan ditampilkan dan dihentikan dengan animasi meninggi 9.5em selama 400 milidetik dengan efek pantul meninggi (easeOutBounce) dan...
$('#kotakredit').fadeIn(100);
#kotakredit akan ditampilkan dengan efek fadeIn selama selama 100 milidetik
});
efek pada #latarkredit di tutup
});
efek pada #latarlinkredit di tutup
});
efek ketika mouse masuk ditutup

(Maem duren dese ah, ono tonggo panen duren, kecipratan 2 beton... trus ngeses karo ngopi... muantap...)

Ketika mouse meninggalkan link (mouseleave)
Perhatikan penjelasan kode berikut :
$('#kredit').mouseleave(function() {
Ketika mouse meninggalkan container #kredit maka...
$('#kotakredit').stop().fadeOut(100);
#kotakredit akan dihilangkan dengan efek fadeOut selama 100 milidetik kemudian...
$('#latarkredit').stop().animate({height: '0'}, 200, function() {
#latarkredit akan dihentikan dengan animasi menutup slidedown hingga tidak memiliki tinggi (height : 0) kemudian...
$(this).hide();
#latarkredit disembunyikan
$('#latarlinkredit').stop().animate({width: '0'}, 200, function() {
#latarlinkredit juga akan dihentikan dengan animasi memendek hingga lebarnya 0 (width : 0) kemudian...
$(this).hide();
#latarlinkredit disembunyikan kemudian...
$(this).css("border-top","1px solid #555759");
#latarlinkredit akan ditambahkan border-top sebesar 1px sebelum akhinya menghilang...
});
Animasi pada #latarlinkredit ditutup
});
Animasi pada #latarkredit ditutup
});
Animasi pada saat mouse meninggalkan container #kredit ditutup...

Demikian penjelasan panjang lebarnya. Mudah-mudahan bermanfaat dan selamat mencoba, semoga berhasil. Happy Blogging :)

Tuesday, December 13, 2011

Blogger Error bX-l4u1mh

Posted by dav On 1:31 AM
Tanggal 12 Desember 2011 banyak Blogger melaporkan telah terjadi galat pada template blogger dengan kode galat bX-l4u1mh. Hal ini muncul ketika Blogger masuk ke menu "Rancangan - Elemen Laman". Sampai dengan artikel ini ditulis, Blogger belum mengumumkan perbaikan (fix) terhadap terjadinya galat bX-l4u1mh tersebut. Terlihat dari blog Known Issues for Blogger yang menuliskan keterangan "Some users are reporting bX-l4u1mh when editing the Layout of their blog. We're investigating the issue and will report back as soon as we have more information." ditulis pada tanggal 12 Desember 2011.
Ini hanya perkiraan saja, galat bX-l4u1mh ini terjadi setelah Blogger melakukan perbaikan dan perubahan tampilan Blogger Profile. Mungkin ID dari perubahan tampilan profile tersebut belum bisa terhubung sempurna dengan ID Racangan - Elemen Laman dari Blogger sehingga terjadi galat bX-l4u1mh. Namun itu hanya perkiraan.
Blogger Profile

Solusi Sementara Untuk Mengatasi Blogger Error bX-l4u1mh

Langkah 1
Login ke Blogger dengan Browser Firefox
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Blogger Error bX-l4u1mh akan tampil seperti gambar dibawah ini:
Blogger Error bX-l4u1mh
Langkah 4
Logout (klik link Keluar) dari Blogger
Langkah 5
Login kembali ke Blogger dengan Browser Chrome
Langkah 6
Masuk ke "Racangan - Elemen Laman" seperti gambar dibawah ini:
Fix Blogger Error bX-l4u1mh
Langkah 7
Mudah-mudahan sampai disini error (galat) bX-l4u1mh telah teratasi dan silahkan lanjutkan kegiatan blogging anda...

Perhatian ! Intinya untuk mengatasi Blogger Error (galat) bX-l4u1mh kita harus menggunakan browser Google Chrome (Browser lain belum dicoba)... Hiks....