Tips meringankan blog dan loading page

Seperti yang kita semua maklum, punca utama kenapa blog kita menjadi berat dan loading menjadi lambat adalah disebabkan oleh penggunaan widget ataupun plugin yang banyak dan tidak praktikal yang kita letakkan pada sidebar. Paparan jumlah entri di frontpage(muka depan) juga merupakan punca utama kenapa blog tersebut menjadi berat.

Pada info kali ini, aku nak kongsi satu tip bagaimana untuk mengurangkan beban pada blog dengan mengurangkan jumlah entri pada front page supaya blog tersebut dapat loading dengan lebih cepat dan pantas.

Apa yang perlu anda lakukan adalah dengan mengira bebanan blog anda di sini.

Sebagai contoh,untuk blog maribinablog.blogspot.com, apabila memaparkan 6 entri pada frontpage, bebanan adalah sebanyak 90.16kb . Kemudian paparan entri dikurangkan kepada 5 dan apabila di buat timbangan untuk kali yang kedua, bebanan berkurangan menjadi 83.1 kb. Apabila entri di kurangkan kepada 4, bebanan juga semakin berkurangan menjadi 79.39 kb.

Untuk blog maribinablog.blogspot.com, jumlah paparan terbaik adalah tidak melebihi daripada 6 entri. Jadi, aku hanya letakkan 4 entri kerana aku merasakan jumlah tersebut adalah yang terbaik jika diambil kira pada kelajuan internet di Malaysia, terutamanya bagi pengguna broadband yang berkelajuan rendah.

Read More

Tips memilih template dan dekorasi pada blog

Kalau kita lihat sekarang ni,dah banyak template-template bagi pengguna Blogger yang sangat menarik. Di tambah pula, Blogger dah berjaya masukkan Template Designer sebagai feature yang di nanti-nantikan oleh penggunanya. Penambahbaikan pada widget-widget yang disediakan oleh Blogger dan yang dibina untuk Blogger juga semakin baik fungsinya.

Apa yang telah di sediakan kepada pengguna Blogger, sepatutnya  sudah memenuhi citarasa. Hanya kretiviti sendiri yang akan membuatkan sesebuah blog itu nampak menarik. Template Minimalist dengan dekorasi yang ringkas juga sebenarnya mampu membuatkan sesebuah blog itu menarik perhatian jika pemiliknya kreatif.

Tips memilih template

Template-template yang menarik biasanya menggunakan banyak image yang bersaiz besar. Ianya sebenarnya akan memberi kesan semasa page loading. Di tambah pula jika image tersebut di hosting pada Photobucket ataupun Flickr.

Untuk memilih template yang mempunyai banyak image yang bersaiz besar, pilih template yang imagenya di hostingkan di Blogger. Biasanya, URL image tersebut adalah seperti  contoh di bawah:

http://2.bp.blogspot.com/_LZtXSNcp76A/SyF0Zwxv-FI/AAAAAAAAAuE/yzF3mpL-OsI/s320/Cord_Texture_BG.jpg

Dekorasi pada blog

Bagi pengguna Blogger yang ingin membuat dekorasi pada blog, kita seharusnya faham, semakin banyak widget pada blog, semakin lama masa yang di ambil untuk  blog kita loading. Ini kerana, widget-widget tersebut berasal dari hosting yang pelbagai. Ini  sangat mempengaruhi kelajuan dan masa page blog kita untuk loading pada Internet Browser.

Untuk mengelakkan blog menjadi berat, gunakan widget yang kita rasakan sesuai dan perlu sahaja untuk di pasang di dalam blog.

Read More

Cara pasang Jquery lava-lamp navigation menu

Untuk memasang jquery lava-lamp navigation menu (klik untuk demo), ikut beberapa langkah di bawah.

Salin dan paste kod di bawah pada HTML/Javascript(rujuk gambar dibawah).

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>

p/s:

1.Untuk mengubah warna button, edit kod yang di bold berikut.

background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));

2.Untuk mengubah warna background, edit kod yang di bold berikut.

background: #32312E;

3.Untuk mengubah URL dan Title, edit kod yang di bold berikut.

<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>

3.Untuk mengubah jarak background (rujuk gambar di bawah), edit kod yang di bold berikut.

padding: 8px 430px 10px 0px;

Read More

Jquery Lava-Lamp navigation menu

Pada info kali ini, aku nak kongsi satu jquery navigation menu yang di panggil Lava lamp. Demo boleh dilihat pada bahagian atas posting ini ataupun dari demo asal yang boleh anda lihat di sini (sila klik). Tutorial yang aku cuba dari net.tutsplus.com ini nampaknya sangat menarik dari segi effect dan mudah untuk di pasang pada template blogspot. Aku cuba implement pada blogspot dan berjaya. Walaubagaimanapun, sedikit ubahsuai telah dilakukan bertujuan supaya navigation menu ini sesuai pada berbagai jenis theme dan dapat di pasang terus pada HTML/Javascript. Background asal di ubah mengikut warna background pada template. Warna button,warna teks dan saiz juga di ubah kerana saiz asal yang terlalu besar.

Jika anda semua berminat untuk  mencubanya, sila dapatkan tutorial asalnya di entri How to Build a Lava-Lamp Style Navigation Menu atau untuk cara yang termudah, tunggu tutorial aku yang akan datang.

Read More

Cara pasang Breadcrumb pada blogspot

Tips dan tutorial blog kali ini aku nak berkongsi mengenai apakah itu breadcrumb dan cara memasangnya.Untuk meningkatkan SEO sesuatu blog,breadcrumb adalah salah satu dari perkara yang perlu kita praktikkan.Breadcrumb pada sesuatu blog ibarat seperti peta atau sitemap yang akan memudahkan pembaca mengenal pasti kedudukan mereka di dalam page yang ada pada blog kita.

Apakah itu breadcrumb?

Secara ringkasnya breadcrumb adalah salah satu dari blog navigasi atau site navigation yang perlu ada pada sesebuah blog.

Contoh breadcrumb korang boleh lihat di blog ini (pada ruangan di atas tajuk entri ini.) Home > blog > info >S.E.O > Tips > Tutorial

Apakah kaitannya breadcrumb dengan seo?

Untuk soalan ini aku tunjukkan sedikit artikel yang didapati dari Google Search Engine Optimization Starter Guide.

note : klik link ini untuk membaca artikel penuh dari Google Search Engine Optimization Starter Guide. [klik sini]

Sila klik pada link di bawah untuk tutorial  memasang Breadcrumb pada blogspot.

Penulis: Neo
Blog : http://neodmarco.blogspot.com
Entri asal: SEO.Blog Tips.Tutorial | Cara Pasang Breadcrumb Pada Blogspot

Read More

Button back to top versi 3

Back to top button versi 3 yang boleh anda lihat pada bahagian bawah post (sila scroll ke bawah) blog ini memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button tersebut, dan page akan scroll secara automatik ke atas.

Untuk memasang button back to top ini, sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Log in blog => Dashboard => Design => Add A Gadget=>HTML/Javascript=>

Langkah 2

Salin kod di bawah dan paste pada ruang content HTML/Javascript (rujuk langkah 1) dan Save.

<style type="text/css">

#scrolltotop a

{

display: block;

display: none;

z-index: 999;

opacity: .6;

position: fixed;

top: 100%;

margin-top: -20px;

left: 50%;

margin-left: -150px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

width: 68px;

line-height: 1px;

height: 15px;

padding: 10px 3px;

background-color: #000;

font-size: 12px;

font-weight: bold;

text-align: left;

color: #fff;

}

</style>

<div id="scrolltotop"><a href="#">Scroll to top</a></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

var scroll_timer;

var displayed = false;

var $scrolltotop = $('#scrolltotop a');

var $window = $(window);

var top = $(document.body).children(0).position().top;

$window.scroll(function () {

window.clearTimeout(scroll_timer);

scroll_timer = window.setTimeout(function () {

if($window.scrollTop() <= top)

{

displayed = false;

$scrolltotop.fadeOut(500);

}

else if(displayed == false)

{

displayed = true;

$scrolltotop.stop(true, true).show().click(function () { $scrolltotop.fadeOut(500); });

}

}, 100);

});

});

</script>

p/s:

1.Warna button boleh di edit dengan menukar kod warna bagi background-color: #000;

2.Kedudukan boleh di edit dengan mengubah nilai margin-left: -150px;

Akhir sekali, klik Preview. Jika tiada mesej Error terpapar, klik saja Save.

Read More