Cara membuat Tombol Download animasi di blog

Hi bloggers, kali ini saya akan membagikan turtorial cara membuat tombol download animasi seperti gambar diatas...
Mudah saja kok, caranya :

1. Login ke blog sobat.
2. Masuk Template > Edit HTML
3. Search (gunakan CTRL + F untuk mempercepat pencarian) :
    </body>
4. Copy CSS dibawah ini :

<style>
.abt-button {
    margin: 50px auto;
    width: 200px;
}
 /* Get this button at rexroom.blogspot.com */

.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*GRADIENT*/
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop

(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea',

endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop

(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea',

endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style><span style="font-family: Times New Roman;"><span style="white-space: normal;">
</span></span>

   Paste diatas </body> dan save.
5. Buat post baru dan masukan Scrypt dibawah ini ke HTML :

<div class="abt-button">
<a href="REXROOM">Demo</a> <p class="up">Download animasi</p>
<p class="down">
Tombol</p>
</div>

6. Publikasikan dan lihat hasilnya...

Note :

REXROOM (ganti dengan URL tujuan sobat)
Download animasi (ganti terserah soat)
Tombol (Ganti terserah sobat)

Untuk Demo, Sobat bisa melihatnya di sini :

D E M O

cara Merubah tampilan youtube di blog /web

 

Bosan dengan tampilan youtube standart??

Kali ini saya akan memberikan turtorial singkat tentang cara membuat atau merubah tampilan youtube di blog seperti pada gambar di samping....

yachh, langsung aja ya....

1. Log in ke blog sobat.... 

2. Masuk ke Template > EditHTML.

3. Gunakan CTRL + F pada kotak box template dan search 
  ]]></b:skin> atau </style>


4. Pastekan scrypt sebelum ]]></b:skin> atau </style> dan save template atau simpan template

.vidyoutube{text-align: center;background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:10px 0 40px 7.5%;padding:8px 8px 5px;width:500px;box-shadow: 1px 30px 30px -26px #818181}
.vidyoutube object{border:0}

 
  5. Buat postingan baru, di tab HTML dan pastekan scrypt berikut..

<div class="vidyoutube">
<object width="500" height="281" data="//www.youtube.com/embed/121WomHqiNk"></object>
</div>

6. Selesai..

Note :

Untuk tulisan merah digant dengan URL youtube sobat (video)....
Width adalah lebar dan Height adalah tinggi...

Untuk Demo silahkan sobat lihat disini

DEMO

Selamat mencoba....

Cara pasang TV online di blog sendiri terbaru 2013

Pasti mendapat kepuasan tersendiri jika blog kita mempunyai Tv Online.. 

Kali ini saya akan memberikan turtorial cara membuat tv online di blog....


Caranya cukup mudah....

 

Langkah - Langkahnya sbb : 

• Log in blog sobat.
• Buat artikel baru...
• Di tab HTML, pastekan script di bawah ini :

<iframe frameborder="0" height="765" scrolling="no" src="http://widget3.gudang.tv/2013/09/welcome-to-gudangtv.html? format=embed&amp;player_autoplay=true" width="565"></iframe>

• langkah terakhir di Publikasikan.... tadaaaa.... jadi dech TV online di blog kita.....

Sekian dulu turtorial saya tentang TV Online... Untuk tampilannya sobat bisa melihat langsung di blog ini...

Cara Membuat Generator website speed test

Sobat tertarik untuk membuat widget ini??? Bisa juga di masukan pada artikel Loh....
Untuk membuat Generator website speed test ini :
Copas Script di bawah ini dan pastekan ke bl0g sobat..

<form action="http://www.iwebtool.com/tool/tools/speed_test/speed_test.php" method="get" name="pageform" onsubmit="return validate(this);" target="pageframe">
<table border="2" style="border-collapse: collapse; width: 350px;"><tbody>
<tr> <td height="75" valign="top"><table class="tooltop" style="border-collapse: collapse; height: 50px; width: 100%px;"><tbody>
<tr> <td><table border="0" cellspacing="5" style="border-collapse: collapse; width: 344px;"><tbody>
<tr> <td colspan="5" valign="top"><b><span style="font-size: x-small;">Domain Sobat (site): </span></b><span style="font-size: xx-small;">Masukan url sobat dibawah ini (Maximum 7)</span></td> </tr>
<tr> <td colspan="4" valign="top"><textarea name="domain" rows="7" style="width: 100%;"></textarea></td> <td></td> </tr>
<tr> <td><input style="float: left;" type="submit" value="Check!" /></td> <td colspan="3"></td> </tr>
</tbody></table>
</td> </tr>
</tbody></table>
</td> </tr>
<tr> <td><iframe class="toolbot" frameborder="2" height="200" name="pageframe" width="360">
</iframe></td> </tr>
<tr> <td height="2"></td> </tr>
</tbody></table>
</form>

Untuk ukurannya, Silahkan sobat merubahnya sendiri.

Membuat papan Klasmen sepakbola berbagai liga

Papan klasmen ini bisa menginformasikan jadwal, hasil tanding dan urutan klasmen liga dalam sepakbola....Keren gak papan klasmen seperti ini??? di tambah ini juga bisa auto update loh....
Mau??
klo mau ni ikutin turtorial di bawah ini...
1. Log in blogger sobat
2. Masuk Tata Letak > Tambah Gadget > pilih HTML/JavaScript dan pastekan script di bawah ini....

<!-- BEGIN of Soccerway widget HTML fragment  -->
<!-- Personal code for this widget: ymXHvoZH8ZHgXX0E0 -->
<iframe src="http://widgets.soccerway.com/widget/free/classic/competition/13/1244#d=320x180&f=table,table_colmp,table_colmw,table_colmd,table_colml,table_colgf,table_colga,table_colgd,results,fixtures,scroll&cbackground=ebf30b&ctext=000000&ctitle=F85F00&cshadow=f9f345&cbutton=070000&cbuttontext=f9f6f6&chighlight=ff6a00&tbody_family=Arial,Helvetica,sans-serif&tbody_size=9&tbody_weight=normal&tbody_style=normal&tbody_decoration=none&tbody_transform=none&ttitle_family=Impact,sans-serif&ttitle_size=13&ttitle_weight=normal&ttitle_style=normal&ttitle_decoration=none&ttitle_transform=none&ttab_family=Tahoma,sans-serif&ttab_size=9&ttab_weight=normal&ttab_style=normal&ttab_decoration=none&ttab_transform=none" width="320" height="180" scrolling="no" frameborder="0" marginwidth="0" marginheight="0"></iframe>
<!-- END of Soccerway widget HTML fragment -->

3. save dan lihat hasilnya...

keterangan :
Warna merah adalah ukuran dari widget / gadget itu sendiri

cara membuat / daftar w3 directory

Disini asaya akan memberikan 2 cara untuk membuat / daftar w3-directory, yang pertama tinggal copas aja widget di bawah ini...cara ke dua daftar langsung ke situsnya...
Cara mendaftar di W3 Directory sangatlah mudah. W3 Directory adalah Directory yang memberikan backlink super gratis dan ampuh bagi blogger blogger pemula yang haus akan backlink. W3 directory memberikan backlink gratis untuk para penggunanya walaupun tanpa submit artikel atau postingan anda satu pun. Caranya, anda tinggal copy dan tempel saja code/script dari W3 directory berikut ini, sidebar maupun footer sahabat blogger semuanya.

<a href="http://www.w3-directory.com/vote-w3-directory.php?id_site_vote=34613" target="_blank"><img src="http://www.w3-directory.com/images/logo-w3-world-wide-web-directory.gif" width="125" height="35" border="0" alt="W3 Directory - the World Wide Web Directory" /></a><noscript><a href="http://www.w3-directory.com/directory-Personal-web-sites-Blogs.php">Personal web sites / Blogs directory</a> <a href="http://www.w3-directory.com/directory-Indonesia.php">Indonesia directory</a></noscript>

Hasilnya akan seperti di bawah ini :


Untuk mendaftar langsung ke situsnya,
1. silahkan kesini w3-Directory
2. Klik ADD a website

Rex Screen Shoot:

• url : Alamat url blog sobat
• Title : Nama blog sobat
• Description : Deskripsi blog sobat
• Keyword : Keyword yag sobat gunakan atau yang akan di gunakan
• Identity : Nama sobat
• Email : email sobat
• Return Link / Backlink : isi dengan link blog sobat
• Country : Indonesia
• Heading : Masukan kriteria blog sobat

Keterangan :
Setiap tanda * (bintang) itu adalah wajib hukumnya untuk di isi ^^

3. Copy Script yang diberikan w3-Directory.
4. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript dan pastekan script tersebut

Semakin banyak orang yang mengklik widget tersebut, semakin banyak pula backlink yang kita dapat.
Cara mengakalin biar dapat banyak klik...Share lah link tadi ke FB, atau Grup yang telah banyak membernya, Buat status yang menarik member untuk menarik perhatian.... contohnya :

• jangan klik situs ini nanti panuan (url w3-directory)
• Untuk yang berumur 40tahun saja (url w3-directory)
• Lihatlah ini dengan seksama  (url w3-directory)
• DLL

Modifikasi gadget Pengikut/Follower pada blog

Biasa sobat - sobat yang lainnya membuat gadget pengikut atau follower menggunakan google friend conect, tapi sayangnya link tersebut sudah mati (end)...
Jangan kecewa dulu sobat...soalnya kali ini saya akan memberikan turtorial membuat gadget follower / Pengikut tanpa mengakses situs GFC atau Google Friend Conect...

ada pun langkah - langkahnya adalah sbb :
1. pasang terlebih dahulu gadget Follower sesuai dengan default blogger.

Login Blogger lo bro >> Tata Letak >> Add Gadget >> Pengikut >> Isi Judul >> Save. - See more at: http://raxterbloom.blogspot.com/2012/11/cara-alternatif-membuat-google-friend.html#sthash.tSSPz285.dpuf

 Login Blogger sobat > Tata Letak > Tambah Gadget > pilih Pengikut > isi judul > Save.

Login Blogger lo bro >> Tata Letak >> Add Gadget >> Pengikut >> Isi Judul >> Save. - See more at: http://raxterbloom.blogspot.com/2012/11/cara-alternatif-membuat-google-friend.html#sthash.tSSPz285.dpuf

Login Blogger lo bro >> Tata Letak >> Add Gadget >> Pengikut >> Isi Judul >> Save. - See more at: http://raxterbloom.blogspot.com/2012/11/cara-alternatif-membuat-google-friend.html#sthash.tSSPz285.dpuf

Rex Screen Shoot:

2. Setelah itu, Lihat blog sobat...
Klik kanan pada halaman > Klik View Page Source Atau tekan (ctrl + u)

Rex Screen Shoot:

3. (ctrl + f) dan search judul gadget yang sobat buat pada Pengikut tadi.

Rex Screen Shoot:

4. Copy dari <div id='Followers1-wrapper'> sampai </div></div> copy terlebih dahulu di notepad. Contohnya seperti di bawah ini

<div id='Followers1-wrapper'>
<div style='margin-right:2px;'>
<script type="text/javascript">
        if (!window.google || !google.friendconnect) {
          document.write('<script type="text/javascript"' +
              'src="http://www.google.com/friendconnect/script/friendconnect.js">' +
              '</scr' + 'ipt>');
        }
      </script>
<script type="text/javascript">
      if (!window.registeredBloggerCallbacks) {
        window.registeredBloggerCallbacks = true;

       

       
        gadgets.rpc.register('requestReload', function() {
          document.location.reload();
        });

       
        gadgets.rpc.register('requestSignOut', function(siteId) {
         
          google.friendconnect.container.openSocialSiteId = siteId;
          google.friendconnect.requestSignOut();
        });
      }
    </script>
<script type="text/javascript">
   
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
       
         
           
           
              holder.currentPost = "http://www.blogger.com/feeds/3594637173336137990/posts/default/4699258471185032677";
           
           
           
              holder.currentComments = "http://www.blogger.com/feeds/3594637173336137990/4699258471185032677/comments/default";
           
            holder.currentPostUrl = "";
            holder.currentPostId = 4699258471185032677
         
         
         
            holder.postFeed = "http://www.blogger.com/feeds/3594637173336137990/posts/default";
         
         
         
            holder.commentFeed = "http://www.blogger.com/feeds/3594637173336137990/comments/default";
         
          holder.currentBlogUrl = "http://rexroom.blogspot.com/";
          holder.currentBlogId = "3594637173336137990";
       
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height + 'px';
      }
    });

   
    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<div id="div-1bj23uom5g58z" style="width: 100%; "></div>
<script type="text/javascript">
    var skin = {};
    skin['FACE_SIZE'] = '40';
    skin['HEIGHT'] = "260";
    skin['TITLE'] = "\u2665  Sahabat ReX^RooM  \u2665";
    skin['BORDER_COLOR'] = "black";
    skin['ENDCAP_BG_COLOR'] = "black";
    skin['ENDCAP_TEXT_COLOR'] = "black";
    skin['ENDCAP_LINK_COLOR'] = "black";
    skin['ALTERNATE_BG_COLOR'] = "black";
   
    skin['CONTENT_BG_COLOR'] = "yellow";
    skin['CONTENT_LINK_COLOR'] = "yellow";
    skin['CONTENT_TEXT_COLOR'] = "black";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "transparent";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#ffff00";
    skin['CONTENT_HEADLINE_COLOR'] = "black";
    skin['FONT_FACE'] = "normal normal 13px Cardo";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "div-1bj23uom5g58z",
     height: 260,
    
    
    
     site: "06392357882249006243",
    
     locale: 'in' },
     skin);
  </script>
</div></div>

<div id='Followers-wrapper'>

<div id='Followers-wrapper'>

Keterangan :
Warna Biru adalah Kode warna untuk follower, jika sobat membutuhkan kode warna / daftar warna silahkan lihat di SINI

5. Setelah selesai meng editnya.. hapus Follower / Pengikut yang sobat buat pertama 
6. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript dan pastekan script yang sobat 
7. Save dan lihat hasilnya ...

membuat tombol follow blog di widget

Jika sobat ingin membuat tombol follow di widget maka ikutilah turtorial di bawah ini..

1. Login ke blogger sobat
2. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript
3. Pastekan script di bawah ini

<a href="http://www.blogger.com/follow-blog.g?blogID=3594637173336137990"target='_blank'><img height="27" src="http://i1297.photobucket.com/albums/ag22/jeskarex/jeska_zps48af6949.png" title="Join This Blog | Follow ReX^RooM" width="108" /></a>

4. Save dan lihat hasilnya

Keterangan
warna merah adalah ID BLOGGER sobat. (klik >> jika ingin mengetahui ID blog sobat)
Warna Biru adalah url gambar.
"Join This Blog | Follow ReX^RooM adalah kata - kata untuk title sobat

membuat tombol google facebook pada widget

Kali ini saya akan membagikan turtorial cara membuat tombol google dan facebook pada widget...
Langsung saja dech sobat..

1. Login ke blogger sobat
2. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript
3. pastekan script di bawah ini

<table><tr><td>
<a href="https://plus.google.com/u/0/104576205809844339284" target="_blank"><img alt="" border="0" src="http://i1297.photobucket.com/albums/ag22/jeskarex/google_zps3947bdb2.png" title="google +" /></a></td><td>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.facebook.com/jolly.s.karundeng" target="_blank"><img alt="" border="0" src="http://i1297.photobucket.com/albums/ag22/jeskarex/Fb_zps5f1ff611.png" title="My Facebook I add me" /></a></div></td></tr></table>

4. Save dan lihat hasilnya...

Keterangan :
Warna Merah adalah ID google + sobat
Warna Biru adalah Url gambar sobat
Warna Hijau adalah ID Facebook sobat

untuk membuat tombol follower klik sini

membuat tombol like facebook di blog

Kali ini saya akan membagikan turtorial cara membuat tombol like facebook di blog..
jika sobat ingin membuat widget seperti pada gambar di sebelah ini, buatlah menu pencarian terlebih dahulu, kemudian buatlah subscribe via email seperti pada gambar disebelah....Jika sobat ingin membuat tombol like facebook di blog...simaklah turtorial berikut ini...

1. Login blogger sobat.
2. Masuk Tata Letak > Tambah Gadget > pilih HTML/JavaScript.
3. Pastekan script berikut ini

 <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
document.write('<fb:like layout="button_count" show_faces="false" width="100"></fb:like>')</script>

4. Save dan lihat hasilnya

Jika sobat ingin membuat tombol profile facebook dan google + klik sini

membuat subscribe keren di blog

capek buat subscribe kayak gini, tapi akhirnya selesai juga....maklum gw blogger pemula gan..
nah langsung saja, jika sobat ingin membuat susunan widget yang kayak gini langkah awalnya buat widget pencarian seperti pada gambar disebelah... dan jika sobat hanya mau membuat subscribe via email yang kayak gini langsung saja simak turtorial saya di bawah ini...
Langkah - langkahnya :
1. login blog sobat
2. masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript
3. Pastekan code dibawah ini..

<table><tr><td><div style="background: url(&quot;http://i1297.photobucket.com/albums/ag22/jeskarex/email_zps007a0b15.jpg&quot;) no-repeat scroll left top transparent; border: 6px inset transparent; padding: 10px; text-align: left;">
<blink><span style="font-size: x-small;"><b><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;"><span style="color: #eeeeee;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: black;"> Receive</span> All Updates In Your Inbox<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: black;"> by </span>submitting your Email ID below</span></span></b></span></blink></div></td><td>
<p><a href="http://feeds.feedburner.com/Rexroom" rel="alternate" type="application/rss+xml"><img src="http://www.feedburner.com/fb/images/pub/feed-icon32x32.png" alt="" style="vertical-align:middle;border:0"/></a>&nbsp;<a href="http://feeds.feedburner.com/Rexroom" rel="alternate" type="application/rss+xml"></a></p></td></tr></table>
<form style="border:none;padding-top:10px;text-align:left;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Rexroom', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input name='loc' type='hidden' value='en_US'/><input name='uri' type='hidden' value='Rexroom'/>
<table border='0' cellpadding='0' cellspacing='0' style='margin-top: 5px;'width='155'>
<input class='feedinput' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your mail here . . .&quot;;}' onfocus='if (this.value == &quot;Enter your mail here . . .&quot;) {this.value = &quot;&quot;}' size='20' style='width: 180px;' type='text' value='Enter your mail here . . .'/>
<input align='right' height='24' id='imageField' name='I2' src='http://i1297.photobucket.com/albums/ag22/jeskarex/Subscribe_zpsed000a3a.png' type='image' width='110'/>
</table>
</form>

4. Save dan lihat hasilnya..

Keterangan :
Warna Merah adalah  url gambar sobat
Warna Biru adalah text yang sobat mau
Rexroom ganti dengan alamat feedburner sobat (lihat disini cara buat feedburner)
yang lain sobat modifikasi aja sendiri

ingin membuat tombol like facebook seperti diatas?? klik sini

membuat pencarian atau search pada blogger

Jika sobat ingin membuat menu pencarian seperti gambar disamping ini...maka sobat ikutilah turtorial berikut ini...

1. Login ke blogger sobat.
2. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript.
3. pastekan script di bawah ini.

<h2><form id="searchform" action="http://rexroom.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text" /> <input id="searchsubmit" value="Pencarian »" type="submit" /> </form></h2>

4. save dan lihat hasilnya.

keterangan :
Warna biru adalah url sobat.
Warna Merah adalah nama tombol klik sobat

ingin membuat subscribe lewat email seperti diatas klik sini

Membuat 'Langganan Lewat Email'

Terkadang seorang pembaca memerlukan informasi dari blog tertentu, karena dirasakan/tertarik dengan artikel - artikel dari suatu blog. Dengan membuat langganan lewat email di widget merupakan suatu jawaban atas ke galauan pembaca yang ingin mengikuti artikel - artikel berikut yang kita posting...
Nah sobat, jika tertarik, ikutilah turtorial di bawah ini
1. Log in akun feedburner sobat. klik SINI Jika sobat belum punya akun feedburner, sobat bisa melihat turtorial cara membuat akun diSINI

Rex Screen Shoot:

2.  Jika Sobat telah membuatnya... Klik judul sobat

Rex Screen Shoot:

3.Setelah itu Klik Publicize > Email Subscriptions

Rex Screen Shoot:

4. Copy Script tersebut..

Rex Screen Shoot:

5.Log in blog sobat.
6. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript > dan pastekan script tadi
7. Save dan lihat hasilnya...

Membuat Kotak Pencarian keren di blog

Kotak pencarian atau Search box sangatlah penting dalam suatu blog untuk mempermudah pembaca dalam mencari artikel tertentu dalam blog kita. Setelah googling, saya menemukan kotak pencarian yang keren seperti gambar ini....
Jika sobat tertarik untuk membuat kotak pencarian seperti ini, ikutilah turtorial di bawah ini...
1. Log in ke blog sobat
2. Masuk ke Tata Letak > Tambah Gadget > pilih HTML/JavaScript dan pastekan ssalah satu script di bawah ini.

Kotak Search 1

<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_n8fpNly0BQ1mceVILIFRrEKaY0PJ9PyAQqE-WDTqyp-Sdh15TmA2C_P4a5nn918-vND-F3ftRvrwJA9pt38jZ9mlnYrjGVEJKy7IeAkR3J9a7t9lGwWk501rXNadye4CsoPzNnw7Jver/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get">    <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>

Kotak Search 2

<style type="text/css"> #b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJE5hpIdwfzmi5Xv7Mvy4oswMRagszq2AGIecKskZ8IgmvZGqiqqO47yBtIRUY-M0pQv1b-G3NYKqr2GwM2vCquPm63T_4Et8LkIR7pmCw37q04WLXpp48sCWVBJtNZrrDEXy4fR9h97pr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#b-searchform{display: block;padding: 10px 12px;margin:0;} form#b-searchform #b{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#b-searchform #bbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="b-searchbox"><form id="b-searchform" action="/search" method="get">    <input type="text" id="b" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>     <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="bbutton" /></form></div>

Kotak Search 3

<style type="text/css"> #c-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXht_ifPSEqDe86zlz24JEP3tQDNRfOJrWp8lXXjY_9JRunQvQ1VTAalgt2g2ezFatyEj-mXi8hhe8yqAq3xrw_1y_jQF-Q3gXJZlT0_yg_vCmw1Drrodfqg3_mFBI77V-HYkASaXdBJWZ/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#c-searchform{display: block;padding: 10px 12px;margin:0;} form#c-searchform #c{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#c-searchform #cbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style><div id="c-searchbox"><form id="c-searchform" action="/search" method="get">    <input type="text" id="c" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="cbutton" /></form></div>

Kotak Search 4

<style type="text/css"> #d-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXjTpdBkh9qvtfzd2Z1E_zHWJIdbB2KHqY5-wUOovAd9bJdR2vILYpmZV8tKDiRT6scqzMsrRzmH2ZXClxs-seXaCviNoWOv4XiGKWIXLWYJNeoq-Wt1dRikDTInWCM61JcSBMQTK2nVbr/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#d-searchform{display: block;padding: 12px;margin:0;} form#d-searchform #d{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#d-searchform #dbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="d-searchbox"><form id="d-searchform" action="/search" method="get">    <input type="text" id="d" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="dbutton" /> </form></div>

Kotak Search 5

<style type="text/css"> #e-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFyPSNbXlKUsnY0hgcTWy8fis4NAURZXXs62byTV5rIVhfdxwPk_YBN39bREhlcz9jRXrK9rE3PxVMEfZheusDnRKUTxJ71zrQ-qB1ooGMAHPfYBAG55Qg3Tc0_AlrTTtWNSZ1oOWPcRvx/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#e-searchform{display: block;padding: 12px;margin:0;} form#e-searchform #e{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#e-searchform #ebutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="e-searchbox"><form id="e-searchform" action="/search" method="get">    <input type="text" id="e" name="q" value=""/>    <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="ebutton" /></form></div>

Kotak Search 6

<style type="text/css"> #f-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWBqu0v6cmrHkf2FuXXwIa7eoZgpRVxhaspTySW0d0EbDDNcsdIoDP3JIGgad4f5-T0M1ry1vavX0BPVVNG5M2Zr1o4D7tXY4a2sx4LbVbujAstWM0RuaTU7Qpy1Sfw2dyb7aYOZVHNCV/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;} form#f-searchform{display: block;padding: 12px;margin:0;} form#f-searchform #f{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#f-searchform #fbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="f-searchbox"><form id="f-searchform" action="/search" method="get">    <input type="text" id="f" name="q" value=""/>  <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="fbutton" /> </form></div>

<form id="searchform" action="http://rexroom.blogspot.com/search" name="searchform" method="get">
<input id="s" value="" name="q" type="text" /> <input id="searchsubmit" value="Pencarian" type="submit" /> </form>

cari disini

<p align="left">
<form id="searchthis" action="http://rexroom.blogspot.com/search" style="display:inline;" method="get">
<strong>cari disini<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Pencarian" type="submit"/>

Keterangan : 
Warna merah adalah Url blog sobat
Warna biru adalah Judul tombol 

3. Setelah itu Save dan lihat hasilnya...