Jendela Informasiku

Membuat Sliding Box

2012-08-04T00:25:00.000+07:00

Membuat Sliding box, code Scriptnya :

<script type="text/javascript" src="http://marewainfo.googlecode.com/files/slidboxordinary.js"></script>
<div style="position:fixed; width:342px; overflow:hidden; bottom:20px;
right:10px; display:none;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBa9-9xf3dY750aGaIn8lyp_ThWXtFNPQAspMcM5xAib-eU1I-bc40N2PducBOr-WsPGz6mOGjbwCbLCKIdqZRdwy5OxWOQ9xzImv4qlqY4NkYr-Jb_RvHGEDYg3qZGL9RJiLzKk4YNOP/s0/bo-bg-html.gif)
repeat; -moz-border-radius:15px; -webkit-border-radius:15px;
border-radius:15px; border:2px solid #111111;" id="fbslidebox">

<div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">

<a href="#" style="float:right; color:#999; padding:0 3px;
border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana, Geneva, sans-serif;" id="fbcloseslidebox">X</a>

<strong style="color:#66ad3d;">JUDUL</strong>
Diisi Sesuka Hati

</div></div>

<div style="-moz-border-radius: 12px 12px 12px 12px; background-color: #e6e6e6; border: 2px solid rgb(204, 204, 204); color: black; height: auto; margin: 10px 0px; padding: 10px; text-align: left; width: auto;">
Hasil CodeScript </div>

Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook

2012-08-01T22:58:00.002+07:00

Cara Membuat Postingan Terbaru Blog Otomatis menjadi Status Facebook - Cara agar postingan terakhir blog masuk di akun facebook - Setelah posting mengenai cara membuat fanpage di facebook dan cara membuat like box facebook di blog, kali ini saya akan bahas bagaimana kita bisa memanfaat keduanya untuk mendapatkan traffic tambahan untuk blog kita. Bagi anda yang suka ngeblog (blogger) dan juga online terutama dengan facebook, tentunya ingin juga posting blog terbaru langsung ter-update di facebook. Sekarang ini situs jejaring sosial seperti facebook sungguh luar biasa penggemarnya, hampir setiap orang online atau terkoneksi internet, website yang pertama kali dibuka biasanya adalah facebook.com - login ke account masing-masing dan update status atau baca-baca status orang lain, member komment, sampai-sampai status gak pentingpun rasanya ingin sekali dibagikan di facebook. Bagi para blogger sebagian besar menginginkan blognya rame di kunjungi orang, atau mungkin para pebisnis online yang menginginkan usaha onlinenya (toko online - nya) di serbu orang, pasti sangat menginginkan hal ini, dengan cara menampilkan informasi terbaru (update) dari blog/ web kita di situs jejaring social terutama facebook, dan ini sangat memungkinkan penambahan kunjungan ke blog/ web kita. Pada kesempatan yang sangat baik ini saya akan berbagi tutorial singkat tentang bagaimana cara membuat Posting Blog Terbaru Otomatis Update di Status Facebook kita. Sulitkan membuat postingan terbaru pada blog otomatis update di status facebook? Jawabannya silakan simak panduan (tutorial) Posting Blog Terbaru Otomatis Update di Status Facebook kita di bawah ini. Berikut cara agar postingan terakhir blog masuk di akun facebook:

Silahkan anda buka alamat https://twitterfeed.com/
Klik Register Now maka akan tampil gambar , silahkan anda isi email aktif anda, password untuk login ke twitterfeed, tulis kode yang tampak dan klik create account.
Setelah anda klik create account, selanjutnya anda masukan Feed Name (boleh anda tulis dengan nama blog anda), kemudian pada kolom Blog URL/ RSS Feed anda isi http://nama-blog-anda.blogspot.com/atom.xml
Tahap selanjutnya anda pilih situs jejaring sosial facebook.
Selanjutnya anda disuruh menghubungkan ke account facebook anda, akan ada jendela aktifasi, setelah anda klik izinkan maka account facebook anda akan masuk didalam kotak Authenticated account facebook.
Terakhir Anda klik Create Service, jika berhasil maka akan tampil “congrulation”.

Dan hasil akhirnya, setiap anda posting tulisan terbaru di blog anda, secara otomatis akan terupdate di status facebook anda. Semoga postingan kali ini bermanfaat.

Membuat Back To Top dengan Efek Smooth Scroll

2012-08-01T22:31:00.002+07:00

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2009/10/membuat-back-to-top-dengan-efek-jquery.html#ixzz22JD8SqQM
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih

Hasil CodeScript

Cara Membuat Link Blog Berwarna-Warni

2012-08-01T21:32:00.002+07:00

Sobat pasti sudah pernah melihat link berwarna warni pada blog. Ada berbagai warna yang ditampilkan link tersebut apabila cursor anda berada diatasnya. Kali ini kita akan membuat setiap link berwarna-warni pada blog anda. Javascript yang satu ini sangat mudah untuk diinstal karena anda tidak perlu mengotak atik template. Jika ingin tau caranya ikuti langkahnya dibawah ini:

1. Login ke Blogger

2. Masuk ke Rancangan --> Edit Laman

3. Tambahkan Gadjet lalu pilih HTML Javascript

4. Masukan kode berikut ini:

5. Simpan gadjet anda

Apabila script tersebut tidak bekerja itu disebabkan karena script tersebut tidak cocok pada css template. Untuk itu coba sobat hapus tag !important. Demikian trik dan tips untuk saat ini semoga bermanfaat.

Menambahkan Recent Posts Dan Recent Comments Dengan Javascript

2012-07-31T20:31:00.002+07:00

Dari halaman Dashboard blog kamu pilih Tata Letak (Layout).
Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
Setelah itu pilih HTML/JavaScript untuk ditambahkan, seperti nampak pada gambar berikut:

Kemudian masukkan script berikut dan ubah NamaBlogKamu dengan nama blog kamu sendiri:

Keterangan variabel:

numposts = 10; artinya 10 posting yang ditampilkan (maksimal 25 posting. Jika ingin menampilkan lebih dari 25, silahkan pelajari artikel ini).
showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
numchars = 100; artinya banyaknya karakter (huruf) untuk ringkasan posting yang ditampilkan adalah 100 huruf.
standardstyling = true; artinya menggunakan type standard.

Kode untuk Recent Comments:

Keterangan variabel:
var numcomments = 10; artinya 10 komentar yang ditampilkan.
var showcommentdate = true; artinya tanggal komentar ditampilkan.
var showposttitle = true; artinya menampilkan judul posting yang dikomentari.
var numchars = 100; artinya banyaknya karakter (huruf) komentar yang ditampilkan adalah 100 huruf.
jika Recent Comments kamu ingin menggunakan bullets,

Setelah memasukkan kode script dan melakukan editing variabel yang disesuaikan dengan keinginan kamu. Lakukan Preview (Pratinjau) untuk melihat hasilnya. Jika sudah OK, simpan hasil kerjaan kamu.

Nah, selesai dah. Selamat mencoba.....

Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar

2012-07-30T21:41:00.001+07:00

Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:

Login ke akun Blogger kamu.
Dari halaman Dasbor, klik Rancangan dan pilih Edit HTML.
Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
Beri tanda centrang pada Expand Template Widget.
Cari kode ]]></b:skin> lalu letakkan kode CSS berikut di atasnya:

/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {display:inline}

Dan letakkan script berikut di bawah kode ]]></b:skin> tadi:

Setelah itu carilah kode berikut pada widget-widget yang akan kamu sembunyikan:

Ganti kode tersebut dengan kode ini:

Kemudian pada kode berikut, yang ada di bawahnya:

Ganti dengan kode ini:

Simpan dan Lihat hasilnya

Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?

Catatan:
Untuk widget-widget berikutnya, ganti widget-spoiler1 menjadi widget-spoiler2, widget-spoiler3, dst., baik pada kode HTML untuk judul (title) maupun pada kode widget-content-nya.

Cara Membuat Scroll Pada Bloglist (Daftar Blog) Blogspot

2012-07-25T00:11:00.002+07:00

Banyak sobat yang menggunakan gadget Bloglist (Daftar Blog) dari fasilitas blogger/blogspot pada sidebar blognya. Memang ada keuntungan disana. Dengan memamfaatkan gadget Bloglist ini kita bisa melihat setiap artikel-artikel terbaru dari blog-blog yang terdapat di dalamnya, sehingga kita dapat dengan mudah mengetahui setiap perkembangan dan topik bahasan artikel dari blog-blog tersebut.

Sayangnya, jika isi Bloglist ini terlalu banyak maka akan terlihat memanjang sehingga memenuhi halaman blog, dan kadang melebihi panjang halaman artikel yang dimuat. Bahkan sekalipun kita memilih opsi terpendek (5 blog yang ditampilkan), tetap saja apabila kita klik "selengkapnya" (Show all) pada Bloglist tersebut maka akan memanjang memenuhi halaman blog. Tentu saja hal ini terlihat kurang rapih dan menarik.

Untuk mengatasi hal itu kamu bisa menambahkan perintah scroll. Sepintas memang kelihatan sulit untuk menambahkannya karena gadget-nya bukan berupa HTML/JavaSript. Tapi sebenarnya cukup mudah dan simpel, kamu hanya cukup menambahkan perintah overflow dan mengatur ukuran tinggi (height)-nya.

Untuk mengetahui lebih jelas cara membuatnya kamu dapat mengikuti langkah-langkah berikut:

Dari halaman dasbor, klik Tata Letak - Edit HTML.
Beri tanda centrang pada Expand Template Widget.
Kemudian cari kode type='BlogList' (gunakan Control F atau F3).
Perhatikan kode yang ada di bawahnya, seperti ini:

<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

Tambahkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga menjadi seperti ini:

<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content' style='overflow:auto; height:200px'>

Atur ukuran tinggi (height)-nya sesuai kebutuhan.
Simpan hasil. SEMOGA BERMANFAAT...!!

Catatan: Jika muncul bullets selain logo blogger pada Bloglist tersebut, itu karena CSS untuk widget pada blog kamu diatur seperti itu. Untuk menghilangkannya, cukup kamu hapus kode class='widget-content' pada script di atas.

Membuat Menu Show/Hide(Spoiler)

2012-07-24T17:46:00.005+07:00

Judul Spoiler 1

Judul Spoiler 2 =>

Contoh diatas Code Scriptnya :
(Click Mouse untuk highlight all)

<br /> <br /> <style type="text/css"><br /> #headerDiv, <br /> #contentDiv { float: left; width: 510px; } <br /> #titleText { float: left; font-size: 1.1em; <br /> font-weight: bold; margin: 5px; } <br /> #myHeader { font-size: 1.1em; font-weight: bold; margin: 5px; } <br /> #headerDiv { background-color: #0037DB; color: #9EB6FF; } <br /> #contentDiv { background-color: #FFE694; } <br /> #myContent { margin: 5px 10px; } <br /> #headerDiv a { float: right; margin: 10px 10px 5px 5px; } <br /> #headerDiv a:hover { color: #FFFFFF; } </style> <br /> <br /> <script language="javascript"> function toggle2(showHideDiv, <br /> switchTextDiv) {  var ele = document.getElementById(showHideDiv);  <br /> var text = document.getElementById(switchTextDiv);  <br /> if(ele.style.display == "inline") {       ele.style.display = "none";   <br /> text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif'/>";    }  <br /> else {   ele.style.display = "inline";   text.innerHTML = "<img src='http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/minus.gif'/>";  } } <br /> </script> <br /> <body> <div ;="" style="width: 550px;"> <br /> <br /> <fieldset> <br /> <legend>Judul Spoiler 1<br /> </legend> <br /> <div id="headerDiv"> <br /> <div id="titleText"> Judul Spoiler 2 =&gt;<br /> </div> <br /> <a href="javascript:toggle2('myContent','myHeader');" id="myHeader"><br /> <img src="http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/plus.gif" /></a><br /> </div> <br /> <div style="clear: both;"> <br /> </div> <br /> <div id="contentDiv"> <br /> <div id="myContent" style="display: none;"> DI SINI ISI SPOILER ( BISA IMAGE, JAVASCRIPT DLL ) <br /> </div> </div> </fieldset> </div> </body><br /> <br />

Untuk Contoh diatas Kode Scriptnya :

Selamat Mencoba semoga bermanfaat

Posting Artikel dengan menu HTML (Rata Kiri, Kanan, Semua)

2012-07-24T17:19:00.005+07:00

Kode html Rata Kiri

<div align="left">
isi artikelnya di sini
</div>

Maka Hasilnya :

Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?

Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.

Kode html Rata Kanan:

<div align="right">
isi artikelnya di sini
</div>

Maka Hasilnya:

Kode html tulisan ditengah semua

<div align="center">
isi artikelnya di sini
</div>

Maka Hasilnya :

Kode html Rata Kiri-Kanan

<div align="justify">
isi artikelnya di sini
</div>

Maka Hasilnya :

Semoga Bermanfaat

Penulisan HTML (Warna)

2012-07-24T17:10:00.002+07:00

<span style="color:kode warna">
tulisan yang mau di warnai
</span>

Contoh Penggunaannya :

<span style="color:red">
ini contoh merah
</span>

Hasilnya:

ini contoh merah

Atau bisa juga ditulis :

<span style="color:#FD0303">
ini contoh merah
</span>

Hasil kode diatas akan tetap sama. untuk mengetahui kode warna klik disini
Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template.

Conventer html by Google

2012-07-24T17:00:00.000+07:00

Copy Paste kode html dibawah ini

Pasang Widget Kode Warna di Blog 2

2012-07-24T16:55:00.001+07:00

<div style="line-height: 0; text-align: center;"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="src" value="http://www.allblogtools.com/MiSc/colors/color-codes.swf" /><param name="pluginspage" value=" http://www.macromedia.com/go/getflashplayer" /><embed width="485" height="485" type="application/x-shockwave-flash" src="http://www.allblogtools.com/MiSc/colors/color-codes.swf" pluginspage=" http://www.macromedia.com/go/getflashplayer" /> </object></div>
Hasil CodeScript

Hasil Script diatas :

Silahkan dicoba

Membuat Bingkai/Border Posting

2012-07-24T00:53:00.004+07:00

Banyak bentuk bingkai yang bisa anda pakai dan dibawah adalah contoh-contoh bentuk bingkai beserta kodenya yang support di WordPress.com.

Solid

<div style="background-color: #222222; border: 1px solid #000000; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

Dashed

<div style="border: 1px dashed #000000; background-color:#D8E7F6; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

Dotted

<div style="background-color: #d8e7f6; border: 1px dotted #000000; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

Double

<div style="background-color: #d8e7f6; border: 1px double #000000; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

Groove

<div style="border: 4px groove #000000; background-color:#d8e7f6; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

OutSet

<div style="border: 4px outset #000000; background-color:#d8e7f6; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

Ridge

<div style="border: 4px ridge #000000; background-color:#d8e7f6; padding: 5px; width: 400px;">
Tulisan Anda...
</div>

Keterangan :

border: tebal tipisnya, jenis dan warna bingkai.
background-color: warna latar bingkai.
padding: jarak antar bingkai dengan tulisan.
padding: width: lebar bingkai.

Membuat Tex Area 2

2012-07-24T00:39:00.003+07:00

Melanjutkan posting awal Tentang Textare 1, untuk memperkaya pengetahuan kita berikut iini beberapa textarea lainnya :

(Klik di kotak Area, otomatis text didalam textarea akan di highligh semua)

Contoh Text Area otomatis seleksi saat di klik

</textarea></div>

Hasil dari Kode diatas :

(Mouse di kotak Area, tanpa klik otomatis tek akan di highligh semua)

<div style="text-align: center;"> <textarea cols="25" onmouseover="this.focus(); this.select();" rows="3">Contoh Text Area otomatis seleksi saat di klik</textarea></div>

Hasil dari kode diatas:

Membuat Text Berjalan (1)

2012-07-24T00:07:00.001+07:00

Untuk membuat tulisan berjalan itu sangat mudah karena hanya dengan kode HTML sederhana sudah akan tercipta sebuah tulisan berjalan. Kode HTML untuk membuat tulisan berjalan di kenal dengan perintah Marquee. Kode dasar perintah marquee adalah sebagai berikut :

<marquee>Tulisan disini akan berjalan</marquee>

Hasil Script diatas :

Tulisan disini akan berjalan

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan. Atribut yang sering di gunakan dalam kode marquee adalah :

bgcolor="warna" Â» Untuk mengatur warna background (latar belakang) teks
direction="left/right/up/down" Â» Mengatur arah gerakan teks
behavior="scroll/slide/alternate" Â» Untuk mengatur perilaku gerakan

Scroll Â» teks bergerak berputar

Slide Â» teks bergerak sekali lalu berhenti

Alternate Â» teks bergerak dari kiri kekanan lalu balik lagi (bolak-balik bo)
title="pesan" Â» Pesan akan muncul saat mouse berada di atas teks
scrollmount="angka" Â» mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.
scrolldelay="angka" Â» Untuk mengatur waktu tunda gerakan dalam mili detik
loop="angka|-1|infinite" Â» Mengatur jumlah loop
width="lebar" Â» Mengatur lebar blok teks dalam pixel atau persen

Untuk lebih jelasnya, lihat disini

Membuat Text Berjalan 2

2012-07-23T23:37:00.009+07:00

Selain kode dasar marquee, ada perintah lain (umumnya disebut sebagai atribut) yang disisipkan untuk mengatur keindahan tampilan tulisan yang berjalan.
Atribut yang sering di gunakan dalam kode marquee adalah :

bgcolor="warna" Â» Untuk mengatur warna background (latar belakang) teks
direction="left/right/up/down" Â» Mengatur arah gerakan teks
behavior="scroll/slide/alternate" Â» Untuk mengatur perilaku gerakan Scroll Â» teks bergerak berputar Slide Â» teks bergerak sekali lalu berhenti Alternate Â» teks bergerak dari kiri kekanan lalu balik lagi (bolak-balik)
title="pesan" Â» Pesan akan muncul saat mouse berada di atas teks
scrollmount="angka" Â» mengatur kecepatan geraka, semakin besar angka semakin cepat gerakannya.
scrolldelay="angka" Â» Untuk mengatur waktu tunda gerakan dalam mili detik
loop="angka|-1|infinite" Â» Mengatur jumlah loop
width="lebar" Â» Mengatur lebar blok teks dalam pixel atau persen

<marquee align="center" direction="left" height="200" scrollamount="2" width="100%">
marquee dari kanan ke kiri
</marquee>

Contoh Kode diatas

marquee dari kanan ke kiri

Catatan :
ganti kata "left" dengan keinginan anda yaitu bisa : right, up, down
marquee dengan variasi hurup dan warna latar belakang :

<div align="left"><font face="georgia" color="White"><strong><marquee bgcolor="red" width="100%" scrollamount="3" behavior="alternate">
marquee dengan variasi hurup dan warna latar belakang
</marquee></strong></font></div>

Hasil dari kode diatas

marquee dengan variasi hurup dan warna latar belakang

Agar lebih menarik, kode marquee juga bisa dipadukan dengan javascript sederhana, seperti onmouseover="this.stop()" onmouseout="this.start()" . Dengan kode javascript tersebut, tulisan berjalan akan seketika berhenti apabila pointer mouse komputer pengunjung blog kita mengarah ke tulisan yang berjalan, dan akan berjalan kembali apabila pointer mouse dipindah ke tempat lain. Contoh, silahkan arahkan pointer mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> silahkan tunjuk ke sini </marquee>

Hasil Kode diatas :

silahkan tunjuk ke sini

Conventer html Versi JavaScript Mentah

2012-07-23T23:25:00.002+07:00

Maka Hasilnya :

Conventer html Versi JQuery

2012-07-23T23:24:00.000+07:00

Terserah apakah kode ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa template Anda sudah dilengkapi dengan JQuery, maka konverter HTML ini akan bekerja:

Hasilnya :

Membuat floating widget

2012-07-23T22:39:00.002+07:00

Sebelumnya saya pernah menulis tentang cara membuat ini (membuat menu floating) tapi dengan tips hanya menggunkan modifikasi CSS saja, nah berikut ini sedikit modifikasi dengan menggunakan kode javascript dan tampilan pun akan lebih dinamis, di dalamnya sobat dapat tempatkan apapun juga mis : Iklan adsense, Gambar, ataupun chat box. untuk preview coba sobat klik widget bertuliskan sponsor sebelah kanan.
Buka Layout Page Element dan Klik add gadget, kemudian pilih HTML/javaScript

Silahkan di Coba

Cara Buat Floating Menu

2012-07-23T21:16:00.000+07:00

Floating menu juga di kenal dengan nama "fixed menus" dan "hovering menus", artinya menu ini akan tetap pada tempatnya ketika halaman bergerak, sama seperti Cara Membuat Top of Page Icon atau Menu Top/Down Halaman hanya saja didalamnya akan dimasukkan link.

Tempatkan kode CSS berikut tepat si atas tag ]]></b:skin> :

div.floating-menu {
position: fixed;
background: #fff4c8;
border: 1px solid #ffcc00;
width: 150px;
z-index: 100; }

div.floating-menu a, div.floating-menu h3 {
display: block;
margin: 0 0.5em; }

Tempat kode pemanggil berikut tepat di bawah tag <body>:

<div class="floating-menu">
<h3>Floating Menu</h3>
<a href="http://URL-ANDA">PREVIEW</a>
<a href="http://URL-ANDA">LINK</a>
<a href="http://URL-ANDA">LINK</a>
<a href="http://URL-ANDA">LINK</a>
<span style="font-size: 75%">Widget by
<a href="http://www.jendelainfo23.blogspot.com">Jendela Informasi </a>
</span>
</div>

SAVE TEMPLATE Dan lihat hasilnya.

Modifikasi list | angka dan huruf

2012-07-23T20:58:00.000+07:00

cara memodifiasi tampilan type huruf besar

Letters list:
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Letters list:

Apples
Bananas
Lemons
Oranges

cara memodifiasi tampilan type huruf kecil

Lowercase letters list:
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Lowercase letters list:

Apples
Bananas
Lemons
Oranges

cara memodifiasi tampilan type huruf romawi besar

Roman numbers list:
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya
Roman numbers list:

Apples
Bananas
Lemons
Oranges

cara memodifiasi tampilan type huruf romawi kecil

Roman numbers list:
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

Maka Hasilnya :
Roman numbers list:

Apples
Bananas
Lemons
Oranges

Modifikasi list | disc,circle, dan square.

2012-07-23T20:29:00.004+07:00

Pada tips sebelunya kita saya sudah membicarakan tentang cara membuat tulisan Membuat susunan tulisan berurutan (list), nah sekarang sedikit tips untuk memodifikasi tampilannya.

cara memodifiasi tampilan type disc

Disc bullets list:
<ul type="disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Disc bullets list:

Apples
Bananas
Lemons
Oranges

cara memodifiasi tampilan type circle

Circle bullets list:
<ul type="circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Circle bullets list:

Apples
Bananas
Lemons
Oranges

cara memodifiasi tampilan type square

Square bullets list:
<ul type="square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

Maka Hasilnya :

Square bullets list:

Apples
Bananas
Lemons
Oranges

Membuat susunan tulisan berurutan (list)

2012-07-23T20:10:00.010+07:00

Cara ini bisa saja secara otomatis dapat di buat ketika sobat membuat tulisan di bagian postingan, tapi ketika sobat ingin membuatnya di sidebar, anda harus menuliskannya secara manual.

Nah..berikut tips sederhana untuk sobat:

<ul>
<li>List baris pertama</li>
<li>Untuk yang kedua</li>
</ul>

Hasilnya :

List baris pertama
Untuk yang kedua

Untuk memodifikasi tampilan bulletnya bisa sobat coba disini

<ol>
<li>List baris pertama</li>
<li>Untuk yang kedua</li>
</ol>

Hasilnya :

List baris pertama
Untuk yang kedua

Untuk memodifikasi tampilan menjadi huruf bisa sobat coba disini

<dl>
<dt>Daftar</dt>
<dd>- daftar dalam daftar 1</dd>
<dt>Daftar 2</dt>
<dd>- daftar dalam daftar 2</dd>
</dl>

Hasilnya :

Daftar: - daftar dalam daftar 1
Daftar 2: - daftar dalam daftar 2

Apa itu BackLink

2012-07-23T18:04:00.002+07:00

Apa itu BackLINK

Menurut Wikipedia, Backlink merupakan:

Backlinks (or back-links [UK]) are incoming links to a website or web page. Inbound links were originally important (prior to the emergence of search engines) as a primary means of web navigation; today their significance lies in search engine optimization (SEO). The number of backlinks is one indication of the popularity or importance of that website or page (though other measures, such as PageRank, are likely to be more important). Outside of SEO, the backlinks of a webpage may be of significant personal, cultural or semantic interest: they indicate who is paying attention to that page.

Backlink ini merupakan “incoming link” atau link masuk untuk website kita. Kalau ikut bahasa pasarnya, url website kita berada di website atau blog orang lain.

Backlink dapat diperoleh dengan :

Orang buat review terhadap produk atau website kita, kemudian mereka letak link url kita di dalam review post tersebut.
Apabila kita sponsor sesuatu theme, link kita diletakkan di footer theme tersebut.
Apabila link kita diletakkan di blogroll di blog-blog orang lain.
Melalui comment-comment di blog orang lain dengan meletakkan url website kita.
Signature atau post di forum-forum yang kita join dengan meletakkan url website kita

Backlink juga adakalanya dikenal sebagai Inbound link atau incoming link. Inbound link ini sangat penting untuk penentuan ranking search engine (SERP - search engine ranking position) karena setiap seach engine memiliki algorithmsnya tersendiri untuk menakar berapa jumlah Backlinks sesuatu website atau halaman yang ada dan sekaligus akan memberikan rank dan position yang lebih tinggi menurut kualifikasi website atau halaman itu sendiri.

Dalam arti kata lain, makin banyak backlink sesuatu website tersebut, maka makin populer website tersebut sekaligus segala isi (content) yang berada dalam website tersebut dianggap penting dan relevent oleh sesuatu algorithms search engine.

Mengetahui jumlah Backlink website Anda.

Ada banyak cara untuk menilai berapa banyak jumlah backlink yang website anda ada. Hal ini penting untuk diketahui karena sebagai pemilik website, Anda harus berusaha menambahkan sebanyak backlink yang ada.

Antara tool gratis yang ada untuk check jumlah backlink website anda adalah Backlink Watch;

http://www.backlinkwatch.com/index.php

Apa yang harus Anda lakukan adalah dengan memasukkan url website anda klik "Check Backlinks. Jika website Anda memiliki backlink, maka secara otomatis ia akan mengira dan menampilkan dari mana backlink tersebut datang.

Cara ini juga digunakan oleh pengalisa-penganalisa SEO untuk "spy" website pesaing mereka. Dengan itu mereka akan terus meningkatkan usaha menambahkan Backlinks ke website mereka. Selesai.

Cara Menampilkan File Word, Excel, Power Point di Blog

2012-07-23T17:50:00.001+07:00

Bagi anda yang suka dan ingin sharing file dalam bentuk microsoft word (document) dan microsoft excel (spreadsheet) ataupun microsoft power point (presentation) di blog, maka anda bisa menggunakan berbagai layanan di internet.

Salah satu di antaranya adalah layanan yang di sediakan oleh google yaitu Google docs. Dengan google docs anda bisa membuat file microsoft office yang saya sebutkan tadi secara online ataupun anda bisa mengupload file yang sudah jadi alias sudah di kerjakan secara offline dan kemudian ambil kode yang di berikan lalu setelah itu anda bisa menampilkannya di blog anda.

Apa kelebihan dari google docs? dengan google docs anda tidak perlu mempunyai software microsoft office yang lisensi nya sangat mahal terinstall di komputer anda, yang anda perlukan adalah anda bisa online di internet. Sepertinya saya tidak perlu menerangkan bagaimana cara membuat file di google docs karena penggunaannya hampir sama dengan microsoft office. Yang mau saya terangkan adalah bagaimana cara mengupload file yang sudah jadi ke google docs dan kemudian menampilkannya di blog anda.

Salah satu syarat untuk bisa menggunakan google docs adalah anda harus mempunyai alamat email di gmail (google acount). Jika selama ini account blogger anda menggunakan gmail maka bisa secara langsung login ke google docs. Bagi anda yang baru pertama kali masuk ke google docs, maka anda harus setuju dengan peraturan yang di buat oleh google. Sudah punya account google?

Langkah 1 : upload file ke google docs.

Silahkan login ke http://docs.google.com dengan account gmail anda.
Klik Tab Upload yang berada di sebelah kiri atas layar monitor anda.- Klik tombol browse… di bawah tulisan Browse your computer to select a file to upload:
Masukan file yang ingin anda upload (word, excel, power point).
Klik tombol Upload File yang ada di sebelah bawahnya.
Tunggu beberapa saat sampai file anda terupload semuanya (tergantung dari besarnya file serta kecepatan koneksi anda).
Jika sudah terupload, anda bisa mengeditnya jika mau.
Klik Tab publish yang ada di sebelah kanan atas layar monitor anda, maka akan keluar tulisan "This document is not yet published."
klik tombol Publish Now yang ada di bawahnya.
Jika sudah selesai, lihat kembali ke bagian bawahnya!
Klik link bertuliskan More Publishing Options.
Setelah keluar window pop up, klik menu drop down di sebelah tulisan File format kemudian pilih "HTML to embed a webpage."
Klik tombol Generate URL.
Copy kode HTMl yang di berikan, lalu paste pada notepad atau text editor lainnya.
Silahkan di close saja window nya.
Silahkan anda sign out dari google docs jika mau. - Selesai.

Langkah 2 : posting kode google docs ke blogger.

Silahkan login ke blogger dengan ID anda.

Klik Posting Baru.
Silahkan anda buat postingan yang anda inginkan.
Ketika anda mau menyisipkan kode yang dari google docs, klik terlebih dahulu tab Edit HTML ( jangan yang compose)
Paste kode google docs yang ada di notepad tadi pada tempat yang anda inginkan.
Klik Tombol PUBLIKASIKAN POSTING.
Silahkan lihat hasilnya.
Selesai

Sekarang anda sudah tahu cara menampilkan file excel di blog kan? ada lagi tambahan nih dari kang rohman. Berikut adalah contoh kode HTML yang di berikan oleh google docs :

Lihat PREVIEW

Jika kita perhatikan kode tersebut adalah kode HTML untuk perintah iframe, masih ingatkan dengan perintah iframe yang pernah saya posting di “mengenal perintah iframe”? tentunya kode yang di berikan oleh google docs tidaklah mutlak harus seperti itu, tapi kita bisa memodifikasinya sesuai dengan keinginan kita.

Sebagaimana kita lihat bahwa ukuran lebar (width) sebesar 500 pixel, nilai ini bisa anda ganti dan disesuaikan dengan lebar dari halaman post anda, begitupun dengan tingginya (height) ini pun bisa anda ganti dengan nilai yang anda inginkan. Ada satu lagi yang penting adalah dalam kode tersebut tidak di sertakan kode scrolling, sehingga apabila file anda sangat lebar tidak akan terlihat oleh pembaca, maka solusi yang saya berikan adalah menambahkan kode scrolling=”yes’ ataupun scrolling=”auto” pada kode iframe di atas.

contoh kode yang memakai scrolling :

Lihat Preview

Atau dapat juga seperti ini :

Dengan anda menambahan kode seperti itu, maka walaupun file anda mempunyai lebar serta tinggi yang melebihi halaman posting anda, pembaca dapat menggesernya dengsn leluasa memakai scrolling.

Selamat Mencoba