tag:blogger.com,1999:blog-22155981095390683102024-03-14T09:38:07.438-07:00MasdaZineBlog Tutorial, Artikel Ringan, Internet, Teknologi, KehidupanMasdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.comBlogger55125tag:blogger.com,1999:blog-2215598109539068310.post-33159883812015133462010-08-06T03:30:00.003-07:002010-08-06T03:30:48.019-07:00Membuat Navigasi Breadcrumbs di Blogspot<a href="http://masdazine.blogspot.com" target="_blank"><img src="http://i36.tinypic.com/10pbxna.png" border="0" alt="navigasi breadcrumbs"></a><br />
<span class="zine">M</span>ungkin 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 <a href="http://www.rendirafif.co.cc/" target="blank_">Rendi Indra Jaya</a> telah meninggalkan pertanyaan <a href="masdazine.blogspot.com/2010/06/membuat-comments-bubble-comments-versi.html?showComment=1280920477612#comment-c7932678329470212260" target="_blank">di sini</a>. <div class="fullpost">Mengenai langkah pembuatannya silakan anda ikuti langkah-langkah di bawah ini.<br />
<br />
<ol><li>Login seperti biasa ke blogger.com</li>
<li>klik <b>Rancangan</b>, kemudian pilih <b>Edit HTML</b>, ada baiknya jika anda download dulu template lengkap anda</li>
<li>Beri tanda centang pada <b>Expand Template Widget</b></li>
<li>Cari kode seperti ini<br />
<font color="#009966">]]></b:skin></font></li>
<li>Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi<br />
<br />
<blockquote>.breadcrumbs {<br />
padding: 5px 5px 5px 0;<br />
margin: 0 0 5px;<br />
font-size: 95%;<br />
line-height: 1.4em;<br />
border-bottom: 1px solid #ccc;<br />
}</blockquote></li>
<li>Kemudian cari lagi kode seperti ini<br />
<br />
<font color="#009966"> <a expr:name='data:post.id'/><br />
<b:if cond='data:post.title'><br />
<h3 class='post-title entry-title'><br />
<b:if cond='data:post.link'><br />
<a expr:href='data:post.link'><data:post.title/></a></font></li>
<li>Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi<br />
<br />
<blockquote><b:if cond='data:blog.homepageUrl == data:blog.url'><br />
<b:else/><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
<div class='breadcrumbs'><br />
You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <br />
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if><br />
</b:loop><br />
</b:if> &#187; <data:post.title/><br />
</div><br />
</b:if><br />
</b:if></blockquote></li>
<li>klik <b>Simpan</b></li></ol><br />
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.... ^^,<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com54tag:blogger.com,1999:blog-2215598109539068310.post-69780657909330921902010-07-23T01:48:00.001-07:002010-07-23T04:22:44.487-07:00Membuat Menu Navigasi Current Page<img border="0" src="http://i28.tinypic.com/2j5h7s.jpg" align="left" hspace="5" vspace="5" width="180" height="150" alt="membuat current page navigasi">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 <a href="http://r24com.blogspot.com" target="_blank">di sini</a>. Selain berfungsi untuk menandai page aktif, current page juga membuat tampilan blog menjadi lebih elegant dengan sedikit pengembangan.<div class="fullpost">Mengenai bagaimana cara membuatnya silakan ikuti langkah di bawah ini.<br />
<br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b></li>
<li>Klik <b>Edit HTML</b>, tidak perlu memberi centang pada <b>Expand Widget Template</b></li>
<li>Cari kode berikut<br />
<br />
<font color="#009966"></head></font><br />
<br />
</li>
<li>Copy kode di bawah ini dan letakkan tepat sebelum (di atas) kode tadi<br />
<br />
<blockquote><style type='text/css'><br />
#menu-wrapper {<br />
margin: 0;<br />
padding: 5px 10px 5px 0;<br />
background: #b7b7ff;<br />
font-size: .9em;<br />
line-height: 22px; <br />
border-top: 1px solid #a8a8ff;<br />
border-bottom: 1px solid #a8a8ff;<br />
} <br />
.menu {<br />
margin: 0;<br />
float: left;<br />
height: 26px;<br />
}<br />
.menu ul {<br />
margin: 0;<br />
padding: 6px 0 0 10px; <br />
font-weight: bold; <br />
list-style-type: none;<br />
text-align: left;<br />
}<br />
.menu li {<br />
display: inline;<br />
margin: 0;<br />
}<br />
.menu li a { <br />
text-decoration: none;<br />
margin: 0;<br />
padding: 4px 10px; <br />
color: #32527a;<br />
}<br />
.menu li a:hover {<br />
background: #c6c6ff; <br />
color: #64527a;<br />
}<br />
.current-cat{<br />
padding: 5px 10px; <br />
color: #64527a;<br />
background:#c6c6ff;<br />
border: 1px solid #a8a8ff;<br />
-moz-border-radius: 5px; -webkit-border-radius: 5px;<br />
border-radius: 5px;<br />
}<br />
.actived a {<br />
color: #64527a !important;<br />
}<br />
</style><br />
<br />
<script type='text/javascript'><br />
function currentpage (url,current,name) {<br />
var name = name ;<br />
var url = url;<br />
var current = current;<br />
if (current == url) {<br />
document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);<br />
}<br />
else {<br />
document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);<br />
} <br />
}<br />
</script> </blockquote>p</li>
<li>Cari lagi kode seperti ini<br />
<br />
<font color="#009966"><div id='header-wrapper'></font></li>
<li>Copy kode berikut lalu letakkan tepat di atas (sebelum) kode tadi (<font color="red">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 <u>end tag</u> kode tadi maka navigasi akan berada di bawah header.</font>)<br />
<br />
<blockquote><div id='menu-wrapper'><br />
<b:section class='menu' id='menubar' showaddelement='no'><br />
<b:widget id='LinkList1' locked='false' title='' type='LinkList'><br />
<b:includable id='main'><br />
<ul><br />
<b:loop values='data:links' var='link'><br />
<script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script><br />
</b:loop><br />
</ul> <br />
</b:includable><br />
</b:widget><br />
</b:section><br />
</div></blockquote></li>
<li>Klik <b>Simpan</b></li>
</ol><br />
Untuk menambahkan link pada navigasi, silakan masuk <b>Rancangan</b> » <b>Elemen Halaman</b> » pilih <b>Daftar Link</b>. Tambahan Url yang ingin anda pasang pada navigasi. Setelah selesai jangan lupa klik <b>Simpan</b>. Sekarang cek ke blog anda, ^^, semoga bermanfaat dan happy blogging....<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com43tag:blogger.com,1999:blog-2215598109539068310.post-6791499807490869602010-07-21T11:44:00.003-07:002010-07-23T04:24:12.665-07:00Blue Melodic TemplateBlue Melodic Template<br />
<br />
<a href="http://i26.tinypic.com/svoyfo.png" target="_blank"><img border="0" src="http://i26.tinypic.com/svoyfo.png" width="180" height="150" alt="Blue Melodic Template" /></a><br />
<br />
<div class="fullpost"><br />
Features:<br />
<ol><li>Blue and white </li>
<li>3 Columns</li>
<li>3 Footer Columns</li>
<li>Bubble Comments</li>
<li>Highlight Author Comments</li>
<li>Current Navigation</li>
<li>Form Search</li>
<li>Auto Readmore With Thumbnail</li>
<li>Related Posts</li>
<li>Avatar On Comments</li>
</ol><br />
Tested:<br />
<ol><li>Firefox</li>
<li>Chrome</li>
<li>Opera</li>
<li>IE</li>
</ol><br />
Untuk melihat livenya silakan klik <a href="http://r24com.blogspot.com" target="_blank">DI SINI</a>. bagi yang berminat menggunakan template ini, silakan download <a href="http://adhityamasda.googlecode.com/files/Blue%20Melodic%20Template%20-%20'Masda'Zine.zip">DI SINI</a>. </div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com18tag:blogger.com,1999:blog-2215598109539068310.post-10584226115779779092010-07-06T07:01:00.003-07:002010-07-06T07:06:11.525-07:00Vertical Menu Dengan Efek Show Hide<span class="zine">S</span>etelah 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 <b>membuat vertical menu dengan efek show hide</b>. Tutorial ini saya pelajari dari <a href="http://woork.blogspot.com">Antonio Lupeti</a>, mungkin sudah tidak asing lagi bagi anda dengan blogger yang saya maksud. Live demonya silakan anda lihat <a href="http://mdezign.blogspot.com/2010/07/vertical-menu-with-show-hide-efek.html">DI SINI</a>. bagi anda yang berminat untuk membuatnya silakan ikuti langkah-langkah di bawah ini.<div class="fullpost"><br />
<b><font color="red">STEP 1</font></b><br />
<br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b></li>
<li>Klik <b>Edit HTML</b></li>
<li>Cari kode berikut<br />
<br />
<font color="#009966"></head></font><br />
<br />
Copy kode di bawah ini, lalu letakkan tepat di atas kode tadi.<br />
<br />
<blockquote><style type="text/css"><br />
/* --- button --- */<br />
.button{<br />
background:url(http://i46.tinypic.com/2rbz7rt.png) -32px right no-repeat;<br />
color:#FFFFFF;<br />
clear:both;<br />
display:block;<br />
float:left;<br />
font-size:13px;<br />
font-weight:bold;<br />
height:31px;<br />
line-height:31px;<br />
width:auto;<br />
margin-right:30px;<br />
}<br />
a.button {<br />
text-decoration:none;<br />
}<br />
.button span {<br />
background:url(http://i46.tinypic.com/2rbz7rt.png) left top no-repeat;<br />
display:block;<br />
height:31px;<br />
line-height:31px;<br />
padding-left:10px;<br />
padding-right:8px;<br />
margin-right:20px;<br />
}<br />
/* --- vertical menu --- */<br />
.v-menu{<br />
border:solid 1px #7F9FBF;<br />
width:200px;<br />
clear:both;<br />
}<br />
ul.v-menu, .v-menu li{<br />
padding:0; <br />
margin:0;<br />
list-style:none;<br />
}<br />
ul.v-menu{<br />
clear:both;<br />
margin-top:6px;<br />
padding:6px 10px;<br />
}<br />
.v-menu li a{<br />
color:#555555;<br />
font-weight:bold;<br />
display:block;<br />
border-top:solid 1px #DEDEDE;<br />
padding:4px;<br />
text-decoration:none;<br />
}<br />
.v-menu li a:hover{<br />
color:#999999;<br />
}<br />
</style><br />
<script type="text/javascript"><br />
function showElement(layer){<br />
var myLayer = document.getElementById(layer);<br />
if(myLayer.style.display=="none"){<br />
myLayer.style.display="block";<br />
myLayer.backgroundPosition="top";<br />
} else { <br />
myLayer.style.display="none";<br />
}<br />
}<br />
</script></blockquote></li>
<li>Klik <b>Simpan</b></li>
</ol><br />
<b><font color="red">STEP 2</font></b><br />
<br />
<ol><li>Setelah template anda tersimpan, Klik <b>Rancangan</b></li>
<li>Pada menu <b>Elemen Halaman</b>, pilih <b>Tambah Widget</b> sesuai dengan letak yang anda inginkan</li>
<li>Setelah terbuka halaman tambah widget pilih penambahan <b>HTML/JavaScript</b></li>
<li>Pada halaman Konfigurasi <b>HTML/JavaScript</b> beri judul widget anda, kemudian copy kode berikut dan letakkan pada content.<br />
<br />
<blockquote><a href="#" class="button" onclick="javascript:showElement ('v-menu')"><br />
<span>ClickHere</span></a><br />
<ul id="v-menu" class="v-menu" style="display: none;"><br />
<li><a href="http://URL ANDA">TEXT ANDA</a></li><br />
<li><a href="http://URL ANDA">TEXT ANDA</a></li><br />
<li><a href="http://URL ANDA">TEXT ANDA</a></li><br />
<li><a href="http://URL ANDA">TEXT ANDA</a></li><br />
<li><a href="http://URL ANDA">TEXT ANDA</a></li><br />
</ul></blockquote><br />
Keterangan :<br />
* Pada list item (<font color="red"><li><a href="http://URL ANDA">TEXT ANDA</a></li></font>), silakan sesuaikan dengan Url yang anda tuju dan juga text anda.</li>
<li>Klik <b>Simpan</b></li>
</ol><br />
Sekarang lihat blog anda, jika anda berhasil membuatnya maka akan terlihat vertical menu seperti di blog saya <a href="http://mdezign.blogspot.com/2010/07/vertical-menu-with-show-hide-efek.html">yang ini</a>. Selamat mencoba dan semoga bermanfaat ^^,. Saya mau blogwalking dulu, kangen ama temen-temen blogger semua....</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com25tag:blogger.com,1999:blog-2215598109539068310.post-4071444761417058382010-06-30T02:30:00.001-07:002010-06-30T21:29:18.825-07:00Membuat Efek Shadow Pada Image<span class="zine">S</span>esuai 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 <a href="http://mdezign.blogspot.com/2010/06/efek-shadow-pada-image.html">DI SINI</a> untuk melihat demonya. Berikut ini cara untuk membuatnya.<div class="fullpost"><br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b></li>
<li>Pilih menu <b>Edit HTML</b> (tidak perlu memberi centang pada 'Expand Template Widget')</li>
<li>Cari kode berikut<br />
<br />
<font color="#009966">]]></b:skin></font></li>
<li>Copy kode berikut ini lalu letakkan tepat di atas kode tadi.<br />
<br />
<blockquote>.shadow img {<br />
background: url(http://i50.tinypic.com/10xyg4w.png) no-repeat right bottom; <br />
padding: 0 6px 6px 0;<br />
}<br />
</blockquote></li>
<li>Klik <b>Simpan</b></li>
</ol><br />
Untuk menerapkan <b>efek shadow pada image</b> kodenya seperti ini.<br />
<br />
<blockquote><div class="shadow"><font color="#009966"><img border="0" src="http://URL GAMBAR ANDA"/></font></div></blockquote><br />
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. <br />
<br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b></li>
<li>Beri centang pada <b>Expand Template Widget</b></li>
<li>Setelah loadnya selesai, Cari kode berikut<br />
<br />
<font color="#009966"><data:post.body/></font></li>
<li>Lalu sisipkan kode CSS tadi, perhatikan kode di bawah ini<br />
<br />
<blockquote><div class="shadow"><font color="#009966"><data:post.body/></font></div></blockquote></li>
<li>Klik <b>Simpan</b></li>
</ol><br />
Dengan menerapkan langkah kedua ini, begitu anda memposting image pada blog maka akan secara otomatis terdapat shadow pada image tersebut. Semoga bermanfaat... <br />
^^,<br />
<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com27tag:blogger.com,1999:blog-2215598109539068310.post-37072654372036541592010-06-26T21:09:00.001-07:002010-06-26T21:33:14.715-07:00Membuat Tabel di Blog<span class="zine">P</span>embuatan 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.<div class="fullpost"><br />
<ol><li>Tabel 1 kolom<br />
<br />
Kodenya:<br />
<br />
<blockquote><table border="1"><br />
<tr><td>Kolom 1</td></tr><br />
</table></blockquote><br />
Hasilnya:<br />
<br />
<table border="1"><tr><td>Kolom 1</td></tr>
</table></li>
<li>Tabel 2 kolom<br />
<br />
<blockquote><table border="1"><br />
<tr><td>Kolom 1</td><td>Kolom 2</td></tr><br />
</table></blockquote><br />
Hasilnya:<br />
<br />
<table border="1"><tr><td>Kolom 1</td><td>Kolom 2</td></tr>
</table><br />
* Dari kode di atas dapat diambil kesimpulan jika tag <b>td</b> menentukan kolom</li>
<li>Tabel 2 baris<br />
<br />
<blockquote><table border="1"> <br />
<tr><td>Baris 1</td></tr> <br />
<tr><td>Baris 2</td></tr> <br />
</table></blockquote><br />
Hasilnya: <br />
<br />
<table border="1"><tr><td>Baris 1</td></tr>
<tr><td>Baris 2</td></tr>
</table><br />
* Dari kode di atas dapat diambil kesimpulan jika tag <b>tr</b> menentukan Baris</li>
<li>Tabel 1 Kolom 2 Baris<br />
<br />
<blockquote><table border="1"><br />
<tr><td rowspan="2">Kolom 1</td><td>Baris 1</td></tr><br />
<tr><td>Baris 2</td></tr><br />
</table></blockquote><br />
Hasilnya:<br />
<br />
<table border="1"><tr><td rowspan="2">Kolom 1</td><td>Baris 1</td></tr>
<tr><td>Baris 2</td></tr>
</table><br />
* Dari kode di atas dapat diambil kesimpulan jika tag <b>rowspan</b> berfungsi untuk penggabungan cell dalam satu kolom dan angka 2 pada rowspan menentukan jumlah cell yang digabung</li>
<li>Tabel 1 Baris 2 Kolom<br />
<br />
<blockquote><table border="1"><br />
<tr><td colspan="2">Baris 1</td></tr><br />
<tr><td>Kolom 1</td><td>Kolom 2</td></tr><br />
</table></blockquote><br />
Hasilnya:<br />
<br />
<table border="1"><tr><td colspan="2">Baris 1</td></tr>
<tr><td>Kolom 1</td><td>Kolom 2</td></tr>
</table><br />
* Dari kode di atas dapat diambil kesimpulan jika tag <b>colspan</b> berfungsi untuk penggabungan cell dalam satu baris dan angka 2 pada colspan menentukan jumlah cell yang digabung</li>
<li>Penggunaan Tag cellpadding dan bgcolor<br />
<br />
<blockquote><table border="1" cellpadding="10"><br />
<tr><td bgcolor="#ff9900">Tabel</tr><br />
</table></blockquote><br />
Hasilnya:<br />
<br />
<table border="1" cellpadding="10"><tr><td bgcolor="#ff9900">Tabel</tr><br />
<br />
<br />
</table><br />
* Dari kode di atas dapat diambil kesimpulan jika tag <b>cellpadding</b> berfungsi untuk memberi jarak text dengan border dan angka 10 pada cellpadding menentukan jarak antara text dengan border(dalam satuan px)<br />
* tag <b>bgcolor</b> berfungsi untuk memberi background warna pada cell</li><br />
<br />
<br />
<li>Penggunaan tag width, cellspacing, dan align<br />
<br />
<blockquote><table border="1" cellspacing="10"><br />
<tr><td width="200" align="center">Lebar Kolom ini 200px</td><br />
<td width="150" align="center">Lebar Kolom ini 150px</td></tr><br />
</table></blockquote><br />
Hasilnya:<br />
<br />
<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><br />
* Dari kode di atas dapat diambil kesimpulan jika tag <b>cellspacing</b> berfungsi untuk memberi jarak antar cell dan angka 10 pada cellspacing menentukan jaraknya(dalam satuan px)<br />
* tag <b>align</b> berfungsi untuk mengatur posisi text pada cell pada area horizontal (left,center,right)</li><br />
<br />
<br />
<li>Penggunaan tag height dan valign<br />
<br />
<blockquote><table border="1" valign="middle"><br />
<tr><td height="100">Tabel</tr><br />
</table></blockquote><br />
Hasilnya:<br />
<br />
<table border="1" valign="middle"><tr><td height="100">Tabel</tr><br />
<br />
<br />
</table><br />
* Dari kode di atas dapat diambil kesimpulan jika tag <b>valign</b> berfungsi untuk mengatur posisi text pada area vertical (top,middle,bottom)<br />
* tag <b>height</b> berfungsi untuk menentukan tinggi cell (dalam satuan px)</li><br />
<br />
</ol><br />
Catatan:<br />
&187; Memberi angka 0 pada border berfungsi untuk mengilangkan border.<br />
<br />
Saya rasa cukup sekian dulu tutorial kali ini. Selanjutnya anda bisa berkreasi sesuai keinginan anda. Semoga bermanfaat.... ^^, </div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com34tag:blogger.com,1999:blog-2215598109539068310.post-65380480271628201022010-06-24T03:33:00.003-07:002010-06-24T03:33:06.797-07:00Membuat Highlight Author Comment<span class="zine">S</span>elain 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 <a href="http://masdazine.blogspot.com">blog ini</a> atau bisa juga anda lihat <a href="http://prisa-adinda-template.blogspot.com">DI SINI</a>. <div class="fullpost">Berikut langkah-langkah untuk membuatnya.<br />
<br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b></li>
<li>Klik <b>Edit HTML</b>, kemudian beri centang pada <b>Expand Widget Template</b></li>
<li>Cari kode berikut<br />
<br />
<font color="#009966">]]></b:skin></font><br />
<br />
Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.<br />
<br />
<blockquote>.owner-Body {<br />
background: #f6f6f6; <br />
margin-top: -7px; <br />
padding-left: 10px; <br />
padding-top: 10px; <br />
border-right: 1px solid #999; <br />
border-bottom: 1px solid #999; <br />
border-left: 1px solid #ccc;<br />
}<br />
.owner-Body p {<br />
margin: 0; <br />
padding-bottom: 15px;<br />
}</blockquote><br />
* pada background, kode warna #f6f6f6 menentukan warna background komentar admin. Anda bisa menggantinya sesuai dengan keinginan anda<br />
* anda juga bisa menambahkan image pada kotak komentar admin dengan menambahkan kode berikut <font color="red">url(http://image anda)</font> setelah kode warna (beri spasi)</li>
<li>Kemudian cari kode berikut <br />
<br />
<blockquote><data:commentPostedByMsg/><br />
</dt><br />
<dd class='comment-body'><br />
<b:if cond='data:comment.isDeleted'><br />
<span class='deleted-comment'><data:comment.body/></span><br />
<b:else/><br />
<p><data:comment.body/></p><br />
</b:if><br />
</dd></blockquote><br />
Copy kode di bawah ini kemudian sisipkan pada kode di atas<br />
<br />
<blockquote><b:if cond='data:comment.author == data:post.author'><br />
<dd class='owner-Body'><br />
<p><data:comment.body/></p><br />
</dd><br />
<b:else/><br />
<br />
</b:if></blockquote><br />
Penempatannya seperti ini<br />
<br />
<blockquote><font color="#009966"><data:commentPostedByMsg/><br />
</dt></font><br />
<b:if cond='data:comment.author == data:post.author'><br />
<dd class='owner-Body'><br />
<p><data:comment.body/></p><br />
</dd><br />
<b:else/><br />
<font color="#009966"><dd class='comment-body'><br />
<b:if cond='data:comment.isDeleted'><br />
<span class='deleted-comment'><data:comment.body/></span><br />
<b:else/><br />
<p><data:comment.body/></p><br />
</b:if><br />
</dd></font><br />
</b:if></blockquote></li>
<li>Klik Simpan</li></ol><br />
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.... ^^,</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com33tag:blogger.com,1999:blog-2215598109539068310.post-61950839506986113622010-06-22T05:42:00.001-07:002010-06-22T05:56:57.606-07:00Macam-macam Border Pada CSS3<span class="zine">D</span>alam <a href="http://masdazine.blogspot.com/2010/06/tabel-kode-css3.html">tabel kode CSS3</a> 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 <div class="fullpost"><br />
<ol><li>solid</li>
<li>dotted</li>
<li>dashed</li>
<li>double</li>
<li>groove</li>
<li>ridge</li>
<li>inset</li>
<li>outset</li>
</ol><br />
Nah sebagai contoh penjelasannya kita gunakan kode berikut.<br />
<br />
<blockquote><div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px <font color="red">solid</font> #000;"> <font color="#0066cc">CONTENT ANDA</font> </div></blockquote><br />
Perhatikan kode di atas. <br />
<ul>pada kode border, 4px menunjukkan ketebalan border</ul><br />
<br />
<ul>pada kode yang berwarna merah <font color="red">solid</font> merupakan kode untuk border yang akan berupa garis biasa.</ul><br />
<br />
<ul>setelah kode <font color="red">solid</font>, terdapat kode warna #000, yang merupakan warna dari border tersebut</ul><br />
<br />
<br />
Untuk mengetahui perbedaan bordernya maka kita tinggal mengganti kode <font color="red">solid</font>, dengan kode-kode sesuai dengan kode yang sudah saya tulis diatas.<br />
<br />
<ol><li>Dari kode di atas maka akan terbentuk sebuah kolom seperti ini <br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px solid #000;">CONTENT ANDA </div></li>
<li>Selanjutnya kita ganti kode <font color="red">solid</font> dengan <font color="red">dotted</font>, hasilnya seperti ini.<br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px dotted #000;">CONTENT ANDA </div></li>
<li>Selanjutnya kita ganti kode <font color="red">dotted</font> dengan <font color="red">dashed</font>, hasilnya seperti ini.<br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px dashed #000;">CONTENT ANDA </div></li>
<li>Selanjutnya kita ganti kode <font color="red">dashed</font> dengan <font color="red">double</font>, hasilnya seperti ini.<br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px double #000;">CONTENT ANDA </div></li>
<li>Selanjutnya kita ganti kode <font color="red">double</font> dengan <font color="red">groove</font>, hasilnya seperti ini.<br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px groove #000;">CONTENT ANDA </div></li>
<li>Selanjutnya kita ganti kode <font color="red">groove</font> dengan <font color="red">ridge</font>, hasilnya seperti ini.<br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px ridge #000;">CONTENT ANDA </div></li>
<li>Selanjutnya kita ganti kode <font color="red">ridge</font> dengan <font color="red">inset</font>, hasilnya seperti ini.<br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px inset #000;">CONTENT ANDA </div></li>
<li>Selanjutnya kita ganti kode <font color="red">inset</font> dengan <font color="red">outset</font>, hasilnya seperti ini.<br />
<br />
<div style="width :200px; padding: 10px; background: #f7f8f8; color: #f00; font-weight: bold; border: 4px outset #000;">CONTENT ANDA </div></li>
</ol><br />
Kode diatas hanyalah sebagai contoh saja, pada intinya saya hanya menjelaskan <b>macam-macam border pada CSS3</b>. semoga bermanfaat... ^^,</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com13tag:blogger.com,1999:blog-2215598109539068310.post-66584901403037265002010-06-19T05:44:00.001-07:002010-06-19T08:59:08.191-07:00Memberi Nomor Pada Komentar (Numbering Comments)<span class="zine">T</span>idak begitu jauh bedanya dengan postingan saya kemarin, tentu saja masih berhubungan dengan comment ^^, sebelumnya saya pernah membahas tentang <a href="http://masdazine.blogspot.com/2010/06/membuat-comments-bubble-pada-blog.html"><b>cara membuat comments bubble</b></a> dan <a href="http://masdazine.blogspot.com/2010/06/membuat-comments-bubble-comments-versi.html"><b>cara membuat comments bubble versi 2</b></a> maka kali ini saya akan membahas tentang <b>cara membuat number comments</b>. <div class="fullpost">Tips yang saya maksudkan adalah pemberian nomor pada kotak komentar. Untuk Live demo silakan klik di sini <a href="http://prisa-adinda-template.blogspot.com/2010/06/prisa-adinda.html">di sini</a>. Untuk membuatnya silakan ikuti langkah-langkah berikut.<br />
<br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b></li>
<li>Klik <b>Edit HTML</b>, kemudian beri centang pada <b>Expand Widget Template</b></li>
<li><b><font color="#ff9933">STEP 1</font></b><br />
Cari kode berikut<br />
<br />
<font color="#009966">]]></b:skin></font><br />
<br />
Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.<br />
<br />
<blockquote>.comments-counter a:link,.comments-counter a:visited {<br />
color: #000 !important;<br />
text-decoration: none !important;<br />
background: url(<font color="blue">http://i47.tinypic.com/99m5on.jpg</font>) no-repeat;<br />
width: <font color="orange">50px</font>;<br />
height: <font color="orange">48px</font>;<br />
float: right;<br />
display: block;<br />
margin-right: 5px;<br />
margin-top: <font color="red">-15px</font>;<br />
text-align: center;<br />
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;<br />
font-size: 15px;<br />
font-weight: normal;<br />
}<br />
.comments-counter a:hover,.comments-counter a:active {<br />
color: #666 !important;<br />
text-decoration: none !important;<br />
}</blockquote></li>
<li><b><font color="#ff9933">STEP 2</font></b><br />
Kemudian cari kode berikut<br />
<br />
<font color="#009966"><b:loop values='data:post.comments' var='comment'></font><br />
<br />
Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.<br />
<br />
<blockquote><script type='text/javascript'>var CommentsCounter=0;</script> </blockquote></li>
<li><b><font color="#ff9933">STEP 3</font></b><br />
Terakhir cari kode berikut<br />
<br />
<font color="#009966"><data:commentPostedByMsg/></font><br />
<br />
Copy kode berikut lalu letakkan tepat di bawah (setelah) kode tadi<br />
<br />
<blockquote><span class='comments-counter'><br />
<a expr:href='data:comment.url' title='Comment Link'><br />
<script type='text/javascript'><br />
CommentsCounter=CommentsCounter+1;<br />
document.write(CommentsCounter)<br />
</script><br />
</a><br />
</span></blockquote></li>
<li>klik <b>Simpan</b></li>
</ol><br />
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 <b><font color="#ff9933">STEP 1</font></b>. 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 (<b><font color="#ff9933">STEP 1</font></b>). Semoga bermanfaat...^^, </div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com10tag:blogger.com,1999:blog-2215598109539068310.post-79316272279731688372010-06-18T04:57:00.001-07:002010-06-18T04:57:23.512-07:00Prisa Adinda Template<a href="http://adhityamasda.googlecode.com/files/Prisa%20Adinda%20Template%20-%20'Masda'Zine.zip"><img border="0" src="http://i45.tinypic.com/9r7y1z.jpg" align="left" hspace="5" vspace="5" alt="Free templates - Prisa Adinda Template" width="180" height="150"/></a>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 <a href="http://prisa-adinda-template.blogspot.com">di sini</a>. Namun karena blog saya hanya <a href="http://masdazine.blogspot.com">blog ini</a>, 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. <div class="fullpost">Bagi anda yang berminat menggunakan template ini untuk blog anda, silakan klik image di atas untuk mendownloadnya. ^^, happy blogging...</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com11tag:blogger.com,1999:blog-2215598109539068310.post-88771085703877618492010-06-14T07:02:00.000-07:002010-06-14T16:16:18.246-07:00Membuat Comments Bubble Versi 2<img border="0" src="http://dryicons.com/images/icon_sets/colorful_stickers_icons_set/png/256x256/comment.png" align="left" hspace="5" vspace="5" alt="membuat bubble comment versi 2" width="180" height="150"/>Pada <a href="http://masdazine.blogspot.com/2010/06/membuat-comments-bubble-pada-blog.html">postingan sebelumnya</a> tentang <b>cara membuat comments bubble pada blog</b> mas <a href="http://www.blogrizal.com/">Rizal</a> memberikan sebuah pertanyaan kepada saya tentang bagaimana cara membuat comments bubble seperti pada <a href="http://masdazine.blogspot.com/">blog ini</a>. Untuk itu pada postingan ini saya akan memberikan sedikit tutorial tentang <b>cara membuat comments bubble versi 2</b>, ^^, judulnya agak-agak mirip dengan postingan kemarin. <div class="fullpost">Langsung aja berikut langkah-langkahnya.<br />
<br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b></li>
<li>Klik <b>Edit HTML</b>, kemudian beri centang pada <b>Expand Widget Template</b></li>
<li>Cari kode berikut<br />
<br />
<font color="#009966">]]></b:skin></font><br />
<br />
Copy kode di bawah ini lalu letakkan tepat di atas kode tadi.<br />
<br />
<blockquote>.comm-link {<br />
padding: 9px 0 0 26px; <br />
margin: 10px 0 0 0; <br />
font-size: 10px; <br />
font-family: Arial,Tahoma,Verdana; <br />
text-transform: capitalize; <br />
background: transparent url('<font color="red">http://i48.tinypic.com/2u8z29z.png</font>') no-repeat left;<br />
}</blockquote><br />
Keterangan :<br />
*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.</li>
<li>Kemudian cari lagi kode berikut<br />
<br />
<font color="#009966"><div class='post-header-line-1'/></font><br />
<br />
Copy kode berikut lalu letakkan tepat di bawah kode tadi<br />
<br />
<blockquote><b:if cond='data:post.allowComments'><br />
<a class='comm-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><br />
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:commentLabelPlural/></b:if><br />
</a><br />
</b:if></blockquote></li>
<li>klik <b>Simpan</b></li>
</ol><br />
Terakhir anda tinggal melihat hasilnya, ^^, semoga bermanfaat.</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com27tag:blogger.com,1999:blog-2215598109539068310.post-73450440708418617762010-06-12T06:26:00.001-07:002010-06-12T06:26:51.333-07:00Membuat Comments Bubble Pada Blog<img border="0" src="http://i45.tinypic.com/f4o2tf.gif" align="left" hspace="5" vspace="5" width="180" height="150" alt="Membuat comments bubble pada blog"/>Masih berhubungan dengan kode CSS seperti pada postingan sebelumnya, kali ini saya akan membahas mengenai <b>cara membuat comments bubble pada blog</b>. Sedikit penjelasan, <b>comments bubble</b> merupakan tampilan jumlah komentar yang dimanipulasi seakan-akan berada dalam gelembung. <div class="fullpost">Langsung saja untuk anda yang berminat untuk membuatnya, silakan ikuti langkah-langkah di bawah ini.<br />
<br />
<ol><li>Login ke blogger.com</li>
<li>Klik <b>Rancangan</b>, (berhubung sekarang Blogger.com menyediakan fitur baru (desain template), maka fitur tata letakpun berada dalam fitur <b>Rancangan</b>)</li>
<li>Klik <b>Edit HTML</b>, kemudian beri centang pada <b>Expand Widget Template</b></li>
<li>Cari kode berikut<br />
<br />
<font color="#009966"></head></font></li>
<li>Copy kode di bawah ini lalu letakkan tepat di atas (sebelum) kode tadi.<br />
<br />
<blockquote><style type="text/css"><br />
.comment-bubble {<br />
float: right;<br />
background: url(<font color="red">http://i46.tinypic.com/df97c4.jpg</font>) no-repeat;<br />
width: <font color="blue">55px</font>;<br />
height: <font color="blue">40px</font>;<br />
font-size: 18px;<br />
margin-top: -15px;<br />
margin-right: 2px;<br />
text-align: center;<br />
}<br />
</style></blockquote><br />
Keterangan :<br />
<li>Kode yang berwarna <font color="red">merah</font> merupakan Url tempat anda menyimpan image bubble. Jika anda menggunakan Url di atas maka image bubble yang anda gunakan seperti ini<br />
<br />
<img border="0" src="http://i46.tinypic.com/df97c4.jpg" alt="Bubble image"><br />
</li><br />
<li>Kode yang berwarna <font color="blue">biru</font> pada width dan height silakan sesuaikan dengan ukuran image anda.</li></li>
<li>Cari lagi kode seperti ini<br />
<br />
<font color="#009966"><h3 class='post-title entry-title'></font></li>
<li>Copy kode di bawah ini lalu letakkan tepat di bawah <setelah> kode tadi.<br />
<br />
<blockquote><b:if cond='data:post.allowComments'><br />
<a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a><br />
</b:if></blockquote></li>
<li>Klik <b>Simpan</b></li></ol><br />
Selanjutnya silakan lihat blog anda. Perhatikan bagian disamping kanan judul postingan anda. Semoga bermanfaat...<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com30tag:blogger.com,1999:blog-2215598109539068310.post-59207718855664555992010-06-10T05:58:00.001-07:002010-06-10T05:58:20.459-07:00Membuat Efek Blur Pada Image<a class="linkopacity" href=""><img align="left" alt="Membuat efek blur" border="0" height="150" hspace="5" src="http://i45.tinypic.com/1sjcsz.jpg" vspace="5" width="180" /></a>Setelah kemarin saya posting mengenai <b><a href="http://masdazine.blogspot.com/2010/06/membuat-efek-scroll.html">cara membuat efek scroll</a></b>, maka sekarang saya akan membahas tentang <b>cara membuat efek blur pada image</b>. 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. <div class="fullpost">Silakan baca lebih lanjut langkah-langkah untuk membuatnya.<br />
<br />
<ol><li>"<b>Login</b>" seperti biasa di acount blogger anda</li>
<li>Klik "<b>Tata Letak</b>", lalu klik "<b>Edit HTML</b>"</li>
<li>Cari kode berikut :<br />
<br />
<span style="color: red;"></head></span> <br />
<br />
Copy kode di bawah ini lalu letakkan (paste) tepat di atas (sebelum) kode tadi. <br />
<br />
<br />
<blockquote><span style="color: #009966;"><style type="text/css"><br />
a.linkopacity img {<br />
filter: alpha(opacity=50);<br />
-moz-opacity: 0.5;<br />
opacity: 0.5;<br />
-khtml-opacity-: 0.5;<br />
}<br />
<br />
a.linkopacity:hover img {<br />
filter: alpha(opacity=50);<br />
-moz-opacity: 1.0;<br />
opacity: 1.0;<br />
-khtml-opacity-: 1.0;<br />
}<br />
</style></span></blockquote></li>
<li>Klik <b>Simpan</b></li>
</ol><br />
<br />
Langkah selanjutnya adalah cara menerapkan efek blur pada image. Seperti umumnya kode yang digunakan untuk membuat link pada image adalah seperti berikut<br />
<br />
<blockquote><span style="color: #009966;"><a href="<span style="color: orange;">URL YANG ANDA TUJU</span>"><img src="<span style="color: orange;">HOSTING IMAGE ANDA</span>"></a></span></blockquote><br />
<br />
Silakan anda ganti kode di atas menjadi seperti ini<br />
<br />
<blockquote><span style="color: #009966;"><a <span style="color: red;">class="linkopacity"</span> href="<span style="color: orange;">URL YANG ANDA TUJU</span>"><img src="<span style="color: orange;">HOSTING IMAGE ANDA</span>"></a></span></blockquote><br />
<br />
Namun apabila anda tidak menginginkan image yang berupa link, kodenya sebagai berikut<br />
<br />
<blockquote><span style="color: #009966;"><a <span style="color: red;">class="linkopacity"</span>><img src="<span style="color: orange;">HOSTING IMAGE ANDA</span>"></a></span></blockquote><br />
<br />
Kode yang berwarna <span style="color: red;">merah</span> adalah kode yang harus anda tambahkan. Sekian dulu trik dari saya, semoga bermanfaat, dan happy blogging..... ^^,</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com19tag:blogger.com,1999:blog-2215598109539068310.post-87558734311117479282010-06-08T05:30:00.001-07:002010-06-08T05:30:28.992-07:00Membuat Efek Scroll<img border="0" src="http://i48.tinypic.com/1129wsp.gif" align="left" hspace="5" vspace="5" width="180" height="150" alt="membuat efek scroll"/>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 class="fullpost"><br />
<blockquote><font color="#009966"><div style="overflow:auto; width:<font color="red">300</font>px; height:<font color="red">150</font>px; padding:10px; border:1px solid <font color="red">#eee</font>">letakkan content anda di sini</div></font></blockquote><br />
Keterangan :<br />
<ol><li>pada kode width, angka <font color="red">300</font> menunjukkan lebar kotak scroll</li>
<li>pada kode width, angka <font color="red">150</font> menunjukkan tinggi kotak scroll</li>
<li>pada kode border, kode <font color="red">#eee</font> menunjukkan warna border kotak scroll</li></ol><br />
Misalnya saya ingin membuat daftar nama teman-teman saya.<br />
<br />
<div style="overflow:auto;width:300px;height:150px;padding:10px;border:1px solid #eee"><ol><li>Avin</li
>
<li>Awan</li>
<li>Bams</li>
<li>Brink</li>
<li>Cemed</li>
<li>Dendy</li>
<li>Didot</li>
<li>Dimas</li>
<li>Dion</li>
<li>Dony</li>
<li>Ferry</li>
<li>Gache</li>
<li>Gepenk</li>
<li>Irul</li>
<li>Iqbal</li>
<li>MD</li>
<li>Memed</li>
<li>Ndaru</li>
<li>Sonny</li>
<li>Suject</li></ol></div><br />
Dengan sedikit penambahan kode CSS diatas, efek scrollpun jadi. ^^, Selamat mencoba dan semoga bermanfaat.</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com18tag:blogger.com,1999:blog-2215598109539068310.post-69004912940956679712010-06-06T09:14:00.001-07:002010-06-12T23:21:39.854-07:00Tabel Kode CSS3<img border="0" src="http://i46.tinypic.com/dz760i.gif" align="left" hspace="3" vspace="3" width="180" height="150" alt="kode CSS3">Seperti prinsip saya pribadi <b>"Belajar, belajar, dan terus belajar, serta berusaha untuk menerapkannya, karena menurut saya ilmu itu diterapkan bukan untuk dipelajari"</b>. Untuk itu pada postingan kali ini saya tidak memberikan tutorial apapun, melainkan mengajak anda untuk <b>belajar bersama mengenai kode CSS3</b>, karena pada intinya sayapun juga masih belajar. <div class="fullpost">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. <br />
<br />
Klik <a href="http://masda.googlecode.com/files/css3code.zip">DI SINI</a> untuk men-download tabel kumpulan kode-kode CSS3 secara lengkap (PDF). Info selengkapnya silakan kunjungi <a href="http://veign.com">veign.com.</a></div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com12tag:blogger.com,1999:blog-2215598109539068310.post-28284811478723113012010-06-03T19:51:00.001-07:002010-06-03T20:14:34.294-07:00Membuat Menu Drop Down Pada Navigasi<img border="0" src="http://i46.tinypic.com/2z8ycmv.jpg" align="left" hspace="3" vspace="3" width="180" height="150" alt="menu drop down navigasi"/>Postingan ini merupakan permintaan dari <a href="http://brotherbuzz.blogspot.com/" target="_blank">Paman Helman</a> lewat kotak komentar pada <a href="http://masdazine.blogspot.com/2010/05/cara-membuat-tombol-share-on-facebook.html">postingan saya sebelumnya</a>, adapun yang dipertanyakan oleh paman Helman yakni tentang bagaimana <b>cara membuat menu drop down pada navigasi</b>. 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.<div class="fullpost"><br />
<blockquote><font color="#009966">#NavbarMenu {<br />
background:<font color="red">#434343</font>; <font color="orange">/*-- warna background navigasi --*/</font> <br />
width:<font color="red">900px</font>; <font color="orange">/*-- lebar navigasi --*/</font><br />
height:<font color="red">34px</font>; <font color="orange">/*-- tinggi navigasi --*/</font> <br />
color:<font color="red">#ccc</font>; <font color="orange">/*-- warna teks navigasi --*/</font><br />
margin:0 auto; <br />
padding:0; <br />
font:bold 8px Arial,Tahoma,Verdana;<br />
}<br />
<br />
#NavbarMenuleft {<br />
width:<font color="red">650px</font>; <font color="orange">/*-- lebar menu (biasanya bagian kanan untuk kotak pencarian) --*/</font><br />
float:<font color="red">left</font>; <font color="orange">/*-- posisi menu --*/</font><br />
margin:0; <br />
padding:0;<br />
}<br />
<br />
#nav {<br />
margin:0; <br />
padding-top:3px;<br />
}<br />
<br />
#nav ul {<br />
float:left; <br />
list-style:none; <br />
margin:0; <br />
padding:0;<br />
}<br />
<br />
#nav li {<br />
list-style:none; <br />
margin:0; <br />
padding:0;<br />
}<br />
<br />
#nav li a, #nav li a:link, #nav li a:visited {<br />
color:<font color="red">#ccc</font>; <font color="orange">/*-- warna teks menu --*/</font><br />
display:block; <br />
text-transform:uppercase; <br />
margin:0; <br />
padding:9px 15px 8px; <br />
font:bold 12px Arial,Times New Roman;<br />
}<br />
<br />
#nav li a:hover, #nav li a:active {<br />
background:<font color="red">#333</font>; <font color="orange">/*-- warna background menu drop down --*/</font><br />
color:<font color="red">#FFF</font>; <font color="orange">/*-- warna teks pada menu drop down --*/</font><br />
margin:0; <br />
padding:9px 15px 8px; <br />
text-decoration:none;<br />
}<br />
<br />
#nav li li a, #nav li li a:link, #nav li li a:visited {<br />
background:<font color="red">#333</font>; <font color="orange">/*-- warna background menu drop down --*/</font> <br />
width:<font color="red">150px</font>; <font color="orange">/*-- lebar menu drop down --*/</font><br />
color:<font color="red">#ccc</font>; <font color="orange">/*-- warna teks pada menu drop down --*/</font><br />
text-transform:lowercase; <br />
float:none; <br />
margin:0; <br />
padding:7px 10px; <br />
border-bottom:1px solid <font color="red">#131313</font>; <font color="orange">/*-- warna border bawah pada menu drop down --*/</font><br />
border-left:1px solid <font color="red">#131313</font>; <font color="orange">/*-- warna border kiri pada menu drop down --*/</font><br />
border-right:1px solid <font color="red">#131313</font>; <font color="orange">/*-- warna border kanan pada menu drop down --*/</font><br />
font:normal 14px Georgia,Times New Roman;<br />
}<br />
<br />
#nav li li a:hover, #nav li li a:active {<br />
background:<font color="red">#434343</font>; <font color="orange">/*-- warna background aktif menu drop down --*/</font><br />
color:<font color="red">#fff</font>; <font color="orange">/*-- warna teks aktif pada menu drop down --*/</font><br />
padding:7px 10px;<br />
}<br />
<br />
<br />
#nav li {<br />
float:left; <br />
padding:0;<br />
}<br />
<br />
#nav li ul {<br />
z-index:9999; <br />
position:absolute; <br />
left:-999em; <br />
height:auto; <br />
width:<font color="red">170px</font>; <font color="orange">/*-- lebar menu drop down --*/</font><br />
margin:0; <br />
padding:0;<br />
}<br />
<br />
<br />
#nav li ul a {<br />
width:<font color="red">140px</font>; <font color="orange">/*-- lebar menu drop down --*/</font><br />
}<br />
<br />
#nav li ul ul {<br />
margin:-32px 0 0 171px;<br />
}<br />
<br />
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {<br />
left:-999em;<br />
}<br />
<br />
#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 {<br />
left:auto;<br />
}<br />
<br />
#nav li:hover, #nav li.sfhover {<br />
position:static;<br />
}</font></blockquote><br />
* Silakan sesuaikan dengan template anda semua kode yang saya beri warna merah. <br />
<br />
Copy kode di atas lalu simpan dulu di note atau editor text lainnya. Kemudian ikuti langkah berikut.<br />
<br />
<ol><li><b>Login</b> akun blogger anda.</li>
<li>Klik <b>Tata Letak</b>, kemudian klik <b>Edit HTML</b></li>
<li>Expand <b>widget template</b>, setelah prosesnya selesai, cari kode berikut <font color="#009966">]]</b:skin></font></li>
<li>Letakkan kode yang anda copy tadi tepat di atas kode <font color="#009966">]]</b:skin></font></li>
<li>Copy kode di bawah ini<br />
<br />
<blockquote><font color="#009966"><div id='NavbarMenu'><br />
<div id='NavbarMenuleft'><br />
<ul id='nav'><br />
<li><a href='<font color="red">URL</font>'>Menu 1</a></li><br />
<li><a href='<font color="red">URL</font>'>Menu 2</a></li><br />
<li><a href='#'>More &#187;</a><br />
<ul><br />
<li><a href='#'>Menu Drop Down 1#1&#187;</a><br />
<ul><br />
<li><a href='#'>Menu Drop Down 2#1 &#187;</a><br />
<ul><br />
<li><a href='<font color="red">URL</font>'>Menu Drop Down 3#1</a></li><br />
<li><a href='<font color="red">URL</font>'>Menu Drop Down 3#2</a></li><br />
</ul><br />
</li><br />
<li><a href='<font color="red">URL</font>'>Menu Drop Down 2#2</a></li><br />
</ul><br />
</li><br />
<li><a href='<font color="red">URL</font>'>Menu Drop Down 1#2</a></li><br />
</ul><br />
</li> <br />
</ul><br />
</div><br />
</div></font></blockquote><br />
* Ganti <font color="red">URL</font> dengan url yang anda tuju.</li>
<li>Lalu cari lagi kode <font color="#009966"><div id='header-wrapper'></font></li>
<li>Apabila anda ingin navigasi berada di atas header, letakkan kode tadi (kode kedua) tepat diatas kode <font color="#009966"><div id='header-wrapper'></font></li>
<li>Tetapi apabila anda ingin navigasi berada di bawah header, letakkan kode tadi di bawah kode end tag header-wrapper. <font color="#009966"></div><!-- end header-wrapper --></font></li>
<li>Setelah selesai klik <b>Simpan</b></li>
</ol><br />
Cukup panjang kan kodenya?, ^^ Silakan lihat hasilnya, Semoga bermanfaat...</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com34tag:blogger.com,1999:blog-2215598109539068310.post-27979356892378396832010-06-01T09:19:00.001-07:002010-06-01T09:24:10.506-07:00Manipulasi Rounded Corner Dengan CSS<img border="0" src="http://img.usabilitypost.com/0901/good_corner.png" align="left" hspace="5" vspace="5" alt="Membuat rounded corner (sudut melengkung)" width="180" height="120"/>Seperti apa yang pernah saya bahas pada postingan saya tentang <a href="http://masdazine.blogspot.com/2010/05/6-acuan-memilih-template-blog.html">cara memilih template blog</a>, 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.<div class="fullpost"><br />
<div style="width:250px; -moz-border-radius-bottomleft:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-topleft:15px;
-moz-border-radius-topright: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;"><font color="red">Perhatikan sudut kolom ini. </font></div><br />
Kolom di atas di bentuk dari kode ini.<br />
<br />
<blockquote><font color="#009966"><div style="width:250px;<br />
<font color="red">-moz-border-radius-topleft:<font color="blue">15px</font>; -moz-border-radius-topright:<font color="blue">15px</font>; -moz-border-radius-bottomleft:<font color="blue">15px</font>; -moz-border-radius-bottomright:<font color="blue">15px</font>; -webkit-border-top-left-radius:<font color="blue">15px</font>;<br />
-webkit-border-top-right-radius:<font color="blue">15px</font>;<br />
-webkit-border-bottom-left-radius:<font color="blue">15px</font>;<br />
-webkit-border-bottom-right-radius:<font color="blue">15px</font>; </font>margin:0; padding:10px; background:#eee; border:1px solid #ccc; height:75px;"> <font color="yellow">ISI CONTENT</font> </div></font></blockquote><br />
Keterangan:<br />
<li>Kode yang berwarna <font color="red">merah</font> ialah kode yang harus ditambahkan</li><br />
<br />
<li>Ukuran <font color="blue">15px</font> merupakan ukuran border yang ingin di buat melengkung. Lihat gambar di bawah ini.<br />
<br />
<center><img border="0" src="http://img.usabilitypost.com/0901/corner_center.png" alt="Membuat rounded corner (sudut melengkung)" width="180" height="120"/></center></li><br />
<br />
<br />
Berikut ini contoh penerapan rounded corner pada navigasi/menu blog.<br />
<br />
<blockquote><font color="#009966">/*-- Misalkan kode navigasi/menu anda seperti ini --*/<br />
#Nav {<br />
width: 900px;<br />
<font color="red">-moz-border-radius-topleft:<font color="blue">15px</font>;<br />
-moz-border-radius-topright:<font color="blue">15px</font>; <br />
-moz-border-radius-bottomleft:<font color="blue">15px</font>;<br />
-moz-border-radius-bottomright:<font color="blue">15px</font>;<br />
-webkit-border-top-left-radius:<font color="blue">15px</font>;<br />
-webkit-border-top-right-radius:<font color="blue">15px</font>;<br />
-webkit-border-bottom-left-radius:<font color="blue">15px</font>;<br />
-webkit-border-bottom-right-radius:<font color="blue">15px</font>; </font><br />
height: 34px;<br />
margin: 0px auto;<br />
position:relative;<br />
top: 14px;<br />
text-align: center;<br />
line-height: normal;<br />
}</font></blockquote><br />
Untuk lebih jelasnya, silakan anda baca <a href="http://www.css3.info/preview/rounded-border/">DI SINI</a>. Semoga bermanfaat...</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com20tag:blogger.com,1999:blog-2215598109539068310.post-7799701292955211462010-05-30T04:18:00.001-07:002010-08-25T06:00:51.009-07:00Memasang Update Twitter Widget di Blog<img border="0" src="http://courseweb.lis.illinois.edu/~phettep1/SRPImages/Twitter-Logo.png" align="left" hspace="5" vspace="5" alt="update twitter widget" width="180" height="150"/>Mungkin anda sudah tidak asing lagi dengan twitter. <b>Twitter</b> merupakan salah satu situs jejaring sosial yang mempunyai banyak member setelah <b>facebook</b>. 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 <b>menampilkan update twitter anda di blog</b>. 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??? <div class="fullpost">Langsung aja gan nih caranya.<br />
<br />
<ol><li>Login ke blog anda.</li>
<li>Klik <b>Tata Letak</b></li>
<li>Klik <b>add gadget</b> (Pilih letak sesuai keinginan anda)</li>
<li>Pilih/Klik <b>HTML/JavaScript</b><br />
<br />
<li>Beri title widget anda, kemudian Copy paste kode di bawah ini.<br />
<br />
<blockquote><font color="#009966"><script src="http://widgets.twimg.com/j/2/widget.js"></script><br />
<script><br />
new TWTR.Widget({<br />
version: 2,<br />
type: 'profile',<br />
rpp: <font color="red">1</font>, <font color="orange">//jumlah status terakhir yang ditampilkan</font><br />
interval: 6000,<br />
width: <font color="red">250</font>, <font color="orange">//lebar widget</font><br />
height: <font color="red">300</font>, <font color="orange">//tinggi widget</font><br />
theme: {<br />
shell: {<br />
background: '<font color="red">#0066ff</font>', <font color="orange">//warna background profil</font><br />
color: '<font color="red">#030303</font>' <font color="orange">//warna teks profil</font><br />
},<br />
tweets: {<br />
background: '<font color="red">#0099ff</font>', <font color="orange">//warna background status</font><br />
color: '<font color="red">#060606</font>', <font color="orange">//warna teks status</font><br />
links: '<font color="red">#ff9933</font>' <font color="orange">//warna link</font><br />
}<br />
},<br />
<font color="blue">features</font>: {<br />
scrollbar: <font color="red">false</font>,<br />
loop: <font color="red">false</font>,<br />
live: <font color="red">false</font>,<br />
hashtags: <font color="red">true</font>,<br />
timestamp: <font color="red">true</font>,<br />
avatars: <font color="red">false</font>,<br />
behavior: 'all'<br />
}<br />
}).render().setUser('<font color="red">adhityamasda</font>').start();<br />
</script></font></blockquote><br />
Keterangan: <br />
* kode berwarna <font color="orange">orange</font>merupakan keterangan kode yang berwarna <font color="red">merah</font> pada masing-masing baris. Silakan sesuaikan dengan warna yang anda inginkan.<br />
* Pada <font color="blue">features</font>, kode yang berwarna <font color="red">merah</font> (<font color="red">false</font> dan <font color="true">true</font>) mewakili ya dan tidaknya sebuah fitur. Misalkan pada fitur scrollbar anda ganti kode <font color="red">false</font> menjadi <font color="true">true</font>, maka tampilan widgetpun akan disertai scroll<br />
* <font color="red">adhitya</font> silakan ganti dengan username akun anda.<br />
</li><br />
<br />
<br />
<br />
<li>Klik Simpan</li><br />
<br />
</ol> Setelah semua selesa silakan lihat blog anda, langkah di atas di katakan berhasil apabila di blog anda muncul <b>Update Twitter Widget</b> seperti di bawah ini. <center><script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 1,
interval: 6000,
width: 250,
height: 300,
theme: {
shell: {
background: '#0066ff',
color: '#030303'
},
tweets: {
background: '#0099ff',
color: '#060606',
links: '#ff9933'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('adhityamasda').start();
</script></center> Selamat mencoba dan semoga bermanfaat...</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com27tag:blogger.com,1999:blog-2215598109539068310.post-36400992463400284592010-05-29T06:17:00.001-07:002010-06-12T23:24:33.064-07:00Memasang Recent Comments Widget<img border="0" src="http://i49.tinypic.com/m7gd3s.jpg" align="left" hspace="5" vspace="5" alt="recent comments widget" width="180" height="150"/>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 <a href="http://masdazine.blogspot.com/2010/05/membuat-recent-post-dengan-thumbnail.html">postingan saya yang kemarin</a>, yakni tentang <b>cara membuat recent comment widget</b> atau komentar terakhir. Masih sama-sama memanfaatkan feed untuk menampilkan widget ini. Untuk live demo, silakan lihat widget ini pada sidebar di samping. <div class="fullpost">Langsung saja untuk cara membuatnya kurang lebih seperti ini. <br />
<br />
<ol><li>Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.<br />
<br />
<blockquote><font color="#009966"><br />
<script src="http://masda.googlecode.com/files/recentcomments.js"><br />
</script><br />
<script src="http://<font color="red">masdazine.blogspot.com</font>/feeds/comments/default?max-results=<font color="red">5</font>&alt=json-in-script&callback=showrecentcomments"><br />
</script></font></blockquote><br />
Keterangan:<br />
* URL yang berwarna merah (http://<font color="red">masdazine.blogspot.com</font>) silakan ganti dengan URL anda.<br />
* Angka yang berwarna merah (<font color="red">5</font>) merupakan jumlah comments terakhir yang akan ditampilkan.</li>
<li>Login akun blog anda</li>
<li>Klik <b>Tata Letak</b>, kemudian klik <b>Add Gadget</b> sesuai tempat yang anda inginkan untuk memasang widget recent comments ini</li>
<li>Pilih/Klik <b>HTML/JavaScript</b></li>
<li>Beri title untuk widget anda, kemudian paste code yang anda copy tadi</li>
<li>Klik <b>Simpan</b></li>
</ol><br />
Sekarang lihat blog anda, muncul nggak recent commentnya??? Semoga bermanfaat...<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com18tag:blogger.com,1999:blog-2215598109539068310.post-11544108113257525532010-05-27T05:41:00.001-07:002010-06-12T23:25:46.513-07:00Membuat Recent Post Dengan Thumbnail<img border="0" src="http://i47.tinypic.com/2vs29lv.jpg" align="left" hspace="5" vspace="5" alt="recent posts widget" width="180" height="150"/>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 <b>membuat recent post dengan thumbnail</b>. <div class="fullpost">Untuk memasangnya silakan ikuti langkah-langkah di bawah ini.<br />
<br />
<ol><li>Copy kode di bawah ini, lalu simpan dulu di notes atau editor text lainnya.<br />
<br />
<blockquote><font color="#009966"><script language="JavaScript"><br />
imgr = new Array();<br />
imgr[0] = "http://i45.tinypic.com/1z70ynn.jpg";<br />
showRandomImg = true;<br />
boxwidth = <font color="red">300</font>; <font color="orange">//lebar widget</font><br />
cellspacing = <font color="red">6</font>; <font color="orange">//jarak antar post</font><br />
borderColor = "<font color="red">#ccc</font>"; <font color="orange">//warna border widget</font><br />
bgTD = "<font color="red">#fff</font>"; <font color="orange">//warna background widget</font><br />
thumbwidth = <font color="red">40</font>; <font color="orange">//ukuran lebar thumbnail</font><br />
thumbheight = <font color="red">40</font>; <font color="orange">//ukuran tinggi thumbnail</font><br />
fntsize = <font color="red">12</font>; <font color="#orange">//ukuran font</font><br />
acolor = "#333";<br />
aBold = true;<br />
icon = " ";<br />
text = "comments";<br />
showPostDate = false;<br />
summaryPost = 40;<br />
summaryFontsize = 10;<br />
summaryColor = "#333";<br />
icon2 = " ";<br />
numposts = <font color="red">5</font>; <font color="orange">//jumlah postingan yang ditampilkan</font><br />
home_page = "<font color="red">http://masdazine.blogspot.com/</font>";<br />
</script> <font color="orange">//ganti dengan URL blog anda</font><br />
<script src="http://masda.googlecode.com/files/recentpostswiththumbnail.js"></script></font></blockquote><br />
<font color="blue">* text yang berwarna <font color="orange">orange</font> merupakan penjelasan kode yang berwarna <font color="red">merah</font> pada masing-masing baris.</font><br />
</li>
<li>Login akun blog anda</li>
<li>Klik <b>Tata Letak</b>, kemudian klik <b>Add Gadget</b> sesuai tempat yang anda inginkan untuk memasang widget recent post ini</li>
<li>Pilih/Klik <b>HTML/JavaScript</b></li>
<li>Beri title untuk widget anda, kemudian paste code yang anda copy tadi</li>
<li>Klik <b>Simpan</b></li>
</ol><br />
Sekarang lihat blog anda, sudah muncul atau belum <b>widget Recent posts</b> yang baru saja anda pasang.<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com11tag:blogger.com,1999:blog-2215598109539068310.post-63582970296473258552010-05-26T08:40:00.001-07:002010-05-26T09:29:55.575-07:00Mengubah Tampilan Blogspot Menjadi Versi Mobile<img align="left" alt="merubah tampilan blogspot jadi versi mobile" border="0" height="180" hspace="3" src="http://i45.tinypic.com/of92qp.jpg" vspace="3" width="150" />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? <br />
<div class="fullpost">dikarenakan pada blogger (blogspot) tidak menyediakan layanan ini, kita harus menggunakan pihak ketiga. Untuk mendaftar silakan anda kunjungi <a href="http://mippin.com/web/maker/signUp.jsp">http://mippin.com/web/maker/signUp.jsp</a>. 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 <a href="http://mippin.com/masdazine">http://mippin.com/masdazine</a>.</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com18tag:blogger.com,1999:blog-2215598109539068310.post-81566299282528124452010-05-25T08:15:00.001-07:002010-05-25T15:14:26.273-07:00Elemen Hanya Pada Halaman Selanjutnya<div class="zine">M</div>elanjutkan postingan saya kemarin, yakni tentang <a href="http://masdazine.blogspot.com/2010/05/elemen-hanya-pada-halaman-depan-saja.html">Menampilkan elemen hanya pada halaman depan saja</a>, maka kurang lengkap rasanya jika artikel tersebut nggak ada lawannya yaitu <b>menampilkan elemen hanya pada halaman selanjutnya</b>. Ini merupakan kebalikan dari artikel saya kemarin, dimana elemen tidak akan muncul pada halaman depan melainkan hanya pada halaman selanjutnya saja. <div class="fullpost">Cara membuatnya cukup dengan menambahkan kode seperti ini<br />
<br />
<font color="red"><b:if cond='data:blog.pageType == &quot;item&quot;'></font><br />
<br />
dan<br />
<br />
<font color="red"></b:if></font><br />
<br />
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.<br />
<br />
<blockquote><font color="red"><b:if cond='data:blog.pageType == &quot;item&quot;'></font><br />
<font color="#0066cc"><div id='sidebar'><br />
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'/><br />
.....<br />
.....<br />
</div><!--- end sidebar ---></font><br />
<font color="red"></b:if></font></blockquote><br />
Ingat penambahan kode sebelum tag pembuka dan setelah tag penutup. Selamat mencoba dan semoga bermanfaat...<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com11tag:blogger.com,1999:blog-2215598109539068310.post-88245347116458743402010-05-23T04:54:00.001-07:002010-05-25T02:28:43.822-07:00Title Post Sebagai Keyword Tangguh<img border="0" src="http://www.iwebvisions.com/images/seo.jpg" align="left" hspace="5" vspace="5" width="180" height="150" alt=" Optimasi title post sebagai keyword"/>Title merupakan sebuah <b>keyword yang sangat tangguh</b> 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.<br />
<br />
<div class="fullpost"> 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, <span style="color: #0066cc;"><b>optimasi title post sebagai keyword yang tangguh</b></span> maka pada url akan terlihat seperti ini <span style="color: #0066cc;"><b>http://masdazine.blogspot.com/2010/05/<span style="color: red;"><b>optimasi-title-post-sebagai-keyword</b></span>.html</b></span>. Itulah salah satu hal yang menyebabkan postingan kita tidak terbaca oleh search engine.<br />
<br />
Untuk mengatasi masalah seperti di atas, maka kita usahakan agar tidak menulis title post yang terlalu panjang, yakni <b>mengoptimalkan title post tersebut sebagai keyword</b>. Jadi kita tulis saja seperti ini, <span style="color: #0066cc;"><b>title post sebagai keyword tangguh</b></span>. 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 <span style="color: #0066cc;"><b>http://masdazine.blogspot.com/2010/05/<span style="color: red;"><b>title-post-sebagai-keyword-tangguh</b></span>.html</b></span>. hehe...kalimat pertama yang dipublish itulah yang menjadi url. Semoga bermanfaat....</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com9tag:blogger.com,1999:blog-2215598109539068310.post-35938461786501042802010-05-22T03:57:00.001-07:002010-05-22T04:00:17.420-07:00Menampilkan Elemen Hanya Pada Halaman Depan Saja<div class="zine">S</div>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. <div class="fullpost">Saya yakin anda pasti pernah menjumpai template seperti itu. Untuk membuat tampilan seperti itu cukup mudah, yakni dengan menambahkan kode seperti ini<br />
<br />
<font color="red"><b:if cond='data:blog.pageType != &quot;item&quot;'></font><br />
<br />
dan<br />
<br />
<font color="red"></b:if></font><br />
<br />
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.<br />
<br />
<blockquote><font color="red"><b:if cond='data:blog.pageType != &quot;item&quot;'></font><br />
<font color="#0066cc"><div id='bottom'><br />
<b:section class='bottom' id='bottom' preferred='yes' showaddelement='yes'/><br />
.....<br />
.....<br />
</div><!--- end bottom ---></font><br />
<font color="red"></b:if></font></blockquote><br />
Cukup mudah kan? Semoga bermanfaat...<br />
</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com2tag:blogger.com,1999:blog-2215598109539068310.post-14020008765347398032010-05-21T05:29:00.001-07:002010-05-21T05:33:16.826-07:006 Template SEO friendly<img border="0" src="http://www.finalsense.com/services/blog_templates/image/eagle.jpg" align="left" hspace="3" vspace="3" width="180" height="150" alt="6 Template SEO Friendly"/>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 <b>template SEO friendly untuk blogspot</b>.<div class="fullpost">Seperti apa yang sudah dijelaskan oleh <a href="http://dailybloggr.com/2007/08/6-free-seo-friendly-blogger-templates/">Mani Khartik</a>, seorang blogger asal India yang sudah melakukan pengujian terhadap template tersebut. Berikut inilah 6 template yang dimaksud.<br />
<br />
1. <a href="http://www.finalsense.com/service/blog_templates/simple_blogger.htm">Simple blogger template</a> by Final Sense<br />
2. <a href="http://www.templatepanic.com/file_download/74">Blue Square</a> by Template Panic<br />
3. <a href="http://freetemplates.blogspot.com/2007/03/new-blogger-template-3-column-nyoba-780.html">Nyoba 780</a> by Free Blogger Template<br />
4. <a href="http://www.isnaini.com/blogger-templates/bussines-professional/">Bussines Profesional</a> by Isnaini<br />
5. <a href="http://www.finalsense.com/service/blog_templates/eagle_template_159.htm">Eagle</a> by Final Sense<br />
6. <a href="http://www.finalsense.com/service/blog_templates/yellow_simple.htm">Yellow Simple</a> by Final Sense<br />
<br />
Dari 6 template di atas kita harus bangga dengan karya anak Negeri yakni mas <a href="http://isnaini.com/">Isnaini</a>, yang telah membuat template dan masuk dalam daftar di atas (point 3 dan 4). Semoga bermanfaat...</div>Masdahttp://www.blogger.com/profile/15052768242964580517noreply@blogger.com1