Animasi Transparent Navbar

<p>Sumber : <a href="http://ardianzzz.blogspot.com/2009/11/animasi-jquery-untuk-navbar-blogger.html">(blogspot) Animasi jQuery untuk Navbar</a> by <b>Ardianzzz</b></p><p>Yang perlu dijadikan catatan pada <i>trik</i> ini adalah kita tidak mengubah navbar bawaan default blogger, melainkan sedikit menambah kreasi agar navbar tersebut tampil lebih menarik. Di samping itu, ketika kita mengunjungi blog lain tidak jarang ditemukan blog yang memiliki kresi pada navbarnya, antara lain ; memasang auto hide, menindih navbar bawaan blogger dengan navbar lain, <a href="http://optimasi-blog.blogspot.com/2010/05/pasang-navbar-statis-ala-apture.html">mengganti dengan jenis navbar lain</a>, bahkan <a href="http://optimasi-blog.blogspot.com/2010/05/menghapus-secara-permanen-navbar.html">menghilangkan secara permanen navbar tersebut</a>.</p><p><em>Nah</em>, jika kamu tidak ingin menghilangkan navbar default tersebut, tapi hanya ingin memodifikasinya, mungkin <b>trik blogger</b> ini dapat menjadi salah satu referensi untuk diterapkan dalam blog kamu. <i>Trik</i> ini menampilkan navbar blogger secara transparan dengan menggunakan jQuery, namun akan terlihat ketika didekati oleh kursor mouse.  Adapaun jQuery-nya dapat disimak seperti di bawah ini :</p><pre><code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><br /><script type='text/javascript'><br />$(document).ready(function(){<br />$("#navbar").fadeTo("slow", <span style="color: red;">0.1</span>);<br />$("#navbar").hover(function(){<br />$(this).fadeTo("slow", <span style="color: #38761d;">1.0</span>);<br />},function(){<br /><br />$(this).fadeTo("slow", <span style="color: red;">0.1</span>);<br />});<br />});<br /></script></code></pre><p>Silakan Copas jQuery di atas di atas tag <b><span style="color: red;"></head></span></b>.</p><p>Catatan :<br /><br />Ganti kode yang berwarna merah (<span style="color: red;">0.1</span> = 90%) menggambarkan transparasi navbar pada saat belum didekati kursor mouse. Jika ingin navbar tidak nampak sama sekali letakkan saja nilai <span style="color: blue;">0.0</span> :)</p><p>Ganti kode yang berwarna hijau (<span style="color: #38761d;">1.0</span>) menjadi <span style="color: blue;">0.75</span> jika ingin transparasi navbar saat didekati mouse bernilai <span style="color: blue;">25%</span>. Sedangkan jika tetap pada nilai <span style="color: #38761d;">1.0</span>, maka navbar akan terlihat sangat jelas (tanpa transparansi) saat didekati kursor mouse.<br/>Selamat mencoba...</p>

Posted by Hii Sekai

Kompres Kode CSS dan Javascript

<p>Sumber :  <a href="http://www.o-om.com/2010/04/compress-javascript-dengan-yui.html" target="_blank">Compress Javascript dengan YUI Compressor</a> by <b>O-OM</b>.</p><p>Mungkin kamu tahu <span class="amp">&</span> mengerti komponen-komponen apa saja yang menyebabkan suatu blog lambat loading (internal), antara lain :  Banyaknya assessoris blog (widget/gadget), menampilkan banyak image, tampilan full post di halaman utama (home), banyaknya script, dan lain-lain.  Atau kamu ingin mendefinisikan <span class="amp">&</span> menambahkan "dan lain-lain" dalam komentar.</p><p>Dalam <i>trik blogger</i> kali ini, kita akan mendiskusikan tentang bagaimana mengoptimalkan kode CSS <span class="amp">&</span> javascript agar sedikit banyaknya dapat lebih cepat loading.  Nah, layanan online yang dapat kita pergunakan untuk melaksanakan fungsi tersebut adalah <a href="http://refresh-sf.com/yui/" target="_blank">Online YUI Compressor</a>.  Cara menggunakan layanan ini juga tidak sulit, kita tinggal memasukan semua kode javascript yang ingin di-kompresi, ingat! tanpa memasukan tag <span style="color: blue;"><script type='text/javascript'> ... </script></span> atau <span style="color: blue;"><script type='text/javascript'> //<![CDATA[ ... //]]> </script></span> tapi hanya kode utamanya saja.</p><p>Adapun cara menggunakan <a href="http://refresh-sf.com/yui/" target="_blank">Online YUI Compressor</a> dapat direview seperti ulasan berikut :</p><br /><br /><div class="separator" style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Online YUI Compressor" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEpjKcjtWz_MtuXcnuQVm4CVhyphenhyphenpI2aseDq8gTqFDXU0Ymm3HzJPI_rTQj4Y_NEUlcOjrmlDVFZSBa_ET3OQL8y8DJCqy_XROvRSqety1l9EBmtPahySqqNUsrHkcilAN-A5BHMOaFJho4/s400/YUI+Compressor.jpg" width="400" /></div><br /><br /><ol><li>Masukkan kode javascript dalam kotak "Code".</li><br /><li>Pilih secara dropdown jenis file pada "File Type".</li><br /><li>Selanjutnya untuk opsi-opsi kosongkan.</li><br /><li>Klik tombol "Compress"</li><br /><li>Tunggu beberapa saat file dikompres dan hasilnya akan ditampilkan tepat di bawah tombol "Compress".</li><br /><div class="separator" style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Hasil Compress" border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeu-gtvGm6VR9wG9rBDkvUZyA8uGUOIbUrI7pLHWoFjASSkYHMxkjsUJmJGNUGA1n-SVrVHR-lrhqgbRXJmBtGGYo-PFrt502WSB-eRKm6JnlUslufjsk984LSatm5KKoGVktdu1LOFFw/s320/Hasil+YUI+Compreesor.jpg" width="320" /></div><li>Copy kode tersebut <span class="amp">&</span> paste di antara tag <span style="color: blue;"><script type='text/javascript'> ... </script></span> atau <span style="color: blue;"><script type='text/javascript'> //<![CDATA[ ... //]]> </script></span> dalam blog kamu.</li><br /></ol><br /><br />Contoh :<br /><br /><br /><br /><ul><li>Javascript otomatis readmore.</li><br /></ul><div class="code"><script type='text/javascript'><br /><br />var thumbnail_mode = "float" ;<br /><br />summary_noimg = 450;<br /><br />summary_img = 450;<br /><br />img_thumb_height = 120;<br /><br />img_thumb_width = 120;<br /><br /></script><br /><br /><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br /><div style="color: red;">function removeHtmlTag(strx,chop){</div><div style="color: red;">if(strx.indexOf("<")!=-1)</div><div style="color: red;">{</div><div style="color: red;">var s = strx.split("<");</div><div style="color: red;">for(var i=0;i<s.length;i++){</div><div style="color: red;">if(s[i].indexOf(">")!=-1){</div><div style="color: red;">s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);</div><div style="color: red;">}</div><div style="color: red;">}</div><div style="color: red;">strx = s.join("");</div><div style="color: red;">}</div><div style="color: red;">chop = (chop < strx.length-1) ? chop : strx.length-2;</div><div style="color: red;">while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;</div><div style="color: red;">strx = strx.substring(0,chop-1);</div><div style="color: red;">return strx+'...';</div><div style="color: red;">}</div><div style="color: red;"><br /><br /></div><div style="color: red;">function createSummaryAndThumb(pID){</div><div style="color: red;">var div = document.getElementById(pID);</div><div style="color: red;">var imgtag = "";</div><div style="color: red;">var img = div.getElementsByTagName("img");</div><div style="color: red;">var summ = summary_noimg;</div><div style="color: red;">if(img.length>=1) {</div><div style="color: red;">imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';</div><div style="color: red;">summ = summary_img;</div><div style="color: red;">}</div><div style="color: red;"><br /><br /></div><div style="color: red;">var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';</div><div style="color: red;">div.innerHTML = summary;</div><div style="color: red;">}</div>//]]><br /><br /></script></div>Catatan :<br /><br />Kode yang berwarna merah merupakan kode yang dimasukkan dalam kotak "Code" pada site <a href="http://refresh-sf.com/yui/" target="_blank">Online YUI Compressor</a>.<br /><br /><br /><br /><ul><li>Hasilnya setelah dikompres <span class="amp">&</span> dimasukkan dalam full kode Javascript <a href="http://optimasi-blog.blogspot.com/2009/06/otomatis-readmore.html">otomatis readmore</a>.</li><br /></ul><div class="code"><script type='text/javascript'><br /><br />var thumbnail_mode = "float" ;<br /><br />summary_noimg = 450;<br /><br />summary_img = 450;<br /><br />img_thumb_height = 120;<br /><br />img_thumb_width = 120;<br /><br /></script><br /><br /><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br /><div style="color: red;">function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};</div>//]]><br /><br /></script></div><br /><br />Semoga bermanfaat...

Posted by Hii Sekai

Japaian Urang Banjar1 Template Release

Nah ini ada lagi satu <span style="font-style: italic;">template blogger</span> yang tampil kalem (hitam-putih). Khusus bagi narablog yang suka menulis kehidupan kesehariannya, blog ini dapat menjadi <span style="font-style: italic;">template blog</span> yang direkomendasikan. Namun tidak menutup kemungkinan narablog yang berkategori non-diary menerapkan template ini. Alkisah-nya promosi nih...<br /><br /><br /><br />Kunjungi atau klik link berikut <a href="http://utuharies.blogspot.com/2010/08/japaian-urang-banjar1-template-release.html">Japaian Urang Banjar1 Template Release</a> untuk melihat tampilannya (sekaligus demo version). Sedangkan fitur-fitur <span class="amp">&</span> link downloadnya juga dapat kamu review serta download di blog tersebut. Sebagai tambahan fasilitas beda komentar antara owner blog dengan pengunjung sudah diaplikasikan dalam template Japaian Urang Banjar1 tersebut.<br /><br /><br /><br />N/B :<br /><br />Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".<br /><br /><br /><br />Selamat mencoba...

Posted by Hii Sekai

Blogger Copy Template Release

<p>Sudah lihatkan format dan gambaran tentang blog ini?  Kira-kira bagaimana menurut pendapat kamu ?  bagus, lumayan bagus, atau hampir bagus.  Lho...lho... kok bagus semua pilihannya.  Apabila kamu tertarik untuk mencoba <i>template</i> ini, maka akan OB tunjukkan link downloadnya.  Tapi sebelum kamu mendownload, mari kita review fitur-fitur yang diadopsi oleh "<b>Blogger Copy Template</b>" ini.</p><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Image Template" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZuv-trAR3-eiy-GakmfzWJpSy6ByymeIcgUke3-_wRx4CoeKDpc8mPNdJxZVe8L3_RbsMPdr3CGD2UwgqzM31r6gGPnDCT1wSJvYmarR4bpKRT4bnUq41clw2-MNcyeIlYEVFB68HFro/s400/Blog+Image.png" title="Blogger Copy Template" width="400" /></div><p><b>Blogger Copy Template</b> support :</p><ul><li>Meta Tag SEO friendly.</li><br /><li>Favicon included.</li><br /><li>Horizontal navigation <span class="amp">&</span> search box.</li><br /><li>Bottom 3 column widget ready.</li><br /><li>Highlight author comments.</li><br /><li>Click the label showing the post title only.</li><br /><li>Paralel date header with comment link.</li><br /><li>Breadcrumbs included.</li><br /></ul><p>Sederhana bukan? Belum ditambahkan macam-macam script agar kamu yang mengadposi <i>template blogger</i> ini lebih leluasa untuk memodifikasinya. Berikut gambaran data waktu download (waktu halaman blogger copy template tampil penuh di layar monitor)  setelah dianalisa melalui <a href="http://websiteoptimization.com/services/analyze/">Website Optimization.com</a> (jelas cepat, karena belum banyak postingnya).</p><div style="clear: both; margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Download Times" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAsaF7lMZ8n93vGTtfWf4ff5c4Pz9PtNPqbqzC1wl4UriTLlqIeuJvbX4Uk27Q5ZsxzhfKkUx1FnaHktiK_YsSNz-oPfSPhiHrV2WP1sR8xsOSyhk6akWWC96V_95pgcKNKVco-jCpwys/s1600/Download+times.png" /></div><p>Hampir kelupaan, ini link downloadnya dijamin cepat tanpa ada banner/link iklan yang melingkupinya.</p><div align="center" style="text-decoration: none;"><a href="https://4047741722708014425-a-1802744773732722657-s-sites.googlegroups.com/site/optimasiblogger/kode-html/blogger-template/Blogger-CopyTemplate.zip?attachauth=ANoY7cpJ7Ymdzfqd74rTDllIAJ6u9_qr80opT0MNseJcxNekXTpRUfJ1QbFp0YpWwTP8GtSggKZvOIGE5NPHS7InG3Ii-ct_4ZSS7tWmziZoybqFI12nXPL-icvjU8-DTL7rXdlaiJInKCRyKO20D7NjOLSTUoWO9KrqwmsrCk1kY6mFbCZ9sFS8H6dDxN0igZmo6mz3x6ygQbR0Ww7Xxf-jd8LkgnOVhs3e7ndCnjPfdbHtOomI5iW3DtFFrH5XTWP80FeCbEyy&attredirects=0"><button type="button">Download Template</button></a></div><h2 style="text-align:center; text-transform:uppercase;"><a href="http://blogujitemplate2.blogspot.com/">Versi demo</a></h2><p>Mohon jangan dihapus kode yang bertuliskan "Please don't remove this credit" sampai dengan "End original credit".  Cukup ganti link copyright-nya saja, karena letaknya sudah OB optimasi yakni penutup dari seluruh content blog (paling bawah pojok kanan).</p>

Posted by Hii Sekai

Membuat "Back to Top"

<span class="awal">K</span>etika kita menulis suatu blog yang lumayan panjang, scroll halaman pun akan semakin lama. Kadang yang membaca ingin pula buru-buru untuk menyelesaikan bacaannya, namun ada kalimat yang harus dipahami sebelumnya. Kebetulan kalimat tersebut berada di paragrap pertama (atas). Repot juga muter scroll mouse atau sekedar menggeser bar yang letaknya dikanan halaman browser. Seandainya ada satu shortcut yang tersedia dalam blog, kemungkinan hal di atas bisa diminimalisasi. Nah, itu yang namanya fasilitas "Back to Top" atau kembali ke atas.<br /><br /><br /><br />Bagaimana <i>trik blogger</i> untuk menambah fasilitas itu, OB? EGP (emang gue pikirin), mungkin itu jawaban ketus OB ketika ditanya pas sakit gigi atau sariawan 5 biji. Alhamdulillah, sekarang OB tidak sakit gigi <span class="amp">&</span> sariawan. Sebenarnya <b>trik blogger</b> membuat "Back to Top" ini merupakan rekomendasi dari mas Rudi (<a href="http://rudyazhar.com/" rel="nofollow" target="_blank">Blog Rudi Azhar</a>) yang merupakan salah satu admin <a href="http://optimasi-blog.blogspot.com/">optimasi blog</a>.<br /><br /><br /><br /><b>Cara I :</b><br /><br /><br /><br /><ul><li>Tambahkan kode CSS berikut di atas kode ]]></b:skin>.</li><br /></ul><div class="code">p.to-top {<br /><br />font-family:Trebuchet MS, Verdana, Verdana Ref, sans serif;<br /><br />font-size:90%;<br /><br />float:right;<br /><br />padding-right:10px; }</div><br /><br />Keterangan :<br /><br /><ol><li>font-family = keluarga bentuk teks yang akan kita tampilkan.</li><br /><li>font-size = ukuran teks.</li><br /><li>float = peletakkan teks (kanan atau kiri)</li><br /><li>padding-right = jarak antara teks dengan bidang sebelah kanan.</li><br /></ol><ul><li>Sekarang, kita tinggal menentukan posisi teks link back to top, misalnya diletakkan di atas footer.</li><br /><li>Cari kode yang menunjukkan awal footer, seperti : <div class='footer-wrapper'>, <div class='footer'>, <div id='footer-wrapper'>, <div id='footer'>, <span class="amp">&</span> sejenisnya.</li><br /><li>Kemudian copas kode berikut di atasnya :</li><br /></ul><div class="code"><p class='to-top'><a href='#to-top' title='back to top'>back to top</a></p></div><ul><li>Jangan lupa melakukan edit pada kode <body> menjadi <body id='to-top'></li><br /><li>Kemudian simpan template kamu.</li><br /></ul>Catatan :<br /><br /><ol><li>Untuk peletakkan back to top tidak harus di atas footer.</li><br /><li>Silakan edit/modifikasi kode CSS tersebut sehingga sesuai dengan yang kamu harapkan.</li><br /><li>Blog demonya ada di <a href="http://utuharies.blogspot.com/" targer="_blank">utuharies.blogspot.com</a>.</li><br /></ol><br /><br /><b>Cara II :</b><br /><br /><ul><li>Metode ini menggunakan jquery, sehingga scrolling halaman (ketika mengklik back to top) lebih lembut <span class="amp">&</span> akan mengikuti scroll halaman.  Demo versionnya silakan perhatikan back to top di sebelah kanan bawah blog ini.</li><br /></ul><div class="code"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br /><br />//<![CDATA[<br /><br />$(document).ready(function(){$("a[href*=#to-top]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});<br /><br />//]]><br /><br /></script></div><br /><br />Catatan :<br /><br />Jquery di atas sudah dikompres (compress) menggunakan <a href="http://www.refresh-sf.com/yui/" target="_blank">online YUI Compressor</a>.<br /><br /><br /><br /><ul><li>Letakkan jquery back to top tersebut di atas kode </head></li><br /><li>Tambahkan kode CSS berikut di atas ]]></b:skin>.</li><br /></ul><div class="code">#back-to-top {right:20px;bottom:40px;position:fixed;}</div><ul><li>Ganti kode <body> dengan <body id='to-top'></li><br /><li>Selanjutnya tambahkan kode berikut di atas kode </body>.</li><br /></ul><div class="code"><div id='back-to-top'><br /><br /><a href='#to-top' title='Back to Top'><img alt='back to top' border='0' <span style="color: blue;">height='37'</span> src='<span style="color: red;">http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png</span>' <span style="color: blue;">width='48'</span>/></a><br /><br /></div></div><br /><br />Catatan :<br /><br /><ol><li>height = tinggi image</li><br /><li>width = lebar image</li><br /><li>Silakan ganti image (<span style="color: red;">http://i647.photobucket.com/albums/uu191/ariamsi/Icon%20Blog/Top.png</span>) dengan image kamu sendiri. Atau menggunakan image yang ada dengan terlebih dulu mendownloadnya dan upload ke hosting image kamu (<a href="http://optimasi-blog.blogspot.com/2010/06/kenapa-image-di-template-blog-tidak.html">Kenapa image tidak muncul?</a>).</li><br /></ol><ul><li>Simpan template.</li><br /></ul><br /><br />Selamat membuat back to top...

Posted by Hii Sekai

Fitur-fitur baru pada Blogger

Akhirnya blogger menampilkan banyak fitur-fitur baru untuk optimasi pengguna yang menggunakan blog di blogspot.<br /><br />Kali ini saya akan membeberkan fitur-fitur apa saja yang telah disediakan oleh blogger :<br /><br /><br /><br /><b>1. Template Designer</b><br /><br />Sebuah fitur yang sangat luar biasa ditambahkan ke blogger yang memungkinkan para blogger untuk membuat tema yang indah untuk blog mereka melalui program tunggal. fitur ini dapat dibaca di <a href="http://buzz.blogger.com/2010/06/blogger-template-designer-now-available.html">Blogger.buzz</a>.<br /><br /><br /><br /><br /><br /><b>2. New sharing buttons</b><br /><br />Pilihan ini adalah pilihan lain yang baru-baru ini ditambahkan. Sekarang kamu tidak perlu menambahkan tombol bookmark sosial untuk blogger secara manual. Ini dapat dengan mudah ditambahkan tetapi pergi ke PAGE ELEMENT>> BLOG POST.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXnUMlaOqU-C3x5jIeHzHp03sTrtc1spcJ4KH8watYD6GwFQVTA5m9ZHVJdMVUGS0AjWbizdG7SOhWsVJk4BIV5DJCqwlwcjNhmpDw20aeG-CGFANe0_50-KXxBrOg-qLnWgrLnTsUHvY/s1600/sharebuttom.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXnUMlaOqU-C3x5jIeHzHp03sTrtc1spcJ4KH8watYD6GwFQVTA5m9ZHVJdMVUGS0AjWbizdG7SOhWsVJk4BIV5DJCqwlwcjNhmpDw20aeG-CGFANe0_50-KXxBrOg-qLnWgrLnTsUHvY/s400/sharebuttom.png" width="400" /></a></div><br /><br /><b>3. Memasukkan Video Player</b><br /><br />Blogger telah memperkenalkan sebuah pemutar video yang lebih baik untuk video yang menyerupai pemutar YouTube.<br /><br /><br /><br /><iframe allowfullscreen="allowfullscreen" class="b-hbp-video b-uploaded" frameborder="0" height="266" id="BLOGGER-video-0be0734146d67dd3-19003" mozallowfullscreen="mozallowfullscreen" src="https://www.blogger.com/video.g?token=AD6v5dyvR9kXRSZo3MdAPWkq4HGrg-iEBFSxIp_imFBz5lA-XCeDy6kttt7VhDKa8kVyDFbHtpx3SjTsgLCOj6o2KAgd9lrLjyk3-b6EMxR6WAEv414lz8LBNcExqLNJnOKwQxAw4kYG" webkitallowfullscreen="webkitallowfullscreen" width="320"></iframe><br /><br /><br /><br />Player ini memungkinkan melihat video dengan full-screen. Player baru ini juga memiliki antarmuka pengguna yang lebih baik, seperti animasi seekbar (bar merah di sepanjang bagian bawah video) dan tombol yang lebih besar. Anda juga dapat klik kanan pada play untuk melihat informasi lebih lanjut tentang video, seperti kinerja pemutaran ("Tampilkan Video Info") atau jaringan kecepatan ("Take Speed Test").<br /><br /><br /><br />Video yang akan Anda upload akan terlihat di blog Anda tetapi tidak di YouTube.<br /><br /><br /><br /><b>4. Pratinjau Posting yang lebih baik</b><br /><br />Selain blogger desainer juga menambahkan opsi baru yang lebih baik pasca pratinjau. Sebelum Anda mempublikasikan posting, jika Anda ingin melihat posting Anda untuk melihat bagaimana sebenarnya akan tampak, tekan saja tombol Preview pada halaman Post Baru. Anda akan melihat jendela baru terbuka dengan tampilan yang lebih akurat.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_d8hljvTwok6jGJxxVyQeYTjs3ROLM8-Kkq9nPcvQIV_O5P-BMUi37FRbDm8AzFHOeS4Ngp_X04NviCxMhXYKVv3F6tqcD0_hzwb4_G1ne81AHhTVSDMRf7SUtZehzo-oq2mVKp5xdY/s1600/pratinjau.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht_d8hljvTwok6jGJxxVyQeYTjs3ROLM8-Kkq9nPcvQIV_O5P-BMUi37FRbDm8AzFHOeS4Ngp_X04NviCxMhXYKVv3F6tqcD0_hzwb4_G1ne81AHhTVSDMRf7SUtZehzo-oq2mVKp5xdY/s400/pratinjau.JPG" width="400" /></a></div><br /><br /><br /><br /><b>5. Penambahan Amazon Associaties gadget.</b><br /><br />Blogger juga terintegrasi dengan Amazon Associates. Anda bisa mendapatkan uang selain Google adsense.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin-7HzUn1uZWQziB4NPzI_bH0X4IIxPKUtkcA6mhtQHuH9E8C2Psxe-gjNRRWv2YI701uFQIce1qfkMHG5fCUGXvcJqNKzVt2lg3Zv3JIYQ-WZJ4wx-5_CBZnaywYP_baXCEoOTRuWF9o/s1600/amazon+gadget.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin-7HzUn1uZWQziB4NPzI_bH0X4IIxPKUtkcA6mhtQHuH9E8C2Psxe-gjNRRWv2YI701uFQIce1qfkMHG5fCUGXvcJqNKzVt2lg3Zv3JIYQ-WZJ4wx-5_CBZnaywYP_baXCEoOTRuWF9o/s320/amazon+gadget.JPG" /></a></div>Dengan fitur ini, Anda dapat mencari Amazon langsung dari editor Blogger dan menambahkan gambar dan link ke produk Amazon tepat ke posting Anda. pembaca Anda akan mendapatkan komisi Anda setiap kali mereka membeli produk yang Anda rekomendasikan, dan jika Anda belum memiliki account Amazon Associates, Anda dapat sign up secara gratis tanpa meninggalkan Blogger.<br /><br /><br /><br /><b>6. Blogger stats</b><br /><br />Fitur ini telah saya jelaskan pada postingan sebelumnya tentang <a href="http://optimasi-blog.blogspot.com/2010/07/fitur-baru-blogger-statistik-blog.html"><b>Statistik blog</b></a>.<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mvUFHIq8K6x04-aMXj0ympmCwZqtkK-yuwGHofpKdMCGvzS6Ves0OCbT63RCdUZSGeMXtGwWU7fGleqTbzfI0-T1ZGDxsUN2aMoysvURZG-CAHp97NiEwVJVBZ0VC3OMSE8rRTWUpAs/s1600/trafik.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4mvUFHIq8K6x04-aMXj0ympmCwZqtkK-yuwGHofpKdMCGvzS6Ves0OCbT63RCdUZSGeMXtGwWU7fGleqTbzfI0-T1ZGDxsUN2aMoysvURZG-CAHp97NiEwVJVBZ0VC3OMSE8rRTWUpAs/s400/trafik.png" width="400" /></a></div><br /><br /><br /><br />So, kenapa harus minder dengan yang lain, kalau fitur blogger sudah selengkap ini.

Posted by Hii Sekai

Mempercantik Search Buttom dengan CSS3

Hampir setiap blog mempunyai tombol search untuk mempermudah pencarian pada blog kita, tapi tampilannya masih banyak yang terkesan standart aja, kalaupun ada yang bagus masih menggunakan image untuk mendukung tampilannya.<br /><br />Kali ini saya ingin membuat search buttom hanya dengan menggunakan kode CSS tanpa image sama sekali.<br /><br /><br /><br />Untuk postingan cara <a href="http://optimasi-blog.blogspot.com/2009/06/membuat-search-dalam-blog.html"><span style="font-weight: bold;">membuat search pada blog</span></a> dapat anda lihat pada postingan sebelumnya.<br /><br /><br /><br />kodenya HTMLnya seperti ini :<br /><br /><br /><br /><blockquote><form action='http://#/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value='Teks kamu...'/> <input id='searchsubmit' type='submit' value='Cari'/></form></blockquote><br /><br />kamu ganti kode diatas dengan kode dibawah berikut ini :<br /><br /><br /><br /><blockquote><form action='/search' class='searchform' method='get'><br /><br /><input class='searchfield' id='q' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/><br /><br /><input class='searchbutton' type='submit' value='Go'/><br /><br /></form></blockquote><br /><br />Langkah selanjutnya kamu harus membuat Kode CSS-nya biar tampilannya menjadi seperti gambar dibawah ini :<br /><br /><br /><br /><img alt="tombol search" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BbxxAEdnt7MTKNG808i3s-XER70EuWLuAwpOe0NVl7Nnc6d4cBJBUXCkdnOkst3sOrXAPHwRIeTmRBJuedrHiPrvKzmPXU3kAau9WhnRVGNgdc6VwzSms1XgzBk6QNV-dMz9cZEBlrw/s400/tombol+search.JPG" style="display: block; margin: 0px auto 10px; text-align: center; width: 353px; height: 102px;" /><br /><br /><br /><br />Letakkan kode berikut ini diatas ]]></b:skin> :<br /><br /><br /><br /><blockquote>/*- Search -*/<br /><br />.searchform {<br /><br />display: inline-block;<br /><br />zoom: 1; /* ie7 hack for display:inline-block */<br /><br />*display: inline;<br /><br />border: solid 1px <span style="color: rgb(204, 0, 0);">#5e6366</span>;<br /><br />padding: 3px 5px;<br /><br /><br /><br />-webkit-border-radius: 2em;<br /><br />-moz-border-radius: 2em;<br /><br />border-radius: 2em;<br /><br /><br /><br />-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);<br /><br />-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);<br /><br />box-shadow: 0 1px 0px rgba(0,0,0,.1);<br /><br /><br /><br />background: <span style="color: rgb(204, 0, 0);">#71787b</span>;<br /><br />background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));<br /><br />background: -moz-linear-gradient(top, #fff, #ededed);<br /><br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */<br /><br />-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */<br /><br />}<br /><br />.searchform input {<br /><br />font: normal 12px/100% Arial, Helvetica, sans-serif;<br /><br />}<br /><br />.searchform .searchfield {<br /><br />background: <span style="color: rgb(204, 0, 0);">#d5d5d5</span>;<br /><br />padding: 6px 6px 6px 8px;<br /><br />width: 240px;<br /><br />border: solid 1px <span style="color: rgb(204, 0, 0);">#bcbbbb</span>;<br /><br />outline: none;<br /><br /><br /><br />-webkit-border-radius: 2em;<br /><br />-moz-border-radius: 2em;<br /><br />border-radius: 2em;<br /><br /><br /><br />-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br /><br />-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br /><br />box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br /><br />}<br /><br />.searchform .searchbutton {<br /><br />color: #fff;<br /><br />border: solid 1px <span style="color: rgb(204, 0, 0);">#494949</span>;<br /><br />font-size: 11px;<br /><br />height: 27px;<br /><br />width: 27px;<br /><br />text-shadow: 0 1px 1px rgba(0,0,0,.6);<br /><br /><br /><br />-webkit-border-radius: 2em;<br /><br />-moz-border-radius: 2em;<br /><br />border-radius: 2em;<br /><br /><br /><br />background: <span style="color: rgb(204, 0, 0);">#555</span>;<br /><br />background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));<br /><br />background: -moz-linear-gradient(top, #9e9e9e, #454545);<br /><br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */<br /><br />-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */<br /><br />}<br /><br /><br /><br /></blockquote>Setalah itu coba kamu pratinjau blog kamu seperti apa tampilannya. Kode CSS diatas tampilannya akan sama persis dengan tampilan yang ada di <a href="http://rudyazhar.blogspot.com"><span style="font-weight: bold;">blog Rudy Azhar</span></a>, kamu bisa merubah warnanya yang saya kasih tanda <span style="color: rgb(204, 0, 0);">merah</span> dengan warna yang disesuaikan dengan template blog kamu.<br /><br /><br /><br />Selamat berkreasi......

Posted by Hii Sekai