MAINTENANCE | Uji Kelayakan Post

7/27/2013 09:40:00 PM

Cara Buat/Pasang Burung Twitter Terbang Di Blogspot

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Memasang Burung Twitter Terbang di Blogspot

Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger

Klik Layout > Add Gadget > Html/Javascript
Copy paste kode di bawah ini ke kolom Html/javascript

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL8IM6NY4XdCdjhDCcmEMPtqubX6ouOk7RljZikhwJ1__A67iusSjDb8ct2dunT8alEs6Wq88A0gDqPS99WAwwChoYQ5DPbIXrplGQHrLJCfLs6jRgN4L0Rzv6_L2Z0vkcua8uuteM8d0/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-ciddrRiIPw8vF796i9IV-sEButAIxttCPrwfDmhvertgMr5HCijA7cuPS_yUcmPbc4cyIXv6Rx8O36k7SmvvA0mOzf1ERZhIdW_przekwsZTpwCrtiojJRc-FLnonUWr_kywncVQ1E/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87yJ-_ZBJMgHBb_4qTX30ZpDl4S7ykzCKtMuE-sm4KmQMyobN2Ey8pG-oK07rBIhYAIb6tr6-bnbdJYBu6f7UbihVcZ0CUxPna6xJqYiay0lze-XmaIvzbJCTqHQ35cG9tQQw_1pwl2A/s1600/black+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-YxduJFVlln_69ug4nCYQ945nmn_YlNTjezqWGJ_9CeYiMzwql8zc6gHkCSE5HrLpOuec6bJ2Yk7xyE5m6GaVOsSZWtol-BD_Zs4Hi-EzI1G0D9Lgy2hGS0LmCH1R0Km1z5pge-aw2Dc/s1600/Blue+bird.png

Warna Coklat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEz7YuOyCoB203-TraeRpqWLjQoikk9iAH28zbo3FbgtMX6r-IfueEQLw80QKy6Uxo2O4Zle5K7I8arD4_A82DibTT4DISJUcFAGQaIRvqUAwshNjA4jWk4tcRd6yLKovEFRu2J7182bs/s1600/brown+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHsBqN_aSkI9IBHUiz864c5eb7W44grQ_bb6P-YPPOb7JrZdR3D51UuVl4gvdlHDk8fADt9j2pE3mkIpos0UM7vKUJEV9UXrOZ-dJY3paJNd84QWQGtQ6363Ft0ElwiJKGyIyZ44a595g/s1600/Green+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtP_4IEu8gJYiJ0cJeEJfdjWj-0Xn9D1lnxLgNc7CObnq4FNplI8I4xIEYSm406_rpv7Kr71DPpo8xzZ3IbrurXZ6uJQLBm2L8RRbVKOL6B8JeExwhbLbAvucJ84vrsRUkyj94cD7-5DY/s1600/purple+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhftFCxAqOwmc2JpvtDL6cD7-0wT_6WOPojDLmflfAOIy47hIDJ90_xxsHOrBuKk6Mz0bEsvJoNdp4HsEdwgzw16crNTM6DRK0hMtQ3dP0c1zDsdLssRSRkc_hFQCH0eyNeFR2qMgQf3eg/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNayLAOWSaZ4DZyYDOeWcYjE1WDC8vtA5NyLn-UcTcAVX6lIy8dWipnt7utzGU3hHVA8i5M0B9QqS5CmkPD8J8UgZ25IROBOgQtyWSB3KWfWqxaAnYxkJ9DqYnjm5nHdoBh3YasAZglRc/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

7/19/2013 07:32:00 AM

Cara Mudah Mengetahui IP Address Milik Orang Lain

Selamat jumpa kembali dengan saya kali ini saya akan membahas bagaimana cara kita bisa mengetahui atau mengidentifikasi IP Address orang lain? dan bagaimana cara mengetahui IP Address milik sendiri untuk caranya silahkan baca artikel tentang Cara Mengetahui Alamat IP Komputer Sendiri , dan karena kita tahu mengetahui alamat IP orang lain adalah lumayan sulit, tetapi sebenarnya ada cara yang lebih simpel dan alternatif dan sedikit membutuhkan tekhnik, apa yang harus anda lakukan, yang harus anda lakukan sangatlah mudah mudah tetapi susah untuk caranya silahkan simak berikut ini:

1.Langkah pertama yang harus anda lakukan adalah dengan mengunjngi situs berikut http://www.whatstheirip.com lalu anda akan dibawa pada tampilan berikut ini; lalu masukan email anda ika sudah yakin dan tepat emailnya lalu klik Get Link, lalu tunggu email konfirmasinya ke email yang anda daftarkan.

2.Pada langkah yang kedua setelah anda mendapatkan email balasannya kira-kira isi emailnya seperti berikut ini, saya kira tidak perlu terlalu dijelaskan kembali karena ddalam isi pesan tersebut sudah dijelaskan cara penggunaannya.

3.Pada tahap tiga yaitu anda harus bisa mengirimkan link yang ada didalam pesan tersebut ke calon korban, anda bisa mengirimkannya antar email agar sikorban mau mengklik link yang anda berikan, tentu saja gunakan bahasa yang benar-benar bisa meyakinkan si calon korban, jika s korban mengklik link yang anda umpankan maka secara otomatis anda akan mendapatkan email balasannya beserta IP Address Korban tersebut, oke saya kira sudah bisa dipahami. saran saya cara ini gunakan dalam hal-hal yang wajar saja dan jadikan pembelajaran jika sewaktu-waktu anda mendapatkan hal yang serupa.

Oke itulah tips sederhana kali ini dari saya tentang Cara Mudah Mengetahui IP Address Milik Orang Lain semoga tips ini bisa diambil hikmahnya oleh anda, atas kunjungan dan perhatiannya saya selaku penulis mengucapkan terima kasih.

7/19/2013 07:30:00 AM

Cara Mematikan Komputer Milik Orang Lain Dari Jarak Jauh

Selamat malam selamat berjumpa kembali dengan saya admin dari blog yang serba sederhana ini dan pada kesempatan kali ini saya akan berbagi tips kembali seputar dunia komputer untuk tips-tips seputar SEO dan blog ditunggu saja ya di artikel berikutnya, dan pada artikel sebelumnya saya sudah berbagi tips seputar Cara Memperbaiki Komputer Hang atau Restart Sendiri dan Cara Mengetahui Spesifikasi Pada Komputer dan pada kali ini saya hanya akan share tentang cara termudah menshutdown atau mematikan komputer orang lain dari tempat yang berbeda, untuk cara-caranya silahkan simak berikut ini:

1.Pada langkah pertama yang harus anda lakukan adalah silahkan klik start > menu RUN > lalu tuliskan cmd dan klik OK dan untuk pengguna windows 7 tahan logo windows+R maka akan muncul menu RUN seperti pada gambar dibawah ini:

Cara+Mematikan+Komputer+Orang+Lain+Dari+Jarak+Jauh+1

2.Setelah muncul windows system 32 cmd'nya lalu tuliskan shutdown -i agar lebih jelasnya silahkan perhatikan gambar dibawah ini, saya harap ketika anda melakukan tutorial ini komputer/PC anda dalam keadaan terkoneksi ke internet. jika anda sudah menuliskan shutdown -i silahkan klik enter.

Cara+Mematikan+Komputer+Orang+Lain+Dari+Jarak+Jauh+2

3.Pada bagian yang ketiga dimana jika anda melakukan cara yang kedua diatas sudah tepat seharusnya muncul seperti pada gambar dibawah ini, silahkan masukan IP Address korban yang komputernya akan i shutdown ingat...!!!! tutorial ini akan berjalan jika komputer korban terkoneksi ke internet, pada menu computer klik add lalu masukan IP Address korban untuk mendapatkan IP Address Korban anda bisa baca artikel tentang Cara Mudah Mengetahui IP Address Milik Orang Lain lalu pada what do you want these computer silahkan pilih dengan keinginan anda apakah komputer korban akan anda shutdown/dimatikan atau di restart, lalu silahkan isi waktu Shutdownnya apakah anda ingin menyetingnya 50 detik 40 detik 30 detik 1 jam 30 menit dan kebetulan tutorial ini menggunakan waktu 10 detik saja agar tidak terlalu lama, lalu isikan pesan yang akan anda tampilkan misal "maaf komputer anda akan dimatikan dalam waktu 10 detik" silahkan isi pesannya tergantung anda. jika sudah beres klik ok, dan tinggal tungg saja hasilnya, nah biar afdol trinya coba anda main internetan berdua sama teman anda untuk melakukan ujicobanya, kan jika sama teman IP Address'nya akan lebih mudah didapatkan.

Cara+Mematikan+Komputer+Orang+Lain+Dari+Jarak+Jauh+4

Oke itulah tips kali ini tentang Cara Mematikan Komputer Milik Orang Lain Dari Jarak Jauh semoga tips ini bisa diambil pelajarannya agar anda bisa lebih waspada, bagaimanpun cara ini kurang baik dilakukan kebetulan saya sharekan mungkin anda prnah mengalami hal demikian, atas kunjungan dan perhatiannya saya selaku admin blog ini mengucapkan terima kasih. Cara+Mematikan+Komputer+Orang+Lain+Dari+Jarak+Jauh+1

7/16/2013 07:46:00 AM

Cara Memasang Iklan Didalam Postingan Secara Otomatis

Agar mendapatkan hasil yang memuaskan dari Iklan PPC, membutuhkan kecermatan untuk menempatkan Iklan. Anda bisa menempatkan Iklan di atas postingan atau diawal postingan atau ditengah atau dibawah postingan.

Berikut Cara Memasang Iklan Didalam Postingan Secara Otomatis:

Cara Memasang Iklan Di Awal Postingan

1. Login ke Blogger

2. Klik Template

3. Klik Edit HTML

4. Cari kode <data:post.body/> menggunakan CTRL+F

5. Lalu letakkan kode dibawah ini, diatas kode <data:post.body/>:

<b:if cond='data:blog.pageType == "item"'> <div style='width: 400px;'> <div style='clear: right; float: left; margin-right: 5px;margin-top: 5px;'>  </div></div> </b:if>

Note:

Jika ditemukan kode <data:post.body/> lebih dari satu coba kode yang pertama, kalau tidak berhasil coba yang kedua. Width: 400px: disesuaikan dengan luas main post template. : Ganti dengan kode Iklan Anda yang sudah di parse sebelumnya.

6. Klik Save, dan Selesai.

Cara Memasang Iklan Di Tengah Postingan

1. Login ke Blogger

2. Klik Template

3. Klik Edit HTML

4. Cari kode <data:post.body/> menggunakan CTRL+F

5. Lalu ganti kode <data:post.body/> dengan kode dibawah ini:

<div expr:id='"iklan1" + data:post.id'></div> <div style="clear:both; margin:10px 0">  </div> <div expr:id='"iklan2" + data:post.id'> <data:post.body/> </div> <script type="text/javascript"> var obj0=document.getElementById("iklan1<data:post.id/>"); var obj1=document.getElementById("iklan2<data:post.id/>");  var s=obj1.innerHTML; var t=s.substr(0,s.length/2); var r=t.lastIndexOf(" "); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);} </script>

6. Klik Save, dan Selesai.

Cara Memasang Iklan Di Bawah Postingan

1. Login ke Blogger

2. Klik Template

3. Klik Edit HTML

4. Cari kode <data:post.body/> menggunakan CTRL+F

5. Lalu letakkan kode berikut ini, dibawah kode <data:post.body/>:

<b:if cond='data:blog.pageType == "item"'> <p> Letakkan kode iklan sudah sobat parse disini </p> </b:if>

6, Klik Save, dan Selesai.

7/14/2013 09:56:00 AM

Iklan di Samping Isi Postingan Blog

Bagaimana cara menampilkan iklan di samping postingan blog berbasis blogger (blogspot.com)? Bagaimana cara menyimpan iklan PPC seperti Google Adsense, Kliksaya atau kumpulblogger pada blog berbasis blogger.com dipinggir isi tulisan blog? Mudah saja, berikut tips cara mudah menampilkan iklan di samping isi postingan blog Anda.

1. Masuk ke dashboard blog Anda.
2. Klik design (Rancangan) >Edit HTML
3. Centang "Expand Widget Templates"
4. Cari tag html berikut <data:post.body> atau <data:post.body/> jika terdapat lebih dari satu maka pilih yang pertama atau yang paling atas.
5. Simpan tag html berikut di atas <data:post.body>

<div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>

</div>

Sehingga menjadi seperti berikut:

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>

</div>
<data:post.body/>

Atau seperti berikut:

<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
<div style='float:left;width:300px;height:250px;padding:0 0px 0px 0;'>

</div>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>

6. Selesai. Simpan perubahan template Anda.

Selamat mencoba!

Catatan: warna hijau pada angka adalah ukuran iklan Anda. Warna merah merupakan script iklan Anda. Replace  dengan script iklan Anda. Warna orange menunjukkan posisi iklan Anda. Left (kiri) right (kanan).

7/13/2013 08:46:00 AM

CSS LIST YANG KUCARI

Seperti halnya HTML List, fitur css List juga berfungsi untuk membuat sebuah List atau tanda pada daftar. Dalam hal ini ada tiga macam bentuk yang bisa kita gunakan yaitu :

Ordered lists adalah daftar item yang ditandai dengan bentuk lingkaran kecil ataupun kotak kecil.

Unordered lists adalah daftar item yang ditandai dengan bentuk angka atau huruf.

Image lists adalah daftar item yang ditandai dengan bentuk gambar.

1. Ordered lists

Berikut hasilnya :

Bentuk lingkaran
Lingkaran kecil
Lingkaran blok

Bentuk lingkaran
Lingkaran kecil
Lingkaran lubang

Bentuk kotak
Kotak kecil
Kotak blok

2. Unordered

Berikut hasilnya :

Bentuk angka
Bentuk angka
Bentuk angka

Bentuk angka dg Nol didepannya
Bentuk angka dg Nol didepannya
Bentuk angka dg Nol didepannya

Bentuk huruf romawi kecil
Bentuk huruf romawi kecil
Bentuk huruf romawi kecil

Bentuk huruf romawi besar
Bentuk huruf romawi besar
Bentuk huruf romawi besar

Bentuk huruf abjad kecil
Bentuk huruf abjad kecil
Bentuk huruf abjad kecil

Bentuk huruf abjad besar
Bentuk huruf abjad besar
Bentuk huruf abjad besar

Bentuk simbol 1
Bentuk simbol 1
Bentuk simbol 1

Bentuk simbol 2
Bentuk simbol 2
Bentuk simbol 2

Bentuk simbol 3
Bentuk simbol 3
Bentuk simbol 3

3. Image lists

ul.o {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgznFy5C271xYrn9_-pHb8drrcH4x23NL_ESDSczWl3g2KbP3N0T-1LBb2UVLApWD5Um_CD8SGLgheT3bGMYKvzdXqnbmdyLegk_BAdRfMp2cvRpZezBCjEqL4vHIWKm3o5jXWQaij2EmDo/s104/List+1.jpg');}

ul.p {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6P5_CxwMSHkYCFgCNURWillwH52kSTi2FhRrsKeb-FoK7lfTomav7XSiHNGnH6QC8xfjbxOQYAlCHj6tbhiYiIipk_Nbo6kNno6N_ghV-t7qVQ2kdL9z7fZAJh9Y9GFN90xpu2kTHZMrR/s104/List+2.jpg');}

ul.q {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWdtJs2u1MLHcAliJHHwPWt1bVDs-5IvUgobii6aM9klimM9yGDn-emlTMQDIHBglFxCMMUixmoMPSgX6Yocl2khZibmzKhKVSNkj3sTfUUZl8sPv3dTWfG2Hcj3YCRT0z3cVJ0ZMS7jCB/s104/List+3.jpg');}

ul.r {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLmZtTKpnwuRi9J-qrH8cw3CLCFjp-zkRl8ooyezFtwjOO1AEhMsz0HM1LddoIU_be4JI6xn_8G42S4wOtPvgDgFRs0KeMQQzmuISEiUWIRUyJRSh9mBHN5bpJvUvfJihqbdMLwo0uHLIX/s104/List+4.jpg');}

ul.s {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiOkE_VKHrpBa_lUcFoQO1aOmaPAIVEoYB1CUSQ6lHnl_CsSP2O7SWq7bmDPklLy8IIEsrNOmMsTJhCp-MkvG6oyaS6uue_f6wRfgMzv42pmsFCZHFsj1QhJlFNj0hic9hnRXM6o_2mpT7/s104/List+5.jpg');}

ul.t {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqy2I2tpXfA7oY2VxR8joXO8inWOW73Vfqp9bfC1P9dXBM2Rj-TamFESIq3mTlsSA2BXq-Od93VjWeSWaKSm_SW1liMpqUSzyGv4U0nWANfPMnY8htvXclUchWRRBoopvnTNFz78ocpWlZ/s104/List+6.jpg');}

</style>

<ul class="o">
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
<li>Bentuk gambar 1</li>
</ul>

<ul class="p">
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
<li>Bentuk gambar 2</li>
</ul>

<ul class="q">
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
<li>Bentuk gambar 3</li>
</ul>

<ul class="r">
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
<li>Bentuk gambar 4</li>
</ul>

<ul class="s">
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
<li>Bentuk gambar 5</li>
</ul>

<ul class="t">
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
<li>Bentuk gambar 6</li>
</ul>

Berikut hasilnya :

Bentuk gambar 1
Bentuk gambar 1
Bentuk gambar 1

Bentuk gambar 2
Bentuk gambar 2
Bentuk gambar 2

Bentuk gambar 3
Bentuk gambar 3
Bentuk gambar 3

Bentuk gambar 4
Bentuk gambar 4
Bentuk gambar 4

Bentuk gambar 5
Bentuk gambar 5
Bentuk gambar 5

Bentuk gambar 6
Bentuk gambar 6
Bentuk gambar 6

Catatan :

Silahkan anda ganti Ulr gambar List dengan Ulr gambar List milik anda.

Untuk penerapan, anda bisa pilih salah satu bentuk yang disukai dan langsung ditempatkan pada posting bisa, langsung pada gadget juga bisa. Jadi bila salah satu yg dipakai (misal saya pakai List yg paling bawah), maka kode yg dipakai jadi seperti ini :

</style>

<li>Bentuk gambar 6</li>

</ul>

Catatan : Huruf "t" yg berwarna biru merupakan ID, anda bisa ganti ID seperti huruf "t" diatas dgn nama bebas asal keduannya sama.

Bila ditambahkan Link, maka jadinya seperti berikut :

</style>

<li><a href="http://cyberjavanetwork7.blogspot.com/search/label/css list">Label CSS List</a></li>

<li><a href="http://cyberjavanetwork7.blogspot.com/search/label/css">Label CSS</a></li>

</ul>

Catatan : Jangan lupa ganti ukuran gambar berwarna pink (utk blogger biasanya s104 atau h104), dengan ukuran lebih kesil misal: "15px" , sehingga menjadi s15 atau h15.

List pertama adalah contoh Link langsung keartikel
List kedua adalah contoh Link Label CSS List
List ketiga adalah contoh Link Label CSS

Berikut hasilnya :

Ok...., 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.

6/25/2013 07:11:00 AM

Cara membuat link senggol

Buat sobat blogger yang blognya suka menampilkan banyak fariasi, link senggol ini bisa jadi alternatif untuk menambah tampilan blog anda. Saya sebut link senggol sebab link ini memiliki efek slide, yaitu ketika pointer mouse diarahkan diatas link, maka link tersebut akan bergeser seperti disenggol....hehehee....., dan akan terlihat bergoyang bila diarea link pointer mouse diarahkan keatas dan kebawah. Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

$(document).ready(function()
{
 slide("#sliding-navigation", 25, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
 // creates the target paths
 var list_elements = navigation_id + " li.sliding-element";
 var link_elements = list_elements + " a";
 
 // initiates the timer used for the sliding animation
 var timer = 0;
 
 // creates the slide animation for all list elements
 $(list_elements).each(function(i)
 {
  // margin left = - ([width of element] + [total vertical padding of element])
  $(this).css("margin-left","-180px");
  // updates timer
  timer = (timer*multiplier + time);
  $(this).animate({ marginLeft: "0" }, timer);
  $(this).animate({ marginLeft: "15px" }, timer);
  $(this).animate({ marginLeft: "0" }, timer);
 });

 // creates the hover-slide effect for all link elements   
 $(link_elements).each(function(i)
 {
  $(this).hover(
  function()
  {
   $(this).animate({ paddingLeft: pad_out }, 150);
  },  
  function()
  {
   $(this).animate({ paddingLeft: pad_in }, 150);
  });
 });
}

//]]>
</script>

<style type="text/css">
ul.listpanah {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqy2I2tpXfA7oY2VxR8joXO8inWOW73Vfqp9bfC1P9dXBM2Rj-TamFESIq3mTlsSA2BXq-Od93VjWeSWaKSm_SW1liMpqUSzyGv4U0nWANfPMnY8htvXclUchWRRBoopvnTNFz78ocpWlZ/s12/List+6.jpg');}

a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#669CFF;text-decoration:none;}
</style>

Langkah selanjutnya anda tinggal menampilkan Link senggol tersebut pada sidebar blog anda. Berarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

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

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

<div class  id="sliding-navigation">
  
<ul class="listpanah">
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   1</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL  2</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   3</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   4</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   5</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   6</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   7</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   8</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   9</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL 10</a></li>
</ul>
</div>

Selamat mencoba dan Semoga bermanfaat....

6/22/2013 08:04:00 AM

CSS Memakai Background

Fitur dari css Background berfungsi untuk memberi efek latar belakang suatu elemen. Beberapa properti dan kelebihan dari fitur ini diantaranya kita bisa memberi efek latar belakang seperti; Latar belakang warna, Latar belakang gambar, mengulang Latar belakang gambar secara vertikal maupun horisontal, Mengatur posisi Latar belakang gambar. Dengan fitur css ini, kita bisa gunakan untuk membuat sebuah web atau sekedar untuk memberi efek Background pada postingan artikel pada blog. OK..., mari kita lihat contohnya satu-persatu : 1. Latar belakang warna

Berikut hasilnya :
JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang warna

2. Latar belakang gambar

Berikut hasilnya :
JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar

3. Mengulang Latar belakang gambar secara horisontal

Berikut hasilnya :
JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang diulang secara horisontal

4. Mengatur posisi Latar belakang gambar Dengan properti css ini kita bisa membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak yang ada disebelah gambar.

<style type="text/css">
div.background
{
margin-left:20px;
background:#ffffff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_YsKgMpzIWN-9SMlJUQQbtOmaP56oDF-JA4H6uQvWzjeijElfJ4XvpbJ93xrtW800pqWLeQrJyFeM9w5Wd_ICEckMAVSZz3OBYHtpdo7M-SoZomVzlymQioV_DnE6IueTnhulNoC_xDXK/s200/kupu.jpg') no-repeat top left;
}
div.container
{
text-align:center;
}
div.center_div
{
border-style:solid;
border-color:#E6E6E6;
margin-left:200px;
margin-right:auto;
width:50%;
background-color:#E0E0B8;
text-align:left;
padding:10px;
}
</style>

<div class="background">
<div class="container">
<div class="center_div">
<h2>
JUDUL TEKS</h2>
Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak
</div>
</div>
</div>

Berikut hasilnya :
JUDUL TEKS

Ini adalah contoh bila kita membuat artikel dengan memberikan efek latar belakang gambar yang bisa kita atur posisi penempatan gambar baik di sebelah kiri atau disebelah kanan, dan kita bisa menempatkan artikel atau posting dalam sebuah kotak

Catatan : Ganti Ulr image berwarna biru dengan Ulr tempat anda menyimpan gambar, dan tulisan berwarna merah adalah nilai ukuran besar dan kecilnya gambar. nilai width:40% adalah lebar dari kotak Silahkan anda bisa coba otak atik sesuai selera anda. Ok...., 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.

6/13/2013 09:35:00 AM

Kode warna di blog

Code warna ini sangatlah penting bagi seorang blogger yang sedang membuat blog atau bagi blog yang mempunyai niche tutorial blog sama seperti blog saya ini. Kode warna ini juga dapat menambah trafik blog, jika ada seseorang yang sedang mencari kode warna di Seacrh google atau lainnya.

Type Box Color 1

Type Box Color 2

Type Box Color 3

Nah sekarang kode warna sudah hadir di blog anda. Selamat mencoba dan mudah-mudahan bermanfaat.

6/10/2013 05:53:00 AM

Belajar dan Memahami Dasar-dasar Code CSS

Cascading Style Sheet atau yang disingkat CSS memungkinkan untuk mendesain (style) tampilan dokumen (Php dan HTML) dengan memisahkan isi dari dokumen HTML dengan kode untuk menampilkannya (CSS). Di dalam dunia desain web, layout atau mengatur letak web, format huruf, dan lain nya yang ada dalam sebuah web menjadi bagian yang amat penting bahkan bisa jadi yang paling lama dibanding dengan bagain desain web lainnya. Karena jika kita membua layout yang salah, maka web kita juga akan salah diterjemahkan oleh browser. Hal itu juga bisa disebabkan karena setiap browser memilliki dukungan bahasa(CSS) yang berbeda dan tentunya default dari browsernya sendiri yang berbeda-beda. Browser yang paling rewel soal layout css adalah IE karena kurang dukungannya terhadap CSS.

Jika kita memiliki banyak file HTML, kita hanya perlu satu file CSS, sehingga ketika kita mengganti jenis huruf pada file CSS maka semua file HTML yang berhubungan pada file CSS tersebut akan berubah. CSS distandarisasi oleh W3C (World Wide Web Consortium). CSS dapat dipasang pada dikumen HTML yang telah jadi. Dalam melayout sebuah web ada dua metode yang sering dipakai untuk membuat sebuah layout halaman web yaitu:

1. Metode Table
2. Metode Div

Manfaat dari CSS:

Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
Dapat berkolaborasi dengan JavaScript.
Digunakan dalam hampir semua web browser.

Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:

Header –> berisi tema web/ judul
Menu –> menu link web
Content –> isi dari web
Footer –> identitas/ copyright

Atribut ID

Ada dua cara penempatan elemen dalam web dengan CSS yaitu:

1. Position (Posisi)

Mengunakan properti position terdapat 4 cara:

Static –> posisi normal (default).
Relative –> posisi elemen tergantung dari elemen yang lain.
Absolute –> posisi elemen berpatokan pada jendela browser.
Fixed –> posisi elemen tetap walaupun digeser.

2. Float (Nempel)

Menggunakan properti float atau clear:

Float:left –> elemen akan menempel pada sebelah kiri elemen induk.
Float:right –> elemen akan menempel pada sebelah kanan elemen induk.
Clear:left –> elemen akan menempel pada sebelah kiri dan berada di bawah.
Clear:right –> elemen akan menempel pada sebelah kanan dan berada dibawah
Clear:both –> elemen akan berada pada posisi bawah elemen diatasnya.

Gambar dibawah ini adalah dasar-dasar dari pengaturan / format posisi dengan css:

Margin –> jarak/batas elemen dengan elemen lain

Border –> border/gari tepi elemen

Padding–> jarak elemen dengan isi elemen (elemen anak)

6/07/2013 07:31:00 PM

Auto Backlink Web/Blog Sendiri

Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini. Semoga sukses selalu buat kita semua..... Amiiin. Berikut saya berikan cara lebih gampang untuk membuat Backlink di blog anda, silahkan dicopas saja, untuk gambar disiapkan terlebih dahulu,isi dengan URL anda,dan nama blog anda, semoga bermanfaat.

Backlink Anda :

Cara Buat/Pasang Burung Twitter Terbang Di Blogspot

Warna Pilihan Burung Terbang Twitter

Cara Mudah Mengetahui IP Address Milik Orang Lain

Cara Mematikan Komputer Milik Orang Lain Dari Jarak Jauh

Cara Memasang Iklan Didalam Postingan Secara Otomatis

Iklan di Samping Isi Postingan Blog

CSS LIST YANG KUCARI

Cara membuat link senggol

CSS Memakai Background

Kode warna di blog

Belajar dan Memahami Dasar-dasar Code CSS

Atribut ID

1. Position (Posisi)

2. Float (Nempel)

Auto Backlink Web/Blog Sendiri

Best Comment

Popular Posts