Jumat, 29 Juli 2011

membuat slide gambar dengan CSS3

Mungkin ini cocok buat anda yang suka memasang widget gambar

untuk caranya

log in ke blog anda
klik rancangan / layout
klik tambah gadget
klik html / javascript

lalu masukan kode di bawah ini




<style>
#images {
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
width: 720px;
height: 400px;
overflow: hidden;
position: relative;}

#images img {
background:#ccc;
width: 720px;
height: 400px;
position: absolute;
top: 0;
left: -400px;
z-index: 1;
opacity: 0;

transition: all linear 500ms;
 

-o-transition: all linear 500ms;
-moz-transition: all linear 500ms;
-webkit-transition: all linear 500ms;}

#images img:target {
left: 0;
z-index: 9;
opacity: 1;}

#images img:first-child {
left: 0;
opacity: 1;}

#slider {
widht:720px;
float:left;
text-decoration: none;
background: ;
padding: 8px 10px;
color: #222;}

#slider a {
text-decoration: none;
background: #E3F1FA;
border: 1px solid #C6E4F2;
padding: 8px 10px;
color: #222;}

#slider a:hover {
background: #C6E4F2;}

</style>


<div id="images">
<a href="http://wallpaper4xp.blogspot.com/2010/07/3d-graphics-graffiti.html"> <img id="image1" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEl41-OaS4I/AAAAAAAAB_Y/5vUu7hu43g0/s400/3D+graphics+Graffiti.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/07/girls-field-on-bicycle.html"> <img id="image2" src="http://1.bp.blogspot.com/_lh4qH1cW0XQ/TEP0seDCLoI/AAAAAAAAB7Q/gL_03zLKXyM/s400/Girl+field+bicycle.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/music-box.html"> <img id="image3" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIxELRCiAZI/AAAAAAAACPI/AoL6c1jJMNk/s400/music+Box.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/09/glamor-rock-sensation.html"> <img id="image4" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TIXotYo5PGI/AAAAAAAACM4/vJUlKZmQvfY/s400/VAIN+Glam+rock+Wallpaper.jpg" /></a>

<a href="http://wallpaper4xp.blogspot.com/2010/06/fire-custom-chopper-motorcycle.html"><img id="image5" src="http://2.bp.blogspot.com/_lh4qH1cW0XQ/TCljHSoRohI/AAAAAAAAByU/qwSeFjGd8sg/s400/Black+Fire+Custom.jpg" /></a></div>
<div id="slider">
<a href="#image1">1</a>
<a href="#image2">2</a>
<a href="#image3">3</a>
<a href="#image4">4</a>
<a href="#image5">5</a>
</div>




Ganti kode warna biru dengan alamat link yang akan anda gunakan, 
ganti juga kode warna hijau dengan kode gambar milik anda.



simpan dan tes

Minggu, 24 Juli 2011

cara membuat account paypal gratis

Apa itu PayPal? yaitu sebuah Payment Processor yang paling populer di dunia maya. PayPal merupakan salah satu media pembayaran terpercaya yang banyak digunakan oleh pelaku transaksi online, baik penjual (merchant) maupun pembeli. Rasanya tidak lengkap jika para netter termasuk anda belum memiliki account di PayPal.

Sebelum melakukan pendaftaran atau membuka account di PayPal, terlebih dahulu siapkan data-data anda untuk membuat account PayPal seperti alamat Email, alamat tempat tinggal sesuai KTP,

Jumat, 22 Juli 2011

Membuat Menu Navigasi Dengan Sub Menu

Belajar Membuat Menu Navigasi Sub Menu pada Blogger Blogspot.

Bagi kamu yang penasaran bagaimana cara membuat menu navigasi dengan sub menu,bisa ikuti langkah berikkut ini.

Langkah dan Cara Membuat Menu Navigasi dengan Sub Menu Untuk Blogger



  • Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

    Menu Navigasi Sub Menu.
    Gb.1

  • Selanjutnya pilih tab Edit Html (Gb.2).

    Cara Membuat Menu Navigasi Horizontal dengan Sub Menu.
    Gb.2

  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

    Menu Navigasi Css SubMenu.
    Gb.3

  • Setelah itu carilah kode seperti ini ]]></b:skin> (Gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tersebut.

    #NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; } #nav li a:hover, #nav li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #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:hover, #nav li.sfhover { position: static; }
  • Setelah itu Simpan Templates.
  • Sekarang giliran kita menentukan dimana tempat menu navigasi submenu ini akan kita letakkan.
  • Pilih Tab Rancangan / Tata Letak pada Dashboard blog anda,seperti (Gb.1),selanjutnya klik tulisan 'Add New Widget / Tambah Gadget'(Gb.4),dan pilihlah Html / Javascript (Gb.5)

    Menu Navigasi Dengan Sub Menu Blogger.
    Gb.4

    Cara membuat menu navigasi horizontal dengan sub menu vertikel.
    Gb.5

  • Setelah itu letakkan kode berikut pada widget HTML / Javascript tersebut.

    <div class='menuhorisontal'>
    <ul id='nav'>

    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
    <ul>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'></ul> </li>

    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>

    <li><a href='http://tulis_alamat_url_tujuan'>Utama Ganti Sesuai Keinginan</a>
    <ul>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    </ul> </li>
    <li><a href='http://tulis_alamat_url_tujuan'>Ganti Sesuai Keinginan</a> </li>
    </ul>
    </div>

  • Lalu simpan,selesai dan lihat hasilnya :D

** Untuk http://tulis_alamat_url_tujuan gantilah sesuai tujuan kamu kemana link akan diarahkan,misal;
http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html dan tulisan Ganti Sesuai Keinginan gantilah denga keterangannya,misal dengan keterangan Membuat Navigasi Css dengan Sub Menu,maka dalam penulisannya;
<li><a href='http://pelajaran-blog.blogspot.com/2009/03/membuat-menu-navigasi-css-di-element.html'>Membuat Navigasi Css dengan Sub Menu</a> </li>

Membuat Teks Berjalan di Menu Bar

Selain membuat teks berjalan di blog, anda juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.


Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

Cara Membuat Menu Dropdown Pada Blogger

Dropdown menu adalah menu yang berisi sekumpulan teks atau link yang disingkat menjadi sebuah menu tunggal.

Contoh tampilannya seperti ini:



Isinya hanya akan tampil jika anda mengklik pada menu tersebut sehingga bisa hemat ruangan blog. Cara ini bisa dijadikan sebagai alternatif blogroll atau kebutuhan lainnya.

Cara Membuat Teks Dan Link Berkedip

Apakah anda pernah melihat teks berkedip seperti ini?


Teks atau link anda

Dan apakah anda tertarik untuk memasangnya di blog Anda? Kalau iya, silahkan ikuti tutorial dibawah ini.

Untuk membuat teks dan link berkedip caranya sangat mudah, cukup tambahkan tag <blink> dan </blink> diantara teks atau link yang ingin Anda buat berkedip. Selesai.. Sebagai contoh, saya menuliskan kode

<blink>membuat teks dan link berkedip</blink>
Maka hasilnya menjadi seperti ini


membuat teks dan link berkedip

Dan
<blink><a href="http://mahardikabercerita.blogspot.com/" target="_blank">Membuat Teks Berkedip</a></blink>
Maka hasilnya:


Membuat Teks Berkedip

Catatan:
Ganti tulisan berwarna biru dengan alamat link anda dan tulisan yang dicetak tebal dengan teks yang ingin anda tampilkan

Agar lebih unik dan menarik, anda juga bisa memberikan sedikit atribut pada teksnya contohnya seperti tulisan Welcome to my blog diatas. Property yang saya gunakan pada tulisan Welcome to my blog adalah

<blink style="font-weight: bold; font-family: forte; font-size: 18px; ">Teks atau link anda</blink>

Silahkan ganti jenis font pada font-family, ukuran font pada font-size dan warna font sesuai dengan selera anda. Untuk font-family anda bisa menggunakan semua jenis font yang tersimpan pada komputer anda. Masukkan nama font dengan lengkap maka font tersebut akan muncul.

Selamat mencoba.. 

Membuat Link Terbuka Pada Halaman Baru

Pada umumnya, jika kita membuat sebuah link pada blog. Link tersebut akan terbuka pada halaman yang sama. Nah ini tentu akan merugikan kita sebagai pemilik blog karena jika pengunjung mengklik link tersebut maka ia akan meninggalkan blog kita dan menuju ke alamat yang kita rujuk.

Anda tentu tidak maukan pengunjung meninggalkan blog anda? Nah untuk mengatasi masalah tersebut anda bisa membuat link terbuka pada halaman baru.

Cara Membuat Text Area dengan Fasilitas Select All

Text area adalah sebuah perintah HTML yang berfungsi untuk membuat kotak yang contohnya seperti dibawah ini:


Cara Membuat Efek Marquee Untuk Link

Sebenarnya caranya sama saja dengan teks, bedanya adalah mengganti teksnya dengan kode link saja. Nah bagi yang masih bingung silahkan ikuti cara berikut ini.

Sebagai contoh anda ingin membuat link bergerak keatas scara kontinu seperti

Membuat Efek Marquee atau Teks Berjalan

Ada beberapa efek marquee yang dapat kita buat seperti: teks bergerak kesatu arah, bergerak bolak balik, bergerak keatas, bergerak sekali saja, dan lain-lain.

Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.

Beberapa attributes yang sering digunakan dalam marquee yaitu:

1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :

Memasang Jam Pada Blog

Jam selain berfungsi sebagai penunjuk waktu juga bisa dijadikan sebagai aksesoris bagi blog. Dengan memasang jam, blog kita akan terlihat lebih hidup dan menarik.

Bagi Anda yang lebih mengutamakan konten daripada tampilan lebih baik tidak usah memasangnya karena akan memperlambat loading page pada blog Anda. Tapi bila tidak terlalu mempermasalahkan loading blog maka tidak ada salahnya untuk memasang aksesoris ini.

Memasang Feedjit Pada Blogger

Mungkin Anda sudah sering melihat tampilan widget Feedjit di blog. Karena saat ini sudah banyak template baru yang dilengkapi dengan widget ini.

Feedjit merupakan situs yang menyediakan layanan real time traffic widget bagi pengguna blog. Dengan memasang widget ini anda dapat mengetahui dari mana asal pengunjung, bagaimana mereka mengunjungi blog anda (melalui search engine, blog direktori, facebook, atau lainnya) dan kapan mereka datang serta meninggalkan blog anda. Semua data tersebut tercantum secara lengkap dalam widget feedjit sehingga anda dapat mengetahui aktivitas pengunjung dalam blog anda.

Memasang Foto di Profile Blogger

Menampilkan foto di website atau blog merupakan suatu cara untuk menunjukkan identitas kita kepada pengunjung. Tujuannya supaya semakin banyak yang mengenal kita.

Rabu, 20 Juli 2011

Cara Mendaftar di Therich PTC.com (klik dapet dollar)

Nih dia nih satu lagi situs yang bagi-bagi duit atau dollar gratis namanya therich ptc. situs ini juga merupakan salah satu bisnis online yang juga diminati banyak orang karena kemudahannya & memiliki resiko yang kecil. cara kerjanya cukup mudah kita hanya disuruh melihat atau meriview link iklan yang diberikan setiap 24 jam sekali.
Disitus tersebut setiap link yang kita buka akan dibayar $5-$10 dan dalam sehari hanya ada 5 link iklan yang harus kita klik, berarti kita bisa meraih kira-kira $25 - $50 sehari 

Membuat Judul Blog Bergerak Dari Kanan ke Kiri

Untuk memperindah penampilan halaman blog anda, tidak ada salahnya jika anda juga mengikuti trik berikut ini, yaitu cara membuat judul blog bisa bergerak. Untuk itu silahkan ikuti langkah-langkah berikut ini :

Membuat Ucapan Selamat Datang Saat Blog di Buka

Kesengsem juga neh sama sambutan blog salah satu sahabat saya, kayanya sopan banggets waktu saya mau baca-baca sambil mencari insipirasi buat blog saya. Akhirnya, tanpa rasa ragu dan malu bertanya juga neh sama kawan, cara buatnya

Cara Membuat Kotak Scroll & Marquee

Nah, ni dia neh, salah satu cara untuk menghemat ruangan dalam blog kita, skalian juga membuat tampilannya juga makin cakep. Itu menurut saya :D. Kotak ini dapat kita isi dengan daftar dari postingan atau daftar dari link para sobat ataupun daftar dari yang lainnya.

Membuat widget ShoutBox (chat box)

Shoutbox adalah sebuah widget yang berfungsi untuk mengirim pesan-pesan singkat seperti ucapan selamat, perkenalan, pemberitahuan dan lain-lain kepada pemilik blog atau pengunjung lainnya.

Shoutbox ini biasanya terletak dihalaman depan blog atau website. Dengan shoutbox, pengunjung bisa dengan mudah memberikan komentar dan berkomunikasi secara langsung dengan pemilik maupun pengunjung lain secara bersamaan.

Shoutbox adalah sebuah layanan yang sangat interaktif yang dapat menjalin hubungan antar sesama blogger. Jika Anda tertarik untuk memilikinya. Silahkan ikuti cara-cara dibawah ini:

Cara membuat read more/baca selengkapnya

Ini dia neh tutorial buat mengaplikasikan kode readmore pada blog, sebelumnya apa seh fungsi dari read more ini untuk blog. Kalau bagi pemula seperti saya sih, pasti terngiang juga pertanyaan yang seperti itu.

Nah jawabannya, kalau kita memosting artikel yang terbaru, pastinya dong akan tampil dihalaman depan dari blog kita, nah kalau postingan kita itu panjang, tentunya akan memakan banyak halaman depan dari blog kita tersebut, nah disini dia fungsinya si read more untuk menghemat halaman depan kita, dengan hanya menampilkan beberapa teks, atau bisa juga kita sebut sebagai abstraksi dari isi dari postingan kita tersebut..

Cara Memposting Artikel Pada Blog

Setelah Anda memiliki blog diblogger. Langkah selanjutnya yang harus Anda lakukan adalah memposting artikel.

Nah untuk memposting. Caranya sangat mudah. Silahkan

Panduan Membuat Blog

Bagi sobat yang ingin mencoba untuk membuat blog, khususnya pemula seperti saya :D. Saya menyarankan sobat untuk membuat blog dari bloger.com, karena ini merupakan aplikasi layanan dari google, sehingga blog yang sobat buat akan lebih cepat dan mudah terdaftar dimesin pencari google. Dan hanya dengan 3 step

Membuat Email di Gmail (Google email)

Ini dia nih syarat yang paling utama untuk membuat sebuah blog di blogger.com, karena blogger.com adalah salah satu situs milik google maka untuk bisa mengaksesnya kita harus punya email di google

Selasa, 19 Juli 2011

Pengenalan Blog

Blog..apa itu blog?? sebenarnya pengertian blog itu bermacam-macam secara definisi blog itu seperti sebuah jurnal yang tersedia didalam web. Blog juga menggunakan gaya dan bahasa penyampaian, serta dokumentasi. Seringkali blog lebih fokus ke salah satu topik, misalnya

Popular Posts