Blog Tutorial: 2012

Jumat, 20 Juli 2012

Letak comment form icon

agar lebih menarik, saya akan ubah comment form icon. ikuti step by step,

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Templates"

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod

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

4) Kemudian, copy dan paste kod di bawah SELEPAS / DI BAWAH kod <span class='post-comment-link'> yang korang cari tadi:

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

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

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

<center><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' ><img class='post-comment-link' src=' URL image icon'/>

</a></center>

</b:if>

</b:if>

</span>

5) Klik preview, kalau menjadi terus klik save template :)

*nota: untuk dapatkan URL image icon, silahkan pilih dibawahn sini

http://dl3.glitter-graphics.net/pub/2848/2848713zyjupighyu.jpg

http://dl8.glitter-graphics.net/pub/1400/1400018ocqzge0n40.gif

http://dl10.glitter-graphics.net/pub/499/499310ictbntcgpq.gif

http://dl5.glitter-graphics.net/pub/1341/1341925bxnjqwck4h.png

http://dl6.glitter-graphics.net/pub/1663/1663196u1luba6vac.png

http://dl2.glitter-graphics.net/pub/1027/1027932ajq6co6hh8.png

http://dl5.glitter-graphics.net/pub/539/539925s0ysmv40at.png

http://dl8.glitter-graphics.net/pub/2198/2198928yzwzal4cnd.gif

http://dl3.glitter-graphics.net/pub/1665/1665783u47nt53aur.gif

http://dl7.glitter-graphics.net/pub/3135/3135127yq4db3m6cs.gif

http://dl8.glitter-graphics.net/pub/2889/2889398a0hnk0sw16.gif

http://dl6.glitter-graphics.net/pub/1885/1885256ptor804pon.gif

http://dl9.glitter-graphics.net/pub/2225/2225279kdfl5frmaj.gif

http://dl8.glitter-graphics.net/pub/1244/1244738nkjfdcqzgn.gif

Tinggalkan Komentar Anda

Border dan bayang-bayang pada sidebar title

Preview:

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML

3) Cari kod

h2 {

4) Kemudian copy dan paste kod di bawah SELEPAS / DI BAWAH kod h2 { tadi

background: #FFECF5;
border: 2px dashed #000000;
-moz-box-shadow: 0 0 3px 3px #C0C0C0;
-webkit-box-shadow: 0 0 3px 3px #C0C0C0;
box-shadow: 0 0 2px 2px #C0C0C0;

Tinggalkan Komentar Anda

Kamis, 19 Juli 2012

Cara Membuat Blog

Sebelum mendaftar di blogspot, anda perlulah mempunyai akaun google terlebih dahulu memandangkan blogspot itu sendiri adalah produk dari google. Untuk mendapatkan akaun google, sila daftar di sini http://mail.google.com/mail/signup Cuma masukkan maklumat yang diperlukan.

Tinggalkan Komentar Anda

Baca selengkapnya »

Selasa, 03 Juli 2012

Gif

Tinggalkan Komentar Anda

Animated recent post bergambar

Animated recent post bergambar ini akan menunjukkan post tebaru dari blog anda, berfungsi sama seperti widget Recent Post Bergambar. Widget ini akan berulang-ulang memaparkan preview post terbaru anda(beserta gambar post) seperti yang ditunjukkan di atas. Caranya? silahkan ikuti tutorial di bawah :

1) Login akaun blogger anda

2) Dashboard > Add A Gadget > HTML / Javascript

3) Copy paste kod dibawah ke ruangan HTML tadi

<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jombinabeloganimatedrecentpost/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small><a href="http://jombinabelog.blogspot.com/2011/12/blog-post.html" target="_blank">get this widget here</a></small>

4. save dan lihat hasilnya

Tinggalkan Komentar Anda

tutorial

TUTORIAL RENITA

Tinggalkan Komentar Anda

Senin, 02 Juli 2012

Timbang Berat Blog

Berapa tempoh masa loading blog anda? Tempoh masa loading blog memainkan peranan yang amat penting. Lagi cepat, lagi bagus. Jika telalu lama masa yang diambil untuk loading blog, kemungkinan pengunjug blog anda tanpa segan silu klik pada butang pangkah sebelum selesai loading page.

Timbang berat blog anda di sini http://tools.pingdom.com/. Masukkan url blog, kemudian klik "test now"

Tips mengurangkan masa loading blog:
1 Kurangkan penggunaan image (jpeg) kerana size jpeg biasanya adalah besar.

2 Kurangkan bilangan entry post pada home page blog anda. Default setting adalah 7 post, kurangkan kepada 2 atau 1 sahaja.

3) Kurangkan widget yang menggunakan javascript.

4) Widget yang mempunyai size yang besar seperti blog achieve, blog list atau follower, letak di bahagian bawah sekali, supaya element yang lain dapat dibaca terlebih dahulu.

5) Letak "Read More" bagi meringkaskan entry post, supaya loading setiap entry dapat dibaca dengan cepat

Tinggalkan Komentar Anda

Animasi Lucu

Hiaslah Blog Kalian dengan animasi lucu ini...

Tinggalkan Komentar Anda

Letak Home Button pada Blog

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; bottom:10px; left:-12px;'>

<a class='linkopacity' href='Url blog anda' style='margin-left: 1em; margin-right: 1em;' title='HOME'><img border="0"width="50" height="50" src="Url Home icon" /></a><br />

Anda Bisa mendapatkan Url Home Icon dibawah ini

http://img189.imageshack.us/img189/2902/98425686.png

http://img190.imageshack.us/img190/3407/13314253.png

http://img641.imageshack.us/img641/7218/24934856.png

http://img703.imageshack.us/img703/5702/45961315.png

Tinggalkan Komentar Anda