Tutorial Seputar Blog

Buat Komentar Dibawah Postingan

Masuk draft.blogger.com ingan draft.blogger.com bukan blogger.com
Terus ke menu Setting ---> Comments kemudian ganti "Comment Form Placement" menjadi "Embedded below post"
Kemudian tekan Save Setting
Lalu ke menu Layout ---> Edit HTML kemudian
Lalu centang "expand widget templates" lalu cari Code dibawah ini

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
Kemudian ganti dengan Code dibawah ini

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</b:if>

</p>
Lalu Simpan.... dan lihat hasilnya..

Coba kamu cek ada sebuah comments gak di bawah artikel yang kamu posting...

Mengganti Haloscan Ke Comment Blogger

pertama-tama ke menu Layout--->Edit HTML
"Download Full Tempaltes" Untuk membackup Template
Centang Checkbox "Expand widgets Tempaltes"
Kemudian Cari Code dibawah

<span class='post-comment-link'>

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

<b:if cond='data:post.allowComments'>


<script src='http://www.haloscan.com/load/lovemanisa' type='text/javascript'> </script>
<span class='post-comment-link'>
<a class='comment-link' expr:href='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScan(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCount('<data:post.id/>');</script>
</a> |
<a class='comment-link' expr:href='"http://www.haloscan.com/tb/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScanTB(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCountTB('<data:post.id/>');</script>
</a>
</span>


</b:if>
</b:if>

</span>

Kemudian ganti Code diatas Dengan Code dibawah ini

<span class='post-comment-link'>

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

<b:if cond='data:post.allowComments'>

<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<b:if cond='data:post.numComments == 1'>1

<data:top.commentLabel/>

<b:else/>

<data:post.numComments/>

<data:top.commentLabelPlural/>

</b:if></a>

</b:if>

</b:if>

</span>
Kemudian ke langkah selanjutnya, cari Code dibawah

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>


<script src='http://www.haloscan.com/load/lovemanisa' type='text/javascript'> </script>
<span class='post-comment-link'>
<p><a class='comment-link' expr:href='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScan(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCount('<data:post.id/>');</script>
</a> |
<a class='comment-link' expr:href='"http://www.haloscan.com/tb/lovemanisa/" + data:post.id + "/"' expr:onclick='"HaloScanTB(" + "\""+ data:post.id + "\"" + ");return false;"'>
<script type='text/javascript'>postCountTB('<data:post.id/>');</script>
</a></p>
<script expr:src='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/?m=1"' type='text/javascript'/>
<noscript><a expr:href='"http://www.haloscan.com/comments/lovemanisa/" + data:post.id + "/"'>Comments</a> | <a expr:href='"http://www.haloscan.com/tb/lovemanisa/" + data:post.id + "/"'>Trackback</a></noscript><br/>
</span>


</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
kemudian langkah selanjtnya adalah gantilah Code Diatas dengan Code dibawah ini

<b:includable id='comments' var='post'>

<div class='comments' id='comments'>

<a name='comments'/>

<b:if cond='data:post.allowComments'>

<h4><b:if cond='data:post.numComments == 1'>1

<data:commentLabel/>:<b:else/><data:post.numComments/>

<data:commentLabelPlural/>:

</b:if>

</h4>

<dl id='comments-block'>

<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'><a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'><a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/>

</a><b:else/><data:comment.author/></b:if><data:commentPostedByMsg/>

</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>

<span class='deleted-comment'>

<data:comment.body/>

</span><b:else/>

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

</b:if></dd><dd class='comment-footer'>

<span class='comment-timestamp'>

<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</dd>

</b:loop>

</dl>

<p class='comment-footer'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a></p>

</b:if>

<div id='backlinks-container'>

<div expr:id='data:widget.instanceId + "_backlinks-container"'>

<b:if cond='data:post.showBacklinks'>

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

</b:if>

</div>

</div>

</div>

</b:includable>
Setelah langkah diatas selesai mari kita lanjut ke langkah selanjutnya
Cari Code dibawah Ini

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</p>
Kemudian ganti Dengan Code dibawah ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
selesai kemudian Save Template dehhh

Mengatur Link Pada Blog

Masuk menu Layout kemudian masuk ke Edit HTML kemudian cari Code CSS seperti dibawah ini

a:link {
color:#346ba4;
text-decoration:underline;
}
a:visited {
color:#800000;
text-decoration:underline;
}
a:hover {
color:#56b9ff;
text-decoration:underline;
}

Nah jik anda ingin mengotak-atik akan saya terangkan dibawah ini..

a:link { <<<-- Link aktif
color:#346ba4; <<<---- Ini adalah warna Link aktif yang belum tersentuh apapuntext-decoration:underline;
}
a:visited { <<-- Link jika sudah dibuka/diklik
color:#800000; <<<--- Ini adalah warna Link jika URLnya sudah pernah dikunjungi text-decoration:underline;
}
a:hover { <<--Link jika pointer berada pada Link
color:#56b9ff; <<<--- Ini adalah ini adalah warna jika Pointer diarahkan pada Linktext-decoration:underline;
}

Ganti tulisan yang berwarna merah dengan code warna yang anda sukai.
Tulisan yang tercetak biru diatas menandakan Link bergaris bawah anda bisa merubah menjadi tidak bergaris bawah dengan mengganti tulian underlinemenjadi none

Jika anda ingin mengatur Link Postingan anda berbeda dengan yang lain tambahkan Code CSS dibawah ini

#main .post-body a:link{
color:#346ba4;
text-decoration:underline;
}
#main .post-body a:visited{
color:#800000;
text-decoration:underline;
}
#main .post-body a:hover{
color:#56b9ff;
text-decoration:none;
}

Rubahlah sesuai keinginan kamu seperti cara diatas tadi

Membuat Link Read More Beserta Judul Postingya

Oke kita langsung aja ke cara pembuatanya deh

1. Log In ke Blogger Dan masuk ke menu Layout lalu masuk Edit HTML

2. Jangan Lupa centang kotak "Expand Widget Templates"

3. Kemudian Cari Link Raed More Anda misalnya Punya aku seperti ini

<p><data:post.body/>

<a expr:href='data:post.url'>...Baca Selengkapnya </a></p>

Kamu Lihat tulisan yang tercetak tebal diatas itu adalah Link Read More punya aku

4. Kamu tambahkan Code <data:post.title/> dan Kamu tempatkan di sebelah Link read More, Lihat Contoh Dibawah

<p><data:post.body/>

<a expr:href='data:post.url'>...Baca Selengkapnya dari.."<data:post.title/>"</a></p>

Nah diatas Adalah Contoh dari Link read More Punya ku.. kamu bisa merubah sesuai keinginan kamu

5. Save..

Sekian deh semoga bermanfaat bagi Anda...

Mengganti Background Blog Dengan CSS

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menuEdit HTML

Lalu cari CSS dari body seperti dibawah ini

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.

Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :

back

URLnya : http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengantur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

Panduan Awal Membuat Blog

Cara Membuat Blog di Blogger

Masuk alamat www.blogger.com
Lalu klik tombol navigasi "Ciptakan Blog Anda"
Lalu isi form yang mucul dengan benar sesuai data diri Anda

Setelah diisi dengan benar contreng kotak "Saya Menerima..." Lalu klik tombol "Lanjutkan"
Lalu akan muncul konfigurasi nama blog Anda seperti dibawah ini, isi judul blog dan alamat blog Anda

Setelah diisi klik tombol "Lanjutkan"
Setelah langkah ke empat selesai sekarang pilih sebuah template Anda. Pilih template yang Anda sukai kemudian klik tombol "Lanjutkan"
Dan blog Anda sudah jadi apabila ingin memposting silahkan klik tombol "Mulai Blogging"

Mudah kan membuat blog itu? dengan blog Anda bisa lebih keren lho . Happy blogging!!