Mengatur Margin dan padding di template blogger

Margin dan padding adalah elemen penting dalam design blogger. Kalo kau tahu, mereka adalah nyawa dari design dan style dari blog kamu.
Sebelum kita melakukan modifikasi dan macam-macam pada blog kita, kita cari tahu dulu struktur blog di blogger itu seperti apa. Oh ya yang pasti kamu juga udah daftar dulu di blogger agar punya blog dengan alamat http://www.nama_blog_kamu.blogspot.com
OK kalo udah kita lanjut!!!
Perhatikan gambar berikut ini:

Perhatikan gambar di atas, dan kita akan tahu, apa yang disebut padding dan margin!!

Cara mudah bagaimana Padding dan Margin akan mempengaruhi tampilan layout blogger

Beginilah cara yang mudah bagaimana untuk melihat dengan jelas efek perubahan dari setiap editan yang kita lakukan lewat padding dan margin:

TAMBAHKAN BORDER PADA SETIAP ELEMEN

dengan adanya border setiap bagian dari blogger kita terlihat jelas. Perhatikan gambar berikut ini:



setelah kita kasih border akan tampil seperti ini. (oiya.. jangan lupa sewaktu memilih template, pilihlah "minima" ya.. agar editnya lebih mudah)



Lebih mudah khan untuk memahami bila blog kamu kelihatan seperti itu.


CARA MENAMBAHKAN BORDER DI BLOGGER
Tambahkan border pada bagian-bagian berikut ini:

• Outer Wrapper
• Header Section
• Sidebar
• Main Post Column
• Footer

Untuk menambahkan border tersebut kita tinggal menambahkan kode berikut ini:

border: 1px solid #000000;

Copy kode ini dan carilah kode berikut ini di HTML blogger kamu. Kemudian "paste" di bawah nya:

#outer-wrapper {

#header-wrapper {

#main-wrapper {


#sidebar-wrapper {

#footer {

Jika kamu punya 3 kolom pada layoutnya tambahkan pula di tag berikut ini:

#new-sidebar-wrapper

Sebelum menyimpan, preview dulu hasilnya, kamu akan lihat tulisan kamu dan border pasti terlalu mepet. Seperti ini:

Tapi jangan takut, kita akan merapikannya dengan cara yang sangat mudah.Dalam kasus ini saya mengambil contoh bahwa main wrapper kamu lebarnya 450px, coba cek di kode HTML blog kamu, ada nggak kode yang seperti ini:

#main-wrapper {

border: 1px solid #000000;

width: 450px;


float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Atur lebarnya agar tidak ada ruang yang terlalu lebar antara main-wrapper dan sidebar (misalnya menjadi 430px), kita akan lihat bahwa sidebar kamu akan lebih rapi:

Menentukan margin

Margin menentukan jarak antara setiap elemen dalam layout. Dalam contoh di atas kita lihat tidak ada jarak antara main-post-column dan sidebar. Kita bisa menggunakan margin untuk menentukan jarak antara keduanya

Mengatur Margin sebelah kanan main wrapper

Disini kita akan mencoba untuk menambahkan margin 10px di sebelah kanan yang akan mengatur jarak antara main wrapper dengan sidebar.
Tambahkan saja kode yang dicetak merah di bawah ini dan tempatkan di main wrapper:

#main-wrapper {

border: 1px solid #000000;

margin-right: 10px;

width: 444px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */


overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

PADDINGKita lihat dari contoh di atas, tidak ada jarak antara isi dan border, hanya bagian atas dan bawah saja yang sudah ber-jarak.
Sekarang misalnya kita ingin membuat jarak antara tulisan dan bordernya dengan jarak 5 pixel. Maka yang harus kita lakukan adalah:
Menambahkan kode berikut ini

padding: 0 5px 0 5px;

Kode tersebut artinya adalah jarak atasnya : 0 pixels, kanan: 5 pixels, bawah: 0 pixels, kiri: 5 pixels.
Dan paste di bagian ini:

#main-wrapper {

#sidebar-wrapper {

#new-sidebar-wrapper {

Sayangnya kadang-kadang pengaturan padding tersebut juga akan merubah layout dari keseluruhan tampilan blog kita. Yang tadinya sudah pas, tiba-tiba sidebar kita turun ke bawah. Jangan takur yang kita lakukan hanyalah mengurangi lebar sidebar tersebut.

#sidebar-wrapper {

padding: 0 5px 0 5px;

border: 1px solid #000000;

width: 235px;


margin-right: 10px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#new-sidebar-wrapper {

padding: 0 5px 0 5px;


border: 1px solid #000000;

width: 235px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

With these padding declarations in place and the nescessary adjustments have been made, the demonstration template now looks like this:

OK !! Selamat Mencoba

Membuat Teks Berjalan di Menu Bar

Selain membuat teks berjalan di blog, anda juga bisa membuat teks berjalan di menu bar. Belum tahu apa itu menu bar? Nah itu loh teks yang berada dipojok paling atas layar dan di nav bar browser seperti yang ditunjukkan pada gambar dibawah ini.


Nah bagi anda yang ingin mencobanya. Silahkan ikuti langkah-langkah dibawah ini:

1. Login ke blogger
2. Pada menu Design -> Edit HTML
3. Letakkan kode dibawah ini diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

msg = " -- Selamat datang di Simple Preview ";
msg = " | pernak-pernik blog -- " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
//]]>
</script>

Ganti teks yang dicetak tebal dengan teks yang ingin anda tampilkan.
Angka 200 menunjukkan kecepatan gerak dari teks. Semakin kecil nilainya semakin cepat gerakan teksnya dan sebaliknya. Ganti bila perlu.

4. Jika sudah, klik Save Template. Selesai

Cara buat Read More on Blogger

Cara Buat Read More di Blogger Blogspot dengan Editor Lama. Bagi yang belum memakai Read More Editor Lama direkomendasikan untuk  memakai Read More Editor Baru yang jauh lebih mudah dan simple.
[Update: tutorial ini sudah dilengkapi gambar / screenshot untuk lebih memudahkan) Sudah banyak yg tanya cara buat READ MORE atau Baca Selengkapnya atau Baca Selanjutnya di blogger beta / baru (untuk tutorial buat read more di blogspot / blogger template lama atau classic lihat di sini) dan sudah saya beritahu alamatnya. Tapi tampaknya sebagian agak kesulitan dg tutorial bahasa Inggris. Untuk Anda yg termasuk golongan ini, saya persilahkan mengikuti panduan berikut.
Ada dua cara untuk membuat read more di blogger / blogspot baru (tanda Blogger Baru adalah di admin memakai layout / tata letak dan page element / elemen halaman).
Cara Pertama:

1. Buka template -> Edit HTML -> Kasih tanda tik pada menu "expand widget tempate" (lihat gambar 1)
2. Letakkan kode berikut persis di atasnya kode </head> (lihat gambar 2)

<style>
<b:if cond='data:blog.pageType == "item"'>
  span.fullpost {display:inline;}
<b:else/>
 span.fullpost {display:none;}
</b:if>
</style>

3. Letakkan kode berikut di bawah kode

 <p><data:post.body/></p> 

(lihat gambar 3)

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

4. Klik Simpan. Selesai.
5. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.
Gambar 1:

Gambar 2:

Gambar 3:

Cara Memposting
Ketika memposting, klik EDIT HTML (bukan COMPOSE). Maka, secara otomatis akan tampak kode

<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry/artikel), letakkan di antara kode

<span class="fullpost">

dan

</span>

Masalah yang Sering Dihadapi
1. Saat mengklik "Simpan Perubahan" kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ' dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.
2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Dan tulisan ‘read more’ nongol di bagian bawah artikel? Tenang. Ikuti solusi berikut: klik “Pengaturan” -> klik “Format” -> buang/delete semua tanda kutip buka/tutup (quote/unquote) di “fullpost” dan ganti dengan tanda kutip yang baru. Jangan lupa klik “Simpan”.
Selesai. Selamat ngeblog di blogger / blogspot dengan READ MORE.
Apabila Anda berhasil melakukan cara bikin READ MORE di atas tak perlu lagi mencoba cara di bawah. Cara di bawah cuma sebagai alternatif dan agak lebih rumit di banding cara yang di atas.
Cara Kedua:
1. Buka template –> edit HTML
2. Kasih tanda tik/cek menu “expand widget template”
3. Cari kode berikut di TEMPLATE blog Anda:

<div class='post-header-line-1'/>
<div class='post-body'>

4. Kalau sudah ketemu, letakkan kode berikut DI BAWAH kode html di atas:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

5. Di Bawah kode di atas ada kode html sbb:

<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

6. Nah, di antara kode

<p><data:post.body/></p>

dan kode

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

pasang kode html ini:

<a expr:href='data:post.url'>Read More .. </a>
</b:if> 

7. Jadi, susunan kode html di template setelah ditambah dg kode READ MORE akan menjadi seperti ini (yg warna biru adalah kode tambahan untuk READ MORE, sedang kode warna hitam adalah kode asli template):

<div class='post-header-line-1'/><div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Klik Simpan Template. Selesai.
8. Klik SETTINGS atau Pengaturan, terus klik FORMATTING atau Format. Di paling bawah ada kotak kosong di samping menu TEMPLATE POSTING. Isi kotak kosong tsb dg kode berikut:

<span class="fullpost">

</span>

Jangan lupa klik SIMPAN PENGATURAN.
Cara Memposting
Ketika memposting, klik EDIT HTML. Maka, secara otomatis akan tampak kode

<span class="fullpost">
</span>

Letakkan posting yg akan ditampilkan di halaman muka di atas kode sementara sisanya (yakni keseluruhan entry), letakkan di antara kode

<span class="fullpost">

dan

</span>

Catatan Penting:
(A) Artikel yg diposting sebelum pemasangan kode READ MORE di atas akan tetap tampil penuh di halaman muka, Anda bisa mengeditnya dg cara sbb:
1. Klik menu EDIT POSTS
2. Klik EDIT di artikel yg akan diedit.
3. Pasang kode

<span class="fullpost">

di bawah paragraf yg akan ditampilkan. Dan pasang kode

</span>

di akhir artikel.
Ingat hanya ada SATU kode

 <span class="fullpost">

dan

</span>

. Apabila terdapat lebih dari satu, dan biasanya numpuk di bagian paling bawah artikel, maka dibuang saja.
Masalah yang Sering Dihadapi
1. Saat mengklik “Simpan Perubahan” kita sering mendapat pesan demikian:

XML error message: The element type “style” must be terminated by the matching end-tag “”.

Jangan panik. Itu artinya tanda petik / kutip buka tutup (quote/unquote) yakni tanda ‘ dalam kode tidak cocok dengan font template. Yang perlu dilakukan adalah buang tanda kutip ['] itu dan kasih tanda kutip yang baru di tempat yang sama. Dan coba klik lagi SIMPAN.
2. Anda sudah berhasil memasang seluruh kode di atas, tetapi ‘read more’ gak berhasil; posting tetap panjang? Solusi: klik “Pengaturan” -> klik “Format” -> buang semua tanda kutip buka/tutup di “fullpost” dan ganti dengan tanda kutip yang baru.  Jangan lupa klik “Simpan”.

Mengganti Link Read More dengan Icon Gambar

Beberapa waktu yang lalu saya telah menjelaskan cara membuat link read more atau baca selengkapnya dalam postingan blog. Ternyata ada sobat blogger yang bertanya kepada saya apakah bisa link read more diganti dengan gambar? Jawabannya tentu saja bisa dan sangat mudah.

Nah bagi sobat lain yang kebetulan juga ingin tahu bagaimana cara mengganti link read more menjadi icon gambar langsung saja ikuti tutorial berikut ini:

1. Pertama-tama, upload icon read more yang ingin anda gunakan ke situs image hosting. Setelah itu, catat alamat url gambarnya. Contoh https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNijVAEaZ_U8A-CLL9fbAoa78l_OIeGJeCxxHLLFg1FcZGKIb11qbmRhyphenhyphenibVhwuSGsrkZnSs9XK5gqLrIeTvLaAsaj-jcpgN-wiONPKPFKZWRHxsCI1GCnq5hJtu4Ptqv1PKm7-jWZgMok//

2. Login ke Blogger. Klik Design->Edit HTML
3. Beri centang pada 'Expand Widgets Templates'
4. Cari kode seperti ini

<span id='showlink'>
<a expr:href='data:post.url'>teks read more anda</a>
</span>

5. Ganti tulisan yang dicetak tebal dengan kode berikut

<img src="alamat-gambar-anda" />

Ingat, ganti teks berwarna merah dengan alamat url gambar anda yang sebenarnya.

6. Jika sudah, klik tombol Save. Selesai. Mudahkan? :)

Selamat mencoba. Semoga bermanfaat.

Cara Membuat Artikel Yang Berhubungan

Tip Trik Blogger sebelumnya saya telah membahas bagaimana Cara Membuat Kotak Link Exchange dan kali ini saya akan menjelaskan bagaimana Cara Membuat Artikel Yang Berhubungan atau Related Post dengan Fungsi Scroll
Berikut langkah-langkahnya :

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap

Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Kemudian cari <data:post.body/>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

Jika sudah ketemu silahkan Copy kode berikut dan letakkan dibawahnya
Kalau ada dua kode pilih yang pertama

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2> Artikel Yang Berhubungan </H2>
<div class='artikel'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Untuk menambahkan efeknya cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

.artikel{border: 1px solid #87CEEB; padding: 5px; background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.artikel:hover{background-color: #ffffff; border: 1px solid #ff6100;}

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Cara membuat artikel terkait di blogspot

Membuat navigasi blog adalah hal penting untuk meningkatkan page view web/blog, salah satunya adalah Membuat link artikel terkait, artikel yang berhubungan, Related post atau nama lain yang berdasarkan kategori atau label yang diberikan tiap postingan.

Cara membuatnya di blogspot, disini kita akan menempatkannya tepat dibawah postingan :

1. Login ke blogmu
2. Klik Layout lalu pilih Edit HTML
3. Untuk keamanan sebelum mengedit template backup dulu templete mu klik Download Full Template.
4. Centang Expand Widget Templates
5. Cari kode <data:post.body>
6. Copy kode dibawah ini letakkan dibawah <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<span class='box'>
<div class='widget-content'>

<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot;
&quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</span></div>
</b:if>
Save Template dan lihat hasilnya

Head " Artikel Terkait " dapat anda ganti dengan kata yang disukai contohnya Related Post, Related Articles, Baca Juga dan sebagainya.

Cara Menghilangkan Tanggal Posting

menghilangkan tanggal posting blogger, mau tau caranya? pertama masuk halaman Edit HTML kemudian cari h2.date-header { jika sudah ketemu tambahkan visibility: hidden; diantara kode tersebut. lihat contoh kodenya dibawah:

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

Selama mencoba, Happy Blogging :)

Cara Membuat Kotak Daftar Isi

Postingan ini saya buat untuk menjawab pertanyaan dari seorang rekan blogger yang menanyakan kepada saya melalui email. Beliau bertanya kesaya, "mas, bagaimana cara membuat kotak blogger tutorial seperti di blog mas herman?" Hm.. Mungkin yang dimaksud adalah yang ini kali ya :)

Blogger Tutorial

1. Apa itu blog

2. Panduan membuat blog di blogger

3. Bagaimana cara memposting artikel pada blog

4. Optimalkan tampilan blog dengan template modern

5. Mengganti header template pada blogger

6. Cara mudah mengganti warna dan font template

7. Mengenali fungsi-fungsi dalam menu setting blog

8. cara menambahkan read more/ baca selengkapnya pada blogger

9. Cara membuat dan memasang shoutbox pada blogger

10. Cara mengatasi masalah pada kode read more

11. Memasang foto di profile

12. Apa fungsi label

13. Cara menambahkan yahoo emoticons pada blogger

14. Memposting kode HTML pada artikel

15. Mendaftar dan mengupload gambar di photobucket

16. Menambah favicon pada blogger

17. Menambahkan search box atau kotak pencari pada blogger

18. Cara menghapus gambar di picasa web album

19. Tips menghilangkan warna pada kotak blockquote

20. Cara mendapatkan kode warna dengan photoshop

21. Cara mendapatkan kode warna dengan ms paint

22. Cara membackup template, widget, dan artikel

23. Cara menghilangkan icon quick edit berbentuk tang dan obeng

24. Memasang feedjit pada blogger

25. Memasang jam pada blog

26. Membuat efek marquee atau teks berjalan

27. Tentang RSS feed

28. Memanfaatkan translator online dari google

29. Pasang Google Translator pada blog

30. Cara membuat kotak scrollbar pada blogger

Ok sebenarnya cukup mudah untuk membuat daftar isi seperti diatas. Bagi anda yang sudah lama ngeblog pasti sudah tahu cara membuatnya hanya saja mungkin caranya yang berbeda.

Nah berikut saya akan memberikan cara membuat kotak daftar isi dengan cara saya sendiri. Silahkan diikuti bagi yang ingin mencobanya.

1. Login ke blogger. Buka menu Design -> Page Elements
2. Klik Add a Gadget -> HTML/Javascript. Masukkan kode dibawah ini kedalam kotak

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

<div style="overflow:auto; padding:3px; margin:0px 0px 0px 0px; width:380px; height:180px; background-color: #ffffff; border:1px solid #ffffff;">

<div class="list">
1. <a href="http://www.hermanblog.com/2008/10/apa-itu-blog_15.html">Apa itu blog</a></div>

<div class="list">
2. <a href="http://www.hermanblog.com/2008/10/cara-membuat-blog-di-blogger_16.html">Panduan membuat blog di blogger</a></div>

</div>

Keterangan:
380px merupakan lebar kotak
180px merupakan tinggi kotak
#ffffff pada background-color merupakan warna background
#ffffff pada border merupakan warna garis pinggir. Silahkan ganti sesuai dengan template anda.

Ingat:
Ganti tulisan yang berwarna merah dengan alamat postingan anda dan ganti tulisan berwarna merah yg dicetak tebal dengan judul postingan anda. Jika anda ingin menambah postingan baru maka copy kode yang berkedip lalu letakkan diatas kode </div>

Jangan lupa untuk mengganti angkanya dengan angka 3 dan begitu seterusnya jika anda ingin menambah postingan baru lagi.

3. Kalau sudah klik Save Template. Selesai.

Jika anda ingin menggunakan icon gambar sebagai pengganti angka maka ganti kode ini

<style>
.list {
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px;
}
</style>

Dengan kode berikut

<style>
.list {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKkYeDnS6zuwKI21IFKZ4X1k2MyPoOnBhtyjjcePezdeFg3zrxnYPvSdOw766cJmSrfPoOiomAVuvAwq3IywCX3JJR45VvOk3aez6Ldbe2apgZozfAT_WHY9RUo1O1u8K4HeIG73KRhorz//") no-repeat left center;
border-bottom:1px dotted #ddd;
line-height:1.2em;
padding:3px 0px 0px 20px;
}
</style>

Ganti tulisan yang berwarna merah dengan alamat icon gambar anda dan hapus angka pada setiap judul postingan.

Selamat mencoba. Semoga berhasil

Cara membuat kategori (label)

Menanggapi beberapa pertanyaan dari para sobat yang di ajukan baik melaluishoutbox, kotak komentar dan bahkan ada yang melalui yahoo messenger menyoal tentangbagaimana cara membuat kategori dari artiekl-artikel yang telah di posting. Memangbetul, tentu dengan adanya pengkategorian atau pengelompokan artikel yang telah diposting oleh pemilik blog dapat lebih mempermudah bagi para pembaca untuk memilihartikel mana yang ingin dibaca.

Di blogger.com fasilitas ini sebenarnya sudah di sediakan, akan tetapi walaupunfasilitas tersebut telah tersedia tentu saja jika kita tidak mengetahui cara menggunakannya akan menjadi tidak berguna. Untuk membuat kategori, di blogger.com di kenal dengan istilah Label. Dengan adanya fasilitas ini kita sebagai pemilik blog hanya tinggal mengisi kotak label yang di sedikan pada setiap posting artikel, sangat simpel dan sederhana.

Agar tidak membingungkan, silahkan sobat lihat pada akhir postingan artikel ini. Disana ada tulisan seperti ini : Labels : Blog tutorial, membuat label.Nah berarti postingan ini termasuk ke dalam dua kategori, yaitu kategori Blog tutorial dan kategori membuat label. Untuk melihat fungsi dari label ini silahkan sobat klik label yang bertuliskan Blog tutorial, maka secara otomatis seluruh postingan yang saya beri label Blog tutorial akan di tampilkan dan siap untuk di baca oleh pengunjung.

Bagaimana cara membuat label?

Untuk membuat sebuah kategori atau label, sobat hanya tinggal mengisi kotak kosongdi samping tulisan Label untuk postingan ini : (karena sekarang blogger sudahada yang berbahasa indonesia) yang berada di bawah kotak tempat membuat artikel. Isi kotak tersebut dengan kategori yang kira-kiracocok untuk postingan yang kita buat. Contoh : liburan musim dingin. Satu postingantidak hanya terpatok hanya pada satu kategori saja, akan tetapi satu postingan bisamempunyai beberapa kategori. untuk membuatnya tinggal di pisahkan dengan tanda koma ( , )saja, misal untuk postingan artikel blog ini ada yang ber label Blog tutorial, blog tools, aksesori blog, karena postingan tersebut memang cocok dan masuk kedalam ketiga kategori tersebut.

Apakah kategori (label) bisa di tampilkan di sidebar?

Untuk sobat para pengguna template baru, Label (kategori) bisa di tampilkandi sidebar, dan biasanya element label ini sudah tersedia ketika baru memasang template. Jika element label belum tersidia, sobat bisa membuatnya sendiri, silahkan ikuti langkah - langkah berikut ini :

1. Sig in di blogger dengan id sobat



2. Klik menu Layout



3. Klik menu Elemen Halaman



4. Klik tulisan Tambahkan sebuah Elemen Halaman



5. Klik tombol yang bertuliskan TAMBAHKAN KE BLOG yang berada di bawah tulisan Label



6. Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya



7. Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A --> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)



8. Klik tombol yang bertuliskan SIMPAN PERUBAHAN



9. Selesai.

Sangat mudah bukan?

Sedikit pengumumam, karena blogger sekarang sudah ada yang berbahasa indonesia, makamulai sekarang dalam memandu mengikuti dengan memakai yang berbahasa indonesia.

Selamat mencoba !

Cara Membuat Teks Dan Link Berkedip

Apakah anda pernah melihat teks berkedip seperti ini?




atau mungkin link berkedip seperti ini?



Dan apakah anda tertarik untuk memasangnya di blog Anda? Kalau iya, silahkan ikuti tutorial dibawah ini.

Untuk membuat teks dan link berkedip caranya sangat mudah, cukup tambahkan tag <blink> dan </blink> diantara teks atau link yang ingin Anda buat berkedip. Selesai.. Sebagai contoh, saya menuliskan kode

<blink>Blogger Tutorial</blink>

Maka hasilnya menjadi seperti ini

Blogger Tutorial

Dan

<blink><a href="http://www.hermanblog.com" target="_blank">Herman Blog</a></blink>

Catatan:
Ganti tulisan berwarna biru dengan alamat link anda dan tulisan yang dicetak tebal dengan teks yang ingin anda tampilkan

Agar lebih unik dan menarik, anda juga bisa memberikan sedikit atribut pada teksnya contohnya seperti tulisan Welcome to my blog diatas. Property yang saya gunakan pada tulisan Welcome to my blog adalah

<blink style="font-weight: bold; font-family: forte; font-size: 18px; ">Teks atau link anda</blink>

Silahkan ganti jenis font pada font-family, ukuran font pada font-size dan warna font pada color sesuai dengan selera anda. Untuk font-family anda bisa menggunakan semua jenis font yang tersimpan pada komputer anda. Masukkan nama font dengan lengkap maka font tersebut akan muncul.

Selamat mencoba..