Cara membuat tanda Copyright di blogger

Berikut ini saya akan membagikan cara membuat tanda copyright di blogger, seperti ini © atau lengkapnya bisa anda lihat di bagian paling bawah dari blog ini.
Cara yang pertama, memasukan kode © di widget HTML/Javascript.

1. Ke pengaturan tata letak, lalu klik add widget dan pilih HTML/Javascript
2. Untuk mengeluarkan kode © coba tekan Alt dikeyboard dan tekan angka 0169(number pad yang ada disebelah kanan keyboard), pastikan angka 0169 semuanya ditekan begitu juga dengan Alt.
3. Setelah itu lepas semuanya, maka kode © akan keluar.
4. Contoh penggunaannya di blog saya, kodenya seperti ini.
<style>#copyrights ul{float:left}#copyrights ul li{float:left;list-style:none;padding:5px 5px 0 0;margin:0}#copyrights ul li a{font-weight:bold;color:#000}#tran ul{float:right}#tran ul li{list-style:none;padding:5px 0 0 0}#tran ul li a{color:#000}</style>

<div id='copyrights'>
<ul>
<li>Copyright © 2014.</li>
<li><a href='http://fandrajuani.blogspot.com/' title='Fandra Juani'>Fandra Juani</a></li>
<li> | Template Simple | Diberdayakan oleh </li>
<li><a href='http://www.blogger.com/' title='Blogger'>Blogger</a> </li></ul>
</div>
<div id="tran">
<ul>
<li><a href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en');return false">Translate to English</a></li>
</ul></div>
5. Selesai.

Untuk memasukan kode © di halaman posting seperti yang sedang anda baca ini. Caranya sama seperti diatas, tekan Alt+0169 atau bisa juga mengetikan kode &copy; dihalaman HTML disebelah Compose.
Contoh: &copy; 2011
maka hasilnya akan seperti ini.
© 2011
Bisa juga dengan menggunakan kode &#169; dan &#xA9; hasilnya sama akana mengeluarkan kode ©.
Itulah sedikit cara tentang membuat tanda ©Copyright di blogger. Semoga bisa bermanfaat untuk anda

Read More

Cara mengisi artikel di menu bar

Cara mengisi artikel di menu bar blog dengan satu atau banyak artikel di dalamnya. Jadi ada 2 cara disini yang akan saya jelaskan, yang pertama mengisi menu bar dengan satu halaman post artikel dan yang kedua mengisi menu bar dengan banyak artikel. Contoh menu bar yang di isi dengan banyak artikel, bisa di lihat di menu Desain blog yang ada di bagian atas blog ini.

Cara yang pertama, mengisi menu bar blog dengan satu halaman artikel.

1. Silakan buka salah satu artikel kamu. Lalu copi alamat URL yang ada di address bar, letaknya dibagian atas. Contoh: URL dari salah satu artikel di blog saya.
http://fandrajuani.blogspot.com/2014/01/cara-desain-blog-sendiri.html
2. Dan pastekan URL di menu bar kamu. Ada 2 cara.
Memasukan URL di menu Laman Blog. Caranya:

• Ke pengaturan Laman > pilih Laman Baru > Alamat Web
• Lalu masukan URL tadi ke bagian Alamat web(URL), selanjutnya isi judul Laman. Contohnya:

• Dan klik Simpan.
Memasukan URL di menu HTML

• Silakan buka menu HTML kamu, lalu isi dengan url dari halaman artikel. Contohnya seperti ini bentuk dari menu HTML:
<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/2014/01/cara-desain-blog-sendiri.html">Desain Blog</a></li>
</ul>
</div>
3. Selesai.

Cara yang kedua, memasukan banyak artikel di menu bar

1. Buatlah label dan pasang widget label di blog kamu. Caranya baca di artikel Cara membuat label atau kategori di blog.
2. Jika sudah, silakan buka halaman awal blog kamu. Dan klik Kanan >Copy link Location pada Nama label yang akan di masukan ke menu bar. Contoh:

3. Dan Pastekan di Notepad. Contoh URL dengan nama Label Desain Blog.
http://fandrajuani.blogspot.com/search/label/Desain%20Blog
4. Sekarang, silakan masukan URL label ke menu kamu, contoh penempatan URL, lihat kembali pada cara pertama, pada langkah 2.
5. Selesai.

Sebenarnya cara ini bukan berarti kita menulis artikel di menu bar, tapi hanya mengisi menu bar dengan URL dari artikel2 yang sudah kita buat. Cara menulis artikelnya sama saja seperti kita membuat entri baru. Seperti cara yang pertama, menu bar di isi dengan URL dari halaman blog. Dan cara yang kedua, menu bar di isi dengan URL dari Label.

Itulah sedikit tips trik cara mengisi artikel di menu bar. Silakan dibaca juga artikel tentang Cara membatasi jumlah artikel di label dan juga artikel2 lainnya. Semoga artikel diatas bisa bermanfaat untuk anda.

Read More

Cara membuat label atau kategori di blog

Cara membuat label atau kategori di blog. Label atau kategori maksudnya adalah pengelompokan artikel dalam satu nama yang sama atau artikel dengan pokok pembahasan yang berkaitan kita kelompokan menjadi satu. Label atau kategori ini berfungsi untuk memudahkan pengunjung untuk melihat artikel-artikel dengan pembahasan yang sama.

Contohnya: Kita punya 3 artikel dengan judul seperti dibawah ini.

1. Cara membuat motor roda dua
2. Cara memperbaiki motor yang rusak
3. Cara merawat motor agar tetap awet

Dari ketiga judul artikel di atas, semuanya berhubungan dengan motor. Maka buatlah LABEL  dengan nama Motor. Jadi ketika orang klik label dengan nama MOTOR. Ketiga artikel diatas akan keluar. Untuk melihat contoh label, bisa di klik dibagian menu desain blog atau tips trik yang ada di blog ini, letaknya di bagian atas.

Itulah sedikit penjelasan apa yang dimaksud dengan label atau kategori. Sekarang ke bagian cara membuat label atau kategori di blog.

1. Silakan edit 3 artikel lama kamu. Lalu klik Label pada bagian Setelan Entri. Contohnya:

2. Selanjutnya isi dengan nama label yang sama pada ke tiga artikel kamu. Contoh: gambar diatas itu di isi dengan nama label Tips dan Trik. Lalu klik Selesai.
3. Dan klik perbarui.
4. Setelah itu ke pengaturan tata letak > klik tambahkan gadget > Pilih Label. Seperti gambar dibawah ini. Dan simpan.

5. Masih pada bagian tata letak, klik simpan setelan. Dan silakan buka halaman awal blog kamu. Maka akan ada widget atau gadget di blog kamu . Contohnya:

6. Sekarang coba klik label yang sudah kamu buat tadi, maka ketiga artikel yang sudah  kamu beri nama label yang sama tadi, akan keluar. Selesai.

Lakukan cara yang sama, jika ingin membuat label dengan nama yang berbeda. Dalam satu artikel kita juga bisa memberinya dengan nama label yang berbeda. Misalkan Satu artikel kita beri 2 nama label, contoh: pertama label dengan nama tips trik dan yang kedua desain blog. Caranya cukup dengan menambahkan tanda , untuk memisahkan label yang pertama dan yang kedua. Contohnya:

Jika sudah memberikan satu artikel dengan 2 nama label, contohnya: tips trik dan desain blog. Maka setiap kita klik label tips trik maka artikel tadi akan keluar. Begitu juga jika kita klik label desain blog, maka artikel itu pun akan keluar.

Tidak hanya dua, tiga atau empat sekalipun kita bisa berikan pada satu artikel. Saran saya, satu artikel cukuplah diberi nama label paling banyak 3 nama saja. Tapi itu terserah anda, jika ingin memberikan banyak nama label dalam satu artikel, silakan.

Silakan dibaca juga artikel saya yang lainnya seperti Cara membatasi jumlah artikel di label atau artikel tentang Cara membuat dan mengisi menu blog dan juga artikel lainnya. Semoga artikel di atas bisa bermanfaat untuk anda.

Read More

Title otomatis pada link label blogger

Cara menambahkan title di setiap link label yang ada di blogger. Title merupakan attribute yang digunakan untuk memberikan keterangan dari sebuah link. Untuk melihat link yang ada titlenya, coba arahkan mouse ke link label, maka akan ada tulisan dengan background putih yang keluar.

Gambar disamping adalah contoh link label yang telah diberi title. Tulisan Tips dan Trik yang berwarna hitam dengan background putih itu akan keluar ketika link label di sentuh oleh mouse. Untuk melihat contoh lainnya, coba anda arahkan mouse anda ke label/kategori yang ada di blog ini.

Sebelumnya saya juga sudah membuat artikel title link disetiap judul posting blog. Fungsinya sama agar link diposting blog ada titlenya, bedanya hanya pada kode yang digunakan.

Untuk lebih jelasnya cara membuat title otomatis pada link label blogger. Silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik edit html, lalu cari kode expr:href='data:label.url'
3. Setelah ketemu tambahkan kode attribute title tag seperti ini disampingnya expr:title='data:label.name'.
Contoh penambahan kode attrbute title di widget label asli blogger

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
Contoh penambahan attribute title yang lain, seperti di Breadcrumb.
<a expr:href='data:label.url' expr:title='data:label.name'>
<data:label.name/></a>
4. kode expr:href='data:label.url' ini biasanya ada 2 atau mungkin lebih yang ada ditemplate blogger, silakan dicari semuanya dan tambahkan kode expr:title='data:label.name' disampingnya. Setelah itu, save template. Selesai.

Cara diatas merupakan contoh pemberian title tag di dalam template. Adapun contoh lain pemberian kode attribute title tag pada link label pada kode HTML yaitu dengan menambahkan kode title="Title yang akan diberi". Contohnya:

<a href="http://fandrajuani.blogspot.com/search/label/Header" title="Desain Header">

Fungsi menambahkan title di link label blog ini sebenarnya untuk menambah optimasi seo dari blog, agar google lebih mudah untuk membaca semua link yang ada di blog kita. Tidak di gunakan juga tidak apa-apa, karena mungkin efeknya juga tidak terlalu besar untuk blog kita.

Tapi tidak ada salahnya mencoba, kebanyakan blog atau website yang mempunyai pagerank besar juga memberikan attribute title di setiap link yang ada diblog atau website mereka. Itulah sedikit tips trik seo tentang menambahkan title otomatis pada link label blogger. Semoga bisa bermanfaat untuk anda.

Read More

Title di setiap judul posting blog

Tips trik seo kali ini saya akan coba bagikan tentang cara menambahkan title atau keterangan di setiap judul posting blog secara otomatis, ketika judul posting disentuh oleh mouse. Contohnya seperti gambar dibawah ini.

Seperti contoh gambar diatas, tulisan dengan warna background putih itu adalah title atau keterangan yang akan muncul ketika judul disentuh mouse. Cara membuatnya, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pilih pengaturan template.
2. Klik edit HTML dan cari kode <a expr:href='data:post.link'><data:post.title/></a>
3. Setelah ketemu, tambahkan kode expr:title='data:post.title' kedalamnya. Contoh:
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
4. Kode ini <a expr:href='data:post.link'><data:post.title/></a> biasanya ada 2 diblog, lakukan hal yang sama seperti langkah 3.

Setelah melakukan cara diatas, jangan di save template dulu, karena masih ada kode yang harus diedit. Sengaja saya pisah biar lebih mudah mengikutinya.

1. Cari kode <a expr:href='data:post.url'><data:post.title/></a>
2. Setelah itu tambahkan kode expr:title='data:post.title' kedalamnya. Contoh:
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
3. Kode ini <a expr:href='data:post.link'><data:post.title/></a> biasanya ada 3 diblog, lakukan hal yang sama seperti langkah 2.
4. Nah, baru save template. Selesai.

Setelah melakukan cara diatas, silakan lihat blog kamu. Jika  melakukannya dengan benar, insyaallah title disetiap judul posting blog akan keluar ketika disentuh mouse. Sebenarnya saya juga tidak terlalu mengerti tentang seo, tapi yang saya tau disetiap website² besar dengan pagerank tinggi seperti facebook, menggunakan title atau tulisan keterangan di setiap URL dari halaman websitenya.

Tapi banyak juga website yang tidak menggunakan title di url nya. Seperti google, yahoo, twitter, ya mungkin mereka tidak membutuhkan lagi cara seperti diatas, tanpa menambahkan titlle di setiap url nya pun, masih juga rame websitenya.

Bagi saya yang masih awam tentang seo website atau blog. Tidak ada salahnya menggunakan title disetiap judul posting, namanya juga masih belajar. Seperti keterangan di website check seo http://chkme.com/ mengatakan (translate:Meskipun tidak penting dan tidak digunakan untuk menghitung skor akhir, kita menganggap bahwa untuk link judul dapat benar-benar berguna. Mencoba memperbaiki kesalahan, jika diperlukan).

Demikianlah sedikit tips trik seo dari saya tentang title di setiap judul posting blog. Dan silakan dibaca juga artikel tentang title otomatis pada link label blogger. Fungsinya sama agar link ada titlenya, tapi pada bagian label blogger. 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 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 membuat icon sendiri dengan mudah

Tutorial kali ini saya akan coba bagikan tips dan trik tentang cara membuat icon sendiri dengan mudah, menggunakan program microsoft office PowerPoint. Icon atau lambang gambar biasanya digunakan untuk logo website atau blog, ada juga untuk icon disebelah tulisan menu, bahkan digunakan juga sebagai menu.

Contohnya seperti gambar dibawah ini:

Gambar diatas adalah hasil dari pembuatan icon di PowerPoint, yang disave dalam format PNG, agar background icon tetap transparant. Untuk lebih jelasnya tentang cara pembuatan icon di microsoft PowerPoint. Ikuti langkah - langkah dibawah ini.

1. Silakan buka program PowerPoint. Lalu pilih bagian Insert.
2. Selanjutnya pilih tulisan Shape dan pilih bentuk gambar yang kita inginkan.
3. Setelah gambar nya sudah ada, klik gambar tersebut dan pilih Format dibagian atas bar powerpoint.
4. Lalu edit gambar itu sesuai dengan yang kita inginkan.
5. Untuk menyimpan gambar, klik Kanan gambar tersebut dan pilih Save as picture lalu save dalam format PNG. Selesai.

Contoh gambar icon yang saya buat. Icon pertama menggunakan satu gambar awan dan Icon kedua menggunakan 2 gambar gambar awan dan matahari.

Untuk membuat icon dengan 2 gambar, silakan buat 2 gambar di powerpoint, lalu blok ke 2 gambar setelah itu baru Save As Picture. Selesai. Jika kamu ingin menggunakan icon dengan ukuran yang sama, kamu bisa gunakan photoshop, caranya bisa dilihat di artikel cara membuat icon untuk website.

Untuk mencoba hasil gambar yang telah kamu buat diblog. Kamu bisa baca artikel mengganti tulisan beranda posting lama baru yang letaknya dibawah posting dengan gambar. Tapi sebelumnya upload terlebih dahulu gambar kamu ke blog dan ambil urlnya, caranya baca di cara upload dan ambil url gambar.

Itulah sedikit tips dan trik dari saya dalam membuat icon sendiri dengan mudah menggunakan program microsoft office PowerPoint yang dapat digunakan untuk mendesain icon blog atau website anda sendiri. Semoga bisa bermanfaat untuk anda.

Read More

Cara mempercepat loading blog lanjutan

Untuk mempercepat loading blog pertama kita harus test kecepatan blog kita. Dengan cara mengunjungi situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa skor kecepatan blog yang kalian dapatkan dari situs tersebut. Selanjutnya, ikuti langkah² dibawah ini.

Menambahkan attribute width dan height.

Untuk bagian posting, jika mengatur gambar ke small, medium, large atau x- large. Maka otomatis gambar itu sudah ada attribute width dan height. Jika Original attribute width dan height belum ada. Begitu juga dengan gambar yang kita masukan pada bagian blog lainnya. Seperti header, sidebar, footer, widget dan lain-lainnya. Contoh penambahan kode attribute width dan height:

1. Untuk kode HTML
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidOSJ2jdvAvdTqLeXDEwJn3hdq6M7amf6lyYnwoTNkRQ6Q0aXTBacs5mEl8zDZcO7IMfGSpzi6CbvfqVcil_iLIh1Oa7V426W_TNyOwjxGo1vWr4lj36aJVpyP58p4gvQv4SIOcycS89bo/s128/fandra-juani.jpg' width='32' height='32' />


2. Untuk kode CSS width:70px;height:70px;

Silakan tambahkan attribute width dan height disetiap gambar yang anda gunakan diblog.

Merubah ukuran asli dari sebuah gambar.

Contoh: Ukuran asli dari sebuah gambar adalah 400x800. Lalu kita upload ke posting blog, dan kita perkecil gambarnya, dengan pilihan Small, sehingga ukuran gambar menjadi 100x200. Itu berarti ukuran gambar yang kita gunakan hanya 100x200.

Agar loading blog lebih cepat, kita ubah dulu ukuran asli gambarnya dikomputer, dari 400x800 menjadi 100x200, setelah itu baru lah kita upload lagi ke blog, dan gantikan gambar sebelumnya dengan gambar baru. Jadi intinya, upload lah gambar dengan ukuran yang seperlunya. Maka loading blog akan jauh lebih cepat.

Mengganti server gambar blogger dengan google.

1. Buatlah entri baru, lalu masukan gambar ke posting.
2. Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.

3. Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
4. Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
5. Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.  
6. Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
7. Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg954X_Umt2ry4OIRIKyx7NOl6Jm1p4RuLZSV4xfV1kxtTTMiUZyn6YFEKQbQ3lxDAEMnrK_sF3dzAp8HuxlmXTauuanxuMz9gRSY9LhQJfIAaROHyuZULOM3knneIVZjl4t6HFw-xaMHTE/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg954X_Umt2ry4OIRIKyx7NOl6Jm1p4RuLZSV4xfV1kxtTTMiUZyn6YFEKQbQ3lxDAEMnrK_sF3dzAp8HuxlmXTauuanxuMz9gRSY9LhQJfIAaROHyuZULOM3knneIVZjl4t6HFw-xaMHTE/s1600/loading.jpg" /></a></div>

URL yang berwarna hitam diatas. Ganti dengan URL dari picasa web google. Contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjY0_wBUUoD1tY_BtfLT1K5MrhKC1DN7e3MbTwQGpUPqZg4mB_ONhX3J3ctl5ZWjF1hIDspG-OfIeiVMvIDW0vLXQb6kbQ2N73_GdoKfCfD3npk6gMDihpwA8iAkzc00XeimNvuhwPFXZ/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjY0_wBUUoD1tY_BtfLT1K5MrhKC1DN7e3MbTwQGpUPqZg4mB_ONhX3J3ctl5ZWjF1hIDspG-OfIeiVMvIDW0vLXQb6kbQ2N73_GdoKfCfD3npk6gMDihpwA8iAkzc00XeimNvuhwPFXZ/s300/loading.jpg" /></a></div>
8. Selesai.

Setiap gambar yang kita masukan ke posting blog, maka otomatis gambar tersebut juga ada di picasa web album. Kenapa URL dari blogger harus diganti dengan URL gambar dari google. Karena server google lebih cepat dari blogger. Sehingga gambar akan lebih cepat dibuka.

Setelah melakukan 3 cara diatas, coba test lagi kecepatan blog anda ke situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa perubahan skor kecepatan blog yang kalian dapatkan. Contoh: Score kecepatan loading dari blog saya di situs http://gtmetrix.com/.

Cara mempercepat loading blog ini, merupakan lanjutan dari artikel sebelumnya, yaitu tentang tips dan trik mempercepat loading blog. Semoga bisa bermanfaat untuk anda.

Read More

Cara upload dan ambil url gambar

Cara Upload Gambar Dan Ambil URL Gambar

1. Buatlah Entri Baru. Beri Judul, Dan Jangan dipublikasikan, cukup simpan di Draf Saja.
2. Selanjutnya Upload gambar/icon yang kamu inginkan.

3. Setelah di Upload, klik kanan gambar tersebut, dan pilih Copy Link Location. Seperti contoh gambar dibawah ini.
   

4. Setelah itu baru pastekan di format gambar background:url("Link Url Blog kamu") atau <img src='URL BLOG KAMU'/>. Contoh URL Gambar:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51KRBRCugQ6fBatmao1___HV_y1jRFOsLT0USIBjbwsWd0UXSxmZmt5PiEE9aZgyU9jWvZZjiyzBMwEaJQmAibtp3sBj7zHtDoFXxUNLvcYMhsp1ZtWDFXhyapmW5drQ82mRgDcqKE0Nr/s1600/Fandra+Juani.jpg


5. Selesai.

Dengan menggunakan cara diatas, kita dapat upload gambar yang kita buat sendiri ke blog dengan mudah, lalu mengambil URL nya untuk digunakan di blog. Contoh penggunaan URL gambar di blog.

1. Gambar disamping judul posting.
2. Icon disetiap judul widget blog.
3. Background dihalaman posting.
4. Gambar Bentuk Bulat. 
5. Menu dengan gambar disampingnya.
6. Mengganti judul blog dengan gambar.

Itulah sedikit tips dan trik tentang cara upload gambar dan mengambil url dari gambar untuk digunakan di blog. Semoga bisa Bermanfaat untuk anda.

Read More

Cara Memasang Scroll di Kotak Komentar Blog

Cara Memasang Scroll di Kotak Komentar Blog. Silakan lihat contoh gambar dibawah ini:

Untuk lebih jelasnya tentang cara memasang scroll di kotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login Ke Blogger, Dari halaman Dasbor pilih pengaturan Template.
2. Klik Edit HTML dan cari kode <div class='comments' id='comments'>
3. Setelah ketemu, ganti kode tersebut dengan kode dibawah ini.
<div class='comments' id='comments' style='max-height:960px;overflow:auto;'>
4. Karena kode <div class='comments' id='comments'> ada 2 ditemplate. Ganti kedua² nya dengan kode diatas. 
5. Selanjutnya save template, selesai.

Keterangan Kode:  max-height:960px untuk mengatur tinggi kotak komentar yang akan ditampilkan. Dan overflow:auto; ini kode scroll nya,  scroll akan muncul ketika kotak komentar sudah melebihi max-height yang sudah kita atur.

Kotak scroll diatas berfungsi untuk mempersingkat tampilan komentar blog. Ketika artikel kita sudah mempunyai komentar yang banyak, maka komentar yang akan terlihat pertama kali hanya sebatas dari tinggi kotak yang telah kita atur. Pada saat discroll kebawah, maka komentar lain akan muncul, dan komentar² yang pertama akan disembunyikan. Jika di scroll lagi ke atas, maka komentar yang disembunyikan tadi akan muncul kembali, jadi semua komentar tetap ada, hanya tampilannya saja yang kita persingkat.

Dengan memasang kotak scroll di kotak komentar blog, maka loading blog akan lebih cepat, jika dibandingkan harus membuka semua komentar2 yang ada pada suatu artikel. Jika artikel kita belum ada komentar, maka scroll pun tidak akan terlihat. Scroll hanya akan muncul ketika komentar di artikel kita sudah banyak, atau sudah melebihi tinggi kotak komentar, seperti penjelasan saya di keterangan kode.

Itulah sedikit tips dan trik tentang cara memasang scroll di kotak komentar blog, silakan baca tips dan trik lainnya yang dapat kita gunakan diblogspot, seperti cara mempercepat loading blog agar lebih mudah untuk dibuka, atau cara menuliskan pangkat di blog seperti ini 2⁸ dan artikel lain²nya.  

Semoga bisa bermanfaat untuk anda.

Read More

Tips dan Trik Menulis di Blog

Sebelumnya saya sudah memberikan cara menulis blog dengan memasukan gambar dan juga kotak script, ditengah-tengah Numbered list dan Bullet list. Dan kali ini tentang Tips dan trik menulis di blog menggunakan akar quadrat/pangkat atas, pangkat bawah, keterangan tulisan saat disentuh mouse dan juga garis pemisah antar paragraf.

Sama seperti artikel sebelumnya, kita akan menulis blog dengan mengedit kalimat artikel, pada bagian HTML nya. Untuk lebih jelasnya, silakan ikuti beberapa cara penggunaan kode dibawah ini, untuk menambah pilihan kita dalam menulis blog.

Cara menuliskan akar/quadrat atau pangkat diblog, contoh: 4² dan CO_2.

• Membuat pangkat atas, tulislah dibagian HTML 4² maka hasilnya akan menjadi seperti ini. 4².
• Untuk Pangkat Bawah, tulislah dibagian HTML  CO₂ hasilnya CO_2.

Cara membuat Keterangan tulisan saat disentuh Mouse. Contoh: Arahkan mouse ke tulisan ini, Blogger

• Buatlah di bagian HTML <abbr title="cara membuat blog">Blogger </abbr> maka hasilnya akan seperti contoh: Blogger
• Atau tulis seperti ini,  <acronym title="cara membuat blog">Blogger </acronym> maka hasilnya juga akan seperti contoh Blogger

Cara membuat garis bawah pemisah antar kalimat. Masukan kode <hr /> pada kalimat yang akan dipisah.

Contoh Penulisan di HTML:

SATU<br />

<hr />

DUA<br />

Maka hasilnya akan seperti ini dibagian Compose.

SATU

---

DUA

Sebenarnya masih banyak lagi cara yang dapat kita lakukan dalam menulis blog, tapi disini yang saya tuliskan adalah beberapa contoh yang mudah untuk diingat saja dan mungkin akan sering kita gunakan. Silakan dicoba cara² diatas, sebagai tambahan pilihan dalam menulis blog anda. Semoga Bermanfaat.

Read More

Gambar Dengan Background Transparan

Cara membuat gambar dengan background transparan menggunakan photoshop, yang berguna untuk pembuatan icon dan juga penggunaan gambar di halaman blog. Agar gambar yang akan kita gunakan diblog, tetap transaparan, maka format gambar, harus diubah menjadi PNG, karena jika kita menggunakan JPG maka background gambar akan menjadi putih. Walaupun gambar sudah kita edit dengan background transparan di photoshop.

Untuk lebih jelasnya tentang cara membuat gambar dengan background transparan, silakan ikuti langkah-langkah dibawah ini.

Gambar.1. Backround Transparan

1. Bukalah gambar yang akan diedit backgroundnya. Klik Magic Wand Tool, untuk menyeleksi background yang akan dihapus.

Contoh: Gambar dalam format JPG.

---

Gambar 2. kiri(cara dupliacte layer) dan kanan (duplicate gambar)

2. Selanjutnya, buat duplicate gambar. Klik Background, lalu klik kanan, pilih Duplicate Layer.

3. Maka tampilannya layernya akan menjadi seperti gambar disamping.

• Bakcground(gambar asli). 
• Background Copy(duplicate gambar).

4. Sekarang Klik Background, dan klik delete pada bagian bawah yang diberi tanda bulat merah.

---

Gambar 3. Background Copy yang tersisa

5. Setelah di delete, maka yang tersisa adalah Background Copy saja, seperti gambar disamping.

---

Gambar. 4. delete background gambar

6. Setelah itu langsung ke gambar, delete backgroundnya. Dan save, dalam format PNG. Selesai.

Dengan men-save gambar ke PNG, background gambar tetap akan transparant, berbeda jika disave dalam format JPG, maka background gambar akan menjadi putih. 

---

Gambar.5. Cotoh gambar

Hasil gambar dengan background Transparant.

---

Gambar.6. Contoh penggunaan gambar transparant di blog.

Atau yang satu ini, contoh penggunaan gambar dengan background tranparant yang saya gunakan di blog.

Gambar ini letaknya pada bagian header, dan header saya beri warna background biru, sehingga background gambar juga berwarna biru, berbeda jika gambar disave dalam format JPG, backgorundnya gambarnya akan putih, jadi tidak sesuai dengan warna header yang saya gunakan.

---

Itulah sedikit tips dan trik tentang membuat gambar dengan background transparan, dapat kita gunakan juga untuk pembuatan icon di blog dengan background transaparant.


Semoga artikel diatas bisa bermanfaat untuk anda.

Read More

Cara Membuat Icon Untuk Website

Cara buat Icon web atau juga blogger. Icon biasanya digukan untuk memperjelas judul menu, seperti home, profil, sitemap dan lain². Dan letaknya berada disamping kanan atau kiri dari tulisan. Icon berguna agar pengunjung lebih mudah untuk melihat menu yang ada diwebsite kita.

Disini saya akan beri contoh mudah membuat icon web menggunakan foto kita sendiri diphotoshop.

Untuk lebih jelasnya. Ikuti langkah-langkah dibawah ini.

---

1. Buka Photoshop.
2. Buka Foto yang akan dijadikan Icon.

3. Setelah itu klik tanda Crop yang berada disebelah kiri.

---

4. Dan isi colom width:128 dan height 128. Ini bertujuan agar ukuran tinggi dan lebar crop gambar sama. Dan memudahkan kita nantinya untuk merubah ukuran image ke ukuran yang lebih kecil, tanpa merubah bentuk gambar.

5. Selanjutnya Crop gambar, dan ratakan kotak crop untuk gambar yang akan diambil. Seperti gambar dibawah ini. Dan tekan tanda centang hijau diatas bar, untuk menyelesaikan crop/pemotongan.

---

6. Setelah itu klik tanda image yang ada diatas bar dan klik image size.

Maka akan terbuka halaman baru pengaturan Pixel Dimensions dan Document Size.

---

7. Selanjutnya, ganti ukuran Pixel Dimensions menjadi 32 x 32, ukuran standar Icon yang biasa digunakan untuk website.

Document size tidak perlu diganti, karena document size mengikuti perubahan dari ukuran pixel dimensions. Perhatikan juga Constrain Proportions tidak perlu dicentang.

8. Terakhir Klik Ok, Lalu Save Gambar. Selesai.

---

Contoh icon yang sudah jadi dengan ukuran 32 x 32 Pixels.
Gambar tetap sama, hanya saja ukurannya yang berbeda. Saran saya, jika ingin menggunakan icon di website anda, gunakanlah icon dengan ukuran yang sama, agar blog terlihat lebih rapi. Dibawah ini adalah beberapa ukuran Icon yang biasa digunakan diwebsite.

16x16

32x32

48x48

64x64

128x128

Setelah membuat icon, silakan baca artikel cara membuat menu dengan gambar dan juga mengganti tulisan beranda, posting lama baru  dengan gambar atau icon, untuk mulai mencoba memasang icon gambar anda ke menu blog. Itulah sedikit tips trik yang dapat saya bagikan kali ini yaitu tentang cara membuat icon untuk website, blogger dan juga web lainnya. Semoga Bermanfaat.

Read More

Cara Membuat Gambar Tutorial

Tips dan Trik kali ini tentang cara membuat gambar tutorial. Biasanya digunakan sebagai penambah penjelasan dari artikel yang kita buat. Gambar bisa kita ambil dari halaman web atau dari layar komputer kita sendiri. Untuk lebih jelasnya tentang cara mudah mengambil serta memotong gambar yang akan digunakan sebagai gambar tutorial. Ikuti langkah² dibawah ini.

1. Bukalah layar yang akan dijadikan gambar.
2. Selanjutnya tekan Ctrl lalu tekan Printscreen/PrtscrSysrq yang ada dikeyboard.
3. Lalu buka program Paint yang ada dikomputer kita.
4. Di program Paint kita klik edit di menu atas, dan pilih Paste.
5. Setelah itu beri tanda kotak menggunakan Select pada gambar yang akan diambil, lalu Cut gambar tersebut.
6. Langkah selanjutnya, buka New di paint, lalu Pastekan gambar yang di Cut tadi. 
7. Lalu Save gambar dengan Save As Type JPG. Seperti gambar dibawah ini.

8. Selesai.

---

Contoh : Gambar Tutorial.

Jika gambar yang ingin kita gunakan lebih kecil lagi dari gambar diatas. Kita bisa memotong/mengambil gambar menggunakan program Microsoft Office Windows Manager. Jika dikomputer yang kamu gunakan telah terinstal microsoft office, maka program diatas juga pasti ada. Berikut cara menggunakannya:

---

1. Klik Kanan pada gambar yang akan dipotong.
2. Lalu pilih Open With > Microsoft Office Windows Manager.

3. Selanjutnya klik Picture pada menu atas. Dan klik Crop.
4. Setelah itu Crop gambar dengan ukuran yang kita inginkan.
5. Terakhir save. Selesai.

---

Contoh: Gambar Tutorial yang sudah dipotong.

Itulah sedikit tips dan trik tentang cara membuat gambar tutorial. Silakan baca juga artikel lainnya yang berhubungan dengan gambar, seperti cara membuat icon untuk blog. Semoga Bermanfaat.

Read More

Fungsi Margin Dan Padding di Blog

Margin dan Padding merupakan kode CSS yang digunakan untuk membuat jarak atau spasi. Perbedaanya adalah margin digunakan pada bagian luar, dan padding pada bagian dalam. Dengan kode margin kita dapat merubah posisi dari widget yang kita inginkan, sedangkan padding, kita dapat menggunakannya untuk bagian dalam, seperti spasi antar text tulisan, jarak antara text dengan batas garis widget atas-bawah. Untuk lebih jelasnya lihat gambar dibawah ini.

Adapun kode-kode Css Dari Margin dan Padding yang dapat kita gunakan diblog adalah sebagai berikut:

 Margin

1. margin: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. margin: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. margin: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. margin: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)
5. Khusus untuk margin dengan kode 4, bisa kita tambahkan kode - untuk merubah posisi dengan arah berlawanan, contoh: margin: margin:-55px -50px 0 0

Padding

1. padding: 10px;  (10px Spasi atas-kanan-bawah-kiri).
2. padding: 0px 80px; (0px Spasi atas-bawah) (80px spasi kanan-kiri)
3. padding: 100px 10px 50px; (100px spasi atas) (10px spasi kanan-kiri) dan (50px spasi bawah)
4. padding: 90px 50px 20px 0px; (90px spasi atas) (50px spasi kanan) ( 20px spasi bawah) (0px spasi kiri)

Dari kode-kode diatas sudah terlihat, yang membedakan Margin dan Padding hanyalah nama awalnya saja sedangkan yang lainnya sama.

Langsung saja, dibawah ini adalah contoh penggunaan margin pada bagian Header blog. Tampilan awal Header blog pertama.

1. Susunan elemen dari gambar diatas adalah seperti dibawah ini.

2. Sekarang ke pengaturan template. Dan klik edit HTML.
3. Lalu cari satu persatu kode dari susunan elemen dari langkah 1.

4. Pertama cari kode Header, disini yang berjudul Fandra Juani. Gunakan Ctrl F untuk mempermudah pencarian. seperti dibawah ini.
5. Setelah ketemu, copy kode bertanda merah diatas, lalu pastekan di notepad, dan lanjutkan mencari kode Laman Dan HTML/javascipt.
6. Setelah semuanya ketemu, tambahkan kode margin untuk merubah posisi yang kita inginkan. seperti dibawah ini.
#Header{float:left}
#HTML1{float:right; margin:-115px -195px 0 0}
#PageList1{float:right; margin:-55px -50px 0 0}
7. Letakan kode diatas ]]></b:skin>
8. Save template, selesai.
9. Tampillan Blog setelah diberi kode margin.

Sudah terlihat jelas perbedaan tampilan blog, dari yg awalnya datar kebawah, sekarang datar kesamping. Karena ditambahkan kode margin. kenapa saya beri judul fungsi margin dan padding di blog, karena padding dan margin bisa digunakan pada semua bagian-bagian blog, jadi tidak hanya seperti yang saya contohkan. Yang terpenting adalah kita cari dulu kode dari bagian yang akan kita edit atau kita ubah posisinya.

Keterangan kode float

float digunakan agar posisi widget menjadi teratur, seperti contoh diatas, header float:left berarti header pada posisi kiri, dan laman(Pagelist1) dan HTML1 pada bagian kanan. 

Silahkan berkreasi, maaf jika tutorial dari saya ini kurang jelas. Jika ada pertanyaan silakan masukan komentar dibawah, semoga bermanfaat.

Read More

Macam Bentuk Numbered List dan Bullet List

Macam Bentuk Numbered List dan Bullet List yang bisa dipakai di blogger. Cara menggunakannya lihat dibawah ini.

1. Buatlah entri baru atau edit artikel lama
2. Dan Klik Numbered List 
3. Lalu klik bagian HTML di sebelah Compose.
4. Terus ganti kode <ol> dengan salah satu kode dibawah.
5. Terakhir kembali ke Compose, maka tampilan numbered list akan berubah.
6. Untuk Bullet list, klik bullet list, lalu lihat pada bagian HTML 
7. Dan ganti kode <ul> dengan salah satu kode bentuk bullet list dibawah.

Macam Bentuk Numbered List

1. Bentuk Dasar, <ol> Tanpa Edit HTML

8. Mulai dari angka 8, Ganti kode <ol> dengan <ol start="8">
9. Setelah dienter, maka akan berlanjut ke nomor 9 dan seterusnya, seperti tulisan ini.

1. Dalam Bentuk Huruf Besar, <ol type="A">

1. Dalam Bentuk Huruf Kecil, <ol type="a">

1. Dalam Bentuk huruf atau angka romawi, <ol type="I">

1.  Angka romawi huruf kecil, <ol type="i">

5. Angka Romawi Besar dimulai dari angka 5, <ol type="I" start="5">
6. Setelah dienter, maka akan berlanjut ke angka romawi 5 dan seterusnya.

Macam Bentuk Bullet List

• Bentuk dasar bullet list, <ul> tanpa edit html

• Bentuk Bulat sederhana, <ul type="circle">

•  Bentuk Kotak, <ul type="square">

Dan yang terakhir, tips meratakan tampilan kiri-kanan Numbered list. Seperti contoh gambar dibawah ini.

Contoh gambar

Dari gambar diatas Tampilan numbered list, rata dengan kalimat yang ditulis seperti menulis biasa diblog, diatur menggunakan justify rata kiri kanan kalimat. Standar blogger, tampilannya akan ada spasi jarak sehingga tidak sejajar dengan kalimat yang ditulis biasa tanpa numbered list.

Berikut sedikit trik cara agar tampilan numbered list rata dengan tulisan biasa.

1. Login ke blogger, dari halaman dasbor, pilih pengaturan template.
2. Terus edit html, dan cari kode ]]></b:skin> lalu letakan kode berikut ini diatasnya.
.post ol {
padding:0px 24px 0px;
width:96%;max-width:100%;}
3. Keterangan kode: padding:0px 24px 0px; Rata Kiri dan width:96%;max-width:100%; Rata Kanan.
4. Jika belum rata, Ganti 24px dan 96% agar rata dengan tampilan posting kamu.
5. Save template, selesai.

Pada saat menulis, tampilan numbered list tetap seperti biasa, tetapi jika sudah dipublikasikan, maka tampilannya akan berubah, rata dengan tulisan biasa. Preview dulu tulisan untuk melihat hasilnya.

Itulah sedikit tips trik menulis artikel menggunakan numbered list dan bullet list di blog, silakan baca juga tips trik menulis artikel di blog menggunakan numbered list yang disisipkan gambar, atau kode script ditengah-tengahnya. Semoga Bermanfaat.

Read More

Breadcrumb Seo untuk Blogspot

Breadcrumb Seo untuk Blogspot. Breadcrumb berguna untuk memudahkan google untuk menelusuri isi dari blog kita, dan juga memudahkan pembaca melihat informasi letak artikel yang sedang dibaca. Breadcrumb letaknya berada di bawah menu header, dan diatas judul artikel yang sedang dibuka. Untuk lebih jelasnya, lihat contoh gambar dibawah ini.

Cara membuat breadcrumb seo untuk blogspot. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode <b:include data='top' name='status-message'/> dan masukan kode berikut ini diatasnya.
<b:include data='posts' name='breadcrumb'/>
3. Setelah itu cari kode <b:includable id='main' var='top'> dan masukan kode berikut ini diatasnya.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
<b:loop values='data:post.labels' var='label'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
</b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
4. Save template, selesai.
5. Jika ingin merubah tampilan breadcrumb, tambahkan kode css diatas ]]></b:skin>
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;}
6. Silakan ubah sendiri, kode css nya sesuai dengan yang kalian inginkan.

Dari sini, pembuatan breadcrumb sudah selesai. Sekarang mengecek breadcrumb di google. Breadcrumb yang terindeks google, tampilannya akan seperti gambar dibawah ini.

Cara ceknya:

1. Kunjungi situs google http://www.google.com/webmasters/tools/richsnippets
2. Selanjutnya masukan URL dari salah satu artikel di blog kamu.
3. Klik Pratinjau, Selesai.

Setelah memasang breadcrumb seo di blog, google akan mengindeksnya dalam beberapa hari di hasil pencarian google. Silakan dibaca juga artikel lainnya tentang seo, yaitu tentang Belajar seo untuk blogger pemula Semoga Bermanfaat.

Read More