Menambahkan Tombol Print yang Ramah Printer di Blog

Sebuah blog yang baik akan menyediakan sebuah menu/tombol agar pembaca atau pengunjungnya dapat mencetak halaman blog-nya untuk maksud dokumentasi. Jika blog/website tersebut mendukung bahasa PHP atau ASP, tentu akan lebih baik dalam mengorganisasi tampilan blognya ketika di cetak. Lain cerita jika anda menggunakan layanan blog gratisan seperti Blogger yang menyediakan dukungan HTML dan Javascript saja.

Code Print Halaman Blog Sederhana

Biasanya, pengguna Blogger menyertakan kode javascript dalam widget HTML dengan menuliskan kode berikut

<a href='nama-file.html' onClick='window.print();return false'>Cetak</a>

Kode di atas memang berfungsi dengan baik. Akan tetapi yang dicetak tentu saja seluruh halaman blog yang tampil dalam layar browser. Tentu saja akan sangat tidak enak untuk dibaca kembali ketika halaman yang sudah dicetak tersebut ada beberapa iklan yang terpampang (apalagi kalau iklannya ...)

Untuk membuktikannya anda bisa meng-klik tautan ini dan bandingkan hasilnya dengan tombol Cetak pada sidebar di halaman blog ini

Saya mempunyai sebuah solusi untuk mengatasi hal ini. Anda bisa membuang semua elemen yang tidak perlu ketika di cetak dengan menggunakan Javascript dan Elemen XML dari Blogger. Sehingga ketika di cetak yang tampil hanyalah bagian yang berisi artikel dan judulnya saja. Hasilnya pun menjadi lebih terlihat rapi dan bersih.

Code Print Halaman Blog yang Lebih Ramah untuk dicetak

Untuk mudahnya, anda tinggal memasukkan kode yang saya sertakan berikut dalam widget HTML blog anda dan simpan.
Anda bisa melihat contoh peng aplikasiannya di blog ini (lihat sidebar di kanan)

<iframe id="page-skin-1" name="print_frame" src="about:blank" style="display:none;"></iframe>
<script type="text/javascript">
//<![CDATA[
function printDiv(elementId) {
    var a = window.location + '#page-skin-1';
    var b = document.getElementById(elementId).innerHTML;
    window.frames["print_frame"].document.title = document.title;
    window.frames["print_frame"].document.body.innerHTML = '<link rel="stylesheet" type="text/css" href="' + a + '">' + b;
    window.frames["print_frame"].window.focus();
    window.frames["print_frame"].window.print();
}
//]]>
</script>
<a href="javascript:printDiv('Blog1');"><button class="idc" >Cetak</button></a>

Untuk menambahkan widget HTML ini, anda bisa membuka Dasbor Blogger kemudian masuk ke bagian Tata Letak. Dari sana anda bisa menambahkan widget di sidebar dengan meng-klik Add widget, dan pilih HTML & Javascript. copy dan paste-kan ke bidang yang di sediakan dan klik Simpan.

Penjelasan: Kode Javascript tersebut adalah untuk menyeleksi bagian eleman mana saja yang akan kita cetak. Pada kode tersebut saya menggunakan expresi XML blogger untuk mendefinisikan halaman saat ini dengan mengambil alamat yang ada di addres bar browser. Sehingga anda tidak perlu merubah apapun dari kode tersebut.

Menambahkan Streaming Radio ke Blog

streaming radio di Halaman Blog

Menambahkan Streaming Radio ke Blog sebenarnya sama mudahnya dengan Menambah audio ke Blog atau web. Hanya saja pada bagian atribut src yang kita letakkan di situ bukanlah lokasi sebuah file mp3, melainkan link dari alamat streaming dari radio online atau radio internet tersebut.

Sebagai contohnya lihat player di bawah ini:

Player audio diatas bisa dimainkan betulan loh ya.. Kebetulan saya memasukkan streaming dari radio SWARAGAMA Bogor sebagai contoh.

Lalu bagaimana cara agar player audio bisa memainkan sebuah streaming radio?. Jika anda sudah membaca artikel tentang menyisipkan lagu ke halaman blog sebelumnya anda tentu segera paham bagaimana menyisipkan streaming radio kedalam blog menggunakan HTML5 dengan TAG audio. Jika anda bisa memasukkan file MP3 dengan HTML5 ke blog, maka caranya adalah SAMA!

Sebagaimana saya sebutkan di depan, bahwa saya mengambil streaming radio nagaswara fm. nah, ini dia alamat streamingnya:

http://live2.nagaswarafm.com:8088

anda tinggal memasukkan kedalam atribut src dalan TAG source.

sehingga menjadi:

<source src="http://live2.nagaswarafm.com:8088" type="audio/mpeg">

Secara lengkap bisa dituliskan sebagai berikut:

<audio controls="controls">
<source src="http://live2.nagaswarafm.com:8088" type="audio/mpeg">
Your browser does not support the audio element.
</source></audio>

Mudah kan? Coba saja dulu menggunakan contoh diatas. Setelah berhasil memainkan radio online di blog, anda bisa mencari alamat streaming dari radio lain yang beredar di internet. Oh ya, anda juga bisa menggunakannya sebagai Widget Streaming Radio di Blog anda.

Dan sebagai bonus, berikut ini ada beberapa alamat streaming radio Indonesia yang bisa anda coba.
Prambors FM Jakarta

http://live.masima.co.id:9000

Suara Surabaya FM

mms://wma1.viastreaming.net/radioss

Hard Rock FM Jakarta

mms://hardrockfm.com/hardrock1

Bugis Radio

http://yp.bugis.nl:8001/stream

Kalau anda penikmat Drama Korea, mungkin anda juga tertarik dengan radio streaming korea berikut:
CAST CC Seoul

http://host9.rgro.net:8000

SoulNB Seoul

http://sc03.saycast.com:8002/

Selamat berkreasi dengan streaming radio

Menambah Audio ke Blog atau Web dengan HTML5

Player di Halaman Blog

Anda mungkin sudah bisa menambahkan lagu kedalam seuah halaman blog. Saya pernah membuat tutorial tentang menyisipkan file MP3 kedalam sebuah halaman blog atau web tetapi menggunakan sebuah player berbasis swf (silahkan baca artikel MENAMBAHKAN LAGU DI BLOG - EMBED MP3 DI WEB). disitu terlihat ketergantungan kita terhadap sebuah player swf yang dihosting di suatu tempat(server) yang akan digunakan sebagai alat untuk memutar file MP3 yang juga di hosting disuatu tempat yang lain. Jika suatu saat ternyata file SWF yang digunakan tersebut ternyata hilang/terhapus atau ada sebab yang lain yang menyebabkannya hilang bagaimana? atau ternyata browsernya tidak terinstall flashplayer bagaimana?

Tutorial Menghaluskan Scroll pada Halaman Blog

Scroll smoth yang saat ini saya ulas adalah scroll yang menargetan suatu halaman pada sebuah posting blog dengan target url tanpa harus menggunakan scroll browser atau yang biasa kita gunakan dengan scroll mouse, Maksud saya scrolling pada satu halaman yang sama. nah dari cara ini kita akan menggunakan beberapa script halus (saya terjemahkan saja seperti itu dari kata scroll smooth) dan penambahan scroll to top (kembali ke atas) jika naskah atau postingan kita terlalu panjang.

Biasanya jika kita menggunakan scroll atau menggulung dengan hash (#), contohnya memberi tampilannya akan seperti meloncat. Nah, dengan scroll smoth hal ini bisa membuat scrolling pada halaman terlihat lebih halus. Mari kita lihat langkah demi langkahnya.

Catatan: Bagi yang belum mengerti dengan teknik ini silahkan di baca keterangan mengenai Kontribusi dengan HTML yang menentukan penargetan URL dan ID

Sebelum mencoba tutorial ini pastikan bahwa di blog sudah ada JQuery Library agar bisa berjalan dengan baik. jika belum ada maka gunakan script berikut untuk memasukkan JQuery kedalam Blog
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Javascript yang digunakan untuk menghaluskan Scroll atau penggulungan halaman adalah sebagai berikut:

<script>
  $(function () {

    function filterPath(string) {
      return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
    }

    var locationPath = filterPath(location.pathname);
    var scrollElem = scrollableElement('html', 'body');

   //Setiap link dengan tag hash di dalamnya (tidak bisa melakukan ^ = untuk mengecek bahwa link berada di halamn yg sama)
    $('a[href*=#]').each(function () {

      // Pastikan link-nya adalah halaman yang sama
      var thisPath = filterPath(this.pathname) || locationPath;
      if (locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/, '')) {

        // Pastikan target
        var $target = $(this.hash),
          target = this.hash;
        if (target) {

          // Cari lokasi dari target
          var targetOffset = $target.offset().top;
          $(this).click(function (event) {

            // Mencegah jump-down
            event.preventDefault();

            // Animate untuk menargetkan
            $(scrollElem).animate({
              scrollTop: targetOffset
            }, 400, function () {

              // Set hash URL setelah animasi sukses
              location.hash = target;

            });
          });
        }
      }

    });

    // Gunakan elemen pertama yaitu "scrollable" (memperbaiki masalah lintas platform browser)
    function scrollableElement(els) {
      for (var i = 0, argLength = arguments.length; i < argLength; i++) {
        var el = arguments[i],
          $scrollElement = $(el);
        if ($scrollElement.scrollTop() > 0) {
          return el;
        } else {
          $scrollElement.scrollTop(1);
          var isScrollable = $scrollElement.scrollTop() > 0;
          $scrollElement.scrollTop(0);
          if (isScrollable) {
            return el;
          }
        }
      }
      return [];
    }

  });
</script>

Contoh peng-aplikasi-an pada HTML (untuk memposting mode ini gunakan mode HTML bukan Compose)

<ul>
          <li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
          <li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
        </ul>
       
        <h1 id="contoh1">Halaman 1</h1>
       
        <p> ........ Kalimat atau isi postingan blog ........... </p>
       
        <h1 id="contoh2">Halaman 2</h1>
       
        <p><a href="#main">Top</a></p>

        <p> ........ Kalimat atau isi postingan blog ........... </p>
       
        <h1 id="contoh3">Halaman 3</h1>
       
        <p><a href="#main">Top</a></p>

        <p> ........ Kalimat atau isi postingan blog ........... </p>

Cara Membuat Link dari dan ke Halaman Yang Sama

Menargetkan link pada halaman yang sama tapi pada bagian yang berbeda ini banyak digunakan pada web-web ensiklopedia semacam wikipedia.org atau web yang mengandung banyak teks. Tetapi penggunaannya tidak terbatas untuk itu. Teknik ini juga saya gunakan di beberapa artikel saya yang terdahulu. Teknik Menargetkan link pada halaman yang sama ini biasa disebut sebagai Contribution Link.

Menargetkan link pada halaman yang sama ini menggunakan penargetan ID dari halaman yang sama. Misalnya, dengan menargetkan pada ID tertentu misalnya <a href='#contoh'>link contoh</a>, maka link akan menuju tag dengan ID 'contoh'. Misalnya <div id='contoh'>div</div> atau <span id='contoh'>span</span> bahkan format heading jika di beri ID seperti <h1 id=''>contoh heading</h1> dan lain sebagainya.

Untuk bahan praktek silahkan lihat Contribution Link dengan HTML yang menentukan penargetan URL dan ID berikut:

<ul>
 <li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
 <li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
</ul>

Url target harus sama dengan halaman target yang di tandai dengan target ID.
Ket :
no 2 menargetkant link unuk menuju pada halaman 2 dengan url target #contoh2.
no 2 menargetkant link unuk menuju pada halaman 3 dengan url target #contoh3.
Lihat contoh berikut

<h1 id="contoh2">Halaman 2</h1>
  <p><a href="#main">Top</a></p>

Baris pertama menandakan ID untuk kembali pada menu halaman dengan target #contoh1 yang sama.
Baris kedua menandakan untuk kembali ke tag yang diberi ID #main atau #top (biasanya tiap blog mempunyai ID ini untuk menandai bagian posting) atau kembali ke bagian awal.

Jika keseluruhan HTML di atas digabungkan maka akan menghasilkan HTML seperti di bawah ini

<ul>
 <li><a href="#contoh2">Scroll Ke Halaman 2</a></li>
 <li><a href="#contoh3">Scroll Ke Halaman 3</a></li>
</ul>
 <h1 id="contoh1">Halaman 1</h1>
  <p> ........ Isi Artikel/Naskah/Posting ........... </p>
 <h1 id="two">Halaman 2</h1>
  <p><a href="#main">Top</a></p>
  <p> ........ Isi Artikel/Naskah/Posting ........... </p>
 <h1 id="three">Halaman 3</h1>
  <p><a href="#main">Top</a></p>
  <p> ........ Isi Artikel/Naskah/Posting ........... </p>

Dengan cara menargetkan link pada halaman yang sama kita bisa membuat satu halaman yang sangat panjang dengan shostcut untuk menuju ke bagian tertentu dari halaman tersebut dengan meletaknnya di bagian paling atas artikel. Contohnya adalah seperti di wikipedia.org seperti saya singgung sebelumnya.