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......