Cara merubah warna block di blog

Cara merubah warna block di blog. Block disini maksudnya, warna tulisan dan juga background pada saat kita klik tulisan lalu kita tahan dan tarik sehingga ada warna yang terlihat. Block biasanya digunakan untuk mengcopy tulisan yang ada diwebsite atau blog.

Block sederhananya berwarna biru langit di backgroundnya dan juga warna hitam ditulisannya. Disini kita akan mencoba merubah warna dari background dan warna tulisannya dengan warna yang kita inginkan. Contohnya seperti gambar dibawah ini.

Seperti contoh gambar diatas. Background tulisan saat di block berwarna hitam dan juga warna tulisannya berwarna putih. Dan kamu bisa menggantinya dengan warna yang kamu inginkan. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Lalu klik edit HTML dan cari kode ]]></b:skin> lalu masukan kode berikut ini diatasnya.
::selection {background:#000000;color:#FFFFFF;}
::-moz-selection {background:#000000;color:#FFFFFF;}
::-webkit-selection {background:#000000;color:#FFFFFF;}
3. Terakhir, Save template dan selesai.

Keterangan kode:

• background:#000000; untuk warna background
• color:#FFFFFF; untuk warna tulisan
• jika ingin mengganti background dan warna tulisan gantilah ketiga kode diatas dengan kode warna yang sama

Contoh penggantian warna block background dan warna tulisan 

::selection {background:#107cde;color:#0000000;}
::-moz-selection {background:#107cde;color:#000000;}
::-webkit-selection {background:#107cde;color:#000000;}

Silakan diganti sesuai dengan warna yang kamu inginkan, dan silakan baca juga artikel saya yang lainnya yang berkaitan dengan warna seperti cara membuat background warna transparan atau cara membuat background gradient 2 warna dan juga artikel-artikel lainnya. Semoga artikel diatas bisa bermanfaat untuk anda.

Read More

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.

Read More

Cara membatasi jumlah artikel di Label

Cara membatasi jumlah artikel di label atau kategori. Membatasi yang berarti akan ada batas jumlah artikel yang akan kita tampilkan. Seperti halnya halaman awal blog, kita dapat membatasi jumlah posting menjadi 4 atau 5 sesuai dengan yang kita inginkan. Dengan cara mengatur jumlahnya di pengaturan Tata Letak bagian Posting.

Bagaimana dengan halaman Label. Normalnya jika kita membuka halaman label, maka semua artikel dengan label yang sama akan terbuka. Tapi dengan menambahkan beberapa kode di URL dari label atau kategori kita dapat mengatur tampilan jumlahnya.

Dari link diatas, anda akan melihat artikel2 dengan label desain blog, jumlahnya ada 8, dan dibawahnya ada page navigation yang bertuliskan beranda dan posting lama. Jika posting lama diklik maka akan terbuka artikel2 lainnya yang berlabel desain blog.

Diblog ini jumlah artikel dengan label desain blog sudah mencapai 50an lebih, kalau tampilannya tidak dibatasi, maka artikel yang akan tampil saat dibuka sekitar 20an, diatur oleh blogger sendiri. Dan pasti lama membukanya. Contohnya bisa di klik di link ini Desain blog tanpa pengaturan batas jumlah tampilan. Langsung saja, Cara membatasi jumlah artikel di Label silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger, lalu buka halaman blog kamu.
2. Lalu klik salah satu label yang kamu miliki. Lalu copi URL di address bar dan pastekan ke Notepad.
3. Selanjutnya tambahkan kode ?max-results=8 dibelakangnya. Contoh:
http://fandrajuani.blogspot.com/search/label/Desain%20Blog

dan tambahkan kode ?max-results=8 jadinya seperti dibawah ini.

http://fandrajuani.blogspot.com/search/label/Desain%20Blog?max-results=8
4. Sekarang, cara memasangnya di blog. contohnya di menu laman. Silakan ke pengaturan Laman > Laman Baru > Alamat Web > lalu masukan Alamat web (URL) dan beri judul sesuai dengan nama label. Save, Selesai.

Ganti Kode 8 dari kode ?max-results=8 dengan jumlah yang diinginkan, misalkan 5 atau 4. Silakan diatur sendiri sesuai dengan keinginan. Itulah sedikti tips trik tentang Cara membatasi jumlah artikel di Label. Semoga bisa bermanfaat untuk anda.

Read More

Cara membuat link terbuka di tab baru

Kali ini saya akan coba bagikan kode HTML yang berfungsi untuk membuat semua link yang ada di blog terbuka ditab baru pada saat diklik. Dengan begitu pengunjung blog akan lebih mudah untuk membuka link² yang ada diblog kita, jadi tidak perlu lagi klik kanan open link in new tab.

Link adalah alamat url dari suatu halaman website, contohnya seperti ini fandrajuani.blogspot.com. Langsung saja kebagian inti, cara membuat link terbuka ditab baru. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik Edit HTML, lalu cari kode </head> gunakan Ctrl + F untuk memudahkan pencarian.
3. Setelah ketemu, masukan kode berikut ini diatasnya.
<base target='_blank'/>
4. Terakhir, save template. Selesai.

Mudahkan, dengan menambahkan kode <base target='_blank'/>, maka seluruh link yang ada di blog kita akan terbuka dihalaman atau tab baru ketika diklik. Selain untuk memudahkan pengunjung untuk membuka setiap link yang ada di blog, kode ini juga akan meningkatkan total tayangan laman dari blog kita. 

Atau jika ingin membuat link terbuka ditab baru, tapi tidak disemua link di blog. Kamu bisa tambahkan kode target="_blank" atau target='_blank' di kode link HTML kamu. Contoh:

<a href="http://fandrajuani.blogspot.com/p/blog-page_25.html" target="_blank" title="Profil">Profil</a>

Hasilnya: Silakan klik link ini Profil

Silakan dibaca juga artikel2 saya yang lainnya seputar seo seperti artikel tentang belajar seo untuk blogger pemula, tips dan mempercepat loading blog dan juga cara mempercepat loading blog lanjutan. Sedikit informasi seo kepanjangannya search engine optimization, fungsinya agar blog kita bisa masuk di halaman google search, jadi ketika ada yang mencari artikel yang berkaitan dengan judul artikel yang telah kita buat. 

Maka blog kita akan muncul, walaupun tidak dihalaman pertama, bisa jadi dihalaman kedua dan seterusnya. Seiring waktu berjalan, jika artikel kita sudah sering dikunjungi. Maka nantinya akan masuk kehalaman pertama dari google search, sesuai dengan kata kunci yang dimasukan orang ke dalam mesin pencari google search. Terima kasih telah berkunjung dan semoga artikel diatas bisa bermanfaat untuk anda.

Read More

Cara membuat google custom search diblog

Cara membuat google custom search di blog, yang berfungsi untuk memudahkan pengunjung untuk mencari artikel yang ada diblog. Cara menggunakannya, masukan kata kunci tulisan ke dalam kotak search, lalu enter atau klik tombol search, maka artikel2 yang berhubungan dengan artikel yang dicari akan muncul. Contoh gambar kotak search google custom.

Seperti contoh gambar diatas, ada tulisan Google^TM Pencarian Kustom didalam kotak penelusurannya. Untuk lebih jelasnya tentang cara membuat google custom search di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Selanjutnya kunjungi situs ini https://www.google.com/cse/
2. Lalu pada situs itu, Masukan alamat blog kamu. Dan atur languange nya ke bahasa indonesia(jika ingin seperti contoh gambar diatas) untuk bahasa inggris tulisannya kira-kira akan menjadi seperti ini Google^TM Custom Search. Silakan diatur sesuai dengan yang diinginkan. Lalu klik Create.

3. Setelah itu klik get code dan copi kode scriptnya.
4. Selanjutnya, kembali ke blogger. Pilih pengaturan Tata Letak > klik Tambahkan Gadget > HTML/Javascript dan pastekan kode script dari google tadi.
5. Save dan tempatkan gadget sesuai dengan yang kalian inginkan. Selesai.

Untuk merubah tampilan kotak google custom search, kunjungi lagi situs  https://www.google.com/cse/ lalu  klik search engine yang telah dibuat tadi, dan pada pilih Look and Feel. Nah disitu ada pengaturan Layout, Themes, Customize, dan Thumbnail silakan atur sesuai dengan yang dinginkan. Setelah selesai memodifikasi tampilannya, klik Save & Get Code dan pastekan lagi ke Gadget HTML/Javascript di pengaturan Tata Letak tadi. 

Jika ingin hasil pencarian dari kotak seacrh google custom terbuka dihalaman tab baru. Pada pengaturan layout di situs google custom tadi, pilih Google Hosted dan pilih New Window. Jangan lupa disave dan ambil/copi kode scriptnya, dan pastekan kembali ke gadget HTML di blogger.
Untuk pembuatan kotak penelusuran yang lebih mudah, silahkan baca di cara membuat kotak penelusuran. Selesai. Semoga Bermanfaat.

Read More

Cara menuliskan rumus di microsoft word

Kali ini saya akan coba bagikan artikel tentang Cara menuliskan rumus di microsoft office word, seperti rumus matematika dan lain-lainnya. Caranya cukup sederhana, kita hanya perlu memilih format rumus yang telah disediakan oleh microsoft word dan mengeditnya sesuai dengan yang kita inginkan. Untuk lebih jelasnya silakan ikuti langkah-langkah dibawah ini.

1. Silakan buka program microsoft word, lalu klik Insert pada Tab atas disebelah HOME.
2. Lalu klik Equation letaknya berada dipojok kanan atas. Contoh gambar:

3. Dan pilih salah satu format rumus lalu edit sesusi dengan yang kamu inginkan. Selesai.

Untuk mengedit rumus, klik rumus lalu ganti dengan kode yang diinginkan, untuk menambahkan kode baru, klik rumus yang sudah dibuat. Lalu klik tab Design yang ada dipojok atas menu bar. dan cari kode rumus baru yang ingin dimasukan. Untuk memindahkan posisinya, blok rumus yang sudah dibuat > Cut > dan pastekan ketempat yang diinginkan. Seperti contoh gambar dibawah ini, rumus diletakan ditengah-tengah tulisan.

Jika ingin menempatkan rumus tidak ditengah2 tulisan kalimat seperti gambar diatas atau diletakan dibaris baru, klik rumus yang sudah dibuat, lalu klik HOME pada bagian atas kiri menu word dan klik paragraph pada bagian align, lalu pilih posisi yang diinginkan, selesai. Semoga Bermanfaat.

Read More

Cara menghilangkan widget dihomepage

Cara menghilangkan widget dihomepage atau halaman awal blog. Widget akan dihilangkan atau disembunyikan pada halaman homepage blog saja, widget tersebut hanya akan muncul di halaman posting blog. 

Dengan begitu kita dapat menghemat ruang dari halaman homepage blog. Untuk lebih jelasnya tentang cara menghilangkan widget tertentu dihalaman awal blog, silakan ikuti langkah-langkah dibawah ini.

Pertama yang harus dilakukan adalah menentukan widget mana yang akan kita sembunyikan dan Mengambil kode ID nya.

Contoh: Widget dengan judul Random Post. Maka kita cari kode ID dari widget yang berjudul Random post. Caranya: Login ke blogger, pilih pengaturan template > klik edit HTML > Lalu cari kode Random Post(Gunakan Ctrl F untuk memudahkan pencarian). Seperti contoh gambar dibawah kode id dari widget Random Posts adalah HTML4

Setelah menemukan kode ID dari widget yang akan disembunyikan. Sekarang cari kode </head> lalu masukan kode berikut ini diatas </head>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
#HTML4{display:none;}
 </b:if> </b:if> </style>

Terakhir Save template, selesai.

Kode #HTML4 adalah kode ID dari widget yang akan disembunyikan dan kode display:none berfungsi untuk menyembunyikan widgetnya. Widget tersebut akan hilang dari halaman awal blog, dan akan muncul pada halaman posting blog.

Silakan mencoba dengan widget2 yang lainnya. Yang terpenting adalah kita harus mencari terlebih dahulu kode id dari widget yang akan disembunyikan dari halaman awal blog, lalu meletakannya diatas </head> dengan format kode seperti diatas. Selesai.

Read More

Cara membuat tabel diblog

Cara membuat tabel diblog. Akan kita mulai dari Tabel sederhana terlebih dahulu.
Silakan buka entri baru, lalu klik pada bagian HTML disebelah Compose.
Selanjutnya ketikan kode berikut ini.

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

Setelah itu klik bagian Compose, Maka hasilnya akan menjadi seperti ini.

1

2

3

Selanjutnya membuat tabel 2 baris

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Hasilnya

1	2	3
4	5	6

Dari contoh diatas, kita dapat melihat bahwa kode tr digunakan untuk membuat tabel ke bawah, sedangkan kode td digunakan untuk tabel kesamping. Jadi jika ingin menambahkan jumlah tabel, silakan tambahkan kode tr dan kode td sesuai dengan keinginan.

Selanjutnya membuat Tabel dengan warna background, lebar tabel serta warna tulisan dengan cara menambahkan kode bgcolor="red" border="1" style="color: white; width: 400px;" pada bagian <table>. Contoh:

<table bgcolor="red" border="1" style="color:white;width:400px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Hasilnya

1	2	3
4	5	6

Sekarang kita coba menggunakan tabel dengan judul diatasnya, dan juga mengatur lebar disetiap judul tabel. Tambahkan kode <th>Judul</th> Contoh:

<table bgcolor="red" border="1" style="color: white;">
<tbody>
<tr>
<th width="40">No</th>
<th width="400">Nama</th>
<th width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>

Hasilnya

No	Nama	Kelas
1	Fandra Juani	3
2	Juani Fandra	6

Bisa juga dengan menggunakan background yang berbeda. Contoh:

<table bgcolor="white" border="1" style="color: black;">
<tr>
<th bgcolor="blue" width="40">No</th>
<th bgcolor="green" width="400">Nama</th>
<th bgcolor="red" width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>

Hasilnya

No	Nama	Kelas
1	Fandra Juani	3
2	Juani Fandra	6

Untuk mengatur posisi tulisan kamu bisa gunakan Tool Alignment yang ada dipilihan tool pada saat kita menulis di entri. Sebenarnya masih banyak kode dengan fungsi lain yang dapat digunakan untuk membuat tabel diblog, insyaallah nanti akan saya coba buat diartikel lainnya. Silakan dicoba sendiri dan Semoga bisa bermanfaat untuk anda.

Read More

Cara merubah tampilan dan posisi tanggal di blog

Artikel kali ini saya akan coba bagikan cara merubah tampilan tanggal diblog dengan menambahkan kode css, serta merubah posisi tanggal ke bagian bawah judul posting atau bisa juga kita pindahkan ke sebelah kanan judul posting.

Seperti contoh gambar diatas, tampilan tanggal sudah saya modifikasi jadi berwarna putih dengan background warna biru, serta posisinya yang berada disebelah kanan judul posting blog. Cara membuatnya, ikuti langkah² dibawah ini.

1. Login ke blogger, ke pengaturan tata letak > desainer template > tingkat lanjut > tambahkan Css. Lalu masukan kode ini kedalamnya.
h2.date-header{
margin:3px 0px 0px 0px;
float: right;
z-index: 99;
background-image: -moz-linear-gradient(center top , #107cde 40%, #004d94 100%);
box-shadow:0px 10px 10px #aaaaaa;}
2. Terapkan ke blog, selesai.

Keterangan kode:

• margin: untuk mengatur spasi atas(3px) kanan(0px) bawah(0px) kiri(0px) tanggal.
• float: right; menempatkan tanggal diposisi kanan sebelah judul posting.
• z-index: 99; gunanya agar tanggal terlihat.
• background-image: fungsinya untuk mengatur warna background tanggal
• box-shadow: warna bayangan diluar kotak tanggal.

---

Selanjutnya adalah menempatkan tanggal dibawah judul posting dengan posisi sebelah kanan, contohnya seperti gambar dibawah ini.

---

Cara membuatnya, ikuti langkah-langkah dibawah ini:

1. Login ke blogger, kepengaturan template. Klik edit HTML dan cari kode dibawah ini.
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
2. Kamu akan menemukan 3 kode yang sama dengan kode diatas, Cut atau potong kode yang pertama. Lalu pastekan di Notepad.
3. Selanjutnya cari kode <div class='post-header-line-1'/>. Setelah ketemu, pastekan kode dari langkah 1 tadi ke bawah <div class='post-header-line-1'/>.
4. Save template Selesai.

Catatan: ada 2 kode <div class='post-header-line-1'/> yang ada ditemplate, pilih yang kedua. Lalu pastekan kode dari langkah 1 kebawahnya. Jangan lupa juga untuk mengatur kode css dari tampilan tanggalnya, seperti yang tertera di Keterangan kode. Khusus untuk kode float:right; jika kamu ingin menempatkan tanggal disebelah kiri dibawah judul posting. ganti kode float:right; dengan kode float:left;.

Semoga Bermanfaat.

Read More