Cara Praktis Membuat Tombol Hide/Show

Hallo sobat blogger, ketemu lagi dalam postingan murah meriah ini. Kalo bagi master-master sih udah diluar kepala, tapi saya membuat ini khusus bagi kawan-kawan yang masih pemula, yang semangat ngeblognya tinggi – setinggi bintang dilangit..heheheee

Tips dan trik blog bagi blogger dalam berkreasi tidak ada batasnya. Kerena keingintahuan yang tinggi memaksa kita untuk belajar, belajar dan belajar. Dengan harapan, blog yang kita kelola bisa seperti master-master yang sudah terdahulu didunia persilatan perbloggeran, dengan Pagerank (PR)yang tinggi-tinggi. Berkat kerja keras hasilnya pasti akan maksimal dan memuaskan….(kayak guru aja yaaa..)

Saya akan berbagi tentang cara membuat Tombol Hiden/Show praktis dan serbaguna, tidak ribet, tidak sulit dan tidak membuat puyeng….

Contohnya seperti ini lho….(coba aja diklik yaa…)

TULISAN ATAU KODE JAVASCRIPT/HTML

Kalau berminat, silahkan sobat copy code dibawah ini ;



<div><div style="margin-bottom: 2px;"><input value="hide" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'CONTOH'; }" type="button"></div> <div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">


TULISAN ATAU KODE JAVASCRIPT/HTML


</div></div></div>


Kalau sobat pingin kelihatan ganti Hide menjadi Show, dan kata berwarna merah ganti dengan kalimat kesukaan sobat.

Bagaimana ??? selamat mencoba dan salam belogger…aaaeeeiitttt jangan lupa commentnya donk :)

»»  Selanjutnya...

Cara Pasang Tanggal dan Hari di Blog

Sebenarnya sangat banyak kode script hari/tanggal untuk blog, mungkin ada ratusan kale. Tapi, saya sudah coba sekitar 7 kode script hasilnya selalu gagal, apalagi kalau harus mengobok-obok kode HTML Template, waahh tambah pusing lagi.

Trik kali ini, sangat mudah, sobat tidak perlu mengganggu kode HTML Template sobat, cukup membuka element halaman baru saja. Contohnya ada diatas blog saya ini...gimana??? keren kan...???

Langsung aja, Masuk ke Account Blogger anda – Pilih LAYOUT – Page Element – klik salah satu Gedget – pilih HTML/Javasript dan masukkan kode berikut ini ;

<script type="text/javascript">
now = new Date();
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Pebruari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember")
document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script>

Kemudian Simpan dan letakkan dimana sobat mau, apakah diatas, dibawah, ditengah, atau....heheheee

»»  Selanjutnya...

Membuat Label/Tag Clouds

Nahhh pada kali ini saya yang bernama Anas akan menulis artikel yang biasanya digunakan di wordpress dan technorati yaitu Tag Clouds.. jika anda belum mengerti tentang Tag Clouds saya akan menerangkan sedikit pengertianya..
Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu dinamakn Tags Clouds yang artinya Tag adalah Label dan Clouds adalah awan jadi rengkumanya adalah Label yang seperti awan atau tidak rata.. Nah jika Tags yang hurufnya berbentuk rata biasanya itu adalah tags yang populer di blog anda jika kecil itu kurang populer... jadi pengertianya adalah semakin besar hurufnya maka menandakan kepopuleran dari Tags tersebut... makanya anda membuat tags dengan kata-kata yang sering digunakan dan tepat dengan isi tagsnya tul gakk

Nah jika Anda belum tau Tags Clouds Saya akan memberikan contohnya niii dibawahhh

komputer, Blogging, Bisnis Online
laptop, Widget Blog, Yahoo, Google,
blogeer, wordpress, SEO
trik-tips Blog
Pernak-pernik Blog,
other

Nah contoh diatas adalah tampilan Label yang telah dimodifikasi menjadi Tags Clouds... Semakin besar hurufnya maka semakin populer categorinya

Gimanna anda pengen buat gakk kalau pengen nihh dibawah aku ajari caranya..

1. Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML

2. Kemudian Taruh Code dibawah diatas Code ]]></b:skin>

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}


3. Lalu juga taruh Code Dibawah tepat dibawah Code <head>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>


4. Lalu Scroll Kebawah coba cari Code seperti ini <b:widget id='Label1' locked='false' title='Labels' type='Label'/>

5. Lalu Ganti code diatas dengan Code dibawah Ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}


var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

6. Selesai Deh kemudian Save

»»  Selanjutnya...