0 Cara Ganti Template Blog

Ini adalah cara mengganti template blogger atau blogspot versi lama sedangkan untuk versi baru silahkan lihat di sini. Pertama kamu harus membackup dulu tempalte kamu jika template baru kamu tidak berhasil diinstall, caranya masuk ke menu "Layout --> Edit HTML", trus klik link bertuliskan "Download Full Template" terus simpan file yang diberikan.

Kedua yaitu membackup elemen-elemen atau widget-widget yang sudah pernah kamu pasang, caranya gini, Masuk ke menu "Page Element", disitu kan banyak tuh element-element yang udah kamu pasang trus dibawahnya kan ada link bertiliskan "edit" klik link-link tersebut satu persatu, copy isi dari elemen itu dan taruh dalam notepad. Kalo kamu nanti dah ganti template dan mau memasang elemen-elemen tersebut tinggal copy dari notepad terus pasang di "add page elements".

Untuk mengganti template pertama klik link ini, kemudian download template blog yang kamu inginkan. nah setelah selesai download, ikuti langgkah berikut ini:

• ekstrak dahulu file xml nya
• login ke blog anda
• masuk ke Dasbor
• Tata letak
• Edit HTML
• Nah disitukan ada tombol Browse, cari file xml. yang sudah anda ekstraksi
• kemudian klik Unggah atau Upload
• klik dahulu kolom Prevew atau Pratinjau untuk melihat hasilnya sebelum di simpan
• terakhir klik simpan template atau save template

Selesai deh.....

0 Cara Membuat Menu Tab View

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.

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 biru muda, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://superinhost.com/trikblog/tabview.js' 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.

0 Membuat Kata dan Kalimat Berkedip

Klo kita sering liat web atau blog yang ditampilannya terdapat kata atau kalimat yg berkelap kelip misalnya seperti kata ini yg sedang kelap kelip, mungkin buat yang belum tau, pasti kita sedikit heran..gimana y caranya..?

dulu juga sy kaya gtu, bingung banget, kq bisa y...tp ternyata setelah ditelusuri lebih lanjut..gampang banget, kita cuma tinggal sisipkan aja kode HTML di dalam kata atau kalimat yang mau kita kelap kelipkan..

kode HTML nya seperti ini.....

<blink>(Kata yang ingin anda kelap kelipkan)</blink>

contoh kalimat yg mau kita kelap kelipkan :

"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"

caranya kita tinggal sisipkan aja kode HTML diantara kalimat tersebut menjadi :

<blink>"ternyata gampang sekali y untuk mengkelap kelipkan kata itu"</blink>

Mudah Kan..
Jangan lupa, trik ini cuma bisa kita pake buat yang mendukung HTML aja, contohnya klo di blogger, masuk ke "ADD GADGET"---->"HTML/ Java Script". klo yang ngga ngedukung HTML sih jangan digunakan not mach...

0 Cara Mengedit HTML Blogspot

Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to...??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah "lah-lah" yang kadang2 atau sering terjadi tersebut.
Berikut ini beberapa tips untuk edit HTML bogger:

1. Backup Template
Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.

2. Memberi Tanda Centang pada Kotak "Expand Widget Template"
Ini yang kadang2 dilupakan para "editor". Kalau kotak "Expand Widget Templates" tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.

3. Tips Mempermudah Pencarian
Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan "Ctrl+f" lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode <p><data:post.body/></p> jika tidak ketemu maka cb carilah sebagiannya atau seperti ini data:post.body kalau sudah ketemu maka klik tombol next untuk melihat apakah ada kode lain yang sama untuk memastikan kode yang dikehendaki.tips ini paling mudah jika kita menggunakan browser Mozilla Firefox".

0 Membuat Menu Windows Eksplorer

Apa itu menu Dtree (D-Tree) ? itu lho menu yang memiliki struktur seperti pohon, yang punya cabang-cabang itu lho, Seperti kalo kita membuka Windows Explorer. Menu yang seperti gambar dibawah ini atau seperti contoh ini.



Menu Dtree ini sangat berguna jika kamu memiliki postingan yang buanyak, karena dengan menggunakan menu Dtree maka akan bisa menghemat space/ruang yang ada di blogmu. Nah kamu pingin tahu cara membuatnya?

Beginilah cara membuatnya :

1. Login to Blogger, trus pilih "Layout --> Edit HTML"
2. Taruh kode berikut ini diatas kode <head>

<linkrel="StyleSheet" href="http://www.geocities.com/uddin_81/dtree.css"
type="text/css" />
<scripttype="text/javascript" src="http://www.geocities.com/uddin_81/dtree.js"></script>

3. Trus Klik Tombol "Save

4. Setelah itu copy kode berikut ini dan pasang di sidebar kamu, udah tahu tho cara pasangnya? itu lho di menu "Page Element" trus klik "Add a Gadget --> HTML/Javascript". Inolah script yang harus kamu copy di sidebar kamu.

<div class="dtree">
<script type="text/javascript">
<!--
d = new dTree('d');
d.add(0,-1,'My example tree');
d.add(1,0,'Node 1','link.html');
d.add(2,1,'Node 1.1','link.html');
d.add(3,2,'Node 1.1.1','link.html');
d.add(4,3,'Node 1.1.1.1','link.html');
d.add(5,0,'Node 2','link.html');
d.add(6,5,'Node 2.1','link.html');
d.add(7,5,'Node 2.2','link.html');
d.add(8,0,'Node 3','link.html');
d.add(9,0,'Node 5','link.html');
document.write(d);
//-->
</script>
</div>

berikut ini keteranganya:
- Ganti tulisan "link.html" dengan link kamu (judul posting kamu).
- Angka yang pertama harus unik tidak boleh ada yang sama (d.add(1,0,’Node 1’,’link.html’);
- Angka yang kedua merupakan cabang dari angka pertama (perhatikan angka-angka yang memiliki warna sama).
- Kamu bisa mengganti icon-iconnya dengan icon kamu sendiri, contoh scriptnya akan seperti ini:

d.add(10,0,’Profile’,’link.html’,’’,’’,’http://kendhin.890m.com/dtree/trash');


Ganti text "http://kendhin.890m.com/dtree/trash.gif" dengan alamat gambar kamu.

0 Cara Membuat Menu Vertikal

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal . Contohnya seperti gambar dibawah ini:



Beginilah cara membuatnya :
1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna biru muda (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Pilihan Warna menu vertikal :

blue1.gif
blue2.gif
green1.gif
green2.gif
red1.gif
red2.gif
pink1.gif
pink2.gif
black1.gif
black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-blog-nyaman.blogspot.com">Trik Blog</a></li>
<li><a href="http://trik-nyaman.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna biru muda adalah linknya dan yg warna kuning adalah teks yang ditampilkan.

0 Cara Menampilkan Posting Baru

Kamu pingin nampilin postingan terbaru (Recent Post) kamu di side bar?
Kalo pingin, beginilah caranya :

1. Login to Blogger kemuduan pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).
3. Copy kode berikut ini dan taruh dalam kotak "content".

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

4. Ganti YOURBLOGNAME dengan nama blog kamu.
5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya
6. Terus Simpan.