tag:blogger.com,1999:blog-78800661004419375882024-03-13T15:50:54.239-06:00Go Blog ! ! !sedikit tentang ilmu ngeblog ..Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.comBlogger31125tag:blogger.com,1999:blog-7880066100441937588.post-75039052577838810422010-05-21T20:05:00.000-06:002010-05-21T20:05:57.884-06:00<a href="http://photos1.blogger.com/img/invalid.jpg"><img src="http://photos1.blogger.com/img/invalid.jpg" alt="" style="margin: 0px 10px 10px 0pt; clear: both; float: left;" border="0" /></a><div style='clear:both; text-align:LEFT'><a href='http://picasa.google.com/blogger/' target='ext'><img src='http://photos1.blogger.com/pbp.gif' alt='Posted by Picasa' style='border: 0px none ; padding: 0px; background: transparent none repeat scroll 0% 50%; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;' align='middle' border='0' /></a></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-48390649563098505322010-02-12T15:41:00.001-07:002010-02-12T15:46:24.916-07:00Cara Buat Daftar Isi Dengan Fasilitas Scroll Bar<div class="post-body"><br />
Ikuti ajJah langkah-langkahnya di bawah ini :<br />
<br />
1. Login ke Blogger.<br />
2. Buka menu Layout -> Page Elements<br />
3. Klik Add a Gadget -> HTML/Javascript.<br />
4. Masukkan kode dibawah ini kedalam kotak<br />
<br />
script daftar isi dengan tanda panah di sampingnya:<br />
<br />
<div style="border: 1px solid rgb(153, 153, 153); height: 200px; overflow: auto; padding: 10px;"><br />
&lt;!-- more --&gt;<br />
&lt;span style=&quot;font-family<style><br />
.list {<br />
background:<br />
url("http://lh4.ggpht.com/_15FopxVONSo/ShYuf4RqUuI/AAAAAAAACxI/jcump2GgfLg/iconbullet.gif")<br />
no-repeat left center;border-bottom:1px dotted<br />
#ddd;line-height:1.2em;padding:3px 0px 0px 20px;<br />
}<br />
</style><br />
<br />
<div style="background-color: white; border: 1px solid rgb(255, 255, 255); height: 180px; margin: 0px; overflow: auto; padding: 3px; width: 284px;"><br />
<br />
<br />
<div class="list"><br />
<br />
1. <a href="http://kokobotax.blogspot.com/2009/12/cara-membuat-menu-d-tree.html">Cara membuat menu D tree</a></div><br />
<br />
<br />
<div class="list"><br />
<br />
2. <a href="http://kokobotax.blogspot.com/2009/12/cara-membuat-menu-tab-view.html">cara membuat menu tab view</a></div><br />
<br />
<br />
<div class="list"><br />
<br />
3. <a href="http://kokobotax.blogspot.com/2009/12/cara-membuat-menu-horizontal.html">cara membuat menu horizontal</a></div><br />
<br />
<br />
</div><br />
<br />
<br />
</div><br />
<br />
script daftar isi dengan angka di sampingnya:<br />
<br />
<div style="border: 1px solid rgb(153, 153, 153); height: 200px; overflow: auto; padding: 10px;"><br />
<br />
<style><br />
.list {<br />
border-bottom:1px dotted #ddd;<br />
line-height:1.2em;<br />
padding:3px;<br />
}<br />
</style><br />
<br />
<div style="background-color: white; border: 1px solid rgb(255, 255, 255); height: 180px; margin: 0px; overflow: auto; padding: 3px; width: 380px;"><br />
<br />
<br />
<div class="list"><br />
<br />
1. <a href="http://alamat%20url%20yang%20ingin%20di%20tampilkan/">Cara Mnghilangkan Navbar</a></div><br />
<br />
<br />
<div class="list"><br />
<br />
2. <a href="http://alamat%20url%20yang%20ingin%20di%20tampilkan/">Panduan membuat blog di blogger</a></div><br />
<br />
<br />
</div><br />
<br />
<br />
</div>: &amp;quot;; font-size: 12;&quot;&gt;&lt;/span&gt;<br />
<br />
&lt;div class=&quot;alert&quot;&gt;<br />
&lt;span style=&quot;font-family: &amp;quot;; font-size: 12;&quot;&gt;<br />
&lt;/span&gt;<br />
&lt;script language=&quot;JavaScript&quot;&gt;<br />
var txt=&quot;&lt;span&gt;Welcome in ShareCenter.blogspot.com : Free Software, Tips 'n Tricks Computers, Free Tutorials, Free Articles and more..&lt;/span&gt;&quot;;var<br />
kecepatan=100;var segarkan=null;function bergerak() {<br />
document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);segarkan=setTimeout(&quot;bergerak()&quot;,kecepatan);}bergerak();<br />
&lt;/script&gt;&lt;span style=&quot;font-family: &amp;quot;; font-size: 12;&quot;&gt; &lt;/span&gt;&lt;/div&gt;<br />
&lt;span style=&quot;font-family: &amp;quot;; font-size: 12;&quot;&gt;&lt;/span&gt; &lt;/li&gt;<br />
<br />
Keterangan:<br />
<br />
380px merupakan lebar kotak, 180px merupakan tinggi kotak, #ffffff pada background-color merupakan warna background, dan #ffffff pada border merupakan warna garis pinggir. Silahkan diganti sesuai dengan template anda. </div></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-83864370394734957722010-02-12T15:39:00.003-07:002010-02-17T16:10:07.500-07:00Cara Menuliskan Script/Kode Dalam Postingan di BlogTerkadang dalam menuliskan sebuah postingan kita mendapati kode-kode HTML yang akan kita ikutkan kedalam postingan kita, nah..masalahnya, kode kode tersebut tidak dapat kita pasang dengan langsung menuliskan script aslinya tanpa kode-kode yang telah ditetapkan oleh Blogger.com, jadi semuanya memerlukan teknik tersendiri..sebagai contoh, kita tuliskan kode <br />
dengan langsung menuliskannya tanpa kode atau teknik tertentu, maka tulisan tersebut tidak akan muncul pada postingan kita, karena di anggap bahasa HTML di dalam blogger.<br />
<center><br />
<div style="text-align: left;">Bagaimanakan caranya? Untuk menuliskan kode tersebut menjadi sebuah kode yang bisa terlihat di dalam postingan, begini (hehe..kayak lagi menjelaskan kasus aja) jika kita akan menuliskan kode, maka yang seharusnya kita tulis adalah &lt;center&gt; . Jadi symbol < diganti dengan &lt; dan kode > diganti dengan &gt;</div><br />
<a name='more'></a> <br />
<br />
<br />
<div style="text-align: justify;">Wah repot juga yah kalo harus nulis kode banyak…tidak juga, ada banyak cara untuk menuliskan kode-kode atau script tersebut, diantaranya yaitu ;<br />
1. Pergunakan software-software yang telah ada, tentunya software yang berhubungan dengan web design, seperti Macromedia Dreamwaver, Microsoft Frontpage dan lain-lain.<br />
Tulis kode-kode yang banyak tersebut di area design, kemudian copy kode-kode tersbut dari area HTM code, kode-kode tersebutlah yang akan kita pasang ke dalam postingan kita.<br />
2. Dengan menggunakan situs encode seperti ini <a href="http://centricle.com/tools/html-entities" style="color: #cc0000; font-weight: bold;">http://centricle.com/tools/html-entities</a>, isikan atau copykan kode yang sudah kamu buat kedalam kotak yang telah disediakan, jikasudah tekan tombol "Encode", maka kamu akan mendapatkan script baru untuk diposting di blog kamu.</div><br />
<br />
<div style="text-align: justify;">Sebenarnya masih ada cara yang lain, tapi agak repot, jadi saya hanya menguraikan 2 saja yach..kasihan yang ga mau repot..hehe, gimana? gampang bukan? Selamat mencoba…</div><br />
Jangan lupa komentarnya yach..</center>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-30124466583166886762010-02-07T06:21:00.004-07:002010-02-12T15:49:09.875-07:00Mengganti Icon Blogger di Addres BarKetika membuka atau blog kita maka akan muncul di addres bar (tempat unuk menuliskan alamat URL) akan muncul icon atau gambar kecil. Dan jika blog kita ada di blogger.com atau blogspot maka icon itu berupa gambar dari blogger.com seperti d ibawah ini.<br />
<br />
http://blog-adul313.blogspot.com/<br />
<br />
Untuk kita-kita yang sedikit tak meninginkan icon blogger itu muncul di Addres Bar blog kita, bisa juga kita ganti icon blogger itu dengan yang lainnya. Misalkan denagn foto kita sendiri atau gambar-gambar yang begerak atau berformat gif. Tapi yang paling penting adalah ini sebuah icon jadi usahakan yang berukuran kecil saja, misal 24 x 24 pixel atau 32 x 32 pixel saja supaya loadingnya cepat.<br />
<br />
Cara Mengganti Icon Blogger di Addres Bar <br />
<a name='more'></a><br />
1. Login ke Blogger.<br />
2. Di halaman Dasbor, kita pilih Tata Letak.<br />
3. Kemudian pilih Edit HTML<br />
4. Beri tanda centang pada Expand Template Widget<br />
5. Cari kode berikut ini <br />
6. Taruh script berikut ini tepat diatas kode <br />
<link href="http://img401.imageshack.us/img401/7652/eqizqu6.gif" rel="SHORTCUT ICON"></link><br />
<br />
7. Lalu Simpan kalu sudah selesai.<br />
<br />
Berikut ini Icon-icon yang bisa kita gunakan:<br />
<br />
http://img100.imageshack.us/img100/4658/image12du2.gif<br />
http://img132.imageshack.us/img132/4733/image13lj1.gif<br />
http://img145.imageshack.us/img145/7793/image14zg9.gif<br />
http://img412.imageshack.us/img412/4403/image15jc7.gif<br />
http://img264.imageshack.us/img264/7575/image16kn8.gif<br />
http://img87.imageshack.us/img87/5862/image1an1.gif<br />
http://img110.imageshack.us/img110/6218/image2ie0.gif<br />
http://img98.imageshack.us/img98/9617/image3cr0.gif<br />
http://img134.imageshack.us/img134/633/image4hx4.gif<br />
http://img139.imageshack.us/img139/83/image5oa7.gif<br />
http://img509.imageshack.us/img509/6449/image6fu0.gif<br />
http://img527.imageshack.us/img527/6543/image7go9.gif<br />
http://img507.imageshack.us/img507/5774/image8wn8.gifAbdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-50040027919252496282010-02-03T08:43:00.003-07:002010-02-03T08:43:20.068-07:00Cara Menghilangkan Tanggal Posting</meta><meta content="Word.Document" name="ProgId"></meta><meta content="Microsoft Word 11" name="Generator"></meta><meta content="Microsoft Word 11" name="Originator"></meta><link href="file:///C:%5CDOCUME%7E1%5CUser%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml" rel="File-List"></link><style>
<!--
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
{mso-style-parent:"";
margin:0cm;
margin-bottom:.0001pt;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Times New Roman";
mso-fareast-font-family:"Times New Roman";}
@page Section1
{size:595.3pt 841.9pt;
margin:3.0cm 102.05pt 130.4pt 121.9pt;
mso-header-margin:35.45pt;
mso-footer-margin:35.45pt;
mso-paper-source:0;}
div.Section1
{page:Section1;}
-->
</style> <br />
<div class="MsoNormal"><br />
</div><div class="MsoNormal">menghilangkan tanggal posting blogger, mau tau caranya? pertama masuk halaman Edit HTML kemudian cari h2.date-header { jika sudah ketemu tambahkan visibility: hidden; diantara kode tersebut. lihat contoh kodenya dibawah:</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">h2.date-header {</div><div class="MsoNormal">margin:.3em 0 0;</div><div class="MsoNormal">padding:0;</div><div class="MsoNormal">font-size:80%;</div><div class="MsoNormal">color:#777;</div><div class="MsoNormal">height: 0px;</div><div class="MsoNormal">visibility: hidden;</div><div class="MsoNormal">}</div><a name='more'></a><br />
Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-54964947839550596872010-02-02T21:23:00.002-07:002010-02-02T21:23:17.160-07:00Cara Membuat Album Foto Pada Blogspot Memakai Gadget<div class="entry"><style>
.fullpost{display:inline;}
</style> <div style="text-align: justify;"><span style="font-weight: bold;"><span class="awal">T</span>ips cara membuat album foto pada blogspot</span> ini sebenarnya sudah pernah <a alt="kumpulan tutorial web, tips dan trik blog, serta download free blogger template" href="http://tutorial-website.blogspot.com/">saya</a> berikan beberapa waktu yang lalu <a alt="membuat album foto pada blogspot" href="http://tutorial-website.blogspot.com/2009/02/membuat-slide-album-foto-di-blog.html">disini</a>. Hanya saja posting yang pertama tersebut membahas bagaimana <span style="font-weight: bold;">cara membuat slideshow album foto pada blogspot</span> dengan memanfaatkan situs <span style="font-style: italic;">gallery foto </span>yaitu <a href="http://www.slide.com/"><span style="font-weight: bold;">www.slide.com</span></a>. Untuk mengetahui <span style="font-weight: bold;">trik</span> <span style="font-weight: bold;">pembuatan album foto di blog</span> tersebut, pembaca boleh membukanya kembali <a alt="membuat album foto pada blogspot" href="http://tutorial-website.blogspot.com/2009/02/membuat-slide-album-foto-di-blog.html">disini</a>. Blogspot sebenarnya menyediakan <span style="font-style: italic;">gadget</span> yang berfungsi untuk <span style="font-weight: bold;">membuat slide album foto pada blog</span> kita. <span class="fullpost">Namun, menurut <a alt="kumpulan tutorial web, tips dan trik blog, serta download free blogger template" href="http://tutorial-website.blogspot.com/">saya</a> <span style="font-style: italic;">gadget</span> ini lebih sederhana jika dibandingkan dengan <span style="font-weight: bold;">slideshow</span> yang kita buat dari <span style="font-style: italic; font-weight: bold;">www.slide.com</span>, sebab tampilan <span style="font-weight: bold;">slide foto</span> yang kita dapatkan dari situs <span style="font-style: italic;">www.slide.com</span> tersebut bisa kita<span style="font-style: italic;"> customize</span> sesuai kehendak kita mulai dari<span style="font-weight: bold;"> tipe slide, ukuran, animasi</span>, dan lain-lain. Meskipun demikian, tidak ada salahnya jika kita mencoba <span style="font-style: italic;">gadget</span> <span style="font-weight: bold;">slide album foto blogspot</span> ini, sebab kesederhanaan biasanya indentik dengan kemudahan dalam pengaplikasiannya. Berikut <span style="font-weight: bold;">langkah-langkah menambah album foto pada blogger</span>:<a name='more'></a><br />
<ol style="text-align: justify;"><li>Login pada akun <span style="font-weight: bold;">Blogspot</span> Anda</li>
<li>Klik link menu <span style="font-weight: bold;">Tata Letak</span> pada halaman dasbor. Pastikan Anda berada pada sub tab menu <span style="font-weight: bold;">Elemen Halaman</span></li>
<li>Klik link <span style="font-weight: bold;">Tambah Gadget</span> pada bagian dimana pembaca ingin <span style="font-weight: bold;">memasang slide album foto</span> tersebut</li>
<li>Akan muncul window <span style="font-weight: bold;">Tambahkan Gadget</span> yang berisi daftar <span style="font-style: italic;">gadget</span> yang bisa kita tambah. Silahkan cari dan pilih <span style="font-style: italic;">gadget</span> <span style="font-weight: bold;">Tampilan Slide</span><a href="http://2.bp.blogspot.com/_OPhk2sreP4w/Sc-G31-xAUI/AAAAAAAAAMM/njkNtb0PJgQ/s1600-h/New+Picture+%2836%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318617978889109826" src="http://2.bp.blogspot.com/_OPhk2sreP4w/Sc-G31-xAUI/AAAAAAAAAMM/njkNtb0PJgQ/s400/New+Picture+%2836%29.bmp" style="cursor: pointer; height: 81px; margin: 0pt 0pt 10px 10px; width: 400px;" /></a></li>
<li>Berikut pengaturannya:<br />
<span style="font-weight: bold;">Judul : </span><br />
Isi dengan nama <span style="font-weight: bold;">slide foto</span> Anda.<br />
<span style="font-weight: bold;">Sumber : </span><br />
<ul><li><span style="font-weight: bold;">Album Web Picasa.</span> Album ini merupakan <span style="font-weight: bold;">album gambar </span>yang telah Anda masukkan pada pada blogspot pembaca misalnya ketika menulis posting. Silahkan klik <a href="http://picasaweb.google.com/">http://picasaweb.google.com</a> untuk melihat album Anda.</li>
<li><span style="font-weight: bold;">Flickr</span>. Flickr merupakan situs yang menyediakan tempat <span style="font-weight: bold;">menyimpan foto dan video</span>. Untuk mendapatkan layanan ini, silahkan daftar atau login menggunakan Yahoo ID Anda di <a href="http://www.flickr.com/">www.flickr.com</a>.</li>
<li><span style="font-weight: bold;">Photobucket</span>. Ini hampir sama dengan <span style="font-weight: bold;">flickr</span> dimana kita bisa menyimpan <span style="font-weight: bold;">foto</span> dan <span style="font-weight: bold;">video</span> secara online pada situs tersebut. Untuk mendapatkan layanan ini silahkan register di <a href="http://www.photobucket.com/">www.photobucket.com</a></li>
<li><span style="font-weight: bold;">Lainnya.</span> Sumber selain yang 3 diatas.</li>
</ul><span style="font-weight: bold;">Pilihan :</span><br />
Memilih apakah berdasarkan kata kunci atau berdasarkan album<br />
<span style="font-weight: bold;">Buka link di jendela baru:</span><br />
Centang jika ingin foto dibuka pada jendela baru ketika diklik</li>
<li>Sebagai contoh kita <span style="font-weight: bold;">menambah slide foto</span> menggunakan <span style="font-weight: bold;">Album Web Picasa</span><br />
Judul: beri judul slide album<br />
Sumber : pilih "Album Web Picasa".<br />
Pilihan : pilih "Album"<br />
Nama Pengguna : masukkan <a alt="membuat email Google" href="http://tutorial-website.blogspot.com/2009/01/membuat-account-google.html"><span style="font-weight: bold;">ID akun Google</span></a> pembaca. Misalkan akun Google pembaca adalah <span style="font-weight: bold;">kampanye@gmail.com</span>, maka isikan <span style="font-weight: bold;">"kampanye"</span><br />
Album : pilih album yang terdapat pada Album Web Picasa Anda. Perlu diperhatikan bahwa album yang muncul pada list tersebut adalah album yang diperuntukkan untuk <span style="font-weight: bold;">"Public"</span>. Untuk melakukan pengaturan tersebut, silahkan masuk terlebih dahulu pada <a href="http://picasaweb.google.com/">http://picasaweb.google.com</a> (masuk menggunakan <span style="font-weight: bold;">akun Google</span> Anda). Klik tab <span style="font-weight: bold;">"My Photos"</span>, setelah itu klik album yang ingin Anda atur parameternya.<br />
<a href="http://1.bp.blogspot.com/_OPhk2sreP4w/Sc-Ivj21NUI/AAAAAAAAAMU/NIaTtS1lL80/s1600-h/New+Picture+%2838%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318620035608294722" src="http://1.bp.blogspot.com/_OPhk2sreP4w/Sc-Ivj21NUI/AAAAAAAAAMU/NIaTtS1lL80/s400/New+Picture+%2838%29.bmp" style="cursor: pointer; display: block; height: 242px; margin: 0px auto 10px; text-align: center; width: 329px;" /></a>Klik menu "<span style="font-weight: bold;">Edit"</span> kemudian pilih sub menu <span style="font-weight: bold;">"Album Properties"</span> sehingga akan muncul jendela <span style="font-weight: bold;">"Edit album information"</span>.<br />
<a href="http://1.bp.blogspot.com/_OPhk2sreP4w/Sc-JJiM9IbI/AAAAAAAAAMc/oXA7SvMKGeY/s1600-h/New+Picture+%2839%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318620481840816562" src="http://1.bp.blogspot.com/_OPhk2sreP4w/Sc-JJiM9IbI/AAAAAAAAAMc/oXA7SvMKGeY/s400/New+Picture+%2839%29.bmp" style="cursor: pointer; display: block; height: 150px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>Lihat dibagian paling bawah, akan ada pilihan <span style="font-weight: bold;">"Visibility for this album"</span>. Silahkan pilih <span style="font-weight: bold;">"Public"</span>. Kemudian klik tombol <span style="font-weight: bold;">Save changes</span><a href="http://4.bp.blogspot.com/_OPhk2sreP4w/Sc-JmiIsecI/AAAAAAAAAMk/I0qyg0SNKeg/s1600-h/New+Picture+%2840%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318620980039154114" src="http://4.bp.blogspot.com/_OPhk2sreP4w/Sc-JmiIsecI/AAAAAAAAAMk/I0qyg0SNKeg/s400/New+Picture+%2840%29.bmp" style="cursor: pointer; display: block; height: 94px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a></li>
<li>Pratinjau album akan terlihat pada jendela tambah gadget tersebut.<br />
<a href="http://4.bp.blogspot.com/_OPhk2sreP4w/Sc-KvAy2oMI/AAAAAAAAAMs/Ojq741s8lcU/s1600-h/New+Picture+%2841%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318622225219625154" src="http://4.bp.blogspot.com/_OPhk2sreP4w/Sc-KvAy2oMI/AAAAAAAAAMs/Ojq741s8lcU/s400/New+Picture+%2841%29.bmp" style="cursor: pointer; display: block; height: 250px; margin: 0px auto 10px; text-align: center; width: 200px;" /></a></li>
<li>Klik tombol <span style="font-weight: bold;">SIMPAN</span></li>
</ol>Untuk melihat contoh hasilnya bisa pembaca lihat <a href="http://dropdownmenujs.blogspot.com/">disini</a> (tapi maaf, gambarnya hanya 2 dan sama pula, jadinya gak kelihatan deh pergantian slidenya)<br />
<blockquote>Selamat mencoba dan jangan lupa meninggalkan komentar ya</blockquote></span></div><div align="right"><script type="text/javascript">
var addthis_pub="nestoriko";
</script> <a href="" id="http://tutorial-website.blogspot.com/2009/03/cara-membuat-album-foto-pada-blogspot.html" name="Cara Membuat Album Foto Pada Blogspot Memakai Gadget" onclick="return addthis_sendto()" onmouseout="addthis_close()" onmouseover="return addthis_open(this, "", this.id, this.name);"><img alt="Bookmark and Share" height="16" src="http://s7.addthis.com/static/btn/lg-share-en.gif" style="border: 0pt none;" width="125" /></a></div></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-80852867350871700882010-02-02T21:21:00.000-07:002010-02-02T21:21:13.540-07:00Membuat Drop Down Menu Flash Menggunakan Flash Menu Factory<div class="entry"><style>
.fullpost{display:inline;}
</style> <div style="text-align: justify;"><a href="http://1.bp.blogspot.com/_OPhk2sreP4w/SgkmlDYpuAI/AAAAAAAAAUg/0iqLacmOexM/s1600-h/menu-flash.jpg" imageanchor="1" style="float: right; margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_OPhk2sreP4w/SgkmlDYpuAI/AAAAAAAAAUg/0iqLacmOexM/s320/menu-flash.jpg" /></a><span class="awal">A</span>da banyak cara <b>membuat tombol menu flash</b> untuk <i>website </i>kita. Kita bisa menggunakan <b><i>Macromedia Flash</i></b> atau memanfaatkan tombol yang sudah disediakan oleh <a href="http://tutorial-website.blogspot.com/2009/03/membuat-web-menggunakan-macromedia.html"><b>Macromedia Dreamweaver</b></a>. Mengenai <b>pembuatan menu flash menggunakan Dreamweaver</b> telah kita bahas <a href="http://tutorial-website.blogspot.com/2009/05/cara-membuat-menu-flash-menggunakan.html">di sini</a>. Sedangkan <b>cara memasukkan menu flash pada blog</b> juga sudah kita pelajari <a href="http://tutorial-website.blogspot.com/2009/05/cara-membuat-menu-flash-menggunakan_08.html">di sini</a>. Cara lain untuk mendapatkan <b>desain menu flash</b> yang sangat unik dan bagus selain cara di atas adalah dengan memanfaatkan sebuah <i>software </i>pendesain khusus <b><i>flash menu</i></b> untuk website.<i> </i><br />
<span class="fullpost"><br />
<i>Software</i> tersebut bernama <b>Flash Menu Factory</b>. Sesuai namanya, <i>software</i> ini berisi <i>directory</i> tombol-<b>tombol menu flash</b> yang siap kita gunakan. Kita cukup mengatur menu-menu yang akan kita buat seperti mengatur tulisan menu baik jenis <i>font</i>, ukuran <i>font</i>, warna dan sebagainya, mengatur <i>link</i> menu, mengatur jenis<b> tombol flash</b> yang kita gunakan, dan lain-lain. Artinya, dengan beberapa klik saja, kita sudah bisa mendapatkan <b>desain tombol menu flash </b>yang siap pakai untuk digunakan pada website kita. <i>Software </i><b>Flash Menu Factory</b> ini juga menyediakan tipe<b> menu horizontal</b> dan <b>vertikal</b>. Yang lebih menarik lagi <a name='more'></a>adalah kita bisa mendapatkan <b>menu dropdown </b>dari <i>software</i> ini.<br />
<br />
Menurut saya <i>software</i> <b>Flash Menu Factory</b> ini menjawab kebutuhan kita akan menu yang animatif, unik dan cantik namun mungkin tidak diimbangi kemampuan kita dalam <b>mendesain flash menu</b> menggunakan <b>Macromedia Flash</b> dan juga desain <b>tombol menu flash</b> yang masih sangat sedikit pada <a href="http://tutorial-website.blogspot.com/2009/05/cara-membuat-menu-flash-menggunakan.html">Dreamweaver</a>. <br />
<br />
Untuk mendapatkan software Flash Menu Factory ini, pembaca bisa men-<i>download</i>-nya dari situs resminya di <b>www.flashmenufactory.com. </b>Meskipun <i>software</i> ini tidak disediakan secara gratis, kita masih bisa mendownload versi <b>Demo-</b>nya.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_OPhk2sreP4w/SgkjCIl_-6I/AAAAAAAAAUY/40jOfv3DYis/s1600-h/flash-menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_OPhk2sreP4w/SgkjCIl_-6I/AAAAAAAAAUY/40jOfv3DYis/s400/flash-menu.jpg" /></a></div><ul><li>Bagian 1 : <i>tools </i>menu pada <i>Flash Menu Factory</i></li>
<li>Bagian 2 : pembuatan struktur menu <i>flash</i></li>
<li>Bagian 3 : pengaturan <i>properties </i>item menu <i>flash</i> seperti teks menu dan <i>link</i></li>
<li>Bagian 4 : pengaturan <i>font </i>tombol menu <i>flash</i></li>
<li>Bagian 5 : pengaturan <i>general </i>menu<i> flash </i>seperti ukuran <i>file flash</i></li>
<li>Bagian 6 : pilihan jenis desain menu <i>flash</i></li>
<li>Bagian 7 : <i>preview </i>menu <i>flash </i>yang kita buat<br />
</li>
</ul>Untuk mendapatkan <i>file flash </i>dari <i>software </i>ini, klik tombol menu <b>Export </b>yang ada di bagian 1 seperti pada gambar di atas, kemudian <i>export </i>dalam bentuk <b>.swf</b>. (misalnya: <i><b>menu.swf</b></i>)<br />
<br />
Apakah teman-teman mempunyai cara lain untuk mendesain <i>flash</i> menu? Silahkan di-<i>share</i>-kan di sini yach...:D</span></div><div align="right"><script type="text/javascript">
var addthis_pub="nestoriko";
</script> <a href="" id="http://tutorial-website.blogspot.com/2009/05/membuat-drop-down-menu-flash.html" name="Membuat Drop Down Menu Flash Menggunakan Flash Menu Factory" onclick="return addthis_sendto()" onmouseout="addthis_close()" onmouseover="return addthis_open(this, "", this.id, this.name);"><img alt="Bookmark and Share" height="16" src="http://s7.addthis.com/static/btn/lg-share-en.gif" style="border: 0pt none;" width="125" /></a></div></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-60218244241591209232010-02-02T21:20:00.000-07:002010-02-02T21:20:04.907-07:00Cara Membuat Menu Drop Down Dengan CSSKali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web. Seperti yang pernah saya katakan bahwa banyak cara mendesain sebuah menu pada web termasuk pada sebuah blog. Jika postingan sebelumnya membahas pembuatan menu drop down horizontal dengan menggunakan JavaScript, maka kali ini saya akan memberikan tutorial web tentang bagaimana membuat menu drop down dengan CSS.<br />
Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus. Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat. Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan. Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut. Berikut cara membuat sebuah menu drop down:<br />
<a name='more'></a><br />
<br />
Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.<br />
<br />
1. Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah <br />
<ul></ul>sebagai level utama dan <br />
<li></li><br />
sebagai sub level. Saya berikan sebuah contoh struktur HTML dari menu drop down:<br />
<ul><li><a href="http://www.blogger.com/URL%201">MENU 1</a></li>
<li><a href="http://www.blogger.com/URL%202">MENU 2</a></li>
<li><a href="http://www.blogger.com/URL%203">MENU 3</a></li>
</ul>Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <br />
<ul></ul>, artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah "Menu 1", "Menu 2", dan "Menu 3" yang masing-masing dibungkus oleh tag <br />
<li></li><br />
.<br />
2. Struktur tersebut akan menjadi sebuah menu horizontal biasa, sama seperti tutorial menu horizontal yang pernah saya buat pada postingan yang sebelumnya. Silahkan baca disini. Nah, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu). Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya?he3x. Strukturnya akan seperti ini:<br />
<ul><li><a href="http://www.blogger.com/URL%201">MENU 1</a><br />
<br />
<ul><li><a href="http://www.blogger.com/URL%20sub%201">Sub menu 1</a></li>
<li><a href="http://www.blogger.com/URL%20sub%202">Sub menu 2</a></li>
<li><a href="http://www.blogger.com/URL%20sub%203">Sub menu 3</a></li>
</ul></li>
<li><a href="http://www.blogger.com/URL%202">MENU 2</a></li>
<li><a href="http://www.blogger.com/URL%203">MENU 3</a></li>
</ul>Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag tidak lagi hanya membungkus struktur "Menu 1", tetapi sudah ikut membungkus sub menu dari "Menu 1" juga (perhatikan end tag yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:<br />
3. Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Postingan yang lalu hanya membahas pembuatan menu horizontal yang biasa, sehingga pembuatan CSS kali ini juga akan sedikit berbeda. Untuk CSS menu drop down tersebut, kita buat seperti ini:<br />
<br />
<br />
* Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:<br />
#menuku ul {<br />
list-style: none;<br />
}<br />
#menuku ul --> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama "menuku". Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.<br />
list-style: none --> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).<br />
padding:0 dan margin:0 --> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut.<br />
* Untuk membuat menu-menu tersebut tampil secara horizontal:<br />
#menuku li {<br />
float: left;<br />
}<br />
#menuku li --> artinya hampir sama dengan #menukuk ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).<br />
float: left --> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri<br />
* Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.<br />
#menuku ul ul {<br />
visibility:hidden;<br />
width:149px;<br />
}<br />
#menuku ul ul --> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.<br />
visibility:hidden --> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)<br />
width:149px --> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px.<br />
* Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:<br />
#menuku ul li:hover ul,<br />
#menuku ul a:hover ul{<br />
visibility:visible;<br />
}<br />
CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.<br />
* Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik<br />
#menuku li a {<br />
background-color:#000000;<br />
height: 2em;<br />
width: 149px;<br />
display: block;<br />
border: 0.1em solid #dcdce9;<br />
color: #ffffff;<br />
text-decoration: none;<br />
text-align: center;<br />
}<br />
Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.<br />
background-color:#000000 -->warna backgroundnya adalah #000000<br />
height: 2em --> tinggi dari menu tersebut sebesar 2em<br />
width: 149px --> lebar menu sebesar 149px<br />
display: block --> menu tersebut akan tampil dalam bentuk block<br />
border: 0.1em solid #999999 --> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999. Untuk mengetahui kode warna CSS yang lain silahkan buka disini.<br />
color: #FFFFFF --> tulisan menu akan berwarna #FFFFFF<br />
text-decoration: none --> link menu tidak akan mempunyai garis bawah<br />
text-align: center --> letak tulisan menu akan berada ditengah-tengah<br />
<br />
<br />
4. Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut "menuku" akan dipasang. Ganti struktur pada langkah 2 menjadi seperi berikut:<br />
<div id="menuku"><ul><li><a href="http://www.blogger.com/URL%201">MENU 1</a><br />
<br />
<ul><li><a href="http://www.blogger.com/URL%20sub%201">Sub menu 1</a></li>
<li><a href="http://www.blogger.com/URL%20sub%202">Sub menu 2</a></li>
<li><a href="http://www.blogger.com/URL%20sub%203">Sub menu 3</a></li>
</ul></li>
<li><a href="http://www.blogger.com/URL%202">MENU 2</a></li>
<li><a href="http://www.blogger.com/URL%203">MENU 3</a></li>
</ul></div>5. Hasilnya akan seperti ini:<br />
<br />
Selanjutnya kita akan mempejalari tutorial memasang menu drop down dengan CSS pada sebuah blog. So, jangan kemana-mana ya. Datang lagi dan beri komentar.. :D<br />
Bookmark and ShareAbdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-33645464755258387162010-02-02T21:17:00.001-07:002010-02-02T21:17:58.267-07:00Cara Memasukkan Flash ke dalam Blog<div class="entry"><style>
.fullpost{display:inline;}
</style> <br />
<div style="text-align: justify;"><a href="http://1.bp.blogspot.com/_OPhk2sreP4w/SgkzOYqksqI/AAAAAAAAAUo/toXzH6CXEmA/s1600-h/flash_logo.jpg" imageanchor="1" style="float: right; margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_OPhk2sreP4w/SgkzOYqksqI/AAAAAAAAAUo/toXzH6CXEmA/s320/flash_logo.jpg" /></a><span class="awal">C</span>ara <b>memasukkan <i>flash </i>ke dalam blog </b>sebenarnya sudah kita contohkan melalui beberapa <b>tutorial memasukkan menu <i>flash </i>ke dalam blog</b>. Namun, postingan ini sengaja dibuat sebagai panduan <i>general </i>bagaimana <b>memasukkan<i> flash</i> ke dalam blog</b> atau <i>web</i> lainnya. Agar <i>file flash </i>bisa ditampilkan pada halaman <i>web</i>, perlu <b>struktur <a href="http://tutorial-website.blogspot.com/search/label/HTML%20Tutorials">HTML</a></b> yang berfungsi untuk menjalankan perintah agar <b><i>file flash</i></b> tersebut bisa terlihat pada <i>browser</i>. Salah satu cara untuk mengetahui <b>struktur HTML</b> itu bisa dengan memanfaatkan <a href="http://tutorial-website.blogspot.com/2009/03/membuat-web-menggunakan-macromedia.html">Dreamweaver</a>, dimana diawal kita memasukkan <i>file flash</i> melalui layar <i>design</i>, baru kemudian melihat <i>source </i>kode/stuktur HTML-nya melalui layar <i>code</i>. Berikut <b>struktur HTML</b> untuk menampilkan <i>flash</i> pada halaman <i>web</i>:<span class="fullpost"></span><br />
<a name='more'></a><span class="fullpost"><br />
<code><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0">width="147" height="34"</span>> <param name="movie" value="<span style="color: red;">URL FILE FLASH.SWF</span>" /> <param name="quality" value="high" /> <embed src="<span style="color: red;">URL FILE FLASH.SWF</span>" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" <span style="color: blue;">width="147" height="34"</span> ></embed> </object></code><br />
</span><br />
<ul><span class="fullpost">
<li>Ganti tulisan "<b><span style="color: red;">URL FILE FLASH.SWF</span></b>" yang berwarna merah dengan <a href="http://tutorial-website.blogspot.com/2009/01/hosting-dan-domain.html">URL</a> dari <i>file flash </i>yang ingin Anda masukkan ke dalam halaman <i>web</i>.<br />
</li>
<li>Tulisan yang berwarna <b>biru</b> pada <b>stuktur HTML</b> tersebut merupakan kode untuk mengatur ukuran tampilan dari <i>file flash</i> pada halaman web tersebut</li>
</span></ul><span class="fullpost"><b>Struktur HTML </b>tersebutlah yang Anda letakkan pada bagian dimana <i>flash</i> tersebut ingin dimunculkan pada halaman <i>web</i>.<br />
Sebagai contoh kita akan memasukkan <i>file flash</i> menu yang kita dapatkan dari <i>software</i> <i><b>Flash Menu Factory</b></i>. Adapaun postingan <b>cara mendapatkan menu <i>flash</i></b> menggunakan <i>software Flash Menu Factory</i> tersebut bisa pembaca lihat <a href="http://tutorial-website.blogspot.com/2009/05/membuat-drop-down-menu-flash.html">di sini</a>. Berikut <b>langkah-langkah</b>nya:<br />
</span><br />
<ol><span class="fullpost">
<li>Setelah mendesain menu menggunakan <i>software Flash Menu Factory </i>tersebut selesai, jangan lupa mengekspor hasil desain ke dalam bentuk <b>.swf</b>, karena ekstensi <i>flash</i> yang bisa dimasukkan ke dalam halaman web adalah berbentuk <b>.swf</b>. Sebagai contoh kita ekspor dengan nama "<b>menu.swf</b>".</li>
<li>Simpanlah <i>file flash</i> tersebut ke dalam<i> internet</i> dengan cara menghostingkannya ke <i>web serve</i>r.</li>
<li>Sekarang buka <i><b>www</b><b>.blogger.com</b></i>, kemudian <i><b>login</b></i> untuk masuk ke dalam akun <b>blogspot</b> Anda.</li>
<li>Klik link <b>Tata Letak</b> kemudian pilih sub tab menu <b>Edit HTML</b> </li>
<li>Silahkan <i>backup</i> terlebih dahulu <i>template</i> pembaca agar jika terjadi kesalahan bisa mengembalikannya kembali. Untuk melakukannya silahkan klik <i>link</i> <b>Download Template Lengkap</b> pada bagian <b>Backup/Restore Template</b>.</li>
<li>Beri centang pada kotak kecil disamping tulisan <b>Expand Template Widget</b>.</li>
<li>Sebagai contoh, kita ingin menampilkan <b><i>flash</i> menu</b> tersebut di bawah <i>header blog</i>. Maka, carilah kode berikut pada template pembaca tersebut:<br />
<code><b:includable id="description"><br />
</b:includable></code><br />
<div class="descriptionwrapper"><br />
<div class="description"><data:description></data:description></div><br />
</div><br />
<br />
<br />
<br />
</li>
</span></ol><span class="fullpost"></span></div><br />
<li><i>Copy paste</i> stuktur HTML untuk memasukkan flash ke dalam halaman web yang telah diberikan di atas tepat di bawah kode yang Anda temukan pada langkah 7. Jangan lupa terlebih dahulu mengganti "<b>URL FILE FLASH.SWF</b>" yang berwarna merah dengan <b>URL </b>dari <i>file </i>menu <i>flash</i> yang Anda<i> <a href="http://tutorial-website.blogspot.com/2009/01/hosting-dan-domain.html">hosting</a>-</i>kan pada langkah 2. Sesuaikan juga ukuran tampilan dari menu <i>flash</i> yang akan Anda tampilkan pada halaman blog (tulisan warna biru).<br />
</li><br />
<br />
<br />
<li>Klik tombol <b>SIMPAN TEMPLATE</b></li><br />
<br />
Silahkan klik <a href="http://flashmenufactory.blogspot.com/">di sini</a> untuk melihat hasilnya.</div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-16050478016524010722010-02-02T21:16:00.003-07:002010-02-02T21:16:52.803-07:00Akhirnya Blogspot Punya Menu "Read More" Sendiri<div class="entry"><style>
.fullpost{display:inline;}
</style> <div align="justify"><div class="awal">Sebenarnya sudah cukup telat nih beritanya, soalnya saya baru bisa bermain blog lagi baru-baru ini. Saya disibukkan dengan jadwal kerja praktek dan membuat laporannya. Maaf ya rekan-rekan. Kali ini saya ingin menyampaikan berita yang mungkin juga baru pembaca ketahui. Sekarang pihak <b>Blogspot</b> sudah memberikan fasilitas <b>membuat "<a href="http://tutorial-website.blogspot.com/2009/06/cara-membuat-read-more-pada-blogspot.html"><i>Read More</i></a>"</b> yang bisa kita gunakan pada <b>blog</b> kita. Sepertinya ini menjawab keinginan para <b>blogger</b> yang selama ini harus "bersusah payah" agar blog miliknya tampil lebih sempurna. Selama ini kita memang harus mengotak-atik kode<a href="http://tutorial-website.blogspot.com/2009/02/mengganti-template-blogspot.html"><b> template blogspot</b></a> agar bisa membuat sendiri <b>"read more"</b> tersebut.</div>Pada bagian pembuatan posting baru, telah ditambahkan sebuah menu pada <i>tool box </i>yang diberi nama <i><b>Jump Break</b></i>. Menu inilah yang berfungsi untuk membuat read more pada posting kita sehingga membagi tulisan menjadi 2 bagian.<br />
<div class="fullpost"><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_OPhk2sreP4w/SrhtiqkNvKI/AAAAAAAAAdU/WMKbAZB08gc/s1600-h/read+more.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OPhk2sreP4w/SrhtiqkNvKI/AAAAAAAAAdU/WMKbAZB08gc/s320/read+more.jpg" /></a><br />
</div><br />
Bagian yang ditunjukkan oleh lingkaran hijau tersebut merupakan menu "<i><b>Jump Break</b></i>" untuk<b> membuat Read More pada posting</b>. Setelah mengklik menu tersebut, akan muncul garis pembatas pada bagian dimana Anda ingin membuat "<i>read more"</i>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_OPhk2sreP4w/Srhu0Ah7q1I/AAAAAAAAAdc/kmRL8SObiJI/s1600-h/read+more1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OPhk2sreP4w/Srhu0Ah7q1I/AAAAAAAAAdc/kmRL8SObiJI/s400/read+more1.jpg" /></a><br />
</div>Atau Anda juga dapat membuatnya dengan mengetikkan langsung kode <i>Jump Break</i>, yaitu <b style="color: red;"><a name='more'></a> </b>pada bagian tab Edit HTML seperti yang terlihat pada gambar di bawah:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_OPhk2sreP4w/SrhwAlRTtPI/AAAAAAAAAdk/i5taXt9FjU8/s1600-h/jump+break.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_OPhk2sreP4w/SrhwAlRTtPI/AAAAAAAAAdk/i5taXt9FjU8/s320/jump+break.jpg" /></a><br />
</div>Namun, perlu diketahui bahwa fasilitas ini masih dalam tahap uji coba sehingga hanya bisa digunakan pada <i>Blogger in Draft</i>. Jadi Anda harus masuk terlebih dahulu ke halaman <b><a href="http://draft.blogger.com/">http://draft.blogger.com</a>.</b><br />
</div></div><div align="right"><script type="text/javascript">
var addthis_pub="nestoriko";
</script> <a href="" id="http://tutorial-website.blogspot.com/2009/09/akhirnya-blogspot-punya-menu-read-more.html" name="Akhirnya Blogspot Punya Menu "Read More" Sendiri" onclick="return addthis_sendto()" onmouseout="addthis_close()" onmouseover="return addthis_open(this, "", this.id, this.name);"><img alt="Bookmark and Share" height="16" src="http://s7.addthis.com/static/btn/lg-share-en.gif" style="border: 0pt none;" width="125" /></a></div></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-41535012527003239272010-02-02T21:16:00.000-07:002010-02-02T21:16:01.309-07:00Membuat Avatar Komentar Pada Blogger<div class="entry"><style>
.fullpost{display:inline;}
</style> <div align="justify"><div class="awal">Kabar gembira nih bagi para pecinta<b> Blogspot</b>. Dalam merayakan ulang tahun <b>Blogger (Blogspot)</b> yang kesepuluh, Blogspot telah meluncurkan lagi fitur barunya, yaitu menambah <b>fitur avatar pada komentar </b>yang ditulis pada sebuah posting. Avatar itu merupakan sebuah gambar kecil yang mewakili atu menggambarkan pemiliknya (pemilik avatar itu sendiri). Dengan adanya avatar tersebut, kotak komentar pada blog kita tentu akan semakin indah . Sedangkan bagi penulis komentar, menampilkan avatar tentu kesukaan tersendiri karena bisa menunjukkan gambar milik kita pada blog orang. Tentu bisa juga jadi ajang pamer tampang melalui avatar. He3x.</div><div class="fullpost"><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_OPhk2sreP4w/SrufpEZa3bI/AAAAAAAAAds/GTRpXh75TZI/s1600-h/photosincomments.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_OPhk2sreP4w/SrufpEZa3bI/AAAAAAAAAds/GTRpXh75TZI/s320/photosincomments.jpg" /></a><a name='more'></a></div>Namun, masih ada kekurangan dari fitur baru ini, yaitu avatar hanya muncul jika kita berkomentar menggunakan <a href="http://tutorial-website.blogspot.com/2009/01/membuat-account-google.html">akun Google</a>, dan yang ditampilkan pun merupakan foto profil Blogger milik kita. Selain itu, avatar terlihat jika kita dalam keadaan login pada akun Google. Bagaimana jika Anda sendiri tidak memiliki foto profil Blogger? Anda bisa menambahkan langsung foto avatar Anda ketika mengisi komentar tersebut. Pada kotak komentar telah disediakan kolom untuk <i>upload </i>foto yang akan Anda jadikan avatar komentar.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_OPhk2sreP4w/SruocP1_nEI/AAAAAAAAAd0/txyNxoABbaQ/s1600-h/addimage.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_OPhk2sreP4w/SruocP1_nEI/AAAAAAAAAd0/txyNxoABbaQ/s320/addimage.jpg" /></a></div><br />
Untuk mengkatifkan fitur ini, silahkan lakukan langkah-langkah berikut:<br />
<ol><li> Masuk ke akun Blogspot Anda.</li>
<li>Pada dasbor, klik link menu <b>Pengaturan, </b>kemudian pilih subtab menu <b>Komentar</b>. Pada bagian <b>Tampilkan gambar profil dalam komentar </b>silahkan klik pilihan <b>Ya </b>jika ingin menampilkan avatar pada komentar blog. </li>
</ol>Sebenarnya dulu untuk menampilkan avatar pada komentar, kita bisa melakukannya dengan mengotak-atik template blog kita. Namun, dengan adanya fitur baru ini, diharapkan bisa semakin mempermudah dalam mempercantik blog Anda.</div></div></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-71816547065670870422010-02-02T21:10:00.002-07:002010-02-02T21:10:42.944-07:00Tips n Tricks<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> <a href="http://www.ziddu.com/download/3664253/TipsnTricks-BelajarAutocadSampaiMahir.pdf.html">Tips n Tricks - Belajar AutoCad Sampai Mahir</a><br />
<a href="http://www.ziddu.com/download/3664254/TipsnTricks-11LangkahMenghiasiDesktop.pdf.html">Tips n Tricks - 11 Langkah Menghiasi Desktop</a><br />
<a href="http://www.ziddu.com/download/3664255/TipsnTricks-18CaraMemperbaikiKinerjaKomputer.pdf.html">Tips n Tricks - 18 Cara Memperbaiki Kinerja Komputer</a><br />
<a href="http://www.ziddu.com/download/3664256/TipsnTricks-Adsense.pdf.html">Tips n Tricks - Adsense</a><br />
<a href="http://www.ziddu.com/download/3664257/TipsnTricks-AgarTerdaftardiGoogle-Yahoo-MSN.pdf.html">Tips n Tricks - Agar Terdaftar di Google-Yahoo-MSN</a><br />
<a href="http://www.ziddu.com/download/3664258/TipsnTricks-CaramudahmembersihkanPC.pdf.html">Tips n Tricks - Cara mudah membersihkan PC</a><br />
<a href="http://www.ziddu.com/download/3664259/TipsnTricks-CaraDownloaddiMegaupload.pdf.html">Tips n Tricks - Cara Download di Megaupload</a><br />
<a href="http://www.ziddu.com/download/3664260/TipsnTricks-Caracepatmenghapusrecentdocument.pdf.html">Tips n Tricks - Cara cepat menghapus recent document</a><br />
<a href="http://www.ziddu.com/download/3664261/TipsnTricks-AssigningWAVFilesWhenYouOpen.pdf.html">Tips n Tricks - Assigning WAV Files When You Open</a><br />
<a href="http://www.ziddu.com/download/3664262/TipsnTricks-13CaraPengaturanFiledanFolder.pdf.html">Tips n Tricks - 13 Cara Pengaturan File dan Folder</a><br />
<a href="http://www.ziddu.com/download/3664286/TipsnTricks-InstallWindowsXPDenganFlashDisk.pdf.html">Tips n Tricks - Install Windows XP Dengan Flash Disk</a><br />
<a href="http://www.ziddu.com/download/3664287/Tricks-DisableklikkananpadaDekstopWindowsExplorer.pdf.html">Tips n Tricks - Disable klik kanan pada Dekstop Windows Explorer</a><br />
<a href="http://www.ziddu.com/download/3664288/TipsnTricks-DisableklikkananpadaTaskbar.pdf.html">Tips n Tricks - Disable klik kanan pada Taskbar</a><br />
<br />
<a name='more'></a><br />
<a href="http://www.ziddu.com/download/3664289/TipsnTricks-CustomizingWindowsExplorerContextMenu.pdf.html">Tips n Tricks - Customizing Windows Explorer Context Menu</a><br />
<a href="http://www.ziddu.com/download/3664290/TipsnTricks-KoneksiInternetDenganHP.pdf.html">Tips n Tricks - Koneksi Internet Dengan HP</a><br />
<a href="http://www.ziddu.com/download/3664291/nTricks-FreePremiumAccountRapidsharedenganWEBProxy.pdf.html">Tips n Tricks - Free Premium Account Rapid share dengan WEB Proxy</a><br />
<a href="http://www.ziddu.com/download/3664292/TipsnTricks-Gagalmenghapusfile.pdf.html">Tips n Tricks - Gagal menghapus file</a><br />
<a href="http://www.ziddu.com/download/3664293/TipsnTricks-Installfontdenganlebihcepat.pdf.html">Tips n Tricks - Install font dengan lebih cepat</a><br />
<a href="http://www.ziddu.com/download/3664294/TipsnTricks-DownloadVideodiYouTube.pdf.html">Tips n Tricks - Download Video di YouTube</a><br />
<a href="http://www.ziddu.com/download/3664295/TipsnTricks-CustomizeXP.pdf.html">Tips n Tricks - Customize XP</a><br />
<a href="http://www.ziddu.com/download/3664327/snTricks-LebihcepatmenghapustanpamelewatiRecyleBin.pdf.html">Tips n Tricks - Lebih cepat menghapus tanpa melewati Recyle Bin</a><br />
<a href="http://www.ziddu.com/download/3664328/TipsnTricks-KunciSuksesAdsense.pdf.html">Tips n Tricks - Kunci Sukses Adsense</a><br />
<a href="http://www.ziddu.com/download/3664329/TipsnTricks-MembuatDomainGratisCOCC.pdf.html">Tips n Tricks - Membuat Domain Gratis .CO.CC</a><br />
<a href="http://www.ziddu.com/download/3664330/akeXPloadfrequentlyusedprogramsinquicklyaccessible.pdf.html">Tips n Tricks - Make XP load frequently used programs in quickly accessible</a><br />
<a href="http://www.ziddu.com/download/3664331/TipsnTricks-MainInternetGratisTERBUKTI100.pdf.html">Tips n Tricks - Main Internet Gratis TERBUKTI 100%</a><br />
<a href="http://www.ziddu.com/download/3664332/TipsnTricks-MembuatBootingWindowsXPLebihCepat.pdf.html">Tips n Tricks - Membuat Booting Windows XP Lebih Cepat</a><br />
<a href="http://www.ziddu.com/download/3664333/ipsnTricks-KumpulanSitusMendapatkanUangDiIndonesia.pdf.html">Tips n Tricks - Kumpulan Situs Mendapatkan Uang Di Indonesia</a><br />
<a href="http://www.ziddu.com/download/3664334/TipsnTricks-Membersihkandesktop.pdf.html">Tips n Tricks - Membersihkan desktop</a><br />
<a href="http://www.ziddu.com/download/3664335/TipsnTricks-MelindungiMatadariRadiasiKomputer.pdf.html">Tips n Tricks - Melindungi Mata dari Radiasi Komputer</a><br />
<a href="http://www.ziddu.com/download/3664336/TipsnTricks-MembersihkanRAMtanparestart.pdf.html">Tips n Tricks - Membersihkan RAM tanpa restart</a><br />
<a href="http://www.ziddu.com/download/3664357/TipsnTricks-MembuatShortcutWindowsexplorer.pdf.html">Tips n Tricks - Membuat Shortcut Windows explorer</a><br />
<a href="http://www.ziddu.com/download/3664359/TipsnTricks-MemeliharaPC.pdf.html">Tips n Tricks - Memelihara PC</a><br />
<a href="http://www.ziddu.com/download/3664360/TipsnTricks-Membuatfolderyangtersembunyi.pdf.html">Tips n Tricks - Membuat folder yang tersembunyi</a><br />
<a href="http://www.ziddu.com/download/3664361/TipsnTricks-MempercepatLoadingWindowsMenu.pdf.html">Tips n Tricks - Mempercepat Loading Windows Menu</a><br />
<a href="http://www.ziddu.com/download/3664362/TipsnTricks-MemperbaikiWindowsXPTanpaInstallUlang.pdf.html">Tips n Tricks - Memperbaiki Windows XP Tanpa Install Ulang</a><br />
<a href="http://www.ziddu.com/download/3664363/TipsnTricks-MempercepatkinerjaBrowserinternetanda.pdf.html">Tips n Tricks - Mempercepat kinerja Browser internet anda</a><br />
<a href="http://www.ziddu.com/download/3664364/TipsnTricks-MemodifikasicontextmenupadaRecylebin.pdf.html">Tips n Tricks - Memodifikasi context menu pada Recyle bin</a><br />
<a href="http://www.ziddu.com/download/3664365/TipsnTricks-Membukalinkpadawindowbaru.pdf.html">Tips n Tricks - Membuka link pada windows baru</a><br />
<a href="http://www.ziddu.com/download/3664366/TipsnTricks-MempercepataksesFolder.pdf.html">Tips n Tricks - Mempercepat akses Folder</a><br />
<a href="http://www.ziddu.com/download/3664367/TipsnTricks-MempercepatLoadingProgram.pdf.html">Tips n Tricks - Mempercepat Loading Program</a><br />
<a href="http://www.ziddu.com/download/3664399/TipsnTricks-Memperkecilukuranicondesktop.pdf.html">Tips n Tricks - Memperkecil ukuran icon desktop</a><br />
<a href="http://www.ziddu.com/download/3664400/TipsnTricks-MempercepatProsesdefragdanscandisk.pdf.html">Tips n Tricks - Mempercepat Proses defrag dan scandisk</a><br />
<a href="http://www.ziddu.com/download/3664401/TipsnTricks-MempercepatwaktuBoot.pdf.html">Tips n Tricks - Mempercepat waktu Boot</a><br />
<a href="http://www.ziddu.com/download/3664402/TipsnTricks-MempercepatWindowsXP.pdf.html">Tips n Tricks - Mempercepat Windows XP</a><br />
<a href="http://www.ziddu.com/download/3664403/TipsnTricks-MempercepatShutdownWindowsXP.pdf.html">Tips n Tricks - Mempercepat Shutdown Windows XP</a><br />
<a href="http://www.ziddu.com/download/3664404/TipsnTricks-Mempercepattampilandekstop.pdf.html">Tips n Tricks - Mempercepat tampilan dekstop</a><br />
<a href="http://www.ziddu.com/download/3664405/TipsnTricks-MempercepatPerformaSwapfile.pdf.html">Tips n Tricks - Mempercepat Performa Swapfile</a><br />
<a href="http://www.ziddu.com/download/3664406/TipsnTricks-Mempercepattampilanpadamenu.pdf.html">Tips n Tricks - Mempercepat tampilan pada menu</a><br />
<a href="http://www.ziddu.com/download/3664407/TipsnTricks-Mempercepatmodem.pdf.html">Tips n Tricks - Mempercepat modem</a><br />
<a href="http://www.ziddu.com/download/3664408/TipsnTricks-Mempercepatrestart.pdf.html">Tips n Tricks - Mempercepat restart</a><br />
<a href="http://www.ziddu.com/download/3664445/TipsnTricks-MencegahperintahShutDown.pdf.html">Tips n Tricks - Mencegah perintah ShutDown</a><br />
<a href="http://www.ziddu.com/download/3664446/TipsnTricks-Memproteksifile.pdf.html">Tips n Tricks - Memproteksi file</a><br />
<a href="http://www.ziddu.com/download/3664447/TipsnTricks-MencegahSeranganVirusKomputer.pdf.html">Tips n Tricks - Mencegah Serangan Virus Komputer</a><br />
<a href="http://www.ziddu.com/download/3664448/TipsnTricks-Mencetakdaftarfilepdfolder.pdf.html">Tips n Tricks - Mencetak daftar file pada folder</a><br />
<a href="http://www.ziddu.com/download/3664449/TipsnTricks-Menempatkantekspadasystray.pdf.html">Tips n Tricks - Menempatkan teks pada systray</a><br />
<a href="http://www.ziddu.com/download/3664450/TipsnTricks-Men-disableDOS.pdf.html">Tips n Tricks - Men-disable DOS</a><br />
<a href="http://www.ziddu.com/download/3664451/TipsnTricks-Memproteksifolderdenganpassword.pdf.html">Tips n Tricks - Memproteksi folder dengan password</a><br />
<a href="http://www.ziddu.com/download/3664452/TipsnTricks-MenampilkanMessageSaatLogon.pdf.html">Tips n Tricks - Menampilkan Message Saat Logon</a><br />
<a href="http://www.ziddu.com/download/3664453/TipsnTricks-MencegahPenggantianDisplayProperties.pdf.html">Tips n Tricks - Mencegah Penggantian Display Properties</a><br />
<a href="http://www.ziddu.com/download/3664454/TipsnTricks-MenambahmenuExploreFromHere.pdf.html">Tips n Tricks - Menambah menu Explore From Here</a><br />
<a href="http://www.ziddu.com/download/3664491/TipsnTricks-MengaturVirtualMemory.pdf.html">Tips n Tricks - Mengatur Virtual Memory</a><br />
<a href="http://www.ziddu.com/download/3664492/Mengetahuisiapasajayangterhubungdengankomputerkita.pdf.html">Tips n Tricks - Mengetahui siapa saja yang terhubung dengan komputer kita</a><br />
<a href="http://www.ziddu.com/download/3664493/TipsnTricks-MenggantiiconRecycleBin.pdf.html">Tips n Tricks - Mengganti icon Recycle Bin</a><br />
<a href="http://www.ziddu.com/download/3664494/TipsnTricks-Menggantiicondrive.pdf.html">Tips n Tricks - Mengganti icon drive</a><br />
<a href="http://www.ziddu.com/download/3664495/TipsnTricks-MengcopydariDosPrompt.pdf.html">Tips n Tricks - Mengcopy dari Dos Prompt</a><br />
<a href="http://www.ziddu.com/download/3664496/TipsnTricks-Menentukanukuranfileswap.pdf.html">Tips n Tricks - Menentukan ukuran file swap</a><br />
<a href="http://www.ziddu.com/download/3664497/TipsnTricks-MengetahuiIRQyangtelahdigunakan.pdf.html">Tips n Tricks - Mengetahui IRQ yang telah digunakan</a><br />
<a href="http://www.ziddu.com/download/3664498/TipsnTricks-MenggantiNameComputerdanOrganization.pdf.html">Tips n Tricks - Mengganti Name Computer dan Organization</a><br />
<a href="http://www.ziddu.com/download/3664499/TipsnTricks-MenggantiicondriveA.pdf.html">Tips n Tricks - Mengganti icon drive A</a><br />
<a href="http://www.ziddu.com/download/3664500/TipsnTricks-MenggunakanIDYahooMessengerLeb.pdf.html">Tips n Tricks - Menggunakan ID Yahoo Messenger Lebih dari 1</a><br />
<a href="http://www.ziddu.com/download/3664541/TipsnTricks-MenghilangkanIconNetworkNeigborhood.pdf.html">Tips n Tricks - Menghilangkan Icon Network Neigborhood</a><br />
<a href="http://www.ziddu.com/download/3664542/TipsnTricks-MenghilangkanDriveKomputer.pdf.html">Tips n Tricks - Menghilangkan Drive Komputer</a><br />
<a href="http://www.ziddu.com/download/3664543/TipsnTricks-MeningkatanPerformaInternetdanJaringan.pdf.html">Tips n Tricks - Meningkatan Performa Internet dan Jaringan</a><br />
<a href="http://www.ziddu.com/download/3664544/TipsnTricks-MengunciPCdenganDoubleKlik.pdf.html">Tips n Tricks - Mengunci PC dengan Double Klik</a><br />
<a href="http://www.ziddu.com/download/3664545/TipsnTricks-MenghematBandwidthInternet.pdf.html">Tips n Tricks - Menghemat Bandwidth Internet</a><br />
<a href="http://www.ziddu.com/download/3664546/TipsnTricks-Menghilangkanpanahpadashortcut.pdf.html">Tips n Tricks - Menghilangkan panah pada shortcut</a><br />
<a href="http://www.ziddu.com/download/3664547/TipsnTricks-MengoptimalkanPencarianGoogle.pdf.html">Tips n Tricks - Mengoptimalkan Pencarian Google</a><br />
<a href="http://www.ziddu.com/download/3664548/TipsnTricks-Mengoptimalkandatabaseregistry.pdf.html">Tips n Tricks - Mengoptimalkan database registry</a><br />
<a href="http://www.ziddu.com/download/3664549/TipsnTricks-MenghilangkanStartBanner.pdf.html">Tips n Tricks - Menghilangkan Start Banner</a><br />
<a href="http://www.ziddu.com/download/3664550/TipsnTricks-MengoptimalkanWindowsVista.pdf.html">Tips n Tricks - Mengoptimalkan Windows Vista</a><br />
<a href="http://www.ziddu.com/download/3664591/TipsnTricks-MenyelamatkanDataDiMyDocuments.pdf.html">Tips n Tricks - Menyelamatkan Data Di My Documents</a><br />
<a href="http://www.ziddu.com/download/3664592/TipsnTricks-MenyembunyikanMenuControlPanel.pdf.html">Tips n Tricks - Menyembunyikan Menu Control Panel</a><br />
<a href="http://www.ziddu.com/download/3664593/TipsnTricks-MeningkatkanKinerjaFirefox3.0.pdf.html">Tips n Tricks - Meningkatkan Kinerja Firefox3.0</a><br />
<a href="http://www.ziddu.com/download/3664594/TipsnTricks-Me-non-aktifkanMicrosoftSystemSounds.pdf.html">Tips n Tricks - Me-non-aktifkan Microsoft System Sounds</a><br />
<a href="http://www.ziddu.com/download/3664595/TipsnTricks-MeningkatkanPerformaKomputer.pdf.html">Tips n Tricks - Meningkatkan Performa Komputer</a><br />
<a href="http://www.ziddu.com/download/3664596/TipsnTricks-Menonaktifkanmenupribadi.pdf.html">Tips n Tricks - Menonaktifkan menu pribadi</a><br />
<a href="http://www.ziddu.com/download/3664597/TipsnTricks-MenuliskannamadiTaskbar.pdf.html">Tips n Tricks - Menuliskan nama diTaskbar</a><br />
<a href="http://www.ziddu.com/download/3664598/TipsnTricks-MenonaktifkansoundeventsWindows.pdf.html">Tips n Tricks - Menonaktifkan sound events Windows</a><br />
<a href="http://www.ziddu.com/download/3664599/TipsnTricks-MenyembunyikanmenuFolderOptions.pdf.html">Tips n Tricks - Menyembunyikan menu Folder Options</a><br />
<a href="http://www.ziddu.com/download/3664600/TipsnTricks-MenyembunyikanmenuTaskbar.pdf.html">Tips n Tricks - Menyembunyikan menu Taskbar</a><br />
<a href="http://www.ziddu.com/download/3664610/TipsnTricks-ProtectFileFolder.pdf.html">Tips n Tricks - Protect File Folder</a><br />
<a href="http://www.ziddu.com/download/3664611/TipsnTricks-Pesandiawalstartup.pdf.html">Tips n Tricks - Pesan diawal startup</a><br />
<a href="http://www.ziddu.com/download/3664612/TipsnTricks-PerintahCommandPrompt.pdf.html">Tips n Tricks - Perintah Command Prompt</a><br />
<a href="http://www.ziddu.com/download/3664613/TipsnTricks-PerbaikiAliranUdaradalamCasing.pdf.html">Tips n Tricks - Perbaiki Aliran Udara dalam Casing</a><br />
<a href="http://www.ziddu.com/download/3664614/TipsnTricks-Overclock.pdf.html">Tips n Tricks - Overclock</a><br />
<a href="http://www.ziddu.com/download/3664615/TipsnTricks-PercepatBootingdanRingankanbeb.pdf.html">Tips n Tricks - Percepat Booting dan Ringankan beban CPU</a><br />
<a href="http://www.ziddu.com/download/3664616/TipsnTricks-Reboottanpaloading.pdf.html">Tips n Tricks - Reboot tanpa loading</a><br />
<a href="http://www.ziddu.com/download/3664617/TipsnTricks-MerawatPC.pdf.html">Tips n Tricks - Merawat PC</a><br />
<a href="http://www.ziddu.com/download/3664618/TipsnTricks-MeratakantekspadaDropDownMenu.pdf.html">Tips n Tricks - Meratakan teks pada DropDown Menu</a><br />
<a href="http://www.ziddu.com/download/3664619/TipsnTricks-Reloadregistrydengancepat.pdf.html">Tips n Tricks - Reload registry dengan cepat</a><br />
<a href="http://www.ziddu.com/download/3664637/TipsnTricks-RemovingLogOffUsernamefromtheStartMenu.pdf.html">Tips n Tricks - Removing Log Off Username from the Start Menu</a><br />
<a href="http://www.ziddu.com/download/3664638/TipsnTricks-ShowingtheWindowsVersionontheDesktop.pdf.html">Tips n Tricks - Showing the Windows Version on the Desktop</a><br />
<a href="http://www.ziddu.com/download/3664639/TipsnTricks-Shortcutkepengaturansystem.pdf.html">Tips n Tricks - Shortcut kepengaturan system</a><br />
<a href="http://www.ziddu.com/download/3664640/TipsnTricks-ShortcutuntukShutdown.pdf.html">Tips n Tricks - Shortcut untuk Shutdown</a><br />
<a href="http://www.ziddu.com/download/3664641/TipsnTricks-ShortcutuntukLogOff.pdf.html">Tips n Tricks - Shortcut untuk Log Off</a><br />
<a href="http://www.ziddu.com/download/3664642/TipsnTricks-SpesialuntukWindows98danME.pdf.html">Tips n Tricks - Spesial untuk Windows 98 dan ME</a><br />
<a href="http://www.ziddu.com/download/3664643/TipsnTricks-RestoringYourRegistry.pdf.html">Tips n Tricks - Restoring Your Registry</a><br />
<a href="http://www.ziddu.com/download/3664644/TipsnTricks-Shortcutdanfoldertanpanama.pdf.html">Tips n Tricks - Shortcut dan folder tanpa nama</a><br />
<a href="http://www.ziddu.com/download/3664645/TipsnTricks-SettingEmailClientYahoodenganMozilla.pdf.html">Tips n Tricks - Setting Email Client Yahoo dengan Mozilla</a><br />
<a href="http://www.ziddu.com/download/3664646/TipsnTricks-ShortcutuntukRestart.pdf.html">Tips n Tricks - Shortcut untuk Restart</a><br />
<a href="http://www.ziddu.com/download/3664656/TipsnTricks-StartupTanpaProgramStartup.pdf.html">Tips n Tricks - Startup Tanpa Program Startup</a><br />
<a href="http://www.ziddu.com/download/3664657/TipsnTricks-TheScreetsWindowskeys.pdf.html">Tips n Tricks - TheScreets Windows keys</a><br />
<a href="http://www.ziddu.com/download/3664658/TipsnTricks-UpgradeProcessor.pdf.html">Tips n Tricks - Upgrade Processor</a><br />
<a href="http://www.ziddu.com/download/3785386/lanPintasMembuatConnectionStringDatabase-SQLServer.pdf.html">Tips n Tricks - Jalan Pintas Membuat Connection String Database - SQL Server</a></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-27326148798282368002010-02-02T21:04:00.002-07:002010-02-02T21:04:29.071-07:00Cara Membuat Widget Status Twitter pada Blog<div id="bloginfo"> <div id="bloginfobox"> <ul><!-- Top bar Recent Posts --></ul></div></div><script src="http://www.intensedebate.com/js/bloggerTemplateLinkWrapper.php?acct=e1f94689f59750c1738a090b3f5bc891">
</script> <!-- google_ad_section_start --> <a href="" name="6747388248331637903"></a> <h2> <a href="http://tutorial-website.blogspot.com/2009/10/cara-membuat-widget-status-twitter-pada.html" rel="bookmark" title="Permanent Link to Cara Membuat Widget Status Twitter pada Blog"></a> </h2><div class="entry"><div align="justify">Tau kan yang namanya<b> Twitter</b>? Situs jejaring yang sangat popular, bahkan lebih dulu populer dibandingkan <b>Facebook</b> yang sekarang lagi booming di Indonesia. Di <b>Twitter.Com</b> kita bisa share info atau keadaan kita lewat status yang kita tulis. Nah, kali ini, saya akan membagikan cara menambah sebuah <b>widget status Twitter pada blog </b>Anda. Dengan adanya <b>widget</b> (komponen yang ditambah pada blog) ini diharapkan pengunjung blog Anda juga bisa melihat <b>update status Anda pada Twitter</b>. Sekalian bisa dijadikan untuk menambah<b> follower </b>(julukan untuk teman pada Twitter). Prinsip kerja widget status Twitter ini mirip dengan <b>widget profil</b> yang <b>dipasang pada blog</b> yang pernah kita bahas di sini.<br />
<br />
Oke, berikut cara menambahkannya:<div class="fullpost"><ol><li>Login pada akun <b>Twitter</b> Anda.</li>
<li>Klik menu <b>Setting </b>pada bagian kanan atas.</li>
<li>Pada tab <b>Account, </b>lihat bagian <i><b>More Info URL.</b> </i>Klik link <b>You can also add your Twitter to your site here.<a name='more'></a><br />
</b><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_OPhk2sreP4w/SuG5ccLqwTI/AAAAAAAAAf0/TVZJgKVN3tY/s1600-h/twitter-add-site.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_OPhk2sreP4w/SuG5ccLqwTI/AAAAAAAAAf0/TVZJgKVN3tY/s320/twitter-add-site.jpg" /></a><br />
</div></li>
<li>Pada bagian <b>"Widget for.."</b> pilih <b>My Website. </b>Di sana akan terlihat beberapa pilihan widget untuk website. Silahkan pilih <b>Profile Widget</b>.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_OPhk2sreP4w/SuG5xfUkmQI/AAAAAAAAAf8/GG7vXuyOzTY/s1600-h/profil-twitter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_OPhk2sreP4w/SuG5xfUkmQI/AAAAAAAAAf8/GG7vXuyOzTY/s320/profil-twitter.jpg" /></a><br />
</div></li>
<li>Selanjutnya Anda akan masuk pada halaman <b>Customize Your Profile Widget</b>.<b> </b>Ada beberapa menu kostumisasi (pengaturan) di sana.<br />
<ul><li>Setting : isi dengan username Twitter Anda</li>
<li>Preference : merupakan pengaturan fitur pada widget</li>
<li>Appearance : merupakan pengaturan tampilan widget Twitter. Silahkan sesuikan dengan tampilan blog Anda agar lebih menarik.</li>
<li>Dimensions : mengatur ukuran widget.<br />
</li>
</ul></li>
<li>Jika sudah cukup, silahkan klik tombol <b>Finish & Grab Code </b>yang ada di sebelah bawah. maka pada halaman yang sama akan dimunculkan kode widgte Twitter yang Anda miliki.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_OPhk2sreP4w/SuG6IMbWDQI/AAAAAAAAAgM/YsrDf6H-HsI/s1600-h/add-twitter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_OPhk2sreP4w/SuG6IMbWDQI/AAAAAAAAAgM/YsrDf6H-HsI/s320/add-twitter.jpg" /></a><br />
</div></li>
<li>Kode itulah yang Anda <b>tambahkan pada website atau blog</b> Anda untuk <b>memunculkan widget status Twitter</b> tersebut. Caranya:<br />
<b>Untuk Wordpress CMS:</b><br />
<ul><li>Login pada dashbord Wordpress Anda</li>
<li>Klik menu <b>Widgets </b>yang ada pada bagian <b>Appearance</b></li>
<li>Tambahkan widget <b>Text </b>pada Wordpress Anda.</li>
<li>Selanutnya copy paste kode yang Anda dapat dari langkah 6 di atas pada widget <b>Text </b>tersebut, lalu <b>Save. </b></li>
</ul>(NB: cara tersebut hampir sama jika Anda menambahkan pada website non blog yaitu dengan meng-copy paste pada bagian website dimana Anda ingin menempatkan <b>widget Twitter</b> tersebut)<br />
<b>UntukBlogspot:</b><br />
<ul><li>Perhatikan bagian bawah kode yang Anda lihat pada langkah 6 di atas. Di bawah kotak kode tersebut terlihat tombol <b>Add to Blogger </b>yang ada logo <b>Blogspot-</b>nya.</li>
<li>Klik tombol tersebut untuk <b>menambahkan widget status Twitter pada Blogspot</b> Anda. Anda akan diarahkan pada halaman penambahan widget pada Blogspot. Silahkan pilih blog Anda dan atur nama widgte tersebut. </li>
<li>Klik tombol <b>Menambah Widget.</b></li>
</ul></li>
</ol></div></div></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-16767055557730880362010-02-02T20:58:00.002-07:002010-02-02T20:58:28.183-07:00Menampilkan Gambar Berada di Atas<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Agar gambar selalu berada diatas Blog anda, walaupun halaman blog berganti, atau berpindah-pindah, ikuti langkah-langkah berikut:<br />
<ol><li><span style="font-weight: bold;">login </span>ke blog anda</li>
<li>Klik layout, kemudian klik tab<span style="font-weight: bold;"> Edit HTML</span></li>
<li>Pada kotak <span style="font-weight: bold;">CSS </span>anda, cari script <span style="color: red; font-weight: bold;">]]></span> kemudian letakkan script berikut ini diatas script <span style="font-weight: bold;"><span style="color: red;">]]></span></span><br />
<div class="alert"><br />
#trik_pojok {<br />
position:fixed;_position:absolute;<span style="font-weight: bold;">bottom</span>:0px; <span style="font-weight: bold;">left</span>:0px;<br />
clip:inherit;<br />
_top:expression(document.documentElement.scrollTop+<br />
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }</div><a name='more'></a><br />
</li>
<li>Silahkan diganti posisi gambar tersebut dengan mengganti huruf yang bercetak tebal dengan Left - Right - Bottom - TOP</li>
<li>Selanjutnya cari script berikut ini <span style="color: red; font-weight: bold;"></span> dan letakkan script dibawah ini sebelumnya script <span style="color: red; font-weight: bold;"></span><br />
<div class="alert"><br />
</div><div id="trik_pojok"><br />
<a 0,="" 153);="" bold;="" color:="" font-weight:="" href="http://www.blogger.com/%3Cspan%20style=" rgb(0,="">http://modiftampilanblogger.blogspot.com"><br />
<img 0);="" 0,="" bold;="" color:="" font-weight:="" rgb(255,="" src="<span style=" />http://photobucket/love.gif" border="0" /></a></div><br />
</li>
<li>Silahkan diganti alamat yang berwarna biru dengan alamat blog anda kemudian ganti alamat yang berwarna merah dengan alamat gambar anda.</li>
</ol></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-19180576643228791372010-02-02T20:56:00.002-07:002010-02-02T20:56:26.806-07:00Membuat ComboBox<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> <span style="font-style: italic;">Contoh </span>combo Box :<br />
<select onchange="document.location.href=this.options[this.selectedIndex].value;"><option selected="selected" value="0">Clik Tanda Panah Bawah</option><option value="Links 1">Isi 1</option><option value="Links 2">Isi 2</option></select><br />
Untuk membuat Combo Box seperti diatas, lakukan langkah-langkah berikut :<span class="fullpost"> <br />
<ol><li><span style="font-weight: bold;">Login </span>ke blog anda</li>
<li>Pilih <span style="font-weight: bold;">Layout </span>dan klik <span style="font-weight: bold;">Add </span>yang berada diatas <span style="font-weight: bold;">Page Element</span> anda</li>
<li>Kemudian pilih element <span style="font-weight: bold;">HTML/JavaScript</span> dan masukkan kode dibawah ini :<br />
<div class="alert"><select onchange="document.location.href=this.options[this.selectedIndex].value;"><option selected="" value="0">Arsip Blog</option><option 0);="" 0,="" color:="" rgb(255,="" value="<span style=">Links 1">Text 1</option><option 0);="" 0,="" color:="" rgb(255,="" value="<span style=">Links 2">Text 2</option></select></div></li>
</ol></span><br />
<br />
<a name='more'></a><br />
<li>Lihat dengan seksama kode tersebut dan ganti teks yang sama pada Combo box yang ada pada kode tersebut dengan teks anda inginkan.</li><br />
<li>Selamat Mencoba...</li><br />
</div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-22736237920818465052010-02-02T20:48:00.002-07:002010-02-02T20:48:50.542-07:00Cara Membuat Nomor Halaman Posting Pada Blogspot<div class="entry"><style>
.fullpost{display:inline;}
</style> <div style="text-align: justify;"><span class="awal">P</span>ostingan <span style="font-weight: bold;">membuat nomor halaman posting pada blogspot</span> ini sama tidak ya seperti menomori dokumen di MS Word? Mari kita bahas. Setiap kali kita <span style="font-weight: bold;">menulis posting baru</span> pada blogspot, maka posting terbaru akan muncul di atas atau di depan posting yang lama secara otomatis (meskipun sebenarnya kita bisa mengganti urutan posting dengan cara mengganti waktu pembuatan dari posting tersebut.) Kita juga bisa <span style="font-weight: bold;">mengatur jumlah postingan</span> yang akan mucul per halaman pada <span style="font-weight: bold;">blogspot</span>. <span style="font-weight: bold;">Cara mengatur jumlah posting per halaman pada blogspot</span> pernah disinggung di <span style="font-weight: bold;">panduan menggunakan blogspot</span> yang bisa pembaca <a href="http://tutorial-website.blogspot.com/2009/01/panduan-lengkap-menggunakan-blog-di.html"><span style="font-weight: bold;">download</span></a> dari blog ini. Untuk mengaturnya silahkan buka <span style="font-weight: bold;">tab menu</span> <span style="font-weight: bold;">"Pengaturan"</span> pada <span style="font-weight: bold;">dasbor blogspot</span> Anda, kemudian pilih <span style="font-weight: bold;">sub tab menu</span> <span style="font-weight: bold;">"Format"</span>. <span class="fullpost">Silahkan atur jumlah posting per halaman pada bagian <span style="font-weight: bold;">"Tampilkan"</span>.<br />
<br />
<a href="http://1.bp.blogspot.com/_OPhk2sreP4w/SdYFfZmXL1I/AAAAAAAAANU/lqmlKM7rLTk/s1600-h/New+Picture+%2849%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5320446046790692690" src="http://1.bp.blogspot.com/_OPhk2sreP4w/SdYFfZmXL1I/AAAAAAAAANU/lqmlKM7rLTk/s400/New+Picture+%2849%29.bmp" style="cursor: pointer; display: block; height: 98px; margin: 0px auto 10px; text-align: center; width: 400px;" /><a name='more'></a></a>Nah, untuk melihat postingan yang lama, pada <a href="http://tutorial-website.blogspot.com/2009/03/download-template-blogger-wp-polaroid.html"><span style="font-weight: bold;">template blogspot</span></a> sudah tersedia link dibagian bawah posting yang bertuliskan biasanya "<span style="font-weight: bold;">Posting Lama</span>" dan link "<span style="font-weight: bold;">Posting Lebih Baru</span>" jika ingin kembali pada halaman postingan yang lebih baru.<br />
<br />
<a href="http://1.bp.blogspot.com/_OPhk2sreP4w/SdYG7JcEq0I/AAAAAAAAANc/7KAJCBaxrQA/s1600-h/New+Picture+%2851%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5320447623000533826" src="http://1.bp.blogspot.com/_OPhk2sreP4w/SdYG7JcEq0I/AAAAAAAAANc/7KAJCBaxrQA/s400/New+Picture+%2851%29.bmp" style="cursor: pointer; display: block; height: 131px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>Yang membuat sedikit repot adalah ketika kita ingin membuka postingan yang jauh lebih lama. Dengan kondisi seperti itu, kita harus membuka satu persatu halaman-halaman <span style="font-weight: bold;">postingan blogspot</span> untuk sampai pada postingan lama yang ingin kita tuju. Namun, ada cara untuk mengatasinya, yaitu dengan <span style="font-weight: bold;">membuat link</span> tiap halaman postingan, sehingga kita bisa melompat ke halaman yang lebih lama atau lebih baru tanpa melewati halaman-halaman diantaranya. Kita akan <span style="font-weight: bold;">membuat nomor halaman posting pada blogspot</span>. Nomor-nomor tersebutlah sebagai link untuk menuju halaman yang dituju.<span style="font-weight: bold;"> Langkah-langkah</span>nya adalah sebagai berikut:<br />
<ol style="text-align: justify;"><li>Login terlebih dahulu pada akun blogspot Anda</li>
<li>Klik link menu <span style="font-weight: bold;">Tata Letak</span>, kemudian pilih sub tab menu <span style="font-weight: bold;">Edit HTML</span></li>
<li>Backup terlebih dahulu template pembaca. Hal ini bertujuan agar pembaca bisa mengembalikan ke kondisi semula jika terjadi kesalahan pengeditan. Klik tulisan yang bertuliskan <span style="font-weight: bold;">Download Template Lengkap</span></li>
<li>Jangan beri centang pada kotak kecil yang ada disamping tulisan <span style="font-weight: bold;">Expand Template Widget</span></li>
<li>Cari kode <span style="font-weight: bold;">]]></span> pada template tersebut</li>
<li>Copy paste <span style="font-weight: bold;">struktur CSS</span> berikut tepat diatas kode <span style="font-weight: bold;">]]></span><br />
<code>/* Page Navigation */<br />
.blog-pager {text-align: center; margin-top: 10px; font-size: 0.75em; font-weight: bold;}<br />
.showpageArea a {text-decoration:underline;padding: 2px 6px 2px 6px;color: #333;background: #fffff4;margin: 2px;}<br />
.showpagePoint {padding: 2px 6px 2px 6px;color: #FFF;background: #a0c800;border: 1px solid #ccc;margin: 2px;} /*Current page*/<br />
.showpageOf {padding: 2px 6px 2px 6px; color: #333;background: #fffff4;border: 1px solid #ccc;margin: 2px;} /* Page (1), Page(2) ... */<br />
.showpageNum a {text-decoration:none;padding: 2px 6px 2px 6px;color: #0066cc;background: #fffff4;border: 1px solid #ccc;margin: 2px;}<br />
.showpageNum a:hover {border: 1px solid #aaa;background-color:#ccc;color: #ff9600;}<br />
.showpageNum a:link {text-decoration:none;color:#333;}<br />
.showpage a {text-decoration:none;padding: 2px 6px 2px 6px;color: #0066cc;background: #FFF;border: 1px solid #ccc;margin: 2px;} /* Next, Prev...*/<br />
.showpage a:hover {padding: 2px 6px 2px 6px;color: #ff9600;background-color:#ccc;border: 1px solid #aaa;margin: 2px;}<br />
.showpage a:link {text-decoration:none;color:#333;}</code></li>
<li>Cari lagi struktur seperti berikut pada template pembaca<br />
<code><b:section class="main" id="main" showaddelement="no"><br />
<b:widget id="Blog1" locked="true" title="Blog Posts" type="Blog"><br />
</b:widget></b:section></code></li>
<li>Kemudian copy paste struktur berikut tepat di bawah struktur yang Anda temukan pada langkah 7<code><br />
<script type="text/javascript"><br />
<br />
function showpageCount(json) {<br />
var thisUrl = location.href;<br />
var htmlMap = new Array();<br />
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";<br />
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br />
var isPage = thisUrl.indexOf("/search?updated")!=-1;<br />
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";<br />
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br />
var thisNum = 1;<br />
var postNum=1;<br />
var itemCount = 0;<br />
var fFlag = 0;<br />
var eFlag = 0;<br />
var html= '';<br />
var upPageHtml ='';<br />
var downPageHtml ='';<br />
<br />
<br />
var pageCount=5;<br />
var displayPageNum=3;<br />
var firstPageWord = 'First';<br />
var endPageWord = 'Last';<br />
var upPageWord ='Previous';<br />
var downPageWord ='Next';<br />
<br />
<br />
<br />
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br />
<br />
for(var i=0, post; post = json.feed.entry[i]; i++) {<br />
var timestamp = post.published.$t.substr(0,10);<br />
var title = post.title.$t;<br />
if(isLablePage){<br />
if(title!=''){<br />
if(post.category){<br />
for(var c=0, post_category; post_category = post.category[c]; c++) {<br />
if(encodeURIComponent(post_category.term)==thisLable){<br />
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />
if(thisUrl.indexOf(timestamp)!=-1 ){<br />
thisNum = postNum;<br />
}<br />
<br />
postNum++;<br />
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />
}<br />
}<br />
}<br />
}//end if(post.category){<br />
<br />
itemCount++;<br />
}<br />
<br />
}else{<br />
if(title!=''){<br />
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />
if(thisUrl.indexOf(timestamp)!=-1 ){<br />
thisNum = postNum;<br />
}<br />
<br />
if(title!='') postNum++;<br />
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />
}<br />
}<br />
itemCount++;<br />
}<br />
}<br />
<br />
for(var p =0;p< htmlMap.length;p++){<br />
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />
if(fFlag ==0 && p == thisNum-2){<br />
if(thisNum==2){<br />
if(isLablePage){<br />
upPageHtml = labelHtml + upPageWord +'</a></span>';<br />
}else{<br />
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br />
}<br />
}else{<br />
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br />
}<br />
<br />
fFlag++;<br />
}<br />
<br />
if(p==(thisNum-1)){<br />
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';<br />
}else{<br />
if(p==0){<br />
if(isLablePage){<br />
html = labelHtml+'1</a></span>';<br />
}else{<br />
html += '<span class="showpageNum"><a href="/">1</a></span>';<br />
}<br />
}else{<br />
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';<br />
}<br />
}<br />
<br />
if(eFlag ==0 && p == thisNum){<br />
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br />
eFlag++;<br />
}<br />
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />
}//end for(var p =0;p< htmlMap.length;p++){<br />
<br />
if(thisNum>1){<br />
if(!isLablePage){<br />
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br />
}else{<br />
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br />
}<br />
}<br />
<br />
html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;<br />
<br />
if(thisNum<(postNum-1)){<br />
html += downPageHtml;<br />
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';<br />
}<br />
<br />
if(postNum==1) postNum++;<br />
html += '</div>';<br />
<br />
if(isPage || isFirstPage || isLablePage){<br />
var pageArea = document.getElementsByName("pageArea");<br />
var blogPager = document.getElementById("blog-pager");<br />
<br />
if(postNum <= 2){<br />
html ='';<br />
}<br />
<br />
for(var p =0;p< pageArea.length;p++){<br />
pageArea[p].innerHTML = html;<br />
}<br />
<br />
if(pageArea&&pageArea.length>0){<br />
html ='';<br />
}<br />
<br />
if(blogPager){<br />
blogPager.innerHTML = html;<br />
}<br />
}<br />
<br />
}<br />
</script><br />
<br />
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script></code></li>
<li>Klik tombol menu <span style="font-weight: bold;">SIMPAN TEMPLATE</span></li>
<li>Contoh pembuatan nomor halaman posting tersebut bisa pembaca lihat pada bagian bawah halaman blog saya ini.<br />
<br />
<a href="http://2.bp.blogspot.com/_OPhk2sreP4w/SdYHmiAnu7I/AAAAAAAAANk/DYw3Q0dG_mc/s1600-h/New+Picture+%2852%29.bmp" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5320448368330652594" src="http://2.bp.blogspot.com/_OPhk2sreP4w/SdYHmiAnu7I/AAAAAAAAANk/DYw3Q0dG_mc/s400/New+Picture+%2852%29.bmp" style="cursor: pointer; display: block; height: 79px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a></li>
</ol></span></div></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-20479720311606463662010-02-02T20:43:00.001-07:002010-02-02T20:43:44.271-07:00Mengganti Background Blog dengan Gambar<!-- google_ad_section_start --> <a href="" name="8612906614969485265"></a> <div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Siapkan gambar yang ingin dijadikan background pada blog anda, dengan ukuran terserah anda, akan tetapi jangan terlalu besar, karena akan memperlama pengunjung membuka blog anda. Jika gambar sudah ditentukan, ikuti langkah-langkah berikut :<br />
<br />
Lakukan Login terlebih dahulu pada blog anda<br />
Klik Menu <span style="font-weight: bold;">Layout</span><br />
<br />
Klik <span style="font-weight: bold;">Edit HTML</span> tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download atau dengan cara meng-Copy seluruh kode Template, paste pada notepad lalu save)<br />
<br />
Kemudian tambahkan kode <span class="fullpost">(alamat gambar) berikut pada style sheet css anda<a name='more'></a><br />
<div class="alert"><br />
<span style="color: #000099;">url('http://http://1.bp.blogspot.com/_bCOZIFqurug/ShWhbRaoSNI/AAAAAAAAAGw/BarKNNKQB2Y/s320/MSN.gif');</span></div><br />
<br />
dan letakkan pada teks yang berwarna merah:<br />
<br />
<span style="font-style: italic;">untuk minima klasik :</span><br />
<div class="alert"><br />
body {<br />
background:#fff <span style="color: red;">url('http://1.bp.blogspot.com/_bCOZIFqurug/ShWhbRaoSNI/AAAAAAAAAGw/BarKNNKQB2Y/s320/MSN.gif');</span><br />
margin:0;<br />
padding:40px 20px;<br />
font:x-small Georgia,Serif;<br />
text-align:center;<br />
color:#333;<br />
font-size/* */:/**/small;<br />
font-size: /**/small;<br />
}</div><br />
<br />
<span style="font-style: italic;">untuk minima baru :</span><br />
<div class="alert"><br />
body {<br />
background:$bgcolor<span style="color: red;"> url('http://1.bp.blogspot.com/_bCOZIFqurug/ShWhbRaoSNI/AAAAAAAAAGw/BarKNNKQB2Y/s320/MSN.gif');</span><br />
margin:0;<br />
color:$textcolor;<br />
font:x-small Georgia Serif;<br />
font-size/* */:/**/small;<br />
font-size: /**/small;<br />
text-align: center;<br />
}</div><br />
<br />
<span style="font-weight: bold;">Silahkan diganti alamat link gambar yang berwarna diatas dengan alamat gambar anda.</span><br />
<br />
Klik tombol <span style="font-weight: bold;">Preview </span>untuk melihat perubahan<br />
<br />
Jika sudah sesuai dengan keinginan, klik tombol <span style="font-weight: bold;">Save Template</span></span></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-10577688402647275472010-02-02T20:40:00.000-07:002010-02-02T20:40:05.843-07:00Menampilkan Iklan di Bawah Read More / Baca Selengkapnya<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Pastikan sistem Read More pada blog anda aktif dan ikuti langkah-langkah berikut :<br />
<br />
<ol><li><span style="font-weight: bold;">Login </span>terlebih dahulu pada blog anda</li>
<li>Klik Menu <span style="font-weight: bold;">Layout</span></li>
<li>Klik<span style="font-weight: bold;"> Edit HTML</span> tab (<span style="font-style: italic;">Note </span>: Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download atau dengan cara meng-Copy seluruh kode Template, paste pada notepad lalu save)</li>
<li>Berikan Checklist pada option <span style="font-weight: bold;">Expand Template Widget</span> dan tunggu beberapa detik hingga proses selesai.</li>
<span class="fullpost">
<li>Temukan kode dibawah ini pada <span style="font-weight: bold;">style sheet css</span> anda :<a name='more'></a><br />
<div class="alert"><br />
<b:if cond="data:blog.pageType == "item""><br />
<style>
.fullpost{display:inline;}
</style></b:if></div><data:post.body></data:post.body><br />
<br />
<b:else><br />
<style>
.fullpost{display:none;}
</style><br />
<data:post.body><br />
<a expr:href="data:post.url" href=""><strong>Read More</strong></a></data:post.body><br />
</b:else></li>
<li>Tambahkan kode iklan anda <span style="font-weight: bold;">(Adsense, Kumpulblogger, dll) </span>sehingga kode yang diatas akan seperti ini :<br />
<div class="alert"><br />
<br />
<b:if cond="data:blog.pageType == "item""><br />
<style>
.fullpost{display:inline;}
</style></b:if></div><data:post.body></data:post.body><br />
<br />
<b:else><br />
<style>
.fullpost{display:none;}
</style><br />
<data:post.body><br />
<a expr:href="data:post.url" href=""><strong>Selengkapnya...</strong></a><br />
<br />
<br />
<br />
<br />
<span style="color: red;">KODE IKLAN ANDA PASTE DISINI!!! </span></data:post.body><br />
<br />
</b:else><br />
</li>
<li>Klik tombol <span style="font-weight: bold;">Preview </span>untuk melihat perubahan</li>
<li>Jika sudah sesuai dengan keinginan, klik tombol <span style="font-weight: bold;">Save Template</span></li>
</span></ol></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-12775230179467221272010-02-02T20:34:00.001-07:002010-02-02T20:39:06.923-07:00Menampilkan Pesan Selamat Datang<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Lihat contoh dibawah ini :<br />
<br />
<a href="http://3.bp.blogspot.com/_bCOZIFqurug/SeuK9eIMSBI/AAAAAAAAAFQ/lh94L5dv0CI/s1600-h/Untitled-1.gif" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5326503772959819794" src="http://3.bp.blogspot.com/_bCOZIFqurug/SeuK9eIMSBI/AAAAAAAAAFQ/lh94L5dv0CI/s320/Untitled-1.gif" style="cursor: pointer; height: 126px; width: 249px;" /></a><br />
<br />
Pada saat pengunjung membuka halaman blog anda akan di sodorkan pesan seperti diatas, untuk membuatnya cukup dengan langkah-langkah sebagai berikut :<span class="fullpost"><br />
</span><br />
<ol><span class="fullpost">
<li>Lakukan <span style="font-weight: bold;">Login </span>terlebih dahulu pada blog anda</li>
<li>Klik Menu <span style="font-weight: bold;">Layout</span></li>
<li>Klik<span style="font-weight: bold;"> Edit HTML</span> tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)</li>
<li>Temukan code <span style="color: red;"></span> pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).<a name='more'></a></li>
<li>Silahkan Copy dan Paste code dibawah ini dan letakkan diatas code <span style="color: red;"></span>. (Note : Ganti kalimat yang berwarna hijau dengan kalimat yang anda inginkan)<br />
<div class="alert"><span class="fullpost"><script language="JavaScript">
alert ("Selamat datang di adul blog") ;
</script></span><script language="JavaScript">
alert ("Selamat datang di Share Center") ;
</script></div></li>
<li>Klik tombol <span style="font-weight: bold;">Save Template</span></li>
<li>Lihat hasilnya…</li>
</span></ol><span class="fullpost"></span></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-44211665119571604042010-02-02T20:32:00.001-07:002010-02-02T20:36:17.727-07:00Membuat Tabel di Blog<h3 class="post-title entry-title"><a href="http://share-center.blogspot.com/2009/07/membuat-tabel-di-blog.html"></a> </h3><div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Untuk membuat sebuah tabel tunggal, copy kode dibawah ini :<br />
<div class="alert"><br />
</div><table border="1" style="width: 250px;"><tbody>
<tr> <td><br />
<br />
Contoh</td></tr>
</tbody></table><table>Hasilnya akan seperti ini : </table><table border="1" style="width: 250px;"><tbody>
<tr><td><br />
Share Center</td></tr>
</tbody></table><br />
<span class="fullpost"><br />
Untuk membuat tabel tunggal dengan format Center alignment, copy kode berikut ini :<br />
</span><br />
<div class="alert"><span class="fullpost"><br />
</span></div><table border="1" style="width: 200px;"><tbody>
<tr> <td align="center"><br />
<br />
Contoh</td></tr>
</tbody></table><span class="fullpost"><br />
<a name='more'></a><br />
Hasilnya akan seperti ini</span><br />
<table></table><br />
<br />
<br />
<br />
<table border="1" style="width: 200px;"><tbody>
<tr><td align="center"><br />
<br />
Contoh</td></tr>
</tbody></table><br />
<br />
Untuk membuat tabel dengan 2 baris dan 2 kolom, copy kode berikut ini :<br />
<div class="alert"><br />
</div><table border="1" style="width: 300px;"><tbody>
<tr> <td align="center"><br />
<br />
Contoh 1</td> <td align="center"><br />
<br />
http://sharecenter.blogspot.com</td></tr>
<tr> <td align="center"><br />
<br />
Contoh 2</td> <td align="center"><br />
<br />
http://modiftampilanblogger.blogspot.com/</td></tr>
</tbody></table><br />
<br />
Hasilnya akan seperti ini :<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<table border="1" style="width: 300px;"><tbody>
<tr><td align="center"><br />
Contoh 1</td><td align="center"><br />
<br />
<a href="http://sharecenter.blogspot.com/">http://sharecenter.blogspot.com</a></td></tr>
<tr><td align="center"><br />
Contoh 2</td><td align="center"><br />
<br />
<a href="http://modiftampilanblogger.blogspot.com/">http://modiftampilanblogger.blogspot.com</a></td></tr>
</tbody></table></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-22730344932365499952010-02-02T20:31:00.001-07:002010-02-02T20:31:38.419-07:00Membuat Link Kelap-kelip<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Silahkan Copy kode dibawah ini dan Paste pada tulisan anda :<br />
<div class="alert"><br />
<blink><a href="http://share-center.blogspot.com/" target="blank">Share Center</a></blink> </div><br />
Maka hasilnya akan seperti ini :<br />
<blink><a href="http://%20share-center.blogspot.com/" target="blank">Share Center<a name='more'></a></a></blink></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-67560234328857111312010-02-02T20:30:00.002-07:002010-02-12T15:32:43.642-07:00Membuat Judul Blog bergerak<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> <span style="font-family: "; font-size: 12;"></span>Mohon lihat Judul/Title blog ini... Udah tau khan maksudnya… dan untuk membuat itu, silahkan ikuti langkah-langkah berikut :<br />
<ol><li>Lakukan <span style="font-weight: bold;">Login </span>terlebih dahulu pada blog anda</li>
<li>Klik Menu <span style="font-weight: bold;">Layout</span></li>
<li>Klik <span style="font-weight: bold;">Edit HTML</span> tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)</li>
<li>Temukan code <span style="color: red;"></span> pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).</li>
<span class="fullpost">
<li>Silahkan Copy dan Paste code dibawah ini dan letakkan dibagian bawah code <span style="color: red;">.</span> (Note : Ganti kalimat "Welcome in Share Center....more...." dengan kalimat anda)<br />
<!-- more --><br />
<span style="font-family: &quot;; font-size: 12;"></span><br />
<br />
<div class="alert"><br />
<span style="font-family: &quot;; font-size: 12;"><br />
</span><br />
<script language="JavaScript"><br />
var txt="<span>Welcome in ShareCenter.blogspot.com : Free Software, Tips 'n Tricks Computers, Free Tutorials, Free Articles and more..</span>";var<br />
kecepatan=100;var segarkan=null;function bergerak() {<br />
document.title=txt;txt=txt.substring(1,txt.length)+txt.charAt(0);segarkan=setTimeout("bergerak()",kecepatan);}bergerak();<br />
</script><span style="font-family: &quot;; font-size: 12;"> </span></div><br />
<span style="font-family: &quot;; font-size: 12;"></span> </li><br />
<li>Klik tombol <span style="font-weight: bold;">Save Template</span></li><br />
<li>Lihat perubahannya…</li><br />
</span></ol></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-31680609060033392972010-02-02T20:29:00.001-07:002010-02-02T20:29:07.023-07:00<h3 class="post-title entry-title"> <a href="http://share-center.blogspot.com/2009/07/membuat-highlight-link-berwarna-warni.html">Membuat Highlight Link Berwarna - Warni</a> </h3><div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Contoh : Coba arahkan Cursor mouse anda ke judul Tulisan ini, anda akan melihat warna-warni dari link itu sendiri, dan untuk membuat, ikuti langkah-langkah berikut :<br />
<ol><li>Lakukan Login terlebih dahulu pada blog anda</li>
<li>Klik Menu <span style="font-weight: bold;">Layout</span></li>
<li>Klik <span style="font-weight: bold;">Edit HTML</span> tab (<span style="font-style: italic;">Note </span>: Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)</li>
<span class="fullpost">
<li>Temukan code <span style="color: red;"></span> pada blog anda (<span style="font-style: italic;">Note </span>: tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).</li>
<li>Silahkan Copy dan Paste code dibawah ini dan letakkan dibagian bawah code <span style="color: red;"></span><br />
<span style="color: #000099;"><div align="left"><textarea cols="40" name="code" rows="3"><script src='http://boedjo.fileave.com/LinkWarnaWarni/rainbow.js'> </script></textarea></div><a name='more'></a></span></li>
<li>Klik tombol <span style="font-weight: bold;">Save Template</span></li>
<li>Lihat hasilnya…</li>
</span></ol></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-45265095936117855522010-02-02T20:28:00.001-07:002010-02-02T20:28:36.285-07:00Membuat Kalimat Kelap-Kelip<h3 class="post-title entry-title"> <a href="http://share-center.blogspot.com/2009/07/untuk-membuat-huruf-atau-kalimat-kelap.html"></a> </h3><div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Untuk membuat huruf atau kalimat kelap-kelip, anda hanya menambahakan kode :<br />
<blink> diawal kata</blink>diakhir kata<br />
<br />
<span style="font-weight: bold;">Contoh : Masukkan kode dibawah ini pada tulisan anda</span><span class="fullpost"><br />
<div class="alert"><blink> ShareCenter.blogspot.com</blink></div><br />
<br />
<span style="font-weight: bold;">hasilnya :</span><br />
<blink>ShareCenter.blogspot.com</blink></span></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0tag:blogger.com,1999:blog-7880066100441937588.post-68583310806695884362010-02-02T20:26:00.001-07:002010-02-02T20:26:50.176-07:00Memasang Page Element di Bawah Header Blog<div class="post-body entry-content"><style>
.fullpost{display:inline;}
</style> Apa c maksudnya?? Element yang mana??? Untuk lebih jelasnya lihat pada gambar dibawah ini :<br />
<a href="http://1.bp.blogspot.com/_bCOZIFqurug/Sepi736d22I/AAAAAAAAAFI/UL1UR9ZTFak/s1600-h/elemenheader_thumb7_thumb23.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5326178290080013154" src="http://1.bp.blogspot.com/_bCOZIFqurug/Sepi736d22I/AAAAAAAAAFI/UL1UR9ZTFak/s320/elemenheader_thumb7_thumb23.jpg" style="cursor: pointer; height: 57px; width: 320px;" /></a><br />
<br />
Jika anda sudah melakukan langkah-langkah dibawah, maka akan muncul Elemen baru di bagian bawah header pada halaman tata letak (bhs. Indo).<br />
<br />
Untuk menambahkan Page Element yang baru dibawah header blog anda, ikuti langkah-langkah berikut :<br />
<ol><li><span style="font-weight: bold;">Login </span>terlebih dahulu pada blog anda</li>
<li>Klik <span style="font-weight: bold;">Menu Layout</span></li>
<li>Klik <span style="font-weight: bold;">Edit HTML</span> tab (Note : Untuk menghindari kesalahan, silahkan Backup terlebih dahulu blog anda dengan memberikan checklist pada Download full template dan klik Download)</li>
<li>Temukan code <span style="color: red; font-weight: bold;">]]></span> pada blog anda (Note : tekan Ctrl + F untuk melakukan pencarian dan ketikkan kata yang ingin dicari).<a name='more'></a> </li>
<span class="fullpost">
<li> Silahkan Copy dan Paste code dibawah ini dan letakkan dibagian atas code <span style="font-weight: bold;"><span style="color: red;">]]></span></span><div class="alert"><span style="color: #000099;">#under_header{</span><br />
<span style="color: #000099;">margin:10px 0;</span><br />
<span style="color: #000099;">padding:1%;</span><br />
<span style="color: #000099;">width:98%;</span><br />
<span style="color: #000099;">}</span><br />
</div></li>
<li>Temukan code-code yang sama dengan kode dibawah ini :<br />
<div class="alert"><br />
<span style="color: #000099;"><div id="header-wrapper"><br />
<span style="color: #000099;"><b:section class="header" id="header" maxwidget="1" showaddelement="no"></b:section></span><br />
<span style="color: #000099;"><b:widget id="Header1" locked="true" title="test (Header)" type="Header"></b:widget></span><br />
<span style="color: #000099;"></span><br />
<span style="color: #000099;"> </span></div></span></div></li>
<li>Masukkan kode dibawah ini setelah kode diatas :<br />
<div class="alert"><br />
<span style="color: #000099;"><div id="under_header"><br />
<span style="color: #000099;"><b:section class="header" id="underheader" preferred="yes"></b:section></span><br />
<span style="color: #000099;"></span></div></span></div></li>
<li>Klik <span style="font-weight: bold;">Save Template</span> dan klik Tab Layout, lihat perubahannya...</li>
</span></ol></div>Abdullahhttp://www.blogger.com/profile/01816779448226715337noreply@blogger.com0