Boedhye ThejoE

Sabtu, Oktober 08, 2011

Merubah Warna Background Blog

Sabtu, Oktober 08, 2011 Boedhye Thejoe No comments

Alhamdulillah Yha Malam ini karena Chip poker Gue Habis saya membuat postingan baru lagi, setelah Blogwalking kesana kemari saya tertarik sama salah satu blog yg saya temui, di situ tersedia form untuk memilih theme warna background sesuai dengan keinginan pembaca, muungkin aja ada pembaca yang tidak suka dengan warna background Template kita. Baiklah sekarang saya ingin membuat tutorial tentang Merubah Warna Background Blog Sesuai Keinginan Pembaca. berikut langkah langkah-langkahnya:

1. Login ke Blog Sobat (www.blogger.com)

2. Design (Rancangan)

3. Akan langsung active di menu elemen laman, klik Add a Gadget (Tambah Gadget)

4. Cari dan pilih HTML/JavaScript

5. Copykan Kode Script di bawah ini

<center><b>Silahkan pilih warna Background kesukaan Mas Bro</b></center>

<br/>

function bgChange(bg)

{

document.body.style.background=bg;

}

</script>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</td>

</tr></tbody></table>

</div>

6. Simpan

7. Silahkan sobat drag atau pindahankan dimana letak/posisi gadget ingin di lestakkan.

keterangan :

Teks yang berwarna biru bisa sobat ganti dengan kata-kata kesuakaan sobat.
Teks yang berwarna merah silahkan sobat ganti dengan warna yang ingin sobat sediakan di Blog sobat (disarankan memilih warna-warna yang cocok atau sesuai dengan template), misalkan warna tulisan di blog sobat warna hitam, maka jangan membuat pilihan warna hitam juga), ntar malah ga keliatan tulisannya.. hehehe.
Jika ingin mangurangi pilihan warna, sobat hapus saja baris-baris pilihan warnanya warna, <td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A"> </td>, dan misalkan sobat ingin menghapus 1 warna, hapus saja baris <td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A"> </td>, dan jika ingin menambah pilihan warna silahkan copykan baris code

Selesai deh, gampang aja kan, Ga ada salahnya kita menyiapkan suatu menu yang bisa membuat Mas Bro senang dengan memilih warna kesukaan mereka. demikian sedikit tips dari saya.Lebih dan Kurangnya Mohon Postingannya.....

Posted By:

Pasang Back To TOP pada Blogger

Sabtu, Oktober 08, 2011 Boedhye Thejoe No comments

Cara Memasang Back to Top Blogger :

1. Copy kode berikut:

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="url gambar back to top blog" /></a>

Anda dapat mengganti title Scroll/Back to Top dengan kata-kata yang diinginkan. Ganti url gambar back to top blog dengan gambar back to top anda, atau bisa juga googling dengan keyword "back to top button image". Edit ukurannya sesuai dengan besar yang diinginkan, lalu upload. Masukkan url gambar yang telah diupload ke dalam script.

2. Buka dashboard > Design/Rancangan > Klik Add a/Tambah Gadget > Pilih opsi HTML/Javascript

3. Paste/letakkan kode tersebut, lalu save.

Posisi gadget dimanapun tidak masalah karena letak tombol tersebut fixed (tetap), yang menjadikannya melayang.

4. Done!

Gampang kan Mas Bro.......Jangan Lupa comennya.....!!!!!

Posted By:

ZooM GAMBAR / IMAGE POSTING BLOG

Jumat, Oktober 07, 2011 Boedhye Thejoe No comments

Nah,berikut tips yang tak kalah menarik dalam belajar mempercantik dan menghias blog,yaitu trik meperbesar (zoom) gambar atau image pada blogger secara otomatis hanya dengan meletakkan pointer mouse di atasnya dan mengkliknya, Seperti isi dari beberapa postingan gambar d blog ini.Ilmu ini chiyeee (Kanuragan Kali)

Langkah Cara Membuat Zoom Gambar / Image Blog Blogspot

Seperti biasa Mas Bro,teknik zoom gambar blog ini kita menggunakan metode css javascript.
Pertama,sobat blogger pergi ke dashboard lalu pilih tata letak / rancangan (gb1) kemudian edit html (gb2) dan checklist (contreng) tulisan expand widget templates (gb3) lihat gambar aja ya :P

gb1

gb2

gb3

Kemudian,cari kode </head> dan tepat diatasnya letakkan barisan kode css berikut:

<script   src='http://kumputervsayam.blogspot.com/2011/10/zoom-gambar-image-posting-blog.html'  type='text/javascript'/> 

<!--[if lt IE 7]> <link  rel="stylesheet" type="text/css"  href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css"  /> <![endif]--> 

<script type='text/javascript'> 

//<![CDATA[

hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';

hs.wrapperClassName = 'borderless';

hs.align = 'center';

hs.dimmingOpacity = 0.65;

hs.transitions = ['expand', 'crossfade'];

hs.fadeInOut = true;

// close button

hs.registerOverlay({

html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',

position: 'top right',

fade: 2 // fading the semi-transparent overlay looks bad in IE

});

hs.isUnobtrusiveAnchor = function(el) {

if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {

el.className = 'highslide'; // for the zoom-in cursor

el.title = 'Click to enlarge'; // for title

return 'image';

}

};

if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {



new hs.Outline('rounded-white');



new hs.Outline('glossy-dark');



});

// The gallery example on the front page

var galleryOptions = {



slideshowGroup: 'gallery',



wrapperClassName: 'dark',



//outlineType: 'glossy-dark',

dimmingOpacity: 0.8,

align: 'center',

transitions: ['expand', 'crossfade'],

fadeInOut: true,

wrapperClassName: 'borderless floating-caption',

marginLeft: 100,

marginBottom: 80,

numberPosition: 'caption'



};

if (hs.addSlideshow) hs.addSlideshow({

slideshowGroup: 'gallery',

interval: 5000,

repeat: false,

useControls: true,

overlayOptions: {

className: 'text-controls',

position: 'bottom center',

relativeTo: 'viewport',

offsetY: -60

},

thumbstrip: {

position: 'bottom center',

mode: 'horizontal',

relativeTo: 'viewport'

}

});

hs.Expander.prototype.onInit = function() {

hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;

}

// focus the name field

hs.Expander.prototype.onAfterExpand = function() {



if (this.a.id == 'contactAnchor') {

var iframe = window.frames[this.iframe.name],

doc = iframe.document;

if (doc.getElementById("theForm")) {

doc.getElementById("theForm").elements["name"].focus();



}

}

}



//]]>

</script> 

<style type='text/css'> 

pre {

background: white; 

padding: 5px; 

font-size: 10.9px;

}

</style>

Setelah itu sobat simpan templates ya.
Selanjutnya,untuk menampilkannya sobat bisa letakkan kode berikut di postingan sobat (ini hanya contoh saja)

<div class="thumbwrapper">

<a class="highslide" href="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg"  onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg" height="150" width="150" title="Click to enlarge" />

</a><a class="highslide" href="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg"  onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg" height="150" width="150" title="Click to enlarge" />

</a>

</div>

Ket:
Tulisan berwarna merah sobat ganti ya dengan url / alamat dari gambar yang sobat telah upload di blogger atau dari suatu situs.
Moga berhasil Mas Bro..N Smoga Sukses..Heheheh!!

Posted By: