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.

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 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.

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.

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.

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.

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.

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.

Cara membuat tombol sosial media share diblog

Cara membuat sosial media share, seperti facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share dapat kita tempatkan dibawah judul posting atau dibawah posting. Dan dapat juga ditempatkan diwidget HTML/javascript di bagian sidebar blog.

Cara membuat sosial media share di blog, ikuti langkah-langkah dibawah ini.

1. Login ke blog, lalu pilih pengaturan Template.
2. Klik edit HTML dan cari kode </head> lalu masukan kode berikut ini diatasnya.
<script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
<script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
3. Save template. Selesai.

Setelah menempatkan kode script. Sekarang kita akan coba memasukan kode share di bagian2 blog, seperti di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya seperti dibawah ini.

Sosial media share dibawah judul posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <div class='post-header-line-1'/>
2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 lalu masukan kode share button ini dibawah nya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left' class='kode-share-buttons'>
<keterangan>Bagikan Artikel >>></keterangan>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p></b:if>
3. Silakan gunakan kode share yang kalian inginkan, dan untuk tulisan Bagikan Artikel >>> Kamu bisa ganti dengan kata yang kamu inginkan. Setelah itu save template, selesai.

Sosial media share dibawah posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <data:post.body/>
2. Kode <data:post.body/> ada 3,  piih yang nomor 3 lalu masukan kode share button dibawah nya.
3. Kode kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
4. Save template, selesai.

Sosial media share di widget atau sidebar

1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
2. Lalu masukan kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
3. Save gadget/widget, lalu tempatkan sesuai dengan yang kalian inginkan, selesai.

Dan yang terakhir adalah menambahkan  kode css untuk menambah tampilan dari tombol sosial media share. Caranya.

1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan kode ini kedalmnya.
.kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
keterangan {color:#000;font-weight:bold;margin-right:20px;}
2. Terapkan ke blog selesai.

Semoga Bermanfaat.