TUTORIAL BLOG

1.MEMBUAT SCROLL BAR PADA KOMENTAR

Pada sebuah postingan tentu saja mempunyai widget kolom komentar yang berguna untuk pengunjung memberikan komentar pada postingan tersebut. Jika komentar dari pengunjung semakin banyak, tentu saja akan membuat komentar yang ada semakin lama semakin bertambah sehingga halaman yang berisi postingan tersebut akan kelihatan memanjang kebawah.
Hal itu tentu saja akan mengganggu keindahan penampilan blog. Dengan membuat scroll bar pada komentar dipostingan akan membuat blog anda terlihat lebih bagus dan tidak memanjang. Silakan menggunakan menggunakan trik tersebut.
berikut ini langkah-langkahnya ;
# Masuk ke Blogger.
# Pilih Tata Letak.
# Pilih Edit HTML
# Cari kode untuk pengaturan komentar seperti di bawah ini :

/* ----- COMMENT ----- Blogger template design by myzamrud.com */
#comments {
margin: 15px 0px 0px 0px;
padding: 0px 0px 15px 0px;
text-align: left;
color: $commentTextColor;
font: $commentTextFont;
}

/* comment-header */
#comments {
height:300px;
overflow:auto;
}
#comments h4 {
margin: 0px 0px 0px 0px;
padding: 15px 0px 0px 0px;
color: $commentTitleColor;
font: $commentTitleFont;
}

.deleted-comment {
font-style:italic;
color:gray;
margin: 3px 0px 3px 0px;
}

#Copy kode dibawah ini kemudian paste pada bagian kode diatas tadi (diatas #comments atau #comments h4).

# Kode tambahan boleh diletakkan diatas kode #comments h4 (atau dimana saja, asal masih berada dibagian komentar).
# Kode height:300px; boleh anda ganti dengan tinggi scroll bar yang anda inginkan
# Setelah selesai kilk tombol Simpan Template
# Selamat mencoba...!

2.MEMBUAT EFEK MARQUEE ATAU TEXT BERJALAN

Apa itu Marquee? mungkin buat blogger baru kata marquee tidak terlalu akrab di telinga, padahal efek marquee ini sering kita lihat pada website atau blog yang sering kita kunjungi. Marquee adalah kode HTML yang bisa membuat teks bisa berjalan, dari kiri, kanan, bawah ataupun atas.

Teks berjalan atau marquee ini banyak diminati oleh para blogger, karena sifatnya yang dinamis, selain untuk menghemat tempat juga bisa menarik pengunjung. Seperti yang sobat lihat di atas kolom sidebar ShoutMix blog saya, ada menu yang bergerak dari kanan ke kiri.
Efek-efek ini timbul karena adanya perpaduan dari beberapa fungsi yang disebut dengan attributes. Sebelum kita mulai, mari kita pelajari dulu fungsi dari masing-masing atributes.

Beberapa attributes yang sering digunakan dalam marquee yaitu:

1. Behavior : untuk mengatur gaya gerakan pada teks.
Ada 3 gaya gerakan yang bisa digunakan yaitu :
* Alternate : Teks bergerak bolak-balik
* Slide : Teks hanya bergerak sekali saja
* Scroll : Teks bergerak ke satu arah secara kontinu

2. Direction : mengatur arah gerakan teks.
Ada 4 arah gerakan yang bisa digunakan yaitu :
* Up : Teks bergerak keatas
* Down : Teks bergerak kebawah
* Left : Teks bergerak kekiri
* Right : Teks bergerak kekanan

3. Face : Untuk mengatur font teks seperti : arial, verdana, times new roman, courier, dan lain-lain. Anda bisa menggunakan semua jenis font yang tersimpan pada komputer.
4. Color : Untuk mengatur warna teks, seperti : "black", "green", "blue", "red", "yellow", dan lain-lain. Anda juga bisa menggunakan kode warna untuk menghasilkan warnanya, seperti: "#fffff", "#ff5a00", "#abb0b5", dan lain-lain.
5. Width : Untuk mengatur panjang ruangan teks dalam satuan pixel.
6. Height : Untuk mengatur lebar ruangan teks dalam satuan pixel.
7. Bgcolor : Untuk mengatur warna background, seperti: "black", "green", "blue", "red", "yellow", dan lain-lain. Jika Anda ingin menghilangkan warna background gunakan "transparent".
8. Scrolldelay: Untuk mengatur waktu tunda gerakan dalam satuan mili detik.
9. Scrollamount: Untuk mengatur kecepatan gerakan dalam satuan pixel.
10. Loop: untuk mengatur jumlah pengulangan.
Itulah beberapa attributes yang sering digunkan untuk membuat efek marquee atau teks berjalan. Berikut beberapa contoh efek marquee:

*teks berjalan bolak-balik secara horizontal:
kodenya :
<font face="arial" color="black" size="4"><marquee direction="right" behavior="alternate" direction="right" scrollamount="2" height="20px" scrolldelay="10" bgcolor="orange" width="450px">echa bintang timur</marquee></font>

*teks berjalan kekanan secara terus menerus :
kodenya :
<font face="times" color="green" size="4"><marquee direction="right" behavior="scroll" scrollamount="3" height="20px" scrolldelay="10" bgcolor="yellow" width="450px">echa bintang timur</marquee></font>

*Efek Bounce :
kodenya :
<font face="comic sans ms" color="orange" size="4"><marquee scrolldelay="10" behavior="alternate" direction="up" width="450px" scrollamount="2" height="100px" bgcolor="black"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">echa bintang timur</marquee></marquee></font>

Cara memasang kode marquee pada blog:
1. Login ke Blogger. Klik menu Layout->Page Elements
2. Klik Add a Gadget. Klik tombol + pada HTML/ Javascript
3. Masukkan kode marquee yang ingin Anda gunakan lalu klik Save
4. Selesai. Klik View Blog untuk melihat hasilnya

Selamat mencoba...!


3.MEMBUAT READ MORE

letakkan kode dibawah ini diatas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = 'none';
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = 'inline';
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

Kemudian cari kode :
<div class='post-body'>
<p><data:post.body/></p>

atau ;
<div class='post-body entry-content'>
<p><data:post.body/></p>

kemudian letak kan kode ini dibawah nya,
<div class='post-body' expr:id='"post-" + data:post.id' >
<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>
<span id='showlink'>
<a expr:href='data:post.url'>Read More...</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

Selanjutnya ke pengaturan--> Klik Settings, lalu klik Formatting. Cari "Post Template/ Template entri". Kalau sudah ketemu, isi kotak kosong tersebut dengan kode berikut:
<span id="fullpost">
</span>

lalu tombol Save /simpan

CARA MEMASUKA KAN POSTINGAN :
*Saat melakukan postingan pilih edit html dan pada kolom akan muncul kode <span id="fullpost"> dan </span> tugas anda masukan potongan kalimat postingan yang akan dimunculkan  sebelum <span id="fullpost"> dan berikutnya sisa postingan di letak kan sesudah kode <span id="fullpost"> atau diantara <span id="fullpost"> dan </span>

Selamat mencoba...!