Membuat Widget Sidebar Melayang di Blogspot

<div style="text-align: justify;"> <span style="font-size: small;"><span style="font-weight: normal;"></span></span><br /></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIaqXoS-_DaFY1zjVP8uEXpsQxjTxXLxPenuj8iyoWrdv_VhZNY6IAgL26iUQ82v37fvMXoTlNKwH3QAtD86AsqVJs7Ae96mV_5T72IfWtmMpf8cUZpQHG60jtc-6F7pRUkds3Aclvol7I/s320/Membuat+Widget+Sidebar+Melayang+di+Blogspot.jpg" /></div> <div style="text-align: justify;"> <span style="font-size: small;"><span style="font-weight: normal;"> </span></span></div> <div style="text-align: justify;"> <span style="font-size: small;"><span style="font-weight: normal;"><a href="http://www.rhm-files.tk/" target="_blank">Membuat Widget Sidebar Melayang di Blogspot </a>- kali ini saya akan memberikan sebuah tutorial cara membuat widget melayang di blogger anda , langsung saja kita mulai : </span></span></div> <h3 style="text-align: justify;"> Cara Memasang Kode Sticky di blog</h3> <div style="text-align: justify;"> 1. login akun blogger anda.</div> <div style="text-align: justify;"> 2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode <span style="color: red;"><b>]]></b:skin></b></span></div> <blockquote class="tr_bq"> <div style="text-align: justify;"> .sticky {position:fixed;top:10px;/* jarak dari atas*/z-index: 100;max-width: 300px;} </div> </blockquote> <div style="text-align: justify;"> 3. Lalu Tambahkan kode CSS berikut tepat diats kode </body></div> <blockquote class="tr_bq"> <div style="text-align: justify;"> <script type='text/javascript'><br /> $(document).ready(function() {<br /> var stickyWidgetTop = $('<span style="color: red;">#HTML4</span>').offset().top; <br /> var stickyWidget = function(){<br /> var scrollTop = $(window).scrollTop();     <br /> if (scrollTop > stickyWidgetTop) { <br />     $('<span style="color: red;">#HTML4</span>').addClass('sticky');<br /> } else {<br />     $('<span style="color: red;">#HTML4</span>').removeClass('sticky'); <br /> }<br /> };<br /> stickyWidget();<br /> $(window).scroll(function() {<br />     stickyWidget();<br /> });<br /> });<br /> </script></div> </blockquote> <div style="text-align: justify;"> <div class="info"> Ganti semua kode <span style="color: red;">#HTML4</span> dengan <b>ID widget</b> yang akan dibuat sticky. </div> </div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> 4. Selesai dan lihat hasilnya.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Jika cara diatas tidak bisa berjalan, maka anda bisa menggunakan cara berikut ini untuk membuat widget sticky:</div> <div style="text-align: justify;"> </div> <h3 style="text-align: justify;"> Membuat Widget Sticky Pada Sidebar</h3> <div style="text-align: justify;"> 1. login akun blogger anda.</div> <div style="text-align: justify;"> 2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode <span style="color: red;"><b></head></b></span></div> <blockquote class="tr_bq"> <div style="text-align: justify;"> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><br /> <script type='text/javascript'><br /> $(function () {<br />     var offset = $("<span style="color: red;">#HTML4</span>").offset();<br />     var topPadding = 0;<br />     $(window).scroll(function () {<br />         if ($(window).scrollTop() &gt; offset.top) {<br />             $("<span style="color: red;">#HTML4</span>").stop().animate({<br />                 marginTop: $(window).scrollTop() - offset.top + topPadding<br />             })<br />         } else {<br />             $("<span style="color: red;">#HTML4</span>").stop().animate({<br />                 marginTop: 0<br />             })<br />         }<br />     })<br /> });<br /> </script></div> </blockquote> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> <div class="info"> Ganti <span style="color: red;">#HTML4 <span style="color: black;">dengan ID widget ayng ingin dibuat melayang (sticky).</span></span></div> </div> <br /> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> 3. Save template dan lihat hasilnya.</div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Bagaimana mudah bukan? sekarang anda bisa memulai <a href="http://www.rhm-files.tk/" target="_blank"><b>Membuat Widget Sidebar Melayang di Blogspot</b></a> dengan mudah. Semoga bermanfaat dan selamat mencoba.</div>

Tutorial Membuat Widget Random Post Bergerak Di Blog

<div class="separator" style="clear: both; text-align: left;"> <a href="http://www.rhm-files.tk/" target="_blank">Membuat Widget Random Post Bergerak</a>- Kali ini saya akan membagikan tutorial cara membuat widget ramdom post dengan gambar/tumbnails bergerak </div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVvZE5vDaR1P6QvRqLfSe2lH85vMkbo-WCYDfkFsTEwVn3Qg4_6c-tP696pjbcKTxWk5B50x6NrSpovHEuUbdDCn0wEGd5H6GUW4wUIRdevBBuSxyKCaGlplCIQIWYQcynsWblb8fY1H6/s1600/widget-random-post-bergerak.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirVvZE5vDaR1P6QvRqLfSe2lH85vMkbo-WCYDfkFsTEwVn3Qg4_6c-tP696pjbcKTxWk5B50x6NrSpovHEuUbdDCn0wEGd5H6GUW4wUIRdevBBuSxyKCaGlplCIQIWYQcynsWblb8fY1H6/s400/widget-random-post-bergerak.png" width="400" /></a></div> <br /> <div style="text-align: center;"> <b><a href="http://demo-seocips.blogspot.co.id/2015/10/random-post-bergerak.html" target="_blank">DEMO</a></b></div> <br /> Langsung saja kita ke tutorial cara membuat widget random post bergerak<br /> Langkah - langkah yg harus anda ikuti :<br /> 1. Di blogger<br /> 2. Menu  Tata letak > Tambah gadget / add gadget >> Html/Javascript<br /> 3. Masukan script di bawah ini<br /> <blockquote class="tr_bq"> <style type="text/css"><br /> /*widget*/<br /> #rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}<br /> #rp_plus_img ul{list-style-type:none;margin:0;padding:0;}<br /> #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}<br /> #rp_plus_img li{height:70px;padding:1px;list-style:none;}<br /> #rp_plus_img a{color:#3366ff;}<br /> #rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}<br /> #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}<br /> #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}<br /> </style><br /> <!-- start --><br />   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><br /> <script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script><br /> <script type="text/javascript"><br /> var speed = <span style="color: red;">400</span>;<br /> var pause = <span style="color: blue;"><span style="color: #134f5c;">3500</span></span>;<br /> $(document).ready(function(){<br /> rpnewsticker();<br /> interval = setInterval(rpnewsticker, pause);<br /> });<br /> </script><br /> <ul id="rp_plus_img"><br /> <script style="text/javascript"><br /> var numposts = <span style="color: #6aa84f;">5</span>;<br /> var numchars = 0;<br /> </script><br /> <script src=<span style="color: yellow;"></span>"http://<span style="color: cyan;"><span style="background-color: white;">www.rhm-files.tk</span></span>/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script><br /> </ul><br />   <!-- /end --></blockquote> 4. Perhatikan<br />     - Ganti text yg berwarna <span style="color: cyan;">biru muda</span> dengan url alamat blogger sobat<br />     - Warna <span style="color: blue;">biru</span> adalah waktu berhentinya setiap post sebelum berpindah lagi<br />     - Warna <span style="color: red;">merah</span> adalah kecepatan berpindah post<br />     - Warna <span style="color: lime;">hijau</span> adalah jumlah post yg akan di tampikan<br /> 5. Setelah selesai Save widget<br /> 6. liat apakah berhasil atau tidak<br /> <span style="color: red;"><br /></span>Nah <span style="color: red;"><span style="color: black;">selamat sekarang widget anda sudah terpasang widget random post bergerak semoga saja bisa menambah page view blog kamu</span> </span>

Widget Random Post Dengan Gambar/Tumbnails Di blog

<br /> <br /> <div class="separator" style="clear: both; text-align: left;"> <a href="http://www.rhm-files.tk/" target="_blank">Widget Random Post Dengan Gambar/Tumbnails Di blog </a>- Kali ini saya akan membagikan tutorial cara membuat widget ramdom post dengan gambar/tumbnails keren  </div> <div class="separator" style="clear: both; text-align: center;"> <br /></div> <div class="separator" style="clear: both; text-align: center;">  <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOglj0HAb1bNMZ9k2aDW0hxBX043jsLR1_Gu6h87X69SOtQhgeohAajtiilAaEuM5HYKkzXn4wTozC6YbJ7uE3e9lBOv0TloUzyzYC2Fh2RAdM43x0aOktw5pyGDP-l5-upMwezGuLAlTz/s1600/widget-random-post-dengan-gambar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOglj0HAb1bNMZ9k2aDW0hxBX043jsLR1_Gu6h87X69SOtQhgeohAajtiilAaEuM5HYKkzXn4wTozC6YbJ7uE3e9lBOv0TloUzyzYC2Fh2RAdM43x0aOktw5pyGDP-l5-upMwezGuLAlTz/s320/widget-random-post-dengan-gambar.png" width="320" /></a></div> <br /> <a href="http://demo-seocips.blogspot.co.id/2015/11/random-post-tanpa-gambar.html" target="_blank"><br /></a> <br /> <div style="text-align: center;"> <b><a href="http://demo-seocips.blogspot.co.id/2015/11/random-post-dengan-gambar-light-v1.html" target="_blank">DEMO</a></b></div> <br /> Langsung saja kita ke tutorial cara membuat widget random post tanpa gambar<br /> Langkah - langkah yg harus anda ikuti :<br /> 1. Di blogger<br /> 2. Menu  Tata letak > Tambah gadget / add gadget >> Html/Javascript<br /> 3. Masukan script di bawah ini<br /> <blockquote class="tr_bq"> < <style><br /> .rp-seocips{border:1px solid #ddd;padding: 10px;overflow:hidden;box-shadow:inset -2px 2px 3px #ddd;background:#f6f6f6;border:1px solid #ddd;}<br /> .rp-seocips2{border:1px solid #ddd;padding:5px 10px;overflow:hidden;box-shadow: -2px 2px 3px #ddd;background:#fff;border:1px solid #ddd;}<br /> #random-posts img{float:left;margin-right:10px;border:1px solid #ddd;background:#fff;width:65px;height:65px;padding:3px;border-radius:2px;}</style><br /> </style><br />   <div class="rp-seocips"><br />     <div class="rp-seocips2"><br />   <!-- start --><br /> <div id='random-posts'><br /> <script type='text/javaScript'><br /> var rdp_numposts=5;<br /> var rdp_snippet_length=60;<br /> var rdp_info='yes';<br /> var rdp_comment='Comment';<br /> var rdp_disable='';<br /> var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"<span style="color: blue;">http://www.seocips.com/</span>feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};<br /> </script><br /> <script type='text/javaScript'><br /> function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSboeKIWGzeuLePXvvwGa1MZd9CcuopyWdNYVQaS4JZO4wwAjJUOQXVnWj-9VCg5xKMC-P8ijM425wkPqLbdRNrXVS1BLtkLZgp9PToaPF6Bk420CmA-0mGlIwvU4OTjI_NSoHC6KOTY_m/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"<span style="color: blue;"><span style="color: cyan;">http://www.rhm-files.tk</span>/</span>feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};<br /> </script><br /> </div><br />   <!-- /end --><br /> </div></div> </blockquote> 4. Ganti text yg berwarna <span style="color: cyan;">biru</span> dengan url alamat blogger sobat<br /> 5. Save widget<br /> 6. liat apakah berhasil atau tidak<br /> <span style="color: red;"><br /></span>Nah <span style="color: red;"><span style="color: black;">selamat sekarang widget anda sudah terpasang widget random post semoga saja bisa menambah </span></span><br /> <span style="color: red;"><span style="color: black;">page view blog kamu</span> </span>

Cara membuat widget random post hanya judul tanpa gambar

<div class="separator" style="clear: both; text-align: center;"> </div> <a href="http://www.rhm-files.tk/" target="_blank">Cara membuat widget random post tanpa gambar di blog</a> - langsung aja gan baca tutorial cara buatnya di bawah<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjannYzpryzP35uUZlTzmP-koot59Pbdi5FI1U9xcUlU657mumtOlmAWt8tzBQ5qCyTSiwqd2jja4ApOSme5Sdz4Cm9jxev_vuYnpgwiEUGEKGy_-ppZ61J5i3XpOiuIpvei24OhQF9Z1RJ/s1600/widget-random-post-tanpa-gambar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjannYzpryzP35uUZlTzmP-koot59Pbdi5FI1U9xcUlU657mumtOlmAWt8tzBQ5qCyTSiwqd2jja4ApOSme5Sdz4Cm9jxev_vuYnpgwiEUGEKGy_-ppZ61J5i3XpOiuIpvei24OhQF9Z1RJ/s320/widget-random-post-tanpa-gambar.png" width="320" /></a></div> <br /> <br /> <div style="text-align: center;"> <b><a href="http://demo-seocips.blogspot.co.id/2015/11/random-post-tanpa-gambar.html" target="_blank">DEMO</a></b></div> <br /> Langsung saja kita ke tutorial cara membuat widget random post tanpa gambar<br /> Langkah - langkah yg harus anda ikuti :<br /> 1. Di blogger<br /> 2. Menu  Tata letak > Tambah gadget / add gadget >> Html/Javascript<br /> 3. Masukan script di bawah ini<br /> <blockquote class="tr_bq"> <script type="text/javascript"><br /> var randarray = new Array();var l=0;var flag; var numofpost=10;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script><script src="<span style="color: #0b5394;">http://www.rhm-files.tk/</span>feeds/posts/default?alt=json-in-script&amp;start-index=5&amp;max-results=300&amp;callback=randomposts" type="text/javascript"><br /> </script> </blockquote> 4. Ganti text yg berwarna <span style="color: cyan;">biru</span> dengan url alamat blogger sobat<br /> 5. Save widget<br /> 6. liat apakah berhasil atau tidak<br /> <span style="color: red;"><br /></span> <span style="color: red;">Notice :</span><br /> <span style="color: red;"><span style="color: black;">widget ini akan mengikuti style template yg anda gunakan</span> </span>

Cara Membuat 4 Kolom Iklan di Atas Posting Blog

<b>Rhm-Files - <a href="http://www.rhm-files.blogspot.co.id/" target="_blank">Cara Membuat 4 Kolom Iklan di Atas Posting Blog</a></b> Biasanya desainer template menyediakan 4 kolom iklan di sidebar blog, ukuran 125x125 Pixel. Jarang yang menyediakan <b>Empat Kolom Iklan</b> di atas Posting Blog. Contoh atau demonya bisa dilihat di <a href="http://cbbloggerlab.blogspot.com/" target="_blank">Sini</a>.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvA7s2WiBDURe_WfrMOWlKTzEij57Ym64D2I4rD2B0qTBKobOrWFvd-vgFLu9wJ3_l5LPRsPsyqP0WFdBUtW72C0r5S3P1kB-8Qf38T5IKUqLDCGSA5nyaxAjhkdYfWuyiCF7buk0qlYrF/s1600/Screenshot_73.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvA7s2WiBDURe_WfrMOWlKTzEij57Ym64D2I4rD2B0qTBKobOrWFvd-vgFLu9wJ3_l5LPRsPsyqP0WFdBUtW72C0r5S3P1kB-8Qf38T5IKUqLDCGSA5nyaxAjhkdYfWuyiCF7buk0qlYrF/s400/Screenshot_73.png" width="400" /></a></div> <br /> Kali ini Rhm-Files share Cara Membuat 4 Kolom Iklan di Atas Posting Blog, khususnya untuk iklan non-Google Adsense, atau sekadar mempercantik tampilan dan mengisinya dengan link blog lain.<br /> <br /> <b>Cara Membuat 4 Kolom Iklan di Atas Posting Blog</b><br /> 1. Klik "Layout" > "Add a Gadger" di atas widget "Blog Posts"<br /> <blockquote class="tr_bq"> <i><b>Jika widget di atas "Blog Posts" tidak tersedia, maka setting dulu di "Template" > "Edit HTML" > cari kode "showaddelement" > ganti "no" dengan "yes"</b></i></blockquote> 2. Pilih "HTML/JavaScript"<br /> <div> 3. Masukkan kode berikut ini di kolom "Content"</div> <blockquote class="tr_bq"> <div> <div align="left">     <br />     <table border="0"  cellpadding="4" cellspacing="4" width="620" bgcolor=""><tbody><br />     <tr><br /> <td><center><a href="LINK"><img border="none" alt="JUDUL" title="JUDUL" width="145" src="LINK GAMBAR" height="125"/></a></center></td><br /> <br /> <td><center><a href="LINK"><img border="none" alt="JUDUL" title="JUDUL" width="145" src="LINK GAMBAR" height="125"/></a></center></td><br /> <br /> <td><center><a href="LINK"><img border="none" alt="JUDUL" title="JUDUL" width="145" src="LINK GAMBAR" height="125"/></a></center></td><br /> <br /> <td><center><a href="LINK"><img border="none" alt="JUDUL" title="JUDUL" width="145" src="LINK GAMBAR" height="125"/></a></center></td><br />     </tr><br /> </tbody></table></div></div> </blockquote> <i>Catatan:</i><br /> <i>Ukuran gambar bisa disesuaikan dengan lebar "main area" blog Anda, lebar dan tingginya, di angka 145 dan 125.</i><br /> <br /> <b>4. Save!</b><br /> <br /> Jika ingin menampilkannya hanya di halaman dalam (Single Page/Single Posts), maka gunakan kode yang ada di <a href="http://www.rhm-files.blogspot.co.id/" target="_blank">Cara Mengatur Posisi Widget</a>. Good Luck!<br />

Cara Membuat Navigasi Menu di Atas Header Blog

<a href="http://www.rhm-files.tk/" target="_blank"><i><b>C</b>ara Membuat Navigasi Menu di Atas Header Blog</i></a><b> - TUJUAN</b> navigasi menu di atas header blog (<i>top navbar menu</i>) antara lain memanfaatkan ruang di atas header.<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6tC3vQjyjraSdEQwsJNqklgU5cXnuK8H3ilulHq96S8tNWSdYVdjsS07nSVLDuiNlEWl6L099SCD-hlKXFE_LaxK9bOZpMSHP51uHQxjF0eqACczHdtg7o-8vWs1Jl2Eq0nWj6X7_QwL/s1600/Screenshot_72.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6tC3vQjyjraSdEQwsJNqklgU5cXnuK8H3ilulHq96S8tNWSdYVdjsS07nSVLDuiNlEWl6L099SCD-hlKXFE_LaxK9bOZpMSHP51uHQxjF0eqACczHdtg7o-8vWs1Jl2Eq0nWj6X7_QwL/s320/Screenshot_72.png" width="320" /></a></div> <br /> Tampilan blog juga jadi lebih terkesan profesional, selain memudahkan pengunjung mengeksplorasi blog kita. (<b><a href="http://cbtheme.blogspot.com/" rel="nofollow" target="_blank">DEMO</a></b>)<br /> <br /> Langkahnya membuat top navigasi menu:<br /> 1. Template > Edit HTML<br /> 2. Cari/Temukan (CTRL+F) kode  <span style="color: red;">]]></b:skin> </span><br /> 3. Simpan kode berikut ini DI ATAS kode tersebut<br /> <blockquote class="tr_bq"> /*RF Top Menu*/<br /> #top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}<br /> #top-wrap{margin:auto;padding: 0;width: <span style="color: red;">950</span>px;background:#eeeded;}<br /> #navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}<br /> .topnav ul {list-style:none;margin:0;padding:0px; float:left;}<br /> .topnav li {float:left;margin:0;text-align:center;}<br /> .topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}<br /> .topnav li a {background:none; }<br /> .topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}<br /> #navbar-iframe {display: none !important;}</blockquote> <b>NB: </b><br /> <i>- Sesuaikan lebarnya (width:<span style="color: red;">950</span>px) dengan lebar header template Anda.</i><br /> <i>- Jika mau ganti background > background:#eeeded; (Lihat <a href="http://www.rhm-files.tk/" target="_blank">Kode Warna HTML</a>)</i><br /> <i>- Ganti warna huruf menu > color:#222;</i><br /> <br /> 4. Cari/Temukan (CTRL+F) kode <span style="color: red;"><body></span><br /> 5. Simpan kode berikut ini DI BAWAH-nya.<br /> <blockquote class="tr_bq"> <div id='top'><br /> <div id='top-wrap'><br /> <div class='topnav'><br /> <ul id='topnav'><br /> <li><a href='<span style="color: red;">http://cbtheme.blogspot.com</span>/' title='Top Menu'>Top Menu</a></li><br /> <li><a href='<span style="color: red;">http://cbtheme.blogspot.com</span>/' title='Contact'>Contact</a></li><br /> <li><a href='<span style="color: red;">http://cbtheme.blogspot.com</span>/' title='Disclaimer'>Disclaimer</a></li><br /> <li><a href='<span style="color: red;">http://cbtheme.blogspot.com</span>/' title='Privacy Policy'>Privacy Policy</a></li><br /> <li><a href='<span style="color: red;">http://cbtheme.blogspot.com</span>/' title='Facebook'>Facebook</a></li><br /> <li><a href='<span style="color: red;">http://cbtheme.blogspot.com</span>/' title='Twitter'>Twitter</a></li><br /> <li><a href='<span style="color: red;">http://cbtheme.blogspot.com</span>/' title='Google Plus'>Google Plus</a></li><br /> </ul><br /> </div><br /> </div><br /> <div style='clear: both;'/><br /> </div></blockquote> <i>NB: Ganti link </i><span style="color: red;">http://cbtheme.blogspot.com</span><i> dan nama menu-nya dengan versi Anda.</i><br /> <br /> <b>6. Save Template!</b><br /> <b><br /></b>Cara Membuat Navigasi Menu di Atas Header Blog sudah diujicoba dan BERHASIL diterapkan di <a href="http://www.rhm-files.tk/" target="_blank">CB Theme - Super Seo Blogger Template</a>.<br /> <br />

Cara Membuat Iklan Seperti Google Adsense

<div class="tr_bq" style="text-align: justify;"> <br /> <div class="separator" style="clear: both; text-align: center;"> <b><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWfit4ozTYObVK0HC4h8C-BeWiiAikj82OmvcWlejjoSWVKUb8fq0-jn5QBBtw-AgiAgxesA_BrsmxJ1yTHBw6UDgLUZaHo7mzit4b6y366dkty-DstItjBI-2OjzWII0ld5tYYlrDOiA2/s1600/Screenshot_71.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="285" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWfit4ozTYObVK0HC4h8C-BeWiiAikj82OmvcWlejjoSWVKUb8fq0-jn5QBBtw-AgiAgxesA_BrsmxJ1yTHBw6UDgLUZaHo7mzit4b6y366dkty-DstItjBI-2OjzWII0ld5tYYlrDOiA2/s320/Screenshot_71.png" width="320" /></a></b></div> <b> </b></div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> <br /> <a href="http://www.rhm-files.tk/" target="_blank"><b>Cara Membuat Iklan Seperti Google Adsense</b></a> – tentu anda sering menjumpai blog yang menggunakan iklan pada blognya yang mirip seperti google adsense. Untuk membuat iklan pada sebuah blog dengan menggunakan gaya yang layaknya seperti google adsense di blog bisa dilakukan dengan sangat mudah. Jika blog anda sudah pernah di daftarkan ke google adsense namun belum juga di approve maka sebagai gantinya ini bisa menjadi solusi yang efektif apabila anda ingin memasang iklan pada sidebar maupun bagian lainnya pada blog anda. Sangat mudah bukan, tanpa perlu mendaftarkan blog ke google adsense dahulu namun bisa memasang iklan di blog yang mirip seperti google adsense tanpa harus menunggu di approve terlebih dahulu. Inilah letak kreatif blogger dimana perjuangannya untuk mendaftarkan blog ke google adsense namun selalu gagal. Walaupun demikian masih juga memaksa untuk memasang iklan yang seperti google adsense walau tanpa mendapat bayaran dan hanya sekedar tiruan belaka. Oleh sebab itu saya sarankan jika ingin memasang iklan di blog tidak harus menggunakan google adsense jika terlalu lama menunggu approve, namun berikut adalah tutorial <b>Cara Membuat Iklan Seperti Google Adsense</b>.<br /> <br /> 1. Login ke akun blogger.<br /> 2. Copy kode dibawah ini.</div> <blockquote> <div style="font: 11px verdana; border: 1px solid blue; color: black; background-color:white; padding: 10px; width:250px; height:280px;"><br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"><br /> <strong> Faceblog Evolutions </strong></a><br/><br /> Tutorial Blog | SEO | HTML | CSS | jQuery <br/><br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"><br /> <br /> http://mas-andes.blogspot.com </a><br/><br/><br /> <br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"><br /> <strong> Faceblog Evolutions </strong></a><br/><br /> Tutorial Blog | SEO | HTML | CSS | jQuery <br/><br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"><br /> <br /> http://mas-andes.blogspot.com </a><br/><br/><br /> <br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"><br /> <strong> Faceblog Evolutions </strong></a><br/><br /> Tutorial Blog | SEO | HTML | CSS | jQuery <br/><br /> <a href="#" target="_blank" style="color:green;"><br /> <br /> http://mas-andes.blogspot.com </a><br/><br/><br /> <br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"><br /> <strong> Faceblog Evolutions </strong></a><br/><br /> Tutorial Blog | SEO | HTML | CSS | jQuery <br/><br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"><br /> http://mas-andes.blogspot.com </a><br/><br/><br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="text-decoration:underline; font: 12px verdana; color:blue;"><br /> <strong> Faceblog Evolutions </strong></a><br/><br /> Tutorial Blog | SEO | HTML | CSS | jQuery <br/><br /> <a href="http://mas-andes.blogspot.com" target="_blank" style="color:green;"><br /> <br /> http://mas-andes.blogspot.com </a><br/><br/><br /> <br /> <small style="float:right; color:blue;"><strong><a href="http://mas-andes.blogspot.com/2013/06/cara-membuat-iklan-seperti-google.html" style="color:blue;"><br /> Ads by </a>Faceblog Evolutions</strong></small><br /> </div></blockquote> 3. Kemudian klik<span style="color: red;"> Tata Letak</span> >> <span style="color: red;">Tambah Widget</span> >> <span style="color: red;">HTML/Javascript</span> lalu paste kode tersebut.<br /> 4. Save . . .  <br /> <h3> Jika ingin membuat iklan tersebut bisa melayang disisi kanan blog maka gunakan kode dibawah ini: </h3> <div style="text-align: justify;"> <blockquote class="tr_bq"> <style type="text/css"><br /> #melayang{<br /> position:fixed;<br /> top:10px;<br /> z-index:+1000;<br /> }<br /> html #melayang{position:relative;}<br /> .melayangcontent{<br /> float:right;<br /> border:2px solid #52e052;<br /> background:#ffffff;<br /> padding:10px;<br /> }<br /> </style><br /> <script type="text/javascript"><br /> function showHideGB(){<br /> var melayang = document.getElementById("melayang");<br /> var w = melayang.offsetWidth;<br /> melayang.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);<br /> melayang.opened = !melayang.opened;<br /> }<br /> function moveGB(x0, xf){<br /> var melayang = document.getElementById("melayang");<br /> var dx = Math.abs(x0-xf) > 10 ? 5 : 1;<br /> var dir = xf>x0 ? 1 : -1;<br /> var x = x0 + dx * dir;<br /> melayang.style.top = x.toString() + "px";<br /> if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}<br /> }<br /> </script><br /> <div id="melayang"><br /> <div class="melayangtab" onclick="showHideGB()"> </div><br /> <div class="melayangcontent"><br /> <div style="text-align:right"><br /> <a href="javascript:showHideGB()"><br /> .:[Close][Klik 2x]:.<br /> </a><br /> </div><br /> <br /> <span style="color: red;"><b>PASTE KODE YANG TADI TARUH DISINI</b></span><br /> <br /> <script type="text/javascript"><br /> var melayang = document.getElementById("melayang");<br /> melayang.style.center = (30-melayang.offsetWidth).toString() + "px";<br /> </script></center></div></div></blockquote> </div>

Cara Membuat Efek Shadow / Bayangan Pada Pinggir Blog

<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsq5p30UAbmsFnQxGK8qmqYkMr2OzK7vRKwkGaZYnenQPX9mlYd0Wmlp7tC7Ei29RAB04Zqkvjg-6Nvrc543LDovskgnVRuDqUN92nkNiBs_4zbumfQJWheBaCy2xi05lM6C8DQbCeA_cM/s1600/Screenshot_68.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="231" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsq5p30UAbmsFnQxGK8qmqYkMr2OzK7vRKwkGaZYnenQPX9mlYd0Wmlp7tC7Ei29RAB04Zqkvjg-6Nvrc543LDovskgnVRuDqUN92nkNiBs_4zbumfQJWheBaCy2xi05lM6C8DQbCeA_cM/s320/Screenshot_68.png" width="320" /></a></div> <br /> Posting lagi setelah hampir 1 bulan gak update postingan karena terlalu banyak tugas yang harus di selesaikan  , supaya tidak berlama-lama saya akan berbagi tentang inti dari postingan ini yang saya beri judul <a href="http://www.rhm-files.tk/" target="_blank"><i><b>Cara Membuat Efek Shadow / Bayangan Pada Pinggir Blog</b></i></a> yaitu kita akan memberi efek bayangan pada tepi blog dengan  cara sebagai berikut :<br /> <br /> <br /> <br /> 1. <i><b>Login</b></i> dulu ke Blogger<br /> 2. Di Dasbor Blog pilih <i><b>Template</b></i><br /> 3. Selanjut nya klik <i><b>Edit HTML</b></i><br /> 4. Cari salah kode yang mirip dengan kode di bawah ini di HTML Template blog sobat<br /> <i><b>content-outer</b></i> atau <i><b>content-wrapper</b></i><br /> 5. pasang kode di bawah ini setelah atau di bawah kode <i><b>content-outer</b></i> atau <i><b>content-wrapper</b></i><br /> <br /> <blockquote class="tr_bq">     border:<span style="color: red;"><i><b>2px</b></i> </span>solid <span style="color: red;"><i><b>#0000ff</b></i></span>;<br />     border-color:#9ecaed;<br />     box-shadow:0 0 <span style="color: red;"><i><b>10px</b></i></span> <span style="color: red;"><i><b>#666</b></i></span>} </blockquote> Keterangan untuk merubah warna dan ukuran bayangan tepi blog :<br /> <ul> <li><span style="color: red;"><i><b>2px</b></i></span> = ketebalan Garis tepi blog.</li> </ul> <ul> <li><i><b><span style="color: red;">#0000ff</span></b></i> = warna Garis pinggir.</li> </ul> <ul> <li><span style="color: red;"><i><b>10px </b></i></span>= ketebalan efek shadow/bayangan blog.</li> </ul> <ul> <li><span style="color: red;"><i><b>#666</b></i></span> = warna shadow/bayangan.</li> </ul> 6. Terakhir <i><b>Simpan </b></i>kode untuk melihat hasil nya di blog .<br /> <br />  Semoga Bermanfaat <i><b>Sekian Dan Trimakasih . . . !</b></i><a href="http://blog-rangga.blogspot.com/2013/01/cara-membuat-efek-shadowbayangan-pada.html" target="_blank"><i><b></b></i></a>

Cara Membuat Gadget Label Menjadi Dua Kolom

<div style="text-align: justify;"> Apakah Anda sudah <a href="http://www.rhm-files.tk/" target="_blank">memasang gadget atau widget label tipe daftar atau list di <i>sidebar</i></a> blog Anda? Jika sudah, apakah gadget label tipe daftar tersebut masih menyisakan ruang kosong pada bagian kanannya sehingga memungkinkan bila dijadikan 2 kolom? Bila iya, jadikan saja gadget label daftar Anda menjadi dua kolom agar menghemat tempat pada <i>sidebar</i> blog Anda.</div> <div style="text-align: justify;"> </div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAFkG85ybsnkHz-kRjmVQgAbEzCWWfX7B2qFeV0R2767lj5CZXU7oobsLXUR74cAqn70d-SFWQOP5bS28dz4QEaP6Gu4BdbVQPCUOUmCK9LylMfLQuKwanFV_J6Fdr6lFli5fF_9EeOMp/s1600/Label+Dua+Kolom.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAFkG85ybsnkHz-kRjmVQgAbEzCWWfX7B2qFeV0R2767lj5CZXU7oobsLXUR74cAqn70d-SFWQOP5bS28dz4QEaP6Gu4BdbVQPCUOUmCK9LylMfLQuKwanFV_J6Fdr6lFli5fF_9EeOMp/s320/Label+Dua+Kolom.jpg" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <div style="text-align: justify;"> <br /> Nah, untuk membuat gadget label daftar menjadi 2 kolom, silakan ikuti langkah-langkahnya di bawah ini. Namun, sebelumnya pastikan Anda telah memasang gadget label jenis daftar di <i>sidebar</i> blog Anda.</div> <br /> <div style="text-align: justify;"> 1. Masuk ke akun <b>Blogger</b> Anda.</div> <div style="text-align: justify;"> 2. Klik Rancangan > Edit HTML.</div> <div style="text-align: justify;"> 3. Klik <b style="color: blue;">Download Template Lengkap</b> utnuk mengantisipasi kalau nanti terjadi kesalahan dalam pengeditan.</div> <div style="text-align: justify;"> 4. Cari kode <span style="color: red;">]]></b:skin></span> (Gunakan Ctrl + F untuk mempercepat pencarian)<br /> 5. <i>Copy</i> kode di bawah ini dan <i>paste</i> di atas kode tersebut.</div> <blockquote class="tr_bq"> <div style="text-align: justify;"> <div style="color: blue;"> #Label1 li {</div> <div style="color: blue;"> float:left;</div> <div style="color: blue;"> width:<span style="color: red;">50</span>%;</div> <div style="color: blue;"> }</div> </div> </blockquote> <div style="text-align: justify;"> 6. Klik tombol <b style="color: blue;">PRATINJAU</b>. Bila gadget label belum berhasil menjadi 2 kolom, silakan ganti angka <span style="color: red;">50</span> dengan angka yang lebih kecil lagi, misalnya 45, lalu klik tombol <b style="color: blue;">PRATINJAU</b>. Jika belum berhasil juga, silakan ubah lagi angka tersebut dengan angka yang lebih kecil sampai label terbentuk menjadi dua kolom.</div> <br /> <div style="text-align: justify;"> 7. Bila label sudah berhasil menjadi 2 kolom, klik tombol <b style="color: orange;">SIMPAN TEMPLATE</b>.</div>

Membuat Teks Descripsi Pada Gambar Hover

<div style="text-align: justify;"> <a href="http://www.rhm-files.tk/" target="_blank"><b>Membuat Teks Descripsi Pada Gambar Hover</b></a> - Membuat atau menyisipkan gambar tidak akan pernah lepas dari sebuah artikel pada blog, karena dengan adanya gambar dapat membantu menerangkan apa makna descripsi atau tujuan tulisan tersebut, namun gambar hanyalah sebuah hiasan semata dalam sebuah artikel, karena sebagus apapun gambar yang Anda sisipkan tidak akan berpengaruh terhadap index google.<br /> Membuat gambar disebagian teks artikel merupakan trik SEO optimasi, namun bukan fisik gambar yang perlu diperhatikan, tetapi lebih kepada <b><a href="http://www.rhm-files.tk/" target="_blank" title="Pemasangan Title Tag Dan Atribut Pada Link URL">Pemasangan Title Tag Dan Atribut Pada Link URL</a></b> yang Anda tuliskan, nah..!! title teks dan atribut pada gambar inilah yang di index oleh google sebagai pengganti teks apabila gambar gagal termuat saat loading blog.<br /> <br /> Karena gambar hanya merupakan hiasan pada teks tulisan, alangkah indahnya gambar tersebut jika Anda berikan sedikit sentuhan efek. Tidak jauh berbeda pada artikel sebelumnya tentang <b><a href="http://www.rhm-files.tk/2016/07/membuat-efek-kaca-pembesar-pada-gambar.html" target="_blank" title="Efek Sliding Pada Gambar Postingan">Efek kaca pembesar pada Gambar Postingan</a></b>, Kesempatan kali ini saya akan memberikan <b>9 Koleksi Membuat Teks Descripsi Pada Gambar Hover</b> yang terspesial dan khusus buat semua sahabat pecinta <b>SAHABAT Rhm-Files.tk</b>. Sebelum ketahap penyusunan kode, bagaimana jika Anda pilah-pilih dahulu efek gambar mana yang sesuai dihati pada tombol <b><span style="color: blue;">DEMO SHOW</span></b> dibawah ini<br /> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYbnviB13oWLy4RDpwGbTBYZtx-jMT-p-0hY2q5x8pqgrh8ba8fAQugdAdHGu6P2HER4aTmoFb-tFPgziUEup7cXlV8tZOMXgefJibR1wv3LtI-0CtxjoAY0nbh4TUA2OpTPXH6JuIh-cj/s1600/sahabatblogger77.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYbnviB13oWLy4RDpwGbTBYZtx-jMT-p-0hY2q5x8pqgrh8ba8fAQugdAdHGu6P2HER4aTmoFb-tFPgziUEup7cXlV8tZOMXgefJibR1wv3LtI-0CtxjoAY0nbh4TUA2OpTPXH6JuIh-cj/s1600/sahabatblogger77.png" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <div style="text-align: center;"> <br /></div> <br /> <center> <a class="murub" href="http://demoshow77.blogspot.com/2014/04/descripsi-text-pada-gambar-hover.html" target="_blank" title="Lihat Hasil Tampilan"><span style="-webkit-border-radius: 5px; background: black; border-radius: 5px; font: 20px Cosmic san Ms; overflow: auto; padding: 15px; width: 110px;">DEMO SHOW</span></a></center> <br /> <br /> Bagaimana, sudah ada pilihan belum.? hehe.. kita lanjut ketahap selanjutnya. Kita buat rangka elemen HTML-nya terlebih dahulu seperti ini<br /> <blockquote class="tr_bq"> <pre rel="HTML"><div class="view view-fourth"> <img src="<span style="color: orange;">...URL-Gambar (1).jpg</span>" />    <div class="mask">        <h2><span style="color: orange;">Sahabat blogger 77</span></h2> ...*/ <span style="color: orange;">Descripsi teks Anda tulis disini</span> ...*/    <a class="info" href="#"><span style="color: orange;">Read More</span></a>    </div> </div> <div class="view view-fourth"> <img src="<span style="color: orange;">...URL-Gambar (2).jpg</span>" />     <div class="mask">         <h2><span style="color: orange;">Sahabat blogger 77</span></h2> *// <span style="color: orange;">Teruskan jika Ingin Menambahkan lebih banyak gambar lagi</span> *//     </div> </div></pre> </blockquote> </div> Untuk memenuhi permintaan elemen class pada HTML diatas, kita buat pembangun selector CSS seperti ini <br /> <div style="text-align: justify;"> <blockquote class="tr_bq"> <pre rel="CSS">.view-fourth img {    transition: all 0.4s ease-in-out 0.2s;    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";    filter: alpha(opacity=100);    opacity: 1;} .view-fourth .mask {    background-color: rgba(0,0,0,0.8);    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    transform: scale(0) rotate(-180deg);    transition: all 0.4s ease-in;    border-radius: 0px;} .view-fourth h2 {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    border-bottom: 1px solid rgba(0, 0, 0, 0.3);    background: transparent;    margin: 20px 40px 0px 40px;    transition: all 0.5s ease-in-out;} .view-fourth p {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    transition: all 0.5s ease-in-out;} .view-fourth a.info {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    transition: all 0.5s ease-in-out;} .view-fourth:hover .mask {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";    filter: alpha(opacity=100);    opacity: 1;    transform: scale(1) rotate(0deg);    transition-delay: 0.2s;} .view-fourth:hover img {    transform: scale(0);    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";    filter: alpha(opacity=0);    opacity: 0;    transition-delay: 0s;} .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info {    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";    filter: alpha(opacity=100);    opacity: 1;    transition-delay: 0.5s;}</pre> </blockquote> </div> Dan sampai disini, beres semua pekerjaan rangkaian kode, sebagai tambahan mungkin Anda ingin membuat efeknya bekerja pada beberapa gambar yang Anda tambahkan, misalnya Anda ingin menambahkan 3-4 gambar, agar muat gambar responsive gunakan kode CSS-layout berikut <br /> <div style="text-align: justify;"> </div> <blockquote class="tr_bq"> <pre rel="CSS">.view {    width: 300px;    height: 200px;    margin: 10px;    float: left;    border: 10px solid #fff;    overflow: hidden;    position: relative;    text-align: center;    box-shadow: 1px 1px 2px #e6e6e6;    cursor: default;    background: #fff url(<span style="color: orange;">..Gambar-background.jpg</span>) no-repeat center center;} .view .mask,.view .content {    width: 300px;    height: 200px;    position: absolute;    overflow: hidden;    top: 0;    left: 0;} .view img {display: block;position: relative;} .view h2 {    text-transform: uppercase;    color: #fff;    text-align: center;    position: relative;    font-size: 17px;    padding: 10px;    background: rgba(0, 0, 0, 0.8);    margin: 20px 0 0 0;    border-bottom: 2px solid orange;} .view p {    font-family: Arial, serif;    font-style: italic;    font-size: 12px;    position: relative;    color: #fff;    padding: 10px 20px 20px;    text-align: center;} .view a.info {    display: inline-block;    text-decoration: none;    padding: 7px 14px;    background: #222;    color: #fff;    text-transform: uppercase;    box-shadow: 0 0 1px #000;} .view a.info: hover {background-color: #222;box-shadow: 0 0 5px #000;}</pre> </blockquote> <pre rel="CSS"></pre>

Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions

<div style="text-align: justify;"> <a href="http://www.rhm-files.tk/" target="_blank"><b>Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions</b></a> – Efek gambar menggunakan CSS3 transitions ini adalah menunjukkan bagaimana untuk menambahkan panel deskripsi animasi gambar yang dapat bergesar secara otomatis dapat terbuka ketika mouse diarahkan ke gambar. Dengan menambahkan deskripsi singkat atau bisa juga dengan memasukan link didalamnya maka panel deskripsi gambar ini dapat memberikan efek zoom sekaligus hover deskripsi yang muncul secara halus bergeser secara otomatis.</div> <a href="https://www.blogger.com/null" name="more"></a><br /> <div style="text-align: justify;"> Panel deskripsi dapat dengan mudah diarahkan saat bergesar sesuai dengan keinginan atau yang sesuai tata letak gambar. Terdapat empat arah pilihan untuk membuat panel deskripsi gambar tersebut bergeser, antara lain gambar dapat bergeser ke arah atas, bawah, kanan, dan kiri. Permulaan saat hover animasi deskripsi gambar saat bergeser tertunda 0,5 detik setiap kali menggunakan properti transisi-delay, sehingga efek ini terjadi setelah dari gambar memunculkan efek bayangan menggunakan CSS3 yang ditambahkan ke gambar untuk menciptakan efek gambar yang mengangkat atau sedikit memunculkan efek zoom. Hasilnya yang akan terjadi adalah gambar keren dengan panel deskripsi bergeser yang menggunakan tidak lebih dari HTML / CSS untuk membuat efek. Untuk pemasangannya kedalam blog maka berikut adalah penyajiannya tentang cara membuat <b>Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions</b>:<br /> </div> <div style="text-align: justify;"> </div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwP2eXBNMuO8yw913_w52Ms3OtEFD33TpNrNCkdrS2wJvPrGcofCQyR4IDBP1O60QtpE7zEv6SyzVG-xOr1qMrza780NKAQgzdxdWvoCvoi5adUz2H4ln5QwlurV0A8blOMufGj1_grHyK/s1600/css3-transisi.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwP2eXBNMuO8yw913_w52Ms3OtEFD33TpNrNCkdrS2wJvPrGcofCQyR4IDBP1O60QtpE7zEv6SyzVG-xOr1qMrza780NKAQgzdxdWvoCvoi5adUz2H4ln5QwlurV0A8blOMufGj1_grHyK/s1600/css3-transisi.jpg" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <br /> 1. Login ke akun blogger.<br /> 2. Klik Template > Edit HTML > Lanjutkan > Centang Expands Widget Template.<br /> 3. Cari kode <b>]]></b:skin></b> gunakan CTRL+F untuk mempermudah pencarian.<br /> 4. Taruh kode berikut ini tepat diatas kode <b>]]></b:skin></b><br /> <blockquote class="tr_bq"> <span style="background-color: #444444;">/* Sliding Description Panel For Images */<br /><br />.imagepluscontainer {<br /> /* main image container */<br />    position: relative;<br />    z-index: 1;<br />    font-family: verdana;<br />    font-size: 13px;<br />}<br /><br />.imagepluscontainer img {<br /> /* CSS for image within container */<br />    position: relative;<br />    z-index: 2;<br />    -moz-transition: all 0.5s ease;<br /> /* Enable CSS3 transition on all props */<br />    -webkit-transition: all 0.5s ease-in-out;<br />    -o-transition: all 0.5s ease-in-out;<br />    -ms-transition: all 0.5s ease-in-out;<br />    transition: all 0.5s ease-in-out;<br />}<br /><br />.imagepluscontainer:hover img {<br /> /* CSS for image when mouse hovers over main container */<br />    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);<br />    -moz-transform: scale(1.05, 1.05);<br />    -webkit-transform: scale(1.05, 1.05);<br />    -ms-transform: scale(1.05, 1.05);<br />    -o-transform: scale(1.05, 1.05);<br />    transform: scale(1.05, 1.05);<br />}<br /><br />.imagepluscontainer div.desc {<br /> /* CSS for desc div of each image. */<br />    position: absolute;<br />    width: 90%;<br />    z-index: 1;<br /> /* Set z-index to that less than image's, so it's hidden beneath it */<br />    bottom: 0;<br /> /* Default position of desc div is bottom of container, setting it up to slide down */<br />    left: 5px;<br />    padding: 8px;<br />    background: rgba(0, 0, 0, 0.8);<br /> /* black bg with 80% opacity */<br />    color: white;<br />    -moz-border-radius: 0 0 8px 8px;<br /> /* CSS3 rounded borders */<br />    -webkit-border-radius: 0 0 8px 8px;<br />    border-radius: 0 0 8px 8px;<br />    opacity: 0;<br /> /* Set initial opacity to 0 */<br />    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br /> /* CSS3 shadows */<br />    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br />    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);<br />    -moz-transition: all 0.5s ease 0.5s;<br /> /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */<br />    -webkit-transition: all 0.5s ease 0.5s;<br />    -o-transition: all 0.5s ease 0.5s;<br />    -ms-transition: all 0.5s ease 0.5s;<br />    transition: all 0.5s ease 0.5s;<br />}<br /><br />.imagepluscontainer div.desc a {<br />    color: white;<br />}<br /><br />.imagepluscontainer:hover div.desc {<br /> /* CSS for desc div when mouse hovers over main container */<br />    -moz-transform: translate(0, 100%);<br />    -webkit-transform: translate(0, 100%);<br />    -ms-transform: translate(0, 100%);<br />    -o-transform: translate(0, 100%);<br />    transform: translate(0, 100%);<br />    opacity: 1;<br /> /* Reveal desc DIV fully */<br />}<br /><br />/* Below CSS when applied to desc DIV slides the desc div from the right edge of the image */<br /><br />.imagepluscontainer div.rightslide {<br />    width: 150px;<br /> /* reset from default */<br />    top: 15px;<br />    right: 0;<br />    left: auto;<br />  /* reset from default */<br />    bottom: auto;<br />  /* reset from default */<br />    padding-left: 15px;<br />    -moz-border-radius: 0 8px 8px 0;<br />    -webkit-border-radius: 0 8px 8px 0;<br />    border-radius: 0 8px 8px 0;<br />}<br /><br />.imagepluscontainer:hover div.rightslide {<br />    -moz-transform: translate(100%, 0);<br />    -webkit-transform: translate(100%, 0);<br />    -ms-transform: translate(100%, 0);<br />    -o-transform: translate(100%, 0);<br />    transform: translate(100%, 0);<br />}<br /><br />/* Below CSS when applied to desc DIV slides the desc div from the left edge of the image */<br /><br />.imagepluscontainer div.leftslide {<br />    width: 150px;<br />  /* reset from default */<br />    top: 15px;<br />    left: 0;<br />    bottom: auto;<br />  /* reset from default */<br />    padding-left: 15px;<br />    -moz-border-radius: 8px 0 0 8px;<br />    -webkit-border-radius: 8px 0 0 8px;<br />    border-radius: 8px 0 0 8px;<br />}<br /><br />.imagepluscontainer:hover div.leftslide {<br />    -moz-transform: translate(-100%, 0);<br />    -webkit-transform: translate(-100%, 0);<br />    -ms-transform: translate(-100%, 0);<br />    -o-transform: translate(-100%, 0);<br />    transform: translate(-100%, 0);<br />}<br /><br />/* Below CSS when applied to desc DIV slides the desc div from the top edge of the image */<br /><br />.imagepluscontainer div.upslide {<br />    top: 0;<br />    bottom: auto;<br />  /* reset from default */<br />    padding-bottom: 10px;<br />    -moz-border-radius: 8px 8px 0 0;<br />    -webkit-border-radius: 8px 8px 0 0;<br />    border-radius: 8px 8px 0 0;<br />}<br /><br />.imagepluscontainer:hover div.upslide {<br />    -moz-transform: translate(0, -100%);<br />    -webkit-transform: translate(0, -100%);<br />    -ms-transform: translate(0, -100%);<br />    -o-transform: translate(0, -100%);<br />    transform: translate(0, -100%);<br />}<br />/* Sliding Description Panel For Images */</span> </blockquote> <div style="text-align: center;"> <b><a href="http://demofaceblog.blogspot.com/2013/04/test.html" target="_blank"> DEMO</a></b></div> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> 5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.</div> <div style="text-align: justify;"> </div> <blockquote class="tr_bq"> <span style="background-color: #444444;"><div class="imagepluscontainer" style="width:263px;"></span><br /> <span style="background-color: #444444;"><img src="<span style="color: blue;">URL GAMBAR</span>"></span><br /> <span style="background-color: #444444;"><div class="desc <span style="color: red;">downslide</span>"></span><br /> <span style="background-color: #444444;"><span style="color: purple;">DESKRIPSI GAMBAR</span></span><br /> <span style="background-color: #444444;"></div></span><br /> <span style="background-color: #444444;"></div> </span></blockquote> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> <b>Keterangan</b>:</div> <ul> <li style="text-align: justify;">Kode berwarna <span style="color: blue;">biru </span>adalah URL Gambar, silahkan ganti sesuai keinginan.</li> <li style="text-align: justify;">Kode berwarna <span style="color: red;">merah </span>adalah arah panel deskripsi bergeser, silahkan sesuaikan dengan menggantinya menjadi: <b>rightslide</b>, <b>leftslide</b>, atau <b>upslide</b>.</li> <li style="text-align: justify;">Kode berwarna <span style="color: purple;">ungu </span>adalah teks deskripsi gambar, silahkan ganti sesuai keinginan.</li> </ul> <div style="text-align: justify;"> Sebagai contoh seperti dibawah ini:</div> <div style="text-align: justify;"> </div> <blockquote class="tr_bq"> <div style="text-align: justify;"> <span style="background-color: #444444;"><div class="imagepluscontainer" style="width:263px;"></span><br /> <span style="background-color: #444444;"><img src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyVdS65r5qR3TX27VyPS_ELgRCfYd9ZXjJQ2K5mgoKVTXiQMz32j2QhiikHsKcrzKZ3uPCbI93w7f6b7J3GXGFFvfjRUqIHR7pP8UcrCvAkMwDbHLiNYsEiJU8D11DgZgeEbsI8o7Ml30X/s1600/elisha_cuthbert_face_wallpaper-2013-02.jpg</span>"></span><br /> <span style="background-color: #444444;"><div class="desc <span style="color: red;">downslide</span>"></span><br /> <span style="background-color: #444444;"><span style="color: purple;"><a href=”http://mas-andes.blogspot.com/2013/03/jquery-widget-recent-post-automatic.html” target=”_blank”><b>Jquery Widget Recent Post Automatic Slider</b></a> – ini adalah widget yang berguna untuk menampilkan artikel terbaru menggunakan mode slide show</span></span><br /> <span style="background-color: #444444;"></div></span><br /> <span style="background-color: #444444;"></div> </span></div> </blockquote> <div style="text-align: justify;"> </div> <div style="text-align: justify;"> Dari kode tersebut maka hasilnya akan tampak sama persis seperti pada gambar dibagian atas atau yang ada di halaman demo.</div>

Membuat Efek Kaca Pembesar Pada Gambar

<a href="http://www.rhm-files.tk/" target="_blank">Membuat Efek Kaca Pembesar Pada Gambar</a><br /> Tutorial yang mau saya bagikan kali ini adalah tentang cara membuat efek kaca pembesar (lup) pada gambar.efek ini akan mucul diatas gambar mengikuti gerakan mouse dan pembesarannya juga dapat disesuaikan (zoom in dan zoom out ) dengan menggunakan roda pada mouse.<br /> Untuk lebih jelas silahkan arahkan mouse  pada gambar dibawah ini :<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: left;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk4zVaRo29gI5HEYBEKBEZO35g8ngFhmJpSYxcMdBQGrg_teoYBAPH6cJs721y2wTBzVs7aBmYKPhuHcbMNOEHMMVD7QQwlADP0RxzGWa2G4N3sfjO02qc6OXkIZNJ94wnHAwkg2kjC06f/s1600/efek-zoom-kaca-pembesar-pada-gambar-blog.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk4zVaRo29gI5HEYBEKBEZO35g8ngFhmJpSYxcMdBQGrg_teoYBAPH6cJs721y2wTBzVs7aBmYKPhuHcbMNOEHMMVD7QQwlADP0RxzGWa2G4N3sfjO02qc6OXkIZNJ94wnHAwkg2kjC06f/s200/efek-zoom-kaca-pembesar-pada-gambar-blog.png" width="158" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <h3> berikut langkah pebuatannya :</h3> 1. Masuk Blogger >  Template > Edit HTML<br /> 2. Cari kode <span style="color: #0b5394;"></head></span> lalu copas kode jquery di bawah ini di atas kode <span style="color: #0b5394;"></head></span><span style="color: #0b5394;"></span><br /> <blockquote class="tr_bq"> <script src="<span style="color: red;">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript</span>"></script> </blockquote> Bila kode diatas sudah ada pada template sobat maka lewati saja langkah diatas.<br /> 3. Selanjutnya silahkan copas kode dibawah ini diatas kode </head><br /> <blockquote class="tr_bq"> <script src="https://abitalita.googlecode.com/files/zoomlup.js" type="text/javascript"></script><br /> <script type="text/javascript"><br /> jQuery(document).ready(function($){<br />  $('#pembesargambar').perbesaran({<br />  sorotanu: 2,<br />  kisaranu: [2,10],<br />  anubesar: null,<br />  pembesaranu: [140,140]<br /> })<br /> })<br /> </script> </blockquote> 3. Kemudian Simpan Template<br /> 4. Untuk menampilkan efek kaca pembasar sobat bisa gunakan kode berikut ini :<br /> <blockquote class="tr_bq"> <img id="pembesargambar" src="<span style="color: red;"><span style="color: #990000;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibfSHR3byJ03DtxadtossyiiClkdwY0JlnjRQBJcgxGmkUqSglyxmRkcTiHfyyjCFD3aiN7AneOtJraLS3_lv7puqTOe00TWC1jXgYFhYrGM0OXK8CW36hXC5qh1eCxZnqEU7iDxnuUISG/s1600/DSC_0720.JPG</span></span>" style="height: <span style="color: blue;">150</span>px; width: <span style="color: blue;">500</span>px;" /> </blockquote> Keterangan :<br /> - Ganti teks warna merah dengan URL gambar sobat.<br /> - Sesuaikan tinggi dan lebar gambar dengan merubah teks warna biru.<br /> <br /> Demikian cara membuat efek kaca pembesar pada gambar,semoga bermanfaat.Salam...

Cara Membuat Efek Animasi Hover 3D Pada Gambar Di Blogger

<a href="http://www.rhm-files.tk/" target="_blank">Cara Membuat Efek Animasi Hover 3D Pada Gambar Di Blogger</a> - Terima Kasih yah sudah berkunjung di blog <a href="http://www.rhm-files.tk/" target="_blank">RHM-FILES.TK</a> | Anda sedang membaca konten berjudul : <a href="http://www.rhm-files.tk/" target="_blank">Cara Membuat Efek Animasi Hover 3D Pada Gambar Di Blogger</a><br /> <br /> Efek hover image bisa membantu anda membuat tampilan blog lebih menarik untuk contoh liat gambar dibawah jangan gambar disamping ini hehehe....!! Hover image efek kali ini membuat gambar pada blog anda langsung tiduran/bangun ketika cursor berada pada gambar Keren bukan ? Kerenlah Oke langsung saja kita bahas cara membuatnya dan contoh gambar-nya :<br /> Contoh Hover Image 3D :<br /> <style> .seocipstmb { width:400px; height:300px; margin:70px auto; perspective:1000px; } .seocipstmb a { display:block; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsbDMhsmPVmLTMdpQbBcysca8Dkavg0pfvR_YmTkGhYUMoZ1oi2ynUTISMKqM5LFVjb3cP_ntITULmScfMDcvPxyqjF_qMtB5XcCJGCv2r2Y1KU8cxVBHhReQeoOy8wVjr7tnY5I901jhL/s420/seocips-image-hover-effect.png"); background-size:0,cover; transform-style:preserve-3d; transition:all 0.5s; } .seocipstmb:hover a { transform:rotateX(80deg); transform-origin:bottom; } .seocipstmb a:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:36px; background:inherit; background-size:cover,cover; background-position:bottom; transform:rotateX(90deg); transform-origin:bottom; } .seocipstmb a span { color:white; text-transform:uppercase; position:absolute; top:100%; left:0; width:100%; font:bold 12px/36px Montserrat; text-align:center; transform:rotateX(-89.99deg); transform-origin:top; z-index:1; } .seocipstmb a:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); box-shadow:0 0 100px 50px rgba(0,0,0,0.5); transition:all 0.5s; opacity:0.15; transform:rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin:bottom; } .seocipstmb:hover a:before { opacity:1; box-shadow:0 0 25px 25px rgba(0,0,0,0.5); transform:rotateX(0) translateZ(-60px) scale(0.85); } </style> <br /> <div class="seocipstmb"> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lRtRE_oEieg8mdLiQ7VMWGJlAXmJGL7W6lW7KKpebIpiPfMVvEsUhqDOM5tCvf9gbDBtylHvk-10sSdKPRoG_bmfMUep8zQri5UEfuJNBSwpKBSQaCgUZ0tR_-UcFaB_roW0KLA82O7D/s1600/Screenshot_67.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lRtRE_oEieg8mdLiQ7VMWGJlAXmJGL7W6lW7KKpebIpiPfMVvEsUhqDOM5tCvf9gbDBtylHvk-10sSdKPRoG_bmfMUep8zQri5UEfuJNBSwpKBSQaCgUZ0tR_-UcFaB_roW0KLA82O7D/s320/Screenshot_67.png" width="320" /></a></div> <br /></div> Langsung Caranya :<br /> 1. LANGSUNG SAJA COPY KODE DIDALAM KOLOM !!<br /> <br /> <textarea cols="13" rows="1" style="height: 87px; width: 436px;"><style> .seocipstmb { width:400px; height:300px; margin:70px auto; perspective:1000px; } .seocipstmb a { display:block; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsbDMhsmPVmLTMdpQbBcysca8Dkavg0pfvR_YmTkGhYUMoZ1oi2ynUTISMKqM5LFVjb3cP_ntITULmScfMDcvPxyqjF_qMtB5XcCJGCv2r2Y1KU8cxVBHhReQeoOy8wVjr7tnY5I901jhL/s420/seocips-image-hover-effect.png"); background-size:0,cover; transform-style:preserve-3d; transition:all 0.5s; } .seocipstmb:hover a { transform:rotateX(80deg); transform-origin:bottom; } .seocipstmb a:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:36px; background:inherit; background-size:cover,cover; background-position:bottom; transform:rotateX(90deg); transform-origin:bottom; } .seocipstmb a span { color:white; text-transform:uppercase; position:absolute; top:100%; left:0; width:100%; font:bold 12px/36px Montserrat; text-align:center; transform:rotateX(-89.99deg); transform-origin:top; z-index:1; } .seocipstmb a:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); box-shadow:0 0 100px 50px rgba(0,0,0,0.5); transition:all 0.5s; opacity:0.15; transform:rotateX(95deg) translateZ(-80px) scale(0.75); transform-origin:bottom; } .seocipstmb:hover a:before { opacity:1; box-shadow:0 0 25px 25px rgba(0,0,0,0.5); transform:rotateX(0) translateZ(-60px) scale(0.85); } </style> <div class="seocipstmb"> <!-- Image --> <a href="http://www.rhm-files.tk/"> <span>Three-eyed Robot</span> </a> </div>

2. Cari Kode "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsbDMhsmPVmLTMdpQbBcysca8Dkavg0pfvR_YmTkGhYUMoZ1oi2ynUTISMKqM5LFVjb3cP_ntITULmScfMDcvPxyqjF_qMtB5XcCJGCv2r2Y1KU8cxVBHhReQeoOy8wVjr7tnY5I901jhL/s420/seocips-image-hover-effect.png" Ubah Menjadi URL Gambar Anda
3. Cari Kode "http://www.rhm-files.tk/" Ubah Menjadi URL Blog Anda
4. Cari Kode "Three-eyed Robot" Ubah Sesuai Kemauan Anda
Terima Kasih Udah Berkunjung Ke Rhm-Files.tk

Cara Membuat Garis Horizontal di Postingan Blog

<div> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="color: #0000ee;"><u><a href="http://www.rhm-files.tk/" target="_blank">Cara Membuat Garis Horizontal di Postingan Blog</a></u></span> - </span><span style="font-size: small;">Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara Membuat Garis Horizontal di Postingan Blogspot.</span></span></div> <div> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">Baca Juga : <a href="http://www.rhm-files.tk/2016/07/cara-membuat-border-gambar-dengan-html.html" target="_blank">Cara membuat border gambar dengan HTML </a></span></span></div> <div> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><br /></span></span></div> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDEtm26SfnFIakLCMmPIoPbbqLdSVzbqfPrYG1cLbAZ7te4dh_JcCJw5oC8EP4sLfRomvuGm7wQMfYBAfceIRsO-IdgqBTKsBiJg1cjA_QIPVXPsnHkNC-zHtHQ1LvK6yEb7b9pS9RU1ke/s1600/untitled.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDEtm26SfnFIakLCMmPIoPbbqLdSVzbqfPrYG1cLbAZ7te4dh_JcCJw5oC8EP4sLfRomvuGm7wQMfYBAfceIRsO-IdgqBTKsBiJg1cjA_QIPVXPsnHkNC-zHtHQ1LvK6yEb7b9pS9RU1ke/s320/untitled.PNG" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <div class="separator" style="clear: both; text-align: center;"> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"></span></span></div> <div> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><span style="line-height: 18px;"> </span></span><span style="font-size: small;"> </span></span><br /> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;">Contohnya seperti ini :</span></span><br /> <hr color="cyan" width="500px" /> <h3> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small; line-height: 18px;">Cara Membuat Garis Horizontal di Postingan Blog :</span></span></h3> <ul> <li><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="line-height: 18px;">Kita mulai kode dasarnya terlebih dulu, yaitu <i><span style="color: #783f04;"><hr/></span></i></span></span></span></li> <li><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="line-height: 18px;">Anda bisa mewarnainya dengan tambahan "<i><span style="color: #783f04;">color</span></i>" , seperti ini :</span></span></span></li> </ul> <blockquote class="tr_bq"> <div> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="line-height: 18px;"><i><span style="color: cyan;"><span style="color: #783f04;"><hr color ='</span></span><span style="color: red;">warna yang Anda inginkan</span><span style="color: cyan;"><span style="color: #783f04;">'/></span></span></i></span></span></span></div> </blockquote> <div> <ul> <li><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="line-height: 18px;">Anda juga bisa menentukan lebarnya dengan tambahan "<i><span style="color: #783f04;">width</span></i>" , misalnya Anda ingin warna ungu dengan lebar 500, maka kodenya seperti ini :</span></span></span></li> </ul> <blockquote class="tr_bq"> <div> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><span style="line-height: 18px;"><i><span style="color: cyan;"><span style="color: #783f04;"><hr color ='</span></span><span style="color: purple;">purple</span><span style="color: #783f04;">'<span style="color: cyan;"> width='500px'/></span></span></i></span></span></span></div> </blockquote> </div> <ul> <li><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;">Hasilnya akan jadi seperti ini :</span></span></li> </ul> <hr color="purple" width="500px" /> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: small;"><br /></span></span> <br /> <div class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: justify;"> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;">Demikian blogger tutorial mengenai <span style="color: #0000ee;"><u><a href="http://www.rhm-files.tk/" target="_blank">Cara Membuat Garis Horizontal di Postingan Blog</a></u></span>.</span></span></div> <div class="MsoNormal" style="margin-bottom: 0.0001pt; text-align: justify;"> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;"><br /> </span></span></div> <div class="MsoNormal" style="text-align: justify;"> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;">Semoga bermanfaat dan semoga berhasil.</span></span></div> <div> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: "arial" , "helvetica" , sans-serif; font-size: small;">Terima Kasih ^_^</span></span></div> </div>

Cara Membuat Kotak Script di Posting Blog

<a href="http://www.rhm-files.tk/">Cara membuat kotak script di posting blog</a> - Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya. Cara membuatnya, Ikuti langkah-langkah dibawah ini.<br /><br />1. Login ke blogger. Dan pilih entri baru. <br />2. Selanjutnya buatlah tulisan seperti dibawah ini. <br /><br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigk3y1BwetfzZwOhj3te0FdGUx92sNLiQzz8bBUSayV3J8gXiea3yWtCQv9P0YBT1do_HWwgJvpS4hpOi-moHY1TQj3TrFldEZ4zfnxmfgJSit4c1HDFWpuF-pjsgku9fde-yTKNL41t7q/s1600/Kotak+Script.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigk3y1BwetfzZwOhj3te0FdGUx92sNLiQzz8bBUSayV3J8gXiea3yWtCQv9P0YBT1do_HWwgJvpS4hpOi-moHY1TQj3TrFldEZ4zfnxmfgJSit4c1HDFWpuF-pjsgku9fde-yTKNL41t7q/s1600/Kotak+Script.JPG" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <br /> 3. Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script.<br /> <blockquote class="tr_bq">  <div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;<br /> text-align: left;"><br /> .<span style="color: blue;">Klik Disini</span>.</div></blockquote> <h3> Demo Code di Atas :</h3> <ol style="margin-left: 1em; margin-right: 1em;"><div style="background-color: white; border: 3px #1780dd Double; padding: 10px; text-align: left;"> Demo : www.Rhm-Files.tk</div> </ol> Untuk lebih jelasnya, lihat gambar dibawah ini.<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJpcliYWrBCpDwYngx5dWTT2ToTpHo9MvwOx1XsU9lq5flaP_cLza7LeVWJioPiP2Vob89lXvhuVWNRde8wgKjGqzxn0vfDCpp18FHU10YYA9RJQRKVogqXOIsegKCDz1AhpV7V4MNI0H/s1600/Kotak+Script+2.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJpcliYWrBCpDwYngx5dWTT2ToTpHo9MvwOx1XsU9lq5flaP_cLza7LeVWJioPiP2Vob89lXvhuVWNRde8wgKjGqzxn0vfDCpp18FHU10YYA9RJQRKVogqXOIsegKCDz1AhpV7V4MNI0H/s320/Kotak+Script+2.JPG" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <br />Sekarang Klik Compose, maka akan ada kotak script. Contoh gambar:<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2T4GwpUqk7ZEjkncPN1mMUAOQelmYXZW58rRVXmPRvpVY8cqS_gKjlpWrQVxRe4G06FKs9DWeLfaGJJHEtPqiUkTOXyIX04yVdVrgeAoHvdmKiet6WWszN9zCOegtYAOvm9y5RouJOrZq/s1600/Kotak+Script+3.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2T4GwpUqk7ZEjkncPN1mMUAOQelmYXZW58rRVXmPRvpVY8cqS_gKjlpWrQVxRe4G06FKs9DWeLfaGJJHEtPqiUkTOXyIX04yVdVrgeAoHvdmKiet6WWszN9zCOegtYAOvm9y5RouJOrZq/s320/Kotak+Script+3.JPG" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILES.TK</td></tr> </tbody></table> <br /> Selanjutnya Klik di dalam kotak tersebut, dan hapus tulisan <span style="color: blue;">Klik Disini</span>. <br />Terakhir, Masukan kode script yang ingin kamu masukan, didalam kotak itu. Selesai. <br /><br />Cara membuat kotak script di posting blog. Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya. Cara membuatnya, Ikuti langkah-langkah dibawah ini.<br /> <h3> <span style="color: blue;">Keterangan Kode:</span></h3> <blockquote class="tr_bq"> <div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;<br />text-align: left;"><br />.Klik Disini.</div></blockquote> <ol> <li><b>border: 3px</b> = ketebalan kotak script. dan <b>#1780dd</b> = warna kotak script.</li> <li><b>Double;</b> = Bentuk kotak, bisa diganti dengan, </li> <div style="background-color: white; border: 3px #1780dd solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;"> dashed<br /> dotted<br /> Double<br /> Groove<br /> inset<br /> outset<br /> ridge</div> <li><b>Padding:10px</b> = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.</li> <li><b>background-color:ffffff;</b> = warna dalam kotak. </li> <li>Dan <b>text-align:left;</b> = posisi tulisan didalam kotak di kiri.</li> </ol> <br /> <ol> </ol> <h3> <span style="color: blue;">Kotak Script Dengan Scroll.</span></h3> <blockquote class="tr_bq"> div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;<br />overflow: auto; height: 50px; width: 300px;<br />text-align: left;"><br />.kode script disini.</div></blockquote> <ol> <li>Sama seperti cara diatas, masukan kode script ke HTML.</li> <li>overflow:auto; = fungsi scrollnya. height(tinggi kotak) dan width(lebar kotak)</li> <li>Kotak script bisa juga dipindahkan ke kanan, dengan menambahkan kode float: right; ditengah kode diatas.</li> <div style="background-color: white; border: 3px #1780dd solid; float: right; height: 40px; overflow: auto; padding: 10px; text-align: left; width: 300px;"> Demo :<br /> Kotak Script<br /> Di Bagian Kanan<br /> www.rhm-files.tk</div> <li>Untuk yang posisi tengah, saya belum tau, nanti jika sudah tau, akan saya tambahkan kembali diposting ini. </li> </ol> <div style="text-align: justify;"> Code kotak script bagian kanan : <br /> <blockquote class="tr_bq"> <div style="border: 3px #1780dd solid; float: right; dan lain-lain.<br /> Kotak Posisi Kanan</blockquote> Dengan menambahkan kotak script di posting blog, maka halaman blog akan terlihat lebih rapi. Dan tidak memakan banyak tempat. Tanpa harus mengurangi isi dari posting. Semoga Bermanfaat.</div>

Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog

<br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZXBbCH1w3klrrykAxHw9GwnBGK0AKCCaZ0D-yYYvkU8QV7WnnDsifDRFcHAVhDxvZqMENll8JHotelPmQEhVdo-3MVSdrB7zRACGmilavaUbxYwn1Uc5fkoLUjOH8-Uk-a9ScTQ4Of9ee/s1600/untitled.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZXBbCH1w3klrrykAxHw9GwnBGK0AKCCaZ0D-yYYvkU8QV7WnnDsifDRFcHAVhDxvZqMENll8JHotelPmQEhVdo-3MVSdrB7zRACGmilavaUbxYwn1Uc5fkoLUjOH8-Uk-a9ScTQ4Of9ee/s320/untitled.PNG" /></a></div> <br /> <a href="http://www.rhm-files.tk/">Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog</a> - Selain pada seluruh gambar yang terdapat dalam posting, efek gambar juga dapat diterapkan pada salah satu gambar yang kita inginkan saja. Baik satu gambar dalam posting, widget, ataupun template. Banyak sekali berbagai efek gambar yang dapat diterapkan, namun saya hanya akan memberikan beberapa diantaranya saja khususnya efek jenis hover.<br /> <br /> Baca Juga : <a href="http://www.rhm-files.tk/2016/07/cara-membuat-efek-bintang-bertaburan.html">Cara membuat efek bintang bertaburan pada crusor </a><br /> <br /> Perhatikan penjelasan kali ini ya. Untuk Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog ini caranya sangat sederhana. Pertama kita membuat script CSS untuk mengatur tampilan, lalu memberikan kode "class" pada HTML gambar tersebut.<br /> <br /> <h3> Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog </h3> <ul> <li>Jika kita menerapkan efek pada gambar yang terdapat dalam template, letakan kode CSS-nya pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin> </li> </ul> <ul> <li>Jika kita menerapkan efek pada gambar yang terdapat dalam posting, kita bisa letakan kode CSS-nya sebelum memasukan kode HTML gambar ketika membuat posting dalam mode HTML. Atau bisa juga pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin> </li> </ul> <ul> <li>Jika kita menerapkan efek pada gambar yang terdapat dalam widget, kita bisa letakan kode CSS-nya sebelum memasukan kode HTML. Atau bisa juga pada bagian Edit HTML template tepatnya di atas kode ]]></b:skin> </li> </ul> <ul> <li>Jika kita meletakan kode CSS-nya di atas kode ]]></b:skin> yang terdapat dalam HTML template, kita tidak perlu menyertakan kode <style> <style/>. </li> </ul> <br /> 1. Terang - Redup<br /> <blockquote class="tr_bq"> <span style="color: blue;"><style></span> .img1:hover { opacity:0.3; filter:alpha(opacity=30); /* For IE8 and earlier */ } <span style="color: blue;"></style></span></blockquote> 2. Redup - Terang<br /> <blockquote class="tr_bq"> <span style="color: blue;"><style></span> .img2 { opacity:0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5; } .img2:hover { opacity:1.0; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity:1; } <span style="color: blue;"></style></span></blockquote> 3. Berputar<br /> <blockquote class="tr_bq"> <span style="color: blue;"><style></span> .img3{ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .img3:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } <span style="color: blue;"></style></span></blockquote> 4. Berputar dan membesar (zoom)<br /> <blockquote class="tr_bq"> <span style="color: blue;"><style></span> .img4 { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .img4:hover { -webkit-transform: scale(1.2) rotate(1080deg); -moz-transform: scale(1.2) rotate(1080deg); -o-transform: scale(1.2) rotate(1080deg); -ms-transform: scale(1.2) rotate(1080deg); transform: scale(1.2) rotate(1080deg); } <span style="color: blue;"></style></span></blockquote> Kode berwarna biru adalah kode yang tidak perlu disertakan jika meletakan kode CSS di atas kode ]]></b:skin> yang terdapat dalam HTML template. <br /> Kode berwarna merah adalah nama id yang bisa sobat ubah sesuai keinginan. <br /> Silakan terapkan efek gambar ini dengan meletakan kode CSS dengan cara yang telah dijelaskan di bagian atas pada posting ini. Selanjutnya, letakan kode HTML seperti berikut ini di posisi yang akan digunakan untuk meletakan gambar, seperti posting, widget, atau template.<br /> <blockquote class="tr_bq"> <img class="img7/nama id" src="URL GAMBAR"/> </blockquote> Ubah kode berwarna merah dengan nama id yang digunakan. <br /> Ubah kode berwarna biru dengan url sebuah gambar. <br /> <br /> OK, selesai. semoga sobat sukses menerapkan efek-efek gambar ini. Dengan cara ini maka sobat dapat memberikan efek yang berbeda pada masing-masing gambar, seperti pada posting kali ini.<br /> <br /> Jika sobat ingin memberikan efek yang sama pada semua gambar dalam posting, sobat bisa baca <a href="http://www.rhm-files.tk/">Memberikan Efek Zoom pada seluruh gambar dalam posting</a>, kemudian merubah efeknya dengan yang sobat inginkan contohnya seperti efek gambar yang saya berikan pada posting kali ini.

Cara membuat gambar dipojok kiri,atas,kanan,bawah

<a href="http://www.rhm-files.tk/" target="_blank">Cara membuat gambar dipojok kiri,atas,kanan,bawah</a> - Cara membuatnya ada dua cara gan,bisa dengan cara yang simple dan juga yang rumit,<br /> <br /> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody> <tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslP6AmIvZWSfNf3AlyetOuRNaTBzN3HZTXLKMuJFoZXb85hrv1tEd8PzuUwaCT87VdZCyauu2tWCp8LaTJuyfjkK1F_xEQ4eew7m8j9kopahYrHVr_cAmv7zNQ_YyriM_KbtPd8KwNtCd/s1600/untitled.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgslP6AmIvZWSfNf3AlyetOuRNaTBzN3HZTXLKMuJFoZXb85hrv1tEd8PzuUwaCT87VdZCyauu2tWCp8LaTJuyfjkK1F_xEQ4eew7m8j9kopahYrHVr_cAmv7zNQ_YyriM_KbtPd8KwNtCd/s320/untitled.PNG" width="320" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">WWW.RHM-FILE.TK</td></tr> </tbody></table> <br /> <b>Baca Juga :</b> <a href="http://www.rhm-files.tk/2016/07/cara-membuat-scroll-bar-di-postingan.html" target="_blank">Cara membuat scrool bar di postingan blog</a><br /> <h3> langsung aja gan,kita buat dengan cara yang simple dulu :</h3> <ol> <li>Upload gambar yang ingin digunakan,ketempat file sharing yang biasa agan gunakan,sperti photobucket,pict.com,fileave.com atau apa aja la,yang biasa agan gunakan.</li> <li>Setelah di upload ambil kode url nya.</li> <li>Login/Masuk ke blog </li> <li>Rancangan/TataLetak/Layout</li> <li>Tambah Gadget</li> <li>Pilih HTML/Javascrips</li> <li>Masukkan kode dibawah ini kedalam HTML/Javascrips  <br /> <blockquote class="tr_bq"> <span style="color: red;"><span style="color: black;"><a href='</span><span style="color: blue;">ALAMAT BLOG AGAN</span><span style="color: black;">' style='display:scroll;position:fixed;</span><span style="color: orange;">Bottom</span><span style="color: black;">:0px;</span><span style="color: red;">RIGHT</span><span style="color: black;">:0px;' title='</span><span style="color: magenta;">KETERANGANGAMBAR</span><span style="color: black;">'><img src='</span><span style="color: lime;">URL GAMBAR AGAN</span><span style="color: black;">'/></a> </span><b><span style="color: black;"><br /> </span></b></span></blockquote> </li> </ol> <br /> <li>Untuk keterangan <span style="color: blue;">ALAMATBLOGAGAN</span> isi dengan alamat blog agan, seperti <span style="color: blue;">http://www.rhm-files.tk/</span></li> <li><span style="color: orange;">Bottom(bawah)</span> posisi gambar bisa diganti dengan<span style="color: cyan;"> Top(atas) </span></li> <li><span style="color: red;">RIGHT(kanan)</span> posisi gambar bisa diganti dengan <span style="color: red;">LEFT(kiri)</span></li> <li><span style="color: magenta;">KETERANGANGAMBAR</span> ganti dengan nama apa yang agan ingin kan dan ini akan terlihat jika agan menyorot gambar.</li> <li> Dan untuk <span style="color: lime;">URLGAMBARAGAN</span> masukkan URL yang berasal dari file sharing sebelumnya.</li> <li>Jika sudah selesai Pratinjau terlebih dahulu,kira-kira sudah tidak ada kesalahan baru di SAVE.</li> <br /> Selesai SEMOGA BERMANFAAT.

Cara membuat Border Gambar dengan HTML

<div style="text-align: left;"> <a href="http://www.rhm-files.tk/" target="_blank">Cara membuat Border Gambar dengan HTML</a> - Kali ini kita akan membahas bagaimana membuat border dengan kode HTML.Hal ini akan terasa mudah jika kita sudah mengetahui bagaimana cara mengguna kan kode HTML,Untuk mengubah tampilan perbatasan gambar, Anda perlu menggunakan CSS (Cascading Style Sheets). Anda dapat menyertakan CSS dalam gambar Anda dengan menggunakan gaya atribut HTML tag. Anda dapat menggunakan kode HTML pada halaman ini untuk menentukan batas-batas gambar dalam dokumen HTML Anda.</div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> Berikut adalah beberapa contoh dari apa yang dapat Anda lakukan dengan HTML batas gambar dengan menggunakan CSS :</div> <div style="text-align: left;"> <br /></div> <div style="text-align: left;"> -------------------------------------------------------------------------------------------------------------</div> <div style="text-align: left;">  <b>1. Boarder Garis </b></div> <blockquote class="tr_bq"> <span style="background: none repeat scroll 0% 0% transparent; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><!-- HTML codes by Lamurdey.blogspot.com --><br /> <img style="border:1px solid <span style="color: red;">#0404B4</span>;" src="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg</span>" width="<span style="color: lime;">225</span>" height="<span style="color: lime;">101</span>" alt="lamurdey logo" /><br /> <p style="font-family:sans-serif;font-size:<span style="color: magenta;">10</span>px;"></span></span><span style="background: none repeat scroll 0% 0% transparent; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"></span></span></blockquote> <div style="text-align: left;"> Hasil dari kode diatas :</div> <div style="text-align: left;"> <!-- HTML codes by Lamurdey.blogspot.com --> </div> <div class="separator" style="clear: both; text-align: left;"> </div> <div style="font-family: sans-serif; font-size: 10px; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="lamurdey logo" border="0" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" style="border: 1px solid rgb(4, 4, 180);" width="225" /></a></div> <div class="separator" style="clear: both; text-align: left;"> </div> <div style="text-align: left;"> --------------------------------------------------------------------------------------------------------<br /> <b>2. Border Garis putus-putus </b></div> <blockquote class="tr_bq"> <!-- HTML codes by Lamurdey.blogspot.com --><br /> <img style="border:20px solid <span style="color: red;"><span style="background: none repeat scroll 0% 0% transparent; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;">#0404B4</span></span></span>;" src="<span style="color: blue;"><span style="background: none repeat scroll 0% 0% transparent; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg</span></span></span>" width="<span style="color: lime;">225</span>" height="<span style="color: lime;">101</span>" alt="Lamurdey logo" /><br /> <p style="font-family:sans-serif;font-size:<span style="color: magenta;">10</span>px;"> </blockquote> <div style="text-align: left;"> Hasil dari kode diatas :<!-- HTML codes by Lamurdey.blogspot.com --> </div> <div style="font-family: sans-serif; font-size: 10px; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Lamurdey logo" border="0" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" style="border: 2px dotted rgb(4, 4, 180);" width="225" /></a><br /> <span style="font-size: small;">--------------------------------------------------------------------------------------------------------------------------------</span><br /> <span style="font-size: small;"><b>3. Border Garis 3D</b></span></div> <blockquote class="tr_bq"> <!-- HTML codes by Lamurdey.blogspot.com --><br /> <img style="border:<span style="color: magenta;">8px</span> ridge <span style="background: none repeat scroll 0% 0% transparent; border: 0pt none; color: red; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;">#0404B4</span></span>;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" width="<span style="color: lime;">225</span>" height="<span style="color: lime;">151</span>" alt="Lamurdey logo" /><br /> <p style="font-family:sans-serif;font-size:10px;"> </blockquote> <div style="text-align: left;"> <span style="font-size: small;">Hasil dari kode diatas :</span><!-- HTML codes by Lamurdey.blogspot.com --> </div> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Lamurdey logo" border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" style="border: 8px ridge rgb(4, 4, 180);" width="225" /></a></div> <div style="text-align: left;"> </div> <div style="text-align: left;"> </div> <div style="text-align: left;"> </div> <div style="text-align: left;"> -------------------------------------------------------------------------------------------------</div> <div style="text-align: left;"> <b>4. Border Garis Tebal</b></div> <blockquote class="tr_bq"> <!-- HTML codes by Lamurdey.blogspot.com --><br /> <img style="border:20px solid <span style="color: red;"><span style="background: none repeat scroll 0% 0% transparent; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;">#0404B4</span></span></span>;" src="<span style="color: blue;"><span style="background: none repeat scroll 0% 0% transparent; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;"><span style="background-attachment: scroll; background-image: none; background-position: 0% 0%; background-repeat: repeat; border: 0pt none; display: inline; font-size: 100%; margin: 0pt; outline: 0pt none; padding: 0pt; vertical-align: baseline;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg</span></span><span style="color: black;">"</span></span> width="<span style="color: lime;">225</span>" height="<span style="color: lime;">101</span>" alt="Lamurdey logo" /><br /> <p style="font-family:sans-serif;font-size:<span style="color: magenta;">10</span>px;"> </blockquote> <div style="text-align: left;"> Hasil dari kode diatas :</div> <div style="font-family: sans-serif; font-size: 10px; text-align: left;"> <!-- HTML codes by Lamurdey.blogspot.com --> <img alt="Lamurdey logo" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgezjsRVlVD9bCcsO7mCTB31MfcvhyphenhyphenWByJk8Ud-ExF-P9zFpUys_jGJDpFgO15CO5fQgkOxylR3e9w4fcPMppSVXqjQColTHUsLJg7V0QuLYbffROcfHgIiz03EP-LUor5WsdhlpfgIIEq6/s1600/scroll.jpg" style="border: 20px solid rgb(4, 4, 180);" width="225" /><br /> <div style="font-family: sans-serif; font-size: 10px;"> ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------<br /> <br /> <span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-family: inherit;"><span style="font-size: small;">Ket :<br /> Warna <span style="color: red;">merah</span> Adalah Warna dari border gambar<br /> Warna<span style="color: blue;"> Biru</span> merupakan Kode gambar<br /> Warna <span style="color: lime;">hijau</span> ukuran lebar dan tinggi border<br /> sedangkan Untuk warna <span style="color: magenta;">Pink</span> adalah ketebalan dari Border<br /> <br /> yakk..begitulah cara membuat border dengan menggunakan HTML kode ..Mudah-mudahan dimengerti,kalau juga belum mengerti,cukup cantumkan pertanyaan di kotak komentar.<br /> <br /> Semoga bermanfaat. </span></span></span></div> </div>