Membuat background postingan

Sabtu, 31 Januari 2009
Blogging semakin lama semakin asyik,yah sekalian cari pengalaman surfing gituh.Sebagai penambah rasa nikmatnya blogging bagi kamu para blogger bisa menambahkan background di setiap postingan kamu.Untuk pemberian backgroud postingan bisa dengan memberi background berupa gambar dan bisa juga dengan background berupa warna.untuk lebih jelasnya tentang membuat background silahkan lihat di bawah ini


#1 ( background postingan dengan gambar )

Untuk membuat background dengan gambar kamu tinggal menambahkan kode berikut pada setiap postingan kamu



<div style="background:url( URL gambar yang akan di jadikan background ) no-repeat right top; text-align:justify; font-size:110%; padding:10px">


Tulisan kamu yang akan diberi background gambar



</div>




Contoh alamat gambar saya

http://i654.photobucket.com/albums/uu264/mastegar/02copy.png

alamat ini merupakan background dari postingan di bawah ini

Dari hasil penambahan kode di atas maka akan menghasilkan sebagai berikut


Ini adalah contoh gambar yang menggunakan gambar sebagai background,Selain menambah
In the SEO world there are a few things you need to consider. First you need to make sure that you write your site naturally and in a very compelling way to the reader. Entice your readers with compelling content and they are sure to tell a friend, link back to your site from theirs or other blogs they write to, and if your site is interesting enough they will bookmark it or even write their own social network hub talking about your site.


Once your site is written and looks good, you will want to go back over it to set it up for on page optimization. This is only 10-20% of seo but if you think about it all your off page seo tactics depend on the on site value. It's a lot like how a site promoting a meditation CD is the most important part in getting them to purchase it but if your site hypes them up and the product itself doesn't deliver then they will never trust you again even tell their friends how you promise and don't deliver.

Setting up your on page optomization is simple, just sprinkle a keyword people will most likely use when searching for your site in search engines about 6-8 times within the page, working it in NATURALLY to the content itself. Keep your page under 800 words in length, people like to read compelling articles but don't over do it.



Silahkan mengganti alamat URL gambar sesuai dengan selera



#2 ( membuat background postingan dengan warna )

Untuk membuat sebuah background dengan warna kamu tinggal menambahkan kode berikut



<div style="background:#DED6C1; text-align:justify; font-size:110%">


Tulisan postingan kamu


</div>



Dari keterangan kode di atas maka akan menghasilkan background gambar sebagai berikut




In the SEO world there are a few things you need to consider. First you need to make sure that you write your site naturally and in a very compelling way to the reader. Entice your readers with compelling content and they are sure to tell a friend, link back to your site from theirs or other blogs they write to, and if your site is interesting enough they will bookmark it or even write their own social network hub talking about your site.


Once your site is written and looks good, you will want to go back over it to set it up for on page optimization. This is only 10-20% of seo but if you think about it all your off page seo tactics depend on the on site value. It's a lot like how a site promoting a meditation CD is the most important part in getting them to purchase it but if your site hypes them up and the product itself doesn't deliver then they will never trust you again even tell their friends how you promise and don't deliver.

Setting up your on page optomization is simple, just sprinkle a keyword people will most likely use when searching for your site in search engines about 6-8 times within the page, working it in NATURALLY to the content itself. Keep your page under 800 words in length, people like to read compelling articles but don't over do it.


Silahkan ganti warna sesuai selera anda,untuk penggantian warna anda tinggal mengganti kode warna yang telah ada ( #DED6C1 ) dengan kode warna yang lain.Kamu bisa melihat kode warna di postingan saya kode warna online




Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan. Atau jika ingin membaca melalui feed reader anda, silahkan klik di sini!


Delivered by FeedBurner



Kode warna ( online )

Kamis, 29 Januari 2009
Untuk mempermudah anda dalam pencarian kode warna disini saya sedaiakan kode - kode warna yang mungkin diperlukan dalam pembuatan template maupun dlam kostumisasi background blog.








Silahkan menambah tanda # untuk penggunan kode gambar





















Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan. Atau jika ingin membaca melalui feed reader anda, silahkan klik di sini!


Delivered by FeedBurner



Membuat menu D-Tree

Menu D-tree adalah tampilan menu yang sepert pohon danmemiliki cabang - cabang yang berdasarkan postingan - postingan yang telah di buat besertaserta bulan - bulan posting.Bila anda pernah melihat gambar yang seperti di bawah ini maka itula dia menu D-tree.Untuk membuatny silahkan ikuti langkah - langkah berikut.








1. Silahkan login dulu ke akun bloger anda

2. Pilih Elemen halaman lalu pilih edit HTML

4. ari kode <head>

5. Taruh kode di bawah ini di atasnya


<link rel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css" type="text/css" />
<script type="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>



6. Save tempolate

7. Lalu tambahkan widget ini dengan menambah HTML / Java Script








Ganti link html dengan ink kamu


8. Kemudian simpan


SELAMAT MENCOBA...












Membuat teks area ( pilih semua )

Pstingan ini merupakan terusan dari postingan yang kemarin tentang membuat teks area,tapi teks area yang ini berbeda,kenapa?karena di teks area ini kamu bisa menambahkan tab pilih semua sehingga para user anda bisa mengkopi semua teks yang ada di dalam teks area yang telaha anda buat.untuk seterusnya silahkan ikuti langkah - langkah yang telah saya postingkan untuk anda


Untk membuat teks area yang lengkap dengan tombol copy semua tinggal menambahkan kode berikut




<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Copy Semua"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">

Tulis teks atau java script atau mungkin link ke blog anda di sini

</textarea></p></div></form>





Maka akan menghasilkan sebagai berikut



Silahkan mencoba...



Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan. Atau jika ingin membaca melalui feed reader anda, silahkan klik di sini!


Delivered by FeedBurner



membuat drop down menu ( top tabs )

Untk membuat drop down menu yang berada di bawah header berikut langkah - langkahnya :


1. Log in dulu ke akun blog anda

2. Pilih elemen Halaman

3. Pilih Edit HTML

4. Berikan cheklist pada expand widget template

5. Tunggu sebentar agar proses selesai

6. Cari kode ]]></b:skin>

7. Copy kode berikut di atasnya

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition2.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:5px; padding:0;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: #c9ba65;}
#menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

#menu .one {background: #827b6b; border-top:5px solid #dca;}
#menu .two {background: #646e4c; border-top:5px solid #bb9;}
#menu .three {background: #a4a88d; border-top:5px solid #eec;}
#menu .four {background: #a29f68; border-top:5px solid #f8f8b8;}

#menu .one dt {background: #b2ab9b;}
#menu .two dt {background: #949e7c;}
#menu .three dt {background: #d4d8bd;}
#menu .four dt {background: #e2dfa8;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}
#menu .one dd {border-bottom:1px solid #aaa;}
#menu .two dd {border-bottom:1px solid #e8e8e8;}
#menu .three dd {border-bottom:1px solid #eee;}
#menu .four dd {border-bottom:1px solid #999;}
#menu dd.last {border-bottom:1px solid #fff;}

#menu dt a, #menu dt a:visited {display:block; color:#444;}

#menu dd a, #menu dd a:visited {color:#fff; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;}

#menu .one dd a {background:#949e7c; color:#eee;}
#menu .two dd a {background:#d4d8bd; color:#346;}
#menu .three dd a {background:#e2dfa8; color:#654;}
#menu .four dd a {background:#b2ab9b; color:#ff8;}

#menu .one dd a:hover {background: #b2ab9b; color:#345;}
#menu .two dd a:hover {background: #949e7c; color:#543;}
#menu .three dd a:hover {background: #d4d8bd; color:#123;}
#menu .four dd a:hover {background: #e2dfa8; color:#534;}



8. Cari lagi kode berikut


<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>


9. Hapus kode tersebut lalu ganti dengan kode di bawah ini


<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

<ul id="menu"><!-- drop menu start -->
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="one">
<!-- Alter the links with your own -->
<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd class="last"><a href="../menu/em_images.html" title="em size images compared">em sized images</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="two">
<dt><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd class="last"><a href="circles.html" title="circular links">circular links</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="three">
<dt><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd class="last"><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="four">
<dt><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd class="last"><a href="../mozilla/target.html" title="Target Practise">target practise</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
</ul><!-- end of drop down menu -->


10. Lalu simpan

11. Silahkan lihat hasilnya

SELAMAT MENCOBA...



















Membuat tulisan bergaya koran

Apakah anda tau dengan Drop cap,jika anda lihat di Microsoft Word,di MS Word ada sebuah fasilitas yang bisa digunakan untukmembuat huruf besar di awal kalimat,yaitu Drop cap.efek Drop cap dapat dijadikan sebagai salah satu alternatif agar postingan pada blog anda terlihat lebih menarik dan bergaya seperti majalah atau koran.seperti pada postingan ini huruf A diawal kalimat lebih besar dibandingkan huruf yang lainnya,lalu bagaimanajika kita ingin menerapkan hal serupa pada postingan di blog?apakah bisa dilakukan!tentu saja hal tersebut bisa dilakukan,lagi pula membuat Drop cap di blog juga cukup mudah yaitu dengan menambahkan Style CSS pada halaman Edit HTML .


Berikut langkah-langkahnya:


1. Login di blogger dengan ID anda

2. Klik menu Layout

3. Klik Tab Edit HTML

4. Pada kotak Edit HTML paste kan kode berikut persis di atas kode ]]></b:skin>


/* kode untuk hurup awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}



6.jika anda ingin memakai/memasangkan drop cap pada postingan,maka diawal anda harus mengetikan: <span class="awal">hurup awal </span>


Selamat mencoba....



Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan. Atau jika ingin membaca melalui feed reader anda, silahkan klik di sini!


Delivered by FeedBurner



Link dengan efek pelangi

Rabu, 28 Januari 2009
Membuat link tentunya sudah banyak yang tahu tetapi bagaimana jika kita membuat link yang apabila mouse diarahkan ke link maka link itu akan bergradasi seperti pelangi?,yah memang menyenangkan jika kita mamu membuat blog kita seperti itu.Jika para sohib ingin blog yang linknya berganti - ganti warna saat di klik,coba ikuti saja beberapa langkah berikut..


1. Silahkan masuk terlebih dahulu ke akun blog anda

2. Pilih elemen halaman,lalu pilih Edit HTML

3. Jangan lupa beri tanda cek pada expand widget template

4. Cari kode <body> dengan menggunakan ctrl + F jika anda pengguna mozilla

5. Tambahkan kode berikut di atasnya









6. Simpan template

Selamat Mencoba...















Menghilangkan angka pada label

Selasa, 27 Januari 2009
Sepertinya postingan tentang menghilangkan angka label yang seperti ini sudah banyak yang memuat tetapi apa salahnya jika saya juga menjelaskan kepada para sohib yang datang ke blog saya.Pertama blogging dulu saya juga merasa risih dengan adanya penampakan angka pada label saya,tetapi dari informasi teman akhirnya saya bisa menghilangkannya.untuk menghilangkan angka label silahkan ikuti petunjuk berikut


1. Masuk dulu ke akun blog kamu

2. Pilih elemen halaman lalu pilih edit HTML

3. Silahkan klik expand widget template terlebih dahulu





4. Sekarang coba kamu cari kode berikut

(<data:label.count/>)




untuk memudahkan pencarian bila anda pengguna mozilla bisa tekan ctrl + F

5. Hapus kode tersebut

6. Untuk memastikan tidak ada kesalahan silahkan klik pratinjau

7. Bila tidak ada terdapat kesalahan silahkan simpan template dan lihat hasilnya


Selamat mencoba...


Membuat Footer menjadi tiga kolom

Mengutak - atik template memang menyenangkan walaupun harus berpikir keras namun hasil dari kerja kita bisa kita banggakan nantinya,untuk membuat kolom footer menjadi tiga ternyata hanya menambah beberapa kode di sana - sini,mari kita lihat bagaimana cara membuat kolom di footer



Sebelum itu coba lihat dulu panjang dari template kamu ( width )

dan jangan lupa klik expand widget





1. Kamu cari dulu kode ]]></b:skin>

2. Taruh kode di bawah ini di atasnya



#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}



3. Kemudian kamu cari lagi kode berikut



<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>


untuk memudahkan pencarian bila kamu pengguna mozilla bisa tekan ctrl + F


4. Taruh kode ini di bawahnya




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


5. Untuk memastikan tidak ada kesalahan silahkan klik pratinjau

6. Bila hasil bisa dilihat dan tidak terjadi masalah silahkan klik simpan

7. Berikutnya kamu pergi ke elemen halaman,tambahkan widget di fotter kamu dengan mengklik tambah gadget.alu klik HTML / Java script.tambahkan widget yang kamu suka
misalnya



<a href="WWW.KONSULTASIBLOGGER.BLOGSPOT.COM"><img src="http://3.bp.blogspot.com/_C-5LJJO7pvg/SW136rchrxI/AAAAAAAAAGQ/60jSHlU6WxA/s320/KONS+LOGO.png"></a>



lalu pilih simpan,tinggal lihat footer blog menjadi tiga kolom


Selamat mencoba...















Membuat tombol Top Tabs

Blogger tanpa tombol top tabs memang terasa kurang menggairahkan bagi para usernya,untuk menghilangkan kekurangan sekaligus sebagai pelengkap blog tidak ada salahnya bila kita menambahkan tombol top tab di halaman blog kita.Bila kamu belum tahu tombol top tabs gambar berikut mungkin bisa menjelaskan





gambar di atas menerangkan tentang tombol navigator yang berada di atsa blog yang biasa terdapat di bawah header blog.Ternyata menambahkan top tabs di blog juga bisa menambah trafik di blog selain itu bisa juga sebagai link untuk menuju ke blog lain yang telah kamu buat.


Untuk menambahkan top tabs di blog,kamu bisa lihat tahapan - tahapan berikut

sebelum membuat tombol top tabs sediakan dulu tujuan link yang akan di buat link kamu
misalnya http://konsultasiblogger.blogspot.com/2009/01/tukeran-link.html
Nah itu salah satu contoh,kamu bisa mencari link kamu sendiri di blog kamu atau di blog lain yang juga merupakan hak milik kamu.

1. Kamu cari dulu kode ini ]]></b:skin>

2. tambahkan kode di bawah ini di atasnya






/* navbar

================== */

#bg_nav {
background: #000000;
width: 660px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #333333;
border-bottom: 1px solid #333333;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}
#bg_nav a:hover {
color: #FFFFFF;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}
#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #222222;
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #000000
}
#nav a:hover {
background: #6e6d6d;
color: #FFFFFF;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #333333;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#nav li li a:hover, #nav li li a:active {
background: #666666;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;

}


Sesuaikan panjang dengan panjang templlate anda

3. Cari lagi kode berikut


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>


4. Tambahkan kode berikut di bawahnya


<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://konsultasiblogger.blogspot.comcom/'>home</a></li>
<li><a href='http://tipsgetrich.blogspot.com/'>Bimbingan</a></li>
<li><a href='http://konsultasiblogger.blogspot.com/search/label/XML%20Template'>Free Template</a></li>

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

<div id='navright'>

<form action='http://AlamatBlogAnda.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

</div>

</div><!-- akhir bg_nav -->


5. Untuk memastikan coba lihat dengan pratinjau

6. Kalau sudah berhasil silahkan di simpan


selamat mencoba.....


Membuat scroll menu

Jumat, 23 Januari 2009
Scroll menu mempunyai kelebihan disamping untuk menghemat tempat,bisa juga di gunakan sebagai daftar isi seperti yang saya lakukan pada blog ini.bagi para sohib yang ingin menggunakan scroll menu sebagai daftar menu bisa mengikuti langkah - langkah sebagai berikut.

untuk menggunakan scroll menu hanya tinggal menambahkan


<div style="overflow:auto;width:250px;height:180px;padding:10px;border:1px solid #eee">


teks atau link yang ingin di buat sroll


</div>



seperti contoh berikut


<div style="overflow:auto;width:250px;height:1800px;padding:10px;border:1px solid #eee">

<a href="http://konsultasiblogger.blogspot.com/2009/01/apa-itu-seo.html"> 1.Belajar SEO</a>
<br />
<a href="http://konsultasiblogger.blogspot.com/search/label/TIPS%20AND%20TRICK">2.Blog tutorial</a>

<br />

<a href="http://http//konsultasiblogger.blogspot.com/2009/01/blogger-ku.html">3.Cara Membuat Logo Blog</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/mengganti-template-blog_08.html">4.Cara Mengganti Template</a>

<br />

<a href="http://http//konsultasiblogger.blogspot.com/2009/01/cara-membuat-read-more.html">5.Cara Membuat Read More</a>

<br />
<a href="http://konsultasiblogger.blogspot.com/2009/01/sekarang-waktunya-mengetahui-cara_08.html">6.Cara Menghilangkan Navbar</a>

<br />

<a href="http://http//konsultasiblogger.blogspot.com/2009/01/membuat-faficon.html">7.Cara membuat Favicon</a>

<br />

<a href="http://http//konsultasiblogger.blogspot.com/2009/01/cara-membuat-teks-link.html">8.Cara membuat Teks Link</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/membuat-link-berbentuk-tombol.html">9.cara Membuat Link Bentuk Tombol</a>

<br />


<a href="http://http//konsultasiblogger.blogspot.com/2009/01/membuat-link-memggunakan-gambar.html">10.Cara membuat Link Gambar(1)</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/cara-membuat-teks-area.html">11.Cara membuat Teks Area</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/membuat-teks-berjalan-marque.html">12.Cara membuat marquee (text berjalan)</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/membuat-teks-berkedip.html">13.Cara membuat Teks Berkedip</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/menambah-jam-di-blog.html">14.Menambah jam di Blog</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/seo-tips.html">15.SEO Tips</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/cara-membuat-kolom-komentar.html">16.Membuat kolom komentar</a>

<br />

<a href="http://www.komisigratis.com/?id=TEGAR">17.Affiliate Baru</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/mengganti-template-blog_08.html">18.Cara ganti template</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/download-pothoshop-tutorial.html">19.Download photoshop tutorial</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/download-yahoo-messenger.html">20.Download Y!mesengger</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/download-browser-software.html">21.Download Browser Software</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/download-antivirus.html">22.Free Download antivirus</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/2009/01/dasar-dasar-html.html">23.Download HTML tutorial</a>

<br />

<a href="http://konsultasiblogger.blogspot.com/search/label/XML%20Template">24.Download XML template</a>

<br />

<a href="http://http//konsultasiblogger.blogspot.com/2009/01/html-template.html">25.Download HTML template</a>


</div>



maka akan menghasilkan sebagai berikut




Kamu tinggal mengganti alamat URL link serta nama judul untuk link.

Selamat mencoba


















Menambah Banner di Header(new template)

Bagi para teman - teman yang ingin menambah widget banner yang berada di header ini beberapa langkah - langkah yang bisa kamu coba.bagi kamu yang menggunakan template baru kamu layak untuk mencoba.

Banner ini akan terlihat di header seperti yang terlihat berikut





Gambar akan tampak di header kamu...
misal saya mempunyai alamat gambar http://www.geocities.com/sir_abi17/palestine1.JPG

1. kamu masuk dulu ke akun bloger kamu


2. pilih edit HTML


3. jangan lupa centang dulu expand widgetnya,tapi sebelumnya kamu lebih baik download dulu template kamu.untuk alasan keamanan

4. kamu cari kode berikut


/* Header -----------------------------------------------
*/

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://www.geocities.com/sir_abi17/palestine1.JPG)no-repeat top center;
}
}
}

ganti yang warna merah


5. setelah itu kamu cari lagi kode berikut


<b:section class='header' id='header' maxwidgets='1'>

rubah angka satu menjadi angka dua,kemudian simpan template

6. bila sudah benar kamu bisa langsung simpan


7. masuk ke elemen halaman atau layout


8. klik edit pada header


9. Pilih radio button yang ada di samping tulisan dari komputer Anda


10. klik tombol browse


11. pilih baner yang ingin di tampilkan


12. simpan perubahan

nah bila kamu ingin mengganti baner kamu,kamu bisa menggantinya dengan langkah - langkah sama dengan yang di atas.












Menambah Snapshot di Blog

Kamis, 22 Januari 2009
Snapshot yang biasanya ada di wordpress bisa di tambahkan di blogger,wah enak nih bisa nampah tampilan blog biar tambah ramai.ramai kayak pasar,tuh sampai ada yang jualan ikan.Layanan ni ternyata kita harus mendaftar dulu di Snapshot.com snapshot ini selain sebagai sarana untuk memeriahkan blog snapshot juga sebagai pilihan bagi kamu yang memiliki tempat posting yang sempit.Mau coba?,ok kita langsung aja buat..


1. Masuk dulu ke Snapshot.com


2. Pilih logo blog yang aka kamu gunakan,pilih warna kesukaan

3. Pilih bahasa yang digunakan,pilih aja bahasa indonesia

4. Kalo sudah selesai tinggal klik continue

5. Setelah itu akan tampak jendela untuk menginstal,lalu klik instal to blogger atau bisa juga dengan menambahkan script yang telah ada di atas tag </body>

6. Setujui bloger untuk memasang snapshot

7. Seleai sudah pemasangan snapshot


TUKERAN LINK

Rabu, 21 Januari 2009
Tertarik untuk ber-tukar link dengan blog Saya? Kalo iya, saya sudah menyediakan satu kolom yg akan menampung semua tawaran link exchange dari Anda semua. , kolom ini akan menampung semua link anda.Masih tertarik? silahkan diteruskan baca syarat dan ketentuan berlakunya :D

Syarat:

  1. Active Indonesian Blogger. Paling tidak blog Anda di update sebulan sekali atau lebih sering.
  2. Bukan Web/Blog untuk dewasa / adult / sex / MP3 dan yang melanggar norma.
  3. Link ke blog saya, anchor teks: “Tegar” atau “Mas tegar” dan link ke: “http://konsultasiblogger.blogspot.com/
  4. Hak pemasangan link / tautan sepenuhnya hak saya dan tidak dapat diganggu gugat :D

Hak Anda:

  1. Jika sudah memasang link saya silahkan:
  2. Tinggalkan komentar dibawah dengan Anchor teks, URL dan deskripsi (minimal 45kata dan maksimal 100kata)
  3. Mohon link di pasang di bagian home blog anda karena link anda juga akan saya pasang di bagian "home"

Semoga tali silaturahim Blogger Indonesia lebih terjalin erat dan bersatu padu untuk kebaikan bangsa Indonesia.

Membuat Direktori Untuk teman

Bila kamu merasa blog kamu sdudah terlalu sempit untuk dipasanagi widget maaka kamu harus coba yang satu ini..tempat link teman yang ingin bertukar link maka link mereka bisa kamu masukkan ke dalam tempat link.Kolom link untuk teman ini tidak mencakup banyak ruangan karena menggunakan marque atau teks berjalan,yang pasti selain memperindah blog sekaligus bisa menjadi tempat direktori temen - temen kamu yang telah bertukar link.Nah lanjut saja kita untuk membuat temat direktori ini

Coba lihat kode di bawah ini



<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" align="center" width="100%" height="200">

<br /><br />
<a href="http://wariortips.blogspot.com/" target="new">E- learning</a>

<br /><br />
<a href="http://aracariuang1.blogspot.com/" target="new">cara cari uang </a>

<br /><br /><a href="http://tipsgetrich.blogspot.com/" target="new">bimbingan gratis </a>
<br /><br />

</marquee>



nah kode di atas akan menghasilkan sebagai berikut






E - learning




cara cari uang



bimbingan gratis








Silahkan ganti kecepatan dan spasi
kecepatan pada scrollamount diganti saja semakin besar maka kecepatan akan semakin tinggi
untuk tinggkat spasi kamu tinggal menghapus kode <br /><br /> bia tidak ingin adanya spasi di kolom tersebut.

kamu tinggal menggantnya dengan link - link temen kamu yang ingin bertukar link dengan kamu.Met nyoba wae....alam wong solo












Vote for Us: Dmegs Web Directory
Campsite for Sale Businesses For Sale




Menambah IP tracker di blog

Untuk mempeindah sekaligu agar membuat blog tampak lebih informatif sepertinya kita perlu enambah widget - widget yang newest.Nah karena iu ni aku mau bei tah bagaimana cara menambah widet IP checker.Berikut langkah - langkahnya :

1. Kunjungi dulu situs http://www.wieistmeineip.de/banner/

2. Nah itu kan ada beberapa pilihan tampilan widget,kamu tinggal pilih salah satu untuk blog kamu.pilih yang akan tapak bagus di blog kamu supaya menunjang penampilan blog kamu.Copy kode widget yang tampak pada web tersebut

3. Masuk ke akun blogger kamu.lalu pilih tata letak lalu elemen halaman

4. Kemudian pilih tambah widget.Nah kalau sudah tingal pilih tambah HML / java.

5. Masukkankode yang telah kamu copy tadi.lalu simpan

dah tinggal di lihat hasilnya..















Navigator Menu Horizontal

Navigator menu horizontal itu seperti top tabs yah kayak terlihat di blog ini,selain menunjang penampilan blog,horizontal menu juga bermanfaat juga untuk memberi info kepada para user blog tentang isi blog.Kalo kamu belum pernah lihat horizontal menu,kaya di bawah ini contohnya





Nah dah tau kan?..
Nah kalo gitu langsung aja kita buat menu horizontal kita..

1. Kamu login dulu ke akun blog kamu

2. Pilih aja edit HTML

3. Kamu cari kode ]]></b:skin>

4. Taruh kode di bawah ini diatas kode ]]></b:skin>

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}

.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}

.menuhorisontal li{
display: inline;
margin: 0;
}

.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}

.menuhorisontal li a:visited{
color: white;
}

.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

5. Kemudian kamu cari lagi kode <div id='header-wrapper'>

6. Tambahkan kode ini di bawah kode <div id='header-wrapper'>

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

7. Kalau sudah tinggal kamu simpan dulu aja.

8. Kita lanju lagi ke elemen halaman

9. Tambah add gadget dengan kode java di bawah ini

div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://konsultasiblogger.blogspot.com'>Link 1</a></li>
<li><a href='http://www.topgetrich.blogspot.com'>Link 2</a></li>
<li><a href='http://www.konsultasiblogger.blogspot.com>Link 3</a></li>
</ul>
</div>

10. Klik simpan.alamat URL serta teks navigator bisa kamu ubah sesuai dengan keinginan kamu

















Menampilkan Y!Messenger Status

Buat kamu blogger yang biasa online di Y!messenger pastinya ingin punya temen chating donk,Ni ku nemu widge lagi di jalan...Apaan?nih buat nongolin status kita di YM...yah sekedar memberitahu user blog kamu kalo kamu lagi online ajah,Nih widgetnya...




Seperti biasa masuk dulu ke akun blogger kamu...

Pilih elemen halaman lalu pilih tambah gadget,lalu pilih aja tambah java / HTML.

Tinggal kamu salin kode di bawah ini..

<a href="ymsgr:sendIM?IdYmKamu"> <img src="http://opi.yahoo.com/online?u=IdYmKamu&amp;m=g&amp;t=2&amp;l=us"/>
</a>


ganti aja dengan id yahoo kamu...

cukup sekian dan terima kasih.....................................................................................














Membuat Blog Multi Bahasa

Blog multi bahasa yang kayak di google help memang banyak yang menginginkan selain bisa menambah pengunjung dari luar negeri sono blog multi bahasa juga bisa sebagai bahan belajar bahasa inggris.Duh repot pasti kalau gak bisa bahasa inggris,Nih ada widget dari mbah google yang pasti tok cerr buat blog kamu.

Nih langkah - langkahnya...

1. Masuk ke akun blogger kamu

2. pilih tata leak lalu elemen halaman.setelah itu klik tambah gadget..

3. Pilih aja tambah script / HTML.

4. Masukin kode di bawah ini

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

5. Kalo udah tinggal simpan ajah..

widget nya kan nampak seperti di bawah ini



kalo gak percaya bole di coba dulu...








Membuat menu dropdown

Macam - macam blog macam - macam jenis menunya seperti ,menu sate bakso, gulai.Oh saalah ya?maaf kalo gitu.Ya walaupun macam - macam tapi tujuannya sama kok,yaitu menunjukkan isi daripada blog itu sendiri.Nah kali ini aku mau bahas gimana cara membuat menu drop down,nah penasaran ya?Berikut cara membuat menu drop down.

Caranya mudah kok coba lihat kode di bawah ini



<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://www.komisigratis.com/?id=TEGARl"> Menu 1 </option>
<option value="http://www.komisigratis.com/?id=TEGARl"> Menu 2 </option>
<option value="http://www.komisigratis.com/?id=TEGARl"> Menu 3 </option>

</select>



Maka akan menghasilkan seperti ini..




Nah untuk membuat menu kamu sendiri silahkan saja mengganti alamat gambar serta teks yang ingin di buat menu,Dah cukup sekian dan terima kasih....


Mengganti Background Blog Dengan CSS

Selasa, 20 Januari 2009
Background blog atau warna dasar dari blog memang mempengaruhi keindahan dari blog itu sendiri,bila merasa blog kamu perlu ganti warna background berarti kamu juga perlu deh memperhatikan tahapan - tahapan berikut.Nah langsung to the point aja nih lho cara - cara biar warna dasar blog kamu atau background kamu bisa berubah.

1 Kamu masuk dulu ke akun blog kamu

2. pilih aja tata letak lalu edit HTML

3. Kamu cari dulu kode berikut,bila pakai mozilla tekan aja ctrl + F untuk mencari



body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


4. Nah pada bagian Background kamu ganti ajah warnanya ( yang warna biru )

5. Kalau belum tau kode warna bisa di lihat di sini


bila ingin mengganti background dengan gambar tinggal menambah
background:$bgcolor url(URL_GAMBAR) ;


URL gambar bisa mudah di dapat di gogle search gambar.

setelah kode background diatas.


Contoh
background:#FFFFFF url(http://www.patterncooler.com/patlib/0031S/213243213243FFF2C3_89.png) no-repeat top left;



bila no repeat maka gambar akan tidak mengulang dan gambar disesuaikan di pojok kiri.


repeat : Mengulang-ulang gambar(gambar kecil mengulang sampai memenuhi background)
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal





untuk koleksi background kamu bisa nyoba di
http://www.patterncooler.com/

Nah Sekarang tinggal lihat hasilnya,jangan lupa di save template dulu...OK?















Cara membuat file PDF

Minggu, 18 Januari 2009


Buat kamu para blogger yang pengen buat e- book kamu sendiri.Mulai dari teks sampai gambar.Nih aku ada solusi buat kamu yang pengen buat file pdf.Sebelumnya kamu buat dulu ajah ketikan - ketikan.Asal jangan ketikan nakal.Huh susah deh kalo bahas yang nakal - nakal.Yah ketikan yang mau di buat file pdf itu.Kalo udah selesai tinggal di upload aja.Duh yang mau bikin e - book.Penasaran apaan alamtnya nih alamatnya...






https://www.pdfonline.com/convert_pdf.asp


Udah di liat blom?Kalau uadh tuh tinggal di upload file kamu.Tapi ingat maksimal kamu bisa upload hanya 2 MB aja.Terus tinggal tunggu jadadi deh.Soalnya nanti alamat pdf file yang kamu upload dikirim lewat email yang telah kamu lampirkan..

Selamat mencoba...














Memvalidasi gambar di internet


Bagi kalangan blogger yang sering online,yang pastinya udah berpengalaman pastinya tahu bagaimana cara memvalidasi gambar atau foto di internet,tentunya dengan adanya lokasi gambar saat di klik kanan.Sebenarnya blog kamu juga udah bisa memvalidkan gambar,misal kamubingngung mau buat link dengan gambar ini,tapi g tau gimana cara memvalidkan.Gak usah bingung kan ada blog juga bisa memvalidkan.Cara memvalidkan mudah ikuti aja petunjuk di bawah.


1. Masuk ke akun blogger kamu

2. Pilih entri baru

3. Lalu di kolom "buat entri" kamu masukin aja tuh gambar yang mau di validkan

4. Dah gak usah pake lama,langsung aja di terbitkan,lalu lihat di "jendela baru"

5. Nah kan udah keluar tuh gambarnya tinggal di lik kanan lalu klik salin lokasi gambar.Lalu paste aja di notepad.Nah itu dia alamat sumber gambar kamu.Tinggal deh bisa di buat link.

6. Kalau udah selesai kan bisa di hapus tuh postingan.Beres udah...

Kalu mau tau gimana cara membuat link dengan gambar yang telah divalidkan klik disini
Met nyobain aja yah...












Software Download Accelerator

Sabtu, 17 Januari 2009
kawan - kawan blogger dengan ini memperkenalkan software baru dari "speedbit" buat kamu yang download mania.Apaan mas?namanya download accelarator.ya pastinya buat nambah kecepatan download kamu menjadi 400 % lebih cepat.waduh jadi pengen download neh...

Nah kalau kamu pengen coba - coba atau mau buktiin silahkan saja download.Beberapa saran dari saya untuk mengoptimalkan software ini saat melakukan download kamu di saat yang sama membuka halaman - halaman web yang kamu suka ( menurut pengalaman ajah ).





















Optimalisasi sistem komputer

Berita bagus bagi semua,apaan ya?ini lho ada software dari negeri paman sam yang biasa nya sih banyak di pakai ama orang yang punya laptop,ya komputer rumahan juga boleh.Tune Up Utilities,dah tau kan.Sofware ini mampu mengatasi masalah yang ada di komputer kita.Tapi setelah usut punya usut ni ada yang baru versinya,namanya Tne Up Utilities 2009.Baru dong?iya emag baru.Setelah melakukan penelusuran ke sejumlah web yang bikin mata pedes.Akhirnya aku bisa juga mendownload software ini.Kalu kamu ingin mencoba silahkan soalnya ada yang gratisan,tapi pastinya ada batasab waktunya dong.Kita dikasih waktu 30 hari untuk melakukan percobaan dengan software ini,Hasilnya sama kok ama yang beeli.Tapi bedanya cuma batasan waktunya.Kalau mau mendownload silahkan.Dibawah ini ada linknya.Kalau pengen optimalisasi komputer atau nOtebook kamu.








CATATAN : Bila kamu pengen mendapat layanan ini terus menerus klau habis masa percobaannya tinggal di uninstal lalu di Instal lagi,iya gratis terus neh....




XML template

Buat para blogger nih ada template baru yang pastinyta bagus buat di jadikan sorotan.Cara gantinya juga tidak harus upload dulu,tetapi tinggal copy paste ke Edit HTML milik kamu,iya seh mirip kayak template klasik cara penggunaanya tetapi lihat dulu hasilnya baru deh komentar





































































 
Adformat designed by Simon Pilkington