Mengganti Background Blog Dengan CSS

Background atau latar belakang pada blog adalah bagian yang paling dasar pada blog, banyak template blog yang sama yang banyak dipakai, maka untuk memberi ciri khas pada blog Anda hal yang paling dasar dan yang paling mudah adalah mengganti warna background pada blog Anda atau dengan tambahan gambar pada background blog Anda.
Kali ini Saya akan menulis tutorial singkat blogspot tentang mengganti background dengan CSS, Mau tau caranya?
perhatikan dibawah ini.

Langkah pertama adalah masuk menu Layout (tata letak) kemudian masuk menu Edit HTML

Lalu cari CSS dari body seperti dibawah ini

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Kalau mau mencari CSS diatas perhatikan code yang berwarna hijau saja.

perhatikan Code CSS background diatas
$bgcolor adalah variabel definisi, jika Anda ingin menggantinya bisa dengan code warna misalnya ganti dengan warna putih code warnanya adalah : #FFFFFF atau warna hitam #000000. Atau warna yang lain bisa dilihat disini.


Mengganti background blog dengan gambar :

untuk membuat background gambar kita perlu sebuah gambar yang sudah diupload di hosting. Atau Anda bisa mencari di google image search dan copy URL gambarnya.
Kalu sudah tersedia gambar yang mau dijadikan background perhatikan dibawah ini.

background:#FFFFFF url(URL_GAMBAR) ;

URL_GAMBAR ini bisa Anda ganti dengan URL gambar yang Anda pilih misalnya gambar :

back

URLnya :
http://i725.photobucket.com/albums/ww258/anasceria/plays.jpg

Mengantur Background Gambar

background:#FFFFFF url(URL_GAMBAR) no-repeat top left;

no-repeat : berarti gambar didak akan mengulang, Bisa Anda ganti dengan

repeat : Mengulang-ulang gambar
repeat-x : mengulang secara horizontal
repeat-y : Mengulang secara vertikal

top left : Adalah posisi background bisa anda ganti misalnya bottom right

sedikit tambahan jika Anda mau mencari koleksi background

http://www.patterncooler.com/
http://www.bgpatterns.com/
http://patterns.ava7.com/

Nah sekian tutorial mengganti background blog, sedikit semoga membantu Anda.

Cara memasang kode Html

Banyaknya pengunjung yang bertanya kodenya dipaste dimana mas?, wah saya menjadi sadar akan kekurangan saya, lupa jika kita adalah pemula...ok tanpa basa-basi lagi marikita bahas bagaimana cara memasang kode html ke dalam blog kita?Caranya adalah...Contoh kode adalah sebagai berikut Text berkedipDi atas adalah kode text yang berkedip, cara memasangnya adalah :1. jika kamu ingin

Cara Pasang Iklan Di Blog (KumpulBlogger)

Anda sudah merasa lama didunia perbloggeran?, Anda merasa tidak mendapatkan apa-apa dari blog selain kepuasan hati?. Jangan salah blogger juga bisa dijadikan sumber penghasilan lho, Antara lain dengan cara memasang iklan di blog Anda dengan jasa periklanan Indonesia kumpulblogger.com, Anda tidak perlu bersusah-susah mencari iklan sendiri tinggal daftar terus pasang scriptnya di blog Anda karena kumpulblogger.com sudah mencarikan iklan untuk Anda jadi Anda tinggal terima beresnya saja.
Apalagi kalau blog Anda pengunjungnya sudah banyak pasti uang akan mengalir dengan sendirinya. Kumpulblogger.com menghitung setiap text link atau banner yang disediakan dengan cara PPC (pay per clik) atau setiap ada pengunjung yang mengklik zona iklan Anda.

Gimana enak gak? mau? ikuti caranya dibawah ini

Langkah pertama yang harus Anda lakukan adalah mendaftar kumpulblogger.com disini dengan cara mengklik link "register now" pada pojok kanan atas di situs kumpulblogger.com

Lalu masukkan alamat email Anda lalu klik tombol "Register" otomatis password untuk Log In sudah ada di email Anda. Anda bisa mengubah passwordnya setelah Anda Log In

Lalu setelah Anda Log In sebelum pasang scriptnya klik link "Tambah Blog" Pada menu Blogger

Isi form sesuai perintahnya lalu klik tombol "Submit"

Kalau sudah klik link "Script Text Advertising untuk Blog anda" dan pilih style iklan yang Anda sukai lalu copy scriptnya dan tempatkan di blog Anda dengan cara masuk menu Layout (tata letak) pada dashboard blogger lalu pada menu Page element (elemen halaman) pilih tempat yang Anda sukai dan klik "add a gadget" lalu pilih "HTML/JavaScript" dan Paste Script tadi yang Anda copy di kumpulblogger.com

Nah selesai

Selamat datang didunia Blogger dan selamat datang didunia periklanan.

Ehhh sampai lupa mengucapkan terima kasih pada yang sudah daftar kumpulblogger.com melalui Refferal saya. makasih ya

Menampilkan Next Page Hanya Judul Postingnya

Bukan apa-apa tapi hanya iseng-iseng ingin menulis di blog ini saja (ehh tapi sebenernya emang Saya bercita-cita sebagai penulis lho ). Dengan maksud ingin membagi-bagikan sedikit pengetahuan Saya mengenai mengotak-atik blog di blogspot Saya akhirnya menulis artikel ini dengan diawalai doa Saya mantap menulis artikel ini untuk Sobat-sobat sekalian semoga bermanfaat.

Oke langsung aja ke topik pembicaraan yaitu menampilkan next page dengan judul postinganya saja di main blog. Gimana maksudnya next page sih?
Maksud Saya "next page" itu adalah halaman dari blog selain halaman depan itu loh! apabila Anda mengklik link "Older post" atau "Posting lama" di main page hanya muncul judul postingnya saja.

Seperti Anda jika mengklik link "older post" di blog kang rohman



Hanya akan tampak judul postingnya saja seperti dibawah ini



Iya tha.. Kalau g percaya buktikan saja

Mau tau caranya?

Nah caranya cukup mudah kok gini lo

Masuk menu Layout kemudian masuk menu Edit HTML dan centang tanda "Expand widget templates"

Lalu Masukkan CSS dibawah ini diatas code ]]></b:skin>


#titleonly {
padding:6px 0 6px 5px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
margin-bottom:2px;
background:#EAE9E9;
color:#B8002E;
}

Kalau Sudah cari code dibawah ini

<b:include data='post' name='post'/>

Ganti Code diatas dengan code dibawah ini.



<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div id='titleonly'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Kalau Sudah tinggal SAVE dehh!!

Gimana gampang kan?

Tampilanya bisa kamu ubah sesuai dengan selera kamu tinggal mengedit CSSnya.

Nah jika ingin menampilkan semua judul post pasang URL link dibawah ini

http://AlamatBlogAnda.blogspot.com/search?max-results=200

Ganti tulisan yang tercetak merah diatas dengan alamat blog Anda

Gimana gampang kan?
Silahkan dicoba semoga berhasil jika Ada pertanyaan lontarkan saja di koementar

Menonjolkan Teks Tertentu Pada Postingan

Seringkali jika kita baca buku tutorial seperti misalnya tutorial HTML, tutorial Bahasa Pemrograman dan buku-buku tutorial yang lainya kita menjumpai seperti kode-kode atau script yang ditonjolkan dengan memberi background dan pembatas yang beda dengan teks-teks yang lainya yang ada di buku yang berguna untuk mempermudah para pembaca buku membedakan script-script dengan tulisan yang lainya. Begitu juga di blog jika Anda menulis tentang tutorial yang memungkinkan untuk menulis kode-kode HTML dan script-script yang lainya agar pembaca lebih mudah untuk membedakan.

Contoh seperti dibawah ini

HANYA CONTOH

POSTINGAN YANG DITONJOLKAN DISINI

HANYA CONTOH

Dan seperti ini


Kesepian hati…

Adakah benar adalah lorong waktu kebahagiaan ?

Kesunyian hati…

Adakah sungguh adalah suara merdu saat usia senja ?

Aku takut, aku salah kira

Meski kusadari kini ku di tengah itu semua

Aku hanya dapat bertanya

Tanpa sedikitpun kepastian akan jawabnya


(http://www.anggrekbiru.com/)


Terlihat perbedaan dengan contoh pertama dan kedua : contoh pertama dengan background warna dan contoh kedua dengan background gambar.

Untuk membuatnya silahkan perhatikan cara berikut

cara pertama yaitu cukup mudah kita tinggal masuk ke posting editor dan tulis code seperti dibawah ini di posting editor bagian "Edit Html"

untuk background warna kita gunakan code seperti dibawah ini

<div style="background:#FFFFCC; border:1px dotted #F5003D; padding:5px;">
DISINI POSTINGAN YANG MAU DITONJOLKAN
</div>



background:#FFFFCC;
adalah warna background, codenya bisa Anda ganti menurut warna yang Anda sukai. (lihat code warna disini)

border:1px dotted #F5003D;
adalah garis tepinya 1px adalah ketebalan dari garis tepinya, bisa kamu ganti ketebalanya sesuai selera Anda, dotted adalah jenis bordernya bisa kamu ganti sesuai selera kamu (baca disini jenis border). #F5003D adalah kode warna dari border silahkan Anda ganti dengan selera Anda.

padding:5px;
Untuk memberi batas garis tepi dengan tulisan, memungkinkan agar ada jaraknya dari garis tepi. (baca disini untuk lebih jelasnya)

tambahkan overflow:auto; jika ingin menambahkan fungsi scroll

untuk background gambar seperti dibawah ini
<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6vd9-vaSEulLwAeCYG1QU_nZlLHH7mGj0cNg-7pzJgJLr48qbIkBkzOaN5yYL0iOni5DLuiu1fcy9GJ7IxQcbYByw523WL9j6gz1UQaoVe-_eWM2N8z2usZd7fMA-Ei0n-YBNGJ45tlk/); width:508px; height:362px; padding:5px;">

DISINI TEXT

DISINI TEXT

</div>

Text yang tercetak merah diatas adalah url gambarnya. width:508px; adalah lebar area dan height:362px; adalah tinggi area.

Gimana gampang kan?

ini adalah sebagian cara untuk menonjolkan text tertentu, trik-trik berikutnya akan menyusul.
Sekian semoga sedikit membantu Anda dan bermanfaat bagi Anda.

Labels

15 tanda baca 2 columns 2003 2012 3 columns Access Add-ons Mozilla Adsense Affiliasi AL-MASTHURIYAH Alat Pembayaran Alertpay Alexa Alexa Toolbar Alexa Widget Animasi Jam Anti Virus anti virus 2011 Antivirus antivirus portable area login BSI Artikel Blog Artikel Terkait ArtikelKu Asal Mula Kehidupan di Bumi Menurut Pandangan Al-Qur’an Avatar AVG 2011 Software Pack + key AVG 2011 Software Pack + serial number Award Background Blog Backlink BAHAYA NARKOBA BASA SUNDA Bazar Al-Masthuriyah 2011 beautifull widget Berdakwah Lewat Tulisan BERFIKIR POSITIF Berita Beside Story Bina Sarana Informatika Bina Sarana Informatika (BSI) biografi iwan fals bisnis bisnis internet bisnis mudah Bisnis Online bisnis sampingan di internet bisnis tanpa modal Blog Contest Blog Counter Blog Direktori Blog Info Blog Statistik Blog Stuff Blog Submission Blog Tool Blog Tutorial Blog Widget Blogger Blogger Hack Blogger In Draft Blogspot Blora BOLT Border Browser browser HP Browser HP Populer BSI BSI Career BSI Sukabumi Cara Nonton dan Download YouTube Gratis di BB Tanpa Paket Streaming (Tanpa Aplikasi) Catatanku ClockLink.Com Comment Comment Box CONTO PIDATO BASA SUNDA Contoh Naskah Pidato Contoh Pidato CONTOH PIDATO BAHASA SUNDA CSS CSS Tutorial Custom Domain Customize Template Daftar Kata Sulit Geografi dapat uang secara mudah di internet Dasar-Dasar deepfreeze 2010 deepfreeze terbaru + key deepfreeze7 deepfreeze7 + key delphi 7 portable DEMOKRASI PANCASILA DERET BERKALA METODE LEAST SQUARE Design Web distributor buku bogor Distributor buku pelajaran Distributor buku pelajaran daerah bogor doa sholat jenazah Domain Domain Hosting download avg 2011 download bolt download browser HP download delphi 7 portable Download Film download makalah download makalah gratis download makalah lengkap download makalah STAI Download MP3 Udin Sedunie DOWNLOAD OFFICE 2007 PORTABLE DOWNLOAD SOFTWARE 2011 Download TA Download Tugas Akhir Download Tugas Akhir Manajemen Informatika Lengkap Earth Day Ebook Edit Foto Kamera HP Efek animasi Blog Email Service Emoticons Entrepeneur Blogs Facebook Facebook Ditutup 2012 fans iwan fals Favicon Fawwaz Grosir Sukabumi Feedjit.com fenomena fenomena alam hujan kabut 2011 Filsafat Pendidikan Islam Flag Counter Followers Font Tips Free Domain Free Hit Counter Free Online Tools Free Search Box Free Template Free Templates Free Tool Free Web Directory Fungsi dan Prinsip Manajemen Gambar Gambar Animasi Gambar Kota Cepu Game Online Giovanni Schiaparelli globalisasi globetrackr.com Glosarium Geografi Glosarium Kimia Google Google Plus Google Webmaster Google.com Google+ to RSS graviola Grosir Lengkap Sukabumi Grosir Mukena Sukabumi Grosir Pakaian Sukabumi Grosir Sukabumi gudang makalah Hasil otak-atik HIDRO KARBON Hit Counter Gratis HIV AIDS Hosting Gratis hujan kabut 11 maret 2011 hujan kabut 2011 Icon Info Informasi Internet Marketing Istilah Geografi istilah istilah dalam kimia Iwan Fals Konser Sukabumi 2011 Iwan Fals Sukabumi Jadwal Imsakiyah 1432 H jawa barat jadwal imsakiyah 1432 H Jadwal Imsakiyah 1432 H / 2011 M Wilayah Sukabumi JADWAL IMSAKIYAH DEPAG Jadwal Imsakiyah Sukabumi 2011 Jadwal Konser Iwan Fals 2011 Jadwal Puasa 1432 H / 2011 jasa pembuatan blog website Java Script kampanye damai pemilu indonesia 2009 Kaspersky Virus Removal Tool 2011 Kata-Kata Mutiara kewirausahaan dalam islam key avg 2011 KIMIA KLIPING KLIPING HARDWARE KOMPUTER KLIPING KOMPUTER KLIPING MERAKIT KOMPUTER Kode HTML Kode Warna HTML Kolom komputer Konsep Pendidikan Islam Konser Iwan Fals Sukabumi konser iwan fals sukabumi 2011 Konser Sukabumi Kontes Kontes SEO Kota Cepu Kota Minyak Cepu Kota Sukabumi Label Label Cloud LANDASAN PENDIDIKAN PANCASILA layout facebook Left Sidebar Lingkungan Link Link Exchange Lirik Udin Sedunia Loading Blog Login Mahasiswa BSI Logo BSI Logo Google MA’RIFAH DZUN AL-NUN AL-MISHRI Macam-Macam Penyakit Mahasiswa BSI Mahasiswa BSI Sukabumi Mahasiswa Sukabumi Makalah MAKALAH GLOBALISASI MAKALAH Haji dan Umrah MAKALAH SEKS BEBAS DI KALANGAN REMAJA MAKALAH SISTEM POLITIK DI BERBAGAI NEGARA MAKALAH TENIS MEJA MAKALAH WANITA SHOLIHAH DALAM PENDANGAN ISLAM makalah 15 tanda baca MAKALAH Asal Mula Kehidupan di Bumi Menurut Pandangan Al-Qur’an MAKALAH ASEAN MAKALAH BAHASA INDONESIA MAKALAH BAHASA INDONESIA TANDA BACA MAKALAH Benua dan Samudra MAKALAH Berdakwah Lewat Tulisan MAKALAH BERFIKIR POSITIF Makalah Budaya Politik MAKALAH DEMOKRASI PANCASILA MAKALAH EJAAN BAHASA INDONESIA PENULISAN KATA DAN UNSUR SERAPAN makalah Fungsi dan Prinsip Manajemen MAKALAH FUNGSI MANAJEMEN PENDIDIKAN Makalah Gratis MAKALAH HIV AIDS Makalah Hubungan Pancasila dan UUD 1945 MAKALAH ILMU KALAM PEMBAGIAN TASAWUF (FALSAFI DAN AKHLAKI) Makalah Ilmu Tauhid Makalah Insan Kamil MAKALAH IPS makalah kewirausahaan MAKALAH KIMIA HIDRO KARBON MAKALAH KOMPUTER makalah Konsep Pendidikan Islam MAKALAH LANDASAN PENDIDIKAN PANCASILA MAKALAH MA’RIFAH DZUN AL-NUN AL-MISHRI makalah manajemen MAKALAH METODE BERKALA makalah Metodologi Pendidikan Agama Islam MAKALAH OLAHRAGA makalah Pendidikan Islam di Indonesia MAKALAH PENGARUH PERAN ORANG TUA TERHADAP PRESTASI ANAK makalah perawatan jenazah MAKALAH Perkembangan Pendidikan Pesantren dan Madrasah Makalah PKn makalah Sejarah Pendidikan Islam MAKALAH SEPAK BOLA MAKALAH Sholat Jenazah dan Hal-Hal yang Terkait dengan Jenazah MAKALAH TANDA BACA Makalah Tanda Baca lengkap MAKALAH TANGGUNG JAWAB AYAH SEBAGAI PENDIDIKAN DALAM KELUARGA MENURUT ILMU PENDIDIKAN ISLAM makalah wira usaha Make Money manfaat blog dan website Manfaat sirsak Marquee masuk ke area login mahasiswa BSI Maulid Nabi Muhammad SAW Memperjelas Foto dari Kamera HP mengkafani jenazah mengubah pdf ke word mengubah smadav 8.5 menjadi pro mengubah smadav 8.6 free menjadi pro mengubah smadav 8.6 menjadi pro mengubah smadav 8.7 free menjadi pro mengubah smadav 8.7 menjadi pro mengubah smadav 8.8 free menjadi pro mengubah smadav 8.8 menjadi pro mengubah smadav 8.9 free menjadi pro mengubah smadav 8.9 menjadi pro mengubah smadav 9.0 free menjadi pro mengubah smadav 9.0 menjadi pro Menu Menu Dropdown Menu Horizontal Menu Scroll Menu-Menu MERAKIT KOMPUTER merubah smadav free menjadi pro Meta Tag Meta Text Modifikasi blog Nackvision.com NARKOBA Naskah Pidato Naskah Pidato Maulid Nabi Navbar Navigasi Halaman nero 10 + keygen nero 10 full nero 2010 nero terbaru Nod32 Norton antivirus Novel NURUL HUDA obat kanker obat kanker tapa efek samping OFFICE 2007 PORTABLE oi dalbo oi dalbo cibatu OI Sukabumi Pagerank Paid Backlink Paid To Click Paid To Share Paid To Take Picture pasang iklan murah PAUD Pay Per Click Paypal pemandian jenazah pemberitahuan aja kok Pendidikan Islam dalam Keluarga PENDIDIKAN ISLAM DALAM KELUARGA MAKALAH Pengamanan pengertian globalisasi penghasilan dari blog penghasilan dari internet penghasilan dari web Penipuan Peringatan Maulid Nabi Muhammad SAW Pernak-Pernik Photo/Image photoshop PIDATO SUNDA Porseni Al-masthuriyah 2011 PORSENI tahunan Al-Masthuriyah Post Tips PPC Program Promosi Blog rahasia buah sirsak rahasia graviola Read More Recent Comment Recent Post Recent Posts Related Posts Right Sidebar Road Show Aburizal Bakrie Aburizal Bakrie Sambangi Sukabumi RSS FEED Ruang Mahasiswa BSI Salam Pembuka Search Engine Searchsignht.com Sejarah BSI Sejarah Kota Cepu Sekilas Kota Cepu Sekolah seks seks bebas Semarak PORSENI menuju 1 Abad Al-Masthuriyah 2011 SEO SEO Blogspot Seo Tips SEPAK BOLA serial number avg 2011 Sertifikat gratis sirsak Site Meter Sitemap Smadav 8.5 pro smadav 8.6 pro smadav 8.7 pro smadav 8.8 pro smadav 8.9 pro smadav 9.0 pro smadav 9.1 pro SMANSA CEPU SMK PADJADJARAN SMK TEKNIKA SMK YASTI SMKN 3 Sukabumi Social Bookmark Software STAI Al-Masthuriyah Status YM STISIP SUKABUMI STKIP PGRI students.bsi.ac.id Sub Domain Sukabumi Sukabumi Facebook SUNANULHUDA TA Manajemen Informatika TA Visual Basic 6.0 tAMAN SERIBU LAMPU CEPU TANDA BACA tanda baca lengkap telfon gratis Template Text Animasi Tiny Counter Tips BB Tips Blogging Tips dan Triks tips n trik Tips n Trik Blackberry toko buku bogor toko buku online bogor Tools Blogging Top Of Blog Top Posts Tour Pesantren Iwan Fals 2011 Trik-Tips Tugas Akhir Manajemen Informatika + Program Tugas IMK Tugas IPS Geografi Tutorial Tutorial Blog Tutorial Blogger Tutorial blogspot Tutorial Photoshop Twitter Uang dari ngeblog Udin Sedunia Udin Sedunie ulang tahun Al-Masthuriyah ke-91 Ulang Tahun AMIK BSI Sukabumi ultah bsi ultah bsi 2011 ultah bsi ke-23 ultah bsi sukabumi UserOnline.com Video Iwan Fals Sukabumi 2011 Video Konser Iwan Fals Sukabumi 2011 Video Udin Sedunia Virus Virus KO Vista WANITA SHOLEH WANITA SHOLEH MENURUT ISLAM Website BSI Widget Widget - Gadget Blog Widgets Windows 7 Transformation Pack Paling Lengkap Untuk XP Wordpress Yahoo Yahoo Messenger Yahoo Search Box Yahoo Search Engine YASMA YASPIN. STISIP SUKABUMI Youtube

Popular Posts