Minggu, 28 Maret 2010

Boikot Pajak !

Sebuah "Wacana" yang muncul karena "sakit hati, kemarahan, hilangnya kepercayaan dan kemuakan" terhadap polah para pelaksana mandat rakyat yang selama ini kita kenal sebagai pemerintah atau pegawai negeri, yang terbagi dalam berbagai departemen. Menyedihkan sekaligus membuat hati pilu. Bertahun-tahun sudah negeri ini merdeka. Bertahun-tahun sudah masalah agama di urus oleh negara melalui departemen Agama, bertahun-tahun sudah Pancasila menjadi Dasar Negara dan menjadi kewajiban seiap anak untuk mempelajarinya ketika mulai masuk sekolah. Tetapi lacur ! Apa yang terjadi ?! Kebobrokan moral nggak pernah berubah apalagi hilang dari bumi tercinta ini.

Boikat Pajak ? Sebuah ide cantik yang menggelitik hati dan patut menjadi renungan untuk disikapi. Sebuah keniscayaan yang cerdas untuk "menghajar" pemerintah yang tak kunjung berjalan menindak para koruptor. Ya ..., bagaimana mereka mampu dan bisa memberangus koruptor, orang mereka sendiri sedang terbelit dugaan makan uang Century untuk memenangkan PEMILU. Bagaimana mungkin menangkapi para pelaku korupsi ketika lembaga yang dipercaya rakyat untuk menjadi pemburu, pengadil dan algojo bagi koruptor malahan dikenal sebagai "mafia" pelaku MARKUS dan Pakar Korupsi.

"Bangsa Bengek" ini sebenarnya sudah waktunya untuk mengundang para malaikat untuk mejadi "Presiden hingga Ketua RT", mengundang Napoleon Bonaparte untuk menjadi algojo bagi para koruptor dan memanggil Zooro (si Maling Budiman) untuk menjadi pembantu Malaikat yang menjabat menteri sosial. Agama nggak perlu di urus melalui departemen atau kementerian. Biar langsung jadi urusan setiap orang ama Tuhan. Langsung ... Nggak lewat makelar !!!Mereka semua nggak perlu digaji atau dinaikkan gajinya demi menjaga agar mereka tidak melakukan korupsi. Ya karena mereka memang punya mental "Pancasila" dan bukan "mental kere" seperti bangsa ini. Mental "Pancasila" : biar gaji kecil nggak doyan korupsi. "Mental Kere" : biar gaji segudang, korupsi jalan terus.

Ha....ha...ha.... Aku sebenarnya sudah bosan mengomentari bangsa bengek ini. Bosan melihat "maling-maling" berlaku suci yang berebutan menjadi pemimpin negeri. Ha... ha ... ha... Kita nggak bayar pajak pun sebenarnya bangsa ini sanggup tetap berdiri dan justru mampu memberi tunjangan bagi mereka yang lagi nganggur ketika "Sumber Kekayaan Negeri dikelola dengan kejujuran dan dipergunakan untuk sebesar-besarnya bagi kemakmuran dan kesejahteraan rakyatnya.

Sabtu, 27 Maret 2010

Cara Buat dan Pasang Jam Digital di Header Blog

Panduan dan Tutorial BloGGeR Cara Memodifikasi Blog :

Pasang jam pada blog sebenarnya sangat bermanfaat bagi blogger. Keasyikan saat posting atau "othak-athik" blog seringkali membuat blogger lupa waktu. Bagi yang lagi nggak punya tanggung jawab acara di keesokan harinya, sebenarnya sih nggak jadi masalah, tetapi ketika misalnya pagi harus "ngantor" atau punya "janji khusus", bisa-bisa semua jadwal jadi berantakan. Yanga lebih parah lagi : jangan-jangan justru "SK Pemberhentian Kerja" yang nongol. Untuk mengatasi masalah itu, akan sangat bijaksana seandainya kita pasang jam ditempat yang setiap kali terlihat di dalam blog kita. Disamping bermanfaat bagi "diri sendiri" tentunya juga akan jadi manfaat bagi para "petualang blog" yang juga sering lupa waktu ketika sudah mulai duduk di depan PC dan "jalan-jalan di belantara dunia maya. Oh..., ya... Satu hal yang dapat kita manfaatkan dari "pasang jam di bagian header" ini adalah : Wajah blog kita akan makin bertambah manis !!! Nggak percaya ?! Coba saja ...!

Cara pasanga jam di bagian Header :


  1. Login ke Blogger.
  2. Dasbor (Dashboard).
  3. KLIK Tata Letak (Layout).
  4. KLIK Edit HTML.
  5. Amankan Template (Backup Template). Anda bisa lihat caranya di sini !.
  6. Tetap di Edit HTMl.
  7. Cari KODE berikut : (Gunakan Ctrl+F) Untuk mengetahui lebih jelas KLIK di sini !.
  8. <div id='header-wrapper'>
  9. KODE di atas terletak di bawah KODE <body>
  10. Copy paste KODE di bawah ini dan letakkan di bawah <div id='header-wrapper'>
  11. <form name='clock' style='float:right;padding:5px;margin:40px 10px 10px;border:4px solid #666;background:#333;'>
    <input name='bgsGR' style='font-family:MS Sans serif;font-size:28px;color:#00FFFF;font-weight:bolder; background:#222 url(https://sites.google.com/site/mitrabarayaprojec/images/bg/mitrabaraya_bg-Bulao4x57.jpg) top repeat-x;border:2px dotted red;padding:5px 0;display:block;float:right;text-align:center;width:125px;'/>
    </form>
  12. Ganti <body> dengan KODE baru di bawah ini :
  13. <body onLoad='startclock()'>
  14. KLIK Simpan Template (SAVE Template).
  15. KLIK Elemen Laman (Page Elements).
  16. Simpan Javascript berikut dengan cara KLIK Tambah Gadget --> HTML/Javascript --> SIMPAN.
  17. <script type='text/javascript'>
    //<![CDATA[<!--
    //SimpleClock.js - mitrabaraya - shannenpio
    var timerID = null;
    var timerRunning = false;
    function stopclock (){
    if(timerRunning)
    clearTimeout(timerID);
    timerRunning = false;
    }
    function showtime () {
    var now = new Date();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds()
    var timeValue = hours
    timeValue += ((minutes < 10)?":0":":") + minutes
    timeValue += ((seconds < 10)?":0":":") + seconds
    document.clock.bgsGR.value = timeValue;
    timerID = setTimeout("showtime()",1000);
    timerRunning = true;}
    function startclock () {
    stopclock();
    showtime();
    }
    //]]>
    </script>
  18. Lihat hasilnya dengan membuka blog !

Tutorial terbaru:

Tutorial di atas digunakan untuk Template Tata Letak. JIka saat ini anda menggunakan New Blogger Template atau Perancang Template Blogger, anda bisa ikuti panduannya melalui link di bawah ini:

Pasang Digital Clock di Header Blogger Template Designer

DEMO :

Demo Jam digital di header Blogger Template Designer (perancang Template Blogger).

DEMO: Digital Clock di Header Blogger Template Designer

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - mitrabaraya «

Minggu, 21 Maret 2010

Cara Cepat Cari Kode HTML: Tutorial BloGGeR Kode HTML

Mencari KODE html, baik berupa KODE CSS ataupun xhtml dan KODE yang lain pada ruang Edit HTML template bila hanya mengandalkan mata telanjang dan ketelitian melulu akan menyita banyak waktu dan bikin kepala "mot-motan". Ada cara cepat dan sangat membantu kita untuk mencari KODE-KODE tersebut.

Cara Cepat Cari KODE HTML :


  1. Login ke Blogger.
  2. Dasboard :Masuk Halaman Dasbor (Dasboard).
  3. Tata Letak : KLIK Tata Letak (Layout).
  4. KLIK link Edit HTML.
  5. Tekan bersamaan Ctrl dan F pada keyboard. (Press Ctrl+F on your keyboard).
  6. Tulis KODE yang di cari pada toolbar yang disediakan oleh :
    • Opera : Muncul box baru di opera lama dan di opera baru di kiri atas seperti Internet Explorer (IE).
    • Mozilla : Di ujung kiri bawah.
    • Internet Explorer : Di ujung kiri atas.
  7. Find : KLIK Find Next, Next atau Previous.

Contoh Teknik mencari KODE :



- Misalnya KODE yang akan di cari sudah dituliskan tetapi ketika di "KLIK" pada "Find Next" tetap tidak berhasil diketemukan :

Kemungkinan :

  1. Penulisan KODE yang berasal dari luar (tutorial) ada perbedaan spasi dengan KODE pada Template. Misalnya --> height:10px; akan berbeda dengan -->height: 10px;
  2. Ada sisipan KODE lain pada template. Misalnya <i> ...</i> atau yang lain.
  3. Ada sedikit perbedaan KODE (teks) pada template. Misalnya pada tutorial tertulis header-wrapper dan di template tertulis header.

- Solusi :

  1. Penulisan KODE yang akan dicari dikurangi sedikit demi sedikit hingga KODE yang dicari ketemu. Tentu saja akan menyita lebih banyak waktu tetapi setidak-tidaknya tidak terlalu melelahkan bila dibandingkan menggunakan cara manual.
  2. Tuliskan KODE terdepan terlebih dahulu baru jika berhasil tambahkan KODE berikutnya. Begitu seterusnya hingga KODE yang dicari ditemukan. Catatan : bila ditambah malah jadi nggak ada sama sekali berarti cukup sampai KODE sebelumnya dan dilanjutkan dengan menyeleksi satu demi satu.
  3. Jangan lupa untuk mencoba melalui "Search up, Search down, Next atau Previous !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :



Update » January, 08, 2012

» Happy Blogging - mitrabaraya «

Rabu, 17 Maret 2010

Cara membuat Analog Clock dengan Background Animasi

Gambar di bawah adalah bentuk Analog Clock dengan Background Animasi



Silahkan langsung copy paste KODE dan simpan sebagai widget baru.

Langkah untuk Membuat Analog Clock dengan Background Animasi

  1. Login to Blogger (Login ke Blogger)
  2. KLIK link Design (Rancangan)
  3. KLIK Page Element (Elemen Laman)
  4. KLIK Add Gadget (Tambah Gadget). Gunakan bagian sidebar (samping kanan atau kiri)
  5. KLIK HTML/Javascript : Letakkan KODE dan script di dalamnya.
  6. KLIK SAVE (SIMPAN)
  7. Open Your Blog (buka Blog) : Lihat hasilnya dengan membuka blog.

Javascript dan KODE HTML Analog Clock dengan Background Animasi :
<script type="text/javascript">
var clocksize = 100;
var colnumbers = 'ff0000';
var colseconds = '12fe00';
var colminutes = 'ffcccc';
var colhours = 'ffcccc';
var numstyle = 0;
var font_family = 'helvetica,arial,sans-serif';
var localZone = 1;
var mytimezone = 0;
var dst = 0;
var city = '';
var country = '';
var fix = 1;
var xpos = 0;
var ypos = 0;
var dayname = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday');
var am="AM";var pm="PM";var pi=Math.PI;var d=document;var pi2=pi/2;var rad=(+clocksize)/2;var ctrX=(+xpos)+rad;var ctrY=(+ypos)+rad;var hourln=1;var minln=secln=2;for(var i=0;i<(rad/2)+(rad/16);i++){hourln+=1}for(var i=0;i<(rad/2)-(rad/8);i++){minln+=2;secln+=2}var font_size=rad/4;var offset=16;var clocknum=[[,1,2,3,4,5,6,7,8,9,10,11,12],[,"I","II","III","IIII","V","VI","VII","VIII","IX","X","XI","XII"],[,"·","·","-","·","·","|","·","·","-","·","·","||"]];if(numstyle<0||numstyle>2){numstyle=0}function timeZone(e,g,c,j){if(g){var h=e.getDay();var b=e.getSeconds();var f=e.getMinutes();var a=e.getHours()}else{e.setUTCMinutes(e.getUTCMinutes()+(c+j)*60);var h=e.getUTCDay();var b=e.getUTCSeconds();var f=e.getUTCMinutes();var a=e.getUTCHours()}if(a>11){moa=pm;a-=12}else{moa=am}return[h,moa,a,f,b]}function commonClock(a){a.style.position="absolute";a.style.top="0";a.style.left="0";a.style.visibility="hidden"}function displayClock(){if(!d.getElementById){return}var b=document.createElement("div");if(fix){b.style.position="relative";b.style.margin="auto";b.style.width=(clocksize+offset*2)+"px";b.style.height=(clocksize+offset*2)+"px";b.style.overflow="visible"}var j=[];for(var c=12;c>0;c--){j[c]=document.createElement("div");j[c].id="cnum"+c;commonClock(j[c]);j[c].style.width=(offset*2)+"px";j[c].style.height=(offset*2)+"px";j[c].style.fontFamily=font_family;j[c].style.fontSize=font_size+"px";j[c].style.color="#"+colnumbers;j[c].style.textAlign="center";j[c].style.paddingTop="10px";j[c].style.zIndex=1000;j[c].innerHTML=clocknum[numstyle][c];b.appendChild(j[c])}var g=[];for(c=minln;c>0;c--){g[c]=document.createElement("div");g[c].id="cmin"+c;commonClock(g[c]);g[c].style.width="1px";g[c].style.height="1px";g[c].style.fontSize="1px";g[c].style.backgroundColor="#"+colminutes;g[c].style.zIndex=997;b.appendChild(g[c])}var e=[];for(c=hourln;c>0;c--){e[c]=document.createElement("div");e[c].id="chour"+c;commonClock(e[c]);e[c].style.width="2px";e[c].style.height="2px";e[c].style.fontSize="2px";e[c].style.backgroundColor="#"+colhours;e[c].style.zIndex=998;b.appendChild(e[c])}var h=[];for(c=secln;c>0;c--){h[c]=document.createElement("div");h[c].id="csec"+c;commonClock(h[c]);h[c].style.width="1px";h[c].style.height="1px";h[c].style.fontSize="1px";h[c].style.backgroundColor="#"+colseconds;h[c].style.zIndex=999;b.appendChild(h[c])}var f=document.createElement("div");f.id="ampm";commonClock(f);f.style.width=((xpos+rad)*2)+"px";f.style.fontFamily=font_family;f.style.fontSize=(font_size*2/3)+"px";f.style.color="#"+colnumbers;f.style.textAlign="center";f.style.paddingTop="10px";f.style.zIndex=990;b.appendChild(f);var a=document.createElement("div");a.id="zone";commonClock(a);a.style.width=((xpos+rad)*2)+"px";a.style.fontFamily=font_family;a.style.fontSize=(font_size*2/3)+"px";a.style.color="#"+colnumbers;a.style.textAlign="center";a.style.paddingTop="10px";a.style.zIndex=990;b.appendChild(a);d.getElementById("clock_a").appendChild(b);for(var c=12;c>0;c--){d.getElementById("cnum"+c).style.top=(ctrY-offset+rad*Math.sin(c*pi/6-pi2))+"px";d.getElementById("cnum"+c).style.left=(ctrX-offset+rad*Math.cos(c*pi/6-pi2))+"px";d.getElementById("cnum"+c).style.visibility="visible"}updateClock()}function moveClock(a,g,c){for(var b=a;b>0;b--){d.getElementById(g+b).style.top=(ctrY+b*Math.sin(c))+"px";d.getElementById(g+b).style.left=(ctrX+b*Math.cos(c))+"px";d.getElementById(g+b).style.visibility="visible"}}function updateClock(){var b=new Date();var a=timeZone(b,localZone,mytimezone,dst);d.getElementById("ampm").style.top=(ypos+rad/3)+"px";d.getElementById("ampm").innerHTML=a[1]+" "+dayname[a[0]];d.getElementById("ampm").style.visibility="visible";if(!localZone){d.getElementById("zone").style.top=(ctrY+(rad/10))+"px";d.getElementById("zone").innerHTML=city+""+country;d.getElementById("zone").style.visibility="visible"}moveClock(secln,"csec",pi*a[4]/30-pi2);moveClock(minln,"cmin",pi*a[3]/30-pi2);moveClock(hourln,"chour",pi*a[2]/6+pi*(+b.getMinutes())/360-pi2);setTimeout("updateClock()",100)}window.onload=displayClock;
</script>

<div align="center" style="background:#333;margin:0px;padding:0;border:1px solid red;width:132px;"> <div id="clock_a" style="padding:10px;border:1px solid lime;margin:4px;background:black url(https://sites.google.com/site/mitrabarayaprojec/images/bg/mitrabaraya_bg-animasibeureumlestreng5x5.gif);width:100px; height:105px;"></div>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - mitrabaraya «

Minggu, 14 Maret 2010

Digital Clock : Panduan dan Cara Membuat Jam Digital

Screenshoot Digital Clock :


Langkah pemasangan Digital Clock

  1. Login ke Blogger.
  2. Design (Rancangan)
  3. Elemen Laman (Page Element)
  4. Add Gadget (Tambah Gadget). Lakukan di bagian Sidebar (samping kanan atau kiri)
  5. HTML/Javascript.
  6. Copy paste KODE dan script.
  7. KLIK SAVE (Simpan)
  8. Open your Blog (Buka Blog) untuk melihat hasilnya.
Sampeyan bisa juga meletakkan KODE CSS di atas KODE ]]></b:skin> dan Javascript di bagian body di antara tag <body> dan tag </body>

KODE CSS dan Javascript - Digital Clock :

.bgMITBARbox{
display:block;
padding:4px 4px 15px;
float:left;
margin:20px 5px 10px;
border:4px solid #555;
background:#000 url(https://sites.google.com/site/mitrabarayaprojec/images/bg/mitrabaraya_mini-clock-logo.png) bottom center no-repeat;
}
#bgMITBAR {
border:2px solid #555;
padding:6px 20px;
background:transparent url(https://sites.google.com/site/mitrabarayaprojec/images/bg/mitrabaraya-_bg-carulang.jpg) top repeat-x;
font-family:Verdana;
font-size: 22px;
font-weight:bolder;
color:lime;
}
<div class="bgMITBARbox">
<script type="text/javascript">
//<![CDATA[
//shannenpio - mitrabaraya * bgMITRABARAYA digiClock.js
day = new Date();
miVisit = day.getTime();
function clock() {
dayTwo = new Date(); hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes(); scNow = dayTwo.getSeconds();
miNow = dayTwo.getTime();
if (hrNow == 0) { hour = 12; ap = " AM";
} else if(hrNow <= 11) { ap = " AM"; hour = hrNow;
} else if(hrNow == 12) { ap = " PM"; hour = 12;
} else if (hrNow >= 13) { hour = (hrNow - 12); ap = " PM";}
if (hrNow >= 13) { hour = hrNow - 12;}
if (mnNow <= 9) { min = "0" + mnNow;}
else (min = mnNow)
if (scNow <= 9) { secs = "0" + scNow;} else { secs = scNow;}
time = hour + ":" + min + ":" + secs + ap;
document.form.button.value = time;
self.status = time; setTimeout('clock()', 1000);}
function timeInfo() {
milliSince = miNow; milliNow = miNow - miVisit;
secsVisit = Math.round(milliNow / 1000);
minsVisit = Math.round((milliNow / 1000) / 60);
alert("mITRA bARAYA - Shannenpio-1");}
document.write("<form name=\"form\">"
+ "<input id=\"bgMITBAR\" type=button value=\"Click for info!\""
+ " name=button onClick=\"timeInfo()\"></form>");
onError = null;
clock();
//]]>
</script>
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - MITRABARAYA «

Kamis, 11 Maret 2010

Gunakan Tagcloud Istimewa Rounded Corners Tag Cloud: Panduan Blogger Kreatif

Tag cloud yang satu ini sangat jauh berbeda dari tag cloud yang selama ini ada dan dipakai oleh seluruh blogger. Dari pengamatan yang aku lakukan, bahkan belum ada satupun blogger yang memakainya. Seluruh komponen dalam tag cloud spesial ini dibungkus dalam bingkai berbentuk lengkung. Dari box hingga setiap linknya. Dan yang lebih penting dari itu semua adalah : Berfungsi dengan amat sempurna di semua browser atau istilah kerennya "compatible with all browsers" ! Kita masih akan menggunakan KODE CSS sebagai pilar desainnya pertimbangan karena pengisian ulang link pada tag cloud tidak terlalu sering dilakukan (bisa dikatakan jarang sekali!) sehingga penggunaan javascript tidaklah mutlak diperlukan. Penggunaan javascript dalam tag cloud ini justru terasakan penting pada desain rounded cornersnya karena bila kita menggunakan KODE CSS murni maka KODE CSS yang diperlukan menjadi terlalu banyak dan sangat tidak praktis serta membuat bingung. Rounded Corners Tag Cloud ini saya postingkan setelah melalui pengujian penuh di ketiga browser yang paling sering digunakan. Mozzila, Opera dan IE. Untuk melihat bagaimana bentuk sesungguhnya dari Rounded Corners Tag Cloud, silahkan kamu buka DEMO yang telah tersedia.

D E M O

D E M O

Langkah membuat Rounded Corners Tag Cloud :

  1. Lakukan pengamanan terhadap template. Caranya lihat di sini !
  2. Login ke Blogger kemudian masuk ke Tata Letak, Elemen Laman, Tambah Gadget (bagian sidebar), HTML/Javascript, Masukkan KODE Lengkap dan terakhir KLIK SIMPAN.
  3. Lihat hasilnya dengan membuka blog.

Javascript dan kode CSS - Rounded Corners Tag Cloud :

<script type="text/javascript" src="http://tagcloud-using-curvycorners.googlecode.com/svn/rounded-curvycorners.js"></script>
<style type="text/css">
/* CSS Document round-corn-tagcloud.css*/
/* mitrabarayaonline.blogspot.com * shannenpio.blogspot.com */
#taglodbox{
width:272px;
height:370px;
border-radius: 15px;
background: #5b719e;
background: -moz-linear-gradient(top, #5b719e 0%, #110021 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b719e), color-stop(100%,#110021));
background: -webkit-linear-gradient(top, #5b719e 0%,#110021 100%);
background: -o-linear-gradient(top, #5b719e 0%,#110021 100%);
background: -ms-linear-gradient(top, #5b719e 0%,#110021 100%);
background: linear-gradient(top, #5b719e 0%,#110021 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b719e', endColorstr='#110021',GradientType=0 );
border: solid #930 4px;
margin:30px 5px 10px;
box-shadow:0 0 12px #555;
}
#taglod {
margin:0;
padding:10px 6px;
}
#taglod ul{
margin:10px 6px;
padding-left:5px;
list-style:none;
}
#taglod li {
float:left;
background-color: #330066;
color: #333366;
margin:2px 3px;
padding:1px 6px;
border-radius:10px;
border:solid #FFFF99 1px;
cursor:pointer;
list-style:none;
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}
#taglod li:hover {
float:left;
background:#999;
border:solid white 1px;
list-style:none;
color:#FF0000;
transform:scale(1.1);
-o-transform:scale(1.1);
-moz-transform:scale(1.1);
-webkit-transform:scale(1.1);
}
#taglod li a{
font-family:Arial;
font-weight:normal;
text-decoration:none;
padding:0;
margin:0;
transition:ease-in-out 0.8s;
-o-transition:ease-in-out 0.8s;
-moz-transition:ease-in-out 0.8s;
-webkit-transition:ease-in-out 0.8s;
}
#taglod li a:hover{text-decoration:none;color:#FF0000;}
/*#taglod li a:visited{color:red;} */
a.MITRABARAYAn12{font-size:12px;color: #00FF00;}
a.MITRABARAYAn14{font-size:14px;color: #00FF33;}
a.MITRABARAYAn18{font-size:16px;color: #FFFFFF;}
a.MITRABARAYAn18{font-size:18px;color: #FFCC33;}
a.MITRABARAYAn20{font-size:20px;color: #FFCC33;}
a.MITRABARAYAn22{font-size:22px;color: #FFCC33;}
a.MITRABARAYAb12{font-size:12px;color: #FF00FF;font-weight:bold;}
a.MITRABARAYAb14{font-size:14px;color: #33FFFF;font-weight:bold;}
a.MITRABARAYAb16{font-size:16px;color: #CCCC66;font-weight:bold;}
a.MITRABARAYAb18{font-size:18px;color: #CCCC66;font-weight:bold;}
a.MITRABARAYAb20{font-size:20px;color: #FFCC00;font-weight:bold;}
a.MITRABARAYAb22{font-size:22px;color: #6699FF;font-weight:bold;}
#taglodbox h3.cloud-title{font-size:22px;display:block;background:#666;color:white;margin:5px 5px 0;;border:1px dotted orange;padding:3px 8px;text-align:center;text-shadow:1px 1px 1px #000;border-radius:6px;}
</style>

xHTML - Rounded Corners Tag Cloud :

<div id="taglodbox">
<h3 class="cloud-title">Judul Tag Cloud</h3>
<ul id="taglod">
<li><a class="MITRABARAYAn14" href="Link-1" target="_blank">Nama Link-1</a></li>
<li><a class="MITRABARAYAb18" href="Link-2" target="_blank">Nama Link-2</a></li>
<li><a class="MITRABARAYAb20" href="Link-3" target="_blank">Nama Link-3</a></li>
<li><a class="MITRABARAYAb14" href="Link-4" target="_blank">Nama Link-4</a></li>
<li><a class="MITRABARAYAn12" href="Link-5" target="_blank">Nama Link-5</a></li>
<li><a class="MITRABARAYAb22" href="Link-6" target="_blank">Nama Link-6</a></li>
<li><a class="MITRABARAYAn14" href="Link-7" target="_blank">Nama Link-7</a></li>
<li><a class="MITRABARAYAn18" href="Link-8" target="_blank">Nama Link-8</a></li>
<li><a class="MITRABARAYAb12" href="Link-9" target="_blank">Nama Link-9</a></li>
<li><a class="MITRABARAYAb14" href="Link-10" target="_blank">Nama Link-10</a></li>
<li><a class="MITRABARAYAn12" href="Link-11" target="_blank">Nama Link-11</a></li>
<li><a class="MITRABARAYAb22" href="Link-12" target="_blank">Nama Link-12</a></li>
<li><a class="MITRABARAYAb12" href="Link-13" target="_blank">Nama Link-13</a></li>
<li><a class="MITRABARAYAb18" href="Link-14" target="_blank">Nama Link-14</a></li>
<li><a class="MITRABARAYAb12" href="Link-15" target="_blank">Nama Link-15</a></li>
<li><a class="MITRABARAYAb20" href="Link-16" target="_blank">Nama Link-16</a></li>
<li><a class="MITRABARAYAb16" href="http://shannenpio.blogspot.com" target="_blank">MitraBaraya</a></li>
</ul>
</div>

Keterangan/Catatan :

  1. Akan lebih baik bila Javascript Rounded Corners.js di upload terlebih dahulu di file hosting agar hanya digunakan sendiri.
  2. Jumlah link bisa ditambah atau dikurangi tergantung jumlah dan nama link yang akan dipasang.
  3. Nama Link dengan jumlah kata lebih dari satu, misalnya Tutorial Blogger dituliskan : Tutorial <br />Blogger supaya bentuknya "meninggi" bukan "memanjang".

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - mitrabaraya «

Rabu, 10 Maret 2010

Tutorial BloGGeR Edisi Khusus: Buat Perbedaan dengan CSS Tag Cloud with Rounded Corners

Untuk menggunakan CSS Tag Cloud with Rounded Corners ini langkah pembuatanya silahkan lihat di posting sebelummya atau bisa klik di sini. Tag Cloud ini juga sudah dicoba dan ternyata hasilnya sama bagusnya dengan yang sebelumnya. Bentuk tag cloud seperti gambar di bawah :



KODE CSS :

#taqbox {
background:#5d5577;
width:400px;
margin:20px 5px 5px;
padding:4px;
font-family:Arial;
}
.tboxcontent {
display:block;
background:#969bfd url(https://sites.google.com/site/animatemplate/bg/mitrabaraya_bgBulao-588x1.png);
border:3px solid #a490fa;
border-width:0 3px;
padding:6px 8px;
text-align:center;
}
.TB1, .TB2, .TB3, .TB4, .TB5, .TB6, .TB7 {
display:block;
overflow:hidden;
font-size:0;
}
.TB1, .TB2, .TB3, .TB4, .TB5, .TB6 {
height:1px;
}
.TB4, .TB5, .TB6, .TB7 {
background:#ccc;
border-left:1px solid #a490fa;
border-right:1px solid #a490fa;
}
.TB1 {margin:0 8px;background:#a490fa;}
.TB2 {margin:0 6px;background:#a490fa;}
.TB3 {margin:0 4px;background:#a490fa;}
.TB4 {margin:0 3px;background:#c0c2fa;border-width:0 5px;}
.TB5 {margin:0 2px;background:#c0c2fa;border-width:0 4px;}
.TB6 {margin:0 2px;background:#c0c2fa;border-width:0 3px;}
.TB7 {margin:0 1px;background:#c0c2fa;border-width:0 3px;height:2px;}
.taqlod{
padding:0;
margin:0;
text-decoration: none;
}
.taqlod h2{
margin:0;
font-family:Times New Roman;
font-size:26px;
color: #ddd;
text-align:center;
border-bottom:4px double #449bfa;
}
.taqlod a:link{
color:#fe9e37;
font-family:sans-serif;
padding:0 4px;
border:1px solid transparent;
transition:0.8s;
-o-transition:0.8s;
-moz-transition:0.8s;
-webkit-transition:0.8s;
}
.taqlod a:visited{
color:#00fc12;
}
.taqlod a:hover{
color:#930;
text-shadow:1px 1px 1px #000;
padding:0 4px;
background:#d2fac6;
box-shadow:0 0 10px #000;
border:1px solid red;
}
.taqlod a:active {
color: #ffffff;
background:red;
}
#tagidentitas{
background:#222055;
height: 25px;
border-left:3px solid #a490fa;
border-right:3px solid #a490fa;
font-size:11px;
position:relative;
}
#tagidentitas a{
float:right;
color:#66FFFF;
font-weight:bold;
padding:4px 6px;
text-decoration:none;
font-family:Sans-serif;
}
#tagidentitas a:hover{
color:#FFCC00;
border:none;
background:transparent;
}

xHTML :
<div id="taqbox">
<div class="taqlod">
<b class="TB1"></b><b class="TB2"></b>
<b class="TB3"></b><b class="TB4"></b>
<b class="TB5"></b><b class="TB6"></b>
<b class="TB7"></b>
<div class="tboxcontent">
<h2>CSS Tag Cloud-2</h2>
<a style="font-size: 14px" class="taqlod" href="Link-1" title="Title-1">Nama Link-1</a>
<a style="font-size: 22px" class="taqlod" href="Link-2" title="Title-2">Nama Link-2</a>
<a style="font-size: 26px" class="taqlod" href="Link-3" title="Title-3">Nama Link-3</a>
<a style="font-size: 24px" class="taqlod" href="Link-4" title="Title-4">Nama Link-4</a>
<a style="font-size: 16px" class="taqlod" href="Link-5" title="Title-5">Nama Link-5</a>
<a style="font-size: 18px" class="taqlod" href="Link-6" title="Title-6">Nama Link-6</a>
<a style="font-size: 12px" class="taqlod" href="Link-7" title="Title-7">Nama Link-7</a>
<a style="font-size: 15px" class="taqlod" href="Link-8" title="Title-8">Nama Link-8</a>
<a style="font-size: 26px" class="taqlod" href="Link-9" title="Title-9">Nama Link-9</a>
<a style="font-size: 14px" class="taqlod" href="Link-10" title="Title-10">Nama Link-10</a>
<a style="font-size: 23px" class="taqlod" href="Link-11" title="Title-11">Nama Link-11</a>
<a style="font-size: 12px" class="taqlod" href="Link-12" title="Title-12">Nama Link-12</a>
<a style="font-size: 13px" class="taqlod" href="Link-13" title="Title-13">Nama Link-13</a>
<a style="font-size: 21px" class="taqlod" href="Link-14" title="Title-14">Nama Link-14</a>
<a style="font-size: 20px" class="taqlod" href="Link-15" title="Title-15">Nama Link-15</a>
<a style="font-size: 26px" class="taqlod" href="Link-16" title="Title-16">Nama Link-16</a>
<a style="font-size: 22px" class="taqlod" href="Link-17" title="Title-17">Nama Link-17</a>
<a style="font-size: 16px" class="taqlod" href="Link-18" title="Title-18">Nama Link-18</a>
<a style="font-size: 27px" class="taqlod" href="Link-19" title="Title-19">Nama Link-19</a>
<a style="font-size: 26px" class="taqlod" href="Link-20" title="Title-20">Nama Link-20</a>
<a style="font-size: 23px" class="taqlod" href="Link-21" title="Title-21">Nama Link-21</a>
<a style="font-size: 22px" class="taqlod" href="Link-22" title="Title-22">Nama Link-22</a>
<a style="font-size: 12px" class="taqlod" href="Link-23" title="Title-23">Nama Link-23</a>
<a style="font-size: 13px" class="taqlod" href="Link-24" title="Title-24">Nama Link-24</a>
<a style="font-size: 28px" class="taqlod" href="Link-25" title="Title-25">Nama Link-25</a>
<a style="font-size: 15px" class="taqlod" href="Link-26" title="Title-26">Nama Link-26</a>
<a style="font-size: 16px" class="taqlod" href="Link-27" title="Title-27">Nama Link-27</a>
<a style="font-size: 20px" class="taqlod" href="Link-28" title="Title-28">Nama Link-28</a>
<a style="font-size: 21px" class="taqlod" href="Link-29" title="Title-29">Nama Link-29</a>
<a style="font-size: 12px" class="taqlod" href="Link-30" title="Title-30">Nama Link-30</a>
</div>
<div id="tagidentitas">
<a href="http://shannenpio.blogspot.com">12 Maret 2010 -<i> shannenpio</i></a></div>
<b class="TB7"></b><b class="TB6"></b>
<b class="TB5"></b><b class="TB4"></b>
<b class="TB3"></b><b class="TB2"></b>
<b class="TB1"></b>
</div>
</div>

Keterangan/Catatan :

  1. Jumlah link tidak harus 30 Link. Bisa ditambah atau dikurangi.
  2. href="Link-1" diisi seperti :http://shannenpio.blogspot.com/Tutorial Blogger.html
  3. Nama Link seperti misalnya Tutorial Blogger, Tips Trik Blogger, dll.
    Title berupa teks singkat yang berkaitan dengan Link yang di gunakan.
  4. Lebar box tag cloud bisa disesuaikan dengan ruang blog, atau diganti dengan --> width:auto; (KODE CSS paling atas).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - mitrabaraya «

Selasa, 09 Maret 2010

Cara Membuat CSS Tag Cloud: Panduan BloGGeR Special Edition

Membuat tag cloud tidaklah harus menggunakak javascript atau KODE html yang rumit dan cara pasangnya membuat pusing kepala. Dengan menggunakan KODE CSS yang simple kita bisa menciptakan sebuah tag Cloud yang sangat cantik dengan penampilan yang tak kalah menarik bila dibandingkan tag cloud lain dengan KODE atau script bejibun. Kelebihan penggunaan CSS murni ini tentunya yang jelas tidak bikin blog tambah "lelet".

Cara membuat CSS Tag Cloud :
  1. Login ke Blogger.
  2. Amankan template terlebih dahulu, caranya lihat di sini !
  3. Cari KODE ]]></b:skin> kemudian simpan KODE CSS di atasnya persis.
    KLIK Simpan Templates !
  4. Masuk ke Tata Latak dan Lanjutkan KLIK Elemen Laman.
  5. KLIK Tambah Gadget pada bagian "sidebar".
  6. KLIK HTML/Javascript.
  7. Letakkan data HTML yang berisi link Tag Cloud di ruangan tersebut.
  8. Klik "SIMPAN".
  9. Lihat Hasilnya dengan membuka blog !
Screenshoot CSS Tag Cloud :

CSS - CSS Tag Cloud :
#tagclg{
width:250px;
padding:12px 6px;
border:2px solid #660000;
background:#FFFFCC;
margin:30px 5px 5px;
}
#tagclg a{
font-family:Arial;
text-decoration:none;
}
#tagclg a:hover{
color:red;
text-decoration:none;
border-bottom:2px dotted blue;
}
#tagclg h5.judul{
font:20px Times New Roman;
color:#999;
background:#060344;
font-weight:bolder;
text-align:center;
border-bottom:2px solid #003366;
margin:0;
}
#tagclg a.A1{color:#006666; font-size:11px;}
#tagclg a.A1bold{color:#006666; font-size:11px; font-weight:bold;}
#tagclg a.B1{color: #333366; font-size:12px;}
#tagclg a.B1boldbold{color:#006666; font-size:12px; font-weight:bold;}
#tagclg a.C1{color:#66CC33; font-size:14px;}
#tagclg a.C1bold{color:#66CC33; font-size:14px;font-weight:bold;}
#tagclg a.D1{color:#990099; font-size:16px;}
#tagclg a.D1bold{color:#990099; font-size:16px;font-weight:bold;}
#tagclg a.E1{color:#990033; font-size:18px;}
#tagclg a.E1bold{color:#990033; font-size:18px;font-weight:bold;}
#tagclg a.F1{color: #FF9900; font-size:20px;font-weight:bold;}
#tagclg a.F1bold{color:#990033; font-size:20px;font-weight:bold;}
xHTML - CSS Tag Cloud :
<center>
<div id="tagclg">
<h5 class="judul">CSS Tag Cloud</h5>
<a href="http://.../Link-1" target="_blank" title="XX Title Link-1" class="B1">Nama Link-1</a>
<a href="http://.../Link-2" target="_blank" title="XX Title Link-2" class="A1bold">Nama Link-2</a>
<a href="http://.../Link-3" target="_blank" title="XX Title Link-3" class="C1">Nama Link-3</a>
<a href="http://.../Link-4" target="_blank" title="XX Title Link-4" class="D1bold">Nama Link-4</a>
<a href="http://.../Link-5" target="_blank" title="XX Title Link-5" class="F1">>Nama Link-5</a>
<a href="http://.../Link-6" target="_blank" title="XX Title Link-6" class="A1bold">Nama Link-6</a>
<a href="http://.../Link-7" target="_blank" title="XX Title Link-7" class="F1">Nama Link-7</a>
<a href="http://.../Link-8" target="_blank" title="XX Title Link-8" class="A1bold">Nama Link-8</a>
<a href="http://.../Link-9" target="_blank" title="XX Title Link-9" class="A1bold">Nama Link-9</a>
<a href="http://.../Link-10" target="_blank" title="XX Title Link-10" class="F1bold">Nama Link-10</a>
<a href="http://.../Link-11" target="_blank" title="XX Title Link-11" class="D1">Nama Link-11</a>
<a href="http://.../Link-12" target="_blank" title="XX Title Link-12" class="C1bold">Nama Link-12</a>
<a href="http://.../Link-13" target="_blank" title="XX Title Link-13" class="B1bold">Nama Link-13</a>
<a href="http://.../Link-14" target="_blank" title="XX Title Link-14" class="E1bold">Nama Link-14</a>
<a href="http://.../Link-15" target="_blank" title="XX Title Link-15" class="A1bold">Nama Link-15</a>
<a href="http://.../Link-16" target="_blank" title="XX Title Link-16" class="F1">Nama Link-16</a>
<a href="http://.../Link-17" target="_blank" title="XX Title Link-17" class="C1">Nama Link-17</a>
<a href="http://.../Link-18" target="_blank" title="XX Title Link-18" class="B1">Nama Link-18</a>
<a href="http://.../Link-19" target="_blank" title="XX Title Link-19" class="C1bold">Nama Link-19</a>
<a href="http://.../Link-20" target="_blank" title="XX Title Link-20" class="E1bold">Nama Link-20</a>
<a href="http://.../Link-21" target="_blank" title="XX Title Link-21" class="E1bold">Nama Link-21</a>
<a href="http://.../Link-22" target="_blank" title="XX Title Link-22" class="F1bold">Nama Link-22</a>
<a href="http://.../Link-23" target="_blank" title="XX Title Link-23" class="A1bold">Nama Link-23</a>
<a href="http://.../Link-24" target="_blank" title="XX Title Link-24" class="C1">Nama Link-24</a>
<a href="http://.../Link-25" target="_blank" title="XX Title Link-25" class="A1">Nama Link-25</a>
</div>
</center>
Keterangan/Catatan :
  • http://Link-1 s/d Link-25 di isi dengan Link setiap Judul/Nama Link yang akan di tampilkan.
  • Jumlah bisa disesuaikan dengan kebutuhan (tidak harus 25-Link).
  • XX diisi dengan jumlah posting yang di buat pada link tersebut.
  • class="B1bold" dll digunakan untuk membentuk teks Nama Link supaya berbeda ukuran dan warnanya.
  • Untuk menambah ukuran dan warna atau merubahnya silahkan lakukan pada KODE CSS.
  • CSS Tag Cloud ini sudah saya coba di blog dan hasilnya sangat memuaskan !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - MITRABARAYA «

Minggu, 07 Maret 2010

Perindah Blog dengan Background Highlight

Background highlight berfungsi untuk memberikan ciri penampilan khusus (penampilan berbeda) pada satu atau beberapa buah teks, sehingga teks tersebut tampil secara menyolok dan dengan sangat mudah dan cepat dilihat oleh pembaca. Agar penampilan background highlight tidak tampil terlalu berlebihan yang berakibat justru merusak tampilan blog dan membuat mata pembaca menjadi terlalu lelah, sebaiknya gunakan warna-warna yang cukup lembut di mata akan tetapi tetap mampu memberikan tampilan yang mudah /dengan cepat dikenali.

Jika kamu membutuhkan data tentang warna kamu bisa membuka tabel warna yang berisi daftar warna dana namanya di sini.

KODE html Background Highlight digunakan di bagian body atau di ruang posting. Bentuk KODE yang digunakan sangatlah simple dan dengan mudah bisa digunakan oleh siapa saja.
Contoh KODE :
<span style="background:blue;"> Teks yang akan diberi HL background  </span>
Contoh KODE lain:
<font style="background:blue;"> Teks yang akan diberi HL background   </font>
Apabila KODE warna dalam bentuk angka jangan lupa di depannya diberi KODE " # ", sehingga menjadi berbentuk seperti ini :

background:#fff;

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :




» Happy Blogging - mitrabaraya «