Cara mengatur spasi tulisan di blog

Tips dan Trik kali ini adalah tentang cara mengatur spasi tulisan di blog. Spasi atau jarak kosong antara kalimat pada baris atas dan juga baris bawah. Dan juga jarak kosong antara huruf satu dengan yang lainnya. Tujuannya agar tulisan diblog terlihat lebih rapi, dan lebih mudah untuk dibaca.

Contoh spasi atau jarak kosong antar baris kalimat:

Contoh jarak spasi antar baris
Terlihat jauh jarak antara tulisan ini dengan tulisan atas.

Dan contoh spasi atau jarak kosong antar huruf.

Contoh jarak spasi antar huruf
Jarak antara huruf satu dengan huruf yang lain.

Dari contoh diatas sudah jelas kan, perbedaan antara spasi atau jarak kosong antar baris kalimat dan antar huruf. Berikut ini adalah contoh penerapan pengaturan spasi tulisan pada bagian posting blog. Ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, lalu pada halaman dasbor pilih pengaturan Template.
2. Lalu klik edit HTML dan cari kode ]]></b:skin> dan masukan kode berikut ini diatasnya.
.post-body {
line-height:1.8em;
letter-spacing: 0.1px;
}
3. Save template, selesai.

Keterangan kode diatas.

• .post-body { untuk mengatur tulisan di halaman posting blog
• line-height:1.8em; untuk mengatur spasi antar baris kalimat
• letter-spacing: 0.1px; untuk mengatur spasi antar huruf

Silakan diatur sendiri sesuai dengan keinginan anda, untuk menambahkan atau mengurangi jarak antar baris ganti  nilai line-height:1.8em; contoh: 2.8em dan untuk spasti antar huruf ganti nilai letter-spacing: 0.1px; contoh: 1px;

Kalau seperti contoh diatas. itu kode spasi antar barisnya saya atur menjadi 2.8em dan spasti antar hurufnya 5px. Untuk pengaturan keseluruhan tulisan dari halaman posting artikel blog saya ini. saya atur spasi antar barisnya menjadi line-height:1.6em; dan untuk spasti antar hurufnya letter-spacing: 0.1px;. Menurut saya sudah cukup enak dilihat tulisan di blog saya ini dengan pengaturan nilai 1.6em untuk baris kalimat dan 0.1 untuk spasi huruf.

Silakan dibaca juga artikel² saya yang lainnya, seperti membuat pangkat atas¹² dan bawah₉₀ di artikel tips dan trik menulis di blog. Dan juga artikel saya yang lainnya. Terima kasih telah berkunjung ke blog saya, dan semoga artikel diatas bisa bermanfaat untuk anda.

Cara membuat background warna transparan

Background warna transparan, yang berarti background dengan menggunakan warna transparan, tetapi background aslinya juga terlihat. Jadi background awal juga terlihat, misalkan background awal kita menggunakan gambar, dan background warna transparan kita warnanya hitam. Maka warna transparan hitam dengan background gambar juga akan terlihat.

Seperti contoh gambar diatas,background dasar yang digunakan adalah background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini adalah beberapa kode warna background yang dapat digunakan untuk membuat background warna transparant.

background:rgba(0,0,0, 0.3);

background:rgba(0,0,0, 0.8);

Sebelumnya saya jelaskan sedikit tentang kode diatas.

• Ketiga kode awal digunakan untuk mengatur kode warna. kode warna 0,0,0 adalah warna dasar Hitam.
• Untuk kode terakhir 0.3 dan 0.8 digunakan untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar kode terakhir, maka akan semakin hitam. Kode terakhir ini hanya sampai kode 1. Contoh:0,0,0, 1.

Untuk mengganti dengan warna lain, kamu bisa coba kode dibawah ini.

Untuk warna merah - background:rgba(204,0,0, 0.6);

Untuk warna pink - background:rgba(204,0,204, 0.8);

Untuk warna biru - background:rgba(0,0,204, 0.8);

Untuk warna Hijau - background:rgba(0,204,0, 0.8);

Untuk warna Kuning - background:rgba(204,204,0, 0.8);

Untuk warna Orange - background:rgba(255,102,0, 0.8);

Dan masih banyak lagi warna yang lainnya. Untuk melihat kode warna, kamu bisa lihat diphotoshop, lalu klik pada bagian set foreground color(gambar kotak untu ganti warna). Lalu lihat kode pada bagian RGB nya.

Seperti contoh gambar diatas, pertama klik dulu bagian kotak yang sudah saya beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 kode RGB yang bertanda kotak merah itu untuk digunakan diwebsite.

Dan yang terakhir adalah cara penerapannya di blogger. Sebagai contoh kita akan coba mengedit pada bagian halaman posting blog. Caranya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pada halaman Dasbor pilih pengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode halaman posting ke dalamnya.
.post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
3. Dan lihat perubahannya, background nya itu saya beri warna hijau, dengan ketebalan warna 0.5 hasilnya seperti gambar dibawah ini.

Untuk mengatur bagian lainnya, coba kamu baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa kode bagian blog yang dapat kamu gunakan. Semoga Bermanfaat.

Cara membuat background gradient 2 warna

Background gradient fungsinya untuk membuat background warna dengan menggunakan 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Jadi misalkan kita ingin menggunakan warna putih dan biru dibackground blog kita. Maka kita dapat mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya seperti dibawah ini.

---

Background 1 warna dengan menggunakan warna biru.

---

Warna Biru Saja

---

Background 2 warna dengan menggunakan warna biru dan putih.

---

Warna Biru dan Putih

Selanjutnya adalah cara membuat dan menerapkannya diblog. Sebagai percobaan kamu bisa coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode background posting berikut kedalamnya.

.post{
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}

Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.

---

Berikut jenis2 pengaturan warna gradient 2warna yang dapat kita gunakan.

---

Atas - Bawah
background: -moz-linear-gradient(top , #ffffff, #1780dd);

Kiri - Kanan
background: -moz-linear-gradient(left , #ffffff, #1780dd);

Warna Berhenti putih-biru-putih-biru-putih
background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);

Warna Berhenti putih-biru-putih-biru-putih dengan persen%
background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);

Warna putih dikiri-kanan dan biru ditengah
background: -moz-radial-gradient(circle, #1780dd, #ffffff);

Posisi dan Ukuran
background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);

Ukuran: 80% untuk warna putih dan 20% untuk warna biru
Posisi: closest-corner pada bagian atas bisa diganti dengan kode

closest-side
closest-corner
farthest-side
farthest-corner
contain
cover

Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda agar terlihat lebih menarik. Untuk cara penggunaan dibagian lain, seperti pada bagian header, sidebar atau keseluruh body halaman blog, kamu bisa baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada kode dari bagian2 blog, yang dapat kamu gunakan untuk diberi background 2 warna seperti contoh diatas.
Catatan: Gradient 2 warna ini tidak bisa dilihat di browser google chrome, sebabnya saya belum tau, jika sudah tau saya akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga bisa bermanfaat untuk anda.

Cara merubah bullet list diposting blog

Cara merubah tampilan bullet list diposting blog menggunakan gambar. Bullet list atau tanda bulat-bulat yang ada diposting blog akan kita ganti dengan menggunakan gambar, agar terlihat lebih stylish. Contoh gambar lihat dibawah ini.

Bagaimana??anda tertarik untuk mengganti bullet list diblog anda dengan gambar. Jika tertarik, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Selanjutnya kepengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. 
2. Lalu copi kode berikut dan pastekan kedalam kotak tambahkan Css.
.post ul {
list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOlAfcffmJhXhXWarW8G4pI-Ys7_rUEJkQgOVHtsyKnDuT391UkuNPD_zUwLP1e8A9dHVjKJ2S8lINSn9ay8CckbesBHA6OEit83mGz8WZOFqrvmNrbceeoClE0byesEwWUuEg1DkhR35/s12/bullet%2520list.gif);}
3. Selanjutnya Klik terapkan ke blog, selesai.

Keterangan Kode:

• .post ul { kode untuk mengatur bullet list diposting blog.
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKOlAfcffmJhXhXWarW8G4pI-Ys7_rUEJkQgOVHtsyKnDuT391UkuNPD_zUwLP1e8A9dHVjKJ2S8lINSn9ay8CckbesBHA6OEit83mGz8WZOFqrvmNrbceeoClE0byesEwWUuEg1DkhR35/s12/bullet%2520list.gif merupakan kode url dari gambar yang akan dijadikan bullet list diposting blog.

Jika ingin menggunakan gambar sendiri, silakan buat gambar yang akan dijadikan bullet list diprogam gambar, buatlah gambar dengan ukuran yang kecil, misalnya 16x16, seperti contoh gambar diatas, gambar bullet list yang saya gunakan ukurannya 12x10. Untuk cara merubah ukuran gambar, kalian bisa baca di artikel cara membuat icon untuk website menggunakan photoshop.

Agar tidak memberatkan loading blog, buatlah gambar dengan format Gif. Karena dengan menggunakan format Gif, ukuran gambar bisa dibawah 1kb, seperti contoh gambar, itu ukurannya hanya 873byte. Satu lagi kelebihan format gif, background gambar transparant. Jadi yang terlihat hanya bagian yang berwarna saja.

Setelah selesai membuat gambar, upload gambar dan ambil Url nya. Caranya bisa baca di artikel cara upload dan ambil url gambar. Dan gunakan url tersebut ke dalam kode .post ul { list-style(url gambar kamu sendiri);}. Selesai. Semoga bisa bermanfaat untuk anda.

Cara membuat author dibawah posting blog

Cara membuat author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih mudah untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar bisa lihat dibawah ini.

Untuk lebih jelasnya tentang cara membuat author dibawah posting blog. Ikuti langkah-langkah dibawah ini.

1. Login keblogger, pilh pengaturan template.
2. Klik edit HTML dan cari kode <data:post.body/> lalu masukan kode ini dibawahnya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='gambar'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0u7lnfi51yzllYAbNwxQQOpQIrvHsP_cbyBk-FY6BsaM5XIubIHfT_VnIldZGxmncsklEvRYMd4Bc_HJFBalnueMElK1kUrppHJLzMQEOjK6R2Ou7ho2zMa4EL8HqRWi6J9sSxE903yK/s361/Fandra%2520Juani.jpg'/>

<div class='Penulis'>
<span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

<div class='keterangan'>
<span>Ada Pertanyaan tentang artikel diatas, silakan masukan komentar dibawah. </span>

<div class='terimakasih'>
<span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
<div style='clear:both;'/>
</div></div></div></div></b:if>
<div style='clear: both;'/>
</div>
3. Kode <data:post.body/> di template blog, biasanya ada 3, masukan kode langkah 2, di bawah kode <data:post.body/>, ketiga2nya.
4. Selanjutnya, cari kode ]]></b:skin> lalu masukan kode ini didalamnya.
.gambar {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU0kfjyybC_RacWwQljTPeU9EzeMZooBhZSgZzzwvPIq_kfxOea83GXNDCaAj2waViawJnl-hNZihYJDFxLHMxcngmA3ko6kGhOioTQH4WFnPZll6srOSOFdSP1zL9TqWseGIohUO2VqCk/s1600/gt.jpg) repeat-x top center;
box-shadow:0px 1px 10px #aaaaaa;
border:2px solid #eeeeee;
padding:0;
margin:10px 0;
font:bold 12px Arial,Sans-Serif;height:100px;}

.gambar img{
width:70px;
height:70px;
margin:10px;
float:left;
padding:4px;
background:#ffffff;
border:1px solid #dddddd;
position: relative;
-moz-transition:all .4s ease-in-out;;
-ms-transition:all .4s ease-in-out;;
-o-transition:all .4s ease-in-out;;
-webkit-transition:all .1s ease-in-out;
transition:all .4s ease-in-out;}

.gambar img:hover{
-o-transform: scale(1) rotate(720deg);
-moz-transform: scale(1) rotate(720deg);
-webkit-transform: scale(1) rotate(720deg);}

.Penulis{
float:left;
margin:10px 0px 0px 0px;
text-shadow: 2px 2px 5px #107cde;
font-weight:bold;color:white;}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}

.Penulis a{
text-transform:uppercase;
font-family:Ravie;
font-size:12px;
text-shadow:2px 2px 5px #1780dd;
font-weight:bold;padding:0}

.keterangan{
padding:15px 0px 0px 0px;
color:white;font:italic 12px Arial, Sans-Serif;
text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

.terimakasih{
margin:13px 0px 0px 150px;
font:italic 12px Arial, Sans-Serif;color:black;
text-shadow: 2px 2px 5px #ffffff;}
5. Save template, selesai.

Keterangan kode langkah 2: 

• Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
• Penulis isi dengan nama kamu, tulisannya saya buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.

Keterangan kode langkah 4: 

• Gambar untuk memberikan background disemua tulisan. Height nya saya atur 100px bisa anda ganti sesuai dengan keinginan anda.
• .gambar img{ untuk mengatur ukuran gambar profil author dan juga tambahan kode gambar berputar.
• .gambar img:hover{ gambar akan berputar ketika disentuh mouse. Penjelasannya baca di artikel cara membuat gambar berputar diblog
• .Penulis a{ untuk mengatur font atau jenis tulisan nama author.
• .keterangan{ jika menggunakan keterangan yang panjang. Hapus kode float:left; yang ada di kode .Penulis{ agar keterangan tetap berada disamping gambar profil.

Silakan diubah sesuai dengan keinginan anda sendiri. Dan baca juga artikel tentang cara membuat tanda penulis dikotak komentar blog, agar terlihat berbeda dengan komentar dari pengunjung, sehingga orang bisa membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.

Modifikasi baca selengkapnya versi Blogger

Cara modifikasi baca selengkapnya versi blogger. Baca selengkapnya fungsinya untuk memotong artikel pada tampilan awal blog. Jadi pada halaman awal, tidak semua tulisan dari artikel kita akan terlihat, yang terlihat hanya pada bagian awalnya saja. Penggunaannya cukup mudah, kita hanya menekan tombol Insert Jump Break pada saat kita menulis artikel(dientri). Untuk lebih jelasnya, kamu bisa baca di artikel cara membuat read more diblog.

Dan kali ini kita akan merubah tulisan baca selengkapnya versi blogger dengan menambahkan kode css didalamnya. Contohnya seperti gambar dibawah ini.

Langsung saja, cara modifikasi tulisan baca selengkapnya versi blogger. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Lalu klik edit HTML dan cari kode <div class='jump-link'>. Dan ganti dengan kode dibawah ini.
<div class='jump-link' style='text-align: right;border:1px solid #dddddd;background:#eeeeee;box-shadow:0px 5px 5px #aaaaaa;margin:5px 0px 0px 450px;padding:5px;background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%);'>
3. Selanjutnya, save template. Selesai.

Keteranga kode:

• style='text-align: right; untuk mengatur tulisan baca selengkapnya disebelah kanan.
• border:1px solid #dddddd; untuk mengatur border kotak baca selengkapnya.
• background:#eeeeee; warna backgroundnya.
• box-shadow:0px 5px 5px #aaaaaa; warna bayangan kotak.
• margin:5px 0px 0px 450px; untuk mengatur lebar dan panjang kotak baca selengkapnya.
• padding:5px; untuk mengatur tulisan didalam kotak.
• background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%); untuk mengatur warna background atas dan bawah kotak baca selengkapnya.

Selesai sudah cara modifikasi baca selengkapnya versi blogger, yang dapat anda jadikan pilihan untuk mengatur tampilan blog anda. Silakan dimodifikasi sendiri sesuai dengan tampilan yang kalian inginkan. Jika ingin membuat baca selengkapnya secara auto/otomatis. Kamu bisa baca di artikel cara membuat auto reamore diblog. Semoga Bermanfaat.

Cara memasukan kode HTML, Css, Script diposting blog

Untuk memasukan kode html, css, script diposting blog sebenarnya bisa dapat ditulis secara langsung seperti kita menulis artikel seperti biasa. Tapi dibeberapa blog ada yang tidak dapat menuliskannya secara langsung, seperti menulis kode ]]></b:skin>. Pada saat diketik mungkin bisa, tapi pada saat dipublikasikan, yang tampil hanya kode ]]> ini saja.

Kejadian ini saya alami pada saat menggunakan template simple. Terus saya cari tau, kesalahannya dimana. Ternyata kesalahannya ada di pengaturan Setelan entri yang ada disebelah kanan pada saat kita menulis artikel. Jika kamu mengalami hal yang sama. Buka entri baru/atau entri lama kamu, lalu klik pengaturan Setelan Entri > Pilihan > mode tulis > pilih Tunjukan HTML apa adanya dan klik selesai. Maka kode² yang kita tulis secara langsung diposting blog akan terlihat.

Selanjutnya, agar tampilan kode html, css, script diblog kita terlihat rapi. Kita dapat memasukannya ke dalam satu kotak script. Berikut caranya.

Pembuatan kotak script

1. Pertama, copi kode dibawah ini, lalu pastekan diatas ]]></b:skin>  
.kotak {
padding:10px;
margin-top:5px;
margin-bottom:10px;
border-left: 10px solid #0b5394;
border-top:1px solid #ddd;
border-bottom:1px solid #eee;
border-right:1px solid #eee;
box-shadow:0px 3px 3px #aaaaaa;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn4oezOdBjP3on8OBhK81BHChtPIc9S3vymOZ0mONBzWZL8tXYnVvKeTBKwckBEEDCVo2zPqHLhkNPnXdTFSrbV0qpJdXJl-d9tVWc_zt-0LJY5__PgCuc5y9dhS-mOhJ0U2-6m3XBwg0M/s150/Code%2520HTML%2520css.png)
no-repeat center center;}
2. Save template. Selesai.

Cara membuat kotak script didalam posting blog

1. Buatlah entri baru atau edit artikel lama kamu. 
2. Lalu klik bagian HTML disebelah Compose.
3. Lalu ketikan kode ini.
<div class="kotak">
klik disini dan ganti dengan kode script yang ingin kalian masukan
</div>
4. Lalu kembali ke Bagian Compose dan ganti tulisan klik disini dan ganti dengan kode script yang ingin kalian masukan 
5. Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.

 Selanjutnya masuk ke tahap overflow, membuat kotak dengan scroll

1. Cara membuat Kotak scroll kebawah. Sama seperti cara diatas, lalu tambahkan kode style="overflow: auto; height: 80px; didalamnya. Contohnya seperti dibawah ini.
<div class="kotak" style="overflow: auto; height: 80px;" >
Contoh kotak dengan scroll
</div>


2. Cara membuat kotak scroll kesamping.
Contoh penggunaan kotak denga scroll kesamping. Copi kode dibawah ini dan tempatkan dibagian HTML seperti cara diatas.

<div class="kotak" style="overflow-x: scroll; overflow-y: hidden; padding: 10px; width: 540px;" >
<p style="width:450%;">Masukan kode disini.
</p></div><br />

Pada saat kita menulis artikel warna dari kotak script tidak terlihat, api pada saat kita Pratinjau atau publikasikan, barulah kotak dengan warna tersebut akan terlihat. Agar kita tidak bingung, sebaiknya pada saat menuliskan kode kotak di HTML(sebelah compose), tambahkan juga tulisan dimana tempat memasukan kodenya. Contoh:

<div class="kotak">
Tempat memasukan kode script, html, css dan lain-lain.
</div>

Dengan begitu, tulisan yang akan tampil dihalaman Compose adalah tulisan Tempat memasukan kode script, html, css dan lain-lain. Tinggal kita klik lalu ganti dengan kode yang ingin kita masukan. Selesai.

Silakan dibaca juga artikel tentang fungsi border dan penggunaannya diblog yang dapat digunakan untuk mengganti tampilan kotak script dengan tampilan lain. Semoga bermanfaat.

Cara merubah tampilan blockquotes diblog

Blockquotes biasanya digunakan untuk memperjelas tulisan, seperti keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan menggunakan blockquote kita dapat membuat tulisan yang berbeda dengan tulisan yang lainnya, agar lebih mudah untuk dibaca.

Untuk lebih jelasnya tentang cara merubah tampilan blockquotes. Ikuti langkah-langkah dibawah ini.

Cara merubah tampilan blockquotes.

---

Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan CSS. Lalu masukan kode ini kedalamnya.

.post blockquote {
background:#f9f9f9;
padding:10px;
margin:15px 0px 15px 0px;
border-left: 10px solid #0b5394;
box-shadow:0px 5px 5px #aaaaaa;
border-top:1px solid #ddd; }

Setelah itu, klik Terapkan ke blog, Selesai.

Cara menggunakan blockquotes di halaman posting blog.

---

Buatlah entri baru, dan menulis seperti biasa. Selanjutnya Blok tulisan yang akan diberi Blockquotes, lalu tekan tanda Quotes(Tanda " disebelah kiri tanda T_x) yang ada di menu bagian atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.

Cara diatas merupakan contoh sederhana dalam merubah tampilan Blocquotes. Kita dapat juga menggunakan gambar disamping kiri dan kanannya. Contohnya seperti dibawah ini.

Untuk memasukan gambar kita harus menambahkan kode gambarnya juga. Codenya seperti dibawah ini.

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGflE8W8kVwJmYLGowEcOuD5wx9WOA4UG906jdInnSAOvGk4cYLOXPhQQ-J4twyuJMmazoHN1zvOcc5JZMGiM44Ci-Xx6GzU3f7hTDbGLOZywAIPYx-hYPDNUS8Bt56F5S6IE84Kgwa2CT/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNJ9pahpf6F2Yq9ekAFSTJsztuUM24FXzUJPmcDvtzdrWoH__VjP5_rDxsbWwo_9PMaOWbOJKD1kuZwJeAenLIESTDnunPPoeCau8HrUYH-upswYJji2P0l7VCxWYCdFEtm8HkcnT8a2_z/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }

Tempatkan kode tersebut seperti cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog tentang cara merubah tampilan blockquotes yang dapat digunakan sebagai tambahan piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya seperti cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga bisa bermanfaat untuk anda.

Merubah tampilan sidebar dan posting blog

cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibuat berbeda dengan isinya. Seperti contoh gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.

Langsung saja, cara merubah tampilan bagian sidebar.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan pilih Desainer Template > Tingkat Lanjut.
3. Tambahkan CSS. lalu masukan kode dibawah ini.
.sidebar .widget h2{
text-align:center;
border:1px solid #ddd;
margin:-10px -10px 0 -10px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 5px 5px #aaaaaa;}

.sidebar .widget {
text-align:center;
border:1px solid #ddd;
padding:5px 0 5px 0;
box-shadow:0px 10px 10px #aaaaaa;}
4. Terapkan ke blog. Selesai.

Keterangan kode:

• .sidebar .widget h2{ mengatur judul pada bagian sidebar.
• .sidebar .widget { mengatur isi dari bagian sidebar.
• text-align:center; membuat tulisan ditengah.
• border garis kotak 
• margin membuat kotak judul melebihi lebar dari isi widget atau gadget.
• padding mengatur tulisan dibagian dalam tulisan.
• background:#eee; warna background.
• box-shadow:  warna bayangan dikotak

Cara Merubah tampilan posting blog.

---

1. Langkahnya sama seperti cara merubah tampilan sidebar blog. Hanya saja kode yang dimasukan adalah sebagai berikut.
h2.post-title{
border:1px solid #ddd;
margin:-12px -20px 0 -20px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 10px 5px #aaaaaa;}

.post{
border:1px solid #ddd;
padding:10px 10px 0 10px;
margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
2. Terapkan ke blog. Selesai.

Keterangan kode:

•  h2.post-title{ untuk mengatur bagian judul posting
• .post{ untuk mengatur isi dari bagian posting.
• Jika h2.post title tidak ada ganti dengan h3.post title
• Untuk kode yang lainnya, fungsinya sama seperti keterangan kode di sidebar.

Silakan berkreasi sendiri, artikel diatas hanyalah sedikit contoh cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang dapat dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.

Fungsi Border Dan Penggunaannya Di Blog

Fungsi border dan cara pengguaannya di blog. Border merupakan kode css yang digunakan untuk membuat kotak di blog atau website lainnya. Salah satu contoh penggunaan border adalah pembuatan kotak script, untuk menempatkan kode script di posting blog. Berikut contohnya.

1.  Buka entri baru atau post lama kamu.
2.  Klik HTML lalu masukan kode sricpt dibawah ini.
<div style="border: 1px #cccccc solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 80px; text-align: left;">.kode script disini.</div>
3. Lalu klik pada bagian Compose. Maka tampilannya akan seperti ini.
.kode script disini.
4. Klik .kode script disini. hapus dan ganti dengan kode script yang kalian masukan.

Keteranga kode langkah 2: 

border: 1px ketebalan kotak, #cccccc warna garis kotak, solid(bentuk kotak)
background-color:#ffffff; warna kotak
height: 80px; tinggi kotak yang akan ditampilkan diposting blog.
overflow: auto; akan ada scroll dikotak, jika sudah melebihi tinggi kotak height: 80px;

Berikut ini adalah bentuk kotak lain yang dapat digunakan, untuk menggantikan bentuk solid.

dotted

dashed

double

groove

ridge

inset

outset

Satu lagi penggunaan warna yang berbeda disetiap border, atas,kanan,bawah,kiri.

untuk membuat border seperti ini, kode yang digunakan:
 <div style="border-top:2px solid green;border-bottom:2px solid red;border-left:2px solid #1780dd;
border-right:2px solid orange; padding: 10px;background-color:#ffffff;overflow: auto; height: 200px;
text-align: left;">.kode script disini.</div>
 

Contoh-contoh diatas adalah penggunaan border didalam posting, berikut ini adalah penggunaan border di bagian sidebar blog.

.sidebar .widget h2 {
 border-top:2px solid red;border-bottom:2px solid green;border-left:2px solid orange;border-right:2px solid #1780dd; padding: 10px;background-color:#ffffff;
}

Contoh gambar:

Artikel diatas merupakan sedikit contoh penggunaan border diblog, masih banyak yang dapat diberi border diblog, yang terpenting kita mengetahui kode pada bagian mana yang akan kita beri border. Semoga bermanfaat untuk anda.

Cara Membuat Gambar Posting Membesar

Cara membuat gambar posting membesar pada saat disentuh mouse. Sedikit berbeda dengan artikel saya sebelumnya yaitu tentang cara membuat gambar posting berputar, gambar akan berputar dan juga membesar. Kali ini gambar di posting blog akan kita perbesar saja. Dengan begitu kita bisa menggunakan gambar dengan ukuran yang kecil. Ketika disentuh mouse, maka gambar akan membesar.

Jadi dapat menghemat ruang tulis kita di blog. Loading blog pun akan jauh lebih cepat pada saat dibuka. Dan juga membuat tulisan terlihat rapi. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya, Klik Edit HTML dan cari kode ]]></b:skin>.
3. Setelah itu, copy kode dibawah ini, dan pastekan diatas ]]></b:skin>
.post img{
vertical-align:bottom;max-width:90%;max-height:90%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease}
.post img:hover{
-o-transform:scale(1.4) translate(0px);
-moz-transform:scale(1.4) translate(0px);
-webkit-transform:scale(1.4) translate(0px);
-o-transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}
4. Terakhir Save Template. Selesai.

Keterangan kode langkah 3:
scale(1.4) untuk mengatur berapa besar gambar pada saat di sentuh mouse. Jika kurang besar silakan diganti dengan angka yang lebih besar. Contoh:scale(1.9)
5s waktu yang dibutuhkan, saat memperbesar gambar.

Itulah sedikit tuorial tentang cara membuat gambar di posting blog membesar pada saat disentuh mouse. Silakan dibaca juga artikel saya yang lainnya. Semoga bisa bermanfaat untuk anda.

Cara Membuat Background di Halaman Posting

Cara membuat atau memasukan gambar yang akan dijadikan background dihalaman posting blog, background bisa kita gunakan dengan gambar yang berbeda, disetiap posting. Sebelumnya saya sudah membuat artikel tentang cara membuat background berbeda dihalaman berbeda, yaitu dengan cara memasukan background berdasarkan URL halaman.

Dan kali ini background di halaman posting, langsung dari artikelnya. Jadi kita memasukan gambar ke artikel untuk dijadikan background. Untuk lebih jelasnya silakan lihat background gambar dibagian akhir artikel ini. Atau lihat halaman profil dan halaman Contact di blog ini.

Langsung saja, cara membuat background disetiap postingan blog, ikuti langkah-langkah dibawah ini.

1. Login ke blogger, lalu buatlah entri baru. Atau edit artikel yang lama.
2. Selanjutnya copy kode dibawah ini.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS3KJm1ccx9m5ZG-UASRie8oIpi2ZXnhYbetBAcd5L-dnePb55duLWKKy3b3CeEm6_3wC4Ww94KYGUjzDnJN1rr4Y4xcg12AkV1frheFq3OGw0MDOyeoBOZvrj1gNhnJEut3n_gNJXvC19/s1600/Fandra+Juani+copy.png&quot;) no-repeat right bottom;">
3. Dan pastekan di awal tulisan blog, pada bagian HTML. Contoh Gambar.

4. Setelah itu masukan kode </div> diakhirtulisan blog, masih pada bagian HTML.
5. Selanjutnya, pratinjau gambar, untuk memastikan apakah background sudah ada atau belum.
6. Jika sudah baru publikasikan(untuk artikel baru), atau Perbarui(untuk artikel lama). Selesai.

Keterangan Kode langkah 2:

•  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS3KJm1ccx9m5ZG-UASRie8oIpi2ZXnhYbetBAcd5L-dnePb55duLWKKy3b3CeEm6_3wC4Ww94KYGUjzDnJN1rr4Y4xcg12AkV1frheFq3OGw0MDOyeoBOZvrj1gNhnJEut3n_gNJXvC19/s1600/Fandra+Juani+copy.png ini url gambar yang akan dijadikan background. Silakan diganti dengan URL gambar kalian sendiri.
•  no-repeat berfungsi agar background gambar tidak berulang. untuk mengubah background gambar berulang, ganti menjadi repeat-x;
• right bottom ini posisi background, bisa diganti dengan.
left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom

Jika belum tau cara membuat dan mengambil URL gambar sendiri, kamu bisa baca di cara cara upload dan ambil url gambar. Disitu ada cara upload dan ambil url sendiri dengan mudah. Background pada artikel ini saya letakan dibagian paling bawah, yaitu dibagian center bottom. Karena warna background nya terang, jadi tulisannya tidak terlihat.

Kalian bisa gunakan background dengan warna yang gelap, agar tulisan artikel bisa terlihat.

contoh background dengan gambar.  Tulisan ini sengaja saya blog, karenga tidak terlihat.         Semoga Bermanfaat.

Cara Membuat Gambar Posting Berputar

Berikut ini adalah cara membuat gambar yang ada dipostingan setiap artikel berputar dan membesar ketika di sentuh kursor mouse. Salah satu cara agar gambar dapat diperbesar dan lebih mudah untuk dilihat ketika disentuh kursor mouse. Contoh: arahkan mouse anda ke gambar dibawah ini.

Untuk membuat gambar di setiap postingan berputar, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger. 
2. Dari halaman dasbor pilih pengaturan template. Lalu klik edit HTML dan cari kode ]]></b:skin>(gunakan Ctrl F untuk mempermudah pencarian kode). 
3. Setelah ketemu ]]></b:skin>, Copy kode dibawah ini. Lalu Pastekan di Atas ]]></b:skin>
.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
4. Dan save template. Selesai.
5. Atau bisa juga ditempatkan di Tambahkan CSS pada bagian perancang template blogger(desainer template).
6. Lalu save, selesai.

Keterangan kode diatas: 0.5s untuk mengatur lama putaran. scale 1.9 untuk mengatur besarnya gambar setelah di sentuh oleh kursor mouse, silakan diganti sesuai dengan keinginan. Untuk kode lainnya sebaiknya jangan diganti, agar kode tetap berjalan dengan benar, yaitu untuk memutar gambar yang disentuh kursor mouse. 

Itulah sedikit tutorial desain blog dan tips trik yang dapat digunakan di blog,  yang saya dapat bagikan yaitu tentang cara membuat gambar posting berputar dan membesar ketika di sentuh kursor mouse.

Jika ada yang kurang dimengerti dari langkah-langkah diatas atau ada kendala dalam pembuatannya. Silakan masukan komentar anda dibawah. Silakan dibaca juga artikel lainnya yang berkaitan dengan gambar, seperti cara mengganti judul blog dengan gambar atau cara membuat menu blog dengan gambar. Semoga bermanfaat.

Menambahkan Gambar Disamping Judul Posting

Cara menambahkan gambar disamping judul posting blog.

Gambar diatas dengan lingkaran merah adalah contoh gambar yang ditempatkan di samping kiri posting blog, gambar tersebut akan muncul di setiap posting blog yang ada. Akan saya coba jelaskan secara detail, agar bisa di mengerti. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pangaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
h3.post-title {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUajaoq_zi2pueL509A8xrB56kNBfWiOddKP79C0-yB76RepoB0VzAEUhukozxVZjnqk_cGVQwHzuH07wGMN7CbVkq-N4kHB4PrNAGRduqMPTcVqWG_g7FDojxfREW9NUuc2yyLLg46bTJ/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
3. Save template, Selesai.

Keterangan kode langkah 2:

url("gambar.jpg") adalah kode url sumber gambar yang akan digunakan.
no-repeat membuat gambar tidak berulang.
padding:10px 0px 0px 40px; mengatur posisi tulisan judul posting.

Jika gambar ingin ditempatkan disebelah kanan atau tengah judul posting blog. Tambahkan kode berikut disamping no-repeat; contoh: no-repeat top right;

•  right untuk bagian kanan.
•  center untuk bagian tengah

Untuk membuat icon dengan gambar sendiri, silakan baca di cara membuat icon website. Dan untuk cara mengambil URL dari gambar sendiri, baca di cara upload dan ambil url gambar.

Itulah sedikit cara untuk mendesain blog sendiri, dengan menambahkan gambar disamping judul posting blog, yang akan muncul disetiap posting artikel yang ada di blog. Silakan baca juga cara membuat tulisan bayangan di blog di judul, deskripsi blog bagian tab, sidebar dikiri-kanan blog, sampai judul posting, bisa kita beri tulisan bayangan. Semoga Bermanfaat.

Cara Membuat Read More Di Blog

Cara Membuat Read More Di Blog. Read more atau baca selengkapnya berguna untuk mempersingkat tampilan dari setiap posting di halaman awal blog. Berikut ini ada 2 cara, yang pertama adalah cara membuat read more manual versi blogger dan read more otomatis.

Cara membuat read more manual versi blogger

1. Login Ke blogger. Buka Salah satu Artikel kamu.
2. Pada Bagian Option klik Insert Jump Break di halaman yang ingin kamu potong. Contoh:

3. Sekarang Save artikel kamu dan coba lihat tampilan awal blog kamu. Maka akan seperti gambar dibawah ini.

4. Selesai.

Cara diatas adalah membuat read more atau baca selengkapnya secara manual. Jadi kita harus melakukan cara diatas satu persatu disetiap posting. Selanjutnya kita akan membuat read more otomatis, setiap posting akan di potong atau dipersingkat tampilannya dan diberi satu gambar dibagian kiri di halaman awal blog.  Ikuti langkah-langkah dibawah ini.

Cara membuat read more Otomatis

1. Login ke blogger. Dari halaman Dasboard Pilih pengaturan Template.
2. Selanjutnya klik edit HTML dan cari kode </head> dan Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {  
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->
3. Keterangan Kode: Edit kode2 dibawah ini agar sesuai dengan yang kalian inignkan.
summary_noimg = 430; Jumlah Huruf dengan gambar
summary_img = 340; Jumlah Huruf Tanpa gambar
img_thumb_height = 150; Tinggi gambar
img_thumb_width = 150; Lebar Gambar
4. Sekarang cari kode <data:post.body/> ada 3 kode yang sama, ganti semuanya dengan kode dibawah ini.
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Baca Selengkapnya >>></a>
</b:if>
</b:if>
<!-- Auto read more End -->
5. Tulisan Baca Selengkapnya >>> bisa diganti dengan kata yang kalian inginkan, selanjutnya preview template, jika sudah berubah baru save. Selesai.

Gambar diatas adalah contoh tampilan read more otomatis, ada gambar dibagian kiri dan dilanjutkan dengan kalimat-kalimat yang ada. Setelah menambahkan read more otomatis, maka setiap Artikel postingan kita tampilannya akan disederhanakan dari halaman awal blog. Jadi kita tidak perlu lagi menggunakan Tools Insert Jump break, seperti read more manual versi blogger. Setelah publikasi, maka tampilan artikel blog akan seperti diatas.

Silakan baca juga artikel tentang cara membuat kotak komentar facebook yang bersebelahan dengan kotak komentar blogger, dibawah posting blog. Dan juga cara mengganti warna judul sidebar widget yang berada di kanan-kiri posting, dan juga bagian bawah footer blog. Atau Cara membuat related post dibawah posting blog. Semoga Bermanfaat.