Tutorial Corner

Mengatur Font dengan Custom CSS pada Wordpress

2012-01-24T08:08:00.001+07:00

Pengaturan font pada wordpress sebenarnya sederhana, misalnya kita ingin mengganti fotn (huruf) pada body :

body { font-family: Trebuchet MS, Tahoma, Verdana, Helvetica, sans-serif;}

untuk pada paragraf

p {font-family: Trebuchet MS, Tahoma;}

font-family adalah kode untuk jenis huruf.

Selain itu ada juga jenis sans dan sans-serif, perbedaannya adalah

Kita juga bisa mengatur ukuran, jenis, dan warna huruf sekaligus. Misalnya:

content p { margin:5px;
padding:5px;
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-size: 110%;
color: black; }

margin, jarak antara ukuran website dengan tepi browser
padding, untuk menentukan jarak tulisan dengan tepi website
font-size, mengatur ukuran huruf. Bisa juga dengan 12px atau 12em
color, memilih warna untuk huruf.

Ayo kita buat website dengan font yang kita suka :)

sumber :
http://codex.wordpress.org/Playing_With_Fonts
http://www.w3schools.com/css/css_font.asp

Memasang Meta Tag Pada Blogspot

2012-01-06T00:05:00.001+07:00

Kali ini Tutorial Corner kembali lagi dengan tutorial baru. Sebenarnya di dunia internet sudah tidak baru lagi, tapi melihat hal ini sangat penting maka akan kami bahas, yaitu Meta Tag.

Meta Tag adalah kata kunci yang digunakan search engine (seperti Google, Yahoo, MSN) untuk mengindex sebuah blog. Dengan memasang Meta Tag pada blog, maka search engine pun akan mudah menemukan blog kita.

Nah, untuk kamu pecinta blogspot, berikut cara memasukkan Meta Tag pada blog kamu. Dicoba ya.

1. Masuk ke blogger.com
2. Pilih Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Cari Kode 1 berikut
Kode 1:

<b:include data='blog' name='all-head-content'/>

5. Lalu tambahkan kode Kode 2 tepat dibawahnya Kode 1
Kode 2

<meta content='Description' name='description'/>
<meta content='Keywords' name='keywords'/>
<meta content=' Author ' name='author'/>

5. SIMPAN TEMPLATE
6. Selesai.

Keterangan:
Description, adalah deskripsi dari blog. Misalnya 'umpulan Tutorial Blog, Internet, Komputer, Bisnis, dan Teknologi".
Keywords, merupakan kata kunci yang sering muncul di blog. Contoh 'blog, tutorial, blogspot, wordpress, komputer'. Kami sarankan untuk menggunakan lower case (huuruf kecil).
Author, adalah penulis blog. Misalnya'Tutorial Corner'.

Warning! Terkadang dengan copy paste kode sering terjadi kesalahan dalam menyimpan Template. Tuliskan tanda petik (') secara manual untuk mengawali dan mengakhiri isian (Description, Keywords, Author).

Sekarang blog kamu sudah SEO Friendly lho. Asyik kan.
Nantikan Tutorial selanjutnya ya.

Keep Blogging.

Cara Membuat Redirect dari Blogspot ke Website lain

2012-01-01T00:51:00.001+07:00

Redirect Blog terkadang sangat diperlukan, terutama bagi mereka yang sudah berganti haluan (pindah domain). Maka dengan Redirect Blog semua pengunjung yang mampir ke blog lama langsung di arahkan ke blog baru. Mantap kan.

Pada Blogspot, untuk me-redirect ke alamat website lain sangatlah mudah. Begini caranya:

1. Masuk ke blogger.com
2. Pilih Rancangan > Edit HTML
3. Tempelkan Kode 1 di antara <head> ... </head>
Kode 1:

<meta content='0;URL=cucuhermawan.com' http-equiv='refresh'/>

4. SIMPAN TEMPLATE
5. Selesai.

Silahkan ganti cucuhermawan.com dengan alamat blog baru kamu.

Sangat mudah bukan. Jadi, sekarang kamu tidak perlu khawatir ada visitor yang berkunjung ke blog lama. Karena secara langsung mereka akan diredirect ke blog baru kamu.

Happy Blogging

Membuat Read More Otomatis dengan/tanpa Thumbnail

2011-12-31T21:29:00.008+07:00

Read More digunakan untuk memenggal tulisan menjadi lebih pendek. Banyak sekali tutorial yang membahas cara membuat Read More. Kali ini saya akan membuat tutorial Read More yang otomatis, juga cara menampilkan atau menyembunyikan thumbnailnya.

Berikut cara membuat Read More Otomatis:
1. Masuk ke blogger.com
2. Pilih Rancangan > Edit HTML. STOP! Jangan dulu check 'Expand Template Widget'
3. Cari kode </head>. Untuk mempermudah, kamu bisa menggunakan kombinasi CTRL+F pada komputer. Lalu tambahkan Kode 1 tepat di atas </head>

Kode 1:

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 15;
img_thumb_width = 15;</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag ="";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag ='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Check 'Expand Template Widget'
5. Cari kode <data:post.body/>

secara default kodenya seperti ini:

<div class="entry">
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>

6. Ganti <p><data:post.body/></p> dengan Kode 2.

Kode 2:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read more: <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

7. Klik SIMPAT TEMPLATE
8. Selesai

Kamu juga bisa mengedit Kode 1 dan Kode 2 di atas sesuai dengan selera. Berikut penjelasannya :

Penjelasan pada Kode 1

summary_noimg = 250; Panjang tulisan yang ditampilkan ketika tidak ada gambar/thumbnail.
summary_img = 250; Panjang tulisan yang ditampilkan ketika ada gambar/thumbnail.
img_thumb_height = 15; Tinggi thumbnail, dalam px.
img_thumb_width = 15; Lebar thumbnail, dalam px.

Mungkin sebagian kamu tidak suka dengan keberadaan thumbnail, maka saya berikan tips agar Read More secara otomatis tidak memunculkan thumbnail. Silahkan ganti setting kodenya menjadi seperti ini.

1. img_thumb_height = 0;
2. img_thumb_width = 0;
3. imgtag ='<span style="float:left; padding:0px 0px 0px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

Sekian dulu tutorial membuat Read More Otomatisnya. Silahkan dicoba dan semoga berhasil.

Oh ya, tak terasa hari ini adalah penghujung tahun 2011. Maka segenap kru Tutorial Corner mengucapkan

Selamat Tahun Baru 2012

Semoga ke di Tahun 2012 ini kamu bisa lebih baik lagi. Amien.

Sudahkah kamu membuat Resolusi di tahun baru? sebagain contoh bisa lihat di sini

Resolusi Juara 2012

Terima kasih.

Menampilkan Smile pada WordPress

2011-12-29T23:18:00.005+07:00

Smile, juga dikenal sebagai "emoticon", adalah gambar yang digunakan untuk menyampaikan emosi dalam tulisan Anda. Smile adalah cara yang bagus untuk mencerahkan tulisan.

Teks smile dibangunn dari dua atau lebih tanda baca. Misalnya:
;-) sama dengan
:-) sama dengan
:-( sama dengan
:-? sama dengan

Secara default, WordPress otomatis merubah teks smile ke emoticon. Anda bisa mengatur agar Wordpress tidak merubah teks, yaitu:

Masuk ke Dashboard
Pilih Settings -> Writing
Pada bagian Formatting, unchek box "Convert emoticons like :-) and :-P to graphics on display"

Berikut adalah macam-macam Smile yang tersedia pada WordPress. Enjoy.

text	text	full text	full text
:)	:-)	:smile:	:lol:
:D	:-D	:grin:	:oops:
:(	:-(	:sad:	:cry:
:o	:-o	:eek:	:evil:
8O	8-O	:shock:	:twisted:
:?	:-?	:???:	:roll:
8)	8-)	:cool:	:!:
:x	:-x	:mad:	:?:
:P	:-P	:razz:	:idea:
:\|	:-\|	:neutral:	:arrow:
;)	;-)	:wink:	:mrgreen:

Tentang Tutorial Corner

2011-12-28T07:57:00.002+07:00

Tutorial Corner merupakan blog official untuk Tutorial Teknologi, Komputer, Software, Internet, Blog, dan Bisnis.