Membuat Text Area dengan Tombol Highlight All

Membuat Text Area dengan Tombol Highlight All | Tutorial Blog

Tutorial kali ini saya akan coba berbagi tentang cara Membuat Text Area dengan tombol Highlight All. Dengan menggunakan Highlight All akan lebih memudahkan mengcopy kalimat/kode script yang ada di dalam text area.

Untuk membuatnya cukup mudah, silahkan copy kode dibawah ini :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="20" name="txt" rows="4" style="height: 80px; width: 180px;" wrap="VIRTUAL">&lt;a href="http://wadahtutorial.blogspot.com/" rel="dofollow" target="_blank"&gt;Tutorial Blog&lt;/a&gt;</textarea></div>
</form>
</div>

Silahkan ganti tulisan yang berwarna biru dengan tulisan/ kode script yang anda inginkan. hasilnya akan seperti dibawah ini :

<a href="http://wadahtutorial.blogspot.com/" rel="dofollow" target="_blank">Tutorial Blog</a>

Sekian penjelasan singkat mengenai cara Membuat Text Area dengan tombol Highlight All.
Semoga bermanfaat . . .

Membuat Efek Daun Berjatuhan di Blog

Membuat Efek Daun Berjatuhan di Blog | Tutorial Blog

Seperti halnya Memberi Efek Hujan Salju di Blog, efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek Daun Berjatuhan :

• Login ke dashboard blogger anda.
• Klik Template >  Edit HTML.
• Lalu klik Proceed dan centang Expand widget template.
• Cari kode </head>  pada template dengan menggunakan Ctrl+F.
•  Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
  
  <script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>
• Save template anda dan lihat hasilnya.

Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.

Memberi Efek Hujan Salju di Blog

Memberi Efek Hujan Salju di Blog | Tutorial Blog

Rasanya udah lama saya ga post, baru sekarang bisa update blog, jadi pada kesempatan ini saya akan berbagi salah satu cara untuk mempercantik blog, tutorial singkat kali ini tentang Memberi Efek Hujan Salju di Blog. Efek ini akan sangat bagus jika ditampilkan  pada background(latar belakang) blog berwarna gelap. jika background blog sobat berwarna terang atau mungkin putih, maka efek hujan saljunya akan tidak jelas malah mungkin tidak terlihat.

Langsung aja sob, berikut tutorialnya :

1. Login ke dashboard blogger sobat.
2. Pilih Layout > Add gadget > HTML/JavaScript.
   
   Spoiler :

   
3. Letakkan script dibawah ini pada gadget.
   
   <script src='http://wadah-tutorial.googlecode.com/files/snow.js.txt' type="text/javascript"></script>
4. Save dan lihat hasilnya.
   
   Spoiler :

   

Ok sob, sekian dulu tutorial tentang Memberi Efek Hujan Salju di Blog.

Kanata Blogger Template

Kanata Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Kanata Blogger Template
Description	Kanata is a free blogger template adapted from WordPress with 2 columns, left sidebar and grunge style.
Template Author	http://btemplates.com/author/deluxe-templates/
Designer	9th Sphere
Instructions URL	How to install Blogger Template

Source : btemplates.com

Red Light Blogger Template

Red Light Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Red Light Blogger Template
Description	Red Light is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, grunge style and vectorial elements.
Template Author	http://btemplates.com/author/falcon-hive/
Designer	TemplateLite
Instructions URL	How to install Blogger Template

Source : btemplates.com

Menu Dropdown dengan Background

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.

Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :

• Login ke blogger Anda, klik menu Design > Edit HTML.
• Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
• Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
  <script>
  var last_expanded = &#39;&#39;;
  function showHide(id)
  {
  var obj = document.getElementById(id);
  var status = obj.className;
  if (status == &#39;hide&#39;) {
  if (last_expanded != &#39;&#39;) {
  var last_obj = document.getElementById(last_expanded);
  last_obj.className = &#39;hide&#39;;
  }
  obj.className = &#39;show&#39;;
  last_expanded = id;
  } else {
  obj.className = &#39;hide&#39;;
  }
  }
  </script>
• Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
  .dropdown-b {
  background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom: 10px;
  margin-top: 4px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .dropdown-bg {
  background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
  text-align:center;
  width:165px;
  font-family: georgia, Helvetica, sans-serif;
  padding-left:20px;
  padding-right:20px;
  padding-top:13px;
  padding-bottom: 10px;
  display:block;
  text-decoration: none;
  color: #000000;
  height: 8px;
  }
  .hide{
  display: none;
  }
  .show{
  display: block;
  }
  a{cursor: hand}
• Lalu klik Save Template.
• Kemudian klik menu Design > Page Element > Add a Gadget.
• Pilih HTML/Javascript, lalu masukkan kode berikut ini :
  <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
  <div id="dropdown-b-1" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
  <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
  <div id="dropdown-b-2" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
  <div id="dropdown-b-3" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
  <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
  <div id="dropdown-b-4" class="hide">
  <a href="URL" class="dropdown-bg">Link 1</a>
   <a href="URL" class="dropdown-bg">Link 2</a>
  <a href="URL" class="dropdown-bg">Link 3</a>
  <a href="URL" class="dropdown-bg">Link 4</a>
  </div>
• Terakhir klik tombol Save. Selesai...

Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Photoplus Blogger Template

Photoplus Blogger Template | Tutorial Blog

Template Features

Platform Type	Blogger / Blogspot
Template Name	Photoplus Blogger Template
Description	Photoplus is a free premium blogger template with 3 columns, gallery-styled, perfect for photologs and minimalist. Excellent layout for blogs about photography.
Template Author	http://btemplates.com/author/dante-araujo/
Designer	Dante Araujo
Instructions URL	How to install Blogger Template

Source : btemplates.com