7 WEBSITE TERMAHAL DI DUNIA

This summary is not available. Please click here to view the post.

Tweet

Daftar Blogger Paling Sukses Didunia

Daftar Blogger Paling Sukses Didunia

Daftar Blogger Paling Sukses Didunia - Kaya raya dari blog sebenarnya bukan hal yang mustahil tapi sebagian besar orang membuat blog hanya untuk menyalurkan hobi menulis saja. Hanya sebagian kecil blogger yang benar-benar serius ngeblog. Saking seriusnya bahkan ada yang rela meninggalkan pekerjaannya, lebih terfokus untuk mengembangkan dan mengais rejeki dari blognya. Dengan hanya bermodal laptop atau PC, bisa bekerja darimana saja selama ada koneksi internet ditambah kreatifitas yang tinggi seorang blogger bisa meraih penghasilan menggiurkan dari internet.

Di Indonesia kita mengenal Anne Ahira yang mampu menghasilkan uang ribuan dollar dari berbagai kegiatannya diinternet. Kemahiran Anne menulis dalam bahasa Inggris membuatnya mampu bersaing dengan para blogger internasional, seringkali ulasan Anne tentang suatu produk yang dijual di amazon.com nongkrong diposisi kesatu mesin pencarian Google. Walaupun dulu Anne sempat tersandung kasus MLM tapi dia berhasil bangkit, kini Anne Ahira termasuk blogger dan affiliate marketer terkaya di Indonesia.

Jika Anne Ahira sanggup menghasilkan ribuan Dollar sebulan dari internet ternyata ada beberapa blogger yang lebih ‘gila’ karena mereka mampu menghasilkan hingga ratusan ribu dollar lewat blognya perbulan bahkan blog mereka dikunjungi jutaan visitor. Jika kita mengintip blog mereka sebagian besar blognya terkesan sederhana, mungkin mereka pikir yang penting isi daripada penampilan. Siapa saja para blogger luar biasa ini?

1. Michael Arrington

Michael Arrington, mulai ngeblog tahun 2005 tapi hanya dalam waktu singkat lewat blognya Techcrunch dia berhasil menjadi blogger tersukses didunia dengan pendapatan sekitar USD 800.000 (± Rp 7,6 Milyar) perbulan. Penghasilan terbesarnya didapat dari Google AdSense, Banner dan text advertising. Techcrunch mengulas berbagai hal tentang teknologi dan seputar silicon Valley. Pada tahun 2011 Michael menjual Techcrunch pada AOL sebesar USD 25 Juta dan Michael membuat blog baru bernama Uncrunched belum jelas berapa pemasukan yang dia dapat dari blog baru tersebut. Menurut beberapa sumber, AOL berniat menjual lagi Techcrunch dan Michael berniat membelinya kembali.

2. Pete Cashmore

Pete Cashmore, membuat blog bernama Mashable pada tahun 2005 ketika usianya masih 19 tahun. Saat ini blog Mashable merupakan blog media sosial terpopuler dengan penghasilan sekitar USD 600.000 (± 5,7 Milyar) perbulan dan sekitar 25 juta pengunjung perbulan.

3. Mario Lavandeira.

Mario Lavandeira, atau lebih dikenal dengan nama alias Perez Hilton, mulai ngeblog pada tahun 2005. Blog Perez Hilton mengulas tentang selebriti, gossip dan dunia hiburan Amerika. Blognya menghasilkan uang sekitar USD 200.000 (± Rp 1,9 Milyar) perbulan dan dikunjungi  sekitar 1 juta visitor perhari.

4. Timothy Sykes. 

Timothy Sykes, membuat blog Timothy Sykes yang mengulas bagaimana caranya menjadi trader, affiliate dan internet marketer yang handal sehingga bisa menghasilkan uang dari internet. Blognya berhasil meraih penghasilan sekitar USD 180.000 (± Rp 1,7 Milyar) perbulan.

5. Vitaly Friedman

Vitaly Friedman, pada tahun 2006 mulai membuat blog yang memuat berbagai hal tentang web design dan web developer. Dibantu oleh rekannya Sven Lennarzt, SmashingMagazine menjagi blog yang berkembang pesat dan menarik minat pengunjung. Diperkirakan Vitaly meraup sekitar USD 150.000 (± Rp 1,42 Milyar) perbulan dari blognya.

6. Collis Ta’eed

Collis Ta’eed, membuat blog Envato untuk membantu visitor yang ingin membeli atau mempelajari sesuatu dari internet. Envato menyediakan ruang dimana ribuan orang menjual dan membeli berbagai barang digital dan berbagai blog yang menawarkan pendidikan/tutorial sehingga kita bisa mempelajari berbagai hal disana. Envato diperkirakan meraih pendapatan sekitar USD 120.000 (± Rp 1,14 Milyar) perbulan.

7. Jake Dobkin

Jake Dobkin, dibantu temannya Jen Chung membuat blog lifestyle sejak tahun 2003. Blog bernama Gothamist ini mengulas tentang segala hal di New York misalnya restoran, konser, club dll. Ternyata Gothamist disukai dan mampu menarik jutaan visitor. Gothamist menghasilkan sekitar USD 110.000 (± Rp 1,04 Milyar) perbulan.

8. Gina Trapani

Gina Trapani, adalah seorang web developer, hobi ngeblognya dimulai sejak tahun 2001 dengan membuat blog pribadi. Ketika dia bekerja sebagai programmer di Lifehacker, pada tahun 2005 Nick Denton pemilik Lifehacker menawari Gina untuk menjadi blogger di Lifehacker Menurut estimasi lifehacker menghasilkan uang sekitar USD 108.000 (± Rp 1,03 Milyar) perbulan dari internet.

9. Matt Marshall

Matt Marshall, adalah mantan jurnalis media cetak dan beralih ke media online lalu memutuskan untuk membuat blog sendiri bernama VentureBeat pada tahun 2006. Pada tahun 2002 Matt dianugrahi penghargaan Journalist of the year oleh Northern California Society of Professional Journalist. Pernah bekerja sebagai koresponden untuk Wall Street Journal dan penulis untuk Washington Post. Blog Venture Beat menghasilkan pemasukan sekitar USD 100.000 (± Rp 948 Juta) perbulan.

10. Richard MacManus

Richard MacManus, berasal dari Selandia Baru dia adalah blogger dan pendiri blog ReadWriteWeb Blog tersebut mengulas berbagai hal tentang sosial media dan web trend. Blog readwrite diperkirakan menghasilkan USD 60.000 (± Rp 569 Juta) perbulan

* Referensi : http://www.wikipedia.org/http://www.trueseowebdesign.com/ http://www.forbes.com http://addicted2success.com/ http://www.businessweek.com/http://afriqnet.hubpages.com/hub/

Tweet

Cara Membuat Navigasi Horizontal Dropdown Menu / Vertikal Navigasi Menu Di Blogger

Cara Membuat Navigasi Horizontal Dropdown Menu / Vertikal Navigasi Menu Di Blogger

Di bawah ini adalah langkah-langkah yang benar silakan di ikuti.

Langsung Aja yuk kita praktik kang fatur bagaimana cara membuat Horizontal Menu Blog :

1. Cari Kode kode ]]></b:skin>

2. Copy paste kode berikut simpan persis di atas kode ]]></b:skin>

/* navbar<br /> <br /> ================== */<br /> <br /> #bg_nav {<br /> background: #000000;<br /> width: 660px;<br /> height: 29px;<br /> font-size: 11px;<br /> font-family: Arial, Tahoma, Verdana;<br /> color: #FFFFFF;<br /> font-weight: bold;<br /> margin: 0px auto 0px;<br /> padding: 0px;<br /> border-top: 1px solid #333333;<br /> border-bottom: 1px solid #333333;<br /> overflow: hidden;<br /> }<br /> #bg_nav a, #bg_nav a:visited {<br /> color: #FFFFFF;<br /> font-size: 11px;<br /> text-decoration: none;<br /> text-transform: uppercase;<br /> padding: 0px 0px 0px 3px;<br /> }<br /> #bg_nav a:hover {<br /> color: #FFFFFF;<br /> text-decoration: underline;<br /> padding: 0px 0px 0px 3px;<br /> }<br /> #navleft {<br /> width: 440px;<br /> float: left;<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> #navright {<br /> width: 200px;<br /> font-size: 11px;<br /> float: right;<br /> margin: 0px;<br /> padding: 6px 5px 0px 0px;<br /> }<br /> #navright a img {<br /> border: none;<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> <br /> #nav {<br /> margin: 0px;<br /> padding: 0px;<br /> list-style: none;<br /> }<br /> #nav ul {<br /> margin: 0px;<br /> padding: 0px;<br /> list-style: none;<br /> }<br /> <br /> #nav a, #nav a:visited {<br /> background: #222222;<br /> color: #FFFFFF;<br /> display: block;<br /> font-weight: bold;<br /> margin: 0px;<br /> padding: 8px 15px 8px 15px;<br /> border-left: 1px solid #000000<br /> }<br /> #nav a:hover {<br /> background: #6e6d6d;<br /> color: #FFFFFF;<br /> margin: 0px;<br /> padding: 8px 15px 8px 15px;<br /> text-decoration: none;<br /> }<br /> <br /> #nav li {<br /> float: left;<br /> margin: 0px;<br /> padding: 0px;<br /> }<br /> #nav li li {<br /> float: left;<br /> margin: 0px;<br /> padding: 0px;<br /> width: 150px;<br /> }<br /> #nav li li a, #nav li li a:link, #nav li li a:visited {<br /> background: #333333;<br /> width: 160px;<br /> float: none;<br /> margin: 0px;<br /> padding: 7px 30px 7px 10px;<br /> border-bottom: 1px solid #000000;<br /> border-left: 1px solid #000000;<br /> border-right: 1px solid #000000;<br /> }<br /> #nav li li a:hover, #nav li li a:active {<br /> background: #666666;<br /> padding: 7px 30px 7px 10px;<br /> }<br /> <br /> #nav li ul {<br /> position: absolute;<br /> width: 10em;<br /> left: -999em;<br /> }<br /> <br /> #nav li:hover ul {<br /> left: auto;<br /> display: block;<br /> }<br /> #nav li:hover ul, #nav li.sfhover ul {<br /> left: auto;<br /> }

3. Tuju bagian bawah, lalu cari seperti berikut ini :

<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. Copy paste code berikut persis di bawah kode yang tadi :

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='asksalman19.blogspot.com/'>home</a></li>
<li><a href='#'>Info Serba-Serbi</a></li>
<ul>
<li><a href='Namaanda.blogspot.com'>Serba-serbi</a></li>
<li><a href='http://Namaanda.blogspot.com/'>lifestyle</a></li>
<li><a href='http://Namaanda.blogspot.com/'>Other</a></li>
</ul>
</li>
<li><a href='#'>Internet</a></li>
<ul>
<li><a href='http://asksalman19.blogspot.com/search/lebel/internet'>Jaringan</a></li>
<li><a href='http://asksalman19.blogspot.com/search/lebel/seo/'>Tips SEO Backlink </a></li>
<li><a href='http://asksalman19.blogspot.com/search/lebel/tips blog/'>Tips and Trick </a></li>
<li><a href='http://asksalman19.blogspot.com/seacrh/lebel/make money/'>Bisnis Online </a></li>
</ul>
</li>
<li><a href='#'>Teknologi Informasi </a></li>
<ul>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
</li>
<li><a href='#'>Belajar Ilmu Komputer</a></li>
<ul>
<li><a href='portal-komputer.blogspot.com/'>Belajar Komputer</a></li>
<li><a href='alamatBlogAnda.blogspot.com/'>Nama-Menu </a></li>
<li><a href='http://asksalman19.blogspot.com/search/lebel/anti virus/'>Anti Virus </a></li>
</ul>

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

<div id='navright'>

<form action='http://alamat-url-anda.blogspot.com.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. Klik tombol SIMPAN TEMPLATE.
6. Selesai.

* Gantilah tulisan yang berwarna merah sesuai alamat blog yang anda inginkan.
Catatan :
Navbar yang saya buat sudah saya modifikasi sehingga memiliki fungsi dropdown menu. Jika anda ingin menghilangkan fungsi dropdownnya hapus saja <ul> dan </ul></li> contoh :

<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>
<ul> <= hapus
<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>
<li><a href='alamat-url-anda.blogspot.com’>Multimedia'></a></li>
</ul> <= hapus
</li> <= hapus

*Hapuslah Kode Yang telah saya beri tanda Merah hapus untuk menghilangkan fungsi dropdown menu!

Sehingga hasilnya akan menjadi seperti di bawah ini :

<li><a href='alamat-url-anda.blogspot.com'>Software</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Antivirus</a></li>
<li><a href='alamat-url-anda.blogspot.com'>Internet Acceleator</a></li>
<li><a href='#’>Multimedia'></a></li>

Untuk sementara percobaan ini sudah selesai, namun tentunya jika kamu menerapkan pada template kamu, ada beberapa yang perlu di sesuaikan. Beberapa di antaranya yaitu lebar dari navigasi, link, keyword yang di inginkan serta yang lainnya. beberpa contoh di antaranya :

/* 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;
}

kamu juga harus mengubah nilai lebar 660px menjadi nilai yang sesuai dengan template kamu. misal : width:990px.

#navleft {
width: 440px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 200px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 5px 0px 0px;
}


Catatan : Untuk Membuat Vertikal Menu Navigasi :

Tambahkan kode dibawah ini sesudah kode <style type="text/css"> dan sebelum kode </style>, tempatnya di mana saja asalkan di antara kode tadi.

.kang-salman{
text-align:left;
display:block;
width:180px;
height:20px;
background:#f0f0f0 url(http://i811.photobucket.com/albums/zz36/asksalman/menu.gif) top right no-repeat;
padding:3px 4px 3px 8px;
margin:7px 10px 7px 0;
}

.kang-salman:hover{ background:#97A4B9 url(http://i811.photobucket.com/albums/zz36/asksalman/menu.gif) top right no-repeat;
text-decoration:none;
}

Catatan : kedua alamat url photobucket di atas adalah bentuk dari tombol navigasi yang saya buat, kamu bisa mengubahnya sendiri.
1. yang pertama adalah tampilan button dasar dari navigasi. terlihat saat mouse tidak di arahkan kesana
2. adalah tampilan button 2 terlihat saat mouse di arahkan menyentuh tombol navigasi, sehingga bisa berubah warna dan da bentuk. (tergantug kita membutnya)
3. jika di samakan seperti contoh di atas navigasi tersebut tidak akan berubah warna.

Setelah selesai Simpan Tamplate

Langkah berikutnya adalah.
1. Pilih Tata Letak
2. Tambahkah Widget/Gedget Baru
3. Pilih HTML / Javascript
4. Silakan Copy kode Di bawah ini dan Pastekan Widget baru tadi kamu pilih !

Yang inipun sama, kamu harus mengubahnya sesuai dengan nilai yang pas untuk template kamu

<a class="kang-salman" alamatBlogAnda.blogspot.com">Menu</a><span class="hide"> | </span>
<a class="kang-salman" alamatBlogAnda.blogspot.com">Bisnis Online</a><span class="hide"> | </span>
<a class="kang-salman" alamatBlogAnda.blogspot.com">Tukar Link</a><span class="hide"> | </span>
<a class="kang-salman" alamatBlogAnda.blogspot.com">Tips Anda Trick</a><span class="hide"> | </span>
<a class="kang-salman" href="alamatBlogAnda.blogspot.com">Nama Menu Anda</a><span class="hide"> | </span>


Setelah itu Simpan dan lihat hasilnya. sekarang anda sudah memiliki navigasi horizontal Menu

Semoga dapat membantu anda ^_^

Tweet

Gadget Popular Post dari Google Friend Connect

Gadget Popular Post dari Google Friend Connect

Bagi para blogger atau blogspot sudah pada tahu apa itu google friend connect karena sudah tertanam langsung pada blognya. Google Friend Connect (Jalinan Teman Google) merupakan layanan komunitas sosial dari google yang didalamnya memudahkan kita saling berinteraksi seperti halnya pada Blogcatalog dan lainnya. Widget friend connect ini memang sangat membantu dalam meningkatkan traffic dan popularitas blog.
Apakah anda tahu bahwa Google Friend Connect juga menyediakan widget Recommended (Popular) Post yang bisa kita pasang di blog. Kelebihan widget ini dari widget popular post yang lain adalah lebih stabil dan juga cepat terupdate untuk menampilkan list posting. Contoh dari widget ini dapat anda lihat disidebar kanan, dan dibawah list yang ditampilkan terdapat tombol Vote yang berfungsi untuk mengukur tingkat kepopuleran sebuah halaman dan kemudian akan ditampilkan ke dalam list.

Untuk memasang Gadget Popular Post ini ke blog, silahkan anda simak tutorial lengkapnya :

Gadget Recommended (Popular) Post

Kunjungi :http://www.google.com/friendconnect/

Masuk / login dengan username dan password akun google atau blogger anda dan pilih salah satu blog kemudian pilih menu "Gadget".

Scroll kebawah dan pilih widget "Recommendation".

Mengatur tampilan untuk list Popular Post
Ini merupakan widget utama yang akan menampilkan list atau daftar postingan terpopuler, silahkan atur warna, background, width dan lainnya sesuai keinginan anda lalu lihat previewnya apa sudah sesuai atau belum.

Mengatur tampilan untuk tombol Vote
Tombol ini berfungsi untuk merekomendasikan sebuah halaman untuk ditampilkan ke dalam list / daftar popular post (tergantung jumlah rekomendasi). Pilih salah satu dari 2 tombol dan iconnya yang akan kita gunakan :

"Tombol Ringkas" tampilannya seperti ini:

"Modular" tampilanya seperti ini :

Silahkan pilih tombol yang anda sukai dan atur tampilannya.

Buat dan Dapatkan Kode HTML
Setelah mengatur tampilan maka langkah selanjutnya adalah mengambil kode widget yang nantinya akan dipasang di blog.

Klik tombol "Buat Kode" untuk menggenerate kodenya dan akan muncul 2 kode yang masing - masing kode untuk Recommended (popular) list dan yang satunya untuk Tombol Vote.
Cara Pasang Widget

Saya asumsikan langkah diatas sudah anda jalankan dengan benar dan telah memiliki kodenya.

Pasang Kode Recommended List Pada Sidebar
Sebagai contoh kita akan memasangnya di sidebar, untuk blogger/ blogspot tambahkan "widget HTML/Javasript" baru lalu isi dengan kode Recommended (popular) list sedangkan untuk wordpress caranya sama yaitu dengan menambahkan "widget text" baru pada sidebar kemudian isi dengan kode Recommended (popular) list.

Pasang Kode Tombol Vote pada tiap Postingan
Alangkah baiknya kita memasang tombol ini hanya pada halaman postingan saja agar tidak terjadi kesalahan jika menampilkan banyak tombol pada halaman yang sama (halaman Homepage yang menampilkan banyak posting) dan tekniknya adalah menggunakan Conditional Tag. Sebagai contoh kita akan memasang tombol ini diatas postingan.

<!-- Include the Google Friend Connect javascript library. --><br /> <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><br /> <!-- Define the div tag where the gadget will be inserted. --><br /> <div id="div-7064793784943751094" style="width:100%;"></div><!-- Render the gadget into a div. --><br /> <script type="text/javascript"> var skin = {}; skin['HEIGHT'] = '21'; skin['BUTTON_STYLE'] = 'compact'; skin['BUTTON_TEXT'] = 'Sarankan!'; skin['BUTTON_ICON'] = 'default'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderOpenSocialGadget( { id: 'div-7064793784943751094', url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml', height: 21, site: '11332923189683725073', 'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"} }, skin); </script> 

Untuk Blogger :
Login ke account blogger
Pilih tab Rancangan --> Edit HTML
Sebelum melakukan perubahan pada template, biasakan untuk membackup terlebih dahulu untuk menghindari hal-hal yang tidak diinginkan.
Centang pada expand template widget
Cari kode data:post.body
Tepat diatasnya Copas skrip ini

<b:if cond = 'data:blog.pageType == "item"'><br /> <!-- Skrip tombol Vote letakan disini.. --><br /> </b:if> 

Sehingga seluruhnya jadi seperti ini:

<b:if cond = 'data:blog.pageType == "item"'><br /> <!-- Include the Google Friend Connect javascript library. --><br /> <script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script><br /> <!-- Define the div tag where the gadget will be inserted. --><br /> <div id="div-7064793784943751094" style="width:100%;"></div><!-- Render the gadget into a div. --><br /> <script type="text/javascript"> var skin = {}; skin['HEIGHT'] = '21'; skin['BUTTON_STYLE'] = 'compact'; skin['BUTTON_TEXT'] = 'Sarankan!'; skin['BUTTON_ICON'] = 'default'; google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */); google.friendconnect.container.renderOpenSocialGadget( { id: 'div-7064793784943751094', url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml', height: 21, site: '11332923189683725073', 'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"} }, skin); </script><br /> </b:if>

kode <b:if cond...</b:if> diatas adalah conditional tag agar tombol vote hanya tampil pada halaman postingan saja.

Untuk Wordpress :
Masuk Ke Dashboard Blog Anda
Pilih tab Appearance--> Editor (Themes Editor)
Edit file single.php
Cari kode <?php the_content(); ?> kemudian
Letakan skrip Tombol Vote sebelum kode diatas.
<!-- Skrip tombol Vote letakan disini.. -->
<?php the_content(); ?>

Silahkan simpan template anda dan lihat hasilnya.

Pada awalnya widget Popular Post ini masih akan menampilkan list kosong, ini dikarenakan belum ada yang merekomendasikan postingan tertentu melalui tombol vote yang telah dipasang.

Untuk menampilkan postingan pada list, anda dapat melakukannya sendiri dengan mengklik tombol vote pada tiap posting dan selanjutnya biarkan pengunjung blog anda yang melakukanya.

Tweet

Membuat Menu Navigasi Drop Down

Membuat Menu Navigasi Drop Down

1. Login Blogger
2. Pilih Tata Letak/Rancangan
3. Pilih Edit HTML
4. Centang "Expand Template Widget".

Tips: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, agar kita memiliki Backup-an data saat tamplate kita eror

5. Tambahkan kode CSS berikut, di bawah kode CSS menu horizontal yang ada.


#nav li ul a {
width: 100px;
}
#nav li ul ul {
position: absolute;
margin: -30% 0 0 95%;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}
#nav li li li.sfhover ul {
left:auto;
}
#nav li:hover, #nav li.sfhover {
position:static;
}

Cari kode HTML <div id='navleft'>

Tips: Kalau anda susah mencarinya, coba tekan tombol F3 atau CTRL+F di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox) dan di atas (Google Chrome), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a>
<ul>
<li><a href='URL sub 1'>teks kamu</a></li>
<li><a href='URL sub 2'>teks kamu</a></li>
<li><a href='URL sub 3'>teks kamu</a>
<ul>
<li><a href='URL sub 3.1'>teks kamu</a></li>
<li><a href='URL sub 3.2'>teks kamu</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
<li><a href='http://Link_yang_dituju'>teks kamu</a></li>
</ul>
</div>
</div>

Catatan :

Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna Kuning.
Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.
Jika kamu menutup kode dengan </a> itu artinya sub menunya sampai disitu
Jika anda ingin menambahkan submenu lagi di bawahnya tutup kode dengan </a></li> kemudaian tambahkan lagi kode <li></a> href='URL sub 3.2'>teks kamu</a></li>
Jangan lupa untuk mengakhiri Sub menu dengan </ul>
biar ga pusing di coba-coba saja dulu nanti pun anda akan mengerti sendiri

Setelah selesai Simpan dan lihat hasilnya
Semoga bermanfaat...

Tweet

Membuat Domain-Hosting Gratis

Langkah-langkahnya:
1. Klik banner di bawah ini untuk mendaftar

2. Setelah itu akan muncul tampilan seperti dibawah ini, anda tinggal mengetikan nama domain apa yang anda kehendaki lalu Klik Check avaibility

3. Bila nama domain yang anda kehendaki belum tersedia atau belum dipakai oleh orang lain maka akan tertulis nama domain anda is available kemudian klik Continue To registration

4. Langkah selanjutnya adalah Create Account

5. Selanjutnya isi data-data pada form yang tersedia. Setelah semua diisi klik check box disebelah tulisan accept the Terms of Service kemudian klik tombol Create an account now

6. Anda sudah selesai membuat nama domain anda. Selanjutnya manage domain yang telah anda buat dengan mengklik banner berikut

7. Kemudian akan muncul tampilan seperti berikut, klik tab Domain Settings lalu klik Set up disebelah nama domain kita yang tertera di box manage domain.

8. Setelah kita klik Set Up maka selanjutnya akan muncul tampilan sebagai berikut, kemudian klik tombol Set Up lalu klik tombol OK

9. Anda sudah berhasil membuat nama domain anda secara gratis selanjutnya anda tinggal mendaftarkannya pada hosting yang gratis juga (lihat panduan mendaftar pada hosting)

Mendaftar pada Hosting

Langkah-langkahnya:
1. Klik Banner di bawah ini

2. Kemudian klik tombol Sign Up

3. Isi data-data anda pada form yang tersedia. Klik pada check box I agree to Terms of Service kemudian klik tombol create My account.

4. Selanjutnya akan ditampilkan data-data account anda, simpan dan catat data-data anda terebut untuk keperluan upload file nantinya.

5. Anda telah berhasil mendaftarkan nama domain anda ke hosting gratisan, selanjutnya upload file-file yang akan anda gunakan untuk menampilkan website anda (lihat pada bagian panduan upload file melalui control panel)

Upload File lewat Control Panel

Sebenarnya ada dua cara untuk meng-upload file, yang pertama melalui File Transfer Protocol (FTP) seperti FileZilla dan melalui Control Panel. Disini yang akan dibahas hanyalah upload file melalui control panel.

Langkah-langkahnya:
1. Masuklah ke account anda di www.000webhost.com

2. Klik pada Action: Go To CPanel

3. Kemudian pada bagian Files, klik File Manager

4. Kemudian isi Directory Tree di bagian atas dengan public html dengan cara klik tulisan public html di kolom Name

5. Selanjutnya klik tombol upload

6. Masukkan file-file yang ingin anda upload. Dapat satu persatu atau disimpan dalam bentuk .zip,.tar,dll. Kemudian klik tanda cek berwarna hijau untuk mengupload file

7. Anda telah selesai meng-upload file. Coba cek website anda dengan cara mengetikkan www.nama-domain anda.co.cc pada web browser.

Tweet

Membuat Text Area

Membuat Text Area

Apa itu text area?. Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="7" cols="25"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Sebagai contoh :

Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Keterangan : rows="7", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 7" tadi dengan angka yang lebih tinggi nilainya.

Cols="25", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 25 " tadi dengan angka yang lebih tinggi nilainya.

Text Area dengan memakai HighLight

Ada variasi lain dari membuat text area ini, yakni text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></div></form>

Sebagai contoh :

Apa itu text area?. Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Agar anda lebih memahami kode di atas, sedikit akan saya uraikan. Kode di atas mempunyai dua elemen bagian, yakni elemen kode untuk membuat tombol yang bertuliskan Highlight All, dan yang kedua adalah elemen kode untuk membuat text area.

Elemen tombol highlight All :

<div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.


<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.


Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.


Element text area :

<p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
<text style="WIDTH: 300px">-->kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"


HEIGHT: 144px --> angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.


Contoh text area yang memakai tombol highlight diatas, memuat skript untuk melindungi dari right click para pengunjung. skript ini di pakai apabila anda tidak ingin tulisan-tulisan anda di copy paste oleh pengunjung. bagi yang berminat silahkan copy lalu pasang pada kode HTML anda antara kode <HEAD> dan </HEAD> selamat mencoba.

Tweet

Membuat Domain-Hosting Gratis

Membuat Domain-Hosting Gratis

Langkah-langkahnya:
1. Klik banner di bawah ini untuk mendaftar

2. Setelah itu akan muncul tampilan seperti dibawah ini, anda tinggal mengetikan nama domain apa yang anda kehendaki lalu Klik Check avaibility

3. Bila nama domain yang anda kehendaki belum tersedia atau belum dipakai oleh orang lain maka akan tertulis nama domain anda is available kemudian klik Continue To registration

4. Langkah selanjutnya adalah Create Account

5. Selanjutnya isi data-data pada form yang tersedia. Setelah semua diisi klik check box disebelah tulisan accept the Terms of Service kemudian klik tombol Create an account now

6. Anda sudah selesai membuat nama domain anda. Selanjutnya manage domain yang telah anda buat dengan mengklik banner berikut

7. Kemudian akan muncul tampilan seperti berikut, klik tab Domain Settings lalu klik Set up disebelah nama domain kita yang tertera di box manage domain.

8. Setelah kita klik Set Up maka selanjutnya akan muncul tampilan sebagai berikut, kemudian klik tombol Set Up lalu klik tombol OK

9. Anda sudah berhasil membuat nama domain anda secara gratis selanjutnya anda tinggal mendaftarkannya pada hosting yang gratis juga (lihat panduan mendaftar pada hosting)

Mendaftar pada Hosting

Langkah-langkahnya:
1. Klik Banner di bawah ini

2. Kemudian klik tombol Sign Up

3. Isi data-data anda pada form yang tersedia. Klik pada check box I agree to Terms of Service kemudian klik tombol create My account.

4. Selanjutnya akan ditampilkan data-data account anda, simpan dan catat data-data anda terebut untuk keperluan upload file nantinya.

5. Anda telah berhasil mendaftarkan nama domain anda ke hosting gratisan, selanjutnya upload file-file yang akan anda gunakan untuk menampilkan website anda (lihat pada bagian panduan upload file melalui control panel)

Upload File lewat Control Panel

Sebenarnya ada dua cara untuk meng-upload file, yang pertama melalui File Transfer Protocol (FTP) seperti FileZilla dan melalui Control Panel. Disini yang akan dibahas hanyalah upload file melalui control panel.

Langkah-langkahnya:
1. Masuklah ke account anda di www.000webhost.com

2. Klik pada Action: Go To CPanel

3. Kemudian pada bagian Files, klik File Manager

4. Kemudian isi Directory Tree di bagian atas dengan public html dengan cara klik tulisan public html di kolom Name

5. Selanjutnya klik tombol upload

6. Masukkan file-file yang ingin anda upload. Dapat satu persatu atau disimpan dalam bentuk .zip,.tar,dll. Kemudian klik tanda cek berwarna hijau untuk mengupload file

7. Anda telah selesai meng-upload file. Coba cek website anda dengan cara mengetikkan www.nama-domain anda.co.cc pada web browser.

Tweet