Menambahkan Fitur Jam dan Kalender

Fitur-fitur ini dapat diperoleh secara gratis tanpa mengeluarkan biaya apapun. Seperti kita tahu ada banyak website-website yang menyediakan fitur-fitur gratis untuk memperindah tampilan blog ataupun web kita.
Untuk membuatnya ikuti langkah berikut :
1. Silahkan kunjungi situs http://www.clocklink.com

2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?

3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll

4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi

5. Klik tombol yang bertuliskan Accept.

6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00

7. Set ukuran jam yang anda sukai di samping tulisan size

8. Copy kode HTML yang di berikan pada notepad

9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan

10. Selesai




Untuk memasang kalender kita dapat mengakses http://www.free-blog-content.com.. Situs ini menawarkan download gratis dan kita bisa mendownload kalender yang kita inginkan. Untuk aplikasinya ikuti langkah berikut :

1. Sign in di blogger dengan id kita.

2. Klik menu layout

3. Klik menu Elemen Halaman

4. Klik tulisan Tambahkan sebuah elemen halaman

5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript

6 .Copy kode yang tadi telah ada di notepad lalu paste pada kolom yang di sediakan

7. Klik tombol SIMPAN PERUBAHAN

8. Pindahkan elemen yang baru di buat pada tempat yang sobat inginkan, lalu klik tombol SIMPAN

9. Selesai.

Membuat Background dengan Image

Background sebuah blog ternyata tidak hanya warna saja, tetapi dapat diubah dengan menggunakan image seperti di blog saya ini.
Untuk ukuran gambar, kita tidak perlu membuatnya dalam bentuk yang sangat besar, karena walaupun ukuran asli dari image adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak hingga memenuhi layar monitor.

Alamat gambar yang saya gunakan dalam blog ini adalah

http://amen24.googlepages.com/pattern_096.gif

Untuk membuatnya ini lakukan langkah berikut.
1.Klik kotak kecil di samping tulisan Expand Template Widget dan tunggu sampai proses selesai.

2.Tambahkan kode berikut pada style sheet css : (yang warna hijau adalah kode yang harus di tambahkan)
body {
background:$bgcolor url ('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Footer

Sekarang saya akan membagikan bagaimana cara membuat footer seperti di blog saya ini. Sebenarnya footer dapat dibagi menjadi beberapa kolom terserah keinginan kita. Di sini saya menggunakan kode footer 2 kolom untuk memberi tampilan "Add Widget" di elemen halaman. Isi dan tampilan dari footer dapat diubah sesuai dengan keinginan. Berikut adalah langkah-langkahnya.

#footer-column-divide {<br /> clear:both;<br /> }<br /> .footer-column {<br /> padding: 10px;<br /> }<br />

Copy paste kode disamping pada kode CSS di samping sebelum ]]></b:skin> di kode template.

2.Jika sudah, cari kode seperti di bawah ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

<div id='footer-column-divide'><br /> <br /> <div id='footer1' style='width: 50%; float:left;<br /> margin:0; text-align:left;'><br /> <b:section class='footer-column' id='col1'<br /> preferred='yes' style='float:left;'/><br /> </div><br /> <br /> <div id='footer2' style='width: 50%; float: left;<br /> margin:0; text-align: left;'><br /> <b:section class='footer-column' id='col2'<br /> preferred='yes' style='float:left;'/><br /> </div><br /> <div style='clear:both;'/><br /> </div><br />

Ganti kode <b:section class='footer' id='footer'/> dengan kode disamping.

<div style='clear:both;'/><br /> <p><hr align='center' color='#333333' width='95%'/></p><br /> <br /> <div id='footer-bottom' style='text-align: center; padding:10px;'><br /> <b:section class='footer' id='col-bottom' preferred='yes'><br /> </b:section><br /> </div><br />

Sebagai tambahan jika ingin mempertahankan footer aslinya, maka tambahkan kode dibawah ini diatas kode <div style='clear:both;'/>.

Drop Down Menu 2 Level

Untuk membuat menu drop down seperti di blog saya, saya menggunakan kode HTML dan kode CSS agar tampilan drop down menunya menjadi menarik. Untuk membuatnya drop down seperti ini silahkan ikuti langkah-langkah dibawah ini (khusus untuk template minima yang baru) :

<!-- Dropdown menu Start --> <br /> <br /> <div id="menu"> <br /> <br /> <ul class="level1"> <br /> <br /> <li class="level1-li"><a class="level1-a" href="http://vaniaangelina525060003.blogspot.com/">Home</a></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">Contact Me<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a href="https://login.yahoo.com/config/login_verify2?&.src=ym">Email</a></li> <br /> <br /> </ul> <br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">FAQ'S<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a class="fly" href="#url">DROP DOWN MENU<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://kolom-tutorial.blogspot.com/2007/06/menu-dropdown-dengan-javascript.html">JAVA</a></li> <br /> <br /> <li><a href="http://bloggersentral.blogspot.com/2009/10/installing-multi-level-css-dropdown.html">CSS</a></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <br /> <br /> <li class="level1-li"><a class="level1-a fly" href="#url">MY COMMUNNITY<!--[if gte IE 7]><!--></a><!--<![endif]--> <br /> <br /> <!--[if lte IE 6]><table><tr><td><![endif]--> <br /> <br /> <ul class="level2"> <br /> <br /> <li><a href="#url">FORUM</a></li> <br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://sharecommunity.prophpbb.com/">SHARE COMMUNITY</a></li> <br /> <br /> <li><a href="http://budayaindonesia.prophpbb.com/">BUDAYA INDONESIA</a></li> <br /> <br /> </ul><br /> <br /> <li><a href="#url">GROUP</a></li><br /> <br /> <ul class="level3"> <br /> <br /> <li><a href="http://www.facebook.com/photo.php?pid=30656847&id=1147392995#/group.php?gid=111077538683">ELECTRICAL ENGINEERING</a></li> <br /> <br /> </ul><br /> <br /> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <br /> <br /> </ul></li></ul></div> <br /> <br /> <!-- BloggerSentral.blogspot.com --> <br /> <br /> <!-- Dropdown menu End -->

1. Copy paste kode HTML di samping pada HTML/Javascript gadget. Simpan kode yang telah dibuat.

/* ================================================================ <br /> <br /> This copyright notice must be kept untouched in the stylesheet at all times. The original <br /> <br /> version of this stylesheet and the associated (x)html is available at <br /> <br /> http://www.cssplay.co.uk/menus/anywidth2.html <br /> <br /> Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated <br /> <br /> (x)html may be modified in any way to fit your requirements. <br /> <br /> =================================================================== */ <br /> <br /> #menu {width:1000px; background: #3aa3d3; height:20px;; text-align:left; position:relative; <br /> <br /> z-index:500;} <br /> <br /> #menu ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left;} <br /> <br /> #menu ul {display:inline-block;} <br /> <br /> #menu li {margin:0; padding:0; list-style:none;} <br /> <br /> #menu li {display:inline-block; display:inline;} <br /> <br /> #menu ul ul {position:absolute; left:-9999px;} <br /> <br /> #menu ul.level1 {margin:0 auto; background:#710;} <br /> <br /> #menu ul.level1 li.level1-li {float:left; display:block; position:relative;} <br /> <br /> #menu ul.level1 {background:#3aa3d3;} <br /> <br /> #menu ul.level2 {background:#ae4621;} <br /> <br /> #menu ul.level3 {background:#c98b14;} <br /> <br /> #menu ul.level4 {background:#9f690e;} <br /> <br /> #menu b {position:absolute;} /* -- for IE6 non-flyout dropdowns to stop flickering - who knows <br /> <br /> why --*/ <br /> <br /> #menu a {display:block; font:normal 11px verdana,arial,sans-serif; color:#fff; <br /> <br /> line-height:25px; text-decoration:none;padding:0 20px 0 10px;} <br /> <br /> #menu ul.level1 li.level1-li a.level1-a {float:left;} <br /> <br /> #menu ul li:hover > ul {visibility:visible; left:0; top:25px;} <br /> <br /> #menu ul ul li:hover > ul {visibility:visible; left:100%; top:auto; margin-top:-25px;} <br /> <br /> #menu li.left:hover > ul {visibility:visible; left:auto; right:0; top:25px;} <br /> <br /> #menu li.left ul li:hover > ul {visibility:visible; left:auto; right:100%; top:auto; <br /> <br /> margin-top:-25px;} <br /> <br /> #menu a:hover ul {left:0; top:23px;} <br /> <br /> #menu li.left a:hover ul {left:auto; right:-1px; top:23px;} <br /> <br /> #menu li.left ul a {text-align:right; padding:0 10px 0 20px;} <br /> <br /> #menu a:hover a:hover ul, <br /> <br /> #menu a:hover a:hover a:hover ul {left:100%; visibility:visible;} <br /> <br /> #menu li.left a:hover a:hover ul, <br /> <br /> #menu li.left a:hover a:hover a:hover ul {left:auto; right:0; visibility:visible;} <br /> <br /> #menu a:hover ul ul, <br /> <br /> #menu a:hover a:hover ul ul {left:-9999px;} <br /> <br /> #menu li.left a:hover ul ul, <br /> <br /> #menu li.left a:hover a:hover ul ul {left:-9999px;} <br /> <br /> #menu li a.fly {font-variant: small-caps;} <br /> <br /> #menu li.left ul a.fly {font-variant: small-caps;} <br /> <br /> #menu li a:hover, <br /> <br /> #menu li a.fly:hover {background-color:#555555;} <br /> <br /> #menu li:hover > a, <br /> <br /> #menu ul li:hover > a.fly {background-color:#555555;} <br /> <br /> #menu table {position:absolute; height:0; width:0; left:0; border-collapse:collapse; <br /> <br /> margin-top:-4px;} <br /> <br /> #menu table table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; <br /> <br /> margin-top:-29px;} <br /> <br /> #menu li.left table {position:absolute; height:0; width:0; left:auto; right:0; <br /> <br /> border-collapse:collapse; margin-top:-4px;} <br /> <br /> #menu li.left table table {position:absolute; left:auto; right:100%; height:0; width:0; <br /> <br /> border-collapse:collapse; margin-top:-29px;} <br />

2.Langkah selanjutnya copy dan paste kode CSS di samping sebelum ]]></b:skin> di kode template.

Memberi Warna Side Bar 2 kolom

Ternyata sidebar juga bisa diberi warna latar belakang. Agar tampilannya bisa seperti di blog saya ini silahkan ikuti langkah-langkah dibawah ini (khusus untuk template minima yang baru):
1.Sisipkan kode berikut diantara kode variable :
<Variable name="sidebarbgcolor" description="Warna background sidebar"
type="color" default="#999" value="#e6e6e6">

2.Tambahkan kode berikut pada kode untuk kolom sidebar, yang warna cokelat adalah kode yang harus di tambahkan.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: right;
background:$sidebarbgcolor; /* ini kode tambahannya */
padding: 7px; /* ini kode tambahannya */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Jika penambahan kode sudah selesai, jangan lupa untuk menekan tombol Simpan Template. Apabila kolom sidebarnya ada dua langkahnya sama saja, tinggal buat variable, kemudian sisipkan kode tambahan pada sidebar yang satunya lagi.

Membuat Side Bar 2 kolom

Di sini saya menggunakan template minima karena kode-kode HTML dan CSS nya dapat dibedakan dengan mudah. Untuk default template minima pengaturan tampilannya sangat sederhana sekali. Bagi yang senang mengutak-atik tampilan blognya, sekarang saya akan memberi sedikit bocoran mengenai cara untuk membuat sidebar 2 kolom. Ikuti langkah-langkah dibawah ini :
1.Cari kode program berikut :
#sidebar-wrapper(
width:220px;
float:right;
word-wrap:break-word;/*fix for long text breaking sidebar float in IE*/
overflow:hidden;/*fix for non-text content breaking IE sidebar float*/

2.Tambahkan kode berikut di bawah kode di atas :
#sidebarbaru-wrapper(
width:220px;
float:right;
word-wrap:break-word;
overflow:hidden;

3.Setelah itu cari kode seperti berikut:
<br /> <div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'><br /> <b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/><br /> </b:section><br /> </div>

4.Tambahkan kode berikut di bawah kode nomor 3 di atas :
<br /> <div id='sidebarbaru-wrapper'><b:section class='sidebar' id='sidebarbaru' preferred='yes'><br /> </div>

Dua kolom sidebar telah tercipta. Agar lebih menarik kita dapat menyesuaikan lebar header dan footernya dengan lebar dari Outer-wrapper.

Membuat Efek Marquee

<marquee align='center' behavior='alternate' direction='left' height='30' scrollamount='2' width='100%'>=====Welcome to My Blog=====</marquee>

Marquee adalah suatu program HTML untuk membuat teks yang dapat bergerak. Marquee ini dapat dibuat dengan menggunakan tag<marquee>...</marquee>.Efek marquee yang digunakan dalam tampilan blog ini adalah seperti pada kode di samping: Untuk mengubah arah gerak tulisan maka pada bagian direction dapat diganti dengan right.