Test Block

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger

noreply@blogger.com (Unknown) — Wed, 21 Mar 2012 00:05:00 +0800

~~Aldojoe mengucapkan Selamat datang~~

Aldojoe mengucapkan Selamat datang

Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!

kode CSS

/* Navigasi tabs Sederhana alomban.blogsot.com Starts */
a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
a.burastabs:hover {color:#FFFFFF; background:#666666;}
#burasbar {width:auto; margin:0 auto;}
/* Navigasi tabs Sederhana Ends */

kode HTML

<div id='burasbar'>
<a href="#" class="burastabs">Home

</a>
<a href="#" class="burastabs">About</a>
<a href="#" class="burastabs">Tips Blog </a>
<a href="#" class="burastabs">SEO Tips</a>
<a href="#" class="burastabs">Contact</a>
<a href="#" class="burastabs">Sitemap</a>
<a href="#" class="burastabs">Advertise</a>
</div>

Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti "#"

dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian, <a href="#" class="burastabs">Anchor Text</a>.

Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:
1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.
2. Copy kode CSS di atas,
4. Cari]]></b:skin>

(cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya.
5. Save Template.
6. Masuk ke Page Elements > Klik Add a Gadget7. Setelah pop up window muncul, pilih opsi HTML/Javascript
8. Masukkan kode HTML yg telah diedit tadi pada kolom
9. Klik save.
10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi.
Selamat Mencoba semangatttt

cara membuat colom baru di bagian header tutorial blogger MODIFIKASI BLOG

noreply@blogger.com (Unknown) — Wed, 21 Mar 2012 00:02:00 +0800

Menambah teks atau image di bagian header memang tak bisa dilakukan tanpa mengadakan renovasi ruang header. Desain template dari blogger memang hanya menyertakan ruang untuk judul blog dan ruang deskripsi blog. Membangun kolom baru di bagian ini perlu untuk melakukan penambahan KODE HTML. Cara termudah merupakan satu solusi yang banyak diharapkan karena yang jelas tidak bikin pusing bagi yang belum begitu memahami tentang per"KODE"an (seperti juga aku! Baru latihan dan ternyata sangat asyik !). Penambahan kolom akan kita lakukan di bagian sebelah kanan. Untuk lebar kolom atau tingginya dapat kita atur sesuai kebutuhan, begitupun jumlah kolom yang diinginkan. Satu persyaratan yang harus dilakukan supaya tidak terlalu banyak KODE asli bawaan blogger yang harus di rubah, kamu harus masuk dulu di halaman "Elemen Laman" untuk "memurnikan" kolom header terlebih dahulu. Apabila kolom header sudah dalam kondisi normal, maka perubahan untuk penambahan kolom langsung dapat kita lakukan.
LANGKAH-LANGKAH YANG DIPERLUKAN UNTUK MENAMBAH KOLOM DI BAGIAN HEADER :

1. Login ke Blogger.
2. KLIK Tata Letak (Layout).
3. Tampak Susunan Elemen Laman. Cari kolom header (sebelah atas).
4. KLIK Edit pada Header.
5. Hapus gambar yang ada jika kamu menggunakan background image pada header.
6. KLIK Simpan (SAVE).
7. KLIK Edit HTML.
8. Amankan template.
9. Tetap di Edit HTML.
10. Cari KODE #header h1
11. Bentuk KODE pada #header h1

#header h1{ background:url("http://www1.blogblog.com/no897/bg_header.gif") no-repeat left top;
margin:0;
padding:70px 0 30px;
line-height: 97px;
font: normal bold 200% Helvetica, Arial, Verdana, Sans-serif;
text-transform:lowercase;
_height: 0px;
}

KETERANGAN/CATATAN :

Tidak semua KODE seperti KODE di atas. KODE CSS tersebut hanya salah satu contoh yang digunakan oleh template Blogger.

TAMBAHKAN KODE BERIKUT PERSIS DI BAWAHNYA :

.boksheaderbaru{
background:yellow;
border:1px solid blue;
float:right;
margin:5px 5px 0 20px;
width:300px;
}
.boksheaderbaru .atas{
background:blue;
border:1px solid orange;
margin:5px;
font:14px Arial;
font-weight:bold;
color:red;
height:40px;
}
.boksheaderbaru .tengah{
background:red;
border:1px solid blue;
margin:5px;
font:16px Arial;
font-weight:bold;
color:yellow;
height:40px;
}
.boksheaderbaru .bawah{
background:green;
border:1px solid red;
margin:5px;
font:18px Arial;
font-weight:bold;
color:#CC99FF;
height:auto;
float:right;
}

12. Tambahkan tinggi pada KODE -->

#header{
height: ...;
width: ...;
...
...
...
}

dengan menambahkan KODE :

MIN-HEIGHT:180PX;

bila sudah ada height:...; ganti dengan KODE di atas !

13. KLIK Simpan Template (SAVE template).
14. Setelah tersimpan dengan baik lanjutkan dengan KLIK Expand Template Widget.
15. Cari KODE : --> posisinya di bawah tag <head>

16. Selipkan KODE berikut di antara <div class='titlewrapper'> dan <h1 class='title'>

17. KODE Tambahan :

<div class='boksheaderbaru'>
<div class='atas'>Kolom Header Baru Bagian Atas</div>
<div class='tengah'>Kolom Header Baru Bagian Tengah</div>
<div class='bawah'>Kolom Header Baru Bagian Bawah</div>
</div>

Sehingga KODE yang baru berbentuk seperti ini :

<div class='titlewrapper'>
<div class='boksheaderbaru'>
<div class='atas'>Kolom Header Baru Bagian Atas</div>
<div class='tengah'>Kolom Header Baru Bagian Tengah</div>
<div class='bawah'>Kolom Header Baru Bagian Bawah</div>
</div>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>

18. KLIK Simpan Template (SAVE Template)!

KETERANGAN/CATATAN :

1. Ganti teks "Kolom Header Baru ...." dengan teks baru.
2. Untuk merubah ukuran teks, rubah KODE --> font: ..px Arial; dengan ukuran yang sesuai.
3. Untuk merubah warna teks, ganti KODE --> color: ..; dengan warna baru.
4. Border bisa diganti warna atau dihilangkan total dengan tidak menyertakan KODE border:1px solid ...;
5. Untuk mengganti warna background, ganti KODE --> background: ..; dengan warna baru.
6. background bisa juga diberikan warna "transparent".
7. Untuk menambahkan background image (gambar) rubah KODE:

background:red; --> sebagai contoh, menjadi :
background:transparent url(image.gif);

cara menganti tamplate Blogger

noreply@blogger.com (Unknown) — Wed, 21 Mar 2012 00:01:00 +0800

Banyak teman-temanku yang bertanya-tanya "gimana cara ganti template blog?".. ya diantarannya.................
Kasih tau gak ya...........
Ya udah deh gak usah.., hehehe.
Namannya Puspita & Devi...,
nih buat caranya buat ganti template blog untuk kalian dan teman-teman yang lain yang belum tau cara mengganti template blog :
1.Cari situs yang menyediakan template blog.., salah satunnya *DI SINI*
2.Pilih template yang kamu inginkan lalu download.
3.Buka file yang didownload tadi lalu di extract di desktop (agar lebih mudah)

4. Setelah itu login ke blog kalian >> tata letak >> Edit HTML.
5. Lalu ambil file yang di extract di desktop tadi pakai "Choose File".

6. Lalu simpan template.
7. Liat blog kalian dan template kalian pun telah berubah.
8. Jangan lupa comment ya.... hehe.

Cara menyembunyikan Widget/ Gadget Chatbox ( Buku Tamu ) di kanan

noreply@blogger.com (Unknown) — Wed, 21 Mar 2012 00:01:00 +0800

Asslamualikum,wr,wb . Sekarang saya akan memberikan cara menyembunyikan Widget atau Chat Box (buku tamu) di kanan. Bagi blog yang tidak mempunyai banyak ruang di blognya, pasti cara ini sangat di perlukan, karena Widget-widget yang di tempel di blog hanya mengotori/Mengurangi space di blog. Langsung saja caranya sebagai berikut :

1. Login ke blogger terlebih dahulu.
2. Setelah itu Buka Rancangan - Elemen Laman.
3. Tambah Widget - Html/javascript
4. Copy paste Code berikut di sana

5. Ganti tulisan yang berwarna Merah dengan script chat box kamu, jika belum memiliki chat box silahkan klik di sini

6. Lalu simpan.
Selamat Anda memiliki tampilan Chatbox baru.

cara membuat warna background pada posting

noreply@blogger.com (Unknown) — Tue, 20 Mar 2012 23:59:00 +0800

Memberi warna atau background mungkin akan lebih dalam anda memposting hal2 yang di spesialisasikan jadi kamu harus tau cara membuat background dalam postingan,saya melihat temen2 suka memberi bacground juga,misalnya saat menunjukkan kode html atau sorotan tertentu.jadi mari yuk kita belajar bersama cara membuat background dalam postingan.

1.Buat postingan anda
2.Pilih tab edit html bukan compose
3.Trus anda tinggal masukan code berikut ini di halaman postingan anda:

<div style="background:kode warna background;">

Di sini Postingan anda

</div>

Trus anda ganti tulisan CODE WARNA BACKGROUND dengan code warna yang ingin anda pakai...ok selamat mencoba..

Cara Memasang search engin pada blog

noreply@blogger.com (Unknown) — Tue, 20 Mar 2012 23:56:00 +0800

Membuat 2 link terbuka dengan 1 klik

noreply@blogger.com (Unknown) — Sun, 18 Mar 2012 13:02:00 +0800

Cara Membuat 2 link Terbuka dengan 1 klik

Membuat 2 link terbuka dengan 1 Link atau tautan di gunakan untuk mengarahkan pembanca pada halaman-halaman Artikel kita yang lain, pernahkah kamu ketika klik link lalu tiba tiba muncul 2 window yang terbuka pada tab yang baru, nah itu bukan kesalahan pada mouse kamu yg rusak, tetapi link tersebut memang di buat begitu…

Nah,kali ini saya akan memberikan tutorial bagaimana cara membuat 2 link terbuka dengan 1 klik, untuk membuatnya cukup mudah,karena hanya menambahkan sedikit kode dalam link tersebut.

Struktur link standart biasanya seperti dibawah ini:

<a href="http://alomban.blogspot.com/" target="_blank">Test Block</a>

Agar 2 Link terbuka dengan 1 klik lihat kode dibawah ini!

<a onclick="window.open('http://alomban.blogspot.com/')" href="http://infonetgue.blogspot.com/" target="_blank">Contoh 2 link terbuka dengan 1 klik</a>

Contoh klik link ini! Contoh 2 link terbuka dengan 1 klik

Keterangan : Masukkan alamat Link yang pertama setelah perintah onclick="window.open

Demikian cara membuat Cara Membuat 2 link Terbuka dengan 1 klik, semoga bermanfaat!

<<--->>JANGAN LUPA COMMENT NYA<<--->>

16 Maret 2012

noreply@blogger.com (Unknown) — Fri, 16 Mar 2012 07:05:00 +0800

Cara mengganti logo blogger

noreply@blogger.com (Unknown) — Thu, 15 Mar 2012 07:49:00 +0800

Cara Memasang search engin pada blog

noreply@blogger.com (Unknown) — Thu, 15 Mar 2012 06:08:00 +0800

Cara Memasang search engin pada blog

noreply@blogger.com (Unknown) — Thu, 15 Mar 2012 06:08:00 +0800

Logo Design by FlamingText.com

Cara Memasang search engin pada blog >> Search engin?.. apa to?... itu lo kota buat nyari2 artikel pada blog...iya! bener sekali,itulah yang ane maksud, kadang template yang kita pakai tidak ada fasilitas yang satu ini, jadi buat sobat yang gk punya mesin pencari pada blognya gk usah khawatir ya...simak saja tutorial yang satu ini.

Langsung saja kopi kode dibawah ini:
_________________________________________________________________

membuat text area dengan background warna dan gambar

noreply@blogger.com (Unknown) — Tue, 13 Mar 2012 20:40:00 +0800

Cara membuat text area dengan background warna dan gambar >> Sama dengan memberi background warna pada postingan, tapi untuk membuat text area dengan background bergambar ada beberapa kode yang perlu ditambahkan,mari langsung saja menuju tkp, kebanyakan intermezo ntar malah gak jadi baca..he he he...becanda.....

1.Buat postingan anda
2.Pilih tab edit html bukan compose
3.Trus anda tinggal masukan code berikut ini di halaman postingan anda:
__________________________________________________________

<div style="overflow: auto; width: 400px; height: 100px;background-color: #ffecff; background-attachment: scroll;background-repeat: no-repeat; background-position:right bottom;background-image:url(http://bootingskoblog.files.wordpress.com/2008/11/poke133.gif); text-align: justify; padding: 5px; border: 2px solid#0000b9;">

tulis postinganmu disini

</div>

___________________________________________________________
LIHAT HASILNYA:

Cara membuat text area dengan background warna dan gambar >> Sama dengan memberi background warna pada postingan, tapi untuk membuat text area dengan background bergambar ada beberapa kode yang perlu ditambahkan,mari langsung saja menuju tkp, kebanyakan intermezo ntar malah gak jadi baca..he he he...becanda.....

1.Buat postingan anda
2.Pilih tab edit html bukan compose
3.Trus anda tinggal masukan code berikut ini di halaman postingan anda:

KETERANGAN:

-WIDTH: lebar text area
-HEIGHT: Tinggi text area
-BACKGROUND COLOR: warna background text area
-BACKGROUND REPEAT: pengulangan tampilan pada gambar
-BACKGROUND POSITION: letak background gambar
-BACKGROUND IMAGE: background gambar
-TEXT ALIGN: perataan tulisan
-PADDING: jarak antara tulisan dengan border
-BORDER: garis atau bingkai text area
-SOLID: warna garis atau bingkai text area
-FONT SIZE: ukuran huruf
-FONT FAMILY: jenis huruf
-COLOR: Warna huruf

<<--->>JANGAN LUPA COMMENT NYA<<--->>

Membuat Gulungan di Sudut Blog

noreply@blogger.com (Unknown) — Tue, 6 Mar 2012 13:07:00 +0800

Aksesoris blog di butuhkan bagi setiap blog yang masih aktif, aksesoris blog dapat memperindah dan mempercantik tampilan blog kita agar pengunjung betah mengunjungi blog kita berkali - kali. Namun jika terlalu banyak aksesoris mengakibatkan blog menjadi lola' (loading lama) dan pengunjung enggan untuk mampir ke blog kita lagi, kebanyakan pengunjung blog menutup blog yang dikunjungi nya sebelum semua kode pada blog yang dikunjunginya karena terlalu lama loadingnya. Maka dari itu, kita harus pintar memilih aksesoris yang cocok untuk blog kita, bukan semua aksesoris di masukan di blog kita.

1.Login ke Blogger

2.Klik Design > Edit HTML > centang 'Expand Widget Template'
3.Pasang kode berikut di atas kode ]]></b:skin>

#pageflip {

position: relative;

}

#pageflip img {

border: none;

width: 50px; height: 52px;

z-index: 99;

position: absolute;

right: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

#pageflip .msg_block {

width: 50px; height: 50px;

position: absolute;

right: 0; top: 0;

background: url(http://kon.tl/deopra)no-repeat right top;

text-indent: -9999px;

}

#Ganti kode yang berwarna Merah dengan link kode gambar (300px x 300 px) yang kalian inginkan

#Bisa juga diganti dengan gambar dengan link berikut http://kon.tl/deopra

4.Kemudian pasang lagi kode berikut di bawah kode <b:skin><![CDATA[ atau <b:skin><![CDATA[/*

<script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.js

' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>

5.Selanjutnya pasang kode berikut di bawah kode <body>

<div id='pageflip'>
<a href='http://alomban.blogspot.com/' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmHlAeanNa_jSkTg7g_w_5ekX6XBiy2Rhv6uOe5UN0zQa1iw1m707czLjVzxEgItfK45bjI0w0fGNf1CCfDirldWqph9ZvJo77E_fUsg7GI7dvAe3jKu8YoFIeml8bTwKwHQUYte58jreL/'/>
<span class='msg_block'/>
</a>
</div>

#Ganti kode yang berwarna hijau dengan alamat blog atau link yang kalian ingin pasang

6.Terakhir klik 'Save Template' dan tinggal lihat hasilnya seperti apa ^^

cara menambahkan musik pada blog

noreply@blogger.com (Unknown) — Sun, 4 Mar 2012 21:25:00 +0800

Hi, teman-teman selamat siang nie..., kalian pasti lagi maen facebOOk ya..., hehe. Teman-teman sekelas gue tanya lagi bagaimana cara menambah musik pada blog.., salah satunywa ya temanku yang kemarin tu..., bagi para blogger pemula liat juga nie cara menambah musik di blog..,
GiNie caranya :
1.Pikirkan musik yang ingin anda masukkin ke blog. ( just KiddiN6 )
2.Silahkan ke situs ini untuk memilih lagu.
3.Lalu copy URL yang ada di scrool itu.

4.Masuk ke Tata Letak >> Tambah Gadget >> HTML/JavaScript
Lalu paste URL tadi di kotak putih itu.
5.Lalu Save.
6.Buka blog kalian ..., dan sudah ada deh lagu di blog kalian.
7.jangan Lupa COMMENTx .., hehe

Sekian postingku kali ini semoga bermanfaat bagi kalian, G00d LucK