IFrame di blogger

Apa itu iFrame?? Fungsinya buat apa??
iFrame, dengan menggunakan iFrame kita bisa menampilkani isi blog orang lain di blog kita. Untuk lebih jelasnya silakan perhatikan langkah-langkah memsang iFrame di blog kita....

Perintah dasar dari sebuah iFraame adalah sebagai berikut :

<iframe> .... isi dari iframe .... </iframe>

Beberapa atribut yang sering di pasang dalam iframe adalah :

ALIGN="left/right" ----- Untuk mengatur posisi iframe

WIDTH="lebar" ----------- Mengatur lebar IFRAME dalam pixel atau persen

HEIGHT="tinggi" ---------- Untuk mengatur tinggi dari iframe dalam pixel atau persen

FRAMEBORDER="garis pembatas" ------- Untuk memberi garis pembatas

SCROLLING="auto/yes/no" ------ Untuk memberi atau tidak memberi scrolling pada iframe

SRC="url yg ingin di tampilkan" ------- alamat sumber yang ingin di tampilkan pada iframe

Agar lebih paham, nih contoh pembuatannya :
disini saya menampilkan blog saya sendiri.


<iframe align="left" frameborder="0" src="http://arzheboy.co.cc/"
width="500" height="300" scrolling="no">
</iframe>

Membuat kotak search pribadi

Membuat kotak search pribadi di blogspot. Tutorial kali ini akan mengajarkan kapten bagaimana memodifikasi kotak search, sehingga akan lebih stylist dibandingkan yang default. Penasaran? . . .

Design asli seperti di bawah ini dibuat oleh Design3edge.

Namun tenang saja, kapten tidak perlu repot lagi, karena sekarang sudah diconverted ke blogger. Jadi, tinggal copy paste kodenya saja.

Cara pemasangan :

1. Log in ke account blogspot anda
   
2. Dashboard >> design >> page element
   
3. Add a gadget >> html/javascript
   
4. Copy paste salah satu kode kotak search di bawah ini >> save

KODE DAN STYLE KOTAK SEARCH

Style 1

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPz7rCZZ99Z_jzOjut_YAqQDW54wLdvXGwN28c_8mhDqdLmsaWkpRx8OrL7bIVEBFM1LOInyBEpyrsLZP-KcLrtAwitBrmc6TIzKLjvQUPmN8aBhHMhQjBHhErJpmEpu5IHM1l_YDwcRaR/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4X7oLx8L30BHHyPkCtURkx-lRAnVzRgWHPD7YJLgDhptEojuo6h_i3xhYjL-DZ3ivOAn74vQBd0qcO_QirH1AQg3joNhXXxrjXwjGucleIdqrSviKtY0rdyvDNX15l4Ra8z_kIk4nNJO/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg10slwjjYo3sKmFMM_5YQTYxkA6grvthu9QCLRYwMIf65z1s_cVYarPnF97F1IRJaSX7y_xtTMgvkMoznszaqYcMMvWB-IGTWEsNZUINKvD6QolkyPxcUVW7DOhrhqhffyCpdm7MGRbm6F/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCEyMi1uG0xX0dy0AWVILYW7ePpYD5bgJyYVHAjIhXKkYrwlqTW_JoPtSGFrq3RKdbQlYPFV3eMZGoUpHfS2fwgKJka78dCpuqbu1gIj2xmgV-ZNx8oM0KGL50GyA5q6zb9j9JPe02hSct/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimt_J5zjKABNWsZbW8F-cLzsHEOLgVJG69ycT5VVzEoEgEClB5VejMwRNL0O9kGw7BbbUF4oT7UTvBFqWC0f8x4ERAtPLAx3Bbxfix2eqW5Hp81sDfCdMgYls7SCOxsw3cDUGD3BxICmMX/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA4_Vx3FlHPd8X9KHbXvE6cAtUwm_wzyFelwjzkrVeCmNunE3H-Jo2uAFOd340RBn1t2VJROY5M_zG1B96TIjK7RtS9ff7NZbBt6vGMK0CRK-LXGngiIdwAHRu9xxUgHYWLGtHDdG7inIF/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Tambahan tips :

Jika ingin membatasi hasil pencarian maka copy paste kode di bawah ini di atas kode </form>

<input type="hidden" id="justnothing" name="max-results" value="10"/>

creat blog in blogger

Cara Buat Blog Di blogger.com

Membikin blog di blogger.com / blogspot sungguh sangat mudah karena blogger.com milik Google.com. Karena itu apabila Anda sudah punya email gmail.com, Anda tinggal langsung daftar di blogger.com. Singkatnya ikuti langkah singkat berikut:

1. Kunjungi blogger.com (klik)
2. Masukkan account Gmail di “nama pengguna (Email)” dan password di “Kata Sandi”. Lihat gambar 1.
Kalau belum punya Gmail, daftar dulu di Gmail.com.
a. Isi “Nama Tampilan” di kotak. Contoh: Nama Saya
b. Kasih tanda tik (check) pada “Penerimaan Persyaratan”
c. Klik “Lanjutkan”. Lihat gambar 2.
3. Pada “Judul Blog” -> isi dengan Judul yang diinginkan. Contoh Fatih Syuhud Blog
4. Pada “Alamat Blog” -> isi dengan alamat URL. Contoh, fatihsyuhud.
Jangan lupa klik “Cek Ketersediaan” untuk mengetahui apakah alamat URL yang dipilih belum ada yang punya. Coba buat alamat lain kalau alamat tidak tersedia. Lihat gambar 3.
5. Klik “Lanjutkan”
6. Pada “Pilih Sebuah Template” klik “Lanjutkan” (Gambar 4)
7. “Blog Anda Telah Diciptakan!” -> Anda sudah berhasil membuat blog (Gambar 5)
8. Klik “Mulai Blogging” untuk menulis artikel.
9. Di “Judul” isi kotak dengan judul artikel yang akan ditulis. Contoh: Menulis di Blog
10. Isi kotak di bawahnya dengan artikel. Sebagai contoh, Anda bisa meng-copy dari sini.. Lihat gambar 6.
11. Klik “Mempublikaikan Posting”
12. Selamat! Anda berhasil membuat blog dan memposting Artikel. (Lihat gambar 7).

Catatan: Untuk memposting artikel berikutnya, Anda tinggal mengklik menu “Posting”. Untuk mengedit tulisan tinggal klik “Edit Posting”

Gambar 1

Gambar 2

Gambar 3

Gambar 4

Gambar 5

Gambar 6

Gambar 7

good luck hahaha....