Widget Artikel Perlabel Dengan Thumbnail

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Tdr8jjbAcyhHYRN01G0MS4tXlfpXL8g9dVuFdQe8K2TivZcSI6QpQl7073_B2uPBWIkeqmn2jTm4NWnXPHM7J-Lb-jiuzJlI_jRpbwu4aTQYt6ItQybi4qKKFBbr0MKOAbuma1soYmZI/s1600/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Widget Artikel Perlabel Dengan Thumbnail" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Tdr8jjbAcyhHYRN01G0MS4tXlfpXL8g9dVuFdQe8K2TivZcSI6QpQl7073_B2uPBWIkeqmn2jTm4NWnXPHM7J-Lb-jiuzJlI_jRpbwu4aTQYt6ItQybi4qKKFBbr0MKOAbuma1soYmZI/s400/Capture.PNG" title="Widget Artikel Perlabel Dengan Thumbnail" width="323" /></a></div>Widget Artikel Perlabel Dengan Thumbnail | Lama banget, ngisi nih rumah, sampai - sampai banyak sarang laba - laba juga kecoak keliaran disini. Yah, gimana lagi rumah jauh dari kota, ga ada internet, mau jalan ke kota harus menempuh jalan 10km, aduh aduh,,ini di warnet malah basah kuyup, sorry tadi kehujanan. Sebelum main DOTA, ada request dari teman, masalah Widget Artikel Perlabel Dengan Thumbnail. Sebelum nyimak, siapin warkey dulu ah...<br /><br />Widget Artikel Perlabel Dengan Thumbnail - biasanya di pakai untuk membuat atau membagi artikel yang akan display di homepage sesuai kategori. Banyak blogger yang kurang tertarik pakai beginian, mungkin mereka lebih suka dan simple pakai label bawaan blogger atau arsip, tapi jika dilihat dari segi penampilan blog, cara ini sangat menarik kenapa, blog akan berpenampilan Megazine (Majalah) yang namanya tampilan majalah yang saya tahu pasti keren.<br /><br />Letakkan di atas <b>]]></b:skin></b><br /><br /><pre>img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:<b><span style="color: blue;">60</span></b>px;width:<span style="color: blue;"><b>60</b></span>px;padding:2px}<br /><br />img.label_thumb:hover{background:#f7f6f6}<br /><br />.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}<br /><br />ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}</pre><br />Letakan di atas </head><br /><br /><pre><script type='text/javascript'><br /><br />//<![CDATA[<br /><br />function labelthumbs(json){document.write('<ul <br />class="label_with_thumbs">');for(var i=0;i<numposts;i++){var <br />entry=json.feed.entry[i];var posttitle=entry.title.$t;var <br />posturl;if(i==json.feed.entry.length)break;for(var <br />k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var<br /> commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}<br /><br />if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var<br /> thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)<br /><br />{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else<br /> <br />thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIOZtsMrb-McNiRbKmWxQueZ5-jUWEBZJdUmtJMZ2zarHy3YTg4eCoCwh7B9VnuJg0M4QhSbFHZS4emHNDDmiC-nv5JLAYFMVrVSrHj80M6GKsiZenwdtP3pFd0SJnKrarSSbkjhC3xSy/';}<br /><br />var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var <br />cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var <br />monthnames=new <br />Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li<br /> class="clearfix">');if(showpostthumbnails==true)<br /><br />document.write('<a href="'+posturl+'" target ="_top"><img <br />class="label_thumb" <br />src="'+thumburl+'"/></a>');document.write('<strong><a <br />href="'+posturl+'" target <br />="_top">'+posttitle+'</a></strong><br>');if("content"in<br /> entry){var postcontent=entry.content.$t;}<br /><br />else<br /><br />if("summary"in entry){var postcontent=entry.summary.$t;}<br /><br />else var postcontent="";var <br />re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}<br /><br />else{document.write('');postcontent=postcontent.substring(0,numchars);var<br /> quoteEnd=postcontent.lastIndexOf(" <br />");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}<br /><br />var towrite='';var <br />flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+'<br /> - '+cdyear;flag=1;}<br /><br />if(showcommentnum==true)<br /><br />{if(flag==1){towrite=towrite+' | ';}<br /><br />if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 <br />Comments')commenttext='No Comments';commenttext='<a <br />href="'+commenturl+'" target <br />="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}<br /><br />if(displaymore==true)<br /><br />{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a <br />href="'+posturl+'" class="url" target ="_top">More <br />»</a>';flag=1;;}<br /><br />document.write(towrite);document.write('</li>');if(displayseparator==true)<br /><br />if(i!=(numposts-1))<br /><br />document.write('');}document.write('</ul>');}<br /><br />//]]><br /><br /></script><br /></pre><br />Kalau pengen pakai yang udah di kompresi...letakkan di atas kode </head>.<br /><br /><pre><script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/></pre><br />Simpan Template. Lalu kita masuk ke Layout Pilih Gadget kemudian pilih HTML/Javascript.<br />Sekarang kamu masukkan kode di bawah ini di dalam gadget anda..<br /><br /><pre><script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 60;</script><br /><br /><script type="text/javascript" src="http://<span style="color: red;">URL BLOG</span>/feeds/posts/default/-/<span style="color: red;">LABEL BLOG ANDA</span>?orderby=updated&alt=json-in-script&callback=labelthumbs"></script><br /><br /><script type="text/javascript"><br />function recentpostslist(json) {<br /> document.write('<ul>');<br /> for (var i = 1; i < json.feed.entry.length; i++)<br /> {<br />    for (var j = 1; j < json.feed.entry[i].link.length; j++) {<br />      if (json.feed.entry[i].link[j].rel == 'alternate') {<br />        break;<br />      }<br />    }<br />var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs<br />var entryTitle = json.feed.entry[i].title.$t;<br />var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";<br /> document.write(item);<br /> }<br /> document.write('</ul>');<br /> }<br /></script><br /><a href="<span style="color: red;">URL LABEL ANDA</span>" style="float:right;font:normal 11px Coda;padding:5px 0;">More on this category &#187;</a></pre><br />Okey, udah beginian aja ya....<br /><br />Lihat demonya...<br /><div style="text-align: center;"><br /></div><div style="text-align: center;"><a class="button" href="http://www.bocahit.com/2013/09/template-blogger-responsive-mega-akb48.html" target="_blank">Mega AKB48 </a>         <a class="button" href="http://www.bocahit.com/2013/10/template-blogger-responsive-mega-jkt48.html" target="_blank">Mega JKT48 </a></div>

Widget Artikel Perlabel Dengan Thumbnail

Widget Artikel Perlabel Dengan Thumbnail | Lama banget, ngisi nih rumah, sampai - sampai banyak sarang laba - laba juga kecoak keliaran disi...

Baca selengkapnya »

Atasi Pesan Komentar Jatuh Ke Bawah

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGnsYfYV1FU78n9vfeuBvURZIcnLa8RYwZTh3jAH_wj_4w58-EsiWJe7pUsV7xHadLR23DWYJoWQH-oIVHAWzM_qaIaQkQu-pLKUBBNQcpkl1hjEsLmMcr04_PH3t-iaU9t2ENpZ64DNg/s1600/Pesan+Komentar+Jatuh+Kebawah.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Atasi Pesan Komentar Jatuh Ke Bawah" border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGnsYfYV1FU78n9vfeuBvURZIcnLa8RYwZTh3jAH_wj_4w58-EsiWJe7pUsV7xHadLR23DWYJoWQH-oIVHAWzM_qaIaQkQu-pLKUBBNQcpkl1hjEsLmMcr04_PH3t-iaU9t2ENpZ64DNg/s400/Pesan+Komentar+Jatuh+Kebawah.png" title="Atasi Pesan Komentar Jatuh Ke Bawah" width="400" /></a></div>Atasi Pesan Komentar Jatuh Ke Bawah | Masalah ini, awalnya dihiraukan oleh blogger yang tidak memakai Comment Messagge atau <a href="http://www.bocahit.com/2013/10/menambah-emotikon-di-komentar-dan-di.html" target="_blank">Emotikon Komentar</a>. Tapi jika blogger memakai 2 hal tadi akan terlihat tidak rapi, karena ketika kita akan membalas threaded maka otomatis yang ada di comment-editor akan pindah di bawah form komentar, seharusnya ada di atas. Nah untuk mengatasi masalah ini, kita coba langkah di bawah ini.<br />Pada Edit HTML <br /><h3>Cari kode :</h3><pre data-codetype="XML"><code class="xml"><b:includable id='threaded-comment-form' var='post'><br /> <div class='comment-form'><br /> <a name='comment-form'/><br /> <b:if cond='data:mobile'><br /> <p><data:blogCommentMessage/></p><br /> <data:blogTeamBlogMessage/><br /> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/><br /> <b:else/><br /> <p><data:blogCommentMessage/></p><br /> <data:blogTeamBlogMessage/><br /> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/><br /> </b:if><br /> <data:post.friendConnectJs/><br /> <data:post.cmtfpIframe/><br /> <script type='text/javascript'><br /> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);<br /> </script><br /> </div><br /></b:includable></code></pre><br /><h3>Ganti Semua kode :</h3><pre data-codetype="XML"><code class="xml"><b:includable id='threaded-comment-form' var='post'><br /> <div class='comment-form'><br /> <a name='comment-form'/><br /><ins><div id='form-wrapper'></ins><br /> <b:if cond='data:mobile'><br /> <p><data:blogCommentMessage/></p><br /> <data:blogTeamBlogMessage/><br /> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/><br /> <b:else/><br /> <p><data:blogCommentMessage/></p><br /> <data:blogTeamBlogMessage/><br /> <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/><br /> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/><br /> </b:if><br /><ins></div></ins><br /> <data:post.friendConnectJs/><br /> <data:post.cmtfpIframe/><br /> <script type='text/javascript'><br /> BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);<br /> </script><br /> </div><br /></b:includable></code></pre><br />Pada kode di atas Anda akan melihat bahwa Saya telah mengelilingi elemen <code><iframe></code> dan <code><p><data:blogCommentMessage/></p></code> dengan elemen <code><div id='form-wrapper'></code>.<br />Nah, kita akan menggunakan elemen pembungkus tersebut sebagai “pegangan” bagi <code>.insertBefore()</code> untuk memindah-mindah elemen formulir komentar dan pesan formulir komentar di dalamnya.<br />Kita tahu bahwa di dalam <code>#form-wrapper</code> terdapat formulir komentar dan pesan formulir komentar, oleh karena itulah ke dua elemen tersebut (formulir dan pesan formulirnya) akan ikut terbawa seiring berpindahnya elemen <code>#form-wrapper</code>.<br /><h3>Terakhir cari :</h3><pre data-codetype="JavaScript"><code class="javascript">document.getElementById(domId).insertBefore(replybox, null);</code></pre><h3>Ganti dengan :</h3><pre data-codetype="JavaScript"><code class="javascript">document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);</code></pre><br />Selesai...<br />Sekarang tiap kita mengeklik tombol <b>Balas</b>, maka yang akan berpindah-pindah adalah elemen <code>#form-wrapper</code> dan bukan elemen <code>#comment-editor</code>.<br /><code>#comment-editor</code> dan pesan formulir komentar di dalamnya hanya akan berdiam diri di dalam <code>#form-wrapper</code> dan akan mengikuti ke mana saja dia berpindah.<br /><br /><span style="font-size: xx-small;">referensi : http://www.dte.web.id/2012/05/masalah-pesan-formulir-komentar-yang.html </span>

Atasi Pesan Komentar Jatuh Ke Bawah

Atasi Pesan Komentar Jatuh Ke Bawah | Masalah ini, awalnya dihiraukan oleh blogger yang tidak memakai Comment Messagge atau Emotikon Komenta...

Baca selengkapnya »

Menambah Emotikon Di Komentar Dan Di Artikel Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfwTeoA0BEqZIqVWhAchgoj84zokdMOuOe08jtaom55T_-j7SOp6lKImOoLPzO7whm4J6GCB7L5UM74cp4f4McbV9dwrgHUVyJEY-MD0aOMSHw9-BeCaHp8_tTYoJGgEitSZFfPDZ55Xk/s1600/Emotikon+Artikel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Menambah Emotikon Di Komentar Dan Di Artikel Blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvfwTeoA0BEqZIqVWhAchgoj84zokdMOuOe08jtaom55T_-j7SOp6lKImOoLPzO7whm4J6GCB7L5UM74cp4f4McbV9dwrgHUVyJEY-MD0aOMSHw9-BeCaHp8_tTYoJGgEitSZFfPDZ55Xk/s640/Emotikon+Artikel.png" title="Menambah Emotikon Di Komentar Dan Di Artikel Blogger" width="640" /></a></div>Menambah Emotikon Di Komentar Dan Di Artikel Blogger | Santai sejenak, siapkan  (c)  hangat, mainkan music Daft Punk... Kalau kemarin aku pernah share, model emotikon terbaru dari <a href="http://www.bocahit.com/2013/10/membuat-emotikon-kaskus-di-komentar.html" target="_blank">Kaskus</a> untuk Blogger :D yang ada di komentar. Ada yang bertanya di "Bisa ga kalau di artikel ?" jadi kali ini model emotikon untuk di artikel dan komentar. <br /><br />Model javascript yang sama hanya di tambah dengan .post-body saja.<br /><br /><pre><script type='text/javascript'><br />//<![CDATA[<br />jQuery(document).ready(function () {emoticonx({<br />emoRange:"#comments p, div.emoWrap", .post-body,<br />putEmoAbove:"iframe#comment-editor",<br />topText:"Klik untuk melihat code!",<br />emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."<br />})<br />});<br />//]]><br /></script></pre><br /><blockquote class="tr_bq"><span style="color: blue;">#comments p</span> sebegai tempat emotikon akan di panggil. Lebih tepatnya pada threaded. Kemudian ditambahkan dengan <span style="color: blue;">.post-body</span> sebagai pemanggilan untuk emotikon muncul di halaman post.</blockquote>Letakkan Javascript di atas kode </head><br /><br /><pre><script src='http://yourjavascript.com/11303911312/emotikon.js' type='text/javascript'/></pre><br /><h3>Backup Javascript</h3><pre><script type='text/javascript'><br />// Emotikon Edited & add by Wammy San<br />//www.bocahit.com<br />//original from MKR<br />//<![CDATA[<br />window.emoticonx=(function(){var a=function(c){var f=c||{},d=f.emoRange||"#comments p, div.emoWrap",e=f.putEmoAbove||"iframe#comment-editor",b=f.emoMessage||"To insert emoticon you must added at least one space before the code.";$(e).before('<div style="text-align:center" class="emoWrap"> :) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :&gt;) (o) [-( :-? (p) :-s (m) 8-) :-t :-b  b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer <br/><b>Click to see the code!</b><br/>'+b+"</div>");var g=function(j,i,h){$(d).each(function(){$(this).html($(this).html().replace(/<br>:/g,"<br> :").replace(/<br>;/g,"<br> ;").replace(/<br>=/g,"<br> =").replace(/<br>\^/g,"<br> ^").replace(j," <img style='max-height:24px' src='"+i+"' class='emo delayLoad' alt='"+h+"' />"))})};g(/\s:\)\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQPb0L_zoLjF7J15vuPkuOiKNSvN0kCbcn1UjE_60FKJGk7tn7yC5OONzNzEgEy_EjCn8w7jhhWxOIL7RZxyzsmzKSSXMaub9rB10dNm7QKjaJeq5RzjBhdL-5NOavqXEQ-ER1ZxJ3DM/s36/03.gif",":))");g(/\s;\(\(+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxld1S1gK2Q9zRUAhZhbycRgw7v9pJaRHecrX1r9Q5HirjpPadsi3pJQauMPVLYA2CX2xFYFlakU4JiD0zyYFy_LUyYAHvz5WdgXz-6l40am5CXgOvlKcV3_xdyZzpojYbsfZg7LGma7k/s47/06.gif",";((");g(/\s:\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtmdeD-zbLaWgWrcKTcNheNsBBxeH0TaB9acl6OmrwTvMRW1x5cwG4PL1dhrXLcCg0FSw6mr7_r6PqWv2c-aRcZBwpfX27sMW-HUwBYmOJKY12I_apdrYpvXGid2XszqNuGJkOOn0BcQM/s36/01.gif",":)");g(/\s:-\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXEd-n1I-sM_fWY6MWYN_GGcC62UjREfZ88gbnZkqFP_SPIO0SA9IW25vuKf5hSC5zfI1uHOAhFOQNAI8Lv1KIYsm9-OwUdKre2rdE27mpYqeFZOll0aifKWlfft1ekXDLpaTpdwJo5_o/s36/02.gif",":-)");g(/\s=\)\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrRQ_xVGok-XlFNEHKiEZHGeI0Gmv8NXytf-NWEiB3cTgb9zK_k9Qzm-YzewwN4l7YyNTYuidovSOvmtNbLL9wN03TkaQ9NCms6ta6gMi8mnTgkxOIOl6HD2yCIfTjPpnWH1deQAjUg4k/s36/03a.gif","=))");g(/\s;\(+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg161tqrsuWQGE5F5VaF8M_w5DUEHP0lXa-kaDAdf1vUu2vYQrtUbuObxLX1o8aj-WNEoLrnZ5Aq9s4oaJoMlyTwUbeFJOItXSidg53ONYttsGcEiGZNZVA1Vw-U8sFZyo_dUNJ9qVxcDk/s36/04.gif",";(");g(/\s;-\(+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3OZvT2NmnzSNJCNZCbcOTU8s00dQ7bEnNQjgG72YBuJc8gGzZVSB6xEI2u3dO0M-APuTFvwCklCUYtArSrDPa-hPWolMDIGJPxaoVKZKp2WCDGRrXkTzfGo35AhcwbHYmYxDtBP9sf0o/s36/05.gif",";-(");g(/\s:d/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizcMQhwuNfrrR-K7grh0diYF6pqRasNW8FhfyHe7fu-x7qTwzZf8dxTceTtpt41_HuVRGgneAJWnUFSePJpc01cQLuWgsbN1VCdK-HFNk0AcY1pbqDacYomSimpEohWvNmzkueDZ5MSek/s36/7.gif",":d");g(/\s:-d/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQJjkl2KrB363q1gTUvaUn8MwxM6-WMhVk1Npnnf0l4J5NVIsLwmyBmRC-ixtpHffB-NvabiV1TYURAwoCeh_cXqTNobXyrc_PjsHify7OHEU3tUhkb3uGODNSzfAI6y1yZ-jmUIitGI/s36/8.gif",":-d");g(/\s@-\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXZKNRx_JMntDm9QAbRHS2VjovCOseri9Xx-_msdJMMTPnVhXj5nM2ou-BlpPSuY-p64EPCznxINzEwKzkJ6tx4EhXBrNByub1avDxo9IfB-9gl15OCdNMsUq1oXk4hdMq9SIRzpQrcl0/s36/09.gif","@-)");g(/\s:p/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq8ZvJ86BeeFHHPKtTYLWiAjUGY0XBu03WMYZERDfb3bbTNNKt7sYdrqUaPRSJYik-C56lCn-_2wbLMdYwP0NsD1WF7g_7IX39sIQcYayL_tUbIMPNJVreN2w58FFcwIVHYrsP_YnOgNA/s36/10.gif",":p");g(/\s:o/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9De3iax4qpIhE7aYsX1lvRseu3WQNSzctNc_1cuyS_vEQYuggW_ggKhbGXznJFIxm4uTA8oJrgeOq64uj3w1SSlNVm7oZl4ly82LlgsbMGEGL4iL8_QhX7rjePDnwa1id75Rc7nip2w/s36/11.gif",":o");g(/\s:&gt;\)+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGK20UHbF6BoIdEi7lDtXD9UnX9A3H5O5NPmpngqjrIuGmJeHhI2_aCh0H5lDylJpT8A0Jrh3QTtte2vnOF-ZAWTnfmD9OayOQdfFhURW3DP6wa6Hz3vvIRoLg3UfXhw7FN7U7_QWLUyE/s36/12.gif",":&gt;)");g(/\s\(o\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNUoTzXwtYvyVQYZFCUK_6EYPnMZEriWFSw3hzZ09aU6P6RjsIwx5QyXFT6CvEWpowKs5aHERCLgKb5tQZRs-0aPIxCDVLPQTVux3nxLftzNNeADJPP-M6eIZSsaa4nNMEaUa2SNpAo6E/s36/13.gif","(o)");g(/\s\[-\(+/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1kaK1OrrwhBDumvIax-8AqvfIlCACmIY-awygXLWeQj714izvPj_CzGLODbzwpMisFMHjLY3nQ4j5rudRMpgF4lxn5DASULffGM1IlCrxEMZyASc1z4oVjtu9KgYZSEJSkoAGCj4cYeI/s36/14.gif","[-(");g(/\s:-\?/g,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh35O0wXsv7_vmFpOAA_74PiIJBsuGuBoDMZbsguZ5HPso_Naxe9Zrv3GkLhYS4bNQ5Ni56a3ezMWTBQ9ZGwVsWZz8O0jAhp7Y-SNicEz5P-8a9jnEmc8enElcJjaBahRxfKZariXw__00/s36/15.gif",":-?");g(/\s\(p\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_selP61l0hSueqFOXai7WoHoUmKvabfrsmU-FsTylO-nLOWmbpCxll5b6kXUK98YNkQQc9WVQCQyjCLROO1UxhB6NN9pUgipGW5Zd29KC5NJpmaI1kmuZoQ7iDLKujUlv04Wn0rzYXug/s36/16.gif","(p)");g(/\s:-s/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik6k_tL9cxMu-cMyxCsxJGcysyXk9x2MnhMF1SgmOAePJuAgCPNwNZOSc6x8vHBqMeVoi5ItXjFYiiV6f59NfiplaJQWarDBtNpwIOHoiKGRoCzBTBg4zUknt739dUEMe0czKi9dmnC-0/s36/17.gif",":-s");g(/\s\(m\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtSA352CZCUUaigEshwAfIZrEpG3LOahu6MmDMiZIFed7KxxWvb0ZjeyLbPQjOLCU8vsU2oxShu0Zk7W3uv_j_9JJ67eZtTCrGh8u0m2z6PmNKfbNmDs9a0n8N45joN489jVFCfn-jh2k/s36/18.gif","(m)");g(/\s8-\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRJHlGOu_tpH6ffhklOodpBU6-C2fHuo7_wxLc_Iu9g_wJYpJRyvLyrD6H6JZcFbch2sSATFLTeyFytBFELCHaOMOSHRhKvsaclZ87tyueYhoG8ooYTIUeiRj_LGEtqo83lbpwHDWHqC8/s36/19.gif","8-)");g(/\s:-t/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghNfULdIWaIRNuzJxrdvmMqBpBPpw1DRqg8SAlH9gGReHecH7VcEhg70W2LinMdStZFut7ZAOrnq9KVcYP0GYuxiiOp1hEAJZrkDZoGgqUXbqctmLOaYpK4BAY-b8QsIeeoPqhIfCVWiA/s36/20.gif",":-t");g(/\s:-b/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqIEono7UxDM9Q9-C937Cd1pVmi2yYic7aa79LaZDVerQee4dFEzhWHXDIWOGQuCLF1i42lkFgcW726TcI4vZr6eh3J-Y11vZdfGbocGA4b0043aQLWh4GL1oLH1xi6WBfo9Kx-jsLRI/s36/21.gif",":-b");g(/\sb-\(+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7AwX-i7SIGC4yoBqA_7kjYXqPceExXA4x8XHTLShQSDQ4jULmNnZXEmmAn-eRG9-a3ubWGo_5wwCvAb5IICWNj41mnooUm6frOLzRNLwFhYS3hEgSJZF2jjtX5861U7pMqVU_LYfAeA8/s35/22.gif","b-(");g(/\s:-#/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN9bAOVirNtcIOvPqUCEi_DtRp5yrGomhW5rw3HpmVru978xuHd6QJfRFXVJQUXGYzu8wSVgGf3-EOKZT7cvFc8FggwiL2UgBwSKCtzzqsEGdkowC8kyjbFgr9X_BIUM3fpuQfWeqG68o/s36/23.gif",":-#");g(/\s=p~/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijJEfAnl183liAQPzb5DKaek5YxItiob5gwrAVAHQIVYXmKgzw3z2XA-qQOKQRftd6CpygTv-vWArqXKQZgtHBhXYmPKir6k7nodkF1sdWuBUmvGnQcJhTWK6IOGn9C-V6w0qHazL9F5U/s36/24.gif","=p~");g(/\s\$-\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDgyIjRmapgsBZdVqvU2Y6KUTSTTWyc_MbgXMoFXlG0mScQRAkZt3inEidh8uhOqh6tmrpLRjtU93LdAsael0L2Of-y8VHZk5ZwZ9fnMQjw5tnqKRbGz74nQ9R2mIhZWoti4lGJNljXzk/s36/25.gif","$-)");g(/\s\(b\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG4dOId7Wf_kFHUVF4QpcH6m8r3MbYWnBqAzFVnki_3C-woo8YUOVbRUwpzwasBtjHG1eIlUGOu81RFcCGDFCT7yOm5q0ynUAVQYQ3_qtocZsD65WeqkIjzG_KSPuWkCBP9tx5Q0jIyuQ/s36/26.gif","(b)");g(/\s\(f\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXC5OMdmztR50WaQSNp28GNTOcN-4FRXqn12U96_pnNDG1kl3n8YrkT_W6IPZAEWq2ARuX4DIzydLxiMynxb789nS7GRP_w5mmYVFAZC9hen627jVPiKk92EcdKSgzxYbxGy3rBgo0uKo/s36/27.gif'","(f)");g(/\sx-\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6P_S-rgv7Ke8Hq3QtvJ-KvHILQdf7pCbI8Y1kpnz0IpkdXfLT13zpgygOLs-Hw16JCVSmo2Qcll-AEP-O1Usgdj_VgEd8Jp6NFH2oUP47n0hxh2oHgBZIq-cAi6iedKOy-FsZKOgbqLo/s36/28.gif","x-)");g(/\s\(k\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitrEemFhEHCXdchT1AhS0RajRkYRPk6Sny_KZtLKio3WsTKIF3rFlEaamBiKjZP4Ov5zxv9z0LtoBrdniGIPQljvtev3ccmr-s7Fe0lhpPWWKF9waREv9f8cX78XK4Wx5EoxXFq_TIMGw/s36/29.gif","(k)");g(/\s\(h\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4rPz_7E0UmhfZzqk6cOL8DxNnY9FN8vpftwfQ_pM-HRQ2gz9ljqJ7rVg3jdxxkPbzgENdWpQFs2T58zsR9E1YMkhsaP3tNjko-iO31xsHFT73mCtk9H0PP0R03jq_op4X-3aFV9v8swg/s36/30.gif","(h)");g(/\s\(c\)+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGsrGRJ03RtMxLyYAQYzMYo3zKRn1_9M8dBhIwhBZSie2W-gEXHcjrzIpCRcKthKQ4Vf6cBPI9IEyzpeUh5SEIZn5-qgvU2gvEyp9eO3Vf50vGEfxx4tXTTRr6FJe67VGLHaOizp7bguc/s36/31.gif","(c)");g(/\scheer/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCcr5jIi1oJFCW6vnOoDj8lWt4MhdugICQysm4A1uQFr_6uKYE2PALNKSQwbamyL1TiTssHa01gKWRH7PmXLacp8543oCb_Oxntxszw7h6Q83UvfpqjUCQlagRsJSnr78g_MOJVwQXpEw/s36/32.gif","cheer");$("div.emoWrap").one("click",function(){if(b){alert(b)}});$(".emo").css("cursor","pointer").live("click",function(h){$(".emoKey").remove();$(this).after('<input class="emoKey" type="text" size="'+this.alt.length+'" value=" '+this.alt+'" />');$(".emoKey").trigger("select");h.stopPropagation()});$(".emoKey").live("click",function(){$(this).focus().select()})};return function(b){a(b)}})();<br />//]]><br /></script></pre><br />Demonya adalah artikel ini.  (h)

Menambah Emotikon Di Komentar Dan Di Artikel Blogger

Menambah Emotikon Di Komentar Dan Di Artikel Blogger | Santai sejenak, siapkan  (c)  hangat, mainkan music Daft Punk... Kalau kemarin aku pe...

Baca selengkapnya »

Membuat Emotikon Kaskus Di Komentar Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPYn6ULNXFbQghB6-UbCZozHl5BEItmdJ8TLn95kGs1ubrT1GqMyFI4iZN4VVTJq7xXaQFHuyoml_HnlbUSrA4YFh2979e1KDr_xAg-0WsCEGiCm4LHG3l6AIGqe7LjS_hnZmIsQPM_i0/s1600/Emotikon+Kaskus.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Emotikon Kaskus Di Komentar Blogger" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdPYn6ULNXFbQghB6-UbCZozHl5BEItmdJ8TLn95kGs1ubrT1GqMyFI4iZN4VVTJq7xXaQFHuyoml_HnlbUSrA4YFh2979e1KDr_xAg-0WsCEGiCm4LHG3l6AIGqe7LjS_hnZmIsQPM_i0/s320/Emotikon+Kaskus.png" title="Membuat Emotikon Kaskus Di Komentar Blogger" width="320" /></a></div>Membuat Emotikon Kaskus Di Komentar Blogger | Emotikon Kaskus tidak hanya bisa di pasang pada platform wordpress saja. Tapi sekarang emotikon Kaskus telah support di blogger. Kalau dulu aku share <a href="http://www.bocahit.com/2012/08/memasang-yahoo-emoticons-di-komentar.html" target="_blank">emotikon yahoo!</a> dan <a href="http://www.bocahit.com/2013/09/membuat-emotikon-otomatis-di-komentar.html" target="_blank">emotikon otomatis</a> yang banyak juga di pakai para blogger. Dan saya pikir emotikon kaskus ini jarang sekali dan belum pernah saya temukan kecuali dari Kaskuser saja.<br /><br /><div style="text-align: center;"><a class="button" href="http://www.bocahit.com/2013/10/membuat-emotikon-kaskus-di-komentar.html" target="_blank">Ga Ada Demo</a></div><h3>Emotikon Kaskus </h3><pre><script type='text/javascript'><br />// Emotikon kaskus add by Wammy San<br />//www.bocahit.com<br />//original from MKR<br />//<![CDATA[<br />  window.emoticonx=(function(){var a=function(c){var f=c||{},d=f.emoRange||"#comments p, div.emoWrap",e=f.putEmoAbove||"iframe#comment-editor",b=f.emoMessage||"To insert emoticon you must added at least one space before the code.";$(e).before('<div style="text-align:center" class="emoWrap"> :nosara :sundul :hoax :salaman :lagi :ri :hug :igo :pm :ealah :aha :bingung :cendol :capede :kaskus :malu :marah :mod :ngacir :ngakak :pukul :tos  :siul keren :alay tkp :sempurna :hope :jalan :repost :sial makasih :maho <br/><b>Click to see the code!</b><br/>'+b+"</div>");var g=function(j,i,h){$(d).each(function(){$(this).html($(this).html().replace(/<br>:/g,"<br> :").replace(/<br>;/g,"<br> ;").replace(/<br>=/g,"<br> =").replace(/<br>\^/g,"<br> ^").replace(j," <img style='max-height:24px' src='"+i+"' class='emo delayLoad' alt='"+h+"' />"))})};g(/\s:sundul+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWuYDpzfWZ_pE2dzwdZ0PjDDPSk2u8ieNtaxzYf0KnLhO4gToTwqgEQAUbuQ_8P4dvib6DaaXTvlbGbt1Qh0PxZg20Zhn3zughBT0Uoa_IUWAiBi-FbOiIn2nFSNpnK0DSlGtXvhz4x3Z/s128/sundul.gif",":sundul")<br />;g(/\s:hoax+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSqjaFxy1g_s6nPqjVRCr1Ry4kPcEapDs-OYZ5rQIrsBtgtsWp1SKwoyGQmwA6681bGeD8tofejOZGQXunh9NPI7LLyOtacWH9rYssfmrFs2rEfaZK77qm3sh5F4GulmgzE3hAYipuO1s/s128/hoax.gif",":hoax")<br />;g(/\s:nosara+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9F5Ta61S3VJKhwRduPoNJGrKFm13SS0Cpuh7gR6qeDDBMr2n0bnR2wJ9GVgLx4iLO94wLhTkP8x3DBRI7agxrNfflYJ03_7QvX8s32Tpc2t_-nkV5sZTJN3JKsnCXcQP7J-DsjQW7jtbQ/s128/nosara.gif",":nosara")<br />;g(/\s:salaman+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAk-72-EzYn0PZ7fyNI5DwQUsqZZvHm63Q0hyphenhyphenM491yzdIdz8FiJkpyKyROjM7m3OnYbMuz02zvIAQQtkbyfyVdk8qQ9W6h6eyBlY6iAV1laF5xQXH1OCStP3u6Yph6wAVphfLgkW4mTyLv/s128/shakehand2.gif",":salaman")<br />;g(/\s:lagi+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwtpKG2vJU2mCSi2n-aH9cke9vKCiEe2aGpI0S5JV1uIqpcnB5qx3Rc7iCzsX2zE-QY5lO3GkmUTBabgEL0-EbfoM5hqchC8pwxKtaYTjhUBbrh6Lxv93NpVPC4wBVcx2SOEfUxZ73TXF/s128/sundul%20ah.gif",":lagi")<br />;g(/\s:ri+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgscOENg7DM5AZTenWRlyezEFPYvrkl83vztEL5gthk6HSLMK_ObEo3Ksyt_3NsPZ99yDbyxVi1cHAus3dDsJBlNf6a5CO83M3YXBkkTKFp4UyPs_Rbj2YBkQ2rAAjN5fnvHiO9XkJjlRks/s128/indonesia.gif",":ri")<br />;g(/\s:hug+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBW2qP-zgOvVaxw85iCE1dWpUKSKsrYDGwBFKwJGwn6cyHDsyVKYioppOEQAV2t7EDJIR6LnDWUeBKdIR6dAdoHFYqisdcstJ2I0TcMpjE-EsKz6E-J895qRsywwAP8DxTcX2H5UdZBoIg/s128/peluk.gif",":hug")<br />;g(/\s:igo/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6RjiUw2z3SUTJ1qnj3Zmxi6_tuzPTZKszC6TbGtrhfbNxA2eXJczsOGr4sMwN5MV2wsXf9LXJFvo4gE8b_T6CU1LVPoSBjaMT4cqS4IIKwkGvHIIp9e1iCnj673ANwpuIYK96VKvblR5f/s93/igo.gif",":igo")<br />;g(/\s:pm/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisSZ7NyP2KlItD78BFMXZecgCVXa9B3EJmt6j8NeuioX7zpFFkOCHp3ruKvqfbirVAS5N_eCvoIZg1GQxADcxa2Xobn_z-uKiihb-rHyneRA1bGFdfQvuvuzxuXOFWW1zLyLMcL4mglflN/s92/cekpm.gif",":pm")<br />;g(/\s:ealah+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJWPYa_nojFgVV1Nzt1TKuLEJ5nlewRezf5T9fAfthda4c6xIh_7stuCgWbEq6BDLufC0L9jdbaprz5UiKb2vZcdsFljdiDrSq4kR5_CTKxgt0hyefYjOJ7s5bQQJklLkzMQHSyLx3amo/s128/fd_2.gif",":ealah")<br />;g(/\s:aha/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKFkZXvhnISgFCNfxEoRRhEaj3tzUnbyHzDPqghozlhi0NuDXQkAmr9nZTpb1Q05My-CLzwOQ-joTTYW2qjCZfFmuuyFl5uZhnpWEpek07M2ty8oQzAMDLq8MVTKd06bNGiBkf9wZQQfF7/s128/aha.gif",":aha")<br />;g(/\s:bingung/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3em0YJ-jbC0rBhu-Fd_LrKQRkd4RKhRVWJ-Yt89vgaaO9f3KhXwMELsfvgM075TycSfgez9W0MnQw8LQwJd3mAlrZODsl-A1VmRYBa9iP38q-7kUXjWvEpYwOPS7626hn0XSussnsqZDw/s128/bingung.gif",":bingung")<br />;g(/\s:cendol+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooK2ZnE_CYYK5pN8V7mnQ1sUW4FvXtnT02DRliPCx984hyphenhyphenZcuuUWjUEkHsgcMarqiLrEP0Qf7fMYzxp1flgmaNc9ordOC0Lq7WKt9TTsLCraNHGO0Po_hXNM8udkbXc6Z6IeyDb3PvNAh/s128/big%20cendol.gif",":cendol")<br />;g(/\s:capede+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj126ZgXhPQ1pCaNL-1axBo-_PCipSQDQd-L6AJ1WvYxRMsSXYjZZwzVdVhHrtvXK1_5G0BtPu0SUzqWIIgBJyk6QzHuKSJlLPNDFGFi0WsDP5640Qe7Gg9nP9wKtjBIXY_eiC-b-toSWyV/s128/capede.gif",":capede")<br />;g(/\s:kaskus/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB12dzstQpdBUkLpc6YzeTbn23Pmet-PKLk3TlcC4QI_EaO4VcXN5yv8Qluk-OwEOlzg6eZbksetbVx_A-Bim7s7KjVlhOqb-g_KgsUcvkDFom93lEZwas5bqyVtvr-lVQpaiws0SJ5vMj/s128/ilovekaskus.gif",":kaskus")<br />;g(/\s:malu/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs34xRo_Lel0ckLG834Dn4tpiTIhHz5G2ntrBqX7MGVzN2YQqs90XvdBOdDSpY4iRLocV6DCW4M8s3WaaFBxSdzzOTV1zSpqhinYR7Be512NwSgTfFen11E1w8AUKr8-Bs21Nsr0-_xOwg/s128/malu.gif",":malu")<br />;g(/\s:marah+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfP5Kx4B_kxzIYLgXm6hbFCQZRAfmBbC231Qksl-r85RJZMJ_zOJ-6gkBbRNGYss-w-mnZf65YzACHNtj7iKbD0yBgblDxLBUI6w9WNoc8s6JJOAyxes1uSOURSJDJtdf2jaruLU4Bpivk/s128/marah.gif",":marah")<br />;g(/\s:mod/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYH-yHafgqNePVXsy-AtvmeBazvNM8kDvjfWe7LffXTazNdumBaIFZwKunga_Z04UZNvvUDR8w-92-AQ2RHZu11rj_brteXRm8F3lAViwn4NS6u5tT2a0La7KP_vC4QbGBrJn_kzKjFiAp/s128/mood.gif",":mod")<br />;g(/\s:ngacir+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGaXTAK5o1z9Lx08VFputG3s1bEJAtjU9DsyoLmfyKVr2IZb3VqYKK6bt9ctB-8qH50v-xRQDriwR9VTJkuDakshZCiSaoQi5NXDxzRTdHCu86QYY_k7A6bAOIgchmv5Aa8I0CG_9MVX4F/s128/ngacir2.gif",":ngacir")<br />;g(/\s:ngakak+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXZgpSlonZlmMh3DKhJBBUoyEmEEzCW-XD5lYk6wf2BgB0sKqYDdfPJ1WhML643-Xga9cYL3ZomWQ8F3R-QxuZO_JLU8GMhiWSRno5tENBjStv8PIy_XWH3bjYpr3zvmiS2GinwBhEQRBP/s128/ngakak.gif",":ngakak")<br />;g(/\s:pukul+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW_ZFRbp3AV9de_XsyKBAa-Ehvy-kdx8gbkOZg_Ayvl9Bm-jJRkc-RgSq9LjyG_GNXJFN545E8C0_f4NwxSeLkSoQC98j04hoYh07PpNuPKEuLpix6bB95g1I0Px-oz5cdHCsJwnVqjRxf/s128/pukul.gif",":pukul")<br />;g(/\s:tos+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivrxKIplorB6ctE8wM27hh8zQq074wcA9qPa-QCoxxzQMkHrXkWHfziusR1l90vOBrSP_vh1OdQPdKsk9QHyID4kISyEl4QNHjCC-dZThT6vOTmtKtf9OBlZoOOSkKPJAuI2ROPCeYPS01/s128/toastcendol.gif",":tos")<br />;g(/\s:siul+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGrMUOz0gGvyC5hEWfUAyAwZz5mRIUocSpfqGg9GS1d_TfCrYUjirq9_DzHD_GYjMsQwjmFjtvnzYHF2r_jjRy7mPf259WMkg1Aqmyw3paK9cEw1JdjPDi_MWq18C6TcqiJj3GKHVOHf88/s128/siul.gif",":siul")<br />;g(/\skeren/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8feunfB9zSWUu0tiz81LIJ6937iCer-W0U9jle0cMtiN-0y3g7y3hN8-SM-7Z8KSNNh0rn7jKU5xKA9BEY3CQGR7P4IsFMWacpAQ5P6GzW7GORuNq08G0FwaFl5-a_bsqMBDsT85XOUl4/s128/cool2.gif","keren")<br />;g(/\s:alay/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ySP5w38HmbAljmthENxalj2wvBV5lSqSYwrFwe-4n9EaER3orOly1gEi8d9rOvcjUQ5IXvkwZCE2DTRdzG_WJUn5s8FqtpZKLipaScMFosNUduRvmOY6aVaqUKq1xpylkdt-jK_I1iF_/s128/alay.gif",":alay")<br />;g(/\stkp+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbfJBPI6dqrTy5rsh_sLUN_d6pcOzOYYZHUwOdIpYixNKDZtphnTfFS1e-GEbpFdfuACJ4BPLbrmy6iF4uAI1tmHMixJFcsV20b91YhGT5BV6YWheHANUhycy0MAdw6ylwE3KZhH93PWFW/s128/tkp.gif","tkp")<br />;g(/\s:sempurna+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9TDRFV4fzvAeTzoVqfQpUqDG9gwyT9vjzC7KhC1xvjTwBGM3Mfp2gMdW9yGsUkwB4zkM7w7zloOE91rrX4__e47rY4y5tOGZqB6cwgKEqWzFd3UrFdeaOZQY6V4zCnX77lp-6VoihE_fa/s128/rate.gif",":sempurna")<br />;g(/\s:hope+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpdCjY2yMtsQtJ1Ot90Vb7ugSRErYP9Kh9IsQnECRkd_3KDzSZ5ZUuufZfPX-hHI9wRsJyHW4I9ahV_cgB987ZZk1wTX5eo8xqID4zKw4BsyYYGGCx47zB_riy-CWMdBSfS5rj_TPkLfk5/s128/hope.gif",":hope")<br />;g(/\s:jalan+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbF4Hmy-f8v2dF-q0Yk6Y7QCn2pStBIxABynVP_zHTOOn3jhPjTXSnaE5aYij0FqQSbNxrH6tzbTo8gageST9UD63tgtSMgxPYZ2_mXhjzKoSC-w9d5F30GVTHBFk_-dwewv-UoEGFfCj/s128/traveller.gif",":jalan")<br />;g(/\s:repost+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDAvj6v6aavB_3ujrvqGngWsYZjKp8z_wvWe2B2dcIq2LVSCu0CcKnt7HjtOJ8vVxEPX7JJcbMsZ1eoa9aNlx0U9DRoie9cHPLxZC-1w7ZG1zmjKItTbuRuKWuy_hlM2h6A4dwUNa-cTAc/s128/fd_7.gif",":repost")<br />;g(/\s:sial+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJWPYa_nojFgVV1Nzt1TKuLEJ5nlewRezf5T9fAfthda4c6xIh_7stuCgWbEq6BDLufC0L9jdbaprz5UiKb2vZcdsFljdiDrSq4kR5_CTKxgt0hyefYjOJ7s5bQQJklLkzMQHSyLx3amo/s128/fd_2.gif",":sial")<br />;g(/\makasih+/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0yJ5lDN8k-xDlKma8xuAarklbr_-Ui_d5-erxia1u0lb9wX52dIZ1o0Wg1ONz-_DKbBC0c7oFKbMmRtBBbahyphenhyphensYEp9Lyuv2aXBy-OH2ctxXZMB6zO-EclVQgZA3nC3v4e609UAYm84XA1/s128/thanks2.gif","makasih")<br />;g(/\s:maho/ig,"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqQvb_M94Ueo5LI9hjyDzaVgqHrW9REGztg38wOINvod2vpkTTvz6T7Q_e5bjRZ8BsDxwZkO-DsMsJq9HzIEQLCYf5LABcwy1Iae4hYY1U0IcuKXzK2CoxlmRLz5p2F_Qwm4bdnLoIgop/s128/supermaho.gif",":maho")<br />;$("div.emoWrap").one("click",function(){if(b){alert(b)}});$(".emo").css("cursor","pointer").live("click",function(h){$(".emoKey").remove();$(this).after('<input class="emoKey" type="text" size="'+this.alt.length+'" value=" '+this.alt+'" />');$(".emoKey").trigger("select");h.stopPropagation()});$(".emoKey").live("click",function(){$(this).focus().select()})};return function(b){a(b)}})();<br />//]]><br /></script> </pre>Untuk berjaga - jaga jika hosting javascript kita rusak atau terhapus, letakkan JS diatas kode </head><br /><br />Lalu letakkan kode di bawah ini, diatas kode </body><br /><pre><script type='text/javascript'><br />//<![CDATA[<br />jQuery(document).ready(function () {emoticonx({<br />emoRange:"#comments p, div.emoWrap",<br />putEmoAbove:"iframe#comment-editor",<br />topText:"Klik untuk melihat code!",<br />emoMessage:"Untuk memasukkan emoticon setidaknya ada satu spasi sebelum kode emoticon."<br />})<br />});<br />//]]><br /></script></pre><br />Silakan dipakai. Kode di atas saya modifikasi...<br /><br />Script Emoticon MKR Site & Images Kaskus From Kaskus

Membuat Emotikon Kaskus Di Komentar Blogger

Membuat Emotikon Kaskus Di Komentar Blogger | Emotikon Kaskus tidak hanya bisa di pasang pada platform wordpress saja. Tapi sekarang emotiko...

Baca selengkapnya »

Memasang Slider Keren & Responsive Camera Slider

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhARgRpNPJFaRRR8_LQwdpO_Wq07s49rj28SlFpb2hW6H1iM8P-dh5AdXh6iKTAUGz8-TbbRfGwY-GCOMLfh3zSrRB6s7hzqJ5YYOS0l6yz9B-9puENK0kFjsBoonKJIC4bfDgq_xPAQHhb/s1600/Camera+Slider.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Memasang Slider Keren & Responsive Camera Slider" border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhARgRpNPJFaRRR8_LQwdpO_Wq07s49rj28SlFpb2hW6H1iM8P-dh5AdXh6iKTAUGz8-TbbRfGwY-GCOMLfh3zSrRB6s7hzqJ5YYOS0l6yz9B-9puENK0kFjsBoonKJIC4bfDgq_xPAQHhb/s400/Camera+Slider.png" title="Memasang Slider Keren & Responsive Camera Slider" width="400" /></a></div>Memasang Slider Keren & Responsive Camera Slider | Slider....di bayangan kita adalah sulit memasang, berat di buka dan tidak responsive. What the... ?! Camera Slider adalah sekian dari banyak slider yang responsive dan berpenampilan simple elegant. Apalagi dengan pemasangan mudah dan fast load, jarang sekali terkena overload...<br /><h3>Camera Slider </h3>Letakkan kode di bawah ini di atas kode <code></head></code><br /><pre><span class="undefined" style="color: red;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/></span><br /><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/><br /><script src='http://yourjavascript.com/51251543521/camera-slider.js' type='text/javascript'/></pre><br />Kode yang berwana merah hapus saja, jika di dalam template anda sudah tercantum.<br /><h3>CSS & JS</h3> Lalu cari <code style="color: blue;">main-wrapper</code> lalu tekkan kode ini di bawahnya, atau bisa juga di <span style="color: blue;"><code><b:section class='main' id='main' preferred='yes'></code></span> <br /><br /><pre><div id='camslider'><br /><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><style type='text/css'><br />/* Slider */<br />.camera_wrap a,.camera_wrap img,.camera_wrap ol,.camera_wrap ul,.camera_wrap li,.camera_wrap table,.camera_wrap tbody,.camera_wrap tfoot,.camera_wrap thead,.camera_wrap tr,.camera_wrap th,.camera_wrap td<br />.camera_thumbs_wrap a,.camera_thumbs_wrap img,.camera_thumbs_wrap ol,.camera_thumbs_wrap ul,.camera_thumbs_wrap li,.camera_thumbs_wrap table,.camera_thumbs_wrap tbody,.camera_thumbs_wrap tfoot,.camera_thumbs_wrap thead,.camera_thumbs_wrap tr,.camera_thumbs_wrap th,.camera_thumbs_wrap td{background:none;border:0;font:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline;list-style:none}<br />.camera_wrap{display:none;float:left;position:relative;z-index:0;width:97.6%;padding:6px 7px 6px 6px;}<br />.camera_wrap img{max-width:none!important}<br />.camera_fakehover{height:100%;min-height:100px;position:relative;width:100%;z-index:1}<br />.camera_src{display:none}<br />.cameraCont,.cameraContents{height:100%;position:relative;width:100%;z-index:1}<br />.cameraSlide{bottom:0;left:0;position:absolute;right:0;top:0;width:100%}<br />.cameraContent{bottom:0;display:none;left:0;position:absolute;right:0;top:0;width:100%}<br />.camera_target{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;text-align:left;top:0;width:100%;z-index:0}<br />.camera_overlayer{bottom:0;height:100%;left:0;overflow:hidden;position:absolute;right:0;top:0;width:100%;z-index:0}<br />.camera_target_content{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:2}<br />.camera_target_content .camera_link{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-wM38V2qB6ng1fgm-yYhyphenhyphenXgdc8ziV5mDTZMmfwK-ATAo8QuI_XaUBM0Yjg8z9eMH6leONhVzrj8QNT7cGMCT9dbAxl1aafxPh9aHj7iuLrD9AifwoUa6t1To4WG3l6CgMPqVpeXoSvAA/s1600/blank.gif);display:block;height:100%;text-decoration:none}<br />.camera_loader{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWGoAGuIW5KDaC1VGXJmh7ZgOlKMxMnFvuuAAf34xqr0wbsqQqvHx39_gtHEf-n1AxvfJW5_kVJZSAK7d4bVhSSKsyA1PWnpVa445dH9JIfpTdSkHAEcTpkrUm8wAQSqKvVbR1xZRHnja/s1600/skitterloading.gif) no-repeat center;background:rgba(255,255,255,0.9) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSWGoAGuIW5KDaC1VGXJmh7ZgOlKMxMnFvuuAAf34xqr0wbsqQqvHx39_gtHEf-n1AxvfJW5_kVJZSAK7d4bVhSSKsyA1PWnpVa445dH9JIfpTdSkHAEcTpkrUm8wAQSqKvVbR1xZRHnja/s1600/skitterloading.gif) no-repeat center;-webkit-border-radius:18px;-moz-border-radius:18px;border-radius:18px;height:36px;left:50%;overflow:hidden;position:absolute;margin:-18px 0 0 -18px;top:50%;width:36px;z-index:3}<br />.camera_bar{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:3}<br />.camera_thumbs_wrap.camera_left .camera_bar,.camera_thumbs_wrap.camera_right .camera_bar{height:100%;position:absolute;width:auto}<br />.camera_thumbs_wrap.camera_bottom .camera_bar,.camera_thumbs_wrap.camera_top .camera_bar{height:auto;position:absolute;width:100%}<br />.camera_nav_cont{height:65px;overflow:hidden;position:absolute;right:9px;top:15px;width:120px;z-index:4}<br />.camera_caption{bottom:0;display:block;position:absolute;width:100%}<br />.camera_caption &gt; div{padding:10px 10px}<br />.camerarelative{overflow:hidden;position:relative}<br />.imgFake{cursor:pointer}<br />.camera_prevThumbs{bottom:4px;cursor:pointer;left:0;position:absolute;top:4px;visibility:hidden;width:30px;z-index:10}<br />.camera_prevThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -160px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}<br />.camera_nextThumbs{bottom:4px;cursor:pointer;position:absolute;right:0;top:4px;visibility:hidden;width:30px;z-index:10}<br />.camera_nextThumbs div{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -190px 0;display:block;height:40px;margin-top:-20px;position:absolute;top:50%;width:30px}<br />.camera_command_wrap .hideNav{display:none}<br />.camera_command_wrap{left:0;position:relative;right:0;z-index:4}<br />.camera_wrap .camera_pag .camera_pag_ul{list-style:none;margin:0;padding:0;text-align:center}<br />.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-align:left;text-indent:-9999px;width:16px}<br />.camera_commands_emboss .camera_pag .camera_pag_ul li{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}<br />.camera_wrap .camera_pag .camera_pag_ul li &gt; span{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;height:8px;left:4px;overflow:hidden;position:absolute;top:4px;width:8px}<br />.camera_commands_emboss .camera_pag .camera_pag_ul li:hover &gt; span{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}<br />.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{-moz-box-shadow:0;-webkit-box-shadow:0;box-shadow:0}<br />.camera_pag_ul li img{display:none;position:absolute}<br />.camera_pag_ul .thumb_arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid;top:0;left:50%;margin-left:-4px;position:absolute}<br />.camera_prev,.camera_next,.camera_commands{cursor:pointer;height:40px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:2}<br />.camera_prev{left:0}<br />.camera_prev &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat 0 0;display:block;height:40px;width:40px}<br />.camera_next{right:0}<br />.camera_next &gt; span{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -40px 0;display:block;height:40px;width:40px}<br />.camera_commands{right:41px}<br />.camera_commands &gt; .camera_play{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -80px 0;height:40px;width:40px}<br />.camera_commands &gt; .camera_stop{background:url(http://2.bp.blogspot.com/-6YtLNXfobBM/USSKUrbd2VI/AAAAAAAAAPE/B1hxLGWEtb8/s1600/skinscamera.png) no-repeat -120px 0;display:block;height:40px;width:40px}<br />.camera_wrap .camera_pag .camera_pag_ul li{-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;cursor:pointer;display:inline-block;height:16px;margin:20px 5px;position:relative;text-indent:-9999px;width:16px}<br />.camera_thumbs_cont{-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;-moz-border-radius-bottomright:4px;-moz-border-radius-bottomleft:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;overflow:hidden;position:relative;width:100%}<br />.camera_commands_emboss .camera_thumbs_cont{-moz-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);-webkit-box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2);box-shadow:0 1px 0 rgba(255,255,255,1),inset 0 1px 1px rgba(0,0,0,0.2)}<br />.camera_thumbs_cont &gt; div{float:left;width:100%}<br />.camera_thumbs_cont ul{overflow:hidden;padding:3px 4px 8px;position:relative;text-align:center}<br />.camera_thumbs_cont ul li{display:inline;padding:0 4px}<br />.camera_thumbs_cont ul li &gt; img{border:1px solid;cursor:pointer;margin-top:5px;vertical-align:bottom}<br />.camera_clear{display:block;clear:both}<br />.showIt{display:none}<br />.camera_caption a{color:#b8fa5e;font:16px Coda;margin:0 10px 10px 0}<br />.camera_caption a:hover{color:#fff}<br />.camera_caption .comt{font:11px Tahoma;margin:5px 0 0;color:#fc0; display:none}<br />.camera_caption p{font:12px Arial;margin:5px 0 0}<br />.camera_clear{clear:both;display:block;height:1px;margin:-1px 0 25px;position:relative}<br />.pattern_1 .camera_overlayer{background:url(http://4.bp.blogspot.com/-mK_USJALT1w/USSK5zcb0VI/AAAAAAAAAPM/BXmbKtwCdPI/s1600/laya.png) repeat}<br />.pattern_2 .camera_overlayer{background:url(http://2.bp.blogspot.com/-VVgg8zHpY1Q/USSLGoqh93I/AAAAAAAAAPU/1L3y6jLQv3I/s1600/layb.png) repeat}<br />.pattern_3 .camera_overlayer{background:url(http://2.bp.blogspot.com/-vt97g0-7sy0/USSLQhI53RI/AAAAAAAAAPc/LUep3GmWmnI/s1600/layc.png) repeat}<br />.pattern_4 .camera_overlayer{background:url(http://1.bp.blogspot.com/-siY1U2dtkdk/USSLcJ6_iWI/AAAAAAAAAPk/P8wAOzA3Myo/s1600/layd.png) repeat}<br />.pattern_5 .camera_overlayer{background:url(http://4.bp.blogspot.com/-svWnNDcbzkQ/USSLndwFBeI/AAAAAAAAAPs/IpAgpa_YNXs/s320/laye.png) repeat}<br />.pattern_6 .camera_overlayer{background:url(http://4.bp.blogspot.com/-beOrTn_xAb0/USSL5TpKKKI/AAAAAAAAAP0/Be6TaEBGNbM/s320/layf.png) repeat}<br />.pattern_7 .camera_overlayer{background:url(http://1.bp.blogspot.com/-ZIu8sF_tT74/USSMFPPT_aI/AAAAAAAAAP8/ihrFsYG3Y4E/s320/layg.png) repeat}<br />.pattern_8 .camera_overlayer{background:url(http://1.bp.blogspot.com/-KSaEP4OQ_qw/USSMPrJ3PzI/AAAAAAAAAQE/K-3k29KDUwM/s320/layh.png) repeat}<br />.pattern_9 .camera_overlayer{background:url(http://3.bp.blogspot.com/-FilWZbFD07E/USSMiDKIURI/AAAAAAAAAQM/K7a6fvbnvGc/s1600/layi.png) repeat}<br />.pattern_10 .camera_overlayer{background:url(http://4.bp.blogspot.com/-M96ItiZRE7w/USSMiAM3xEI/AAAAAAAAAQQ/_NGNkQuKAnM/s320/layj.png) repeat}<br />.camera_caption{color:#fff}<br />.camera_caption &gt; div{background: rgba(0, 0, 0, 0.7)}<br />.camera_wrap .camera_pag .camera_pag_ul li{background:#8cd700}<br />.camera_wrap .camera_pag .camera_pag_ul li:hover &gt; span{background:#8cd700}<br />.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent &gt; span{background:#7b418e;box-shadow: 0 0 8px #e6aef8}<br />.camera_pag_ul li img{border:3px solid #f3fbfd;-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);box-shadow:0 3px 6px rgba(0,0,0,.5)}<br />.camera_pag_ul .thumb_arrow{border-top-color:#f3fbfd}<br />.camera_wrap .camera_pag .camera_pag_ul li{background:#f3fbfd;box-shadow:0 1px 3px #6ab3cc; -moz-box-shadow:0 1px 3px #6ab3cc; -webkit-box-shadow:0 1px 3px #6ab3cc}<br />.camera_thumbs_cont ul li &gt; img{border-color:1px solid #000}<br /><span style="color: blue;">/*Responsive*/<br />@media screen and (max-width: 960px) {<br />.main-wrapper{width:65.5%}<br />.sidebarleft-wrapper,.sidebar2-wrapper{display:none}<br />}<br />@media screen and (max-width: 760px) {<br />.main-wrapper{margin-right:0;width:auto;padding:10px 10px 0}<br />.sidebar-wrapper,.sidebar1-wrapper{border:none;width:auto;margin:0 auto 10px;padding:0 10px}<br />}<br />@media screen and (max-width: 340px){<br />.camera_wrap{width:95%}<br />.camera_caption p{display:none}<br />.cutter{width:100px;height:70px;}<br />}</span><br /></style><br /><div id='randompost'><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function () {<br />CameraSlider({<br />blogURL:'<span style="color: red;">http://www.bocahit.com</span>',<br />MaxPost:5,<br />RandompostActive:true,<br />idcontaint:"#randompost",<br />ImageSize:500,<br />NumCharacter: 250,<br />textcom:"comments",<br />Notextcom:"No Comment",<br />noImage:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnWdJtfB-1cvr6h7HcMhQ3CTJCTtpAxlUO2vhD-PTIVkPx0F6RsppS-YvrWYdToU9B52p5gyc8imG5P-nhzAKGtfGIwbyieXhixhLi70KUPmBqq4rpk594jfzlbOXckfbgSPR2VFFYRs/s1600/no+image.jpg",<br />timestart:2000,<br />slidebylabel:false<br />});<br />});<br />//]]><br /></script><br /></div><br /></b:if> <br /><div style='clear: both;'/><br /></div></pre><br />Ganti yang berwarna merah dengan <b>url blog anda</b>. <br />Selamat Mencoba.....

Memasang Slider Keren & Responsive Camera Slider

Memasang Slider Keren & Responsive Camera Slider | Slider....di bayangan kita adalah sulit memasang, berat di buka dan tidak responsive....

Baca selengkapnya »

Membuat Emotikon Otomatis Di Komentar

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfB86dLShwM-b9uZNkxU4Xv8d3CIHE7ij5nHkcwle0h28W0nuISN5Z4zSzDC2gJlXvycp43RutY2eoVjcJDJsuGfN-6lTpoyTjl7JStL0gauvWUbONkvFMZTTIXFOeA66gj1zG9Qguuquy/s1600/Emotikon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Emotikon Otomatis Di Komentar" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfB86dLShwM-b9uZNkxU4Xv8d3CIHE7ij5nHkcwle0h28W0nuISN5Z4zSzDC2gJlXvycp43RutY2eoVjcJDJsuGfN-6lTpoyTjl7JStL0gauvWUbONkvFMZTTIXFOeA66gj1zG9Qguuquy/s400/Emotikon.png" title="Membuat Emotikon Otomatis Di Komentar" width="400" /></a></div>Membuat Emotikon Otomatis Di Komentar | Reshare dari DTE :]. Dulu aku pernah share emotikon komentar dari yahoo!. Kali ini tidak tahu dari siapa karena ini reshare dari DTE :]. Pernah aku pakai emotikon ini, tapi membosankan juga, jadi aku lepas. Nah, kalau anda ingin juga, kita coba bersama...<br /><h3>CSS & JS</h3><pre><style type='text/css'><br />.emoWrap {<br /> background-color:#EEDE86;<br /> border:2px solid #D3BA59;<br /> padding:10px 14px;<br /> color:black;<br /> font:bold 12px Tahoma,Arial,Sans-Serif;<br /> text-align:center;<br />}<br /><br />img.emo, input.emoKey {<br /> display:inline-block; /* Penting! */<br /> *display:inline;<br /> vertical-align:middle;<br />}<br /><br />input.emoKey {<br /> border:1px solid #ccc;<br /> background-color:white;<br /> font:bold 11px Arial,Sans-Serif;<br /> padding:1px 2px;<br /> margin:0px 0px 0px 2px;<br /> color:black;<br />}<br /></style><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><br /><script type='text/javascript'><br />//<![CDATA[<br />var emoRange = "#comments p, div.emoWrap",<br /> putEmoAbove = "#comment-editor",<br /> emoMessage = "Untuk menyisipkan emoticon setidaknya Anda harus menambahkan satu spasi di awal simbol.";<br />//]]><br /></script><br /><script src='http://reader-download.googlecode.com/svn/trunk/jquery.autoemoticons.js' type='text/javascript'></script></pre><br />Letakkan kode diatas tadi di atas <code></head>. </code><br /><br />Simpan Template.<br /><div style="text-align: center;"><a class="button" href="http://dark-decade.blogspot.com/2013/07/sama-goreng-ikan.html" target="_blank">Ilustrasi</a> </div>

Membuat Emotikon Otomatis Di Komentar

Membuat Emotikon Otomatis Di Komentar | Reshare dari DTE :]. Dulu aku pernah share emotikon komentar dari yahoo!. Kali ini tidak tahu dari s...

Baca selengkapnya »

Tooltips Paling Keren Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcMLeWLiuvSaCO5-4n9gi8sJRrxvW1hk7VMwKuqjJKSWgkBGFfLxxjVCn34059qDo-p_7pW-1V7u-TJTZFmHA-CWtuySyxy0K-Ccsl4LqoQ6oKf0hRB9jzDqW1MBuCpgJ7VBNwzrXSrea/s1600/Tooltips+Pseudo+Elemen+&+Transisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcMLeWLiuvSaCO5-4n9gi8sJRrxvW1hk7VMwKuqjJKSWgkBGFfLxxjVCn34059qDo-p_7pW-1V7u-TJTZFmHA-CWtuySyxy0K-Ccsl4LqoQ6oKf0hRB9jzDqW1MBuCpgJ7VBNwzrXSrea/s400/Tooltips+Pseudo+Elemen+&+Transisi.png" /></a></div>Tooltips Paling Keren Dengan CSS3 | Belum selesai di masalah tooltips.Kemarin sudah lihat tooltips versi 1 dan 2 ? jika belum, klik <a href="http://www.bocahit.com/2013/08/iseng-iseng-dari-tooltips-pakai-pseudo.html" target="_blank">disini</a> atau <a href="http://www.bocahit.com/2013/08/tooltips-super-duper-keren-dengan-css3.html" target="_blank">disini</a>. Masih memakai Pseudo Element & Transition. Hanya saja yang menjadi ada di border radius saja. Silakan dilihat.<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a_23.html" target="_blank">Ilustrasi</a></div><br /><h3>CSS</h3><pre>a.tooltip {<br /> position: relative;<br /> display: inline;<br />}<br /><br />a.tooltip span {<br /> width: 80px;<br /> height: 80px;<br /> line-height: 80px;<br /> padding: 10px;<br /> left: 50%;<br /> margin-left: -55px;<br /> font-family: 'Alegreya SC', Georgia, serif;<br /> font-weight: 400; <br /> font-style: italic;<br /> font-size: 14px;<br /> color: #719DAB;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);<br /> text-align: center;<br /> border: 5px solid #fff;<br /> background: rgba(255,255,255,0.5);<br /> text-indent: 0px;<br /> position: absolute;<br /> pointer-events: none;<br /> border-radius: 50%;<br /> bottom: -40px;<br /> opacity: 0;<br /> box-shadow: 0px 3px 8px rgba(0,0,0,0.1);<br /> -webkit-transform: scale(0.2);<br /> -moz-transform: scale(0.2);<br /> -o-transform: scale(0.2);<br /> -ms-transform: scale(0.2);<br /> transform: scale(0.2);<br /> -webkit-transition: all 0.3s ease-in-out;<br /> -moz-transition: all 0.3s ease-in-out;<br /> -o-transition: all 0.3s ease-in-out;<br /> -ms-transition: all 0.3s ease-in-out;<br /> transition: all 0.3s ease-in-out;<br />}<br /><br />a:hover.tooltip span {<br /> opacity: 0.9;<br /> bottom: 20px;<br /> -webkit-transform: scale(1);<br /> -moz-transform: scale(1);<br /> -o-transform: scale(1);<br /> -ms-transform: scale(1);<br /> transform: scale(1);<br />}<br /></pre><br/><h3>HTML</h3><pre><a class="tooltip" href="#">Add On Fb<span>Facebook</span></a><br /> <a class="tooltip" href="#">Add Circle<span>Goggle +</span></a><br /> <a class="tooltip" href="#">Follow Me<span>Twitter</span></a></pre><br/>

Tooltips Paling Keren Dengan CSS3

Tooltips Paling Keren Dengan CSS3 | Belum selesai di masalah tooltips.Kemarin sudah lihat tooltips versi 1 dan 2 ? jika belum, klik disini ...

Baca selengkapnya »

Tooltips Super Duper Keren Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinggd2_hyYmgaXeyh09Bz30lY18xmw3lZvTjPU7nMg6q8CjVfWsgcvAPKiI3cYVZ6PIyTW9bDd0mWHxDgDhqS34IKzLcITjnkBksBAODdHxPoabXi7lNZfuKx7GOejtRdBOdT5-raVRBs8/s1600/Tooltips+Pseudo+Elemen+&+Transisi+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinggd2_hyYmgaXeyh09Bz30lY18xmw3lZvTjPU7nMg6q8CjVfWsgcvAPKiI3cYVZ6PIyTW9bDd0mWHxDgDhqS34IKzLcITjnkBksBAODdHxPoabXi7lNZfuKx7GOejtRdBOdT5-raVRBs8/s400/Tooltips+Pseudo+Elemen+&+Transisi+2.png" width="400" /></a></div><br />Tooltips Super Duper Keren Dengan CSS3 | Kalau kemarin cuma iseng - iseng aja buat <a href="http://www.bocahit.com/2013/08/iseng-iseng-dari-tooltips-pakai-pseudo.html" target="_blank">tooltips</a>, kali ini malah di ubah tetapi tetap pada transition & pseudo element. Cocok untuk blog yang mengutamakan penampilan. Silahkan lihat ilustrasinya....<br /><br /><div style="text-align: center;"><a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a_22.html" target="_blank">ILUSTRASI</a></div><div style="text-align: center;"><br /></div><div style="text-align: left;">Bagaimana? tertarik ? langsung di pasang....</div><br /><h3>CSS</h3><br /><pre>a.tooltip {<br /> position: relative;<br /> display: inline;<br />}<br /><br />a.tooltip span {<br /> width: 100px;<br /> height: auto;<br /> line-height: 20px;<br /> padding: 10px;<br /> left: 50%;<br /> margin-left: -64px;<br /> font-family: 'Alegreya SC', Georgia, serif;<br /> font-weight: 400; <br /> font-style: italic;<br /> font-size: 14px;<br /> color: #719DAB;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);<br /> text-align: center;<br /> border: 4px solid rgba(106, 131, 227, 0.4);<br /> background: rgba(255,255,255,0.3);<br /> text-indent: 0px;<br /> border-radius: 5px;<br /> position: absolute;<br /> pointer-events: none;<br /> bottom: 100px;<br /> opacity: 0;<br /> box-shadow: 1px 1px 2px rgba(0,0,0,0.1);<br /> -webkit-transition: all 0.3s ease-in-out;<br /> -moz-transition: all 0.3s ease-in-out;<br /> -o-transition: all 0.3s ease-in-out;<br /> -ms-transition: all 0.3s ease-in-out;<br /> transition: all 0.3s ease-in-out;<br /><br />} <br /> <br />a.tooltip span:after {<br /> bottom: -14px;<br /> margin-left: -10px;<br /> border-top: 10px solid #fff;<br /><br />}<br /><br />a.tooltip span:before, a.tooltip span:after {<br /> content: '';<br /> position: absolute;<br /> bottom: -15px;<br /> left: 50%;<br /> margin-left: -9px;<br /> width: 0;<br /> height: 0;<br /> border-left: 10px solid transparent;<br /> border-right: 10px solid transparent;<br /> border-top: 10px solid rgba(106, 131, 227, 0.4);<br /> }<br /> <br />a:hover.tooltip span {<br /> visibility: visible;<br /> opacity: 0.8;<br /> bottom: 30px;<br /> z-index: 999;<br /> visibility: visible;<br /> opacity: 0.9;<br /> -webkit-transform: translate(0px) rotate(0deg) scale(1);<br /> -moz-transform: translate(0px) rotate(0deg) scale(1);<br /> -o-transform: translate(0px) rotate(0deg) scale(1);<br /> -ms-transform: translate(0px) rotate(0deg) scale(1);<br /> transform: translate(0px) rotate(0deg) scale(1);<br />}<br /></pre><br /><h3>HTML</h3><pre><a class="tooltip" href="#">Add On Fb<span>Facebook</span></a><br /> <a class="tooltip" href="#">Add Circle<span>Goggle +</span></a><br /> <a class="tooltip" href="#">Follow Me<span>Twitter</span></a><br /></pre><br />Selamat mencoba bro...

Tooltips Super Duper Keren Dengan CSS3

Tooltips Super Duper Keren Dengan CSS3 | Kalau kemarin cuma iseng - iseng aja buat tooltips , kali ini malah di ubah tetapi tetap pada trans...

Baca selengkapnya »

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaE5zovnA9c59oZkT8R3WYAqiA7WOeaas0sRwDxOfBiMd_hlqdvJTH0LhWNPEqECAbAV7F6BG9bDjEgmT5lcUvaKzt5DWvDg5BldsSpmbtM3QeVPNEYu5krIjs00DuB1buiA4VjvEtTD2/s1600/Tooltips+Pseudo+Elemen+&+Transisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi" border="0" height="212" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioaE5zovnA9c59oZkT8R3WYAqiA7WOeaas0sRwDxOfBiMd_hlqdvJTH0LhWNPEqECAbAV7F6BG9bDjEgmT5lcUvaKzt5DWvDg5BldsSpmbtM3QeVPNEYu5krIjs00DuB1buiA4VjvEtTD2/s400/Tooltips+Pseudo+Elemen+&+Transisi.png" title="Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi" width="400" /></a></div><br />Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi | Dari iseng - iseng,,mainan Transisi di <a href="http://www.css3maker.com/css3-transition.html" target="_blank">CSS3 Maker</a> terus sedikit tambahan dengan Pseudo Elemen di Dreamweaver, ehh ga sengaja malah jadi tooltips. Padahal ga punya ide buat tooltips...Tooltips yang sangat super keren..(hikz) menurut saya. Maklum saya adalah Noob Designer...Keren menurut saya jelek menurut anda. Tapi seperti ini lah.<br /><br /><h3>HTML</h3><pre>  <a class="tooltip" href="#">Add On Fb<span>Facebook</span></a><br />  <a class="tooltip" href="#">Add Circle<span>Goggle +</span></a><br />  <a class="tooltip" href="#">Follow Me<span>Twitter</span></a><br />  </pre><br />Yups, dari markupnya memang sama seperti tutorial <a href="http://www.bocahit.com/2013/06/cara-membuat-pure-css3-tooltips-di-blog.html" target="_blank" title="Tutorial Membuat Pure Tooltips">membuat tooltips</a>. <br /><h3>CSS</h3><pre>a.tooltip {<br /> position: relative;<br /> display: inline;<br />}<br />a.tooltip span {<br /> width: 100px;<br /> height: auto;<br /> line-height: 20px;<br /> padding: 10px;<br /> left: 50%;<br /> margin-left: -64px;<br /> font-family: 'Alegreya SC', Georgia, serif;<br /> font-weight: 400; <br /> font-style: italic;<br /> font-size: 14px;<br /> color: #719DAB;<br /> text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);<br /> text-align: center;<br /> border: 4px solid #fff;<br /> background: rgba(255,255,255,0.3);<br /> text-indent: 0px;<br /> border-radius: 5px;<br /> position: absolute;<br /> bottom: 70px;<br /> opacity: 0;<br /> pointer-events: none;<br /> box-shadow: 1px 1px 2px rgba(0,0,0,0.1);<br /> -webkit-transform: translate(35px) rotate(25deg) scale(1.5);<br /> -moz-transform: translate(35px) rotate(25deg) scale(1.5);<br /> -o-transform: translate(35px) rotate(25deg) scale(1.5);<br /> -ms-transform: translate(35px) rotate(25deg) scale(1.5);<br /> transform: translate(35px) rotate(25deg) scale(1.5);<br /> -webkit-transition: all 0.3s ease-in-out;<br /> -moz-transition: all 0.3s ease-in-out;<br /> -o-transition: all 0.3s ease-in-out;<br /> -ms-transition: all 0.3s ease-in-out;<br /> transition: all 0.3s ease-in-out;<br /><br />} <br /> <br />a.tooltip span:after {<br /> bottom: -14px;<br /> margin-left: -10px;<br /> border-top: 10px solid #fff;<br /><br />}<br /><br />a.tooltip span:before, a.tooltip span:after {<br /> content: '';<br /> position: absolute;<br /> bottom: -15px;<br /> left: 50%;<br /> margin-left: -9px;<br /> width: 0;<br /> height: 0;<br /> border-left: 10px solid transparent;<br /> border-right: 10px solid transparent;<br /> border-top: 10px solid rgba(0,0,0,0.1);<br /> }<br /> <br />a:hover.tooltip span {<br /> visibility: visible;<br /> opacity: 0.8;<br /> bottom: 30px;<br /> z-index: 999;<br /> visibility: visible;<br /> opacity: 0.9;<br /> -webkit-transform: translate(0px) rotate(0deg) scale(1);<br /> -moz-transform: translate(0px) rotate(0deg) scale(1);<br /> -o-transform: translate(0px) rotate(0deg) scale(1);<br /> -ms-transform: translate(0px) rotate(0deg) scale(1);<br /> transform: translate(0px) rotate(0deg) scale(1);<br />}<br /></pre><br />Pseudo Elemen bisa di pelajari dan dipratekan di <a href="http://www.w3schools.com/css/css_pseudo_elements.asp" target="_blank">W3school CSS Pseudo Element</a>. Gampang kan, silakan dipakai. Dari ini saya jadi dapatkan ide lagi buat tooltips yang lainnya...<br /><br /><div style="text-align: center;"> <a class="button" href="http://iframe-wammy.blogspot.com/2013/08/a.html" target="_blank" title="Demo">Ilustrasi</a></div>

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi

Iseng - Iseng Dari Tooltips Pakai Pseudo Element Dan & Transisi | Dari iseng - iseng,,mainan Transisi di CSS3 Maker terus sedikit tamba...

Baca selengkapnya »

Membuat Float Menu Dengan Logo

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpa_QQ0RhQ9b9DDvEs7JQMyv4FEkLiyZ0s06o7DsEx4L80K7UpcH1yJB9yw14IU7wLjsbz8OY6UdyVQf905cmc6GaIFmtLtQ2FOGB35Vx6xWABML-bx34giLUBGdGMtRPQYF1-U_32ahJU/s1600/Fixed+Menu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Float Menu Dengan Logo" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpa_QQ0RhQ9b9DDvEs7JQMyv4FEkLiyZ0s06o7DsEx4L80K7UpcH1yJB9yw14IU7wLjsbz8OY6UdyVQf905cmc6GaIFmtLtQ2FOGB35Vx6xWABML-bx34giLUBGdGMtRPQYF1-U_32ahJU/s320/Fixed+Menu.jpg" title="Membuat Float Menu Dengan Logo" width="320" /></a></div>Membuat Float Menu Dengan Logo | Dari iseng - lihat koleksi template, suka juga deh dengan template yang namanya Dazzling dari templateism, tapi cuma suka bagian menunya, karen itu, sebisa mungkin aku cloning. Dan akhirnya berhasil. Dan yang anda lihat di menu float di template ini adalah cloning dari menu float Dazzling. Hanya saya ubah bagian warna dengan rgba bertransparan.<br /><br /><h3>HTML</h3><pre><div id='float-menuwrapper'><br /><div id='float-menuwrap'><br /><div id='float-menu'><br /><div class='logo'><br />  <a href='/'><img alt='Home' border='0' src='url logo' style='padding:0px;'/></a><br /></div><br /><ul><br /><li><a href='url anda' rel='nofollow' target='_blank'>Ads</a></li><br />  <li><a href='url anda' rel='nofollow' target='_blank'>About</a></li><br />  <li><a href='url anda' rel='nofollow' target='_blank'>Contact</a></li><br /><li><a href='url anda' rel='nofollow' target='_blank'>Sitemap</a></li><br /><li><a href='url anda' rel='nofollow' target='_blank'>Home</a></li><br /></ul><br /></div><br /></div><br /></div></pre><h3>CSS</h3><pre>#float-menuwrapper{background-color: rgba(0, 0, 0, 0.6);box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.9) inset;width:auto;margin-bottom:0px;padding:0 auto;vertical-align: baseline;border-width: 1px;border-style: solid;border-right: 1px solid rgb(17, 17, 17);border-left: 1px solid rgb(17, 17, 17);-moz-border-top-colors: none;-moz-border-right-colors: none;-moz-border-bottom-colors: none;-moz-border-left-colors: none;border-image: none;border-color: rgba(255, 255, 255, 0.08) rgb(17, 17, 17) rgba(255, 255, 255, 0.05);box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.9), 0px 0px 20px rgba(0, 0, 0, 0.7) inset;<br />height: 70px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;}<br />#float-menuwrap{width:1100px;margin:0 auto;}<br />#float-menu{width:100%}<br />#float-menu ul{list-style: none;margin-right:250px}<br />#float-menu ul li{float:right}<br />#float-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:18px;text-transform:uppercase;display:block;text-decoration:none;font-family:'Coda';font-weight:bold;}<br />#float-menu ul li a:hover{background: none repeat scroll 0% 0% transparent; color: rgb(198, 235, 4);<br />text-shadow: 0px 0px 20px rgb(198, 235, 4), 0px 0px 30px rgb(198, 235, 4), 0px 0px 40px rgb(198, 235, 4);}<br />.logo{float:left;background:none;}<br />.logo img{margin-top:-18px;}</pre><br /><h3>Cara Memasang</h3><ol><li>Letakkan kode HTML dibawah </head></li><li>Letakkan kode CSS di atas ]]></b:skin> </li></ol><blockquote class="tr_bq">Atur letaknya di  #float-menuwrap{margin:0 auto;} ganti sesuai template anda.</blockquote>Selamat Mencoba :D

Membuat Float Menu Dengan Logo

Membuat Float Menu Dengan Logo | Dari iseng - lihat koleksi template, suka juga deh dengan template yang namanya Dazzling dari templateism, ...

Baca selengkapnya »

Membuat Quick Search Dengan JSON Blogger

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0sY82KF9iXAzcSCdYPyGWGxBNo2i5Z2pxgzmjOhQ1VNiWh9_fiLMH49jmAyJYxB7NrTs3-Sfg3B7CasHPocqwpXj273-rY-Bl1BPb3ESBhsTMUGjB69B5h8SZ9qQifKTwnWvJOorptMf/s465/Capture.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Quick Search Dengan JSON Blogger" border="0" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0sY82KF9iXAzcSCdYPyGWGxBNo2i5Z2pxgzmjOhQ1VNiWh9_fiLMH49jmAyJYxB7NrTs3-Sfg3B7CasHPocqwpXj273-rY-Bl1BPb3ESBhsTMUGjB69B5h8SZ9qQifKTwnWvJOorptMf/s320/Capture.PNG" title="Membuat Quick Search Dengan JSON Blogger" width="320" /></a></div><br />Membuat Quick Search Dengan JSON Blogger | Kali ini, saya ingin berbagidari tutorial sahabat saya, Mas Taufik. Masalah Quick Search, dimana blogger mengijinkan untuk mencari query di dalam feed dengan kata kunci secara acak. Ini tentu memudahkan visitor ketika mencari artikel kita.<br /><br />1. Letakkan Kode CSS di atas ]]></b:skin> <br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS, Quick Search JSON Blogger</span></h3><pre class="brush:js;">#search-form-feed {<br /> width:200px; /* lebar kotak penelusuran */<br /> position:relative;<br /> margin:0 0 10px;<br /> padding:0 0;<br /> font:normal normal 11px Arial,Sans-Serif;<br /> color:#333;<br />}<br /><br />#feed-q-input {<br /> display:block;<br /> width:100%;<br /> border:2px solid #bbb;<br /> background-color:white;<br /> padding:5px 5px;<br /> font:normal bold 13px Tahoma,Arial,Sans-Serif;<br /> color:#ccc;<br /> margin:0 0;<br /> -webkit-border-radius:4px;<br /> -moz-border-radius:4px;<br /> border-radius:4px;<br /> -webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);<br /> -moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);<br /> box-shadow:inset 0 1px 5px rgba(0,0,0,.2);<br /> -webkit-box-sizing:border-box;<br /> -moz-box-sizing:border-box;<br /> box-sizing:border-box;<br />}<br /><br />#feed-q-input:focus {<br /> border-color:#0D6786;<br /> color:#333;<br /> outline:none;<br /> -webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;<br /> -moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;<br /> box-shadow:0 0 5px #153E95,0 0 7px #153E95;<br />}<br /><br />#search-result-container {<br /> width:400px;<br /> height:300px;<br /> overflow:auto;<br /> position:absolute;<br /> top:100%;<br /> right:0;<br /> z-index:999;<br /> background-color:#E5EDF7;<br /> border:2px solid white;<br /> padding:10px 10px 0;<br /> margin:10px 0 0;<br /> -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);<br /> -moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);<br /> box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);<br /> -webkit-border-radius:5px;<br /> -moz-border-radius:5px;<br /> border-radius:5px;<br /> display:none;<br />}<br /><br />#search-result-container mark {<br /> background-color:yellow;<br /> color:black;<br />}<br /><br />#search-result-container a {<br /> text-decoration:none;<br /> color:#0D3E71;<br /> font-weight:bold;<br /> font-size:12px;<br /> display:block;<br />}<br /><br />#search-result-container a:hover {<br /> color:#052748;<br />}<br /><br />#search-result-container h4 {<br /> margin:0 0 10px;<br /> font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;<br /> color:#B50001;<br />}<br /><br />#search-result-container ol {<br /> background:transparent;<br /> border:none;<br /> margin:0 0 10px;<br /> padding:0 0;<br />}<br /><br />#search-result-container li {<br /> margin:0 0 1px;<br /> padding:7px 8px;<br /> list-style:none;<br /> border:1px solid #B7C1CE;<br /> background-color:white;<br /> overflow:hidden;<br /> word-wrap:break-word;<br />}<br /><br />#search-result-container li img {<br /> display:block;<br /> float:left;<br /> margin:0 10px 4px 0;<br /> border:1px solid #B7C1CE;<br /> background-color:#F5F5F5;<br /> padding:2px 2px;<br />}<br /><br />#search-result-loader {<br /> position:absolute;<br /> top:100%;<br /> left:5px;<br /> z-index:999;<br /> background-color:#0D6786;<br /> color:white;<br /> padding:3px 5px;<br /> margin:-2px 0 0;<br /> font:normal bold 10px Arial,Sans-Serif;<br /> -webkit-border-radius:0 0 3px 3px;<br /> -moz-border-radius:0 0 3px 3px;<br /> border-radius:0 0 3px 3px;<br /> display:none;<br />}<br /></pre>2. Letakkan kode HTML & JS di dalam widget blog.<br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML & Javascript, Quick Search JSON Blogger</span></h3><pre class="brush:js;"><div id="search-form-feed"><br />    <form action="/search" onsubmit="return updateScript();"><br />        <input name="q" type="text" value="Telusuri..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/><br />    </form><br />    <div id="search-result-container"></div><br />    <div id="search-result-loader">Loading...</div><br /></div><br /><script type="text/javascript"><br />//<![CDATA[<br />var searchFormConfig = {<br />    url: "http://nama_blog.blogspot.com", // URL Blog<br />    numPost: 9999, // Jumlah maksimal temuan<br />    summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting<br />    summaryLength: 400, // Jumlah karakter ringkasan posting<br />    resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian<br />    noResult: "No result", // Deskripsi 'tak ditemukan'<br />    resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting<br />    thumbSize: 40, // Ukuran & resolusi thumbnail<br />    fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar<br />};<br />//]]><br /></script><br /><script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js"></script></pre><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://iframe-wammy.blogspot.com/2013/07/json-quick-search.html" target="_blank" title="Ilustrasi">Ilustrasi</a></div>

Membuat Quick Search Dengan JSON Blogger

Membuat Quick Search Dengan JSON Blogger | Kali ini, saya ingin berbagidari tutorial sahabat saya, Mas Taufik. Masalah Quick Search, dimana ...

Baca selengkapnya »

Cara Membuat Efek Seperti Preview Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZDnzNfdlHgTgA0mKqgJGTo75LSW9ZxTMizpM-w6EE-Wr3nKZIsYlTbLsZOl7Zm8lk6020TF8t-Ja0PSB745lcA-2LsJVz5AbiGhOh-3ucqwEhrWL2I1QUxnsasMWEu1Q_hUrXD0BNqQX/s1366/2013-06-28+08-55-25.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Efek Seperti Preview Blog" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFZDnzNfdlHgTgA0mKqgJGTo75LSW9ZxTMizpM-w6EE-Wr3nKZIsYlTbLsZOl7Zm8lk6020TF8t-Ja0PSB745lcA-2LsJVz5AbiGhOh-3ucqwEhrWL2I1QUxnsasMWEu1Q_hUrXD0BNqQX/s320/2013-06-28+08-55-25.png" title="Cara Membuat Efek Seperti Preview Blog" width="320" /></a></div><br />Cara Membuat Efek Seperti Preview Blog | Bermain CSS lagi. Kali ini, sederhana banget. Efek Preview yang aku maksud itu seperti garis yang di kiri blog ketika kita klik preview pada artikel. Sekarang bisa di tempatkan di semua halaman.<br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS, Letakkan di atas </body></span></h3><pre><div style="-moz-transform-origin: 50% 0px; -moz-transform: rotate(-45deg); -o-transform-origin: 50% 0px; -o-transform: rotate(-45deg); -webkit-transform-origin: 50% 0px; -webkit-transform: rotate(-45deg); background-color: black; border: 1px solid rgb(170, 170, 170); color: white; font-family: 'trebuchet ms', verdana, arial, sans-serif; font-size: 24px; left: -225px; opacity: 0.5; padding: 10px; position: fixed; text-align: center; top: 75px; transform-origin: 50% 0px; transform: rotate(-45deg); width: 600px; z-index: 9999;"><br />Demo Efek Pratinjau<br />    </div></pre><br /><br /><div style="text-align: center;"><a alt="Demo" class="button" href="http://iframe-wammy.blogspot.com/2013/06/blog-post.html" title="Demo">DEMO</a></div><br /><br />Nah saya rasa hanya ini. Mudahkan...

Cara Membuat Efek Seperti Preview Blog

Cara Membuat Efek Seperti Preview Blog | Bermain CSS lagi. Kali ini, sederhana banget. Efek Preview yang aku maksud itu seperti garis yang d...

Baca selengkapnya »

Cara Membuat Pure CSS3 Tooltips Di Blog

<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-9QahUkhkhOM/T9FVQQroupI/AAAAAAAABFQ/ZmAtgpDicks/s1600/css3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Pure CSS3 Tooltips Di Blog" border="0" height="320" src="http://1.bp.blogspot.com/-9QahUkhkhOM/T9FVQQroupI/AAAAAAAABFQ/ZmAtgpDicks/s320/css3.jpg" title="Cara Membuat Pure CSS3 Tooltips Di Blog" width="320" /></a></div>Cara Membuat Pure CSS3 Tooltips Di Blog | Tooltips memang jarang dipakai, karena penggunannya yang cukup rumit, tapi tooltips bisa di pakai di blog untuk membuat blog lebih tampak indah. Apalagi yang sudah tersentuh CSS, semua akan jauh lebih indah.<br /><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">CSS, Pure CSS3 Tooltips</span></h3><br /><pre class="brush:js;">a.tooltip {<br />    position: relative;<br />    display: inline;<br />}<br /><br />a.tooltip span {<br />    position: absolute;<br />    left: 50%;<br />    width:140px;<br />    padding: 6px;<br />    margin-left: -76px;<br />    background: #000; /*warna latar*/<br />    color: #fff; /*warna huruf*/<br />    text-align: center;<br />    visibility: hidden;<br />    border-radius: 5px;<br />} <br />        <br />a.tooltip span:after {<br />    content: '';<br />    position: absolute;<br />    top: 100%;<br />    left: 50%;<br />    margin-left: -8px;<br />    width: 0; height: 0;<br />    border-top: 8px solid black;<br />    border-right: 8px solid transparent;<br />    border-left: 8px solid transparent;<br />}<br />        <br />a:hover.tooltip span {<br />    visibility: visible;<br />    opacity: 0.8;<br />    bottom: 30px;<br />    z-index: 999;<br />}<br /></pre><br /><h3 style="background-attachment: scroll; background-color: transparent; background-image: url(https://sites.google.com/site/republicofnote/image/RON+PostTitle1.png); background-position: 4px 50%; background-repeat: no-repeat no-repeat; border-bottom-left-radius: 60px; border-bottom-right-radius: 60px; border-top-left-radius: 60px; border-top-right-radius: 60px; border: 3px solid rgb(200, 200, 0); box-shadow: rgb(198, 198, 198) 0px 1px 3px, rgba(255, 255, 255, 0.4) 1px 1px 0px inset; color: #a5a503; font-family: 'Trebuchet MS', sans-serif; font-size: 20px; line-height: 1; margin: 15px 3px; padding: 3px 10px 3px 30px; text-align: left; text-shadow: rgb(204, 204, 204) 0px 1px 0px; text-transform: uppercase;"><span style="color: red;">HTML, Pure CSS3 Tooltips</span></h3><br /><pre class="brush:js;"><a class="tooltip" href="#">Teks Link<span>Teks Tooltips</span></a></pre><br /><br /><div style="text-align: center;"><a alt="demo" class="button" href="http://herlambang.net78.net/" target="_blank" title="Demo Tooltips">DEMO</a></div>

Cara Membuat Pure CSS3 Tooltips Di Blog

Cara Membuat Pure CSS3 Tooltips Di Blog | Tooltips memang jarang dipakai, karena penggunannya yang cukup rumit, tapi tooltips bisa di pakai ...

Baca selengkapnya »

Cara Membuat Kotak Pemberitahuan Dengan CSS3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhULygGZCbDtSuDMW24ezJMQPWcNM0dW56QirkdMmmKYRQTxu5QXdE65lm5DDpPatYzYf_ezsRwqUz43nshJh0MDHbOBIB2XQZ3lpOumnE-uonbAzKxvD6pliIo_cPXWfO8x3s6crjRI5/s1600/notif.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="123" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhULygGZCbDtSuDMW24ezJMQPWcNM0dW56QirkdMmmKYRQTxu5QXdE65lm5DDpPatYzYf_ezsRwqUz43nshJh0MDHbOBIB2XQZ3lpOumnE-uonbAzKxvD6pliIo_cPXWfO8x3s6crjRI5/s400/notif.PNG" width="400" /></a></div>Cara Membuat Kotak Pemberitahuan Dengan CSS3 | Waw,,capek juga, setelah sepedaan ke Solo - Boyolali, sebelum tidur sempatkan dulu, buat artikel. Tadi di jalan, ga sengaja lihat papan..Coution...ga jauh dari situ juga ada papan, Pemberitahuan, sedang ada perbaikan jalan. Langsung dari otak kanan ke otak kiri terus turun ke dengkul munculah ide ini. Menurut saya, ini penting ga penting, penting jika kita ingin menyampaikan sesuatu kepada visitor yang jelas dan langsung terbaca. Tapi ga penting juga kalau buat main - main. Nah, bagi yang butuh bisa deh, pakai ini :<br /><br /><h3>Langkah 1. CSS3, Notification Box</h3><pre>.alert-box {<br />    color:#555;<br />    border-radius:10px;<br />    font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;<br />    padding:10px 10px 10px 36px;<br />    margin:10px;<br />}</pre><br />Sekarang lihat ini:<br /><ul><li><span class="code">color : #555;</span> – warna teks</li><li><span class="code">border-radius:10px;</span> – jarak border radius</li><li><span class="code">font-family:…</span> – jenis huruf, kesukaan anda</li><li><span class="code">padding:10px 10px 10px 36px;</span> – padding untuk atas bawah kanan kiri</li><li><span class="code">margin:10px;</span> – jarak sekeliling</li></ul><br /><pre>.alert-box span {<br />    font-weight:bold;<br />    text-transform:uppercase;<br />}</pre><br />Diatas, kenapa?karena kita gunakan span.<br /><br /><h3>Langkah 2, CSS3 Alert</h3><pre>.error {<br />    background:#ffecec url('images/error.png') no-repeat 10px 50%;<br />    border:1px solid #f5aca6;<br />}<br />.success {<br />    background:#e9ffd9 url('images/success.png') no-repeat 10px 50%;<br />    border:1px solid #a6ca8a;<br />}<br />.warning {<br />    background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;<br />    border:1px solid #f2c779;<br />}<br />.notice {<br />    background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;<br />    border:1px solid #8ed9f6;<br />}<br /></pre><br />Masalah url gambar bisa anda cari di google yang anda suka.<br /><h3>Langkah 3, CSS3 Alert</h3><pre><div class="alert-box error"><span>error: </span>Pesan Salah Anda.</div><br /><div class="alert-box success"><span>success: </span>Pesan Sukses Anda.</div><br /><div class="alert-box warning"><span>warning: </span>Pesan Larangan Anda.</div><br /><div class="alert-box notice"><span>notice: </span>Pesan Pemberitahuan Anda.</div></pre><br />Okey, langsung donwload gambarnya... <br /><div style="text-align: center;"><a class="button" href="http://adf.ly/QpTl7" target="_blank">Download Image</a></div>

Cara Membuat Kotak Pemberitahuan Dengan CSS3

Cara Membuat Kotak Pemberitahuan Dengan CSS3 | Waw,,capek juga, setelah sepedaan ke Solo - Boyolali, sebelum tidur sempatkan dulu, buat arti...

Baca selengkapnya »

Membuat Expendable Komentar Terbaru Dengan Jquery

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvJNLqMYpFKpKs3Xxupt-UIcssT81ag2svcvdncT4lYEEwGvm-F__2q4EeRSDLPJDs_WM2YjEHzDQib3czW2ovxH1YxACGCHmgl_8NSztrUndqIPNGYGoXpizePSh9kX5UHU70KS6iXUE/s1600/komen.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Expendable Komentar Terbaru Dengan Jquery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvJNLqMYpFKpKs3Xxupt-UIcssT81ag2svcvdncT4lYEEwGvm-F__2q4EeRSDLPJDs_WM2YjEHzDQib3czW2ovxH1YxACGCHmgl_8NSztrUndqIPNGYGoXpizePSh9kX5UHU70KS6iXUE/s320/komen.JPG" title="Membuat Expendable Komentar Terbaru Dengan Jquery" width="187" /></a></div><br />Membuat Expendable Komentar Terbaru Dengan Jquery | Jauh artikel saya tentang Komentar Terbaru <a href="http://www.bocahit.com/2012/07/cara-komentar-terbaru-pakai-foto.html" target="_blank">Dengan Foto</a>, kali ini, beda. Sedikit disentuh dengan Jquery dan elegan. Komentar bisa dengan fungsi show hide dan sebagainya lengkapnya disini.<br /><br /><pre class="brush:js;"><style type="text/css" media="screen"><br /><br />.row-aa {        background: #f2f2f3; }<br /><br />.row-bb {        background: #F8F5F1; }<br /><br />.row-div {  <br /><br />  margin:0px; <br /><br />  padding:5px; <br /><br />}<br /><br />.comment-header { <br /><br />  font-size:0.9em; <br /><br />//  border:1px solid #E0E0E0; <br /><br />//  background-color:#F3F3F3; <br /><br />  padding:4px; <br /><br />  margin-top:10px; <br /><br />  margin-bottom:5px; <br /><br />}<br /><br />.comment-box {<br /><br />  margin:0px;<br /><br />  padding:0px;<br /><br />  font-size:0.9em;<br /><br />  height:500px;<br /><br />  overflow:auto;<br /><br />}<br /><br />.comments1  {  <br /><br />//  background: #F3F3F3; <br /><br />  padding:3px; <br /><br />  border-left:1px dashed #A6A6A6;<br /><br />  color: #888888;<br /><br />  font-style: italic;<br /><br />  padding-top:4px;<br /><br />  margin-bottom:5px;<br /><br />}<br /><br />.comment-footer {<br /><br />  text-align:center;<br /><br />  font-size:0.9em;<br /><br />  padding:4px;<br /><br />  margin-top:5px;  <br /><br />}<br /><br /></style><br /><br /><br /><br /><div style="text-align: center" class="comment-header"><input <br />class="comment-button" id="commshowall" type="button" onclick="if <br />(this.value == &#39;Show all&#39;) { unfold_all(this); <br />this.value=&#39;Hide all&#39;; } else { fold_all(this); <br />this.value=&#39;Show all&#39;; }" <br />style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show <br />all" /></div><br /><br /><br /><br /><div class="comment-box"><br /><br /><script type="text/javascript" <br />src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script><br /><br /><script type="text/javascript"  src="<span style="color: blue;">http://www.bocahit.com</span>/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts"><br /><br /></script><br /><br /><script type="text/javascript"  src="<span style="color: blue;">http://www.bocahit.com</span>/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments"><br /><br /></script><br /><br /></div></pre><br /><br />Selamat Mencoba :D<br />Ganti dengan URL blog sobat. <br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6_WBAM_gSYanYbxy3euSKuhn1sW-hE_8ngLF0Tzz9QF9ctvuUGeR3c65gI_VV8NbmZqhkfTFmenwcwXeW7FX8iOLA6SeBh159OQpfBY0fIrNn6ps6feT72fqeVwjZDWBdnQJPHm6kJjqd/s1600/komen2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Expendable Komentar Terbaru Dengan Jquery" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6_WBAM_gSYanYbxy3euSKuhn1sW-hE_8ngLF0Tzz9QF9ctvuUGeR3c65gI_VV8NbmZqhkfTFmenwcwXeW7FX8iOLA6SeBh159OQpfBY0fIrNn6ps6feT72fqeVwjZDWBdnQJPHm6kJjqd/s320/komen2.JPG" title="Membuat Expendable Komentar Terbaru Dengan Jquery" width="187" /></a></div><br />

Membuat Expendable Komentar Terbaru Dengan Jquery

Membuat Expendable Komentar Terbaru Dengan Jquery | Jauh artikel saya tentang Komentar Terbaru Dengan Foto , kali ini, beda. Sedikit disentu...

Baca selengkapnya »

Membuat Back To Top Show/Hide Dengan Jquery

<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgugV9Buoe-IZE5CHzGjbK7OgeLqM77wKrypqIPCJWxlFRZ0rcPWt2Bz0DzbZrBK6V1lHpJOkeUObdNu3NAgZD8BU9BKh6ahDUhNRdH63T72G79irGjLlIHv_9KHUFWntK-xDGGvRm_RVQ/s1600/top.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Back To Top Show/Hide Dengan Jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgugV9Buoe-IZE5CHzGjbK7OgeLqM77wKrypqIPCJWxlFRZ0rcPWt2Bz0DzbZrBK6V1lHpJOkeUObdNu3NAgZD8BU9BKh6ahDUhNRdH63T72G79irGjLlIHv_9KHUFWntK-xDGGvRm_RVQ/s1600/top.JPG" title="Membuat Back To Top Show/Hide Dengan Jquery" /></a></div>Membuat Back To Top Show/Hide Dengan Jquery | Apa kelebihannya? membuat tombol kembali ke atas ? ya, salah satunya untuk mempermudah pengunjunga berinteraksi dengan <i>blog. </i>Walau banyak blogger yang mengatakan bahwa memasang navigasi ini, tapi menurut saya ini cukup penting juga, jika kita memiliki artikel yang cukup panjang, kita bisa pakai cara ini untuk mempermudah pengunjung.<br /><br />Pasang kode di bawah ini di atas kode <b>]]></b:skin></b><br /><br /><pre class="brush:js;">.button_up{<br />padding:7px;   <br />background-color:white;<br />border:1px solid #CCC; <br />position:fixed;<br />background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirBUmwK6wC2PZa6PlBaSf0w4OnP6PCHMtYFDmNFIHxnv8hZARlO7_gbnSiQKGFZFaXolXWL63MwAlCuy164hdWqR9PdJ2ZgrUSV5jcbWVcUiI8ebhH3VPEh53coi69rfCJHhQhCoq3bGs/s16/arrow_up.png) no-repeat top left;<br />background-position:50% 50%;<br />width:20px;/* Lebar tombol */<br />height:20px;/* Tinggi tombol */<br />bottom:280px;/* Jarak dari bawah */<br />right:5px; /* pilihan kanan atau kiri */<br />white-space:nowrap;<br />cursor: pointer;<br />border-radius: 3px 3px 3px 3px;<br />opacity:0.7; <br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br />}<br />.button_down{<br />padding:7px; <br />background-color:white;<br />border:1px solid #CCC; <br />position:fixed;<br /><br />background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlr0nbCIEuWmGbvZImn7u1Lz9wQTyLqK2OsgLSXSxgGRlguqcLqZG65boLvYOM-WvXzA0JYhPTaUhYQH23NS6F95FSrniEg9F5QgMywKBsuQkst34s2jnYcxE8BT_2cXg19zTkrtPbwo/s16/arrow_down.png) no-repeat top left;<br />background-position:50% 50%;<br />width:20px; <br />height:20px;<br />bottom:242px;<br />right:5px; <br />white-space:nowrap;<br />cursor: pointer;<br />border-radius: 3px 3px 3px 3px;<br />opacity:0.7;<br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br />}<br /></pre><br />Lalu, cari kode </body>, letak kode ini diatasnya :<br /><br /><pre class="brush:js;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><br /><br /><br /><b><div class='button_up' id='button_up' style='display:none;'/></b><br /><br /><b><div class='button_down' id='button_down' style='display:none;'/></b><br /><br /><br /><br /><script><br /><br />//<![CDATA[<br /><br />(function(){var special=jQuery.event.special,uid1='D'+(+new <br />Date()),uid2='D'+(+new <br />Date()+1);special.scrollstart={setup:function(){var <br />timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var<br /> timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();<br /><br /><br /><br />$(function() {<br /><br />var $elem = $('body');<br /><br />$('#button_up').fadeIn('slow');<br /><br />$('#button_down').fadeIn('slow'); <br /><br />$(window).bind('scrollstart', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'0.2'});<br /><br />});<br /><br />$(window).bind('scrollstop', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'1'});<br /><br />});<br /><br />$('#button_down').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: $elem.height()}, 800);<br /><br />} );<br /><br />$('#button_up').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: '0px'}, 800);<br /><br />} );});<br /><br />//]]><br /><br /></script></pre><br />Dan BERHASIL!

Membuat Back To Top Show/Hide Dengan Jquery

Membuat Back To Top Show/Hide Dengan Jquery | Apa kelebihannya? membuat tombol kembali ke atas ? ya, salah satunya untuk mempermudah pengunj...

Baca selengkapnya »

Cara Cepat Membuat Template Blog Valid HTML5

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTdwoG-j1MLMR74RLyRK2xOOT6A8U6pcDrNpz7E21cdsgIM5mMtU7MmJRkfa3toVvsuRAzvdMUUkA5qFLyZoPetyAnJeeYKdR8DAtNWWy55YAxA2jBEmAJsC9TqjNix581zekbQujE7qVF/s1600/HTML5_sticker.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Cepat Mengubah Template Blog Valid HTML5" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTdwoG-j1MLMR74RLyRK2xOOT6A8U6pcDrNpz7E21cdsgIM5mMtU7MmJRkfa3toVvsuRAzvdMUUkA5qFLyZoPetyAnJeeYKdR8DAtNWWy55YAxA2jBEmAJsC9TqjNix581zekbQujE7qVF/s320/HTML5_sticker.png" title="Cara Cepat Mengubah Template Blog Valid HTML5" width="320" /></a></div><br />Cara Cepat Mengubah Template Blog Valid HTML5 | Di artikel saya beberapa bulan lalu, pernah mengenai <a href="http://www.bocahit.com/2013/01/kenapa-wammy-san-pilih-html5.html" target="_blank">alasan saya memilih HTML5</a>, HTML5 merupakan hasil proyek dari   W3C (<b>World Wide Web Consortium</b>) dan WHATWG (<b>Web Hypertext Application Technology Working Group</b>). WHATWG bekerja dengan bentuk situs dan aplikasi, sedangkan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.<br /><br />Lalu bagaimana membuat blog valid HTML5 ?<br /><br />1. Ganti kode,<br /><blockquote class="tr_bq"><?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><br /><head> </blockquote>Dengan kode,<br /><blockquote class="tr_bq"> <?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html><br /><HTML><br /><head><br /><meta charset='utf-8'/></blockquote>2. Ganti kode,<br /><blockquote class="tr_bq"></html></blockquote>menjadi<br /><blockquote class="tr_bq"></HTML></blockquote>3. Hapus kode,<br /><blockquote class="tr_bq"><b:include name='quickedit'/> </blockquote><blockquote class="tr_bq"><b:include data='blog' name='all-head-content'/></blockquote><blockquote class="tr_bq"><b:includable id='postQuickEdit' var='post'><br /><b:if cond='data:post.editUrl'><br /><span expr:class='&quot;item-control &quot; + data:post.adminClass'><br /><a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'><br /><img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/><br /></a><br /></span><br /></b:if><br /></b:includable></blockquote><blockquote class="tr_bq"> <div class='post-share-buttons goog-inline-block'>...sampai...</div></blockquote>4. Ganti kode,<br /><blockquote class="tr_bq"><b:skin><![CDATA[</blockquote>Dengan kode,<br /><blockquote class="tr_bq">&lt;style type=&quot;text/css&quot;&gt;<br />&lt;!-- /*<b:skin><![CDATA[*/]]<br /><style></blockquote>Setelah semua langkah terlewati, silakan cek di <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.bocahit.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0" target="_blank">Validator</a>.

Cara Cepat Membuat Template Blog Valid HTML5

Cara Cepat Mengubah Template Blog Valid HTML5 | Di artikel saya beberapa bulan lalu, pernah mengenai alasan saya memilih HTML5 , HTML5 meru...

Baca selengkapnya »

Keunggulan Template Blog Support Responsive

<span style="color: orange;">Keunggulan Template Blog Support Responsive</span> | Akhir ini, banyak designer <a href="http://www.bocahit.com/search/label/Template%20Blogger" target="_blank">template</a> <a href="http://www.bocahit.com/search/label/Blogger" target="_blank">blog</a> yang menggunakan media responsive. Contoh template responsive adalah <a href="http://www.bocahit.com/" target="_blank">ini</a>. Lalu apa itu responsive? mengapa muncul ? apa keunggulannya?<br /><br /><strong>Template Blogger Responsive</strong> adalah template (theme) blog dengan platform Blogger (Blogspot) yang dirancang khusus agar kompatibel untuk semua jenis gadget dan perangkat dengan ukuran layar yang bervariasi seperti pada layar PC, Laptop, Notebook, Tablet, bahkan untuk ponsel yang memiliki layar yang kecil. Dengan kata lain, tampilan blog akan menyesuaikan dengan ukuran layar yang digunakan.<br /><br /><strong>Keunggulan Template Blogger Responsive</strong><br />Karena sangat kompatibel dan <i>support</i> banyak perangkat, template ini mempunyai banyak keunggulan di antaranya:<br /> <br /><ol><li>Tampilan blog secara umum tidak berubah jika diakses melalui berbagai perangkat yang mempunyai ukuran layar kecil seperti pada Phonecell dan Tablet sehingga pengakses (pembaca) tidak perlu mengganti menjadi mode akses web ketika dibuka di perangkat dengan layar kecil. Situs yang tidak didesain dengan template blog responsive akan lebih lambat dibuka jika diubah menjadi mode akses web (bukan mode <i>mobile</i>) sehingga biaya akses internet dapat lebih mahal karena <i>bandwidth</i> yang digunakan juga lebih besar.</li><li>Navigasi halaman tetap mudah dan tidak terganggu meskipun dengan ukuran layar kecil baik <i>potrait</i> ataupun <i>landscape</i> seperti ukuran 240px (layar ponsel mini), 320px (layar ponsel), 480px (layar smartphone), 768px (layar tablet) dan 1024px (komputer dan laptop).</li><li>Karena tampilan tidak terganggu dengan ukuran layar yang digunakan, maka penggunaan template ini dapat meningkatkan trafik pengunjung yang datang dari perangkat <i>mobile</i> seiring dengan perkembangan teknologi di bidang itu.</li><li>Jika tema blog atau web adalah bisnis internet, maka dimungkinkan akan meningkatkan jumlah penjualan produk atau jasa seiring bertambahnya pengunjung yang datang.</li><li>Sebagai <i>author</i> akan lebih mudah menulis atau mengedit posting dari berbagai media dengan ukuran layar yang beragam.</li></ol> Di bawah ini, adalah tampilan <a href="http://www.bocahit.com/" target="_blank">Wammy's Blog</a>. Untuk berbagai ukuran media. Dan berbagai browser.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD2k1d9jxZ0sjnwQCAeEVK-KSS800y06IH_O6VoihYs5sNTW7hzxlNR-WKVGTwLi1j9w7jBtL2pkR09EWe41nTvZx_8ZKs5p3yLB7_-3x4zuUZgdAarHjXzQnCGCV3nkLydvd91ksZnczJ/s1600/5.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Keunggulan Template Blog Support Responsive" border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD2k1d9jxZ0sjnwQCAeEVK-KSS800y06IH_O6VoihYs5sNTW7hzxlNR-WKVGTwLi1j9w7jBtL2pkR09EWe41nTvZx_8ZKs5p3yLB7_-3x4zuUZgdAarHjXzQnCGCV3nkLydvd91ksZnczJ/s320/5.JPG" title="Keunggulan Template Blog Support Responsive" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGDX50FMuBHUdyS4dcCrf6H2QNw0mvxw8XJTk7l3tboFsNnEYa9tFT22VHiIcgUpTLtYfbSLATG9TYglkfPhq_UH0wcKt1ZMsxgd6llOqiHFjlbwpjZJaJOA8quqdHxxXjWgSqLsTVR4Nu/s1600/1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGDX50FMuBHUdyS4dcCrf6H2QNw0mvxw8XJTk7l3tboFsNnEYa9tFT22VHiIcgUpTLtYfbSLATG9TYglkfPhq_UH0wcKt1ZMsxgd6llOqiHFjlbwpjZJaJOA8quqdHxxXjWgSqLsTVR4Nu/s320/1.JPG" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8K0Z2UIechxqhjcbZgt5KhyphenhyphenDxsH4oB_v4AU1faa6J67erqCAOR5XD4oDH1XC_PoQbwNeezQIu4-8QaMn3Yh5TRUkRtAFmocD2sICc2JcM4vo8FX47hERQEZjquN9PyMCuGMHGsb8j0w_p/s1600/3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Keunggulan Template Blog Support Responsive" border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8K0Z2UIechxqhjcbZgt5KhyphenhyphenDxsH4oB_v4AU1faa6J67erqCAOR5XD4oDH1XC_PoQbwNeezQIu4-8QaMn3Yh5TRUkRtAFmocD2sICc2JcM4vo8FX47hERQEZjquN9PyMCuGMHGsb8j0w_p/s320/3.JPG" title="Keunggulan Template Blog Support Responsive" width="320" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ4I_5XgGC-jTl7ddVuAsa0yDVz6SILKAAQtiRR5voum5Q4Rnde2QChyqEU3bPoShp96i-0WxzgRKCYVtNEVf_W6LyKi1BpZfqPtDGWqFMVyPRxPoSD9qiiSGL8zsNxgyOsOttlVxBoknG/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Keunggulan Template Blog Support Responsive" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ4I_5XgGC-jTl7ddVuAsa0yDVz6SILKAAQtiRR5voum5Q4Rnde2QChyqEU3bPoShp96i-0WxzgRKCYVtNEVf_W6LyKi1BpZfqPtDGWqFMVyPRxPoSD9qiiSGL8zsNxgyOsOttlVxBoknG/s320/4.JPG" title="Keunggulan Template Blog Support Responsive" width="197" /></a></div><br />Sumber : http://www.linksukses.com/2013/04/keunggulan-template-blogger-responsive.html

Keunggulan Template Blog Support Responsive

Keunggulan Template Blog Support Responsive | Akhir ini, banyak designer template blog yang menggunakan media responsive. Contoh template...

Baca selengkapnya »