Bengkelozz

Cara Mengganti Email Login Akun Blogspot

noreply@blogger.com (ESSIP) — Mon, 6 Jul 2015 19:47:00 +0700

Tips ini spesial buat mbak Esti Sulistyawan yang menanyakan tentang cara mengganti email login di akun blogspot kita. Satu contoh misal kita ingin mengganti email blog 1 ke email blog 2. Caranya adalah dengan melakukan transfer dari blog yang ingin kita ganti emailnya dengan mengundang email lain yang nantinya akan kita jadikan email baru saat login di akun blogspot itu. Bingung? Oke, sekarang ikuti tips berikut ini.

Buka dua peramban sekaligus di komputer. Anda bisa gunakan dua peramban yang berbeda, misal Mozilla dan Chrome, atau bisa juga Anda gunakan fitur Private Window yang ada di Mozilla.

Peramban 1 digunakan untuk membuka akun blog 1. Sedangkan peramban 2 digunakan untuk membuka akun blog 2. Silakan login pada masing-masing peramban tersebut
Login pada blog 1. Klik Setelan >> Dasar >> Izin. Kemudian klik Tambahkan Pengarang. Setelah itu masukkan email 2 yang nantinya kita jadikan sebagai email pengganti blog 1. Klik Undang Pengarang.

Setelah itu buka peramban 2, lalu login di akun email blog 2. Di pesan masuk nanti akan kita temukan undangan untuk berkontribusi pada blog 1. Klik Terima Undangan. Nah, sekarang Anda sudah memiliki akses untuk membuka blog 1 dengan email 2. Namun, akses ini masih dibatasi, sebab status email 2 hanya sebagai Pengarang di blog 1.
Balik lagi ke peramban 1, lalu refresh browser. Rubah status Pengarang email 2 menjadi Admin. Blog 1 sekarang memiliki admin 2, yaitu email 1 dan email 2.

Jika kita ingin menjadikan email 2 sebagai email utama untuk mengakses blog 1 secara permanen. Silakan klik tanda silang pada email admin 1. Nah, sekarang email 2 menjadi satu-satunya admin yang bisa mengakses blog 1.

Selamat mencoba dan semoga bermanfaat.

Macam-macam HTML Garis Tepi Gambar (Border Image)

noreply@blogger.com (ESSIP) — Wed, 12 Nov 2014 20:25:00 +0700

Posting kali ini berkaitan dengan artikel sebelumnya tentang Cara Merubah Ukuran dan Merubah Posisi Gambar atau Banner. Kali ini kita akan berkenalan dengan macam-macam jenis garis tepi pada gambar, atau yang biasa disebut border image. Spesial juga posting yang satu ini buat Cutkak Alaika Abdullah.. Semoga bermanfaat.

Nah sekarang saya akan coba menggunakan beberapa jenis border pada gambar di bawah ini. Dengan tribut gambar tanpa link, ukuran 100 x 100 dengan posisi gambar di tengah.

<div style="text-align:center;"><img src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

Hasilnya :

Nah sekarang saya akan menambah gambar di atas dengan garis tepi atau border dengan menambahkan atribut style="border:5px solid #3F2828;" . Menggunakan ukuran border 5px, jenis border solid, dan warna border #3F2828. Yang semuanya bisa Anda ganti sesuai selera.

<div style="text-align:center;"><img style="border:5px solid #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

Hasilnya :

Selain solid, ada pula beberapa jenis border lainnya. Nah, berikut ini beberapa macam border beserta contohnya.

dashed

<div style="text-align:center;"><img style="border:5px dashed #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

dotted

<div style="text-align:center;"><img style="border:5px dotted #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

double

<div style="text-align:center;"><img style="border:5px double #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

outset

<div style="text-align:center;"><img style="border:7px outset #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

inset

<div style="text-align:center;"><img style="border:7px inset #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

groove

<div style="text-align:center;"><img style="border:7px groove #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

Atau dengan beberapa kombinasi border di setiap tepinya. Contoh :

<div style="text-align:center;"><img style="border-top:3px solid #3F2828;border-right:15px outset #3F2828;border-bottom:10px solid #3F2828;border-left:7px double #3F2828;" src="https://lh4.googleusercontent.com/-2KsPxmsZwzM/VGNL4JGZhXI/AAAAAAAADrY/iSP8H1gb37Y/s250-no/Gerakan%2BBuang%2BSampah%2Bdi%2BTempatnya.jpg" alt="selamatkan bumi" width="200" height="200"></div>

Hasilnya :

Bagaimana, mudah bukan? Nah, silakan berkreasi dengan border sesuka hati deh, jika mau praktek langsung silakan mampir di halaman ini. Seperti biasa, jika ada yang ingin menambah atau mengurangi, yuk kita saling belajar dan berbagi di kotak komentar artikel ini. Met malam dulur !

gambar : blog.djarumbeasiswaplus.org

Cara Merubah Ukuran dan Merubah Posisi Gambar atau Banner

noreply@blogger.com (ESSIP) — Mon, 10 Nov 2014 16:57:00 +0700

Seringkali di Facebook saya mendapat pertanyaan dari Bunda Yati. Emak online saya ini mengeluh sebab merasa kesulitan menaruh banner di saat mengikuti sebuah lomba atau kontes blog. Meski sebenarnya caranya tak terlalu sulit, dan pernah saya jelaskan lewat artikel sebelumnya.

Ya sudahlah, namanya aja bingung. Bingung itu sesuatu yang wajar, dan merupakan pemantik semangat untuk belajar. Semoga saja hal ini juga menjadi catatan bagi para penyelenggara lomba atau kontes. Untuk memberi kemudahan berupa kode HTML apabila mensyaratkan banner di setiap lombanya. Agar memudahkan para peserta tentunya, dan tak membuat bingung emak online saya lagi hahaha.

Nah, tips ini sebenarnya sederhana. Cuma mengulang artikel di blog ini tentang cara membuat link di gambar. Cuma ada sedikit tambahan tentang cara mengatur ukuran serta posisi gambar agar nampak sedap di mata. Semoga saja tips sederhana ini bisa bermanfaat, khususnya untuk Anda yang ingin merapikan banner di kanan kiri sidebar blognya.

Pada dasarnya struktur HTML gambar secara sederhana bentuknya seperti di bawah ini,

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg">

Warna merah : URL gambar

Hasilnya :

Tambahkan atribut width dan height untuk merubah ukuran gambar menurut selera kita. Nah, di sini saya coba merubah ukuran gambar di atas untuk diperkecil menjadi ukuran 200 x 200.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" width="200" height="200">

Warna merah : URL gambar
Width : rubah angka untuk memperbesar/memperkecil lebar gambar sesuai keinginan
Height : rubah angka untuk memperbesar/memperkecil tinggi gambar sesuai keinginan

Hasilnya :

catatan : Apabila ingin memperbesar ukuran gambar, usahakan nilainya tak lebih besar dari ukuran gambar sebenarnya, agar gambar tak terlihat pecah.

Jangan lupa untuk memberi atribut alt agar gambar Anda lebih mudah ditemukan di mesin pencarian dengan menggunakan kata kunci yang relevan.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200">

selamatkan bumi : rubah dengan kata kunci yang relevan dengan gambar

Jika ingin memberi garis tepi pada gambar, tambahkan atribut style="border:5px solid black;" Anda bisa merubah jenis garis tepi, ukuran serta warnanya sesuai keinginan,

<img style="border:5px solid #FF6600;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200">

Pada kode di atas saya ingin memberi garis tepi gambar dengan ukuran 5px, jenis border/garis tepi solid dan warna garis tepi #FF6600

5px : ganti ukuran border sesuai keinginan
solid : ganti jenis border sesuai keinginan (untuk jenis-jenis border akan saya posting di artikel berikutnya)
#FF6600 :ganti warna border sesuai keinginan (untuk kode warna bisa dilihat disini. Atau cukup diganti dengan nama warna seperti black, grey, red dan lain sebagainya.)

Hasilnya :

Tambahkan kode <div style="text-align:center;">... </div> untuk mengatur posisi gambar atau banner tepat di tengah.

<div style="text-align:center;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200"></div>

Hasilnya :

Nah yang terakhir, jika ingin menautkan gambar dengan link menuju halaman tertentu. Tambahkan kode <a href="alamat link tujuan" target="_blank">...</a>

<a href="http://www.essip.us/2012/12/apa-yang-kau-cari-hai-pendaki.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6eymwQecU5QywbC8VujI_8iyYFFZ8Tn3j5S_mpzHQQVp2RRGbBpW66K91D9aUgx99TVcURINLTcztbvDWjPLXLCuOd-6N5dQ3nXxujyf9ldQbwkQ8Xem3c71KLO8SicEsZdi_KrTIqWg/s280-no/Selamatkan+Bumi.jpg" alt="selamatkan bumi" width="200" height="200"></a>

Klik gambar untuk melihat hasilnya.

Semoga tips sederhana ini bermanfaat dan tiada lagi blogger yang bingung gara-gara banner hahaha. Jika ingin praktek silakan menuju halaman ini. Atau jika ada yang ingin menambahi, yuk kita saling berbagi di kolom komentar artikel ini. Matur nuwun.

Kelebihan dan Kekurangan Memperpendek Link (Short URL)

noreply@blogger.com (ESSIP) — Tue, 28 Oct 2014 20:14:00 +0700

Apa itu short links? Short link adalah penyedia layanan untuk memperpendek link agar terlihat ringkas dan tidak menampakkan langsung alamat URL yang kita bagikan. Misal saya ingin memperpendek link di bawah ini.

http://essiptv.blogspot.com/2014/09/dmc-tv-streaming-online.html

Lalu setelah diperpendek dengan menggunakan short link dari Google menjadi seperti ini.

http://goo.gl/Ztppw5

Haslinya terlihat lebih ringkas, menyembunyikan link asli dan sama-sama menuju ke link yang bersangkutan.

Di dunia maya ada banyak penyedia untuk memperpendek link. Ada pula beberapa diantaranya yang menawarkan recehan dollar apabila kita memakainya, macam Adf.ly, Sh.st dan banyak lagi yang lainnya. Nah sekarang kita akan sedikit membahas tentang kelebihan dan kekurangan memperpendek link, baik short link biasa ataupun membayar berdasarkan pengamatan saya.

Kelebihan

Terlihat pendek, ringkas dan lebih rapi

Judul posting yang panjang akan membuat link juga menjadi panjang. Nah, bagi beberapa orang link tersebut terlihat kurang sedap dipandang. Dengan diperpendek, link akan terlihat lebih ringkas, rapi dan sedap dipandang.

Bisa menyamarkan link asli

Kelebihan yang satu ini pas banget buat para pencari refferal di dunia maya. Dengan memperpendek link, otomatis orang tidak mengetahui jika link yang dibagikan itu adalah link refferal.

Bisa dimodifikasi sesuai keinginan

Beberapa penyedia short URL juga menyediakan fitur yang membolehkan anda memodifikasi link yang diperpendek sesuai keinginan. Contoh : http://bit.do/DMC-TV

Bisa dipantau trafiknya

Selain bisa dimodifikasi, ada pula beberapa penyedia short link dengan fitur status trafik pada link yang sudah diperpendek. Di situ kita bisa memantau berapa jumlah klik, sumber kunjungan dan asal negara dari link yang sudah kita pendekkan tadi.

Ladang untuk mencari uang

Beberapa penyedia menawarkan recehan apabila kita memakai layanan short link mereka. Tentunya dengan kompensasi link yang kita perpendek tadi ditumpangi iklan mereka. Nah, dari iklan inilah kita bisa mendapat uang apabila ada seseorang yang mengklik link kita. Masing-masing short link memiliki nilai klik yang variatif, juga tergantung negara asal pengklik link kita.

Ada kelebihan tentu ada pula kekurangannya. Pun demikian dengan short link, tentunya ada pula kekurangannya. Nah, berikut beberapa kekurangan dari memperpendek menggunakan short link menurut saya.

Kekurangan

Calon pengunjung enggan untuk mengklik link kita

Link yang sudah diperpendek mungkin akan terlihat ringkas dan rapi, tapi ada pula beberapa orang yang malah menjadi enggan mengklik link tersebut. Alasannya, mereka merasa takut link tersebut cuma berisi link palsu, refferal, link berisi virus dan jebakan-jebakan betmen lainnya. Ada pula yang beranggapan jika link tersebut cuma berisi iklan.

Nama blog kita sulit dihapal

Dengan menyamarkan link asli kita itu berarti kita kehilangan kesempatan orang lain untuk menghapal nama blog kita. Disinilah pentingnya memilih nama blog yang mudah dieja dan hapal, agar saat kita bagikan link tersebut secara asli akan membuat orang lain mudah mengingatnya.

Rawan jebakan dan penipuan

Sebab disamarkan tentu akan membuat orang akan kesulitan mengetahui link asli. Nah, hal inilah yang kadang dimanfaatkan oleh seseorang untuk membuat jebakan atau penipuan. Biasanya mereka menggunakan short link yang membayar. Memasangnya dengan cara spam di forum, jejaring sosial atau blog. Bahkan kadang isinya tak sesuai dengan keterangan, sebab empunya link cuma mengharap recehan yang dihasilkan dari klik orang.

Terkesan tidak tulus berbagi

Ada anggapan jika seseorang yang membagikan short link membayar itu tidak tulus dalam berbagi. Meski menurut saya semua itu sah-sah saja dilakukan, sepanjang short link tersebut benar-benar berisi link yang diharapkan calon pengunjung.

Membuat kesal calon pengunjung

Dengan memakai short link membayar, otomatis akan membuat akses menuju blog kita tertahan sekian detik untuk menampilkan iklan dari penyedia short link tersebut. Nah, disinilah kadang calon pengunjung kesal karena merasa ribet dan dipermainkan oleh link tersebut. Sekali lagi kejujuran dengan memberi link yang benar patut kita perhatikan. Supaya kita tak terkena sumpah serapah dunia akhirat dari para pengunjung yang kesal hahaha.

Resiko gagal atau rusak link

Tidak semua penyedia short link berumur lama. Kadang ada pula yang ketika diakses menjadi lemot gara-gara down server. Resikonya? short link kita tentu akan sulit diakses menuju link tujuan, atau jika penyedia short link sudah buyar, tamat pula riwayat link kita. Jadi, sayang kan jika investasi link yang sudah kita tanam jadi hangus?

Nah, itu tadi beberapa kelebihan dan kekurangan memperpendek link baik menggunakan short link biasa ataupun membayar. Soal selera kembali kepada pilihan masing-masing. Saran saya gunakan penyedia short link yang benar-benar bonafid dan tahan lama, macam goo.gl, bit.ly dan lain sebagainya. Juga bijaksanalah di saat menggunakan short link membayar. Tidak menyamarkan link palsu dan melakukan spam membabi buta di rumah tetangga. Agar di setiap sen yang kita terima akan menjadi berkah tentunya.

Monggo jika ada yang menambah atau mengurangi, kita ngobrol santai di kotak komentar.

Cara Memperbaiki Reply Komentar yang Tak Berfungsi di Blogspot

noreply@blogger.com (ESSIP) — Tue, 8 Oct 2013 19:55:00 +0700

Fitur reply komentar sudah ada di kotak komen kita. Tapi sayang ketika diklik ternyata malah tak berfungsi. Apakah anda pernah mengalaminya? Ya, masalah ini seringkali saya alami pada kotak komentar blog-blog saya. Dan sekarang terjadi pula di blog Mami Zidane.

Awalnya saya coba mencari solusinya di blog orang-orang bule. Tapi weladalah ternyata justru saya nemu ramuan ajaibnya dari blog tetangga sebelah. Dari blog Kang Ismet ramuan ini saya temukan dan terbukti cespleng mengatasi masalah yang membuat reply komentar di blog kita tak berfungsi.

Masuk ke dashboard. Lalu klik Template >> Edit HTML, setelah itu tekan Ctrl + F lalu temukan kode <b:includable id='threaded_comment_js' var='post'>

Untuk lengkapnya buka spoiler di bawah ini

<b:includable id='threaded_comment_js' var='post'>
<script defer='defer' expr:src='data:post.commentSrc' type='text/javascript'/>

<script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var postId = '<data:post.id/>';
      var feed = '<data:post.commentFeed/>';
      var authorName = '<data:post.author/>';
      var authorUrl = '<data:post.authorUrl/>';
      var blogId = '<data:top.id/>';
      var baseUri = '<data:post.commentBase/>';

// <![CDATA[
      feed += '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                console.log(entry.gd$extendedProperty[k].name + ' - ' + entry.gd$extendedProperty[k].value);
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = feed;
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == authorName
              && comment.author.profileUrl == authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return baseUri + '/delete-comment.g?blogID=' + blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var tok = 'comment-form_';
      var hash = window.location.hash || '';
      var startThread = hash.indexOf(tok) == 1 ? hash.substring(tok.length + 1) : undefined;

      // Configure commenting API:
      var configJso = {
        'maxDepth': 2
      };
      var provider = {
        'id': postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
</script>
</b:includable>

Lalu hapus semua kode di atas dan ganti dengan kode di bawah ini

<b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

  <script type='text/javascript'>
    (function() {
      var items = <data:post.commentJso/>;
      var msgs = <data:post.commentMsgs/>;
      var config = <data:post.commentConfig/>;

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

      var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

      var parse = function(data) {
        cursor = null;
        var comments = [];
        if (data && data.feed && data.feed.entry) {
          for (var i = 0, entry; entry = data.feed.entry[i]; i++) {
            var comment = {};
            // comment ID, parsed out of the original id format
            var id = /blog-(\d+).post-(\d+)/.exec(entry.id.$t);
            comment.id = id ? id[2] : null;
            comment.body = bodyFromEntry(entry);
            comment.timestamp = Date.parse(entry.published.$t) + '';
            if (entry.author && entry.author.constructor === Array) {
              var auth = entry.author[0];
              if (auth) {
                comment.author = {
                  name: (auth.name ? auth.name.$t : undefined),
                  profileUrl: (auth.uri ? auth.uri.$t : undefined),
                  avatarUrl: (auth.gd$image ? auth.gd$image.src : undefined)
                };
              }
            }
            if (entry.link) {
              if (entry.link[2]) {
                comment.link = comment.permalink = entry.link[2].href;
              }
              if (entry.link[3]) {
                var pid = /.*comments\/default\/(\d+)\?.*/.exec(entry.link[3].href);
                if (pid && pid[1]) {
                  comment.parentId = pid[1];
                }
              }
            }
            comment.deleteclass = 'item-control blog-admin';
            if (entry.gd$extendedProperty) {
              for (var k in entry.gd$extendedProperty) {
                if (entry.gd$extendedProperty[k].name == 'blogger.itemClass') {
                  comment.deleteclass += ' ' + entry.gd$extendedProperty[k].value;
                }
              }
            }
            comments.push(comment);
          }
        }
        return comments;
      };

      var paginator = function(callback) {
        if (hasMore()) {
          var url = config.feed + '?alt=json&v=2&orderby=published&reverse=false&max-results=50';
          if (cursor) {
            url += '&published-min=' + new Date(cursor).toISOString();
          }
          window.bloggercomments = function(data) {
            var parsed = parse(data);
            cursor = parsed.length < 50 ? null
                : parseInt(parsed[parsed.length - 1].timestamp) + 1
            callback(parsed);
            window.bloggercomments = null;
          }
          url += '&callback=bloggercomments';
          var script = document.createElement('script');
          script.type = 'text/javascript';
          script.src = url;
          document.getElementsByTagName('head')[0].appendChild(script);
        }
      };
      var hasMore = function() {
        return !!cursor;
      };
      var getMeta = function(key, comment) {
        if ('iswriter' == key) {
          var matches = !!comment.author
              && comment.author.name == config.authorName
              && comment.author.profileUrl == config.authorUrl;
          return matches ? 'true' : '';
        } else if ('deletelink' == key) {
          return config.baseUri + '/delete-comment.g?blogID='
               + config.blogId + '&postID=' + comment.id;
        } else if ('deleteclass' == key) {
          return comment.deleteclass;
        }
        return '';
      };

      var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

      var onReply = function(commentId, domId) {
        if (replybox == null) {
          // lazily cache replybox, and adjust to suit this style:
          replybox = document.getElementById('comment-editor');
          if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
          }
        }
        if (replybox && (commentId !== replyParent)) {
          document.getElementById(domId).insertBefore(replybox, null);
          replybox.src = replyUrlParts[0]
              + (commentId ? '&parentID=' + commentId : '')
              + '#' + replyUrlParts[1];
          replyParent = commentId;
        }
      };

      var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

      // Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

      var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

      // render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>

Jika di template anda sudah ada kode ke 2 coba lagi copy kode di atas lalu paste ulang. Biasanya reply komentar tak berfungsi sebab ada script yang terhapus alias keselip haha.. Selamat Mencoba.

Cara Memperbaiki Tombol Reply Komentar Tidak Muncul di Blogspot

noreply@blogger.com (ESSIP) — Mon, 7 Oct 2013 21:00:00 +0700

Dulu ketika fitur reply komentar masih belum ada di blogspot, ada sebuah cara untuk ngakali agar fitur itu muncul di kotak komen. Kini fitur komen reply sudah tersedia di blogspot, tapi kadang ada beberapa template yang tak memunculkan reply komennya. Masalah itu biasanya terjadi pada template-template yang disediakan oleh pihak ketiga.

Contoh kotak komentar tanpa fitur reply

Blog mbak Santi Dewi

Blog mbak Astin Astanti

Sebuah blog tanpa fitur reply komen, jelas akan membuat pemiliknya sedikit tak nyaman ketika membalas setiap komen pembacanya. Seperti yang nampak pada dua contoh gambar di atas.

Reply komen tak muncul biasanya juga terjadi karena salah saat melakukan setting pada kotak komentar. Solusinya cek lagi setting komentar anda. Caranya masuk dashboard lalu klik Setelan, lalu Pos dan komentar kemudian pilih Tersemat pada lokasi komentar. Lalu simpan setelan.

Jika cara setting sudah benar, tapi masih tetap tak muncul fitur reply komennya. Coba masuk dashboard, lalu klik Template, kemudian Edit HTML

Tekan Ctrl + F lalu cari kode <b:include data='post' name='post'/>, Untuk lengkapnya kode tersebut akan seperti dibawah ini.

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>

Kadang bisa pula kodenya seperti ini

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.allowComments'>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Lalu ganti kode berwarna merah dengan kode di bawah ini

<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
</b:if>

Setelah itu klik Simpan template. Selamat mencoba.

Widget Random Posting Tanpa Thumbnail

noreply@blogger.com (ESSIP) — Sun, 11 Aug 2013 18:57:00 +0700

sumber gambar

Memenuhi pesanan mbak Esti yang menyuruh saya kulakan widget random posting tanpa gambar. Sebenarnya fungsinya sama dengan widget random posting seperti yang telah saya posting beberapa hari yang lalu. Hanya beda dalam hal tampilan saja yang tak menyertakan preview gambar pada random postingnya. Mungkin bisa dijadikan alternatif buat widget blog anda yang jarang sekali menyertakan gambar dalam setiap postingan.

Untuk cara pasang seperti biasa login dulu di akun blogspot anda. Klik Tata Letak >> Tambahkan Gadget, lalu pilih HTML/JavaScript. Setelah itu masukkan kode script berikut ini.

<script type="text/javascript"> var randarray = new Array();var l=0;var flag;
var numofpost=5;var wordnumber=10;</script>
<script style ='text/javascript' src='http://bengkelozz.googlecode.com/files/Random-Posting.js'>
</script>
<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts'></script>

Warna merah : Jumlah psoting acak yang ingin ditampilkan
Warna biru : Jumlah preview kalimat postingan yang ingin ditampilkan.

Untuk Demo masukkan kode script di atas disini

Jika tak ingin memberi tampilan preview kalimat posting, pakai kode script di bawah ini.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script type='text/javascript' src='/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts'></script>

Selamat mencoba

Cara Membuat Link Pada Tulisan dan Gambar

noreply@blogger.com (ESSIP) — Thu, 1 Aug 2013 07:23:00 +0700

Tips ini mungkin dianggap jadul, tapi ini adalah salah satu dasar blogger. Lebih lagi bagi anda yang baru saja mengenal blogging, saya rasa teknik ini harus bahkan wajib untuk dikuasai. Penting fungsinya saat anda mengikuti sebuah lomba atau kontes ngeblog, karena biasanya penyelenggara mensyaratkan membuat link sebagai salah satu aturan lombanya. Apalagi jika blog anda nanti memiliki nilai jual, ngelink tentunya akan menjadi salah satu sumber cring-cring bagi anda.

Apa itu link? Link adalah cara pintas untuk menuju situs lain dengan jalan menautkan alamat situs tersebut ke sebuah tulisan atau gambar. Misal sekarang dari blog ini saya ingin mengajak anda menuju blog saya lainnya. Dari blog ini saya membuat sebuah link berbentuk tulisan yang saat anda klik nanti akan menuju ke blog yang saya maksudkan. Silakan klik tulisan Lagu Anak di bawah ini, tapi jangan lama-lama nongkrong di sana ya. Cepet balik, kita lanjutin jagongan soal linknya hehehe.

Lagu Anak

Bagaimana sudah mampir ke blog yang saya link tadi kan? Nah, itulah yang disebut dengan link. Tentang bagaimana anda membuat semacam jalan pintas menuju situs lain, dengan cara menautkan alamat situs/blog yang dituju pada sebuah tulisan atau gambar di halaman situs/blog anda.

Jika dilihat dalam modus HTML tulisan "Lagu Anak" diatas akan berbentuk seperti di bawah ini.

<a href="http://lagubocah.blogspot.com/">Lagu Anak </a>

Anda perhatikan warna merah dan biru pada kode di atas

Merah : alamat situs/blog yang akan dituju.
Biru : teks yang muncul di blog, yang saat diklik akan mengarah ke situs tujuan ngelink kita.

Selain kode dasar tersebut anda pun bisa menambahkan beberapa atribut yang biasanya diperlukan saat ngelink.

<a href="http://lagubocah.blogspot.com/" target="_blank">Lagu Anak </a>

target="_blank" : atribut ini berfungsi agar saat link tersebut diklik akan memunculkan halaman baru. Dengan kata lain halaman awal blog anda tetap akan muncul seperti semula. Silakan klik tulisan "Lagu Anak" di bawah ini dan bandingkan hasilnya dengan tulisan "Lagu Anak" di awal tadi.

Lagu Anak

Bagaimana? sudah tahu perbedaanya kan? Selain itu anda juga bisa menambahkan atribut tittle tag. Yang tujuannya akan memberi keterangan pada link anda saat tersorot mouse. (tak mengapa jika anda abaikan atribut ini).

<a href="http://lagubocah.blogspot.com/" title="Uncle Lozz" target="_blank">Lagu Anak </a>

Coba sorot link tulisan "Lagu Anak" di bawah ini.

Lagu Anak

Untuk cara membuatnya, anda bisa langsung menggunakan mode compose saat membuat postingan.

Sorot tulisan/teks yang ingin anda beri link, laluk klik tool Link hingga muncul laman seperti di bawah ini.

Perhatikan tanda yang saya kasih bulatan warna.

Text to display : kata / teks di postingan yang ingin kita beri link.
Web addres : masukkan alamat situs yang nantinya dituju saat mengklik teks link kita.
Open this link in an new window : centang jika kita ingin memunculkan halaman baru saat link tersebut diklik.
Test this link : digunakan untuk mengetes alamat situs yang kita masukkan benar atau rusak (broken link)

Klik OK dan horeee sekarang anda sudah membuat link pada postingan anda.

Lantas bagaimana halnya jika anda ingin merubah atau menghapus link yang telah ada dalam postingan? Silakan lihat gambar di bawah ini.

Klik pada teks/tulisan yang kita ingin rubah/hapus linknya. Untuk merubah alamat link, klik Change lalu ganti dengan alamat yang anda inginkan. Untuk menghapus link, anda cukup mengklik tanda Remove.

Untuk memasang link pada gambar, caranya sebenarnya sama dengan cara memasang link pada teks/tulisan. Silakan anda upload gambar terlebih dahulu di postingan.

Klik pada gambar yang ingin diberi link, lalu klik tool Link, setelah itu lakukan langkah cara membuat link pada tulisan seperti di atas hingga selesai. Untuk contoh klik gambar di bawah ini.

Semoga bermanfaat dan selamat mencoba. Hidup link-link ! hehehe

Cara Membuat Widget Random Posting Dengan Thumbnail Gambar

noreply@blogger.com (ESSIP) — Sun, 28 Jul 2013 22:33:00 +0700

Andai saja di sidebar blog saya masih ada sisa ruang untuk dipasang widget. Mungkin saya akan memilih memasang random posting daripada Recent Post atau Populer Post. Alasannya sederhana, sesuatu yang mubadzir menurut saya jika memasang recent post / posting terkini, sebab di beranda blog kita pastinya sudah dipampang tulisan terbaru kita.

Pun demikian jika populer post / posting populer yang saya pilih, jelas hanya akan berpotensi membuat posting tertentu saja yang akan laris terbaca. Lain halnya jika kita pasang random post / posting acak di sidebar, lebih besar kemungkinan pembaca kita akan tertarik untuk membaca artikel-artikel lama kita lainnya. Tapi, semua terserah selera empunya blog deh hehehe.

Untuk memasang widget random post / posting acak, silakan login di blog anda. Klik Tata Letak >> Tambahkan Gadget, lalu pilih HTML/JavaScript. Setelah itu masukkan kode berikut ini.

<style>

</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=100;
var rdp_info='yes';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://lh5.googleusercontent.com/-hxY0rTdcuyM/UfUyPpaoBKI/AAAAAAAACsQ/vFtqfUwj074/s72-no/no-image.PNG"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Warna merah : jumlah posting acak yang ingin kita tampilkan di sidebar

Untuk hasil silakan mampir ke gedung bioskop di bawah ini, lalu coba refresh untuk melihat perubahan acak pada postingnya.

DEMO

Selamat mencoba.

Membuat Daftar Isi Model Flipcard Dengan Memanfaatkan Template Dinamis Blogspot

noreply@blogger.com (ESSIP) — Sat, 27 Jul 2013 05:13:00 +0700

M
embaca judulnya yang panjang mungkin terlihat ribet ya? hehehe. Tapi eits jangan salah, tips ini tak seribet dan panjang seperti judul di atas kok. Hanya sedikit ngakali tentang bagaimana cara kita membuat daftar isi model flipcard dengan menggunakan template dinamis.

Mungkin ada pertanyaan, seperti apakah bentuk daftar isi flipcard tersebut. Silakan klik DISINI. Piye? Keren kan? hehehe. Terus piye membuatnya? Jawabannya gampang dan enggak buat apa-apa kok. Lah terus piye? Coba lihat URL di jendela browser yang tadi anda klik di bawah ini.

http://www.essip.us/view/flipcard

Lalu coba anda ganti link berwarna merah tersebut dengan alamat blog anda. Nah itulah hasilnya hehehe. Cuma ngakali dengan mengganti modus template anda menjadi dinamis. Trus pasang deh alamat itu menu bar. Tapi, daftar isi ini ada kekurangannya loh, yaitu blog anda tetap dalam modus template dinamis saat mengklik salah satu isinya. Nanti deh saya coba cari carane (kalau ada hehe). Atau ada diantara anda yang mungkin bisa ngakali? Monggo, dipersilakan untuk dibagi trik akal-akalannya hehehe

Cara Membuat Label Admin di Kotak Komentar

noreply@blogger.com (ESSIP) — Thu, 11 Jul 2013 22:13:00 +0700

Selain membuat posting, salah satu seni menjadi seorang blogger itu adalah menjawab komentar yang masuk dalam setiap postingan kita. Berbagai macam karakter blogger seringkali pula kita temui. Ada yang begitu antusias dengan melakukan reaksi cepat pada setiap komentar pengunjung. Namun, kadang adapula yang beranggapan jika membalas komen bukanlah sesuatu yang penting dilakukan.

Nah, bagi anda yang menganggap jika membalas komentar itu adalah sesuatu yang perlu, mungkin lebih manis lagi jika anda memberi sedikit sentuhan pada kotak komentar anda. Yaitu berupa label sebagai tanda pada komentar-komentar admin. Dengan tujuan untuk membedakan komen tamu-tamu dengan komentar anda sendiri. Lihat gambar di bawah ini sebagai contoh.

Untuk cara memasangnya silakan login di akun Blogspot anda. Lalu klik Template >> Sesuaikan, Saat muncul tampilan Perancang Template Blogger pilih Tingkat Lanjut, lalu masukkan kode berikut ini menurut selera warna yang anda suka. Lalu klik Terapkan ke Blog.

Warna Kelabu

/*Label Komentar Admin*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#999999}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #999999;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread olzmargin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#999999}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_1P94wbeLtDhYbK9mt5GmYarjPpBTDqZHy59mqEwNjg-9LudlE6dBv1Wn_CVZ6KUl6joLjb0CltQSdSR7-67ZS7waWh6d5I89y4CXHDGXzeYjZ77jukmjB097AXtnca2DYokjgHKOAU/s128/adminkelabu.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Warna Hijau

/*Label Komentar Admin*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ysKUgqitclx1ci3eItA6TPX1IbGwdxcXpe7Av3WAH_t93ohb5T9ZwkItafM1L1EIIJDS1dGYzudw8p96jpM7Hf_QRn8biX1sXqQCfC6jnFMxF_vKQvCxhLAMVaNCobwkGpG3ErwB7I0/s36-no/adminhijau.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Warna Merah Muda

/*Label Admin Komen*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bsjNMJmERruQEVbk37h0JIHmzMc1Oq_Y9CwRIcYDnaBJoSGQ1lS8sc58GBdewiVkUyt1F9C_d59z9mG_rX1bX5L-wi-OU3hkFg6cj1sIw88o3tddGQU_Si3g1N3Grljju7vOKVoLPLA/s36-no/admin+pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Warna Biru

/*Label Admin Komen*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxuMqPlmSo7ltTVismqA-MRL0hdFaioro9sFCqnE2Rf0BfCNArLxkx7mdATkV27WrC3uabWQZmW1Db4Yqbov0cNClhea4wN8jzsASzdq1I41uCI-UEiKvMqaPCuXK4tA61ZeW6RJY838/s36-no/admin+biru.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Selamat Mencoba...

Cara Membuat Widget Floating Image

noreply@blogger.com (ESSIP) — Wed, 10 Jul 2013 22:12:00 +0700

Jika ada pertanyaan apa sih floating image, silakan anda liat di pojok kiri bawah blog ini. Logo Warung Blogger yang dengan efek melayang. Selain untuk mempercantik tampilan blog, floating image juga bisa digunakan apabila sidebar blog kita sudah terisi penuh dengan widget. Selain itu, tampilannya yang terlihat unik akan membuat pengunjung tertarik mengklik gambar floating tersebut.

Untuk cara memasangnya, silakan login ke akun blogspot anda. Klik Tata Letak >> Tambahkan Gadget, lalu pilih HTML/JavaScript. Setelah itu masukkan kode berikut ini.

<style type="text/css">
#corner {
        position:fixed;
        left:10px;
        bottom:5px;
}
#corner img {
        height:67px;
        width:100px;
        border:1px solid #888;
        padding:1px;
        background:#aaa;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
       -o-transition:all 1.2s ease-out;
       -moz-transition:all 1.2s ease-out;
       -webkit-transition:all 1.2s ease-out;
}
#corner:hover img {
        z-index:99;
        background:#666666;
        border-color:#333333;
       -o-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
       -moz-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
       -webkit-transform:rotate(360deg) scale(1.3) translate(25px,-30px);
}

</style>
<div id="corner">
<a href="https://www.facebook.com/groups/warung.blogger/" target="_blank" title="Warung Blogger">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBp3fIsU6QGDPraN4TxuCaesPcsAsANiSm7y88WLh1AyJGKiUWVwZ-ww7F0g8KY9Jjdxqgg0iI_x6iIshQaM0oDv27ur-0Vc3_vsWR3uNsrbAj5dGebWB7hCAXByHQpgPQy5u5ihvGqFc/s1600/warung+blogger.JPG"/></a>
</div>

Merah : silakan ganti dengan URL link sesuai keinginan.
Biru : ganti dengan gambar sesuai selera anda.

Selamat mencoba...

Widget Selamat Ramadhan

noreply@blogger.com (ESSIP) — Tue, 9 Jul 2013 17:41:00 +0700

Besok kita sudah masuki bulan suci. Bulan penuh ampunan. Bulan istimewa bagi para pencari Tuhan. Nah, bagaimana persiapan Ramadhan di tempat anda? Hmm, saya rasa makin tahun Ramadhan makin kehilangan suasana kemeriahan seperti dulu kala. Tiada lagi bunyi petasan bumbung yang biasa dimainkan anak-anak kampung saat sore menjelang. Jarang pula terdengar musik patrol saat sahur tiba. Kalaupun anda paling-paling hanya di awal Ramadhan saja. Itulah Ramadhan, setiap tahun serasa kehilangan keceriaannya. Tapi, semoga saja ibadah puasa kita tak mengalami pula penurunan kualitasnya.. aamiin.

Bagaimana halnya dengan Ramadhan di dunia maya? Semoga saja kita bisa manfaatkan dunia maya sebagai salah satu media untuk memantabkan ibadah puasa kita. Sebagai blogger tentunya dengan menulis sesuatu yang isinya senantiasa mengajak ke arah kebaikan. Menghindari hal-hal di dunia maya yang bisa mengurangi pahala puasa, macam bergosip di jejaring sosial kita.

Nah, lebih afdol kiranya jika keceriaan Ramadhan kita aplikasikan pula dalam aktifitas ngeblog kita. Salah satunya adalah dengan menghias blog kita dengan widget selamat Ramadhan. Untuk contohnya anda bisa lihat di sudut pojok kanan atas blog ini. Keren kan? hehehe.

Untuk cara pasangnya silakan login di akun Blogspot anda. Lalu klik Tata Letak >> Tambahkan Gadget, lalu pilih HTML/JavaScript. Setelah itu masukkan kode berikut ini.

<div style='position: fixed; top: 0%; right: 0%;'/>
<a href="http://bengkelozz.blogspot.com/2013/07/widget-selamat-ramadhan.html" target="_blank"><img alt="widget selamat ramadhan" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRr3qFucWXV9TFz1QuoWsdZ2w_WO_jLRxSTsgZ144jfapgc5ltdd2ZF0SYKETR9uX-_vxLYoSPy-G87rNc0ZO2o1ynDBVMX6DK_ROIUUppH3Ovb2uy3tBUMJn3SI-yLNMWfI6LkwO10Q/w185-h221-no/Happy+Ramadhan.png"/></a>
</div>

Warna biru : silakan ganti jika anda memiliki posting yang berkaitan dengan Ramadhan.

Untuk warna merah anda bisa mengganti dengan gambar menurut selera.

http://3.bp.blogspot.com/-TZW6KaVzYVM/Udu1vPkwieI/AAAAAAAAAe8/trn1NEbjajU/s1600/Copy+of+Ramadan+Mubarak.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRr3qFucWXV9TFz1QuoWsdZ2w_WO_jLRxSTsgZ144jfapgc5ltdd2ZF0SYKETR9uX-_vxLYoSPy-G87rNc0ZO2o1ynDBVMX6DK_ROIUUppH3Ovb2uy3tBUMJn3SI-yLNMWfI6LkwO10Q/w185-h221-no/Happy+Ramadhan.png

Atau mungkin ada diantara anda yang jago otak atik gambar, silakan berkreasi dan share gambar anda disini agar keceriaan Ramadhan semakin semarak di blog kita. Selamat Ramadhan dulur !

Note : Matur nuwun buat cak Insan Robbani untuk gambar gif-nya yang cantik. Kurang akeh gambare cak hahahaha

Saya Tidak Bisa Menemukan Blog Saya di Web?

noreply@blogger.com (ESSIP) — Thu, 4 Jul 2013 20:36:00 +0700

sumber

Lagi-lagi dapat teriakan kepanikan di Facebook. Kali ini dari mbak Puteri yang mengatakan jika blognya mendadak dihapus oleh blogger. Masalah yang sepertinya sama dialami oleh bu guru kecil Chela 2 hari yang lalu. Sebenarnya masalah seperti ini sering terjadi pada dulur-dulur blogger, dan seringkali pula saya diminta tolong untuk memberi solusi. Masalah yang sebenarnya mudah, tapi terkesan ruwet karena terlanjur panik hahaha.

Sepanjang pengalaman saya saat membantu dulur-dulur blogger yang mengalami masalah di atas, ada tiga kemungkinan yang biasanya terjadi. Pertama, Google mendeteksi adanya perilaku tak lazim pada akun blog anda. Yah, mungkin saja gagal berkali-kali memasukkan password atau mungkin dicurigai mencoba meretas akun blog anda sendiri. Yang kedua, biasanya hanya semacam prosedur keamanan rutin Google yang ingin memastikan jika anda benar pemilik akun tersebut. Yang ketiga, Google sendiri yang salah sistem haha.

Untuk masalah mbak Puteri, saya hanya menggunakan cara seperti biasanya, yaitu meminta semacam kode verifikasi ulang pada pihak Google. Memasukkan nomer hape, lalu memilih salah satu dari dua metode pengiriman kode, yaitu Text Messages atau Voice Call. Kode itulah yang nantinya kita masukkan untuk diverifikasi. Nah, sampai disini biasanya masalah bisa tuntas alias blog bisa kembali diakses. Tapi, kali ini justru membuat saya ikutan panik. Yah, kode verifikasi tersebut tak berfungsi digunakan.

Akhirnya saya pun melakukan komunikasi dengan Google dengan menautkan alamat email saya. Memberitahu sekaligus mempertanyaan kesalahan yang terjadi pada blog mbak Puteri. Saya haqul yakin jika mbak Puteri adalah blogger baik-baik. Mbak Puteri bukan blogger spammer dan konten blognya juga tak terisi dengan hal-hal yang disarukan Google, macam judi, konten copas plek dan uhuk-uhuk.

Alhamdulillah, tak berapa lama ada jawaban di email saya. Mengatakan jika masalah bisa diperbaiki. Sayang, lagi-lagi masalah terjadi. Email dan akun blogspot bisa digunakan, tapi blog utama hilang !

Untuk kedua kalinya sayapun menghubungi Google mempertanyakan blog yang hilang tersebut. Syukurlah tak seberapa kemudian, dua blog mbak Puteri yang raib entah kemana, sekarang sudah terdeteksi lagi radar dunia maya hehe.

Dulur blogger, ada beberapa hal yang mungkin harus kita lakukan saat mengalami masalah macam mbak Puteri.

Jangan panik

Rasa panik membuat kita tak tenang saat menghadapi masalah. Panik membuat kita sulit menemukan solusi, padahal bisa jadi solusi itu kadang sederhana saja, macam memasukkan kode verifikasi saat blog kita hilang.

Selalu ada di jalur kanan

Kita tahu jika Google membuat semacam aturan main pada blog kita. Patuhi aturan main itu. Berkreasilah sebebasnya tapi jangan kebablasan. Jangan gunakan blog anda sebagai salah satu jalan menuju ke neraka, tapi sebaliknya blog itu menjadi semacam investasi pahala bagi kita. Insya Allah, Google tak akan macam-macam sepanjang blog kita tak nyleneh isinya.

Jalin komunikasi

Sekalipun Google merupakan raja dunia maya, tapi itu bukan berarti tanpa cacat dan cela. Google bukan Tuhan dan pasti punya kesalahan. Nah, jika kesalahan terjadi pada mereka macam kasus mbak Puteri. Cobalah gunakan komunikasi yang baik dengan mereka. Keluhkan segala kesalahan dengan cara wajar. Insya Allah, mereka akan menanggapi dan memberi solusi.

Sedia payung sebelum hujan

Bagi seorang blogger memiliki blog itu semacam benda kesayangan. Pun demikian dengan saya, mungkin akan setengah gila jika blog saya tiba-tiba hilang dari dunia maya. Tapi, satu hal yang harus kita cermati, jika Google adalah sebuah perusahaan yang tak bisa lepas dari kebangkrutan. Jadi mungkin dari sekarang kita bersiap menyelamatkan karya-karya kita. Membackup secara berkala data blog kita, baik dengan cara ekspor data atau cara manual macam menyalin di draft word. Dengan tujuan jika di kemudian hari ada hal yang tak dinginkan terjadi, kita pun masih bisa menyelamatkan harta digital kita.

Nah dulur blogger, ada yang punya pengalaman blognya hilang?

Membuat Efek Rollover Gambar

noreply@blogger.com (ESSIP) — Sat, 23 Mar 2013 12:27:00 +0700

Tips kali ini spesial buat Bunda Yati, emak online saya yang sekarang menggelar The Old and The New Photos Giveaway. Beliau mananyakan cara memberi efek pada gambar yang saya muat di posting "Hanya Nemu Satu".

Sebenarnya caranya gampang kok, hanya dengan membikin sedikit perlakuan pada dua buah gambar. Mau tau caranya? Oke, pertama-tama sediakan dua buah gambar. Lalu untuk cara membuat efeknya masukkan kode berikut ini ( pakai mode HTML ya)

<a href="URL yang dituju"><img src="URL gambar pertama" onmouseover="this.src='URL gambar kedua'" onmouseout="this.src='URL gambar pertama'" width="190" height="50" /></a>

URL yang dituju : masukkan link sesuai keinginan
URL gambar pertama : gambar pertama yang muncul di tampilan
URL gambar kedua : gambar yang akan terlihat saat kita mengarahkan kursor mouse di gambar pertama.
Width / Height : atur sesuai keinginan.

Contoh :

Mudah kan? Selamat mencoba !

Membuat Kotak Komentar Tepat di Bawah Postingan

noreply@blogger.com (ESSIP) — Fri, 8 Mar 2013 11:12:00 +0700

Lagi-lagi dapat pesanan dari cak Insan Robbani. Kali ini saya disuruh nyarikan cara menaruh kotak komentar tepat di bawah postingan. Yo wis langsung aja yuk...

Seperti biasa login di warung sebelah, lalu pesan kopi dan sruput kopinya hahaha.. Wis ah serius sekarang. pertama-tama login di akun Blogspot anda.

Klik menu Template >> Edit HTML, centang kotak Expand Template Widget (jangan lupa backup template dulu ya). Lalu cari kode di bawah ini (untuk memudahkan tekan Ctrl + f )

    <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>

        <p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>

Jika sudah ketemu hapus kode tersebut dan ganti dengan kode di bawah ini

<p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>

        <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>

Setelah itu cari kode </body>, lalu masukkan kode di bawah ini tepat di atas </body>

<script src='http://code.jquery.com/jquery-latest.js'/>
    <script>
    var yob = $(".comment-replybox-thread").closest(".comment-thread").parent("div").children(".comment-thread").children(".comment-replybox-thread");
    jQuery('.comment-thread ol').before(jQuery(yob));
    </script>

Setelah itu klik SIMPAN. Untuk hasilnya lihat kotak komentar di blog ini.. Matur nuwun.

Cara Mencari Kode Widget Follower Sendiri

noreply@blogger.com (ESSIP) — Mon, 4 Mar 2013 20:14:00 +0700

Tips kali ini berkaitan dengan posting sebelumnya tentang cara membuat hidden widget. Ada pertanyaan dari Bli Gandi yang katanya bingung tak bisa mencari ~~istri~~ kode widget follower yang akan dia masukkan pada hidden widgetnya.

Pada dasarnya kode script follower yang kita masukkan ke hidden widget kita bentuknya seperti di bawah ini.

<script src="http://www.google.com/friendconnect/script/friendconnect.js" type="text/javascript"></script>
    
    <div id="div-1p2b6658kw638" style="width:255px;border:1px solid #C3D9FF;"></div>
    
    <script type="text/javascript">
    var skin = {};
    skin['BORDER_COLOR'] = '#C3D9FF';
    skin['ENDCAP_BG_COLOR'] = '#C3D9FF';
    skin['ENDCAP_TEXT_COLOR'] = '#000099';
    skin['ENDCAP_LINK_COLOR'] = '#990000';
    skin['ALTERNATE_BG_COLOR'] = '#ffffff';
    skin['CONTENT_BG_COLOR'] = '#FFFFFF';
    skin['CONTENT_LINK_COLOR'] = '#0000cc';
    skin['CONTENT_TEXT_COLOR'] = '#333333';
    skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
    skin['CONTENT_HEADLINE_COLOR'] = '#333333';
    skin['NUMBER_ROWS'] = '3';
    google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
    google.friendconnect.container.renderMembersGadget(
    { id: 'div-1p2b6658kw638',
    site: '06193788455290446213' },
    skin);
    </script>

Kode script diatas merupakan kode widget follower blog ini, dan kode itulah yang nantinya dimasukkan ke hidden widget yang kita buat. Lihat tulisan berwarna merah dan pink di kode itu. Nah kode itulah yang nantinya harus kita ganti dengan ID dan Site blog kita sendiri.

Lah terus piye carane mencarinya? Sebenarnya mudah kok tinggal memasukkan widget follower seperti biasanya lalu mencari source code ID dan site follower kita. Login seperti biasa di akun blogspot anda. Lalu klik Tata Letak >> Tambahkan Gadget, kemudian pilih Pengikut dan SIMPAN.

Setelah itu coba buka tampilan blog anda. Setelah muncul tampilan blog anda lengkap dengan followernya, coba sekarang tekan Ctrl + U. Saat muncul jendela baru dengan kode-kode yang njlimet, tekan Ctrl + F. Lalu masukkan kata friendconnect.container. Coba arahkan tanda panah ke bawah hingga nampak tampilan seperti gambar di bawah ini

Nah disitu nanti akan ketemu kode ID dan Site follower kita sendiri yang nantinya kita masukkan ke kode script di atas. Mudah bukan? Selamat mencari istri, eh kode follower hehe.

Selamat mencoba !

Widget Komentar Terkini dengan Avatar plus Hidden Admin Comment

noreply@blogger.com (ESSIP) — Mon, 25 Feb 2013 15:01:00 +0700

Dapat permintaan dari Bu Dey untuk bisikin cara membuat widget komentar terkini. Setelah saya wira-wiri antar universitas dunia maya, akhirnya nemu juga yang kayaknya pas buat bu Dey.

Widget komentar terkini ini nemu di blog Kang Ismet dan Kang Asep. Dilengkapi dengan avatar plus hidden comment author. Untuk cara pasangnya login seperti biasa di akun blogger anda. Klik Template >> Tata Letak >> Tambahkan Gadget, lalu pilih HTML/JavaScript.

Masukkan kode di bawah ini.

<style type="text/css">
    ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
    .sakahayang_recent_comments li{background:none!important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .sakahayang_recent_comments li .avatarImage{border: 2px solid #A9A9A9; padding:0px;background:#fefefe;-webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc;box-shadow: 0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .sakahayang_recent_comments li span{margin-top:4px;color: #000000;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
numComments = 5,
showAvatar = true,
avatarSize = 40,
roundAvatar = true,
characters = 40,
defaultAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW6d2vKCCJxdDnC79ezDLkM6gjU5GPJ-DZj9ncGqUTDeXfU9c9A6sJcQUc2XICmE8v7O0jBIDnPRt5bWPwbZC5repkxfxIW0D0P0sbFThNMGYTnJ1RB45KZ5xW13kBTG4Va6vgLGyFHiw/s269-c-o-k/default_avatar.png",
hideCredits = true;
maxfeeds=20,
adminBlog='Lozz Akbar';
//]]>
</script>
<script type="text/javascript" src="http://btreaders.googlecode.com/files/rcwanau.js"></script>
<script type="text/javascript" src="http://goyangsithik.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=20"></script>

numComments = 5 : Jumlah komen terkini yang dimunculkan (ganti sesuai keinginan)
avatarSize = 40 : ukuran avatar
characters = 40 : Jumlah preview karakter komen yang dimunculkan
defaultAvatar = "bisa diganti dengan URL icon avatar anda sendiri"
maxfeeds=20 : Jumlah komentar yang diload olh Json script, jumlahnya harus sama dengan max-result dan lebih besar dari numComments.
adminBlog='Lozz Akbar' : ganti dengan nama admin anda (untuk menghilangkan komen anda sendiri)
http://goyangsithik.blogspot.com : ganti dengan alamat blog anda

Jika selesai klik SIMPAN

Anda juga bisa mengotak-atik sendiri CSSnya, macam warna border, background, bentuk avatar dan lain sebagainya sesuai selera.. Selamat berkreasi.

Membuat Widget Follower Tersembunyi dengan Jquery

noreply@blogger.com (ESSIP) — Sat, 16 Feb 2013 12:18:00 +0700

Konsep dan fungsinya sebenarnya sama dengan cara membuat hidden widget di posting kemarin. Namun kali ini kita coba beri sebuah sentuhan "pelumas" bernama Jquery, yang hasilnya akan membuat slider widget akan semakin kencang berlari hahaha.

Seperti biasa login di akun blogger anda. Klik Template >> Edit HTML.

Lalu masukkan pelumas berupa Jquery di bawah ini tepat di atas kode </head>, Setelah itu klik SIMPAN.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Untuk membuat widgetnya sekarang klik ke menu Tata Letak >> Tambahkan Gadget >> HTML / Javascript, lalu masukkan kode berikut ini di dalamnya dan SIMPAN.

<script type="text/javascript">
//
</script>
<style type="text/css">
.w2bslikebox{background: url("URL gambar bottom widget anda") no-repeat scroll left center transparent !important;display: block;float: right;height: 240px;padding: 0 0px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:50%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 4px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<div class='widget-content'>
<div align="center">

KODE WIDGET FOLLOWER / BUKU TAMU / LAINNYA

</div>
</div>
</div>
</div>
</div>

top:50% : Posisi tombol widget (ubah ukuran sesuai keinginan)
height:350px : Tinggi hidden widget (ubah sesuai keinginan)
width:30px : Lebar hidden widget (ubah sesuai keinginan)

Jika anda ingin memasang lebih dari satu widget di blog. Coba perhatikan tanda w2bslikebox, tambahkan angka 1 di tiap belakang kode tersebut menjadi w2bslikebox1. Tujuannya agar tak terjadi bentrok CSS dengan hidden widget pertama yang telah anda buat. Tambahkan angka 2 jika anda ingin membuat widget yang ketiga. Begitu seterusnya, lalu klik SIMPAN.

Untuk gambar button widget silakan anda bisa pilih di bawah ini. Atau anda bisa juga membuat button dengan kreasi sendiri.

Button Blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLw6vUgQNsFkSIaP6THubXKsFKD-xI1IpEppKTOtJdQN7s8KUFF3Q4Zrw0sFCKp4XgDfQYvCU7nzAhSSRPpjbh6Jf6_IY-h9bpIeiaQ2pBU2BhxfnLsjVZbRdWRw0NhvA-75s1laV1wus/s159/ButtonBlogger.png

Button Twitter

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU6ojpy6FyE1vVf24TlEWjg6xz4EB_edY8OvWX1fftVFRAqL6XsW1lU7V44Sf7dyHRcobLqYoIwTX-cldifFpzL8Xf0xDwA7IVOjw9tII8uRQ6sNsIGx91-B9YjSnDP8lLRblO56WpdM/s159/ButtonTwitter.png

Button Facebook

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF6_BUd8arMWv7RD4oSTFMqcRp9kIJRD1szEkI-X7r2yrMFu4UsrAP2SOpsHVmXYIVVMZMRFi_x56p_-c_fXCs2fYXj2UJ1amdMhvae7p8y8UONZNy4-XKmUpC2QLvo-NU8GB_1unKC5o/s159/ButtonFacebook.png

untuk DEMO klik gambar di bawah ini.. Selamat berkreasi dan semoga bermanfaat.

Membuat Widget Follower Tersembunyi Tanpa Merubah Template

noreply@blogger.com (ESSIP) — Thu, 14 Feb 2013 19:02:00 +0700

Tips kali ini spesial pakai telur buat cak Insan. Tentang cara membuat widget tersembunyi disamping sidebar.

Bagi anda yang mungkin saja ingin sedikit merapikan tampilan blognya, mungkin widget ini bisa bermanfaat buat anda. Yuk dulur-dulur kita mulai cara memasang hidden widget ini.

Pertama-tama login seperti biasa di akun blogger anda. Klik Template >> Tata Letak >> Tambahkan Gadget.
Setelah itu akan muncul jendela baru. Pilih HTML/JavaScript.
Lalu masukkan kode di bawah ini.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:350px;
width:30px;
float:left;
cursor:pointer;
background:url('url gambar button widget anda') no-repeat; align: center;
}

.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}

</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}

function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}

</script> <div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

KODE WIDGET FOLLOWER / BUKU TAMU / LAINNYA

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Atur posisi, tinggi serta lebar widget sesuai keinginan anda

top:50px : Posisi tombol widget (ubah ukuran sesuai keinginan)
height:350px : Tinggi hidden widget (ubah sesuai keinginan)
width:30px : Lebar hidden widget (ubah sesuai keinginan)

Nah, jika anda ingin memasang lebih dari satu widget di blog. Coba perhatikan tanda gb atau GB, tambahkan angka 1 di tiap belakang kode tersebut menjadi gb1 atau GB1. Tujuannya agar tak terjadi bentrok CSS dengan hidden widget pertama yang telah anda buat. Tambahkan angka 2 jika anda ingin membuat widget yang ketiga. Begitu seterusnya, lalu klik SIMPAN.

Untuk gambar button widget silakan anda bisa pilih di bawah ini. Atau anda bisa juga membuat button dengan kreasi sendiri.

Button Blogger

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLw6vUgQNsFkSIaP6THubXKsFKD-xI1IpEppKTOtJdQN7s8KUFF3Q4Zrw0sFCKp4XgDfQYvCU7nzAhSSRPpjbh6Jf6_IY-h9bpIeiaQ2pBU2BhxfnLsjVZbRdWRw0NhvA-75s1laV1wus/s159/ButtonBlogger.png

Button Twitter

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWU6ojpy6FyE1vVf24TlEWjg6xz4EB_edY8OvWX1fftVFRAqL6XsW1lU7V44Sf7dyHRcobLqYoIwTX-cldifFpzL8Xf0xDwA7IVOjw9tII8uRQ6sNsIGx91-B9YjSnDP8lLRblO56WpdM/s159/ButtonTwitter.png

Button Facebook

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF6_BUd8arMWv7RD4oSTFMqcRp9kIJRD1szEkI-X7r2yrMFu4UsrAP2SOpsHVmXYIVVMZMRFi_x56p_-c_fXCs2fYXj2UJ1amdMhvae7p8y8UONZNy4-XKmUpC2QLvo-NU8GB_1unKC5o/s159/ButtonFacebook.png

Selamat mencoba !.

Cara Backup dan Upload Template Blogspot

noreply@blogger.com (ESSIP) — Sat, 2 Feb 2013 16:02:00 +0700

Bermain otak-atik HTML itu ibarat berjalan di atas sungai dengan memakai jembatan dari satu batang bambu. Diperlukan kewaspadaan dan kejelian tingkat tinggi. Sedikit saja ada yang salah dengan kode-kode HTML itu, besar kemungkinan akan membuat tampilan blog kita pun akan berubah.

Disini diperlukan sebuah pengetahuan dasar tentang cara membackup ataupun mengupload template pada sebuah blog. Sebagai antisipasi jika di kemudian hari ada hal-hal yang tak kita inginkan terjadi pada blog kita.

Yuk sekarang kita belajar tentang cara backup dan upload template pada Blogspot.

Backup Template

Pertama-tama login seperti biasa, lalu klik menu Template, lalu klik Cadangkan / Pulihkan yang terletak di pojok kanan atas.
Saat muncul jendela, anda klik Unduh template lengkap
Berikutnya akan muncul jendela unduhan, centang Simpan Berkas atau Save File, Klik OK dan tunggu beberapa saat hingga proses unduhan selesai.

Nah, hasil unduhan tersebut nanti berupa file extensi .xml, dan file itu yang nantinya bisa kita upload kembali, jika terjadi apa-apa dengan template blog kita.

Upload / Restored Template

Caranya sama dengan backup template, klik menu Template >> Cadangkan / Pulihkan, lalu klik Telusuri dan cari file .xml yang ingin anda upload.

Kemudian klik Unggah. Tunggu beberapa saat hingga proses upload selesai.

Membuat Background Blog Berubah-ubah Warna

noreply@blogger.com (ESSIP) — Wed, 7 Mar 2012 20:22:00 +0700

Pernahkah anda mendapat keluhan dari pembaca dengan teriakan seperti di bawah ini?..

"Hoi, pemadaman lampu ya, kok gelap banget disini?.

Atau mungkin seperti ini..

"Blognya mengkilat banget Mas, bisa-bisa saya kena trachom membacanya"

Sebenarnya semua itu bisa menjadi sebuah dilema bagi anda. Disatu sisi anda mungkin sudah merasa sreg dengan tampilan blog anda. Namun disisi lain anda pun dituntut bisa memberikan sebuah kenyamanan pagi para pengunjung di blog anda. Nah berikut ini ada sebuah cara untuk sedikit ngakali bagaimana agar tampilan blog anda bisa diubah-ubah warnanya menurut selera.

Ada dua cara yang bisa anda lakukan. Yang pertama anda bisa pasang sebuah widget di sidebar yang berisi sekumpulan warna. Dimana saat warna di dalam widget tersebut diklik, akan merubah warna background anda secara otomatis. (untuk contoh widget, bisa anda lihat di sidebar pojok kiri atas blog ini).

Cara yang kedua sebenarnya hampir sama dengan cara yang di atas. Cuma kali ini bukanlah widget warna yang nantinya akan dipasang di sidebar. Tapi akan membuat sebuah efek warna background berubah secara otomatis saat direfresh. (untuk contohnya coba anda refresh blog ini)

Klik Rancangan - Tambah Gaddget - pilih HTML/Javascript. Lalu masukkan script di bawah ini.

Cara 1.

<center>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" height="30" style="width: 120px;">
<tr>
<td onclick="bgChange('#000000')" bgcolor="#000000"></td>
<td onclick="bgChange('#FFD700')" bgcolor="#FFD700"></td>
<td onclick="bgChange('#FF00FF')" bgcolor="#FF00FF"></td>
<td onclick="bgChange('#DCDCDC')" bgcolor="#DCDCDC"></td>
<td onclick="bgChange('#00BFFF')" bgcolor="#00BFFF"></td></tr>
<tr>
<td onclick="bgChange('#008000')" bgcolor="#008000"></td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F"></td>
<td onclick="bgChange('#DDA0DD')" bgcolor="#DDA0DD"></td>
<td onclick="bgChange('#FFFFFF')" bgcolor="#FFFFFF"></td>
<td onclick="bgChange('#FFFF00')" bgcolor="#FFFF00"></td>
</tr>
</table>
</center>

warna merah : sesuaikan dengan ukuran sidebar anda

warna biru : ganti warna menurut selera anda

Contoh : coba klik salah satu warna di kotak

Cara 2.

<script type='text/javascript'>
//CDATA[
var bgcolorlist=new Array("#7FFFD4", "#BDB76B", "#00BFFF", "#DCDCDC", "#FFD700", "#FFFF00", "#008000", "#FFFFFF")
document.body.style.background=bgcolorlist
[Math.floor(Math.random()*bgcolorlist.length)]
//]]>
</script>

warna biru : ganti warna menurut selera anda (kode warna bisa dilihat DISINI)

lalu SIMPAN dan lihat hasilnya.

contoh : coba refresh tampilan blog ini

Bagaimana mudah kan?. Yo wis selamat bermain warna di blog anda. Oh ya tidak semua template bisa dipasang script ini. Jadi jika saja anda mencoba pasang dan tak berefek apa-apa, Jangan kaget ya hahaha.

Mengganti Tulisan "Posting Lama, Beranda, Posting Baru" dengan Ikon Gambar

noreply@blogger.com (ESSIP) — Sun, 4 Mar 2012 21:14:00 +0700

Kali ini saya akan berbagi sedikit tips ringan untuk mempercantik blog. Sebuah tips tentang cara mengganti tulisan "Posting Lama", "Beranda" dan "Posting Baru" yang ada di bagian bawah blog kita dengan gambar yang kita suka. (contohnya bisa anda lihat di blog ini)

Tampilan awal blog

Pertama-tama anda cari dulu gambar ikon navigasi menurut selera anda. Lalu login ke dashboard anda. Klik Rancangan, lalu Edit HTML. Kemudian centang Expand Template Widget. Untuk mempermudahkan pencarian bagian-bagian yang nantinya akan anda ganti, coba tekan Ctrl F.

Untuk mengganti tulisan Beranda, cari kode <data:homeMsg/>

Untuk mengganti tulisan Posting Baru, cari kode <data:newerPageTitle/>

Untuk mengganti tulisan Posting Lama, cari kode <data:olderPageTitle/>

Lalu ganti kode-kode tersebut dengan kode di bawah ini

<img src='alamat URL gambar anda' />

Setelah itu SAVE.. dan Beres. Selamat mencoba.

Cara Membuat Komentar Bergambar di Blogspot

noreply@blogger.com (ESSIP) — Mon, 27 Feb 2012 18:34:00 +0700

Anda sudah bosan melihat tampilan kotak komentar anda hanya berisi tulisan?. Atau anda kurang puas dengan fitur emoticon komentar yang hanya itu-itu saja?. Yupz, memodifikasi kotak komentar adalah salah satu hal yang bisa kita lakukan untuk mempercantik blog kita. Nah sekarang pertanyaanya, apakah kita bisa memuat sebuah gambar menjadi sebuah komen seperti halnya di WP?.

Alhamdulillah, akhirnya saya bisa menemukan sebuah cara yang bisa memuat sebuah gambar saat kita berkomentar di Blogspot. Ternyata hanya butuh satu kode sakti kok saudara-saudara hehe.

Nah sekarang login ke Dashboard anda. Klik Rancangan, lalu Edit HTML. Setelah itu cari kode </body> (untuk memudahkan pencarian tekan Ctrl F). Lalu masukkan kode sakti di bawah ini tepat di atasnya.

<script src='http://hosting.gmodules.com/ig/gadgets/file/105066904960012479556/nccode.js' type='text/javascript'/>

Lalu Simpan... beres hehe.

Untuk cara penulisan komentar :
Gambar - [im]URL Gambar Anda Disini[/im]
Warna Teks - [co="blue"]Teks komen Disini[/co] - Ganti tulisan blue sesuka anda.
Marquee - [ma]Teks komen anda[/ma]

Gampang kan?. Oke selamat mencoba dan semoga berhasil. Jika mau test komentar bergambar, monggo silakan test di komen. Jangan gede-gede loh gambarnya ya.

Page Peel Warung Blogger

noreply@blogger.com (ESSIP) — Wed, 22 Feb 2012 00:32:00 +0700

Alhamdulillah akhirnya saya nemu ilmu baru tentang sebuah tips mempercantik blog dengan Page Peel. Apa itu page peel?. Silakan anda lihat di sudut pojok kanan atas dari bagian blog ini. Saat anda mengarahkan kursor mouse ke arah situ, akan muncul sebuah efek kertas yang menggulung otomatis.

Nah buat dulur-dulur blogger khususnya para pengunjung warung, kali ini saya akan membagikan script dari Page Peel Warung Blogger. Monggo kalau mau silakan dipasang. Mohon maaf karena keterbatasan saya dengan blog berplatform WP. Script ini mungkin hanya untuk blog berplatform Blogspot. Mungkin ada diantara anda yang tahu cara membuat page peel di WP?. Monggo deh saya silakan share disini.

Sekarang coba anda login ke dashboard anda. Klik Rancangan, lalu Edit HTML. Coba cari kode <head> (untuk memudahkan pencarian tekan Ctrl F). Kalau sudah ketemu coba masukkan kode script tepat di bawah ini di bawah kode <head>.

<script src='http://lozzessip.googlecode.com/files/Webepeel.js'/>

lalu SIMPAN dan lihat hasilnya, sekarang seolah ada jin yang melipat bagian pojok kanan atas blog anda hehehe. Oke deh selamat berkreasi, semoga Page Peel ini bisa menambah semangat anda ngeblog. Ojo lali yo mampir nang Warung Blogger