Membuat Kode Posting Lightbox Lebih Simple

Posting dengan kode yang berderet terlalu panjang dan rumit pasti membuat siapapun kesulitan untuk melakukan cek ulang, baik saat terjadi kesalahan penulisan ataupun saat harus dilakukan update ulang posting. Posting image, terlebih dalam bentuk gallery adalah salah satunya. Saat banyak image diperlukan untuk melengkapi posting kita akan melihat deretan kode html (di posting mode Edit HTML) yang begitu bejibun bikin kepala pening. Persoalan seperti ini memang perlu penanganan khusus hingga kode html di halaman posting bisa banyak terkurangi. Kode CSS adalah solusi paling tepat yang bisa kita andalkan. Dengan bantuan kode CSS maka bisa jadi kode html di box posting akan terkurangi hingga 50% lebih saat banyak image kita libatkan. Meskipun pada intinya tutorial tentang efisiensi penggunaan kode diposting image ini diperuntukkan pada penggunaan lightbox image viewer di blogger, namun demikian karena kode yang kita buat ini juga berlaku secara umum pada keseluruhan fungsi posting image, maka bisa saja dengan mudah digunakan untuk berbagai posting lain yang tidak bersentuhan dengan lightbox.

Contoh bentuk dasar kode posting lightbox

Di bawah ini ada 2 (dua) macam contoh kode yang digunakan untuk posting menggunakan lightbox. Kode pertama adalah kode html yang dibuat tanpa bantuan penambahan kode css penyederhana posting image, sedang contoh yang kedua telah menggunakan fungsi baru hasil penambahan kode css.

Kode posting lightbox yg tanpa bantuan css:

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img height="..px" src="thumbnail.jpg" width="..px" style="float:left;margin:5px 15px 5px 0;padding:10px;border-radius:6px;box-shadow:0 0 8px #000;border:1px solid #aaa;" /></a>

Kode posting lightbox yg lebih simple (dg css):

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Dari contoh di atas bisa dilihat betapa dengan bantuan kode css jumlah kode html yang digunakan menjadi sangat jauh terkurangi. Itu hanya untuk sebuah image. Silahkan perkirakan berapa persen kira-kira efisiensi kode yang tercipta jika kita postingkan 10 buah image. Yah ... pasti jauh lebih besar dari yang terbayangkan.

Untuk mendapatkan tutorial cara mengefektifkan dan meminimalisasi penggunaan kode html untuk posting image, silahkan klik link di bawah ini:

Tips dan trik membuat kode posting image lebih simpel

Setelah memahami bagaimana cara membuat bentuk kode posting image yang paling ringkas dengan hasil yang super melalui panduan yang dibuka melalui link di atas, kini kita tinggal menambahkan kode untuk lightbox. Jika pakai lightbox yang umumnya digunakan blogger kita hanya perlu tambahkan kode rel="lightbox[gallery-1]" pada tag "a", sehingga bentuk kodenya menjadi seperti berikut:

Contoh kode pada lightbox (umum)

<a href="big-image.jpg" rel="lightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Jika menggunakan lightbox berdasar kode dan panduan di mitrabarayaonline, kode htmlnya sbb:

Lightbox Image Viewer for Blogger

Contoh kode pada lightbox image viewer:

<a href="big-image.jpg" rel="GRlightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Lightbox slideshow

Contoh kode pada lightbox slideshow

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Penggunaan kode posting image dengan menggunakan lightbox berdasarkan penempatan (poisisi) image.

Image di posisi sebelah kiri (left)

Image di sbl kiri (left):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfl" src="thumbnail.jpg" /></a>

Image di posisi sebelah kanan (right)

Image di sbl kanan (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfr" src="thumbnail.jpg" /></a>

Image di tengah (centre)

Image di tengah (centre):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfc" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Image poisis Tak satupun (right):

<a href="big-image.jpg" rel="grsslightbox[gallery-1]" title="bla...bla...bla..."><img class="imgfn" src="thumbnail.jpg" /></a>

Image di posisi Tak Satupun (none)

Gallery:

<div style="float:left;padding:0 0 10px 10px;margin:20px 0;border:2px solid #555;"><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-lautkidul.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-lautkidul.jpg" /></a><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-nusantara.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-nusantara.jpg" /></a><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-tradisional.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-tradisional.jpg" /></a><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-jabar.jpg" rel="grsslightbox[gallery-1]"><img class="imgfn" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-jabar1.jpg" /></a></div>
<div style="clear:both"></div>

Catatan/Keterangan:

1. rel="GRlightbox[gallery-1]" diperuntukkan untuk lightbox image viewer for blogger. Panduan membuat lightbox ini bisa dibuka melalui link di bawah ini:
   Panduan Membuat Lightbox Image Viewer for Blogger
2. rel="grsslightbox[gallery-1]" diperuntukkan untuk lightbox slideshow. Panduan membuat lightbox slideshow bisa dibuka melalui link di bawah ini:
   Panduan Membuat Lightbox slideshow

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

Posting » Setu LEGI, January, 28, 2012

» Happy Blogging - mitrabaraya «

Membuat Slideshow CSS3 u Image Gallery Lightbox

Slideshow ini hanya dibuat dengan css3, namun demikian anda boleh bandingkan dengan yang dibuat menggunakan javascript. CSS3 transition, CSS3 transform, box-shadow, text-shadow dan border-radius mampu menciptakan slideshow yang sangat indah dan takkan mengecewakan untuk digunakan di blog. Dengan hanya menggunakan kode css tentu saja slideshow css3 ini menjadi sangat enteng bebannya. Membuatnyapun terhitung sangat mudah hingga dalam waktu singkat bisa menjadi salah satu bagian dari blog sampeyan. Seperti kata pepatah, tak kenal maka tak sayang, tak makan maka perut keroncongan (he.. he...ngawur, ya?!), kita langsung saja menuju tkp untuk menyaksikan demo css3 slideshow yang telah digabungkan dengan lightbox.

D E M O Slideshow CSS3

Sekalipun slideshow ini didesain untuk menjadi sebuah gallery bagi lightbox, namun anda tetap bisa menggunakannya secara bebas tanpa harus menggunakan lightbox. Untuk menghilangkan fungsi lightbox cukup dengan membuang kode rel="GRlightbox[mygallery-1]". Jika pada demo hanya digunakan untuk menampilkan 6 (enam) buah image, namun demikian anda bisa menambahnya hingga sebanyak yang anda mau. Tentu saja penambahan image ini harus dipertimbangkan dengan controll yang digunakan. Semakin banyak image maka akan semakin bertambah pula controllnya hingga mungkin saja akan membuat terlalu penuh box slideshow-nya. Hal lain yang harus dipertimbangkan adalah kecepatan loading. Semakin banyak image maka loading akan semakin lama yang kadang membuat pengunjung bosan menunggu.

Cara Membuat Slideshow CSS3

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan backup template. Buka panduannya di sini!
6. Cari kode ]]></b:skin>. Panduan cara cepat mencari kode html di template bisa dibuka di sini!
7. Copy dan pastekan kode CSS tepat di atasnya.
8. Klik Simpan Template (Save Template).

Kode CSS Slideshow CSS3

#SSmitrabaraya{
       margin:20px auto;
       text-align:center;
       position:relative;
       width:300px;
       height:225px;
       background:#ddd url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg-slideshow-css3.jpg) center no-repeat;
       background-size:300px 225px;
       border-radius:8px; 
       border:2px solid #555;
       padding:10px;
       box-shadow:0 0 4px #000; 
}
#SSmitrabaraya:hover{box-shadow:-2px -2px 2px #555, 5px 5px 8px #222;}
#SSmitrabaraya ul,#SSmitrabaraya li,#CTmitrabaraya,#CTmitrabaraya li,#CTmitrabaraya li a{list-style:none;margin:0;padding:0;border:0 solid;}
#PVmitrabaraya li{position:absolute;top:0;left:0;z-index:0;}
#PVmitrabaraya li a img{
       opacity:0;
       filter:alpha(opacity=0);
       transition:2s;
       -o-transition:2s;
       -moz-transition:2s;
       -webkit-transition:2s;
       -ms-transition:2s;
       border-radius:4px;
       width:300px;
       height:225px;
       margin:8px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
}
#PVmitrabaraya li:target{z-index:5;}
#PVmitrabaraya li:target a img{opacity:0.6;filter:alpha(opacity=60);}
#SSmitrabaraya:hover li:target a img{opacity:1.0;filter:alpha(opacity=100);}
#SSmitrabaraya #CTmitrabaraya{
       position:absolute;
       bottom:100px;
       left:0;
       width:95%;
       z-index:10;
       text-align:center;
       opacity:0;
       filter:alpha(opacity=0); 
}
#SSmitrabaraya #CTmitrabaraya,#CTmitrabaraya li a{transition:0.6s;-o-transition:0.6s;-moz-transition:0.6s;-webkit-transition:0.6s;-ms-transition:0.6s;}
#SSmitrabaraya:hover #CTmitrabaraya{bottom:12px;opacity:1.0;filter:alpha(opacity=100); }
#CTmitrabaraya li{display:inline-block;}
#CTmitrabaraya li a{
       padding:1px 6px;
       margin:0;
       text-align:center;
       border-top:1px solid #aaa;
       border-bottom:1px solid #aaa;
       border-radius:2px;
       font-weight:500;
       font-size:12px;
       text-decoration:none;
       color:#fff;
       background:#555;
       text-shadow:1px 1px 1px #000;
}
#CTmitrabaraya li a:hover, #CTmitrabaraya li a:focus {
       box-shadow:0 0 6px #000;
       border-color:#00F;
       outline:none;
       color:#FF0;
       background:#333;
       transform:scale(1.2);
       -o-transform:scale(1.2);
       -moz-transform:scale(1.2);
       -webkit-transform:scale(1.2);
       -ms-transform:scale(1.2); 
}
#CTmitrabaraya li a:active{
       transform:scale(0.8);
       -o-transform:scale(0.8);
       -moz-transform:scale(0.8);
       -webkit-transform:scale(0.8);
       -ms-transform:scale(0.8);
}
#CTmitrabaraya li a:visited{color:red;}
#MBview1 a img,#MBview2 a img,#MBview3 a img,#MBview4 a img,#MBview5 a img,#MBview6 a img,#MBview7 a img,#MBview8 a img,#MBview9 a img,#MBview10 a img,#MBview11 a img,#MBview12 a img{margin:0;padding:0;border:0 solid;}

Gunakan kode berikut di halaman posting

xHTML Slideshow CSS3

<div id="SSmitrabaraya"> 
    <ul id="CTmitrabaraya"> 
        <li><a href="#MBview1">1</a></li> 
        <li><a href="#MBview2">2</a></li> 
        <li><a href="#MBview3">3</a></li>
        <li><a href="#MBview4">4</a></li> 
        <li><a href="#MBview5">5</a></li> 
        <li><a href="#MBview6">6</a></li> 
    </ul> 
    <ul id="PVmitrabaraya">
        <li id="MBview1"><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-jabar.jpg" rel="grsslightbox[mygallery-1]"><img alt="img1" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-jabar1.jpg" /></a></li>
        <li id="MBview2"><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-lautkidul.jpg" rel="grsslightbox[mygallery-1]"><img alt="img2" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-lautkidul.jpg" /></a></li> 
        <li id="MBview3"><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-nusantara.jpg" rel="grsslightbox[mygallery-1]"><img alt="img3" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-nusantara.jpg" /></a></li>
        <li id="MBview4"><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-tradisional.jpg" rel="grsslightbox[mygallery-1]"><img alt="img4" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-tradisional.jpg" /></a></li> 
        <li id="MBview5"><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-aweweteumakekutang.jpg" rel="grsslightbox[mygallery-1]"><img alt="img5" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-aweweteumakekutang.jpg" /></a></li>
        <li id="MBview6"><a href="https://sites.google.com/site/mitrabarayaprojec/slideshow/img_mitrabarayaonline-ureport.jpg" rel="grsslightbox[mygallery-1]"><img alt="img6" src="https://sites.google.com/site/mitrabarayaprojec/slideshow/lt_mitrabarayaonline-ureport.jpg" /></a></li> 
    </ul>
</div>

Catatan/Keterangan:

1. Untuk membuat lightbox agar bisa dipadukan dengan slideshow css3, buka panduan cara membuatnya di sini
2. Gunakan image (thumbnail) slideshow dengan ukuran 300px(width)x225px(height).

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

Posting » Setu LEGI, January, 28, 2012

» Happy Blogging - mitrabaraya «

Adding CSS3 in Lightbox Slideshow: Membuat Lighbox Slideshow lebih Atraktif

Meninggalkan kode CSS3 saat membuat widget atau kelengkapan blog yang lain rasanya seperti memasak sayur tanpa garam. Kurang lengkap hingga sedikit hambar rasanya! Begitu pula dengan lightbox slideshow yang telah terpostingkan beberapa waktu berselang. Tanpa penambahan kode css3, lightbox slideshow ini memang sudah cukup menarik, namun jika kita berikan sentuhan box shadow, text shadow, border radius, dan sedikit animasi melalui css3 transition dan css3 transform tentunya akan jadi terlihat lebih fantastis. Kejelian menambahkan kode css3 dan memilih bagian yang harus di modifikasi menjadi bahian yang sebenarnya sangat bergantung kepada selera. Oleh karena itu pengembangan lighbox slideshow melalui css3 ini semoga bisa menjadi sumber referensi yang bermanfaat.

D E M O

D E M O Lightbox Slideshow

Beberapa bagian penting yang harus dirubah:

Sekalipun pada dasarnya penambahan kode css3 lightbox hanya dilakukan pada kode css, namun sedikit perubahan juga perlu dilakukan pada javascriptnya. Pengontrol lightbox seperti next, previous, play slideshow, stop slideshow, dan close yang sebelumnya berupa teks (dalam javascript) dihilangkan dan diganti dengan beberapa image yang berfungsi sebagai button pengontrol. Silahkan download kode CSS-nya untuk mengetahui apa saja kode css3 yang ditambahkan hingga lightbox slideshow ini terlihat berbeda.

Kode CSS dan Javascript Lightbox Slideshow plus CSS3

Link javascript & kode CSS Lightbox Slideshow

<link href="https://mitrabaraya-lightbox-ka1.googlecode.com/svn/mitrabaraya-lightbox-ka1-css3.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="https://mitrabaraya-lightbox-ka1.googlecode.com/svn/mitrabaraya_lightbox-ka-1.2.js"></script>

Cara menggunakan lightbox slideshow

Simpan seluruh kode (link kode css dan javascript) di atas kode </head>, kemudian lakukan posting menggunakan lightbox.

Kode Posting Lightbox Single Image

<a href="image.jpg" rel="mitrabarayaLB" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Kode Posting Lightbox-Gallery

<a href="image.jpg" rel="mitrabarayaLB[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="mitrabarayaLB[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="mitrabarayaLB[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>
<a href="image.jpg" rel="mitrabarayaLB[gallery-1]" title="Tuliskan teks di sini"><img src="thumbnail.jpg" width="200" height="150" /></a>

Panduan Lengkap

• Panduan menggunakan lightbox slideshow plus css3 ini tak berbeda dengan lightbox sldeshow yang telah terpostingkan sebelumnya. Yang berbeda hanya pada link kode CSS dan link javascript lightbox slideshow. Silahkan buka panduannya melalui link di bawah ini.
  Cara menggunakan lightbox slideshow
• Jika tertarik untuk membuat lightbox yang tanpa slideshow, silahkan buka link berikut:
Lightbox image viewer for blogger
• Membuat lightbox mengharuskan blogger untuk bisa membuat image gallery lightbox. Ikuti panduan cara membuatnya disini:
  Cara membuat Image Gallery u Lightbox

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

Update » Rebo   WAGE,Maret,20,2012

» Happy Blogging - mitrabaraya «

Creating a special ticker Popular Posts Blogger Widget Plugins

Tak perlu harus pakai javascript atau kode html yang njelimet tetapi sebuah ticker spesial dapat kita buat pada widget popular posts blogger plugin. Ticker yang memanfaatkan efek marquee ini berfungsi untuk membuat seluruh popular post berputar ke arah atas dimulai dari popular post pertama hingga yang terakhir dan selalu berulang seperti itu. Dengan efek yang seperti ini tentu saja kita tak perlu sebuah box yang besar atau tinggi. Dengan box ticker berukuran 200px atau mungkin lebih sedikit maka berapapun jumlah popullar post semuanya akan dapat ditampilkan satu semi satu secara sempurna. Dengan bantuan sedikit script yang menyatu dengan tag marquee, pergerakan memutar popular post dapat dihentikan dengan mengarahkan cursor ke dalam box popular posts blogger plugin. Agar lebih jelas, silahkan lihat di demo berikut:

D E M O

Cara membuat Ticker Widget Popular Posts Blogger Plugins

Untuk membuat special ticker Popular Posts Blogger Widget Plugins ini widget Popular Posts harus diaktifkan terlebih dahulu lewat Add a Gadget.

1. Login ke Blogger.
2. Dasbor/Dasboard.
3. Rancangan/Design atau Layout (Tata Letak) untuk New Blogger Interface.
4. Page Element (Elemen Laman).
5. Klik Add a Gadget.
6. Pilih widget/gadget Popular Posts/Entri Populer
7. Klik SAVE.
8. Anda bisa cek dulu hasil penambahan widget popular posts dengan membuka halaman blog, kemudian lanjutkan kembali untuk membuat ticker popular posts dengan :
9. Pilih dan klik fitur Rancangan/Design.
10. Klik Edit HTML.
11. Lakukan Backup Template. Buka tutorialnya di sini.
12. Klik Expand Widget Template/Expand Widget Templates.
13. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
14. Cari kode <b:if cond='data:title'><h2><data:title/></h2></b:if>.
    Sampeyan bisa gunakan Ctrl + F untuk memudahkan mencari kode. Panduan menggunakan Ctrl + F untuk mencari kode html template bisa di baca di sini.
15. Di sekitar kode di atas kode lengkapnya seperti di bawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear:both;'/>

              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

16. Rubah/hapus kode di atas dan ganti dengan kode baru berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div style='height:225px;width:98%;border:1px solid #666;border-top-width:15px;border-bottom-width:15px;border-radius:5px;box-shadow:0 0 8px #000;margin:10px auto;padding-top:10px;'>
<marquee direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div style='clear:both;'/>

              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</marquee>
</div>
</b:includable>
</b:widget>

17. SAVE Templates/Simpan Template

Kode CSS

.popular-posts ul{
      margin:0;
      padding:0 5px 0 5px;
}
.popular-posts li{
      margin:0;
      padding:0;
}
.popular-posts .item-thumbnail a img{
      width:70px !important;
      height:70px !important;
      border:1px solid #eee;
      padding:4px;
      background:#aaa;
      border-radius:5px;
      box-shadow:2px 2px 2px #000;
      margin:0 6px 5px 0;
}

Catatan/keterangan:

1. perhatikan Kode CSS yang seperti ini:
   

   .popular-posts .item-thumbnail a img
         width:70px !important;
         height:70px !important; 
         ...
         ...
   }

   Jika kolom widget terlalu sempit image pada widget popular posts bisa diperkecil dengan merubah nilai 70px menjadi 40px atau 50px.
2. Demo dan kode menggunakan "New Blogger Template"

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

Update » Kemis KLIWON, January, 12, 2012

» Happy Blogging - mitrabaraya «

Membuat Animasi Background Berjalan (Bergerak)

Yang ini juga asli product dalam negeri. Dengan hanya secuil javascript sebuah background animasi yang selalu bergerak bisa menjadi bagian dari blog sampeyan. Menempatkannya sebagai background header menjadi sebuah pilihan tepat hingga terlihat sangat atraktif. Membuatnya juga sangat simple karena hanya perlu menyimpan script pertama di bagian header di bawah tag pembuka header (<head>) dan script kedua di atas tag penutup body (</body>). Perlukah kode css untuk animasi background bergerak ini? Yah, tentu saja jika dipandang perlu sampeyan bisa buat tambahan kode css agar bisa ditampilkan lebih cantik di blogger atau blogdetik sekaligus penyesuaian dengan kode html di template. O..., ya ... xHTML yang nantinya dipergunakan bisa sampeyan lihat di bawah ini.

<div id="digeolkeun" style="width:100%;height:150px;background:url('bg-animasi.jpg') repeat 0px 0px"></div>

Keterangan/Catatan

1. Ganti bg-animasi.jpg dengan URL image yang akan digunakan sebagai background bergerak.
2. Sebagai sample sampeyan bisa gunakan URL background image berikut untuk melakukan percobaan.
   https://sites.google.com/site/mitrabarayaprojec/images/mitrabaraya_bg-contoh.gif
3. Silahkan ikuti panduan dan tutorialnya di Membuat Animasi Background
4. Silahkan berikan komentar dan jika ada kesulitan aplikasi di blog bisa sampaikan langsung ke si-empunya blog!
5. Background Animasi bergerak bisa diterapkan di blogdetik yang notabene sedikit terbatasi dalam modifikasi dan improvisasi kode html, oleh sebab itu jika kita gunakan di blogger pasti jauh lebih mudah!

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

Posting: Selasa PON, » January, 10, 2012

» Happy Blogging - mitrabaraya «

jQuery Simple Image Jadi Gede

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

D E M O

D E M O

D E M O

Javascript Simple Image Zoomer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya-simple-jdgede.pack.js" type="text/javascript"></script>

xHTML Simple Image Zoomer

<img class="jDgede" src="https://sites.google.com/site/mitrabarayaprojec/lebaran/images/mitrabaraya_abg-desa-1.jpg" width="150" height="225" />

<img class="jDgede" src="https://sites.google.com/site/mitrabarayaprojec/lebaran/images/mitrabaraya_abg-desa-2.jpg" style="width:200px;height:auto;" />   

<img class="jDgede" data-jDgedeto="700"    src="https://sites.google.com/site/mitrabarayaprojec/lebaran/images/mitrabaraya_abg-desa-3.jpg" width="150" height="130" />

Cara menggunakan Simple Image Zoomer

1. Login ke blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
6. Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
7. Copy dan pastekan javascript di bawah kode <head>.
8. Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
9. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
10. Klik Simpan Template (Save Template).
11. Gunakan xHTML untuk melakukan posting.
12. Buka halaman posting untuk melihat hasilnya.

Kode CSS Simple Image Zoomer

.jDgede{
        border:2px solid #eee;
        margin:6px;
        background:#aaa;
        border-radius:10px;
        padding:10px;
        box-shadow:0 0 8px #000;
}

Keterangan/Catatan

• Gunakan image dengan ukuran width dan/atau height lebih dari 300px agar efek zoom lebih terlihat.
• Width dan height yang disertakan pada kode html posting sebaiknya berukuran di bawah 250px agar tidak terlalu memenuhi halaman posting.
• Ukuran width dan height pada kode HTML menggunakan perbandingan sesuai dengan image sesungguhnya. Jika image berukuran width=800, height=400 maka pada kode html bisa menggunakan ukuran width=200 dan height=100
• Jika dalam kode html ditambahkan tag style (seperti contoh kode ke-3), maka bisa dituliskan width="..px; height:auto;
• Besaran zoom bisa diatur dengan menambahkan kode data-jDgedeto="700". Nilai 700 dalam satuan pixel (width).
• Kode CSS hanya dimaksudkan untuk memperindah image bebas untuk digunakan ataupun tidak.

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

» Happy Blogging - mitrabaraya «

Cara buat Box dg Efek Gelap-Terang (Fade Effect) CSS3

Panduan atau tutorial (blogger & blogdetik) membuat box dengan efek gelap terang ini bisa digunakan tidak hanya di blogger, namun bisa juga digunakan di blogdetik.

Fade Effect yang tercipta melalui opacity effect sekalipun merupakan efek yang sangat sederhana namun hingga saat ini memang merupakan sebuah efek yang banyak dilibatkan dalam berbagai desain/fungsi. Selain membuatnya cukup mudah, tak dapat dipungkiri bahwa fade effect mampu memberi pengaruh yang luar biasa menarik, terlebih bila dipadukan dengan efek-efek yang lain.

CSS3 sebagai sebuah pengembangan baru kode css memberi andil yang cukup besar bagi blogger untuk mengembangkan efek terang gelap atau fade efect ini. Berbagai efek yang sebelumnya harus dibangun melalui javascript kini bahkan tak perlu lagi dilakukan. Tentang kompabilitas css3? Kita tak lagi perlu lagi kuwatir. Berbagai browser besar setiap detiknya juga selalu meningkatkan kompabilitas mereka terhadap css3. Yah... karena kode css3 tak boleh tidak akhirnya akan menjadi kode utama pembangun desain blog/website karena kesederhanaannya dan kemampuannya untuk membangun berbagai desain animatif. Diwaktu ke depan kita akan lebih merasakannya ketika semua browser sudah kompatible dengan css3 animation.

Kode CSS Box Terang Gelap

.mybox{
        position:relative;
        display:block;
        width:200px;
        max-height:400px;
        background:#fff;
        color:#000;
        overflow:auto;
        padding:20px 15px;
        margin:20px 5px;
        border:2px solid #777;
        border-radius:6px;
        opacity:0.2;
        filter:alpha(opacity=20);
        transition:1s;
        -o-transition:1s;
        -moz-transition:1s;
        -webkit-transition:1s;
}
.mybox:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
}

xHTML

<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</div>

xHTML dengan tag p

<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!
</p>

Contoh xHTML

<div class="mybox">
<a href="http://..../images/mitrabaraya_photokuring.jpg" title="my photo"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRdroEunKNtRJ58Da6JRL0HlA5bBbSb69vYQkbQWOCUrMLM3S2oFOx15llfDOmblN1WgMx0HGgxf8SPNyV7YIxNTl4jZ3uUUgHPZ98pt1p9gEepAU2Yau_SHCPYTRcYiN17hf-DbEErOS/s320/mitrabaraya_photokuring.jpg" width="200" height="150" style="float:left;margin:5px 10px 5px 0;padding:3px;border:2px solid #222;border-radius:6px;" /></a>Heechul dan Hankyung rupanya udah berbagi kamar sejak sebelum mereka ... Ini malah bikin dia jadi bahan tertawaan
</div>

Cara membuat Box dengan Efek Terang - Gelap

• Login ke Blogger
• Dasboard
• Design (Rancangan)
• Edit HTML
• Cari kode ]]></b:skin>
• Letakkan kode CSS di atas kode ]]></b:skin>
• Klik Save Template
• Gunakan xHTML di halaman posting atau di sidebar blog.

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

» Happy Blogging - mitrabaraya «

jQuery Loader: Preload your blog

jQyery Loader bekerja di awal blog mulai di buka. Animasi menyertai desain loader ini dalam rupa fade effect yang disertai gerak membuka pada layar secara vertical. Yang sangat perlu diperhatikan ketika menggunakan jQuery loader adalah kondisi "ready to use" pada keseluruhan file, baik yang berupa image, javascript, css atau bentuk file lain seperti misalnya video (jika menggunakan). Jika salah satu saja file dalam blog dalam kondisi "mati/tidak dapat diakses" maka halaman blog tak akan mungkin terbuka. Jadi kesimpulannya sebelum menggunakan jQuery loader sebaiknya pastikan bahwa semua data blog benar-benar dalam kondisi "ready to use".

Cara Membuat jQuery Loader

1. Login ke Blogger
2. Halaman Dasbor (Dasboard)
3. Klik Rancangan (Design)
4. Klik Edit HTML
5. Cari kode <head>
6. Copy-Paste: Copy dan pastekan javascript dan kode CSS berikut di bawah kode <head>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src='https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya-JQ_loader.min.js' type='text/javascript'></script>
<style type="text/css" media="screen">
.QOverlay{background:#000;z-index:9999999;}
.QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
.QOverlay:before{color:#666;top:350px;content:"Sabar Refresh Mun loading Kalilaan ....!!!"; }
.QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
.QLoader{background:#ccc;height:1px;}
</style>

7. Cari kode </body>
8. Copy-Paste: Copy dan pastekan javascript berikut di atas kode </body>

<script type="text/javascript">
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

9. Klik kode Save Template
10. Cek hasilnya dengan membuka blog!

Keterangan/Catatan:

• Buka menu Special Tutorials di deret menu sebelah kiri jika membutuhkan panduan tentang cara menyimpan kode HTML dan cara cepat mencari kode HTML menggunakan Ctrl + F
• Jika sebelumnya blog telah menggunakan jQuery-1.3.2.min.js atau jQuery yang setara dengan fungsi jQuery-1.3.2.min.js, cukup gunakan satu buah jQuery saja.
• Loader blog kompatibel untuk jQuery v1.2.3 s/d v.1.5.2
• Loader blog tidak kompatibel untuk jQuery v1.6.0.s/d v1.7.1
• Apabila menginginkan loader terlihat lebih awal (secepatnya setelah buka blog), pindahkan kode css-nya di atas </body> sehingga bentuk penataan kodenya (yang di atas </body>) menjadi seperti berikut:
  

  Model Penyimpanan yg lain

  <style type="text/css" media="screen">
  .QOverlay{background:#000;z-index:9999999;}
  .QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
  .QOverlay:before{color:#666;top:350px;content:"Sabar Refresh Mun loading Kalilaan ....!!!"; }
  .QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
  .QLoader{background:#ccc;height:1px;}
  </style>
  
  <script type="text/javascript">
  QueryLoader.selectorPreload = "body";
  QueryLoader.init();
  </script>

• untuk menampilkan gambar (image) pada loader, tentukan gambar dan ukuran tinggi gambar, kemudian tambahkan di kode CSS. Contoh perubahannya seperti berikut:
  

  Menambah image di loader blog script:

  <style type="text/css" media="screen">
  .QOverlay{background:#000;z-index:9999999;}
  .QOverlay:before,.QOverlay:after{display:block;position:absolute;left:0;text-shadow:0 0 15px #aaa;width:100%;text-align:center;font-size:16px;font-weight:bold;}
  .QOverlay:before{color:#666;top:350px;content:"Sabar Refresh Mun loading Kalilaan ....!!!"; }
  .QOverlay:after{top:250px;color:#f00;content:"Loading...";text-decoration:blink;}
  .QLoader{background:#000 url(backround-image.jpg) center no-repeat;height:200px;}
  </style>

• Sumber: http://www.gayadesign.com/

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

Update » Jemuah PON, February, 24, 2012

» Happy Blogging - mitrabaraya «

Simple No Right Click Image - Disable Right Click Image

Daripada harus dipostingkan dikemudian hari yang paling juga bisa lupa,juga agar sampeyan punya pilihan dalam menggunakan kode anti copy image, maka setelah pada posting sebelumnya kita coba membuat sebuah anti copy image "yang sedikit menipu pengunjung" melalui CSS3, untuk kali ini kita tak sekedar membuat anti copy saja, namun benar-benar sebuah fungsi "no right click atau disable right click" karena setelah script digunakan maka "klik kanan mouse" benar-benar tak akan bekerja sama sekali. Sangat sederhana dan teramat mudah digunakan serta compatible dibeberapa browser besar seperti Mozilla Firefox, Opera dan Google Crhome.

D E M O

Cara menggunakan Kode

• Tambahkan sedikit script seperti berikut pada tag img.
  onContextMenu="return false;"
• Cara menambahkan kode dapat dilihat seperti contoh di bawah ini:
  

  <img src="image.jpg" width="..." height="..." style="float:...;margin:..px;padding:..px;" onContextMenu="return false;"/>

• No Right Click Image dapat digunakan di semua bagian blog seperti halaman posting ataupun sidebar.

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

» Happy Blogging - mitrabaraya «

Membuat Daftar Posting di Halaman Statis Blogger

Berbagai hal bisa kita tuliskan sebagai posting di halaman statis blogger yang berjumlah 20 halaman (maksimal). Judul (title) posting dihalaman statis nantinya ditampilkan sebagai link menu yang letaknya bisa kita pilih antara sidebar dan di atas halaman posting (di bawah header). Karena terbatasnya lebar, baik di bawah header ataupun sidebar, sebaiknya title halaman statis dibuat sependek mungkin. Title yang pendek nantinya bisa diperjelas melalui deskripsi di halaman statis tersebut.

Mengisi halaman statis blogger dengan daftar berbagai posting yang telah kita buat juga menjadi salah satu hal yang akan sangat bermanfaat. Halaman statis membuat kita bisa lebih memaksimalkan tampilan daftar posting tersebut karena halaman yang cukup luas. Beberapa kode CSS dan xHTML mungkin akan dapat membantu hingga daftar posting dapat dibuat lebih tertata rapi. Di bawah ini telah tersedia kode CSS dan xHTML yang mungkin sampeyan butuhkan. Untuk lebih memaksimalkan hasilnya atau mungkin juga untuk penyesuaian dengan halaman blog silahkan lakukan beberapa modisikasi melalui perubahan pada kode CSS atu xHTML. O ... ya ... kita telah sediakan dalam dua bentuk box. Box besar digunakan apababila daftar posting dibuat dalam ukuran selebar halaman posting dan kode css dan xHTML ke-2 membagi halaman posting menjadi 2 kolom hingga mampu memuat 2 box daftar posting di kanan dan kiri.

Kode CSS Daftar Posting Box Besar

.boks-daftar-posting-1{
     width:95%; /* by: http://mitrabarayaonline.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     margin:20px auto;
     padding:20px 15px;
     border-radius:6px;
}
.boks-daftar-posting-1 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 10px 20px;
}
.daftar-posting-1{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-1 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-1 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-1 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111;
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-1 li a:hover{
     color:red; /* by: http://mitrabarayaonline.blogspot.com */ 
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar Posting Box Besar

<div class="boks-daftar-posting-1">
        <h3>Panduan Blogger</h3>
    <div class="daftar-posting-1">
        <ul>
            <li><a href="panduan-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-1</a></li>
            <li><a href="panduan-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-2</a></li>
            <li><a href="panduan-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-3</a></li>
            <li><a href="panduan-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-4</a></li>
            <li><a href="panduan-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-5</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML-1</a></li>
            <li><a href="panduan-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-6</a></li>
            <li><a href="panduan-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-7</a></li>
            <li><a href="panduan-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-8</a></li>
            <li><a href="panduan-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-9</a></li>
            <li><a href="panduan-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-10</a></li>
            <li><a href="panduan-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-11</a></li>
            <li><a href="panduan-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-12</a></li>
            <li><a href="panduan-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-13</a></li>
            <li><a href="panduan-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-14</a></li>
            <li><a href="panduan-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-15</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML-2</a></li>
            <li><a href="panduan-blogger-16.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-16</a></li>
            <li><a href="panduan-blogger-17.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-17</a></li>
            <li><a href="panduan-blogger-18.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-18</a></li>
            <li><a href="panduan-blogger-19.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-19</a></li>
            <li><a href="panduan-blogger-20.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-20</a></li>
            <li><a href="panduan-blogger-21.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-21</a></li>
            <li><a href="panduan-blogger-22.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-22</a></li>
            <li><a href="panduan-blogger-23.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-23</a></li>
            <li><a href="panduan-blogger-24.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-24</a></li>
            <li><a href="panduan-blogger-25.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-25</a></li>
         </ul>
    </div>
</div>

Kode CSS Daftar posting Box Kecil

.boks-daftar-posting-2{
     width:45%; /* by: http://mitrabarayaonline.blogspot.com */ 
     background:#fff;
     border:2px solid #555;
     padding:10px;
     border-radius:6px;
}
.boks-daftar-posting-2 h3{
     font-size:18px;
     text-align:left;
     margin:10px 0 15px 10px;
}
.daftar-posting-2{
     max-height:500px;
     overflow:auto;
     border:1px solid #888;
     box-shadow:0 0 10px #333;
     border-radius:4px;
}
.daftar-posting-2 ul{
     display:inline-block;
     list-style:none;
     margin:20px 0;
     padding:0 25px;
}
.daftar-posting-2 li{
     list-style:circle;
     width:1000px;
     line-height:18px;
}
.daftar-posting-2 li a{
     font-size:12px;
     font-weight:bold;
     font-family:Tahoma, Arial, Helvetica;
     color:#111; /* by: http://mitrabarayaonline.blogspot.com */ 
     text-decoration:none;
     transition:1s;
     -o-transition:1s;
     -moz-transition:1s;
     -webki-transition:1s;
}
.daftar-posting-2 li a:hover{
     color:red;
     text-shadow:1px 1px 1px #000;
}
.clear{clear:both;margin:0;padding:0;width:0;}

xHTML Daftar posting Box Kecil

<div class="boks-daftar-posting-2" style="float:left;">
            <h3>Panduan Blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="panduan-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-1</a></li>
            <li><a href="panduan-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-2</a></li>
            <li><a href="panduan-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-3</a></li>
            <li><a href="panduan-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-4</a></li>
            <li><a href="panduan-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-5</a></li>
            <li><a href="panduan-blogger-javascript-jQuery-kode-CSS-dan-kode-html.html" target="_blank">Panduan Blogger Javascript, jQuery, kode CSS dan kode HTML</a></li>
            <li><a href="panduan-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-6</a></li>
            <li><a href="panduan-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-7</a></li>
            <li><a href="panduan-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-8</a></li>
            <li><a href="panduan-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-9</a></li>
            <li><a href="panduan-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-10</a></li>
            <li><a href="panduan-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-11</a></li>
            <li><a href="panduan-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-12</a></li>
            <li><a href="panduan-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-13</a></li>
            <li><a href="panduan-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-14</a></li>
            <li><a href="panduan-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Panduan Blogger-15</a></li>
        </ul>
    </div>
</div>


<div class="boks-daftar-posting-2" style="float:right;">
            <h3>Tutorial Blogger</h3>
    <div class="daftar-posting-2">
        <ul>
            <li><a href="tutorial-blogger-1.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-1</a></li>
            <li><a href="tutorial-blogger-2.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-2</a></li>
            <li><a href="tutorial-blogger-3.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-3</a></li>
            <li><a href="tutorial-blogger-4.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-4</a></li>
            <li><a href="tutorial-blogger-5.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-5</a></li>
            <li><a href="tutorial-blogger-6.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-6</a></li>
            <li><a href="tutorial-blogger-7.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-7</a></li>
            <li><a href="tutorial-blogger-8.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-8</a></li>
            <li><a href="tutorial-blogger-9.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-9</a></li>
            <li><a href="tutorial-blogger-10.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-10</a></li>
            <li><a href="tutorial-blogger-11.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-11</a></li>
            <li><a href="tutorial-blogger-12.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-12</a></li>
            <li><a href="tutorial-blogger-13.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-13</a></li>
            <li><a href="tutorial-blogger-14.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-14</a></li>
            <li><a href="tutorial-blogger-15.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-15</a></li>
            <li><a href="tutorial-blogger-16.html" title="Tuliskan teks di sisni!" target="_blank">Tutorial Blogger-16</a></li>
        </ul>
    </div>
</div>

<div class="clear"></div>

Cara Menggunakan Kode Daftar Posting

• Login ke Blogger
• Halaman Dasbor (Dasboard)
• Klik Rancangan (Design)
• Klik Edit HTML
• Cari kode ]]></b:skin>
• Letakkan kode CSS tepat di atas kode ]]></b:skin>
• Klik Save Template
• Buat Daftar Posting di halaman statis sesuai contoh xHTML
• Beri Judul yang singkat (misalnya : Daftar Posting)
• Terbitkan posting
• Buka halaman blog kemudian KLIK Link Menu Daftar Posting (jika sama dengan contoh!)

Catatan/Keterangan

• Ke dua kode CSS dan xHTML dapat digunakan secara terpisah (hanya box besar atau box kecil).
• Ke dua kode (box) dapat digunakan secara bersamaan.
• max-height:500px; berfungsi untuk membatasi tinggi box. Rubah nilainya jika dikehendaki, dimana semakin besar nilainya maka semakin tinggi.
• Ini yang sangat penting: Jika anda menggunakan kode yang ke-2 (box kecil), perhatikan pada akhir xhtml box pertama (berwarna merah) dan awal xHTML box kedua (berwarna merah). Agar kedua box di kiri dan kanan dalam posisi sejajar maka kode xHTML akhir box pertama dan xHTML box kedua harus dubuat rapat!
• Bukalah menu Sprecial Tutorials yang terletak di deret menu sebelah kiri jika membutuhkan beberapa panduan penting tentang cara menyimpan kode CSS, javascript dan xHTML serta cara cepat mencari kode HTML dengan Ctrl + F.

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

» Happy Blogging - mitrabaraya «

Pasang Widget TV Streaming Online

Sorry berat, ini sebenarnya posting lama yang saat itu lupa aku terbitkan. Lihat saja apa yang sampaikan dalam teks juga pasti akan terlihat kuno (hanya aku edit di bagian ini!) . Apa boleh buat karena draft yang lupa aku terbitkan ini sudah aku buat beberapa bulan lalu. "He... biar jadinya sedikit lucu tak apalah...! Yah..., biarlah sekalipun jadi posting lucu dan aneh di awal tahun 2012, namun tetap konstektual dan bermanfaat bagi semua."

Nih..., yang baru jadi trend dikalangan blogger. Widget TV online multi channel. Yah ..., blogger dan para netter kini semakin dimanjakan oleh berbagai widget baru yang bersifat menghibur dan memberi banyak kemudahan untuk mengakses info-info terbaru, termasuk melalui TV online yang langsung bisa dinikmati melalui halaman blog. Blog kini tak lagi hanya sekedar berisi teks atau gambar hasil perasan otak dan lelehan keringat yang dibarengi kepulan asap rokok semata. Selain TV online telah banyak widget lain yang bisa memberi banyak hal positif dan gratis bagi para penjelajah blog. Widget SMS gratis, misalnya.

Pingin ngeblog atau blogwalking sembari menikmati tayangan TV online yang terdiri dari beberapa channel? Yah ..., kini blogger ataupun netter "mungkin" tak perlu lagi beli TV-Tuner atau harus menghidupkan TV saat asyik menjelajah web demi web atau blog demi blog. Aktifkan saja salah satu blog yang memberi fasilitas TV online dan kita bisa browsing dengan channel TV yang tetap menyala. Beberapa channel yang tersedia bisa menjadi pilihan saat menikmati TV online ini. Sampeyan bisa pilih AN TV, TV one, Trans 7, Trans TV, SCTV atau beberapa yang lain.

Bagaimana cara menggunakan widget ini?

Tak berbeda dengan pemasangan widget yang lain, widget TV online bisa dipasang melaui halaman posting atau Add a Gadget (Tambah Gadget). Jika ingin menggunakan di halaman posting, sampeyan bisa selipkan xHTML TV online di salah satu bagian dari posting. Apabila ingin menggunakan melalui Tambah Gadget, maka kita harus masuk melalui Page Elements (Elemen Laman).

xHTML TV online Multi Channel

<div style="position:relative;width:540px;height:532px;padding:10px;background:#000;border:4px solid #666;border-radius:8px;overflow:hidden;">
<div style="position:absolute;top:-230px;left:5px;">
<embed id="MivoTV" type="application/x-shockwave-flash" src="http://id.imediabiz.com/MivoTV.swf?r=84674" wmode="transparent" allowscriptaccess="always" allowfullscreen="true" seamlesstabbing="false" quality="high" scale="noscale" menu="true" devicefont="false" pluginspage="http://www.macromedia.com/go/getflashplayer" width="550" height="759"></embed>
</div>
</div>

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

» Happy Blogging - mitrabaraya «

Anti Copy/ No Copy Image using CSS3

Sebuah fungsi anti copy yang sering juga disebut sebagai no right click, disable right click tidak hanya dapat difungsikan secara total pada sebuah blog ataupun web, namun juga dapat difungsikan pada bagian-bagian terkecil dari blog atupun web, seperti halnya image/gambar. Fungsi anti copy/no right click/disable right click dapat dibangun menggunakan javascript atau kode CSS. Sekalipun sebuah fungsi anti copy tak mungkin seratus persen dapat menjamin blog/web atau image tak dapat dicopy atau dibongkar kode html-nya, namun setidak-tidaknya bisa sedikit menjaga agar beberapa bagian yang yang ingin dirahasiakan tetap aman.

Jika dibanyak panduan dan tutorial ataupun tips & trick blogger sebuah anti copy lebih banyak dibuat menggunakan javascript, namun untuk kali ini kita akan buat menggunakan kode CSS3. Tak banyak kode CSS yang akan kita gunakan, namun anti copy ini cukup mampu memberi sedikit kejutan karena akan terlihat sebagai sebuah tipuan kecil bagi pengunjung. Mengapa kita sebut sebagai sebuah tipuan kecil? Yah ... karena klik kanan akan tetap berfungsi namun bukan lagi fungsi yang berkaitan dengan image atau apa yang sebelumnya diharapkan pengunjung. Bagaimana ini bisa terjadi dan apa maksud sebenarnya? He ... he ... silahkan saja coba dengan klik pada demo yang dapat dibuka melalui link di bawah ini:

D e m o

D E M O

Cara membuat anti copy pada image/gambar
Untuk membuat fungsi anti copy image/gambar menggunakan css3 kita hanya memerlukan kode css yang nantinya harus disimpan di atas kode ]]></b:skin> yang letaknya di atas tag penutup </head>.

1. Login ke blogger
2. Halaman Dasbor (Dasboard)
3. Klik Rancangan (Design)
4. Klik Edit HTML
5. Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode. Bagi yang belum jelas buka Special Tutorials yang ada di deret menu sebelah kiri.
6. Latakkan kode CSS tepat di atasnya
7. Klik Save Template

Kode CSS dan posisinya thd ]]></b:skin>

/* mitrabaraya * 02 januari 2012 */
.anticopy_left, .anticopy_center{
     position:relative;
     float:left; /* original code by: mitrabarayaonline.blogspot.com */
     padding:0;
}
.anticopy_center{
     float:none;
     margin:0 auto;
     text-align:center;
}
.anticopy_left:before, .anticopy_center:before{
     content:"";
     padding:5px;
     height:100%;
     margin-top:-5px;
     margin-left:-5px;
     width:100%;
     left:0;
     top:0; /* original code by: mitrabaraya.blogspot.com */
     position:absolute;
}

]]></b:skin>

Kode HTML posting anti copy: Image di kiri

<div class="anticopy_left">
<img src="image.jpg" style="float:left;margin:5px 15px 5px 0;width:...px;height:...px;" />
</div>

Kode HTML posting anti copy: Image di Tengah

<div class="anticopy_center">
<img src="image.jpg" style="float:none;margin:10px auto;text-align:center;width:...px;height:...px;" />
</div>

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

» Happy Blogging - mitrabaraya «