Memasang widget popular post berwarna warni

Popular post adalah salah satu widget yang disediakan oleh blogger bagi memaparkan posting yang popular pada sesuatu bulan,minggu atau sepanjang masa.Anda boleh memilih bagaimana ia akan dipaparkan.Tutorial ini adalah cara untuk mengubahsuai paparannya dalam bentuk yang berwarna warni.

Langkah bagi membuatnya:

1.Masuk ke blogger dan masukkan widget popular post pada blog anda
   Pada dashboard pilih Layout>>Add A gadget

2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang anda inginkan.

3. Kemudian pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F
Kemudian letakkan kode berikut ini diatasnya

#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}
#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}
#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ulli:first-child:after{content:"1"}
#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ulli:first-child + li:after{content:"2"}
#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ulli:first-child + li + li:after{content:"3"}
#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ulli:first-child:after,
#PopularPosts1 ulli:first-child + li:after,
#PopularPosts1 ulli:first-child + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}


5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template 

Cara Memasang Widget PageRank Valid HTML5 di Blog

Cara Memasang Widget PageRank Valid HTML5 di Blog - PageRank merupakan tolak ukur sebuah blog, dengan pagerank yang tinggi orang akan lebih percaya kepada sebuah blog. Singkat cerita saya membuat blog, seperti biasa karena pemula saya sering copas artikel dari blog lain. Setelah membaca sebuah artikel yakni bahaya copas, didalamnya dikatakan bahwa jika kita sering melakukan copas bukan tidak mungkin blog kita tidak akan mendapat pagerank dari google. Nah, sejak kejadian itu saya enggan lagi untuk copas (kecuali kode-kode aneh buatan master).
Saya mencoba membuat artikel sendiri dengan gaya bahasa sendiri, saya terus berusaha yang terbaik dalam membuat artikel termudah supaya dapat dipahami oleh pembaca.

Berikut Cara Untuk memasang widget PageRank-PRchecker.Info:
1. Masuk ke http://www.prchecker.info/pagerank-check-button.php
2. Kemudian masukan alamat blog (url blog) sobat dan lengkapi verifikasi kodenya

3. Kemudian salin (copy) salah satu script yang sesuai dengan icon yang dipilih kedalam notepad dulu

Kodenya kurang lebih seperti ini:

<a href="http://www.prchecker.info/" title="PageRank Checking Icon" target="_blank">
<img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL3lvZ2EtdGMuYmxvZ3Nwb3QuY29tLw==&tag=1" alt="PageRank Checking Icon" style="border:0;" /></a>

anda lihat kode & yang saya kasih tanda, kode & tidak valid HTML5, jadi untuk memasang widget PageRank valid HTML5 ini harus mengubah kode & menjadi &amp; setelah diganti kodenya jadi seperti ini:

<a href="http://www.prchecker.info/" title="PageRank Checking Icon" target="_blank">
<img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL3lvZ2EtdGMuYmxvZ3Nwb3QuY29tLw==&amp;tag=1" alt="PageRank Checking Icon" style="border:0;" /></a>

4. Masuk ke dashboard > tata letak > klik tambah gadget/add gadget > pilih HTML atau javascript
5. Lalu salin kode yang sudah valid HTML5 tadi kedalam kotak HTML
6. Simpan

Membuat Link Berkdedip Warna-Warni di Blog

Cara Membuat Link Berkdedip Warna-Warni di Blog - Untuk mempercantik blog anda dan anda ingin link di blog anda kedap-kedip warna-warni saat link disentuh cursor atau bahasa programnya hover, saya mohon maaf untuk demonya tidak ada.

Uuntuk pemasangannya ada 2 cara yang pertama cara menggunakan kode panjang dan yang kedua menggunakan kode pendek (menggunakan link)

Cara Pertama:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum </head>

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>

4. Simpan template

Cara Kedua:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum </head>

<script src='http://sabarmuanas.googlecode.com/files/infonetmu.blogspot.com.mousepelangi.js' type='text/javascript'>
</script>

4. Simpan template

Cara Membuat Kotak Centang Di Blog

Cara Membuat Kotak Centang Atau Ceklis Di Blog - Kotak centang ini berfungsi untuk mempermudah anda dalam membuat tutorial, tapi tutorial ini lebih spesipik artinya tidak umum lebih kepada perorangan, dan tidak dipakai oleh banyak orang, daripada penasaran lihat dulu demonya dibawah ini:

Tutorial apa yang anda suka di blog ini?

Template Blogger Gratis
Tutorial Blog
Gaya Hidup
Informasi
Komputer
Lainnya

Kode dasarnya seperti ini (anda simpan kode dibawah ini didalam HTML postingan) :

<input type="checkbox">

Untuk mengembangkannya seperti pada demo di atas gunakan kode ini:

Tutorial apa yang anda suka di blog ini?<br />
<br />
<input type="checkbox" />Template Blogger Gratis<br />
<input type="checkbox" />Tutorial Blog<br />
<input type="checkbox" />Gaya Hidup<br />
<input type="checkbox" />Informasi<br />
<input type="checkbox" />Komputer<br />
<input type="checkbox" />Lainnya<br />

Cara Follow Blog Dengan Cepat dan Sangat Mudah

Cara Follow Blog Dengan Cepat dan Sangat Mudah - Pernah sobat kunjungi beberapa blog yang tidak memakai widget Google Friend Connect, jadi susah kan follownya, mengapa banyak blog yang tidak memakai widget Google Friend Connect?, hanya satu masalahnya bikin loading blogger jadi berat, tapi tutorial saya kali ini sangatlah simple dan sangat mudah dikerjakan. Follow blog itu ibarat kita punya facebook tapi gak punya teman satu-pun, lalu apa yang akan saya baca, lihat?, status gak ada, berita gak ada, serasa punya dunia sendiri, kembali lagi ke pokok ketika kita membuka blogger.com dan anda tidak mengikuti atau follow blog satu-pun kan serasa kesepian dan juga gak ada yang menarik, apa yang mau dibaca?, tapi ketika kita follow semua blog yang pernah kita kunjungi atau blog yang sangat bermanfaat bagi diri kita sendiri maupun orang lain jangan segan-segan untuk megikutinya / follow. Apa saja yang kita dapatkan ketika mengikuti blog orang lain?, the first pastinya akan mendapatkan artikel terbaru dari blog yang anda ikuti, the second ketika kita mengunjungi blogger.com (ketika sudah login) pastinya tidak akan kebingungan lagi mau ngapain?, dan juga ngga usah ribet cari-cari di google. Kalau menurut saya sendiri follow blog orang lain itu sangat beruntung dan tidak akan rugi sepeser-pun, saya aja mengikuti 103 blog, ya udah daripada ngomong terus kayak tukang obat kita lagsung saja ke pokok tutorial saya kali ini tentang Cara Follow Blog Dengan Cepat dan Sangat Mudah, berikut totorialnya:

1. Login ke Blogger
2. Dashboar > gulung layar monitor anda kebawah > klik tambahkan

3. Lalu masukan alamat web atau blog yang anda ikuti / follow contoh saya masukan alamat web/blog nya seperti ini http://yoga-tc.blogspot.com/

4. Klik tombol "ikuti" yang berwarna orange

5. Selesai dan sekarang anda dapat mendapatkan artikel terbaru dari blog yang anda ikuti

Tag Kondisional Blogger dan Cara Penggunaannya

Tag Kondisional Blogger dan Cara Penggunaannya - Beberapa rekan mungkin sudah tidak asing lagi atau sudah jadi keluarga dengan kata-kata Tag Kondisional, atau mungkin sebagian baru mendengar apa itu tag kondisional. Secara sederhana, arti tag kondisional adalah tag yang digunakan untuk mengatur elemen-elemen di mana akan ditampilkan, atau dimana akan disembunyikan.

Sebagai contoh, saya akan menyembunyikan widget Artikel Pilihan (di footer) dan akan ditampilkan hanya pada halaman postingan dan tidak ada tampil selain halaman yang sudah ditentukan (postingan). Untuk mengaturnya kita perlu Tag Kondisional.

Untuk yang sudah mahir silakan kunjungi sumber pengambilan saya pada blog Dora The Explorer (DTE), tentang Tag Kondisional Tingkat Pertama dan Tag Kondisional Tingkat Lanjut. Disini saya coba jelaskan   tentang tag kondisional serta penggunaannya bagi pemula.

Tag Kondisional Halaman Muka (Homepage)
Halaman muka atau homepage adalah alamat blog kita, contoh : http://yoga-tc.blogspot.com/. Tag kondisional untuk hanya tampil pada halaman awal / homepage blog sobat, kodenya sebagai berikut:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ISI KODE
</b:if>

secara sederhana, artinya ISI KODE akan ditampilkan apabila di Halaman Muka. Atau kadang kadang ditulis dengan kebalikan kode tersebut seperti ini:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
ISI KODE
</b:if>

kode diatas beda dengan kode sebelumnya, perbedaannya terletak pada tanda == dan !=. Maka arti kode diatas " != " adalah ISI KODE akan ditampilkan kecuali pada Halaman Muka.
Yang harus diingat bahwa tanda == artinya sama dengan != artinya kecuali.
Penerapan kode tersebut sama pada tag kondisonal yang lainnya di bawah ini.

Tag Kondisional Halaman Item (Postingan)
Contoh halaman posting : http://yoga-tc.blogspot.com/2013/12/tag-kondisional-blogger-dan-cara-penggunaanya.html

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Statis
Contoh halaman statis / laman: http://yoga-tc.blogspot.com/p/link-sahabat.html

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Indeks
Halaman indeks semua jenis halaman selain halaman postingan

<b:if cond='data:blog.pageType == &quot;index&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Label
Contoh halaman label : http://yoga-tc.blogspot.com/search/label/Tutorial%20Blog

<b:if cond='data:blog.searchLabel'>
ISI KODE
</b:if>

Tag Kondisional Halaman Tertentu

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
ISI KODE
</b:if>

Contoh penggunaannya:

<b:if cond='data:blog.url == &quot;http://yoga-tc.blogspot.com/2013/12/tag-kondisional-blogger-dan-cara-penggunaanya.html&quot;'>
ISI KODE
</b:if>

Tag Kondisional Error Page 404
Error Page adalah halaman yang tidak ditemukan, contoh link error page 404 http://yoga-tc.blogspot.com/cari-bubur.html:

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
ISI KODE
</b:if>

Tag Kondisional Halaman Arsip
Contoh halaman arsip : http://yoga-tc.blogspot.com/2013_12_14_archive.html

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
ISI KODE
</b:if>

Contoh Penggunaan Tag Kondisional
Cara membuat widget HTML1 hanya tampil di postingan:

<b:widget id='HTML1' locked='false' title='Artikel Pilihan' type='HTML'>
     <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
   </b:widget>

Anda lihat tanda == di atas, itu artinya widget tersebut ditampilkan dalam halaman yang telah ditentukan, tapi kalo != sebaliknya widget tersebut tidak ditampilkan dalam halaman yang diperintahkan/ditentukan melainkan ditampilkan di halaman sebaliknya yaitu homepage, statis, dll pokonya ditampilkan selain halaman postingan

Jika sobat masih kebingungan atau ragu-ragu bisa sobat tanyakan di komentar.

Sumber: Kang Ismet, Buka Rahasia Blogspot

Mungkin ini adalah hari terakhir saya untuk memposting artikel dikarenakan saya akan menghadapi ujian nasional yang sangat berat saya jalani, untuk mempersiapkan ujian nasional saya putuskan untuk berhenti dulu nge ngeblogger untuk beberapa bulan kedepan, jadi saya masih aktif sampai hari ini tgl. 21 Desember 2013, bagi yang mau bertanya buruan, sebelum waktunya habis, dan jangan sia-siakan waktu anda !!!

Cara Memasang PRISM SyntaxHighlighter di Blog

Cara Memasang PRISM SyntaxHighlighter di Blog | Bagi sahabat yang sering berbagi tutorial, saya kira sudah tidak asing lagi dengan istilah Syntax Highlighter. Tapi mungkin juga masih ada yang bertanya, apa sih sintaxhighlighter itu? Bahasa mudah nya membuat kode berwarna warni. Menurut pengalaman saya PRISM SyntaxHighlighter ini paling ringan loadingnya.

Untuk pemasangannya, hanya memerlukan dua langkah mudah, yaitu memasang kode CSS dan JavaScript. Sebelum memasang kode CSS, silahkan pilih tema Dark atau Light.

Demo Light Theme - Demo Dark Theme

Untuk Menambahkan jQuery Pada Template Blogger ikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan salah-salahsatu kode CSS di bawah ini sebelum/di atas ]]></b:skin>

CSS Light Theme:

/* Tema : LightSyntax oleh Blog Krizeer
URL: http://yoga-tc.blogspot.com/2013/12/cara-memasang-prism-syntaxhighlighter-di-blog.html */ 
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Dark Theme

/* Tema RDark oleh DTE:] berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

4. Tambahkan JavaScript dibawah ini di atas </body>

<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>

5. Simpan template

Cara penggunaan:

Setiap tipe bahasa mempunyai kelas masing-masing

• HTML, XML, PHP ⇒ language-markup
• CSS ⇒ language-css
• JavaScript ⇒ language-javascript

Detail penulisan seperti ini:

<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape/konversi`) di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

Sumber: http://www.dte.web.id/2012/09/syntax-highlighter-dengan-prism.html dan http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html

Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre

Cara Membuat Seleksi Otomatis Pada Tag Blockquote dan Pre - Bagi sahabat yang suka berbagi tutorial, biasanya membagikan kode-kode yang suka dicopy. Standarnya penggunaan kode itu pada tag code atau tag pre. Akan tetapi setelah saya mengunjungi blog sahabat, tidak sedikit menggunakan blockquote untuk berbagi kode, itu dikarenakan blockquote lebih mudah digunakan dan tidak ribet, tinggal block > klik ikon "quote" mudah kan?, contoh penggunaan tag pre:

<pre>Sekarang aku makin sayang sama kamu</pre>

Untuk mempermudah mengcopy code yang dibagikan, sebaiknya menggunakan seleksi otomatis. Artinya, dengan hanya mengklik atau klik ganda (double click) kode tersebut akan terseleksi semua, tinggal melakukan Ctrl+C atau klik kanan kemudian Copy.

Untuk menerapkan seleksi otomatis pada tag blockquote:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Simpan kode dibawah ini sebelum </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;blockquote&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Untuk menerapkan seleksi otomatis pada tag pre:
Ikuti langkah ke-1, 2, dan 3 seperti di atas.

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

Pada script di atas, saya menggunakan klik ganda (double click) untuk menerapkan satu kali klik langsung terseleksi, sobat tinggal mengganti dblclick menjadi click.