Membuat Gambar Melayang Pada Blog

Membuat Gambar Melayang Pada Blog

Wednesday, February 02, 2011

Share this history on :

Share3

0digg

Buat sobat yang masih belum mengerti tentang gambar melayang pada blogspot, berikut saya jelaskan secara singkat. Gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh oleh scrool mouse. Maksudnya kita dapat membuat gambar seperti melayang di kanan, kiri, bawah, atas walaupun Scrollbar ditarik kemana-mana. Dan bukan hanya gambar yang bisa sobat pakai di posisi gambar melayang ini, tapi counter, Status YM, iklan dan lain-lain.

Ok, buat sobat yang ingin mencoba tips ini, silahkan ikuti tutorial berikut ini, tapi sebelumnya back up dulu templatesobat agar jika terjadi kesalahan dan template blog sobat tidak rusak. Berikut step-step yang harus sobat lakukan :

1. Log ini ke akun blogger sobat;
2. Pilih menu Rancangan » Edit HTML;
3. Beri tanda centang pada tulisan Expand Template Widget;
4. Carilah kode ]]></b:skin>. setelah jumpa, sisipkan kode berikut ini tepat diatasnya. Eh iya pilih salah satu kode dari 4 pilihan posisi dibawah ini, jangan dicopy semuanya. Maksudnya misalnya anda memilih "posisi kiri atas", maka gambar melayang akan ada disebelah kiri atas layar;

Posisi kiri atas
#rizki_melayang { top:10px; left:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0};

Posisi kanan atas
#rizki_melayang { top:10px; right:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0}

Posisi kiri bawah
#rizki_melayang { bottom:10px; left:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0}

Posisi kanan bawah
#rizki_melayang { bottom:10px; right:10px; position:fixed; _position:absolute; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); } #rizki_melayang a img {border:0}

5. Selanjutnya carilah kode </body>, kalau sudah ketemu maka letakkan kode dibawah ini tepat diatasnya;

<div id="rizki_melayang">
<a href="http://www.wakrizki.net/" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXbif17AYbHd28qdGdv-EhfwDL1-K3edKQfn8SxvwpzC5mpYYfeTuQUCxfiJipk3enTe9FNphzZXPF1vBC9EPSj2H5EwB7rmJKDNYEGj8OuqKpfrxg5dvWDEWT9bXZdBZNWjSjnA6KD6U/s220/rizki+khaizir.jpg"/></a>
</div>

Kode diatas silahkan diedit dulu, warna merah ganti dengan alamat target halaman yang kamu inginkan, sedangkan warna biru adalah alamat gambar yang ingin dipasang.

Ingat! kode ini hanya berlaku untuk 1 posisi, jika sobat ingin memasang di banyak sisi menggunakan kode ini, silahkan sobat ganti ID dari setiap kode, misalnya sobat ingin memasang di sudut kanan atas, maka yang perlu sobat ganti adalah kode #rizki_melayang dengan kode yang sobat inginkan, misalnya bisa saja sobat ganti dengan #rizki_melayang_kanan_atas atau apa saja yang penting kode ID antara kedua kode sama.

Selamat mencoba, semoga berhasil.

Source » http://www.wakrizki.net/2011/02/membuat-gambar-melayang-pada-blog.html#ixzz1opdDKVkT

Membuat Tombol Back To Top Sederhana

Membuat Tombol Back To Top Sederhana

Monday, March 14, 2011

Share this history on :

Share

0digg

Back to top adalah sebuah link atau tombol yang biasanya di simpan di bagian footer sebuah blog yang ketika di klik akan kembali ke bagian atas/header. Namun kali ini saya tidak membuat tombol back to top di bagian footer, melainkan di bagian tengah atau center postingan, tombol ini tidak dilengkapi dengan jQuery sehingga tampilannya agak kasar. Tombol ini bisa berupa tulisan maupun gambar, tergantung keinginan sobat, berikut ini screenshot dari tombol back to top.

Jika sobat berminat, ikuti langkah-langkah berikut ini :

1. Masuk ke blogger;
2. Klik Perancangan lalu klik Elemen Laman;
3. Pilih Tambah Gadget;
4. Pilih HTML/javascript;
5. Kemudian masukkan atau pastekan kode berikut :

<script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}

}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDmVk-og115LBcpWqkAd7hxxiJCd-4hhZ95O__UyzrqWIsMhuJHHNT_sADGRocyLWJGJIs3ObPvkwK-4bHD-8HEUk0fgYiePUbyVa1c34I732AbChzPRpMVFBOhSPkN1Jr_faedLjzOgXa/s320/up_out.gif" height="25"/></a></div>

6. Gantilah kode warna merah dengan url gambar sesuai keinginan sobat (usahakan ukuran gambar tidak terlalu besar agar tidak memenuhi dan menghalangi pengunjung untuk membaca postingan sobat);
7. Kemudian simpan template sobat dan lihat hasilnya.

Selamat mencoba, semoga berhasil.

Source » http://www.wakrizki.net/2011/03/membuat-tombol-back-to-top-sederhana.html#ixzz1opc3dQNR

Beberapa Fungsi Kode b:if cond= Untuk Pengaturan Tampilan Blog

Beberapa Fungsi Kode b:if cond= Untuk Pengaturan Tampilan Blog

Sepertinya blog yang satu ini sudah jarang dapat updatan dari saya. Baiklah, sore ini saya akan memcoba untuk posting artikel mengenai Beberapa Fungsi Kode b:if cond= Untuk Pengaturan Tampilan Blog. Tutorial dalam artikel kali ini saya rasa sangat membantu, jika sobat menggunakan template magazine, maka tutorial kali ini akan sangat berguna. Mengapa ? karena hampir semua template menggunakan kode ini.
Salah satu ciri template gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog. Kode b:if cond= inilah yang berfungsi untuk melakukan hal tersebut, salah satunya adalah untuk kotak komentar atau fungsi readmore. Jika sobat perhatikan, template ini jika dalam keadaan homepage akan memiliki tiga kolom, tapi jika pada content hanya akan terlihat 2 kolom.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. Yang bisa sobat terapkan untuk pengaturan pada blog sobat.

1. Hanya pada Halaman Utama Blog
<b:if cond='data:blog.url == data:blog.homepageUrl'> . . . </b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Contoh penggunaan kode ini bisa sobat lihat pada widget archive pada blog ini. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, kolom archive dan yang dibawahnya akan menghilang.

2. Kategori Post dan Single Post
<b:if cond='data:blog.url == data:blog.homepageUrl'> . . . </b:if>
Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).

3. Halaman Utama Blog
<b:if cond='data:blog.pageType != &quot;item&quot;'> . . . </b:if>
ode ini berfungsi untuk menampilkan widget blog pada main post atau hanya pada halaman utama saja, jika sobat mengklik sebuah postingan (membaca keseluruhan) maka widget ini akan hilang.
Contoh penggunaan kode ini adalah readmore. Dia akan hilang ketika kita masuk pada single post (artikel).

4. Single Post atau halaman isi artikel
<b:if cond='data:blog.pageType == &quot;item&quot;'> . . . </b:if>
Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika sobat membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.
Contoh penggunaan kode ini adalah kolom komentar, yang hanya akan muncul pada single post dan tidak akan muncul pada home page atau bagian lain.

5. Halaman Utama Blog
<b:if cond='data:blog.pageType == &quot;index&quot;'> . . . </b:if>
Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilkan Widget Blog Pada Postingan Tertentu Saja
<b:if cond='data:blog.url == &quot;URL Post Tertentu&quot;'> . . . </b:if>
Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu atau pada artikel tertentu saja.

7. Menyembunyikan Widget Blog Pada Postingan Tertentu Saja
<b:if cond='data:blog.url != &quot;URL Post Tertentu&quot;'> . . . </b:if>
Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain.

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. Tutorial ini saya dapatkan dari salah satu sobat blogger saya. Awalnya saya juga bingung mau buat bagaimana dengan widget-widget tersebut, beruntung karena saya memiliki sahabat yang sangat jeli dan teliti dengan template dan kode html. Semoga artikel singkat ini bermanfaat buat sobat blogger.
Source: www.wakrizki.net