Solutions For You

logo
close
Blog ini akan Saya hapus soalnya banyak masalah di Webmaster. Maklum dulunya blog gado - gado, isinya copasan haha. Mungkin nanti muncul blog baru pengganti Blog Saeful13 dan tentunya pake TLD biar terlihat professional gitu haha..

Sebentar, ente tahu TLD gak ? Kalau gak tahu TLD itu Top Level Domain :) Masih belum ngerti juga ? Ane jelasin lagi ya, TLD merupakan akhiran pada suatu nama domain yang mengindikasikan pemilik tingkatan tertinggi Domain tersebut dan jenis domain tersebut. Kayak .com, .net dan kawan - kawannya :)

#JustKiddingBro
close
menu

Membuat Efek Loading Saat Memuat Gambar

Loading
Create Image Loading Effect - Bagi sobat yang ingin merasakan sensasi berbeda saat memuat sebuah gambar, mungkin dengan menambahkan efek loading saat proses memuat terjadi akan terlihat lebih menarik dan keren.

Langkah Pemasangan

Silakan sobat cari kode img pada CSS di Halaman Post, biasanya kode seperti ini .post img atau .post-body img. Kemudian kita tambahkan efek loading dengan menggunakan sebuah gambar, dengan menambahkan kode
background:url('URL GAMBAR' )no-repeat 50% 50%;
jadinya seperti ini
.post-body img {background:url('URL GAMBAR' )no-repeat 50% 50%; bla.. bla..}

Contoh

Maka hasil akhirnya jadi seperti ini.
.post img{background:url(' data:image/gif;base64,R0lGODlhEAAQAPQAAP///zMzM/n5+V9fX5ycnDc3N1FRUd7e3rm5uURERJGRkYSEhOnp6aysrNHR0WxsbHd3dwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFUCAgjmRpnqUwFGwhKoRgqq2YFMaRGjWA8AbZiIBbjQQ8AmmFUJEQhQGJhaKOrCksgEla+KIkYvC6SJKQOISoNSYdeIk1ayA8ExTyeR3F749CACH5BAkKAAAALAAAAAAQABAAAAVoICCKR9KMaCoaxeCoqEAkRX3AwMHWxQIIjJSAZWgUEgzBwCBAEQpMwIDwY1FHgwJCtOW2UDWYIDyqNVVkUbYr6CK+o2eUMKgWrqKhj0FrEM8jQQALPFA3MAc8CQSAMA5ZBjgqDQmHIyEAIfkECQoAAAAsAAAAABAAEAAABWAgII4j85Ao2hRIKgrEUBQJLaSHMe8zgQo6Q8sxS7RIhILhBkgumCTZsXkACBC+0cwF2GoLLoFXREDcDlkAojBICRaFLDCOQtQKjmsQSubtDFU/NXcDBHwkaw1cKQ8MiyEAIfkECQoAAAAsAAAAABAAEAAABVIgII5kaZ6AIJQCMRTFQKiDQx4GrBfGa4uCnAEhQuRgPwCBtwK+kCNFgjh6QlFYgGO7baJ2CxIioSDpwqNggWCGDVVGphly3BkOpXDrKfNm/4AhACH5BAkKAAAALAAAAAAQABAAAAVgICCOZGmeqEAMRTEQwskYbV0Yx7kYSIzQhtgoBxCKBDQCIOcoLBimRiFhSABYU5gIgW01pLUBYkRItAYAqrlhYiwKjiWAcDMWY8QjsCf4DewiBzQ2N1AmKlgvgCiMjSQhACH5BAkKAAAALAAAAAAQABAAAAVfICCOZGmeqEgUxUAIpkA0AMKyxkEiSZEIsJqhYAg+boUFSTAkiBiNHks3sg1ILAfBiS10gyqCg0UaFBCkwy3RYKiIYMAC+RAxiQgYsJdAjw5DN2gILzEEZgVcKYuMJiEAOwAAAAAAAAAAAA==' )no-repeat 50% 50%; max-width: 100%;
border-width: 0;
padding: 0;
margin:0;
border:1px solid #b1b1b1;
box-shadow:0 0 5px  #aaa;
page-break-after:always;
}

Web Penyedia Ajax Loading Image Generator

Untuk efek loading bisa sobat cari di web-web berikut.
1. http://preloaders.net/
2. http://ajaxload.info/
3. http://loadinfo.net/
4. http://webscriptlab.com/
5. http://xeosoft.com
6. http://chimply.com/‎


Semoga Bermanfaat ..
Previous
Posting Lama

43 Komentar

avatar

kyk milik mdf ya mas ?? boleh juga dicoba :-d

BalasHapus
Komentar ini telah dihapus oleh pengarang. - Hapus
avatar

Simple tapi efeknya keren ya kang hehehehe :D

BalasHapus
avatar

keren, jadi lebih menarik tampilannya. ^^

BalasHapus
avatar

Mantap Mas, kalau boleh tanya membuat 2 kolom pada homepage tutornya dapat dari mana Mas ?

BalasHapus
avatar

hehe mantap nih, coba dulu di blog mistik saya :)

BalasHapus
avatar

Cari aja di Google, saya pake tag kondisional seperti ini mas.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type='text/css'>


Kode CSS DISIMPAN DISINI


</style>
</b:if>
</b:if>

BalasHapus
avatar

Silakan mba, gambar loadingnya pake yang mistik juga ya biar lebih serem. hehe :)

BalasHapus
avatar

oh iya kang, saya pake thread comment situkan, terus Tag [pre]...[/pre] dan lain-lain tidak berfungsi? saya udh coba ini blum bisa kang?..

$('#comment_block').each(function() {
// Singkirkan semua tag <br> di sebelah tag <b rel^="h">
// (semua elemen <b> dengan nilai atrubut rel yang diawali dengan "h")
$('b[rel^="h"]', this).next('br').remove();
// Menyisipkan tag <pre>
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
// Menyisipkan gambar
$('i[rel="image"]', this).replaceWith(function() {
return $('<img src="" />').attr('src', $(this).text());
});
// Menyisipkan tag <h3>
$('b[rel="h3"]', this).replaceWith(function() {
return $('<h3></h3>').append($(this).contents());
});
// Menyisipkan quota/catatan
$('b[rel="quote"]', this).replaceWith(function() {
return $('<blockquote></blockquote>').append($(this).contents());
});
// Menyisipkan tag <code>
$('i[rel="code"]', this).contents().unwrap().wrap('<code />');
$('i[rel="linku"]', this).replaceWith(function() {
return $('<a href="' + $(this).text() + '" rel="nofollow" target="_blank">[Link]</a>');
});
});

BalasHapus
avatar

sekalian mau bilang kode #comment-editor {width:103.3%!important; jadi 100% aja soalnya kelebihan :D

BalasHapus
avatar

Komentar yang saya berikan sudah di manipulasi lagi JavaScriptnya, jadi tag [pre], tag [code], [image] dan [blockquote] hilang..
Kalau jQuery ini input kodenya seperti ini..
Untuk Kode
<i rel="pre">KODE DISINI</i>
<i rel="code">KODE DISINI</i>
dll..
Solusinya pakai JS punya Kang Ismet yang memakai class [pre], [code], [image] dan [blockquote].
<script type='text/javascript'>
//<![CDATA[
function repText(id) {
var a = document.getElementById(id),
b = a.innerHTML,
b = b.replace(/<i rel="image">(.[^\>]*)<\/i>/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
b = b.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
b = b.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
b = b.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
b = b.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
document.getElementById(id).innerHTML = b;
b = b.replace(/<i rel="code">(.*?)<\/i>/ig, "<code>$1<\/code>");
b = b.replace(/<i rel="pre">(.*?)<\/i>/ig, "<pre>$1<\/pre>");
b = b.replace(/<b rel="quote">(.*?)<\/b>/ig, "<blockquote>$1<\/blockquote>");
b = b.replace(/&amp;feature=[0-9a-zA-Z-_]*/ig, "");
b = b.replace(/\/s(640|1600)/g, "/s400");
} repText('comment-holder');
c = document.getElementById('comment-holder');
if (c) {
b = c.getElementsByTagName("p");
for (i = 0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-content') {
ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");
b.item(i).innerHTML = ki_comm;
}
}
}
//]]>
</script>


BalasHapus
avatar

iya mas, makasih. Saya juga baru tahu kalau blogger ganti form komentarnya. . :D

BalasHapus
avatar

yang mana aja sob diganti? saya lihat ada comment_holder dan comment_content masih radar binggung dengan Js :(

BalasHapus
avatar

Coba pakai ini sob.
CSS
/*CSS ITEM KOMENTAR*/
pre, i[rel="pre"]{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
code,i[rel="code"]{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;background-color:#f7f7f9;border:1px solid #ddd}
#comments pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
#comments code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;background-color:#f7f7f9;border:1px solid #ddd}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}
#comments blockquote,b[rel="quote"] {
position:relative;
width:auto;
padding:1em 1.5em;
margin:1em auto;
color:#fff;
background:#7abfcb;
overflow:hidden;
font-family: 'Open Sans', sans-serif, 'Segoe UI',Arial,Tahoma;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
margin-right:15px;
font-size:13px;
}
#comments .cm-youtube {
display:block;
border:none !important;
background-color:#333;
width:450px;
height:240px;
margin:0 auto 30px;
}
#comments .cm-image {
display:block;
margin:0 auto 15px;
outline:none;
border:1px solid #ccc;
background-color:white;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.2);
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
padding:5px;
max-width:96%;
height:auto;
width:auto;
}
#comments i[rel="image"],
#comments i[rel="youtube"] {
display:block;
overflow:hidden;
border:2px solid black;
position:relative;
width:170px;
height:100px;
margin:0 auto 30px;
}
#comments i[rel="image"]:before,
#comments i[rel="youtube"]:before {
content:"Please enable your JavaScript to see this image!";
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background-color:red;
color:white;
font-weight:bold;
text-align:center;
padding:15px 0;
}
#comments i[rel="youtube"]:before {
content:"Please enable your JavaScript to watch this video!";
}

BalasHapus
avatar

jQuery
<script type='text/javascript'>
//<![CDATA[
$("#comment_block").each(function () {
$('i[rel="pre"]', this).replaceWith(function () {
return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
});
$('i[rel="image"]', this).replaceWith(function () {
return $('<img class="cm-image" src="" />').attr("src", $(this).text())
});
$('b[rel="quote"]', this).replaceWith(function () {
return $("<blockquote></blockquote>").append($(this).contents())
});
$('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>

BalasHapus
avatar

JavaScript
<script type='text/javascript'>
//<![CDATA[
a = document.getElementById('comments');
if (a) {
b = a.getElementsByTagName("div");
for (i = 0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment_body') {
ki_comm = b.item(i).innerHTML.replace(/\[code\](.[^\]]*)\[\/code\]/ig, "<code>$1<\/code>");
ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
ki_comm = ki_comm.replace(/\[blockquote\](.[^\]]*)\[\/blockquote\]/ig, "<blockquote>$1<\/blockquote>");
ki_comm = ki_comm.replace(/\[quote\](.[^\]]*)\[\/quote\]/ig, "<blockquote>$1<\/blockquote>");
ki_comm = ki_comm.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='cm-image' src='$1' alt='loading...' \/>");
ki_comm = ki_comm.replace(/<i rel="youtube">http:\/\/www.youtube.com\/embed\/(.[^>]*)<\/i>/ig, "<iframe class='cm- youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
ki_comm = ki_comm.replace(/<i rel="youtube">(http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^>]*)<\/i>/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
ki_comm = ki_comm.replace(/\[youtube\]http:\/\/www.youtube.com\/embed\/(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$1'><\/iframe>");
ki_comm = ki_comm.replace(/\[youtube\](http:\/\/youtu.be|http:\/\/www.youtube.com\/watch\?v=)(.[^\]]*)\[\/youtube\]/ig, "<iframe class='cm-youtube' src='http://www.youtube.com/embed/$2'><\/iframe>");
b.item(i).innerHTML = ki_comm;
}
}
}
//]]>
</script>

Silakan cek hasil akhir dari kode diatas pada demo dibawah.
Silakan buka kembali artikel karena ada revisi baru pada masalah iframe
http://saeful13.blogspot.com/2013/09/blogger-threaded-comments-hack-valid-html5.html


Demo : http://d-em-o.blogspot.com/2013/09/item-komentar-dengan-javascript.html

BalasHapus
avatar

Oh ya mas biar Syntax nya muncul pada tag ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre>$1<\/pre>");
dengan
ki_comm = ki_comm.replace(/\[pre\](.[^\]]*)\[\/pre\]/ig, "<pre><code>$1<\/code><\/pre>");

BalasHapus
avatar

lengkap sekali penjelasannya mas eful :-d

BalasHapus
avatar

hahaha, ini juga sebisanya aja mas. Ditambah demonya biar lebih jelas. :D

BalasHapus
avatar

wah thanks nih gan... :)
udah lama ga mampir, makin keren aja blognya :D

BalasHapus
avatar

terimakasih mas, sudah saya terapkan

BalasHapus
avatar

haha, biasa aja gan. Cuman perubahan pada komentar hacknya. :D

BalasHapus
avatar

mantep mas.. jgn lupa kunjungan balik :)

BalasHapus
avatar

keren kang :)
makasih udah share!
jangan lupa kunjungan balik di daengrio[dot]com <--- Salam damai!

BalasHapus
avatar

setelah saya coba malah di scoll kebawah terlihat lelet, mungkin pengaruh gambar gif ya

BalasHapus
avatar

kang ajaring buat notifikasi google+ dong :)

BalasHapus
avatar

coba pelajari disini, soalnya saya juga dapat dari sini :D
http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html

BalasHapus
avatar

Iya lelet, karena background gif itu animasi

BalasHapus

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Konversi Kode OOT

About | Contact | Forum | Sitemap | Privacy
© Copyright 2013 Saeful13 | Asuransi Kesehatan Terbaik Indonesia - All Rights Reserved