Trick Buat Box Posting dg Background Transparan

Anda dapat menggunakan berbagai ukuran image sebagai background. Pengaturan dilakukan melalui properti css background position dan background repeat serta background size. Dengan dilibatkannya properti background size, bahkan anda dapat ememaksa sebuah image dengan ukuran yang tak sesuai dengan box bisa menjadi selebar box.

Background image with transparency effect for blog posts, dibuat menggunakan 3 buah tag DIV dalam posisi relatif dan absolute serta menyisipkan opacity effect untuk meghasilkan transparansi. Anda dapat mengatur tingkat transparansi dengan mengatur nilai opacity. Warna background juga dapat anda rubah, dimana perubahan juga harus disertai dengan perubahan warna font. Perubahan warna font bertujuan membuat teks dapat terbaca dengan mudah.

Kode CSS :

#GRkolomku{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR06VVTTMwTKK_FZ0w9m9aI40uspbJlCkvhHYJqyErsH7ThGFP2NMLbwbtZfkVYcT6OynrMOI1JELT9EptVuAHZZ4Fyf-AT074DNrpf3G2GSw2suDyHvM115kZHesdUg223oSiYWQmECY/);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y; /* berulang secara vertikal */
        background-size:100% auto; /* mengatur ukuran background */
        position:relative;
        width:100%; 
        padding:10px;
        margin:-10px;
}
.GRoverlayku{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background-color:#000; /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.GRartikelku{
        position:relative; 
        color:#eee; /* sesuaikan warna teks dengan background-color */
}

xHTML :

<div id="GRkolomku">
<div class="GRoverlayku"></div>
<div  class="GRartikelku">
Content here!
</div>
</div>
</div>

Cara Membuat :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. 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) melalui "Box Edit Template".
   • 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.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :

1. Sebagian keterangan sudah tertulis dalam kode CSS.
2. Jika menggunakan background image dengan ukuran kecil, rubah :
   - background-size:100% auto; menjadi » background-size:(image-width)px auto;
   - background-repeat:repeat-y; menjadi » background-repeat:repeat;
3. Warna background dan warna teks dapat diganti dengan merubah :
   - background-color:#000;
   - color:#eee;

Menampilkan Posisi Cursor (mouse) dg Javascript

Mouse Position show sebenarnya bisa dimanfaatkan juga saat melakukan berbagai hal berkaitan dengan blog/web. Dengan posisi mouse yang ditampilkan membuat blogger mengetahui secara jelas setiap titik pada halaman blog. Anda dengan mudah akan mengetahu berapa tinggi header, lebar body (halaman), lebar box sidebar tinggi dan lebar image, lebar border dan beberapa yang lain. Jika kita sedang membuat desain posisi mouse bisa menolong untuk mengetahui seberapa besar tinngi atau lebar yang perlu ditambahkan atau dikurangi tanpa harus selalu "main perkiraan".

Di bawah ini ada sebuah box yang mempunyai lebar dan tinggi tertentu dan dilengkapi padding serta border. Cobalah untuk mengetahui seberapa ukuran border (biru), ukuran width dan height image serta paddingnya (merah). Setelah anda pastikan ukurannya dengan melakukan perhitungan melalui "mouse position', silahkan klik gambar untuk mengetahui benar tidaknya hasil pengukuran yang anda lakukan.

Mouse Position

Tutorial:
Back to Tutorial » Mouse Position Show

No Right Click Script- Javascript Anti copy

Javascript no right click (disable right click) atau sering juga disebut sebagai anti copy sangatlah sederhana. Javascript ini hanya terdiri dari beberapa deret saja. Kegunaan javascript disable right click atau anti copy adalah untuk membuat klik kanan mouse tak dapat bekerja. Sekalipun tak satupun yang dapat bekerja secara maksimal, karena dengan banyak cara segala conten blog tetap dapat dibuka dan diambil, namun setidak-tidaknya akan sedikit mempersulit bagi mereka-mereka yang belum banyak mengetahui trik mengatasi javascript seperti ini.

Jika anda tertarik untuk menggunakan javascript ini, silahkan buka panduan dan tutorial lengkapnya di sini.

Javascript Anti Copy :

<script type="text/javascript">
//<![CDATA[
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if (navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);
function mischandler() {
      return false;
}
function mousehandler(e) {
      var myevent = (isNS) ? e: event;
      var eventbutton = (isNS) ? myevent.which: myevent.button;
      if ((eventbutton == 2) || (eventbutton == 3)) return false;
}
document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
//]]>
</script>

Silahkan kode ini disimpan di bawah <head> agar lebih cepat terloading sehingga fungsi no right clik-nya juga cepat bekerja.

Tutorial :

Back to Tutorial » Javascript Disable Right Click

Add icon in front of a link with CSS3 effect

Beberapa template memang sudah melengkapi linknya dengan icon tepat sebelum teks link, namun lebih banyak di antaranya yang "masih polos" tanpa embel-embel icon. Ada beberapa cara untuk menampilkan icon sebelum dan sesudah link (teks link).

1. Hanya menggunakan kode html.
2. Menggunakan kode html dan kode CSS.
3. Menggunakan javacript dan kode html.

Menggunakan bantuan kode CSS merupakan cara paling efisien karena memungkinkan berbagai inovasi untuk dikembangkan. Dengan kode css juga membuat kode html menjadi lebih sederhana. Agar link yang dilengkapi icon terlihat berbeda dari yang biasa kita gunakan, kita perlu menambahkan kode css3. CSS3 dapat memberikan berbagai efek menarik tanpa melibatkan javascript. Demo di bawah ini adalah efek yang dihasilkan melalui css3 pada sebuah link yang dilengkapi icon.

DEMO : Menampilkan atau menambah icon di depan link dengan efek css3 Efek tidak akan mempengaruhi posisi link terhadap teks lain di sekitarnya.

Kode CSS

.GRiconlinkcss3{
      padding-left:18px;
      padding-right:10px;
      display:inline-block;
      background:url(http://gubhugreyot-icon.googlecode.com/svn/GRworld-16x16.png) no-repeat;
      background-position:4px 6px;
      background-size:10px 10px;
      text-decoration:none;
      color: #FCE6D6; /*code by: gubhugreyot */ 
      font-weight:500;
      text-shadow:1px 1px 1px #000;
      transition:0.6s ease-in;
      -o-transition:0.6s ease-in;
      -moz-transition:0.6s ease-in;
      -webkit-transition:0.6s ease-in;
      -ms-transition:0.6s ease-in;
}
.GRiconlinkcss3:hover{
      background:url(http://gubhugreyot-icon.googlecode.com/svn/GRtricolor-16x16.png) no-epeat;
      background-position:2px 3px;
      background-size:15px 15px;
      color:#F00;
      padding-left:22px;
      padding-right:6px;
}

xHTML

<a class="GRiconlinkcss3" href="http://gubhugreyot.blogspot.com/" title="Panduan & Tutorial Blogger terlengkap">Tutorial Blogger</a>

Catatan/Keterangan

1. Simpan kode CSS di atas kode ]]></b:skin>
2. Gunakan xHTML di halaman posting atau bagian yang lain dari blog.
3. Anda dapat mengganti background image (icon) yang digunakan. Buatlah icon dengan ukuran maksimal 16x16 (pixel).

Bagi yang membutuhkan panduan cara menyimpan kode CSS di template blogger silahkan buka link berikut:

Tutorial : Tips & Trick menambah atau menyimpan kode CSS

Trick dan cara membuat label (kategori) posting di Blogger

Label atau kategori posting adalah sebuah kata atau beberapa kata yang digunakan untuk membagi (memisahkan) posting dalam beberapa kelompok tertentu dengan berdasarkan klasifikasi materi posting. Setiap label dibuat dan ditentukan sendiri oleh pembuat posting dengan berdasarkan isi posting dan bertujuan untuk mempermudah pengunjung untuk mendapatkan posting berdasarkan kelompok. Agar dalam blog bisa dimunculkan sebagai label, tuliskan kata atau teks yang akan digunakan untuk pengelompokkan posting ini pada "boks Label" yang terletak di "boks Posting". Gunakan "tanda koma" setiap akan dimulai label baru!
Contoh:
Tutorial Blogger, Panduan Blogger, Tips - Tricks Blogger, Widget, ....dst

Dengan memberi label atau kategori pada posting maka setiap posting akan mempunyai kelompok berdasar kategori tersebut hingga ketika pengunjung klik pada kategori tertentu seluruh posting yang "termasuk dalam kategori tersebut" akan ditampilkan blogger.

Satu posting juga tak harus hanya menggunakan 1 (satu) buah label. Anda bisa menggunakan beberapa label sekaligus dengan tujuan tertentu. Sebagai contoh misalnya posting "tentang Matematika". Anda bisa gunakan beberapa kategori sekaligus seperti: Kelas 7, Kelas 8, Kelas 9, Pustaka Gila, SD, SMP, SMU dll. Setelah label posting cukup lengkap, untuk memberi label tak perlu dengan menulis kembali di box label. Cukup dengan klik Show All, kemudian klik teks label yang dikehendaki. Label terpilih secara otomatis akan tertuliskan di box label.

Langkah Membuat Label (Kategori)

1. Login ke Blogger
2. Halaman Dasbor (Dasboard).
   Pilih dan klik "New Post (Posting Baru)".
3. Tentukan materi posting, judul posting dan tuliskan "label (kategori)" dalam box Labels yang terletak di bagian bawah box posting (lihat gambar dan klik untuk perbesar!).
4. Terbitkan Posting

Catatan/Keterangan:

1. Label (kategori) akan ditampilkan tepat di bawah posting.
2. Menampilkan daftar posting berdasarkan kategori atau label, dapat dilakukan dengan cara mengaktifkan gadget labels (widget Labels). Widget Labels secara otomatis akan memuat semua data posting berdasarkan label (lihat gambar paling atas!). Angka-angka di sebelah kanan label menunjukkan jumlah posting yang menggunakan label (kategori) tersebut.
3. Anda dapat menggunakan lebih dari satu label pada setiap posting.
4. Untuk menghapus salah satu atau beberapa label yang sudah tertulis dalam daftar label yang terdapat di bawah box label( All Labels:) dapat dilakukan dengan menghapus "teks label yang akan dimusnahkan" pada setiap posting yang menggunakan "label yang akan dimusnahkan tersebut". Jadi misalnya sebuah label "Racun Tikus" digunakan pada 5 buah posting, maka anda harus menghapus "teks (label) Racun Tikus" di ke-5 posting. Jika masih ada "satu saja" label yang belum terhapus dari posting, maka label terebut masih akan terlihat di daftar label posting.
5. Biasanya semakin banyak posting dibuat maka akan semakin banyak pula label yang harus dibuat.

Catatan/Keterangan:

Setelah mengetahui cara membuat label di box posting, selanjutnya anda harus menggunakan widget Labels agar seluruh label posting ditampilkan di halaman posting secara terpisah dalam sebuah box widget. Tutorialnya silahkan buka di sini!

Cara mengaktifkan dan menampilkan Widget Labels di Blogger