Website Iklan Tayang Selamanya
Selamat datang di situs web periklanan jaringan unikbaca.com "Semoga Hari Anda Selalu Menyenangkan!"
Setidaknya satu iklan Anda posting juga di situs web iklan ini!
Agar pengunjung atau pengakses dapat mencari dan tahu usaha Anda
📝 POSTING Hari ini DISKON 50%

Tampilkan postingan dengan label Trik. Tampilkan semua postingan
thumbnail

Syntax Highlighter sederhana


Apa itu Syntax Highlighter? para blogger seringkali berbagi script atau potongan kode untuk pembaca atau siapapun yang membutuhkannya untuk pengembangan dan tampilan web atau blog. Kebanyakan menggunakan blockquote sebagai "bidang pembungkus" dari script atau potongan kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. pada Syntax Highlighter merupakan upaya untuk mempresentasikan script atau kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya Javascript, CSS, HTML, Phyton, PHP, dan masih banyak lagi yang telah di golongkan dan di tandai dengan warna berbeda sesuai jenis.

kali ini, saya akan berbagi cara mudah untuk memasang Syntax Highlighter yang terbilang mudah ringan dan baik. untuk mengikuti pemasangan pada blog anda silahkan simak di bawah ini langkahnya:

1. Masuk Blogger
2. Pilih template dan Edit HTML
3. Masukan kode CSS dibawah ini diatas kode </style>

body {
background-color:#E7E5DC;
padding:50px;
}

pre {
background-color:#eee;
color:#069;
padding:0.5em 1em;
overflow:auto;
white-space:pre;
word-wrap:normal;
font:bold 12px/1.5em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
position:relative;
margin:0 0 1em;
}

pre .the-num {
position:absolute;
top:0;
bottom:0;
left:0;
padding:0.5em 0.5em 0.5em 1em;
color:#555;
background-color:#ccc;
border-right:2px solid #444;
}

pre .bracket {color:darkblue;}
pre .tag,
pre .tag .keyword,
pre .tag .attribute {color:blue;}
pre .selector {color:blue;}
pre .attribute,
pre .regexp {color:darkorange;}
pre .str {color:green;}
pre .tag .str {color:brown;}
pre .keyword {color:darkred;}
pre .comment {font-style:italic;color:#999;}
pre .num,
pre .hex {color:darkviolet;}
pre .name,
pre .important,
pre .array {color:red;}
pre .important {background-color:yellow;}
pre .doctype {color:magenta;}

4. Letakkan kode berikut di atas kode </body>

<script type='text/javascript'>
// JQuery Syntax Highlighter
$(window).load(function() {
$('pre').each(function() {
var list = "(true|false|null|main|in|endif|if|endfor|for|while|finally|var|new|function|do|return|void|else|break|catch|instanceof|with|throw|case|default|try|this|switch|continue|typeof|delete)",
repli1 = new RegExp(list + " ", "ig"),
repli2 = new RegExp(list + "( ?)<span", "ig"),
$this = $(this);
$this.html($this.html()
.replace(/(<br>|\n)$/ig, "")
.replace(/(\t)/ig, " ")
.replace(/&quot;/ig, "\"")
.replace(/&#39;|&apos;/ig, "\'")
.replace(/(.?)'(.*?)'/g, "$1<span class='str'>\'$2\'</span>")
.replace(/(.?)"(.*?)"/g, "$1<span class='str'>\"$2\"</span>")
.replace(/(.?)(""|'')/g, "$1<span class='value'>$2</span>")
.replace(/(#[A-F0-9]{3,6})/ig, "<span class='hex'>$1</span>")
.replace(/(\d+(?!(.*&lt;)))/g, "<span class='num'>$1</span>")
.replace(/((#|\.)[\-_A-Z0-9]+)/ig, "<span class='selector'>$1</span>")
.replace(/(\{|\}|\(|\)|\[|\])/g, "<span class='bracket'>$1</span>")
.replace(/&lt;(.*?)&gt;/g, "<span class='tag'>&lt;$1&gt;</span>")
.replace(/&lt;!--([\s\S]*?)--&gt;/gm, "<span class='comment'>&lt;!--$1--&gt;</span>")
.replace(/\/\*([\s\S]*?)\*\//gm, "<span class='comment'>/*$1*/</span>")
.replace(/[^\:]\/\/(.*)/g, "<span class='comment'>//$1</span>")
.replace(/<\/span>\/(.*)\/([gim]+),( ?)<span class='str'>/g, "</span><span class='regexp'>/$1/$2</span>, <span class='str'>")
.replace(repli1, "<span class='keyword'>$1</span> ")
.replace(repli2, "<span class='keyword'>$1</span>$2<span")
.replace(/function<\/span> (.[^<]*)<span/g, "function</span> <span class='name'>$1</span><span")
.replace(/([\-_A-Z]+)(?=(\s+|)):(.(?!\{)*)/ig, "<span class='attribute'>$1</span>:$2$3")
.replace(/h<span class='num'>([1-6])<\/span>/ig, "h$1")
.replace(/!important/ig, "<mark class='important'>!important</mark>")
.replace(/&lt;!(doctype)(.*)&gt;/ig, "<span class='doctype'>&lt;!$1$2&gt;</span>")
.replace(/@<span class='attribute'>(import|page|media|charset|keyframes|font-face)<\/span>/ig, "@$1")
.replace(/(@(import|page|media|charset|keyframes|font-face))/ig, "<span class='keyword'>$1</span>")
.replace(/<span class='bracket'>\[<\/span>(.*)<span class='bracket'>\]<\/span>/ig, "<span class='array'>[$1]</span>")
).find('.str span, .regexp span, .comment span, .doctype span, .hex span, .array span, .url span').contents().unwrap();
$this.append('<div class="the-num"></div>');

// Insert the line number
var num = $this.html().split(/\n|<br>/).length,
count = 0;
for (var i = 0; i < num; i++) {
count = count + 1;
$this.find('.the-num').append(count + '.<br/>');
}
$this.css('padding-left', $this.find('.the-num').outerWidth()+14);

});
});
</script>

5. Simpan perubahan
6. Untuk memanggil di dalam posting, gunakan cara penulisan seperi berikut

<pre> ...kode disini... </pre>

jika langkah anda benar, maka hasilnya akan terlihat seperti di bawah ini:


semoga sukses dan bermanfaat...
thumbnail

Show Hide Searchbox Blogger

Membuat tampilan blog menjadi unik memang tidak ada habisnya dan kali ini saya coba untuk berbagi cara membuat kotak pencarian yang bisa di munculkan dan di sembunyikan pada blogger.

Show Hide Searchbox Blogger

lihat contoh berikut selain untuk menambah unik tampilan, trik kotak pencarian seperti ini juga bisa di gunakan untuk menghemat ruang dan kolom. bagaimana caranya, ikuti langkah berikut ini.

Kami sedang mencari agen iklan untuk periklanan media nasional disetiap desa atau kelurahan di seluruh Indonesia, yang mau bekerja secara partime atau paruh waktu baik melalui online maupun nyata, dan ini tidak terikat target khusus.

Silahkan login terlebih dahulu di editor template blogger anda.

setelah itu letakkan kode HTML kotak pencarian berikut ini di elemen yang anda inginkan, misalnya di header, di menu, atau di sidebar blog anda. berikut ini adalah kode HTML kotak pencariannya:

setelah itu, letakkan kode CSS berikut ini di dalam kelompok dimana CSS blog anda di simpan:
.input-wrapper {
border:1px solid #333;
width:26px;
height:26px;
background-color:#eee;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
overflow:hidden;
position:relative;
}

.input-wrapper input,
.input-wrapper input:focus {
border:none;
background:none;
margin:0 0;
padding:0 16px;
display:block;
width:200px;
height:26px;
font:italic bold 12px/26px Arial,Sans-Serif;
color:#333;
outline:none;
}

.input-wrapper.focus {
background-color:#eee;
border-color:#000;
}

.input-wrapper .sc {
display:block;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%; -webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
sekarang tambahkan kode jQuery berikut agar fungsi berjalan dengan baik:

$(function() {
$('.search-form .sc').on("click", function() {
$(this).hide()
.parent().addClass('focus')
.stop().animate({width:200}, 120, "swing")
.find('input').trigger("focus")
.on("focusout", function() {
$(this).next().show()
.parent().removeClass('focus')
.stop().animate({width:26}, 120, "swing");
});
return false;
});
});

Kami agen situs penerbit content placement Indonesia, jasa kerjasama penerbitan, menerima jasa content placement dengan pemasangan content placement untuk jangka pendek dengan minimal satu kali mengirim content placement, dan menerima kerjasama jangka panjang yang anda inginkan.

Perlu anda sesuaikan: ubah lebar sesuai dengan tampilan di blog anda, dengan mengatur kode berikut .stop().animate({width:200}, 120, "swing"

setelah itu simpan dan lihat hasilnya, demikan saja semoga berguna.
thumbnail

Membatasi jumlah pencarian posting


Kalau sebelumnya saya membahas tentang cara bagaimana membatasi jumlah posting yang di sajikan dalam pencarian per label, kali ini saya akan membahas cara membatasi jumlah posting yang akan di tampilkan ketika user atau pengunjung menggunakan form pencarian untuk menemukan sebuah artikel atau posting bukan dari kategori label.

Bingung? coba lakukan pencarian di blog ini dan lihat adressbar maka akan terlihat seperti gambar di bawah ini


tentunya jumlah posting yang muncul juga akan sesuai dengan jumlah yang telah di tentukan.

untuk membuatnya langsung saja simak langkah berikut ini.

Pertama seperti biasa login terlebih dahulu ke dasboard blogger anda
Pilih edit HTML template
Temukan kode markup html formulir pencarian anda, seperti berikut ini

<form action='/search' class='form-wrapper-db-sc' method='get'>
<input id='a' name='q' placeholder='Cari disini...' type='text'/>
</form>

jika sudah, sekarang letakkan kode berikut ini yang berguna untuk mengatur berapa jumlah posting yang akan di tampilkan di hasil pencarian

<input name='max-results' type='hidden' value='8'/>

jika langkahnya di lakukan hasilnya akan seperti berikut

<form action='/search' class='form-wrapper-db-sc' method='get'>
<input id='a' name='q' placeholder='Cari disini...' type='text'/>
<input name='max-results' type='hidden' value='8'/>
</form>

setelah itu silahkan simpan semua perubahan yang telah anda lakukan. sebagai hasil akhirnya tes dan coba jalankan agar anda tahu hasil dari pekerjaan yang telah anda lakukan.

Silahkan ubah nilai value sesuai kebuthan anda

demikian saja, semoga berguna dan semoga sukses...

thumbnail

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/AVvXsEhtcNJz3EGOiG1zz9zoCk4VUTVhfnDwHN5mkPztKUmqRDCFuj2frwHBzn8BOGGHV2rkFSWGjsBrsvLmMPtPMsCqxpw__x-8vFDuGUqoQvRlYQHgsa4wN-tripFzQ1OUf6ni-HUEtpvIUB0/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/AVvXsEgsbEHR0xXgU58pqa7yE2RZaFQ-mNnSwhJ2ADSeamTCVk6lVuHChenGk4IffLqIxVUXAl_JNoZYYaBTwSf8IyXVHs6Stjkg4qGAGb7ocgeb9ddRDK0PQly4EqrMFKojx5t3LCkmjn4c_Hs/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...
thumbnail

Breadcrumb Microdata valid HTML5


Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan. Hal ini terbukti dari beberapa postingan blog sesepuh seperti, kang ismet, kang asep sule, taufik dan masih banyak lagi yang muncul di halaman awal google, ternyata di pengaruhi juga oleh keberadaan breadcrumb ini.

lalu apa fungsi microdata?

Contoh mudahnya, jika Anda membuat suatu CSS dan ingin menjelaskan kode (syntax) pada bagian tertentu maka yang Anda lakukan adalah menambahkan <!-- komentar --> Prinsip dari Microdata ini pun, sekilas hampir sama dengan penambahan komentar pada suatu CSS, namun bedanya komentar ini ditulis pada format HTML5.

Fungsi Microdata Untuk Blog

Perlu ditegaskan, Microdata bukan untuk Optimasi atau Menaikkan Posisi Artikel atau Blog Anda di SERP, melainkan Microdata ini mempunyai Fungsi untuk Merubah Tampilan Pada Hasil Pencarian, Yang Tentunya Akan Mengundang Orang Untuk Mengklik Situs Anda.

Fungsi Microdata Untuk Search Engine

Penggunaan Microdata pada Blog Anda pun juga memberikan dampak pada Search Engine, yaitu memudahkan penempatan suatu artikel pada direktori mereka (google) tentunya pesan ini disampaikan oleh Google sendiri yang menganjurka kita untuk menggunakan Microdata (ketimbang Microformat atau RDFa).

sekarang langsung kita ke trik dan cara memasang Breadcrumb dengan Microdata valid HTML5

Langkah 1 : Simpan kode ini di atas </style> atau ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:12px;color:#333;border-bottom:1px dotted #555;}

Langkah 2 : Cari kode <b:includable id='main' var='top'> kemudian ganti dengan kode di bawah ini:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- breadcrumb halaman static -->
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb halaman posting -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a>
</b:if>
</b:loop>
&#187; <span itemprop='title'><data:post.title/></span></div>
<b:else/>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Tanpa Label</span> &#187; <span itemprop='title'><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb halaman arsip -->
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Arsip <data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<!-- breadcrumb pencarian label -->
<b:if cond='data:blog.pageName == &quot;&quot;'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'>Penelusuran Arsip Posting</span></div>
<b:else/>
<div class='breadcrumbs' itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Beranda</span></a> &#187; <span itemprop='title'><data:blog.pageName/></span></div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Langkah terakhir simpan template dan lihat hasilnya...

Jika tampilan breadcrumb di atas kurang menarik silahkan ubah css sesuka anda, anda juga bisa mengubah &#187; dengan simbol lain agar lebih menarik.

sekian saja semoga berguna untuk anda yang membutuhkan Breadcrumb dengan Microdata valid HTML5, terimakasih :)
thumbnail

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...
thumbnail

Judul posting responsive

Mungkin ada dari sobat sekalian yang mencoba mengatur tampilan posting di homepage agar terlihat rapi saat responsive berjalan, dengan mengakali membuat judul posting sependek mungkin walau pun judul posting tersebut memang sedikit panjang sehingga nantinya judul tidak terlihat bertumpuk dan tidak rapi untuk template yang tidak menerapkan line-height. kali ini saya ingin berbagi bagaimana caranya judul di postingan di homepgae bisa terlihat sama dan rapi ketika responsive berjalan, coba tes di blog ini dengan mengecilkan layar browser anda atau lihat gambar di bawah ini:

untuk mengakali hal seperti di atas, dalam css3 kita bisa menggunakan deklarasi css text overflow, yang saya terapkan di blog ini sehingga judul posting yang terlalu panjang akan terpotong secara otomatis tergantung dari yang kita sesuaikan ketika responsive di jalankan.

untuk menerapkan trik ini bagi anda yang tertarik, silahkan ikuti saja langkah singkat di bawah ini

1. Seperti biasa buka Blogger
2. Pilih Template dan buka Edit HTML
3. Cari css tag judul posting di template anda, biasanya seperti ini:


.post-body h1 {

.... value disini ....

}

jika template sobat sudah di rombak, cari saja hasil rombakan anda :)

4. Tambahkan css berikut ini di dalam css tersebut

width:99%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
position:relative;

untuk yang bingung saya ambil contoh di jadi jadi seperti ini:

.post-body h1 {
width:99%;
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
position:relative;

.... value lainnya ....

}

5. Simpan template anad dan lihat hasilnya.

Sedikit keterangan tentang css di atas:

width:99%; digunakan untuk mengatur batas lebar judul posting, sehingga ketika judul posting melewati batas tersebut akan di lakukan pemotongan.
white-space:nowrap; digunakan untuk meneruskan tanpa menyesuaikan batas elemen.
overflow:hidden; overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll.
text-overflow:ellipsis adalah pemotongan dengan ahiran titik, jika anda hanya ingin di potong tanpa titik silah gunakan text-overflow:clip.

jika anda ingin lebih memahami silahkan mempelajari css text properti dan sekian saja semoga bermanfaat...
thumbnail

Alternatif posting tanpa judul

Penasaran dengan judul posting ini silahkan simak saja, sebenarnya trik ini saya gunakan untuk mengganti sebuah judul pada sebuah posting yang tidak memiliki judul. adakah posting tanpa judul? mungkin terjadi karena lupa ketika membuat posting atau sebagainya.
untuk menerepkan trik ini cukup mudah

1. Silahkan masuk ke Blogger
2. Pilih Template dan Buka Edit HTML
3. Cari kode berikut ini

 <h3 class='post-title'>
<b:if cond='data:post.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>
</b:if>
</h3>

ingat, setiap template memiliki tag yang berbeda di judul postingnya bisa h1, h2 atau h4 ganti saja tag h3 dengan tag tersebut jika tidak di temukan.

jika sudah di temukan silahkan ganti dengan kode di bawah ini

<h3 class='post-title'>
<b:if cond='data:post.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>
<b:else/>
[Untitled]
</b:if>
</h3>

4. Simpan hasil editan template anda dan lihat hasilnya.

untuk menguji coba trik di atas silahkan buat sebuah postingan tanpa memberi judul pada posting tersebut.

Sedikit tambahan, [Untitled] bisa anda ganti dengan kata lain yang anda inginkan. semoga berguna...
thumbnail

CSS widget label cloud blogger


Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css.

untuk menerapakannya ikuti langkah di bawah ini:

1. Masuk Dasboard Blogger
2. Pilih Template
3. Kemudain Pilih Edit HTML
4. Salin CSS berikut dan letakkan diatas kode </b:skin> atau </style>:

<!-- css ui label color by db -->
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}

.sidebar .label-size a {
color:#fff!important;
font-weight:300;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

css di atas hanya untuk blog yang memiliki sedikit label, jika label dalam blog anda lebihg banyak silahkan gunakan css berikut

<!-- css ui label color by db -->
.cloud-label-widget-content {text-align: left;}
.label-size {background: #5498C9;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F53477;}
.label-size:nth-child(2) {background: #89C237;}
.label-size:nth-child(3) {background: #44CCF2;}
.label-size:nth-child(4) {background: #01ACE2;}
.label-size:nth-child(5) {background: #94368E;}
.label-size:nth-child(6) {background: #A51A5D;}
.label-size:nth-child(7) {background: #555;}
.label-size:nth-child(8) {background: #f2a261;}
.label-size:nth-child(9) {background: #00ff80;}
.label-size:nth-child(10) {background: #b8870b;}
.label-size:nth-child(11) {background: #99cc33;}
.label-size:nth-child(12) {background: #ffff00;}
.label-size:nth-child(13) {background: #40dece;}
.label-size:nth-child(14) {background: #ff6347;}
.label-size:nth-child(15) {background: #f0e68d;}
.label-size:nth-child(16) {background: #7fffd2;}
.label-size:nth-child(17) {background: #7a68ed;}
.label-size:nth-child(18) {background: #ff1491;}
.label-size:nth-child(19) {background: #698c23;}
.label-size:nth-child(20) {background: #00ff00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #ff6bb5;
}

5. Jangan lupa untuk menyimpan editan template anda.

pastikan label anda di seting seperti berikut:


sekian saja share saya kali ini, jika anda ingin memiliki banyak warna dan tidak cocok dengan warna di atas bisa langsung anda sesuikan dengan keinginan anda...
thumbnail

Memasang meta viewport


Membahas responsive memang agak panjang lebar, dan perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan menggunakan meta tag viewport dalam responsive.
Dalam Responsive Meta Tag Viewport sangat penting karena meta tag ini berguna untuk menentukan tata letak tampilan Mobile. ketika blog kita di akses lewat Browser Desktop Meta Tag ini tidak memiliki fungsi, namun ketika blog kita di akses atau di buka via Mobile Browser barulah si viewport ini bekerja.
Dibawah ini merupakan meta tag viewport yang paling sering digunakan oleh para blogger.

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Tampilan dari blog yang tidak memiliki atau memasang skala yang perlu ditentukan akan terlihat berantakan jika diakses pada versi mobile, untuk itulah meta ini berguna dan pemecahan masalahnya.
Untuk lebih jelas pada bahasan Meta Tag viewport kita bisa lihat contoh di bawah ini perbedaan menggunakan meta tag viewport dan tidaknya


berikut ini cara sederhana menerapkan meta tag viewport dan media queries.
contoh ini adalah tampilan menggunakan pengodean versi HTML5.

<!DOCTYPE html>
<HTML>
<head>

/* pemasangan meta viewport */
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

<style type='text/css'>
/* CSS Template */
body {

...nilai css page body...

}
/* CSS MEDIA QUERy */
@media screen and (max-width: 1024px){
/* CSS styles */
}
@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:600px){
/* CSS styles */
}
@media screen and (max-width:480px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}
</style>
</head>
</body>

...isi blog...

</body>
</HTML>

jika sobat ingin desain template blognya bisa tampil sempurna bisa memasang semua resolusi dalam media queries di contoh di atas, resolusi yang paling baik yang akan di tentukan dalam resolusi responsive Web Desain pada perangkat Mobile adalah pada resolusi 768px.
setiap penerapan media queries akan terlihat jelas jika anda mengecilkan ukuran browser anda ketika halaman sudah di muat untuk melihat apakah sudah sesuai atau belum.

sekian saja share dari saya semoga berguna...
thumbnail

widget amoung tanpa javascript


Memasang widget amoung memang bukan hal yang rahasia bagi blogger, widget among berguna sebagai counter banyak user yang sedang mengunjungi laman di blog kita tapi mungkin penggunaan javascript dari widget ini menambah beratnya dan waktu memuat laman kita dalam blog apalagi blog sobat yang sdah memasang banyak javascript.

untuk itu kali ini saya akan mengeshare cara memasang widget amoung tanpa menggunakan javascript itung itung sedikit mengurangi beban load atau muat pada blog sobat blogger sekalain.

langsung saja kita bahas triknya, silahkan ikuti langkah di bawah ini:

Buat sobat blogger yang belum memiliki widget amoung silahkan daftar di wibsitenya secara gratis di whos.amung.us
Setelah itu copy javascriptnya lalau ambil id yang ada dalam javascript tersebut, lihat pada gambar berikut


gunakan kode di bawah ini sesuai selera anda dan letakkan di widget sobat

online
kodenya

<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/widget/
kode-anda" /></a>

online
kodenya

<a href="http://whos.amung.us/stats/kode-anda"><img src="http://whos.amung.us/cwidget/kode-anda/ff0000ffffff/" /></a>

online
kodenya

<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/cwidget/kode-anda/ffc20e000000/" /></a>

online
kodenya

<a href="http://whos.af/mung.us/stats/kode-anda"><img src="http://whos.amung.us/swidget/kode-anda" /></a>

agar valid dalam validator html5, berikan gambar dengan atribut alternatif dengan alt seperti berikut ini:

<a href="http://whos.af/mung.us/stats/kode-anda"><img alt='online' src="http://whos.amung.us/swidget/kode-anda" /></a>

simpan dan lihat hasilnya...

demikian saja share saya kali ini, tentang memasang widget amoung tanpa javascript semoga berguna.
thumbnail

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...
thumbnail

Membuat Responsive pada ADSENSE


Mengatasi masalah iklan dari google yang tidak responsive adalah satu trik menyesuaikan tampilan blog agar tampil bagus di resolusi berbeda dan hal ini perlu kita lakukan apa lagi bagi sobat yang memasang di blognya. pada awal Agustus 2013, Google Adsense resmi support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih dalam tahap versi Beta dan menurut saya pribadi masih banyak kekurangan dimana iklan yang ditampilkan harus sesuai dengan ukuran Pixel yang sudah kita tetapkan sebelumnya. Responsive Adsense tidak mengalir dan menggulung seperti Responsive pada tampilan, misalkan kita ingin menampilkan iklan dalam media queries max-width:300px berarti kita harus menentukan iklan yang memang mendukung dan sesuai dengan resolusi ini, misalnya pada ads unit 250x250 atau 320x50. Perlu diperhatikan dalam mencoba beberapa desain iklan kalian harus mengecilkan browser secara manual sesuai dengan resolusi yang sudah ditetapkan dan jangan lupa untuk melakukan refresh pada browser untuk melihat tampilan iklan. Contoh dibawah ini merupakan standar Source Code adsense dalam mode responsive, dan kita hanya perlu merubah sedikit pada bagaiannya:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- responsive_homepage -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Secara default, kode iklan responsif menyertakan tag data-ad-format dengan nilai "auto". Tag ini yang memungkinkan tindakan penentuan ukuran cerdas untuk unit iklan responsif.
Jika Anda mengetahui ukuran unit iklan yang tepat per perangkat yang paling sesuai dengan situs responsif Anda, Anda dapat menggunakan kueri media CSS3 untuk menetapkan ukuran unit iklan responsif Anda. Contoh berikut menunjukkan cara mengubah kode iklan untuk menggunakan kueri media CSS3:

<style>
@media(min-width: 500px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .dbads-responsive { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DAFIN-RESPONSIVE -->
<ins class="adsbygoogle dbads-responsive"
style="display:inline-block"
data-ad-client="ca-pub-xxxx"
data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

untuk lebih banyak media query

<style>
@media(min-width: 240px) { .dbads-responsive { width: 234px; height: 60px; } }
@media(min-width: 320px) { .dbads-responsive { width: 250px; height: 250px; } }
@media(min-width: 480px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 768px) { .dbads-responsive { width: 728px; height: 90px; } }
@media(min-width: 1024px) { .dbads-responsive { width: 468px; height: 60px; } }
@media(min-width: 1216px) { .dbads-responsive { width: 728px; height: 90px; } }
</style>
<div style="text-align:center">
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- DAFIN-RESPONSIVE -->
<ins class="adsbygoogle dbads-responsive"
style="display:inline-block"
data-ad-client="ca-pub-xxxx"
data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

perhatikan dbads-responsive ubah dengan kepunyaan sobat sendiri. Aturan @media adalah sintaks CSS3, dan didukung di semua browser modern. Jika Anda ingin mendukung browser lama, seperti Internet Explorer 7 atau versi sebelumnya, sebaiknya Anda menentukan ukuran default terlebih dahulu. Hal ini akan memastikan penayangan iklan bahkan saat kueri media tidak didukung. Perhatikan bahwa menetapkan ukuran kode iklan melalui CSS di lembar gaya eksternal tidak didukung secara resmi.

Contoh bentuk horizontal

Contoh ini menunjukkan cara mengubah kode iklan responsif untuk menentukan bentuk horizontal umum untuk unit iklan Anda:

<ins class="adsbygoogle"
style="display:block;"
data-ad-client="ca-pub-1234"
data-ad-slot="5678"
data-ad-format="horizontal"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Secara default, kode iklan responsif menyertakan tag data-ad-format dengan nilai "auto" yang memungkinkan tindakan penentuan ukuran otomatis untuk unit iklan responsif. Namun, Anda dapat menentukan bentuk umum untuk unit iklan responsif Anda dengan mengubah nilai data-ad-format menjadi salah satu dari nilai-nilai berikut: "kotak", "tegak", "horizontal" atau kombinasi apa pun dari nilai-nilai tersebut yang dipisahkan oleh tanda koma, misalnya "kotak, horizontal".
Semoga bermanfaat...
thumbnail

Responsive Video, Iframe, Embed, Object dan img


Masih tentang responsive, kali ini sesuai dengan judul saya shara cara membuat responsive pada Video, Iframe, Embed dan Object dan img.
membuat responsive Untuk video, iframe, embed dan object pada intinya hampir sama yaitu tetap memberi satuan %. Saat ini embed video yang paling banyak digunakan adalah Youtube, namun terlepas dari youtube ada juga yang menanam langsung pada Hosting atau penyimpanan sendiri dan biasanya untuk pemanggilannya mengunakan tag <video>. dibawah ini merupakan contoh embed code yang paling banyak digunakan:

<video width="500" height="400" src="..."></video>
<iframe width="500" height="400" src="..."></iframe>
<object width="500" height="400" src="..."></object>
<embed width="500" height="400" src="..."></embed>

Membuat responsive pada video dalam iframe sangatlah mudah, seperti menangani responsive pada grid atau layaout kita tinggal mengaturnya melalui CSS. Dibawah ini merupakan contoh CSS untuk membuat video dalam ukuran penuh sesuai dengan ukuran lebar elemen div diblog.

.VideoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.VideoWrapper iframe, video, object, embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Langkah untuk menerapkan pada iframe pada embed video VIMEO lihat berikut ini:

<div class="VideoWrapper">
<iframe src="link video" width="700" height="385"></iframe>
</div>

untuk menerapkan pada iframe pada embed video YOUTUBE adalah sebagai berikut:

<div class="VideoWrapper">
<iframe height="357" src="http://www.youtube.com/embed/m5_AKjDdqaU?rel=0&hd=1" width="670"></iframe>
</div>

Untuk Responsive Image / Gambar

pada sebuah Gambar img (image) jika kita menggunakan satuan nilai em dan px misalkan seperti width:900px dan height:700px ini tidak akan berjalan di Responsive, maka kita ubah dengan menggunakan satuan nilai % yaitu seperti: width:80% dan height:80%. namun kita juga tidak harus selalu menggunakan nilai satuan % tapi bisa juga menggunakan langkah alternatif auto sebagai gantinya. untuk mengatasi ukuran gambar yang melewati ukuran induk elemen kita bisa menggunakan max-width:100% cara ini digunakan agar ukuran gambar bisa menyesuaikan sendiri secara proporsional. Prinsip ini juga berlaku untuk iframe, objects dan video.

contoh yang paling umum lihat css di bawah ini:

img{
max-width:100%
}

Atau untuk menampilkan ukuran gambar sesuai dengan ukuran aslinya bisa memkai css seperti berikut:

img{
height:auto;
width:auto;
max-width:100%
}

jadi trik di atas sangat mudah di jalankan dan di terapkan untuk mengubah tampilan menjadi responsive dan optimal di dalam tampilan, jadi silahkan sobat coba. sekian saja semoga berguna buat apa yang sobat jalankan...