Cara merubah tampilan kotak komentar blog

Cara merubah tampilan kotak komentar blog, agar terlihat lebih rapi. Dengan cara menambahkan background, box-shawod, warna, serta ukuran dari tulisan yang ada didalam komentar blog. Contohnya seperti gambar dibawah ini.

Untuk lebih jelasnya tentang cara merubah tampilan kotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pili pengaturan Tata Letak > Desainer Templates.
2. Lalu pilih Tingkat Lanjut > Tambahkan Css
3. Dan masukan kode ini kedalamnya.
.comments h4 {Color:#0b5394;margin:0;}
.comments {
border:1px solid #cccccc;
margin:0px 10px 20px 10px;
padding:10px;
box-shadow:0px 1px 10px #aaaaaa;
background:#ffffff;
background-image: -moz-linear-gradient(center top , #fff 0%, #f3f3f3 100%);}

.comments .comments-content {
background:transparent;
margin:-20px 0px -50px 0px;
font-size:13px;
text-align:left;}

.comments .comments-content .user a{
color:#1780dd;
font-size:14px;
font-weight:700;}

.comments .comment-replies .comment-thread{
border:1px solid #dddddd;
box-shadow:1px 1px 1px #bbbbbb;
background-image: -moz-linear-gradient(center top , #fff 0%, #e6e6e6 100%);
margin:0px 0px 0px 12px;}

.comments .continue{border-top:none;}  
.comments .comments-content .comment {margin:0px 0px -10px 0px;}
.comments .comments-content .datetime{
font-size:11px;
margin:3px 0px 0px 0px;
float:right;font-weight:700;}
4. Save template, Selesai.

Keterangan Kode:

• .comments h4 { untuk mengatur warna tulisan dari jumlah komentar. 
• .comments { untuk mengatur warna background dari seluruh kotak komentar blog. 
• .comments .comments-content { untuk mengatur warna, ukuran tulisan dari isi komentar, dan jarak tinggi komentar blog. 
• .comments .comments-content .user a{  untuk mengatur warna dari seluruh nama yang ada dikotak komentar. 
• .comments .comment-replies .comment-thread{ untuk mengatur warna background dari komentar balasan. 
• .comments .continue{ untuk mengatur tombol Balas. 
• .comments .comments-content .comment { untuk mengatur jarak antar komentar balasan. 
• .comments .comments-content .datetime{ untuk mengatur warna dan posisi tanggal.

Silakan baca juga artikel yang terkait dengan desain kotak komentar blog. Seperti cara membuat tanda penulis dikotak komentar blog. Dan juga cara menggantu tulisan poskan komentar dengan gambar. Dan juga artikel-artikel lainnya. Semoga Bermanfaat.

Read More

Cara membuat tulisan 2 baris dalam satu kotak excel

Cara membuat tulisan 2 baris dalam satu kotak excel. Pada dasarnya, saat kita menulis diexcel dengan kata yang panjang, maka tulisan tersebut akan memerlukan banyak kotak colomn kesamping. Agar terlihat rapi, kita dapat membagi tulisan tersebut menjadi 2 row, row atas dan row bawah. Tapi jika membagi kata menjadi 2 row, kita memerlukan waktu yang lama, dan agak sedikit susah membaginya. 

Berikut ini adalah cara mudah membuat tulisan yang panjang menjadi 2baris hanya dalam satu kotak excel. Contohnya seperti dibawah ini.

Untuk lebih jelasnya tentang cara membuat 2baris dalam satu kotak excel. Ikuti langkah-langkah dibawah ini.

1. Pertama buka program excel kamu. Lalu tulis seperti contoh gambar dibawah ini.

2. Selanjutnya, klik tanda Wrap Text pada menu atas excel. Contoh gambar.

3. Setelah itu atur lebarnya sesuai dengan yang kalian inginkan, selesai.

Silakan dibaca juga artikel lainnya tentang excel, seperti cara  cara print banyak kotak diexcel, atau cara menuliskan mata uang rupiah dimicrosoft excel. Dan juga artikel-artikel lainnya. Semoga bermanfaat.

Read More

Cara mengganti poskan komentar dengan gambar

Cara mengganti tulisan poskan komentar yang berada di atas kotak komentar dengan gambar. Tulisan poskan komentar ini akan muncul jika artikel kita belum ada komentar. Dan akan hilang dengan sendirinya jika artikel sudah ada yang berkomentar.

Gambar diatas adalah contoh tulisan poskan komentar yang berada di atas kotak komentar blog. Untuk menggantinya dengan gambar. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, ke pengaturan Template.
2. Lalu klik edit HTML dan cari kode <data:postCommentMsg/>
3. Setelah itu ganti tulisan tersebut dengan format kode dibawah ini.
<img src="URL gambar kalian" />
4. Kode <data:postCommentMsg/> ada 4 di template blog Ganti semuanya dengan kode gambar seperti diatas.
5. Save template, selesai.

Saya beri contoh gambar dan kodenya.

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgd6EwbvrCPaKDKyGiyZgxJTLVK_qLdxpTfjMqD714nRIk6B1PmGN1AGGi3RHRkFG9B0p_CjVZDonJMLeyN33ZPD2YCNGRWaXzPTSq2rO6so0zpCKOxgwZlxrdITeKnZDC0JQ8grnXlm-i/s1600/KOMENTAR+1.gif" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGLoTKTJMiyKaddW1Q9-UeCMoOVF6D6I0wsnoREuA3FyIps4B5ftIWJMNBuJ_jmnf7Eu1weB6sCH_Ztfjr5wZNXK3NzXlYHJYl3NWccNatjGCfZjgDTtn9OQmPx6BufhTWu_c9HB8vZqe/s1600/Poskan+Komentar+02.gif" />

Silakan gunakan kode dan gambar diatas untuk percobaan diblog anda. Selanjutnya anda bisa gunakan gambar sendiri yang kalian inginkan. Untuk cara upload dan ambil url gambar, upload saja gambarnnya ke blogger, lalu klik kanan dan ambil urlnya, untuk lebih jelasnya bisa kalian baca di cara upload dan ambil url gambar.

Setelah mengganti tulisan poskan komentar dengan gambar, kita juga dapat mengatur posisinya, dikanan, dikiri atau ke posisi lainnya yang sesuai dengan keinginan kita. Caranya tempatkan kode berikut diatas ]]></b:skin>

.comments h4 img{
float:right;
margin:-42px  -35px 0px 0px;
}

Ketarangan kode:

• float:right; mengatur posisi gambar berada dikanan. Untuk mengubah menjadi sebelah kiri, hapus saja kode tersebut.
• margin:-42px  -35px 0px 0px; untuk mngatur posisi kanan, atas, bawah, kiri gambar.

Terakhir save template, selesai. Silakan dibaca juga artikel laiinya yang berkaitan dengan kotak komentar seperti cara membuat tanda penulis di blog pada bagian kotak komentar. Atau cara menghilangkan kotak komentar pada halaman tertentu diblog. Dan juga artikel-artikel lainnya. Semoga bisa bermanfaat untuk anda.

Read More

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/AVvXsEgbMzPDK3JTED1UOsyyEW8gE23Sr64hG8vA1m4Ey0Nj9iQu9L4CwXJbQXbRMvHPz0XJVfcIkUMv6ZtQ5ARoBC8IDQc4sd2vbSzkLNxXdPde9R2DtXGlUaDZf9xmvqJ3K3l8ptQd9Bj0RK-z/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.

Read More

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/AVvXsEg3IwbtNVFsaulJZ_sB-Naw76kpXaOSLl82Ea-mMUa55tfMNDHwEgxiXQtu8Zv0bOXjU-_2iQkruyv2kobMPFlzqmoHMKyr8q9seNEG4OfOsz5aAZU52rVETp8LlfEWZrGvORnvgPbOTfwV/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/AVvXsEh-VHguOfQ1KOwFqpqyTbuCSjRH3waNdlCLuQijtx_21V4TVeCRT3W9ZKsG6jjDCk7vXH0boq1ZyUH8nOz-eun2JxRkMrGKmC1DPWd6cDmt0DXoRIeLj8rF85WuLfEMXDUl4Yz0MLx3xgv1/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.

Read More

Cara mengganti background blog dengan gambar

Cara mengganti background blog dengan gambar, secara keseluruhan. Background akan terlihat disemua bagian yang ada diblog. Contoh background menggunakan gambar bisa dilihat di artikel background berbeda dihalaman berbeda. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.
2. Dan pilih Desainer template > Tingkat Lanjut > Tambahkan CSS dan masukan kode ini didalamnya.
body {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}
3. Terapkan ke blog selesai.

Keterangan kode:

• background: url( adalah url dari backgorund gambar yang akan digunakan.
• repeat-x gambar mengulang kesamping. bisa diganti dengan repeat-y untuk gambar mengulang ke bawah atau no-repeat gambar tidak berulang.
• fixed gambar akan tetap pada posisinya, walaupun halaman blog di scroll ke bawah.
• top center posisi gambar. Top bisa diganti dengan bottom dan center bisa diganti dengan right atau left.
• jika menggunakan backgorund gambar keseluruh bagian blog. gunakanlah ukuran gambar yang besar, contoh: 1400 x 900

Pada dasarnya kode body digunakan untuk mengatur seluruh background blog. Tapi jika tidak bisa jalan ditemplate kamu, coba ganti kode body dengan kode content. Contoh:

.content {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}

Sekarang coba lihat tampilan blog kamu. Jika background gambar tidak sepenuhnya terlihat. Atau background tertutup oleh background warna. Itu dikarenakan template yang kamu gunakan, sudah menggunakan background warna.

Contoh: Misalkan kamu pasang background gambar, tapi pada bagian headernya tertutup background warna putih, agar background warna putih itu hilang dan terganti dengan gambar. Gunakan kode #Header Atur backgroundnya menjadi transparent;. Seperti ini > #Header { background:transparent; }

Tempatkan kode #Header { background:transparent; } seperti cara dari langkah 1-3 diatas. Dibawah ini adalah kode-kode dari bagian blog yang saya tau, mulai dari header, tab, sidebar, sampai footer dan juga kode2 lainnya, yang bisa kamu gunakan untuk mengatur background dari halaman blog kamu. Berikut kodenya: 

---

 Untuk bagian header

---

#Header { background:transparent; }
.header h1  { background:transparent; }
.body-fauxcolumn-outer .cap-top { background:transparent; }

---

Untuk bagian posting

---

.post-body { background:transparent; } hanya pada bagian tulisan posting.
.post { background:transparent; } bagian posting keseluruhan.
.post-outer { background:transparent; }  bagian posting sampai keluar
.main-inner { background:transparent; } bagian posting dan sidebar
#blog-pager { background:transparent; } pada bagian tulisan beranda, posting lama, posting lebih baru

---

Untuk bagian tab

---

.tabs-outer .PageList { background:transparent; }

---

Untuk bagian sidebar

---

.sidebar .widget { background:transparent; } hanya pada bagian widgetnya saja.
.sidebar { background:transparent; } seluruh bagian sidebar

---

Bagian footer.

---

.footer-fauxborder-left { background:transparent; }
.footer-outer { background:transparent; }

---

kode-kode lainnya, jika diperlukan.

---

.content-outer { background:transparent; } bagian halaman blog. dari header sampai ke footer.

.content-inner { background:transparent; } bagian halaman blog. dari header sampai ke footer. Untuk mengatur warna tulisan juga bisa.

.body-fauxcolumn-outer .fauxcolumn-inner { background:transparent; }

.body-fauxcolumn-outer .cap-top .cap-left { background:transparent; }

Jadi jika ingin menggunakan background gambar diseluruh bagian blog. Cukup menggunakan satu gambar background pada bagian body/content saja, dan yang lainnya di buat menjadi transparent;. Silakan berkreasi sendiri agar sesuai dengan yang kalian inginkan. Semoga bisa bermanfaat untuk anda.

Read More

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.

Read More