Tuesday 6 July 2010

Menambah Icon Pada Label Atau Category

Untuk menambah Icon Pada label atau Category bukanlah hal yang sulit. Karena jika kita rajin dan giat mencari informasi pasti semuanya mudah dilakukan. Tujuan Menambahkan Icon pada menu Label/ Category adalah untuk memberikan nuansa indah pada blog sendiri.
Contohnya dapat dilihat pada blog ini. Tertarik ? Berikut ini cara membuatnya ::

Langkah Pertama

Pertama harus log in ke blogger, kedua masuk menu Design (tata letak) kemudian masuk ke menu Edit HTML

Jika sudah Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

/*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://i894.photobucket.com/albums/ac148/fajrialhadii/folder-open-16x16.png) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}


Yang Harus Diperhatikan !

Coba liat tulisan yang berwarna merah diatas, tulisan itu mengartikan bahwa itu adalah link icon yang akan muncul nanti. sobat bisa menggantinya dengan gambar yang sobat punya.

Silahkan Dicoba and Happy blogging

Sunday 4 July 2010

Membuat Widget Top Post

Top Post saya rasa perlu untuk melihat seberapa besarkah antusiasnya sebuah postingan yang ada di blog anda. Selain itu dengan adanya widget Top Post dapat membuat kita lebih bersemangat untuk berposting ria. Postingan ini sering dijumpa di I-Net. silahkan surfing, pasti dapat :)

Langkah Membuat Widget Top Post
Tambahkan kode dibawah ini pada element blog teman-teman :


<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2FALAMATBLOGKAMU.COM&num=10" type="text/javascript"></script>
<span style="gt;Widget by <a href="http://ketik-info.blogspot.com/2010/07/membuat-widget-top-post.html">Berbagi Informasi</a></span>


Yang Harus Diperhatikan !
ALAMATBLOGKAMU.COM == ganti dengan alamat blog sobat sendiri
num=10 menunjukkan nilai dari berapa banyak postingan yang akan dimuat


Tambahan !
Cara menghilangkan nomor urut:
Pada tampilan awal akan tampil urutan jumlah top post, jika rekan tidak menginginkannya tinggal hapus aja ke dua kode dibawah ini

document.write('<ol style="text-transform: capitalize;">'); dan document.write("</ol>"); 
pada kode diatas

Cara Membuat Random Post

Setelah sebelumnya saya memposting sebuah tutorial tentang bagaimana membuat related post disertai dengan label (Baca : disini ). Untuk kali ini saya akan posting bagimana cara membuat Random Post, yang artinya postingan yang keluar secara acak. Untuk membuat Random Post bukanlah hal yang sulit. Simak cara membuatnya seperti dibawah ini ::


Langkah membuat Random Post:


Pertama:
Buka Template -> Edit HTML -> Jangan lupa lakukan backup template, Kemudian Copy-paste kode dibawah ini biasanya atas tag </head>


<script type="text/javascript">
//<![CDATA[
var _yourBlogUrl = "http://www.URLBLOGKAMU.com";


function randomPost() {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTotalPostsCallback&start-index=1&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTotalPostsCallback(json) {
var totalResults = json.feed.openSearch$totalResults.$t;
if (totalResults > 0) {
getRandomPostNumber(totalResults);
}
};
function getRandomPostNumber(totalResults) {
var randomNumber = Math.floor((Math.random() * totalResults) + 1);
getRandomUrl(randomNumber);
};
function getRandomUrl(randomNumber) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
var theUrl = _yourBlogUrl +"/feeds/posts/summary?alt=json-in-script&callback=getTheUrlCallback&start-index=" + randomNumber + "&max-results=1";
script.setAttribute("src", theUrl);
document.documentElement.firstChild.appendChild(script);
};
function getTheUrlCallback(json) {
var theUrl = json.feed.entry[0].link[0].href;
window.location.href = theUrl;
}
//]]>
</script>


Langkah Kedua :

Tambahkan sebuah Element halaman -> HTML/Javascript

<a href="javascript:randomPost();">Random Post</a>


Langkah terakhir adalah SIMPAN :)