Berbagi Informasi Bisnis, Berita, Tips & Trik, dll: Modifikasi Blog

Tampilkan postingan dengan label Modifikasi Blog. Tampilkan semua postingan

Membuat tulisan berjalan marquee blogspot

Artikel cara membuat tulisan berjalan marque pada blogspot. cara ini sebenarnya sudah saya bahas pada artikel saya yang lalu dengan judul cara membuat tulisan bergerak di blog, namun pada kesempatan kali ini saya akan jelaskan kembali manfaat dari penggunaan kode marquee juga penambahan variasi kode marquee atau kode tulisan berjalan yang belum sempat dibahas pada artikel pertama.
Tulisan berjalan yang dipasang pada sebuah blog akan menambah tampilan blog menjadi menarik dan tentunya isi/konten informasi dari tulisan berjalan tersebut bisa menjadi pusat perhatian pengunjung. Tulisan berjalan marque ini biasanya berisi tentang info penting misal: iklan, No kontak admin, promo sebuah produk atau bisa juga dijadikan sebagai tulisan selamat datang bagi pengunjung.
Cara membuat tulisan berjalan ini tidak lah sulit, tetapi anda harus tahu dulu kode-kode marque yang digunakan, variasi kodenya-pun beragam sesuai dengan pergerakan tulisan yang diinginkan dan sesuai dengan template blog anda.
Kode perintah (kode dasar) dalam membuat marque atau tulisan berjalan adalah:

<marquee>TULISAN INI YANG AKAN BERJALAN</marquee>

Hasil tampilannya:
TULISAN INI YANG AKAN BERJALAN

Selain kode dasar marquee diatas, tulisan berjalan terdapat beberapa variasi, diantaranya adalah:

Mengubah kecepatan pergerakan dari kecepatan standar.
Anda bisa memakai kode scrolldelay="angka kecepatan", angka kecepatan dalam milidetik, jadi ketika angka kecepatan anda tulis 500, maka jeda pergerakan adalah 500milidetik atau 0.5 detik (setengah detik)
Contoh kode marquee:
<marquee scrolldelay="500">KECEPATAN TULISAN INI DELAY 0.5 DETIK</marquee>
Hasil tampilannya:
KECEPATAN TULISAN INI DELAY 0.5 DETIK

Mengubah media teks yang bergerak.
Kali ini saya akan menggunakan satuan % dalam penerapannya. Anda bisa memakai kode width="lebar bidang", jika anda memakai angka 50% maka area untuk text berjalan akan memakai setengahnya dari lebar bidang yang tersedia. bingung?? kita lihat penerapannya ya...
contoh kode marquee:
<marquee width="50%">TULISAN INI MEMAKAI 50PERSEN DARI BISANG YANG ADA</marquee>
Hasil tampilannya:
TULISAN INI MEMAKAI 50PERSEN DARI BISANG YANG ADA

Membuat tulisan berjalan dan akan berhenti ketika dilintasi KURSOR MOUSE
Anda bisa memakai kode onmouseover="this.stop()" onmouseout="this.start()", jika tulisan berjalan itu terlintasi kursor mouse komputer maka otomatis tulisan berjalan akan berhenti selama kursor tersebut berada diatas tulisan berjalan tersebut.
Contok kodenya:
<marquee onmouseover="this.stop()" onmouseout="this.start()">TULISAN MARQUEE INI AKAN BERHENTI KETIKA KURSOR MELINTAS</marquee>
Hasil tampilannya:
TULISAN MARQUEE INI AKAN BERHENTI KETIKA KURSOR MELINTAS

Membuat Link pada tulisan berjalan
Anda bisa menggunakan kode <a href="alamat url link">nama link</a>, jadi ketika tulisan berjalan ini diklik maka akan akan masuk ke link yang sudah ditentukan. Agar maksimal maka penggunaan kode link ini dipadukan dengan kode berhenti ketika kursor melintas dan kode pergerakan dari atas kebawah:
Contoh kodenya:
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center">
<a href="http://jasapembuatanblog-murah.blogspot.com">Jasa pembuatan blog murah</a><br/>
<a href="http://jasapembuatanblog-murah.blogspot.com/2012/12/toko-online-wordpress-2-dengan-fitur.html">Toko online wordpress</a><br/>
<a href="http://jasapembuatanblog-murah.blogspot.com/2013/01/fitur-seo-on-page-blogger.html">Fitur SEO Blogger</a></marquee>
Hasil tampilannya:
Jasa pembuatan blog murah
Toko online wordpress
Fitur SEO Blogger

Karena pada artikel pertama banyak yang menyakan cara memasangnya pada blog, maka saya akan jelaskan cara memasang kode marquee pada blog anda:

login ke blogger
Klik menu Tata Letak
Klik Tambah Gadget
Pilih widget HTML/Javascript
Pasang Kode yang sudah dijelaskan diatas.

Tempatkan gadget baru anda pada tata letak yang anda inginkan.

Note: kode diatas selain bisa di area tataletak/widget, anda juga menyisipkannya pada artikel/postingan anda, tentunya pada halaman posting rubah dahulu fungsi Compose ke HTML dan sisipkan kode yang telah disiapkan pada paragraf yang ditentukan.

Demikian paparan cara membuat tulisan berjalan merquee di blogspot. semoga kedepannya saya bisa menulis kode-kode ayng lebih banyak lagi. Salam Blogger.

08.14 | 0 komentar | Read More

Mengenal dan menulis kode HTML blog

Ketika anda menulis sebuah artikel yang di-dalamnya diperlukan kode khusus yaitu kode HTML blog, mungkin bagi anda seorang pemula/Newbie akan merasa kesulitan dan tidak tahu harus bagaimana, namun jika anda seorang yang sudah berpengalaman dalam kode HTML ini bukanlah sebuah perkara yang sulit.

Beberapa contoh penerapan kode HTML yang biasa/harus diterapkan adalah ketika anda membuat tulisan di sidebar kiri atau kanan dalam sebuah blog (blogger-gadget HTML/Javascript) atau tulisan yang ditulis di dalam Edit HTML pada sebuah template. ini berbeda ketika anda menulis pada bagian posting artikel atau ketika membuat halaman/artikel, karena sudah disediakan fungsi-fungsi edit tulisan, misalnya ketika anda akan menebalkan huruf, anda tinggal klik ikon bold "B" maka huruf/tulisan anda akan berubah menjadi tebal.

karena tidak sedikit pendatang baru merasakan kesulitan dalam menulis dengan kode HTML maka saya sedikit informasi kan beberapa kode HTML yang biasa digunakan untuk keperluan menulis:

Tengah, Kode HTMLnya: <center></center>
Huruf tebal, Kode HTMLnya: <b></b>
Garis bawah, Kode HTMLnya: <u></u>
Paragrap baru, Kode HTMLnya: <p/>
Baris baru, Kode HTMLnya: <br/>
Huruf miring, Kode HTMLnya: <i></i>
Besar, Kode HTMLnya: <big></big>
Coret, Kode HTMLnya <s></s>
Ukuran huruf, Kode HTMLnya: <font size ="16"></font>
Warnai huruf, Kode HTMLnya: <font color="red"></font>
dan masih banyak lagi.

Contoh penerapan kode HTML diatas:

Membuat tulisan bergaris bawah, cara penulisan: <u>tulisan anda disini</u>
hasilnya akan seperti ini: tulisan anda disini
Mewarnai huruf dengan warna biru, cara penulisan: <font color="blue">tulisan anda disini</font>
hasilnya akan seperti ini: tulisan anda disini

untuk kode lainnya silahkan anda mencobanya sendiri ya..

Untuk lebih jelas lagi, saya akan kasih contoh perbandingan penerapan-nya pada template toko online blogspot pada bagian gadget HTML/Javascript side bar kanan.

pada side bar kanan di buat menu "Berita terbaru" dengan menginformasikan 3 produk unggulan yaitu:

Produk unggulan kami:

1. Madu

2. Zaitun

3. Kurma

Sebelum memasang kode HTML

Sesudah memasang kode HTML

Setelah melihat artikel saya tentang Mengenal kode HTML blog diatas, mudah-mudahan ini bisa membantu anda dalam menulis di blog. Salam Blogger.

08.42 | 0 komentar | Read More

Membuat menu drop down blogspot –Bagian2

Alhamdulillah, akhirnya artikel cara membuat menu dropdown di blogspot bagian 2 sudah selesai dan saya bisa berbagi dengan anda. Pada beberapa waktu yang lalu saya telah menulis artikel dropdown bagian ke-1. Menu dropdown Horizontal kali ini adalah dengan menggunakan kode CSS dan HTML yang simple sehingga mudah dalam pembuatan-nya tentunya dengan hasil yang memuaskan. Menu dropdown ini berfungsi ketika anda sudah mempunyai konten yang banyak dan ingin mempermudah pengunjung mengakses artikel atau page/halaman yang anda pilih sehingga lebih konten blog anda lebih terorganisir.

Langkah yang saya terangkan di-bawah hasilnya seperti pada demo:

Cara membuat menu drop down di blogspot adalah sebagai berikut:

Sign ke Blogger > Design > Page Elements
Pilih dan tambahkan Gadget HTML/JavaScript yang berada di bawah Header blog anda dan tambahkan kode dibawah ini:

<div id='mbtnavbar'>
          <ul id='mbtnav'>
            <li>
              <a href='#'>Beranda</a>
            </li>
            <li>
              <a href='#'>Tentang saya</a>
           </li>
            <li>
              <a href='#'>Produk</a>
            </li>
      <li>
               <a href='#'>Kontak</a>

                <ul>
                    <li><a href='#'>Facebook</a></li>
                    <li><a href='#'>Twitter</a></li>
                    <li><a href='#'>Yahoo</a></li>
                  </ul>
            </li>

          </ul>
        </div>

Keterangan:
Ganti tanda # dengan lamat url yang diinginkan
Apabila ingin menambah menu anda tinggal menambahkan kode di-bawah sebelum kode </ul>
<li>
<a href='#'>Tab Name</a>
</li>

Sekarang masuk ke Design > Edit HTML
Untuk jaga-jaga apabila ada kesalahan, silahkan anda download dulu template anda sebagai back up.
Cari kode ]]></b:skin>
Tambahkan kode di-bawah tepat sebelum kode ]]></b:skin>

/*----- MBT Drop Down Menu ----*/

    #mbtnavbar {
        background: #000000;
        width: 880px;
        color: #FFF;
            margin: 0px;
            padding: 0;
            position: relative;
            border-top:0px solid #000000;
            height:35px;

    }

    #mbtnav {
        margin: 0;
        padding: 0;
    }
    #mbtnav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #mbtnav li {
        list-style: none;
        margin: 0;
        padding: 0;
            border-left:1px solid #DDD;
            border-right:1px solid #DDD;
            height:35px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
        color: #000;
        display: block;
       font:normal 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;


    }
    #mbtnav li a:hover, #mbtnav li a:active {
        background: #809FFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 10px 12px;



    }

    #mbtnav li {
        float: left;
        padding: 0;
    }
    #mbtnav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;
    }
    #mbtnav li ul a {
        width: 140px;
    }
    #mbtnav li ul ul {
        margin: -25px 0 0 161px;
    }
    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
        left: -999em;
    }
    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
        left: auto;
    }
    #mbtnav li:hover, #mbtnav li.sfhover {
        position: static;
    }

    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
        background: #809FFE;
        width: 120px;
        color: #000;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;


    }
    #mbtnav li li a:hover, #mbtnavli li a:active {
        background: #2646A6;
        color: #FFF;
        display: block;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    }

Keterangan:
Silahkan Ganti kode yang saya tandai merah di-atas sesuai dengan keinginan anda.

Jangan Lupa Simpan pekerjaan anda

Demikaian Langkah-langkah dalam cara membuat menu drop down blogspot –Bagian2 kali ini. semoga bermanfaat.

19.14 | 0 komentar | Read More

Cara Menyimpan Kode HTML di Template » Edit HTML "New Blogger Interface"

Perubahan tampilan baru blogger dalam bentuk "New Blogger Interface" atau "Antarmuka Blogger Baru" membawa berbagai perubahan baik bentuk, kelengkapan ataupun tata cara penggunaan fiturnya. Salah satu yang berubah adalah langkah "Edit Template" atau "Edit html". Tak terlalu banyak memang perubahan yang terjadi, namun demikian agar tutorial semakin lengkap dan tak ketinggalan jaman (selalu up to date), kita akan lengkapi juga dengan panduan langkah menyimpan kode html melalui box Edit HTML di "New Blogger Interface".

Upgrade "Old Blogger Interface" ke "New Blogger Interface"

Lakukan login ke Blogger
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Dasbor/Dasboard:
Klik "Upgrade Now" atau "Tingkatkan Versi Sekarang"
Tampilan Blogger akan diperbarui pada bulan April. Tingkatkan Versi Sekarang.
Blogger is getting a new look in April. Upgrade Now.

Langkah menyimpan kode HTML

Melalui langkah ini anda dapat melakukan berbagai perubahan dalam template melalui box Edit Template, dimana perubahan dapat berupa penambahan ataupun pengurangan kode css, javascript dan xHTML.

Setelah dasbor lama berganti menjadi dasbor "New Blogger Interface", klik "Template".
Lanjutkan klik "Edit HTML".
Klik "Proceed" atau "Lanjutkan". Tunggu beberapa saat!
Template » Edit HTML
Box Edit HTML yang terlihat pada bagian ini merupakan sebuah box yang di dalamnya berisi berbagai kode html (kode css, javascript dan xHTML) penyusun desain dasar blog. Penambahan ataupun pengurangan kode html dapat dilakukan, baik di antara tag <head> dan </head> atau di antara tag pembuka body (<body>) dan tag penutupnya (</body>).
Setelah perubahan (berupa pengurangan kode dan/atau penambahan kode) klik "Save Template" atau "Simpan Template"

Beberapa catatan penting :

Untuk mempermudah pencarian kode gunakanlah "Ctrl + F". Panduan cara cepat mencari kode html dapat anda buka di sini.
Penambahan kode CSS umumnya dilakukan di atas kode ]]></b:skin>, meskipun demikian tak menutup kemungkinan untuk menyimpan kode css pada bagian yang lain. Penyimpanan di atas ]]></b:skin> dilakukan tanpa menggunakan tag pembuka dan penutup style (<style type="text/css"> dan </style>), sedang pada bagian yang lain harus menggunakan tag pembuka dan penutup style.
Catatan : Anda dapat menyimpan kode css di hampir semua bagian box Edit HTML.
Penambahan/penyimpanan javascript biasanya dilakukan di bawah <head>, di atas </head>, di bawah ]]></b:skin>, di bawah <body> atau di atas </body>.
xHTML bisa di tambahkan di hampir semua bagian box Edit HTML, sekalipun secara umum penambahan banyak dilakukan di bagian body di antara tag pembuka body (<body>) dan tag penutupnya (</body>).
Beberapa penambahan xHTML baru pada bagian body dilakukan dengan terlebih dahulu melakukan klik "Expand Widget Template".
Preview berfungsi untuk melihat hasil perubahan/modifikasi blog tanpa penyimpanan kode secara permanen.
Clear Edits untuk membersihkan/membatalkan hasil edit.
Close untuk menutup box Edit HTML. Dapat dilakukan setelah proses edit selesai atau sebelum edit selesai (membatalkan edit).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Jemuah WAGE, April, 20, 2012

» Happy Blogging - gubhugreyot «

01.32 | 0 komentar | Read More

Create 404 error page in Blogger with simple flash game - Membuat halaman error 404

Menampilkan game flash sederhana di halaman Error 404 Blogger.

Banyak hal dapat kita lakukan "di halaman dengan alamat tak jelas" atau "halaman error 404" yang juga disebut sebagai "404 error page". Halaman yang akan dijumpai di blogger ketika sebuah alamat tak bisa ditemukan karena beberapa sebab, seperti misalnya:

1. Seseorang menuliskan alamat (URL) secara tak benar.
contoh:
- http://gubhugreyot.blogspot.com/2010/08/juery-lightbox.html harusnya:
- http://gubhugreyot.blogspot.com/2010/08/create-juery-lightbox.html
2. Judul posting yang telah di hapus. Alamat sebuah posting sekalipun telah di hapus akan tetap tersimpan dalam mesin pencari google, sehingga ketika posting dihapus alamat ini akan tetap ada sedangkan postingnya takkan pernah ditemukan lagi.
Contoh silahkan buka link berikut:
- http://gubhugreyot.blogspot.com/2012/04/best-solution-when-reply-comment-button_12.html

Membuat halaman error 404 (halaman tak ditemukan) menjadi sebuah bagian yang menarik dari sebuah blog bisa membuat seorang pengunjung menjadi semakin tertarik untuk membuka lebih banyak lagi posting. Anda sebaiknya menampilkan kata-kata yang bersahabat dan membuat pengunjung merasa nyaman sekalipun halaman yang di cari tak ditemukan. menampilkan sebuah file flash dalam halaman error 404 adalah sebuah improvisasi yang bisa lebih dikembangkan lagi. Dalam posting ini telah kita sediakan kode css berikut xHTML untuk membuat halaman error 404 yang didalamnya disertakan game sederhana dalam bentuk file flash. Anda dapat memilih menggunakan kode css dan xHTML-2 atau hanya menggunakan xHTML-1. Jika anda gunakan xHTML-1, maka anda tak perlu lagi menggunakan kode css. Semua sudah tersimpan dalam javascript yang didalamnya berisi file game flash serta kode css. D E M O

Cara membuat halaman error 404 dengan game flash-1:

Lakukan login ke Blogger.
Setelah halaman dasboard terbuka, bagi yang masih menggunakan "Old Blogger Interface silahkan upgrade terlebih dahulu ke "New Blogger Interface".
Blogger is getting a new look in April. Upgrade Now.
Settings/Setelan.
Search Preference/Preferensi Penelusuran.
Errors and redirections » Custom Page Not Found ? atau : Kesalahan dan pengalihan » Pesan Ubahsuaian untuk Laman Tidak Ditemukan ? Silahkan klik "Edit".

Simpan xHTML-1 dalam box yang tersedia.

xHTML-1 :

<center>
Cihui... Rupanya anda tersesat! Kecian,dech... Hu ... makanya besok lagi klo mo bepergian bawa peta,dong!  Nich...,maen game  duluan n n'tar klo dah cape klik link-nya. Teman2 udah nundu, mbul!!<br/><a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!">gubhugreyot : demos & tutorials</a>
<script src="http://gubhugreyotprojects.googlecode.com/svn/widgets/flash-blogger-404-error-page.js" type="text/javascript"></script>
</center>

Save Changes/Simpan Perubahan.
Buka salah satu posting dengan sedikit merubah URL-nya agar halaman error 404 terlihat (lihat contoh dua kasus di atas!).

Cara membuat halaman error 404 dengan game flash-2:

Untuk yang kedua, cara yang dipergunakan hampir sama, hanya anda harus menambahkan kode css di atas kode ]]></b:skin>

Lakukan proses seperti di atas (dg xHTML-1) dan simpan xHTML-2.
Setelah xHTML-2 tersimpan, lanjutkan dengan klik "Template".
Klik "Edit HTML".
Klik "Proceed/Lanjutkan".
Cari kode ]]></b:skin>.
Letakkan kode CSS di atas ]]></b:skin>.
Klik "Save Template/Simpan Template".
Buka sebuah alamat posting seperti cara yang dipergunakan pada xHTML-1.

xHTML-2 :

<center>
Cihui... Rupanya anda tersesat! Kecian,dech... Hu ... makanya besok lagi klo mo bepergian bawa peta,dong!  Nich..., maen game duluan n n'tar klo udah cape klik link-nya. Teman2 udah nundu, mbul!!<br/><a href="http://gubhugreyot.blogspot.com" title="Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!">gubhugreyot : demos & tutorials</a>
<div class="GRflashgame1">
<div class="GRflashgame2">
<embed src="http://gubhugreyotprojects.googlecode.com/svn/flash/gubhugreyot-flash-cat-game.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="400" style="margin:-40px 0 0 -30px;"></embed>
</div>
</div>
</center>

Kode CSS :

.status-msg-wrap{
      position:fixed;
      z-index:9999;
      top:0; /* by: gubhugreyot */
      left:0;
      width:100%;
      height:100%;
      padding:0;
      margin:0;
      background: #7d7e7d;
      background: -o-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -moz-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -webkit-gradient(linear,left top,right bottom,color-stop(1%,#7d7e7d),color-stop(17%,#6d6d6d),color-stop(17%,#303030),color-stop(21%,#6d6d6d),color-stop(28%,#444444),color-stop(28%,#6d6d6d),color-stop(30%,#2b2b2b),color-stop(31%,#6d6d6d),color-stop(35%,#333333),color-stop(35%,#828282),color-stop(91%,#828282),color-stop(91%,#333333),color-stop(92%,#828282));
      background: -webkit-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: -ms-linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      background: linear-gradient(-45deg,#7d7e7d 1%,#6d6d6d 17%,#303030 17%,#6d6d6d 21%,#444444 28%,#6d6d6d 28%,#2b2b2b 30%,#6d6d6d 31%,#333333 35%,#828282 35%,#828282 91%,#333333 91%,#828282 92%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d',endColorstr='#828282',GradientType=1);}
.status-msg-body{
      font-size:24px;
      color:#eee;
      text-shadow:2px 2px 2px #000;
      margin:0 auto;
      padding:40px 100px;
      height:550px;
      width:800px;
}
.status-msg-body a{
      color:#FC0;
      text-decoration:none;
}
.status-msg-body a:hover{
      color:#6FF;
      text-decoration:none;
}
.status-msg-bg{
      background:transparent;
}
.status-msg-wrap:after{
      position:absolute;
      right:40px;
      top:92%; /* by: http://gubhugreyot.blogspot.com, april, 2012 */
      font-size:12px;
      font-family:arial;
      transform:rotate(-45deg);
      -o-transform:rotate(-45deg);
      -moz-transform:rotate(-45deg);
      -webkit-transform:rotate(-45deg);
      -ms-transform:rotate(-45deg);
      color:#000;
      content:"gubhugreyot";
      text-shadow:0 0 0 #fff;
}
.GRflashgame1{
      margin:30px auto;
      width:450px;
      height:330px;
      border:10px solid #999;
      border-radius:15px;
      overflow:hidden;
      box-shadow:-3px -3px 3px #444,6px 6px 6px #222,0 0 20px #000;
}
.GRflashgame2{
      border:5px solid transparent;
      border-radius:6px;
      width:440px;
      height:320px;
      overflow:hidden;
}

Catatan/Keterangan :

Arahkan cursor ke gambar untuk melihat tutorial dalam gambar.
Ganti teks "Cihui... Rupanya anda tersesat! Kecian,dech ... dst" dengan teks lain yang membuat pengunjunglebih enjoy.
Ganti URL : "http://gubhugreyot.blogspot.com" dengan URL blog anda.
Ganti title "Tuh ... liat ... tuh ... jalannya. Hih... ,dasar!" dengan teks lain yang lebih tepat.
Untuk mengganti file flash, silahkan ganti : "http://gubhugreyotprojects.googlecode.com/svn/flash/gubhugreyot-flash-cat-game.swf"
width="500" height="400" style="...." bisa dideuaikan dengan file flash yang baru.
Jika anda ingin membuat halaman error 404 yang berbeda, dimana yang ditampilkan bukan file flash melainkan sebuah image, silahkan buka tutorialnya melalui link di bawah ini: Create 404 Error Page in Blogger with CSS3

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu PON, April, 14, 2012

» Happy Blogging - gubhugreyot «

21.42 | 0 komentar | Read More

Button CSS3 u Reply Comment Blogger New Reply Comments

Membuat button reply comment di Blogger New Threaded Comments dengan css3 diharapkan membuat button reply comment menjadi levih mudah dikenali, terutama oleh pengunjung yang belum begitu akrab dengan fungsi reply comment di Blogger New Threaded Comments. Membuat button reply comment dengan kode css3 juga memberi banyak kemungkinan bagi blogger untuk menciptakan effek menarik layaknya sebuah effek animasi. Mengingat kemampuan lebih yang dimiliki css3, tentu saja menggunakan button comment seperti ini membuat blog menjadi lebih menarik. Beberapa kode css3 yang bisa digunakan antara lain css3 transition, css3 box-shadow dan text shadow dan css3 border radius (rounded corners).

Kode CSS Button Reply Comment Blogger New Threaded Comments :

.continue a,.comment-actions a{
      position:relative;
      top:0;
      display:inline-block !important;
      font-family:Arial;
      font-size:12px;
      padding:2px 8px !important;
      text-decoration:none;
      color:#ccc !important;
      border-radius:3px;
      border:1px solid #333;
      margin-right: 10px;
      text-shadow:1px 1px 1px #000;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJQ8Wx3b2azeUqFgtPlmCvOtqE0SXzlO59m32L0cxbtcPVkwrkwXmsco_lInCJpp5NWAhpv2DVIYMEML1UlQaIe0G0kchHwvVAE4D2wrNwVEk10MmIw2wJHy0tEFu33wbewjh23hRIftI/s128/bgHovJQAccordionBlueV30H1.gif.png) 0 0 repeat-x;
      transition:0.6s;
      -o-transition:0.6s;
      -moz-transition:0.6s;
      -webkit-transition:0.6s;
      -ms-transition:0.6s;
}
.continue a:hover,.comment-actions a:hover{
      text-decoration: none;
      color:#fff !important;
      border:1px solid #eee;
      box-shadow:-1px -1px 1px #222, 1px 2px 2px #000;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNJQ8Wx3b2azeUqFgtPlmCvOtqE0SXzlO59m32L0cxbtcPVkwrkwXmsco_lInCJpp5NWAhpv2DVIYMEML1UlQaIe0G0kchHwvVAE4D2wrNwVEk10MmIw2wJHy0tEFu33wbewjh23hRIftI/s128/bgHovJQAccordionBlueV30H1.gif.png) 0 100% repeat-x;
}
.continue a:active,.comment-actions a:link:active{
      background:#555;
      border-radius:4px;
      top:2px;
}

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

07.35 | 0 komentar | Read More

Ganti & rubah ukuran icon author comment di Blogger New Threaded Comments

Dengan merubah ukuran icon author comment pada sistem komentar baru blogger "Threaded Comment", maka anda mempunyai banyak pilihan untuk mengganti "icon aneh berbentuk bulatan hitam dengan tongkat pak tua berada di tengah-tengahnya" ini. Perubahan icon author comment di Blogger New Threaded Comments tentunya mempunyai batasan tertentu karena ukuran yang terlalu tinggi akan membuat box komentar menjadi penuh sesak serta bisa merusak tatanan xomment box. Sebaiknya anda merubah tinggi maksimal 30px. Inipun sebenarnya sudah terlalu besar. Keleluasaan yang cukup memungkinkan adalah perubahan lebar (width) karena tersedia ruang yang cukup lebar. Anda bisa manfaatkan ini untuk mengganti icon author comment ini dengan berbagai icon/image lain yang membuat blog terlihat lebih menarik.

Kode CSS-1 :

.comment-block .icon.blog-author{
      width:30px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background-size:30px auto !important;
      margin-bottom:-15px !important;
}

Keterangan :

Kode css di atas adalah kode dasar untuk perubahan ukuran icon author comment tanpa mengganti icon default.
Icon baru berukuran height=30px dan width=30px (ukuran default=18px).
Margin-bottom = 15px berfungsi untuk menarik icon yang sudah diperbesar agar lebih ke bawah dengan tujuan untuk keseimbangan header comment.
Untuk merubah ukuran icon default beserta ukurannya anda bisa gunakan kode css di bawah ini.

Kode CSS-2 :

.comment-block .icon.blog-author{
      width:35px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju24FcuZNygex5f8EmNYALYLSXTZpILr1PUIqv66jhT8g3zmrJJw12YvGShvKCnO8pP_O9M7CMk_CaKZFRurGqkAPqZTlDaFfx6sTSTbIltfWb79DQMN5luxKTeNk42YdJR5QmG9U6rete/s128/butt-dance.gif) center no-repeat !important;
      background-size:35px 30px !important;
      margin-bottom:-15px !important;

}

Kode CSS-3 :

.comment-block .icon.blog-author{
      width:128px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:26px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2_ANTJzByYrca1Zl9bxT9Txg079rZX2r-RvuKa7IXf7mdVubnWhDPMfdPFdI45A5TRuVG4dkpHKqF6xegj59c7h_TyCJgOIunctIT3sv3i-RnPZZpFr0ZIJhlPDEZN3j13LkJ1q8HPE/s128/VBlogoGRfirst.gif) center no-repeat !important;
      background-size:128px 26 !important;
      margin-bottom:-10px !important;
}

Keterangan :

Kode CSS-2 dan CSS-3 menggunakan background imaga berbeda yang berfungsi sebagai pengganti icon author comment default blogger.
Kode berwarna merah adalah URL icon/image pengganti icon author comment.
Perhatikan pada width dan height. Nilai ini sama dengan nilai pada background-size dan nilai ini diambil dari ukuran background yang digunakan sebagai pengganti icon.
Margin-bottom bisa dirubah nilainya untuk penyesuaian pada header comment - autor comment.
Upload image pengganti icon author comment di boks posting atau di picasaweb.

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

Catatan/Keterangan :

16.19 | 0 komentar | Read More

1 syntax css u ganti icon author di Blogger New Treaded Comments

Silahkan klik untuk perbesar gambar!
Memang benar kata orang. Melihat icon author pada comment box Blogger New Threaded Comments yang berupa lingkaran hitam dengan sebuah tongkat/pena kecil ditengah sungguh membuat siapapun bingung mengartikannya. Icon/symbol yang sebenarnya menjadi penanda komentar author/penulis (author comment) ini terasa sangat janggal di mata. Bukan hanya karena warnanya yang bulat hitam dengan tongkat anehnya yang terasa tak proporsional saja, namun penanda author ini menjadi terasa kurang pas di blog karena terlihat seperti rambu-rambu lalu lintas yang biasa di pasang di tengah jalan raya. Yang membedakan keduannya hanyalah pada ukuran dan warnanya saja. Eit ... barangkali kalau ditambah bambu sebagai penyangga akan pas dan sama persis dengan rambu lalu lintas di samping rumah anda!

Jika anda salah satu diantara sekian banyak blogger yang merasa risih atau terganngu adanya icon author comment seperti tersebut di atas, ada sebuah cara untuk mengganti icon tersebut dengan icon yang lain. Anda dapat menggunakan emoticon, yahoo smiley atau berbagai image yang lain, baik berupa gambar statis aatupun animasi gif. Yang perlu diperhatikan hanyalah ukurannya. Gunakan ukuran image dengan tinggi (height) dan lebar (width) sebesar 18px (bujursangkar). Upload gambarnya di blogger atau picasaweb dan kemudian pastekan di kode css yang akan disertakan di bawah.

Kode CSS :

.comment-block .icon.blog-author{
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhLic8oBdJuwFiHAwuQcBY5_Vl1gwiV0qT0ULTaT0oJFq9t2OBO1c1WVPx9uUeqvPTnJZmclY3KHzNMbE3eeg9OrQn1mGrCgjqpKQLlgKzyyTJUT4FYvhiEWtE43qZnpeO6PVFH8x5lXo/s18/animasi-bendera-indonesia.gif) center no-repeat !important;
}

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

Catatan/Keterangan :

Gunakan image dengan ukuran width dan height sebesar 18px.
Upload image yang akan digunakan melalui halaman posting.
Jika ingin mengganti image, gantilah kode yang berwarna merah dengan image hasil upload.
Selain upload melalui halaman posting blogger, anda bisa upload di:
http://picasaweb.google.com
Untuk ke picasaweb sebaiknya login ke blogger terlebih dahulu!

13.58 | 0 komentar | Read More

Trick Merubah Ukuran Avatar di Blogger New Threaded Comments

Klik untuk perbesar gambar!

Merubah ukuran avatar di box/kotak komentar Blogger New Threaded Comments memang membutuhkan trik khusus karena ukuran avatar ini memang sebelumnya telah di setting dengan ukuran tertentu. Merubahnya tak seperti ketika kita memposting image/gambar yang hanya perlu merubah width dan height. Trick merubah avatar kotak komentar melibatkan kode css !important (deklarasi css !important) agar kode yang diutamanakan oleh browser adalah kode css baru yang ditambahkan di template.

Kode CSS-1 :

.comment .avatar-image-container{
      width:60px; /* A */
      max-height:70px; /* D */
}
.comment .avatar-image-container img{
      width:50px; /* B */
      border:1px solid #666 !important;
      border-radius:5px;
      max-width:50px; /* C */
      max-height:70px; /* E */
      float:left;  /* by : gubhugreyot, April,2012 */
}
.comments .comment-block{
     margin-left:65px !important; /* F */
}

Keterangan :

A adalah lebar ruang/kolom penempatan avatar.
B adalah lebar avatar (width).
C adalah tinggi tinggi maksimal avatar (max-height).
D adalah tinggi ruang/kolom penampatan avatar.
E adalah lebar maksimal avatar (max-width).
F adalah jarak box teks komentar dari ujung sebelah kiri box komentar (margin-left).
A dibuat lebih besar dari B untuk memberi ruang bagi penggunaan padding, margin dan border.
D sama dengan E dengan ukuran lebih besar dari A, B dan C untuk memberi ruang jika tinggi image lebih besar dari lebar image (height>width).
F mempunyai selisih minimal sekitar 5px dibandingkan A agar ada ruang cukup untuk penempatan avatar.
Kode css di atas adalah kode paling sederhana untuk merubah ukuran avatar di comment box Blogger New Threaded Comments.
Dalam kode css di atas ukuran avatar telah diperbesar hingga mempunyai lebar 50px (width). Ukuran standar yang biasa digunakan berkisar 32px.

Kode CSS-2 :

.comment .avatar-image-container{
      width:90px;
      height:90px;
      max-height:150px;
}
.comment .avatar-image-container img{
      width:60px;
      border:1px solid #eee;
      padding:5px !important;
      background:#666 !important;
      border-radius:6px;
      max-width:100px;
      max-height:150px;
      float:left;
      margin:10px; 
      box-shadow:0 0 12px #000;
}
.comments .comment-block{
      margin-left:100px !important;
}

Keterangan :

Kode CSS-2 menggunakan ukuran avatar lebih besar.
Melibatkan background, padding, border-radius dan box-shadow sehingga ada beberapa perubahan toleransi ukuran yang berbeda dengan kode CSS-1 agar box-shadow bisa terlihat secara sempurna.

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

09.43 | 0 komentar | Read More

CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments

Mengembangkan apa yang sudah terpostingkan sebelumnya tentang "Cara membuat background berbeda pada Author Comment di Blogger Threaded Comments menggunakan kode css (Only CSS: Hightlight Author Comment in Blogger Threaded Comments)", kali ini kita akan menambahkan sebuah background image yang berupa teks "Admin" atau "tanda tangan pemilik blog". Penambahan "Admin" atau "Tanda Tangan Author" pada Author Comment akan membuat setiap tanggapan komentar yang diberikan author (pemilik blog-penulis) mempunyai warna background berbeda dan disertai "teks Admin" atau "tanda tangan" di sisi sebelah kanan bawah. Anda bisa melihat contohnya (demo) dengan membuat sebuah komentar di posting ini dan kemudian melihat tanggapan komentar yang nantinya akan kami berikan.

Kode CSS :

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com  */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block .icon.blog-author{
      position:absolute;
      right:0;  /* original code by: http://gubhugreyot.blogspot.com  - April, 08, 2012*/
      bottom:0; 
      background:rgba(174,212,251,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoYX-HXkhCo-R56W_m0DOXHwRMXt5zDDzLFDy3YVBmt2Az_-dfxkXUEU4nwjvVN5N4F9tfOlvUbo-GZGUSgKMUeWHRx4FLTozRn8-y_e1E_jthv1igAxb_vZLXeN8ySbzfuoAoM-dbF0/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover{background:rgba(139,139,139,0.1);
      border:1px solid #eee;
      box-shadow:4px 4px 4px #444;
}
.comment-block:hover .icon.blog-author{
      width:60px !important;
      height:22px !important;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoYX-HXkhCo-R56W_m0DOXHwRMXt5zDDzLFDy3YVBmt2Az_-dfxkXUEU4nwjvVN5N4F9tfOlvUbo-GZGUSgKMUeWHRx4FLTozRn8-y_e1E_jthv1igAxb_vZLXeN8ySbzfuoAoM-dbF0/s128/gubhugreyot-admin-6transp.gif) bottom right no-repeat !important;
      background-size:60px 22px !important;
}

Cara menggunakan kode css :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
  Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript).
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin>.
Copy kode css dan letakkan di atas ]]></b:skin>
Keterangan :
Pilih salah satu kode css. Anda bisa gunakan yang menggunakan opacity effect atau yang menggunakan background rgba.
Klik "Simpan Template (Save Template)".
Buka blog dan coba hasilnya dengan membuat komentar.

Catatan/Keterangan :

Untuk menampilkan tanda tangan author (signature), ganti background image (yang berwarna orange dan red):
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoYX-HXkhCo-R56W_m0DOXHwRMXt5zDDzLFDy3YVBmt2Az_-dfxkXUEU4nwjvVN5N4F9tfOlvUbo-GZGUSgKMUeWHRx4FLTozRn8-y_e1E_jthv1igAxb_vZLXeN8ySbzfuoAoM-dbF0/s128/gubhugreyot-admin-6transp.gif
dengan background image baru yang berupa image bergambar tanda tangan (signature):
Untuk membuat background image berupa tanda tangan Author, silahkan ikuti panduannya melalui link di bawah ini:
Cara membuat tanda tangan di blog
Jika ingin menampilkan tanda tangan dan "Admin" secara bersamaan, ganti background image pada syntax : .comment-block .icon.blog-author (berwarna orange) :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdoYX-HXkhCo-R56W_m0DOXHwRMXt5zDDzLFDy3YVBmt2Az_-dfxkXUEU4nwjvVN5N4F9tfOlvUbo-GZGUSgKMUeWHRx4FLTozRn8-y_e1E_jthv1igAxb_vZLXeN8ySbzfuoAoM-dbF0/s128/gubhugreyot-admin-6transp.gif
Untuk anda yang tak ingin menampilkan "Admin dan tanda tangan" karena hanya ingin membuat warna background Author Comment berbeda, dapatkan tutorialnya di bawah ini:
CSS only: Highlight Author Comment
Panduan cara backup template, cara cari kode dan berbagai cara menyimpan kode css dapat anda buka di Special Tutorials yang terdapat di menu sebelah kiri halaman.
Tutorial cara pasang teks Admin atau tanda tangan Author ini hanya digunakan pada template/blog yang sudah menggunakan system Threaded Comments.
Untuk merubah warna background dapat dilakukan dengan merubah background rgba.
Bagi yang ingin merubah blog atau template menjadi threaded comments silahkan buka panduannya melalui link di bawah ini :
Cara membuat blog menjadi Threaded Comments

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Ngahad PAHING, April, 08, 2012

» Happy Blogging - gubhugreyot «

11.09 | 0 komentar | Read More

CSS Only: Highlight Author Comment Blogger's New Threaded Comments

Setelah beberapa waktu berkutat dengan keruwetan "Bloggers New Threaded Comments", akhirnya ketemu juga sebuah solusi untuk membuat warna background berbeda pada Author Comment di sistem Threaded Comments Blogger yang baru. Jika pada beberapa tutorial yang kini banyak dipostingkan oleh blogger sejagad dibuat menggunakan jQuery (jQuery Highlight Author Comment Blogger's Threaded Comments - dibuat oleh blogger India?), melalui gubhugreyot "Tutorial Blogger | gubhugreyot ini kita akan membuatnya hanya menggunakan kode CSS.

Menggunakan kode CSS untuk membuat "Highlight Author Comment Blogger's New Threaded Comments" tak hanya sekedar untuk membuat warna background berbeda pada author comment. Dengan menggabungkan sebuah image (background image) dapat juga ditampilkan "kata Admin" atau berbagai teks lain seperti misalnya "tanda tangan author", baik dalam bentuk teks ataupun image (melalui background image). Bahkan kode css ini masih bisa dikembangkan lagi dengan menggabungkan css2 dan css3 untuk menciptakan beberapa bentuk animasi melalui hover effect. Satu hal nyata yang membuat penggunaan kode css mempunyai nilai lebih atau keunggulan dibandingkan jika menggunakan jQuery adalah pada pembebanan loading blog. jQuery akan menambah beban blog jauh lebih besar dibandingkan kode css. Diluar hal tersebut "mengembangkan penggunaan kode CSS akan jauh lebih mudah dilakukan siapapun dibandingkan javascript". Dari pertimbangan di atas, kini menjadi hak anda untuk menentukan dan memilih di antara keduanya. Mo pakai jQuery atau yang hanya menggunakan kode CSS?!

Jika anda ingin melihat hasilnya, silahkan coba berikan komentar di posting ini dan untuk selanjutnya akan kita berikan tanggapan komentar agar anda bisa melihat seperti apakah tampilan "Highlight Author Comment Blogger's New Threaded Comments" yang dibuat hanya dengan kode css.

Pada posting pertama yang membahas tentang "membuat background berbeda pada author comment" ini tak akan melibatkan kode css3 karena beberapa blogger lebih menyukai tampilan minimalis.

Kode CSS (icon-blog-author):

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block:hover{
      background:#e9e9e9;
      border:1px solid #999;
      box-shadow:4px 4px 4px #444;   
}
.comment-block .icon.blog-author{
      position:absolute;        
      right:0; /* original code by: http://gubhugreyot.blogspot.com */
      bottom:0;
      opacity:0.2;
      filter:alpha(opacity=20);
      background-color:lightblue;
      background-position:bottom right;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover .icon.blog-author{
      background-color:transparent;
      width:20px !important;
      height:20px !important;
      opacity:1.0;
      filter:alpha(opacity=100);
}

Kode CSS (opacity effect):

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block:hover{
      background:#e9e9e9;
      border:1px solid #eee;
      box-shadow:4px 4px 4px #444;   
}
.comment-block .icon.blog-author{
      position:absolute;        
      right:0; /* original code by: http://gubhugreyot.blogspot.com */
      bottom:0;
      opacity:0.2;
      filter:alpha(opacity=20);
      background:lightblue !important;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover .icon.blog-author{
      background:none !important;
      z-index:-1;
}

Kode CSS (background rgba):

.comment-block{
      position:relative;
      padding:8px; /* original code by: http://gubhugreyot.blogspot.com */
      border:1px solid #ddd;
      border-radius:4px;
}
.comment-block:hover{
      background:rgba(174,174,174,0.2);
      border:1px solid #eee;
      box-shadow:4px 4px 4px #444;
}
.comment-block .icon.blog-author{
      position:absolute;
      right:0; /* original code by: http://gubhugreyot.blogspot.com */
      bottom:0;
      background:rgba(174,212,251,0.2) !important;
      width:100% !important;
      height:100% !important;
      margin:0 !important;
}
.comment-block:hover .icon.blog-author{
      background:none !important;
      z-index:-1;
}

Cara menggunakan kode css highlight Author Comment :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
  Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript).
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin>.
Copy kode css dan letakkan di atas ]]></b:skin>
Keterangan :
Pilih salah satu kode css. Anda bisa gunakan yang menggunakan css icon-blog-author, css opacity effect atau css background rgba.
Klik "Simpan Template (Save Template)".
Buka blog dan coba hasilnya dengan membuat komentar.

Catatan/Keterangan :

Highlight Author Comment hanya digunakan pada template/blog yang sudah menggunakan system Threaded Comments.
Lakukan perubahan pada background jika diperlukan.
Bagi yang ingin merubah blog atau template menjadi threaded comments silahkan buka panduannya melalui link di bawah ini :
Cara membuat blog menjadi Threaded Comments
Untuk menampilkan "Admin" dan/atau tanfa tangan Author di Author Comment silahkan ikuti panduan berikut:
Menampilkan Admin dan tanda tangan Author di Author Comment
Panduan cara Backup Template, Cara cari kode dan berbagai cara menyimpan kode CSS dapat dibuka di Special Tutorials. Lihat di menu sebelah kiri halaman.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu LEGI, April, 07, 2012

» Happy Blogging - gubhugreyot «

09.18 | 0 komentar | Read More

Berbagi Informasi Bisnis, Berita, Tips & Trik, dll

Membuat tulisan berjalan marquee blogspot

Mengenal dan menulis kode HTML blog

Membuat menu drop down blogspot –Bagian2

Cara Menyimpan Kode HTML di Template » Edit HTML "New Blogger Interface"

Create 404 error page in Blogger with simple flash game - Membuat halaman error 404

xHTML-1 :

xHTML-2 :

Kode CSS :

Button CSS3 u Reply Comment Blogger New Reply Comments

Kode CSS Button Reply Comment Blogger New Threaded Comments :

Ganti & rubah ukuran icon author comment di Blogger New Threaded Comments

Kode CSS-1 :

Kode CSS-2 :

Kode CSS-3 :

1 syntax css u ganti icon author di Blogger New Treaded Comments

Kode CSS :

Trick Merubah Ukuran Avatar di Blogger New Threaded Comments

Kode CSS-1 :

Kode CSS-2 :

CSS only: Displays "Admin and Signature" on Author Comment in Blogger New Threaded Comments

Kode CSS :

CSS Only: Highlight Author Comment Blogger's New Threaded Comments

Kode CSS (icon-blog-author):

Kode CSS (opacity effect):

Kode CSS (background rgba):

Adsense Black Magic

Label

Popular Posts Today