Tuesday, March 27, 2012

jQuery Author Threaded Comments Highlight

Setelah Blogger menambahkan fasilitas Threaded Comments, sangat sulit untuk membedakan antara komentar pengunjung dengan komentar author (penulis). Hal ini terjadi karena terjadi perubahan struktur dan kode yang digunakan antara komentar versi klasik dengan komentar versi threaded, namun bukan berarti tidak ada cara. Setelah Blogger Tune-Up meneliti kode-kode yang digunakan pada komentar versi threaded baik itu kode HTML maupun kode CSS-nya, maka cara-cara lama yang mengandalkan kode CSS sudah tidak bisa digunakan. Cara terbaik yang ditemukan Blogger Tune-Up adalah dengan melibatkan jQuery untuk memberikan sentuhan berbeda antara komentar pengunjung dengan komentar penulis/author, baik perbedaan warna latar, warna tulisan atau menambahkan background gambar. Mari kita telusuri...
jQuery Author Threaded Comments Highlight

Skenario HTML

Dibawah ini adalah kode HTML untuk threaded comment yang digunakan Blogger pada saat halaman artikel di load (panggil). Ini dilakukan untuk menidentifikasi tag bagian mana yang akan diberi sentuhan berbeda. Berikut kode yang digunakan Blogger:
<!-- Tag HTML dan Class threaded comment untuk author -->
<div class="comment-block">
<div class="comment-header">
<cite class="user blog-author">
<a href="/" rel="nofollow">Hendriono</a>
</cite>
<span class="icon user blog-author"></span>
<span class="datetime">
<a href="/" rel="nofollow">Mar 23, 2012 01:30 PM</a>
</span>
</div>
<p class="comment-content">Isi komentar Author</p>
</div>
<!-- Tag HTML dan Class threaded comment untuk pengunjung -->
<div class="comment-block">
<div class="comment-header">
<cite class="user">
<a href="/" rel="nofollow">Pengunjung</a>
</cite>
<span class="icon user"></span>
<span class="datetime">
<a href="/" rel="nofollow">Mar 23, 2012 03:30 PM</a>
</span>
</div>
<p class="comment-content">Isi komentar pengunjung</p>
</div>
Jika di teliti maka hanya ada satu perbedaan yang membedakan antara komentar pengunjung dengan komentar penulis. Perbedaan tersebut terletak pada class blog-author, jika pada komentar penulis menggunakan class="user blog-author" sedangkan pada pengunjung hanya menggunakan class="user". Sedangkan pada tag <p class="comment-content"> tidak dibedakan antara komentar pengunjung dengan komentar penulis, pada bagian inilah Blogger Tune-Up akan memberikan sentuhan untuk membedakan antara komentar penulis dengan komentar pengunjung. Silahkan diteliti untuk dikembangkan lebih lanjut.

Skenario CSS

Setelah diketahui dan ditemukan bagian yang akan diberikan sentuhan berbeda maka selanjutnya kita persiapkan kode CSS untuk membedakan komentar penulis dengan komentar pengunjung. Blogger Tune-Up menuliskan kode CSS seperti di bawah ini, namun silahkan berkreasi sesuai dengan imajinasi anda.
.author-highlight {
background-image: url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);
background-repeat: no-repeat;
background-position: 100% 100%;
background-color: #F0F0F0;
}
Pada kode CSS ini anda bisa menambahkan property lain, baik itu border, color, font dan lain sebagainya. Silahkan berkreasi...

Skenario jQuery

Setelah kode CSS ditulis, selanjutnya adalah menyisipkan kode CSS tersebut pada skenario HTML yang telah dijelaskan di atas. Blogger Tune-Up kebetulan ingin menyisipkan class author-highlight pada tag HTML <p class="comment-content">, maka kode jQuery di tulis seperti dibawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('.user.blog-author').closest('.comment-block').find('p.comment-content').addClass('author-highlight');
});
//]]></script>
Namun jika anda ingin memberikan sentuhan berbeda pada tag <div class="comment-block"> maka kode jQuery di tulis seperti dibawah ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('.user.blog-author').closest('.comment-block').addClass('author-highlight');
});
//]]></script>
Nah sekarang, silahkan berkreasi dengan imajinasi yang anda miliki dan kembangkan lebih cantik dan menarik lagi...

Integrasi jQuery Author Threaded Comments Highlight

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Edit HTML
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3 (Lihat Skenario CSS):
.author-highlight {
background-image: url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);
background-repeat: no-repeat;
background-position: 100% 100%;
background-color: #F0F0F0;
}
Langkah 5
Cari kode dibawah ini:
</head>
atau kode:
</body>
Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5 (Lihat Skenario jQuery):
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
$('.user.blog-author').closest('.comment-block').addClass('author-highlight');
});
//]]></script>
Langkah 7
Simpan template anda dan preview blog...

Selamat mencoba dan semoga berhasil. Happy Blogging :)
Continue reading ...

Saturday, March 3, 2012

Percantik Sidebar Komentar Versi 2.0

Satu tahun yang lalu Blogger Tune-Up pernah membuat widget komentar yang berfungsi untuk menampilkan komentar para pengunjung dengan bantuan JSON. Namun, widget tersebut belum bisa menampilkan avatar/gravatar pengujung yang meninggalkan komentar. Beauty Recent JSON Comments Sidebar 2.0 adalah penyempurnaan dari widget sidebar sebelumnya, yang telah mampu menampilkan avatar pengunjung. Selain mampu menampilkan avatar pengunjung, ketika kita mengarahkan mouse pada avatar maka akan muncul tooltips cantik yang menampilkan nama komentator. Tooltips ini tidak menggunakan jQuery tapi murni menggunakan CSS Level 3, dengan animasi yang tidak kalah menariknya dengan jQuery.
Widget Komentar dengan Avatar

Memasang Widget Komentar Dengan Avatar

Dibawah ini langkah-langkah pemasangan widget komentar dengan avatar pada sidebar. Blogger Tune-Up menyedia 2 jenis style dan pada langkah ini style yang digunakan merupakan style dengan warna yang telah diset. Sedangkan untuk style yang tanpa warna (menyesuaikan dengan template) disediakan pada bagian bawah langkah ini.
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Tambah Widget/Gadget baru dengan type "HTML/JavaScript"
Langkah 4
Masukan (copy paste) kode dibawah ini pada bagian "Konten":
<style type="text/css">
#komentar {
background:#3eb5da;
margin:0;
padding:0;
border:1px solid #0971C8;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li:first-child {
border-top:none;
}
#komentar ul li {
height:46px;
border-bottom:1px solid #0971C8;
border-top:1px solid #CCCCCC;
padding:2px 0;
list-style:none;
}
#komentar ul li:last-child {
border-bottom: none;
}
#komentar ul li:hover {
background-color:#7BC4DF;
}
#komentar a,
#komentar a:link,
#komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #ffffff;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
box-shadow: 0 1px 2px #222222;
}
#komentar ul li div.ismen {
color:#ffffff;
text-shadow:-1px -1px 1px #0971C8;
}
#komentar .ismen {
display: block;
font-size: 1em;
font-style: italic;line-height: 1.2;
padding: 2px 4px 2px 0;
}
#komentar .gamen>span{
width: 150px;
height: auto;
line-height: 20px;
padding: 5px;
left: 115px;
margin-left: -64px;
font-size: 1em;
font-weight:bold;
color: #212121;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #0971C8;
background: rgba(255,255,255,0.7);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #0971C8;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
</style>
<div id='komentar'>
<ul>
<script type='text/javascript'>
//<![CDATA[
var jmlkomentar = 20;
var jmlkarakter = 60;
//]]></script>
<script type="text/javascript" src="http://henscripts.googlecode.com/svn/trunk/json.comments.min.js"></script>
<script type="text/javascript" src="http://modification-blog.blogspot.com/feeds/comments/default?alt=json&callback=tampilkankomentar"></script>
</ul>
</div>
Perhatian :
  • Ubahlah alamat blog (modification-blog.blogspot.com) sesuai dengan alamat blog anda.
  • var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang akan ditampilkan.
  • var jmlkarakter = 60; ubah nilai 60 untuk menentukan jumlah karakter yang akan ditampilkan (termasuk spasi).
Langkah 5
Simpan Widget dan preview blog anda...

Widget Komentar Dengan Avatar Tanpa Style

Jika kode di atas (lihat Langkah 4) akan menghasilkan tampilan yang memiliki style tersendiri, maka kode dibawah merupakan kode yang tanpa style. Ketika dipasangkan pada sidebar maka bentuk dan posisi akan mengikuti style default yang digunakan oleh blog anda. Untuk menggunakan kode dibawah ini, ganti saja kode pada Langkah 4 dari tag <style type="text/css"> sampai dengan tag </style>. Berikut kode CSS Widget Komentar Dengan Avatar Tanpa Style:
<style type="text/css">
#komentar {
margin:0;
padding:0;
}
#komentar ul{
margin:0;
padding:0px;
list-style: none;
}
#komentar ul li {
height:46px;
margin:0 !important;
padding:4px 0 !important;
display:block;
clear:both;
list-style:none;
}
#komentar ul li:last-child {
border-bottom:none;
}
#komentar ul li:hover {
background-color:#ccc;
}
#komentar a, #komentar a:link, #komentar a:visited {
clear:both;
color:#222;
display:block;
text-decoration:none;
text-shadow:0 1px 0 #ccc;
}
#komentar .gamen {
display: block;
float: left;
height: 42px;
left: 4px;
margin-right: 15px;
position: relative;
width: 42px;
}
#komentar .gamen>img {
border: 2px solid #fefefe;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
-webkit-box-shadow:0 1px 2px #222;
-moz-box-shadow:0 1px 2px #222;
box-shadow:0 1px 2px #222;
}
#komentar .gamen>span{
width: 150px;
height: auto;
line-height: 20px;
padding: 5px;
left: 115px;
margin-left: -64px;
font-size: 1em;
font-weight:bold;
color: #212121;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid #ccc;
background: rgba(255,255,255,0.7);
text-indent: 0px;
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#komentar .gamen>span:before,
#komentar .gamen>span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
#komentar .gamen>span:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid #ccc;
}
#komentar .gamen:hover>span{
opacity: 0.9;
bottom: 55px;
}
#komentar .ismen {
display: block;
font-size: 1em;
line-height: 1.2;
padding: 2px 4px 2px 0;
}
</style>

Kode CSS Widget Komentar Yang Dipadatkan

Dibawah ini kode CSS Level 3 untuk widget komentar beravatar yang dipadatkan. Silahkan anda ganti kode CSS diatas dengan kode CSS dibawah ini agar lebih pendek dan sederhana. Dan silahkan anda berekspresi dan modifikasi kode CSS tersebut sesuai kebutuhan.
Style
<style type="text/css">
#komentar {background:#3eb5da;margin:0;padding:0;border:1px solid #0971C8;}
#komentar ul{margin:0;padding:0px;list-style: none;}
#komentar ul li:first-child {border-top:none;}
#komentar ul li {height:46px;border-bottom:1px solid #0971C8;border-top:1px solid #CCCCCC;padding:2px 0;list-style:none;}
#komentar ul li:last-child {border-bottom: none;}
#komentar ul li:hover {background-color:#7BC4DF;}
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;}
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img {border: 2px solid #ffffff;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;box-shadow: 0 1px 2px #222222;}
#komentar ul li div.ismen {color:#ffffff;text-shadow:-1px -1px 1px #0971C8;}
#komentar .ismen {display: block;font-size: 1em;font-style: italic;line-height: 1.2;padding: 2px 4px 2px 0;}
#komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid #0971C8;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 100px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
#komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid #0971C8;}
#komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
</style>
Non Style
<style type="text/css">
#komentar {margin:0;padding:0;}
#komentar ul{margin:0;padding:0px;list-style: none;}
#komentar ul li {height:46px;margin:0 !important;padding:4px 0 !important;display:block;clear:both;list-style:none;}
#komentar ul li:last-child {border-bottom:none;}
#komentar ul li:hover {background-color:#ccc;}
#komentar a, #komentar a:link, #komentar a:visited {clear:both;color:#222;display:block;text-decoration:none;text-shadow:0 1px 0 #ccc;}
#komentar .gamen {display: block;float: left;height: 42px;left: 4px;margin-right: 15px;position: relative;width: 42px;}
#komentar .gamen>img {border: 2px solid #fefefe;-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 22px;-webkit-box-shadow:0 1px 2px #222;-moz-box-shadow:0 1px 2px #222;box-shadow:0 1px 2px #222;}
#komentar .gamen>span{width: 150px;height: auto;line-height: 20px;padding: 5px;left: 115px;margin-left: -64px;font-size: 1em;font-weight:bold;color: #212121;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);text-align: center;border: 4px solid #ccc;background: rgba(255,255,255,0.7);text-indent: 0px;border-radius: 5px;position: absolute;pointer-events: none;bottom: 100px;opacity: 0;box-shadow: 1px 1px 2px rgba(0,0,0,0.2);-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
#komentar .gamen>span:before, #komentar .gamen>span:after{content: '';position: absolute;bottom: -15px;left: 50%;margin-left: -9px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid rgba(0,0,0,0.1);}
#komentar .gamen>span:after{bottom: -14px;margin-left: -10px;border-top: 10px solid #ccc;}
#komentar .gamen:hover>span{opacity: 0.9;bottom: 55px;}
#komentar .ismen {display: block;font-size: 1em;line-height: 1.2;padding: 2px 4px 2px 0;}
</style>
Selamat mencoba dan semoga berhasil. Happy Blogging :)
Continue reading ...

Sunday, February 26, 2012

Fix Problem Reply Threaded Comments

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 :)
Continue reading ...

Friday, December 16, 2011

Autolink Mini MP3 Player for Blogger Version 2.0

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 :)
Continue reading ...

Thursday, December 8, 2011

Menambahkan Widget Page Loading Time

Kali ini kita akan membuat script Page Loading Time. Page Loading Time atau Waktu Pemuatan Halaman merupakan perangkat bantu untuk mengetahui waktu yang dibutuhkan untuk memanggil keseluruhan halaman dari suatu halaman situs atau blog. Dengan widget ini kita bisa mengetahui kecepatan load halaman blog, ini akan memicu pengelola blog untuk mengoptimasi blognya agar lebih cepat. Langkah-langkah untuk mengoptimasi blog akan dibahas pada artikel berikutnya. Satuan yang akan digunakan adalah milidetik jadi jika anda ingin menggunakan satuan waktu menit kira-kira bagaimana ya? Mari kita coba memasang script page loading time.
Page Loading Time

Memasang Script Page Loading Time

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script type='text/javascript'>//<![CDATA[
var now = new Date();
window.onload = function() {
document.getElementById("waktuload").style.display = "block";
document.getElementById("milidetik").innerHTML = (new Date()).getTime() - now.getTime();
}
//]]></script>
Langkah 5
Cari kode dibawah ini:
<body>
Langkah 6
Sisipkan kode dibawah ini:
id="waktuload"
pada kode langkah 5, sehingga menjadi seperti dibawah ini:
<body id="waktuload">
Langkah 7
Tempatkan kode dibawah ini dimana saja sesuai dengan keinginan anda
Loading time <span id='milidetik'/> ms
Perhatian : Kode diatas akan menampilkan waktu pemuatan halaman yang sedang anda lihat.
Langkah 8
Simpan template dan preview blog anda....

Selamat mencoba dan semoga berhasil. Happy Blogging :)
Continue reading ...

Thursday, November 24, 2011

Membuat Gadget Status Twitter (Plugin Twitter JS)

Membuat gadget untuk menampilkan status Twitter sebenarnya pernah dibahas pada artikel sebelumnya, namun pada tips trik blog kali ini kita akan mencoba memanfaatkan plugin JavaScript yang dibuat oleh remysharp.com. Dengan menggunakan plugin Twitter JS proses pembuatan widget untuk menampilkan status Twitter menjadi sangat mudah, sederhana dan menarik. Plugin Twitter JS memberikan kesempatan penggunanya untuk membuat style yang sesuai dengan keinginan, lebih menarik serta bukan hanya untuk menampilkan status Twitter kita namun bisa juga digunakan untuk menampilkan status orang lain, atau status kumpulan orang lain yang sudah kita kelompokan.
Plugin Twitter JS
Untuk menambahkan gadget status Twitter pada blog dengan menggunakan plugin Twitter JS, maka ada 3 kelompok kode yang akan digunakan, yaitu sebagai berikut:
Kode JavaScript
Kode JavaScript ini digunakan untuk memanggil status dari server Twitter sesuai dengan id penggunanya. Jika anda ingin menggunakan hosting sendiri, silahkan download file JavaScript Twitter JS disini.

Script Dasar
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>

Settings Option JavaScript
Dibawah ini adalah option untuk mengeset bagian yang akan di tampilkan dari status Twitter. Tidak semua option dibawah ini harus diikut sertakan.
  • id : nama tampilan anda pada twitter, misal nama tampilan saya "dedehendriono". id juga dapat juga diganti dengan daftar (list) dari status orang-orang yang sudah kita kumpulkan (dalam format user/nama-daftar, misal dedehendriono/motivator) atau dapat juga disini hash tag.
  • count : jumlah status twitter yang ingin ditampilkan, secara default di isi 1.
  • clearContents : true/false - jika anda memiliki isi didalam sebuah wadah maka kita bisa memindah bariskannya. Secara default adalah true
  • enableLinks : true/false - untuk memeriksa tweet yang mengandung link dan membuatnya bisa di klik, termasuk @balasan dan#hashtag. Secara default adalah true.
  • ignoreReplies : true/false - tetap menampilkan tweet yang dimulai dengan @. Jika permintaan 1 tweet, dan flag ini di set, dibelakang layar ia akan meminta 2 dengan kasus yang pertama dimulai dengan @. Tetapi jika permintaan lebih dari 2 balasan, maka tidak akan ditampilkan.
  • withFriends : true/false - apakah akan menyertakan tweet dari teman. Secara defaults di set false.
  • template : HTML template digunakan dalam setiap elemen li. Lihat variabel template dibawah.
  • prefix : jika tidak menggunakan template, anda dapat menggunakan set ini. Misal kita ingin menambahkan 'Hendriono berkata:'. Disini juga anda bisa saja menambahkan variabel template.
  • timeout : nilai dalam milidetik sebelum memicu onTimeout. Jika onTimeout diatur, batas waktu default adalah 10 detik.
  • onTimeout : fungsi untuk panggilan ketika batas waktu tercapai. Konteks diatur ke tweet elemen HTML yang akan dimasukkan ke dalamnya.
  • onTimeoutCancel : true/false - jika tidak di atur maka tidak ada batasan picu, namun script Twitter akan dapat dipanggil secara lengkap dan tidak ada pembatalan. Untuk menghindari hal ini, ditetapkan onTimeoutCancel = true. Set default adalah true.
  • newwindow: true/false - jika di set true, semua link didalam tweet (tidak terkecuali) akan dibuka pada sebuah jendela baru. Set defaults adalah false.
  • callback - fungsi untuk memanggil ketika twitter telah sempurna di render. Tidak ada batasan waktu.

Variabel Template
Semua variabel harus diapit oleh simbol% (lihat contoh di atas atau dibawah).
  • text - pesan status yang akan ditampilkan
  • id_str - id dari pesan status (catatan bahwa id telah digunakan sebelumnya, tapi untuk mendapatkan id yang benar, Anda perlu menggunakan id_str)
  • time - waktu relatif
  • created_at - waktu baku
  • user_name - nama asli
  • user_screen_name - nama tampilan
  • user_id_str - id pengguna
  • user_profile_image_url - gambar avatar pengguna sesuai id
  • user_url - alamat (link url) pengguna sesuai id
  • user_location - lokasi pengguna sesuai id
  • user_description - deskripsi pengguna sesuai id

Kode HTML
Kode HTML dibawah ini digunakan sebagai wadah (container) untuk menampilkan status twitter.
<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>
Kode CSS
Kode CSS dibawah ini hanyalah contoh. Anda bisa saja berkreasi menurut imajinasi anda.
#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHrtIfXiUEgnrZk8zn-mcP7CNaRpQrSAYMbtS6PDnYdzIaVPTS3tZnky3CXJ94KKmpd4Sv3IDK9vwt6Y-Ioum79-I6n7QyofJ1N9Uu8Eas7jMuV-l-o_jlJ6ZUEuexqqtlHZTOOeLFeokx/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}

Gadget Status Twitter dengan Twitter JS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih gadget "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada kotak "Konten":
<style>
#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHrtIfXiUEgnrZk8zn-mcP7CNaRpQrSAYMbtS6PDnYdzIaVPTS3tZnky3CXJ94KKmpd4Sv3IDK9vwt6Y-Ioum79-I6n7QyofJ1N9Uu8Eas7jMuV-l-o_jlJ6ZUEuexqqtlHZTOOeLFeokx/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}
</style>
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>
<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>
Perhatian! Kode diatas hanyalah contoh, silahkan anda berkreasi dengan Twitter JS
Langkah 5
Klik tombol "SIMPAN" dan preview blog anda...

Selamat mencoba dan semoga berhasil... Happy Blogging :)

Special thanks to remysharp.com for Twitter JS Plugin
Continue reading ...

Friday, November 11, 2011

Tampilkan Sembunyikan Isi dan Form Komentar

Kembali lagi menulis setelah sekian lama bersemedi. Kali ini Blogger Tune-Up akan mengawali artikel terbaru di Blog ini dengan tips dan trik jQuery sederhana. Sebenarnya sudah banyak para Blogger yang membahas hal ini, namun sebagian besar menggunakan form komentar dari pihak ketiga seperti DisqUs atau IntenseDebate. Sedangkan form bawaan Blogger dinonaktifkan hal tersebut dengan beberapa alasan diantaranya form komentar bawaan Blogger tidak valid XHTML dan menggunakan metode iframe sehingga kurang fleksibel dalam memodifikasi tampilannya. Terlepas dari alasan-alasan tersebut, Blogger Tune-Up tetap akan membahas cara menyembunyikan dan menampilkan isi komentar dan form komentar bawaan Blogger dengan satu tombol yang terekam melalui jQuery Cookie. jQuery Cookie digunakan untuk merekam tingkah laku pengunjung blog terhadap tombol show/hide comment. Ketika pengunjung me-load halaman pertama kalinya dan cookie browser kosong (null) maka isi komentar dan kotak komentar akan disembunyikan, sebuah tombol "Show" akan ditampilkan.
Ketika tombol "Show" ditampilkan maka isi komentar dan form komentar akan ditampilkan, sebuah tombol "Hide" akan ditampilkan. Pada saat pengunjung meng-klik tombol "Show" maka browser akan menyimpan cookie, sehingga ketika pengunjung berulang-ulang kali berpindah halaman atau bahkan keluar dari browser dan kemudian kembali lagi mengunjungi blog maka isi komentar dan form komentar akan tetap terbuka. Namun ketika pengunjung mengklik tombol "Hide" maka isi komentar dan form komentar akan disembunyikan dan cookie pada browser akan dihapus. Hal ini karena jQuery Cookie merekam dan menyimpan tingkah laku pengunjung terhadap tombol "Show Hide Comment". Cara ini cocok bagi Blogger yang menggunakan metode Captcha untuk mengurangi spam pada komentar.

Menambahkan Tombol Tampilkan Sembunyikan Isi dan Form Komentar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Klik "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
]]></b:skin>
Langkah 5
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 4:
.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top, #444, #000);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top, #000, #444);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}
Langkah 6
Cari kode dibawah ini:
</head>
Langkah 7
Masukan (copy paste) kode, plugin dan framework jQuery dibawah ini diatas kode pada langkah 6:
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
jQuery('#bukakeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
display: 'none'
});
jQuery('#tutupkeun').show();
jQuery.cookie('komen', 1);
return false
});
jQuery('#tutupkeun').click(function () {
jQuery('#comments').slideToggle('slow');
jQuery(this).css({
display: 'none'
});
jQuery('#bukakeun').show();
jQuery.cookie('komen', null);
return false
});
if (jQuery.cookie('komen') == 1) {
jQuery('#comments').show();
jQuery('#bukakeun').hide()
} else {
jQuery('#comments').hide();
jQuery('#tutupkeun').hide()
}
});
//]]></script>
Langkah 8
Cari kode dibawah ini:
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
Langkah 9
Masukan (copy paste) kode XHMTL dibawah ini diatas kode pada langkah 8:
<button class='tombol black' id='bukakeun'>Click here for show comment</button>
<button class='tombol black' id='tutupkeun'>Click here for hide comment</button>
Sehingga menjadi seperti ini:
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<button class='tombol black' id='bukakeun'>Click here for show comment</button>
<button class='tombol black' id='tutupkeun'>Click here for hide comment</button>
</b:includable>
Langkah 10
Simpan template dan preview blog anda...

Keterangan:
Jika anda sudah pernah memasang framework jQuery (pada langkah 7 baris 1) maka framework jQuery tidak perlu diikutsertakan...

Selamat mencoba semoga berhasil... Happy Blogging... :)
Continue reading ...

Friday, June 17, 2011

Autolink Mini MP3 Player for Blogger

Bismillah. Alhamdulillah. Selesai juga coding JavaScript untuk fasilitas "Autolink Mini MP3 Player" yang diperuntukan bagi pengguna setia Blogger. Script ini tidak pernah di coba diselain Blogger, jadi bagi mereka yang menggunakan platform lain, mohon ma'af sekali. Tapi tidak ada salahnya dicoba, mungkin saja bisa digunakan. Script Autolink Mini MP3 Player sangat cocok digunakan bagi mereka yang suka berbagi file-file musik MP3. Script ini sebenarnya penyederhanaan dari MP3 Player yang pernah dibahas pada artikel sebelumnya. Karena script yang sebelumnya masuk dalam kategori rumit dan ukuran file yang besar membuat beban untuk loading blog menjadi bertambah, ujung-ujungnya blog menjadi agak lambat. Untuk itulah code JavaScript-nya dikurangi dan diperbaiki beberapa kodenya agar menjadi lebih sederhana dan lebih ringan untuk digunakan pada blog sehingga tidak menambah berat loading blog. Makanya nama fasilitas MP3 Player ini adalah Autolink Mini MP3 Player for Blogger.

Kelebihan Autolink Mini MP3 Player

  • Autolink artinya script ini secara otomatis akan mendeteksi file-file MP3 yang terdapat pada halaman blog yang sedang dibuka
  • Tidak diperlukan kemampuan khusus untuk menambahkan MP3 player, cukup masukan link file MP3-nya saja pada artikel
  • Otomatis menambahkan player pada file MP3 yang terdapat pada halaman blog tanpa harus mengotak-atik kode sumber
  • Ukuran kode JavaScript sangat kecil hanya 2.15 Kilobyte sehingga lebih ringan untuk loading blog
  • Otomatis tersedia link untuk mendownload file MP3 yang disertakan pada blog
  • Pemasangan script Autolink Mini MP3 Player pada template sangat mudah
  • Tampilan MP3 Player berbasis flash yang sangat sederhana dan menarik karena menggunakan Audio Player 1 Pixelout Versi 2 buatan Martin Laine
  • Dan apa lagi ya? Silahkan dicoba sendiri, keluhan, kesalahan, dan lain-lain tinggalkan pada komentar

Kelemahan Autolink Mini MP3 Player

  • Tidak menggunakan autoplay karena saya secara pribadi tidak begitu suka dengan blog-blog yang memasang "autoplay MP3 in background"
  • Tidak bisa bekerja sempurna untuk blog yang memasang tag body onload pada template-nya
  • Hanya menggunakan satu jenis player

Integrasi Autolink Mini MP3 Player

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
atau
</body>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script type='text/javascript' src='https://sites.google.com/site/henscripts/jscript/minimp3player.js'/>
Langkah 5
Simpan Template....

Menambahkan File MP3 pada Artikel Blog

Langkah 1
Buatlah sebuah artikel blog dan ketikan judul lagu/file MP3 pada editor blog
Langkah 2
Blok (Highlight) judul lagu/file MP3 tersebut kemudian klik toolbar "Tautan"
Langkah 3
Masukan link lagu/file MP3 pada kotak "Masukan URL" lalu klik tombol OK
Langkah 4
Terbitkan artikel dan preview blog anda...
Langkah 5
Klik tombol "Play" dan dengarkan lagunya...
Buffering-kan? Berarti anda harus berlangganan internet dengan bandwidth internet yang lebih cepat...

Selamat mencoba dan semoga berhasil. Happy Blogging :)
Continue reading ...

Sunday, May 29, 2011

Percantik Sidebar Komentar (JSON)

Bismillah. Disela-sela tahap penyembuhan dari sakit yang cukup lama dan disela-sela kesibukan dalam proses penyusunan buku, Alhamdulillah satu widget selesai dikembangkan. Widget ini sebenarnya bisa kita peroleh melalui widget bawaan Blogger namun bagi mereka yang suka utak-atik hal ini bisa menjadikan satu nilai plus untuk mempercantik sidebar anda. Sidebar ini digunakan untuk menampilkan komentar dari para pembaca blog kita. Yang menarik dari sidebar komentar ini yaitu bisa menampilkan nama user yang memberi komentar dan juga isi dari komentar tersebut, sehingga kita bisa dengan cepat menyetahui siapa sahabat blogger yang sudah memberi komentar. Widget ini masih melibatkan bahasa pemrograman JSON yang memanfaatkan Feed dari blogger sehingga proses pemanggilan (loading) lebih cepat dan ringan. Mau mencoba? Silahkan lanjutkan membaca jika malas jangan di tutup blog ini cari lagi artikel lain mungkin anda menemukan sesuatu yang menarik... (agak ngelantur)

Integrasi JSON Sidebar Comments Pada Template

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
/* Sidebar Komentar JSON */
#komentar {
background: #3eb5da; //warna dasar
margin: 0;
padding: 0;
border: 1px solid #0971C8; //garis pinggir kotak gadget komentar
}
#komentar ul {
margin: 0;
padding: 0; //jarak ke pinggir kotak gadget komentar
}
#komentar ul li: first-child {
border-top: 0 none aqua;
}
#komentar ul li {
border-top: 1px solid #CCC; //garis sekat atas
border-bottom: 1px solid #0971C8; //garis sekat bawah
padding: 2px 0;
list-style: none;
}
#komentar ul li: last-child {
border-bottom: 0 none aqua;
}
#komentar ul li span {
background-position: 2px 2px;
float: left;
height: 16px;
margin-right: 5px;
width: 16px;
}
#komentar ul li b {
color: #ffffff; //warna huruf nama komentator
text-shadow: -1px -1px 1px #3196BA;
}
#komentar ul li: hover {
background-color: #CCC; //warna latar ketika mouse diatasnya
}
#komentar a, #komentar a: link, #komentar a: visited {
clear: both;
color: #FFF; //warna huruf isi komentar
display: block;
padding-left: 20px;
text-decoration: none;
}
#komentar a: hover {
color: #333; //warna huruf ketika mouse diatasnya
}
.komen {
background: transparent url(https: //lh5.googleusercontent.com/_xcD4JK_dIjU/TcA0b1eB4sI/AAAAAAAAFGQ/MlIzrpydae0/s800/top_rss.png) no-repeat 0 0; //icon komentar
}
Langkah 5
Cari kode dibawah ini:
</head>
Langkah 6
Masukan (copy paste) kode JavaScript dibawah ini diatas kode pada langkah 5:
<script type='text/javascript'>
//<![CDATA[
/*
Beauty JSON Commentator Sidebar 1.0 (May 29, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
var jmlkomentar = 20;
var jmlkarakter = 80;
function tampilkankomentar(json) {
var entry, urlkomentar, isikomentar, lihatkomentar;
for (var i = 0; i < jmlkomentar; i++) {
entry = json.feed.entry[i];
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
urlkomentar = entry.link[k].href;
break
}
}
urlkomentar = urlkomentar.replace("#", "#comment-");
if ("content" in entry) {
isikomentar = entry.content.$t
} else if ("summary" in entry) {
isikomentar = entry.summary.$t
} else {
isikomentar = ""
}
var re = /<\S[^>]*>/g;
isikomentar = isikomentar.replace(re, "");
if (isikomentar.length > jmlkarakter) {
isikomentar = isikomentar.substring(0, jmlkarakter) + "…"
}
lihatkomentar = "<li>";
lihatkomentar += "<span class='komen'></span><b>" + entry.author[0].name.$t + "</b>";
lihatkomentar += "<a rel='nofollow' href='" + urlkomentar + "'>" + isikomentar + "</a>";
lihatkomentar += "</li>";
document.write(lihatkomentar)
}
}
//]]>
</script>
Langkah 7
"SIMPAN TEMPLATE" dan lanjutkan...

Integrasi JSON Sidebar Comments pada Gadget

Langkah 8
"Tambah Gadget" dengan tipe "HTML/JavaScript"
Langkah 9
Masukan (copy paste) kode dibawah ini didalam konten dan jangan lupa beri Judul Gadget:
<div id="komentar">
<ul>
<script src="/feeds/comments/default?alt=json-in-script&callback=tampilkankomentar"></script>
</ul>
</div>
Langkah 10
"SIMPAN" Gadget dan preview blog anda...

Keterangan:
  • var jmlkomentar = 20; ubah nilai 20 untuk menentukan jumlah komentar yang ingin ditampilkan
  • var jmlkarakter = 80; Ubah nilai 80 untuk menentukan jumlah karakter isi komentar yang ingin ditampilkan

Bagaimana menurut anda? Cantik bukan? Selamat mencoba dan semoga berhasil... Happy Blogging :)
Continue reading ...

Monday, May 2, 2011

Artikel Terkait dengan Gambar Mini dan Ringkasan

Alhamdulillah. Widget artikel terkait yang dilengkapi gambar mini (thumbnail image) dan ringkasan artikel (summary content) telah selesai dibuat, mungkin jika di tulis dalam bahasa Inggris menjadi Related Post with Thumbnail Image and Summary Content. Diantara artikel terkait yang pernah Blogger Tune-Up tulis dan coba, versi ini merupakan versi yang sangat menguras waktu, selain tingkat kerumitannya yang cukup tinggi juga kurangnya pengetahuan penulis tentang bahasa JSON Feed sehingga proses penulisan script cukup dan bahkan memakan waktu yang sangat lama. Dari sisi tampilan dan kelengkapan, versi ini sangat berbeda jauh dengan yang lainnya dan bahkan boleh dikatakan memiliki fitur yang sama persis dengan yang dikembangkan oleh para pengguna Wordpress. Versi ini masih menggunakan inti JSON Feed dan merupakan gabungan dari Membuat Artikel Terkait (Versi 3.0) dan jQuery News Ticker Recent Post Plus Thumbnails. Namun untuk versi Related Post Ticker with Thumbnail and Summary akan dituliskan dalam artikel terpisah, hal ini untuk mempermudah pemahaman, penerapan dan penggunaannya, juga untuk mengurangi kesalahan penerapan pada template blogger.

Fasilitas Artikel Terkait dengan Gambar Mini dan Ringkasan Artikel

Artikel terkait dengan fasilitas gambar mini dan ringkasan artikel (Related Post with Thumbnail Image and Summary Content) ini memiliki beberapa kelengkapan yang sangat menarik diantaranya:
  • Menggunakan bahasa JSON Feed turunan JavaScript
  • Mampu menampilkan gambar yang diambil gambar yang diupload pada artikel
  • Jika artikel tidak mengandung gambar maka gambar akan digantikan dengan gambar default yang sudah dituliskan pada script
  • Mampu menampilkan ringkasan artikel sehingga mempermudah para pengunjung untuk menemukan artikel terkait yang dibutuhkan
  • Artikel terkait ini kedepannya akan dikembangkan dalam versi Ticker dan versi Accordion yang tentunya menggunakan sentuhan animasi jQuery
  • Lebih ringan karena versi ini hanya akan diload pada saat artikel yang dituju sedang dibuka, sedangkan pada saat membuka halaman utama script ini tidak akan diload
  • Konfigurasinya sangat mudah
  • Blog lebih tampak profesional

Integrasi Artikel Terkait dengan Gambar Mini dan Ringkasan Artikel

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
line-height: 16px;
}
#relpost_img_sum:hover {
background: none;
}
#relpost_img_sum ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#relpost_img_sum li {
border: 1px solid #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}
#relpost_img_sum li:hover {
background-color: #E6E6E6;
}
#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}
#relpost_img_sum .news-text {
display: block;
text-align: justify;
font-weight: normal;
text-transform: none;
color: #333;
}
#relpost_img_sum img {
float: left;
margin-right: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (May 02, 2011)
copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... [<a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a>]<17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnojudul|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>
Langkah 6
Cari kode dibawah ini (rekomendasi) :
<div class='post-footer-line post-footer-line-3'/>
atau kode dibawah ini (alternatif) :
<data:post.body/>
Langkah 7
Ubah kode pada langkah 6 (jika menggunakan kode rekomendasi) menjadi seperti dibawah ini:
<div class='post-footer-line post-footer-line-3'>
<!-- Untuk kode artikel terkait -->
</div>
Langkah 8
Masukan (copy paste) kode dibawah ini menggantikan kode <!-- Untuk kode artikel terkait --> pada langkah 7:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts</h4>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://modification-blog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>
Jika anda menggunakan kode alternatif (lihat langkah 6), masukan (copy paste) kode diatas, dibawah kode <data:post.body/>.
Langkah 9
Simpan template blogger
Langkah 10
Preview blog anda...

Keterangan:
  • var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
  • var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
  • var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
  • var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik
Tunggu artikel terkait dengan tampilan yang lebih menarik dan animasi cantik pada artikel mendatang. Selamat mencoba dan semoga berhasil. Happy Blogging :)
Continue reading ...

Monday, April 18, 2011

Animasi CD/DVD Promosi dengan CSS 3

CSS atau Cascading Style Sheet telah mengalami perkembangan yang semakin hari semakin menakjubkan. Animasi yang sebelumnya di dominasi oleh file-file flash sekarang sudah mulai ditinggalkan dan para profesional desainer web beralih pada penggunaan jQuery dan CSS 3 sebagai animasi pada tampilan website yang dibuatnya. Selain ukuran file lebih kecil sehingga waktu load halaman lebih cepat juga proses penulisan script yang semakin hari semakin sederhana namun tanpa berpengaruh pada hasil akhir yang tetap menakjubkan. Bagi para pemula yang baru saja berkecimpung di dunia web desain mungkin agak sulit untuk membedakan mana animasi yang dihasilkan dari flash dan mana animasi yang dihasilkan dari jQuery atau CSS 3.
Pada artikel kali ini Blogger Tune-Up tidak akan menyuguhkan animasi menggunakan jQuery tetapi kita akan mengeksplorasi kekuatan CSS 3 dalam menciptakan dan menampilkan animasi pada website. Walaupun hanya menggunakan CSS 3 namun hasilnya sangat menawan dan menarik perhatian sehingga tampilan website akan tampak lebih dinamis dan hidup. Bagaimana animasi CD/DVD promosi ini bekerja? Ketika kita mengarahkan pointer mouse pada cover CD/DVD maka cover akan bergerak kesamping agak miring beberapa derajat. Sedangkan kepingan cakram CD/DVD akan berputar keluar dari cover-nya. Ketika kita menggeser pointer mouse keluar dari cover CD/DVD maka cover akan kembali pada posisi semula. Sedangkan kepingan cakram CD/DVD akan berputar dan masuk kedalam cover-nya.
Penasaran ingin mencoba? Lihat demonya pada link dibawah ini dan rasakan kekuatan animasi yang dihasilkan walaupun hanya menggunakan CSS 3.

Integrasi kode CSS 3 pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
div.dvd-promo {
width : 940px;
margin : 0 auto 3em auto;
}
div.dvd-promo:after {
content : "\0020";
display : block;
height : 0;
clear : both;
visibility : hidden;
overflow : hidden;
}
div#dvd-promo-wadah {
position : relative;
float : left;
width : 240px;
margin-right : 60px;
padding : 320px 0 1.5em 0;
}
div.dvd-promo img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0;
}
div.dvd-promo img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px;
}
div.dvd-promo a:hover img[alt*="Cover"] {
-moz-transform : rotate(-1deg);
-moz-transform-origin : 50% 100%;
-o-transform : rotate(-1deg);
-o-transform-origin : 50% 100%;
-webkit-transform : rotate(-1deg);
-webkit-transform-origin : 50% 100%;
transform : rotate(-1deg);
transform-origin : 50% 100%;
}
div.dvd-promo a:hover img[alt*="Disc"] {
-moz-transform : translate(40px,0) rotate(300deg);
-o-transform : translate(40px,0) rotate(300deg);
-webkit-transform : translate(40px,0) rotate(300deg);
transform : translate(40px,0) rotate(300deg);
}
div.dvd-promo img[alt*="Cover"], div.dvd-promo img[alt*="Disc"] {
-moz-transition : all .5s ease-in-out;
-o-transition : all .5s ease-in-out;
-webkit-transition : all .5s ease-in-out;
transition : all .5s ease-in-out;
}
Langkah 5
Simpan template dan lanjutkan...

Memasang Animasi CD/DVD Promosi pada Blogger

Langkah 6
Masuk ke "Rancangan - Elemen Laman"
Langkah 7
Tambahkan sebuah widget dengan jenis HTML/JavaScript
Langkah 8
Masukkan (copy paste) kode dibawah ini pada bagian konten pada widget
<div class="dvd-promo">
<!-- awal bagian -->
<div id="dvd-promo-wadah">
<a href="http://modification-blog.blogspot.com">
<img src="http://hosinganda.com/dvd_cover_promo.png" alt="DVD Cover">
<img src="http://hosinganda.com/dvd_disc_promo.png" alt="DVD Disc">
</a>
</div>
<!-- akhir bagian -->
</div>
Langkah 9
Simpan widget dan preview blog anda
Keterangan:
  • Unduh seluruh source code Animasi CD/DVD Promosi dengan CSS 3 pada link diatas
  • Ubahlah URL http://modification-blog.blogspot.com sesuai dengan alamat yang anda maksud
  • Buatlah sendiri gambar yang anda perlukan dan upload-lah pada situs file hosting anda kemudian gantilah http://hosinganda.com/dvd_cover_promo.png (lihat langkah 8) sesuai dengan alamat URL pada file hosting
  • Perhatingkan kode yang diblok pada langkah 8, Cover dan Disc pada tag alt harus selalu tersedia, karena tag ini terkait dengan kode CSS yang ada pada langkah 4 dan digunakan untuk memberikan animasi pada DVD Cover dan DVD Disc
  • Jika anda ingin menambahkan jumlah CD/DVD Cover Disc lainnya silahkan tambahkan kode yang diapit tag <!-- awal bagian --> sampai dengan tag <!-- akhir bagian --> namun semua kode penambahan ini harus berada didalam tag <div class="dvd-promo"> dan </div> paling akhir
Selamat mencoba dan semoga berhasil. Happy Blogging :)
Continue reading ...

Saturday, March 19, 2011

Ooppss! Aktifkan JavaScript

Bismillah. Artikel kali ini merupakan lanjutan dari "jQuery Anti Adblock" yang pernah dibahas sebelumnya. jQuery Anti Adblock digunakan untuk memberi peringatan kepada para pengunjung blog agar perangkat lunak blok iklan dinonaktifkan, namun jika para pengunjung blog menonaktifkan fungsi JavaScript pada browsernya maka jQuery Anti Adblock tidak dapat bekerja dan para pengunjung tetap dapat membaca artikel dalam keadaan iklan tidak ditampilkan, hal ini merupakan kerugian bagi para pengelola blog.
JavaScript Disable Warning
Tips Trik blog kali ini merupakan jalan lain untuk tetap memberi peringatan kepada para pengunjung blog ketika mereka menonaktifkan fungsi JavaScript. Ketika para pengunjung blog menonaktifkan fungsi JavaScript maka sebuah layar peringatan akan muncul dan menutupi seluruh halaman blog, secara total pengunjung blog tidak dapat membaca artikel blog tersebut. Jika jQuery Anti Adblock memberi peringatan pada saat pengunjung blog mengaktifkan perangkat lunak untuk memblok iklan, maka JavaScript Disable Warning memberi peringatan saat pengunjung menonaktifkan fungsi JavaScript pada browser. Akhirnya mau tidak mau (baca:memaksa) para pengujung blog tetap harus melihat iklan pada blog yang kita kelola. SEMPURNA...!!!

Memasang Peringatan JavaScript Tidak Aktif (JavaScript Disable Warning)

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:
#enjs {
z-index: 999;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#000;
margin:0;
padding:0;
}
#enjs p {
margin:0;
padding:0;
width:100%;
color:#333;
position:relative;
top:40%;
font:bold 18px/20px arial;
text-align:center;
text-shadow:none;
}
Langkah 5
Cari kode dibawah ini:
</body>
Langkah 6
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 5:
<noscript><div id="enjs"><p>Oooops!! Mohon Aktifkan JavaScript</p></div></noscript>
Langkah 7
Simpan template, nonaktifkan fungsi JavaScript pada browser dan preview blog anda...

Keterangan: Sebaiknya kode pada langkah 6 ditempatkan diatas kode pada langkah 5

Selamat mencoba dan semoga berhasil. Happy Blogging :)
Continue reading ...

Friday, December 17, 2010

Lindungi Gambar (Image Protector) dengan jQuery

Bismillah. Kata "melindungi" menunjukan adanya kelemahan, dan seandainya dijabarkan lebih jauh maka sesuatu hal yang dilindungi tetap memiliki celah keamanan yang bisa saja digunakan untuk mengeksploitasi. Kata seorang pakar jaringan melindungi itu memiliki tingkat kekuatan sekitar 99% terhadap exploitasi dari luar. Begitu pula dengan tips trik jQuery kali ini, tujuannya untuk melindungi gambar yang kita upload pada halaman blog agar tidak mudah untuk diambil dan disebarkan lagi oleh orang lain. Tetapi bukan berarti gambar benar-benar aman dari pencurian karena masih banyak cara untuk bisa mengambil gambar dari suatu situs walau gambarnya dilindungi. Plugin jQuery Image Protector ini buat oleh David Walsh[1].
jQuery Image Protector

Kenapa gambar perlu di lindungi?

  • Menjaga keaslian sumber, seandainya kita adalah pemilik atau pembuat gambar
  • Menjaga gambar dari olahan citra digital tangan-tangan jahil, jika gambar tersebut merupakan hasil photo shoot sendiri atau keluarga
  • Menghindari hotlinking[2] yang bisa mengakibatkan hosting pribadi kita kehilangan banyak bandwidth. Hotlinking sangat merugikan bagi blogger yang menggunakan hosting sendiri, bagi pengguna blogspot jangan takut dengan hotlinking.

Apa hotlinking?

Hotlinking atau sering disebut juga inline linking, leeching, piggy-backing, direct linking, offsite image grabs, bandwidth theft adalah suatu cara pengambilan gambar dari suatu situs untuk kemudian ditampilkan kembali pada situs lainnya dengan menggunakan link dan file gambar yang sama. Sederhananya; orang lain mengambil gambar dari situs kita secara langsung menggunakan link dari hosting yang sama tanpa menguploadnya lagi. Lebih sederhananya; "SALIME" artinya SAtu LInk gaMbar rame-ramE. Hal ini merugikan bagi penyewa hosting karena mereka akan kehilangan banyak bandwidth bahkan bisa over quota sedangkan yang membayar adalah penyewa hosting. Sedangkan penyedia layanan hosting tidak bisa melakukan apapun pada mereka para hotlingking. Lebih lengkapnya tentang Hot-Linking silahkah baca disini[3] tapi anda harus banyak makan roti dulu biar lancar bahasa Inggris (hahaha...)

Integrasi jQuery Image Protector pada Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
</head>
Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: 'http://lh3.ggpht.com/_xcD4JK_dIjU/TQukGToihnI/AAAAAAAAEqo/58_UsBfwHdo/s800/blank.gif',
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).position();
var height = $(this).height();
var width = $(this).width();
$('<img />').attr({
width: width,
height: height,
src: settings.image
}).css({
top: position.top,
left: position.left,
position: 'absolute',
zIndex: settings.zIndex
}).appendTo('body')
});
};
$(window).bind('load', function() {
$('img.protect').protectImage().parents('a').removeAttr('href');
});
</script>
Langkah 5
Simpan template dan baca langkah selanjutnya...

Memasukan kode jQuery Image Protector pada gambar

Setelah plugin jQuery Image Protector di integrasikan dengan template, maka langkah selanjutnya memasang kode protector pada gambar yang akan dilindungi.
Langkah 6
Upload suatu gambar pada artikel atau pada blog anda dan pindahkah mode editor ke mode "Edit HTML"
Langkah 7
Sisipkan kode dibawah ini:
class="protect"
Pada kode gambar seperti dibawah ini:
<img src="1.jpg"/>
Sehingga menjadi:
<img class="protect" src="1.jpg"/>
Misal:
Sebelum disisipkan kode:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>
Setelah disisipkan kode:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="1.jpg">
<img class="protect" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 222px;" src="http://modification-blog.blogspot.com/contoh.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_XXX" />
</a>
Langkah 8
Terbitkan artikel anda dan silahkan cek dengan klik kanan "View Image", klik kanan "Save Image as..." atau klik gambar lalu drag pada tab baru...
Keterangan:
  • Jika anda pernah memasang perpustakan jQuery maka kode pada langkah 4 baris 1 tidak perlu diikut sertakan, baca disini
Referensi:
[1] David Walsh
[2] Simple Wikipedia : Hot-Lingking
[3] Wikipedia : Inline Linking
Continue reading ...
 

Copyright © Belajar Ngeblog Design by BTDesigner | Blogger Theme by BTDesigner | Powered by Blogger