Jika kita mengotak-atik atau mengedit HTML blog kadang-kadang akan mengalami kesulitan, apalagi bagi yang masih pemula. Entah itu tidak bisa menemukan kode yang mau diedit, tidak bisa disimpan karena error, Ada pesan error yang tidak jelas, dan masalah-masalah lainnya. GTTB kali ini akan mencoba bagaimana cara untuk mengatasi atau setidaknya mengurangi masalah yang kadang-kadang atau sering terjadi tersebut.
Berikut ini beberapa tips untuk edit HTML bogger:
1. Backup Template
2. Memberi Tanda Centang pada Kotak "Expand Widget Template"
3. Tips Mempermudah Pencarian
4. Tips Menghadapi Error Yang Muncul
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure.....
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan bener-benar sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol "Clear Edit" terlebih dahulu.
Tips Mengedit HTML Blogspot
Cara Membuat Tulisan Animasi/Gerak
Sesuai permintaan dari sahabat, cara pembuatan efek tulisan bergerak (animasi) dengan format file gif. Animasi ini dibuat dengan program photoshop pada awalnya, kemudian proses pembuatan animasinya dengan menggunakan Adobe Image Ready. Jika photoshop yang digunakan adalah versi CS3, maka animasi ini bisa dibuat langsung dengan Photoshop, tanpa harus menggunakan image ready.
Tutorial pembuatan animasi tulisan dengan Photoshop :
Langkah 1
Buatlah sebuah file baru dengan Photoshop. Ukuran file bisa disesuaikan dengan kebutuhan Anda. Pada tutorial ini, saya menggunakan sebuah file yang berukuran 468 x 60 pixel; 72 dpi; RGB; content=white.
Langkah 2
Buatlah sebuah tulisan dengan menggunakan Type tools pada Photoshop.
Langkah 3
* Jika Anda menggunakan versi Photoshop 7 hingga CS:
Klik icon Jump to Image ready. Icon ini terletak di sebelah bawah pada Tools Box. Anda juga bisa memilih menu File > Jump To > Adobe ImageReady 7.0 (pada Photoshop 7), atau File > Edit in Image Ready (pada Photoshop CS).
* Jika Anda menggunakan versi Photoshop CS3:
Pilih menu Window > Animation
Langkah 4
Akan Anda dapati sebuah palet panjang di sebelah bawah (bentuk tampilan relatif sama baik pada Image Ready ataupun Photoshop CS3).
Jika perlu, perlebar tampilan palet ini dengan melakukan klik dan geser pada sudut kanan bawah palet tersebut.
Langkah 5
Geser tulisan hingga ke sebelah kiri luar dari background yang putih, hingga seluruh tulisan tidak nampak.
Langkah 6
Klik icon Duplicate current frame.
Langkah 7
Sekarang ada 2 frame pada palet Animation. Pastikan yang terpilih sekarang adalah frame kedua.
Geser lagi tulisan hingga sisi kanan luar dari background.
Langkah 8
Klik icon Tweens animation frames.
Tujuan penggunaan Tween ini adalah untuk mempermudah pembuatan frame-frame animasi. Tween akan menambahkan frame secara otomatis berdasarkan perbedaan posisi, ukuran, tranparansi, dan efek pada obyek.
Kemudian akan muncul kotak dialog baru, seperti gambar tutorial berikut ini.
Pada kotak dialog ini, kita bisa mengatur:
* Tween with: digunakan untuk memilih frame mana yang akan kita gunakan sebagai dasar animasi berdasarkan frame yang aktif. Karena kita aktif pada frame kedua, maka yang tepat adalah Previous Frame.
* Frame to Add: digunakan untuk memilih jumlah frame yang akan ditambahkan. Semakin banyak jumlah frame, animasi akan semakin nampak halus, tetapi ukuran file hasil jadinya akan semakin besar.
* Layers: digunakan untuk memilih animasi pada antara semua layer, atau hanya pada layer yang aktif saja.
* Parameters: digunakan untuk memilih jenis perubahan obyek yang digunakan sebagai dasar animasi
Langkah 9
Klik icon Plays/stops animation.
Animasi sudah jadi. Jika Anda menginginkan pengaturan kecepatan animasi, bisa Anda pilih dari tulisan 0 sec disebelah bawah frame.
Jika pengaturan kecepatan ini akan dilakukan pada banyak frame sekaligus, maka klik sebuah frame, kemudian tekan dan tekan tombol Shift, lalu klik frame yang lain. Bisa juga dengan Ctrl + klik frame yang lain. Setelah terpilih banyak frame sekaligus, baru ubah kecepatannya. Pengubahan kecepatan animasi akan berlaku pada semua frame yang terpilih.
Untuk menyimpan hasil animasi, pilihlah menu File > Save Optimized pada Adobe ImageReady. Atau File > Save for Web & devices pada Photoshop CS3. Pastikan format file yang dipilih adalah gif.
Berikut ini adalah hasil dari tutorial ini, sebuah tulisan dengan efek gerak yang disimpan dengan format file gif.
Silahkan dicoba dan digunakan sebagai tambahan materi belajar photoshop. Berikut ini ada 1 buah contoh file lain. Silahkan dicoba sendiri juga untuk membuat seperti gambar berikut ini :
Berikut Ini adalah banner Gudang-Info.com, mungkin ini bisa menjadi bahan dan tujuan belajar Anda :
Meningkatkan Trafik Blog Melalui Twitter Dengan Memasang Button Tweetmeme / ReTweet
Banyak sekali usaha untuk meningkatkan trafik, salah satunya membagikannya melalui jejaringan sosial twitter. Namun sekedar hanya berbagi artikel melalui twitter sendiri saja tidak cukup lho, tidak masalah kalo list friend di Twitter kita sudah mencapai ribuan follower, tapi kalo cuman 50-100 sepertinya tidak terlalu efektif. Nah, dari pada pusing tiap hari mem-follow orang-orang yang gak jelas belum tentu mereka follow balik, alangkah baiknya kita meminta bantuan pembaca sendiri untuk membagikan link artikel kita di twitter mereka masing-masing. Cara yang paling mudah salah satunya bisa dengan memasang button dari Tweetmeme atau Retweet.
Di tutorial ini, ada 2 jenis button, untuk selengkapnya yuk mari kita lanjut..
1. Untuk memasang button ini, pertama masuk kehalaman EDIT HTML, kemudian beri tanda centang pada Expand Template Widget.
2. Cari kode <div class='post-header-line-1'/>
3. Salin/letakkan kode berikut (warna biru) tepat di bawahnya:
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>'
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>
Button ini ada 2 ukuran, cara memasang button ini sama dengan cara atas, yaitu:1. Untuk memasang button ini, pertama masuk kehalaman EDIT HTML, kemudian beri tanda centang pada Expand Template Widget.
2. Cari kode <div class='post-header-line-1'/>
3. Salin/letakkan kode berikut (warna biru) tepat di bawahnya:
<script type="text/javascript">
url = '<data:post.url>';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>
Jika ingin ukuran kecil:
<script type="text/javascript">
url = '<data:post.url>';
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>
Tweetmeme atau Retweet memiliki nilai counter tersendiri untuk menilai seberapa banyak link kita yang telah dibagikan oleh pembaca. kita dapat melihat nilai tersebut langsung pada buttonnya.
Follow TomieDLuffy, jangan lupa konfirmasi, nanti follow balik
Cara Menampilkan Recent Post (Postingan Terbaru)
Maksudnya, untuk menampilkan postingan-postingan dari yang terbaru sampai terlama (tergantung berapa postingan yang ingin ditampilkan)
Contohnya, seperti yang ada di kanan "sidebar" kanan
Cara Menampilkan Recent Post (Postingan Terbaru) :
1. Masuk ke account blogger.
2. Masuk ke Laypout (Tata Letak)
3. Kemudian klik Add a Gadget (Tambah Tata Letak) -> HTML/Javascript
4. Masukkan scrift di bawah ini :
<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>5. Ganti "YourBlogName" dengan nama blog kamu.
<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&alt=json-in-script&callback=rp">
</script>
6. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, Anda bisa menggantinya
7. Simpan dan lihat hasilnya.
8. Selamat Mencoba
BONUS Tambahan
Ingin menggunakan scrol,
1. Masukan kode berikut :
<div style="border: 0px solid; overflow: auto; width: 200px; height: 200px; text-align: left;">2. Masukan kode Recent Post di Atas,
3. Masukan kode </div>
4. Simpan
Silahkan ganti anggka 200, sesuai dengan selera ukuran Anda.
Membuat dan Menampilkan Emoticon Union V.3 di Kotak Komentar
Sebelumnya saya pernah memposting 'Cara Menampilkan Emoticon di Kotak Komentar', kali ini saya akan memberikan emoticon yang lebih komplit dan lebih banyak lagi, seperti seperti emoticon union yang saya pakai.
 :niceinfo: |  :infokacau: |  :tkp: |  :thxmana: |
 :hai: |  :hmm: |  :idea: |  :top: |  :senangnya: |  :malu: |  :kagum: |  :thx: |
 :cool: |  :belajar: |  :pusing: |  :haha: |  :bingung: |  :whew: |  :kaget: |  :sry: |
[Lihat Semua Emoticon Union]
link '[Lihat Semua Emoticon Union]' untuk menampilkan emoticon lebih banyak lagi. Untuk lebih jelasnya silahkan klik link di atas.
Cara Membuat & Menampilkan Emoticon Union di Kotak Komentar :
1. Login ke Blogger, Pilih Blog (Jika Anda mempunyai lebih dari 1 blog)
2. Pilih Layout (Tataletak) --> Edit HTML
3. Beri tanda centang pada kotak "expand widget template"
4. Lalu letakkan script berikut sebelum kode </body>
<script src='http://gi4tipstrick-blogspot.googlecode.com/files/emo_union_v.3.0.js' type='text/javascript'/>
5. Cari kode <b:if cond='data:post.embedCommentForm'>
6. Kemudian Letakkan kode berikut ini, sebelum kode
<b:if cond='data:post.embedCommentForm'>
7. Simpan
8. Selamat Mencoba
Pemberitahuan
- Kemungkinan Emoticon yang saya buat akan mengalami perubahan menuju lebih baik dan penambahan smile lebih banyak lagi. Nah, supaya dikemudian hari tidak mengalami kerusakan (error), biarkan tetap adanya (tidak mengedit atau menghapus kode-kode yang saya berikan).
- Pada halaman baru di link [Lihat Semua Emoticon Union] diharapkan untuk tidak menuju link lain, untuk mendapatkan info update terbaru.
- Jika Emoticonnya tidak muncul, mungkin sedang terjadi gangguan, Anda boleh mengeceknya di komentar-komentar di bawah, jika emoticonnya berfungsi berarti tidak masalah dengan trik ini
- Tapi jika emoticonnya tetap tidak berfungsi, itu dikarenakan template Anda tidak cocok dengan trik ini. Dan jika Anda tetap ingin menggunakan trik ini, sebaiknya Anda mencari template yang cocok dengan trik ini.
Cara Membuat & Menampilkan Top Commentators
Maksudnya adalah untuk menampilkan siapa saja yang paling banyak memberikan komentar, Anda bisa lihat di footer 'Commentator'
Cara Membuat & Menampilkan Top Commentators :
1. Masuk ke account blogger.
2. Masuk ke Laypout (Tata Letak)
3. Kemudian klik Add a Gadget (Tambah Tata Letak) -> HTML/Javascript
4. Masukkan scrift di bawah ini :
<script type="text/javascript">5. Ganti warna merah dengan alamat Anda,
function pipeCallback(obj) {
document.write("<ul>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ul>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=33e2eb4dc25c7c21b9c586e11d2bc904&url=http%3A%2F%2Fwww.gudang-info.com&num=11" type="text/javascript"></script>
6. Warna orange untuk menampilkan jumlah komentator.
7. Simpan dan lihat hasilnya.
8. Selamat Mencoba
BONUS Tambahan :
Ingin menggunakan scrol,
1. Masukan kode berikut :
<div style="border: 0px solid; overflow: auto; width: 200px; height: 200px; text-align: left;">2. Masukan kode Top Commentators di Atas,
3. Masukan kode </div>
4. Simpan
Silahkan ganti anggka 200, sesuai dengan selera ukuran Anda.
Cara Membuat Tabview
Cara Membuat Tabview :
1. Masuk ke account blogger.
2. Masuk ke Laypout (Tata Letak)
3. Cari kode ]]></b:skin>
4. Masukkan kode berikut sebelum kode di atas (point no. 4) :
div.TabView div.Tabs5. Perhatikan warna merah, silahkan ganti sesuai selera Anda,
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px; /* Lebar Menu Utama Atas */ text-align: center;
height: 50px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; /* 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: #000000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #44494d; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #44494d; /* 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;
}
6. Kemudian masukkan kode berikut sebelum kode </head> :
<script src='http://gi4tipstrick-blogspot.googlecode.com/files/tabview.js' type='text/javascript'/>7. Simpan
8. Langkah selanjutnya, pergi ke 'Elemen Laman'
9. Kemudian klik Add a Gadget (Tambah Tata Letak) -> HTML/Javascript
10. Masukkan kode script berikut :
<form action="tabview.html" method="get">11. Silahkan ganti warna merah sesuai selera Anda.
<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>
12. Selesai, Selamat Mencoba
Bonus Tambahan :
Bagi Anda yang ingin 2 tabmenu hapus warna hijau, dan jika ingin lebih dari 3 tabmenu copy warna hijau kemudian paste tepat di bawahnya.
