Straight Shortcuts: Blog Tutorial

Showing posts with label Blog Tutorial. Show all posts

Wednesday, July 15, 2009

Membuat Daftar Link - BlogRoll

Seperti halnya menu phonebook dalam HP, widget blogroll pada dunia Blog kira-kira punya fungsi yang sama yakni memudahkan para blogger untuk saling mengunjungi blog keluarga, sahabat atau favoritnya. Cukup klik pada tautan (link) nama blog yang sudah didaftar, maka browser kita akan menuju ke alamat blog yang dimaksud.

Biasanya widget blogroll ini diiringi dengan aktifitas saling bertukar link (link exchange) dimana biasanya dimanfaatkan oleh Blogger dengan berbagai kepentingan, seperti ingin menjalin pertemanan/silaturahmi atau bahasa kerennya social networking, atau ada juga yang ingin mempromosikan blognya melalui blog orang lain (self promotion), kemudian ada juga sekedar solidaritas atas kepentingan yang sama dan yang terakhir banyak pula yang memanfaatkan widget ini untuk meningkatkan traffic atau bisa juga page rank yang tinggi.

Lalu bagaimana cara pasang blogroll pada blog? menurut kami setidaknya ada dua cara yang paling sering digunakan yakni :

Cara Pertama : Memanfaatkan gadget/fitur/fasilitas yang telah disediakan oleh Blogspot

1. Jika kamu ngeblog di Blogspot, tentu harus login terlebih dahulu
2. Klik menu “Layout (Tata Letak)”
3. Klik “Add a gadget (Tambah Gadget)”
4. Klik “Link List (Daftar Link)”
5. Isi “Title (Judul)” dengan judul gadget ini terserah kamu, contohnya seperti : My Blogroll, My Bloglist, Daftar Teman, Teman-Temanku, Link Favorite dan lain sebagainya
6. Isi jumlah maksimum link (blog) yang ingin ditampilkan, apabila ingin menampilkan seluruh link yang kita miliki, maka cukup dikosongkan kotak ini.
7. Isi “Sorting (Mengurutkan)” dengan pilihan yang disediakan, yakni urut A-Z atau sebaliknya, apabila dikosongkan, maka daftar link ini tidak di sort
8. Isi “New site URL (alamat URL Blog)” dengan alamat lengkap URL Blog yang ingin masuk ke dalam Link, contoh penulisan : http://alifiarahmany.blogspot.com/
9. Isi “New site Name (Nama Blog)” dengan judul blog atau nama identitas blog
10. Klik “Save (Simpan)” dan selesai.

Demikian cara pertama membuat Blogroll di Blogspot, dan adakalanya para blogger tidak puas hanya menggunakan widget yang telah disediakan ini, sebab design warna dan tampilan terkadang kurang pas dengan templete/tampilan yang kita inginkan (warna dan bentuknya), nah untuk cara kedua ini lebih cocok untuk bisa menyesuaikan dengan tampilan blog kita.

Cara Kedua : Menggunakan bahasa HTML manual

1. Jika kamu ngeblog di Blogspot, tentu login terlebih dahulu
2. Klik menu “Layout (Tata Letak)”
3. Klik “Add a gadget (Tambah Gadget)”
4. Klik “HTML – Javascript”
5. Copy Paste kode berikut :

< div style=" border:1px solid #006600;overflow:auto;width:160px;height:100px;" > < ul> < li> < a href=" http://alifiarahmany.blogspot.com"; > Straight Shortcut< /a> < /li> < li> < a href=" http://Reinfo-Insurance.blogspot"/; > Info Asuransi< /a> < /li> < li> < a href="AlamatBlogTeman;" > Blog Teman1< /a> < /li> < li> < a href="AlamatBlogTeman2;" > Blog Teman2< /a> < /li> < /ul> < /div>

6. Simpan dan Selesai

Keterangan :
Ganti kata-kata dimulai dari Alamat URL dengan “Alamat Blog” teman-teman mu (dimulai dengan http :) dan ganti “Blog Title” dengan identitas judul blog teman anda,

Selanjutny Cara ini juga bisa menampilkan banner blog teman kamu yang sudah diberikan bahasa HTML-nya

Selesai sudah tutorial cara memasang Blogroll, Livi berharap bisa bermanfaat buat teman-teman semua – http://www.alifiarahmany.blogspot.com/
Baca Selanjutnya...

Sunday, July 5, 2009

Menampilkan Daftar Komentator Terbanyak

Salah satu indikasi ramai atau tidaknya kunjungan pada Blog adalah dengan melihat banyak atau tidaknya komentar yang ditulis oleh para pengunjung, adapun cara melihatnya yakni dengan menampilkan daftar komentator terbanyak pada blog kita.

Widget yang bisa menampilkan daftar komentator ini biasanya disebut dengan widget Top Commentators, cara kerja widget ini adalah dengan mengurutkan nama-nama pemberi komentar berdasarkan system bahwa yang teratas adalah pemberi komentar dengan total yang paling banyak di blog kita.

Langkah-langkah memasang Top Commentators :

Sebelumnya tentu Login terlebih dahulu, setelah itu masuk ke Layout > Page Elements, dan Add Page Elements baru bertipe HTML/Javascript

Langkah selanjutnya copy paste kode berikut :

<script type="text/javascript"><br />function pipeCallback(obj) {<br /> document.write('<ol>');<br /> var i;<br /> for (i = 0; i < obj.count ; i++)<br /> {<br /> var href = "'" + obj.value.items[i].link + "'";<br /> var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";<br /> document.write(item);<br /> }<br /> document.write('</ol>');<br /> }<br /> </script><br /><script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&filter=namaAnda,anonymous&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>

Keterangan :
filter=namaAnda,anonymous : Masukan nama yang ingin difilter - nama komentator yang tidak ingin ditampilkan (dipisahkan dengan koma), sebaiknya filter nama sendiri juga anonymous.

Contoh untuk Livi Family:

filter=Livi Family, anonymous

namablog.blogspot.com : Ganti sesuai alamat blog kamu sendiri

num=10 : Jumlah maksimal para komentator yang ingin ditampilkan (default 10)

Oke, sahabat Livi - Selamat mencoba ya – www.alifiarahmany.blogspot.com

Baca Selanjutnya...

Monday, June 22, 2009

Sunday, June 7, 2009

Mengetahui cara menampilkan daftar artikel terbaru

Blog tutorial kali ini akan membahas mengenai cara menampilkan daftar artikel terbaru (recent post) pada blog. sebelumnya kami akan jelaskan sedikit mengenai apa itu recent post widget dan maksud penggunaannya.

Recent post adalah widget yang akan menampilkan daftar judul 10 postingan/artikel terbaru yang kita tulis (angka 10 ini dapat disesuaikan sesuai selera pada kode dibawah), sedangkan maksud pemakaiannya adalah agar para pembaca yang masuk ke Blog kita melalui mesin pencari (google misalnya) dan mereka kebetulan mencari artikel yang tanggal postingannya sudah lama (old articles), dapat mengetahui artikel-artikel terbaru apa saja yang kita tulis, dengan demikian para pengunjung yang sudah masuk ke Blog kita, bisa kita arahkan untuk membaca artikel terbaru kita

Ilustrasi : dengan recent post, tamu dapat diarahkan untuk tetap menikmati kesegaran artikel terbaru

Istilah recent post ini seringkali di beri judul oleh para Blogger dengan berbagai istilah seperti : recent articles, artikel terbaru, postingan terbaru, artikel anyar dan lain sebagainya.

Adapun langkah-langkah membuat recent post ini adalah sebagai berikut :

1. Login to Blogger kemuduan pilih "Layout"

2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).

3. Copy kode berikut ini dan taruh dalam kotak "content":

4. Ganti YOURBLOGNAME dengan nama blog kamu.

5. Angka "10" menunjukkan jumlah judul artikel terbaru yang akan ditampilkan, kamu bisa menggantinya sesuai keinginanmu

6. Simpan.Selesai dan bersiaplah mempromosikan 10 artikel terbaru yang kamu miliki – www.alifiarahmany.blogspot.com

Baca Selanjutnya...

Monday, February 23, 2009

Menggunakan Widget Top Posts

Seri tutorial blog kali ini akan membahas mengenai widget Top Posts, banyak sekali istilah lain dari top posts ini, contohnya seperti : Popular Posts, Top Articles, Popular Articles, Artikel Terbaik, Artikel Terpopuler, Hot Posts dan kami sendiri pun menggunakan widget ini dengan judul widget “Artikel Patut Dibaca”.

Fungsi widget Top Posts sendiri adalah untuk menunjukkan tingkat kepopuleran artikel yang pernah kita posting pada Blog, biasanya kepopuleran artikel-artikel (postingan) ini dinilai dari jumlah klik atau banyaknya komentar yang diberikan pada artikel tersebut. Tujuannya tentu sangat jelas, yakni agar pembaca yang masuk ke Blog kita, baik melalui search engine, shoutbox maupun langsung alamat url blog kita, akan mendapatkan promo artikel terbaik kita, sehingga pembaca dengan nyaman diberi kesempatan untuk membaca artikel yang paling sering mendapat respons.

Secara default blog dengan platform Wordpress sudah memiliki widget Top Posts yang bisa langsung digunakan namun tidak demikian apabila kamu menggunakan Blogger/Blogspot. Meskipun demikian, Top Posts juga bisa ditampilkan di Blogspot, yakni dengan menggunakan widget Popular Posts yang dibuat dengan menggunakan bantuan Yahoo Pipes oleh pihak ketiga.

Adapun cara kerja widget Popular Posts ini yaitu dengan menilai kepopuleran suatu artikel berdasarkan jumlah komentar, semakin banyak komentar yang masuk, maka semakin populerlah artikel tersebut atau dengan kata lain artikel-artikel yang telah kamu buat akan membuat suatu peringkat dengan urutan teratas adalah artikel yang terbanyak mendapat respon komentar.

Untuk cara menampilkannya sangat mudah, ikuti langkah berikut:

1. Login dengan id kamu

2. Klik menu Layout

3. Klik Page Element

4. Klik Add a Page Element

5. Klik tombol Add to Blog yang berada di bawah tulisan HTML/JavaScript

6. Pada form title, tulis namanya dengan Popular Post (mengenai istilah ini telah dibahas diatas dan bisa diganti sesuai keinginan kamu)

7. Copy paste kode HTML dibawah ini ke dalam form Content:

function pipeCallback(obj) {

document.write('<ul 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('</ul>');

}

</script>

</script>

8. Klik tombol Save Changes

9. Drag & Drop element yang telah anda buat tadi di tempat yang di sukai

10. Tekan tombol Save, Selesai.

Catatan: Jangan lupa untuk mengganti yang berwarna merah seperti : namablog.blogspot.com dengan URL blog kamu dan kode num=10 adalah jumlah maksimal Popular Posts yang ingin ditampilkan.

Untuk melihat contoh widgetnya silahkan kamu lihat pada kotak dibawah blog ini dengan tulisan “Artikel Patut Dibaca”

Selamat mencoba – www.alifiarahmany.blogspot.com

Baca Selanjutnya...

Monday, January 26, 2009

Header Button Manual

Pada seri Blog tutorial kali ini kami coba memberikan sedikit hasil experimen kami dalam membuat semacam tombol (button) yang kami letakkan di bagian atas (header) pada Blog ini, dengan maksud memberikan kemudahan para sahabat semua untuk menjelajahi (explore) isi Blog ini.

Selain itu pula, tujuan lain dari ditempatkannya button ini pada bagian header ini adalah untuk mempromosikan artikel-artikel terdahulu yang merupakan andalan dan sudah kita kelompokkan kedalam label/kategori yang sama.

Dengan berbekal pengetahuan mengenai cara membuat link atau tautan antar halaman baik pada tautan antar page Blog kita ataupun dengan Blog orang lain (biasa disebut Blogroll atau Link Exchange) maka kami coba membuatnya dengan tahapan-tahapan secara manual sebagai berikut :

Langkah 1

Sebelum di copy-paste kode dibawah ini ada baiknya kamu rancang dahulu isi tombol header yang akan di letakkan, kami beri contoh seperti ini :

Halaman Depan : Tombol yang akan mengarahkan pembaca ke halaman depan/utama (home) pada Blog
Daftar Isi : Tombol yang akan mengarahkan pembaca ke halaman dimana kami menyimpan seluruh daftar isi artikel (cara membuatnya akan diberikan pada seri tutorial berikutnya).
Artikel Islam : Tombol yang akan mengarahkan pembaca ke halaman yang berisi seluruh artikel dengan label/kategori “Islam”
Blog Tutorial : Tombol yang akan mengarahkan pembaca ke halaman yang berisi seluruh artikel dengan label/kategori “Blog Tutorial”
Job Seeker : Tombol yang akan mengarahkan pembaca ke halaman yang berisi seluruh artikel dengan label/kategori “Info Lowongan Kerja”

Keterangan : lihat pada gambar dibawah dilingkar warna biru (1)

Langkah 2 :
Menyimpan path (alamat) link/tautan yang akan dibuatkan tombol tersebut, cara menampilkan path yang akan di simpan adalah : klik pada label/kategori yang telah kamu buat (bisa melalui gadget Label, label cloud maupun tulisan label yang ada dimasing-masing postingan (nomor 3)

Langkah 3 :

Setelah diklik label tersebut, maka akan muncul path dari label tersebut (lihat gambar pertama dengan lingkaran nomor 2), copy paste alamat tersebut dan disimpan pada tempat terpisah (bisa di ms-word atau di notepad) contoh :http://alifiarahmany.blogspot.com/search/label/Islamics

Langkah 4 :
Lakukan hal ini sampai kamu mendapatkan seluruh alamat label yang telah kamu rancang diawal tadi.

Langkah 5 :

Setelah itu copy paste kode berikut pada tambah elemen (add gadget) dan pilih HTML/Javasript :

<tr>

<font color="#000000">Halaman Depan</font></b></a></p></td>

<b><font color="#000000">Daftar Isi</font></b></a></p></td>

<b><font color="#000000">Artikel Islam</font></b></a></p></td>

<b><font color="#000000">Blog Tutorial</font></b></a></p></td>

<font color="#000000">Job Seeker</font></b></a></p></td>

</tr>

</table>

Adapun keterangan mengenai warna dan modifikasikan akan kami jelaskan sebagai berikut :

Pada kode yang kami beri warna merah menunjukkan warna yang dapat kamu ubah sesuai dengan warna dasar blog kamu : (klik disini untuk mengetahui kode warna)
- Font Color : warna font (huruf)
- Bordercolor : warna garis pembatas
- Bgcolor : warna background (latar belakang) kotak tombol ini
Pada kode yang kami beri warna biru menunjukkan persentase pembagian antara lebar layar blog dengan banyaknya tombol yang akan kamu buat agar besar masing-masing tombol tersebut sama besarnya, sebagai contoh : kami membuat 5 (lima) tombol, sehingga agar porsi besarnya sama kami persentasekan masing-masing tombol 20% dan jika kamu membuat hanya 4 (empat) tentu besarnya diganti menjadi 25%

Pada kode yang berwarna hijau menunjukkan tulisan pada tombol (contoh : Artikel Islam) dan yang depannya ada tulisan “http” menunjukkan alamat path yang telah kamu simpan pada notepad tadi.

Setelah seluruh tahapan tadi dilalui pindahkan gadget yang telah di copypaste kode ini ke bagian atas :

Terakhir, save dan lihat hasilnya – Selamat berexperiment – www.alifiarahmany.blogspot.com

Baca Selanjutnya...

Thursday, January 15, 2009

Seri tutorial kali ini akan membahas bagaimana membuat Related Article atau Related Post atau dalam bahasa Indonesianya disebut sebagai Artikel Terkait, biasanya kita temukan di bawah dari Artikel yang ditulis dimana hal ini menandakan bahwa Artikel ini memiliki keterkaitan antar artikel yang lainnya.

Related Article ini sangat berguna terutama untuk memudahkan pembaca blog untuk mengetahui tulisan-tulisan terkait atau yang berhubungan dengan tulisan yang baru dibaca, sebenarnya cara kerja dari Artikel-artikel yang dikaitkan ini adalah mengelompokan artikel (disebut juga postingan) kedalam Label/kategori/tema yang sama.

Adapun langkah-langkah untuk memasang supaya muncul Artikel Terkait di bawah postingan adalah sebagai berikut :

Buka Edit HTML -> pilih Expand Widget Templates
Seperti biasa, untuk membiasakan kehati-hatian maka jangan lupa backup templates terlebih dahulu
Setelah itu cari dengan control find kode : <data:post.body/>
Kemudian copy paste kode berikut tepat di bawah kode yang telah kamu cari tadi

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<span class='box'>
<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>

<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</span></div>

</b:if>

Setelah selesai simpan dan lihat hasilnya.

Sementara itu kamu juga bisa menambah atau mengurangi jumlah artikel terkait dengan mengganti angka pada kode yang berwarna biru diatas, selain itu pula kata "Artikel Terkait" pada kode yang berwarna merah, bisa kamu ganti menyesuaikan bahasa kamu sendiri seperti : Related Articles, Related Posts, Artikel Yang Mirip, Baca Juga, Artikel Sejenis atau kalau bahasa induk blog kamu menggunakan bahasa daerah sekalipun, kamu juga bisa menyesuaikannya.
Selamat mencoba – http://www.alifiarahmany.blogspot.com/

Baca Selanjutnya...

Thursday, December 18, 2008

Membuat Daftar Isi - Label Cloud

Daftar Isi dengan bentuk animasi yang kami pasang pada Blog ini sebenarnya dalam bahasa kebanyakan Blogger disebut dengan Label Cloud (label awan) atau Tag Cloud yakni sebuah animasi untuk mengelompokkan artikel dengan label yang sama dan merupakan gabungan bahasa flash dengan javascript.

Dengan berbekal keyword Label cloud atau tag cloud, kamipun akhirnya menemukan codenya melalui search engine. Pertama kali kami pasang, kami memberi judul widget ini dengan Label Cloud namun ketika salah seorang pembaca kami yang kebetulan asing dengan istilah-istilah blogger, menanyakan tentang tambahan widget Label cloud ini, kami pun berfikir bahwa akan kesulitan jika yang membaca Blog ini adalah non Blogger tentu hal ini tidak mudah untuk dimengerti, kebetulan saja kami mengenal pembaca yang menanyakan akan hal ini.

Pada akhirnya kamipun memutuskan untuk merubahnya dengan judul widget "Daftar Isi", sebab selain berfungsi sebagai gambaran isi dari Blog, bahasa "Daftar Isi" lebih bisa dimengerti oleh seluruh pembaca non Blogger.

Label cloud menurut kami akan membuat Blog kita menjadi lebih menarik sebab Label Cloud ini akan mengelompokkan artikel kedalam label yang sama, dikemas dengan animasi yang menyerupai awan yang berputar-putar, hal ini tentu akan memunculkan daya tarik tersendiri terhadap blog kita, pembaca akan benar-benar menikmati keindahan animasi dalam memilih-milih label yang akan dibaca, jadi label awan dapat menarik perhatian pengunjung.

Cara Membuatnya

Pertama-tama, kamu harus sign in dulu ke blog kamu. lalu klik layout/tata letak, lalu klik "Edit HTML" jangan lupa untuk selalu membackup template terlebih dahulu.

Langkah kedua, cari tulisan :

<b:section class='sidebar' id='sidebar' preferred='yes'>

atau kadang-kadang jika tidak ada tulisan id='sidebar' biasanya tulisannya adalah id='sidebar2' di blog kamu.

Langkah ketiga, jika kamu sudah temukan maka copykan kode dibawah ini setelah kode tersebut. berikut kode yang harus di copy kan :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Langkah keempat, simpan templete lalu preview Blog kamu.

Modifikasi Label Cloud

Kamu juga bisa memodifikasi tamplete diatas sesuai dengan selera kamu (disesuaikan dengan warna dasar blog dan ukuran sidebar) dengan merubah kode diatas (cari lagi kode yang barusan kamu copy paste) pada bagian kode berwarna merah dibawah ini :

1. Merubah lebar, tinggi dan background Label Cloud

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Keterangan :
- Angka 240 warna merah diatas adalah ukuran lebar Label Cloud kamu
- Angka 300 warna merah diatas adalah ukuran tinggi Label Cloud kamu
- Sedangkan #ffffff merupakan kode warna background (keterangan kode warna klik disini)

2. Merubah warna font (huruf) pada Label Cloud (keterangan kode warna klik disini)

so.addVariable("tcolor", "0x333333");

3. Merubah ukuran font (huruf) pada Label Cloud

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Demikian tutorial membuat Daftar Isi dengan animasi Label Cloud kali ini, untuk tutorial selanjutnya akan kami berikan cara mengenai membuat daftar isi dengan tampilan seperti yang kamu lihat pada tulisan "daftar isi" diatas, terima kasih kepada roytanck dan Amanda Fazani yang telah membagi kode dan sharing atas informasinya.
by : www.alifiarahmany.blogspot.com

Baca Selanjutnya...

Tuesday, December 16, 2008

Kode Warna Hexadecimal

Baiklah sahabat Livi, kali ini kami akan memberikan kode warna hexadecimal sebagai acuan pewarnaan pada blog kamu agar tampak lebih cantik :

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Selamat mewarnai - semoga bermanfaat - www.alifiarahmany.blogspot.com

Baca Selanjutnya...

Wednesday, December 10, 2008

Cara Membuat Readmore/Baca Selanjutnya

Setelah diliat-liat hasil tulisan kita kok terpampang semuanya ya? Kalau ada sembilan artikel yang kita tulis, bisa kayak skripsi nih blog kita, panjang dan kurang enak diliatnya, lalu kalau kita bandingkan sama Blog yang lain kok bisa ada pemenggalan dengan kata-kata Read more, Baca Selanjutnya, Baca Selengkapnya atau ada lagi yang bikin pemenggalannya dengan kata Klik disini untuk lanjutannya serta ada juga yang bikin click here for readmore.

Apapun istilahnya yang penting maksudnya bisa dimengerti yakni, kalau mau baca artikel lebih lanjut maka klik pada tulisan-tulisan tadi.

Lalu bagaimana cara bikinnya?

Setelah searching kesana-kemari, akhirnya kami menemukannya justru tidak jauh, kami menemukannya di tempat banner link pertama kami, sang inspirator kami edittag, tentu para bloggers sudah tidak asing dengan nama tadi, selain sebagai sumber inspirasi, beliau juga sangat berjasa sebagai mak comblang kami, sebab kemunculannya di media telah mengenalkan kami kepada pacar baru kami yang bernama Blogspot ini.

Demikian pembukaan artikel ini, selanjutnya akan kami berikan langkah-langkah membuat pemenggalan kami dengan mengcopy paste kode/tag yang kami peroleh tadi :

Langkah 1 :
Tentu saja Login kemudian klik pada bagian "Layout" di Dashboard, lalu menuju tab Edit HTML dan pilih "Expand widget templates".

Langkah 2 :
Cari kata "post-header-line"

Langkah 3 :
Tambahkan kode berikut (huruf yang Tebal) sesuai posisi berikut :

<div class='post-header-line-1'/>

<div class='post-body'>

<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>

<a expr:href='data:post.url'>Read More......</a>
</b:if>

<div style='clear: both;'/> 
</div>

Catatan : kata-kata ”Readmore......” bisa kamu ganti sesuka hati contoh ”Baca Selanjutnya” atau apapun yang menurut kamu oke dan kamipun pernah juga lihat yang menggunakan bahasa daerah masing-masing.

Langkah 4 :
Masih di dashboard, klik Settings, menuju ke Formatting dan perhatikan bagian paling bawah yang menunjukkan "Post template", lalu isikan kode berikut disana.

Type your summary here
<span class="fullpost">
Type rest of the post here
</span>

Kode diatas digunakan hanya sebagai pembantu agar setiap kali kita membuat entri baru, maka di editor (coba lihat gambar di samping ini) kita akan ada semacam template agar lebih memudahkan pemenggalan entri.

Langkah 5 :
Seharusnya sudah selesai namun alangkah baiknya jika kamu baca keterangan berikut ini untuk bisa lebih mengerti lagi :

Bentuk pada gambar diatas akan muncul pada saat kita ingin membuat artikel dengan memilih mode tab “Edit HTML” dan bukan pada tab “Tulis”

Tulisan “Type your summary here” yang pertama artinya adalah pada saat nanti kamu bikin artikel, kamu tulis bagian awal pemenggalan tepat pada tulisan "Type your summary here" dan tulisan kamu tadi akan muncul sebelum kata-kata “readmore…..” sedangkan tulisan “Type your summary here” yang kedua artinya adalah pemenggalan artikel kedua ini akan terlihat setelah pembaca melakukan klik pada tulisan “readmore….”

Contoh Menulis :

Ini Adalah artikel contoh yang bagus dan seterusnya
<span class="fullpost">
Artikel Contoh ini telah berakhir
</span>

Maka hasilnya setelah kita terbitkan akan menjadi seperti ini :

Ini Adalah artikel contoh yang bagus dan seterusnya
Readmore.....

Dan setelah ”Readmore.....” di klik hasilnya akan menjadi seperti ini :

Ini Adalah artikel contoh yang bagus dan seterusnya
Artikel Contoh ini telah berakhir

Selamat mencoba semoga bermanfaat
www.alifiarahmany.blogspot.com Baca Selanjutnya...

Wednesday, December 3, 2008

Setting Tingkat Lanjut

Setelah berhasil membuat Blog sendiri, tentu kamu juga ingin agar Blog kamu tersebut terlihat indah mudah dioperasikan dan bisa masuk ke dalam mesin pencari seperti Google, Yahoo, MSN dan lain-lain. Oleh karena itu, maka berikut ini akan kami berikan petunjuk singkat dalam settingan tingkat lanjut dalam blogger.com

Langkah 1 : masuk dengan login kamu ke blogger.com, setelah itu klik KUSTOMISASI kemudian klik tab SETTING/PENGATURAN, lalu klik BASIC/DASAR, setelah terbuka maka keterangan mengenai settingan adalah berikut ini :

Title/Judul --> jika kamu ingin merubah judul Blog kamu yang dulu pernah dibuat pertama kali, disinilah tempatnya contohnya kamu bisa lihat adalah tulisan besar STRAIGHT SHORTCUTS diatas
Description/uraian --> isi dengan deskripsi/penjelasan singkat mengenai isi/tema blog kamu. Contoh: Sumber Inspirasi dan Informasi
Add your blog to our listing/Tambahkan blog anda ke daftar kami --> kami sangat menyarankan untuk pilih yes agar setiap posting kita selalu masuk di daftar Blogger.com.
Biarkan mesin pencari menemukan blog anda --> pilih yes agar blog kamu ter index/masuk ke mesing pencari google
Show Quick Editing on your blog/tampilkan editting cepat di blog anda --> pilih yes
Show Email post link/tampilkan link posting email --> Sebaiknya pilih yes, tapi pilih no juga tidak apa-apa
Adult/Konten Dewasa --> pilih No jika isi blog kamu tidak dikhususkan hanya untuk orang dewasa, jika dipilih yes perbedaannya adalah setiap ada yang membuka blog kamu, maka selalu ada konfirmasi mengenai peringatan isi konten hanya untuk orang dewasa sebelum masuk blog kamu.
Tampilkan mode kompose --> pilih yes
Show transliteration button for your post/aktifkan transliterasi --> pilih yes kalau kamu ingin ada button untuk mengubah ke hurup biasa ke hurup hindi (India), china dan beberapa huruf khas masing-masing negara, pilih no jika sebaliknya).
Klik Save Settings --> Selesai

Langkah 2 Klik Publishing/publikasikan untuk mengatur menu yang berkaitan dengan berpublikasi di Blogspot :

BlogSpot Address/Alamat Blog Spot --> isi dengan alamat blog kamu. Contoh: http://alifiarahmany.blogspot.com/
ketikkan verivikasi kata yang tersedia sesuai tulisan
Klik Save settings. Selesai

Langkah 3 Klik Formatting untuk mengatur menu format :

Show/tampilkan --> pilih angka posting yang ingin kamu tampilkan. Missal : 6 post, berarti posting yang akan tampil di halaman blog kamu adalah sebanyak enam posting. Pilih post (jangan days) pada menu pulldown.
Date Header Format --> pilih model tanggal/bulan yang kamu sukai, Format tanggal/bulan ini akan selalu muncul diatas postingan kita.
Archive Index Date Format --> pilih model untuk pengarsipan yang kamu sukai.
Timestamp Format --> Pilih bentuk waktu yang kamu sukai.
Time Zone --> Pilih zona waktu yang sesuai. Contoh untu WIB : [UTC-+7.00]Asia/Jakarta.
Language --> Pilih bahasa yang di inginkan.
Convert line break --> Pilih yes
Show Title field --> pilih yes, tapi sekamuinya pilih No juga tidak apa-apa.
Show Link Field --> pilih No, tapi sekamuinya pilih Yes juga tidak apa-apa.
Enable Float aligment --> pilih Yes, tapi sekamuinya mau pilih No juga tidak apa-apa
Klik Save Settings. Selesai

Langkah 4. Klik Comment Untuk mengatur menu comment :

Comments --> pilih Show
Who Comment? --> Pilih Anyone. Ini di maksudkan agar setiap orang bisa berkomentar, tidak terbatas kepada anggota blogspot saja.
Comments Default for Post --> pilih New post Have Comments.
Back links --> Pilih Show. Ini dimaksudkan agar kita mengetahui apabila ada yang pasang link pada artikel kita.
Backlinks Default for Posts --> pilih New Posts have Backlinks.
Comments Timestamp Format --> pilih format jam yg singkat. Contoh: 8.00 PM.
Show comments in a popup window? --> pilih YES. Supaya ketika di klik oleh pengunjung blog kita, tidak hilang.
Show word verification for comments? --> pilih YES. ini di maksudkan agar terhindar dari software robot dengan tujuan melakukan spam.
Enable comment moderation? --> pilih NO (sebaiknya).
Show profile images on comments? --> pilih YES. Supaya gambar komentator yg punya id blogger, dapat menampilkan fotonya.
Comment Notification Address --> isi dg alamat email kamu, ini di maksudkan agar setiap ada yang berkomentar pada artikel, kamu dapat kiriman email dari blogger.com sebagai pemberitahuan.
Klik SAVE SETTINGS. Selesai

Langkah 5. Klik ARCHIVING Untuk mengatur menu archiving

Archive Frequency --> pilih Monthly.
Enable Post Pages? --> pilih YES.
Klik SAVE SETTINGS . Selesai.

Langkah 6. Klik Site Feed

Publish Site Feed --> pilih YES.
Descriptions --> pilih FULL.
Article Footer --> Silahkan bisa di kosongin.
Klik SAVE SETTINGS. Selesai

Selesai sudah settingan tingkat lanjut pada Blog yang baru saja kamu buat, langkah berikutnya kamu tinggal memperbanyak artikel/postingan untuk mengisi blog kamu, semoga bermanfaat. (http://www.alifiarahmany.blogspot.com/)

Baca Selanjutnya...

Tuesday, November 25, 2008

Tutorial Membuat Blog

Bagi kamu yang ingin punya situs pribadi atau Blog pribadi seperti yang kamu buka ini, maka kali ini kami akan memulai membahasnya mulai dari pertama login hingga kustomisasi blog secara menyeluruh, untuk hari ini kami akan mulai dari langkah awal, yakni daftar pada Blogger (domain : www.namakamu.Blogspot.com), langkah-langkahnya bisa kamu simak berikut ini :

Langkah 1 : Sebelum kita mendaftar, maka yang harus kamu lakukan adalah mencari tema dari Blog yang akan kamu buat diawal, sehingga pada saat daftar di Blog kamu udah tidak usah lama-lama mikirin tema dan dapat menyesuaikan dengan judul Blog, warna tampilan dan artikel yang akan ditulis nantinya

Langkah 2 : Silahkan masuk ke http://www.blogger.com/

Langkah 3 : Klik anak panah yang bertuliskan CREATE YOUR BLOG NOW atau jika pakai bahasa Indonesia tulisannya jadi CIPTAKAN BLOG KAMU

Langkah 4 : Isilah email Addres dengan alamat email kamu, saran dari kami supaya kedepannya enak emailnya pakai Gmail, sebab antara Blogger, Gmail dan Google masih ada hubungan Family, contoh : NamaKamu@Gmail.com kalau belum punya simak disini.

Langkah 5 : Ketik ulang alamat email kamu sebagai konfirmasi bahwa alamat email kamu sudah benar

Langkah 6 : Tuliskan password yang kamu inginkan pada form Enter password, password sebaiknya unik, tidak mudah ditebak dan tidak disebar luaskan ke orang lain (udah tau kali)

Langkah 7 : Isikan kembali password kamu tadi pada form Retype password

Langkah 8 : Isi Display name (nama Tampilan) dengan nama yang ingin kamu tampilkan, adalah Nama yang digunakan untuk nama penulis pada artikel (postingan) blog Kamu atau istilahnya nick name kamu yang akan beredar pada dunia Blog, contoh yang kami punya adalah Livi Family, nama ini akan selalu muncul setiap kami membuat artikel baru dan berkomentar pada Blog lain

Langkah 9 : Tulis tulisan yang tertera pada form Word Verification, kadang-kadang salah tidak masalah kok sebab memang dibikin sulit dibaca.

Langkah 10 : Beri tanda tik pada kotak di pinggir tulisan I accept the Terms of Service.

Langkah 11 : Klik gambar anak panah yang bertuliskan CONTINUE atau LANJUTKAN

Langkah 12 : Tuliskan judul blog yang kamu inginkan (nanti bisa di rubah lagi) pada form Blog title, nah kalau ini kamu bisa liat contohnya pada sisi bagian atas garis label yang warna biru dan pada judul blog ini tertulis STRAIGHT SHORTCUTS, kami sarankan ini sesuai dengan tema yang telah ditentukan diawal tadi (lihat nomor 1)

Langkah 13 : Tulis nama situs kamu pada form blog addres (URL), ini adalah alamat situs blog kamu contoh : http://www.alifiarahmany.blogspot.com/

Langkah 14 : Tulislah tulisan verifikasi yang ditampilkan pada form Word Verification, jika sudah selesai klik gambar panah yang bertuliskan CONTINUE atau LANJUTKAN

Langkah 15 : Pilihlah gambar (template) yang kamu inginkan (nanti bisa di rubah lagi), ini juga kami sarankan agar kamu pilih yang sesuai dengan tema kamu lagi, kemudian klik gambar anak panah yang bertuliskan CONTINUE atau LANJUTKAN

Langkah 16 : Setelah keluar tulisan your blog has been created. Klik gambar panah bertuliskan START POSTING atau mulai menulis artikel. Silahkan kamu tuliskan artikel kamu, nah kalau kamu ingin tidak berlama-lama menggunakan internet, kamu konsep dulu tulisannya di MS-WORD, setelah jadi baru di copy paste (supaya irit lagi nih) jika sudah selesai klik tombol publish.

Selesai...Wah Selamat ya sekarang kamu udah punya Blog sendiri nih…are u ready to be a free writer?(Bersambung) - www.alifiarahmany.blogspot.com

Baca Selanjutnya...

Sunday, November 9, 2008

Antara Gmail, Komentar dan Blogger

Saat ini salah satu kewajiban bagi para pembuat blog dengan Blogspot (selanjutnya khusus pada postingan disini kita sebut saja Blogger) maupun para pembaca Blog ini yang ingin meninggalkan komentar pada setiap postingan (tulisan/artikel pada Blog) adalah memiliki email dengan akun Gmail. Kenapa?

Pertama, Gmail itu merupakan syarat mutlak yang ingin ngeblog dengan Blogspot, yang keduanya kami juga memberikan syarat kepada kamu yang belum punya Blog untuk memiliki email dengan Gmail sebagai syarat minimal supaya bisa memberikan komentar pada setiap postingan pada blog ini.

Apa itu Gmail ?

Bagi kamu yang belum kenal dengan Gmail, maka secara ringkas kami berikan informasi bahwa Gmail itu adalah akun email yang disediakan oleh search engine terbesar yakni Google.

Bagaimana caranya punya Gmail?

Silahkan kamu kunjungi Klik Gmail disini lalu klik Sign up for Gmail

Ketik nama Depan kamu (First name).

Ketik nama Belakang kamu (Last name).

Ketik nama Email yang kamu sukai (biasanya sesuai dengan nama kamu, tapi tidak sesuai juga tidak apa-apa - suka-suka kamu deh, yang penting kamu ingat di kemudian hari)
Klik “Check Availability” untuk mengetahui apakah nama email ini sudah pernah digunakan oleh orang lain atau belum.

Ketik Password anda. Password kamu minimal memiliki 8 karakter, pilih dengan password yang mudah kamu ingat. Sebaiknya Password kamu memiliki good strength (muncul otomatis jika password tersebut dirasa sulit bagi orang lain) .

Ketik ulang password anda.

Beri Tanda Remember me on this computer jika kamu menggunakan komputer sendiri tapi ingat Jangan kamu beri tanda jika kamu memakai share komputer sebab email kamu ini akan otomatis terbuka jika seseorang membuka Gmail pada komputer tersebut (tentu kamu mengetahui risikonya kan?).

Beri Tanda Enable Web History.

Pilih Security Question.

Jawab pertanyaan yang mudah kamu jawab.

Ketik email alternatif kamu yang lain (jika punya).

Pilih Lokasi anda (contoh : Indonesia).

Ketik huruf atau angka karakter yang anda lihat pada gambar.

Baca Terms of Service

Klik I Accept. Create My Account

Baca tiga Hal yang harus anda ketahui.

Jangan Lupa Untuk Logout(keluar) setelah membaca akun Gmail kamu!

Selamat, kamu sudah punya akun Gmail, sekarang kamu sudah bisa memberi komentar pada Blog ini atau…..kamu juga tertarik bikin blog sendiri pakai Blogspot? Straight Shortcuts

Baca Selanjutnya...

Straight Shortcuts

Wednesday, July 15, 2009

Membuat Daftar Link - BlogRoll

Sunday, July 5, 2009

Menampilkan Daftar Komentator Terbanyak

Monday, June 22, 2009

RECENT COMMENT DI SIDEBAR BLOGGER

Sunday, June 7, 2009

Mengetahui cara menampilkan daftar artikel terbaru

Monday, February 23, 2009

Menggunakan Widget Top Posts

Monday, January 26, 2009

Header Button Manual

Thursday, January 15, 2009

Related Article

Thursday, December 18, 2008

Membuat Daftar Isi - Label Cloud

Tuesday, December 16, 2008

Kode Warna Hexadecimal

Wednesday, December 10, 2008

Cara Membuat Readmore/Baca Selanjutnya

Wednesday, December 3, 2008

Setting Tingkat Lanjut

Tuesday, November 25, 2008

Tutorial Membuat Blog

Sunday, November 9, 2008

Antara Gmail, Komentar dan Blogger

About Me

Arsip Artikel

Komentar Terbaru