MasdaZine

Membuat Navigasi Breadcrumbs di Blogspot

2010-08-06T03:30:00.003-07:00

Mungkin sudah tidak asing lagi bagi anda dengan navigasi breadcrumbs ini. Dan saya fikir anda semua tentu sudah tahu tentang cara pembuatannya. Namun dikarenakan ada teman blogger yang mempertanyakan tentang bagaimana cara membuatnya maka tidak ada salahnya jika saya kembali mengulang. ^^, Terima kasih mas Rendi Indra Jaya telah meninggalkan pertanyaan di sini.

Mengenai langkah pembuatannya silakan anda ikuti langkah-langkah di bawah ini.

Login seperti biasa ke blogger.com
klik Rancangan, kemudian pilih Edit HTML, ada baiknya jika anda download dulu template lengkap anda
Beri tanda centang pada Expand Template Widget
Cari kode seperti ini
]]></b:skin>
Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi

.breadcrumbs {
padding: 5px 5px 5px 0;
margin: 0 0 5px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
}
Kemudian cari lagi kode seperti ini

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
You Are Here » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
klik Simpan

Sekarang lihat hasilnya, jika anda berhasil maka akan muncul navigasi breadcrumbs di atas judul postingan anda seperti pada blog ini. Selamat mencoba dan semoga bermanfaat.... ^^,

Membuat Menu Navigasi Current Page

2010-07-23T01:48:00.001-07:00

Current page merupakan tampilan pada navigasi yang berfungsi untuk menandai page yang sedang aktif pada navigasi. Untuk lebih jelasnya bisa anda lihat pada image di samping. Berhubung current page ini sudah saya aplikasikan pada template saya kemarin, anda bisa melihat livenya di sini. Selain berfungsi untuk menandai page aktif, current page juga membuat tampilan blog menjadi lebih elegant dengan sedikit pengembangan.

Mengenai bagaimana cara membuatnya silakan ikuti langkah di bawah ini.

Login ke blogger.com
Klik Rancangan
Klik Edit HTML, tidak perlu memberi centang pada Expand Widget Template
Cari kode berikut

</head>
Copy kode di bawah ini dan letakkan tepat sebelum (di atas) kode tadi

<style type='text/css'>
#menu-wrapper {
margin: 0;
padding: 5px 10px 5px 0;
background: #b7b7ff;
font-size: .9em;
line-height: 22px;
border-top: 1px solid #a8a8ff;
border-bottom: 1px solid #a8a8ff;
}
.menu {
margin: 0;
float: left;
height: 26px;
}
.menu ul {
margin: 0;
padding: 6px 0 0 10px;
font-weight: bold;
list-style-type: none;
text-align: left;
}
.menu li {
display: inline;
margin: 0;
}
.menu li a {
text-decoration: none;
margin: 0;
padding: 4px 10px;
color: #32527a;
}
.menu li a:hover {
background: #c6c6ff;
color: #64527a;
}
.current-cat{
padding: 5px 10px;
color: #64527a;
background:#c6c6ff;
border: 1px solid #a8a8ff;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
border-radius: 5px;
}
.actived a {
color: #64527a !important;
}
</style>

<script type='text/javascript'>
function currentpage (url,current,name) {
var name = name ;
var url = url;
var current = current;
if (current == url) {
document.write ('<li class="current-cat"><a href="'+url+'">'+name+'</a></li>');
}
else {
document.write ('<li><a href="'+url+'">'+name+'</a></li>');
}
}
</script>
p
Cari lagi kode seperti ini

<div id='header-wrapper'>
Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi (langkah ini menentukan letak navigasi anda, apabila diletakkan sebelum kode tadi maka menu anda akan berada di atas header. Dan sebaliknya apabila kode diletakkan setelah end tag kode tadi maka navigasi akan berada di bawah header.)

<div id='menu-wrapper'>
<b:section class='menu' id='menubar' showaddelement='no'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList'>
<b:includable id='main'>
<ul>
<b:loop values='data:links' var='link'>
<script type='text/javascript'> currentpage("<data:link.target/>","<data:blog.url/>","<data:link.name/>"); </script>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</div>
Klik Simpan

Untuk menambahkan link pada navigasi, silakan masuk Rancangan » Elemen Halaman » pilih Daftar Link. Tambahan Url yang ingin anda pasang pada navigasi. Setelah selesai jangan lupa klik Simpan. Sekarang cek ke blog anda, ^^, semoga bermanfaat dan happy blogging....

Blue Melodic Template

2010-07-21T11:44:00.003-07:00

Blue Melodic Template

Features:

Blue and white
3 Columns
3 Footer Columns
Bubble Comments
Highlight Author Comments
Current Navigation
Form Search
Auto Readmore With Thumbnail
Related Posts
Avatar On Comments

Tested:

Firefox
Chrome
Opera
IE

Untuk melihat livenya silakan klik DI SINI. bagi yang berminat menggunakan template ini, silakan download DI SINI.

Vertical Menu Dengan Efek Show Hide

2010-07-06T07:01:00.003-07:00

Setelah cukup lama tidak aktif di dunia blogging, akhirnya baru sekarang bisa posting lagi. Akhir-akhir ini saya disibukkan oleh aktifitas keseharian saya. Sebagai postingan pertama saya setelah sekian lama istirahat dari dunia blogging saya akan memberikan sebuah tutorial tentang membuat vertical menu dengan efek show hide. Tutorial ini saya pelajari dari Antonio Lupeti, mungkin sudah tidak asing lagi bagi anda dengan blogger yang saya maksud. Live demonya silakan anda lihat DI SINI. bagi anda yang berminat untuk membuatnya silakan ikuti langkah-langkah di bawah ini.

STEP 1

Login ke blogger.com
Klik Rancangan
Klik Edit HTML
Cari kode berikut

</head>

Copy kode di bawah ini, lalu letakkan tepat di atas kode tadi.

<style type="text/css">
/* --- button --- */
.button{
background:url(http://i46.tinypic.com/2rbz7rt.png) -32px right no-repeat;
color:#FFFFFF;
clear:both;
display:block;
float:left;
font-size:13px;
font-weight:bold;
height:31px;
line-height:31px;
width:auto;
margin-right:30px;
}
a.button {
text-decoration:none;
}
.button span {
background:url(http://i46.tinypic.com/2rbz7rt.png) left top no-repeat;
display:block;
height:31px;
line-height:31px;
padding-left:10px;
padding-right:8px;
margin-right:20px;
}
/* --- vertical menu --- */
.v-menu{
border:solid 1px #7F9FBF;
width:200px;
clear:both;
}
ul.v-menu, .v-menu li{
padding:0;
margin:0;
list-style:none;
}
ul.v-menu{
clear:both;
margin-top:6px;
padding:6px 10px;
}
.v-menu li a{
color:#555555;
font-weight:bold;
display:block;
border-top:solid 1px #DEDEDE;
padding:4px;
text-decoration:none;
}
.v-menu li a:hover{
color:#999999;
}
</style>
<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>
Klik Simpan

STEP 2

Setelah template anda tersimpan, Klik Rancangan
Pada menu Elemen Halaman, pilih Tambah Widget sesuai dengan letak yang anda inginkan
Setelah terbuka halaman tambah widget pilih penambahan HTML/JavaScript
Pada halaman Konfigurasi HTML/JavaScript beri judul widget anda, kemudian copy kode berikut dan letakkan pada content.

<a href="#" class="button" onclick="javascript:showElement ('v-menu')">
<span>ClickHere</span></a>
<ul id="v-menu" class="v-menu" style="display: none;">
<li><a href="http://URL ANDA">TEXT ANDA</a></li>
<li><a href="http://URL ANDA">TEXT ANDA</a></li>
<li><a href="http://URL ANDA">TEXT ANDA</a></li>
<li><a href="http://URL ANDA">TEXT ANDA</a></li>
<li><a href="http://URL ANDA">TEXT ANDA</a></li>
</ul>

Keterangan :
* Pada list item (<li><a href="http://URL ANDA">TEXT ANDA</a></li>), silakan sesuaikan dengan Url yang anda tuju dan juga text anda.
Klik Simpan

Sekarang lihat blog anda, jika anda berhasil membuatnya maka akan terlihat vertical menu seperti di blog saya yang ini. Selamat mencoba dan semoga bermanfaat ^^,. Saya mau blogwalking dulu, kangen ama temen-temen blogger semua....

Membuat Efek Shadow Pada Image

2010-06-30T02:30:00.001-07:00

Sesuai dengan namanya, efek shadow image merupakan efek pada image yang menyerupai bayangan. Dalam penerapan efek shadow tidak sepenuhnya dibentuk dengan kode CSS, melainkan memanipulasinya dengan menggunakan image. Maaf apabila saya tidak bisa memberikan demonya di blog ini, untuk itu live demo saya tempatkan di blog yang saya khususkan untuk live demo. karena tidak mungkin lagi rasanya jika template ini harus ditambah banyak kode lagi ^^, Silakan klik DI SINI untuk melihat demonya. Berikut ini cara untuk membuatnya.

Login ke blogger.com
Klik Rancangan
Pilih menu Edit HTML (tidak perlu memberi centang pada 'Expand Template Widget')
Cari kode berikut

]]></b:skin>
Copy kode berikut ini lalu letakkan tepat di atas kode tadi.

.shadow img {
background: url(http://i50.tinypic.com/10xyg4w.png) no-repeat right bottom;
padding: 0 6px 6px 0;
}
Klik Simpan

Untuk menerapkan efek shadow pada image kodenya seperti ini.

<div class="shadow"><img border="0" src="http://URL GAMBAR ANDA"/></div>

Kekurangan dalam langkah ini anda harus memasukkan kode CSS tersebut setiap anda ingin memposting image. ^^, Solusinya di bawah ini adalah penerapan efek shadow pada image secara otomatis.

Login ke blogger.com
Klik Rancangan
Beri centang pada Expand Template Widget
Setelah loadnya selesai, Cari kode berikut

<data:post.body/>
Lalu sisipkan kode CSS tadi, perhatikan kode di bawah ini

<div class="shadow"><data:post.body/></div>
Klik Simpan

Dengan menerapkan langkah kedua ini, begitu anda memposting image pada blog maka akan secara otomatis terdapat shadow pada image tersebut. Semoga bermanfaat...
^^,

Membuat Tabel di Blog

2010-06-26T21:09:00.001-07:00

Pembuatan table dalam blog terkadang memang harus digunakan. Misalkan saja kita ingin memposting artikel tentang sebuah data, kode warna, dsb. Bagi anda yang sudah lama berkecimpung di dunia blogger mungkin sudah di luar kepala untuk membuat table, untuk itu pada postingan kali ini saya tujukan kepada blogger pemula yang belum begitu familiar dengan kode untuk pembuatan tabel, pada intinya hanya mengulang saja ^^,. Berikut ini contoh-contoh pembuatan table.

Tabel 1 kolom

Kodenya:

<table border="1">
<tr><td>Kolom 1</td></tr>
</table>

Hasilnya:

Kolom 1
Tabel 2 kolom

<table border="1">
<tr><td>Kolom 1</td><td>Kolom 2</td></tr>
</table>

Hasilnya:

Kolom 1 Kolom 2

* Dari kode di atas dapat diambil kesimpulan jika tag td menentukan kolom
Tabel 2 baris

<table border="1">
<tr><td>Baris 1</td></tr>
<tr><td>Baris 2</td></tr>
</table>

Hasilnya:

Baris 1
Baris 2

* Dari kode di atas dapat diambil kesimpulan jika tag tr menentukan Baris
Tabel 1 Kolom 2 Baris

<table border="1">
<tr><td rowspan="2">Kolom 1</td><td>Baris 1</td></tr>
<tr><td>Baris 2</td></tr>
</table>

Hasilnya:

Kolom 1 Baris 1
Baris 2

* Dari kode di atas dapat diambil kesimpulan jika tag rowspan berfungsi untuk penggabungan cell dalam satu kolom dan angka 2 pada rowspan menentukan jumlah cell yang digabung
Tabel 1 Baris 2 Kolom

<table border="1">
<tr><td colspan="2">Baris 1</td></tr>
<tr><td>Kolom 1</td><td>Kolom 2</td></tr>
</table>

Hasilnya:

Baris 1
Kolom 1 Kolom 2

* Dari kode di atas dapat diambil kesimpulan jika tag colspan berfungsi untuk penggabungan cell dalam satu baris dan angka 2 pada colspan menentukan jumlah cell yang digabung
Penggunaan Tag cellpadding dan bgcolor

<table border="1" cellpadding="10">
<tr><td bgcolor="#ff9900">Tabel</tr>
</table>

Hasilnya:

Tabel

* Dari kode di atas dapat diambil kesimpulan jika tag cellpadding berfungsi untuk memberi jarak text dengan border dan angka 10 pada cellpadding menentukan jarak antara text dengan border(dalam satuan px)
* tag bgcolor berfungsi untuk memberi background warna pada cell

Penggunaan tag width, cellspacing, dan align

<table border="1" cellspacing="10">
<tr><td width="200" align="center">Lebar Kolom ini 200px</td>
<td width="150" align="center">Lebar Kolom ini 150px</td></tr>
</table>

Hasilnya:

Lebar Kolom ini 200px Lebar Kolom ini 150px

* Dari kode di atas dapat diambil kesimpulan jika tag cellspacing berfungsi untuk memberi jarak antar cell dan angka 10 pada cellspacing menentukan jaraknya(dalam satuan px)
* tag align berfungsi untuk mengatur posisi text pada cell pada area horizontal (left,center,right)

Penggunaan tag height dan valign

<table border="1" valign="middle">
<tr><td height="100">Tabel</tr>
</table>

Hasilnya:

Tabel

* Dari kode di atas dapat diambil kesimpulan jika tag valign berfungsi untuk mengatur posisi text pada area vertical (top,middle,bottom)
* tag height berfungsi untuk menentukan tinggi cell (dalam satuan px)

Catatan:
&187; Memberi angka 0 pada border berfungsi untuk mengilangkan border.

Saya rasa cukup sekian dulu tutorial kali ini. Selanjutnya anda bisa berkreasi sesuai keinginan anda. Semoga bermanfaat.... ^^,

Membuat Highlight Author Comment

2010-06-24T03:33:00.003-07:00

Selain untuk mempercantik blog, fungsi dari Highlight author comments adalah untuk membedakan komentar antara visitor dan author (admin) blog. Jadi misalkan ada visitor yang bertanya, maka akan tampak jelas apabila author tersebut membalas atau memberikan jawaban kepada visitor. Dengan alasan demikian tutorial ini sangat mendukung untuk kotak komentar blog yang belum dilengkapi fasilitas Reply. Lebih jelasnya anda bisa melihatnya live demo pada blog ini atau bisa juga anda lihat DI SINI.

Berikut langkah-langkah untuk membuatnya.

Login ke blogger.com
Klik Rancangan
Klik Edit HTML, kemudian beri centang pada Expand Widget Template
Cari kode berikut

]]></b:skin>

Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

.owner-Body {
background: #f6f6f6;
margin-top: -7px;
padding-left: 10px;
padding-top: 10px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
}
.owner-Body p {
margin: 0;
padding-bottom: 15px;
}

* pada background, kode warna #f6f6f6 menentukan warna background komentar admin. Anda bisa menggantinya sesuai dengan keinginan anda
* anda juga bisa menambahkan image pada kotak komentar admin dengan menambahkan kode berikut url(http://image anda) setelah kode warna (beri spasi)
Kemudian cari kode berikut

<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Copy kode di bawah ini kemudian sisipkan pada kode di atas

<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>

</b:if>

Penempatannya seperti ini

<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
Klik Simpan

Sekarang anda buka blog anda dan berikan komentar pada blog anda sendiri dan bedakan dengan tampilan komentar sebelum anda menambahkan kode-kode di atas. Semoga bermanfaat dan happy blogging.... ^^,

Macam-macam Border Pada CSS3

2010-06-22T05:42:00.001-07:00

Dalam tabel kode CSS3 yang pernah saya posting sebelumnya, kode untuk border memiliki beraneka macam, tentunya berbeda-beda untuk setiap kodenya. Nah di sini saya akan sedikit menjelaskan fungsi dari kode border tersebut. Jika anda mendownload tabel CSS3 kemarin pada border kurang lebih terdapat kode seperti ini

solid
dotted
dashed
double
groove
ridge
inset
outset

Nah sebagai contoh penjelasannya kita gunakan kode berikut.

<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px solid #000;"> CONTENT ANDA </div>

Perhatikan kode di atas.

pada kode border, 4px menunjukkan ketebalan border

solid

Untuk mengetahui perbedaan bordernya maka kita tinggal mengganti kode solid, dengan kode-kode sesuai dengan kode yang sudah saya tulis diatas.

Dari kode di atas maka akan terbentuk sebuah kolom seperti ini

CONTENT ANDA
Selanjutnya kita ganti kode solid dengan dotted, hasilnya seperti ini.

CONTENT ANDA
Selanjutnya kita ganti kode dotted dengan dashed, hasilnya seperti ini.

CONTENT ANDA
Selanjutnya kita ganti kode dashed dengan double, hasilnya seperti ini.

CONTENT ANDA
Selanjutnya kita ganti kode double dengan groove, hasilnya seperti ini.

CONTENT ANDA
Selanjutnya kita ganti kode groove dengan ridge, hasilnya seperti ini.

CONTENT ANDA
Selanjutnya kita ganti kode ridge dengan inset, hasilnya seperti ini.

CONTENT ANDA
Selanjutnya kita ganti kode inset dengan outset, hasilnya seperti ini.

CONTENT ANDA

Kode diatas hanyalah sebagai contoh saja, pada intinya saya hanya menjelaskan macam-macam border pada CSS3. semoga bermanfaat... ^^,

Memberi Nomor Pada Komentar (Numbering Comments)

2010-06-19T05:44:00.001-07:00

Tidak begitu jauh bedanya dengan postingan saya kemarin, tentu saja masih berhubungan dengan comment ^^, sebelumnya saya pernah membahas tentang cara membuat comments bubble dan cara membuat comments bubble versi 2 maka kali ini saya akan membahas tentang cara membuat number comments.

Tips yang saya maksudkan adalah pemberian nomor pada kotak komentar. Untuk Live demo silakan klik di sini di sini. Untuk membuatnya silakan ikuti langkah-langkah berikut.

Login ke blogger.com
Klik Rancangan
Klik Edit HTML, kemudian beri centang pada Expand Widget Template
STEP 1
Cari kode berikut

]]></b:skin>

Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

.comments-counter a:link,.comments-counter a:visited {
color: #000 !important;
text-decoration: none !important;
background: url(http://i47.tinypic.com/99m5on.jpg) no-repeat;
width: 50px;
height: 48px;
float: right;
display: block;
margin-right: 5px;
margin-top: -15px;
text-align: center;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 15px;
font-weight: normal;
}
.comments-counter a:hover,.comments-counter a:active {
color: #666 !important;
text-decoration: none !important;
}
STEP 2
Kemudian cari kode berikut

<b:loop values='data:post.comments' var='comment'>

Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

<script type='text/javascript'>var CommentsCounter=0;</script>
STEP 3
Terakhir cari kode berikut

<data:commentPostedByMsg/>

Copy kode berikut lalu letakkan tepat di bawah (setelah) kode tadi

<span class='comments-counter'>
<a expr:href='data:comment.url' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
klik Simpan

Sekarang lihat blog anda, buka postingan anda yang memiliki komentar. Perhatikan kotak komentar pada bagian kanan. Anda dapat mengatur posisi angka pada icon bubble dengan menyesuaikan kode yang berwarna merah pada STEP 1. Anda juga bisa mengganti icon bubble sesuai dengan keinginan anda dengan cara mengganti url yang berwarna biru dan jangan lupa sesuaikan juga kode yang berwarna orange dengan ukuran icon bubble anda (STEP 1). Semoga bermanfaat...^^,

Prisa Adinda Template

2010-06-18T04:57:00.001-07:00

Prisa Adinda Template begitulah saya menyebutnya. Saking ngefansnya saya ama Prisa sampai-sampai saya terinspirasi untuk membuat template, alhasil yah seperti screnshot disamping. live demonya bisa anda lihat di sini. Namun karena blog saya hanya blog ini, jadi yah daripada mubadzir lebih baik saya bagikan ^^,. Spesifik Template ini antara lain, dark, 2 kolom, left sidebar, bottom 3 kolom, bubble comments, numbering comments, highlight author comments.

Bagi anda yang berminat menggunakan template ini untuk blog anda, silakan klik image di atas untuk mendownloadnya. ^^, happy blogging...

Membuat Comments Bubble Versi 2

2010-06-14T07:02:00.000-07:00

Pada postingan sebelumnya tentang cara membuat comments bubble pada blog mas Rizal memberikan sebuah pertanyaan kepada saya tentang bagaimana cara membuat comments bubble seperti pada blog ini. Untuk itu pada postingan ini saya akan memberikan sedikit tutorial tentang cara membuat comments bubble versi 2, ^^, judulnya agak-agak mirip dengan postingan kemarin.

Langsung aja berikut langkah-langkahnya.

Login ke blogger.com
Klik Rancangan
Klik Edit HTML, kemudian beri centang pada Expand Widget Template
Cari kode berikut

]]></b:skin>

Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

.comm-link {
padding: 9px 0 0 26px;
margin: 10px 0 0 0;
font-size: 10px;
font-family: Arial,Tahoma,Verdana;
text-transform: capitalize;
background: transparent url('http://i48.tinypic.com/2u8z29z.png') no-repeat left;
}

Keterangan :
*Kode yang berwarna merah adalah kode image (bubble), image pada URL tersebut seperti image pada awal postingan ini (ukuran 24px X 24px). Silakan ganti apabila anda menginginkan image yang laen.
Kemudian cari lagi kode berikut

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

Copy kode berikut lalu letakkan tepat di bawah kode tadi

<b:if cond='data:post.allowComments'>
<a class='comm-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:commentLabelPlural/></b:if>
</a>
</b:if>
klik Simpan

Terakhir anda tinggal melihat hasilnya, ^^, semoga bermanfaat.

Membuat Comments Bubble Pada Blog

2010-06-12T06:26:00.001-07:00

Masih berhubungan dengan kode CSS seperti pada postingan sebelumnya, kali ini saya akan membahas mengenai cara membuat comments bubble pada blog. Sedikit penjelasan, comments bubble merupakan tampilan jumlah komentar yang dimanipulasi seakan-akan berada dalam gelembung.

Langsung saja untuk anda yang berminat untuk membuatnya, silakan ikuti langkah-langkah di bawah ini.

Login ke blogger.com
Klik Rancangan, (berhubung sekarang Blogger.com menyediakan fitur baru (desain template), maka fitur tata letakpun berada dalam fitur Rancangan)
Klik Edit HTML, kemudian beri centang pada Expand Widget Template
Cari kode berikut

</head>
Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.

<style type="text/css">
.comment-bubble {
float: right;
background: url(http://i46.tinypic.com/df97c4.jpg) no-repeat;
width: 55px;
height: 40px;
font-size: 18px;
margin-top: -15px;
margin-right: 2px;
text-align: center;
}
</style>

Keterangan :
Kode yang berwarna merah merupakan Url tempat anda menyimpan image bubble. Jika anda menggunakan Url di atas maka image bubble yang anda gunakan seperti ini

Kode yang berwarna biru pada width dan height silakan sesuaikan dengan ukuran image anda.
Cari lagi kode seperti ini

<h3 class='post-title entry-title'>
Copy kode di bawah ini lalu letakkan tepat di bawah kode tadi.

<b:if cond='data:post.allowComments'>
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a>
</b:if>
Klik Simpan

Selanjutnya silakan lihat blog anda. Perhatikan bagian disamping kanan judul postingan anda. Semoga bermanfaat...

Membuat Efek Blur Pada Image

2010-06-10T05:58:00.001-07:00

Setelah kemarin saya posting mengenai cara membuat efek scroll, maka sekarang saya akan membahas tentang cara membuat efek blur pada image. Image akan tampak samar (blur) lalu akan tampak jelas saat disorot cursor. Kurang lebih demikian penjelasan singkatnya. Untuk melihat demonya silakan arahkan cursor anda pada image di samping. Cara membuatnya cukup mudah, hanya diperlukan sedikit penambahan kode CSS.

Silakan baca lebih lanjut langkah-langkah untuk membuatnya.

"Login" seperti biasa di acount blogger anda
Klik "Tata Letak", lalu klik "Edit HTML"
Cari kode berikut :

</head>

Copy kode di bawah ini lalu letakkan (paste) tepat di atas (sebelum) kode 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=50);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity-: 1.0;
}
</style>
Klik Simpan

Langkah selanjutnya adalah cara menerapkan efek blur pada image. Seperti umumnya kode yang digunakan untuk membuat link pada image adalah seperti berikut

<a href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>

Silakan anda ganti kode di atas menjadi seperti ini

<a class="linkopacity" href="URL YANG ANDA TUJU"><img src="HOSTING IMAGE ANDA"></a>

Namun apabila anda tidak menginginkan image yang berupa link, kodenya sebagai berikut

<a class="linkopacity"><img src="HOSTING IMAGE ANDA"></a>

Kode yang berwarna merah adalah kode yang harus anda tambahkan. Sekian dulu trik dari saya, semoga bermanfaat, dan happy blogging..... ^^,

Membuat Efek Scroll

2010-06-08T05:30:00.001-07:00

Memberikan efek scroll pada content merupakan solusi yang tepat untuk anda yang ingin memperingkas halaman blog anda. Terlebih untuk bagian sidebar dan bottom bar yang memiliki ruang sempit untuk dipasang widget. Kode untuk membuat scroll tidak terlalu rumit, bahkan bisa dikatakan lebih simple daripada kode-kode yang lain. Untuk membuatnya silakan anda copy code di bawah ini.

<div style="overflow:auto; width:300px; height:150px; padding:10px; border:1px solid #eee">letakkan content anda di sini</div>

Keterangan :

pada kode width, angka 300 menunjukkan lebar kotak scroll
pada kode width, angka 150 menunjukkan tinggi kotak scroll
pada kode border, kode #eee menunjukkan warna border kotak scroll

Misalnya saya ingin membuat daftar nama teman-teman saya.

Avin
Awan
Bams
Brink
Cemed
Dendy
Didot
Dimas
Dion
Dony
Ferry
Gache
Gepenk
Irul
Iqbal
MD
Memed
Ndaru
Sonny
Suject

Dengan sedikit penambahan kode CSS diatas, efek scrollpun jadi. ^^, Selamat mencoba dan semoga bermanfaat.

Tabel Kode CSS3

2010-06-06T09:14:00.001-07:00

Seperti prinsip saya pribadi "Belajar, belajar, dan terus belajar, serta berusaha untuk menerapkannya, karena menurut saya ilmu itu diterapkan bukan untuk dipelajari". Untuk itu pada postingan kali ini saya tidak memberikan tutorial apapun, melainkan mengajak anda untuk belajar bersama mengenai kode CSS3, karena pada intinya sayapun juga masih belajar.

Mungkin sudah tidak asing lagi bagi anda yang sering utak atik template. Namun bagi anda yang belum begitu familiar jangan berkecil hati. tidak ada kata terlambat untuk belajar.

Klik DI SINI untuk men-download tabel kumpulan kode-kode CSS3 secara lengkap (PDF). Info selengkapnya silakan kunjungi veign.com.

Membuat Menu Drop Down Pada Navigasi

2010-06-03T19:51:00.001-07:00

Postingan ini merupakan permintaan dari Paman Helman lewat kotak komentar pada postingan saya sebelumnya, adapun yang dipertanyakan oleh paman Helman yakni tentang bagaimana cara membuat menu drop down pada navigasi. Perhatikan image di samping. Sebelumnya saya minta maaf kepada paman Helman, karena baru sempet posting, akhir-akhir ini saya disibukkan oleh aktifitas saya di dunia nyata ^^. Kembali ke topik, pada navigasi di atas saya menggunakan CSS dan HTML. Dikarenakan menggunakan kode CSS maka kodenya pun lumayan ribet, kurang lebih seperti ini.

#NavbarMenu {
background:#434343; /*-- warna background navigasi --*/
width:900px; /*-- lebar navigasi --*/
height:34px; /*-- tinggi navigasi --*/
color:#ccc; /*-- warna teks navigasi --*/
margin:0 auto;
padding:0;
font:bold 8px Arial,Tahoma,Verdana;
}

#NavbarMenuleft {
width:650px; /*-- lebar menu (biasanya bagian kanan untuk kotak pencarian) --*/
float:left; /*-- posisi menu --*/
margin:0;
padding:0;
}

#nav {
margin:0;
padding-top:3px;
}

#nav ul {
float:left;
list-style:none;
margin:0;
padding:0;
}

#nav li {
list-style:none;
margin:0;
padding:0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color:#ccc; /*-- warna teks menu --*/
display:block;
text-transform:uppercase;
margin:0;
padding:9px 15px 8px;
font:bold 12px Arial,Times New Roman;
}

#nav li a:hover, #nav li a:active {
background:#333; /*-- warna background menu drop down --*/
color:#FFF; /*-- warna teks pada menu drop down --*/
margin:0;
padding:9px 15px 8px;
text-decoration:none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#333; /*-- warna background menu drop down --*/
width:150px; /*-- lebar menu drop down --*/
color:#ccc; /*-- warna teks pada menu drop down --*/
text-transform:lowercase;
float:none;
margin:0;
padding:7px 10px;
border-bottom:1px solid #131313; /*-- warna border bawah pada menu drop down --*/
border-left:1px solid #131313; /*-- warna border kiri pada menu drop down --*/
border-right:1px solid #131313; /*-- warna border kanan pada menu drop down --*/
font:normal 14px Georgia,Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background:#434343; /*-- warna background aktif menu drop down --*/
color:#fff; /*-- warna teks aktif pada menu drop down --*/
padding:7px 10px;
}

#nav li {
float:left;
padding:0;
}

#nav li ul {
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px; /*-- lebar menu drop down --*/
margin:0;
padding:0;
}

#nav li ul a {
width:140px; /*-- lebar menu drop down --*/
}

#nav li ul ul {
margin:-32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left:-999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left:auto;
}

#nav li:hover, #nav li.sfhover {
position:static;
}

* Silakan sesuaikan dengan template anda semua kode yang saya beri warna merah.

Copy kode di atas lalu simpan dulu di note atau editor text lainnya. Kemudian ikuti langkah berikut.

Login akun blogger anda.
Klik Tata Letak, kemudian klik Edit HTML
Expand widget template, setelah prosesnya selesai, cari kode berikut ]]
Letakkan kode yang anda copy tadi tepat di atas kode ]]
Copy kode di bawah ini

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='URL'>Menu 1</a></li>
<li><a href='URL'>Menu 2</a></li>
<li><a href='#'>More »</a>
<ul>
<li><a href='#'>Menu Drop Down 1#1»</a>
<ul>
<li><a href='#'>Menu Drop Down 2#1 »</a>
<ul>
<li><a href='URL'>Menu Drop Down 3#1</a></li>
<li><a href='URL'>Menu Drop Down 3#2</a></li>
</ul>
</li>
<li><a href='URL'>Menu Drop Down 2#2</a></li>
</ul>
</li>
<li><a href='URL'>Menu Drop Down 1#2</a></li>
</ul>
</li>
</ul>
</div>
</div>

* Ganti URL dengan url yang anda tuju.
Lalu cari lagi kode <div id='header-wrapper'>
Apabila anda ingin navigasi berada di atas header, letakkan kode tadi (kode kedua) tepat diatas kode <div id='header-wrapper'>
Tetapi apabila anda ingin navigasi berada di bawah header, letakkan kode tadi di bawah kode end tag header-wrapper. </div>
Setelah selesai klik Simpan

Cukup panjang kan kodenya?, ^^ Silakan lihat hasilnya, Semoga bermanfaat...

Manipulasi Rounded Corner Dengan CSS

2010-06-01T09:19:00.001-07:00

Seperti apa yang pernah saya bahas pada postingan saya tentang cara memilih template blog, saya pernah menjelaskan bahwa memanipulasi tampilan Rounded corner dengan CSS lebih baik daripada menggunakan image/gambar. Meskipun antara CSS dan image memiliki kelebihan tersendiri. Setidaknya jika anda menggunakan CSS maka akan sedikit lebih cepat dibanding image. Contoh dalam membuat rounded corner bisa anda lihat di bawah ini.

Perhatikan sudut kolom ini.

Kolom di atas di bentuk dari kode ini.

<div style="width:250px;
-moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px; margin:0; padding:10px; background:#eee; border:1px solid #ccc; height:75px;"> ISI CONTENT </div>

Keterangan:

Kode yang berwarna merah ialah kode yang harus ditambahkan

Ukuran 15px merupakan ukuran border yang ingin di buat melengkung. Lihat gambar di bawah ini.

Berikut ini contoh penerapan rounded corner pada navigasi/menu blog.

/*-- Misalkan kode navigasi/menu anda seperti ini --*/
#Nav {
width: 900px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
height: 34px;
margin: 0px auto;
position:relative;
top: 14px;
text-align: center;
line-height: normal;
}

Untuk lebih jelasnya, silakan anda baca DI SINI. Semoga bermanfaat...

Memasang Update Twitter Widget di Blog

2010-05-30T04:18:00.001-07:00

Mungkin anda sudah tidak asing lagi dengan twitter. Twitter merupakan salah satu situs jejaring sosial yang mempunyai banyak member setelah facebook. Masing-masing dari kedua situs ini tentu mempunyai kelebihan dan kekurangan. Setelah facebook meluncurkan lencana profil. Twitter-pun tidak mau kalah karena di Twitter juga terdapat widget untuk menampilkan update twitter anda di blog. Mungkin inilah salah satu trik mereka dalam bersaing menarik perhatian para member ^^. Tutorial ini memang sangat mendukung bagi anda yang aktif di Twitter, karena anda bisa menampilkan status terakhir anda di Twitter. Jadi orang lain yang nggak punya akun twitterpun bisa melihat update twitter anda. Penasaran???

Langsung aja gan nih caranya.

Login ke blog anda.
Klik Tata Letak
Klik add gadget (Pilih letak sesuai keinginan anda)
Pilih/Klik HTML/JavaScript
Beri title widget anda, kemudian Copy paste kode di bawah ini.

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1, //jumlah status terakhir yang ditampilkan
interval: 6000,
width: 250, //lebar widget
height: 300, //tinggi widget
theme: {
shell: {
background: '#0066ff', //warna background profil
color: '#030303' //warna teks profil
},
tweets: {
background: '#0099ff', //warna background status
color: '#060606', //warna teks status
links: '#ff9933' //warna link
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('adhityamasda').start();
</script>

Keterangan:
* kode berwarna orangemerupakan keterangan kode yang berwarna merah pada masing-masing baris. Silakan sesuaikan dengan warna yang anda inginkan.
* Pada features, kode yang berwarna merah (false dan true) mewakili ya dan tidaknya sebuah fitur. Misalkan pada fitur scrollbar anda ganti kode false menjadi true, maka tampilan widgetpun akan disertai scroll
* adhitya silakan ganti dengan username akun anda.

Klik Simpan

Setelah semua selesa silakan lihat blog anda, langkah di atas di katakan berhasil apabila di blog anda muncul Update Twitter Widget seperti di bawah ini. Selamat mencoba dan semoga bermanfaat...

Memasang Recent Comments Widget

2010-05-29T06:17:00.001-07:00

Setelah kemarin malam nggak update karena koneksi jaringan yang lumayan lemot, akhirnya malam ini baru bisa update lagi. Pada postingan kali ini, tak jauh beda dengan postingan saya yang kemarin, yakni tentang cara membuat recent comment widget atau komentar terakhir. Masih sama-sama memanfaatkan feed untuk menampilkan widget ini. Untuk live demo, silakan lihat widget ini pada sidebar di samping.

Langsung saja untuk cara membuatnya kurang lebih seperti ini.

Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.

<script src="http://masda.googlecode.com/files/recentcomments.js">
</script>
<script src="http://masdazine.blogspot.com/feeds/comments/default?max-results=5&alt=json-in-script&callback=showrecentcomments">
</script>

Keterangan:
* URL yang berwarna merah (http://masdazine.blogspot.com) silakan ganti dengan URL anda.
* Angka yang berwarna merah (5) merupakan jumlah comments terakhir yang akan ditampilkan.
Login akun blog anda
Klik Tata Letak, kemudian klik Add Gadget sesuai tempat yang anda inginkan untuk memasang widget recent comments ini
Pilih/Klik HTML/JavaScript
Beri title untuk widget anda, kemudian paste code yang anda copy tadi
Klik Simpan

Sekarang lihat blog anda, muncul nggak recent commentnya??? Semoga bermanfaat...

Membuat Recent Post Dengan Thumbnail

2010-05-27T05:41:00.001-07:00

Sesuai dengan namanya Recent post merupakan sebuah widget yang berfungsi untuk menampilkan postingan yang terakhir diterbitkan. Dari modelnya sendiri recent post mempunyai model yang bermacam-macam, akan tetapi yang akan saya bahas di sini adalah membuat recent post dengan thumbnail.

Untuk memasangnya silakan ikuti langkah-langkah di bawah ini.

Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i45.tinypic.com/1z70ynn.jpg";
showRandomImg = true;
boxwidth = 300; //lebar widget
cellspacing = 6; //jarak antar post
borderColor = "#ccc"; //warna border widget
bgTD = "#fff"; //warna background widget
thumbwidth = 40; //ukuran lebar thumbnail
thumbheight = 40; //ukuran tinggi thumbnail
fntsize = 12; //ukuran font
acolor = "#333";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#333";
icon2 = " ";
numposts = 5; //jumlah postingan yang ditampilkan
home_page = "http://masdazine.blogspot.com/";
</script> //ganti dengan URL blog anda
<script src="http://masda.googlecode.com/files/recentpostswiththumbnail.js"></script>

* text yang berwarna orange merupakan penjelasan kode yang berwarna merah pada masing-masing baris.
Login akun blog anda
Klik Tata Letak, kemudian klik Add Gadget sesuai tempat yang anda inginkan untuk memasang widget recent post ini
Pilih/Klik HTML/JavaScript
Beri title untuk widget anda, kemudian paste code yang anda copy tadi
Klik Simpan

Sekarang lihat blog anda, sudah muncul atau belum widget Recent posts yang baru saja anda pasang.

Mengubah Tampilan Blogspot Menjadi Versi Mobile

2010-05-26T08:40:00.001-07:00

Pernahkah anda membuka halaman blog wordpress lewat ponsel? Yah secara otomatis halaman blog wordpress akan diconvert dan disesuaikan dengan layar ponsel. Lalu bagaimana cara merubah tampilan blogspot menjadi tampilan mobile?

dikarenakan pada blogger (blogspot) tidak menyediakan layanan ini, kita harus menggunakan pihak ketiga. Untuk mendaftar silakan anda kunjungi http://mippin.com/web/maker/signUp.jsp. Kekurangan tentu ada pada hasil blog kita yang telah diconvert, antara lain penulisan kode yang tidak terbaca dan tidak adanya form komentar. Untuk lebih jelasnya anda bisa melihat blog saya versi mobile di http://mippin.com/masdazine.

Elemen Hanya Pada Halaman Selanjutnya

2010-05-25T08:15:00.001-07:00

elanjutkan postingan saya kemarin, yakni tentang Menampilkan elemen hanya pada halaman depan saja, maka kurang lengkap rasanya jika artikel tersebut nggak ada lawannya yaitu menampilkan elemen hanya pada halaman selanjutnya. Ini merupakan kebalikan dari artikel saya kemarin, dimana elemen tidak akan muncul pada halaman depan melainkan hanya pada halaman selanjutnya saja.

Cara membuatnya cukup dengan menambahkan kode seperti ini

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

dan

</b:if>

Penempatannya kode pertama diletakkan sebelum kode elemen yang akan muncul pada halaman selanjutnya, kemudian kode kedua diletakkan setelah end tag kode elemen yang akan muncul di halaman selanjutnya. Misalnya saya ingin elemen sidebar hanya akan muncul pada halaman selanjutnya pada template saya, contohnya seperti ini.

<b:if cond='data:blog.pageType == "item"'>
<div id='sidebar'>
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'/>
.....
.....
</div>
</b:if>

Ingat penambahan kode sebelum tag pembuka dan setelah tag penutup. Selamat mencoba dan semoga bermanfaat...

Title Post Sebagai Keyword Tangguh

2010-05-23T04:54:00.001-07:00

Title merupakan sebuah keyword yang sangat tangguh di mata Search Engine. Tak jarang saat kita memasukkan keyword pada search engine untuk mencari sesuatu, yang ditemukan oleh search engine adalah postingan yang mempunyai judul mirip dengan keyword tersebut.

Pada saat posting, tanda anda sadari ketika memasukkan title post yang panjang, secara otomatis title post tersebut akan terpotong menjadi 5 atau 6 kata. Jadi misalkan saya memasukkan title post seperti ini, optimasi title post sebagai keyword yang tangguh maka pada url akan terlihat seperti ini http://masdazine.blogspot.com/2010/05/optimasi-title-post-sebagai-keyword.html. Itulah salah satu hal yang menyebabkan postingan kita tidak terbaca oleh search engine.

Untuk mengatasi masalah seperti di atas, maka kita usahakan agar tidak menulis title post yang terlalu panjang, yakni mengoptimalkan title post tersebut sebagai keyword. Jadi kita tulis saja seperti ini, title post sebagai keyword tangguh. Kemudian klik publish postingan anda, setelah postingan berhasil dipublish, kita klik lagi edit entri, dan ubahlah title post anda menjadi kalimat utuh. Setelah selesai anda tinggal mempublishnya kembali. Maka di urlnya-pun akan tampak seperti ini http://masdazine.blogspot.com/2010/05/title-post-sebagai-keyword-tangguh.html. hehe...kalimat pertama yang dipublish itulah yang menjadi url. Semoga bermanfaat....

Menampilkan Elemen Hanya Pada Halaman Depan Saja

2010-05-22T03:57:00.001-07:00

eperti yang banyak terlihat pada template magazine, secara visual antara tampilan pada halaman depan dengan halaman selanjutnya mempunyai tampilan yang berbeda. Misalkan saja pada template magazine yang mempunyai 3 kolom pada halaman depan kemudian pada halaman selanjutnya akan menjadi 2 kolom. Atau bisa juga pada sidebar yang berisi adsense berupa banner pada halaman depan kemudian pada halaman selanjutnya menjadi adsense berupa text.

Saya yakin anda pasti pernah menjumpai template seperti itu. Untuk membuat tampilan seperti itu cukup mudah, yakni dengan menambahkan kode seperti ini

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

dan

</b:if>

Penempatannya kode pertama diletakkan sebelum kode elemen yang akan dihilangkan pada halaman selanjutnya, kemudian kode kedua diletakkan setelah end tag kode elemen yang akan di hilangkan. Misalnya saya ingin menghilangkan elemen bottom pada halaman selanjutnya pada template saya, contohnya seperti ini.

<b:if cond='data:blog.pageType != "item"'>
<div id='bottom'>
<b:section class='bottom' id='bottom' preferred='yes' showaddelement='yes'/>
.....
.....
</div>
</b:if>

Cukup mudah kan? Semoga bermanfaat...

6 Template SEO friendly

2010-05-21T05:29:00.001-07:00

Sekarang banyak sekali blogger yang menyediakan template blog dengan berbagai style. Jika dilihat sekilas memang tak ada yang kurang dari template-template tersebut. Namun kita tidak pernah mengetahui template tersebut kita SEO Friendly atau tidak? Nah disini saya akan memberikan 6 contoh template SEO friendly untuk blogspot.

Seperti apa yang sudah dijelaskan oleh Mani Khartik, seorang blogger asal India yang sudah melakukan pengujian terhadap template tersebut. Berikut inilah 6 template yang dimaksud.

1. Simple blogger template by Final Sense
2. Blue Square by Template Panic
3. Nyoba 780 by Free Blogger Template
4. Bussines Profesional by Isnaini
5. Eagle by Final Sense
6. Yellow Simple by Final Sense

Dari 6 template di atas kita harus bangga dengan karya anak Negeri yakni mas Isnaini, yang telah membuat template dan masuk dalam daftar di atas (point 3 dan 4). Semoga bermanfaat...

Hosting Javascript di Google Code

2010-05-20T21:13:00.000-07:00

Salah satu alasan mengapa blog yang menggunakan javascript menjadi berat adalah tempat hosting file javascript yang kita gunakan. Tergantung juga sama koneksi jaringan ke web hosting javascript tersebut. Untuk itulah jika kita ingin mengupload file javascript maka usahakan untuk memilih web hosting yang cepat, hal ini bertujuan untuk mencegah pemanggilan kode javascript yang lambat.

Di sini saya akan membahas cara hosting file javascript di google code, ini merupakan layanan hosting dari google. Selain gratis (halah...seneng banget kalo dikasih gratisan), pemanggilan kode javascript anda di jamin cepat. Bagi anda yang berminat untuk hosting javascript anda di google code silakan langsung menuju ke TKP.

1. Setelah anda masuk halaman goole code seperti gambar di atas. Login menggunakan google akun anda, kemudian Klik create a project, anda akan diminta untuk memasukkan project name, project summary, dan description. Setelah semua anda isi, sekarang klik Create project.

2. Untuk mengupload file javascript anda, klik Download pada halaman depan google code anda. Kemudian klik New download. Masukkan file javascript anda pada kolom upload, dan jangan lupa isi kolom keterangan untuk file anda.

3. Klik Submit file dan tunggu proses uploadnya selesai.

4. Kembali ke halaman download untuk melihat file yang anda upload tadi. Klik kanan file anda dan copy URL file javasript anda.

Untuk memanggil file javascript anda tambahkan kode ini <script src="PASTE URL FILE JAVASCRIPT ANDA DISINI"></script>. Semoga bermanfaat ^^

Mengatasi Form Komentar Yang Bermasalah

2010-05-19T04:52:00.001-07:00

Mungkin anda pernah mengalami kesulitan saat comment di blog orang lain yang menggunakan verifikasi kata. Memang untuk melakukan pencegahan Spam pada komentar, pihak blogger.com menawarkan fasilitas ini. Namun terkadang saat kita comment pada blog yang menggunakan verifikasi, huruf captha untuk verivikasi tidak muncul tidak utuh. Jengkel kan?

Nah bagi anda yang tidak menginginkan hal ini terjadi pada blog anda yang menggunakan verifikasi kata (Jika dihapuspun rasanya juga berat, 'cause verifikasi kata tersebut dapat membantu anda mengurangi spam), silakan ikuti langkah berikut.

1. Login ke blog anda.

2. Klik Tata Letak, kemudian pilih Edit HTML

3. Beri tanda centang pada expand widget template, tunggu sampai prosesnya selesai.

4. Cari kode berikut

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>

5. Silakan pilih salah pengeditan di bawah ini.

* Sesuaikan height (tingginya), 275 ganti dengan ukuran yang lebih tinggi. Misalnya 350

* Ganti kode no menjadi auto

6. Klik Simpan

Sekarang lihat hasilnya, selamat mencoba dan semoga bermanfaat...

Tabel Perbandingan Ukuran CSS

2010-05-18T07:13:00.001-07:00

Saat masuk ke halaman edit HTML di blogger.com, tentu kita akan menjumpai kode CSS (Cascading Style Sheets). Yah sederetan kode yang berfungsi untuk membentuk suatu elemen pada blog. Bagi anda yang sudah familiar dan sering utak-atik template mungkin anda tidak akan bingung dengan ukuran CSS tersebut. Namun bagi anda yang belum begitu familiar dengan ukuran CSS tersebut tentu akan merasa bingung. Untuk itu pada postingan kali ini saya akan berbagi mengenai perbandingan ukuran CSS.

Berikut ini tabel perbandingan ukuran CSS.

**Tabel Perbandingan ukuran CSS**
Pixels	EMs	Percent	Points
6px	0,375em	37,5%	5pt
7px	0,438em	43,8%	5pt
8px	0,5em	50%	6pt
9px	0,563em	56,3%	7pt
10px	0,625em	62,5%	8pt
11px	0,688em	68,8%	8pt
12px	0,75em	75%	9pt
13px	0,813em	81,3%	10pt
14px	0,875em	87,5%	11pt
15px	0,938em	93,8%	11pt
16px	1em	100%	12pt
17px	1,063em	106,3%	13pt
18px	1,125em	112,5%	14pt
19px	1,188em	118,8%	14pt
20px	1,25em	125%	15pt
21px	1,313em	131,3%	16pt
22px	1,375em	137,5%	17pt
23px	1,438em	143,8%	17pt
24px	1,5em	150%	18pt

Untuk lebih jelasnya silakan anda kunjungi http://pxtoem.com, semoga bermanfaat... ^^

Memasang Tombol Save Page as PDF

2010-05-16T20:30:00.003-07:00

Banyak cara para blogger untuk memanjakan pengunjung setia mereka. Salah satunya adalah dengan cara memasang tombol save page as PDF. Dengan menggunakan fasilitas tersebut pengunjung dapat menyimpan artikel dari sebuah blog (HTML) ke dalam PDF. Dalam hal ini tentu saja harus menggunakan pihak ketiga untuk meng-convert file yang berformat HTML menjadi PDF.

Caranya:

STEP 1 :

1. Silakan anda kunjungi http://web2.pdfonline.com

2. klik Sign Up

3. Isi form yang disediakan,

4. Setelah akun anda selesai dibuat, sekarang login sesuai akun anda tadi.

5. Sesuaikan ukuran page PDF anda.

6. Klik Generate the JavaScript

7. Copy kode JavaScriptnya, simpan dulu di note atau text editor lainnya.

Untuk memasangnya silakan ikuti langkah berikut.

STEP 2 :

1. Login seperti biasa di blog anda.

2. Klik Tata Letak kemudian klik Edit HTML.

3. Beri tanda centang pada expand widget template, tunggu sampai prosesnya selesai.

4. Cari kode seperti berikut.

<data:post.body/>

atau

<p><data:post.body/></p>

5. Copy kode berikut, lalu letakkan (paste) tepat di bawah (setelah) kode tersebut.

<div style="float:left; margin:10px;">
GANTI DENGAN KODE JAVASCRIPT YANG ANDA SIMPAN TADI</div>

6. Klik Simpan

Berhubung kerjaan udah numpuk karena saya tinggal Online melulu,^_^ sekian dulu tips dari saya. Semoga bermanfaat....

Cara Menampilkan Video Pada Blog

2010-05-15T13:15:00.001-07:00

Pas lagi jalan-jalan di YouTube, dapet lagi nih ide buat posting. Yah posting apalagi kalau nggak mengenai cara menampilkan video pada blog. Asal nggak di pake' buat posting video panas atau adegan hot lainnya yang sekarang lagi menjamur,hehe... Cukup untuk video-video yg wajar saja.

Untuk menampilkannya, jika anda sudah mempunyai URL video yang anda simpan diYouTube, silakan copy kode di bawah ini.

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/halnj0ZgUGs&hl=en_US&fs=1&
"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/halnj0ZgUGs&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Keterangan:
- ganti ukuran panjang dan lebar video sesuai yang anda inginkan.
- ganti URL http://www.youtube.com/v/halnj0ZgUGs&hl=en_US&fs=1& dengan URL video milik anda.

nah, di bawah ini hasilnya:

Namun jika anda belum mempunyai URL videonya. Silakan anda pilih video dari YouTube yang ingin anda tampilkan di blog. Setelah ketemu, klik "Embed" yang terletak di sebelah kanan bawah pada video tersebut. Kemudian sesuaikan warna serta ukurannya, Setelah itu anda tinggal copy kodenya lalu paste di blog anda. Mudah kan? Selamat mencoba....

Cara Memasang Plugins Like Facebook

2010-05-14T15:21:00.001-07:00

Menjawab pertanyaan yang diajukan oleh TintaBesi kepada saya pada postingan sebelumnya, yakni tentang bagaimana cara memasang plugin like facebook. (mungkin mas Abdul Hafizh juga menanyakan ini ya?) Pada intinya pemasangan tombol share on facebok dan pemasangan plugin like facebook adalah sama. Hanya berbeda pada scriptnya saja. Semua penempatannya tergantung anda sebagai admin blog. hehe... sang admin kan berkuasa.

Tidak perlu lama-lama saya bercerita (ntar malah dikira di"nina-bobokan",^_^) langsung saja ikuti langkah-langkah di bawah ini.

1. Login ke blogger.com sesuai dengan akun anda, tahukan kenapa harus sesuai? Kalo akun lain keenakan yang punya akun donk udah dipasangin plugin like facebook. hehe...

2. Klik Tata Letak kemudian klik Edit HTML, setelah itu download lengkap template anda.

3. Beri tanda centang pada expand widget template.

4. Cari kode seperti berikut.

<data:post.body/>

atau

<p><data:post.body/></p>

Copy kode di bawah ini lalu paste tepat di bawahnya.

<b:if cond='data:blog.pageType == "item"'>
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=80"' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:450px; height:40px;' allowTransparency='true'></iframe>
</b:if>

5. Klik "Simpan".

Sekarang coba anda lihat hasilnya.

Keterangan:
- Apabila anda ingin mengganti plugin like (suka) menjadi recommend (sarankan) maka anda cukup mengganti kode yang berwarna merah dengan action=recommend
- Langkah diatas adalah penempatan plugin di bawah posting. Apabila anda ingin penempatan di atas posting, silakan anda paste kode di atas setelah kode <data:post.body/> atau <p><data:post.body/></p>.

Semoga artikel diatas bermanfaat untuk anda.

Cara Membuat Related Post dan Feed Burner Menjadi Lebih Menarik

2010-05-14T06:41:00.001-07:00

Jika pada postingan sebelumnya saya pernah membahas mengenai cara membuat Related Post (Artikel Terkait). Maka pada postingan saya kali ini akan membahas mengenai cara Membuat Feed Burner dan Related Post menjadi lebih menarik, yakni dengan cara membuat kedua elemen tersebut berada dalam satu kolom. sesuai dengan pertanyaan yang telah diberikan oleh mas Mansuka kepada saya lewat kotak komentar (maaf mas baru sempat posting). Contohnya bisa anda lihat pada gambar di samping, atau bisa juga anda lihat hasilnya pada akhir postingan ini.

Langsung saja berikut cara pembuatannya.

1. Login ke akun blogger anda.

2. Klik Tata Letak kemudian klik Edit HTML, download lengkap template anda.

3. Beri tanda centang pada expand widget template.

4. Cari kode seperti berikut.
]]</b:skin>

copy kode di bawah ini lalu letakkan tepat di atas kode tadi.

.related{ width:534px;background:#eee url(http://i42.tinypic.com/fan675.gif) 43% 0 repeat-y; height:200px; overflow:auto; padding:15px; margin: 0 0 10px; border:1px solid #ccc}
.subscribe{width:250px; float:left}
.subscribe p.img{margin-bottom:10px; font-weight:bold; padding-left:21px; background:url(http://i40.tinypic.com/2mnrz3l.gif) 0px 50% no-repeat}
.subscribe form{margin:0; padding:0}
.related-posts{width:282px; float:right}
.related-posts p{margin:0}
.related-posts h3{margin:0; font-size:12pt; letter-spacing:0}
.related-posts li{background:url('http://i39.tinypic.com/2u5as1d.png') no-repeat center left; list-style-type:none; margin:0 0 5px; padding-left:20px}

Keterangan:
- #eee merupakan warna background dari kolom related post.
- width 534px adalah lebar kolom utama
- 43% adalah letak garis pemisah antara kolom feedburner dengan related post.
- width 250px adalah lebar kolom feed burner
- width 282px adalah lebar kolom related post
* silakan ganti sesuai lebar template anda masing-masing.

5. Kemudian cari lagi kode seperti ini
</head>

Copy kode di bawah ini lalu paste tepat di atas kode tadi.

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}

}
//]]>
</script>

6. Terakhir cari kode seperti ini
<data:post.body/>

atau

<p><data:post.body/></p>

Copy kode di bawah ini lalu paste tepat di bawah kode tadi.

<b:if cond='data:blog.pageType == "item"'><br/><br/>
<div class='related'>
<div class='subscribe'>
<p class='img'><a href="http://URL BLOG ANDA/feeds/posts/default">Subscribe via RSS Feed</a></p>
LETAKKAN KODE FORM FEED BURNER ANDA DISINI
</div>
<div class='related-posts'>
<h3>Related posts:</h3>
<li>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</li>
</div>
</div>
</b:if>

Keterangan:
- angka 5 yang berwarna merah menunjukkan jumlah artikel terkait yang ditampilkan.

7. Klik "Simpan".

Sekarang lihat apa yang telah anda lakukan pada template anda.hehe...Semoga bermanfaat...

6 Acuan Memilih Template Blog

2010-05-13T06:09:00.001-07:00

Pemilihan template memang harus kita sesuaikan dengan isi dari blog kita. Akan tetapi hal tersebut tidak harus seratus persen menjadi acuan kita dalam memilih template. Di sisi lain kita juga harus mempertimbangkan kecepatan blog, seberapa banyak image yang menghuni blog, penggunaan javascript yang berlebihan. konon katanya sih javascript bisa memperlambat loading blog kita (halah malah kayak mbah dukun aja). Namun tidak jarang para blogger yang mengedepankan tampilan daripada kecepatan.

Nah berikut ini saya akan memberikan beberapa tips untuk anda yang ingin mengganti template blog anda. Langsung aja gan...

1. Usahakan template yang akan anda gunakan mempunyai size kurang dari 50kb(xml). Mengapa demikian? Yah karena pada umumnya widget yang ada pada template yang kita download hanya ada dua, yakni archive dan category/labels. Kalaupun ada tiga mungkin ditambah followers. Saya rasa jika hanya menggunakan 3 widget tersebut nggak sampai 50kb ukuran scriptnya. Untuk itu pastikanlah dulu apa saja yang sudah disisipkan oleh designer template.

2. Mempunyai template yang memanipulasi tampilan dengan CSS lebih baik daripada dengan image. Misalkan saja untuk membuat Rounded corner kebanyakan seorang designer menggunakan image untuk memanipulasi tampilan tersebut. selain rounded corner penggunaan image juga sering kita jumpai pada header, navigation, effek bayangan pada widget, background title pada sidebar, dsb.

3. Jangan memperhatikan template dari segi keindahannya saja, tetapi seperti yang sudah saya jelaskan di atas perhatikan juga kecepatan loadingnya.

4. Pilihlah template yang mempunyai sidebar di sebelah kanan. Alasanya, Usahakan content anda yang terbuka dahulu saat loading. Dan kalaupun anda sudah jatuh cinta dengan template yang mempunyai sidebar di sebelah kiri, biasakan untuk tidak menaruh elemen yang berat pada sidebar kiri anda yang sekiranya bisa memperlambat loading page (banner, image, dsb).

5. Convert dulu kode CSS yang ada pada template yang anda pilih. Pengen tahu alasaannya? Terkadang untuk mengurangi kepusingan (eh... kepusingan tuh udah EYD belum ya?) designer template biasa menandai kode CSS mereka, menggunakan banyak spasi untuk menandai masing-masing kode, memberi keterangan atau karakter apalah yang sekiranya bisa dijadikan tanda. (sebenarnya sih tanda tersebut tidak dimaksudkan untuk mempermudah designer itu sendiri, tapi juga buat anda yang ingin mengotak-atik template
buatan designer tersebut). Mengenai cara bagaimana meng-convertnya bisa anda baca DI SINI.

6. Javascript memang dipercaya dapat menyebabkan lambatnya sebuah blog. Namun kita tidak harus ~~anti-Javascript~~. Toh kalau emang penting mau gimana lagi? Tetap gunakan juga javascript dan ingat gunakan pada elemen-elemen yang sekiranya dibutuhkan.

Tips di atas adalah pemilihan template versi saya, jujur saya lebih mengutamakan kecepatan. yach seperti pada template saya ini saya desain sesimple mungkin demi sebuah kecepatan (waduh PD kali ngomongnya,hehe... itu niatnya mas, tapi masih juga lambat.^_~). Semoga bermanfaat...

Cara Membuat Tombol Share On Facebook

2010-05-12T04:22:00.001-07:00

Saat kita melakukan blogwalking ke blog-blog sebelah, tentu pernah kita menjumpai Tombol share on Facebook. Tombol tersebut dimaksudkan untuk membagikan sebuah artikel dari suatu blog ke Facebook. Sebagai contoh tombol share on Facebook dapat anda lihat pada bagian akhir postingan ini. Dengan meng-klik tombol tersebut anda bisa berbagi artikel-artikel dari blog ini ke profil facebook anda.

Di bawah ini terdapat dua macam tampilan tombol share on facebook beserta kode scriptnya.

Tombol Share On Facebook (tampilan mendatar):

<a title='Share On Facebook' name='fb_share' type='button_count' href='http://www.facebook.com/sharer.php'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>

Hasilnya Seperti ini:

Share

Tombol Share On Facebook (tampilan tegak):

<a title='Share On Facebook' name='fb_share' type='box_count' href='http://www.facebook.com/sharer.php'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>

Hasilnya Seperti ini:

Keterangan:
Perbedaan dari kedua kode di atas hanya pada kode yang saya beri warna merah (button dan box).

Mengenai tempat dimana anda akan memasang tombol share on facebook ini juga terdapat beberapa pilihan yakni, di bagian kiri atas sebelum posting, di bagian kanan atas sebelum posting, di bagian kiri bawah setelah posting, dan di bagian kanan bawah setelah posting. Semua tergantung dari selera anda. Berikut adalah cara pemasangannya.

1. Login ke blogger.com sesuai dengan akun anda, tahukan kenapa harus sesuai? Kalo akun lain keenakan yang punya akun donk udah dipasangin tombol share on facebook. hehe...

2. Klik Tata Letak kemudian klik Edit HTML, setelah itu download lengkap template anda. (Hal ini bertujuan apabila ada kesalahan dalam pengeditan template anda, anda tinggal menguploadnya lagi). Moga aja nggak ada kesalahan... ^_^

3. Beri tanda centang pada expand widget template.

4. Cari kode seperti berikut.

<data:post.body/>

atau

<p><data:post.body/></p>

kedua kode di atas sama saja.

5. Baca baik-baik penjelasan di bawah ini.

Apabila anda ingin tombol share on facebook anda berada di bagian kiri atas atau kanan atas posting. copy kode di bawah ini lalu paste di atas <data:post.body/> atau <p><data:post.body/></p>.

<div style='float:left/right; margin:10px;'>PILIH SALAH SATU TOMBOL SHARE ON FACEBOOK DAN LETAKKAN DI SINI</div>

Keterangan:
Pilih salah satu kode yang saya beri warna merah (left atau right), tergantung letak yang anda pilih.

Namun apabila anda menginginkan tombol share on facebook berada di kiri bawah atau kanan bawah posting anda, anda tinggal memindah kode tadi dan paste di bawah <data:post.body/> atau <p><data:post.body/></p>.

Apabila anda merasa bingung dengan penjelasan saya di atas. Saya sarankan agar anda copy kode tombol share on facebooknya saja, selanjutnya mengenai penempatan dan lain-lain silakan anda kreasikan sendiri... hehe... Selamat berjuang...

Cara Membuat Related Posts (Artikel Terkait)

2010-05-11T08:46:00.001-07:00

Related post (Artikel Terkait) merupakan kumpulan artikel-artikel berdasarkan label artikel yang dibaca. Manfaat dari Related post sendiri adalah untuk memudahkan pengunjung yang ingin membaca artikel-artikel lainnya yang berkaitan. Jadi pengunjung tidak perlu bolak-balik untuk mencari artikel-artikel lainnya.

Bagi anda yang ingin membuat Related Post, silakan baca tutorial di bawah ini.

1. Login ke Blog anda.

2. Klik Tata Letak kemudian klik Edit HTML, setelah itu download lengkap template anda. (Hal ini bertujuan apabila ada kesalahan dalam pengeditan template anda, anda tinggal menguploadnya lagi).

3. Beri tanda centang pada expand widget template, tunggu sampai prosesnya selesai.
4. Cari kode seperti berikut.

<data:post.body/>

atau

<p><data:post.body/></p>

kedua kode di atas sama saja.

5. Lalu copy lagi kode di bawah ini, letakkan (paste) tepat di bawah (setelah) kode tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='similar'>
<div style='background:#eee; margin:0; padding:10px; height:150px; overflow:auto;border:1px solid #ccc;'> <h3>Related Posts:</h3><div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 3;
var maxNumberOfLabels = 2;
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 3;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 2;
</b:if>
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(decodeURI(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>
</div>
</b:if>

6. Klik "Simpan".

Selanjutnya coba anda buka blog anda, lalu baca salah satu artikel. Berhasil nggak???

Cara Menampilkan Widget Status Yahoo Messenger

2010-05-10T04:11:00.003-07:00

Kali ini saya hanya membahas tentang serba-serbi blog yakni menampilkan widget status yahoo messenger, dengan tujuan agar pengunjung blog kita mengetahui sedang online atau offline-kah? akun kita di yahoo messenger. Yah siapa tahu aja ada cewek yang berkunjung ke blog kita terus lihat tuh widget kita lagi online, saking baiknya tuh cewek di add deh YM kita. Kalo gini kan sekali dayung dua tiga pulau terlampaui, hehe...

(dasar pikirannya cewek melulu) langsung saja gan berikut cara untuk menampilkannya.

Langsung saja copy code di bawah ini.

<a href="ymsgr:ID YAHOO MESSENGER ANDA"><img border="0" src="http://opi.yahoo.com/online?u=ID YAHOO MESSENGER ANDA&m=g&t=1"/></a>

Misalkan saja widget milik saya seperti ini.

<a href="ymsgr:masda_life"><img border="0" src="http://opi.yahoo.com/online?u=masda_life&m=g&t=1"/></a>

     Hasilnya seperti ini.

     Namun apabila anda menginginkan widget dalam bentuk lain. Silakan anda ganti kode yang berwarna merah (t=1) dengan kode yang berada pada masing-masing widget di bawah ini.

t=2

t=3

t=4

t=5

t=6

t=7

t=8

t=9

t=10

t=11

t=12

t=13

t=14

t=15

t=16

t=17

t=18

t=19

t=20

t=21

t=22

t=23

t=24

     Waduh capek juga saya ngetik. Ya udah met nyoba aja dech, Semoga sampai tujuan....xixixi

Ekstrak File Secara Online

2010-05-09T05:02:00.001-07:00

Ekstrak file secara online adalah solusi yang tepat saat ponsel atau PC anda tidak mendukung atau belum terinstal software ekstraktor file. Jika hanya file dengan format ZIP atau RAR saya rasa tidak akan ada masalah untuk meng-ekstraknya. Yang jadi masalah adalah apabila file yang akan anda ekstrak ber-format 7z, GZIP, BZIP2, TAR, CAB, ISO, ARJ, LZHCHM, Z, CPIO, RPM, DEB, dan NSIS. Di sinilah kalimat pertama saya pada postingan ini diterapkan (Ektrak file secara online...).hehe...^_~

Baiklah untuk lebih jelasnya silakan baca lebih lanjut langkah-langkah ekstrak file online di bawah ini.

1. Kunjungi http://wobzip.org/.

2. Setelah terbuka upload file yang akan anda ekstrak pada kolom, lalu tekan button "Wobzip!".
(pada step ini anda juga bisa memilih "uncompress from a URL"/ekstrak dari URL tempat dimana file anda simpan).

3. Tunggu proses loadingnya selesai.

4. Setelah file hasil ekstrak anda muncul, anda tinggal mendownloadnya kembali.

Cukup mudah bukan? Melengkapi penjelasan di atas format file yang bisa diekstrak via wobzip berkapasitas maksimal 100MB.

Cara Membuat Tombol Spoiler

2010-05-08T04:39:00.001-07:00

Sedikit penjelasan mengenai spoiler yaitu tombol yang yang dibentuk dari perpaduan kode HTML dan JavaScript yang berfungsi untuk menampilkan dan menyembunyikan suatu content baik itu berupa image ataupun text, dengan tujuan menghemat ruang atau spasi. Sangat mendukung apabila digunakan pada postingan yang sangat panjang. Contoh tombol spoiler dapat anda lihat di bawah ini.

Berikut ini adalah kode untuk membuat tombol spoiler seperti di atas.

<div id="spoiler"><div><input value="Show" style="margin: 5px; padding: 3px; font-size: 11px; font-weight:bold;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show'; }" type="button"><div id="show" style="margin: 5px; padding: 2px; display: none; width: 98%;">LETAKKAN CONTENT ANDA DI SINI</div><div id="hide"></div></div></div>

Keterangan:
• Silakan anda ganti kode yang berwarna merah dengan isi content anda.

Udah sekian dulu tutorialnya. Semoga sampai tujuan...hehe...

Cara Membuat Widget Whos Amung (Penghitung Jumlah User Online)

2010-05-07T09:23:00.001-07:00

Pada saat anda mengunjungi suatu blog, tak jarang anda menemukan widget yang berfungsi untuk menghitung jumlah visitors yang sedang mengunjungi blog tersebut. Yah walaupun terkadang ada juga blog yang tidak memasang widget tersebut, hehe... Sebenarnya banyak sekali pihak ketiga yang menawarkan widget seperti itu, namun dalam postingan ini saya akan membahas pembuatan widget di whos.amung.us.

Alasan saya memilih whos.amung.us adalah karena pada whos.amung.us memberikan kebebasan kepada kita dalam menentukan warna widget tersebut. Jadi kita bisa menyesuaikan warna widget sesuai dengan warna template kita. Di bawah ini merupakan contoh widget who's amung milik saya.

     Berikut cara pembuatannya.

1. Klik DI SINI untuk mengunjungi whos.amung.us

2. Silakan anda klik "showcase" pada navigasi atas.

3. Pada halaman ini anda akan diberikan berbagai model tampilan widget. Namun apabila anda ingin kreasikan warna widget agar sesuai template anda, silakan anda Klik button image yang bertuliskan "Color Me!". Pada tahap ini saya anggap anda memilih "Color Me!".

4. Selanjutnya silakan anda klik "color wheel".

5. Setelah masuk halaman baru pada point pertama yaitu "Already have a map, or our widget?" pilih ""no". Pada point kedua silakan kreasikan sendiri warna widget anda. Lalu pada point yang terakhir (no.3) silakan anda copy kode yang nantinya akan anda paste di blog anda.

     Widget andapun telah selesai dibuat, langkah selanjutnya yakni memasang widget tersebut di blog anda.

1. Login ke blog anda.

2. Klik "Tata Letak", kemudian "Tambah Gadget".(tentu saja sesuai letak yang anda inginkan)

3. Klik/pilih "HTML/JavaScript", lalu paste kode yang anda copy tadi, kemudian klik "Simpan".

     Sekarang lihat hasil jerih payah anda.hehe... (kayak ngluarin keringat seember saja). Yang olahraga cuman jarinyapun. Selamat mencoba, semoga sinyalnya lancar sampai tujuan...

Cara Memasang Alexa Widget di Blog

2010-05-06T00:55:00.001-07:00

Alexa widget merupakan sebuah widget yang berfungsi untuk melihat peringkat sebuah web berdasarkan jumlah pengunjung yang mengunjungi web tersebut. Semakin kecil peringkat maka akan semakin bagus web/blog tersebut. Dan pemberian peringkatnyapun lebih lengkap, dari 1 sampai puluhanjuta, lain halnya dengan eyang gugel yang memberi peringkat hanya diantara 1 sampai 10. Saya rasa mengenai penjelasan singkat di atas anda sudah paham dengan alexa widget.

Bagi anda yang berminat untuk memasang alexa widget, silakan anda ikuti langkah-langkah di bawah ini.

STEP 1
1. Kunjungi alexa.com.

2. Klik "For Site Owner" yang terletak pada navigasi. Maka anda akan masuk ke page baru yang berisi 4 kategori, yakni Manage Your Site, Widgets, Advertise On Alexa, dan terakhir Developer Tools.

3. Silakan anda pilih "Get Trafilc Widgets". Nah di sinilah akan di berikan 3 pilihan widget, masing-masing adalah widget Alexa Traffic Graph. widget Alexa Site Stats Button, dan widget Alexa Traffic Rang Button.

4. Selanjutnya anda tinggal memasukkan url anda pada kolom yang telah disediakan, kemudian klik "build Widget".

5. Copy kode yang diberikan oleh alexa (kode widget yang anda buat tadi).

STEP 2
1. Login ke blog anda.

2. Klik "Tata Letak", kemudian "Tambah Gadget".(tentu saja sesuai letak yang anda inginkan)

3. Klik/pilih "HTML/JavaScript", lalu paste kode yang anda copy dari alexa tadi, kemudian klik "Simpan".

Sekarang lihat blog anda, dan tralala... alexa widget telah terpasang di blog anda.

Test Kecepatan Loading Blog

2010-05-05T02:11:00.001-07:00

Sebenarnya tutorial mengenai bagaimana cara melihat kecepatan web/blog ini sudah pernah saya bahas pada postingan saya sebelumnya. Tetapi berhubung pada tools yang saya gunakan kemarin kurang sempurna, maka pada postingan ini saya akan berusaha untuk melengkapi kekurangan tersebut. Masih sama-sama menggunakan jasa web online dan pembacaan script untuk melihat kecepatan web namun tidak mengabaikan script image dan Javascript seperti iwebtool. Itulah yang menjadikan tools ini lebih sempurna di banding iwebtool.

Silakan anda "klik" banner di bawah ini untuk menuju ke tools.pingdom.com.

Setelah anda masuk ke page pingdom, anda diminta untuk memasukkan URL web/blog anda serta memilih mode-mode pengaturan yang akan anda gunakan dalam melihat kecepatan blog. Saya di sini hanya bisa membantu anda lewat doa semoga blog anda tergolong blog-blog yang super ringan dan cepat. hehe...

Tantangan Unik Bagi Pengguna PC

2010-05-04T09:29:00.001-07:00

Abis chat di Yahoo Mesengger sama teman lama, eh dapat ide dech buat posting. Dalam chat tadi, teman saya memberikan saya sebuah tantangan yang cukup unik. Mengapa saya menyebutnya unik? Ya mungkin karena menurut saya hal ini mudah tapi kenyataannya malah sebaliknya. Sampai-sampai emosi saya dibuatnya. tujuan saya mempostingnya karena saya penasaran dengan penyelesaiannya. Nah kurang lebih beginilah tantangan yang diajukan kepada saya.

"Coba anda buat folder baru pada Windows XP dengan nama "con" (tanpa tanda kutip tentunya), selain XP saya belum pernah coba, nggak tahu deh bisa atau nggak?"

Bagi anda yang sudah berhasil di mohon untuk meninggalkan komentar. Apakah anda tidak kasihan pada saya jika tiap malam saya susah tidur? (nb:bukan karena mikir tuh tantangan, tapi karena saya lagi di serang ama puluhan kompi nyamuk,hehe...) udah saya otak-atik tetap saja tidak ada hasil. xixixi... BTW, PLEASE HELP ME...

Memberi Efek Kartun Pada Foto

2010-05-03T02:02:00.001-07:00

Iseng-iseng memasukkan sebuah keyword "photo cartoon" yang saya tujukan kepada eyangnya search engine, siapa lagi kalau bukan google.com, eh nemu converter image yang bisa mengubah foto kita menjadi kartun animasi secara online. Free loh, lumayan juga buat koleksi foto. Selain menyediakan converter image, kusocartoon.com juga menyediakan comic buble cartoon, mantap kan?

Dalam comic bubble cartoon kita bisa memanipulasi seolah-olah foto kita adalah cuplikan dari comic. Nah di bawah inilah style-style carton yang ditawarkan pada kusocartoon.com.

Nah kalau di bawah ini hasil kreasi saya.

xixixi terlalu terang jadinya malah hancur. hehe....

Untuk Selengkapnya silakan kunjungi http://kusocartoon.com/photo-to-cartoon.php. Pada step pertama anda tinggal memilih style yang akan anda terapkan pada image anda (contoh style bisa anda lihat di atas), memberi nama, lalu mengupload foto anda, tunggu beberapa detik proses uploadnya selesai. Selanjutnya pada step kedua anda diberi kebebasan berkreasi mengenai kecerahan foto kartun anda, shadow, dsb. Selamat berkreasi...

Seberapa Cepat Loading Blog Anda?

2010-05-02T02:59:00.001-07:00

Blog yang mempunyai kecepatan loading yang luar biasa memang sangat di idam-idamkan oleh para blogger. Pertanyaannya sekarang, seberapakah kecepatan loading blog anda? Ya tentu jawabannya harus pasti donk, masa pakai kira-kira. Ibarat kita mengerjakan tugas matematika, ya jawabannya harus pasti. Nggak ada ceritanya 81 dibagi 9 hasilnya kira-kira 9. Halah kog malah bahas matematika.

Maaf keasyikan ngetik, Kembali ke topik pembahasan mengenai test kecepatan blog, langsung saja anda masukkan url anda pada kolom di bawah ini. Anda bisa test maksimal 10 URL sekaligus. Caranya dengan memberikan jarak menggunakan enter antar URL.

Cara Membuat Widget Live Traffic Feed

2010-05-01T15:40:00.001-07:00

Feedjit Live Traffic adalah suatu media yang berfungsi untuk melihat data-data tentang pengunjung blog kita. Untuk mendapatkan Feedjit Live Traffic terdapat dua kategory yaitu gratisan dan berbayar. Namun pada tips kali ini kita akan membuat Feedjit Live Traffic yang gratis saja, blog saja masih pakai gratisan masa untuk live traffic pakai yang berbayar. Langsung saja untuk cara pembuatannya silakan ikuti langkah-langkah di bawah ini.

1. Login dulu di blogger anda. (hal ini dikarenakan pada widget Feedjit Live Traffic tidak menyediakan copy paste kode HTML melainkan secara otomatis akan terhubung dengan blog anda).

2. Silakan buka page baru lalu kunjungi http://feedjit.com/joinjs/.

3. Setelah terbuka, anda akan diberikan beberapa pilihan, antara lain Live Traffic Feed, Live Traffic Map, Recommended Reading, dan Page Popularity. Pilih salah satu sesuai keinginan anda. Pada tahap ini saya anggap anda memilih "Live Traffic Feed".

4. Dari ketiga menu di bawah Live Traffic Feed silakan anda pilih "add to your blogger blog" maka seperti yang saya jelaskan tadi secara otomatis pada tahap ini akan menuju ke blog anda.

5. Masukan judul untuk widget Live Traffic Feed anda.

6. Klik "Menambah Widget".

Setelah semuanya selesai silakan lihat blog anda. Apabila letak widget yang baru saja anda buat tidak sesuai dengan harapan anda, silakan anda masuk kembali ke "Dasboard" pilih "Tata Letak", kemudian cari gadget sesuai judul yang anda beri tadi. Copy dulu kode HTMLnya sebelum anda hapus gadgetnya. Silakan paste sesuai dengan letak yang anda inginkan.

Mempercepat Loading Blog dengan CSS Compressor

2010-04-30T23:19:00.001-07:00

Memiliki blog yang lambat memang sangat dibenci oleh semua blogger. Saya rasa anda semua tahu mengapa demikian, karena blog yang lambat secara tidak langsung akan mengurangi jumlah pengunjung. Bagaimana tidak, pengunjung mana yang ingin berlama-lama menunggu loading.

heu...heu... (kayak blog ini udah cepet aja loadingnya).

Sebenarnya ada beberapa hal yang sangat berpengaruh dalam kecepatan loading blog, diantaranya yaitu pemasangan image yang terlalu besar atau bisa juga dikarenakan penggunaan kode yang terlalu panjang (sebenernya nggak panjang sih, cuman terlalu banyak buang-buang karakter yang nggak penting). Nah untuk mengatasi masalah tersebut anda bisa melakukan convert kode CSS yang ada pada template blog anda di http://cssdrive.com/index.php/main/csscompressor. Kode CSS anda yang harus anda convert adalah kode-kode yang terletak diantara <b:skin><![CDATA[ dan ]]</b:skin>. Upst ketinggalan apabila pada template anda terdapat variable definision maka kode-kode yang harus anda convert mulai dari kode *{margin:..... sampai kode ]]</b:skin>.

Namun dengan cara di atas saya tidak menjamin seratus persen blog anda akan menjadi cepat loadingnya. Mengingat bahwa hal-hal yang mempengaruhi kecepatan sebuah blog ada bermacam-macam. Namun setidaknya dengan mengikuti tips saya di atas blog anda akan mengalami sedikit ada perubahan masalah kecepatannya.

Cara Melihat Harga Blog

2010-04-30T03:58:00.001-07:00

Mungkin cara ini sudah tidak asing lagi bagi kalangan blogger yang sudah senior. Namun pada intinya saya hanya mengulang, barangkali saja ada diantara anda semua yang belum mengetahuinya khususnya untuk pemula. Tujuan utama pada tips kali ini adalah untuk melihat harga blog kita. Ya siapa tahu ada yang mau jual blognya. Meskipun nggak dijual tapi setidaknya dengan mengetahui harga kita hal itu akan menjadi tolak ukur seberapa jauh perkembangan blog kita.

Bagi yang berminat silakan kunjungi http://bizinformation.org/id/. Setelah page terbuka anda hanya akan diminta memasukkan URL dari blog yang akan anda lihat harga jualnya, setelah itu klik "Nilai", dan tunggu hasilnya. Gimana mahal nggak? Oke biar lebih lengkap anda juga bisa mengambil widget Harga jual blog anda tadi. Caranya copy kode HTML yang ada di bawah rincian harga blog, Lalu silakan paste di blog anda. Mudah bukan?...

Cara Membuat Read More (Versi 2)

2010-04-29T07:32:00.001-07:00

Sebenarnya pembuatan read more (baca selengkapnya) ini sudah pernah saya bahas pada postingan saya kemarin. Akan tetapi pembuatannya mungkin sedikit agak ribet karena harus menyisipkan dua kali kode. Untuk itulah dalam tutorial kali ini saya akan mengajak anda membuat read more yang lebih praktis lagi.

     Dalam postingan tutorial kali ini anda cukup menyisipkan satu kali kode. Langsung saja berangkat gan...

1. Login seperti biasa di blog anda. (Dengan aku anda sendiri tentunya,hehe...)

2. Klik Tata Letak kemudian klik Edit HTML, setelah itu download lengkap template anda. (Hal ini bertujuan apabila ada kesalahan dalam pengeditan template anda, anda tinggal menguploadnya lagi).

3. Beri tanda centang pada expand widget template, tunggu sampai prosesnya selesai.
4. Cari kode seperti berikut.

<data:post.body/>

     atau

<p><data:post.body/></p>

     kedua kode di atas sama saja.

7. Hapus kode tadi, lalu ganti dengan kode di bawah ini

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

8. Klik Simpan Template

     Untuk selanjutnya kita tinggal mengatur format posting, caranya sebagai berikut.

1. Klik Pengaturan kemudian klik Format.

2. Lalu copy kode berikut, kemudian letakkan (paste) pada area posting.

<div class="fullpost"></div>

3. Klik Simpan Template

      Cara postingnya seperti berikut.

• Ketika anda klik Posting, maka secara otomatis pada area posting akan ada kode seperti ini.

<div class="fullpost"></div>

• Untuk posting anda tinggal menulis postingan awal anda sebelum kode tersebut, kemudian untuk postingan selanjutnya anda tulis aja diantara kode <div class="fullpost"> dan </div>.

Contoh bisa anda lihat di bawah ini.

Postingan awal<div class="fullpost">Postingan selanjutnya (lanjutan postingan awal)....</div>

     Langkah selanjutnya silakan dicoba. Info lebih lanjut hubungi dokter... (dokter blog kalo ada)

Cara Membuat Logo Teks Secara Online

2010-04-28T09:17:00.001-07:00

Kebanyakan bagi blogger yang sudah ahli desain. Mereka biasa membuat logo dari hasil desain mereka sendiri entah itu menggunakan photoshop, corel draw ataupun software editing lainnya. Tapi bagaimana jika kita tidak begitu paham tentang desain? Termasuk saya sendiri. Terus terang saya ini "nol puthul babar blas" (tidak tahu sama sekali) tentang desain.

Oleh karena itu dalam pembuatan logo teks pada blog saya ini, saya memanfaatkan web online yang menyediakan pembuatan logo berupa teks. Tidak hanya itu saja andapun juga bisa membuat teks button untuk blog anda. Contoh logo teks yang saya buat bisa anda lihat pada header diatas. Logo di atas hanya sebagian saja, masih banyak logo-logo lainnya yang bisa anda buat. Tertarik ingin membuatnya, silakan anda kunjungi www.cooltext.com. Dan kreasikan logo anda. Setelah logo selesai anda buat, anda tinggal mendownloadnya. Mudah kan? Dan sekarang anda bisa sedikit bangga dengan Logo anda selamat berkreasi...!!!

Cara Menulis Kode HTML di Postingan

2010-04-26T10:27:00.001-07:00

Kerap sekali kita menjumpai pesan eror ketika kita menulis sebuah kode HTML di postingan. Penulisan karakter seperti itu tidak bisa langsung kita tulis pada postingan. Lalu bagaimana cara yang mudah untuk menulis kode-kode HTML tersebut? Tentu saja kita harus convert dulu kode-kode HTML yang ingin kita tulis (tampilkan). Misalkan saja kita ingin menulis karakter seperti ini < maka kita harus menulisnya seperti ini <, Lalu untuk karakter > kita tulis >, dsb. Masalahnya sekarang, bagaimana jiika kode HTML yang akan anda tulis (tampilkan) di postingan sangat banyak?

Solusinya adalah meng-convertnya secara online. Silakan anda kunjungi http://centricle.com/tools/html-entities/. Setelah terbuka halaman web tersebut, anda masukkan saja kode HTML yang akan anda tulis pada postingan, kemudian klik Encode untuk meng-convert kode tersebut dan tunggu proses loadingnya selesai. Setelah itu anda tinggal copy saja kode HTML yang telah anda convert tadi untuk kemudian anda paste pada postingan anda.

Biar lebih lengkap penjelasannya, tombol Decode merupakan kebalikan dari Encode. Fungsinya adalah untuk melihat hasil kode yang telah diconvert tadi.

Cara Membuat Teks Bayangan (Shadow)

2010-04-26T06:03:00.001-07:00

Pada postingan kali ini saya akan mengajak anda untuk membahas tentang penggunaan kode CSS dalam membuat teks bayangan (shadow). Ini adalah pengalaman saya ketika saya masih sering otak-atik wapsite di xtgem.com. Dengan menggunakan teks bayangan, teks yang kita buat terasa lebih unik dan lebih hidup. Sebagai contoh sederhana bisa anda lihat di bawah ini.

TEKS DENGAN SATU BAYANGAN

Anda dapat membuat teks bayangan seperti contoh di atas dengan kode CSS seperti berikut.

<div style="text-shadow: 4px 3px 2px #3399FF;">TEKS DENGAN SATU BAYANGAN</div>

keterangan:
* 4px adalah jarak kekanan antara teks dengan bayangan.
* 3px adalah jarak kebawah antara teks dengan bayangan.
* 2px adalah tebal teks bayangan.
* #3399FF adalah kode warna untuk teks bayangan.
* silakan ganti teks "TEKS DENGAN SATU BAYANGAN" dengan teks anda.

Selanjutnya dengan sedikit penambahan penggunaan kode minus (-) pada kode di atas maka akan menghasilkan teks bayangan seperti di bawah ini.

TEKS DENGAN DUA BAYANGAN

penambahan kodenya seperti ini.

<div style="text-shadow: 4px 3px 2px #3399FF, -4px -3px 2px #FF9933;">TEKS DENGAN DUA BAYANGAN</div>

keterangan:
* 4px adalah jarak kekanan antara teks dengan bayangan.
* 3px adalah jarak kebawah antara teks dengan bayangan.
* 2px adalah tebal teks bayangan yang berada di kanan bawah.
* #3399FF adalah kode warna untuk teks bayangan yang berada di kanan bawah teks.
* -4px adalah jarak kekiri antara teks dengan bayangan.
* -3px adalah jarak keatas antara teks dengan bayangan.
* 2px adalah tebal teks bayangan yang berada di kiri atas.
* #FF9933 adalah kode warna untuk teks bayangan yang berada di kiri atas.
* silakan ganti teks "TEKS DENGAN DUA BAYANGAN" dengan teks anda.

Kode-kode di atas adalah sebagian kecil dari penggunaan CSS dalam membuat teks bayangan. Selanjutnya bagi anda yang familiar dengan kode CSS, anda dapat berkreasi untuk menghasilkan teks yang lebih unik lagi.

Cara Membuat Text Area

2010-04-25T15:15:00.001-07:00

Sedikit penjelasan, Text area adalah area atau tempat untuk menyimpan text atau kode dengan membentuk area baru. Fungsinya agar text atau kode dalam text area tersebut bisa di copy oleh para pengunjung. Salah satu contoh yaitu dalam pembuatan kode HTML tukar link. Jadi pengunjung tidak perlu menulis kode HTML link kita, mereka cukup meng-copy saja kode yang telah kita sediakan dalam text area lalu paste di

blog mereka masing-masing.

Berikut ini kode untuk membuat text area.

<p align="center"><textarea name="code" rows="3" cols="20">Silakan letakkan text atau kode anda di sini.</textarea></p>

Hasilnya seperti ini.

Silakan anda copy saja kodenya dari sini.

Keterangan:
&#x2022 "rows="3"" adalah pengaturan untuk tinggi text area. Angka 3 pada rows bisa anda ganti sesuai tinggi text area yang anda inginkan.
&#x2022 "cols="20"" adalah pengaturan untuk lebar text area. Angka 20 pada cols bisa anda ganti sesuai lebar text area yang anda inginkan.

Ada lagi versi text area yang lain, yaitu text area yang menggunakan tombol highlight. Dengan adanya tombol tersebut maka kegiatan copy text dalam text area akan bertambah mudah. Jika ada seorang pengunjung klik tombol highlight yang berada diatas text area. Maka secara otomatis text dalam text area akan di highlight selanjutnya pengunjung tinggal copy saja. Langsung saja, untuk membuat text area yang menggunakan highlight kodenya seperti berikut.

<div><form name="copy"> <div align="center"> <input onclick="javascript:this();this.form.txt.select();" type="button" value="Highlight All" ></div><p align="center"> <textarea style="width:250px; height:80px; name="txt" rows="100" wrap="VIRTUAL" cols="55">Silakan letakkan text atau kode anda di sini.</textarea></p></form></div>

Hasilnya seperti di bawah ini.

Untuk memudahkan anda, silakan copy kode tersebut di bawah ini.

Keterangan:
&#x2022 "<div align="center"> adalah pengaturan letak tombol Highlight. Anda bisa menggantinya dengan "left" agar tombol tersebut berada di sebelah kiri dan "right" untuk sebelah kanan.
&#x2022 "<input onclick="javascript:this();this.form.txt.select();" kode ini merupakan perintah jika tombol highlight tersebut di klik.
&#x2022 "value="Highlight All"" text Highlight all pada kode ini adalah text yang ada pada tombol highlight. Anda bisa ganti dengan text yang lain.
&#x2022 "<p align="center">" kode ini adalah pengaturan letak dari kolom text area. Silakan ganti "left" jika anda menginginkan tombol itu berada di sebelah kiri, atau "right" untuk sebelah kanan.
&#x2022 "<textarea style="width:250px;" kode ini merupakan pengaturan lebar dari text area. Anda bisa ganti angka 250 sesuai dengan lebar yang anda inginkan.
&#x2022 "height:80px;" kode ini merupakan pengaturan tinggi dari text area. Angka 80 bisa anda ganti sesuai dengan tinggi yang anda inginkan.

haduh capek juga ne jari, met nyoba aja deh...

Cara Membuat Read More di Blogspot

2010-04-25T08:42:00.001-07:00

Mungkin pembuatan read more sudah tidak asing lagi di kalangan blogger, bahkan banyak para blogger yang sudah membahas tentang cara pembuatan read more ini. Untuk itu dalam pembuatan readmore ini saya tujukan khususnya bagi blogger pemula yang ingin membuat read more di blogspot.

Langsung saja silakan ikuti langkah-langkah di bawah ini.

1. Login seperti biasa di blog anda.

2. Klik Tata Letak kemudian klik Edit HTML, setelah itu download lengkap template anda. (Hal ini bertujuan apabila ada kesalahan dalam pengeditan template anda, anda tinggal menguploadnya lagi).

3. Beri tanda centang pada expand widget template, tunggu sampai prosesnya selesai.

4. Cari kode seperti berikut.

</head><body>

5. Copy kode berikut, lalu letakkan (paste) tepat di di atas (sebelum) kode tadi.

<style><b:if cond='data:blog.pageType == "item"'>span.fullpost {display:inline;}<b:else/>span.fullpost {display:none;}</b:if></style>

6. Kemudian cari lagi kode di bawah ini.

<data:post.body/>

atau

<p><data:post.body/></p>

kedua kode di atas sama saja.

7. Lalu copy lagi kode di bawah ini, lalu letakkan (paste) tepat di bawah (setelah) kode tersebut.

<b:if cond='data:blog.pageType != "item"'><a expr:href='data:post.url'> Read more...</a></b:if>

8. Klik Simpan Template

Setelah semuanya selesai,
sekarang kita tinggal mengatur format posting, caranya sebagai berikut.

1. Klik Pengaturan kemudian klik Format.

2. Lalu copy kode berikut, kemudian letakkan (paste) pada area posting.

<span class="fullpost"></span>

3. Klik Simpan Template

Cara postingnya seperti berikut.

• Ketika anda klik Posting, maka secara otomatis pada area posting akan ada kode seperti ini.

<span class="fullpost"></span>

• Untuk posting anda tinggal menulis postingan awal anda sebelum kode tersebut, kemudian untuk postingan selanjutnya anda tulis aja diantara kode <span class="fullpost"> dan </span>. Contohnya seperti berikut.

Postingan awal<span class="fullpost">Postingan selanjutnya (lanjutan postingan awal)</span>

Semoga selamat sampai tujuan

Membuat Huruf Besar di Awal Postingan

2010-04-24T01:02:00.001-07:00

Tips yang saya maksud adalah membuat huruf awal postingan menjadi besar seperti pada postingan saya ini. Jadi biar mirip koran gitu. hehe... yach meskipun terkesan jadul tapi tetep aja asyik dilihat daripada semua huruf sama besarnya. Gimana? Tertarik untuk membuatnya?

Langsung saja kita menuju ke TKP.

1. "Login" seperti biasa di acount blogger anda.

2. Klik "Tata Letak", lalu klik "Edit HTML".

3. Cari kode ]]></b:skin>, Copy kode di bawah ini lalu letakkan (paste) tepat di atas (sebelum) kode tadi.

/*--- Zine ---*/
.zine { float:left;
color:#FF9933;
font-size:100px;
line-height:80px;
padding-top:1px;
padding-right:5px
}

* Kode warna yang saya cetak tebal dengan warna merah bisa anda ganti sesuai dengan keinginan anda. Untuk lebih jelasnya mengenai kode-kode warna dapat anda lihat di sini.

4. Klik "Simpan Template".

Setelah penambahan kode di atas selesai, sekarang kita tinggal mengatur format postingan. Caranya silakan ikuti langkah-langkah di bawah ini.

1. Klik "Pengaturan", kemudian klik "Format".

2. Copy kode di bawah ini lalu letakkan pada area posting.

<span class="zine">
</span>

3. Klik "Simpan".

* Untuk posting, pada saat anda klik "Entri Baru" maka secara otomatis akan muncul kode di atas pada area posting anda. Untuk membuat huruf awal postingan menjadi besar adalah menempatkan huruf pertama postingan anda di antara <span class="zine"> dan </span>. Sebagai contoh penulisan awal postingan saya ini adalah sebagai berikut.

<span class="zine">T</span>ips yang saya maksud adalah membuat huruf awal postingan menjadi besar seperti pada postingan saya ini.

Gimana?? Masih bingung?...

Cara Menyembunyikan Judul dan Deskripsi Blog

2010-04-23T04:44:00.000-07:00

Judul dan deskripsi memang sangatlah penting dalam sebuah blog. Hal itu dikarenakan kedua bagian tersebut merupakan keyword yang akan terindeks ketika search engine melakukan pencarian. Lalu bagaimana jika kita ingin mengganti header kita dengan image agar tidak tertutup dengan tag judul dan deskripsi. Karena jika kita menghapus judul dan deskripsi, maka hasilnya akan sangat fatal. Blog kita tidak akan terindeks di Search engine. Sebagai contoh lihat header saya di atas. Salah satu solusinya adalah

dengan menyembunyikannya. Pengen tahu caranya? Berikut ini adalah cara untuk menyembunyikan judul dan deskripsi.

• Cara menyembunyikan judul

1. Login seperti biasa di blog anda.

2. Klik Tata Letak kemudian klik Edit HTML.

3. Download dulu template lengkap anda. (Hal ini bertujuan jika anda salah dalam pengeditan template anda tinggal menguploadnya lagi). Yah moga ja nggak

4. Tidak perlu memberi tanda centang pada expand widget template. Langsung saja cari kode berikut.

#header h1 {
color:#000; margin:0;
padding:10px 0 0 20px; text-decoration:none;
font:normal normal 350% Georgia,Times New Roman;
display:none;
}

Keterangan:
Kode yang berwarna merah (display:none;) adalah kode yang harus anda tambahkan.

5. Klik Pratinjau untuk melihat hasilnya. Jika kamu sudah berhasil klik Simpan Template.

• Cara menyembunyikan deskripsi

1. Login seperti biasa di blog anda.

2. Klik Tata Letak kemudian klik Edit HTML.

3. Download dulu template lengkap anda.

4. Tidak perlu memberi tanda centang pada expand widget template. Langsung saja cari kode berikut.

#header .description{color:#000;
margin:0;
padding:7px 0 20px 20px;
font:normal normal 100% Arial,sans-serif;
display:none;
}

Keterangan:
Kode yang berwarna merah (display:none;) adalah kode yang harus anda tambahkan.

5. Klik Pratinjau untuk melihat hasilnya. Jika kamu sudah berhasil klik Simpan Template.

Selamat mencoba...

Kolom 1	Baris 1
	Baris 2