Bloger Sunda | tutorial blogger: Februari 2010

Jumat, 26 Februari 2010

Image Effect-3 : Rotate

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Entah mau dinamakan efek apa, yang jelas aku sendiri bingung mau memberi nama. Yang penting lihat dulu dan kamu mungkin bisa kasih sendiri nama efeknya. Image effect ini bekerja hanya berdasarkan kode css, dimana dua buah image diposisikan saling bertumpuk. Image pertama akan tertutup oleh image kedua yang menggunakan opacity effect sehingga membuat image pertama akan terlihat seperti bayangan dibelakang image kedua. Hover effect bekerja untuk menggeser image kedua ke sebelah kiri hingga kedua image terlihat secara sempurna. Silahkan anda coba dengan mengarahkan cursor di atas gambar!

CSS - Image Effect-2 :

Kode CSS :

.MITRAbarayaIE{
      float:left;
      margin:5px 12px 5px 0;
      position:relative;
      width:303px;
      height:228px;
      padding:5px;
      background:#ccc;
      border:3px solid #444;
}
.MITRAbarayaIE a img{
      border:2px solid #eee;
      width:300px;
      height:225px;
      box-shadow:0 0 0 #fff;
      padding:0;
}
.MITRAbarayaIE a span{
      position:absolute;
      left:5px;
      top:5px;
      opacity:0.7;
      filter:alpha(opacity=70);
}
.MITRAbarayaIE a span{
      opacity:1.0;
      filter:alpha(opacity=100);
}
.MITRAbarayaIE a span img{
      width:300px;
      height:225px;
      margin:0;
      padding:0;
      box-shadow:0 0 0 #fff;
      border:2px solid #555;
      opacity:0.85;
}
.MITRAbarayaIE a span:hover img{
      opacity:100;
}
.MITRAbarayaIE:hover a span{
      left:-305px;
      z-index:999;
}

xHTML :

<div class="MITRAbarayaIE">
<a href="http://tutorial-demo-lightbox.blogspot.com/" target="_blank" title="Gambar pertama"><img src="https://lh4.googleusercontent.com/-1pzYmCc0ls4/UorGoj9p70I/AAAAAAAADOk/AOXdBz2IEPw/s225/2.jpg" /></a><a href="http://tutorial-demo-lightbox.blogspot.com/" target="_blank" title="Gambar kedua"><span><img src="https://sites.google.com/site/lightboxmitrabarayasunda/slideshow-lightbox/img/lt_mitrabaraya_hijab-geulis_634x451.jpg" /></span></a>
</div>Tuliskan teks di sini ! Entah mau dinamakan efek apa, yang jelas aku sendiri bingung mau memberi nama. Yang penting lihat dulu dan kamu mungkin bisa kasih sendiri nama efeknya. Image effect ini bekerja hanya berdasarkan kode css, dimana dua buah image diposisikan saling bertumpuk. Image pertama akan tertutup oleh image kedua yang menggunakan opacity effect sehingga membuat image pertama akan terlihat seperti bayangan dibelakang image kedua. Hover effect bekerja untuk menggeser image kedua ke sebelah kiri hingga kedua image terlihat secara sempurna. Silahkan anda coba dengan mengarahkan cursor di atas gambar!

Login ke Blogger.
- Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
- 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) 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.
Cari kode ]]></b:skin>.
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

Panduan backup template, cara mencari kode dan beberapa cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials pada vertical menu sebelah kiri halaman.
Gunakan image dengan ukuran 225 x 300 pixel/px (width x height).
Untuk merubah ukuran image lakukan perubahan pada width dan height di kode css.

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

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - mitrabaraya «

jQuery Image Effect-1 - zoom effect

Image effect yang akan kita buat merupakan efek zoom dengan memanfaatkan fungsi jQuery.1.3.2.min.js yang di dalamnya memang ditanam berbagai fungsi yang dapat dikembangkan oleh penggunanya. Untuk menciptakan efek zoom ini kita perlu menambahkan sedikit javascript dan kode CSS sebagai pembangun dan pengendali. Anda dapat mengatur seberapa besar effek zoom bekerja dengan melakukan perubahan di javascript.

Kode CSS Image Effect-1

.epek{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
}
.epek li{
      margin:0 3px 3px 0; 
      padding:0;
      float:left;
      position:relative;
      width:118px; 
      height:158px;
}
.epek li img.zoom{
      width:100px; 
      height:140px;
      border:4px solid #ddd;
      padding:5px;
      background:#666;
      position:absolute;
      -ms-interpolation-mode:bicubic; 
}
.epek li img.zoom:hover{
      background:#999;
      border:4px double #333; 
}

Javascript - Image Effect-1 :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function () {
    $(".epek li").hover(function () {
        $(this).css({
            'z-index': '10'
        });
        $(this).find('img').addClass("hover").stop().animate({
            marginTop: '-110px',
            marginLeft: '-110px',
            top: '10%', /* pengatur posisi scr vertical saat zoom bekerja */
            left: '50%', /* pengatur posisi scr horizontal saat zoom bekerja */
            width: '250px', /* ukuran width pada image saat zoo bekerja */
            height: '350px', /* ukuran height pada image saat zoo bekerja */
            padding: '10px'
        },
        1500);
    },
    function () {
        $(this).css({
            'z-index': '0'
        });
        $(this).find('img').removeClass("hover").stop().animate({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '100px', /* harus sama dengan width pada kode css */
            height: '140px', /* harus sama dengan height pada kode css */
            padding: '5px'
        },
        1000);
    });
    $(".epek li a").click(function () {
        var mainImage = $(this).attr("href");
        $("#main_view img").attr({
            src: mainImage
        });
        return false;
    });
});
//]]>
</script>

xHTML :

<ul class="epek">
    <li><a id="main_view" href="image-01.jpg"><img class="zoom" src="image-zoom-01.jpg" /></a></li>
    <li><a id="main_view" href="image-02.jpg"><img class="zoom" src="image-zoom-02.jpg" /></a></li>
    <li><a id="main_view" href="image-03.jpg"><img class="zoom" src="image-zoom-03.jpg" /></a></li>
    <li><a id="main_view" href="image-04.jpg"><img class="zoom" src="image-zoom-04.jpg" /></a></li>
</ul>

Login ke Blogger.
- Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
- 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) 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.
Cari kode <head>
Copy dan paste-kan jQuery dan javascript di bawah <head>
Cari kode ]]></b:skin>.
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

Panduan backup template, cara mencari kode dan beberapa cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials pada vertical menu sebelah kiri halaman.
Beberapa pengaturan/setting sudah tertulis di javascript. Silahkan dicermati.
image-zoom-01.jpg s/d image-zoom-04.jpg adalah image yang akan bekerja dengan zoom effect.
image-01.jpg s/d image-04.jpg akan ditampilkan ketika "klik" dilakukan pada image-zoom-01.jpg s/d image-zoom-04.jpg.
Untuk merubah kecepatan efek zoom-nya silahkan rubah variable kecepatan pada javascript berhuruf tebal warna kuning. Semakin besar maka akan semakin lambat.
Untuk merubah ukuran image harus dilakukan perubahan secara bersama-sama antara variable width dan height pada javascript dan yang terdapat pada kode CSS. Perubahan dilakukan dengan memperhatikan selisih nilai ukuran yang sudah disediakan sebagai perbandingan.
Variable width:'250px' dan height:'320px' (pada javascript) merupaka ukuran image dengan efek zoom. Bila diperlukan lakukanlah perubahan !

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

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - MITRABARAYA «

Selasa, 23 Februari 2010

Cara membuat dan Memasang Tabel 4 Kolom: Panduan BloGGeR

Tabel 4 Kolom dimaksudkan untuk memaksimalkan ruang yang tersedia sehingga tidak terlalu banyak bagian ruang yang terbuang dengan sia-sia karena terlalu banyaknya spasi yang sering terjadi dengan terlalu luasnya ruang yang digunakan. Penggunaan tabel juga memberikan keuntungan dari sisi tampilan karena terlihat seperti 3D. Untuk membuat tabel 4 kolom ini hanya perlu dilakukan dengan menyimpan KODE CSS yang tersedia di atas KODE ]]></b:skin> dan menggunakan xHTML di bagian body atau di ruang posting.

Kode CSS :

.isiboks{ 
        background-color:#ccc;
        font-family:Arial; 
        font-size:12px; 
        color:#3d010a;
        padding:5px;
        width:200px;
}
.isiboks:hover{
        background:#666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_ewiw29xRbUQ5Y-Ti9C_JftI_LmToRW38ZVCefyjUK-tN5bKP6oxvT017_esNUyYUcGe5saJRzJjWROq0GiH6FpEShD2VaAvMwehTvfA4W4Z0DrwjQy5zoR0RSNGbfEUmWvbmAxLX3lM/h120/mitrabaraya_tablesilver.jpg);
} 
.isiboks a{
        font-weight:bold;
        color: #003366;
        text-decoration:none;
}
.isiboks a:hover{
        color:#FF00FF;
}
td.judulboks{ 
        text-align:center; 
        font-size:22px; 
        font-weight:bold;
        color:#3d010a;
        font-family:Tahoma;
}
td.judulboks:hover{
        background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_ewiw29xRbUQ5Y-Ti9C_JftI_LmToRW38ZVCefyjUK-tN5bKP6oxvT017_esNUyYUcGe5saJRzJjWROq0GiH6FpEShD2VaAvMwehTvfA4W4Z0DrwjQy5zoR0RSNGbfEUmWvbmAxLX3lM/h120/mitrabaraya_tablesilver.jpg);
        color: #999900;
        border-color:#FF0000;
}

xHTML :

<table background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yuDlElws_UE8MzcA6LBpY6vRmhL-tYhmTYY9oscr3-_4UEiUJHX968YESFcTmWKJRZV1K7yvdaLA5BsxSuUQk-6bx844_uBIl7jN1cMgKBBh2EI1_gQsdHZCgNCFIz3VmsSL6-z6ebnQ/h120/mitrabaraya_SMS-01.jpg" bordercolor="cdd4cd" border=1 cellspacing="10" width="800">
<tr bordercolor="d8ffde">
<td class="judulboks" colspan=5 bgcolor="#CCCCCC">Judul Tabel 4 Kolom</td></tr>
<td class="isiboks" bordercolor="#d8ffde">
01. <a target="_blank" href="Link Judul-01">Judul-01</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-02">Judul-02</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-03">Judul-03</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-04">Judul-04</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-05">Judul-05</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-06">Judul-06</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-07">Judul-07</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-08">Judul-08</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-09">Judul-09</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-10">Judul-10</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-11">Judul-11</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-12">Judul-12</a> Tuliskan teks di sini !
</td>
<td class="isiboks" bordercolor="d8ffde">
01. <a target="_blank" href="Link Judul-13">Judul-13</a> Tuliskan teks di sini !<br>
02. <a target="_blank" href="Link Judul-14">Judul-14</a> Tuliskan teks di sini !<br>
03. <a target="_blank" href="Link Judul-15">Judul-15</a> Tuliskan teks di sini !<br>
04. <a target="_blank" href="Link Judul-16">Judul-16</a> Tuliskan teks di sini !
</td>
</tr>
</table>

Login ke Blogger.
- Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
- 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) 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.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Copy javascript dan letakkan di bawah ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

Panduan cara backup template, cari kode dan berbagai cara menyimpan kode css, xHTML dan javascript dapat dibuka di Special Tutorials pada menu sebelah kiri halaman blog.
Untuk menyesuaikan dengan ruang yang tersedia lebar tabel dapat disesuaikan dengan merubah width="800" pada xHTML dan merubah lebar (width:200px;) pada syntax .isiboks{...} (pada KODE CSS).
width pada table (800) merupakan jumlah 4xwidth pada syntax .isiboks{...} (200px).
Untuk merubah jumlah kolom dilakukan dengan mengurangi seluruh kode yang termuat dalam KODE <td class="isiboks" bordercolor="#d8ffde"> ....</td> (xHTML).

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

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - mitrabaraya «

Panduan Cara Membuat Scroll Box-2: Tutorial BloGGeR Scoller

Scroll box ini memang bykan scrollbox sederhana. Box didesain secara lengkap dengan penataan secara khusus untuk menampilkan sebuah artikel pendek lengkap dengan box title, boks teks serta box thumbnail (image berukuran kecil). Anda dapat menggunakannya untuk ringkasan posting, misalnya.

Kode CSS Scroller :

.MBscrollboks{
        height:255px;
        width:400px;
        float:left; 
        margin-left:5px;
}
.MBscrollboks .ltrbox{
        background:#0099FF;
        height:252px;
        width:400px; 
        margin-top:5px;
} 
.MBscrollboks .top,.MBscrollboks .topleft,.MBscrollboks .topmiddle,.MBscrollboks .topright{
        height:35px;
        float:left; 
        border:none;
}
.MBscrollboks .top{
        width:400px;
        border-bottom:2px solid red;
} 
.MBscrollboks .topleft{
        width:6px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9zsJANIjE5B20tbBbbGTue3hiqqB6Dok1Q36d_Q_eRlD1-li4YauUkF8O8tZ_wXfqeOAxe_CRdQBB-gP3qONnHwCmoXFKD9DOJfQ00_sIzWavjRvOvHJzkMvdSdzK9_AgH_ptP3KcNe6/h120/mitrabaraya_bgtable_topleft.png) no-repeat; 
}
.MBscrollboks .topmiddle{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9JWeX9i3UTpNC2CNx6xCmQus1FdWv_JYvLA6Lw815GOHbbdNLLQM4piMDpCIsElkObTgDYm2ej1NynV0wY8Isg9XQtRJjoiteCj0oQD4vEahiRPEoQN18vY19v63TsFsahMh8deY-E4az/h120/mitrabaraya_bgtable_topcenter.png) repeat-x;
        width:388px;
}
.MBscrollboks .topright{
        width:6px;
        background: url(https://lh6.googleusercontent.com/-00cGSyeoLEc/T3GGRgcyeqI/AAAAAAAAAjs/BuWVUc8jXbc/h120/bgsGR_bgtable_topright.png) no-repeat;
        float:right; 
} 
.MBscrollboks .toptitle{
        width:250px;
        heigh:15px; 
        margin:10px 6px; 
        font-family:Verdana; 
        font-size:12px; 
        font-weight:bold; 
        color:#fff;
        float:left;
}
.MBscrollboks .toplogo{
        height:24px;
        float:right;
        width:48px;
        margin:4px 6px;
        border:2px solid #999933;
        border-radius:5px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9RZ0UtDeRIveUs9ZN8Of4w_WuHgqZxHR_d-XvZapMbWtsqubce5ApQiKkI5-313TKMJBJyPsr6Guic8-YKJip8fJjDnqThGyjuKjCpg99tohcwBYDxGduVR6fg_k-5EXtFO4j8xSOy2oU/h120/mitrabaraya_animasimata.gif) no-repeat;
}
.MBscrollboks .artikel{
        height:200px;
        width:382px; 
        padding:5px; 
        margin:4px 4px 6px;
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq5T4dN4ZMQjglCbEGBhy1v0GStoRSa_W5cSx90k90QTfSxJmDwwBMfe53eRygzEHiE9D31SGwsQtfcF5KCbAjdoZZ1uUfafctyGQ7W-2Bi9wGh2Glb06k77JvKZir_ipSMDCkAgQ4lWoT/h120/mitrabaraya_bg-content.jpg);
  float:left;
        border:none;
        font-family:Arial; 
        font-size:11px; 
        color:#fff;
        overflow-y:auto;
}
.MBscrollboks .artikel a{
        font-family:Verdana; 
        font-size:11px; 
        font-weight:bold; 
        color: #FFCC33;
        text-decoration:none;  
}
.MBscrollboks .artikel a:hover{
        color:#FF0000;
}    
.MBscrollboks .artikel img{
        float:left;
        width:60px;
        margin:5px 6px -3px 0;
        border:1px solid #fff;
        padding:2px;
        background:#333;
}
.MBscrollboks .artikel img:hover{
        border:1px solid red;
} 
.MBscrollboks .artikel h4{
        font-family:Times New Roman; 
        font-size:14px; 
        font-weight:bold; 
        color:blue; 
        margin:4px 0; 
}
.MBscrollboks .artikel p{
        margin:4px 0 6px; 
}

xHTML Scroller Box-2

<div class="MBscrollboks"><div class="top"><div class="topleft"></div><div class="topmiddle">
<div class="toptitle">Judul/Nama Box</div><div class="toplogo"></div></div>
<div class="topright"></div></div><div class="ltrbox"><div class="artikel"><h4>Judul-1</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-1">Judul Content-1</a><p>Scroller Box-2 ini di bangun menggunakan tag DIV. Mempunyai fungsi yang sama dengan scroller Box-1 hanya berbeda dalam ukuran dan sistem penataan content box-nya. </p><div style="clear:both"></div>
<h4>Judul-2</h4><img src="https://lh4.googleusercontent.com/-7VV32P3_dEo/T24fYqtEeDE/AAAAAAAAAiA/WqJoPavei1Q/s144-c/BigBackground.jpg" /><a href="Link Content-2">Judul Content-2</a><p>Scroller Box-2 ini di bangun menggunakan tag DIV. Mempunyai fungsi yang sama dengan scroller Box-1 hanya berbeda dalam ukuran dan sistem penataan content box-nya. </p><div style="clear:both"></div>
<h4>Judul-3</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-3">Judul Content-3</a><p>Tuliskan teks di sini !</p><div style="clear:both"></div>
<h4>Judul-4</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-4">Judul Content-4</a><p>Tuliskan teks di sini !</p><br /><div style="clear:both"></div>
<h4>Judul-5</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-5">Judul Content-5</a><p>Tuliskan teks di sini !</p><div style="clear:both"></div>
<h4>Judul-6</h4><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98QRPrpzKqHb3tRbx5u6wUwux4mvtrAy0xsBOT5QPEJsnL11HaCTz9e_A8f_YHxUPteRLxtIAdeF2vHRSRveAa2v1WnQBjIIw1KP-GH43kBWReem_d9AdsuzNq0BdGlYCa5muGYvR7xBp/s144-c/mitrabaraya_gallery-medium.jpg" /><a href="Link Content-6">Judul Content-6</a><p>Tuliskan teks di sini !</p><div style="clear:both"></div>
</div></div></div><div style="clear:both"></div>

Login ke Blogger.
- Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
- 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) 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.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

Cara backup template, cara mencari kode dan cara menyimpan berbagai kode html dapat dibuka melalui Special Tutorials yang terletak pada menu sebelah kiri halaman.
Sebaiknya gunakanlah gambar/image/thumbnail dengan ukuran tinggi maksimal 50px atau tinggi sesuaikan dengan panjang teks.
Ganti background logo yang berupa image (pada KODE CSS) dengan logo yang sesuai blog kamu !
Untuk penggunaan "DIV" pada ruang posting supaya hasil output sesuai harapan sebaiknya semua kode dibuat secara rapat (jangan ada spasi) !

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

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - mitrabaraya «

Senin, 22 Februari 2010

Cara membuat dan memasang Scroller Box-1: Panduan dan Tutorial BloGGeR

Membuat scroll box tidaklah susah, tetapi ada yang lebih penting dari mudahnya cara membuat scroller box. Membuatnya menjadi lebih menarik, atraktif, dilengakapi dengan penataan yang baik untuk memuat teks atau gambar dan nyaman untuk di aduk-aduk isi dalamnya. Ada beberapa cara membuat scroll box, untuk kali ini akan kita buat scroll box yang agak rumit dengan menggunakan tabel.

Kode CSS - Scroller Box-1 :

td{
        font-family:Verdana, Arial, Helvetica, sans-serif; 
        font-size:10px;  
}
.topleft{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd9zsJANIjE5B20tbBbbGTue3hiqqB6Dok1Q36d_Q_eRlD1-li4YauUkF8O8tZ_wXfqeOAxe_CRdQBB-gP3qONnHwCmoXFKD9DOJfQ00_sIzWavjRvOvHJzkMvdSdzK9_AgH_ptP3KcNe6/s200/mitrabaraya_bgtable_topleft.png); 
        background-position:top right; 
        background-repeat:no-repeat;
}
.topright{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixCr_XZC0ZmDl8UNDqW1cw-F0i4iBPMlzs6DG9wgTKoWzKqX4sZUwEHg3wWzUIFjSqywF2D_fGSAM0t0tdGgh54fWr1JSSM7QqrdM3GDh_qo30AKdCNhyphenhyphenl2JWIAufnN7ruHdkmRCzjI-At/s200/mitrabaraya_bgtable_topright.png); 
        background-position:top right; 
        background-repeat:no-repeat;
}
.topmiddle{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9JWeX9i3UTpNC2CNx6xCmQus1FdWv_JYvLA6Lw815GOHbbdNLLQM4piMDpCIsElkObTgDYm2ej1NynV0wY8Isg9XQtRJjoiteCj0oQD4vEahiRPEoQN18vY19v63TsFsahMh8deY-E4az/s200/mitrabaraya_bgtable_topcenter.png);
        background-position:top;
        background-repeat:repeat-x;
        font-family:Verdana, Arial, Helvetica, sans-serif; 
        font-size:11px; 
        color:#FFFFFF; 
        font-weight:bold; 
        padding-left:5px;
        text-align:left;
}
.table_frame{
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKqwV1irkp-r9Lo1x3xpAPHxgWCLWJuiNL-jETgtnYiVF-MHkeXSdOfI-UrMlp0Ehx43wpH1ORPRVb4b6pSwVttsAcevzPY3QLQLIt-9Tx5gluOVR79FeVc7tc18RaFPObbR65F5AxrLkZ/s200/mitrabaraya_bgtable_bottom.png);
        background-position:top;
        background-repeat:repeat-x;
}
.text_content {
        font-family:Verdana, Arial, Helvetica, sans-serif; 
        font-size: 10px;
        text-align:left; 
}
.title_text_content {
        font-family:Arial; 
        font-size:10px;
        font-weight:bold;  
}
.td_title {
        font-family:Verdana;
        color: #003366;
        font-size:11px; 
        font-weight:bold; 
}
.td_title:hover {
        color:#990099;
} 
.tableTitle {
        font-family:Verdana; 
        font-size:12px; 
        color:#FFFFFF; 
        font-weight:bold
}
a { 
        text-decoration: none; 
} 
a:hover{
        text-decoration:underline;
        color:green;
}
.boks{
        width:292px; 
        height:150px; 
        overflow-x:none; 
        overflow-y:scroll; 
        padding:3px 3px 6px 6px;
}
.isiboks{
        padding-top:10px;
        width:275px;
        height:100;
        text-align:left;
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqD-0sJB5XcYnj5XtJ2Mb4PF9R0zPmbB0TzgB0gZngZELsIghrSHoUU7iq4DQcl7djJAUKuxZ-YlT3WUeTF-zqXme80rO2U31YzaSm7I2ze2EFigUQUfx24ifJQhh6mZAuUm1Prbsdeqxn/s200/303acuo.jpg);
}
.thumb{
        height:30px;
        width:50px; 
        padding:2px; 
        border:solid 1px #0066FF; 
}
.thumb:hover { 
        border:solid 1px red;
}

xHTML - Scroll Box-1

<table><tr>
<td align="center">
<table cellspacing="0" cellpadding="0" border="0" width="306"><tbody><tr><td colspan="3">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr><td height="31" width="7" class="topleft">&nbsp;</td>
<td width="222" class="topmiddle">Judul Box</td>
<td width="68" align="right" class="topmiddle"><img src="Logo-TopRight.jpg" width="48" height="19" /></td>
<td height="31" width="7" class="topright">&nbsp;</td>
</tr>
</tbody>
</table>
</td></tr>
<tr><td width="7" class="table_frame">&nbsp;</td>
<td widht="306" bgcolor="#0099FF";>
<div class="boks">
<table class="isiboks">
<tbody>
<tr valign="top">
<td><a href="Link-1a" target="_blank"><img src="Image1.jpg" title="Tulis Title-2 di sini!" border="0" class="thumb" /></a>
</td>
<td align="left"><a href="Link-1b" target="_blank"><font class="td_title">Judul-1</font></a><br />Tuliskan teks di sini !
</td>
</tr>
<tr valign="top">
<td><a href="Link-2a" target="_blank"><img src="Image2.jpg" title="Tulis Title-2 di sini!" border="0" class="thumb" /></a>
</td>
<td align="left"><a href="Link-2b" target="_blank"><font class="td_title">Judul-2</font></a><br />Tuliskan teks di sini !
</td>
</tr>
<tr valign="top">
<td><a href="Link-3a" target="_blank"><img src="Image3.jpg" title="Tulis Title-3 di sini!" border="0" class="thumb" /></a>
</td>
<td align="left"><a href="Link-3b" target="_blank"><font class="td_title">Judul-3</font></a><br />Tuliskan teks di sini !
</td>
</tr>
</tbody>
</table>
</div>
</td><td width="7" class="table_frame">&nbsp;</td>
</tr>
</tbody>
</table>
</td></tr>
</table>

Login ke Blogger.
- Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
- 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) 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.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Minggu, 21 Februari 2010

Cara membuat dan Memasang Javascript Tooltip-4: Image, Transparency and Fade Effect

Masih seperti sebelumnya, kali ini masih akan menampilkan tooltip dengan javascript "minimalis" untuk menjaga performa blog terutama pada saat loading. Dengan javascript yang tidak terlalu berkapasitas besar diharapkan beban blog tidak akan semakin bertambah berat. Meskipun demikian sebaiknya jangan terlalu pesimistis akan kemampuan scrip yang satu ini. Meskipun terhitung sederhana, javascript yang satu ini bisa di bilang punya kemampuan agak menakjubkan.

Untuk membuatnya silahkan simpan KODE CSS di atas kode </head> kemudian simpan javascript di atas kode </body>.

Kode CSS :

<style type="text/css">
.tholtips{
        font-weight:bold;
        color: #ffcc00;
        cursor:pointer; 
}
#tholwo{
        left:-9999px;
        position:absolute; 
        display:block; 
        background:#335890 url(http://i48.tinypic.com/n5hilv.jpg) repeat-x;
        overflow:hidden;
        margin:5px;
        padding:10px;
        border-radius:15px;
        border:2px solid #3399FF;
        font-family:Arial;
}
#tholwo b{font-size:11px; font-family:Verdana;font-weight:bold;color: #99CC00;}
#tholwo h4{font-size:11px; font-family:Verdana;font-weight:bold;color: #00FFFF;margin:6px 0;}
#tholwo p{font-size:12px; font-family:Arial;color:#fff;text-align:left;}
#tholwo img{float:left;border:1px solid blue;background:#999900;padding:2px; margin:6px 8px 8px 0;}
</style>

Javascript :

<script type="text/javascript">
var tooltip=function(){
var id = 'tholwo';
var top = 10;var left = -150;var maxw = 300;var speed = 4;var timer = 40;
var endalpha = 90;var alpha = 0;
var tholwo,h;var ie = document.all ? true : false;return{show:function(v,w){
if(tholwo == null){tholwo = document.createElement('div');tholwo.setAttribute('id',id);
t = document.createElement('div');t.setAttribute('id',id + 'top');c = document.createElement('div');
c.setAttribute('id',id + 'cont');b = document.createElement('div');b.setAttribute('id',id + 'bot');
tholwo.appendChild(t);tholwo.appendChild(c);tholwo.appendChild(b);document.body.appendChild(tholwo);
tholwo.style.opacity = 0;tholwo.style.filter = 'alpha(opacity=0)';document.onmousemove = this.pos;}
tholwo.style.display = 'block';c.innerHTML = v;tholwo.style.width = w ? w + 'px' : 'auto';
if(!w && ie){t.style.display = 'none';b.style.display = 'none';tholwo.style.width = tholwo.offsetWidth;t.style.display = 'block';b.style.display = 'block';}
if(tholwo.offsetWidth > maxw){tholwo.style.width = maxw + 'px'}
h = parseInt(tholwo.offsetHeight) + top;clearInterval(tholwo.timer);
tholwo.timer = setInterval(function(){tooltip.fade(1)},timer);},
pos:function(e){var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
tholwo.style.top = (u - h) + 'px';tholwo.style.left = (l + left) + 'px';},fade:function(d){var a = alpha;if((a != endalpha && d == 1) || (a != 0 && d == -1)){var i = speed;if(endalpha - a < speed && d == 1){i = endalpha - a;}else if(alpha < speed && d == -1){i = a;}
alpha = a + (i * d);tholwo.style.opacity = alpha * .01;tholwo.style.filter = 'alpha(opacity=' + alpha + ')';}else{clearInterval(tholwo.timer);if(d == -1){tholwo.style.display = 'none'}}},hide:function(){
clearInterval(tholwo.timer);tholwo.timer = setInterval(function(){tooltip.fade(-1)},timer);}};}();
</script>

Gunakan xHTML untuk menampilkan tooltip :

Ada 4 Contoh untuk menuliskan link, nama link, beserta isi tooltip baik berupa teks ataupun teks yang disertai gambar/image :

xHTML-1 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><p>Tulis teks tooltip di sini !</p> ');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: mitrabaryaonline) !</a></span>

xHTML-2 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><img src=\'http://.../image.jpg\'/><br/><h4>Tulis teks tooltip di sini !</h4> !');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: mitrabaryaonline) !</a></span>

xHTML-3 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><img src=\'http://.../image.jpg\'/><p>Tulis teks tooltip di sini !</p><b>Tulis teks tooltip di sini !</b>');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: mitrabaryaonline) !</a></span>

xHTML-4 :

<span class="tholtips" onmouseover="tooltip.show('<h4>Tulis judul tooltip di sini !</h4><br />Membuat tooltip ini terlihat lebih indah dan menarik saat orang melihatnya !');" onmouseout="tooltip.hide();"><a href="Link: contoh --> (http://...html/com)"> Tulis nama-Link di sini (contoh: mitrabaryaonline) !</a></span>

Catatan/Keterangan :

Sebaiknya gunakan gambar/image dengan ukuran maksimal 120px (width).
Berberapa variable yang terdapat dalam javascript berfungsi untuk merubah tampilan tooltip, baik berupa fade effect, posisi tooltip dan lebar tooltip.
Javascript Tooltip-4 diperuntukkan bagi sobat blogger lain di luar blogspot/blogger.

Bloger Sunda | tutorial blogger

Jumat, 26 Februari 2010

Image Effect-3 : Rotate

Image Effect-2

Kode CSS :

xHTML :

jQuery Image Effect-1 - zoom effect

Kode CSS Image Effect-1

Javascript - Image Effect-1 :

xHTML :

Selasa, 23 Februari 2010

Cara membuat dan Memasang Tabel 4 Kolom: Panduan BloGGeR

Kode CSS :

xHTML :

Panduan Cara Membuat Scroll Box-2: Tutorial BloGGeR Scoller

Kode CSS Scroller :

xHTML Scroller Box-2

Senin, 22 Februari 2010

Cara membuat dan memasang Scroller Box-1: Panduan dan Tutorial BloGGeR

Kode CSS - Scroller Box-1 :

xHTML - Scroll Box-1

Minggu, 21 Februari 2010

Cara membuat dan Memasang Javascript Tooltip-4: Image, Transparency and Fade Effect

Kode CSS :

Javascript :

xHTML-1 :

xHTML-2 :

xHTML-3 :

xHTML-4 :

Arsip Blog

CATEGORIES