Widget Update via Twitter

<p><a href="http://twitter.com">Twitter</a> merupakan jejaring sosial yang menawarkan fitur <em>microblog</em> (posting pendek, kurang dari 200 karakter) yang memungkinkan penggunanya untuk mengirim <span class="amp">&</span> membaca pesan (<em>tweets</em>). Pengguna dapat menulis pesan berdasarkan topik dengan menggunakan ‘hashtags’ (<kbd>#</kbd>). Sedangkan untuk menyebutkan atau membalas pesan dari pengguna lain bisa menggunakan tanda ‘at’ (<kbd>@</kbd>).</p><p>Sekarang, bagaimana cara memasang widget “update via twitter” dalam blog? Anda dapat melakukannya melalui dua cara, otomatis atau manual. Ketika Anda memilih “otomatis”, maka yang perlu Anda lakukan adalah mengunjungi situs <em><a href="http://twitter.com/about/resources/widgets">Twitter Resources</a></em> <span class="amp">&</span> dibutuhkan beberapa kostumasi, agar widget yang Anda inginkan tampil maksimal dalam blog.</p><p>Apabila Anda memilih “manual”, maka terdapat beberapa langkah yang harus dipenuhi.</p><ul><li style="margin-bottom:1.5em;">Download atau <em>copypaste</em> script <a href="http://twitter.com/javascripts/blogger.js">blogger.js</a> melalui situs resminya, yang tampak seperti di bawah ini: <pre><code>function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push("<li><span>"+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};</code></pre>Script di atas sudah dikompres melalui <a href="http://refresh-sf.com/yui/">Yui Compressor</a>. Anda pun bisa menambah <span class="amp">&</span> memodifikasi kode yang berwarna merah, contoh: <code><<span style="color:red;">span</span>></code> menjadi <code><span style="color:#333333; font-size:1em;"></code> dan sebagainya.</li><br /><li style="margin-bottom:1.5em;">Simpan script tersebut dalam situs layanan penyimpanan file Anda, seperti: <a href="http://code.google.com/">Google Code</a> atau simpan dalam media penyimpanan Anda.</li><br /><li style="margin-bottom:1.5em;">Twitter menyediakan beberapa script yang bisa kita manfaatkan menjadi widget, antara lain: <pre>User Timeline<br /><code><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<span style="color:red;">username</span>.json?callback=twitterCallback2&amp;count=5"></script></code></pre><pre>Public Timeline<br /><code><script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?callback=twitterCallback2&amp;count=5"></script></code></pre><pre>User Favorite<br /><code><script type="text/javascript" src="http://twitter.com/favorites/<span style="color:red;">username</span>.json?callback=twitterCallback2&amp;count=5"></script></code></pre><pre>User Search<br /><code><script type="text/javascript" src="http://search.twitter.com/search.json?tag=jython&from=<span style="color:red;">username</span>&rpp=5&callback=twitterCallback2"></script></code></pre>Silakan ganti kode yang berwarna merah dengan <em>username</em> Anda.</li><br /><li style="margin-bottom:1.5em;">Misalnya, Anda ingin memasang <em>user timeline</em> maka yang Anda lakukan adalah menambahkan kode berikut dalam “Add/tambah gadget” blogger: <pre><code><div id="twitter_div"><br /><ul id="twitter_update_list"><br /></ul><br /><p>@<a href="<span style="color:red;">###</span>" title="Follow me"><span style="color:red;">username</span></a> on Twitter</p><br /></div><br /><span style="color:green;"><script type='text/javascript'><br />//<![CDATA[<br />function twitterCallback2(c){var a=[];for(var d=0;d<c.length;d++){var e=c[d].user.screen_name;var b=c[d].text.replace(/((https?|s?ftp|ssh)\:\/\/[^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g,function(f){return'<a href="'+f+'">'+f+"</a>"}).replace(/\B@([_a-z0-9]+)/ig,function(f){return f.charAt(0)+'<a href="http://twitter.com/'+f.substring(1)+'">'+f.substring(1)+"</a>"});a.push('<li><span>'+b+'</span> <a style="font-size:85%" href="http://twitter.com/'+e+"/statuses/"+c[d].id_str+'">'+relative_time(c[d].created_at)+"</a></li>")}document.getElementById("twitter_update_list").innerHTML=a.join("")}function relative_time(c){var b=c.split(" ");c=b[1]+" "+b[2]+", "+b[5]+" "+b[3];var a=Date.parse(c);var d=(arguments.length>1)?arguments[1]:new Date();var e=parseInt((d.getTime()-a)/1000);e=e+(d.getTimezoneOffset()*60);if(e<60){return"less than a minute ago"}else{if(e<120){return"about a minute ago"}else{if(e<(60*60)){return(parseInt(e/60)).toString()+" minutes ago"}else{if(e<(120*60)){return"about an hour ago"}else{if(e<(24*60*60)){return"about "+(parseInt(e/3600)).toString()+" hours ago"}else{if(e<(48*60*60)){return"1 day ago"}else{return(parseInt(e/86400)).toString()+" days ago"}}}}}}};<br />//]]><br /></script></span><br /><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<span style="color:red;">username</span>.json?callback=twitterCallback2&amp;count=5"></script></code></pre>atau <pre><code><div id="twitter_div"><br /><ul id="twitter_update_list"><br /></ul><br /><p>@<a href="<span style="color:red;">###</span>" title="Follow me"><span style="color:red;">username</span></a> on Twitter</p><br /></div><br /><span style="color:green;"><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script></span><br /><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<span style="color:red;">username</span>.json?callback=twitterCallback2&amp;count=5"></script></code></pre>Ganti kode yang berwarna merah dengan alamat twitter <span class="amp">&</span> <em>username</em> Anda.<br /><br /></li><br /><li>Sekarang bandingkan widget <em>timeline</em> Anda tersebut dengan akun profil <em>timeline</em> Anda di Twitter</li><br /></ul><p>Update (30 Oktober 2012) — Kode <em>Widget</em> Twitter <em>Update</em> di atas mungkin tidak dapat digunakan lagi, pihak pengembang Twitter telah menyediakan widget tersebut pada <a href="http://twitter.com/settings/widgets" rel="nofollow"><em>Create and manage your widgets</em></a> dalam akun tiap pengguna Twitter. Sebagai tambahan, setelah membuat <em>widget</em> tersebut diharapkan tidak menghapusnya. Oleh karena sangat dimungkinkan script yang digunakan juga tidak dapat menampilkan pembaharuan <em>timeline</em> melalui Twitter.</p><pre><code><a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="<span style="color:blue;">YOUR-WIDGET-ID-HERE</span>">Tweets by @<span style="color:red;">twitterapi</span></a><br /><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></code></pre><p>Demo tampilan widget “timeline via twitter” dapat Anda lihat pada posting <a href="http://optimasi-blog.blogspot.com/2009/06/widget-update.html">widget update</a>.</p><p style="text-align:right; font-size:small;">@<a href="http://twitter.com/#!/Optimasi_Blog" title="Follow me">Optimasi_Blog</a> on Twitter</p>

Posted by Hii Sekai

Google Web Fonts

<p>Font yang digunakan dalam blog ini berukuran <code>120%</code> (setara dengan <code>1.2em</code>) dan mengadopsi <em>google web fonts</em> yang berbasis keluarga ‘serif’ (<code>font:120% 'Crimson Text', georgia, serif;</code>). Sedangkan pada title blog digunakan<a name='more'></a> <em>google web fonts</em> <code>tangerine</code>, masih termasuk juga ke dalam keluarga ‘serif’.</p><p>Dalam template blogspot, <em>google web fonts</em> otomatis dapat di <em>load</em> melalui Rancangan (Design)→“Perancang Template” (baca posting: <a href="http://optimasi-blog.blogspot.com/2011/01/font-untuk-template-blogger.html">Font untuk Template Blogger</a>). Untuk dapat menggunakan fitur ini, template blog Anda harus memiliki elemen <em>variable definitions</em>, contoh:</p><pre><code> <Variable name="bodyfont" description="Body Text Font"<br /> type="font" default="normal normal 80% Georgia, Serif" value="normal normal 80% Georgia, Serif"><br /> <Variable name="outerfont" description="Outer Text Font"<br /> type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif"></code></pre><p>Bagaimana jika tanpa <em>variable definitions</em>?</p><p>Silakan kunjungi <a href="http://code.google.com/apis/webfonts/docs/webfont_loader.html">WebFont Loader</a> di Google Font API (Application Programming Interface) untuk mengetahui keterangan selengkapnya. Selanjutnya, masukkan script berikut di atas <code></head></code>.</p><pre><script type="text/javascript"><br /> WebFontConfig = {<br /> google: { families: [ '<span style="color:red;">Tangerine</span>', '<span style="color:red;">Cantarell</span>' ] }<br /> };<br /> (function() {<br /> var wf = document.createElement('script');<br /> wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +<br /> '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';<br /> wf.type = 'text/javascript';<br /> wf.async = 'true';<br /> var s = document.getElementsByTagName('script')[0];<br /> s.parentNode.insertBefore(wf, s);<br /> })();<br /> </script></pre><p>Ganti kode script yang berwarna merah dengan <em>google web fonts</em> yang Anda gunakan.</p><p>Kemudian tambahkan CSS (Cascading Style Sheet) seperti yang tampak di bawah ini, bermanfaat apabila koneksi sedang ‘lemot’. Letakkan di atas <code>]]></b:skin></code>.</p><pre><code> .wf-loading p {<br /> font-family: serif;<br /> }<br /> .wf-inactive p {<br /> font-family: serif;<br /> }<br /> .wf-active p {<br /> font-family: '<span style="color:red;">Tangerine</span>', serif;<br /> }<br /> .wf-loading p {<br /> font-family: serif;<br /> font-size: <span style="color:red;">16px</span>;<br /> }<br /> .wf-inactive h1 {<br /> font-family: serif;<br /> font-size: <span style="color:red;">16px</span>;<br /> }<br /> .wf-active h1 {<br /> font-family: '<span style="color:red;">Cantarell</span>', serif;<br /> font-size: <span style="color:red;">16px</span>;<br /> }</code></pre><ol><li>Ganti kode yang berwarna merah dengan <em>google web fonts</em> yang Anda gunakan.</li><br /><li>Jika script tidak aktif (koneksi ‘lemot’) maka akan ditampilkan font ‘serif’ dengan ukuran <code>16px</code>.</li><br /></ol><p>Anda pun dapat mengganti nilai dari <abbr title="Cascading Style Sheet">CSS</abbr> tersebut, sesuai dengan keinginan Anda.</p>

Posted by Hii Sekai

Dropdown Menu (Navigasi Horizontal) dengan CSS3

<p>“<strong>Salam persahabatan</strong>”,<br /><br />mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam <abbr title="Google Friend Connect">GFC</abbr>.</p><div class="separator" style="clear: both; text-align: center; margin:0 1em;"><img alt="Dropdown Menu CSS3" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxmJnRB1KhsChLBLD39dYoLRxF-yvO6WEEuzqKP3MouO65U0V26pcgwX2GMlCKGy3Wk3Rs_rpgd_4wb1eXyZ4vNcmplJ09AzzR_znOwVjf0m0cHcTXsPIcfyfc5S9-jQQ47lZ55KBDNhg/s400/Nav+css3.png" title="Dropdown Menu menggunakan CSS3" width="400"/></div><p style="text-align:center; margin-top:0;"><small>Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.</small></p><p>Trik blogger ini mungkin agak berbeda dengan <cite title="Prayitno, Hendro. CSS3 Tutorial:Membuat Dropdown Menu menggunakan CSS3, Blogger admin. April 7, 2011">posting aslinya</cite>^{<a href="#sumber-posting">1</a>} (sama caranya), karena menu horizontal di sini tidak menggunakan <em>image</em> <span class="amp">&</span> ditambahkan<a name='more'></a> form pencarian — <a href="http://optimasi-blog.blogspot.com/2010/08/mempercantik-search-buttom-dengan-css3.html">mempercantik search button dengan CSS3</a> oleh Rudy — di kanannya.</p><p>Letakkan kode <abbr title="Cascading Style Sheet">CSS</abbr>3 berikut di atas <code style="color:red;">]></b:skin></code>.</p><pre>/*-- NAV --*/<br />nav {<br />width:100%;<br />background:#585858;<br />font:14px Sans-Serif;<br />letter-spacing:0.03em;<br />position:relatif;<br />overflow:hidden;<br />border-radius: 2em;<br />-webkit-border-radius: 2em;<br />-moz-border-radius: 2em;<br />-webkit-box-shadow: 0 2px 4px rgba(0,0,0, .4);<br />-moz-box-shadow: 0 2px 4px rgba(0,0,0, .4);<br />}<br />/* main level */<br />#menu-nav{<br />width:<span style="color:red;">500px</span>;<br />float:left;<br />margin:0;<br />padding: 7px 6px 0;<br />position:absolute;<br />}<br />#menu-nav li {<br />line-height:1.5em;<br />float:left;<br />list-style:none;<br />margin:0 auto;<br />padding:0 5px 8px;<br />position:relatif;<br />}<br />#menu-nav a, #menu-nav a:visited {<br />color:#e7e5e5;<br />text-decoration:none;<br />padding: 3px 16px;<br />border:solid 1px transparent;<br />display:block;<br />margin: 0;<br />-webkit-border-radius: 1.6em;<br />-moz-border-radius: 1.6em;<br />text-shadow: 0 1px 1px rgba(0,0,0, .3);<br />}<br />#nav a:hover {<br />background: #000;<br />color: #fff;<br />}<br />/* main level link hover */<br />#menu-nav a.current, #menu-nav li:hover > a {<br />background:#E6E6E6;<br />color:#444444;<br />text-decoration:none;<br />border:outset 1px #f2f2f2;<br />-webkit-box-shadow: 0 1px 1px #585858;<br />-moz-box-shadow: 0 1px 1px #585858;<br />box-shadow: 0 1px 1px #585858;<br />text-shadow: 0 1px 0 rgba(255,255,255, 1);<br />}<br />/* sub levels link hover */<br />#menu-nav ul li:hover a, #menu-nav li:hover li a {<br />color:#666666;<br />background:none;<br />border:none;<br />-webkit-box-shadow: none;<br />-moz-box-shadow: none;<br />}<br />#menu-nav ul a:hover {<br />background: #0078ff !important;<br />color: #fafafa !important;<br />-webkit-border-radius: 0;<br />-moz-border-radius: 0;<br />text-shadow: 0 1px 0 #dddddd;<br />}<br />/* dropdown */<br />#menu-nav li:hover > ul {<br />display: block;<br />z-index:1;<br />}<br />/* level 2 list */<br />#menu-nav ul {<br />display: none;<br />margin: 0;<br />padding: 0;<br />width: 180px;<br />position: absolute;<br />top: 40px;<br />left:auto;<br />background:#f2f2f2;<br />border: solid 1px #b4b4b4;<br />-webkit-border-radius: 10px;<br />-moz-border-radius: 10px;<br />border-radius: 10px;<br />-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);<br />-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);<br />box-shadow: 0 1px 3px rgba(0,0,0, .3);<br />}<br />#menu-nav ul li {<br />float: none;<br />margin: 0;<br />padding: 0;<br />}<br />#menu-nav ul a {<br />text-shadow: 0 1px 0 #fafafa;<br />}<br />/* level 3+ list */<br />#menu-nav ul ul {<br />left: 90px;<br />top: auto;<br />position: absolute;<br />}<br />/* rounded corners of first and last link */<br />#menu-nav ul li:first-child > a {<br />-webkit-border-top-left-radius: 9px;<br />-moz-border-radius-topleft: 9px;<br />-webkit-border-top-right-radius: 9px;<br />-moz-border-radius-topright: 9px;<br />}<br />#menu-nav ul li:last-child > a {<br />-webkit-border-bottom-left-radius: 9px;<br />-moz-border-radius-bottomleft: 9px;<br />-webkit-border-bottom-right-radius: 9px;<br />-moz-border-radius-bottomright: 9px;<br />}<br />/* clearfix */<br />#menu-nav:after {<br />content: ".";<br />display: block;<br />clear: both;<br />visibility: hidden;<br />line-height: 0;<br />height: 0;<br />}<br />#menu-nav {<br />display: inline-block;<br />}<br />html[xmlns] #menu-nav {<br />display: block;<br />}<br />* html #menu-nav {<br />height: 1%;<br />}<br /><br />/*-- SEARCH --*/<br />#search {<br />width: <span style="color:red;">240px</span>;<br />float: right;<br />margin: 0;<br />padding: 3px 8px; }<br /><br />.searchform {<br />display: inline-block;<br />zoom: 1; /* ie7 hack for display:inline-block */<br />*display: inline;<br />border: solid 1px #5e6366;<br />padding: 3px 5px;<br />-webkit-border-radius: 2em;<br />-moz-border-radius: 2em;<br />border-radius: 2em;<br />-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);<br />-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);<br />box-shadow: 0 1px 0px rgba(0,0,0,.1);<br />background: #71787b;<br />background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));<br />background: -moz-linear-gradient(top, #fff, #ededed);<br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */<br />-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */<br />}<br /><br />.searchform input {<br />font: normal 12px/100% Arial, Helvetica, sans-serif;<br />}<br /><br />.searchform .searchfield {<br />background: #d5d5d5;<br />padding: 6px 6px 6px 8px;<br />width: 180px;<br />border: solid 1px #bcbbbb;<br />outline: none;<br />-webkit-border-radius: 2em;<br />-moz-border-radius: 2em;<br />border-radius: 2em;<br />-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br />-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br />box-shadow: inset 0 1px 2px rgba(0,0,0,.2);<br />}<br /><br />.searchform .searchbutton {<br />color: #fff;<br />border: solid 1px #494949;<br />font-size: 11px;<br />height: 27px;<br />width: 27px;<br />text-shadow: 0 1px 1px rgba(0,0,0,.6);<br />-webkit-border-radius: 2em;<br />-moz-border-radius: 2em;<br />border-radius: 2em;<br />background: #555;<br />background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));<br />background: -moz-linear-gradient(top, #9e9e9e, #454545);<br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */<br />-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */<br />}</pre><p>Sesuaikan kode yang berwarna merah (<code>width</code>) dengan lebar blog Anda. Kemudian silakan mengganti kode - kode yang berhubungan dengan pewarnaan, baik menggunakan <a href="http://en.wikipedia.org/wiki/Web_colors#Hex_triplet"><cite title="Wikipedia. Web color: Hex triplet. April 7, 2011">hex triplet</cite></a> (ex: <code>#ff0000</code>), <em>color name</em> (ex: <code>red</code>), <abbr title="Red Green Blue">RGB</abbr> {ex: <code>rgb(255, 0, 0)</code>}, atau <abbr title="Red Green Blue Alpha">RGBA</abbr> {ex: <code>rgba(255, 0, 0, 0.5)</code>}.</p><p>Kemudian letakkan kode <abbr title="HyperText Markup Languange">HTML</abbr> seperti yang tampak di bawah ini, di sekitar elemen <code>header</code> blog Anda (bisa di atas, di dalam, maupun di bawah elemen <code>header</code> tersebut).</p><pre><nav><br /><ul id='menu-nav'><br /><b:if cond='data:blog.url != "#"'><br /><li><a href='#' title='Beranda'>Home</a></li><br /><b:else/><br /><li><a class='current' href='#' title='Anda sekarang berada di halaman Beranda'>Home</a></li><br /></b:if><br /><b:if cond='data:blog.url != "#"'><br /><li><a href='#' title='Tentang Penulis'>About</a></li><br /><b:else/><br /><li><a class='current' href='#' title='Anda sekarang berada di halaman Tentang Penulis'>About</a></li><br /></b:if><br /><li><a href='#'>Untuk Percobaan</a><br /> <ul><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a><br /> <ul><br /> <li><a href='#'>kosong</a><br /> <ul><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a></li><br /> </ul><br /> </li><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a><br /> <ul><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a></li><br /> </ul><br /> </li><br /> </ul><br /> </li><br /> <li><a href='#'>kosong</a></li><br /> <li><a href='#'>kosong</a></li><br /> </ul><br /></li><br /><b:if cond='data:blog.url != "#"'><br /><li><a href='#' title='Daftar Isi'>Sitemap</a></li><br /><b:else/><br /><li><a class='current' href='#' title='Anda sekarang berada di halaman Daftar Isi'>Sitemap</a></li><br /></b:if><br /></ul><br /><br /><div id='search'><br /><form action='/search' class='searchform' method='get'><br /><input class='searchfield' id='q' name='q' type='text' value=''/><br /><input class='searchbutton' type='submit' value='Go'/><br /></form><br /></div><br /><br /></nav></pre><p>Ganti kode yang diberi tanda ‘kres’ (<kbd>#</kbd>) dengan alamat tautan yang Anda tuju (ex: http://optimasi-blog.blogspot.com/2005/05/about-optimasi-blog.html).<br /><br />Mau lihat tampilannya, klik di sini.</p><p style="text-align:center; font-size:1.5em;"><a href="http://demo-optimasi-blog.blogspot.com/" rel="nofollow">Demo Optimasi Blog</a></p><hr><p id="sumber-posting" style="text-indent:2.25em; line-height:1em;"><small>1. Prayitno, Hendro. “Blogger admin” blogspot. CSS3 Tutorial: <a href="http://hendro-prayitno.blogspot.com/2010/07/membuat-dropdown-menu-menggunakan-css3.html"><em>“Membuat dropdown menu menggunakan css3 dan html5 | simple-35 blogger template(part2)</em></a>”. April 7, 2011</small></p>

Posted by Hii Sekai

Komentar atau No Comment

<p>Komentar umumnya merupakan pernyataan lisan atau tertulis sering berkaitan dengan sebuah informasi, atau pengamatan atau pernyataan <small><em>(<a href="http://en.wikipedia.org/wiki/Comment">Wikipedia</a>)</em></small>. Sedangkan komentar dalam blog (menurut saya) merupakan kalimat tertulis untuk memberikan pendapat, masukan, dan/atau kritik terhadap suatu tema posting yang diterbitkan oleh penulis posting dalam form komentar.</p><a name='more'></a><p>Setidak - tidaknya sebuah komentar seharusnya memberikan nilai tambah terhadap suatu tema yang dibicarakan <span class="amp">&</span> bagi pembaca lainnya.</p><blockquote><p style="background-color:#F6CECE;">I was very encourage to find this site. I wanted you for this special read. I definitely savored every little bit of it and i have you bookmarked to check out new stuff you post. Don't forget to visit site on the new topic<br /><br />(<blue>link1 | link2 | link3,…</blue>).</p></blockquote><blockquote><p style="background-color:#F5F6CE;">Nice post.</p></blockquote><blockquote><p style="background-color:#F5F6CE;">Saya tertarik sekali dengan tema posting Anda. Tidak jarang narablog memberikan komentar yang hanya…(dan seterusnya).<br /><br />(<blue>link blog/posting komentator</blue>)</p></blockquote><blockquote><p style="background-color:#CEF6CE;">Saya tidak setuju dengan pendapat Anda yang menyatakan bahwa…(dan seterusnya). Menurut saya…(dan seterusnya).</p></blockquote><blockquote><p style="background-color:#CEF6CE;">Saya tertarik sekali dengan tema posting Anda. Tidak jarang narablog memberikan komentar yang hanya…(dan seterusnya). Namun sepengetahuan saya, tema ini bertolak - belakang dengan artikel yang terdapat dalam blog (<blue>link artikel</blue>)…</p></blockquote><p>Mungkin seperti di atas itulah — atau sejenisnya — yang biasa ditulis oleh komentator dalam suatu blog.</p><ul><li><redbg>Merah</redbg> terdeteksi komentar spam.</li><br /><li><yellowbg>Kuning</yellowbg> terdeteksi komentar ½ spam, tapi tetap masih ada spam - nya. :)</li><br /><li><greenbg>Hijau</greenbg> terdeteksi komentar blog yang sebenarnya.</li><br /></ul><h3><em>No Comment</em></h3><p>Lebih baik kita menjadi pembaca yang baik daripada mengisi form komentar dengan sesuatu yang tidak berguna <span class="amp">&</span> membuang-buang waktu percuma.</p><p>Menurut Anda…?</p>

Posted by Hii Sekai