Posts Subscribe to Revolution ChurchComments

Minggu, 08 Juli 2012

0 komentar 03.50 Diposting oleh Administrator
Label:
Oke blogger, kali ini Jog-Blogger akan memberikan kamu sedikit ilmu CSS tentang membuat menu header untuk blog yang simple tapi menarik, setelah saya membuat post tentang "Membuat Gambar Melayang di Blogger" saya sedikit tertarik untuk membuat header menu . oke langsung ke tutorial nya saja =)) 

1. Login ke blogger -> "Layout -> Edit HTML
2. Cari kode ]]></b:skin> (ctrl+f biar gampang) Copy Code Di bawah tepat di atasnya
#Jogblogger_containermenu{
    height:35px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7psEuw6CvzlnZCOg-XkVYWvD7kJN0-rx6LoHa0aI8JFY_a-QfAHq6uMePPFu0gs8fmrDXDdTJkx3W8NEVh8A3ahJ88PiKoHC6auVHcShfzSKJnfv6peDJmIQL6z50jue7H-5n9Hkye9zh/s1600/menu.jpg) ;
    display:block;
    padding:0px 0 0px 14px;
  }
#Jogmenu{
    position:relative;
    display:block;
    height:25px;
    font-size:11px;
    font-weight:bold;
    font-family:Arial,Verdana,Helvitica,sans-serif;
    }
#Jogmenu ul{
    margin:0px;
    padding:10px 20px 0 0;
    list-style-type:none;
    width:auto;
    float:left;
    }
#Jogmenu ul li{
    display:block;
    float:left;
    margin:0 px 0 0;
    width:105px;
    }

#Jogmenu ul li a{
    display:block;
    float:left;
    color:#fff;
    text-align: center;
    text-decoration:none;
    padding:6px 0px 0 0px;
    width: 105px;
    height: 19px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
    }
#Jogmenu ul li a:hover,#Jogmenu ul li.current_page_item a{
    color:#fff;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top left;
    width: 105px; height: 19px;
    text-align: center;
    }
#Jogmenu ul li .current_page_item a,#Jogmenu ul li .current_page_item a:hover{
    color:#ff9600;
    width: 105px; height: 19px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDCvFkX2qVh4HpPQZtfMRcYLldegaN5X_eH_uV_bxi0PkXvFjdeqz2D1psNH3iohnxN60Ehhr_K5pZLmduA2I_DHZYlETqxyckkobDKj6R2TBwSCvzg7x-MClOmKAPZOUsW2uQf2sj7hST/s1600/li2.gif) no-repeat top right;
    }    
 2. Setelah itu, cari kode <body> Copy Kode di bawah tepat di bawah kode <body>
<div id='Jogblogger_containermenu'>
<div id='Jogmenu'>
<ul>
<li class='page_item current_page_item'><a href='LINK Di Sini'>Home</a></li>
<li class='navlinks'><a href='LINK Di Sini'>About</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Pictures</a></li>
<li class='navlinks'><a href='LINK Di Sini'>Videos</a>
</li><li class='navlinks'><a href='LINK Di Sini'>Contact</a></li>
<li class='navlinks'><a href=''http://jog-blogger.blogspot.com/>Jog-Blogger</a></li></ul>
    </div>       
  </div>    
 3. Klik dulu "PREVIEW" Jika Berhasil langsung simpan saja =))



*Note : Untuk menambahkan link/menu nya lagi copy paste kode </li><li class='navlinks'><a href='LINK Di Sini'>Bla Bla</a> tepat di atas code </ul> .
Oke sekian Tutorial dari saya ..


 

0 komentar 03.34 Diposting oleh Administrator
Label:
Gak usah pake basa basi deh langsung ajaaa

1. Login ke blogger -> "Layout -> Edit HTML
2. Cari kode ]]></b:skin> (ctrl+f biar gampang) Copy Code Di bawah tepat di atasnya


#trik_pojok_jog_blogger { position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
 
3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".
4.Cari kode </body>, copas code di bawah tepat di atasnya
<div id="trik_pojok_jog_blogger">
<a href="www.jog-blogger.blogspot.com">
<img src="http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" border="0"/></a></div>
Note*
"http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

Berhasil Gak ?

Senin, 02 Juli 2012

0 komentar 16.29 Diposting oleh Administrator
Label:
Oke sobat blogger, kali ini saya akan memberitahun sedikit infot tentang cara mengganti cursor di blog, cara nya cukup mudah hlo... langsung di praktekin aja yaaa ^_^
1. Login ke Blogger
2. Buka edit html
3. Add Gadget > Pilih HTML/Java-script
4. Copy Paste kode di bawah 


<style type="text/css">body {cursor:url("URL Gambar Cursor Anda"),default}</style>





Link : http://ak.imgfarm.com/images/cursormania/files/22/11113a.gif




Link : http://ak.imgfarm.com/images/cursormania/files/23/11998a.gif




Link : http://ak.imgfarm.com/images/cursormania/files/26/13358a.gif
 




Link : http://ak.imgfarm.com/images/cursormania/files/6/3371a.gif




Link : http://ak.imgfarm.com/images/cursormania/files/18/9484a.gif




Link :http://ak.imgfarm.com/images/cursormania/files/20/10366a.gif




 Link : http://ak.imgfarm.com/images/cursormania/files/22/11372a.gif



Link : http://ak.imgfarm.com/images/cursormania/files/20/10187a.gif






Link : http://ak.imgfarm.com/images/cursormania/files/16/8142a.gif




Link : http://ak.imgfarm.com/images/cursormania/files/26/13346a.gif




Link : http://ak.imgfarm.com/images/cursormania/files/24/12234a.gif





 Link : http://ak.imgfarm.com/images/cursormania/files/25/12975a.gif





Link : http://ak.imgfarm.com/images/cursormania/files/20/10201a.gif





Link : http://ak.imgfarm.com/images/cursormania/files/15/7656.gif

0 komentar 09.42 Diposting oleh Administrator
Label:
Oke, Kali ini saya akan memberikan sedikit kode kode HTML untuk membuat BOX .. langsung aja yaa :

  • Solid Border.

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div> 
  • Ridge Border.

<div style="border: 2px #006400 ridge; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div>
  • Groove Border.

<div style="border: 2px #006400 ridge; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div> 

  • Inset Border.

<div style="border: 2px #006400 inset; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div>  

  • Outset Border.

<div style="border: 2px #006400 outset; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div>  
  • Double Border.


<div style="border: 2px #006400 double; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div>
  • Dotted Border.

<div style="border: 2px #006400 dotted; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI</div>
  • Dashed Border.

<div style="border: 2px #006400 dashed; padding: 10px; background-color: #82CAFA; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>
  • Border dengan scroll, lebar dan tinggi.

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 300px; text-align: left;"> PASTE ATAU TULIS KODE/SCRIPTNYA DISINI </div>

Keterangan :
- Tulisan 'Berwarna Merah' : Silahkan ganti dengan Kode Script/HTML yang sobat inginkan.
- Perlu di ingat Kode HTML atau Script yang ingin kamu tampilkan harus sudah dalam keadaan "ENCODE" bisa dilihat caranya disini: Converter Kode Script/HTML Menjadi Encode
- Warna Background silahkan ganti sesukamu, Contoh kode warna: #006400

0 komentar 09.35 Diposting oleh Administrator
Label:
Back to Top Button atau Tombol Kembali ke Atas adalah fitur blog yang mempermudah pengunjung/visitor blog kembali ke bagian atas halaman dengan sekali klik tanpa melakukan mouse scrolling. Efeknya sangat besar sekali terutama bagi blog yang memiliki halaman panjang. Letak dari tombol fitur back to top kali ini ada di bagian footer sebelah kanan.

Cara menambahkan fitur 'Back To Top' untuk Blogger-Blogspot:
1. Masuk ke edit HTML.
2. Cari kode tag </body> (Ctrl+F)
3. Masukkan kode berikut di atas </body>:

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='alamat url gambar Back to Top-mu'/></a>
Ganti title Back to Top dengan kata-kata yang disuka, misalnya 'return to top', 'kembali ke atas', 'balik ke atas', 'meluncur ke atas', 'balikan nyook', atau 'kembali ke laptop'... terserahlah, suka-suka elo... ^_^ Fungsinya untuk notifikasi ke pengunjung tentang kegunaan tombol tersebut.
Alt Back to TOP lebih baik ditinggalkan begitu saja kalo-kalo gambar gagal dimuat browser jadi tulisan itu masih nongol sebagai pengganti.
Gunakan gambar berikut, klik kanan copy (save as), trus upload dan host sendiri ya gambarnya, biar gak lelet and pengunjung gak melet-melet!

Atau Googling (cari juga di photobucket.com) gambar 'back to top/kembali ke atas' sendiri yang lebih keren dan sesuai dengan warna dan ukuran footer blog-mu, gunakan keyword "back to top button image", kemudian upload dan host gambar itu.
Ambil/copy direct link gambar dan ganti alamat url gambar Back to Top-mu dengan alamat url/link tersebut. Contoh:

<a href='#' style='position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;' title='Back to Top'><img alt='Back to Top' border='0'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TEwLIM6D5ZKgMDSm8zmiy7QpF6LiC5gnTFIslaDTSPLLEUwTeMPSfUck4w7w8uz0-79pPLcMiqhLfTIPKEqMnjKIvcevAfg7IVMJYDAId9b0ZblGoYFE18rauocNzF4kRjuFP-S8E_rI/s1600/bttp-4.png'/></a>
Oke, udah? Belum? Buruan lah!

4. Kalau sudah dimasukkan semuanya dan pastikan tidak ada yang terlewat, save template HTML-nya.
5. Done! Fitur/Button Back To Top siap digunakan.

0 komentar 09.31 Diposting oleh Administrator
Label:
Oke, Kali ini saya akan memberikan sedikit tutorial untuk para blogger, yaitu Membuat Header Blog Menjadi 2 Bagian ... Header 2 bagian ini sangatlah profit untuk kolom adsense anda, karna akan menjadi kolom yang cukup sering di lihat para blog walker yang mengunjungi blog anda semua ...
Udah deh ya basa basinya, langsung ke tutor nya aja : 
1. Login Ke Blogger
2. Masuk Ke Template > Edit HTML
3. Cari Kode Di bawah ini
#header-wrapper {
width:920px;
float:left;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
 Gunakan CTRL + F agar lebih gampang.
4. Ganti Kode merah di atas menjadi 554px .
6.

#outer-wrapper {
width: 920px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
7. Sama seperti di atas, ganti menjadi 554px .
8. Lalu Copy Paste Kode di bawah ini, tepat kode di atas kode no.6
#header2-wrapper {
width:234px;
float:right;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
9. Setelah itu cari kode di bawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama blog anda (Header)' type='Header'/>
</b:section>
</div>
10. Copy Paste kode di bawah ini tepat di bawah kode no. 9 (atas)

<div id='header2-wrapper'>
<b:section class='header2' id='header2' maxwidgets='1' showaddelement='no'>
</b:section>
</div>
Lalu Simpan!


Nb: lebar kolom diatas memang saya sesuaikan untuk google adsense ukuran 234px,jadi jika anda ingin memasukkan sebuah elemen dengan ukuran lain,anda tinggal mengganti semua kode 234px diatas dengan ukuran elemen yang anda inginkan tersebut.Dan jangan lupa untuk mengurangi kode lebar 554px dengan lebar penambahan elemen anda.

Cth: jika anda memasukkan elemen lain yang lebarnya 436px,maka gantilah kode width: 234px; dengan kode width: 436px; lalu setelah itu kurangi kode lebar 554px dengan hasil dari 436px dikurang 234px.sehingga menjadi 352px.


OKE... Sekian dari Saya

0 komentar 09.13 Diposting oleh Administrator
Label:
Buat para temen2 blogger yang belum tau gimana cara ngepost gambar menggunakan kode HTML, kali ini saya akan memberitahu cara dan macam2 nya ...
langsung aja yaa .





1. Untuk Kode Syntax di bawah ini, jika mouse anda berada di atas gambar, makan akan keluar text
<img src="url gambar" alt="Text Di Sini!"/>
2. Untuk Kode Syntax di bawah ini, jika anda memiliki gambar yang besar, maka anda bisa men-settingnya sendiri menggunakan kode di bawah .
<img src="url gambar" alt="Text Di Sini" width="304" height="228" />
Note : width adalah lebar dan height adalah tinggi
3. Untuk Kode Syntax di bawah ini, jika anda memiliki link dan agar bisa di klik pada gambar, maka gunakan lah kode di bawah ini .
<a expr:href='LINK'><img src='url gambar'/></a>

Oke deh, segitu dulu yaa Tutorial HTML nyaa.
Langganan: Postingan (Atom)
 

Jog-BLOGGER!. Copyright 2011 - 2013 All Right Reserved. Template By : Jog-BLOGGER!