Menyingkap Rahasia Sukses Ngeblok

Sabtu, 12 Oktober 2013

CAra Mudah membuat Menu Arsip Blog di blogspot

Berikut Tutorial dengan sedikit gambar yang berhasil saya rangkum untuk " CAra Mudah membuat Arsip Blog dalam Format Tahun" berikut

1. Yang pastinya seperti biasa, bukalah Akun Blogger Sobat
2. Pilihlah Layout >> Tambah Gadget
3. Lalu pilihlah Arsip Blog
4. lalu pilihlah model * Dropdown- Menu

5. dan yang terakhir tekanlah OK/ Save maka hasilnya akan seperti ini

Semoga bermanfa'at.

Cara Membuat Menu Drop Down dengan Edit Html

Bagi yang masih belum mengerti apa itu Drop Down saya akan menjelaskan sedikit mengenai Menu Drop Down

Menu Drop Down adalah Menu link yang apabila disentuh dengan Mouse nanti akan ada menu link yang jatuh kebawah.Contohnya Nanti akan saya tampilkan di bawah tulisan ini.

Membuat Menu Drop Down juga bisa menambah peningkatan SEO Friendly Blog,karena dengan adanya menu Drop Down pengunjung blog anda akan lebih gampang mencari Informasi yang dia butuhkan.

Untuk Membuat menu Drop Down silahkan anda Copy Kode di bawah ini:

Setelah anda Copy silahkan anda masuk ke dasbor dan pilih >> Tata Letak dan Pilih Gadget HTML.lalu Paste Kode diatas.Lalu letakkan gadget HTML di tata letak header.Lalu simpan.
Untuk mengubah warna silahkan anda berkreasi sendiri.
Sekian Cara Membuat Menu Drop Down dengan Edit Html semoga bermanfaat.

Cara buat Arsip pull-down di Blogspot

Kalau kita sudah ngeblog setahun, maka arsip dari Januari sampai Desember akan berjejer di sidebar kita. Lalu bagaimana kalau dua dan tiga tahun lagi?

Dalam konsep blog, setiap posting kita akan terarsip otomatis secara rapi setiap bulan. Setiap memasuki bulan baru, seperti Januari, maka arsip bulan Desember akan tampil di sidebar.

Langkah praktis mengatasi hal ini adalah dengan membuat pull-down menu seperti di bawah ini:

- Archives – January 2004 February 2004 March 2004 April 2004 May 2004

Jadi, berapa bulan/tahun kita blogging di blogger/blogspot, menu bulan-bulan tsb tidak akan memenuhi dan berjejer panjang di sidebar kita. Yg tampak hanya nama “Archives”, baru setelah diklik, akan muncul nama bulan arsip-arsip kita.Caranya mudah.

(1) Login ke blogger.com dg id Anda
(2) Klik Template
(3) Di bagian sidebar blog Anda bagian archives, ada kode html sbb:

<BloggerArchives>

<a href='<$BlogArchiveURL$>'><$BlogArchiveName$></a>

</BloggerArchives>

(4) Nah, ganti kode di atas dg kode html di bawah ini:

<select name="archivemenu" onchange= 
"document.location.href=this.options[this.selectedIndex].value;"> 
<option selected>- Archives -</option> 
<BloggerArchives> <option 
value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
 </BloggerArchives> </select>

(5) Apabila selesai, klik SAVE CHANGES. Bila sudah DONE, klik REPUBLISH.
(6) Selesai.

Selamat mencoba.

CARA MUDAH MEMBUAT READ MORE OTOMATIS DI BLOG

Manfaat readmore untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Untuk demonya silahkan klik link dibawah ini.

CONTOH READ MORE
Cara membuat readmore otomatis dengan gambar

Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
Cari Kode </head>, dengan meneka CTRL+F pada key board untuk melakukan pencarian kode </head> dengan cepat.
Copy paste kode dibawah ini tepat di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, (for blogspot)
by: http://trikseosimple.blogspot.com/
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Save Template anda.
Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
selanjutnya akan terbuka kode kode yang lain.
geser atau scrol ke bawah dan cari kode

<data:post.body/>

Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat.

Cara Mencari Kode Template di Menu Edit HTML yg Baru dengan cara mudah

Cara Mudah Mencari Kode Template di Menu Edit HTML Baru - Sebelum adanya perubahan pada tampilan menu edit HTML Blogger, saya sudah menjelaskan cara mencari kode template yang dengan mudah bisa kita temukan hanya dengan melakukan CTRL+F pada keyboard dan memasukkan kode yang dicari kedalam kolom pencarian yang berada di pojok kiri bawah dangan mencentang Expand Template Widget yang akan memunculkan semua kode template, sehingga dari sini kita bisa menemukan kode yang di cari.

Namun tidak demikian dengan tampilan menu edit HTML dalam template blogger, saat kita mencari kode template, fitur centang Expand Template Widget sudah ditiadakan sehingga mau tidak mau kita harus mencari cara termudah dalam mencari kode template yang kita inginkan.
Nah bagi yang belum tau Berikut panduannya...

Tentukan terlebih dahulu kode yang ingin di cari, sebagai contoh saya akan mencari kode <data:post.body/>
Tekan tombol CTRL+F pada keyboard laptop anda
Muncul kolom Search di pojok kanan atas
Masukkan kata kunci kode didalam kolom tersebut, contoh <data:post.body/>
Tekan Enter pada keyboard laptop anda

Kode ditemukan!...... mudah kaaan.
Semoga membantu
trima kasih

Cara cepat mencari kode edit HTML Template

Posting ini tentu saja khusus buat sobat yang baru menggunakan blogger (tidak mengenal HTML Editor lama) atau yang masih belum bisa memaksimalkan atau mengenali fitur-fitur baru di dalam HTML Editor baru (sebab sudah terlalu nyaman dengan yang lama). Jadi, buat sobat yang sudah cukup mengenalinya tentu posting ini kurang penting, tapi silahkan saja jika ingin ikut menyimak; plus jika berkenan, boleh menambahkan masukan.

Akses ke HTML Editor adalah:

Dashboard (home) Blogger > Template > Klik button "Edit HTML".

HTML Editor baru memiliki beberapa perbedaan mendasar, 3 yang penting di antaranya adalah:

1. Dihapusnya fitur "Expand Widget Templates". Pada HTML editor lama, fitur ini digunakan untuk menampilkan tag-tag widget yang secara default disembunyikan, demi keamanan, untuk menghindarinya teredit secara tidak sengaja. Oleh karena itu, untuk menampilkan tag-tag widget tertentu, harus mencentangnya dan baru bisa mengeditnya.

2. Tag-tag widget di HTML editor baru kini ditampilkan (default), namun dalam wujud tertutup di antara tag inti, dan harus klik tanda expand (►) untuk melihat isinya. Masing-masing tag inti bisa langsung dicari dengan menggunakan menu dropdown "Jump to widget", dimana di dalam menu tersebut terdapat nama-nama tag inti yang ingin dituju. Urutan nama widget dari atas ke bawah sesuai urutan widget di dalam template.

Fitur Jump To Widget, mudah mencari widget.

3. Poin paling penting adalah ditambahkannya fitur baru pada HTML Editor baru, yaitu fungsi "Search". Jika dulu kita biasa menggunakan fitur search (CTRL+F) milik browser, dan memasukkan kode untuk menuju bagian tertentu di dalam editor, kini tidak bisa lagi sebab HTML Editor baru ditampilkan dalam frame, search milik browser tidak bisa digunakan untuk "menggali" isi frame. Nah untuk mengatasi hal itu, Blogger menambahkan fitur "SEARCH" khusus di dalamnya.

Itu adalah 3 inti yang kemudian mengubah cara lama yang biasa kita gunakan untuk mengedit HTML Blogger. Untuk poin 1, fitur itu sudah tidak ada lagi, jadi jika ada tutorial saya atau yang lainnya yang meminta "expand widget templates", abaikan.

Cara Mencari Tag Widget Dengan ID Tertentu di HTML Editor
Di antara ketiga poin perubahan tersebut, poin nomer 2 memang agak sulit, karena anda harus mengenal semua nama ID widget (widget bukan hanya yang ada di sidebar loh, melainkan termasuk post, header, dll; elemen template blogger terdiri dari widget-widget). Untuk widget sidebar, biasanya namanya menggunakan ID HTML, misalnya HTML1, HTML2, dll, sesuai urutan widget sidebar yang ditambahkan. Untuk mencari ID widget sidebar, simak caranya di post Cara Menampilkan Widget hanya di Halaman tertentu.

Setelah menemukan ID widget yang dimaksud, lalu:
1. Klik menu dropdown "Jump to Widget".
2. Klik nama widget (ID) seperti yang sudah ditemukan.
3. anda akan dibawa meluncur ke bagian tag widget sesuai dengan nama yang diinginkan.
4. Klik tanda ► di sebelah kiri widget yang dimaksud sehingga tag terbuka dan memperlihatkan elemen-elemen di dalamnya.
5. Lakukan editing/modifikasi sesuai kebutuhan atau tutorial.

Cara ini tentu hanya efektif juga apabila tag widget mudah dicari sesuai nama dan dapat dilihat dengan mata telanjang. Bagaimana jika kode yang dicari merupakan tag khusus dan bukan merupakan widget? Tentu sangat ribet jika harus membuka masing-masing tag dengan klik ►. So kita butuh "jalan pintas", yaitu: mencari sekaligus expand tag dengan hanya sekali klik!

Cara Mencari Kode di HTML Editor Menggunakan Fitur "Search"

1. Untuk memunculkan fitur "search" milik Blogger, anda tidak bisa langsung menekan Ctrl+F, sebab yang muncul nantinya fitur search milik browser. Arahkan kursor terlebih dahulu ke dalam HTML Editor, klik di bagian manapun di dalam editor, baru tekan CTRL+F, maka search bar Blogger akan muncul di pojok kanan atas.

2. Next, untuk mencari kode tertentu sesuai dengan petunjuk tutorial, copy dan paste atau ketikkan kode tersebut ke dalam kolom "search", lalu klik enter. Kode yang anda cari akan muncul di baris paling bawah pada kode-kode yang nampak di post editor, dan di-highlight dengan warna tertentu. Tag widget dimana kode tersebut berada otomatis akan expanded dengan sendirinya. Sebagai contoh, saya mencari kode <data:post.body/> seperti contoh berikut:

3. Jika kode yang sama lebih dari satu sesuai yang telah disampaikan oleh tutorial, klik enter satu atau dua kali lagi hingga menuju kode yang dimaksud.

4. Jika anda diminta mencari kode yang ternyata telah dimodifikasi sedemikian rupa oleh pembuat template, cari kode pokoknya saja. Contoh, jika harus mencari kode <body>, dan tidak ketemu, maka tag body tersebut biasanya telah dimodifikasi, misalnya: <body (beberapa atribut tag di belakang).>, maka cari saja <body (tanpa penutup).

5. That's it!

Jika masih ingin mempelajari beberapa tips dan trik dalam menghadapi HTML Editor Blogger, simak tips edit template HTML Blogger. Itu adalah tutorial tua, jadi ada beberapa hal yang tidak perlu diikuti karena tidak sesuai lagi dengan HTML editor baru, tapi beberapa poin masih sangat penting.

Hopefully bisa memberikan sedikit pencerahan bagi yang baru berkenalan dengan blogging, HTML Editor Blogger, maupun yang masih pusing dengan kehadiran fitur HTML Editor baru karena sudah cukup nyaman dengan yang lama.

Cara Mengganti Warna Pada Template Bawaan Blogger

Banyak alasan sehingga teman2 ingin merubah warna template salah satunya karena ingin tampil beda dengan blog yang lain. Oke langsung saja cara mengganti warna pada template blog bawaan...

I. Seperti biasa masuk ke blog

II. Pilih Dashboard---Template---EDIT HTML

III. Kemudian carilah kode yang hampir sama di bawah ini, gunakan CTRL+F atau F3 untuk mempermudah pencarian

1. Untuk mengganti warna background header pada blog cari kode #header-wrapper

#header-wrapper {
background:#000000;

2. Untuk mengganti warna background body pada blog cari kode body {

body {
background:#000000;

3. Untuk warna background halaman postingan / main body pada blog cari kode #main-wrapper {

#main-wrapper {
background:#000000;

4. Untuk warna background sidebar di blog cari kode #sidebar-wrapper

#sidebar-wrapper
background:#000000;

5. Untuk Merubah warna background footer di blog cari kode #footer {

#footer {
background:#000000;