Footer merupakan salah satu yang tidak dipisahkan di dalam Blog atau Website karena footer ini merupakan bagian penting di dalam Blog. Biasanya standar dari template atau blogger hanya memberikan 1 footer saja kepada Blogger.Nah pada tutorial kali ini saya akan memberikan cara bagaimana menambah kolom page element di footer menjadi 3 bagian. Contohnya seperti ini :


Ok langsung kita mulai tutorialnya :


1. Sign in Blogger

2. Layout

3. Edit HTML


4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

<b:section class=’footer’ id=’footer’/>

6. Kemudian ganti dengan kode ini :

<div id=’footer-column-container’>

<div id=’footer2′ style=’width: 30%; float: left; margin:0; text-align: left;’>

<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer3′ style=’width: 40%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>

<div id=’footer4′ style=’width: 30%; float: right; margin:0; text-align: left;’>

<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>

<div style=’clear:both;’/>
<p>
<hr align=’center’ color=’#5d5d54′ width=’90%’/></p>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>

<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>
</b:section>

</div>
<div style=’clear:both;’/>

</div>

7. Kemudian Save dan lihat hasilnya.

Selamat Mencoba....

Baca Selengkapnya......

Recent comment atau yang sering kita sebut dengan komentar terbaru merupakan widget yang dapat memberikan informasi kepada kita atau pengunjung yang dapat melihat komentar-komentar terbaru dari blog kita.Ok deh langsung saja kita lanjutkan perjanannya.Tutorial ini disebut dengan Recent Comment yah kira-kira contohnya seperti yang diatas ini.Kalian tinggal copy paste saja pada page element.

1. Copy kode di bawah ini :

<script style="text/javascript" src="http://alien.keren.googlepages.com/komentar.txt"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://klinik-tutorial.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script><br /><br />

2. Sign in Blogger

3. Layout

4. Tambahkan elemen HTML / Script

5. Paste kode diatas.

6. Simpan dan lihat hasilnya.

Selamat mencoba yah???moga2 berhasil deh tutorialnya.

Baca Selengkapnya......

Text area adalah cara menaruh kode ke dalam postingan yang kita buat areanya menjadi sedemikian rupa agar terlihat lebih menarik. Sekarang saya akan memberikan tutorial bagaimana cara membuat text area lain dari pada yang lain yaitu dengan sedikit menambah warna di dalam text area tersebut. Warna itu bisa kalian ubah sesuai dengan kemampuan kalian.Ok deh langsung saja kita mulai ya???

Untuk membuat text are coba kalian copy paste kode ini ke posting ata template :
<div style="border: 1px dashed green; padding: 5px; background: rgb(200, 200, 250) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

contohnya seperti ini :

TEXT nya DISINI kalian tinggal ubah saja tulisan ini sesuai dengan selera dan keinginan kalian

Silahkan ganti tulisan yang berwarna merah diatas dengan warna tulisan kesukaan kalian kalian tinggal merubah-ubah nomornya saja.

atau kalian ingin yang seperti ini :

TEXT nya DISINI kalian tinggal ubah saja tulisan ini sesuai dengan selera dan keinginan kalian

kalian tinggal copy paste kode ini :
<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

atau kalian mau juga yang seperti ini :

TEXT nya DISINI kalian tinggal ubah saja tulisan ini sesuai dengan selera dan keinginan kalian

silahkan copy kode ini jika ingin seperti yang diatas :
<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy ALL"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">TEXT nya DISINI </textarea></p></div></form>

Keterangan :
Kalian tinggal mengubah-ubah size,width, dan heightnya sesuai dengan keinginan kalian.

Selamat mencoba....

Baca Selengkapnya......

Setiap blog pasti ingin Blognya selalu dikunjungi dan diberikan komentar oleh setiap pengunjungnya. Maka dari itu di blog saya yang lain ada tulisan yang seperti ini :

Ok kalian sudah tahukan??? kali ini saya akan memberikan tutorial bagaimana cara memberikan pesan di setiap postingan.

1. Sign in Blogger

2. Layout

3. Edit HTML


4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :
]]></b:skin>

6. Tambahkan kode ini diatasnya :

.amaran { background: #fff6bf center no-repeat;
background-position: 10px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}

Silahkan ganti tulisan berwarna hijau diatas sesuai dengan warna kesukaan kalian.

7. Pilih Save Changes dan sekarang lihat hasilnya.

8. Kemudian tambahkan kode ini <p class= “amaran”>Berikanlah Comment kepada Blog ini biarkan Penulis Sedikit Dihargai</p> diantara {Post Template}.
Silahkan ganti tulisan berwarna merah dengan tulisan atau pesan yang kalian inginkan.

Baca Selengkapnya......

Kali ini saya akan memberikan tutorial bagaimana cara membedakan warna antara blogger dengan pengunjung.Apa kalian pernah melihat comment yang seperti diatas???Nah gini caranya :

1. Sign in Blogger

2. Layout

3. Edit HTML


4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode di bawah ini :

.comment-body {
margin:0;
padding:0 0 0 20px;
}
.comment-body p {
font-size:100%;
margin:0 0 .2em 0;
}

6. Tambahkan kode ini dibawahnya :

.comment-body-author {
margin:0;
padding:0 0 0 20px;
}
.comment-body-author p {
font-size:100%;
margin:0 0 .2em 0;
color:#000000;
background:#3399CC;
text-decoration:bold;
}

Jika masih tidak menemukan kode diatas coba kalian cari kode ini :

/* Comments

atau cari kode ini :

#comments-block .comment-body p {
margin: 0 0 .75em;
}

Tambahkan kode ini dibawahnya :

#comments-block .comment-body-author p {
margin:0 0 .75em;
background:#3399CC;
color:#000000;
text-decoration:bold;
}

Silahkan ganti tulisan yang berwarna merah dengan warna atau background kesukaan kalian.

7. Kemudian cari kode ini :

<dl id=’comments-block’>

8. Tambahkan kode yang sama seperti pada yang berwarna merah :
<dl id=’comments-block’>
<b:loop values=’data:post.comments’ var=’comment’>
<dt class=’comment-author’ expr:id=’”comment-” + data:comment.id’>
<a expr:name=’”comment-” + data:comment.id’/>
<b:if cond=’data:comment.authorUrl’>
<a expr:href=’data:comment.authorUrl’ rel=’nofollow’>&lt;data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>

<b:if cond=’data:comment.author == data:post.author’>
<dd class=’comment-body-author’>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class=’comment-body’>
<b:if cond=’data:comment.isDeleted’>
<span class=’deleted-comment’><data:comment.body/></span>
<b:else/>
<p></p>
</b:if>
</dd>

</b:if>

9. Pilih Save Changes dan sekarang lihat hasilnya.

Baca Selengkapnya......

Apa teman - teman pernah melihat blog yang seperti contoh diatas???Nah kali ini saya akan memberikan tips bagaimana cara membuat gambar atau foto atau gambar bergerak dengan format GIF atau JPG, ini disebut dengan favicon atau bisa dikatakan dengan memasanh foto di depan url address.

1. Sign in Blogger

2. Layout

3. Edit HTML


4. Cari kode ini :

<head>

5. Tambahkan kode ini dibawahnya :

<link href="http://alien.keren.googlepages.com/boss.ico" rel='Shortcut Icon'/>

6. Silahkan ganti tulisan berwarna merah diatas dengan alamat URL tempat kalian menaruh fotonya. Contohnya di : www.googlepages.com

7. Pilih Save Changes dan sekarang lihat hasilnya.

Baca Selengkapnya......

Warna atau Grafik merupakan hal yang penting di dalam dunia Web / Blog karena pewarnaan ini merupakan salah satu bagian yang tidak dapat terpisahkan. Coba teman-teman bayangkan apabila warna di dalam Blog atau Warna hanya ada warna hitam dan putih.Apakah menurut teman-teman BLog atau Web tersebut akan terlihat indah???Tentu saja tidak nanti pengunjung akan merasa bosan dan jenuh karena tidak ada warna yang lain.

Nah dalam tutorial kali ini saya akan memberikan warna-warna apa saja yang tersedia di dalam Blog ata Web :
Cara kerjanya kalian tinggal mengklik warna mana saja yang akan kalian inginkan nanti akan keluar kode-kode warna HTML yang kalian copy dan paste di dalam template atau postingan anda....



Apa kalian masih kurang dengan warna-warna diatas???kalo masih belum puas yah coba saja kalian lihat di Adobe Photoshop atau Software-software lain yang mendukung format pewarnaan.

Keep Blogging.....

Baca Selengkapnya......

Ini merupakan postingan kedua saya setelah memposting Hari Ultahnya Blog ini Pernahkah kalian melihat Blog yang mempunyai tulisan berjalan atau sering kita sebut dengan Marquee.Nah di tutorial kali ini saya ingin memberikan tips dan trik bagaimana cara membuat text berjalan mulai dari yang berjalan dari kiri ke kanan sampai yang zig-zag gitu???Nah gini caranya kalian tinggal ganti tulisan TEXT dengan kata-kata yang kalian inginkan :

Right to Left Marquee

Left to Right Marquee

Alternate Marquee

Up Marquee

Down Marquee

Up/Down Alternate Marquee

* Zig Zagging Marquee

* Alternating Zig Zagging Marquee

* >>Highlight Text<<

* <<<< Opposite Highlight text>>>>

Selamat Mencoba.....Keep BLogging

Baca Selengkapnya......

Alhamdulilah akhirnya lahir juga Blog ini pada tanggal 24 Juni 2008 jam 12.15 WIB.

Nama BLog : Klinik - Tutorial

Nama Pemilik Blog : Muhammad Yudhi Iskandar

Tanggal : 24 Juni 2008

Baca Selengkapnya......