• Login
  • Register
    • Showing posts with label Tips Blog. Show all posts
    Showing posts with label Tips Blog. Show all posts

    Aug 6, 2011

    Cara Menambahkan Kolom Baru Pada Halaman Blog

    AKTUAL NEWS ONLINE 8:52 AM
    Kolom halaman dalam sebuah blog merupakan elemen penting yang berguna untuk menambahkan berbagai widget kedalam blog kita. Namun kadang template yang kita miliki kurang sesuai dengan apa yang kita inginkan. Ada kalanya kita ingin menambahkan widget di bagian tertentu tapi tidak tersedia kolom untuk itu. Jika demikian, tentu kita harus menambahkan kolom baru kedalam template blog tersebut.

    Cara untuk menambahkan kolom baru tersebut sebenarnya tidak terlalu sulit. Kita tinggal menambahkan kode CSS kedalam template blog kita lalu memberikan perintah HTML pada body template tersebut. Berikut adalah langkah-langkah yang harus kamu lakukan:
    • Seperti biasa, Login ke blogger.
    • Dari dasbor klik Elemen Halaman dan pilih Edit HTML.
    • Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
    • Buatlah kode CSS di atas ]]></b:skin> seperti contoh berikut:
      /* Tambahan Dua Kolom */
      #tambah {
      width:300px;
      height:auto;
      position: relative;
      float: right;
      margin: 5px 0 0 0;
      padding: 0px;
      font-size: 12px Arial, Helvetica, sans-serif;
      }

      #kiri {
      width: 150px;
      float: left;
      padding: 0 5px 0 5px;
      }

      #kanan {
      width: 130px;
      float: right;
      padding: 0 5px 0 5px;
      }

      Pada perintah tersebut, kolom ditempatkan di sebelah kanan dengan margin atas 5px (putaran jarum jam: atas, kanan, bawah, kiri) dan lebar kolom 300px, yang terbagi untuk kolom kiri 150px dan kanan 130px. Masing-masing kolom memiliki jarak dalam kolom (padding) kiri dan kanan 5px.
      Kamu dapat membuatnya sesuai dengan ukuran dan posisi yang kamu inginkan. Tapi jangan lupa, jika ukuran kolom utama 300px maka ukuran kolom-kolom lain ditambah margin kiri dan kanan tidak boleh melebihi 300px.
    • Setelah itu buatlah kode HTML yang diletakkan di antara <body> dan </body> (tergantung mau diletakkan dimana, di header, side, atau footer), misalnya seperti berikut:
      <div id='tambah'>
      <b:section class='tambah' id='kiri' showaddelement='yes'>
      </b:section>

      <b:section class='tambah' id='kanan' showaddelement='yes'>
      </b:section>
      </div>
    • Lakukan pratinjau, jika OK, simpan dan ucapkan alhamdulillah...

    Contoh hasil yang bisa kamu lihat:
    • Tambahan 3 kolom di header dapat dilihat di blog ini (lihat jam, asmaulhusna, dan slide foto).
    • Tambahan 2 kolom di header dapat dilihat di blog ini (lihat slide foto dan logo).
    • Tambahan 1 kolom di atas footer dapat dilihat di blog ini (lihat banner sahabat).

    Nah, segitu aja dulu coy... Selamat mencoba!!!
    Read More

    Cara Membuat Script Link Banner Dengan Sekali Klik

    AKTUAL NEWS ONLINE 8:49 AM
    Biasanya saya menulis hal yang berbau HTML karena ada sobat "dunia nyata" yang nanyain, baik melalui SMS, message on shoutbox, atau lewat cuap-cuap di darat, seperti tulisan tentang related post (artikel terkait), membuat bingkai, dll. Nah, tulisan kali inipun disebabkan hal serupa.

    Untuk membuat script link banner sebenarnya gampang saja. Hal pertama yang harus dimiliki adalah sebuah situs (hehe... kecele). Baru kemudian memiliki gambar banner yang tersimpan dalam sebuah situs penyimpan foto/gambar (image hosting). Untuk membuat gambar banner, kamu bisa memakai aplikasi CorelDraw, Photoshop, atau aplikasi lain yang kamu kuasai. Tapi kalau kamu tidak menguasai aplikasi-aplikasi tersebut, kamu bisa membuatnya melalui situs CoolText ini. Nah, jika persyaratan ini sudah terpenuhi, baru kamu bisa bikin script link banner.

    Lalu bagaimana cara memasukkan script tersebut kedalam bingkai (kotak)? Seperti yang sudah dijelaskan pada artikel cara membuat bingkai (kotak), kamu harus melakukan encoding terlebih dahulu terhadap script tersebut agar tidak dianggap sebagai suatu perintah oleh komputer, setelah itu baru kamu masukan kedalam bingkai (kotak). Dan untuk membingkainya kamu bisa menggunakan perintah overflow atau textarea.

    Masih pusing? Ok, kita cari gampang aja ya. Nih aku berikan contoh script yang dibingkai oleh textarea. Bingkai textarea digunakan karena bisa diberi tambahan perintah supaya ketika diklik langsung nge-block script yang ada di dalamnya.
    <textarea rows="3" cols="23" onclick="select(this)">&lt;a href="URL Situs" target="_blank" title="Keterangan Situs"&gt;&lt;img style="border:0px; margin-top:5px; width:120px; height:50px;" alt="Nama Situs" src="URL Gambar Banner"/&gt;&lt;/a&gt;</textarea>

    Kamu tinggal mengganti URL Situs, Keterangan Situs, Nama Situs dan URL Gambar Banner sesuai keinginan kamu. Kamu juga bisa mengubah ukuran baris (rows) dan kolom (cols) textarea disesuikan dengan lebar sidebar blog kamu, juga mengubah pengaturan margin atas (margin-top), lebar (width), dan tinggi (height) banner kamu. Sedangkan mengenai perintah target dan title dapat kamu pelajari pada artikel ini.

    Jika kamu ingin menampilkan preview (pratinjau) untuk link banner tersebut, kamu tinggal menambahkan script berikut di bawah atau di atas script tadi.
    <a href="URL Situs" target="_blank" title="Keterangan Situs"><img style="border:0px; margin-top:5px; width:120px; height:50px;" alt="Nama Situs" src="URL Gambar Banner"/></a>

    Jika gambar banner kamu terlalu besar, kamu tinggal mengatur lebar (width) dan tinggi (height) gambar disesuaikan dengan lebar sidebar blog kamu.

    Ok coy, segitu aja ya penjelasannya. Selamat mencoba..
    Sumber :http://ruangsc.blogspot.com
    Read More

    Cara Mudah mengedit HTML pada blog

    AKTUAL NEWS ONLINE 8:41 AM
    Biasanya kita mengalami kesulitan dalam mengedit HTML blog, apalagi kotak editing pada halaman Posting atau pada halaman Layout (Tata Letak) memiliki ruang yang sangat terbatas. Sebenarnya ada cara mudah untuk melakukan editing HTML tersebut yaitu dengan cara mengeditnya melalui Notepad, yang hasilnya nanti (jika di-save) akan menjadi file yang ber-ekstensi txt.

    Langkah-langkahnya adalah seperti berikut:
    • Buka aplikasi Notepad dengan cara mengklik menu Start Windows, pilih All Program, pilih Accessories, lalu klik Notepad.
    • Masuklah ke halaman Posting atau halaman Layout dimana berkas HTML kamu berada.
    • Blok semua berkas tersebut dengan cara menekan tombol Control A, lalu kopi dengan cara menekan tombol Control C.
    • Tempelkan (paste) berkas HTML tersebut di halaman aplikasi Notepad dengan cara menekan tombol Control V.
    • Nah, sekarang kamu tinggal melakukan editing dengan leluasa.

    Jika ada kata/kalimat yang ingin dicari dari berkas tersebut, kamu tinggal menekan tombol Control F. Dan jika inggin mengganti kata/kalimat, kamu tinggal menekan Control H.

    Selain dengan menggunakan Notepade, kamu juga bisa menggunakan aplikasi MsWord. Hanya saja pada MsWord ini tanda petik pada setiap kode script suka tidak bisa dibaca, jadi kamu harus mengedit ulang pada halaman Posting atau halaman Layout.
    Jika kamu menggunakan aplikasi ini sebaiknya pada waktu menyimpan file, kamu gunakan format XML Documents.

    Setelah selesai melakukan editing pada Notepad atau MsWord, kopikan lagi hasil editing ini kedalam halaman Posting atau halaman Layout tadi.
    Mudah kan? Ok, selamat mencobanya.
    Read More

    Cara Menambah Related Post Artikel Terkait pada artikel blog

    AKTUAL NEWS ONLINE 8:39 AM

    Sehubungan ada sohib yang subuh-subuh sudah sms nanyain tentang bagaimana cara bikin Related Post (Artikel Terkait), akhirnya harus nulis juga mengenai Related Post ini meski baru aja semalam aku curat-coret di blog ini. Ga pa pa kan? Demi sohib dan kamu semua aku rela mati (baca: makan timbel) deh, hehehe...

    Sebenarnya apabila kita searching mengenai Related Post ini maka akan muncul puluhan tulisan seputarnya, baik yang dalam bahasa asing maupun bahasa kita (sayang blum ada dalam bahasa sunda unk). Tapi kalo kamu males “kakaratak” and milih-milih artikel yang pas, baca aja tulisan ini, mudah-mudahan bisa kamu terima dengan suka cita dan lapang dada, hehehe...

    Fungsi Related Post adalah untuk menunjukkan artikel-artikel yang berhubungan dengan suatu kategori atau label dari sebuah tulisan. Dengan adanya Related Post ini, si pembaca dapat langsung melihat artikel terkait sehingga bisa langsung meg-klik-nya tanpa harus membuka-buka Blog Archieves.

    Untuk menambahkan Related Post dalam blog, kamu bisa mengikuti langkah-langkah berikut :
    • Login terlebih dahulu ke akun blogger kamu.
    • Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
    • Kemudian centrang pada Expand Template Widget.
    • Carilah kode <data:post.body/> (gunakan Control F atau F3).
    • Letakkan kode script berikut di bawahnya:
      <!-- Mulai Related Post -->
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div style='margin-top:20px; padding:0px 10px; border:2px solid #CCC'>
      <div class='related-posts'>

      <div class='widget-content'>
      <h4>Artikel terkait dengan kategori ini:</h4>
      <div id='datablogku' style='margin:10px 0px 10px 0px'/>

      <script type='text/javascript'>
      var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
      var maxNumberOfPostsPerLabel = 4;
      var maxNumberOfLabels = 10;

      maxNumberOfPostsPerLabel = 100;
      maxNumberOfLabels = 3;

      function listEntries10(json) {
      var ul = document.createElement(&#39;ul&#39;);
      var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
      json.feed.entry.length : maxNumberOfPostsPerLabel;
      for (var i = 0; i &lt; maxPosts; i++) {
      var entry = json.feed.entry[i];
      var alturl;

      for (var k = 0; k &lt; entry.link.length; k++) {
      if (entry.link[k].rel == &#39;alternate&#39;) {
      alturl = entry.link[k].href;
      break;
      }
      }
      var li = document.createElement(&#39;li&#39;);
      var a = document.createElement(&#39;a&#39;);
      a.href = alturl;

      if(a.href!=location.href) {
      var txt = document.createTextNode(entry.title.$t);
      a.appendChild(txt);
      li.appendChild(a);
      ul.appendChild(li);
      }
      }
      for (var l = 0; l &lt; json.feed.link.length; l++) {
      if (json.feed.link[l].rel == &#39;alternate&#39;) {
      var raw = json.feed.link[l].href;
      var label = raw.substr(homeUrl3.length+13);
      var k;
      for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
      var txt = document.createTextNode(label);
      var h = document.createElement(&#39;b&#39;);
      h.appendChild(txt);
      var div1 = document.createElement(&#39;div&#39;);
      div1.appendChild(h);
      div1.appendChild(ul);
      document.getElementById(&#39;datablogku&#39;).appendChild(div1);
      }
      }
      }
      function search10(query, label) {

      var script = document.createElement(&#39;script&#39;);
      script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
      + label +
      &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
      script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
      document.documentElement.firstChild.appendChild(script);
      }

      var labelArray = new Array();
      var numLabel = 0;

      <b:loop values='data:posts' var='post'>
      <b:loop values='data:post.labels' var='label'>
      textLabel = &quot;<data:label.name/>&quot;;

      var test = 0;
      for (var i = 0; i &lt; labelArray.length; i++)
      if (labelArray[i] == textLabel) test = 1;
      if (test == 0) {
      labelArray.push(textLabel);
      var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
      labelArray.length : maxNumberOfLabels;
      if (numLabel &lt; maxLabels) {
      search10(homeUrl3, textLabel);
      numLabel++;
      }
      }
      </b:loop></b:loop>
      </script>
      </div></div>
      <!-- Terimakasih karena anda tidak menghapus link ini -->
      <div style='font-size:85%; float:right; margin-top:3px;'><a href='http://ruangsc.blogspot.com/2009/06/menampilkan-related-post-artikel.html' target='_blank' title='Cara membuat Related Post'>Widget by SC Community</a>
      </div></div>
      </b:if>
      <!-- Akhir Related Post -->


      Catatan:
      » Ukuran yang diberi warna merah bisa kamu ubah.
      » Jika kamu sudah menggunakan script Readmore ini, letakkan kode tersebut di bawah <data:post.body/> yang pertama (paling atas). Jika berbeda, kamu bisa mencobanya di bawah <data:post.body/> yang kedua (paling bawah).
      » Jika kamu sudah menambahkan Icons Social Bookmarking atau Addthis Sharing Tools, letakkan kode tersebut dibawah script Icons Social Bookmark atau Addthis Sharing Tools.
    • Simpan hasil edit kamu dan ucapkan Alhamdulillah....

    Mudah kan? Nah, sekarang kamu tinggal melihat hasilnya.
    Selamat mencoba...
    Read More

    Cara Mengalihkan Alamat Situs/Web (Redirect URl) pada Blogspot

    AKTUAL NEWS ONLINE 8:37 AM
    Ketika mulai belajar blog, mungkin kamu punya sebuah blog buat coba-coba. Ya, namanya juga coba-coba, tentu blog ini terlihat jelek dan acak-acakan sehinga kamu tidak mau ada orang lain yang melihatnya. Malu kan kalau ketahuan jeleknya, hehehe.... Jika blog "coba-coba" ini tidak ingin terlihat oleh orang lain pada blogger profile kamu, kamu dapat mempelajarinya. .

    Lalu bagaimana jika alamat blog ini sudah terlanjur diketahui dan sering dibuka orang lain padahal kamu tidak menginginkannya? Untuk mengatasi ini kamu bisa mengalihkan URL (redirect URL) blog kamu ke alamat (URL) blog kamu yang baru. Pengalihan ini bisa juga kamu lakukan terhadap blog-blog kamu yang sudah "diistrirahatkan".

    Pengalihan Langsung
    Yang saya maksudkan dengan pengalihan langsung ini adalah pengalihan alamat tanpa mengubah isi dan layout blog yang akan dialihkan. Caranya sebagai berikut:
    • Dari halaman dasbor blogger, pilih Tata Letak - Edit HTML.
    • Letakkan script berikut di bawah kode <head>:
      <meta content='5; URL= http://NamaBlogBaru.blogspot.com' http-equiv='refresh'/>
    • Gantilah NamaBlogBaru dengan nama blog yang akan dituju.
    • Kamu juga bisa mengatur waktu pengalihannya. Pada script di atas, pengalihan akan dilakukan setelah 5 detik.
    • Simpan hasil editing ini dan ucapkan Alhamdulillah.....

    Pengalihan Tidak Langsung
    Pengalihan tidak langsung ini maksudnya adalah membuat sebuah pemberitahuan bahwa URL blog tersebut telah dialihkan. Misalnya, blog SC Community URL asalnya http://ruang-sc.blogspot.com di alihkan ke URL baru http://ruangsc.blogspot.com maka dibuat pemberitahuan seperti ini (klik untuk melihatnya).

    Cara membuatnya sebagai berikut:
    • Dari halaman dasbor blogger, pilih Tata Letak - Edit HTML.
    • Hapus semua script template kamu dan gantikan dengan script berikut:
      <?xml version="1.0" encoding="UTF-8" ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
      <head>
      <b:include data='blog' name='all-head-content'/>
      <title><data:blog.pageTitle/></title>
      <b:skin><![CDATA[/*

      -----------------------------
      PENGALIHAN ALAMAT BLOGSPOT
      -----------------------------*/

      #navbar-iframe {height:0px; visibility:hidden; display:none }

      body {
      background: #E2DDCB url( );
      width: 980px;
      color: #333333;
      font-size: 12px;
      font-family: Verdana;
      margin: 50px auto 10px;
      padding: 0px;
      }

      a, a:visited {color: #7A3254; text-decoration: none;}
      h1 {font-size: 30px; font-weight: bold; text-transform:uppercase;}
      h2 {font-size: 24px font-weight: bold;letter-spacing: -1px;}
      h3 {font-size: 18px; font-weight: normal;}
      h4 {font-size: 16px; font-weight: normal;}

      #wrap {
      background: #F7F5EF;
      width: 700px;
      margin: 0px auto 0px;
      padding: 40px 0px;
      position: relative;
      border: 10px solid #D4CFBB;
      text-align:center;
      line-height:20px
      }

      #footer{
      width: 980px;
      margin: 20px auto;
      text-align: right;
      font-size: 10px;
      }

      ]]></b:skin>
      <script src='http://enes-sc.googlecode.com/files/rainbowlink.js' type='text/javascript'/>

      </head>
      <body>
      <div id='wrap'>

      <h2><blink>PEMBERITAHUAN !!!</blink></h2>

      <!-- Gambar Micky Mouse -->
      <img src='http://i563.photobucket.com/albums/ss76/peace_enes/Mickey.gif' style='border:0; margin:10px; width:100px'/>

      <!-- Judul Blog -->
      <h1><data:blog.pageTitle/></h1>

      <!-- Deskripsi Blog -->
      <h2>(Ganti dengan deskripsi blog kamu)</h2>

      <h4>Telah dipindahkan ke alamat :</h4>

      <!-- Alamat Blog Baru -->
      <h3><a href='http://NamaBlogBaru.blogspot.com' title='Klik untuk mengunjunginya!'>http://NamaBlogBaru.blogspot.com</a></h3>

      </div>

      <div id='footer'>
      Design by <a href='http://ruangsc.blogspot.com/2010/03/cara-mengalihkan-alamat-situs-redirect.html' target='_blank' title='Mau tahu caranya? Klik aja!'>Kang eNeS</a>
      </div>

      </body>
      </html>
    • Gantilah deskripsi blog sesuai deskripsi blog kamu, dan ganti pula NamaBlogBaru dengan nama blog yang akan dituju.
    • Jika kamu inginkan, kamu juga bisa mengubah warna, jenis huruf, dan gambar-nya.
    • Simpan hasil editing ini dan ucapkan Alhamdulillah.....

    Selain cara di atas, kamu juga bisa menggabungkan dua cara tersebut sehinga orang lain tidak perlu mengklik URL yang baru jika ingin mengunjunginya.

    Nah, segitu aja brow, mudah-mudahan bermanfaat. Selamat mencoba..
    Sumber :http://ruangsc.blogspot.com
    Read More

    Membuat Scroll dalam Postingan Artikel

    AKTUAL NEWS ONLINE 8:19 AM
    Beberapa waktu lalu saya telah memuat artikel tentang cara membuat scroll pada blok komentar, blog archive, label, link list, dan blog list pada blog ini (SC Community). Dan kali ini, atas tuntutan permintaan salah seorang sobat blogger, saya masih akan membahas seputar scroll tersebut, namun kali ini peletakkannya pada halaman posting blog.

    Membuat scroll pada halaman posting dapat dijadikan sebagai salah satu alternatif untuk mengirit halaman blog, selain menggunakan readmore. Disamping itu, selain caranya yang mudah dibandingkan dengan membuat readmore, scroll pada halaman posting dapat membuat tampilan blog menjadi agak berbeda dari blog-blog lain yang umumnya menggunakan readmore.

    Langkah-langkah untuk membuat scroll pada halaman posting ini adalah sebagai berikut:
    • Login ke akun Blogger kamu.
    • Dari halaman Dasbor, pilih Rancangan - Edit HTML.
    • Beri tanda centrang pada Expand Template Widget.
    • Kemuadian cari kode berikut:
      <div class='entry'>

      Pada beberapa template kodenya bisa seperti ini:
      <div class='post uncustomized-post-template'>

      atau seperti ini
      <div class='post hentry uncustomized-post-template'>
    • Setelah ketemu, tambahkan perintah style='height:250px; overflow:auto' kedalamnya, sehingga menjadi seperti ini:
      <div class='entry' style='height:250px; overflow:auto'>

      Ukuran tinggi 250px bisa kamu ubah sesuai keinginan kamu.
    • Simpanlah hasilnya lalu ucapkan Alhamdulillah...

    Sangat mudah kan?
    Read More

    Menambah Widget Translate Bahasa pada blog

    AKTUAL NEWS ONLINE 8:18 AM

    Bahasan ini mungkin terbilang basi bagi sobat yang sudah lama malang melintang di dunia per-blog-an. Tapi bagi sobat yang baru "turun gunung", hal ini mungkin masih terbilang asing, terbukti masih ada yang mencarinya pada kotak pencarian SC Community.

    Jika sobat mau sedikit mencarinya, sebenarnya Google sudah menyediakan banyak gadget yang bisa ditambahkan kedalam blog. Coba saja kunjungi Gadget Directory-nya Google, disana terdapat ribuan gadget yang bisa kamu tambahkan, termasuk widget Google Translate.

    Tapi untuk memuaskan sobat-sobat yang baru "turun gunung", sekaligus supaya tidak pusing mencarinya, maka berikut ini saya akan memberikan link langsung ke Google Translate yang biasa digunakan. Kamu tinggal mengkopi script-nya saja kemudian tempelkan (paste) pada gadget HTML blog kamu.

    Pertama, Google Translate Tools.
    Dengan translate ini kamu hanya tinggal mengatur pilihan bahasa yang digunakan pada blog kamu, setelah itu kopikan script yang ada di bawahnya.

    Kedua, Google Translate My Page
    Pada translate ini kamu tidak bisa mengatur pilihan bahasa kedalam bahasa Indonesia, karena itu setelah mengklik Get the Code dan mengkopi kode script-nya, kamu harus mengubah up_source_language=en (en = English) menjadi up_source_language=id (id = Indonesia).

    Untuk pilihan translate yang lainnya silahkan saja cari sendiri di Google Translate
    Read More

    Memasukan Tanda tangan ke postingan artikel

    AKTUAL NEWS ONLINE 8:17 AM
    Tanda tangan dalam sebuah artikel mungkin tidak lazim dilakukan pada tulisan-tulisan biasa di dunia nyata, tapi tidak begitu jika kaitannya dengan dunia maya. Sebuah tanda tangan di akhir setiap artikel (posting) menjadi kelihatan lebih menarik dan berfungsi sebagai peneguhan akan tulisan pribadi, baik berupa saduran, suntingan tulisan orang lain, atau karya sendiri (jiplakan gak termasuk, hehehe...).

    Untuk membuat tanda tangan (signature) ini kamu bisa membuatnya dengan Photoshop, Corel, atau yang lainnya. Bisa juga dengan cara scanning terhadap tanda tangan kamu sendiri. Namun jika kamu ingin yang lebih praktis, kamu bisa mengunjungi situs www.mylivesignature.com. Sesuai namanya, situs ini mengkhususkan diri dalam pembuatan tanda tangan.

    Jika kamu ingin memasukkan tanda tangan kedalam artikel blog, ikutilah langkah-langkah berikut:

    Langkah Pertama
    • Bukalah situs www.mylivesignature.com, kemudian klik pada Click Here To Start.
    • Setelah itu pilih Using the signature creation wizard.
    • Isikan nama kamu pada kotak, lalu klik Next Step.
    • Pilih jenis huruf sesuai seleramu, klik Next Step.
    • Pilih ukuran huruf yang dinginkan, klik Next Step.
    • Pilih background dan warna huruf sesuai seleramu (jika ingin dengan background trasnparan, beri centrang pada kotak Trasnparent), klik Next Step.
    • Pilih slope sesuai sesuai seleramu, klik Next Step.
    • Klik kanan mouse, pilih Copy Image Location.
    • Jika kamu inginkan, simpan image tanda tangan ini pada hosting image punyamu.

    Langkah Kedua
    • Dari halaman dasbor, klik Tata Letak - Edit HTML.
    • Beri tanda centrang pada Expand Template Widget.
    • Kemudian cari kode berikut (gunakan Control F atau F3):
      <p><data:post.body/></p>

      Jika tidak ketemu (karena tiap template berbeda-beda kodenya), cari kode <data:post.body/>. Dan jika ada dua buah (karena sudah menambahkan readmore), pilih kode yang pertama.
    • Lalu masukkan syntax berikut di bawahnya:
      <img src='URL Image' style='border:0px; width:100px;'/>

      Jika ingin diletakkan di sebelah kanan, buat perintahnya seperti ini:
      <div style='text-align:right; margin:5px 10px 0 0'><img src='URL Image' style='border:0px; width:100px;'/></div>
    • Ganti URL Image dengan URL image tanda tanganmu, dan atur lebar (width)-nya.
    • Simpan hasil ... selamat..
    Read More

    Membuat Daftar isi pada postingan artikel

    AKTUAL NEWS ONLINE 8:15 AM
    Seperti pada tiga tulisan sebelumnya, kali inipun masih membicarakan mengenai daftar isi (table of content) yang di tempatkan pada halaman artikel. Pada postingan Bagian IV ini saya akan mengenalkan daftar isi hasil The Blog Doctor, yang instruksi-instruksi cara pembuatannya saya ubah karena jika membaca aslinya agak susah dipahami (belagu ya? hehehe...)

    Dari hasil uji coba, ternyata daftar isi bikinan Blog Doctor ini selain dapat ditempatkan pada sidebar blog (aslinya ditempatkan pada sidebar), juga bisa kita tempatkan pada halaman artikel blog kita. Kelebihan lainnya adalah dapat menampilkan judul-judul artikel secara slide (berikut rangkumannya) yang ditempatkan di atas daftar isi. Sayangnya, untuk membuat daftar isi lumayan agak ribet, hehehe... Tapi don wori, gak susah kok!

    Jika kamu tertarik untuk membuat daftar isi ini ikuti langkah-langkah berikut:
    • Dari halaman dasbor, pilih Pengaturan - Feed Situs.
    • Pada bagian Izinkan Feed Blog pilih singkat lalu save.
    • Kopikan kode berikut (gunakan Control C) dan ganti tulisan berwarna merah sesuai dengan kode API, nama blog, dan judul blog kamu:
      <div id="feed-control">
      <span style="margin:10px;padding:4px;">Loading...</span>
      </div>
      <script src="http://www.google.com/jsapi?key=Kode API"
      type="text/javascript"></script>
      <script src="http://enes-sc.googlecode.com/files/dynamicfeedcontrol.js"
      type="text/javascript"></script>
      <style type="text/css">
      @import url("http://enes-sc.googlecode.com/files/dynamicfeedcontrol.css");
      </style>
      <script type="text/javascript">
      function LoadDynamicFeedControl() {
      var feeds = [
      {title: 'Daftar Isi',
      url: 'http://NamaBlog.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
      }];
      var options = {
      stacked : true,
      horizontal : false,
      title : "Judul Blog"
      }
      new GFdynamicFeedControl(feeds, 'feed-control', options);
      }
      // Load the feeds API and set the onload callback.
      google.load('feeds', '1');
      google.setOnLoadCallback(LoadDynamicFeedControl);
      </script>
      <div style="float:right; font-size:87%;">Widget by <a href="http://ruangsc.blogspot.com/2010/02/membuat-daftar-isi-blog-pada-halaman_05.html" target="_blank" title="Caranya ada di sini!">SC Community</a></div>

      Untuk mendapatkan Kode API, silahkan Login di sini lalu masukkan URL Blog kamu.

    Menempatkan Daftar Isi Pada Sidebar Blog
    Jika kamu ingin menempatkan daftar isi ini pada sidebar blog kamu, sebaiknya pilih sidebar yang agak lebar. Berikut langkah-langkahnya:
    • Dari halaman dasbor pilih Tata Letak - Elemen Halaman.
    • Klik Tambah Gadget dan pilih HTML/JavaScript.
    • Masukkan (copy-paste) script daftar isi di atas.
    • Jika kamu ingin menambahkan scroll supaya tidak terlalu panjang, tambahkan perintah berikut:
      <div style="overflow:auto; margin:auto; padding:3px; width:auto; height:200px;">Script Daftar Isi</div>

      Sesuaikan ukuran tingginya jika kamu inginkan.
    • Setelah selesai, simpan hasilnya dan ucapkan Alhamdulillah...

    Contoh gambar daftar isi yang di tempatkan pada sidebar blog:

    Menempatkan Daftar Isi Pada Halaman Artikel
    Jika kamu ingin menempatkan daftar isi ini pada halaman artikel blog kamu, langkah-langkahnya sebagai berikut:
    • Dari halaman dasbor pilih Entri Baru - Edit HTML.
    • Berilah judul, misalnya: Daftar Isi.
    • Klik pada Opsi Entri dan setting supaya dipublikasikan mundur (ke tanggal pertama kali kamu posting).
    • Masukkan (copy-paste) script daftar isi di atas.
    • Setelah di-paste, klik Terbitkan Entri dan ucapkan Alhamdulillah...

    Seperti pada pembuatan daftar isi bagian I dan II, jika kamu memilih menempatkan daftar isi ini pada halaman artikel maka harus membuatkan link untuknya yang bisa kamu tempatkan di navbar menu atau di sidebar.
    Read More

    Tag Cloud Animasi dan Non Animasi dengan javaascript

    AKTUAL NEWS ONLINE 7:31 AM
    Sebelumnya saya sudah memaparkan bagaimana cara menambahkan tag Cloud non-animasi dengan menggunakan gadget blogger. Nah, kali ini saya akan membahas bagaimana cara menambahkan tag Cloud non-animasi dengan menggunakan javascript. Karena seperti yang sudah dijelaskan pada tulisan sebelumnya, bahwa tidak semua template mendukung tag Cloud gadget blogger, seperti template Jeans 3C. Template-template ini biasanya merupakan hasil konversi dari template wordpress. Jadi untuk template jenis ini sebaiknya menggunakan javascript jika kamu ingin menambahkan widget tag Cloud.

    Cara menambahkan tag Cloud non-animasi dengan javascript ini (yang animasi, tunggu saja tulisan berikutnya, hehehe.....), sebenarnya saya ambil dari Suriyadi.com, dengan sedikit melakukan perubahan script HTML-nya. Berikut adalah langkah-langkahnya:
    • Seperti biasa, Login ke akun Blogger kamu.
    • Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
    • Duplikasi template untuk berjaga-jaga jika terjadi masalah.
    • Kopikan kode CSS berikut:
      /* Label Cloud Non-animasi Styles
      ----------------------------------------------- */
      #labelCloud {text-align:center;font-family:arial,sans-serif;}
      #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
      #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
      #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
      #labelCloud a{text-decoration:none}
      #labelCloud a:hover{text-decoration:none; font-weight:bold}
      #labelCloud li a{}
      #labelCloud .label-cloud {}
      #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
      #labelCloud .label-cloud li:before{content:"" !important}
    • Letakkan kode CSS tersebut di atas kode ]]></b:skin>.
      Untuk memudahkan pencarian, tekan Control F atau F3.
    • Kemudian kopikan script berikut:
      <script type='text/javascript'>
      // Label Cloud User Variables
      var cloudMin = 1;
      var maxFontSize = 20;
      var maxColor = [0,0,255];
      var minFontSize = 10;
      var minColor = [0,0,0];
      var lcShowCount = false;
      </script>
    • Letakkan script tersebut di bawah kode ]]></b:skin>.
    • Selanjutnya kopikan script berikut:
      <b:widget id='Label73' locked='false' title='Tag Cloud' type='Label'>
      <b:includable id='main'>
      <b:if cond='data:title'>
      <h2><data:title/></h2>
      </b:if>

      <div class='widget-content'>
      <div id='labelCloud'/>
      <script type='text/javascript'>

      // Don't change anything past this point ---------
      // Cloud function s() ripped from del.icio.us
      function s(a,b,i,x){
      if(a&gt;b){
      var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
      }
      else{
      var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
      }
      return v
      }

      var c=[];
      var labelCount = new Array();
      var ts = new Object;
      <b:loop values='data:labels' var='label'>
      var theName = &quot;<data:label.name/>&quot;;
      ts[theName] = <data:label.count/>;
      </b:loop>

      for (t in ts){
      if (!labelCount[ts[t]]){
      labelCount[ts[t]] = new Array(ts[t])}
      }
      var ta=cloudMin-1;
      tz = labelCount.length - cloudMin;
      lc2 = document.getElementById('labelCloud');
      ul = document.createElement('ul');
      ul.className = 'label-cloud';
      for(var t in ts){
      if(ts[t] &lt; cloudMin){
      continue;
      }
      for (var i=0;3 &gt; i;i++) {
      c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
      }
      var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
      li = document.createElement('li');
      li.style.fontSize = fs+'px';
      li.style.lineHeight = '1';
      a = document.createElement('a');
      a.title = ts[t]+' Posts in '+t;
      a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
      a.href = '/search/label/'+encodeURIComponent(t);
      if (lcShowCount){
      span = document.createElement('span');
      span.innerHTML = '('+ts[t]+') ';
      span.className = 'label-count';
      a.appendChild(document.createTextNode(t));
      li.appendChild(a);
      li.appendChild(span);
      }
      else {
      a.appendChild(document.createTextNode(t));
      li.appendChild(a);
      }
      ul.appendChild(li);
      abnk = document.createTextNode(' ');
      ul.appendChild(abnk);
      }
      lc2.appendChild(ul);
      </script>

      <noscript>
      <ul>
      <b:loop values='data:labels' var='label'>
      <li>
      <b:if cond='data:blog.url == data:label.url'>
      <data:label.name/>
      <b:else/>
      <a expr:href='data:label.url'><data:label.name/></a>
      </b:if>
      (<data:label.count/>)
      </li>
      </b:loop>
      </ul>
      </noscript>
      <b:include name='quickedit'/>
      </div>

      </b:includable>
      </b:widget>
    • Letakkan script tersebut di bawah kode <b:section class='sidebar' id='sidebar' preferred='yes'>.
      Jika tidak ditemukan, cari kode id='sidebar' atau id='sidebars', lalu letakkan di bawahnya.
    • Lakukan Pratinjau, jika sudah OK, Save hasil kerjaan kamu dan ucapkan Alhamdulillah.....

    Untuk tag Cloud yang menggunakan javascript ini memang cukup ribet. Jika kamu tidak hati-hati bisa-bisa template kamu tidak dapat di-parse. Tapi jika kamu sabar dan hati-hati dalam menempatkannya, Insya Allah semuanya akan berhasil dengan baik.
    Read More

    membuat kode API

    AKTUAL NEWS ONLINE 7:24 AM
    Pada tulisan terdahulu, Menampilkan Recent Posts Dan Recent Comments Dalam Blog, saya memberikan dua alternatif untuk menampilkan Recent Post dan Recent Comments, yaitu dengan menggunanakan gadget feed blogger dan javascript sehingga bagi blogger anyar alias new B akan sedikit kebingungan untuk memilih mana yang sesuai. Untuk itu, pada tulisan kali ini saya akan memberikan cara lain dalam membuat widget Recent Post, yaitu dengan memamfaatkan fasilitas yang disediakan oleh FeedBurner.

    Seperti yang sudah dijelaskan pada tulisan terdahulu mengenai FeedBurner, FeedBurner merupakan fasilitas pengubah arah feed yang disediakan oleh blogger.com. Selain itu, Fasilitas inipun menyediakan fasilitas-fasilitas lain, seperti statistik feed, Headline Animator, BuzzBoost, FeedCount, PingShot, Email Subscriptions, dll. Nah, kali ini saya akan membahas tentang fasilitas BuzzBoost yang dapat digunakan untuk menampilkan Recent Post (Artikel Terbaru).

    Bagi kamu yang belum mengubah arah feed situsnya dengan menggunakan FeedBurner, sebaiknya pelajari artikel Mengubah Arah RSS Feed Dengan FeedBurner. Nah bagi kamu yang sudah memilki akun FeedBurner, ikuti langkah-langkah berikut:

    Langkah Pertama
    • Login ke akun FeedBurner kamu.
    • Dari halaman My Feeds, klik judul feed (Feed Title) kamu.
    • Selanjutnya klik Publisize dan pilih BuzzBoost, seperti nampak pada gambar:
    • Setelah itu isi setingan seperti nampak pada gambar berikut:
    • Pada Feed Setting, tentukan Number of items to display (jumlah item yang ditampilkan) dan Open links in: (membuka link di:).
    • Pada Feed Content to Display, kamu dapat memberi centrang pada tiap item yang diinginkan, atau menghilangkan tanda centrang tadi jika tidak menginginkannya.
    • Jika settingan selesai, klik Activate. Tunggu beberapa saat hingga muncul BuzzBoost Preview.
    • Jika sudah Ok, kopi script HTML seperti nampak pada gambar berikut:
    Read More

    Membuat Blog Title (Judul Blog) Berjalan Pada Tab Page

    AKTUAL NEWS ONLINE 7:23 AM

    Ketika melihat-lihat blog orang, ternyata banyak yang aneh-aneh, akraktif dan menarik. Salah satu yang membuat kepincut adalah tampilan blog title-nya yang bisa berjalan, seperti pada blog ini. Demi memenuhi keinginan tersebut, aku coba searching disana-sini, eh... gak ketemu juga. Akhirnya terpaksa nyontek script template blog orang. Dan tauknya, ternyata gampang juga cara membuatnya. Mau tauk caranya?

    Ok, ikuti aja langkah-langkah berikut :

    • Seperti biasa, dari halaman Dashboard, klik Tata Letak dan pilih Edit HTML:
    • Lalu kamu kopi kode berikut :
      <script language='JavaScript'>
      var txt=":::<data:blog.pageTitle/>::: ";
      var kecepatan=200;var segarkan=null;function bergerak() { document.title=txt;
      txt=txt.substring(1,txt.length)+txt.charAt(0);
      segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
      </script>
    • Letakkan script tersebut di bawah kode :
      <title><data:blog.pageTitle/></title>

      yang letaknya berada di bawah <head> (script paling atas).
    • Kamu bisa mengganti ::: dengan <> atau dengan karakter lainnya.
    • Lakukan Pratinjau (preview) sebelum menyimpannya.

    Nah, selesai dah. Tapi kalo kamu mau sekalian membuat Shortcut Icon (Favicon), kopikan kode script ini :
    <link href='URL foto/logo' rel='shortcut icon' type='image/x-icon'/>

    Letakkan kode tersebut di bawah penutup script yang pertama kamu kopikan (di bawah </script>), dan gantilah URL foto/logo dengan alamat URL foto atau logo yang kamu inginkan.

    Bagi kamu yang sudah membuat Shortcut Icon (Lihat Mengganti Shortcut Icon Blogger Dengan Foto Sendiri), pindahkan letak kode Shortcut Icon tersebut ke tempat di bawah penutup script yang pertama, seperti yang sudah disebutkan di atas. Jadi letaknya tidak lagi berada di bawah ]]></b:skin>

    Nah, gampang kan? Selamat mencoba...
    Read More

    Cara Mengganti Gambar Background Blog di Blogger/Blogspot

    AKTUAL NEWS ONLINE 5:08 AM


    Memperindah blog ternyata juga merupakan hal yang menyenangkan, karena kustomisasi blog memang sangat diperlukan agar blog tampak lebih personal dan unik. Nah salah satu yang membuat blog tampak beda dengan yang lain adalah background. Untuk mengganti gambar background blog seperti yang diinginkan, berikut langkah-langkahnya:

    (Sebelum anda mengganti gambar background yang ada dan mengganti dengan gambar milik anda, pastkan anda telah menemukan/memiliki gambar background dan menghosting-nya sendiri ->)

    1. Masuk ke dashboard anda dan pilih tab menu design/rancangan.
    2. Pilih Edit HTML
    3. Centang expand widget template di sebelah kanan atas template HTML.
    4. Kemudian anda cari kode tag ini: body{ (gunakan Ctrl+F untuk mencari dengan cepat)
        Atau bisa juga dengan mencari kode selengkapnya/menambahkan kode setelah body { seperti berikut:

       body{background-image: url(alamat url gambar anda);

    5. Ganti alamat url gambar anda dengan alamat gambar background yang telah anda host.
    6. Save template

    Yang perlu diperhatikan adalah ukuran gambar anda, usahakan untuk tidak menggunakan gambar dengan byte yang besar, usahakan di  bawah 50 Kb, agar tidak membuat loading berat dan lama.
    Gambar memiliki ukuran pixel yang berbeda-beda. Pastikan hasil gambar background blog anda penuh dari kiri ke kanan dan dari atas ke bawah. Untuk membuat gambar background penuh diperlukan pengulangan. Gunakan tag repeat (mengulang) ke kanan/samping: repeat-x, dan ke bawah: repeat-y. Berikut contoh untuk pengulangan ke kanan/samping::
    body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
    );background-position:top left;background-repeat: repeat-x; ....dst}

    agar gambar juga mengisi hingga ke bawah (hingga footer halaman), tambahkan repeat-y tepat disamping repeat-x. Contoh:
    body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
    );background-position:top left;background-repeat: repeat-x repeat-y; ....dst}

    Jika anda tidak ingin gambar anda berulang baik ke kiri atau ke bawah, cukup gunakan kode no-repeat. Contoh:
    body{background:url(http://2.bp.blogspot.com/_wnULV7UHiXY/TSOhgPOpqXI/AAAAAAAAAH8/dC7uwZp1HA0/s1600/t28_blue_background.jpg
    );background-position:top left;background-repeat: ; ....dst
    Read More

    Mengenal Elemen-elemen Wrapper CSS di Blogger/Blogspot

    AKTUAL NEWS ONLINE 5:07 AM

    Blogger/blogspot memungkinkan penggunanya melakukan styling melalui edit html. Dengan demikian ini memberi peluang bagi anda, pemilik blog di blogger, untuk memodifikasi tampilan blog anda. Salah satunya adalah memberikan sentuhan CSS styling pada wrapper elements. Elemen dasar dari wrapper tersebut digambarkan sebagai berikut:


    1. #outer-wrapper atau #outer-wrap atau #outer
    2. #header-wrapper atau #header-wrap atau #header
    3. #content wrapper atau #content-wrap atau #content
    4. #main-wrapper atau main-wrap atau #main
    5. #sidebar-wrapper atau #sidebar-wrap atau #sidebar, ada juga #lsidebar (l=left) dan #rsidebar (r=right)
    (nama-nama tersebut relatif sifatnya)

    Anda akan menemui declaration dibelakangnya, misalnya:

    #outer-wraper {width: 960px;margin: 0 10px 0;border:3px solid #666666, dst....}

    Di declaration itulah anda bisa memodifikasi/menambah/mengatur banyak hal. diantaranya adalah:
    background (warna atau gambar/image), margin, padding, border, width, height (untuk header)
    Read More

    Cara Memodifikasi Tampilan Link di Blogger/Blogspot

    AKTUAL NEWS ONLINE 5:07 AM


    Tips-tricks Blogger kembali lagi membahas tentang mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap dan esensial agar nanti sobat dapat mengutak-atik bagian tampilan link secara mandiri.

    Bagian CSS yang memberi aturan pada link ada 4 jenis:
    1. a : tampilan dasar suatu link
    2. a:hover: tampilan link ketika mouse berada di atas link (mouse hovering)
    3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.
     4. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna)

    Sedangkan style text CSS memiliki beberapa jenis:
    1. color: warna link, valuenya berupa warna hexadesimal, RGB, maupun color name.
    2. Text decoration: hiasan pada link, berupa underline (garis bawah, ini bawaan secara default), none (tanpa hiasan), overline (garis di atas) dan blink (berkedip)
    3. Font-size: ukuran teks, biasanya dalam pixel (px), em, persen (%), dll.
    4. dan masih banyak lagi jenis text-style yang lainnya, sobat nantinya silahkan mempelajari sendiri cara-cara memodifikasi tampilan teks dengan CSS.

    Nah, setelah mengetahui beberapa properti style CSS pada link, untuk mengubah tampilan default link pada blog, silahkan lihat pada template Blogger/Blogspot sobat (lihat melalui edit HTML), kemudian cari aturan CSS yang mengatur link, yaitu a, a hover, .... dan seterusnya.

    Clue: aturan CSS terletak di antara <b:skin><![CDATA[ dan ]]></b:skin>, aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}

    Contoh aturannya seperti ini (namun tidak sama persis tergantung aturan CSS teks-nya):
    a {color: #1C4991; text-decoration: none;}
    a:hover {color: #f2984c; text-decoration: underline;}
    a:visited {color: 1C4991; text-decoration:none;}
    Pada bagian berwarna biru itulah sobat bisa memodifikasi tampilan link, baik tampilan awal link (a), ketika mouse di-hover di atas link (a:hover), dan ketika link telah di klik/dikunjungi (a:visited). Ingat, tampilan dasar link selalu bergaris bawah, maka untuk menghilangkan garis bawah (underline) link pada tampilan link dasar maupun ketika di-hover, harus ditambahkan text-decoration: none. Sedangkan untuk warna, sobat bisa pula mengganti value warna di link di tempate sobat dengan mengganti kode di belakang color: dengan kode warna lain yang diinginkan. Untuk mengetahui kode-kode warna, gunakan Hex Color Code Chart Generator.

    Jika ingin menambahkan aturan link lain yang belum ada di template sobat, misalnya belum ada a:hover, maka tinggal ditambahkan saja, dengan catatan urutannya harus seperti ini:
    1. a {aturan css text styling}
    2. a:hover {aturan css text styling}
    3. a:visited {aturan css text styling}
    4. a:active {aturan css text styling}
    Keempatnya harus memiliki unrutan seperti itu, jadi tidak boleh terbalik-balik, kecuali jika salah satunya tidak ada, boleh langsung melompat ke aturan link lain.

    Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, sobat bisa langsung memasukkan perintah CSS text-style ke dalam link yang ingin diberi tampilan berbeda (style="....."), misalnya:
    <a  href="http://buka rahasia.blogspot .com" style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger</a>
    Maka hasilnya akan seperti ini:


    (Note: Penggunaan text decoration berjenis blink di atas hanyalah untuk contoh, perhatikan benar-benar penggunaan text decoration seperti ini karena dapat membuat mata lelah dan sakit. Ga percaya? Silahkan dilihat terus link di atas dalam waktu 2 atau 3 menit. Hehe... Padu padankan warna, ukuran, serta urgensi/kepentingan penggunaannya sehingga benar-benar pas dan tidak berlebihan).

    Nah, sekarang jika sobat ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, belajar dan belajar! Good luck!
    Read More

    Gambar Header Blog Gratis Berkualitas Tinggi

    AKTUAL NEWS ONLINE 4:33 AM


    header blog gratis 1
    Menggunakan gambar background pada header blog tentu saja akan memberikan kekuatan dan kesempurnaan tampilan blog secara keseluruhan. Gambar header dapat memberi gambaran dan menegaskan tema yang diusung blog, merupakan bentuk personalisasi blog yang tidak dapat dilihat di blog lain, atau setidaknya dapat "meramaikan" tampilan header yang sebelumnya kosong.

    Tentunya, tidak semua gambar header dapat dipakai secara serampangan. Memilih gambar background header blog yang pas, sesuai dengan paduan warna blog serta tema blog, dan berbagai macam pertimbangan lain harus dilakukan agar didapatkan tampilan blog sesuai keinginan. Bagi yang sudah ahli design grafis, membuat dan mengkostumisasi gambar sesuai keinginan bukanlah hal yang sulit, tapi, bagi yang belum pernah atau jarang bersentuhan dengan dunia desain grafis, tentunya membuat gambar header sesuai keinginan akan memakan waktu lama dan hasilnya bisa jadi kurang memuaskan.

    Untuk mendapatkan gambar header blog yang paling pas, dibutuhkan koleksi pilihan yang banyak dan bervariasi, sehingga hasilnya memuaskan. Berikut adalah 4 situs penyedia gambar header blog gratis dengan pilihan yang banyak dan variatif serta berkualitas tinggi yang khusus saya pilih diantara puluhan situs lain:

    header blog gratis 2
    Situs yang menyediakan banyak koleksi header blog dengan berbagai macam design, tema, ukuran dan warna. Terdapat tema-tema dasar yang dapat membantu membangun konteks yang dibawa dalam blog. Setelah masuk ke situs, anda akan disambut slideshow yang menampilkan beberapa contoh gambar header berkualitas tinggi. Klik "Gallery" pada menu horizontal untuk melihat an browse seluruh koleksi.
    header blog gratis 3
    Hampir sama dengan themeheaders, situs ini juga memiliki beragam koleksi header blog buatan para desainer grafis yang membaginya secara gratis. Tampilan awal berupa slideshow gambar header yang sangat menarik. Kategori terdiri dari dua jenis utama, abstract dan non-abstract. Terdapat pula gambar background blog yang juga gratis. Klik "browse gallery" di bagian bawah halaman homepage untuk melihat koleksi-koleksinya.
    header blog gratis 4
    Sebuah blog yang menyediakan banyak koleksi header blog dengan tema warna berbeda-beda. Kategori berada di sidebar kanan sehingga anda dapat dengan mudah melakukan browsing berdasarkan kategori yang diinginkan. Ada banyak header blog yang terlihat "girly" bagi anda Blogger cewek yang ingin memberikan sentuhan warna "wanita" pada blog. Ada pula gambar background yang satu paket dengan gambar header sehingga dapat menjadi satu kesatuan tema untuk blog.
    header blog gratis 5
    Blog berplatform WordPress ini menawarkan banyak blog resources bagi freebies berupa gambar/graphic dan template. Salah satu design yang dibagikan scara gratis adalah 20 gambar header dengan kualitas tinggi dan tampak dibuat oleh tangan yang sangat terampil. 20 gambar tersebut terdiri dari beberapa tema dan warna. Mayoritas adalah gambar-gambar abstrak yang tampak elegan dan classy. Lihat pula koleksi-koleksi lain melalui tab "Blog Resources" dan browse pada submenu-nya (dropdown menu).

    Cara download/mendapatkan gambar header blog:
    1. Buka halaman gambar dengan meng-klik gambar atau klik kanan dan 'open in new tab'.
    2. Setelah gambar terbuka secara penuh (biasanya pada halaman baru atau pop-up window), klik 'save image as'.

    Tips menyesuaikan gambar dengan tampilan blog dan mengoptimalkan performa:
    1. Edit ukuran gambar sesuai ukuran bagian header blog. Luas header biasanya mengikuti outer-wrapper atau content-wrapper, cari kode CSS: #outer-wrapper atau #content-wrapper, lihat width: --px. Edit gambar dengan menambah atau mengurangi width-nya (samakan dengan width yang sudah ditemukan tadi).
    2. Agar ukuran file gambar tidak terlalu berat lakukan kompresi gambar(untuk PNG, namun JPG juga bisa dengan output PNG).
    Read More

    Aug 5, 2011

    Membuat Kalender dan Jam di blog

    AKTUAL NEWS ONLINE 2:25 AM
    Ini adalah salah satu postingan yang menggambarkan asesoris blog cukup membantu kita untuk melihat Tanggal dan waktu yang sering kita membutuhkannya, oleh karena itu pada kesempatan ini kami paparkan "Membuat Kalender di Blog" dengan sedikit modifikasi anda bisa menambahnya lebih pariatif dan kreatif. Seperti dibawah ini :

    <embed
    pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
    P1_Prod_Version=ShockwaveFlash" width="185" src="http://www.geocities.com/marcellino_agatha@rocketmail.com/kal15.swf" height="220" bgcolor="white"
    type="application/x-shockwave-flash"
    quality="high"></embed>
    Read More

    higt light teks

    AKTUAL NEWS ONLINE 2:13 AM
    Pada kesempatan ini akan membahas cara membuat teks higjt light pada blog untuk memudahkan kita unutk memblok atau copy paste satu artikel atau scrip program yang akan di pastekan keblog anda atau yang lainnya. dengan ini kami berikan sedikit script dengan berbagai ornamennya.
    <div>
    <form name="Select All code">
    <p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly>
    Terimakasih untuk teman bloger yang berbagi dan insya Allah akan bermanfaat!! :)
    </textarea></p>
    </div>
    <p align="left" style="margin-top: 0; margin-bottom: 0">
    <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">
    Contoh hasilnya :

    Yang berperan penting untuk highlightnya sebenarnya hanya pada kode di bawah ini:

    <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">
    Read More

    Aug 4, 2011

    Menampilkan situs lain ke dalam blog anda

    AKTUAL NEWS ONLINE 11:52 PM
    Dalam perjalanannya terutama saya bloger pemula yang semakin ke dalam semakin banyak rasanya info dan tip trik bloger yang tidak tahu. Dengan berbagi dari bloger lain saya bisa belajar dari para senior yang berbaik hati untuk bisa menerapkan ilmu-ilmunya sebagai bahan referensi untuk lebih baik dalam mengelola blognya. maka dengan ini ada satu kendala yang dihadapi "Bagaimana menampilkan situs lain kedalam blog" dengan ini kami mencoba berkesperimen dan akhirnya berhasil ditambah berkat teman-teman bloger juga.
    ini merupakan scrip untuk menampilkan situs lain :

    <iframe name="Menampilkan situs dalam suatu situs" src="http://www.yahoo.com" marginwidth="0" marginheight="0" readonly ="true" vspace="0" hspace="0" allowtransparency="true" scrolling="yes" width="300" frameborder="0" height="250"></iframe>

    ini salah satu contoh yang saya ambil menampilkan frame yahoo.com untuk memodifikasi besarnya kolom aatau kotak anda bisa merubah nilai angka yang ada dalam script diatas :

    height="250"
    width="300"

    yang berwarna hijau diatas bisa dirubah angkanya sesuai kebutuhan, untuk height = tinggi kota, width = panjang kotak. sekian jika ada kekurangan mohon di komen saja.
    Selamat mencoba.....
    Read More

    Aug 3, 2011

    Gambar Header yang berkualitas

    AKTUAL NEWS ONLINE 6:03 PM

    header blog gratis 1
    Menggunakan gambar background pada header blog tentu saja akan memberikan kekuatan dan kesempurnaan tampilan blog secara keseluruhan. Gambar header dapat memberi gambaran dan menegaskan tema yang diusung blog, merupakan bentuk personalisasi blog yang tidak dapat dilihat di blog lain, atau setidaknya dapat "meramaikan" tampilan header yang sebelumnya kosong.

    Tentunya, tidak semua gambar header dapat dipakai secara serampangan. Memilih gambar background header blog yang pas, sesuai dengan paduan warna blog serta tema blog, dan berbagai macam pertimbangan lain harus dilakukan agar didapatkan tampilan blog sesuai keinginan. Bagi yang sudah ahli design grafis, membuat dan mengkostumisasi gambar sesuai keinginan bukanlah hal yang sulit, tapi, bagi yang belum pernah atau jarang bersentuhan dengan dunia desain grafis, tentunya membuat gambar header sesuai keinginan akan memakan waktu lama dan hasilnya bisa jadi kurang memuaskan.

    Untuk mendapatkan gambar header blog yang paling pas, dibutuhkan koleksi pilihan yang banyak dan bervariasi, sehingga hasilnya memuaskan. Berikut adalah 4 situs penyedia gambar header blog gratis dengan pilihan yang banyak dan variatif serta berkualitas tinggi yang khusus saya pilih diantara puluhan situs lain:

    header blog gratis 2
    Situs yang menyediakan banyak koleksi header blog dengan berbagai macam design, tema, ukuran dan warna. Terdapat tema-tema dasar yang dapat membantu membangun konteks yang dibawa dalam blog. Setelah masuk ke situs, anda akan disambut slideshow yang menampilkan beberapa contoh gambar header berkualitas tinggi. Klik "Gallery" pada menu horizontal untuk melihat an browse seluruh koleksi.
    header blog gratis 3
    Hampir sama dengan themeheaders, situs ini juga memiliki beragam koleksi header blog buatan para desainer grafis yang membaginya secara gratis. Tampilan awal berupa slideshow gambar header yang sangat menarik. Kategori terdiri dari dua jenis utama, abstract dan non-abstract. Terdapat pula gambar background blog yang juga gratis. Klik "browse gallery" di bagian bawah halaman homepage untuk melihat koleksi-koleksinya.
    header blog gratis 4
    Sebuah blog yang menyediakan banyak koleksi header blog dengan tema warna berbeda-beda. Kategori berada di sidebar kanan sehingga anda dapat dengan mudah melakukan browsing berdasarkan kategori yang diinginkan. Ada banyak header blog yang terlihat "girly" bagi anda Blogger cewek yang ingin memberikan sentuhan warna "wanita" pada blog. Ada pula gambar background yang satu paket dengan gambar header sehingga dapat menjadi satu kesatuan tema untuk blog.
    header blog gratis 5
    Blog berplatform WordPress ini menawarkan banyak blog resources bagi freebies berupa gambar/graphic dan template. Salah satu design yang dibagikan scara gratis adalah 20 gambar header dengan kualitas tinggi dan tampak dibuat oleh tangan yang sangat terampil. 20 gambar tersebut terdiri dari beberapa tema dan warna. Mayoritas adalah gambar-gambar abstrak yang tampak elegan dan classy. Lihat pula koleksi-koleksi lain melalui tab "Blog Resources" dan browse pada submenu-nya (dropdown menu).

    Cara download/mendapatkan gambar header blog:
    1. Buka halaman gambar dengan meng-klik gambar atau klik kanan dan 'open in new tab'.
    2. Setelah gambar terbuka secara penuh (biasanya pada halaman baru atau pop-up window), klik 'save image as'.

    Tips menyesuaikan gambar dengan tampilan blog dan mengoptimalkan performa:
    1. Edit ukuran gambar sesuai ukuran bagian header blog. Luas header biasanya mengikuti outer-wrapper atau content-wrapper, cari kode CSS: #outer-wrapper atau #content-wrapper, lihat width: --px. Edit gambar dengan menambah atau mengurangi width-nya (samakan dengan width yang sudah ditemukan tadi).
    2. Agar ukuran file gambar tidak terlalu berat lakukan kompresi gambar (untuk PNG, namun JPG juga bisa dengan output PNG).
    3. Tips selengkapnya memasang gambar background header dengan benar, lihat: Cara Mengubah/Memasang Gambar Background Header di Blogger/Blogspot.
    Happy Blogging,



    header blog gratis 1
    Menggunakan gambar background pada header blog tentu saja akan memberikan kekuatan dan kesempurnaan tampilan blog secara keseluruhan. Gambar header dapat memberi gambaran dan menegaskan tema yang diusung blog, merupakan bentuk personalisasi blog yang tidak dapat dilihat di blog lain, atau setidaknya dapat "meramaikan" tampilan header yang sebelumnya kosong.

    Tentunya, tidak semua gambar header dapat dipakai secara serampangan. Memilih gambar background header blog yang pas, sesuai dengan paduan warna blog serta tema blog, dan berbagai macam pertimbangan lain harus dilakukan agar didapatkan tampilan blog sesuai keinginan. Bagi yang sudah ahli design grafis, membuat dan mengkostumisasi gambar sesuai keinginan bukanlah hal yang sulit, tapi, bagi yang belum pernah atau jarang bersentuhan dengan dunia desain grafis, tentunya membuat gambar header sesuai keinginan akan memakan waktu lama dan hasilnya bisa jadi kurang memuaskan.

    Untuk mendapatkan gambar header blog yang paling pas, dibutuhkan koleksi pilihan yang banyak dan bervariasi, sehingga hasilnya memuaskan. Berikut adalah 4 situs penyedia gambar header blog gratis dengan pilihan yang banyak dan variatif serta berkualitas tinggi yang khusus saya pilih diantara puluhan situs lain:

    header blog gratis 2
    Situs yang menyediakan banyak koleksi header blog dengan berbagai macam design, tema, ukuran dan warna. Terdapat tema-tema dasar yang dapat membantu membangun konteks yang dibawa dalam blog. Setelah masuk ke situs, anda akan disambut slideshow yang menampilkan beberapa contoh gambar header berkualitas tinggi. Klik "Gallery" pada menu horizontal untuk melihat an browse seluruh koleksi.
    header blog gratis 3
    Hampir sama dengan themeheaders, situs ini juga memiliki beragam koleksi header blog buatan para desainer grafis yang membaginya secara gratis. Tampilan awal berupa slideshow gambar header yang sangat menarik. Kategori terdiri dari dua jenis utama, abstract dan non-abstract. Terdapat pula gambar background blog yang juga gratis. Klik "browse gallery" di bagian bawah halaman homepage untuk melihat koleksi-koleksinya.
    header blog gratis 4
    Sebuah blog yang menyediakan banyak koleksi header blog dengan tema warna berbeda-beda. Kategori berada di sidebar kanan sehingga anda dapat dengan mudah melakukan browsing berdasarkan kategori yang diinginkan. Ada banyak header blog yang terlihat "girly" bagi anda Blogger cewek yang ingin memberikan sentuhan warna "wanita" pada blog. Ada pula gambar background yang satu paket dengan gambar header sehingga dapat menjadi satu kesatuan tema untuk blog.
    header blog gratis 5
    Blog berplatform WordPress ini menawarkan banyak blog resources bagi freebies berupa gambar/graphic dan template. Salah satu design yang dibagikan scara gratis adalah 20 gambar header dengan kualitas tinggi dan tampak dibuat oleh tangan yang sangat terampil. 20 gambar tersebut terdiri dari beberapa tema dan warna. Mayoritas adalah gambar-gambar abstrak yang tampak elegan dan classy. Lihat pula koleksi-koleksi lain melalui tab "Blog Resources" dan browse pada submenu-nya (dropdown menu).

    Cara download/mendapatkan gambar header blog:
    1. Buka halaman gambar dengan meng-klik gambar atau klik kanan dan 'open in new tab'.
    2. Setelah gambar terbuka secara penuh (biasanya pada halaman baru atau pop-up window), klik 'save image as'.

    Tips menyesuaikan gambar dengan tampilan blog dan mengoptimalkan performa:
    1. Edit ukuran gambar sesuai ukuran bagian header blog. Luas header biasanya mengikuti outer-wrapper atau content-wrapper, cari kode CSS: #outer-wrapper atau #content-wrapper, lihat width: --px. Edit gambar dengan menambah atau mengurangi width-nya (samakan dengan width yang sudah ditemukan tadi).
    2. Agar ukuran file gambar tidak terlalu berat lakukan kompresi gambar (untuk PNG, namun JPG juga bisa dengan output PNG).
    3. Tips selengkapnya memasang gambar background header dengan benar, lihat: Cara Mengubah/Memasang Gambar Background Header di Blogger/Blogspot.
    Happy Blogging,
    Sumber : http://buka-rahasia.blogspot.com
    Read More
    Subscribe to: Posts (Atom)

    About

    Site Links

    Popular Posts

    Copyrights @ TEKHNOLOGI DIGITAL MARKETING - Blogger Templates By Templateism | Templatelib

    • (91) 5544 654942
    • support@templateism.com
    • Templateism