2016-07-03

Membuat Widget Sidebar Melayang di Blogspot

By Rhm-Files on 17.31.00

<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>

Updated at: 17.31.00

Tutorial Membuat Widget Random Post Bergerak Di Blog

By Rhm-Files on 04.49.00

<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 />
<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 />
  </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>

Updated at: 04.49.00

Widget Random Post Dengan Gambar/Tumbnails Di blog

By Rhm-Files on 04.33.00

<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 />
  <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 />
  <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>

Updated at: 04.33.00

Cara membuat widget random post hanya judul tanpa gambar

By Rhm-Files on 04.21.00

<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>

Updated at: 04.21.00

Cara Membuat 4 Kolom Iklan di Atas Posting Blog

By Rhm-Files on 16.35.00

<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 />

Updated at: 16.35.00

Cara Membuat Navigasi Menu di Atas Header Blog

By Rhm-Files on 16.24.00

<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 />

Updated at: 16.24.00

Cara Membuat Iklan Seperti Google Adsense

By Rhm-Files on 15.59.00

<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>

Updated at: 15.59.00

Cara Membuat Efek Shadow / Bayangan Pada Pinggir Blog

By Rhm-Files on 10.44.00

<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>

Updated at: 10.44.00

Cara Membuat Gadget Label Menjadi Dua Kolom

By Rhm-Files on 10.33.00

<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>

Updated at: 10.33.00

Membuat Teks Descripsi Pada Gambar Hover

By Rhm-Files on 10.17.00

<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>

Updated at: 10.17.00

Efek Gambar Dengan Panel Description Menggunakan CSS3 Transitions

By Rhm-Files on 10.03.00

<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>

Updated at: 10.03.00

Membuat Efek Kaca Pembesar Pada Gambar

By Rhm-Files on 09.56.00

<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...

Updated at: 09.56.00

Cara Membuat Efek Animasi Hover 3D Pada Gambar Di Blogger

By Rhm-Files on 09.45.00

<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">
    <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

Updated at: 09.45.00

Cara Membuat Garis Horizontal di Postingan Blog

By Rhm-Files on 09.34.00

<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>

Updated at: 09.34.00

Cara Membuat Kotak Script di Posting Blog

By Rhm-Files on 09.25.00

<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>

Updated at: 09.25.00

Menerapkan Berbagai Efek Hover Pada Gambar Dalam Blog

By Rhm-Files on 09.17.00

<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.

Updated at: 09.17.00

Cara membuat gambar dipojok kiri,atas,kanan,bawah

By Rhm-Files on 08.48.00

<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.

Updated at: 08.48.00

Cara membuat Border Gambar dengan HTML

By Rhm-Files on 08.19.00

<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;"><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;">

</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">
<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 :

</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">
<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>

</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">
<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;">

<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>

Updated at: 08.19.00

Rhm-Files Your Game Hack Solution

Column Right

Videos

Carousel

Featured