topijrami

Showing posts with label tutorial blogging. Show all posts

Bookmarking Button di Bawah Post

Quote by Dobel - Klik:
Bro, caranya isi bookmark di tiap2 akhir tulisan gimana sih?

Melihat pertanyaan seperti itu, jadi kepikiran untuk ngebuat tutorial ini. Dengan fitur ini, akan mempermudah pembaca blog untuk mem-bookmark link yang sangat bermanfaat. Ingin tahu lebih lanjut..?

~Langkah 1
Kamu harus terlebih dulu ngebuat account di AddThis.com, gratis kok. Setelah terdaftar, segera Login dan klik Get Your Button.

~Langkah 2
Sekarang saatnya meng-kostumisasi tombol yang akan dipakai nanti. Berhubung kita akan memasang tombol bookmark, maka pada dropdown menu pilih Bookmarking Widget. Pilih model tampilan Bookmarking Button yang akan dipakai. Selanjutnya, karena kita akan mengaplikasikannya pada Blogger, maka pilih on a blog kemudian pada blogging platform pilih Blogger. Nah, kalo udah yakin, klik Get Your Free Button.

~Langkah 3
Sekarang tinggal pilih mau tombol tipe standard atau tipe dropdown. Selanjutnya tinggal memasukkannya ke dalam blog kamu. Masuk Template>Edit HTML . Klik Expand Widget Templates. Temukan tag seperti ini:

<p class='post-footer-line post-footer-line-2'>

Agar Button muncul di bawah semua post, paste-kan kode tadi di bawah tag tersebut. Sebenarnya tidak ada keharusan untuk meletakkan button ini di sana, jadi terserah mau diletakkan di mana saja.
Save Template...

Dengan account yang kamu buat, kamu bisa memonitor jumlah orang yang telah nge-bookmark postingan kamu.

Silakan mencoba 'n gud lak...

tutorial blogging | |

Menambahkan Ikon Kalender di Sebelah Judul Artikel

1 comments

Buat Bloggers yang gemar menghias blognya dengan berbagai pernak-pernik, mungkin tutorial ini dapat membantu mempercantik tampilan blog. Mungkin juga ada yang engga ngerti, judul artikel ini maksudnya apa. Contohnya seperti gambar di bawah ini:

Nah, ngerti kan sekarang…? Yauda kalau gitu, let’s go to the first step.

Nambahin Ikon Kalender di Sebelah Judul Artikel :: Blogger-Holic

tutorial blogging | |

Nambahin Breadcrumb ke Artikel

0 comments

Buat yang belum tahu apa itu breadcrumb contohnya ada dalam blog ini di atas judul artikel, atau lihat gambar di bawah ini:

Tertarik…? Berikut cara2 ngebuatnya:
Masuk ke Template ->Edit HTML, trus klik Expand Widget Templates checkbox.
Cari baris , kemudian letakkan kode2 berikut di bawah

<b:includable id='main' var='top'> :

<b:includable id='breadcrumbs' var='post'>
<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
<b:if cond='data:blog.pageType == "item"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
You are here:
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
</b:if>
</b:loop>
<b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
</b:if>
</b:if>
</span>
</p>
</b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

Terus tambahin kode ini:

<b:include data='post' name='breadcrumbs'/>

tepat di atas baris <b:if cond='data:post.dateHeader'>

Langkah berikutnya tinggal tambahin kode CSS ini :

.breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

Save template trus slese deh…..
Moga bermanfaat aja :)

credit : Hoctro's Place

tutorial blogging | |

Bermain dengan kolom komentar

4 comments

Ada pertanyaan dari mba Gies jd post-an ini saya buat :)
Satu lagi saya temuin tutorial hack blogger yg mnarik bagaimana membuat kolom komentar di bawah setiap post pada Blogger.

"Seperti kita tahu bahwa Blogger menggunakan layanan komentar atom, yang mengharuskan anda untuk membuka window baru, jika ingin memberi komentar pada posting dari blog yang anda kunjungi. Kadangkala, hal ini membuat anda malas untuk memberikan komentar meskipun anda ingin sekali mengomentari postingan blog yang anda kunjungi.

Bermain dengan kolom komentar :: Blogger-Holic

tutorial blogging | |

Template Paling Kenceng, Neo Template

4 comments

"Kalo kamu pengen template yang cuepet kayak kilat, maka NEO dari hackosphere adalah pilihan yang tepat. Kalo isi blog lu butuh kecepatan antar halaman, tidak terlalu peduli dengan desain yang sok artistik, maka NEO ini bisa jadi andalan. Si Ramani alias Hackosphere ini sudah ngulik JSON di template ini, jadi entah gimana jadi cuepet banget."

Gitu deh kata2 yg ada di bikinblogger ttg Neo Template...

Template Paling Kenceng, Neo Template :: Blogger-Holic

tutorial blogging | |

Feed per Label

0 comments

Terkadang pengunjung blog ingin berlangganan hanya pada 1 label tertentu saja... Nah, gimana tuh caranya supaya bisa begitu....? Sebenarnya caranya gampang banget. Blogger cuma harus tau alamat feed per label blog. Nah, masalahnya alamatnya itu apa....?

Feed per Label :: Blogger-Holic

tutorial blogging | |

Membuat Navigasi Menu

3 comments

Kali ini saya akan membahas tutorial bagaimana menggabungkan navigasi menu vertikal sekaligus dengan menu horizontal. Yup, langsung aja…

Peringatan :sebelum mulai backup template blog kamu dulu atau lakukan tutorial ini di blog khusus.

Step 1:
Copy-paste kode ini ke bagian <head> template, sebaiknya diletakkan sebelum </head> .

<script src='http://stubb.fanatic.googlepages.com/chrome.js' type='text/javascript'/>

kalo ingin memodifikasi file Javascript ini, klik kanan di sini lalu save ke hard-drive kamu. Step 2:
Copy-paste satu dari CSS kode ini sebelum ]]></b:skin>CSS style 1: klik di sini untuk download kode

CSS style 2: klik di sini untuk download kode.

CSS style 3: klik di sini untuk download kode

CSS style 4: klik di sini untuk download kode

Step 3:
Masuk ke page elements. Sebaiknya widget ini diletakkan di tempat paling atas dalam blog, Header misalnya. *kalo mau ditaro di header blog, baris ini harus diubah :

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
jadi:

<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

Setelah itu klik Add page element trus klik HTML/Javascript. Tambahin kode ini:

<div id="chromemenu" class="chromestyle"><ul>
<li><a href="link1" title="judul1">Link1</a></li>
<li><a href="#" rel="dropmenu1" title="judul2">Link2</a></li>
<li><a href="#" rel="dropmenu2" title="judul3">Link3</a></li>
<li><a href="link2" title="judul4">Link4</a></li>
</ul>
</div>


<div id="dropmenu1" style="width: 150px;" class="dropmenudiv">
<a href="Alamatlink2.1" title="subJudul2.1">Link2.1<a>
<a href="Alamatlink2.2" title="subJudul2.2">Link2.2</a>
<a href="Alamatlink2.3" title="subJudul2.3">Link2.3</a>
</div>


<div id="dropmenu2" style="width: 150px;" class="dropmenudiv">
<a href="Alamatlink3.1" title="subJudul3.1">Nama3.1</a>
<a href="Alamatlink3.2" title="subJudul3.2">Nama3.2</a>
<a href="Alamatlink3.3" title="subJudul3.3">Nama3.3</a>
</div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>

Nah, yang warna merah itu bisa diulang-ulang kalo mo nambahin link.
Source : Vivek Sanghi

tutorial blogging | |

Membuat Recent Post dan Comments

2 comments

Akhirnya saya menemukan cara untuk membuat post/komen terbaru di sidebar dengan mudah. Mau tau gimana caranya, terus baca :

Membuat Recent Post dan Comments :: Blogger-Holic

tutorial blogging | |

Buka Link di New Window/Tab Blogger Beta

0 comments

Saat kita mengklik link yang terpasang pada fitur 'Link List', biasanya tidak terbuka pada window/tab baru. Hal ini biasanya dapat mengurangi 'traffic' pada sebuah blog. Solusinya sangatlah mudah.

Buka Link di New Window/Tab :: Blogger-Holic

tutorial blogging | |

Membuat Dropdown Menu

0 comments

Drop down menu (atau pulldown menu) dapat membuat blog menjadi lebih ringkas.

Membuat Dropdown Menu :: Blogger-Holic

tutorial blogging | |

Pasang Jam di Halaman Blog

0 comments

Jam bisa digunakan sbg penunjuk waktu atau hanya sbg hiasan halaman blog.

Pasang Jam di Halaman Blog :: Blogger-Holic

tutorial blogging | |