^SMK_PESAT^_*Bogor*

Membuat Gambar Melayang (Float Image) Pada Blogspot

Kalau kamu membuka-buka blog ini pasti kamu akan bertanya-tanya kenapa gambar panah ke atas dan ke bawah tetap diam sekalipun kamu menggulung layar (menarik scroll)? Nah, itulah yang dimaksud dengan gambar melayang (float image). Jadi maksud gambar melayang disini bukannya gambar yang bisa melayang kesana kemari seperti Gatotkaca, tapi gambar yang tetap diam (statis) sekalipun scroll ditarik.

Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.

Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:

Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
Cari kode berikut dengan menekan Control F :
```
]]></b:skin>
```

Jika sudah ketemu, kopikan kode berikut :

#gambar1 {
position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}

Letakkan kode tersebut di atas ]]></b:skin>

Setelah itu kopikan kode berikut :

<div id="gambar1">
<a href="http://ruangsc.blogspot.com/" target="_blank" title="Tips Membuat dan Mendesain Blog">
<img border="0" src="http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif"/></a>
</div>

Letakkan kode tersebut di antara </head> dan <body>
Lakukan Pratinjau (Preview). Jika sudah OK baru simpan.

Jika kamu ingin mengubah letak gambar, ubah saja posisinya (top dan right) di atas dengan bottom untuk gambar di bawah dan left untuk gambar sebelah kiri. Dan jika kamu ingin mengubah gambar, ganti saja alamat gambar pada src="alamat gambar" dengan alamat gambar yang kamu inginkan (Bocoran gambar: kunjungi Adiwidget). Demikian juga jika kamu ingin mengubah link (tautan) untuk gambar tersebut, kamu tinggal mengubah alamat tautan pada href="alamat tautan" dengan alamat tautan yang kamu inginkan (Mengenai link lihat Membuka Link Di Halaman Tab Baru).

Lalu bagaimana jika ingin float image-nya lebih dari satu? Kamu tinggal meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'> dst., lalu ubah menjadi gambar2 dst.
Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.

Nah, mudah kan? Selamat mencoba...

Berikut adalah beberapa gambar yang bisa kamu pilih (klik untuk melihat gambarnya!)

Kupu-kupu 1
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif

Kupu-kupu 2
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/butterflyT.gif

Mickey Mouse
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/Mickey.gif

0 komentar

Menambahkan Basmalah dan Hamdalah di Awal dan Akhir Artikel

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Salam sahabat blogger, alhamdulillah dapat menyapa anda kembali, semoga dimanapun anda berada selalu dalam penjagaan-Nya. Setelah beberapa waktu sempat fakum, request tutorial yang disampaikan lewat komentar atau emailpun akhirnya menumpuk. Mohon maaf juga untuk pertanyaan-pertanyaan yang belum sempat terjawab satu persatu. Hari ini dan kedepan insyaAllah saya ingin mencicil request sahabat blogger, tapi mohon jangan ditambah dulu sebelum PR yang satu ini selesai! Baiklah tutorial kali ini saya ingin mengetengahkan cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog.
Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek sarat makna ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak yang menyepelekan kalimat basmalah dan hamdalah. Padahal jika dikaji lebih mendalam, di samping sebagai sarana meraih cinta Allah, ternyata kedua kalimat ini mengandung kekuatan luar biasa dalam meraih kesuksesan dan keberkahan hidup. Tidaklah mengherankan jika para Nabi, Rasul, dan orang-orang sukses selalu membaca basmalah setiap memulai aktivitasnya dan mengakhiri dengan hamdalah sebagai ungkapan syukur.
Tapi tak menambahkan kedua kalimat ini dalam artikel yang anda tulis, dan mencukupkannya dilisan sendiri saja tentu juga sudah cukup dan baik karena menambahkan keduanya dipostingan bukanlah kewajiban.
Baiklah cukup untuk pengantar, berikut cara menambahkan basmalah dan hamdalah diawal dan akhir posting blog

Setelah login ke akun blogger anda

Pada dasbor >> klik tab template >> Edit HTML

Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1

Klik tanda panah kecil disamping kode <b:includable id='post' var='post'>

Click Ctrl+F >> cari kode <data:post.body/>

Untuk menambahkan basmalah diawal posting tambahkan kode berikut diatas <data:post.body/>

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم</span></span></span></div><br/>

Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>