Amazon.com

Paypal Indonesia

Sign up for PayPal and start accepting credit card payments instantly.
HOME | ABOUT | CONTACT | TIPS

Jumat, 22 Juli 2011

Cara Membuat Menu Horizontal di blog

1. Login ke blogger terus pilih Layout --> Edit HTML, trus beri tanda centang pada kotak "Expand Widget Templates". jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /* Garis Bawah*/
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Posisi Menu*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;

background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;


Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >


4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-fkemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :


<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>


teru ganti text yang berwarna hijau sihingga menjadi seperti ini:


<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>


terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.
kalo berhasil berarti kamu pinter, kalo gagal berarti kamu kurang pinter :r coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, jangan cuma di plototin. OK BOZ, Good luck.....

Cara Membuat "Baca Selengkapnya..." di Blog

Setelah sekian lama mengembara di dunia maya dan berapa kali trial and error, akhirnya saya menemukan tips yang jitu untuk membelah posting dan menampilkan pesan "Baca selengkapnya..."atau "read more..." atau sejenisnya.

Sebagai blogger pemula, saya juga ingin berbagi tips ini kepada anda :
1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"

3. Cari kode berikut di Template blog anda  :
(caranya : tekan ctrl+F dan akan muncul menu Find, kemudian masukkan kode yang akan anda cari)

<div class='post-body entry-content'>

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



4. Kalau sudah ketemu, Ganti kode tersebut menjadi seperti ini :


<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>


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


Tulisan "Read More....." itu bisa anda ubah, misalnya jadi "Baca Selengkapnya...", atau lainnya.

5. Simpan hasil pengeditan.
6. Kemudian pilih menu 
Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:
<span class="fullpost">


</span>


8. Kemudian Simpan.
9. Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode seperti berikut :
<span class="fullpost">


</span>


10. Letakkan abstrak posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore...") di atas kode ini :

<span class="fullpost
">

sementara sisanya yaitu keseluruhan posting letakkan di antara kode :

<span class="fullpost">

dan

</span>

11. Selesai

Selamat Mencoba...

Cara Membuat Scroll Pada Blog Archive (Arsip Blog) Blogspot

Tanpa basa basi, silahkan Klik Rancangan  Edit HTML

Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget

Kemudian cari kode seperti berikut(ini hanya contoh) :


<b:widget id='HTML6' locked='false' title='Cari di Blog ini' type='HTML'/>
<b:widget id='Label1' locked='false' title='Label' type='Label'/>
<b:widget id='BlogArchive2' locked='false' title='Arsip' type='BlogArchive'/>
<b:widget id='HTML4' locked='false' title='5 Komentar Terbaru' type='HTML'/>
<b:widget id='HTML7' locked='false' title='5 Komentar Terbanyak' type='HTML'/>

cari kode Widget yang akan sobat berikan Scroll
Misalnya Arsip. Apabila judul Widget tersebut adalah Arsip, maka kodenya seperti berikut :

<b:widget id='BlogArchive2' locked='false' title='Arsip' type='BlogArchive'/>

Kode title adalah judul dari Widget. Apabila tidak diberi judul maka kodenya adalah title=' '
Yang harus sobat perhatikan dengan adalah kode id='BlogArchive2'
Perhatikan pada bagian BlogArchive2 itu adalah id dari Widget Arsip Blog.

kemudian cari kode ]]></b:skin> Copy kode dibawah dan Paste di atasnya

#BlogArchive2 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Ganti bagian BlogArchive2 dengan id dari Widget yang akan di beriScroll 
Misalnya Label atau Profil

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba
Mungkin anda kadang melihat blog yang masih menampakkan navigasi bar.Secara default saat anda membuat blog,akan tampak navigasi bar yang terletak di bagian atas blog. Navigasi bar berguna untuk mempercepat login ke account blog anda untuk mengedit atau menambah postingan. Karena anda bisa langsung menekan tombol Sign in untuk masuk ke dashboard blog anda.

Jika anda telah menghilangkannya, maka untuk melakukan pengeditan atau menambah postingan, anda harus log in ke account blog anda pakai url:
http://www.blogspot.com 



Untuk menyembunyikannya, anda bisa gunakan prosedur berikut:

1. Login ke dashboard anda
2. Pilih Tata Letak => Edit Html => Centang "Expand Template Widget"


3. cari kode seperti di bawah ini


![CDATA[


4. Masukkan kode berikut setelah kode di atas

#navbar {
height: 0px;
visibility: hidden;
display: none;
}



5. Klik tombol SIMPAN Template. Silahkan Lihat perubahan pada blog anda.

Catatan:
Jika di template anda menemukan kode
/*-- teks */
letakkan script setelah /* --teks --*/
karena script atau teks yang ada dalam cakupan /* teks */ tidak diproses, karena dianggap sebagai keterangan.

Contoh:

![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders 3
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

diubah menjadi:

![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Rounders 3
Date: 27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar {
height: 0px;
visibility: hidden;
display: none;
}





Selain menghilangkan navbar, kita juga dapat membuat navbar autohide, yaitu navigation bar (nav bar) akan muncul saat mouse beada di posisi paling atas blog, jika mouse digerakkan/atau dipindahkan dari lokasi navbar, maka navbar akan menghilang(disembunyikan)


Untuk membuat navbar autohide, cukup ganti kode

#navbar {
height: 0px;
visibility: hidden;
display: none;
}


menjadi:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)} 



silakan mencabo!!!

Kamis, 21 Juli 2011

Cara Membuat Menu Dropdown

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :


Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :


Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://henzoneblog.blogspot.com/2011_07_01_archive.html"> Cara Membuat Sitemap </option>
<option value="http://henzoneblog.blogspot.com/2011_07_01_archive.html"> Daftar Anggota Adsense</option></select>

maka hasilnya akan seperti ini :



untuk menambahkan menu lagi, tambahkan kode seperti ini :

<option value="Links 2">Text 2</option>

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

ganti dengan kode ini :

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

hasilnya akan seperti ini :



Gimana? Bisa nggak?

Cara Membuat Terjemahan Di Blog

Memasang widget translator atau "Penerjemah" pada blog banyak sekali gunanya. Translator ini berguna apabila ada pengunjung dari negara lain yang secara sengaja maupun tidak yang melihat blog kita dan tidak tahu bahasa kita maka mereka bisa menggunakan widget ini untuk menterjemahkannya kedalam bahasa yang mereka inginkan (tentunya yang sudah ada di widget ini). Widget ini sudah support untuk bahasa Indonesia. Dan kalo kamu mau, translator ini bisa juga untuk menterjemahkan tugas dari sekolah/kampus secara mudah. Dan hasilnya bisa lebih bagus daripada software transtool lho. Gimana? mau membuatnya? caranya mudah lho. Gini nih...

1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget=".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script>

5. Kemudian simpan.

Coba sekarang lihat blogmu maka ada tampilan seperti ini :

Gadgets powered by Google


Coba dites apakah translator tersebut bekerja dengan baik atau tidak.
Gimana? gampang kan...

Cara Membuat Menu Tab View


Karena sering ditanya tentang bagaimana caranya membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru", "Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :




Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */ 
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. 
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode</head>

<script src='http://henzoneblog.blogspot.com' type='text/javascript'/>


6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div>
</div>


</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.