::infur::Info_campur::info-info campur-campur: totorial

Showing posts with label totorial. Show all posts

Cara membuat spoiler

Pada tau kan apa itu spoiler..
Spoiler itu berfungsi untuk menyembunyikan postingan kita...
dengan spoiler,, postingan kita dapat semakin ringan...
yang sering aktif di forum pasti sering dah pada tau..
nah kali ini akan gw kasih tau bagaimana cara membuat spoiler...

gini nih,, cara membuat spoiler,,,
kalian hanya cukup mengkopy ini saja...

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler for <em>[Judul yang miring]</em></b> :
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">[ISI SPOILER]</div></div></div>

ganti yang berwarna kuning dengan apa yang anda inginkan...
nah,, bila selesai jadinya gini nih...

Spoiler for [Judul yang miring] :

selain itu,, ada juga jenis spoiler yang lain...
nih contohnya...

Spoiler for [Judul yang miring] :

nah klo mau yang kaya gitu,, tinggal di copy aja code di bawah ini...

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;">
<b>Spoiler for <em>[Judul yang miring]</em></b> : <input value="Open" style="margin: 0px; padding: 0px; width: 60px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 0px; margin: 0px; padding: 6px;"><div style="display: none;"><div style="background: rgb(180, 123, 16) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">[Isi spoiler]</div></div></div></div>
</div>

sama dengan yang pertama ganti yang berwarna kuning dengan apa yang anda inginkan...
selain itu,, warna dari isi spoiler juga bisa diganti sesuai dengan apa yang diinginkan...
caranya dengan mengganti warna putih..

Selengkapnya ..

Memasang google adsense di blog berbahasa indonesia

hmm,, ini pengalaman saya tentang google adsense..
saya awalnya memiliki blog dengan bahasa indonesia, dan mendaftar di google adsense..
akan tetapi ditolak karena unsupport language..
akhirnya saya-bela-belain membuat blog yang berbahasa inggris supaya diterima google adsense.. sekalian itung-itung belajar bahasa inggris..
saya nekat membuat blog tersebut,, walaupun tata bahasanya kacau balau..
dan untungnya sekarang blog saya tersebut sudah diterima oleh google adsense..
nah bagi yang ingin melihat blog saya yang berbahasa inggris silakan klik disini

nah,, karena yang terdapat google adsense di blog bahasa inggris saya..
saya juga ingin memasukkan google adsense di blog bahasa indonesia saya..
setelah saya masukkan dengan menggunakan bahasa html yang disediakan google.. kok blog saya yang keluar hanya layanan masyarakat..
setelah saya mencari kesana kemari,,
akhirnya saya menemukan cara supaya iklan keluar diblog bahasa indonesia..
caranya adalah.. dengan menambahkan

google_language = "en";

sehingga bahasa html google adsensenya menjadi..

google_ad_width = 540;
google_ad_height = 100;
google_language = "en";

Selengkapnya ..

Menambah kolom pada blog

Hmm.. teman-teman sekalian..
sekarang saya akan menepati janji saya yang waktu itu, untuk membuat atau menambahkan kolom baru..
Kolom pada template blog biasanya ada dua, dan biasanya ada orang yang menginginkan menambah kolom template supaya tampilan menjadi lebih manarik.
penambahan kolom template dapat dilakukan dengan mencari template-template gratis ataupun dengan mengubah bahasa HTML..
kali ini saya akan menjelaskan cara menambah kolom template dengan mengubah bahasa htmlnya..

Yang pertama kita lakukan adalah kita harus menentukan ukuran kolom baru kita..
misal kita inginkan ukuran kolom baru kita sebesar 200px..
maka kita harus memperlebar halaman blog seluruhnya yang apabila dijumlahkan antara main widget( tempat posting), kolom lama, dan kolom baru ditambah spasi adalah sama dengan lebar halaman blog.
udah tau kan cara menambahkan halaman blog, apabila belom tahu, klik disini untuk melihat postingan sebelumnya tentang memperlebar halaman blog.
jangan lupa header dan footer nya dilebarkan juga ya..

pertama yang harus dilakukan adalah masuk ke blogger anda, dan ke edit html..
setelah itu centang Expand Widget Templates..
Kemudian perhatikan script berikut ini..
#sidebar-wrapper {
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
kemudian tambahkan dibawahnya
#sidebar2-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
setelah itu menuju bagian body..
cari script berikut ini..
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
nah kemudian tambahkan script dibawah ini dibawah script tadi..
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'/>
</div>
kemudian simpan dan lihat blog anda,, maka kolom baru sudah terlihat..

Selengkapnya ..

Untuk menghilangkan tulisan "Tampilkan posting dengan label... Tampilkan semua posting"

Mungkin pada bingung dengan maksud dari postingan ini...
apabila kalian menuju link sebuah label di suatu blog,, kan ada tulisan yang seperti tersebut..
"Tampilkan Posting dengan label "nama label"..Tampilkan semua posting"
ini gambarnya..

Cara menghilangkannya adalah...
1. Caranya adalah masuk ke Blogger adalah..
2. Masuk ke Edit HTML..
3. Centang Expand Template Widget..
4. Cari

]]></b:skin>

tambah kan diatas kode tersebut kode ini..

.status-msg-wrap{
display:none;
}

Atau jika tetap tidak bisa.. (karena ada beberapa template yang tidak bisa..)
Yang ditambahkan menjadi

.status-msg-wrap{
display:none;
}
.status-msg-body{
display:none;
}
.status-msg-border{
display:none;
}

diatas

]]></b:skin>

Maka tulisan tersebut akan hilang..
Selamat mempercantik blog anda..

Selengkapnya ..

Membuat Read more/ selengkapnya pada template minima

Maksud dari posting ini adalah,, untuk membantasi apa saja yang akan ditampilkan dihalaman muka blog anda..
Dengan begitu, halaman muka blog anda tidak akan terlalu panjang kebawah, karena postingan anda hanya sebagian saja yang muncul..

Untuk membuat hal tersebut, maka yang harus diperhatikan adalah..
Buka blog anda, kemaudian ke tata letak, dan edit html..
Cari sript berikut ini..

<div class='post-body'>

atau ada juga beberapa template minima yang seperti ini..

<div class='post-header-line-1'/>

Kemudian tambahkan script berikut ini ini bawahnya..

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p> 
<b:else/>
<style>.fullpost{display:none;}</style>

Kemudian cari di bawahnya lagi,,,(ingat bukan yang ditambahkan..)

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

atau pada template baru..

<data:post.body/>

Tambahkan lagi..

<a expr:href='data:post.url'>Read more.....</a>
</b:if>

sehingga menjadi..

<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Read more.....</a>
</b:if>
<div style='clear: both;'/> 
</div>

atau pada template baru..

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<data:post.body/>
<b:if cond='data:blog.pageType != "item"'>
</b:if>
<a expr:href='data:post.url'>Readmore.. </a>
</b:if>
<div style='clear: both;'/> 
</div>

Nah sudah selesai..
silakan mencoba..

Selengkapnya ..

Cara masukin video ke blog...

Sebenarnya ini gampang..
cuma mungkin ada yang nga bisa...
sekedar share aja bagaimana cara masukin video ke blog...

klo video ada di harddisk kita kita hanya perlu langsung upload...
sedangkan bila video tersebut terdapat pada situs lain...
maka yang diperlukan adalah dengan memasukkan script "embed"nya

contoh...
ni dari youtube...

setelah dicopy,, maka paste di blog kamu...

Selengkapnya ..

Memperlebar Halaman Blog

Ketika saya membuat blog dengan template yang tersedia,, terkadang lebar blog tidak sesuai dengan keinginan kita..
atau ketika kita akan menambahkan kolom baru untuk blog..(akan dibahas nanti..)
oleh karena itu kita mesti melebarkan ukuran blog terlebih dahulu..

Untuk melebar Blog kita.. kita harus tau dahulu tentang Header, Main,sidebar dan footer..
Penjelasan :
#outer-wrapper --> kode untuk lebar halaman blog.
#header-wrapper --> kode untuk lebar kepala Blog/gambar blog.
#main-wrapper --> kode untuk lebar postingan blog.
#sidebar-wrapper --> kode untuk lebar sidebar blog.
#Footer Header --> kode untuk bagian bawah blog.

nah sudah mengerti kan bagian-bagian tersebut..
Sebelum kita memulainya kita harus hitung-hitungan dahulu..
Pokoknya lebar dari
Outer=Header=footer=main+sidebar+Spasi*
*Spasi= jarak antara bisa berapa aja.. biasanya 20 hingga 50

setelah menentukan dan berhitung, kita memperoleh..
Outer=Header=Footer= 950px
Main= 600px
Sidebar= 300px
spasi= 50 px

Maka sekarang kita mulai rubah scriptnya..
caranya...
1. Masuk Tata letak dan ke edit HTML..
2. Centang tanda expand template widget
3. Cari Script #outer-wrapper (gunakan Fungsi Find windows.. Ctrl+f)
4. Lihat kode dibawah ini..

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

5. Ubah angka-angka yang bertanda merah berikut dengan ukuran yang telah kita hitung tadi...

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 600px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sampai disini ukuran halaman blog kita sebenarnya sudah berubah.. akan tetapi masih blom rapih karena header dan footernya tidak sesuai.. untuk mengatur header dan footer caranya sama seperti diatas, cari #Header-wrapper dan #footer-wrapper, dan kemudian ubah ukuran pikselnya...

Oke,, sampai disini dulu,,

Selamat mengeblog..

Selengkapnya ..

Menghilangkan Navbar Blogspot

Navbar pada blogspot pada dasarnya banyak gunanya..
kita dapat langsung masuk kedalam mennu blogspot untuk mengedit blog kita..
hanya saja navbar tersebut bagi saya agak menggagu penampilan blog saya...
iseng-iseng saya, maka saya hilangkan saja navbar pada blog saya..
untuk menghilangkan navbar caranya adalah dengan menambahkan script berikut pada edit html..

#navbar-iframe {
Display: none !important;
}

sript tersebut diletakkan diantara scrip dibawah ini..

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Minima Black
Designer: Douglas Bowman
URL: www.stopdesign.com
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#000" value="#000000">
<Variable name="textcolor" description="Text Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="linkcolor" description="Link Color"
type="color" default="#9ad" value="#99aadd">

setelah itu segera simpan dan liat blog anda..
Selengkapnya ..

Menghilangkan Judul Header

Sekedar berbagi info..
ketika saya sedang mempercantik layout blog saya,
saya merasa ada yang kurang ketika saya memasukkan gambar pada header..
hal ini dikarenakan terdapatnya judul dari blog yang menggagu tampilan..
oleh karena itu saya ingin menghapusnya..

cara menghapus judul header adalah
1. Masuk ke edit HTML blog
2. cari script berikut ini

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

3. tambahkan visibility:hidden

#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

yup... selesai sudah...
sekarang tinggal dilihat blog anda...

Selengkapnya ..