Tampilkan postingan dengan label Javascript. Tampilkan semua postingan
Tampilkan postingan dengan label Javascript. Tampilkan semua postingan

Menu Tab dengan jQuery


Untuk menghemat tempat, tab view menu sangat efisien untuk solusinya karena Ukuran yang relatif kecil tapi bisa memuat space yang lumayan. kali ini saya akan membagikan cara membuat tab menu, silahkan simak jika anda sedang mencari cara membuatnya.

Jika setelah jadi nanti lebar atau tinggi menu tab ini tidak sesuai, silahkan anda sesuaikan sendiri dengan ukuran widtget isi atau elemen dari menu yang anda buat ini.

Copy dan letakkan kode berikut di atas kode ]]></b:skin> atau </style>

ul.tabs {
width: 300px;
height: 80px;
margin: 0 auto;
list-style: none;
overflow: hidden;
padding: 0;
}
ul.tabs li {
float: left;
width: 100px;
}
ul.tabs li a {
position: relative;
display: block;
height: 30px;
margin-top: 40px;
padding: 10px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #369;
-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
border: 0px solid #000000;
-webkit-transition: padding 0.2s ease, margin 0.2s ease;
-moz-transition: padding 0.2s ease, margin 0.2s ease;
-o-transition: padding 0.2s ease, margin 0.2s ease;
-ms-transition: padding 0.2s ease, margin 0.2s ease;
transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
z-index: 3;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
z-index: 1;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
ul.tabs li a:hover {
margin: 35px 0 0 0;
padding: 10px 0 5px 0;
}
ul.tabs li a.active {
margin: 30px 0 0 0;
padding: 10px 0 10px 0;
background: #2c3e50;
color: #D3FEF5;
/*color: #ff6831;*/
z-index: 4;
outline: none;
}
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after { clear: both; }
#panels {
width: 300px;
height: 300px;
margin: 0 auto;
background: #2c3e50;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
}
#panels p {
font-family: 'Open Sans', sans-serif;
padding: 30px 40px;
color: #ffffff;
line-height: 16px;
font-size: 12px;
margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }

Letakkan kode HTML di bawah ini di sidebar atau elemen lain yang anda inginkan.

<ul class="tabs group">
<li><a class="active" href="#/one">Tab 1</a></li>
<li><a href="#/two">Tab 2</a></li>
<li><a href="#/three">Tab 3</a></li>
</ul>
<div id="panels">
<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit aliquam mauris, a mattis lectus varius id. Ut dolor tortor, hendrerit et porttitor in, gravida sed felis. Donec vehicula ex nec venenatis pulvinar. Donec vel sodales neque.</p>
<p id="two">Donec tincidunt tortor ut magna mollis sagittis. Mauris eu nibh non purus gravida hendrerit. Donec enim nisi, pretium eu libero sit amet, bibendum sagittis velit. Pellentesque non dapibus leo. Suspendisse ante tellus, volutpat ac leo eget, venenatis rhoncus sem.</p>
<p id="three"> Aenean dapibus eleifend venenatis. Integer et suscipit dui. Nam tellus diam, mattis in ultrices et, feugiat ac libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div>

Letakkan jQuery berikut di atas kode </head> atau </body> namun saya recomendasikan di atas kode yang terakhir.

<script type='text/javascript'>
//<![CDATA[
(function($) {
var tabs = $(".tabs li a");
tabs.click(function() {
var panels = this.hash.replace('/','');
tabs.removeClass("active");
$(this).addClass("active");
$("#panels").find('p').hide();
$(panels).fadeIn(200);
});
})(jQuery);
//]]>
</script>


Jika anda ingin tampilan menu tab dengan warna yang berbeda dan lebih lebar anda bisa menggunakan css di bawah ini.

ul.tabs {
width: 600px;
height: 80px;
margin: 0 auto;
list-style: none;
overflow: hidden;
padding: 0;
}
ul.tabs li {
float: left;
width: 200px;
}
ul.tabs li a {
position: relative;
display: block;
height: 30px;
margin-top: 40px;
padding: 10px 0 0 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
text-decoration: none;
color: #ffffff;
background: #1abc9c;
-webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
-moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
border: 0px solid #000000;
-webkit-transition: padding 0.2s ease, margin 0.2s ease;
-moz-transition: padding 0.2s ease, margin 0.2s ease;
-o-transition: padding 0.2s ease, margin 0.2s ease;
-ms-transition: padding 0.2s ease, margin 0.2s ease;
transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
z-index: 3;
-webkit-border-top-left-radius: 8px;
-moz-border-radius-topleft: 8px;
border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
z-index: 1;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-webkit-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
ul.tabs li a:hover {
margin: 35px 0 0 0;
padding: 10px 0 5px 0;
}
ul.tabs li a.active {
margin: 30px 0 0 0;
padding: 10px 0 10px 0;
background: #2c3e50;
color: #D3FEF5;
/*color: #ff6831;*/
z-index: 4;
outline: none;
}
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after { clear: both; }
#panels {
width: 600px;
height: 300px;
margin: 0 auto;
background: #2c3e50;
-webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#panels p {
font-family: 'Open Sans', sans-serif;
padding: 30px 40px;
color: #ffffff;
line-height: 26px;
font-size: 18px;
margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }


pastikan di template anda sudah ada jQuery <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script> agar menu tab ini bisa berjalan atau berfungsi.

Menerapakan jquery lightbox evolution


Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox.

untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik dan caranya memasang trik ini, silahkan disimak sampai paham...

pertama untuk memasang jquery lightbox silahkan letakkan kode berikut ini di atas kode </head> pada template sobat

<link href='https://googledrive.com/host/0B05MjHQkbOjhSXduOHNBdmFUTWc' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B05MjHQkbOjhZWhBM2JHRGczX2s' type='text/javascript'/>

jika di dalam template sobat sudah terpasang jquery library versi lama silahkan ganti dengan versi terbaru <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> agar jquery lightbox nanti bisa berfungsi dan berjalan di template.

setelah selesai dengan semua langkah di atas sekarang kita akan membuat file htmnya untuk demo, contoh lihat di bawah ini

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>contohku lo ini</title>
<style type="text/css">
/* tulis css ente disini gan */
</style>
</head>
<body>
/* html contoh aja bro tanpa div elemen */
<h4>Berhasil berhasil berhasil dora dora dora</h4>
<h5>gimana coi ganteng kan</h4>
</body>
</html>

setelah selesai kita unggah lalu share untuk public seperti langkah biasanya yang anda lakukan saat menyimpan file di google drive maka simpan terlebih dahulu linknya contohnya seperti ni https://googledrive.com/host/0B05MjHQkbOjhbVVpWUhzNHpSS0k

sekarang saya akan membuat sebuah tombol dan sedikit css untuk demo dan contoh trik ini, silahkan di lihat

untuk css tombolnya saya buat sebagai berikut

.tombol{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.tombol ul {margin:0;padding:0}
.tombol li{display:inline;margin:0;padding:0}
.db-tombol-demo {border-radius:2px;padding: 8px 10px !important; background: #000; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.db-tombol-demo:hover { background: #FF8C00; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

lalu untuk html tombolnya seperti berikut

<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo" href="#">Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>

nah sekarang tiba di bagian meletakkan pemanggilan jquery lightbox tadi, maka yang harus kita tambahkan adalah class='lightbox' jadi hasilnya akan seperti ini

<li><a class="db-tombol-demo lightbox" href="#">Demo lihat disini coi...</a></li>

cara menambahkan file html dalam trik ini adalah gunakan langkan sebagai berikut yaitu memanggile file html kita tadi menggunakan iframe

<a data-options='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'></a>

silahkan ubah ukuran nilai pada lebar width&quot;:600, dan tinggi height&quot;:450, sesuai keinginan atau kebutuhan

jadi untuk hasil akhir jika semua langkah di atas di satukan maka demikianlah hasil kodenya

<div style="text-align: center;">
<ul class="tombol">
<li><a class="db-tombol-demo lightbox" data-options='{&quot;width&quot;:600, &quot;height&quot;:450, &quot;iframe&quot;: true}' href='link html yang telah di unggah di host'>Demo lihat disini coi...</a></li>
</ul>
</div>
<div class="clear"></div>

untuk penerapan pada gambarvideofile swf tau banner boleh lihat kode di bwah ini

Penggunaan untuk video

<a class="lightbox" href="http://www.youtube.com/watch?v=e1c-wAT0b6g">YouTube</a>

Banner atau SWF

<a class="lightbox" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Flash</a>

Penggunaan pada gambar

<a class="lightbox" href="url-gambar-besar-ente-gan"><img src="url-gambar-ente-kecil-gan" alt=""/></a>

untuk penerapan lainnya coba saja di pelajari sendiri...

demikian saja sob, selamat mencoba dan berekperimen sesuai kesenangan ya....

Membanned spamer di komentar dengan jquery


Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user lain tidak merasa terganggu.


langsung saja buat sobat yang ingin memasang jquery ini, buka template editornya dan letakkan kode jquery berikut di atas tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
var spamlist=[
'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer' /* URL Profile spamer */
];
for(var v=0; v<spamlist.length; v=v+1){
$("a[href='"+spamlist[v]+"']").each(function(){
$(this).closest(".comment_inner").find(".comment_body")
.replaceWith("<div class='.comment_body' style='color:red'>Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!</div>"),
$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})}
//]]>
</script>

Jika lebih dari satu profile silahkan tambahkan daftar seperti yang saya tuliskan di tas dengan di beri jeda koma (,) seperti di bawah ini

cara menambahkan url profile spamer berikutnya

<script type='text/javascript'>
//<![CDATA[
var spamlist=[

'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer', /* URL Profile spamer */
'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer2' /* URL Profile spamer berikutnya */

];
for(var v=0; v<spamlist.length; v=v+1){
$("a[href='"+spamlist[v]+"']").each(function(){
$(this).closest(".comment_inner").find(".comment_body")
.replaceWith("<div class='.comment_body' style='color:red'>Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!</div>"),
$(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})}
//]]>
</script>

untuk kata - kata yang akan di tampilkan bisa sobat ubah dengan sesuai keinginan, ganti saja "Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!" dengan kalimat milik anda sendiri.

jquery di atas di terapkan untuk komentar hack seperti blog ini untuk sobat yang menggunakan struktur komentar lama silahkan ubah class milik komentar lama. class komentar yang bisa sobat ganti yaitu

ganti class comment_inner dengan comment-block dan class comment_body dengan class comment-content pastikan semua sudah sobat ganti agar bisa berjalan dengan baik.

demikian share kali ini dari saya semoga berguna, kali ini blog sobat bisa bebas spamer...

Highlighter Language Autodetection


Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Syntax Highlighter Language Autodetection ini di blog anda.

jika sebelumnya anda sudah pernah memasang Syntax Highlighter sebaiknya css dan jsnya di pindahkan dulu agar tidak ada masalah nantinya. langsung saja

Struktur penggunaannya agar berbeda dari Syntax Highlighter yang pernah anda gunakan setiap bahasa memiliki kelas berbeda. coba lihat di bawah ini

    Java Script  ⇒ data-codetype="JavaScript" , code class="Javascript"
    HTML ⇒ data-codetype="HTML" , code class="HTML"
    JQuery ⇒ data-codetype="JQuery" , code class="JQuery"
    XML ⇒ data-codetype="XML" , code class="XML"
    CSS  ⇒ data-codetype="CSS" , code class="CSS"

Cara pemasangan Syntax Highlighter Language Autodetection

silahkan masuk ke editor Template kemudian pilih Edit HTML, copy css berikut

pre,i[rel="pre"]{
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}
pre:hover,i[rel="pre"]:hover {
background-color: #DDE0E7
}
pre code{
display:block;
color:#111;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
letter-spacing:0;
white-space:pre
}
pre[rel="HTML"],pre[data-codetype="HTML"]{
border-left-color:#0B7E88
}
pre[rel="CSS"],pre[data-codetype="CSS"]{
border-left-color:#5DA028
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{
border-left-color:#40627E
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{
border-left-color:#40627E
}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{
border-left-color:#40627E
}
pre[rel="XML"],pre[data-codetype="XML"]{
border-left-color:#C44032
}
pre[rel*="+"],pre[data-codetype*="+"]{
border-left-color:#0B7E88
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{
color:#00BB4B;font-style:italic
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{
color:#859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{
color:#A60A0A
}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{
color:#103197
}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{
font-weight:bold
}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{
color:#0499D3
}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{
color:#cb4b16
}
pre .deletion{
color:#dc322f
}
pre .tex .formula{
background:#073642
}
pre.numbered{
border-left-width:2px;
padding-left:1em
}
pre .line-number,pre.numbered code{
display:block;
line-height:16px
}
pre .line-number{
float:left;
margin:0 1em 0 -1em;
color:#586E75;
border-right:2px solid #9B9DA1;
text-align:right;
min-width:35px
}
pre .line-number span{
display:block;
position:relative;
padding:0 .5em 0 1em
}
pre .line-number span:nth-child(even){
background-color:#FAFAFA
}
pre .line-number span em{
position:absolute;
bottom:-1px;
left:100%;
background-color:red;
padding:0 2px 1px 2px;
border:1px solid black;
font-style:normal;
color:black;
display:none
}
pre .line-number span:hover em{
display:block
}
pre .line-number span:target a{
display:block;
color:white;
position:relative;
background-color:#268bd2;
margin:0 -.5em 0 -1em;
padding:0 .5em 0 0
}
pre.numbered code span{
line-height:12px
}
pre[data-codetype="HTML"] .line-number span:target a{
background-color:#4584BE
}
pre[data-codetype="CSS"] .line-number span:target a{
background-color:#5DA028
}
pre[data-codetype="JavaScript"] .line-number span:target a{
background-color:#bbbbbb
}
pre[data-codetype="JQuery"] .line-number span:target a{
background-color:#7073CF
}
pre[data-codetype="JQuery UI"] .line-number span:target a{
background-color:#E36B23
}
pre[data-codetype="XML"] .line-number span:target a{
background-color:#C44032
}
pre[data-codetype*="+"] .line-number span:target a{
background-color:#0B7E88
}
pre[rel],pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: static;
top: 0;
right: 0;
left: 0;
background-color: #666;
padding: 5px 7px;
margin: -5px -6px 0px -12px;
font: bold 11px/20px Arial,Sans-Serif;
color: white;
}
pre[rel="CSS"],pre[data-codetype="CSS"]:before {
background-color: #5DA028;
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="HTML"],pre[data-codetype="HTML"]:before {
background-color: #0B7E88;
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"],pre[data-odetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="XML"],pre[data-codetype="XML"]:before {
background-color: #E55E48;
}
pre[data-codetype*="+"]:before {
background-color: #0B7E88;
}
pre .line-number span:target:before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden
}

silahkan letakkan CSS di atas tepat diatas kode </style> atau ]]></b:skin>  pada template anda

kemudian silahkan letakkan kode di bawah ini di atas kode </body>

<script type="text/javascript">//<![CDATA[
/*
Syntax highlighting with language autodetection.
http://softwaremaniacs.org/soft/highlight/
*/

function autoSelect(a){var b,range;if(window.getSelection){b=window.getSelection();range=document.createRange();range.selectNodeContents(a);b.removeAllRanges();b.addRange(range)}else if(document.selection){b=document.selection.createRange().text;range=document.body.createTextRange();range.moveToElementText(a);range.select()}}function makeNumber(){var a=document.getElementsByTagName('pre'),pl=a.length;for(var i=0;i<pl;i++){if(/(^| )numbered( |$)/.test(a[i].className)){a[i].innerHTML='<span class="line-number"></span>'+a[i].innerHTML+'<span class="cl"></span>'}}for(var j=0;j<pl;j++){if(a[j].getElementsByTagName('span')[0]&&a[j].getElementsByTagName('span')[0].className=='line-number'){var b=a[j].getElementsByTagName('code')[0].innerHTML.split(/\n/).length,line=a[j].getElementsByTagName('span')[0];for(var k=0;k<b;k++){line.innerHTML+='<span id="line-'+(j+1)+'-'+(k+1)+'"><em>line-'+(j+1)+'-'+(k+1)+'</em><a href="#line-'+(j+1)+'-'+(k+1)+'">'+(k+1)+'</a></span>'}}}var code=document.getElementsByTagName('code'),clen=code.length;for(var i=0;i<clen;i++){code[i].ondblclick=function(){autoSelect(this);if(document.getElementById('tt-search')){document.getElementById('tt-search').style.display="none"}}}}

var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return RegExp(q,"m"+(r.cI?"i":"")+(p?"g":""))}function j(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"||q.nodeName=="SPAN"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}function g(t,s){var r="";for(var q=0;q<t.childNodes.length;q++){if(t.childNodes[q].nodeType==3){var p=t.childNodes[q].nodeValue;if(s){p=p.replace(/\n/g,"")}r+=p}else{if(t.childNodes[q].nodeName=="BR"){r+="\n"}else{r+=g(t.childNodes[q])}}}if(/MSIE [678]/.test(navigator.userAgent)){r=r.replace(/\r/g,"\n")}return r}function a(s){var q=s.className.split(/\s+/);q=q.concat(s.parentNode.className.split(/\s+/));for(var p=0;p<q.length;p++){var r=q[p].replace(/^language-/,"");if(d[r]||r=="no-highlight"){return r}}}function b(p){var q=[];(function(s,t){for(var r=0;r<s.childNodes.length;r++){if(s.childNodes[r].nodeType==3){t+=s.childNodes[r].nodeValue.length}else{if(s.childNodes[r].nodeName=="BR"){t+=1}else{q.push({event:"start",offset:t,node:s.childNodes[r]});t=arguments.callee(s.childNodes[r],t);q.push({event:"stop",offset:t,node:s.childNodes[r]})}}}return t})(p,0);return q}function l(y,z,x){var r=0;var w="";var t=[];function u(){if(y.length&&z.length){if(y[0].offset!=z[0].offset){return(y[0].offset<z[0].offset)?y:z}else{return z[0].event=="start"?y:z}}else{return y.length?y:z}}function s(C){var D="<"+C.nodeName.toLowerCase();for(var A=0;A<C.attributes.length;A++){var B=C.attributes[A];D+=" "+B.nodeName.toLowerCase();if(B.nodeValue!=undefined&&B.nodeValue!=false&&B.nodeValue!=null){D+='="'+m(B.nodeValue)+'"'}}return D+">"}while(y.length||z.length){var v=u().splice(0,1)[0];w+=m(x.substr(r,v.offset-r));r=v.offset;if(v.event=="start"){w+=s(v.node);t.push(v.node)}else{if(v.event=="stop"){var q=t.length;do{q--;var p=t[q];w+=("</"+p.nodeName.toLowerCase()+">")}while(p!=v.node);t.splice(q,1);while(q<t.length){w+=s(t[q]);q++}}}}w+=x.substr(r);return w}function i(){function p(u,t,v){if(u.compiled){return}if(!v){u.bR=c(t,u.b?u.b:"\\B|\\b");if(!u.e&&!u.eW){u.e="\\B|\\b"}if(u.e){u.eR=c(t,u.e)}}if(u.i){u.iR=c(t,u.i)}if(u.r==undefined){u.r=1}if(u.k){u.lR=c(t,u.l||hljs.IR,true)}for(var s in u.k){if(!u.k.hasOwnProperty(s)){continue}if(u.k[s]instanceof Object){u.kG=u.k}else{u.kG={keyword:u.k}}break}if(!u.c){u.c=[]}u.compiled=true;for(var r=0;r<u.c.length;r++){p(u.c[r],t,false)}if(u.starts){p(u.starts,t,false)}}for(var q in d){if(!d.hasOwnProperty(q)){continue}p(d[q].dM,d[q],true)}}function e(J,D){if(!i.called){i();i.called=true}function z(r,M){for(var L=0;L<M.c.length;L++){if(M.c[L].bR.test(r)){return M.c[L]}}}function w(L,r){if(C[L].e&&C[L].eR.test(r)){return 1}if(C[L].eW){var M=w(L-1,r);return M?M+1:0}return 0}function x(r,L){return L.iR&&L.iR.test(r)}function A(O,N){var M=[];for(var L=0;L<O.c.length;L++){M.push(O.c[L].b)}var r=C.length-1;do{if(C[r].e){M.push(C[r].e)}r--}while(C[r+1].eW);if(O.i){M.push(O.i)}return c(N,"("+M.join("|")+")",true)}function s(M,L){var N=C[C.length-1];if(!N.t){N.t=A(N,H)}N.t.lastIndex=L;var r=N.t.exec(M);if(r){return[M.substr(L,r.index-L),r[0],false]}else{return[M.substr(L),"",true]}}function p(O,r){var L=H.cI?r[0].toLowerCase():r[0];for(var N in O.kG){if(!O.kG.hasOwnProperty(N)){continue}var M=O.kG[N].hasOwnProperty(L);if(M){return[N,M]}}return false}function F(M,O){if(!O.k){return m(M)}var N="";var P=0;O.lR.lastIndex=0;var L=O.lR.exec(M);while(L){N+=m(M.substr(P,L.index-P));var r=p(O,L);if(r){t+=r[1];N+='<span class="'+r[0]+'">'+m(L[0])+"</span>"}else{N+=m(L[0])}P=O.lR.lastIndex;L=O.lR.exec(M)}N+=m(M.substr(P,M.length-P));return N}function K(r,M){if(M.sL&&d[M.sL]){var L=e(M.sL,r);t+=L.keyword_count;return L.value}else{return F(r,M)}}function I(M,r){var L=M.cN?'<span class="'+M.cN+'">':"";if(M.rB){q+=L;M.buffer=""}else{if(M.eB){q+=m(r)+L;M.buffer=""}else{q+=L;M.buffer=r}}C.push(M);B+=M.r}function E(O,L,Q){var R=C[C.length-1];if(Q){q+=K(R.buffer+O,R);return false}var M=z(L,R);if(M){q+=K(R.buffer+O,R);I(M,L);return M.rB}var r=w(C.length-1,L);if(r){var N=R.cN?"</span>":"";if(R.rE){q+=K(R.buffer+O,R)+N}else{if(R.eE){q+=K(R.buffer+O,R)+N+m(L)}else{q+=K(R.buffer+O+L,R)+N}}while(r>1){N=C[C.length-2].cN?"</span>":"";q+=N;r--;C.length--}var P=C[C.length-1];C.length--;C[C.length-1].buffer="";if(P.starts){I(P.starts,"")}return R.rE}if(x(L,R)){throw"Illegal"}}var H=d[J];var C=[H.dM];var B=0;var t=0;var q="";try{var v=0;H.dM.buffer="";do{var y=s(D,v);var u=E(y[0],y[1],y[2]);v+=y[0].length;if(!u){v+=y[1].length}}while(!y[2]);if(C.length>1){throw"Illegal"}return{r:B,keyword_count:t,value:q}}catch(G){if(G=="Illegal"){return{r:0,keyword_count:0,value:m(D)}}else{throw G}}}function f(t){var r={keyword_count:0,r:0,value:m(t)};var q=r;for(var p in d){if(!d.hasOwnProperty(p)){continue}var s=e(p,t);s.language=p;if(s.keyword_count+s.r>q.keyword_count+q.r){q=s}if(s.keyword_count+s.r>r.keyword_count+r.r){q=r;r=s}}if(q.language){r.second_best=q}return r}function h(r,q,p){if(q){r=r.replace(/^((<[^>]+>|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"<br>")}return r}function o(u,x,q){var y=g(u,q);var s=a(u);if(s=="no-highlight"){return}if(s){var w=e(s,y)}else{var w=f(y);s=w.language}var p=b(u);if(p.length){var r=document.createElement("pre");r.innerHTML=w.value;w.value=l(p,b(r),y)}w.value=h(w.value,x,q);var t=u.className;if(!t.match("(\\s|^)(language-)?"+s+"(\\s|$)")){t=t?(t+" "+s):s}if(/MSIE [678]/.test(navigator.userAgent)&&u.tagName=="CODE"&&u.parentNode.tagName=="PRE"){var r=u.parentNode;var v=document.createElement("div");v.innerHTML="<pre><code>"+w.value+"</code></pre>";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p<r.length;p++){var q=j(r[p]);if(q){o(q,hljs.tabReplace)}}makeNumber()}function n(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",k,false);window.addEventListener("load",k,false)}else{if(window.attachEvent){window.attachEvent("onload",k)}else{window.onload=k}}}var d={};this.LANGUAGES=d;this.highlight=e;this.highlightAuto=f;this.fixMarkup=h;this.highlightBlock=o;this.initHighlighting=k;this.initHighlightingOnLoad=n;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="\\b(0x[A-Za-z0-9]+|\\d+(\\.\\d+)?)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.inherit=function(p,s){var r={};for(var q in p){r[q]=p[q]}if(s){for(var q in s){r[q]=s[q]}}return r}}();hljs.LANGUAGES.javascript={dM:{k:{keyword:{"in":1,"if":1,"for":1,"while":1,"finally":1,"var":1,"new":1,"function":1,"do":1,"return":1,"void":1,"else":1,"break":1,"catch":1,"instanceof":1,"with":1,"throw":1,"case":1,"default":1,"try":1,"this":1,"switch":1,"continue":1,"typeof":1,"delete":1},literal:{"true":1,"false":1,"null":1}},c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM,hljs.CNM,{b:"("+hljs.RSR+"|case|return|throw)\\s*",k:{"return":1,"throw":1,"case":1},c:[hljs.CLCM,hljs.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",c:[{b:"\\\\/"}]}],r:0},{cN:"function",b:"\\bfunction\\b",e:"{",k:{"function":1},c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM]}]}]}};hljs.LANGUAGES.css=function(){var a={cN:"function",b:hljs.IR+"\\(",e:"\\)",c:[{eW:true,eE:true,c:[hljs.NM,hljs.ASM,hljs.QSM]}]};return{cI:true,dM:{i:"[=/|']",c:[hljs.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:{"font-face":1,page:1}},{cN:"at_rule",b:"@",e:"[{;]",eE:true,k:{"import":1,page:1,media:1,charset:1},c:[a,hljs.ASM,hljs.QSM,hljs.NM]},{cN:"tag",b:hljs.IR,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[hljs.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[a,hljs.NM,hljs.QSM,hljs.ASM,hljs.CBLCLM,{cN:"hexcolor",b:"\\#[0-9A-F]+"},{cN:"important",b:"!important"}]}}]}]}]}}}();hljs.LANGUAGES.xml=function(){var b="[A-Za-z0-9\\._:-]+";var a={eW:true,c:[{cN:"attribute",b:b,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,dM:{c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style",e:">",k:{title:{style:1}},c:[a],starts:{cN:"css",e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script",e:">",k:{title:{script:1}},c:[a],starts:{cN:"javascript",e:"<\/script>",rE:true,sL:"javascript"}},{cN:"vbscript",b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ />]+"},a]}]}}}();hljs.LANGUAGES.java={dM:{k:{"false":1,"synchronized":1,"int":1,"abstract":1,"float":1,"private":1,"char":1,"interface":1,"boolean":1,"static":1,"null":1,"if":1,"const":1,"for":1,"true":1,"while":1,"long":1,"throw":1,strictfp:1,"finally":1,"protected":1,"extends":1,"import":1,"native":1,"final":1,"implements":1,"return":1,"void":1,"enum":1,"else":1,"break":1,"transient":1,"new":1,"catch":1,"instanceof":1,"byte":1,"super":1,"class":1,"volatile":1,"case":1,assert:1,"short":1,"package":1,"default":1,"double":1,"public":1,"try":1,"this":1,"switch":1,"continue":1,"throws":1},c:[{cN:"javadoc",b:"/\\*\\*",e:"\\*/",c:[{cN:"javadoctag",b:"@[A-Za-z]+"}],r:10},hljs.CLCM,hljs.CBLCLM,hljs.ASM,hljs.QSM,{cN:"class",b:"(class |interface )",e:"{",k:{"class":1,"interface":1},i:":",c:[{b:"(implements|extends)",k:{"extends":1,"implements":1},r:10},{cN:"title",b:hljs.UIR}]},hljs.CNM,{cN:"annotation",b:"@[A-Za-z]+"}]}};hljs.LANGUAGES.php={cI:true,dM:{k:{and:1,include_once:1,list:1,"abstract":1,global:1,"private":1,echo:1,"interface":1,as:1,"static":1,endswitch:1,array:1,"null":1,"if":1,endwhile:1,or:1,"const":1,"for":1,endforeach:1,self:1,"var":1,"while":1,isset:1,"public":1,"protected":1,exit:1,foreach:1,"throw":1,elseif:1,"extends":1,include:1,__FILE__:1,empty:1,require_once:1,"function":1,"do":1,xor:1,"return":1,"implements":1,parent:1,clone:1,use:1,__CLASS__:1,__LINE__:1,"else":1,"break":1,print:1,"eval":1,"new":1,"catch":1,__METHOD__:1,"class":1,"case":1,exception:1,php_user_filter:1,"default":1,die:1,require:1,__FUNCTION__:1,enddeclare:1,"final":1,"try":1,"this":1,"switch":1,"continue":1,endfor:1,endif:1,declare:1,unset:1,"true":1,"false":1,namespace:1},c:[hljs.CLCM,hljs.HCM,{cN:"comment",b:"/\\*",e:"\\*/",c:[{cN:"phpdoc",b:"\\s@[A-Za-z]+",r:10}]},hljs.CNM,hljs.inherit(hljs.ASM,{i:null}),hljs.inherit(hljs.QSM,{i:null}),{cN:"variable",b:"\\$[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*"},{cN:"preprocessor",b:"<\\?php",r:10},{cN:"preprocessor",b:"\\?>"}]}};

hljs.tabReplace = ' ';
hljs.initHighlightingOnLoad();
//]]></script>

atau untuk lebih praktisnya letakkan kode ini di atas kode </head>

<script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'/> 

simpan apa yang tadi sudah di kerjakan.

Untuk menggunakannya, silahkan pastekan kode di bawah ini pada tab HTML di postingan ketika membuat postingan.

<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery ... </code></pre>

sekarang tinggal lihat hasilnya, anda sudah memiliki Syntax Highlighter Language Autodetection di blog anda, sekian saja semoga bermanfaat...

jQuery Show Hide Checkboxes


Kali ini saya akan share Show Hide sederhana menggunakan jQuery Checkboxes value, prinsip kerjannya sama saja dengan jQuery show hide hanya saja berbeda di medianya. trik ini juga sebelumnya pernah saya gunakan untuk membuat show hide emoticon, konversi kode dan halaman OOT di komentar blog saya, jika mungkin anda juga berminat menggunakan jQuery ini silahkan saja untuk di simak.

Pembuatan jQuery Checkboxes value.

Pertama silahkan buat css seperti di bawah ini:

// style untuk kotak elemen box
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
// css perbedaan warna latar
// warna latar box class red
.red{ background: #ff0000; }
// warna latar box class green
.green{ background: #00ff00; }
// warna latar box class blue
.blue{ background: #0000ff; }

CSS di atas hanya css sederhana yang saya gunakan untuk atau sebagai gambaran saja, jika anda merang ini terlalu biasa anda bisa membuat css dengan selera anda sendiri, misal seperti ini:

// style untuk kotak elemen box
.elemen-box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #900;
border-radius:3px;
color:#888;
... dst ...
}
// css perbedaan warna latar
// warna latar box class emoticon dan teks
.emoticon { background: #252525;color:#f1f1f1;... dst ... }
// warna latar box class konversi
.konversi { background: #292929;... dst ... }
// warna latar box class oot
.oot { background: #333;... dst ... }

Pastikan pada elemen utama yaitu class box berikan display: none; ini agar elemen box tidak muncul sebelum perintah di jalankan.

Sekarang untuk langkah kedua, kita buat HTML untuk elemen boxnya.

karena CSS yang saya gunakan adalah yang pertama, maka hasilnya adalah sebagai berikut:

// elemen box dengan warna latar merah
<div class="red box">
// isi elemen box merah
Anda memilih <strong>checkbox merah</strong> jadi saya muncul
</div>
// elemen box dengan warna latar hijau
<div class="green box">
// isi elemen box hijau
Anda memilih <strong>checkbox hijau</strong> jadi saya muncul
</div>
// elemen box dengan warna latar biru
<div class="blue box">
// isi elemen box biru
Anda memilih <strong>checkbox biru</strong> jadi saya muncul
</div>

Pada isi elemen box diatas, anda bisa menempatkaan elemen apa saja yang anda inginkan.

Sekarang kita buat input checkboxnya, lihat kode di bawah ini:

<div>
// input checkbox untuk box merah
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
// input checkbox untuk box hijau
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
// input checkbox untuk box biru
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>

input checkbox di atas bisa di bungkus dengan elemen lain jika anda ingin, misalkan seperti berikut:

<div id='check-wrapper' class='check-wrapper'>
// input checkbox untuk box merah
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
// input checkbox untuk box hijau
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
// input checkbox untuk box biru
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>

Perhatikan pada kode value="..." karena disilah nanti jQuery akan menjalankan perintah. jadi masing masing value harus memiliki nilai yang berbeda seperti value="red", value="green" dan value="blue".

Penggabungan seluruh input checkbox dan elemen box:

<div>
// input checkbox untuk box merah
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
// input checkbox untuk box hijau
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
// input checkbox untuk box biru
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>
// elemen box dengan warna latar merah
<div class="red box">
// isi elemen box merah
Anda memilih <strong>checkbox merah</strong> jadi saya muncul
</div>
// elemen box dengan warna latar hijau
<div class="green box">
// isi elemen box hijau
Anda memilih <strong>checkbox hijau</strong> jadi saya muncul
</div>
// elemen box dengan warna latar biru
<div class="blue box">
// isi elemen box biru
Anda memilih <strong>checkbox biru</strong> jadi saya muncul
</div>

Selanjutnya, berikan syntax jQuery untuk menjalankan checkbox.

$(document).ready(function(){
// Jika checkbox terdeteksi sudah dicek dengan klik
$('input[type="checkbox"]').click(function(){
// munculkan elemen manipulasi dengan kelas red
if($(this).attr("value")=="red"){// value dari input check box red
$(".red").toggle();// box red muncul dengan efek toggle
}
// munculkan elemen manipulasi dengan kelas green
if($(this).attr("value")=="green"){// value dari input check box green
$(".green").toggle();// box green muncul dengan efek toggle
}
// munculkan elemen manipulasi dengan kelas blue
if($(this).attr("value")=="blue"){// value dari input check box blue
$(".blue").toggle();// box blue muncul dengan efek toggle
}
});
});

Pada efek .toggle(); anda bisa menggantinya dengan efek lain seperti show, fadein dll.

anda bisa melihat hasilnya di bawah ini:


Penerapan sekilas untuk HTML

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide dengan Checkboxes</title>
<style type="text/css">
.box{
padding: 20px;
display: none;
margin-top: 20px;
border: 1px solid #000;
}
.red{ background: #ff0000; }
.green{ background: #00ff00; }
.blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="red"){
$(".red").toggle();
}
if($(this).attr("value")=="green"){
$(".green").toggle();
}
if($(this).attr("value")=="blue"){
$(".blue").toggle();
}
});
});
</script>
</head>
<body>

<div>
<label><input type="checkbox" name="colorCheckbox" value="red"/> merah</label>
<label><input type="checkbox" name="colorCheckbox" value="green"/> hijau</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"/> biru</label>
</div>
<div class="red box">Anda memilih <strong>checkbox merah</strong> jadi saya muncul</div>
<div class="green box">Anda memilih <strong>checkbox hijau</strong> jadi saya muncul</div>
<div class="blue box">Anda memilih <strong>checkbox biru</strong> jadi saya muncul</div>

</body>
</html>

Semoga bermanfaat...   

Show hide related post (perbaharuan)


Hallo para sobat blogger, masih semangat ngeblog kali ini saya mau share bagaimana cara dan trik membuat show hide pada related post di blog. triknya cukup mudah dan mungkin berguna untuk blog sobat agar tampil lebih ringkas dan beda dari yang lainnya...

kira kira nanti hasilnya akan seperti berikut ini



jika sobat ingin menerapkan trik show hiude pada related post ini silahkan ikuti langkah membuatnya di bawah ini

pastikan di template sobat sudah terpasang

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'>

kemdian letakkan css berikut ini di antara css template blog anda

.rp-tombol-db {
width:100%;
padding:10px;
margin:0px auto;
background-color:#0099cc;
font-size:16px;
color:#fff;
border:1px solid #ddd;
text-transform:uppercase;
line-height:40px;
vertical-align: middle;
position:relative;
cursor:pointer;
text-align:center;
}
.show-elem-rp {display:none;}

css di atas adalah css tombol pada element show hide untuk related post nanti, jika kurang menarik dan bagus silahkan anda ubah saja sesuai keingan yang menurut sobat lebih bagus...

untuk menerapkannya di dalam related post cari kode tag pembuka related post milik anda seperti berikut jika sobat telah memasang related post pada blog sobat

<div id='related-post'>

.........bla bla bla.......

</div>

lalu letakkan dan sisipkan kode di bawah ini pada kode di atas seperti berikut.


<div class='rp-tombol-db show-on-klik'>Show Artikel Terkait</div>
<div class='show-elem-rp'>
<div id='related-post'>

.....kode related post.....

</div>
</div>

jika sobat belum memasang related post silahkan gunakan dan letakkan kode berikt ini di bawah kode <div class='post-footer'> atau <data:post.body/>


<div class='rp-tombol-db show-on-klik'>Show Related Post</div>
<div class='show-elem-rp'>
<div id='related-post'>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
numPosts: 5,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript'>
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://blog.kangismet.net",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
</script>
</div>
</div>

tambahkan cssnya berikut di antara css yang laian

#related-post {background:#ccc;width:100%;margin:0px auto;padding:10px}
#related-post h2{font-family:&#39;Oswald&#39;, Arial, sans-serif;font-size:16px;color:#4a4a4a;text-transform:uppercase;margin:0 0 15px;padding:0;font-weight:normal}
#related-post a{color:#2c3e50;}
#related-post li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhClYQjx-5zi1Na1ArVwm220KDIdls9tNwK8ti-mfvq57QLupTlv2wuMqdLEyXqLJgPOkDSz0rRMVZbgvA8Zp_GmNx5Of4HIx67D_REOHM9oeHQTl7wa3868_zdEbh4oVHxakppJpczLTrP/s1600/bullet.png) no-repeat 1px 5px;color:#2c3e50;text-indent:0;line-height:1.6em;margin:0;padding:0 0 3px 19px}
#related-post a:hover{color:#5295c6;text-decoration:none}
#related-post .widget{margin:0;padding:0}
#related-post ul{list-style:none;margin:0;padding:0}

langkah terakhir letakkan javascrip ini di atas kode tag penutup </body>

<script type='text/javascript'>
$(function() {
$(".show-on-klik").click(function () {
$(".show-elem-rp").toggle("pulsate")
});
});
</script>

semua langkah selesai simpan perubahan templatenya, lihat hasilnya jika kurang pas silahkan deh di atur sesukanya :-).

sekian saja share saya tentang membuat show hide pada related post blog, semoga bermanfaat...

Sidebar Menu Accordion jQuery


Apa fungsi menu accordion?

Salah satu fungsi dari accordion menu selain memperingkas tampilan widget yang ada di sidebar blog, juga dapat memperbagus blog anda, sama seperti pada fungsi menu tabber atau tab view, hanya saja gaya satau stylenya yang berbeda. jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah saya buat sebelumnya, sekarang saya hanya berbagi cara membuat menu accordion ini menggunakan jQuery. Anda bisa menempatkan menu accordion ini pada sidebar blog anda tentunya untuk memperingkas tatanan widget.

jika ingin melihat hasil menu accordion ini bisa di lihat di demo berikut

 
Cara menginstal menu accordion:

Login ke Blogger dengan akun Anda
Masuk ke template, Edit HTML

pastikn template anda sudah terpasang

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>

Kemudian masukkan kode berikut css ini dan letakkan di atas kode </style>:

/* menu accordion by dafin */
#db-tab-acor {
width:100%; /* lebar menu */
margin:10px auto;
border:2px solid #ccc;
-webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#db-tab-acor h2 {
cursor:pointer;
margin:0px 0px;
padding:8px 10px;
background-color:#333;
font:bold 14px coda;
color:#e6e6e6;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
border-top:2px solid #bbb;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY9niN0qGZq-Y9xzDvpaaTY7-R6X5tbKaYBSCc8n9COBG8JEx1q-1bzQ6Cl2HYC315FC_vR-k1ESrRW7wNiVhE9iT8HEJfXmbWEuerYr22Ub0Qi1vCP5feJ4NZlWEE4EHASOcJtTyOfiY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;
}

#db-tab-acor .tab-view {
background-color:#f1f1f1;
padding:10px;
color:black;
height:120px;/* sesuaikan atau bisa di ubah menjadi auto */
}

#db-tab-acor h2.show {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ07KW9SWjXBU1oFcZSr5lQWaLUXXUhWmGf_NYRd4CjD1kCm-v8RQy0mPJ2seemNH91ZWUw9FQMuOQP-9xZhLFD1ZqIt9Bctt6yaQLCy_rdRaZKz3CmhEa_tTxAgfkBuYYBnKTd48UWxg/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;
background-color:#369;
color:#ccc;
}

Sekarang cari sidebar blog anda, kurang lebih kodenya seperti berikut:

<aside id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="Label1" locked="false" title="Kategori" type="Label">
</b:widget></b:section>
</aside>

tambahkan kode menunya sehingga nampak seperti berikut

<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
... tempat widget ...
</div>
<h2>
MENU 2</h2>
<div class="tab-view">
... tempat widget ...
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
... tempat widget ...
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
... tempat widget ...
</div>
</div>
<!-- end menu -->
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="Label1" locked="false" title="Kategori" type="Label">
</b:widget></b:section>
</aside>

Untuk cara di atas, widget anda tidak ikut masuk dalam menu jadi tidak akan masuk dalam fungsi menu accordion. jika anda ingin widget anda ada dalam menu silahkan buat seperti berikut

<aside id="sidebar-wrapper">
<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
<b:widget id="Label1" locked="false" title="Kategori" type="Label">
</b:widget></b:section>
</div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes">
<b:widget id="HTML5" locked="false" title="Kopi" type="Label">
</b:widget></b:section>
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes">
<b:widget id="PopularPosts1" locked="false" title="Entri Populer" type="PopularPosts">
</b:widget></b:section>
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes">
<b:widget id="HTML4" locked="false" title="Donat" type="HTML">
</b:widget></b:section>
</div>
</div>
<!-- end menu -->
</aside>

ingat di atas hanya untuk contoh saja, jadi sesuaikan dengan widget anda sendiri.

Anda bisa menambah jumlah menu accordion ini sesuai kebutuhan dengan membuat kode seperti di bawah ini

<h2>MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar" preferred="yes">
<b:widget id="HTML8" locked="false" title="Dodol" type="HTML">
</b:widget>
</b:section>
</div>

tambahkan sampai berapa pun anda mau. untuk contoh sya buatkan saja berikut:

<!-- start menu -->
<div id="db-tab-acor">
<h2>
MENU 1</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar1" preferred="yes">
</b:section></div>
<h2>
MENU 2</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar2" preferred="yes"/>
</div>
<h2>
MENU 3</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar3" preferred="yes"/>
</div>
<h2>
MENU 4</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar4" preferred="yes"/>
</div>
<h2>
MENU 5</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar5" preferred="yes"/>
</div>
<h2>
MENU 6</h2>
<div class="tab-view">
<b:section class="sidebar" id="sidebar6" preferred="yes"/>
</div>
</div>
<!-- end menu -->

Jangan lupa ubah MENU 1, 2, 3, dst sesuai judul widget anda atau judul content yang ada di menu.

Setelah selesai langkah di atas, tambahkan kode berikut di atas kode


<script type="text/javascript">
//<![CDATA[
$(function() {
$('#db-tab-acor .tab-view').hide();
$('#db-tab-acor h2:first').addClass('show').next().slideDown('slow');
$('#db-tab-acor h2').click(function() {
if($(this).next().is(':hidden')) {
$('#db-tab-acor h2').removeClass('show').next().slideUp('slow');
$(this).toggleClass('show').next().slideDown('slow');
}
});
});
//]]>
</script>

Langkah akhir silahkan simpan template anda dan lihat hasilnya.

ingin lebih menarik bisa silahkan di buka langsung editornya


Sekian saja tentang membuat menu accordion dengan jQuery semoga sukses...

Membuat posting di homepage warna warni


salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasikan sesuai keinginan masing - masing. dalam share kali ini saya hanya akan memberi trik simplenya menggunakan javascript nanti hasilnya agar lebih bagus bisa sobat sesuaikan sendiri.

pertama, silahkan buka editor template blogger sobat jangan lupa untuk mencegah dan jaga jaga dari adanya kesalahan backup terlebih dahulu template sobat agar nanti lebih mudah untuk mengembalikan seperti semula bila terjadi hal hal yang tidak sesuai langkah.

sekarang mari kita mulai bagaimana caranya, cari kode di bawah ini

<b:includable id='post' var='post'> /* kode tag pembuka */

.......................
......bla bla bla......
.......................

</b:includable> /* kode tag penutup */

setelah di temukan silahkan ganti seluruh kode yang terdapat di antara kode di atas dengan kode di bawah ini

<article class='post hentry'>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if></b:if>
<div class='post-header'>
<div class='post-header-line-1'/>
</div>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='gambar-depan'>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJxn6T3RlghnejEELafD7BimRQMYLEjP3_VSH8EEpLi7z9q-txsb3wST7LdfZRI__7RhVsUn1bQJdbUuEcb-0KUkbZmDirvlkzdj6oGJ2nZp102Zb0pUPYxsQZwU3UtMwr7jgA8ozeqU/s1600/mac.jpg'/></a>
</b:if>
</b:if>
<b:if cond='data:post.labels'>
<div class='post-label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag nofollow'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
</b:loop>
</div>
</b:if>
</div>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<div class='post-info'>
<div class='post-info-icon admin'>
<b:if cond='data:top.showAuthor'>
<span class='vcard'>
<span class='fn'>
<a href='http://www.blogger.com/profile/09882050325461413449' target='_blank'><data:post.author/></a>
</span>
</span>
</b:if>
</div>
<div class='post-info-icon jam'>
<abbr class='updated published' expr:title='data:post.timestampISO8601'>
<data:post.timestamp/>
</abbr>
</div>
<div class='post-info-icon komentar'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if>
<b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'>
<data:post.numComments/> Komentar </b:if>
</a>
</b:if>
</div>
</div>
<data:post.snippet/>
<b:else/>
<data:post.body/> </b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-info' style='padding:0 0 0 0 !important;margin:-10px 0 20px 0 !important;border-top:none !important;border-bottom:none !important;'>
<div class='post-info-icon admin'>
<b:if cond='data:top.showAuthor'>
<span class='vcard'>
<span class='fn'>
<a href='http://www.blogger.com/profile/09882050325461413449' rel='publisher' title='dafin defandaky'>
<data:post.author/>
</a>
</span>
</span>
</b:if>
</div>
<b:if cond='data:post.labels'>
<div class='post-info-icon label'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</div>
</b:if>
<b:if cond='data:post.dateHeader'>
<div class='post-info-icon tanggal'>
<abbr class='updated published' expr:title='data:post.timestampISO8601'>
<data:post.dateHeader/>
</abbr>
</div>
</b:if>
<div class='post-info-icon komentar'>
<b:if cond='data:post.allowComments'>
<a expr:onclick='data:post.addCommentOnclick' href='#comment-form'> <b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> <b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Komentar </b:if>
</a>
</b:if>
</div>
</div>
</b:if>
<data:post.body/>
</b:if>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'></div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span> </div>
</div>
</b:if>
</article>

tambahkan css berikut di template sobat bersama css yang lain

/* post homepage warna warni */
.gambar-depan{
border:none;
box-shadow:none;
width:250px;
height:175px;
text-align:center;
float:left;
margin:-32px 15px -30px -22px;
position:relative;
background:#993333;
}

.gambar-depan img{
padding:0;
width:80px;
height:80px;
border:8px solid #000;
border-radius:100px 100px;
margin-top:33px;
}

.gambar-depan img:hover{
border:5px solid #333;
border-radius:100px 100px;
}

.gambar-depan:before{
content:&quot;&quot;;
width:0;
height:0;
position:absolute;
top:45%;
right:0;
border:7px solid transparent;
border-color:transparent #fff transparent transparent;
}

.db-merah .gambar-depan {background:#ff0000;}
.db-biru .gambar-depan {background:#0000cc;}
.db-orange .gambar-depan {background:#ff3300;}
.db-kuning .gambar-depan {background:#ffcc00;}
.db-ungu .gambar-depan {background:#660099;}
.db-hijau .gambar-depan {background:#006600;}
.db-coklat .gambar-depan {background:#663300;}
.db-pink .gambar-depan {background:#ff0033;}

.post-label{position:absolute;top:15px;right:0;z-index:99;}
.post-label a{font-family: &#39;Oswald&#39;, Verdana,Sans-serif;text-transform:uppercase;background-color:#0099ff;color:#fff;font-size:10px;display:block;float:left;padding:4px 8px;}
.post-label:first-child a {border-radius:5px 0 0 0}
.post-label a:hover{background:#996600;}
.post-info-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oH67rByXKDgg1DvqAH-WGdEx5P34iUSo578xcWpZbgy2WtYHDV-d9gLpo4oAUHIX14hUdZsrchHGirt9lY-txAfGHTYF98g3v9kjuIMlC1pZa_pHKymquiwWy9cPnZiitBFs8nGW1dw/s1600/icnall.png);background-repeat:no-repeat;}
.post-info{display:block;margin:5px 0 5px 0px;padding:3px 0;color:#999;line-height:1.6em;border-top:1px dotted #e2e2e2;border-bottom:1px dotted #e2e2e2;font-size:11px;overflow:hidden;}
.post-info a{color:#999;}
.post-info-icon{display:inline-block;float:left;margin:0 12px 0 0;}
.post-info a:hover{color:#000;}
.admin{background-position:0 1px;height:16px;padding:0 0 0 17px;}
.tanggal{background-position:0 -32px;height:16px;padding:0 0 0 17px;}
.jam{background-position:0 -98px;height:16px;padding:0 0 0 17px}
.komentar{background-position:0 -132px;height:16px;padding:0 0 0 17px;}
.label{background-position:0 -166px;height:16px;padding:0 0 0 17px;}

kemudian letakkan kode di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.post h2{
font-size:19px;
margin:0px; !important;
margin-bottom:5px !important;
font-weight:400;
line-height:1.4em;
color:#4a4a4a
}
.post{
font-weight:400;
font-size:13px;
border:1px solid #ddd;
padding-bottom:5px;
box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 1px 3px rgba(163, 163, 163, 0.4);
}
</style>
</b:if>
</b:if>

Silahkan anda sesuaikan sendiri css di atas agar sesuai dengan tampilan homepage blog sobat atau keinginan agar terlihat lebih menarik.

langkah terakhir letakkan kode javascript dibaah ini di atas kode </head>

<script type='text/javascript'>
$(window).ready(function(){
$('.post').each(function(){
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-merah')}
else
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-biru')}
else
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-orange')}
else
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-kuning')}
else
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-ungu')}
else
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-hijau')}
else
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-coklat')}
else
if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-pink')}
})
});
</script>

silahkan ubah label-anda dengan label posting blog yang anda inginkan, pastikan label sesuai agar berjalan dengan baik

setelah semua langkah di atas telah di terapkan silahkan simpan perbuhan template yang sudah anda buat dan lihat hasilnya.

Sekian saja share dan trik membuat posting di homepage warna warni, semoga berguna dan bermanfaat...

Membuat efek linknudge pada label blog


Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery.


buat sobat yang memasang label dengan style biasa atau could bawaan blogger, trik ini bisa di gunakan untuk menambah tampilan label sobat menjadi sedikit lebih unik walaupun tidak begitu canggih :-D...

langsung saja kita mulai bagaimana cara membuat linknudge pada label blog kita:

Pertama, pastikan template sobat sudah terpasang jquery seperti di bawah ini

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

lalu buka editor template blog sobat, jangan lupa untuk berjaga - jaga dari terjadinya kesalahan selalu backup template ketika sedang melakukan perubahan

cari kode tag </head>, gunakan ctrl+f untuk memudahkan pencarian. Kemudian copy kode di bawah ini Dan letakkan di atas kode </head>.

<script type='text/javascript'>
var dur = 400; // kecepatan efek geser
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px' // jarak kiri link label
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // penutup Jquery Script
</script>

Silahkan di sesuaikan yang sudah saya beri keterangan sesuai keinginan anda atau serasi dengan template milik blog sobat

setelah itu simpan template sobat, lalu lihat hasilnya.

trik ini bisa juga di terapkan dalam hal lain, misalnya seperti menu navigasi dan lainnya.

<nav class='menu-db-contoh'>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
</nav>

tampilan animasi tidak hanya bisa di beri efek jarak kiri tetapi bisa di tambah dengan efek tertentu jadi silahkan di kreasikan sendiri untuk apa saja dan efeknya.


demikian saja share saya kalini ini tentang membuat efek linknudge pada label blog semoga berguna dan bermanfaat...

Membuat show hide konversi kode dan emoticon


Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak.


pertama buka editor template blogger lalu tambahkan css di bawah ini

.box-konvert-kode-db {
width:100%;
height:410;
margin:10px 0px;
}

css di atas hnya tampilan apa adanya untuk membungkus element konversi kode, silahkan anda tambahkan beberapa hal yang anda inginkan seperti backgraund, padding, atau efek lain da sesuaikan nilai height sesuai template anda.

sekarang kita lanjutkan pada javascriptnya, silahkan lihat dibawah ini

<script>
$(document).ready(function() {
$('.konvert').click(function() {
$('.box-konvert-kode-db').show();
$('.db-close-show').show();
$('.konvert').hide();
});

$('.db-close-show').click(function() {
$('.box-konvert-kode-db').hide();
$('.db-close-show').hide();
$('.konvert').show();
});

$('.db-show-emo').click(function() {
$('.comment_emo_list').toggle('slow');
});
});
</script>

Penjelasan logika tentang javascript diatas

.konvert di sisipkan dalam sebuah tombol awal dan ketika di klik maka .box-konvert-kode-db dan .db-close-show akan di tampilkan sedangkan .konvert akan di sembunyikan dimana .db-close-show adalah class yang di pasang pada tombol penutup konversi kode.
pada saat .konvert di sembunyikan dan .db-close-show yang tampil jika di klik kembali maka .box-konvert-kode-db dan .db-close-show akan disembunyikan lalu .konvert di munculkan kembali seperti fungsi semula dan akan begitu seterusnya.

sedangkan pada .comment_emo_list class emoticon pada smile komentar blogger akan muncul dengan efek toggle ketika .db-show-emo di klik, begitu juga sebaliknya ketika di klik kembali untuk menyembunyikan.

bagaimana cara menempatkan jika kita telah memasang tombol di dalam formulir komentar? silahkan lihat caranyanya sebagai berikut.

buat sobat yang sudah memiliki atau memasang tombol pada pesan formulir komentar, langkahnya mudah silahkan saja sisipkan kelasnya di dalam tombolnya atau lebih mudah misalakan

untuk tombol show <a class='tombol-konversi'>show konvert</a> maka akan jadi seperti ni <a class='tombol-konversi konvert'>show konvert</a>
untuk tombol hidenya tinggal tambahkan class tombol serupa namun ubah class konvert dengan class tombol hidenya jadi kalau di gabungkan akan jadi <a class='tombol-konversi konvert'>show konvert</a><a class='tombol-konversi db-close-show'>hide konvert</a>

yang perlu di perhatikan beri class tombol hide dengan style='cursor:pointer;display:none' karena tombol ini tidak punya link maka ketika disorot biar mouse berubah dan untuk display none tombol hide berfungsi untuk menyembunyikan tombol hide sebelum tombol show di buka sehingga tidak muncul bersamaan ketika fungsi belum di jalankan.

bingung dengan penjelasan diatas?

memang koding membingungkan, tapi buat anda yang tidak mau bingung silahkan comot aja yang sudah jadi yang saya buat di bawah ini

<span class='konvert /* class tombol anda */' style='cursor:pointer;'>Konversi Kode</span>
<span class='db-close-show /* class tombol anda */' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='db-show-emo /* class tombol anda */' style='cursor:pointer;'>show emo</span>

jangan lupa ubah class /* class tombol anda */ dengan punya anda. atau jika tombol anda menggunakan atribut id letakkan saja di samping class sperti <a class='hide' id='tombol'>

untuk memanggil konversi kode dan emotikonnya saat di klik, maka kita akan membuat elemen htmlnya, lihat dibawah ini

<div class='box-konvert-kode-db' style='display:inline-block;display:none;'>
<iframe align='center' height='410' src='https://googledrive.com/host/0B05MjHQkbOjhRzNMQUtRQ01EMmc' width='100%'/>
</div>
<div class='comment_emo_list'/>

perhatikan style display:inline-block; ini berfungsi Nilai "inline" mendefinisikan sebuah elemen akan ditampilkan "inline" atau dalam baris yang sama dengan elemen yang lain. jadi buat sobat yang menggunakan thread komen dengan replay from memiliki jarak kiri, fungsi inline inilah yang akan menyesuaikan konversi kode agar memiliki lebar yang sama dengan form komentar.
sedangkan display:none; menyembunyikan konversi kode sebelum fungsi show di jalankan.

Saatnya menerapkan setelah mendengar ocehan panjang.

cari baris bais kode tag yang diawalai dengan <b:includable id='threaded-comment-form' var='post'> lalu temukan kode <p><data:blogCommentMessage/></p> atau kode dimana dulu anda pernah membuat tombol dan memodifikasi formulir pesan komentar blogger.

letakkan kode tombol show hide di antar

<p><data:blogCommentMessage/>

...disini...

</p>

jadi dan hasilnya bisa dilihat di bawah ini:

<p><data:blogCommentMessage/>
<span class='konvert /* class tombol anda */' style='cursor:pointer;'>Konversi Kode</span>
<span class='db-close-show /* class tombol anda */' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='db-show-emo /* class tombol anda */' style='cursor:pointer;'>show emo</span>
</p>

lalu letakkan javascriptnya dan elemen htmlnya setelah kode tersebut, seperti berikut

<p><data:blogCommentMessage/>
<span class='konvert /* class tombol anda */' style='cursor:pointer;'>Konversi Kode</span>
<span class='db-close-show /* class tombol anda */' style='cursor:pointer;display:none'>Tutup Konverter</span>
<span class='db-show-emo /* class tombol anda */' style='cursor:pointer;'>show emo</span>
</p>
<script>
$(document).ready(function() {
$('.konvert').click(function() {
$('.box-konvert-kode-db').show();
$('.db-close-show').show();
$('.konvert').hide();
});

$('.db-close-show').click(function() {
$('.box-konvert-kode-db').hide();
$('.db-close-show').hide();
$('.konvert').show();
});

$('.db-show-emo').click(function() {
$('.comment_emo_list').toggle('slow');
});
});
</script>
<div class='box-konvert-kode-db' style='display:inline-block;display:none;'>
<iframe align='center' height='410' src='https://googledrive.com/host/0B05MjHQkbOjhRzNMQUtRQ01EMmc' width='100%'/>
</div>
<div class='comment_emo_list'/>

setelah selesai silahkan simpan template anda yang telah di beri perubahan dan lihat hasilnya... jangan lupa untuk mencari css .comment_emo_list dan tambahkan display:none; di dalamnya.

saya tidak hanya memberikan hasil jadinya, jadi saya juga menulis semua penjelasannya agar sobat lebih mengerti dan paham sekalian untuk belajar bersama saya.

sekian saja tentang membuat show hide konversi kode dan emoticon komentar blogger , silahkan di terapkan dan semoga berhasil...