tag:blogger.com,1999:blog-7477258018330732442024-03-20T23:08:42.036-07:00Tanty Template ModificationKebanggaan dan kepuasan seorang blogger sejati adalah ketika desain blog yang digunakan merupakan hasil perasan otak dan cucuran keringat sendiri ....Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.comBlogger63125tag:blogger.com,1999:blog-747725801833073244.post-75700316951702811762012-03-11T04:30:00.006-07:002012-03-11T07:13:35.003-07:00Membuat Related Posts Blogger dengan Efek CSS3<div class="buka">Jika mungkin anda telah menggunakan atau memasang widget (script) related post untuk blogger seperti yang sudah banyak terposting di beberapa blog lainnya, pasti akan terlihat sedikit berbeda dengan yang ada di blog ini. Cobalah untuk menggulung halaman ini turun hingga di bawah posting. Arahkan cursor ke setiap link dan akan terlihat sebuah animasi saat tersentuh cursor. Untuk membuat related posts yang seperti ini anda perlu menambahkan css3 transition serta mengatur padding dan background position yang terpasang pada setiap link. <br />
<br />
Kode yang diperlukan untuk membuat related posts blogger dengan animasi yang tercipta melalui css3 transition dapat anda lihat dalam beberapa box berikut:<a name='more'></a><br />
<br />
<div class="gray">Kode CSS :</div><br />
<pre class="blue"><b>#GRrelated-posts</b>{
padding:10px;
display:block;
clear:both;
border-top:5px double #444;
border-bottom:5px double #333;
margin:15px 0;
}
<b>h3.GRrelated-post</b>{
border-bottom:3px double #666;
font-weight:bold;
line-height: 1.2;
margin:25px 15px 5px;
padding:0 6px;
text-transform:uppercase;
font-size:14px;
}
<b>#GRrelated-posts a:hover</b>{
text-decoration:none;
}
<b>#GRrelated-posts ul</b>{
list-style-type:none;
margin:10px 0;
padding:0;
}
<b>#GRrelated-posts li</b>{
background: url('https://lh3.googleusercontent.com/-JwrOsJL-jP4/T1yD1XepuCI/AAAAAAAAASw/9zWGr5YWaTE/s128/ball.red.png') no-repeat scroll 12px 0 transparent;
background-size:auto 18px;
display:block;
list-style-type:none;
padding:0 0 0 35px;
line-height:20px;
margin:0;
transition:all 0.8s ease;
-o-transition:all 0.8s ease;
-moz-transition:all 0.8s ease;
-webkit-transition:all 0.8s ease;
-ms-transition:all 0.8s ease;
}
<b>#GRrelated-posts li:hover</b>{
background: url('https://lh5.googleusercontent.com/-y40w76_1gfc/T1yD5fk7uOI/AAAAAAAAAS4/V_do9hRxpt8/s128/arrow-gold.png') no-repeat scroll 3px 0 transparent;
padding-left:45px;
}</pre><br />
<div class="gray">Javascript :</div><br />
<pre class="blue"><script src='http://gubhugreyotprojects.googlecode.com/svn/widgets/GR_related-posts.js' type='text/javascript'></script></pre><br />
<div class="gray">xHTML :</div><br />
<pre class="blue"><b:if cond='data:blog.pageType == "item"'>
<h3 class='GRrelated-post'>Related Posts</h3>
<div id='GRrelated-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if></pre><br />
<div class="gray">Cara menggunakan kode related posts :</div><br />
<ul><li>Login ke Blogger.</li>
<li>Halaman Dasbor (Dasboard):<br />
KLik <b>Design (Rancangan)</b></li>
<li>Klik <b>Edit HTML</b></li>
<li><b>Backup template</b>. <br />
Karena melakukan perubahan xHTML di bagian body mempunyai resiko terjadi kegagalan yang mungkin menimbulkan kerusakan template, anda harus melakukan proses backup template terlebih dahulu demi keamanan.<ul class="dua"><li>Klik <b>Download Template Lengkap (Download Full Template)</b></li>
<li>Simpan file template di folder PC.</li>
<li>File yang tersimpan ini bisa digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara menguploadnya kembali ke blogger dengan cara :<br />
Klik <b>browse</b> kemudian temukan file yang sebelumnya yelah tersimpan dan lanjutkan dengan klik <b>upload</b>.</li>
</ul></li>
<li>Kembali di halaman <b>Edit HTML</b> :<br />
Cari kode <b>]]></b:skin></b></li>
<li>Letakkan kode CSS tepat di atas kode tersebut sedang javascript di bawahnya sehingga kode <b>]]></b:skin></b> akan berada diantara kode css dan javascript.</li>
<li>Klik <b>Simpan Template (Save Template).</b></li>
<li>Jika sudah berhasil tersimpan, lanjutkan kembali dengan klik <b>Expand Widget Template</b>.</li>
<li>Cari kode <span class="rn"><data:top.authorLabel/></span><br />
Di atas kode ini terdapat beberapa kode lain dengan bentuk seperti berikut:<br />
<br />
<pre class="blue"><span class="bn"><div class='post-footer'></span>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class="rn"><data:top.authorLabel/></span></pre><br />
Letakkan xHTML tepat di atasnya. <br />
<br />
<pre class="blue"><b:if cond='data:blog.pageType == "item"'>
<h3 class='GRrelated-post'>Related Posts</h3>
<div id='GRrelated-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=<span class="on">10</span>"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=<span class="on">10</span>;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<span class="bn"><div class='post-footer'></span>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<span class="rn"><data:top.authorLabel/></span></pre><br/><br />
</li>
<li>Klik <b>Simpan Template (Save Template).</b></li>
</ul><br />
<div class="cap">Keterangan :</div><br />
<ul><li>Angka <span class="on">10</span> merupakan jumlah posting yang akan ditampilkan di widget related posts. Rubah angka ini sesuai jumlah yang anda inginkan.</li>
<li>Jika ingin merubah tampilan related posts, perubahan cukup dilakukan pada kode css.</li>
</ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com7tag:blogger.com,1999:blog-747725801833073244.post-40877088712574618552011-01-03T06:14:00.001-08:002012-03-11T01:11:37.311-08:00Javascript Select and Copy<div align="justify">Menggunakan Javascript select and copy (pada textarea) memungkinkan setiap pengunjung cukup sekali melakukan <i>KLIK</i> pada button yang disediakan, kemudian secara otomatis semua yang tertulis dalam area tersebut akan tercopy hingga pembaca atau pengunjung tinggal pastekan hasilnya. Sangat sederhana bentuknya dan dapat berfungsi dengan baik di Mozilla Firefox serta Internet Explorer. Anda dapat menyimpan javascript dan kode CSS-nya melalui Add a Gadget (di Page Elements) atau jika mau sedikit telaten hingga semua kode CSS terkumpul di satu tempat, silahkan simpan kode CSS-nya di atas <strong>]]></b:skin></strong>. Javascript bisa diletakkan di bawah kode <strong>]]></b:skin></strong> atau di bawah <strong><head></strong>. O, ya ..., jika anda ingin menyimpan kode CSS di atas kode <strong>]]></b:skin></strong>, jangan lupa <a name='more'></a>untuk membuang tag pembuka <strong><style type="text/css"></strong> dan tag penutupnya <strong></style></strong><br /></div><p class="gray" align="justify"> Kode CSS Select and Copy</p><br /><pre class="blue" style="height:250px;"><style type="text/css"><br />a.copytubruk{<br /> padding:4px 8px;<br /> border:2px solid #555;<br /> border-radius:6px;<br /> color:#0099FF;<br /> cursor:pointer;<br /> font-weight:bold;<br /> text-decoration:none;<br /> background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/blueOrangeListV36H1.gif) top right repeat-x;<br />}<br />a.copytubruk:hover{<br /> color:red;<br /> background-position:bottom left;<br />}<br />textarea#txt1{<br /> background:#eee;<br /> color:#000033;<br /> font-family:Arial;<br /> font-size:12px;<br /> border:2px solid #444;<br /> border-radius:6px;<br /> padding:15px 8px;<br />}<br /></style></pre><br /><p class="gray">Javascript Select and Copy</p><br /><pre class="blue"><script type="text/javascript"><br />//<![CDATA[<br />function copyText(theId) {<br /> var obj = document.getElementById(theId);<br /> obj.focus();<br /> obj.select();<br /> copyToClipb(obj.value);<br />}<br />function copyToClipb(txt) {<br /> if (window.clipboardData) {<br /> window.clipboardData.setData("Text", txt);<br /> }<br /> else if (window.netscape) {<br /> netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');<br /> var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);<br /> if (!clip) return;<br /> var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);<br /> if (!trans) return;<br /> trans.addDataFlavor('text/unicode');<br /> var str = new Object();<br /> var len = new Object();<br /> var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);<br /> var copytext = txt;<br /> str.data = copytext;<br /> trans.setTransferData("text/unicode", str, copytext.length * 2);<br /> var clipid = Components.interfaces.nsIClipboard;<br /> if (!clip) return false;<br /> clip.setData(trans, null, clipid.kGlobalClipboard);<br /> }<br /> return false;<br />}<br />//]><br /></script></pre><br /><p class="gray">xHTML Select and Copy</p><br />Gunakan xHTML di halaman posting atau widget. Masukkan teks di antara tag pembuka <textarea> dan tag penutup </textarea>l;<br /><pre class="blue"><form style="text-align:center;"><br /><a href="#" onClick="copyText('txt1'); return false;" class="<strong>copytubruk</strong>">Copy text</a><br/><br /><<strong>textarea</strong> id="<strong>txt1</strong>" <strong>cols</strong>="<strong>40</strong>" <strong>rows</strong>="<strong>8</strong>"><br /><i>Memasang sebuah blog counter kini menjadi hal mendasar sangat teramat penting bagi sebuah blog atau web. Melalui widget semacam ini, terlebih seperti Histats Counter, akan memberi banyak keuntungan dalam aktifitas monitoring pergerakan kemajuan blog yang kita kelola dengan susah payah dan banyak pengorbanan. Detik demi detik perkembangan dan seluruh aktifitas pengunjung, jumlah pengunjung, domisili pengunjung hingga posting terfaforit bisa terlihat hanya dengan klik pada widget yang terpampang.</i><br /><<strong>/textarea</strong>><br /></form></pre><br />Rubah nilai row dan cols untuk merubah ukuran box textarea.<br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com/" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com/" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com13tag:blogger.com,1999:blog-747725801833073244.post-3839630054306823082010-12-19T07:15:00.000-08:002010-12-19T08:22:44.671-08:002 Cara Menghapus Widget atau Gadget di Blogger - Blogspot<div class="buka">Mengapus widget atau yang sering disebut juga sebagai gadget, bagi blogger yang sudah cukup lama terjun di dunia blogging dan suka othak-athik template memang bukan sebuah persoalan, namun bagi beberapa blogger yang baru dalam tahap pengenalan memang kadang terasa begitu sulit. Persoalan atau kesulitan ini biasanya muncul akibat rasa kekuatiran akan terjadinya sebuah kesalahan yang mungkin menyebabkan rusaknya desain blog ketika langkah penghapusan widget atau gadget coba dilakukan. Sesuatu hal yang teramat lumrah dan banyak dialami banyak sobat blogger yang lain. Kurangnya pemahaman tentang desain blog atau template memang jadi masalah bersama karena hampir semua blogger rata-rata tidak mempunyai latar belakang pemahaman desain blog atau kode HTML. Biasanya kemampuan untuk melakukan modifikasi melalui penambahan atau pengurangan kode html adalah hasil belajar secara otodidak ataupun melalui tutorial yang banyak terpostingkan dalam blog-blog yang fokus postingnya tentang kode HTML, javascript dan kode CSS disertai bentuk panduan serta tips dan trik. <br /><br />Seperti yang telah tersampaikan di atas, penghapuysan widget atau gadget memang dapat dilakukan dengan 2 cara:<a name='more'></a><br /><ul><li>Melalui Page Elements (Elemen Laman) --> Add a Gadget (Tambah Gadget).<br />Menghapus widget melalui Elemen Laman merupakan cara termudah yang biasa dilakukan oleh blogger pada umumnya.</li><li>Melalui halaman Edit HTML. Beberapa blogger yang sudah cukup memahami tentang desain blog dan kode HTML acap kali melakukan penghapusan widget bukan melalui Elemen Laman namun justru dengan menghapus langsung widget dimaksud melui kode HTML-nya yang terdapat di halaman EDIT HTML. Penghapusan widget melalui halaman ini sebenarnya juga mempunyai kelebihan jika dibandingkan dengan cara pertama karena beberapa widget tertentu terutama yang berkaitan dengan FEED menjadi lebih mudah cara menghapusnya. Jika anda pernah menggunakan template hasil download (bukan bawaan blogger) maka suatu ketika pasti akan menjumpai sebuah widget bawaan template hasil download tadi yang berupa widget FEED. Jika anda ingin menghapus widget FEED ini melalui Page Elemen maka jalan yang mesti ditempuh jadi lebih njelimet dan berliku, namun ketika anda menghapusnya melalui halaman Edit HTML maka widget FEED akan terhapus dengan waktu super singkat tanpa prosedur berbelit. </li></ul><br /><p class="gray">Menghapus widget (gadget) melalui Elemen Laman (Page Elemen).</p><br /><ul><li>Login ke Blogger.</li><li>Setelah login anda akan menjumpai halaman Dasboard (Dasbor). Silahkan <i>klik</i> link Design (Rancangan).</li><li>Halaman selanjutnya yang terlihat adalah Page Elements (Elemen Laman). Lihat dan cermati widget yang akan di hapus. Jika anda telah memberikan nama pada setiap widget yang terpasang maka dengan cepat akan langsung terlihat nama widgetnya.</li><li><i>KLIK</i> EDIT yang terletak disamping kanan nama widget.</li><li><i>KLIK</i> HAPUS (DELETE) dan lanjutkan dengan <i>klik</i> SAVE (Simpan) yang terletak di ujung kanan atas halaman.</li>Buka blog untuk cek hasil proses penghapusan widget (Gadget).</li></ul><br /><p class="gray">Menghapus widget (gadget) melalui halaman EDIT HTML.</p><br />Cara ke-2 ini memang lebih rumit bagi yang belum memahami desain blog dan kode HTML, namun kadang-kadang cara berbeda ini harus dilakukan juga agar kita lebih cepat memahami tentang kode-kode yang digunakan di template. Belajar dari hal-hal yang terlihat sederhana seperti yang akan kita lakukan ini pasti akan membuat anda secara tak langsung menjadi lebih mengenal desain dasar blog (template), terlebih dengan cara ke-2 ini widget seperti feed daapat dihapus dengan mudah dan cepat. Untuk memulainya, silahkan lakukan:<br /><ul><li>Login ke blogger seperti di atas, akan tetapi setelah <i>klik</i> DESIGN (Rancangan) langkah lanjutannya adalah <i>klik</i> <strong>link EDIT HTML</strong>.</li><li> Setelah masuk di halaman EDIT HTML jangan lupoa back-up template terlebih dahulu dengan <i>klik</i> Download Template Lengkap (Download Full Templates).</li><li> Simpan file templatenya di folder PC.</li><li>Cari dan temukan kode yang terlihat seperti di bawah ini. Kode yang nantinya terlihat akan sesuai dengan widget yang tersimpan di blog, demikian juga nama widgetnya. Sebagai contoh yang akan kita cari dan hapus adalah widget label (dengan nama widget misalnya <strong>Kategori</strong>). Gunakan Ctrl+F untuk mencari teks Kategori. Hasilnya seperti ini:</li><pre class="blue" style="margin-left:-30px;"><b:section class='sidebar' id='newsidebar' preferred='yes'><br /><b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/><br /><span class="OB"><b:widget id='Label1' locked='false' title='<span class="BB">Kategori</span>' type='Label'/></span><br /><b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/><br /></b:section></pre><li>Silahkan hapus kode HTML berwarna oranye (dengan tulisan Kategori sesuai yang kita cari dan ingin hapus), hingga hanya tersisa kode seperti di bawah ini:</li><pre class="blue" style="margin-left:-30px;"><b:section class='sidebar' id='newsidebar' preferred='yes'><br /><b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'/><br /><b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/><br /></b:section></pre><li><i>KLIK</i> SAVE Templates (Simpan Template).</li><li>Buka hasilnya dengan cek di halaman blog dan/atau Page Elements (Elemen Laman).</li><li>Jika anda kesulitan untuk menghapus feed seperti yang tersampaikan di bagian atas, lakukan saja dengan cara seperti ini. Ditanggung mudah, cepat dan amat praktis alias tidak terlalu bertele-tele.</li></ul><br /><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com49tag:blogger.com,1999:blog-747725801833073244.post-67001040359369600112010-12-05T05:03:00.000-08:002010-12-05T07:55:25.898-08:00Free File Hosting: Upload File Gambar dan Javascrip di File Hosting Gratis www.fileave.com<div class="buka"><a href="http://bloggerstuars.blogspot.com/" target="_blank" title="Ehm ..."><img class="rad10L" style="float:left; margin:0 10px 10px 0;hand;width: 200px; height: 57px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhCOhj3Ooyf3FqwHgQ1PDNxow9s5x4rSFQF7iVwpVU8A6r9-k_eERw5Zuj7fINZEaIr4Xe32NMRl0yl1v5wUnfgm7aikmd_8XXxmwQokYdEoV2Hx-jbFfR7JF4sjSgAehAnEBXggMaAykX/s400/01FileAveLogoH200V57.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5547191153236274626" /></a>FileAve.com merupakan sebuah file hosting gratis yang memberi kesempatan blogger untuk menyimpan file hingga 50Mbyte. Sebuah kapasitas yang cukup besar jika menilik dari sifatnya yang "tanpa perlu bayar". FileAve.com memberi keleluasaan bagi kita untuk menyimpan beberapa jenis file seperti gambar/images (.jpg,.png dan .gif), javascript serta kode CSS. Cukup memenuhi syarat untuk menunjang aktifitas ngeblog dan mungkin tak perlu lagi untuk mencari file hosting gratis yang lain. Jika mungkin kita lakukan hanyalah sekedar untuk jaga-jaga (back-up) apabila pada suatu ketika terjadi sesuatu yang tidak diinginkan terhadap file tersimpan (banned spt yang terjadi pada tinypic) ataupun permasalahan yang mungkin menimpa FileAve.com (pailit, dst).<br /><br />Untuk mendapatkan sebuah account baru di FileAve tidaklah sulit. Cukup melakukan registrasi dengan alamat email, user name, password maka sebuah account baru yang memungkinkan kita upload dan menyimpan file segera kita dapatkan.<a name='more'></a><br /><p class="gray">Cara Daftar dan Resgistrasi di FileAve.com</p><br /><ul><li><i>Klik</i> link berikut untuk memulai langkah pendaftaran dan registrasi.<br /><a class="sini" href="http://www.fileave.com/" target="_blank" title="Silahkan KLIK untuk memulai pensdaftaran dan registrasi di FileAve">http://www.fileave.com/</a><div style="clear:both;height:20px;"></div></li><li><i>Klik</i> SignUp, kemudian isi beberapa data pada untuk memenuhi persyaratan registrasi. Lihat contoh pada gambar di samping.<div style="clear:both;height:20px;"></div><a "http://bloggerstuars.blogspot.com/" target="_blank" title="Ehm ..."><img class="rad10L" style="width: 300px;height:224px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBpLqLPoXcCWpWF2U89Kt8Lf1BotxvMcShWd_b83wBaXISJmfVsyU_4BVag6swwpMcy-VTqiHWISRp471PEfx2nUAg5EocSXi8s79fS5kDMjE-KHSrDzwxSyLF3yL2ZzpqjOioOW74IA1/s400/02FileAveCreateAccountSignUp.jpg" id="BLOGGER_PHOTO_ID_5547208898665787058" /></a><div style="clear:both;height:20px;"></div></li><li>Jika anda hanya ingin sekedar mendapatkan account dan segera bisa menyimpan file tanpa memerlukan hal yang lain, silahkan langsung <i>klik</i> "<span class="RB">SKIP</span>".<div style="clear:both;height:20px;"></div><a href="http://gubhugreyot.blogspot.com/" target="_blank" title="best tutorial here"><img class="rad10L" style="width:150px;height:30px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1BkytNHEcPhLoxW1BQxkgT5c_f7OA0ot6ldnAXNZhcF1rLdvl_easQisx41qyL1B03bK3vSa6xRDqJiY04QXVH_d7NuPIfK2M-vFxynzLFFEtp1kqTCAnrKlx7cycdedbqo_sdJmU0ahq/s200/03FileAveSkip.jpg" id="BLOGGER_PHOTO_ID_5547210193479365954" /></a><div style="clear:both;height:20px;"></div></li><li>Silahkan anda <i>klik</i> pada "<span class="OB">Click here</span>" seperti yang terlihat pada gambar di sebelah. Langkah ini diperlukan untuk "login".<div style="clear:both;height:20px;"></div><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Di sini anda bisa baca tutorial lengkap BlogDETIK"><img class="rad10L" style="width:150px;height:58px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAsju49N8eQK8Y9CZNrjLHL3D7OX8zqgEEQpRgCP7M8zjUr6QNICBZynK4qApWk768dK7nHE-Yu2HApz7ZMH7nkMkjK8OYPkntj4AH1cN22gbm-cuoj2oEbVaFIruOhuVsOcmaES_yRAb8/s200/04FileAveAccountSuxesLogin.jpg" id="BLOGGER_PHOTO_ID_5547211103365568786" /></a><div style="clear:both;height:20px;"></div></li><li>Tuliskan <span class="OB">User Name</span> dan <span class="OB">Password</span> untuk melakukan "login".<div style="clear:both;height:20px;"></div><a href="http://gitosimin.blogspot.com/" target="_blank" title="Mas Gitosimin"><img class="rad10L" style="width:150px;height:65px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8IY5D-f99sQ6A5Z-k37jSBA2PzUkEn1mS5wSxMa6iOOvCfBItTLcvw3SY7gOsr5YdhFEWhYMRcq1hiaZpp5dAg6OL6FPgFl040-qOXa7LG3pytwJlw-wmMbX5LRvhjDeYh5wdyKtxvMxU/s200/05FileAveLoginThumb.jpg" id="BLOGGER_PHOTO_ID_5547212570220051490" /></a><div style="clear:both;height:20px;"></div></li><li>Untuk memulai proses upload dan menyimpan file, <i>klik</i> "<span class="OB">Files</span>" yang terletak di sebelah kiri-atas.<div style="clear:both;height:20px;"></div></li><li>Buat Folder setiap jenis file yang akan disimpan dengan menuliskan jenis filenya pada kolom yang tersedia, kemudian "<span class="OB">Create Subfolder</span>".<div style="clear:both;height:20px;"></div><a href="http://gubhugreyot.blogspot.com/" target="_blank" title="More 400 blogger tutorials here!"><img class="rad10L" style="width: 200px;height:22px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtAmHRBWiJBOlfsx4T9dFHQGb52RLucbaXihiaSrDlBWhyphenhyphennjV6Oy60jPHShrRX2AZxd2VxmMa03_FMBWRU-bFgeQDXYUsWswaTVjE8kbkyQs-Bs1tl0KOSl_NlvmLlFM92AhKzJ6pdwdUF/s200/06FileAveCreateSubfolder.gif" id="BLOGGER_PHOTO_ID_5547216651062315474" /></a><div style="clear:both;height:20px;"></div></li><li>Setelah Subfolder selesai di buat, untuk memulai upload silahkan <i>klik pada subfolder tersebut</i>. Bila anda ingin membuat folder baru di dalam subfolder yang telah dibuat (anak subfolder) , <i>setelah klik nama subfolder (javascript),</i> buat dan isi nama untuk anak subfolder dan lanjutkan <i>klik</i> "<span class="OB">Create Subfolder</span>".<div style="clear:both;height:20px;"></div><a href="http://bgsgr.blogspot.com/" target="_blank" title="Berbagai desain cantik dan menarik dengan kode CSS3."><img class="rad10L" style="width: 150px; height: 60px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Sz7gl_YWVsp9EwFQRubK2k467cM31-ZBB_RVSbZFqY2VGMbXk_5G6xOPB5BQ0R03_Fz8XsYOnHmzHz7QqCEFhBUSHa53cjhRWY9lc5FP60rF5dm7SM5Ek7S9FV8ndh2x3Ew8uB_i_FBu/s200/07FileAveJavascript.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_5547218447612383218" /></a><div style="clear:both;height:20px;"></div></li><li>Beberapa nama yang mungkin dipergunakan sebagai subfolder seperti <span class="OB">images</span> (untuk gambar), <span class="OB">CSS</span> (untuk file kode css) dan beberapa nama lain sesuai kebutuhan anda.</li></ul><br /><br /><p class="penutup"> Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com1tag:blogger.com,1999:blog-747725801833073244.post-24074420231886649992010-11-02T00:50:00.000-07:002010-12-13T06:02:40.588-08:00Tips Menggunakan link jQuery - jquery.1.3.2.min.js<div class="buka">Dari sekian banyak javascript, jquery merupakan satu javascript yang paling banyak digunakan blogger. Beberapa desain memanfaatkan berbagai jenis jquery yang telah tersedia, namun yang terbanyak digunakan sebagai dasar pembuatan desain adah jquery 1.3.2.js atau jquery.1.3.2.min.js. Sekalipun edisi terbaru telah direlease dalam bentuk jquery.1.4.2.js, dengan penambahan beberapa fungsi baru yang belum ada di jquery.1.3.2.js, jquery yang luar biasa (1.3.2.js) ini tetaplah menjadi javascript terfavorit. Disamping beban yang lebih enteng, jquery.1.3.2.js sudah sangat memenuhi syarat untuk dikembangkan dalam usaha menciptakan berbagai desain baru pelengkap blog, terlebih untuk blog yang bersifat umum yang tidak memerlukan desain khusus sebagai pelengkap tampilan. <br /><br /><a href="#" onClick="expandingWindow('http://jquery.com');return false" title="KLIK di sini dan anda akan melihat sebuah window baru dengan animasi terbuka"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_bpWTqkO0TZzwz0ShBErqF6wEjO_sI3ixlc86BU99v3Xfsug0DSgeseim_Y9DbcIWhJ7lZ2MbnEuuPnnZ3WHMNWt9KkT0zOEgbK3hEuYEcsbx0lpiz7fnVW92NqZYaZW9-SUNBML68Ve/s200/jQuery.jpg" style="float:left;width:120px;height:33px;border:3px solid #888;padding:3px;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;background:#666;margin:0 10px 5px 0;" /></a>Saat kita menggunakan sebuah desain dengan jquery, kita harus <a name='more'></a>memahami fungsi yang tercipta. Banyak desain lama dan baru juga menggunakan jquery.1.2.6.js misalnya. Banyak desain yang memanfaatkan jquery.1.2.6.js sebenarnya bisa berfungsi sama dengan menggantinya dengan jquery.1.3.2.js. Jadi ketika anda harus menambahkan jquery.1.2.6.js, sementara blog sudah memasang jquery.1.3.2.js atau jquery.1.3.2.min.js, maka kenapa pula harus menambahkan jquery.1.2.6.js. Penambahan jquery baru seperti di atas sebenarnya sudah tidak diperlukan lagi karena fungsi sudah tercover melalui jquery.1.3.2.js. Demikian juga saat sebuah desain baru menggunakan jquery.1.4.2.js. Akan lebih baik seandainya anda coba dulu dengan memanfaatkan jquery.1.3.2.js yang sudah dimanfaatkan/terpasang. Jika cukup dengan jquery.1.3.2.js dan desain berjalan sempurna, maka jquery baru tidak diperlukan lagi. Menambah jquery baru sama artinya dengan menambah beban tak perlu yang akan semakin memperberat beban dan loading blog. Hal-hal yang seperti ini teramat sering terjadi dan umumnya disebabkan masih terbatasnya pemahaman blogger terhadap kode HTML, atau javascript. Satu hal yang wajar dan dapat dimaklumi karena 99% blogger tumbuh dan berkembang dari basic pengetahuan diluar desain blog.<br /><br />Beberapa catatan di bawah ini mungkin bisa anda manfaatkan ketika menggunakan jquery, terutama jquery.1.2.6.js, jquery.1.3.2.js, jquery.1.4.1.js dan jquery.1.4.2.js.<br /><br /><ul><li>jquery.js (tanpa min) dan jquery.min.js (menggunakan min), keduanya mempunyai kegunaan dan fungsi sama. Penggunaan "min" menandakan bahwa jquery tersebut telah di kompres (compress) hingga muatan atau bebannya telah terkurangi dengan tujuan untuk mempercepat waktu loading. Compress jquery dilakukan dengan menghilangkan beberapa keterangan dan spasi yang sebenarnya berfungsi untuk memudahkan pengguna saat membuat desain baru dengan memanfaatkan jquery. Kesimpulannya jika anda hanya sekedar pengguna lebih baik menggunakan jquery.min.js agar loading blog lebih cepat.</li><li>Saat sebuah desain baru ingin anda gunakan, dimana desain tersebut menggunakan jquery.1.2.6.js (atau min), jquery.1.4.1.js (atau min), dan jquery.1.4.2.js (atau min), maka lebih baik coba dulu menggunakan jquery.1.3.2.min.js. Apabila desain bisa bekerja secara sempurna dengan jquery.1.3.2.min.js, maka jquery dalam desain baru tersebut dapat di cover dengan menggunakan jquery.1.3.2.min.js.</li><li>Sebaliknya, bila ada sebuah desain baru hanya dapat berfungsi menggunakan jquery.1.4.2.js, maka sebaiknya seluruh desain yang menggunakan jquery.1.2.6.js, jquery.1.3.2.js atau jquery.1.4.1.js di coba dengan jquery.1.4.2.min.js. Apabila bisa berfungsi baik maka anda cukup gunakan jquery.1.4.2.min.js untuk meng-cover seluruh kebutuhan penggunaan jquery.</li><li>Demi lancarnya (mengurangi trouble) penggunaan jquery, sebaiknya gunakan link:<br /><span class="ON">http://ajax.googleapis.com/ajax/libs/jquery/....../jquery.min.js</span></li><li>Pasanglah link jquery di atas tag pembuka <span class="RN"><head></span> atau di bawahnya dengan posisi paling atas dibandingkan javascript yang lain. Jadi setelah link jquery baru diikuti link-link javascript yang lain.<br /><i>Contoh</i>:<p class="kode"><span class="ON"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script></span><br /><script src="jqhorizaontal.js" type="text/javascript"></script><br /><script src="jqtabcontent.js" type="text/javascript"></script><br />......<br />......<br />dst</p></li><br /><li>Jika sudah cukup memahami cara pencarian kode html dalam template dan pemasangan kode di luar penggunaan "Add a Gadget", sebaiknya simpan link jquery di atas atau di bawah kode <span class="RN"><head></span> karena jika sebuah desain menggunakan jquery sebagai dasar pembuatan desain maka script desain baru harus selalu berada di bawah link jquery. Jika jquery sudah berada di atas atau di bawah kode <span class="RN"><head></span>, maka secara otomatis semua script yang dibuat untuk sebuah desain baru akan selalu berada di bawah jquery yang link-nya terpasang di bagian teratas blog (dekat <head>).</li></ul><br /><p class="penutup"> Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com8tag:blogger.com,1999:blog-747725801833073244.post-58844212614914915492010-10-27T03:41:00.000-07:002010-10-27T07:32:00.829-07:00Membuat Beberapa Efek dengan CSS3 di Widget Label Cloud Blogger<div class="buka">Orang sering bilang bahwa keberbedaan itu membuat sesuatu menjadi indah. Keragaman berbagai sisi kehidupan, alam dan budaya juga membuat bangsa lain banyak tertarik terhadap bangsa kita. Oleh karena itu jika anda suka sesuatu yang tidak biasa atau berbeda dengan yang lain, dan anda salah satu yang selama ini menggunakan "widget Label Cloud Bawaan Blogger" atau mungkin ingin menggunakan tag cloud bawaan blogger-blogspot, satu perubahan menggunakan kode CSS3 akan membuat cloud sederhana ini terlihat berbeda dan lebih indah dari biasanya. Kita akan tambahkan beberapa efek baru berupa background-color, color, border serta animasi yang tercipta melalui CSS3 transition dan CSS3 transformation. Jadi ketika cursor menyentuh teks link di label cloud maka akan muncul sebuah background color secara perlahan. Bersamaan dengan itu maka terjadi pula perubahan color teks link sera munculnya border. Satu tambahan efek animasi yang tercipta dari CSS3 transition adalah bertambah besarnya teks link bersamaan dengan terlihatnya background, perubahan color dan border link. Cukup menarik dan aku kira cukup pantas untuk menghiasai blog anda.<br /><br />Bagi yang belum menggunakan atau memanfaatkan widget label tag cloud bawaan blogger, anda bisa ikuti langkah berikut ini untuk memasangnya di blog.<a name='more'></a><br /><ul><li><b>Login</b> : Login ke Blogger.<ul class="dua"><li class="dua">Tuliskan Alamat Email</li><li class="dua">Tuliskan Password</li><li class="dua"><i>KLIK</i> Login.</li></ul></li><li>Setelah halaman Dasboard terbuka, <i>klik</i> Design/Rancangan.</li><li>Sesaat setelah anda klik, maka akan terbuka Page Elemen/Elemen Laman. Silahkan <i>klik</i> Add a Gadget (yang bergaris putus-putus) di bagian sidebar kanan atau kiri.</li><li>Selanjutnya akan terlihat beberapa widget yang disediakan blogger, seperti <b>Stats</b>, <b>Popular Posts</b>, <b>Archive</b> serta beberapa yang lain termasuk <b>Label</b>.</li><li>Silahkan <i> klik</i> "Label". Tunggu hingga pilihan bentuk widget muncul.</li><li>Akan terlihat pilihan <br /><i>Tampilkan</i> : <strong>Daftar</strong> dan <strong>Cloud</strong>. Beri tanda/pilih <b>Cloud</b>.</li><li><i>KLIK</i> SAVE/Simpan.</li><li>Buka blog dan lihat serta coba hasilnya.</li></ul><br /><p class="gray">Cara untuk memberi efek baru di widget label tag cloud</p><br /><ul><li>Jika pada langkah di atas, setelah <b>Design/Rancangan</b> anda <i>klik</i> Add a Gadget, maka untuk merubah tampilan tag cloud yang anda <i>klik</i> adalah "Edit HTML".</li><li>Sesaat setelah <i>klik</i> Edit HTML akan terlihat deretan Kode CSS dan xHTML penyusun blog.</li><li>Lakukan back-up Template terlebih dahulu dengan <i>klik</i> "Download Template Lengkap/Download Full Template. Simpan file template anda. File template ini bisa anda gunakan kembali bila diinginkan dengan <i>klik</i> Choose File-Unggah. Selain itu back-up template berfungsi untuk menjaga bila terjadi kesalahan saat modifikasi blog hingga template bisa dipulihkan seperti sebelumnya (Choose File-Unggah).</li><li>Cari kode <b class="cn">]]></bskin></b>. Gunakan <span class="RB">Ctrl+F</span>. Jika membutuhkan tutorial cara mencari kode, silahkan <i>klik</i> <a class="disini" href="http://tantytm.blogspot.com/2010/05/cara-cepat-mencari-kode-html-template.html" target="_blank" title="Cara mencari kode HTML di template">di sini!</a></li><li>Copy-paste kode CSS di atas <b class="cn">]]></bskin></b>.</li><li><i>KLIK</i> SAVE Templates/Simpan Template kemudian buka blog untuk membandingkan hasil perubahan yang dilakukan.</li></ul><br /><p class="gray" style="width:100px;text-align:center;">Kode CSS</p><br /><pre class="blue"><strong>.cloud-label-widget-content span a</strong>{<br /> background:transparent;<br /> text-decoration:none;<br /> text-shadow:1px 1px 1px transparent; <br /> padding:2px 5px;<br /> border:1px solid transparent;<br /> opacity:0.7;<br /> -o-transition:all 0.6s ease-in;<br /> -moz-transition:all 0.6s ease-in;<br /> -webkit-transition:all 0.6s ease-in;<br />}<br /><strong>.cloud-label-widget-content span:hover a</strong>{<br /> background:blue;<br /> color:white;<br /> text-decoration:none;<br /> text-shadow:1px 1px 1px #000;<br /> border:1px dotted red;<br /> opacity:1.0; <br /> border-radius:3px;<br /> -moz-border-radius:3px;<br /> -webkit-border-radius:3px;<br /> -o-transform:scale(1.2);<br /> -moz-transform:scale(1.2);<br /> -webkit-transform:scale(1.2);<br />}</pre><p><br /><b class="cara">Keterangan</b></p><br /><ul><li>Desain baru ini akan bekerja secara maksimal di browser pendukung CSS3 terutama Opera dan Mozilla.</li><li>Anda dapat merubah color dan background supaya lebih pas dengan blog anda.</li><li>Bila anda ingin melihat demonya silahkan <i>klik</i> link di bawah ini. Lihat pada "Labels Cloud" di ujung bawah sebelah kanan!</li></ul><br /><div class="demo"><a href="http://bloggerstuars.blogspot.com/2010/04/promosikan-blog-anda-di-tecnorati-baru.html" target="_blank" title="DEMO Label Cloud hasil modifikasi dengan menampilkan beberapa efek baru!">D E M O</a></div><br /><p class="penutup"> Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com8tag:blogger.com,1999:blog-747725801833073244.post-68850047406218397832010-10-23T21:12:00.000-07:002010-10-27T07:18:02.762-07:00Cara Mengetahui dan Meningkatkan Harga Jual Blog<div class="buka">Mungkin kata "Harga Jual Blog" masih terdengar cukup aneh di telinga. Namun di jaman seperti sekarang apa yang nggak bisa di jual? Semua bisa, bahkan blog pun ada harganya. Mengetahui nilai harga jual blog yang telah kita kelola, pelihara dan selalu dengan setia dijejali dengan posting serta kerap dijenguk amatlah wajar. Ini bisa kita gunakan tolok ukur seberapa besar kemajuan yang telah tercapai dibalik kelelahan tenaga dan pikiran serta besarnya pengorbanan yang diberikan selama membuat hingga menjadi seperti sekarang. <a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Harga Jual Blog"><img class="rad10L" style="margin-top:5px;width: 119px; height: 211px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jp5EEoAYIMBokMGrLZz5SlrPWrpOAKUGFBD459_ZV7u_NMvKNKpBCHXBmBh7wOKhV31IjvRWZCK5ab9Ia2E21hlDFHJFxI_Qx0oc6n9tvhu0EkimuKQcwo0Oi833Zk8d6p5VBTipQFQr/s400/Harga-jual-Blog.jpg" id="BLOGGER_PHOTO_ID_5531461677549974146" /></a>Tentang bagaimana hubungan harga jual blog dan cara menjualnya, terus terang aku sama sekali tidak tahu (karena harga jual blog ini pun untuk saat ini sama sekali belum ada alias $0.00).<br /><br />Kekecewaan setelah melihat harga jual blog, apabila memang belum ada harganya, tentu saja mengecewakan hati. Hal seperti ini hendaknya bukan menjadi pintu bagi patahnya semangat, namun harus menjadi cambuk agar dalam tempo secepatnya harga jual tersembul. Aku yakin bahwa selama komitmen untuk terus membangun tanpa kenal patah semangat terus terpupuk, pasti dalam tempo yang tak lama apa yang menjadi harapan akan segera terwujud. Mengetahui harga jual tak ubahnya ukuran seberapa besar prestasi yang telah tergapai di dunia blogger. Semakin mahal harga secara otomatis dibarengi dengan peningkatan prestasi dan popularitas, dan begitu pula sebaliknya.<br /><br /><p class="gray">Bagaimana cara meningkatkan harga jual atau secepatnya mendapatkan harga jual blog?</p><a name='more'></a><br />Banyak cara bisa kita lakukan agar prestasi ngeblog dan harga jual blog segera di dapat atau segera meningkat.<br /><br /><ul><li>Tingkatkan rutinitas atau frekwensi posting.</li><li>Buat posting yang berkualitas.</li><li>Buat posting yang banyak disukai pengunjung blog.</li><li>Buat sebanyak mungkin posting original.</li><li>Gunakan domain yang mampu mensupport popularitas dengan cepat (misalnya yang depannya pakai www. atau gunakan beberapa domain berbayar yang terpercaya)</li><li>Lakukan promosi blog segencar mungkin, baik melalui blogwalking atau memberi komentar, face book, tweeter atau layanan promosi gratis yang banyak tersebar.</li><li>Buat blog sebanyak mungkin dan masukkan link antar blog atau lakukan tukar link (link exchange-banner exchange) dengan sesama blogger.</li><li>Buat tampilan blog yang menarik.</li><li>Usahakan blog mempunyai kecepatan loading yang baik.</li><li>Jangan lupa perbanyak lembur dan rajin berdoa serta berpuasa (kalau perlu setahun dua tahun puasa penuh).</li><li>Jika sudah berhasil jangan lupa ambil widgetnya dan pasang di blog. Hal seperti ini layak dilakukan sebagai "upah" atas "kinerja yang telah dilakukan".</ul><br /><br /><b class="OB">Layanan untuk Mengetahui Harga Jual Blog</b><br /><br />Jika ada di antara sobat yang mau mengetahui seberapa besar harga jual blognya, silahkan KLIK link di bawah ini. Cukup tuliskan alamat blog anda dan lanjutkan dengan <i>KLIK Submit</i>.<br /><br /><a class="sini" href="http://www.business-opportunities.biz/projects/how-much-is-your-twitter-worth/" target="_blank" title="KLIK untuk melihat harga jual blog anda!">http://www.business-opportunities.biz/projects/how-much-is-your-twitter-worth/</a><br /><br /><p class="penutup"> Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com9tag:blogger.com,1999:blog-747725801833073244.post-5424173355331366402010-10-22T05:06:00.000-07:002010-10-22T06:32:58.392-07:00Cara Membuat 2-dua Elemen Baru di Bawah Box Posting<div class="buka">Membuat 2 buah Elemen baru di bawah Post Widget/box posting/kolom komentar pasti akan sangat bermanfaat bagi siapapun. Elemen baru ini bisa dimanfaatkan untuk berbagai widget, terutama widget yang berkaitan dengan posting, seperti recent posts, related posts atau popular posts. Dengan letak yang tak jauh dari box posting tentu menjadi sangat ideal sekali. Selain widget yang tersebut di atas, mungkin sampeyan juga bisa memindahkan widget profile, stats atau atau label/categories. Yah ..., kenapa tidak? Sesuatu yang baru selama tidak merugikan aku kira layak untuk di coba. E ... barangkali pas buat blog sampeyan?!<br /><br />Membuat widget baru dengan posisi seperti di atas tidaklah sesulit yang dibayangkan. Sampeyan bisa membuatnya dalam waktu 1/2 jam hingga 1 jam. Waktu yang lumayan lama ini tak lepas dari upaya menciptakan elemen yang berukuran pas dengan lebar halaman posting. Yah ...., mungkin kita harus merubah ukuran lebar dalam beberapa kali percobaan agar ukuran ke-2 widget baru benar-benar tepat dan presisi dengan ruang yang tersedia, baik di page elements atau di halaman blog. Untuk membuatnya silahkan ikuti langkah berikut.<a name='more'></a><br /><p class="gray">Cara Membuat Element Baru di Bawah Post Widget</p><br /><ul><li><strong>Login</strong> : Login ke Blogger.<ul class="dua"><li class="dua">Tulis User Name atau Alamat Email.</li><li class="dua">Tulis Password/Kode Rahasia/Sandi.</li><li class="dua"><i>KLIK</i> "Login".</li></ul></li><li><strong>Dasboard/Dasbor</strong> : Di halaman selanjutnya setelah <i>klik</i> "Login" akan terlihat halaman Dasboard. <i>Cari</i> dan <i>klik</i> "Design/Rancangan".</li><li><strong>Design/Rancangan</strong> : <i>KLIK</i> "Edit HTML".</li><li><strong>Edit HTML</strong> : Lakukan Back-up Templates.<ul class="dua"><li class="dua"><i>KLIK</i> "Download Template Lengkap/Full Download Templates.</li><li class="dua">Simpan file template di folder PC. Berikan nama yang mudah dikenali disertai waktu penyimpanan (misal.Modifikasi-OKT22-10) agar setiap kali back-up kita punya data template dengan kronologis yang terdata rapi.</li><li class="dua">Kembali ke Halaman Edit HTML.</li></ul></li><li>Cari kode <b class="cn">]]></b:skin></b>, kemudian <i>copy</i> dan pastekan <i>di atas</i> kode <strong>]]></b:skin></strong>.</li><li>Lanjutkan dengan <i>mencari kode</i><b class="cn kiri"> <b:section class='main' id='main' showaddelement='no'></b> Di bawah kode tersebut akan terdapat kode berikutnya dengan bentuk seperti ini:</li><p class="kode"><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/><br /></b:section></p><br /><li>Letakkan xHTML tepat di bawahnya.</li><li><i>KLIK</i> "SAVE Templates/Simpan Template".</li><li>Lihat hasilnya dengan membuka Page Elements/Element Laman. Bila penambahan kode berhasil dengan baik, maka akan terlihat dua buah element baru tepat di bawah Post Widget.</li><li>Coba gunakan untuk menempatkan widget dan lihat hasilnya dengan membuka blog.</li><li>Untuk percobaan sampeyan bisa menggeser (drag) widget profile dan satu widget yang lain untuk ditempatkan di elemen yang baru selesai dibuat.</li></ul><br />Jika mungkin sampeyan ingin melihat seperti apa yang dimaksud dengan membuat 2 elemen baru di bawah boks posting, silahkan buka DEMO di bawah ini. Adapun element baru akan terlihat seperti gambar berikut.<br /><a href="http://gubhugreyot.blogspot.com/"><img class="rad10C0" style="margin:20px auto;width: 400px; height: 253px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjspqEaFsIb3C_H2g8MWLqRUUXztpoashxh0fv6wt9dH-HfLSjFZaq7KIahjOrcBVMmCLXRNila5_qTh_dHBehsonvsWRKt_2Vu4QOUXmebAn4qq2FJ3qvDYwDhiiMV4OU5DJXIPszULQfr/s400/elemen-bawah-posting-box.jpg" id="BLOGGER_PHOTO_ID_5530841408456122882" /></a><br /><div class="demo"><a href="http://bgsgr.blogspot.com/2010/09/demo-membuat-gambar-image-berderet.html" target="_blank" title="Silahkan klik untuk melihat demo">D E M O</a></div><br /><i>Lihat di bawah kolom komentar</i>. Dua widget dalam elemen baru <span class="RN">di bawah boks posting</span> berupa <span class="OB">Releted posts</span> dan <span class="OB">Recent Posts using jQuery-CSS3</span>.<br /><p class="gray" style="width:200px;">Kode CSS</p><br /><pre class="blue"><strong>#bawahpostingkiri</strong>, <strong>#bawahpostingkanan</strong> {<br /> word-wrap: break-word; <br /> overflow: hidden; <br /> padding: 0;<br /> margin: 0;<br />}<br /><strong>#bawahpostingkiri</strong> {<br /> float: left;<br />}<br /><strong>#bawahpostingkanan</strong> {<br /> float:right;<br />}<br /><strong>#bawahpostingL</strong> {<br /> margin:20px 5px 15px 0;<br /> padding:5px;<br />}<br /><strong>#bawahpostingR</strong> {<br /> margin:20px 0 15px 5px;<br /> padding:5px;<br />}<br /><strong>#bawahpostingL .widget</strong>, <strong>#bawahpostingR .widget</strong> {<br /> margin:0;<br /> padding:0<br />}<br /><strong>#bawahpostingL .widget</strong> {<br /> width:185px;<br />}<br /><strong>#bawahpostingR .widget</strong> {<br /> width:185px;<br />}<br /><br /><span class="RBS">]]></b:skin></span></pre><br /><p class="gray" style="width:100px;">xHTML</p><br /><pre class="blue"><div id='<b class="cn">bawahpostingkiri</b>'><br /><b:section class='<b class="cn">bawahpostingL</b>' id='<b class="cn">bawahpostingL</b>' showaddelement='<b class="cn">yes</b>'/><br /></div><br /><div id='<b class="cn">bawahpostingkanan</b>'><br /><b:section class='<b class="cn">bawahpostingR</b>' id='<b class="cn">bawahpostingR</b>' showaddelement='<b class="cn">yes</b>'/><br /></div></pre><br /><p class="gray" style="width:400px;">Contoh penempatan dan penyimpanan xHTMLxHTML</p><br /><pre class="blue"><span class="YN"><b:section class='main' id='main' showaddelement='no'><br /><b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/><br /></b:section></span><br /><br /><div id='<b class="cn">bawahpostingkiri</b>'><br /><b:section class='<b class="cn">bawahpostingL</b>' id='<b class="cn">bawahpostingL</b>' showaddelement='<b class="cn">yes</b>'/><br /></div><br /><div id='<b class="cn">bawahpostingkanan</b>'><br /><b:section class='<b class="cn">bawahpostingR</b>' id='<b class="cn">bawahpostingR</b>' showaddelement='<b class="cn">yes</b>'/><br /></div></pre><br /><p class="cara">Catatan/Keterangan</p><br /><ul><li>Kode yang <span class="YN"> berwarna kuning</span> adalah kode yang terdapat di template. Silahkan simpan kode baru penambah 2 elemen dengan posisi seperti terlihat di atas.</li><li>Penambahan widget dengan ukuran width:185px; ini dilakukan di Template Tata Letak (Minima/Thisaway) dengan kondisi masih seperti aslinya, dimana lebar (width) pada post widget (<strong>#main-wrapper</strong>) sebesar <b class="cn">410px</b>.</li><li>Jumlah lebar ke dua elemen baru berkisar lebar <strong>#main-wrapper</strong> atau <strong>#main-wrap</strong> dikurangi 40px s/d 60px. Dalam kode di atas jumlah lebar dua element baru = 185px + 185px = 370px. Lebar #main-wrapper = 410px.</li><li>Anda dapat merubah lebar kiri dan kanan dalam ukuran berbeda.</li><li>Akan lebih baik jika anda gunakan selisih yang cukup besar dengan main-wrap, baru kemudian setelah berhasil lebar pada elemen baru sedikit demi sedikit diperbesar hingga diperoleh ukuran tepat.</li><li>Periksa setiap perubahan yang dilakukan dengan melihat hasilnya di Elemen Laman dan halaman blog.</li><li>Untuk memudah cek hasil perubahan, gunakan elemen baru untuk wadah widget profile dan satu widget yang lain.</li></ul><br /><p class="penutup"> Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com10tag:blogger.com,1999:blog-747725801833073244.post-81263215352307420322010-10-17T23:24:00.000-07:002010-10-18T02:02:10.998-07:002 Cara Merubah Text Read More/Baca Selengkapnya di Blogger-Blogspot<div class="buka">Cara mengganti atau merubah <i>teks read more</i> atau <i>baca selengkapnya</i>, yang setiap kali kita jumpai di banyak blog bisa dilakukan dengan dua cara. <ul><li>Melalui Widget Post</li><li>Melakukan modifikasi di template.</li></ul>Dua cara yang berbeda untuk merubah teks read more sebenarnya mempunyai tujuan yang sama, yaitu untuk membuat wajah read more yang berbeda melalui perubahan teks read more (baca selengkapnya). Kemudahan yang diberikan blogger untuk melakukan perubahan teks read more setidak-tidaknya akan memunculkan kreatifitas blogger untuk menuangkan kata yang variatif dan menarik hingga kesan "seragam" atau "monoton" dalam tampilan read more tak akan terjadi.<br /><br />Dari dua pilihan perubahan yang bisa dilakukan, merubah teks read more melalui widget post merupakan cara termudah dan tercepat yang bisa dilakukan semua blogger. Perubahan dilakukan melalui "Page Element/Element Laman". Cara yang ke-2 (modifikasi) hanya dapat dilakukan melalui halaman "Edit HTML".<a name='more'></a><br /><p class="gray">Merubah teks read more melalui widget post</p><br /><ul><li><strong>Login</strong> : Gunakan User Name (Nama Pengguna) atau Alamat Email (Email Address) dan Password (Kode Rahasia/Sandi).</li><li><strong>Dashboard/Dasbor</strong> : Setelah memasuki halaman Dasbor, <i>klik</i> "Design/Rancangan".</li><li><strong>Design/Rancangan</strong> : Ketika halaman halaman ini terbuka, anda sudah masuk di <b>Page Element/Elemen Laman</b>. Halaman ini mempunyai ciri khusus dimana di dalamnya terdapat beberapa blok/box yang sebagian bergaris-putus-putus bertuliskan <b>Add a Gadget</b> yang terletak di bagian atas, tengah, kanan dan/atau kiri serta di bagian bawah. Dari sekian banyak blok penyusun pola dasar blog ini ada yang <i>berukuran paling besar berada di tengah-tengah halaman</i>. Inilah yang disebut sebagai <b>widget post</b>. <i>KLIK</i> pada bagian bawah yang bertuliskan <b>Edit</b>. Tunggu hingga sebuah window baru dengan judul "<strong>Mengkonfigurasi Posting Blog</strong>" yang di dalamnya berisikan beberapa variable yang berkaitan dengan posting terlihat (seperti gambar di bawah).</li><li><i>Rubah teks</i> yang bertuliskan "<strong>Baca Selengkapnya</strong> dengan teks yang anda sukai.</li><li><i>KLIK</i> "SAVE/Simpan".</li><li>Buka hasilnya dengan membuka halaman blog atau halaman blog yang sebelumnya sudah bertuliskan baca selengkapnya/read more.</li><li>Selesai!</li></ul><br /><a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Beast Tutorial here!"><img class="rad10C0" style="width: 400px;height:105px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitKhj8r9HSTGNokdxXanDyCZrNwlu4LJ0ryu6WCiMMoloKou1_AhBn0hCWpq6A66HYwEw-gvY-j3LaCmuSj9DpqoHUtWpVnW60SSxxJms4vzhkMZYrZm1xoBjwlX5PeMN9h_fyWqFouqtm/s400/Read-More-Widget-Post20%25.jpg" id="BLOGGER_PHOTO_ID_5529282832652256546" /></a><br /><b class="cara">Catatan:</b><br /><ul><li>Jika tanda panah di sebelah kanan terhapus dan anda ingin mengembalikan tanda panah ke bentuk semula, tambahkan kode <b class="cn">&raquo;</b> (setelah teks pengganti read more/baca selengkapnya).</li><li>Anda dapat juga mengganti dengan tampilan yang lain seperti misalnya gambar "<span class="RBS">♣</span>" (kode = <b class="cn">&clubs;</b>) atau mungkin seperti ini "<span class="RBS"> ♠</span>" (kode = <b class="cn">&spades;</b>).</li></ul><br /><p class="gray">Merubah teks read more melalui halaman Edit HTML</p><br />Perubahan yang dilakukan melalui halaman "Edit HTML" akan meniadakan fungsi perubahan melalui "widget post". Supaya fungsi perubahan teks read more melalui "widget post" dengan mudah dapat dikembalikan ke bentuk semula, modifikasi yang kita lakukan tidak akan menhapus kode yang berfungsi untuk menampilkan teks read more bawaan template. Kode ini akan kita buat tetap pada tempatnya dan untuk mematikan fungsinya kita akan sembunyikan dengan kode tertentu. <br />Langkah yang harus dilakukan untuk perubahan teks read more sebagai berikut:<br /><ul><li>Setelah tadi anda login hingga sampai di "Page Elements", lanjutkanlah dengan <i>KLIK</i> "<strong>Edit HTML</strong>". </li><li><i>KLIK</i> Download Template Lengkap untuk melakukan "backup template". Simpan file template di folder PC. </li><li>Setelah file tersimpan dengan baik, cari kode <b class="cn"><data:post.jumpText/></b>.</li><li>Ganti kode dengan kode di bawah.</li><li><i>KLIK</i> <strong>SAVE Templates/Simpan Template</strong>.</li><li>Buka blog dan lihat hasilnya!</li></ul><br /><p class="kode"><span class="RN">Tulis teks pengganti read more di sini!<br/><!--<b class="cn"><data:post.jumpText/></b>--></span></p><br />Setelah perubahan maka bentuk kode di sekitar kode tersebut seperti di bawah ini:<br /><pre class="blue"><div class='jump-link'><br /> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><br/><span class="RN">Tulis teks pengganti read more di sini!<!--<b class="cn"><data:post.jumpText/></b>--></span></a><br /> </div></pre><br /><b class="cara">Keterangan:</b><br /><ul><li>Ganti "Tulis teks pengganti read more di sini!" dengan dengan teks read more yang baru.</li><li>Jika ingin mengembalikan fungsi kode kebentuk semula, hapus teks pengganti read more dan kode <b class="cn"><!--</b> serta kode <b class="cn">--></b></li></ul> <br /><br /><p class="penutup"> Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com9tag:blogger.com,1999:blog-747725801833073244.post-91802435362712129462010-10-14T14:19:00.000-07:002010-10-14T14:38:49.929-07:00Menampilkan Nama dan Photo Blogger di Setiap Posting<p style='font-weight:bold;font-style:italic;color:red;border-bottom:1px dotted #555;margin-bottom:5px;'><span style="color:lightblue;font-style:normal;">posted by:</span> Tanty Maharani »</p><br /><div class="buka"><a href="http://tantytm.blogspot.com/" target="_blank" title="Click me, please!"><img style="float:left;margin:0 8px 5px 0;width:43px;height:56;padding:2px;border:3px solid #555;background:#777;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;" src="http://i41.tinypic.com/352oqab.gif" /></a><span style='font-weight:bold;font-style:italic;color:blue;border-bottom:1px dotted #555;padding-right:10px;' class='kiri'>posted by: Tanty Maharani </span>Photo disamping merupakan satu hasil modifikasi pada template blog. Anda dapat mencobanya dengan menambahkan kode HTML baru di dalam template, baik untuk menampilkan nama author, photo author atau sekaligus dua-duanya disetiap posting di depan huruf pertama posting dan di atas posting. Untuk photo author akan berada di depan teks pertama posting, sedang nama author berada di atar posting persis. Jika anda ingin menampilkan nama author di depan teks pertama posting, maka cukup dilakukan dengan merubah <strong>tag p</strong> menjadi <strong>span </strong>dan tambahkan <strong>padding-right:10px;</strong>. <br /><br />Agar photo author atau photo blogger tidak terlalu memenuhi halaman posting yang membuat tampilan blog justru kurang menarik, anda bisa menggunakan photo yang berukuran kecil (thumbnail/avatar) dengan ukuran sekitar <strong>40px x 60px </strong>.<br /><p class="gray">Kode HTML-1 : Menampilkan Nama Author di Atas Posting</p><a name='more'></a><br /><p class="kode"><p style='font-weight:bold;font-style:italic;color:blue;border-bottom:1px dotted #555;margin-bottom:5px;'><span class="RB">posted by: Tanty Maharani</span> </p></p><br /><i>Anda bisa rubah warna teks (pada: <b class="cn">color:blue;</b>) agar sesuai dengan warna halaman posting!</i><br /><p class="gray">Kode HTML-1 : Menampilkan Photo Author di Depan Posting</p><br /><p class="kode"><a href="<b>http://tantytm.blogspot.com/</b>" target="_blank" title="<b>Click me, please!</b>"><img style="float:left;width:43px;height:56; margin:0 8px 5px 0;padding:2px;border:3px solid #555;background:#777;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;" src="<b>http://i41.tinypic.com/352oqab.gif</b>" /></a></p><br /><i>Ganti Kode URL dan teks yang berwarna kuning!</i><br /><p class="gray">Kode HTML-1 : Menampilkan Nama Author di Depan Posting</p><br /><p class="kode"><span style='font-weight:bold;font-style:italic;color:blue;border-bottom:1px dotted #555;padding-right:10px;'><span class="RB">posted by: Tanty Maharani</span> </span></p><br /><p class="gray">Cara Menggunakan Kode/Menyimpan kode HTML di Template</p><br /><ul><li><strong>Login</strong> : Gunakan User Name (Nama Pengguna) atau Alamat Email (Email Address) dan Password (Kode Rahasia/Sandi).</li><li><strong>Dashboard/Dasbor</strong> : Setelah memasuki halaman Dasbor, <i>klik</i> Design/Rancangan.</li><li><strong>Design/Rancangan</strong> : Anda akan masuk ke Page Element/Elemen Laman. <i>Carilah</i> link Edit HTML, kemudian <i>klik</i> link tersebut.</li><li><strong>Edit HTML</strong> :<ul class="dua"><strong>Back-up Templates</strong> : Amankan terlebih dahulu template anda. Pengamanan (back-up) template berfungsi untuk menjaga bila terjadi kesalahan dalam modifikasi. Anda dapat mengembalikan lagi template ke keadaan sebelumnya dengan cara mengunggah kode HTML template yang telah tersimpan melalui back-up template ke blogger.<li class="dua"><i>Klik</i> Download Template Lengkap (Full Download Templates).</li><li class="dua">Simpan file template di folder PC.</li><li class="dua">Kembali ke Edit HTML.</li></ul></li><li><i>KLIK</i> <b>Expand Widget Templates</b>, kemudian <i>Cari</i> kode <br /><b class="cn"><data:post.body/></b>. Untuk mempermudah dan mempercepat pencarian kode anda bisa gunakan <span class="RB">Ctrl+F</span>.</li><li>Letakkan Kode HTMl tepat di depan kode di atas.</li><li><i>KLIK</i> <b>Simpan Template/SAVE Template!</b></li></ul><br /><p class="gray2">Contoh Posisi Kode: Nama Author di atas Posting</p><br /><p class="kode"><p style='font-weight:bold;font-style:italic;color:blue;border-bottom:1px dotted #555;margin-bottom:5px;'><span class="RB">posted by: Tanty Maharani</span> </p><br /><b class="cn"><data:post.body/></b></p><br /><p class="gray">Contoh Posisi Kode: Photo Author di Depan Posting</p><br /><p class="kode"><a href="<b>http://tantytm.blogspot.com/</b>" target="_blank" title="<b>Click me, please!</b>"><img style="float:left;width:43px;height:56; margin:0 8px 5px 0;padding:2px;border:3px solid #555;background:#777;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;" src="<b>http://i41.tinypic.com/352oqab.gif</b>" /></a><b class="cn"><data:post.body/></b></p><br /><i>Ganti nilai width dan height untuk merubah tinggi dan lebar photo!</i><br /><p class="gray">Contoh Posisi Kode: Nama Author di Depan Posting</p><br /><p class="kode"><span style='font-weight:bold;font-style:italic;color:blue;border-bottom:1px dotted #555;padding-right:10px;'><span class="RB">posted by: Tanty Maharani</span> </span><b class="cn"><data:post.body/></b></p><br /><p class="gray">Contoh Posisi Kode: Nama dan Photo Author di Depan Posting</p><br /><p class="kode"><a href="<b>http://tantytm.blogspot.com/</b>" target="_blank" title="<b>Click me, please!</b>"><img style="float:left;width:43px;height:56; margin:0 8px 5px 0;padding:2px;border:3px solid #555;background:#777;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;" src="<b>http://i41.tinypic.com/352oqab.gif</b>" /></a><span style='font-weight:bold;font-style:italic;color:blue;border-bottom:1px dotted #555;padding-right:10px;'><span class="RB">posted by: Tanty Maharani</span> </span><b class="cn"><data:post.body/></b></p><br /><p class="penutup">Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com6tag:blogger.com,1999:blog-747725801833073244.post-33644298662566479502010-10-14T12:04:00.001-07:002010-10-14T12:12:09.750-07:00Keuntungan dan Cara Membuat Link Demo<div class="buka"><span style="font-family:Courier New;">Beberapa blog sangat memerlukan </span>sebuah link demo untuk menampilkan "sebuah fungsi ataupun bentuk lain yang tak mungkin di tampilkan di halaman posting (blog) karena berbagai hal, seperti misalnya beban yang teramat besar (baik ukuran ataupun kode yang digunakan). Untuk membuat sebuah bentuk DEMO, maka kita harus membuat blog baru yang khusus diperuntukkan untuk menampilkan segala sesuatu yang tak mungkin ditampilkan di blog. beberapa keuntungan akan diperoleh blogger dengan pemanfaatan blog baru sebagai demo, bahkan jika anda membuatnya dalam jumlah yang cukup banyak maka beberapa keuntungan bisa didapatkan sekaligus.<br /><ul><li><i>Menciptakan link baru bagi blog utama</i>. Dengan adanya satu atau beberapa link demo maka secara otomatis blog utama mempunyai beberapa buah link yang bermanfaat untuk percepatan peningkatan popularitas. Tentu saja dalam blog demo ini harus ditambahkan sedikit teks artikel serta link untuk kembali ke blog utama.</li><li><i>Meringankan beban (loading) blog utama.</i> Jika anda memuat posting tentang tutorial atau banyak menggunakan gambar untuk visualisasi materi posting, maka anda cukup menampilkan gambar yang berukuran besar atau demo tutorial di blog demo. Blog utama cukup di isi dengan gambar/image yang berukuran kecil sehingga beban loading blog akan tetap enteng. Bila hal ini berkaitan dengan tutorial kode HTML, maka dengan demo di blog lain secara otomatis tidak akan terlalu banyak kode CSS, javascript atau xHTML yang harus dijejalkan di blog utama.</li><li><i>Keuntungan ekonomis</i>. Dalam blog yang menyertakan iklan/adsense blog demo akan menjunjang penghasilan blogger karena akan banyak ruang/tempat untuk menampilkan adsense.</li><li><i>Meningkatkan semangat posting.</i> Dengan beberapa blog yang dimiliki membuat blogger punya lebih banyak tanggung jawab "untuk menyentuh" setiap blog yang dimiliki karena selalu berkaitan dengan posting di blog utama. Ini akan membuat rutinitas posting menjadi lebih tinggi. Apabila adsense sudah mulai berjalan, penghasilan yang diperoleh pasti akan lebih meningkatkan antusiasme posting/mengelola blog.</li></ul><br /><p class="gray">Cara Membuat Link Demo</p><a name='more'></a><br /><ul><li>Dalam setiap posting anda cukup membuat sebuah link menuju ke blog/posting demo. </li><li>Cara membuatnya bisa dibolak-balik. Membuat demonya terlebih dahulu atau membuat posting utamanya terlebih dahulu.</li><li> Buatlah judul antara blog utama dan demo dengan kata-kata yang berbeda untuk menangkap pilihan pencarian pengunjung dan search engine. Atau anda dapat membuat judul posting dalam bahasa Indonesia dan bahasa Inggris agar posting anda lebih "mendunia".</li><li>Buatlah demo sebaik mungkin hingga siapapun yang melihat akan tertarik untuk membaca tutorial/posting di blog utama. Hal seperti ini sangat mutlak diperlukan karena demo yang tidak menarik membuat pengunjung malas untuk membuka blog utama tempat dimana artikel atau tutorial terpostingkan.</li></ul><br /><br /><b>Bentuk link D E M O</b><br /><p class="os">Link di blog utama dan blog demo</p><br /><p class="BN left">Blog utama: <b class="cn">http://tantytm.blogspot.com</b></p><br /><p class="BN left">Blog demo: <b class="cn">http://tantytmdemo.blogspot.com</b></p><br /><p class="BN left">Link Posting di blog utama: <b class="cn">http://tantytm.blogspot.com/2010/08/membuat-text-shadow-dengan-jquery-text.html</b></p><br /><p class="BN left">Link Posting di blog demo: <b class="cn">http://tantytmdemo.blogspot.com/2010/08/text-shadow.html</b></p><br /><p cxlass="BN">Link di blog Utama</p><br /><p class="kode"><a href="<b class="cn">http://tantytmdemo.blogspot.com/2010/08/text-shadow.html</b>" title="Klik untuk melihat demo!"><span class="RB">D E M O</span></a></p><br /><p cxlass="BN">Link di blog DEMO</p><br /><p class="kode"><a href="<b class="cn">http://tantytm.blogspot.com/2010/08/membuat-text-shadow-dengan-jquery-text.html</b>" title="Kembali ke Posting!"><span class="RB">Kembali ke tutorial!</span></a></p><br /><ul><li>URL di ambilkan dari judul posting di blog utama dan blog demo.</li><li>Link di blog utama diletakkan di bagian posting yang yang paling strategis.</li><li>Link di blog demo untuk kembali ke tutorial/posting diletakkan di bawah demo.</li></ul><br /><p class="penutup">Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com6tag:blogger.com,1999:blog-747725801833073244.post-13391300282459434632010-10-14T09:18:00.001-07:002012-03-11T01:46:42.169-08:002 (dua) Cara Menghilangkan Navbar Blogger-Blogspot<div class="buka">Sekalipun sebenarnya navbar yang terletak di bagian teratas blog mempunyai kegunaan, namun bagi banyak blogger, navbar dipandang mengganggu tampilan blog hingga berupaya untuk dibuang, disembunyikan, dihapus atau dihilangkan. Sebuah tindakan yang teramat wajar jika menilik betapa teramat sedikit blogger maupun pengunjung blog yang memanfaatkan navbar saat beraktifitas di sebuah blog. Ada beberapa cara untuk menghilangkan navbar blogspot ini, namaun dari sekian banyak cara, 2 cara ini dipandang paling efektif dan umum digunakan para blogger.<br />
<ul><li>Navbar dihapus total dari halaman blog:<br />
<br />
Dengan cara ini maka navbar tak akan terlihat sama sekali karena display navbar dibuat menghilang serta ketinggian navbar dibuat dalam nilai 0 (nol).</li>
<li>Navbar disembunyikan: <br />
<br />
Navbar sepertinya hilang, namun sebenarnya hanya sekedar disembunyikan. Cara yang kedua ini banyak dikenal dengan istilah sebagai navbar tersembunyi, navbar otomatis atau navbar rahasia. Untuk membuat navbar dalam bentuk seperti ini kita memanfaatkan opacity effects sebagai cara untuk membuat efek transparansi hingga pada saat sebuah blog dibuka seakan akan navbar tidak ada. Navbar akan terlihat hanya pada saat mouse/cursor disentuhkan pada posisi dimana navbar berada (ujung atas blog).</li>
</ul><p class="BS">Contoh bentuk Navbar Otomatis/Rahasia</p><i>Sentuhkan cursor di bawah ini!</i><br />
<br />
<a class="opa0-100" href="http://gubhugreyot.blogspot.com" target="_blank" title="Navbar rahasia atau navbar otomatis yang muncul ketika disentuh cursor"><img style="margin:0px auto;cursor:pointer;width:400px;height:48px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiJPczzCzRyxCe8prfZWjNCA-xF0pAaqkOkD1njm45j0xDew2zwxiDJ1L805SB15a6jkFgCtcOKksXwe-auyhHbWs5_xTLhVUcBfOhzMS6g_31rdxtrTQIMMF0QmWo7v2hBFtWot6BT8G-/s400/Navbar.jpg" /></a><br />
Untuk model yang pertama tidak ada demonya karena anda bisa melihat dibeberapa blog yang ada banyak yang tanpa navbar.<br />
<p class="gray">Navbar Hilang Total</p><a name='more'></a><br />
<p class="ob">Kode CSS</p><br />
<pre class="blue"><strong>#navbar, #navbar-iframe</strong>{
display:none<span class="rn"> !important</span>;
visibility:hidden<span class="rn"> !important</span>;
height:0<span class="rn"> !important</span>;
}</pre><br />
<p class="gray">Navbar Hanya disembunyikan</p><br />
Dengan kode CSS ini maka navbar secara otomatis akan terlihat ketika cursor menyentuh bagian navbar. Ini hanya berfungsi normal di luar Internet Explorer. Dengan kode CSS di bawah, maka di IE navbar tak akan terlihat. Jika anda ingin navbar tetap terlihat, hilangkan kode: <br />
<br />
<b>filter:alpha(opacity=0); dan filter:alpha(opacity=100);</b><br />
<p class="ob">Kode CSS</p><br />
<pre class="blue"><strong>#navbar</strong> {
opacity:0;
filter:alpha(opacity=0);
}
<strong>#navbar:hover</strong> {
opacity:10;
filter:alpha(opacity=100);
}</pre><br />
<p class="gray">Cara Menggunakan kode CSS</p><br />
Silahkan pilih salah satu model untuk menghilangkan navbar dengan menyimpan salah satu kode CSS sesuai pilihan anda!<br />
<p class="gray">Cara Menyimpan Kode CSS di atas <strong>]]></b:skin></strong></p><br />
<ul><li><strong>Login</strong> : Login ke Blogger/Login to Blogger.<ul class="dua"><li class="dua">Tulliskan <i>User Name/Nama Pengguna</i> pada box yang telah disediakan. Selain User Name anda dapat juga menggunakan <i>Alamat Email/Email Address</i>.</li>
<li class="dua">Lanjutkan dengan menuliskan <i>Password/Kode Rahasia/Sandi</i>. </li>
<li class="dua">Setelah semua di isi dengan benar, <i>KLIK</i> <strong>Login</strong></li>
</ul></li>
<li><strong>Dasboard/Dasbor</strong> : Halaman dasbor ini akan terlihat sesaat setelah <i>klik</i> login. <i>Temukan </i> link <b>Design/Rancangan</b>. <i>KLIK</i> lin tersebut, kemudian tunggu beberapa saat hingga terlihat halaman baru "<b>Page Elements/Elemen Laman</b>" yang merupakan <i>bagian dari Design/Rancangan.</i></li>
<li><i>KLIK</i> link <b>Edit HTML</b>.</li>
<li>Di depan anda akan terlihat deretan kode HTML. Disinilah kode <b class="cn">]]></b:skin></b> tersimpan. Cari kode tersebut dengan menggunakan <span class="RB">Ctrl+F</span>. Jika mengalami kesulitan tentang penggunaan Ctrl+F, silahkan buka tutorial tentang masalah ini dengan membuka link berikut: <span class="OB kiri"><a href="http://tantytm.blogspot.com/2010/05/cara-cepat-mencari-kode-html-template.html" title="Panduan cara mencari kode HTML, CSS dan javascript di template" target="_blank">Panduan cara Mencari Kode HTML di Template</a></span></li>
<li>Letakkan kode CSS tepat di atas kode <b class="cn">]]></b:skin></b>.</li>
<li><i>KLIK</i> <strong>SAVE Templates/Simpan Template.</strong>.</li>
<li>Buka blog anda untuk melihat hasilnya!</li>
</ul><br />
Contoh penempatan kode CSS di atas <b class="cn">]]></b:skin></b><br />
<br />
<pre class="blue"><strong>#navbar</strong> {
opacity:0;
filter:alpha(opacity=0);
}
<strong>#navbar:hover</strong> {
opacity:10;
filter:alpha(opacity=100);
}
<b class="cn">]]></b:skin></b></pre><br />
<p class="penutup">Semoga bermanfaat!<br />
<br />
<span>Happy Blogging ....!</span></p><br />
<p class="gray2">Tutorial Menarik Lain</p><br />
Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br />
<ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li>
<li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li>
</ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com2tag:blogger.com,1999:blog-747725801833073244.post-7384118011085586502010-10-13T23:42:00.000-07:002010-10-13T23:56:58.067-07:00Tips Penting Cara Simpan Kode CSS di Template<div class="buka">Menyimpan kode CSS sepertinya hanya persoalan sepele. Sesuatu yang terkadang membuat kita tidak cermat dan berhati-hati. Masalah penempatan terutama. Masih banyak blogger yang belum mengetahui secara tepat bagaimana tempat dan cara yang paling tepat untuk menyimpan kode CSS di template, baik melalui halaman "Edit HTML" atau menggunakan Add a Gadget yang terletak di "Page Elements/Elemen Laman". Ketidak tahuan ini sebenarnya tidaklah berbahaya bagi desain blog, akan tetapi sering terjadi sebuah desain HTML baru yang sebenarnya hendak dipakai atau diterapkan di blog ternyata tidak berfungsi sebagaimana yang diharapkan. Persoalan ini sepanjang seluruh kode CSS sudah ditulis dengan benar, sebenarnya terjadi pada penggunaan tag style yang terdiri dari tag pembuka (<strong><style type="text/css"></strong>) dan tag penutupnya (<strong></style></strong>). <br /><br /><p class="gray">Rahasia kecil penggunaan tag style</p><br /><ul><li>Gunakan tag style saat menyimpan kode CSS <strong>di bawah kode</strong> <b class="cn">]]></b:skin></b>.</li><li>Gunakan juga tag style saat penyimpanan kode CSS dilakukan melalui <strong>Add a Gadget/Tambah Gadget</strong> (Widget HTML/Javascript).</li><li><i>Jangan gunakan tag style</i> saat kode CSS disimpan <i>di atas kode</i> <b class="cn">]]></b:skin></b>.</li><li>Untuk kode CSS yang telah di upload di file hosting, gunakan kode seperti berikut untuk menyimpan di template. <b class="left cn"><link href="<strong>URL CSS</strong>" rel="stylesheet" type="text/css" /></b>. Penyimpanan bisa dilakukan <i>di atas</i> kode <b class="cn"><head></b> atau melalui <strong>Add a Gadget/Tambah Gadget</strong>.</li></ul><br /><p class="gray">Cara Menyimpan Kode CSS di atas <strong>]]></b:skin></strong></p><a name='more'></a><br /><ul><li><strong>Login</strong> : Login ke Blogger/Login to Blogger.<ul class="dua"><li class="dua">Tulliskan <i>User Name/Nama Pengguna</i> pada box yang telah disediakan. Selain User Name anda dapat juga menggunakan <i>Alamat Email/Email Address</i>.</li><li class="dua">Lanjutkan dengan menuliskan <i>Password/Kode Rahasia/Sandi</i>. </li><li class="dua">Setelah semua di isi dengan benar, <i>KLIK</i> <strong>Login</strong></li></ul></li><li><strong>Dasboard/Dasbor</strong> : Halaman dasbor ini akan terlihat sesaat setelah <i>klik</i> login. <i>Temukan </i> link <b>Design/Rancangan</b>. <i>KLIK</i> lin tersebut, kemudian tunggu beberapa saat hingga terlihat halaman baru "<b>Page Elements/Elemen Laman</b> yang merupakan <i>bagian dari Design/Rancangan.</i></li><li><i>KLIK</i> link <b>Edit HTML</b>.</li><li>Di depan anda akan terlihat deretan kode HTML. Disinilah kode <b class="cn">]]></b:skin></b> tersimpan. Cari kode tersebut dengan menggunakan <span class="RB">Ctrl+F</span>. Jika mengalami kesulitan tentang penggunaan Ctrl+F, silahkan buka tutorial tentang masalah ini dengan membuka link berikut: <span class="OB kiri"><a href="http://tantytm.blogspot.com/2010/05/cara-cepat-mencari-kode-html-template.html" title="Panduan cara mencari kode HTML, CSS dan javascript di template" target="_blank">Panduan cara Mencari Kode HTML di Template</a></span></li><li>Letakkan kode CSS tepat di atas kode <b class="cn">]]></b:skin></b>.</li><li><i>KLIK</i> <strong>SAVE Templates/Simpan Template.</strong>.</li></ul> <br />Contoh penempatan kode CSS di atas <b class="cn">]]></b:skin></b><br /><pre class="blue"><span class="YB">.post-body {</span><br /> height: 400px;<br /> overflow: auto;<br /> overflow-x: hidden;<br /> margin: 0;<br /> padding: 0 10px 0 0;<br />}<br /><br /><b class="cn">]]></b:skin></b></pre><br /><br /><p class="gray">Cara Menyimpan Kode CSS di bawah <strong>]]></b:skin></strong></p><br />Penyimpanan kode CSS di bawah kode tersebut harus menggunakan tag style, sedang langkah untuk melakukan proses penyimpanan kode seperti langkah di atas.<br /><br />Contoh posisi kode CSS saat di simpan di bawah kode <strong>]]></b:skin></strong>:<br /><pre class="blue"><span class="YB">]]></b:skin></span><br /><br /><strong><style type="text/css"></strong><br /><span class="YB">.post-body {</span><br /> height: 400px;<br /> overflow: auto;<br /> overflow-x: hidden;<br /> margin: 0;<br /> padding: 0 10px 0 0;<br />}<br /><strong></style</strong></pre><br /><p class="gray">Cara Menyimpan Kode CSS melalui <strong>Add a Gadget (Tambah Gadget)</strong></p><br />Untuk menyimpan kode kode CSS melalui Add a Gadget, langkah yang harus ditempuh sama dengan di atas. <ul><li>Setelah login hingga terlihat "Page Elements/Elemen Laman". Di halaman ini terdapat beberapa box yang sebagian bergaris putus-putus dengan tulisan Add a Gadget/Tambah Gadget. <i>KLIK</i> pada bagian tersebut dan tunggu hingga terbuka window baru.</li><li><strong>Add a Gadget</strong> : Ada beberapa widget yang disediakan Blogger. <i>Cari</i> dan <i>klik</i> widget <strong>HTML/Javascript</strong>.</li><li>Setelah box penyimpanan kode terlihat, pastekan kode CSS di sini. Apabila kode CSS yang akan disimpan belum menggunakan tag style, anda harus menambahkannya sehingga bentuknya akan seperti di bawah ini.</li><li><i>KLIK</i> <strong>SAVE/Simpan</strong> setelah kode ditulis dengan benar</li></ul><br />Contoh penyimpanan kode melalui Add a Gadget:<br /><pre class="blue"><strong><style type="text/css"></strong><br /><span class="YB">.post-body {</span><br /> height: 400px;<br /> overflow: auto;<br /> overflow-x: hidden;<br /> margin: 0;<br /> padding: 0 10px 0 0;<br />}<br /><strong></style></strong></pre><br /><p class="gray">Kode CSS dalam bentuk link (<strong>telah di upload di file hosting</strong>)</p><br />Anda dapat menyimpan file kode CSS ini melalui <i>Add a Gadget</i> atau <span class="RN">di atas</span> kode <strong><head></strong> yang terletak di bagian teratas template. Untuk mencari kode tersebut anda juga bisa memanfaatkan "Ctrl+F". Pproses penyimpanan seperti cara yang sudah dilakukan di atas.<br /><p class="GS">Di atas <head></p> <br />Contoh penempatan link kode CSS:<br /><pre class="blue"><link href="<strong>http://stashbox.org/958324/file.css</strong>" rel="stylesheet" type="text/css" /><br /><br /><span class="YB"><head></span></pre><br />Untuk penyimpanan melalui Add a Gadget, anda langsung masukkan link ke dalam box dan lanjutkan <i>KLIK</i> <strong>SAVE/Simpan</strong>. <br />Contoh bentuk file kode CSS:<br /><pre class="blue"><link href="<strong>http://stashbox.org/958324/file.css</strong>" rel="stylesheet" type="text/css" /></pre><br /><p class="penutup">Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com6tag:blogger.com,1999:blog-747725801833073244.post-46403109329893461252010-10-13T18:23:00.000-07:002010-10-13T20:35:25.644-07:00Tampilkan Posting dg Scroll Bar dan Scroll Box<div style="padding:6px 2px;margin:0;background:#999;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;"><div style="height:400px;overflow:auto;overflow-x:hidden;margin:4px;border:2px solid #888;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;padding:10px 8px;margin:3px;background:#111;box-shadow:-1px -1px 1px #eee, 1px 1px 10px #fff;-moz-box-shadow:-2px -2px 2px #eee, 2px 2px #eee, 1px 1px 10px #fff;-webkit-box-shadow:-2px -2px 2px #eee, 1px 1px 10px #fff;"><br /><div class="buka">Scroll Bar tidak hanya bisa digunakan di widget sidebar blog seperti yang biasa kita lihat. Bila kita mau, halaman posting bisa dibuat dalam bentuk scroll. Ada dua kemungkinan menempatkan sebuah scroll bar di posting blog.<br /><ul><li>Membuat seluruh posting dalam sebuah bingkai scroll box.</li><li>Hanya satu atau beberapa bagian posting yang terwadahi dalam scroll box.</li></ul><br /><br />Kedua model di atas, kedua-duanya harus dibuat dengan bantuan kode CSS supaya lebih mudah dan cepat dalam penulisan kode di halaman posting (di Mode Posting Edit HTML). Sekalipun demikian jika anda mau sedikit repot bisa juga kode HTMLnya dituliskan di halaman posting.<br /><br />Pada model Scroll Bar yang pertama, seluruh posting akan terwadahi dalam scroll box. Tentu saja hanya pada artikelnya saja. Untuk judul posting, dia akan tetap pada posisi semula. Penggunaan model ini mengharuskan kita untuk membatasi tinggi scroll box supaya scroller dapat dibuat dan difungsikan. Ketinggian box sebaiknya dibuat dengan ketinggian minimal 400px agar halaman posting tidak terlalu pendek. Keuntungan posting dengan memanfaatkan scroll bar terutama akan terasakan bagi blogger yang sering membuat posting dengan artikel panjang lebar. Dengan pembatasan ketinggian scroll bar ini maka pengunjung atau pembaca blog tidak perlu menggulung halaman posting hingga ujung terbawah.<br /><br />Model yang ke dua lebih fleksibel karena kita bisa memilih beberapa bagian tertentu dari posting untuk dimasukkan dalam scroll box. Beberapa "bagian posting yang khusus/special" mungkin bisa terwadahi di sini. <br /><br />Untuk membuatnya cukup sederhana karena hanya beberapa kode saja yang diperlukan, akan tetapi jika scroll bar akan dibuat dalam bentuk yang lebih bervariasi, anda bisa tambahkan beberapa kode CSS seperti background-color, background-image, border, border radius, padding serta beberapa kode yang lain.<br /><p class="gray">Scroll bar untuk seluruh posting</p><br /><h4>Menggunakan Kode HTML di Halaman Posting</h4><br />Apabila kita hanya akan menggunakan di saat-saat tertentu saja, kita dapat gunakan secara langsung kode HTML-nya di halaman posting. Kode HTML-nya seperti terlihat di bawah ini:<br /><pre class="blue"><span class="ON"><div style="height:400px;overflow:auto;overflow-x:hidden;padding:0 10px 0 0;margin:0;"></span><br /><em>Tempatkan Posting di sini!</em><br /><span class="ON"></div></span></pre><br />Anda juga bisa menambahkan beberapa kode CSS lain untuk membuat tampilan berbeda hingga akan terbentuk sebuah scroll box. Kodenya HTML-nya seperti berikut:<br /><pre class="blue"><span class="ON"><div style="height:400px;overflow:auto;overflow-x:hidden;margin:4px;border:2px solid #888;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;padding:10px 8px;margin:3px;background:#111;"></span><br /><i>Tempatkan Posting di sini!</i><br /><span class="ON"></div></span></pre></div></div></div><br /><div class="clr"></div><br/><br /><div class="buka">Jika anda ingin menggunakan cara yang lebih praktis, silahkan gunakan kode CSS dan <i>simpan di atas</i> kode <strong>]]></b:skin></strong><br /><p class="YBS">Kode CSS Scroll Bar Posting Blog</p><a name='more'></a><br /><pre class="blue"><span class="ON">.post-body {</span><br /> height: 400px;<br /> overflow: auto;<br /> overflow-x: hidden;<br /> margin: 0;<br /> padding: 0 10px 0 0;<br />}</pre><br /><p class="YBS">Kode CSS Scroll Box Posting Blog</p><br />Kode CSS yang ke-2 ini digunakan apabila dihalaman posting kita buat dalam bentuk sebuah box seperti yang terlihat di halaman ini, atau seperti pada kode HTML yang ke-2 di bagian atas.<br /><pre class="blue"><span class="ON">.post-body {</span><br /> height: 400px;<br /> overflow: auto;<br /> overflow-x: hidden;<br /> margin: 0;<br /> padding: 10px 8px;<br /> border:2px solid #888;<br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> background:#111;<br /> box-shadow:-1px -1px 1px #eee, 1px 1px 10px #fff;<br /> -moz-box-shadow:-2px -2px 2px #eee, 2px 2px #eee, 1px 1px 10px #fff;<br /> -webkit-box-shadow:-2px -2px 2px #eee, 1px 1px 10px #fff;<br />}</pre><br /><p class="CAT">Keterangan</p><ul><li>Jika anda menggunakan kode CSS yang ke-2, warna background yang digunakan harus mendekati warna background halaman posting agar tampilan teks tidak kacau balau!</li><li>Anda tidak perlu menambahkan lagi kode baru yang berkaitan dengan scroll bar atau scroll box. Posting tinggal dilakukan seperti biasa.</li><li>Jika menghendaki perubahan tinggi scroll bar atau scroll box, rubahlah nilai<span class="ON"> height:400px;</span> dengan nilai yang lain!</li></ul><br /><br /><p class="gray">Scroll Box untuk beberapa bagian tertentu dari posting</p><br /><pre class="blue"><span class="ON">.scrollpost {</span><br /> height: 200px;<br /> overflow: auto;<br /> overflow-x: hidden;<br /> margin: 15px 0;<br /> padding: 10px 8px;<br /> border:2px solid #888;<br /> border-radius:8px;<br /> -moz-border-radius:8px;<br /> -webkit-border-radius:8px;<br /> background:#111;<br /> box-shadow:-1px -1px 1px #eee, 1px 1px 10px #fff;<br /> -moz-box-shadow:-2px -2px 2px #eee, 2px 2px #eee, 1px 1px 10px #fff;<br /> -webkit-box-shadow:-2px -2px 2px #eee, 1px 1px 10px #fff;<br />}</pre><br /><p class="CAT">Keterangan</p><br />Untuk menggunakan scroll Box, gunakan kode berikut di halaman posting:<br /><pre class="blue"><span class="OB"><div class="scrollpost"></span><br /><em>Tempatkan posting yang akan di masukkan scroll box di sini!</em><br /><span class="OB"></div></span></pre><br /><p class="gray">Cara Menyimpan Kode CSS</p><br /><div style="height:100px;overflow:auto;overflow-x:hidden;padding-right:10px;"><br /><ul><li><strong>Login</strong> : login ke blogger terlebih dahulu.</li><li>Setelah <strong>Dasboard/Dasbor</strong> terlihat, <i>klik</i> "Design/Rancangan".</li><li>Lanjutkan dengan <i>klik</i> "Edit HTML".</li><li>Cari kode <span class="rn">]]></b:skin></span>.</li><li>Copy-paste kode CSS letakkan persis di atas kode tersebut.</li><li><strong>SAVE Templates/Simpan Template</strong> : <i>klik</i>, kemudian buka halaman posting dan cobalah untuk membuat sebuah posting!</li></ul></div><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com11tag:blogger.com,1999:blog-747725801833073244.post-82688698596863113722010-10-13T16:29:00.002-07:002010-10-13T16:49:00.785-07:00Cara Buat Posting Gambar Lebih Menarik, Cantik,Mudah dan Cepat dengan Kode CSS<div class="buka">Posting gambar terhitung paling njelimet saat kita posting di "Mode Posting Edit HTML". Ini setimbang dengan hasil yang kita dapatkan di output blog. Dengan menambah beberapa kode HTML yang tak mungkin dilakukan jika hanya memanfaatkan "Posting Mode Tulis/Compose", maka gambar/image Posting menjadi tampil lebih cantik dan rapi. <br /><br />Mengandalkan membuat kode HTML tambahan untuk gambar di halaman posting tentulah membuat halaman posting jadi berjubel bagai naik bis kota. Itupun masih ditambah dengan pusingnya kepala bila ada satu atau beberapa kode tertulis salah atau tak lengkap. Penerbitan posting kemudian harus dilakukan berulangkali karena kesalahan yang kode tersebut. Bila mata sudah mengantuk dan badan terasa lelah serta pikiran sudah mulai kendor, biasanya rasa jengkel meluap seketika. Bagaimana mengatasi rumitnya kode HTML saat posting? Akankah setiap kali kita akan selalu dihadapkan dengan persoalan seperti ini tanpa pernah punya solusi?<br /><br />Kode CSS menjadi satu solusi yang paling tepat. Dengan menambahkannya di template <i>di atas kode</i> <b>]]></b:skin></b>, maka pecahlah sudah permasalahan satu yang menahun tersebut. Melalui kode CSS ini pula kita dapat membuat gambar tampil lebih cantik dengan menambahkan beberapa variabel baru seperti border, border-radius, padding, background dan jika dikehendaki bisa juga ditambahkan animasi dengan memanfaatkan CSS3 transition delay, CSS3 transition Property, CSS3 Transition Duration, CSS3 transformation, CSS3 drop shadow dan CSS3 Transition Timing Function. Kode CSS di bawah ini mempunyai 3 (tiga) fungsi penataan gambar posting. Disebelah kiri (<b>float:left;</b>), posisi di tengah (<b>margin:0 auto;display:block;</b>) dan gambar di kanan (<b>float:right;</b>). Setelah anda menggunakan kode CSS ini maka setiap kali posting gambar tinggal tambahkan <b>class="..."</b>, kenudian lengkapi dengan <b>width="...px"</b> dan <b>height="...px"</b>, maka gambar akan meluncur di halaman blog dengan cepat, mudah, praktis dan hasil memuaskan.<br /><p class="gray2">Contoh Gambar tanpa Accecories dan gambar dengan Accecories</p><br /><p style="margin:15px 5px;border:2px solid #666;padding:10px 6px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;"><img style="cursor: pointer;float:left;margin:0 10px 5px 0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!<br />Karena beberapa sobat blogger banyak juga yang suka menampilkan gambar tanpa "bumbu penyedap" atau "accecories tambahan", maka dalam kode CSS ini kita sertakan dua macam kode, dimana kode yang pertama untuk menampilkan gambar apa adanya dan yang ke-2 (dengan tambahan "plus") kode CSS yang sudah dilengkapi dengan beberapa penambahan variabel baru guna mempercantik gambar. Untuk menggunakan di antara 2 (dua) pilihan tersebut anda langsung menggunakannya di halaman posting.</p><br /><p style="margin:15px 5px;border:2px solid #666;padding:10px 6px;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;"><img style="float:right;margin:0 0 5px 10px;cursor: pointer;padding: 3px;background: #999;border: 3px solid;border-color: #555 #777 #777 #555;border-radius: 6px;-moz-border-radius: 6px;-webkit-border-radius: 6px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!<br />Karena beberapa sobat blogger banyak juga yang suka menampilkan gambar tanpa "bumbu penyedap" atau "accecories tambahan", maka dalam kode CSS ini kita sertakan dua macam kode, dimana kode yang pertama untuk menampilkan gambar apa adanya dan yang ke-2 (dengan tambahan "plus") kode CSS yang sudah dilengkapi dengan beberapa penambahan variabel baru guna mempercantik gambar. Untuk menggunakan di antara 2 (dua) pilihan tersebut anda langsung menggunakannya di halaman posting.</p><br /><p class="gray">Kode CSS</p><a name='more'></a><br /><pre class="blue"><b>.post img.kiri, .post img.kiriplus </b>{<br /> float: left;<br /> margin: 0 10px 5px 0;<br /> border: none; <br /> cursor: pointer; <br />}<br /><b>.post img.tengah, .post img.tengahplus</b> {<br /> display: block;<br /> margin: 0 auto;<br /> border: none; <br /> cursor: pointer; <br />}<br /><b>.post img.kanan, .post img.kananplus</b> {<br /> float: right;<br /> margin: 0 0 5px 10px;<br /> border: none; <br /> cursor: pointer; <br />}<br /><b>.post img.kiriplus, .post img.tengahplus, .post img.kananplus</b> {<br /> cursor: pointer;<br /> padding: 3px;<br /> background: #999;<br /> border: 3px solid;<br /> border-color: #555 #777 #777 #555;<br /> border-radius: 6px;<br /> -moz-border-radius: 6px;<br /> -webkit-border-radius: 6px;<br />}</pre><br /><p class="gray">Cara Menyimpan kode CSS di Template</p><br /><ul><li><strong>Login</strong> : login ke blogger terlebih dahulu.</li><li>Setelah <strong>Dasboard/Dasbor</strong> terlihat, <i>klik</i> "Design/Rancangan".</li><li>Lanjutkan dengan <i>klik</i> "Edit HTML".</li><li>Cari kode <span class="rn">]]></b:skin></span>.</li><li>Copy-paste kode CSS letakkan persis di atas kode tersebut.</li><li><strong>SAVE Templates/Simpan Template</strong> : <i>klik</i>, kemudian buka halaman posting dan gunakan kode berikut untuk melakukan posting gambar.</li><li>Buka blog untuk melihat hasil posting!</li></ul><br /><p class="gray">Kode HTML untuk Posting</p><br /><h4>Gambar di sebelah kiri Tanpa Accecories</h4><br /><p class="kode"><span class="bn"><img class="<b>kiri</b>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/></span>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!</p><br /><h4>Gambar di sebelah kiri dilengkapi Accecories</h4><br /><p class="kode"><span class="bn"><img class="<b>kiriplus</b>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/></span>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!</p><br /><br /><h4>Gambar di tengah Tanpa Accecories</h4><br /><p class="kode"><span class="bn"><img class="<b>tengah</b>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/></span>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!</p><br /><h4>Gambar di tengah dilengkapi Accecories</h4><br /><p class="kode"><span class="bn"><img class="<b>tengahplus</b>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/></span>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!</p><br /><br /><h4>Gambar di sebelah kanan Tanpa Accecories</h4><br /><p class="kode"><span class="bn"><img class="<b>kanan</b>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/></span>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!</p><br /><h4>Gambar di sebelah kanan dilengkapi Accecories</h4><br /><p class="kode"><span class="bn"><img class="<b>kananplus</b>" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" width="276" height="182"/></span>Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!</p><br /><p class="penutup">Catatan</p><br /><ul><li>Anda bisa menambahkan width jika posting selalu menggunakan ukuran yang sama.</li><li>Untuk membuat tampilan gambar berbeda bisa dilakukan perubahan pada background, padding, border dan border-radius.</li></ul><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com1tag:blogger.com,1999:blog-747725801833073244.post-69828185533364450392010-10-13T13:42:00.000-07:002010-10-13T16:52:03.036-07:00Buat Kode HTML Gambar Posting Lebih Simple<div class="buka">Jika anda melakukan posting dan sebelumnya mengupload (unggah) gambar ke blogger, pasti yang akan anda terima adalah sebuah kode HTML gambar dengan jumlah yang bikin halaman posting penuh sesak. Anda akan melihatnya jika membuka halaman posting pada <b>Posting Mode Edit HTML</b>, karena jika yang digunakan "<b>Posting Mode Tulis/Compose</b>" anda hanya akan melihat bentuk gambarnya saja. Posting dengan "Mode Edit HTML" memang sedikit lebih rumit jika dibandingkan dengan "posting Mode Tulis/Compose", namun dibalik kerumitan ini banyak kelebihan yang dimiliki. Satu yang jelas adalah hanya melalui posting "Mode Edit HTML" sebuah gambar/image bisa ditampilkan di halaman blog dengan berbagai gaya. Anda bisa menambahkan beberapa kode HTML untuk membuat gambar tampil dalam wujud yang berbeda. Tidak hanya berbentuk segi-empat polos tak berhias, namun beberapa kode tambahan tadi bisa membuat gambar menjadi berbentuk lengkung, mempunyai shadow, beranimasi dsb. Kali ini kita tidak akan membahas bagaimana cara menghias gambar posting, tetapi bagaimana membuat dokumen gambar yang berupa kode HTML hasil unggah gambar di blogger bisa ditampilkan dalam bentuk yang lebih sederhana, praktis, tidak terlalu memenuhi halaman posting namun tetap memberikan hasil tampilan dan fungsi yang sama.<br />Sebagai contoh kita akan perlihatkan kode HTML sebuah gambar yang telah "di Unggah di Blogger. Kode yang kita terima di halaman posting "Mode Edit HTML" adalah sebagai berikut.<br /><p class="kode"><a <span class="ON">onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"</span> href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s1600/029.jpg"><br /><img style="cursor:pointer; <span class="ON">cursor:hand;</span>width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" border="0" <span class="ON">alt=""</span>id="BLOGGER_PHOTO_ID_5527567097891621922" /><br /></a></p><br />Dengan kode HTML sepanjang itu jika dalam posting kita gunakan gambar lebih dari lima buah gambar saja, maka halaman posting tentu akan jadi penuh sesak dan membuat kepala pusing. Ada sebuah solusi untuk mengatasi hal ini, dimana kita akan hilangkan beberapa kode yang ketika dihilangkan tak akan berpengaruh apapun terhadap kualitas gambar. Kode gambar kita rubah menjadi seperti di bawah ini:<a name='more'></a><br /><p class="kode"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s1600/029.jpg"><img style="cursor:pointer; width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" <span class="ON">id="BLOGGER_PHOTO_ID_5527567097891621922"</span> /></a></p><br />Atau jika ingin lebih ringkas lagi buatlah seperti ini:<br /><p class="kode"><span class="ON"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s1600/029.jpg"></span><img style="cursor:pointer; width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" /><span class="ON"></a></span></p><br />Atau mungkin anda tak memerlukan memasang link pada gambar tersebut? Buatlah jadi lebih praktis lagi dalam bentuk seperti ini:<br /><p class="kode"><img style="cursor:pointer; width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" /></p><br /><p class="penutup">Catatan</p><br /><ul><li>Kode yang dihilangkan adalah kode yang berwarna kuning.</li><li>Jika kode yang anda terima berbeda karena saat unggah gambar menggunakan posisi berbeda (<i>ada 4 posisi gambar</i>: di tengah, kiri, kanan dan tak satupun), maka kode yang dihilangkan hanya kode seperti yang terlihat di atas.</li><li>Jika anda menginginkan cara yang lebih praktis lagi, kita bisa menggunakan kode CSS yang di simpan di halaman "Edit HTML". Jika anda tertarik, silahkan ikuti tutorial selanjutnya!</li></ul><br /><p class="penutup">Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com1tag:blogger.com,1999:blog-747725801833073244.post-32346068995994918312010-10-13T08:46:00.000-07:002010-10-13T11:39:00.363-07:00Cara Buat Text Links, Image Links dan Hyperlinks<div class="buka">Link pada sebuah blog ditandai dengan penggunaan tag "<span class="OB">a</span>" dengan bentuk kode HTML seperti di bawah ini:<br /><a>Text Link atau Image Link</a><br />Sebuah atau beberapa buah link berfungsi untuk membuka sebuah dokument baru, baik yang ada di bog itu sendiri ataupun yang bearada di blog/web yang lain. Link juga bisa dimanfaatkan untuk berbagai kepentingan persahabatan, komunikasi atau jalinan hubungan yang saling menguntungkan antar sesama blogger, dengan situs-situs jejaring sosial, layanan promosi blog serta beberapa kepentingan lainnya. Menggunakan link sebagai cara untuk menjalin hubungan yang menguntungkan sesama blogger dilakukan melalui <span class="ON">link exchange</span> atau <span class="ON">banner exchange</span> yang bertujuan untuk saling mempromosikan blog. <p class="gray">D E M O Text Link dan Image Link</p><a class="sini" style="display:block;margin-left:50px;padding-top:20px;" href="http://gubhugreyot.blogspot.com/" target="_blank" title="Silahkan coba dengan KLIK di sini!">Setiap kali KLIK berhadiah tunai Rp.1000,00.!</a><a href="http://bloggerstuars.blogspot.com/" target="_blank" title="Silahkan coba dengan KLIK di sini!"><img style="float:right;margin-right:200px;margin-top:-40px;" src="http://i41.tinypic.com/352oqab.gif" width="43" height="56" /></a><div class="clr20"></div>Menggunakan link untuk membuka sebuah dokumen yang masih terdapat di dalam blog/web ditujukan supaya para pengunjung blog lebih mudah untuk membuka beberapa dokumen yang ada di dalam blog dengan <i>cukup meng-klik</i> sebuah <span class="ON">text link atau image link</span> yang dipasang sebagai tanda bahwa pada posisi tersebut terdapat sebuah link. Penanda link biasanya berupa perubahan yang terjadi pada mouse/cursor (menjadi berbentuk tangan-pointer dan beberapa bentuk yang lain), perubahan warna pada teks, munculnya sebuah background atau perubahan background text link atau bahkan bisa dilakukan dengan memberikan sebuah kode tambahan yang berupa kode CSS atau javascript, sehingga ketika sebuah link tersentuh cursor maka terlihat sebuah tooltip. Melihat dari fungsi dan kegunaan sebuah link, maka sudah selayaknya semua blogger memahami cara membuat teks link dan image link.<br /><p class="gray">Contoh bentuk Teks Link dan Image Link</p><br /><p class="blues">Text Link</p><br /><pre class="blue">Contoh-1:<br /><a href="<span class="ON">http://tantytm.blogspot.com/</span>"><span class="YB">Tanty Template Modification</span></a><br /><br />Contoh-2:<br /><a href="<span class="ON">http://tantytm.blogspot.com/2010/10/cara-kilat-buat-horizontal-tab-menu-di.html</span>"><span class="YB">Cara Membuat Horizontal Tab Menu</span></a><br /><br />Contoh-3:<br /><a href="<span class="ON">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNJYXIivnpvm0jHwkg-Ed50-vdiJFTAip8aFq4T2lB9A8rPM_k1MR_zgUfC1Hxspa_Zv311tZR779dCYHF6PLV5Nwgvvtgka36IA7oXhGbpNl2EPS7PH-Ij-uBGU3cOzE7NCy80Y0B5M3/s1600-r/images.jpeg</span>"><span class="YB">Indian Apache</span></a></pre><br />Dalam bentuk yang lain, sebuah link dibuat dengan menambahkan title yang nantinya akan muncul sebagai tips.<br /><pre class="blue"><a href="<span class="ON">http://tantytm.blogspot.com/</span>" title="<span class="RN">Panduan dan Tutorial Blogger</span>><span class="YB">Tanty Template Modification</span></a></pre><br /><p class="blues">Image Link</p><br />Image link tidak menggunakan teks sebagai penanda link, akan tetapi memanfaatkan sebuah gambar/images. Penggunaan gambar biasanya bertujuan untuk membuat blog menjadi terlihat menarik sekaligus diharapkan membuat pengunjung semakin tertarik juga untuk <i>meng-KLIK</i> link yang di tampilkan. Supaya beban blog tidak terlalu berat sebaiknya penggunaan sebuah image link di batasi pada gambar yang bebannya kecil (dalam pixel).<br /><br />Contoh Image link :<br /><pre class="blue"><a href="<span class="ON">http://gubhugreyot.blogspot.com/</span>"><span class="YB"><img src="http://i49.tinypic.com/295t7t/tantytm/images/loading.gif" /></span></a></pre><br />Gambar yang kita gunakan sebagai image link adalah pada kode HTML di atas adalah:<br /><pre class="blue"><img src="http://i49.tinypic.com/295t7t/tantytm/images/loading.gif" /></pre><br />Silahkan anda gunakan berbagai gambar untuk menggantikan link gambar seperti yang terlihat di contoh tersebut di halaman posting atau di bagian manapun dalam blog seperti misalnya ditambahkan melalui "widget HTML/Javascript" (Add a Gadget/Tambah Gadget).<br /><br />Untuk menampilkan sebuah link supaya terlihat lebih atraktif, beberapa blogger menambahkan kode CSS baru atau javascript seperti misalnya membentuk sebuah link dengan fade effect (link pelangi-rainbow link) atau memberi background animasi gif, sehingga ketika mouse berada di atas link akan terlihat sebuah background animasi yang cantik. Dalam perkembangan terakhir, dengan hadirnya CSS3, fade effect pada sebuah link tak perlu lagi menggunakan javascript. Meskipun dengan penampilan yang tak sehebat rainbow link, CSS3 bisa memberi tampilan baru bagi link dengan cukup baik.<br /><p class="gray">Membuat Link untuk membuat sebuah dokument terbuka di jendela baru (open in new window/opan in new tab</p><br />Untuk membuat sebuah link mampu membuat dokumen terbuka di jendela baru, kita cukup tambahkan kode <span class="ON">target="_blank"</span> dengan bentuk seperti contoh berikut.<br /><pre class="blue"><a href="<span class="ON">http://tantytm.blogspot.com/</span>" target="_blank" ><span class="YB">Tanty Template Modification</span></a></pre><br />Dengan penambahan sedikit kode tersebut, maka ketika seorang pengunjung/pembaca blog <i>meng-klik</i> link, maka dokumen akan terbuka di jendela yang berbeda.<br /><br /><p class="penutup">Semoga bermanfaat!<br /><br /><span>Happy Blogging ....!</span></p><br /><p class="gray2">Tutorial Menarik Lain</p><br />Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:<br /><ul><li><a class="sini" href="http://gubhugreyot.blogspot.com" target="_blank" title="Click here to open!">gubhug reyot</a></li><li><a class="sini" href="http://bloggerstuars.blogspot.com" target="_blank" title="Click here to open!">bloggerstuars</a></li></ul></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com0tag:blogger.com,1999:blog-747725801833073244.post-54765739029882129462010-10-10T06:55:00.001-07:002010-10-10T07:31:32.624-07:00Cara Kilat Buat Horizontal Tab Menu di New Blogger Templates<div align="justify">Membuat Tab Menu Horizontal di Blogger Baru. Jika anda menggunakan <b>New Blogger Template</b> sebagai template default, maka untuk membuat sebuah tab menu horizontal <i>di bawah header blog</i> akan sangat mudah dilakukan tanpa perlu menambahkan kode CSS baru. Beberapa link tinggal kita tuliskan dengan bantuan kode <b>ul</b> dan <b>li</b>. Cara ini menjadi terasa amat praktis sehingga sangat menguntungkan bagi para blogger pemula.<br /><p class="an">Contoh bentuk Tab Menu</p><br /><div class="boxtabs" style="margin:15px 30px;height:25px;padding:5px 4px;border:3px double #555;width:500px;"> <ul class="tabs"><li><a style="border-left:none;" href="http://tantytm.blogspot.com/" target="_blank" title="Javascript ">Javascript</a></li><li><a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Berbagai Desain CSS3 Cantik dan Atraktif Super Lengkap dan Original Dalam Negeri">CSS3</a></li><li><a href="http://bloggerstuars.blogspot.com/" target="_blank" title="Free CSS, Javascript, Image Hosting">File Hosting</a></li><li><a href="http://tantytm.blogspot.com/" target="_blank" title="Panduan dan Tutorial Blogger">Tutorial Blogger</a></li><li><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Cara Lengkap Memodifikasi New Blogger Template dan Template Lama">Template Modification</a></li><li><a href="http://gubhugreyot.blogdetik.com/" target="_blank" title="Tutorial Blogger dan BlogDETIk">Gallery</a></li></ul></div><br /><br />Tab Menu Horizontal dapat dibuat oleh siapapun dengan cara;<br /><ul><li><strong>Login</strong> : Login ke blogger dengan cara:<ul class="dua"><li class="dua">Tulis <em>User Name</em> (<em>Nama Pengguna</em>) atau <em>Email Address</em>.</li><li class="dua">Tulis <em>Password (Kode Rahasia/Sandi)</em>.</li><li class="dua"><i>Klik</i> "<b>Login</b>".</li></ul></li><li>Begitu halaman "<b>Dasboard/Dasbor</b>" terlihat, cari link "<b>Design/Rancangan</b>". <i>Klik</i> link tersebut.</li><li>Selanjutnya anda akan melihat <b>Page Elements/Elemen Laman</b> dengan ciri adanya box bertuliskan "Add a Gadget/Tambah Gadget". Beberapa box terlihat bergaris putus-putus. <i>Klik</i> "<b>Add a Gadget</b> yang berada di bawah header. Tunggu beberapa saat.</li><li>Terlihat beberapa widget yang bisa ditambahkan di blog seperti "Entri Populer, Statistik Blog, Laman, Pengikut dan beberapa yang lain. Carilah "<b>HTML/Javascript</b>" dan silahkan <i>klik</i> di sini!</li><li>Tuliskan kode (xHTML) dalam box widget HTML/Javasript yang tersedia.</li><li><i>KLIK</i> "<b>SAVE Templates/Simpan Template</b>".</li><li>Buka blog dan lihat hasilnya!</li></ul><br /><p class"gray2">Contoh Kode Tab Menu</p><br /><pre class="blue"><ul><br /><li><a href="URL" target="_blank" title="Tuliskan title di sini!">Nama/Judul Tab</a></li><br /><li><a href="http://tantytm.blogspot.com/" target="_blank" title="CSS3">CSS3</a></li><br /><li><a href="http://tantytm.blogspot.com/" target="_blank" title="Free CSS, Javascript, Image Hosting">File Hosting</a></li><br /><li><a href="http://tantytm.blogspot.com/" target="_blank" title="Panduan dan Tutorial Blogger">Tutorial Blogger</a></li><br /><li><a href="http://tantytm.blogspot.com/" target="_blank" title="Car Lengkap Memodifikasi New Blogger Template dan Template Lama">Template Modification</a></li><br /></ul></pre><br /><p class="cat">Keterangan:</p><br /><ul><li>Karena bisanya link Horizontal tab menu di New Blogger Templates berukuran cukup besar, sebaiknya nama/judul link dibuat sesingkat mungkin sehingga link yang termuat menjadi lebih banyak.</li><li>Ganti URL dengan dengan alamat-alamat yang ingin ditampilkan atau bisa juga dengan mengambil URL dari widget seperti pada Categories/Label.</li></ul><br /><br /><br /><br /><i>Untuk membuat tab horizontal yang berbeda dari bawaan blogger tersebut (mungkin karena anda nggak suka!), anda bisa melakukan modifikasi di template. Untuk sementara ini bila anda ingin segera mendapatkan tutorial lengkap tentang modifikasi blog serta tab horizontal di blogger baru, silahkan cari di link di bawah ini:</i><br /><br /><a class="sini" href="http://gubhugreyot.blogspot.com/" target="_blank" title="Silahkan KLIK di sini dan ditanggung anda akan tercengang mengikuti tutorial yang tersedia">Best Blogger Tutorial Collection</a></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com8tag:blogger.com,1999:blog-747725801833073244.post-10230874955244852532010-10-09T14:03:00.000-07:002010-10-09T20:10:30.234-07:00Buat Pembatas Antar Komentar Menggunakan Background Image<div align="justify"><img class="rad10L" width="250" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRV8mkRFac9DJywbhQyudOeUCwYryQS1E_AWWmWrJ7PABChJi-2B18EHeQJDMYHe-ywmoXhqnNC_qxI0vQfhg86W5IIvj-TfQ8cnpD_psfu-Nh7mp-lHoKHeSZTQjeAM6mWvuN4EAuRCRO/s400/Batas-KOMENTAR.jpg" id="BLOGGER_PHOTO_ID_5526222928176821650" />Komentar bagi seorang blogger adalah ibarat setetes air di tengah teriknya mentari di atas gurun. Sangat diharapkan untuk tetap menyalakan semangat posting. Dan tetesan air itu kurasakan juga hari ini. Menggugah semangat ku yang beberapa waktu sempat lunglai ditelan banyaknya kesibukan. Yah..., sekalipun ketika mau memulai terasa begitu berat. Kemalasan telah sedikit menggerogoti rasa antusias yang selama ini begitu menggelegak. Beruntunglah sekalipun dengan langkah tertatih akhirnya jemari ku mulai menari menyentuh setiap onggokan hitam berbalut putih huruf di keyboard ku! Buih ..., setelah sekian bulan tak pernah tersentuh, akhirnya pagi ini satu posting tutorial dan panduan blogger dalam memodifikasi blog selesai ku buat.<br /><br />Satu hal sederhana dan masih berhubungan dengan "komentar si penyala semangat posting", kali ini aku akan mencoba membedah sedikit persoalan bagaimana "menambal" template/blog kita supaya terlihat rapi dan kolom komentar terlihat sedikit berbeda dengan tampilan biasanya. Membuat sebuah garis batas antar setiap komentar yang telah diberikan pengunjung mungkin akan membuat blog terlihat lebih indah dan dengan mudah siapapun dapat membedakan satu persatu komentar yang menghiasi halaman posting.<br /><br />Batas setiap komentar yang masuk dapat dibuat dengan 2 (dua) buah macam cara:<br /><ul><li><span class="bb">Menggunakan border</span> : penggunaan border adalah sebuah cara yang paling simpel sekalipun tidak banyak variasi bentuk pembatas komentar yang bisa diciptakan. Kita hanya bisa merubah jenis bordernya serta warna border. Bagi yang menyukai "blog minimalis" ini adalah cara yang paling tepat. Sederhana, praktis pembuatannya dan tentu saja dengan amat cepat segera bisa diselesaikan.</li><li><span class="bb">Menggunakan background-image</span> : Memanfaatkan sebuah background sebuah gambar merupakan cara yang paling tepat bagi blogger yang menyukai warna, seni atau keindahan. Dengan background-image kemungkinan pembuatan bentuk batas komentar menjadi tidak terbatas. Berbagai variasi bentuk dan warna bisa dibuat, bahkan bagi yang menyukai sebuah gambar animasi (.gif), maka dengan amat cantiknya sebuah batas komentar beranimasi dapat kita buat.</li></ul><p class="gray">Cara Membuat Batas Setiap Komentar</p><ul><li><strong>Login</strong> : Silahkan lakukan login ke blogger terlebih dahulu.<ul class="dua"><li class="dua">Tulis <b>User Name (Nama Pengguna)</b> atau bisa juga menggunakan <b>Alamat Email (Email Address).</b></li><li class="dua">Tulis juga <b>Password (Kode Rahasia/Sandi).</b></li><li class="dua"><i>Klik</i> <b>Login</b>.</li></ul></li><li><strong>Dasboard (Dasbor)</strong> : <i>Klik</i> <b>Design (Rancangan)</b>.</li><li><strong>Design (Rancangan)</strong> : <i>Klik</i> <b>Edit HTML</b>.</li><li>Di halaman HTML ini akan terlihat banyak sekali kode html, silahkan cari kode <span class="yn">]]></b:skin></span>. Copy paste kode CSS di atas kode <span class="yn">]]></b:skin></span>.</li><li><i>Klik</i> <b>SAVE Templates (Simpan Template)</b>.</li><li>Anda harus membuka halaman posting yang sudah ada komentarnya. Apabila belum ada , buatlah komentar sendiri supaya bisa terlihat hasilnya. Jika dikehendaki, setelah bisa diketahui hasil akhir pembuatan batas komentar, maka komentar bisa anda hapus melalui link <b>Comments</b> atau <b>Komentar</b>.</li></ul><p class="gray2">Batas Komentar Menggunakan Border</p><br /><strong>Kode CSS</strong><br /><pre class="blue"><b>dd.comment-footer</b> {<br /> border-bottom: 4px solid #888; <br />}</pre><br />Beberapa perubahan yang dapat dilakukan jika kita gunakan border:<ul><li>Silahkan anda bisa merubah tebal border (4px) sesuai tebal batas komentar yang di kehenndaki. Semakin besar nilainya maka akan semakin tebal bentuk batasnya. </li><li>Untuk merubah warna border, anda bisa mengganti kode warna (<b>#555</b>) dengan kode warna yang lain. Bisa dalam bentuk kode menggunakan angka dan huruf (<b>#000, #fff, #333, #b40303 , ... dsb</b>) atau kode warna berbentuk teks (<i>contoh</i>: blue, red, white ... dsb).</li><li>Pilihan lain yang bisa anda lakukan untuk merubah bentuk batas komentar adalah dengan merubah style border-nya (<i>contoh</i>: ridge, dotted, solid, outset, dashed, inset). Dibawah ini adalah bentuk perubahan yang dilakukan.</li></ul><br /><pre class="blue"><b>dd.comment-footer</b> {<br /> border-bottom: 1px dotted lightblue; <br />}</pre><br /><p class="gray2">Batas Komentar Menggunakan Background-Image</p><br />Menggunakan sebuah background-image tidak jauh berbeda dengan penggunaan border, hanya kode CSS yang kita gunakan sedikit berbeda.<br /><strong>Kode CSS</strong><br /><pre class="blue"><b>dd.comment-footer</b> {<br /> padding-bottom: 4px; <br /> background: url(http://i43.tinypic.com/2aeqkiv/tabtytm/bgimg/.png) bottom left repeat-x;<br /> background-position: 50% 15px;<br />}</pre><br /><strong>Keterangan</strong><br /><ul><li>Untuk background position pada posisi vertical kita gunakan sebesar 15px.</li><li>Background-position horizontal bernilai <span class="on">50%</span> supaya posisi background center horizontal.</li><li>Saat menggunakan sebuah background-image sebagai batas komentar, kita harus mengetahui ketinggian background (gambar). </li><li>Tinggi gambar tersebut kita gunakan sebagai <b>padding-bottom</b> dengan menambahnya sebesar 10px. Penambahan ini dimaksudkan untuk menciptakan ruang dengan komentar di bawahnya.</li> <li>Dengan perhitungan menggunakan angka angka di atas, maka batas tiap komentar akan lekat di teks terakhir komentar sementara di bawahnya ada padding yang mencukupi.</li><li>Dalam kode CSS di atas digunakan background berktinggian 4px oleh karena itu <span class="yb">padding-bottom </span>= 4px + 10px = <span class="yb">14px</span>.</li></ul><br /><p class="gray">Beberapa Kode CSS yang bisa dimanfaatkan</p><br />Beberapa kode CSS yang telah lengkap dengan background-image ini bisa dimanfaatkan langsung dengan menyimpan <i>di atas kode</i> <span class="ON">]]></b:skin></span>.<br /><pre class="blue"><b>dd.comment-footer</b> {<br /> padding-bottom: 22px; <br /> background: url(http://i37.tinypic.com/t8b1na/tantytm/bgimg/Redball12.gif) bottom left repeat-x;<br /> background-position: 50% 15px;<br />}</pre><br /><pre class="blue"><b>dd.comment-footer</b> {<br /> padding-bottom: 25px; <br /> background: url(http://i54.tinypic.com/28l7tyr/tantytm/bgimg/V15H5.gif) bottom left repeat-x;<br /> background-position: 50% 15px;<br />}</pre><br /><pre class="blue"><b>dd.comment-footer</b> {<br /> padding-bottom: 16px; <br /> background: url(http://i40.tinypic.com/2evwaq9/tantytm/bgimg/V6H345.png) bottom left repeat-x;<br /> background-position: 50% 15px;<br />}</pre><br /><strong>Menggunakan background animasi</strong>:<br /><pre class="blue"><b>dd.comment-footer</b> {<br /> padding-bottom: 24px; <br /> background: url(http://i47.tinypic.com/1zf69nr/tantytm/bgimg/minusAnima14.png) bottom left repeat-x;<br /> background-position: 50% 15px;<br />}</pre><br /><br /><pre class="blue"><b>dd.comment-footer</b> {<br /> padding-bottom: 35px; <br /> background: url(http://i51.tinypic.com/2r2q805/tantytm/bgimg/bloodanima.gif) bottom left repeat-x;<br /> background-position: 50% 15px;<br />}</pre></div><br /><br /><span class="ob">Tutorial lain yang jauh lebih lengkap dengan jumlah ratusan posting menarik dapat anda buka melalui link di bawah ini:</span><br /><br /><a class="sini" href="http://gubhugreyot.blogspot.com/" target="_blank" title="Silahkan KLIK di sini dan ditanggung anda akan tercengang mengikuti tutorial yang tersedia">Best Blogger Tutorial Collection</a>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com6tag:blogger.com,1999:blog-747725801833073244.post-41866178102446928412010-08-16T05:14:00.000-07:002010-08-16T07:31:15.204-07:00Membuat Text Shadow dengan jQuery Text Shadow<div align="justify">Membuat sebuah fungsi yang kompatibel di semua browser merupakan harapan dan keinginan semua blogger. Apa yang terposting atau desain blog terlihat tampil tanpa perbedaan di semua browser adalah kepuasan. Salah satunya adalah text shadow. Memang, untuk membuat sebuah teks shadow dapat kita lakukan dengan menggunakan kode css saja, akan tetapi untuk membuatnya bisa tertampilkan di Internet Explorer maka sebuah kode khusus harus disertakan. Hal seperti ini terkadang terasa "ribet" dan merepotkan dan cenderung membuat kode yang dipergunakan semakin bertambah banyak, dan susahnya untuk menuliskannyapun acap kali terlupa. Untuk mengatasi persoalan seperti ini, kita dapat memanfaatkan jQuery text shadow. Scriptnya tidak terlalu banyak dan setelah terpasang maka text shadow dapat langsung dibuat hanya dengan satu kode yang sekaligus juga berfungsi dengan baik di IE. Cara untuk membuatnyapun teamat sederhana, karena kita hanya perlu menggunakan jQuery-1.2.6.js, jQuery-1.3.2.js atau jquery-1.3.2.js dan jquery-textshadow.js. Dengan pertimbangan banyaknya blogger yang menggunakan jquery-1.3.2.js atau jquery-1.3.2.min.js, maka kita akan sesuaikan saja dengan memanfaatkan jquery ini. <br /><p class="gray-2">Cara membuat text shadow menggunakan jquery-textshadow</p><ol><li>Copy paste jquery-textshadow di bawah ini kemudian upload di file hosting/javascript hosting :</li><pre class="blue">/* jquery-textshadow.js */<br />(function($){<br />$.fn.textShadow = function(useroptions) {<br />return this.each(function() {<br />var obj = $(this);<br />obj.removeTextShadow();<br />var shadowarray = obj.css("text-shadow").split(" ");<br />var sradi = parseInt(shadowarray[3], 10);<br />var text = "<span class='jQshad'>" + obj.html() + "</span>";<br />var padding = {<br />left:parseInt(obj.css("padding-left"), 10),<br />top:parseInt(obj.css("padding-top"), 10)<br />};<br />var defaults = {<br />color: shadowarray[0],<br />radius: sradi,<br />xoffset: parseInt(shadowarray[1], 10)-1+(padding.left-sradi) + "px",<br />yoffset: parseInt(shadowarray[2], 10)-1+(padding.top-sradi) + "px",<br />opacity: 50<br />};<br />var options = $.extend(defaults, useroptions);<br />options.color = (options.color.length == 4) ? options.color.replace(/#([0-9A-f])([0-9A-f])([0-9A-f])/i, '#$1$1$2$2$3$3') : options.color;<br />var filtertext = "progid:DXImageTransform.Microsoft.Glow(Color="+options.color+",Strength="+(options.radius/6)+") progid:DXImageTransform.Microsoft.Blur(pixelradius="+options.radius+", enabled='true') progid:DXImageTransform.Microsoft.Alpha(opacity="+options.opacity+")";<br />if($.browser.msie && options != "") {<br />obj.css({"position":"relative","zoom":"1"}).append(text);<br />if($.browser.version >= 8) {<br />obj.css({"z-index":"1"});<br />}<br />obj.children("span.jQshad").css({<br />"position":"absolute",<br />"z-index":"-1",<br />"zoom":"1",<br />"left":options.xoffset,<br />"top":options.yoffset,<br />"color":options.color,<br />"filter":filtertext,<br />"-ms-filter":filtertext<br />});<br />}<br />});<br />};<br />$.fn.removeTextShadow = function() {<br />return this.each(function() {<br />$(this).children("span.jQshad").remove();<br />});<br />};<br />})(jQuery);</pre><li>Setelah jquery-textshadow.js ter-upload, simpan link-nya bersamaan dengan jquery-1.3.2.min.js dan sedikit script tambahan yang lain di atas <head></li><li>Contoh kode yang digunakan untuk membuat text shadow menggunakan jquery.</li><pre class="blue">h2.shadow {<br /> color: #222;<br /> text-shadow: 0px 1px 1px #fff;<br /> background: #888;<br /> }</pre><li>Dengan kode di atas maka hanya akan berfungsi di luar IE. Supaya di IE-pun dapat berkerja dengan baik, maka kita harus tambahkan sedikit script seperti di bawah ini:<pre class="blue"><script type="text/javascript"><br /> $(document).ready(function(){<br /> $('h1.shadow').textShadow();<br /> });<br /></script></pre>Di atas script inilah baru kita letakkan jQuery-1.3.2.min.js dan jQuery-textshadow, sehingga bentuknya seperti terlihat di bawah :<pre class="blue"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br /><script src="http://..../jquery-textshadow.js" type="text/javascript"></script><br /><script type="text/javascript"><br /> $(document).ready(function(){<br /> $('h1.shadow').textShadow();<br /> });<br /></script></pre>Karena dua javascript terbawah hanya akan kita fungsikan di IE, maka kita akan tambahkan kode lain supaya javascriptnya juga hanya bekerja ketika blog dibuka di IE. Bentuknya menjadi seperti di bawah ini :<pre class="blue"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><br /><!--[if !IE]> <br /> <script src="http://..../jquery-textshadow.js" type="text/javascript"></script><br /> <script type="text/javascript"><br /> $(document).ready(function(){<br /> $('h1.shadow').textShadow();<br /> });<br /> </script><br /><![endif]--><br /><br /><head></pre><li>Apabila beberapa fungsi text shadow ingin kita tambahkan, maka kita tinggal rubah script terakhir menjadi seperti ini :</li><pre class="blue"><script type="text/javascript"><br /> $(document).ready(function(){<br /> $('h1.shadow, h2.tshad, h3.tshad-2, p.textsd').textShadow();<br /> });<br /> </script></pre><li>Setelah script baru seperti di atas dibuat, maka hanya tinggal kita siapkan kode css untuk text shadow dan semua akan berfungsi dengan baik di semua browser.</li></ol><p class="gray-2">Untuk melakukan penyimpanan script lakukan langkah berikut</p><ol><li>Login ke Blogger</li><li>Buka Edit HTML</li><li>Cari Kode <head></li><li>Simpan seluruh script di atas kode <head> seperti yang terlihat di atas.</li><li>Lanjutkan dengan mencari kode ]]></b:skin>, kemudian kode css textshadow letakkan di atasnya.<li>Contohnya seperti berikut:<pre class="blue">h2.shadow {<br /> color: #222;<br /> text-shadow: 0px 1px 1px #fff;<br /> background: #888;<br /> }<br /><br />]]></b:skin></pre><li>Apabila kode text shadow yang lain akan di tambahkan, silahkan letakkan mengikuti yang sebelumnya dengan posisi tetap di atas ]]></b:skin></li><li>Untuk menggunakannya dalam posting atau widget, silahkan gunakan kode html seperti di bawah ini :</li><pre class="blue"><h1 class="shadow">Tuliskan teks di sini</h1></pre></ol><p class="cat">D E M O jQuery Text Shadow</p>Anda dapat melihat demo text shadow dan kode css yang digunakan dengan membuka link di bawah ini:<br/><br/><a class="sini" href="http://tantytmdemo.blogspot.com/2010/08/text-shadow.html" target=_blank"><blink>D E M O</blink></a></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com0tag:blogger.com,1999:blog-747725801833073244.post-50474233009680584592010-08-14T03:10:00.000-07:002010-08-16T05:10:52.807-07:00Text Shadow Jadikan Teks Lebih Indah: Cara Membuat Text Shadow di IE , Opera, Mozzila dan Safari<div align="justify">Penggunaan text shadow bisa menjadi satu cara untuk membuat tampilan sebuah teks terlihat berbeda dan semakin menarik. Teks dengan efek bayangan atau lebih dikenal dengan text-shadow, sebenarnya hanyalah sebuah penambahan kode css yang amat sederhana namun mampu menciptakan berbagai variasi bentuk teks. Efek bayangan yang tercipta bisa merupakan sebuah bayangan tunggal, bayangan ganda atau bahkan bayangan yang bertumpuk/berulang (multiple). Kode css teks shadow kompatibel untuk semua browser dan kode yang digunakannya pun sama, terkecuali di Internet Explorer (IE). Perbedaan kode di IE ini, sekali lagi menjadi pertanyaan besar bagi semua blogger. Mengapa di IE segalanya serba berbeda dan bahkan beberapa kode css3 sama sekali tidak dapat difungsikan? Kondisi yang seperti ini bahkan membuat beberapa rekan blogger mengatakan, "Buat apa memikirkan IE? Biar matipun kita tak akan merasa prihatin!". Beberapa yang lain juga bilang, "Ngapain mesti menggunakan IE, toh masih banyak browser lain yang jauh lebih bagus dan sangat akomodatif sekaligus mempunyai tingkat kompabilitas tinggi terhadap kode html yang baru, terutama css 3!". <br /><br />Apa yang tersampaikan tersebut di atas sebenarnya ada benarnya, sekalipun kejadian seperti ini (kompabilitas IE) terkadang juga menjadi pemikiran tersendiri. Apapun juga, masih cukup banyak pengguna IE dan tidak boleh tidak apa yang kita tuangkan di blog, sebagian pengunjung akan membukanya juga dengan IE. Dus ..., apabila kita tidak menggunakan kode yang kompatibel di IE, maka apa yang terposting juga hanya akan dapat dinikmati secara sempurna di luar IE, sementara ketika dibuka lewat IE apa yang sudah kita buat dengan susah payah tak akan termunculkan sesuai harapan. Yah .. itulah yang akhirnya membuat kita semua jadi pusing dan merasa prihatin. Ah ... seandainya saja IE seperti yang lain ... <br /><br />Bagaimana menciptakan teks shadow yang kompatibel di semua browser termasuk di IE? Beberapa cara dapat kita lakukan :<ol><li>Menggunakan kode css text-shadow dan menambahkan kode css yang khusus dipergunakan untuk menciptakan text shadow di IE.</li><li>Menggunakan jQuery text-shadow.</li><li>Menggunakan file .htc</li></ol> Dari ketiga cara di atas, sebenarnya yang paling nyaman digunakan adalah cara yang ke-3. Dengan hanya menggunakan file berekstensi htc ini, maka beberapa fungsi sekaligus sudah dapat bekerja secara sempurna di IE, seperti rounded corners, box shadow (drop shadow) dan text shadow. Sayangnya file ini harus diupload terlebih dahulu di blog yang kita gunakan. Keharusan seperti ini tentu saja tak mungkin kita lakukan di blogspot. Sayang ... sekali lagi amat mengecewakan ..... Cara lain yang terasa paling mudah tentunya dengan menggunakan jQuery teks shadow. Hanya dengan menggunakan jQuery-1.3.2.js atau jQuery-1.4.2.js dan jQuery-textshadow.js, maka kode css yang kita tuliskan secara otomatis akan langsung bekerja secara sempurna termasuk di IE. Sangat praktis dan membuat siapapun dengan mudah melakukannya. <br /><p class="gray-2">Cara mennuliskan kode text shadow</p><br />Untuk membuat sebuah teks dalam bentuk teks dengan bayangan (text shadow), secara umum dituliskan sebagai :<pre class="blue">.textshadow {<br /> text-shadow: ..px ..px ..px color;<br /> }</pre>, sehingga bentuk lengkap detail kode css-nya seperti contoh berikut :<pre class="blue">.textshadow {<br /> text-shadow: 1px 1px 1px #fff;<br /> }</pre>, atau dalam bentuk yang lain seperti berikut :<pre class="blue">h1 {<br /> text-shadow: 1px 2px 2px #000;<br /> }<br />h2 {<br /> text-shadow: 0 1px 8px black;<br /> }<br />p {<br /> text-shadow: 2px 2px 10px #222;<br /> }</pre>Anda dapat juga menuliskan dalam bentuk yang berbeda seperi ini :<pre class="blue">h1.textshadow {<br /> black 1px 1px 6px;<br /> }</pre>, atau juga misalnya seperti :<pre class="blue">h1.textshadow {<br /> 2px 2px 2px rgba(0,0,0,0.9);<br /> }</pre><p class="gray">Menambahkan kode pelengkap lain pada text-shadow</p>Apabila menghendaki sebuah syntax lengkap yang diipadu dengan text-shadow, anda dapat menambahkan beberapa kode css yang lain hingga dihasilkan sebuah syntax dengan fungsi tertentu. Di bawah ini adalah sebuah contoh yang bisa digunakan sebagai referensi untuk menciptakan fungsi yang lain melalui sebuah syntax.<pre class="blue">h1.tshad {<br /> font: 22px Droid Serif;<br /> font-weight: bold;<br /> color: #000;<br /> text-shadow: 2px 2px 2px #8a4e01;<br /> padding: 5px 10px;<br /> text-align: center;<br /> margin: 20px auto;<br /> }</pre><p class="gray-2">Text shadow untuk Internet Explorer (IE)</p>Agar text shadow dapat berfungsi di IE, kita harus menambahkan kode css yang khusus untuk menciptakan efek shadow pada teks. Bentuk kode cssnya sebagai berikut :<pre class="blue">filter: progid:DXImageTransform.Microsoft.Shadow(color='#8a4e01',direction='125',strength='2');</pre>Jika kode ini digabungkan dengan syntax di atasnya, maka kode barunya akan terlihat seperti ini.<p class="gray">Text shadow dengan penambahan kode css text shadow di IE<pre class="blue">h1.tshad {<br /> font: 22px Droid Serif;<br /> font-weight: bold;<br /> color: #000;<br /> text-shadow: 2px 2px 2px #8a4e01;<br /> padding: 5px 10px;<br /> text-align: center;<br /> margin: 20px auto;<br /> filter: progid:DXImageTransform.Microsoft.Shadow(color='#8a4e01',direction='125',strength='2');<br /> }</pre><p class="gray-2">Keterangan penggunaan kode text-shadow di IE</p><ul class="dua"><li class="dua">color='#8a4e01' merupakan warna shadow (bayangan)</li><li class="dua">direction='125' digunakan untuk menciptakan posisi bayangan. Anda dapat menggunakan nilai 0 s/d 360</li><li class="dua">streng='2' digunakan untuk mengatur kekuatan shadow, dimana semakin besar nilainya, maka bayangan akan semakin lebar (luas).</li></ul><p class="gray-2">Beberapa contoh text-shadow dan bentuk kode css-nya</p><br /><div style="background:#ccc;border:1px solid #666;margin:10px auto;padding:0;"><p class="shadow-1" style="font:18px Droid Serif;font-weight: bold;padding:3px 10px;text-shadow: 1px 2px 3px #222;filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888',direction='145',strength='3');">Contoh bentuk Text Shadow-1</p></div><pre class="blue">p.shadow-1 {<br /> font:18px Droid Serif;<br /> font-weight: bold;<br /> text-shadow: 1px 2px 3px #222;<br /> padding:3px 10px;<br /> filter: progid:DXImageTransform.Microsoft.Shadow(color='#888888',direction='145',strength='3');<br /> }<br /><br />Penulisan kode HTML-nya :<br /><br /><p class="shadow-1">Tuliskan teks di sini!</p></pre><br /><div style="background:#888;border:1px solid #666;margin:10px auto;padding:0;"><p class="shadow-2" style=" color: #FFFFFF;font: 18px Droid Serif;text-shadow: 1px 2px 3px #000;font-weight: bold;filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='145',strength='2');padding: 3px 10px;">Contoh bentuk Text Shadow-2</p></div><pre class="blue">p.shadow-2 {<br /> color: #FFFFFF;<br /> font: 18px Droid Serif;<br /> text-shadow: 1px 2px 3px #000;<br /> font-weight: bold;<br /> filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='145',strength='2');<br /> padding: 3px 10px;<br /> }<br /><br />Penulisan kode HTML-nya :<br /><br /><p class="shadow-2">Tuliskan teks di sini!</p></pre><br /><div style="background:#666;border:1px solid #666;margin:10px auto;padding:0;"><p class="shadow-3" style=" color: #CCCC66;font: 16px Droid Serif;text-shadow: 1px 2px 2px #ea8605;font-weight: bold;filter: progid:DXImageTransform.Microsoft.Shadow(color='#ea8605',direction='145',strength='2');padding: 3px 10px;">Contoh bentuk Text Shadow-3</p></div><pre class="blue">p.shadow-3 {<br /> color: #CCCC66;<br /> font: 16px Droid Serif;<br /> text-shadow: 1px 2px 2px #ea8605;<br /> font-weight: bold;<br /> filter: progid:DXImageTransform.Microsoft.Shadow(color='#ea8605',direction='145',strength='2');<br /> padding: 3px 10px;<br /> }<br /><br />Penulisan kode HTML-nya :<br /><br /><p class="shadow-3">Tuliskan teks di sini!</p></pre><br /><div style="background:#000;border:1px solid #666;margin:10px auto;padding:0;"><h1 class="shadow-4" style="color:#666;text-shadow: 0px 1px 0px #ccc;font: 22px Droid Serif;margin:15px auto;padding:4px 10px;font-weight: bolder;filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc',direction='100',strength='2');"> Contoh bentuk Text Shadow-4</h1></div><pre class="blue">h1.shadow-4 {<br /> color: #666;<br /> text-shadow: 0px 1px 0px #ccc;<br /> font: 22px Droid Serif;<br /> margin:15px auto;<br /> padding:4px 10px;<br /> font-weight: bolder;<br /> filter: progid:DXImageTransform.Microsoft.Shadow(color='#cccccc',direction='100',strength='2');<br /> }<br /><br />Penulisan kode HTML-nya :<br /><br /><h1 class="shadow-4">Tuliskan teks di sini!</h1></pre><br /><div style="background:#000;border:1px solid #666;margin:10px auto;padding:0;"><h2 class="shadow-5" style="font:18px Droid Serif;font-weight: bold;color: blue;text-shadow: 1px 1px 4px #fff;padding: 5px 10px;filter: progid:DXImageTransform.Microsoft.Shadow(color='#ffffff',direction='135',strength='4');">Contoh bentuk Text Shadow-5</h2></div><pre class="blue">h2.shadow-5 {<br /> font:18px Droid Serif;<br /> font-weight: bold;<br /> color: blue;<br /> text-shadow: 1px 1px 4px #fff;<br /> padding: 5px 10px;<br /> filter: progid:DXImageTransform.Microsoft.Shadow(color='#ffffff',direction='135',strength='4');<br /> }<br /><br />Penulisan kode HTML-nya :<br /><br /><h2 class="shadow-5">Tuliskan teks di sini!</h2></pre><br /><div style="background:#888;border:1px solid #666;margin:10px auto;padding:0;"><h3 class="shadow-6" style=" color: #444;font: 18px Times; font-weight: bold;text-shadow: -2px -2px 5px yellow, 0px 1px 0px red; padding: 5px 10px;">Contoh bentuk Text Shadow-5</h3></div><pre class="blue">h3.shadow-6 {<br /> color: #444;<br /> font: 18px Times; <br /> font-weight: bold;<br /> text-shadow: -2px -2px 5px yellow, 0px 1px 0px red; <br /> padding: 5px 10px; <br /> background: #888;<br /> }<br /><br />Text Shadow di atas berfungsi hanya di luar IE. Penulisan kode HTML-nya :<br /><br /><h3 class="shadow-6">Tuliskan teks di sini!</h3></pre><br /><div style="background:#333;border:1px solid #666;margin:10px auto;padding:0;"><p class="supershadow" style="font:18px Droid Serif;font-weight: bold;color: #FF0000;text-shadow: 0 0 5px #ccc, 0 -4px 4px #c8c7c6, 2px 2px 10px #fc0c00, 2px -8px 8px #ffef3f, -2px -16px 12px #f80, 2px -18px 18px #ff9702; padding: 20px 20px 0px;">Contoh bentuk Text Shadow-7</p></div><pre class="blue">p.supershadow {<br /> font:18px Droid Serif;<br /> font-weight: bold;<br /> color: #FF0000;<br /> background: #555;<br /> text-shadow: 0 0 5px #ccc, 0 -4px 4px #c8c7c6, 2px 2px 10px #fc0c00, 2px -8px 8px #ffef3f, <br /> -2px -16px 12px #f80, 2px -18px 18px #ff9702;<br /> padding: 20px 20px 0px; <br /> }<br /><br />Multiple Text Shadow ini akan berfungsi dengan sempurna di luar IE. Penulisan kode HTML-nya :<br /><br /><p class="supershadow">di sini tek dituliskan</p></pre></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com5tag:blogger.com,1999:blog-747725801833073244.post-3628913190753315682010-08-10T22:12:00.001-07:002010-08-15T08:47:13.742-07:00CSS 3 Border Radius - Rounded Corners: Cara Menggunakan dan Menuliskan Kode CSS3 Border Radius<div align="justify">Perkembangan dan kemajuan pada pemanfaatan kode CSS memungkinkan pengguna untuk membuat beberapa bentuk desain baru yang sebelumnya tak mungkin dilakukan tanpa bantuan javascript atau penggunaan kode css dalam jumlah bertumpuk. Bahkan beberapa animasi gerak, saat ini dapat dibuat hanya dengan memanfaatkan kode css terbaru yang lebih dikenal dengan sebutan css3.<br /><br />Perkembangan yang terjadi pada css3 direspon dengan luar biasa cepat oleh beberapa browser besar, terutama Google Chrome, Safari, Opera serta Mozzila. Sementara untuk Internet Explorer beberapa kode css3 belum diakomodir dengan baik. Memang beberapa dapat difungsikan , tetapi sayangnya kode yang harus dituliskan juga berbeda sangat jauh dengan browser yang lain. Ketidak seragaman ini tentunya masih dapat dimaklumi karena banyaknya hal yang terkait di dalamnya, namun tentunya apabila perbedaan yang ada tidak terlalu jauh, maka penggunaan kode juga akan semakin mudah.<br /><br />Menilik dari pesatnya perkembangan yang terjadi, kiranya para pengguna boleh merasa optimis bahwa kode css3 ini akhirnya tidak boleh tidak akan diakomodir secara total oleh semua browser. Browser yang tidak mengikuti perkembangan terbaru diyakini akan tergusur dari peta persaingan yang semakin sengit. Bukankan bukti sudah mulai terlihat, dimana IE yang begitu kuatpun saat ini mulai banyak ditinggalkan penggunannya?!</div><br /><p class="gray-2">Cara Penulisan CSS3 Rounded Corners di Safari</p><pre class="blue">.round{<br /> -webkit-border-radius: 10px;<br /> }</pre>, atau dituliskan dalam bentuk :<pre class="blue">.round{<br /> -webkit-border-top-left-radius: 10px;<br /> -webkit-border-top-right-radius:10px;<br /> -webkit-border-bottom-left-radius: 10px;<br /> -webkit-border-bottom-right-radius:10px;<br /> }</pre><br /><p class="gray">Cara Penulisan CSS3 Rounded Corners di Opera</p><pre class="blue">.round{<br /> border-radius: 10px;<br /> }</pre>, atau bisa juga anda tuliskan dalam bentuk :<pre class="blue">.round{<br /> border-radius: 10px 10px 10px 10px;<br /> }</pre> Penulisan kode seperti di atas mempunyai arti :<pre class="blue">.round{<br /> border-radius: (top-left)px (top-right)px (bottom-right)px (bottom-left)px;<br /> }</pre>, atau anda bisa juga menuuliskan dalam bentuk yang berbeda seperti di bawah ini :<pre class="blue">.round{<br /> border-top-left-radius: 10px;<br /> border-top-right-radius:10px;<br /> border-bottom-right-radius: 10px;<br /> border-bottom-left-radius:10px;<br /> }</pre><br /><p class="gray">Cara Penulisan CSS3 Rounded Corners di Mozilla</p><pre class="blue">.round{<br /> -moz-border-radius: 10px;<br /> }</pre>, atau bisa juga anda tuliskan dalam bentuk :<pre class="blue">.round{<br /> -moz-border-radius: 10px 10px 10px 10px;<br /> }</pre> Penulisan kode seperti di atas mempunyai arti :<pre class="blue">.round{<br /> -moz-border-radius: (topleft)px (topright)px (bottomright)px (bottomleft)px;<br /> }</pre>, atau anda bisa juga menuuliskan dalam bentuk yang berbeda seperti di bawah ini :<pre class="blue">.round{<br /> -moz-border-radius-topleft: 10px;<br /> -moz-border-radius-topright:10px;<br /> -moz-border-radius-bottomright: 10px;<br /> -moz-border-radius-bottomleft:10px;<br /> }</pre><br /><p class="gray">Menggabungkan kode css rounded corners dari beberapa browser</p><pre class="blue">.round{<br /> border-radius: 10px;<br /> -moz-border-radius: 10px;<br /> -webkit-border-radius: 10px;<br /> }</pre>, atau dapat juga dituliskan dalam bentuk :<pre class="blue">.round{<br /> border-top-left-radius: 10px;<br /> border-top-right-radius: 10px;<br /> border-bottom-right-radius: 10px;<br /> border-bottom-left-radius: 10px;<br /> -moz-border-radius-topleft: 10px;<br /> -moz-border-radius-topright: 10px;<br /> -moz-border-radius-bottomright: 10px;<br /> -moz-border-radius-bottomleft: 10px;<br /> -webkit-border-top-left-radius: 10px;<br /> -webkit-border-top-left-radius: 10px;<br /> -webkit-border-bottom-right-radius: 10px;<br /> -webkit-border-bottom-left-radius: 10px;<br /> }</pre><br /><p class="gray">Merubah nilai rounded corners</p><br />Untuk mendapatkan lengkungan sesuai keinginan, silahkan rubah setiap nilai yang disertakan sesuai kebutuhan. Anda bisa melihat bentuk perubahan nilai dan efek yang dihasilkan melalui contoh di bawah ini.<br /><p class="gray">Contoh Border Radius</p><br /><p style="width: 300px; color: rgb(0, 0, 0); font-weight: 900; font-size: 16px; text-align: center; padding: 4px 10px; margin: 15px auto; background: none repeat scroll 0% 0% rgb(153, 153, 153); text-shadow: 1px 1px 1px rgb(255, 255, 255); -moz-border-radius: 15px 15px 25px 25px; border: 5px solid rgb(68, 68, 68);">Border Radius<br />Opera<br />Mozzila<br />Safari</p><br /><p style="width: 300px; color: rgb(0, 0, 0); font-weight: 900; font-size: 16px; text-align: center; padding: 4px 10px; margin: 15px auto; background: none repeat scroll 0% 0% rgb(153, 153, 153); text-shadow: 1px 1px 1px rgb(255, 255, 255); -moz-border-radius: 15px 15px 15px 15px; border: 5px solid rgb(68, 68, 68);">Border Radius<br />Opera<br />Mozzila<br />Safari</p><br /><p style="width: 300px; color: rgb(0, 0, 0); font-weight: 900; font-size: 16px; text-align: center; padding: 4px 10px; margin: 15px auto; background: none repeat scroll 0% 0% rgb(153, 153, 153); text-shadow: 1px 1px 1px rgb(255, 255, 255); -moz-border-radius: 12px 30px 12px 30px; border: 5px solid rgb(68, 68, 68);">Border Radius<br />Opera<br />Mozzila<br />Safari</p><p class="gray">Rounded Corners dengan background image</p><div style="height: 300px; width: 400px; margin: 15px auto; background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYKpy5jTkOrDno8yZc-ocIzox3SinAS7FN3PHnIvjM4V4dxBGBKJIEyYBR-RXhyphenhyphenn9h87d84RajHYGr4y-myf5SGm7DCE6olaVLaVjXyoZ_-jpUx1dN1_SM6u1ziTIRLh2TuE39xVrjQVl/s400/AmricWorld-2.jpg") no-repeat scroll center center rgb(153, 153, 153); text-shadow: 1px 1px 1px rgb(255, 255, 255); -moz-border-radius: 40px 40px 40px 40px; border: 10px solid white;"></div><br /><p class="gray">Kode CSS yang digunakan untuk 4 contoh di atas</p><br /><pre class="blue"><p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:15px 15px 25px 25px;-moz-border-radius:15px 15px 25px 25px;-webkit-border-radius:15px 15px 25px 25px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p></pre><pre class="blue"><p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius: 15px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p></pre><pre class="blue"><p style="width:300px;font-family:arial; color:#000;font-weight:900;font-size:16px;text-align:center;padding:4px 10px;margin:15px auto;background:#999;text-shadow:1px 1px 1px #fff;border-radius:12px 30px;-moz-border-radius:12px 30px;-webkit-border-radius:12px 30px;border:5px solid #444;">Border Radius<br />Opera<br />Mozzila<br />Safari</p></pre><pre class="blue"><style type="text/css"><br />.box {<br /> height:300px;<br /> width:400px;<br /> margin:15px auto;<br /> background:#999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYKpy5jTkOrDno8yZc-ocIzox3SinAS7FN3PHnIvjM4V4dxBGBKJIEyYBR-RXhyphenhyphenn9h87d84RajHYGr4y-myf5SGm7DCE6olaVLaVjXyoZ_-jpUx1dN1_SM6u1ziTIRLh2TuE39xVrjQVl/s400/AmricWorld-2.jpg) center no-repeat;<br /> border-radius: 40px;<br /> -moz-border-radius: 40px;<br /> -webkit-border-radius: 40px;<br /> border:10px solid #fff;<br /> }<br /></style><br /><br /><span style="font-weight:bold;font-size:14px;color:#80d1fb;">Kode HTML</span><br /><br /><div class="box"></div></pre><br /><p class="gray">Bagaimana Cara Membuat Border Radius di Internet Explorer?</p><br /><div align="justify"> Untuk membuat border radius atau rounded corners di Internet Explorer, diperlukan cara-cara atau teknik sangat khusus yang berbeda dengan apa yang kita lakukan di browser lainnya. <ol><li>Kita dapat memanfaatkan kode css yang dipadukan dengan sebuah image (gambar) atau beberapa buah image (gambar) yang dipergunakan sebagai background untuk memperoleh bangun dengan sisi lengkung (rounded corners),</li><li> atau dapat juga digunakan javascript dan background image pembentuk rounded corners,</li><li> serta dapat juga hanya menggunakan javascript tanpa sebuah background image-pun namun mampu menciptakan sisi lengkung.</li> Beberapa situs memberikan solusi bagaimana membangun sebuah bentuk rounded corners, baik menggunakan kode css ataupun javascript secara gratis. Beberapa alamat di bawah ini bisa anda kunjungi:</ol></div><ol><li><a class="sini" href="http://www.curvycorners.net/" target="_blank">Curvy Corners</a></li><li><a class="sini" href="http://www.html.it/articoli/nifty/index.html" target="_blank">Nifty Corners</a></li><li>Menggunakan file berekstensi .htc. Anda bisa download file beserta demo-nya di <a class="sini" href="http://code.google.com/p/curved-corner/" target="_blank">Curved Corner</a></li></ol><br /><p class="gray">Menggunakan JQuery untuk membuat effects Rounded Corners yang kompatibel di semua Browser</p><div align="justify">Selain cara-cara di atas, anda bisa juga menggunakan jquery, yang merupakan javascript paling banyak digunakan di kalangan blogger. Dengan memanfaatkan jQuery-1.3.2.js (jQuery-1.3.2.min.js) atau jQuery-1.4.2.js (jQuery-1.4.2.min.js) dan sedikit javascript tambahan, maka anda akan mendapatkan sebuah jalan keluar untuk membentuk bangun dengan sisi lengkung (rounded corners) yang kompatibel di semua browser. Banyak pilihan yang mungkin kita lakukan, karena banyak sekali yang membahas tentang hal ini. Kita akan coba satu pilihan terbaik dengan script minimal akan tetapi mampu menghasilkan bentuk rounded corners yang fleksibel untuk digabungkan dengan fungsi-fungsi yang lain. Supaya lebih fokus dalam pembahasan dan pemahaman bagaimana menciptakan efek lengkung dengan metoda ini, kita akan bahas secara tuntas di posting berikutnya.</div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com0tag:blogger.com,1999:blog-747725801833073244.post-40354737859385992502010-05-22T10:51:00.000-07:002010-07-23T15:38:11.901-07:00Cara Membuat Teks Animasi di FlamingText.com<div align="center"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgddEWMD-wMDqL_JxEFsY_WkcrIet7xg9BJmiZgs6X4QSQYxA2QR7njf_70cKZVqQ2naI4SFAHbzomf1Vf_zo4ZM8YlBTqRDezByrwvhqD3pEYJe2ptt-Wwa5MnrHQ810gr8LoDAV22hVs2/s400/flamingtext50.gif" title="KLIK untuk melihat gambar dalam ukuran besar" target="_blank"><img style="width: 300px; height: 55px;border:none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4Wb-SR-QuM69zfioMjGgT7vYk53I4ShyphenhyphentQZq49dR226g8IBDhVTQWWXL2SGYZMojlvl07xtqSEc23KIqf2U1yvy29cdm_WRX__z7nWu6MmmlUB6rFO0rB2KSpzmedR9bf1vFDDO6pBDi/s320/flamingtext20.gif" alt=""id="BLOGGER_PHOTO_ID_5497229230622338306" /></a></div><div align="justify">FlamingText.com merupakan salah satu situs penyedia layanan pembuatan text animasi gratis yang dapat dimanfaatkan blogger untuk melengkapi kelengkapan blog yang berupa text animasi dalam bentuk gambar. Berbagai teks bisa dibuat tanpa perlu bersusah payah membuat sendiri dengan berbagai software. Meskipun memanfaatkan situs seperti ini banyak sekali keterbatasan akan bentuk animasi dan jenis font yang tersedia, namun untuk sekedar menambal kebutuhan blog sangatlah mencukupi. Dibandingkan kekurangan yang tersebut di atas, tentu saja lebih banyak keuntungan yang kita mungkin dapatkan. Satu yang amat jelas adalah iritnya waktu dan tenaga serta pikiran yang harus tercurah hanya sekedar untuk membuat sebuah gambar teks berbentuk animasi. <p> Teks animasi dengan berbagai bentuk dan pilihan dapat kita buat dengan cara :</p><a name='more'></a><ol><li><b>FlamingText.com</b> : Sebagai langkah awal tentunya kita harus datang di FlamingText.com. Anda dapat <i>KLIK</i> link yang terulis di bawah ini untuk ke FlamingText.com.<br /><a class="disini" href="http://flamingtext.com/" target="_blank" title="Link ke Flaming Text.com. Silahkan KLIK di sini!"><img style="width: 129px;height:39px; margin:10px 15px;;border:none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie4Wb-SR-QuM69zfioMjGgT7vYk53I4ShyphenhyphentQZq49dR226g8IBDhVTQWWXL2SGYZMojlvl07xtqSEc23KIqf2U1yvy29cdm_WRX__z7nWu6MmmlUB6rFO0rB2KSpzmedR9bf1vFDDO6pBDi/s320/flamingtext20.gif" alt=""id="BLOGGER_PHOTO_ID_5497229230622338306" /></a><br /></li><li><b>Pilih Bentuk Teks Animasi</b> : Setelah halaman FlamingText.com terbuka, kita akan melihat banyak contoh bentuk teks di halaman utamanya. Silahkan langsung <i>KLIK</i> bentuk teks yang anda inginkan. Selain memilih dengan cara ini, dapat juga pilihan dilakukan dengan membuka pada drop down menu yang terletak di bagian atas. Di sini tersedia banyak link yang menyediakan begitu banyak fungsi.</li><li>Misalnya anda pilih "<strong>Horizon</strong>". Setelah <i>KLIK pada gambar yang bertuliskan horizon</i>, maka akan terbuka halaman baru tempat di mana teks yang kita rencanakan akan dibuat.</li>.<ul class="dua"><li class="dua"><em>Text String</em> : Buat teks yang diinginkan di sini. Tulis pada box yang tersedia. Perlu diketahui bahwa ada batasan berapa jumlah font maksimal yang dapat kita buat untuk membuat sebuah kalimat.</li><li class="dua"><em>Font-size</em> : Tulis ukuran yang anda ingin gunakan. Ukuran ini amat bervariasi dengan besar ukuran kira-kira dari 5px hingga 100px.</li><li class="dua"><em>Font</em> : Silahkan pilih berbagai font-family yang telah disediakan. Anda dapat melihat bentuk contoh font family setelah pilihan dilakukan.</li><li class="dua"><em>Background</em> : Pilih background dengan <i>KLIK</i> "box" di di bawah teks yang bertuliskan "background-color". Tentukan warna background setelah "color picker ditampilkan". Setelah menentukan warna <i>KLIK di luar box color picker</i>.</li><li class="dua"><em>Text-gradient</em> : Silahkan pilih dengan <i>KLIK pada selector</i>.</li><li class="dua"><em>OutlineSize- Outline Color </em> : Outline Size adalah garis tepi (tebal border) dan Outline Color adalah warna bordernya. Rubah nilai OutlineSize dan Outline Color bila diperlukan.</li><li class="dua"><em>AddBevel </em> : Beri tanda jika ingin menambahkan "efek bevel".</li><li class="dua"><em>Bevel Size </em> : Tulis ukuran efek bevel.</li><li class="dua"><em>Shadow</em> : Beri tanda jika dikehendaki dan hilangkan untuk tanpa shadow.</li><li class="dua"><em>ShadowXoffset - ShadowYoffset </em> : Rubah nilai untuk merubah ukuran efek shadow.</li><li class="dua"><em>ShadowBlur </em> : Untuk merubah ukuran lakukan perubahan nilai di box yang tersedia. Semakin kecil ukuran teks sebaiknya semakin diperkecil supaya teks terlihat jelas.</li><li class="dua"><em>Shadow Color </em> : Klik box dibawahnya untuk merubah warna efek shadow.</li><li class="dua"><em>Opacity </em> : Berfungsi untuk menciptakan efek transparansi. Nilai antara 0 s/d 100. Gunakan nilai yang cukup besar (50 s/ 90) biar tetap terlihat.</li><li class="dua"><em>Transparent</em> : Beri tanda apabila anda menghendaki background transparan</li><li class="dua"><em>File format </em> : Gunakan format jpeg, png atau gif. Bila <strong>melibatkan sebuah bentuk transparansi</strong> pilihlah file berekstensi <strong>png</strong> atau <strong>gif</strong>.<li class="dua"><em>Create Logo </em> : <i>KLIK</i> button "Create Logo" bila teks siap di buat.</li></ul></li><li><b>Teks Sudah Jadi</b> : Beberapa saat kemudia akan terbuka halaman baru. Teks yang anda buat sudah jadi dan bisa dilihat di bagian atas halaman.</li><li><b>Ambil URL Gambar Teks atau Simpan</b> : <i>KLIK kanan</i> pada mouse, kemudian silahkan simpan atau ambil URL gambarnya. <br /><span style="color:red;font-weight:">Perlu diketahui : </span><br /><em>Apabila URL gambar sudah di dapatkan, maka gambar ini harus di upload karena link gambar dari FlamingText.com hanya dapat dipergunakan sementara saat kita masih aktif di FlamingText.com</em>.</li><li><b>Upload</b> : Gunakan file hosting gratis yang ada untuk upload gambar anda. Sebagai contoh, gambar baru anda bisa di upload di <a class="disini" href="http://tinypic.com/" target="_blank" title="Anda bisa langsung KLIK di sini untuk ke Tinypic">http://tinypic.com</a></li></ol></div>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com1tag:blogger.com,1999:blog-747725801833073244.post-37389835817240420162010-05-18T04:27:00.001-07:002010-05-18T05:08:24.675-07:00Free Javascript Hosting: Upload di yourjavascript.com<div align='justify'><a href="http://bloggerstuars.blogspot.com/_p_R_KAkuh2s/S_JpUwe8NOI/AAAAAAAAAKw/YR-bmiuBeOY/s1600/stashbox-org.jp" target='_blank' title='bloggerstuars1' target='_blank'><img style="float:left; margin:3px 10px 0 0;width:200px; height:40px;background:#777;padding:3px;border:3px solid #444" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQOgJpdGxQwOLZUcthCDs7sEtlzJ0xUAKXNA71SDHOkZwYPTnuPij1cX0wtvo8HjkVgYrvyzCPzBRaKHsj73Yajxdo9J7LGEkDrh9K6YvNN2VBcZC_zoj-vmon9hIkfZltO3Tzt_2T7wJD/s400/YourJavascipt-com.jpg" id="BLOGGER_PHOTO_ID_5472580248609601730" /></a>Berbeda dengan di ripway dan stashbox, yourjavascript.com akan mengirimkan alamat file hasil upload ke email pengguna, sehingga kita harus membuka dan meng-copy URL javascript di email kita. Cara uploadnya sangat mudah dan prosesnya juga amat cepat. <p>Cara Upload javascript di yourjavascript.com :</p><ol><li><b>yourjavascript.com </b><br/>Buka alamat yourjavascript.com bawah ini :<br/> <a class='sini' target='_blank' title='yourjavascript' href='http://www.yourjavascript.com/'>http://www.yourjavascript.com</a></li><li><b>Browse</b><br/> <i>KLIK</i> button "<em>Browse</em>", kemudian pilih file yang akan di upload (dari folder PC).</li><li><b>Email</b><br/> Tuliskan secara lengkap alamat email anda.</li><li><b>Upload</b><br/> <i>KLIK</i> button "<em>Upload</em>", kemudian tunggu hingga proses upload selesai.</li><li><b>Email</b><br/> <i>Buka email anda</i>, kemudian copy URL file hasil upload.</li><li><b>Finish (selesai)</b><br/>Selesai sudah dan alamat file bisa segera digunakan. Begitulah ..., prosesnya memang sangat sederhana dan cepat</li></ol></div><p>"Tidak semua pekerjaan yang dilakukan dengan sangat cepat menciptakan hasil dengan kualitas yang jelek!"</p>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com1tag:blogger.com,1999:blog-747725801833073244.post-91778814368919228242010-05-18T02:22:00.000-07:002010-05-18T04:15:43.184-07:00Upload dan Daftar di Stashbox: Free Javascript Hosting<div align="justify"><a href="http://bloggerstuars.blogspot.com/_p_R_KAkuh2s/S_JpUwe8NOI/AAAAAAAAAKw/YR-bmiuBeOY/s1600/stashbox-org.jp" target='_blank' title='bloggerstuars1'><img style="float:left; margin:3px 10px 0 0;width:110px; height:75px;background:#555;padding:3px;border:3px solid #777" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnc9fjJzgf_kYNlwhGXyocuLYambkWnhfng2OICVOQaeTPsla5-ajncL1PKtenvhgJ2AHnoGp5g_P74IUWqbHafIjmoIMDlL0NVQDIBJXmko1LpVXcA5OnN6L3gE3774IGvVvC9tCeWgBU/s320/stashbox-org.jpg" id="BLOGGER_PHOTO_ID_5472552302541550818" /></a>Proses upload untuk menyimpan file javascript atau kode css di Stashbox.org terhitung paling mudah dilakukan. Dengan kemudahan proses dan sifatnya yang gratis, tentu blogger menjadi amat diuntungkan. Sangking gampangnya, upload di sini bisa dilakukan tanpa harus melakukan proses registrasi terlebih dahulu (tanpa harus menjadi members). Tentu saja dengan cara ini tidaklah menguntungkan bagi blogger yang secara serius menekuni aktivitas ngeblog. Apabila kita menggunakan model seperti ini, data file tidak akan tersimpan dengan sempurna, sehingga apabila suatu saat kita akan mengadakan perubahan, menghapus atau menggunakannya kembali, maka data tersebut tidak mungkin kita temukan. Sangat jelas bahwa lebih baik kita melakukan segala sesuatu dengan penuh pertimbangan, penuh perhitungan, tanggungjawab, disiplin dan selalu berpikir untuk jangka waktu ke depan.<p>Cara Mendaftar, Upload dan Mengambil Data File di Stashbox.org :</p><ol><li><b>stashbox.org</b><br/>Segera datang dan lakukan <a class='sini' href='http://stashbox.org/register.php' title='registrasi-stashbox-org' target='_blank'>registrasi di http://stashbox.org</a>. (KLIK Link di samping kiri ini!) </li><li><b>Create a Stashbox Account</b><br/>Isi kolom registrasi :<ul class='dua'><li class='dua'>Username : Tuliskan nama yang anda inginkan digunakan sebagai pengguna.</li><li class='dua'><b>Password (Kode Rahasia) :</b> Tuliskan seperti yang dipakai di blog atau email.</li><li class='dua'><b>Password Again : </b>Tulis kembali Password anda di sebelah bawahnya.</li><li class='dua'><b>Create Account : </b>Next --> <i>KLIK</i> <em>button "Create Account"</em>.</li><li class='dua'><b>Contoh Registrasi :</b> gambar di bawah ini adalah contoh pengisian formulir registrasi di Stashbox.<br/><br/><a href='http://bloggerstuars.blogspot.com/' target='_blank' title='bloggerstuars1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgauVpp2ndvXrvFw4tHiyg2h5oW55MWqJAHfGKTEnaUtv7KJYLEbwnd0350NiAy2hnd7un9J5ToAeQiK7MCsZxpdrdqfI9kK_TVSGc2maB1gdswuxIatvG16lta22A1KMzphqyVM3wR1Wzz/s400/Create-Stashbox-Account.gif' style='float:left;width:250px;height:116px;background:#555;padding:2px;border:2px solid #777;' id="BLOGGER_PHOTO_ID_5472555378246412946"/></a><div style='clear:both;'></div><br/></li></ul><li><b>Account created! Please login.</b><br/>Lakukan LOGIN dengan menuliskan :<ul class='dua'><li class='dua'>Username : <i>Tulis Username seperti yang telah dituliskan sebelumnya.</i></li><li class='dua'>Password : <i>Tulis password anda.</i></li><li class='dua'>Login : Next --> <i>KLIK</i> <em>button "loggin"</em></li></ul> </li><br /><li><b>You are now logged in.</b><br/>Login berhasil. Anda telah siap untuk upload file.<ul class='dua'><li class='dua'>Browse : Next --> <i>KLIK</i> button "<em>browse</em>".</li><li class='dua'>Folder PC : <i>Tentukan file dalam folder PC yang akan di "upload"</i></li><li class='dua'>UPLOAD : Next --> <i>KLIK</i> <em>button "Upload"</em></li><li class='dua'>Gambar Contoh box Upload :<br/><br/><a href='http://bloggerstuars.blogspot.com/' target='_blank' title='bloggerstuars1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP7NJ1_vk6MJHd-IWpk3AbUPl-tBDzPt7y1KNdjZIFjlTtkI4mGUu3XF2ox2w_p0VcxAFLI1qyiXn-Vj-tJexAR1WBQm1kIVlqFHVE1NxzLsc6DvTVFKVo-eymxyiWKKbzgUm30R8uTvj5/s400/Upload-stashbox-org.jpg' style='float:left;width:400px;height:53px;background:#555;padding:2px;border:2px solid #777;' id="BLOGGER_PHOTO_ID_5472561336447174242"/></a><div style='clear:both;'></div><br/></li></ul></li><li><b>File :</b><br/>Setelah beberapa saat akan terbuka halaman baru yang di dalamnya terdapat URL file yang telah di upload.<ul class='dua'><li class='dua'>Tarik halaman ke arah bawah.</li><li class='dua'>Ambil/copy URL file hasil upload.</li><li class='dua'>Contoh bentuk URL hasil upload :<br/><br/><a href='http://bloggerstuars.blogspot.com/' target='_blank' title='bloggerstuars1'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH9SnRAiCCH2Bj3YY6QG2K3ivO3scuitjAClZgv_D6N23Z2k6gX0xvSRPQmDdjiuB383WiQg1ZHo82dvejWPeTP575CZHfENM1Rs63Oh4jzjQc9c_lBbtrGM8yr559Icve8FkrBgLSW3R-/s400/file-upload-stashbox.jpg' style='float:left;width:250px;height:57px;background:#555;padding:2px;border:2px solid #777;' id="BLOGGER_PHOTO_ID_5472564003435151042"/></a><div style='clear:both;'></div><br/></li></ul></li><br /><li><b>Finish (Selesai)</b><br/>Anda bisa melakukan Logout setelah upload selesai, kemudian untuk kembali mengawali proses upload silahkan buka kembali http://stashbox.org, dan lakukan LOGIN.</li></ol></div><p>"Kesungguhan akan selalu menghasilkan keberhasilan!"</p>Tanty C.H.http://www.blogger.com/profile/12292562186489689858noreply@blogger.com0