Cara Membuat Blog dan Tips Trik Blog

Jumat, 25 November 2011

Membuat Headline New Artikel Anda

Jika Anda ingin membuat tampilan blog menjadi lebih kelihatan menarik dan keren, silahkan memanfaatkan fasilitas penyedia headlines. Judul-judul artikel blog Anda pada saat yang sama membantu Anda untuk menampilkan artikel-artikel Anda supaya menarik perhatian pengunjung blog untuk membaca artikel-artikel yang tampil, berarti Anda patut untuk mencoba widget "Headline News" di blog Anda.
Caranya sangat mudah.

1. Login ke Blogger
2. Klik Rancangan
3. Tambahkan gadget Anda dan pilih HTML/Javascript
4. Copy kode di bawah ini lalu paste ke kolom gadget HTML/Javascript.

<script type="text/javascript"
> var hn_url_blog = "http://namablog-Anda.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script> <script src=" http://wittoblog.googlecode.com/files/Headline-wito1.js "> </script>

Keterangan:
Ganti kode yang berwarna biru dengan url blog Anda,
var hn_url_blog = URL blog,
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan,
var hn_warna_latar = warna latar belakang headline news,
var hn_warna_garis = garis border headline news,
var hn_posisi = posisi headline news,
var hn_backlink = bila ingin backlink ditampilkan,

5. Jangan lupa disimpan.

Selamat mencoba.

Baca Selengkapnya......

Hack Tag HTML Blogspot Anda

Hal pertama yang dilakukan ketika membuat template blogger, melakukan reset, katakanlah seperti itu. Reset Blogger Template yang dimaksud disini adalah untuk memperbaiki tampilan dan struktur dasar template, agar lebih baik.

RESET CSS

Reset CSS yang digunakan, yang simpel, jadi tidak terlalu banyak dan tidak membebani, yaitu:

*{margin:0; padding:0;}
.post-body ol,.post-body ul {margin:5px 20px;}

RESET BAWAAN BLOGGER

Reset ini lebih berfungsi untuk menyembunyikan (hack) bawaan blogger yang menurut blog ini menggangu, seperti: "Navbar, Quick Edit, Status Massage, dan Feed Link". Reset Bawaan Blogger keseluruhannya seperti ini:

#navbar-iframe, .status-msg-wrap, .icon-action, .quickedit, .feed-links {display: none;}

Tapi juga bisa dilakukan dengan cara yang ekstrim seperti dibawah ini:

1. Menambah kode berikut diantara </head> dan <body>; untuk menghilangkan Navbar



2. Menghapus Semua Kode Quick Edit (aktifkan Expand Widget Templates)

<b:include name='quickedit'/>

3. Menghapus Feed Link (aktifkan Expand Widget Templates)

CSS nya:

.feed-links {
clear: both;
line-height: 2.5em;
}

HTML nya:

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

4. Menghapus Status Massage (aktifkan Expand Widget Templates)

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

RESET HEADING

Idealnya Hirarki Heading (h1-h6) sebagai berikut:

h1 = Judul Blog
h2 = Judul Post
h3 = Judul pada Sidebar/Footer (widgate)
h4 = Judul Komentar

Jadi di Blogger Template perlu ada pembenahan pada judul Post (h3), judul pada Sidebar dan Date (h2).

1. Pembenahan pada Judul Post

Pada Kode CSS:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Pada Kode HTML:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

- Ubah heading h3 menjadi h2

2. Pembenahan pada Judul pada Sidebar/Footer (widgate)

Pada Kode CSS:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Pada Kode HTML:

<h2 class='title'><data:title/></h2>

Ubah heading h2 menjadi h3

3. Pembenahan pada Date

Menurut blog ini 'date' tidak perlu menggunakan tag heading, karena kurang memiliki nilai. Jadi tag heading pada 'date' dapat Anda hapus.

Pada Kode CSS:

h2.date-header {
margin:1.5em 0 .5em;
}

Hilangkan h2 nya sehingga menjadi:

.date-header {
margin:1.5em 0 .5em;
}

Pada Kode HTML:

<h2 class='date-header'><data:post.dateHeader/></h2>

Ganti h2 menjadi div seperti:

<div class='date-header'><data:post.dateHeader/></div>

Penutup

Demikian keseluruhan reset Blogger Template yang dapat Anda lakukan dalam mengedit template. Tapi reset ini jangan digunakan untuk Free Blogger Template, terutama untuk Reset Heading. Mungkin Anda punya cara lain juga. Kalau mau silahkan berbagi dikomentar.

Baca Selengkapnya......

Pasang Widget SMS Gratis

Anda mungkin kehabisan pulsa dan sedang browsing di dunia maya lalu ingin memberikan informasi yang menarik via SMS ke teman Anda. Jangan kuatir blog ini akan memberitahu widget yang bisa dipasang dan digunakan untuk mengirim SMS GRATIS via blog Anda. Dan seperti judul di atas, blog ini tidak akan panjang lebar dalam membahasnya.
Dan juga tentunya keunggulan dari memasang widget ini ialah dapat mendatangkan trafik pengunjung tambahan buat blog Anda. Namun masih ada kekurangan dari widget ini yaitu tidak bisa menerima SMS balasan. Sehingga bila ada yang membalas SMS, Anda tidak bisa membacanya. Namun walaupun seperti itu widget ini sangat bermanfaat terutama untuk Anda yang suka ber-SMS ria. Dan yang terpenting pesan Anda dapat segera terkirim ke teman. Oke!

Silakan copy/paste kode di bawah ini:

<a href="http://snifan.blogspot.com/" target="_blank"><iframe name="widgetsms" src="http://www.sms-online.web.id/widget" rel="nofollow" style="border:0" scrolling="no" width="270" height="350"> not support </iframe></a>

Silakan Anda login dahulu ke Blogger:

- Pilih rancangan,
- Tambah widget baru,
- Setelah itu Anda pilih,
- Edit HTML/Javascript,
- Paste-kan kode yang sudah Anda copy tadi.

Sekarang blog Anda sudah bisa melayani SMS gratis buat Anda juga para pengunjung, lumayan bisa menambah trafik di blog Anda.

KIRIM SMS GRATIS

huruf lagi
<p>Your browser does not support iframes.</p>

Semoga bermanfaat.

Baca Selengkapnya......

Cara Membuat Iklan Tampil Melayang Di Blog

Pernahkah Anda mengunjungi blog dengan iklan/gambar melayang di depan halaman blognya? Nah, Blog Tips kali ini memberikan tips kepada Anda bagaimana caranya membuat iklan melayang dengan tombol close?
Pertama Login ke Blogger lalu pilih rancangan, elemen halaman, dan masukkan kode html dibawah ini:

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang Anda inginkan di sini

</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

Klik simpan dan lihat hasilnya, selamat mencoba!

Baca Selengkapnya......

Tips Mempercepat Loading Form Komentar

Selain mengandung banyak error dan tidak valid HTML, sebenarnya form komentar default blogger juga mempunyai permasalahan lain. Terdapat "keanehan" dalam cara penulisan kode pemanggilan iframe form tersebut. Kenapa dibilang aneh? Karena pemanggilan iframenya dibuat terpisah menjadi dua bagian.
Kode src yang biasanya digunakan untuk memanggil data external, entah kenapa dibuat terpisah dengan tautan link menuju halaman form komentar yang asli di Blogger.

Dan ini membuat loading form komentar menjadi lambat. Efeknya mungkin tidak akan terlihat ketika pengunjung membaca isi artikel blog Anda sampai habis terlebih dahulu. Why? Karena saat pengunjung selesai membaca artikel, form komentar memang sudah berhasil diloading dengan sempurna. Tapi, kalau kita bandingkan lama loading form komentar dengan widget-widget lainnya, dijamin pasti akan terlihat seberapa lambatnya iframe tersebut.

Seringkali, elemen sidebar lebih duluan tampil dibanding form komentar. Hal ini tentu saja membingungkan karena seharusnya form komentar adalah elemen yang tampil pertama kali setelah konten artikel sesuai dengan letak kodenya yang berada persis dibawah kode artikel utama blog. Baru setelah itu kode sidebar dan footer.

Dan kalau blog Anda mengalami masalah yang persis seperti pembahasan sebelumnya, berikut ini ada cara untuk memperbaiki "keanehan" form komentar tersebut.

1. Masuk ke menu Edit HTML blog Anda, kemudian berikan tanda centang pada kolom Expand Widget Template. (Jangan lupa untuk membackup blog terlebih dahulu, untuk berjaga-jaga dari kesalahan waktu meng-edit kodenya)

2. Carilah kode seperti di bawah ini pada template Anda:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

3. Perhatikan kode diatas. Kode data:post.commentFormIframeSrc dan src'' yang seharusnya bisa ditulis bersamaan, malah dibuat terpisah, dengan target src iframe yang dibiarkan kosong.

Dan karena browser biasanya cenderung lambat dalam merespon kode src yang null alias kosong, maka kita harus mengganti struktur penulisannya menjadi lebih benar. Bagaimana caranya?

--> Pindahkan kode data:post.commentFormIframeSrc kedalam target src'' yang kosong, seperti ini:

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

4. Save template, dan cek kinerja form komentar Anda sekarang.

Baca Selengkapnya......

Cara Membuat Kotak Fans Page

Apakah Anda ingin menampilkan seberapa banyak fans blog Anda di Facebook? Saat ini Facebook menyediakan berbagai macam aplikasi dan widget yang dapat Anda gunakan di website atau blog Anda. Tapi kali ini saya akan membahas bagaimana cara membuat like box (dulu disebut fan box) dan menampilkannya di blog Anda.

Like box adalah sebuah widget yang dapat Anda tampilkan di blog atau website Anda, berupa kotak yang berisi foto-foto dari profile Facebook yang menyukai, atau meng-like blog kita dengan mengklik tombol like yang terdapat di kotak tersebut. Like Box dahulu bernama Fan Box dan tombol like di dalam kotak itu dulu ditulis become a fan. Tidak tahu kenapa Facebook menggantinya dengan like, menurut saya kata-kata become a fan agak sedikit terlalu berlebihan, tidak seperti kata like yang lebih familiar dan lebih ringan didengar.

Ada banyak keuntungan menggunakan Like Box, disamping dapat mendatangkan traffic dari Facebook, akan ada kepuasan tersendiri jika banyak yang menyukai blog kita. Tentu saja untuk menampilkan sebuah Like Box kita harus membuat page di Facebook. Page adalah fasilitas dari Facebook, penggunaannya sama seperti halnya profil pribadi Facebook kita, kita dapat menuliskan status, dan sharing apapun disana. Hanya saja di page ini tidak fasilitas add friend request atau approve friend request. Yang ada hanya tombol like itu tadi. Dan jika kita sudah meng-like sebuah page di Facebook, kita tidak perlu menunggu disetujui dahulu oleh sang empunya page.

Lalu bagaimana cara membuat page di Facebook?

Setelah login, klik link ini Create Facebook Page, selanjutnya pilih salah satu jenis halaman yang akan dibuat, berikut ini:
- Tempat atau Bisnis Lokal
- Perusahaan, Organisasi, atau Institusi
- Merek atau Produk
- Artis, Band, atau Tokoh Masyarakat
- Hiburan
- Gerakan atau Topik

Selanjutnya pilih kategori halaman yang tersedia, tulis Nama Halaman yang akan dibuat, dan beri tanda centang pada "I agree to Facebook Pages Terms" atau yang bertuliskan "Saya adalah perwakilan resmi bagi orang, bisnis, grup musik, atau produk ini, dan memiliki izin untuk membuat Halaman ini", serta akhiri dengan mengklik tombol Memulai. Jika Anda tidak masuk pada salah akun Facebook ketika membuat halaman, silakan klik tombol Buat Halaman Komunitas atau jika halaman yang dibuat bersifat resmi, pilih yang di sebelah kanannya dengan mengisi data yang diperlukan dan akhiri dengan mengklik tombol Buat Halaman Resmi.
Sekarang halaman Anda telah berhasil dibuat, silakan tambahkan informasi lainnya, dan undang teman Anda untuk bergabung atau menjadi penggemar di halaman tersebut.

Selanjutnya Anda dapat menambahkan foto atau mengedit profil sesuai dengan keinginan Anda.

Cara Membuat Like Box

Setelah selesai membuat Official Page pribadi Anda di Facebook, langkah selanjutnya adalah membuat Like Box.

- Klik Edit page.

- Lalu klik Promote with a Like Box.

- Pada Facebook Page ID isikan dengan Facebook Page ID Anda.
- ID ini dapat Anda temukan di address bar browser Anda.

- Maka akan Like Box Anda akan muncul. Anda tinggal mengatur saja Width, Height, Connections, Stream, Headernya.

Width: lebar dari Like Box, Height: tinggi dari Like Box, Connections: jumlah orang yang meng-like page Anda (sesuaikan dengan header dan width), Stream: aktivitas live terbaru dari page Anda, Header: opsi untuk menampilkan Find us on Facebook atau tidak.
Setelah selesai Anda setting, klik Get Code

- Dan akan muncul 2 macam kode yang dapat Anda pilih.

Saya menyarankan Anda gunakan XFBML, karena kelebihan dari XFBML adalah lebih flexible dibandingkan dengan iframe.
Kelebihan lain dari XFBML adalah Like Box yang Anda pasang nanti tidak akan menghalangi loading element lain di blog Anda. Berbeda dengan iframes, contoh: Like Box Anda taruh di sidebar bagian atas, jika loading Like Box ini belum sempurna, maka widget atau elemen lain di bawah Like Box akan loading sebelum Like Box Anda di-load secara utuh.
Namun ada kode yang harus Anda tambahkan agar Anda dapat menambahkan kode XFBML ini. Masukkan kode dibawah ini di header.php Anda setelah itu copy kode Javascript SDK yang ada di halaman tersebut.

Baca Selengkapnya......

Tips Pasang Auto Readmore

Walau Blogger sudah menambahkan fitur "jump break" pada default postingnya, nampaknya pilihan AUTO READ MORE masih menjadi pilihan favorit kebanyakan Blogger dengan fitur read more yang otomatis, Anda tidak perlu bersusah payah dalam menyelipkan kode HTML pada artikel Anda, agar artikel menjadi dua bagian (bagian yang tampil di depan dan bagian yang tampil setelah di klik).
Cukup menulis artikel menarik yang Anda bisa, lalu fitur Javascript akan langsung membuat ringkasan artikel Anda dengan word count tertentu. Hebatnya, dengan Javascript, gambar (image) pertama yang ada pada artikel, juga akan secara otomatis diletakkan pada sisi kiri atas artikel. Tentunya jauh lebih mudahkan? Lalu bagaimana cara menambahkan fitur Auto Read More ini pada template Anda?
Simak petunjuk berikut ini:

1. Login ke akun blog Anda. Pada menu dasbor, pilih Rancangan.
2. Selanjutnya, masuklah ke menu Edit HTML, sebelumnya backup dulu template Anda dengan cara mengklik link " Download Full Template".

3. Cari kode </head>, dan taruh script di bawah ini di atas kode </head>:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>

4. Jangan lupa klik "simpan".
5. Centang "Expand widget template".
6. Cari kode <data:post.body/>, dan ganti kode tersebut dengan kode di bawah ini:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
</b:if>

7. Save. Lalu apa saja kode yang perlu di ganti?

Catatan:

- var thumbnail_mode = "float"; > Anda dapat mengganti letak gambar artikel. Apakah ingin ditempatkan di samping kiri artikel, atau jika Anda tidak menginginkannya ganti "float" dengan "no-float".
- summary_noimg = 250; > Jumlah teks yang tampil pada artikel tanpa gambar.
- summary_img = 250; > Jumlah teks yang tampil pada artikel yang bergambar.
- img_thumb_height = 120; > Ukuran tinggi gambar yang tampil.
- img_thumb_width = 120; > Ukuran lebar gambar yang tampil.

Ganti teks Read more...(Perhatikan langkah No.6) dengan teks yang Anda inginkan.

Selesai!

Baca Selengkapnya......