Cara Mudah Membuat Gambar Berdampingan atau Sejajar di Blog

Bagi Kamu yang bingung bagaimana cara Membuat Gambar Berdampingan atau Sejajar di Blog? nah kali ini Saya akan share caranya. Membuat Gambar Berdampingan atau Sejajar di Blog sangat diperlukan di blog karena dapat mempercantik blog dan juga dapat menghemat ruang di blog, Kamu bisa menempatkan gambar tersebut di sidebar maupun diposting ataupun disebuah laman, dan Kamu juga bisa menempatkan sebuah widget berdampingan, seperti rank alexa blog Saya dan Histats Saya letaknya berdampingan atau sejajar.

Untuk caranya ikuti tutorial dibawah ini :

1. Log in ke Blogger Kamu
2. Lalu Pilih tata letak, lalu klik tambah gadget
3. Pilih dan klik html/javascript
4. Lalu Masukan kode dibawah ini :
<table><tr>
<td>Url Widget atau Gambar Anda 1</td>
<td>Url Widget atau Gambar Anda 2</td>
<td>Url Widget atau Gambar Anda 3</td>
</tr></table>

Keterangan :

• Ganti yang berwarna biru dengan url gambar atau widget
• Jika Kamu ingin sejajar lebih dari tiga, tinggal tambahkan aja lagi yang nomor satu dibawah nomor tiga, dst,,,
5. Mudahkan, Selamat Mencoba :

Read more →

Original Size Image on Mouseover

Tidak harus menggunakan javascript untuk menciptakan sebuah effect pada sebuah gambar atau photo. Original Size Image on Mouseover menjadi salah satu bukti penciptaan effect yang sangat menarik meskipun murni hanya menggunakan KODE CSS. Gambar atau photo akan ditampilkan dalam bentuk yang lebih kecil, namun ketika cursor menyentuhnya maka gambar dengan ukuran aslinya akan spontan ditampilkan di halaman blog. Penggunaan CSS yang yang relatif kecil ini tentu saja akan sangat bermanfaat kala diterapkan dalam blog karena loading menjadi relatif tidak terpengaruh.

Cara menggunakan Original Size Image on Mouseover :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)"

Kode CSS :

.GRzoomer_css{
        float:left;
        clear:left;
        padding-bottom:5px;
        padding-right:5px;
}
.GRzoomer_css a{
        display:block;
        text-decoration:none;
}
.GRzoomer_css a:hover{
        position:relative;
}
.GRzoomer_css span img{
        border:8px ridge #fff;
        margin-bottom:8px;
}
.GRzoomer_css a span{
        position:absolute;
        display:none;
        width:auto;
        color:#ffcc00; /* warna caption */
        text-decoration:none;
        font-family:"MS Serif", "New York", serif;
        font-size:14px; /* ukuran teks caption */
        background:rgba(0,0,0,0.5);
        font-weight:bold;
        padding:6px 4px;
}
.GRzoomer_css a:hover span{
        border:4px solid #930;
        border-radius:10px;
        display:block;
        position:absolute;
        left:30px;
        top:-150px;
        z-index:100;
}
.GRzoomer_css a:hover span img{
        border-radius:6px;
}
.GRzoomer_css_thumb{
        width:100px;
        margin:5px 12px 5px 0;
        padding:5px;
        background:#ddd;
        border:1px solid #06C;
        border-radius:4px;
        height:auto;
        opacity:0.65;
        filter:alpha(opacity=65);
}
.GRzoomer_css_thumb:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
  z-index:999; 
}

xHTML :

<div class="GRzoomer_css">
<a href="URL-1"><img src="image-1.jpg" class="GRzoomer_css_thumb" /><span><img src="image-1.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="http://har-bloggerstars.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0OeNMDz5QHz4YbeqF4-ElXuiLJo298Ztj7m8opsu5Tikjfp1mVAo6jQGfsTCQ885BcIhyRa8cRA0MaCioFo55co-N66QoPZ-mORGqO9Q8pS2XYwHmakWE1DWrKo-sGpk3f83e9-Xez8/s1600/gbr3.jpg" class="GRzoomer_css_thumb"/> <span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0OeNMDz5QHz4YbeqF4-ElXuiLJo298Ztj7m8opsu5Tikjfp1mVAo6jQGfsTCQ885BcIhyRa8cRA0MaCioFo55co-N66QoPZ-mORGqO9Q8pS2XYwHmakWE1DWrKo-sGpk3f83e9-Xez8/s1600/gbr3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="URL-3"><img src="image-3.jpg" class="GRzoomer_css_thumb" /><span><img src="image-3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>

Cara menggunakan xHTML :

1. Gunakan xHTML untuk posting.
2. URL-1 & URL-3 ...dst » dapat diisi dengan alamat web/blog, image, posting dll.
3. image-1.jpg & image-3.jpg ...dst » URL image.
4. Tambahkan teks ... dst » caption yang menerangkan tentang image atau yang berkaitan dengan URL.
5. Gunakan image dengan ukuran yang tak terlalu besar hingga semua bagian image tetap berada di halaman blog.
6. Hal yang belum jelas tentang backup template, cara cari kode dan cara menyimpan kode dapat dibaca di Special Tutorials pada menu di kolom sebelah kiri.

Read more →

Buat posting Image Cantik dg Border Radius

Gambar gambar di bawah ini hanyalah sebagian kecil dari begitu banyaknya kemungkinan lengkungan yang dapat dibuat. Silahkan anda kembangkan lagi menjadi benruk-bentuk lain yang jauh lebih menarik.

Kode CSS:

.GRphotoku{
       padding:1%;
       background:#eee;
       box-shadow:0 0 6px #444;
       margin:15px auto;
       display:block;
       text-align:center;
}

Kode CSS di atas digunakan jika semua gambar akan diposisikan ditengah-tengah. Jika menginginkan posisi gambar lebih feksibel (bisa kanan, kiri & tengah) gunakan kode CSS yang ada di

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 50%; border-bottom-right-radius: 60% 50%; border-top-left-radius: 30% 60%; border-top-right-radius: 30% 60%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 50%; border-bottom-right-radius: 60% 50%; border-top-left-radius: 30% 60%; border-top-right-radius: 30% 60%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 30% 50%; border-bottom-right-radius: 30% 50%; border-top-left-radius: 60% 40%; border-top-right-radius: 60% 40%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%; border-top-left-radius: 50% 50%; border-top-right-radius: 50% 50%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 50% 50%; border-bottom-right-radius: 50% 50%;box-shadow:0 0 8px #000;border-top-left-radius:50% 50%; border-top-right-radius: 50% 50%;border:6px solid #222;padding:4px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 205px 265px; border-bottom-right-radius: 205px 265px; border-top-left-radius: 235px 130px; border-top-right-radius: 235px 130px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 205px 140px; border-bottom-right-radius: 205px 140px; border-top-left-radius: 205px 140px; border-top-right-radius: 205px 140px; border:5px double #aaa; box-shadow: 0 0 8px #555;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 60% 70%; border-top-left-radius: 30% 50%; border-top-right-radius: 30% 50%;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="border-bottom-left-radius: 60% 70%; border-bottom-right-radius: 40% 50%;box-shadow:4px 4px 8px #000;border-top-left-radius: 60% 70%; border-top-right-radius: 40% 50%;border:6px solid #888;padding:4px;" width="..px" /></a>

<a href="Your URL"><img class="GRphotoku" height="..px" src="Your Image.jpg" style="bord

Read more →