Cara membuat daftar isi dengan drop down

Selain scroll box, menu drop down juga sangat berguna sekali untuk menghemat tempat, terutama bila halaman web atau blog sudah penuh dan sementara masih banyak yang ingin tetap ditampilkan pada halaman tersebut.
Bedanya tampilan menu drop down lebih praktis dibanding dengan scroll box, dan menu drop down hanya berfungsi untuk membuat sebuah List atau daftar. Anda bisa gunakan menu drop down ini untuk membuat daftar isi pada web atau blog anda.
Bila anda berminat, dibawah ini adalah contoh bentuk menu drop down :


Judul Menu Drop Down

ARTIKEL : Cara buat web Cara dapat domain gratis Cara dapat hosting gratis Cara seting domain dihosting Cara dapat template gratis Cara Upload Template gratis Kumpulan tips

Berikut kodenya, silahkan anda bisa copy kodenya dan ganti ULR Artikel sert Judul Artikelnya:

<h3>Judul Menu Drop Down</h3>
<form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu-drop-down"><option /> <h3>TUTORIAL BLOGGER</h3>
   
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>
<option value="ULR Artikel">Judul Artikel</option>

</select></form>

Untuk menambahkan daftar, anda tinggal menambahkan lagi kode berikut :

<option value="ULR Artikel">Judul Artikel</option>

Mudah kan...??
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara membuat background warna gradasi

Untuk membuat background dengan warna gradasi, kita tidak perlu lagi menggunakan gambar sebagai backgroundnya. Tapi sekarang kita bisa menggunakan salah satu dari fitur CSS. Selain tampilan web menjadi lebih ringan, fitur CSS lebih mudah untuk mengatur pemilihan warna, nilai posisi warna, ketebalan warna, untuk membuat background dengan warna gradasi sesuai selera.
Dibawah ini beberapa contoh gradasi beserta kodenya, silahkan anda bisa mencoba untuk mengubah nilai - nilainya sesuai kebutuhan anda.

1. Gradasi warna terang atas

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.terang-atas
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%, #c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#ffffff),color-stop(1,#c4d69f));
}
</style>

<div class="terang-atas">TEKS DISINI</div>

2. Gradasi warna terang bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.terang-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="terang-bawah">TEKS DISINI</div>

3. Gradasi Horisontal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="Horisontal-terang-tengah">TEKS DISINI</div>

4. Gradasi Horisontal warna terang atas bawah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.Horisontal-terang-atas-bawah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center top, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="Horisontal-terang-atas-bawah">TEKS DISINI</div>

5. Gradasi Vertikal warna terang tengah

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-tengah
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 50%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(0.5, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-tengah">TEKS DISINI</div>

6. Gradasi Vertikal warna terang kanan kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 50%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop
(0, #ffffff),color-stop(0.5, #c4d69f),color-stop(1, #ffffff));
}

</style>

<div class="vertikal-terang-kanan-kiri">TEKS DISINI</div>

7. Gradasi Vertikal warna terang kiri

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kiri
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #ffffff 0%,#c4d69f 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #ffffff),color-stop(1, #c4d69f));
}
</style>

<div class="vertikal-terang-kiri">TEKS DISINI</div>

8. Gradasi Vertikal warna terang kanan

TEKS DISINI

Berikut kodenya :

<style type="text/css">
div.vertikal-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
padding: 10px;
margin-left: 70px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="vertikal-terang-kanan">TEKS DISINI</div>

9. Gradasi Vertikal warna terang kanan

CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.

Berikut kodenya :

<style type="text/css">
div.ellip-terang-kanan
{
width:300px;
border-style:solid;
border-color:rgb(225, 225, 225);
-moz-border-radius-topright: 700px 300px;
-webkit-border-radius-topright: 700px 300px;
-moz-border-radius-topleft: 700px 300px;
-webkit-border-radius-topleft: 700px 300px;
-moz-border-radius-bottomright: 700px 300px;
-webkit-border-radius-bottomright: 700px 300px;
-moz-border-radius-bottomleft: 700px 300px;
-webkit-border-radius-bottomrleft: 700px 300px;
padding: 40px;
margin-left: 60px;
background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);
background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));
}
</style>

<div class="ellip-terang-kanan">CSS atau Cascading Style Sheet adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.</div>

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara buat blog

Buat blog memang bukan suatu keharusan, tapi buat blog juga diperlukan. Disamping Gratis, mudah dan cepat, ada beberapa keuntungan lain bila kita buat blog atau memiliki sebuah blog.
Untuk apa kita buat blog ?, Blog bisa kita gunakan untuk keperluan pribadi atau sekedar penyalur hoby menulis atau apapun, Blog juga bisa kita gunakan sebagai sarana berbagi ilmu pengetahuan. Bahkan saat ini sudah tidak asing lagi bawha sebuah blog menjadi sarana bisnis. Para blogger buat blog dan memanfaatkannya sebagai penghasil uang. Apa anda berminat untuk buat blog?

Untuk buat blog kita gunakan saja layanan yang gratis seperti di blogger.com, wordpress.com, blogsome.com, dan layanan blog gratis lainnya.
Nah..., Seperti saya katakan diatas, cara buat blog sangat mudah, cepat dan gratis. Kita hanya perlu 3 langkah untuk buat blog, walaupun kita tidak memiliki pengetahuan programer sekalipun.

Bila anda berminat buat blog, dibawah ini saya berikan langkah - langkah cara buat blog menggunakan layanan gratis dari blogger.com :

1. Buat akun google.
Dengan akun google anda bisa menggunakan berbagai macam layanan dari google termasuk blog dari blogger.com. Bila anda belum punya akun google silahkan anda buat akun google menggunakan email dari gmail anda.

• Buat email DISINI
• Buat akun google atau langsung Login DISINI

Perhatikan gambar dibawah ini dan silahkan anda ikuti petunjuknya :

Setelah anda isi semua forum yang ada, kemudian "LANJUTKAN".

2. Buat nama blog.
Buatlah nama blog anda dengan nama yang mudah diingat dan familier ditelinga kita.

Apabila setelah nama blog yang anda masukkan tidak tersedia, silahkan anda coba terus dengan nama yang lain hingga berhasil. Tapi biasanya apabila nama yang anda masukkan tidak tersedia, Blogger akan memberi masukan atau saran nama alternatif. Dan kalau anda suka dengan nama yang disarankan, silahkan Klik dan lanjutkan. Tapi bila anda tidak suka silahkan anda cari dan masukkan nama yang lain.

Berikut gambar antara Tersedia dan tidak tersedia :

3. Pilih template.
Silahkan anda pilih template blog sesuai tema blog yang akan anda buat atau anda bisa pilih asal dulu, sebab anda bisa mengganti template lapan saja setelah blog anda jadi.

Inilah hasil blog yang baru dibuat, karena blog belun ada postingan jadi tampilan blog masih terlihat kosong :

Berikut hasil blog yang sudah ada postingan atau contoh artikelnya :

Anda bisa mengisi artikel atau entri sesuai hoby atau keperluan anda, dan anda bisa membuat blog anda lebih indah dengan mengedit atau memberi banyak asesoris blog pada blog anda.

Silahkan anda bisa lihat di menu "Tutorial blog" yang ada di blog ini. Blog ini banyak terdapat tutorial blog yang bisa anda gunakan sebagai panduan untuk mempercantik blog anda.
Anda juga bisa mengganti nama blog anda dari ".blogspot.com" mencadi ".co.cc", seperti http://rambak.co.cc, silahkan anda lihat panduannya dapat domain ".co.cc" DISINI dan "cara seting domain di blogger" DISINI

Mudah kan...? saya yakin anda bisa.

Selamat mencoba buat blog ya...
Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

HPFUXPEWM29A

Baca artikel lain :

Cara membuat tombol scroll "To Top"

Tombol "To Top" berfungsi untuk mengembalikan posisi halaman dari bawah sampai keatas sehingga bagian header web atau blog tampak seperti semula ketika kita baru membuka web atau blog tersebut.
Lebih jelasnya pada saat kita membaca artikel dan artikel tersebut panjang, sampai - sampai kadag kita ndak sadar sudah sampai jauh dibawah. Biasanya pengunjung yang sudah lelah membaca, juga males main scroll pada mousenya. Anda bisa lihat pada blog ini tombol "to top" ada disebelah kanan bawah.
Nah tombol ini bisa dimanfaatkan oleh pengunjung untuk mengembalikan halaman pada posisi semula.
Bila anda berminat silahkan anda ikuti langkah -langkah berikut ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Cari kode yang sama atau mirip dengan kode berikut :

]]></b:skin>

6. Sisipkan kode dibawah ini sebelum atau diatas kode ]]></b:skin>  

/* to top */<br /> #toTop<br /> {<br /> width:60px;<br /> border-style:solid;<br /> border-color:rgb(225, 225, 225);<br /> text-align: center;padding:5px;position:fixed;bottom:10px;right:10px;<br /> cursor:pointer;color:#666;text-decoration:none;<br /> background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);<br /> background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));<br /> }<br />

7. Lalu cari kode lagi yang sama atau mirip dengan kode berikut :

</body>

8. Sisipkan kode dibawah ini sebelum atau diatas kode </body>

<a href="#" id="toTop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw_0hqRKWnTRHQkI12EMNpaWQD5NpB-irPbLQ87B5jQox_qemlbatvJ9G54y45Kn4iV1RevoZ_M2rzLIx0jhYKAuflBhQd3YlOKoIEC0ph04z8oOXiaJii7t9Z1Uweq2bl7h3oz8qkX48S/s104/back+to+top.jpg" width="50" height="40" /></a><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /> <script type='text/javascript'> /*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/ $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#toTop").scrollToTop(); }); </script><br />

Catatan : Javascript diatas terselip informasi penciptanya, jadi anda tidak perlu menghapus dan biarkan saja. OK...

9. Simpan Template dan selesai.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara pasang tombol share

Menampilkan atau memasang Tombol share Social Bookmarking memang diperlukan sekali untuk kita yang sudah memiliki web ataupun blog. Hal ini sangat membantu untuk meningkatkan trafik atau pengunjung yang datang dari setiap Social Bookmarking. Seperti yang sudah kita ketahui bahwa hampir setiap Social Bookmarking, masing - masing sudah memiliki visitor yang sangat tinggi.
Jadi setiap artikel yang kita publikasikan, bisa langsung di sharing kesetiap Social Bookmarking dengan menggunakan Tombol share yang kita pasang. Dengan demikian tidak menutup kemungkinan ada visitor yang tertarik dengan artikel kita, dan langsung menuju web atau blog kita untuk membaca artikel yang kita sharing.

Ok..., bila anda berminat memasang Tombol share Social Bookmarking, anda bisa pilih dari dua properti Tombol share Social Bookmarking dibawah ini :

Gambar 1

(ada 6 Tombol share Social Bookmarking)

Gambar 2

(ada 100 lebih Tombol share Social Bookmarking)

Silahkan anda ikuti langkah -langkah cara pasang Tombol share Social Bookmarking :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang sama atau mirip dengan kode berikut : 

<data:post.body/>

7. Sisipkan kode dibawah ini setelah kode <data:post.body/>  

Kode untuk Gambar 1 :

<b:if cond='data:blog.pageType == "item"'><br /> <div style='clear:both; '> <b>Share this post :</b><br/><br /> <div style='width:60px; float:left;'> <script type='text/javascript'> digg_url = '<data:post.url/>'; </script><br /> <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/> </div> <div style='width:60px; float:left;'> <script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script><br /> </div> <div style='width:65px; float:left;'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external dofollow' target='_blank'><img alt='Stumble' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div> <div style='width:65px; float:left;'> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external dofollow' target='_blank'><img alt='Delicious' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div> <div style='width:65px; float:left;'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external dofollow' target='_blank'><img alt='Technorati' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div> <div style='width:65px; float:left;'> <a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external dofollow' target='_blank'><img alt='Twitter' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div> <div style='width:65px; float:left;'> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external dofollow' target='_blank'><img alt='Facebook' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif' style='padding:0;margin:0;border:none;'/></a><br /> </div> </div> </b:if><br/>

Kode untuk Gambar 2 :

<b>Share this post:</b><br/> <div style='float:right;margin-right:10px;margin-top:20px;'> <!-- AddThis Button BEGIN --><br /> <div> <a expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' class='addthis_button'><img src="http://s7.addthis.com/static/btn/v2/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><br /> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4b558593299fd997"></script></div> <!-- AddThis Button END --><br /> <br /> </div>

Catatan : Bila blog anda sudah menggunakan properti "Read more", sisipkan kode tersebut setelah kode <data:post.body/> yang kedua.

8. Simpan Template dan selesai.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, jangan khawatir... blog saya sudah Dofollow  hehehe...
Terima kasih.

Baca artikel lain :

Cara mencari kode HTML

Bagi kita yang mempunyai blog, hampir dipastikan selalu berhadapan dengan yang namanya kode HTML, Css, ataupun javascript. Untuk para senior Blogger memang asyik bermain kode - kode HTML, Css, ataupun javascript. Tapi bagi yang masih pemula, untuk mencari kode tertentu diantara sekian banyak kode HTML, Css, ataupun javascript yang ada, terkadang membuatnya pusing tujuh keliling hehehehe....

Nah... Sahabat blogger yang baik, bila anda termasuk yang masih bingung pada saat mencari kode tersebut, dibawah ini adalah cara cepat mencari kode HTML, Css, ataupun javascript yang ada pada template blog :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML :

 

4. Tekan tombol F3 atau Ctrl + F pada keyboard :

 

5. Masukkan kode pada kotak Find, sebelah kiri bawah layar komputer

Contoh :
Masukkan kode </head>, secara otomatis kode </head> yang dicari muncul dengan blok (Highlight) warna Hijau.
Perhatikan gambar berikut :

Nah.... mudah kan????
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, blog ini sudah Dofollow lho... hehehe...
Terima kasih.

Baca artikel lain :

Cara membuat Blog menjadi Dofollow

Soal Dofollow memang sudah banyak diulas oleh para senior Blogger. Dan umumnya blog mereka juga sudah mengikuti aliran Dofollow, sebab para senior Blogger sangat faham manfaat dan kelebihan mempunyai blog Dofollow. Secara ringkasnya demikian ; Bila blog anda Dofollow maka link atau ULR yang anda tinggalkan saat anda memberi komentar pada blog lain, secara otomatis akan terbaca oleh search engine google. Tapi bila blog anda Nofollow, maka akan berakibat sebaliknya. Jadi blog yang Dofollow sangat bagus bagi anda yang mau mengejar dan membangun SEO.

Nah... sekarang terserah anda, apa anda juga ingin ikut mempunyai blog Dofollow seperti blog saya ini?
Bila anda berminat silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang sama atau mirip dengan kode berikut : 

<a expr:href='data:comment.authorUrl' rel='nofollow'>

7. Ganti kode diatas dengan kode dibawah ini :

<a expr:href='data:comment.authorUrl'>

8.  Lalu Simpan dan selesai.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, sebab blog saya sudah Dofollow  hehehe...
Terima kasih.

Baca artikel lain :

Cara buat web

Cara buat web ternyata tidaklah sesulit yang kita fikirkan. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Tak perlu khawatir kalau anda merasa sangat pemula dan belum tahu atau mengerti tentang bahasa programer. Disini saya jabarkan bagaimana Cara buat web dari mulai : 
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis

Nah semua langkah diatas adalah cara buat web tanpa biaya sepeserpun alias serba gratis... tis... tis... tiiisss.
Oh iya.... untuk membuat nama domain, sebaiknya anda baca  artikel  Cara memilih nama Domain dan Cara Riset Topik Bisnis.

Selamat mencoba... dan semoga bermanfaat untuk anda semuanya....amiin.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Mohon jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Keywords:  web, website, buat web, cara buat website, cara buat web gratis, cara buat web, cara buat wesite gratis, cara membuat web, cara membuat website, cara membuat website gratis

Baca artikel lain :

Cara membuat textarea dengan tombol "select all"

Belajar kali ini adalah bagaimana kita menggunakan Javascript dan Css untuk menambahkan tombol "select all" pada textarea. Sehingga pengunjung lebih mudah untuk mengcopy teks atau kode yang diberikan dalam textarea, dan pengunjung hanya tinggal mengklik tombol "select all" tersbut. Textarea ini bisa kita gunakan dalam posting seperti artikel ini ataupun kita bisa taruh pada sidebar, tergantung kebutuhan.

Lebih jelasnya lihat contoh bentuk textarea dibawah ini :

"Disini adalah teks atau kode yang diberikan kepada pengunjung untuk di copy"

Ok... Bila anda berminat membuat textarea seperti ini, silahkan anda ikuti langkag - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Cari kode </head>
5. Copy dan paste kode dibawah ini tepat sebelum kode </head>

<script type="text/javascript">

function selectAll(){
document.formtombol.textarea.focus();
document.formtombol.textarea.select();
}</script>

<style type="text/css">
div.textareatombol{
width:430px;
border:4px solid;
border-color:#D8D8D8;
background-color:#A4A4A4;
padding:10px;
}</style>

6. Simpan Template
7. Langkah selanjutnya Klik elemen laman lalu tambah Gadget dan pilih HTML/JavaScript
8. Copy dan paste kode dibawah ini pada gadget tersebut :

<center><div class="textareatombol">

<form name="formtombol" >
<textarea cols="50" rows="3" name="textarea">"Disini adalah teks atau kode yang diberikan kepada pengunjung untuk di copy"</textarea>
</form>
<input type="button" name="selectit" value="Select All" onclick="selectAll ();">

</div></center>

9.  Lalu Simpan dan jadi deh......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara membuat effek scroll pada Titel Bar

Cara membuat effek scroll pada Titel Bar ini saya dapat dari blogger tip dan trik. Mudah - mudahan anda juga tertarik untuk memberi effek scroll pada titel bar seperti yang anda lihat di blog ini pada bagian atas, tepatnya bagian titel bar.
Cara buatnya sangat mudah, sebab kita tinggal menaruh kode javascript dibawah ini kedalam gadget. Silahkan anda ikuti langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget



4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :

<script language=javascript> var rev = "fwd"; function titlebar(val) { var msg = "DISINI TEKS TITEL WEB ATAU BLOG ANDA"; var res = " "; var speed = 100; var pos = val; msg = " |--- "+msg+" ---|"; var le = msg.length; if(rev == "fwd"){ if(pos < le){ pos = pos+1; scroll = msg.substr(0,pos); document.title = scroll; timer = window.setTimeout("titlebar("+pos+")",speed); } else{ rev = "bwd"; timer = window.setTimeout("titlebar("+pos+")",speed); } } else{ if(pos > 0){ pos = pos-1; var ale = le-pos; scrol = msg.substr(ale,le); document.title = scrol; timer = window.setTimeout("titlebar("+pos+")",speed); } else{ rev = "fwd"; timer = window.setTimeout("titlebar("+pos+")",speed); } } } titlebar(0); </script><br />

 Keterangan :  

•  var speed = 100  adalah kecepatan effek scroll (bisa anda ubah nilainya).
•  Ganti " DISINI TEKS TITEL WEB ATAU BLOG ANDA" dengan titel web atau blog anda.

5. Simpan dan selesai.
Silahkan anda lihat hasilnya......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara membuat tanggal otomatis update

Masih dalam kategori css dan javascript, kali ini kita akan belajar membuat dan memasang tanggal otomatis update setiap saat yang bisa kita pasang pada web ataupun blog kita. Tampilan tangal ini sangat sederhana tapi tetap enak dipandang. Tidak ada salahnya kita pasang pada web atau blog kita, baik memang diperlukan atau hanya sekedar sebagai pelengkap asesoris saja.

Ok ... Bila anda berminat silahkan anda lihat tampilan tanggal dibawah ini :

Dan silahkan anda ikuti langkah - langkah berikut :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Cari kode </head>
5. Copy dan paste kode dibawah ini tepat sebelum kode </head>

<style type="text/css"> div.tanggal { margin:15px; width:150px; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; -moz-border-radius: 50px 50px 50px 50px; border-radius: 50px 50px 50px 50px; border:2px solid blue; padding:5px; }</style>

Catatan : Anda bisa merubah nilai "px" dalam kode diatas, dan mengganti warna border sesuai selera anda.

6. Simpan template.
7. Langkah selanjutnya Klik elemen laman lalu tambah Gadget dan pilih HTML/JavaScript
8. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class="tanggal"> <center> <script type='text/javascript'> var mydate=new Date() var year=mydate.getYear() if (year < 1000) year+=1900 var day=mydate.getDay() var daym=mydate.getDate() var month=mydate.getMonth() if (daym<10) daym="0"+daym var dayarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu") var montharray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember") document.write("<p>"+dayarray[day]+", "+daym+" "+montharray[month]+" "+year+"</p> ") </script></center> </div>

9.  Lalu Simpan dan jadi deh......

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara Membuat Pop-up Window

Pop-up Window berfungsi menampilkan sebuah objek seperti halaman web, gambar atau dokumen yang lain pada jendela browser yang baru. Sehingga pembaca tidak kehilangan halaman yang sedang atau belum selesai dibaca. Dengan demikian pada saat bersamaan pembaca dapat membuka sebuah link tanpa harus meninggalkan halaman tersebut.
Belajar JavaScript kali ini akan memberi contoh penggunaan JavaScript Pop-up Window untuk  menampilkan sebuah objek gambar.

Perhatikan contoh dibawah ini :

Berikut kode JavaScript Pop-up Window contoh diatas :

<script type="text/javascript">
function open_gambar()
{
window.open("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnL6z2IZvWyXu8c9gy90CqLDNEa76SeYr4vGNkk31ggGmT2VuFHFyWrxcocgZPTyMVzjJEtEIzspiASRJRUk1Eg3ca4vPk_4-Cf5WRwPzzuraRi1B_cUQ6y-X2c2_0EEyxeBHMKLPBSKIG/s400/Logo+cara+buat+web+gratis.jpg"," _blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
}
</script>

<center>
<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnL6z2IZvWyXu8c9gy90CqLDNEa76SeYr4vGNkk31ggGmT2VuFHFyWrxcocgZPTyMVzjJEtEIzspiASRJRUk1Eg3ca4vPk_4-Cf5WRwPzzuraRi1B_cUQ6y-X2c2_0EEyxeBHMKLPBSKIG/s100/Logo+cara+buat+web+gratis.jpg" width="200" />
<form>
<input type="button" value="Perbesar Gambar" onclick="open_gambar()">
</form>
</center>

Catatan : Ganti Ulr lokasi gambar dengan milik anda.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara Membuat Read more

Read more sangat berguna khususnya untuk menghemat tempat. Selain itu memudahkan para pengunjung web atau blog untuk memilih artikel yang disukai dan membacanya. Hampir para blogger sudah menggunakan fasilitas read more ini.
Bila anda berminat untuk membuat read more, silahkan anda  ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.





4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Cari kode yang mirip dengan kode ini : <data:post.body/>

6. Jika anda sudah ditemukan kode diatas, silahkan anda ganti dengan kode berikut :

<b:if cond='data:blog.pageType == "item"'><br /> <style>.fullpost{display:inline;}</style><br /> <p> <data:post.body/></p> <b:else/><br /> <style>.fullpost{display:none;}</style><br /> <p> <data:post.body/><br /> <a expr:href='data:post.url'><b>Selengkapnya...</b></a></p> </b:if>

7. Simpan Template.

Langkah selanjutnya, pergi ke Dasboar, lalu pilih Pengaturan, selanjutnya pilih Format.
Dibagian paling bawah teks area kosong bertuliskan Template Posting, lalu tuliskan kode berikut :

<span class="fullpost"></span>

8. Setelah itu Simpan.

Langkah berikutnya, silahkan anda posting baru, pada kolom Edit HTML, bukan di kolomTulis.
Ketika di buka halaman posting pada kolom Edit Html, Kode tersebut (<span class="fullpost"></span>), akan keluar secara Otomatis.
Anda tinggal memasukkan artikel mana yang ingin di tampilkan pada haman depan, dan mana artikel yang tampil setelah read more.

Berikut contoh penulisan artikel sesudah menggunakan read more :

Saya membuat posting baru, dan saya menulisnya di kolom Edit HTML bukan di Tulis / Compose.

"Diantara anda dan saya kira-kira gantengan mana ya.....
<span class="fullpost">
Kalau gantegan anda, ya.....bersyukurlah.....hehehe....
</span>

Maka, setelah dipublikasikan akan menjadi seperti ini :

Diantara anda dan saya kira-kira gantengan mana ya.....
Read More...

Ok...., Mudah - mudahan faham ya....?
Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara Menghilangkan Navbar Pada blogger

Navbar adalah sebuah fasilitas yang dimiliki oleh Blogger/blogspot, berbentuk kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas  blog. Fungsi dari navbar antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Tapi bila kita merasa terganggu dengan adanya navbar tersebut, kita juga bisa menghilangkan navbar tersebut atau hanya sekedar menyembunyikan navbar saja
Nah...itu terserah anda...

Bila anda berminat untuk menghilangkan navbar tersebut, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login dulu di Blogger.com dengan ID anda
2. Trus Pilih Layout / Rancangan lalu buka  Edit HTML
3. Silahkan anda cari kode seperti atau mirip dengan kode dibawah ini :

Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.the-lola-generation.co.cc
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

/* Variable definitions

Copy kode dibawah ini :

#navbar-iframe {display: none !important;}

Dan sisipkan kode diatas hingga hingga tampak seperti dibawah ini :

Blogger Template Style
Name: Son of Moto (Mean Green Blogging Machine variation)
Designer: Jeffrey Zeldman
URL: www.the-lola-generation.co.cc
Date: 23 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

#navbar-iframe {display: none !important;}

/* Variable definitions

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara Membuat Navbar Auto-Hide

Selain ada yang menghilangkan Navbar, ada juga yang hanya menyembunyikan Navbarnya. Nah cara ini juga banyak diminati para blogger untuk menghindari pengunjung yang  jahil. Sehingga navbar dibuat tidak kelihatan, namun navbar tetap tidak hilang.

Dengan mengarahkan kursor mouse kita ke arah navbar (bagian atas blog) yang kita sembunyikan tadi, akan secara otomatis akan kelihatan. Untuk lebih jelasnya, lebih baik saya tulis dech langkah-langkahnya.
Bila berminat, silahkan anda bisa ikuti langkah berikut :
1. Login ke Blogger.
2. Klik Tata Letak/layout/rancangan.
3. Klik Edit HTML.
4. Lalu cari kode ]]></b:skin> (tekan F3 di keyboard atau ctrl+f) lalu kopi-paste dibawah ini, tepat di atas kode ]]></b:skin>   :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)} #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Klik Simpan Template.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :