Cara Membuat Warna Background Sidebar Warna Warni Dengan Css

Tutorial kali ini ialah Cara Membuat Warna Background Sidebar Warna Warni Dengan Css. Kita tidak perlu edit gambar begini begitu, warna ini warna itu untuk mempercantik tampilan sidebar blog sobat. Yang juga gambar-gambar seperti itu hanya akan menambah beban blog sobat (kebanyakan sih orang bilang begitu) cukup dengan sedikit sentuhan CSS maka sobat dapat membuat warna background sidebar akan tampak warna-warni yang menawan dan mempesona. supaya lebih jelas sobat dapat melihat contoh yang sudah dibuat dibawah ini :

Nah bentuknya seperti ini sobat

Sahabat bisa berkreasi Sesuai dengan

keinginan sobat sendiri

warnapun bisa sahabat ganti sesuai

dengan yang diinginkan oleh sahabat

 lumayan mantap bukan ?! hehe

.

Nah apabila sahabat tertarik berikut adalah kode cssnya silahkan copy dan pastekan pada halaman posting milik sahabat

<div style="

background: -moz-linear-gradient(top, #FF0000, #FFFF00);

background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFFF00));">

GANTI DENGAN TULISAN SAHABAT DISINI

</div>

Nah kalau mau lebih rame lagi silahkan lihat contoh dibawah ini :

Nah bentuknya seperti ini sobat

Sahabat bisa berkreasi Sesuai dengan

keinginan sobat sendiri

warnapun bisa sahabat ganti sesuai

dengan yang diinginkan oleh sahabat

 lumayan mantap bukan ?! hehe
.

Nah untuk kodenya silahkan sahabat copy kode dibawah ini ya :

<div style="

background: -moz-linear-gradient(-40deg, black, green, yellow, orange, blue, indigo, violet); background: -webkit-gradient(linear, left bottom, right top, from(red), color-stop(16%,orange), color-stop(32%,yellow), color-stop(48%,green), color-stop(64%,blue), color-stop(80%,indigo), to(violet));">GANTI DENGAN TULISAN SAHABAT DISINI

</div>

Read more...

Membuat Tombol Share dibawah Posting

"Berbagi itu Indah" Begitulah kata yang tepat untuk menu tutorial blogger kesempatan pagi ini. Bagaimana cara pemasangannya, yuk ikuti panduannya berikut ini :

1. Masuk ke menu template di dalam blogger, pilih EDIT HTML ,Klik dimana saja pada kotak edit template agar pointer mouse ada di dalamnya.
2. Copy kode di bawah ini dan letakkan diatas kode ]]></b:skin> ( Dapat dengan menekan CTRL + F di Keyboard anda )

#post-share-button{margin-top:25px;background:#fafafa;padding:10px 10px 5px 15px;width:95%}

3. Lalu cari lagi kode yang seperti ini <div class='post-footer-line post-footer-line-3'>,letakkan kode di bawah ini diatas kode tersebut.

<div id='post-share-button'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/>
<span style='margin-left:15px'><a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span>
<span><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plusone size='medium'/></span>
<span><span id='pin-wrapper' style='margin:5px 10px 5px 0; text-align: left;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</span>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>

function run_pinmarklet() {
    var e=document.createElement(&#39;script&#39;);
    e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
    e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
    e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
    document.body.appendChild(e);
}
</script> </span>
</div>

4. Simpan Template Anda.

Read more...

Cara Membuat Kotak Space Banner Iklan Di Blog

Menampilkan space iklan di blog memberi peluang & informasi pada advertiser bahwa blog tersebut menawarkan space iklan yg dapat disewa. Apalagi jika blog tersebut memiliki kredibilitas, rank, serta traffic tinggi, maka advertiser/pemasang iklan pasti akan berbondong-bondong untuk memasang iklan/banner iklan di blog tersebut. Namun tidak ada salahnya juga bagi blog baru memberikan space/ruang tersendiri sebagai tempat beriklan advertiser. Hitung-hitung sebagai persiapan dan kali saja ada advertiser yg tertarik. Selain itu penggunaan space iklan dapat menjadi daya tarik tersendiri apabila diletakkan dengan benar.

Fitur dari template iklan 125x125 buka-rahasia.blogspot.com:

• Fleksibel, susunan yg tampil sesuai dengan lebar widget.
• Efek Border radius.
• Efek Transparan/Opacity ketika gambar di-hover.
• Gampang di edit guna memasang gambar iklan & link.
• Update (28-01-2012, 19.03 WIB): Dengan menghilangkan width serta height, template space iklan ini sekarang bisa digunakan untuk berbagai jenis ukuran banner iklan, 125x125, 300x250, 468x60, dst. Gunakan gambar sesuai dengan ukuran yg diinginkan maka widget space iklan akan muncul sesuai dengan ukuran tersebut.

Cara Memasang Kotak Space Banner Iklan di Widget Blog:

1. Masuk ke dashboard > template/design < Edit HTML

2. Copy kode CSS berikut & letakkan di ATAS ]]></b:skin>

#pemikirkuads {margin:0px;padding:0px;text-align:center}
#pemikirkuads  img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#bukarahasiaads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Ganti nilai pada margin:1px 1px untuk mengatur jarak gambar iklan. Nilai pertama jarak atas bawah, nilai kedua jarak kiri kanan.

3. Save Template.

4. Buka layout/design > Add a widget > Pilih HTML/Javascript.

5. Copy kode HTML berikut (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan):

<div id="bukarahasiaads">
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
</div>

Jika ingin menambahkan/mengurangi kotak space iklan tambahkan/hapus bagian:
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a> di atas </div>.

6. Save. Drag/geser gadget ke posisi yg diinginkan, untuk ukuran yg lebar & besar, letakkan widget di bawah header atau di atas posting. Save lagi.

Anda dapat menggunakan gambar berikut sebagai gambar space iklan (ukuran 125x125), untuk ukuran lain atau ingin yg sesuai selera & desain blog, bisa dicari di Google dengan keywords "ads space banner image (ukuran banner)". Upload gambar, ganti URL GAMBAR dengan url gambar yg sudah di-upload.

Note: Host/upload gambar sendiri. Jangan hanya gunakan url gambar di atas karena sewaktu-waktu gambar dapat hilang/dihapus. Klik kanan di atas gambar, save as ke komputer, lalu upload.
Jika seorang advertiser tertarik, maka dia tinggal mengklik url yg ada pada gambar banner (biasanya link diarahkan  ke halaman pasang iklan/advertise atau ke email/contact form).
Have a nice Blogging.

Read more...

Cara Mengubah Warna, Ukuran dan Jenis Hurup Blog

Diatas adalah halaman atau panel yang digunakan untuk mengtur halaman blogger. untuk mengakses halaman tersebut sebagai berikut :

1. Login Kehalaman blogger
2. Pilih Template
3. Klik Edit HTML
4. Klik Open Template Desginer dan anda akan langsung dibawa kehalam seperti diatas.
5. Untuk mengatur tulisan Pilih Advaced (dan akan muncul sub-sub menu untuk mengatur halaman blog)
Keterangan :
• Page Text
Disini anda bisa melakukan pengaturan hurup untuk postingan blog anda
• Background
Disini anda bisa melakukan pengaturan latar blakang atau backgrount blog anda
• Link
disini anda bisa melakukan pengaturan link dihalaman blog anda
• Blog Title
disini digunakan untuk mengatur judul blog anda
• Blog Description
Disini anda bisa melakukan pengaturan deskripsi blog anda
• Post Title
Disini anda bisa menlakukan pengaturan judul postingan blog anda
• Date Header
Disini anda bisa melakukan pengaturan tanggal pada blog anda
• Pos Foother
Disini anda bisa melakaukan pengaturan bagian footer blog anda

Itu dia pengaturan bawaan yang sudah disediakan oleh blogger namun sedikit ada catatan untuk tool bawaan blogger sebut yaitu :

Tool atau panel pengaturan diatas dapat berfunggsi 100% untuk template bawaan blogger sedang template hasil download atau template hasil modifikasi terkadang sebagian dari pengaturan diatas tidak berfungsi.

Bagai mana solusinya jika template saya adalah template modifikasi atau hasil downlotan. tenang sobat blogger tetap masih bisa kita rubah namun sedikit lebih rumit karena harus menemukan kode didalam Edit HTML.



Berikut pengaturan warna, ukuran, dan jenis huruf dengan cara Edit HTML.

1. Pilih Template
2. Pilih Edit HTML 
3. Klik Proses (dan anda akan dibawa kehalaman Edit Html Seperti Berikut: )

4. Jika Masih Bingng Baca Tutorial Cara Mengakses Halaman Edit HTML Blogger
5. Download Lengkap Template Blog terlebih dahulu untuk antisivasi kesalahan Editing
6. Sekarang Cari Kode body,  .body atau kode #body (gunakan CTRL+F dan F3 untuk memudahkan Pencarian kode)
7. Setelah anda menemukan kode tersbut biasanya akan diikuti oleh kode-kode berikut 

.body{ background: #0B0B0B; color:#ddd; font:13px trebuchet ms; font-family:Arial;} a:link{color:#A9F5F2;text-decoration:none;} a:visited{color:#A9F5F2;text-decoration:none;} a:hover{color:#01DF01;text-decoration:none;}

Keterangan :
• background: #0B0B0B; adalah warna latar blakang halaman blog
• font:13px  adalah pengaturan besar hurup postingan blog anda
• a:link{color:#A9F5F2;text-decoration:none;} pengaturan warna link
• a:visited{color:#A9F5F2;text-decoration:none;} adalah pengaturan warna link yang sudah diklik
• a:hover{color:#01DF01;text-decoration:none;} adalah pengaturan warna link saat kursor berada diatas link tersebut
• color:#ddd; Pengaturan warna huruf 
8. Jiksa sudah jangan lupa untuk disimpan

Untuk melakukan pengaturan hurup judul postingan sebagai berikut :

1. Cari kode post h3 atau .post h3 atau #post h3
2. Apabila sudah ketemu biasanya akan dikuti kode berikut

.post h3 { background:#FFF; width:auto; text-align: left; font: 16px trebuchet ms; font-family: arial;}

keterangan :
• #FFF; adalah warna latar belakang judul
• left; adalah posisi judul postingan
• 16px : ukuran hurup judul postingan
•  arial; adalah jenis hurup yang digunakan untuk judul postingan
3. klik simpan jika sudah selesai

Nah itu dia cara yang bisa dilakukan untuk mengubah huruf postingan dan judul postingan. sekali lagi itu adalah kode yang mendekati setiap template memiliki kode yang berbeda silahkan berexperimen. selamat mencoba semoga bermanfaat.

Read more...