Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Toturial Mengganti Icon pada address bar

Tuesday, October 14, 2008

Saat surfing di Internet, Anda pasti sering mendapati sebuah website/blog yang memiliki icon unik pada address barnya. Icon standar saat Anda membuat sebuah blog baru di blogger seperti terlihat berupa icon

Sekarang bagaimana merubah icon tersebut dengan icon yang anda defenisikan sendiri ? Berikut langkah-langkahnya :

Login ke akun blogger anda disini
Selanjutnya pilih Layout - Page Elements - Edit HTML
Pada jendela Edit HTML, tambahkan/rubah kode berikut yang berada dalam tag <head> .... </head>.

<link href='http://jelangkung.orgfree.com/aipdam/Post.gif' rel='shortcut icon' type='image/x-icon'>

Silahkan ubah lokasi icon/gambar pada teks yang berwarna hijau di atas dengan link gambar Anda sendiri, untuk memasang gambar Anda di Internet, cukup banyak hosting gratis yang bisa Anda gunakan, salah satunya di 000webhost.com, photobucket.com, googlepages.com, dll. Atau Anda bisa memanfaatkan link-link berikut :






http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif
Setelah selesai, simpan template anda. Selamat Mencoba !

Referensi : http://trik-tips.blogspot.com

Selengkapnya...
Posted by aipdam at 12:46 AM Labels: ,
1 comments

Toturial Membuat Kotak Link Exchange

Monday, October 13, 2008

Agar blog kita bisa dikenal orang, biasanya blogger menyiapkan sebuah kotak link exchange (tukeran link) yang bisanya disertai dengan logo gambar sebagai ikon dari blog tersebut. Untuk membuat kotak link exchange seperti pada blog ini, ikuti tutorial berikut :

Pertama login ke akun blogger.com
Selanjutnya pilih Layout - Page Elements
Tentukan posisi gadget link exchange tersebut terus pilih Add Gatget, pilih HTML/Java Script
Kopi Kode Berikut pada bagian Content :

<center>
<a href="http://blog-xp.blogspot.com" target="_blank"><img src="http://jelangkung.orgfree.com/aipdam/blog-xp-faveico.jpg"/></a>
<br>
<textarea>
<a href="http://blog-xp.blogspot.com" target="_blank"><img src="http://jelangkung.orgfree.com/aipdam/blog-xp-faveico.jpg"/></a>
</textarea>
</center>


Silahkan sesuaikan pengaturan teks yang berwarna merah dengan link Anda
Simpan Tempate Anda.
Jika Berhasil tampilan dalam blog Anda seperti ini :




Selamat Mencoba !

Selengkapnya...
Posted by aipdam at 11:33 PM Labels: ,
1 comments

Tutorial Texbox Auto Select Pada Blog

Tuesday, September 23, 2008

Langkah-langkah membuat text box / text area auto select saat di click :

Buka blogger, kemudian login menggunakan user dan password Anda, setelah berada pada bagian dashboard pilih blog yang akan Anda pasangi textbox / textarea yang memiliki fasilitas auto select. Selanjutnya pilih Layout - Edit HTML, pastikan opsi Expand Widget HTML tercentang.

Copy kode berikut di atas kode </head> template blog Anda.

< script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script >



contoh text area yang akan dipasangi fungsi auto select :

<textarea id="aa" rows=7 cols=32>



tambahkan kode berikut pada text area tersebut.

onClick="SelectAll('aa');"



contoh lengkapnya dapat dilihat pada cuplikan di bawah ini.

<textarea id="aa" onClick="SelectAll('aa');" rows=7 cols=32>



Untuk melihat hasilnya bisa anda temukan pada blog ini di kotak search.

Selamat Mencoba !

Selengkapnya...
Posted by aipdam at 7:47 PM Labels:
0 comments

Tutorial membuat label cloud pada blogger

Label cloud untuk blogger adalah daftar dari semua label yang terdapat pada blog, tapi menggunakan tampilan yang lebih menarik. Anda bisa menemukan contohnya pada blog ini. Tag Cloud pertama kali di publikasikan oleh phydeaux3 sedangkan artikel ini kami kutip dari bloggerplugins.org.

Tanpa berpanjang lebar berikut langkah-langkahnya :

Pertama buka akun blogger Anda, selanjutnya klik blog yang akan dipasangi Label Cloud, pilih Layout>Page Elements dan tambahkan sebuah widget Label. Pilih Sort labels Alphabetically pada kotak dialog widget labels.
Setelah label ditambahkan, selanjutnya pilih Layout>Edit Html (Opsi Expand the widget templates tidak perlu Anda centang agar kode terlihat lebih simpel).

Anda akan menemukan kode yang sama dengan :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>


Sekarang ganti dengan :

<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'/>
<p align='center'>
<script type='text/javascript'>
var cloudMin = 1;
var maxFontSize = 25;
var maxColor = [0,255,0];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
// 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(&#39;labelCloud&#39;);
ul = document.createElement(&#39;ul&#39;);
ul.className = &#39;label-cloud&#39;;
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(&#39;li&#39;);
li.style.fontSize = fs+&#39;px&#39;;
a = document.createElement(&#39;a&#39;);
a.title = ts[t]+&#39; Posts in &#39;+t;
a.style.color = &#39;rgb(&#39;+c[0]+&#39;,&#39;+c[1]+&#39;,&#39;+c[2]+&#39;)&#39;;
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement(&#39;span&#39;);
span.innerHTML = &#39;(&#39;+ts[t]+&#39;) &#39;;
span.className = &#39;label-count&#39;;
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(&#39; &#39;);
ul.appendChild(abnk);
}

lc2.appendChild(ul);
</script>
</p>
<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>
<br/>Powered By:<small><a href='http://www.bloggerplugins.org'>Blogger Widgets</a></small>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


Sekarang Cari

]]></b:skin>


dan ganti dengan :

#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:&quot;&quot; !important}
]]></b:skin>


Simpan Template dan jika berhasil, Anda akan melihat Label Cloud pada Blog Anda.
Selamat Mencoba !

Lihat contohnya disini

Referensi :
- appfreeware.blogspot.com
- www.bloggerplugins.org

Selengkapnya...
Posted by aipdam at 7:09 PM Labels:
1 comments
Subscribe to: Posts (Atom)