Sebelumnya saya pernah membuat artikel tentang cara membuat text area
dan modifikasinya, nah pada kesempatan ini, saya akan menambah lagi
berbagai macam variasi teks area dan cara membuat text area tersebut.
Untuk apa sih teks area itu, selain untuk kerapian posting blog juga
bermanfaat untuk menghemat halaman agar tidak terlalu penuh. Selain itu
terkadang kita dalam mengcopy paste kode tertentu terkadang keluar jalur
alias melewati batas area artikel blog. Hal tersebut terjadi karena
kita cuma memasukkan kode-kode tersebut ke dalam blockquote. Nah
disnilah fungsi utama dari teks area tersebut.
Pada kesempatan ini saya akan memberikan 3 variasi teks area. yaitu text
area sederhana / default, text area dengan fungsi select / copy all,
dan text area dengan tombol scroll / gulir.
Cara memasang teks area ini adalah pada saat menulis postingan pilih
menu HTML (bukan edit HTML template loh yaah). Lihat gambar.
Masukkan kode text area setelah klik HTML |
A. Teks area sederhana
<textarea rows="6" cols="35">diisi dengan kalimat, kata, kode yang diinginkan</textarea>
dengan kode di atas maka tampilan teks area seperti di bawah ini. angka 6 berarti jumlah baris, 35 menunjukkan lebar form teks area.
B. Teks Area dengan Select copy all
Cara Mengatur dashboard / setelan blogger tampilan baru
Seberapa penting setelan dashboard blogger. Jawabnya sangat penting,
karena dari sinilah dasar-dasar SEO blog diawali. Kita bisa mengatur
berbagai fitur yang disediakan oleh blogger dengan cara yang cukup
mudah, walau ada juga fitur-fitur yang juga berisiko jika kita tidak
mengetahuinya.
Dalam tutorial kali ini, saya akan memberikan contoh cara pengaturan
dashboard dengan tampilan baru. Mengapa tampilan baru? Banyak kelebihan
dasbor terbaru jika dibandingkan dengan tampilan lama. Terutama dalam
hal optimasi search engine.
Nah bagaimana cara pengaturan dashboard blogger versi terbaru? Mari kita simak sama-sama.
Dasbor blogger terdiri dari beberapa tab, yaitu;
1. Ikhtisar
Dalam menu ini terdapat statistik, jumlah komentar, jumlah pageviews
terbaru, jumlah post dan jumlah follower serta berita terupdate dari
Blogger Buzz.
2. Menu Post
Di sini ditampilkan seluruh post baik yang sedang dalam proses (draft),
Terjadwal maupun yang sudah diposting. Disini juga kita bisa mengedit
posting artikel yang sudah pernah dipublikasikan. Kita juga bisa
mengatur jumlah post yang ingin ditampilkan perhalaman, 10, 25, 50, 100.
Kita juga bisa memilih per label / kategori tertentu yang ingin di
tampilkan serta menghapus halaman yang sudah dibuat.
3. Menu Laman
Pada menu ini bisa dilihat seluruh halaman yang telah dibuat. Untuk pengaturan dan cara membuat laman silakan buka Cara membuat laman statis di blogspot.
4. Menu Komentar
Disini bisa kita lihat seluruh komentar baik yang sudah diterbitkan, kategori komentar spam maupun yang dalam proses moderasi.
5. Tab statistik
Pada tab ini bisa dilihat statistik kunjungan terbaru, perharian,
mingguan, bulanan maupun secara keseluruhan dari awal dibuatnya blog.
Ada juga fitur sumber lalulintas asal kunjungan. Untuk tab pemirsa
adalah negara asal pengunjung.
6. Earning Tabs / Penghasilan
Earning tab berfungsi sebagai alat pendaftaran google adsense. Earning tab hanya muncul jika bahasa di atur ke dalam bahasa Inggris (untuk blog lama). Silakan buka artikel Cara memunculkan earning tab di dasbor blog berbahasa Indonesia
7. Tata Letak
Fitur ini berfungsi untuk mengatur letak gadget-gadget yang berada di
sidebar, footer, maupun di bawah posting blog. Silakan geser / drag
gadgetnya dengan cara Mengklik Gadget > Tahan > Geser ke tempat
yang diinginkan. Selain itu juga untuk menghapus gadget-gadget yang
telah digunakan.
8. Template
Tab ini berguna untuk mengganti template blog
hasil unduhan, memback up / download template, dan mengubah ukuran
halaman post, sidebar, menambah elemen gadget khususnya untuk template
default blogspot. serta pengaturan untuk tampilan seluler, mobile.
9. Setelan.
Nah Ini yang utama. Ada beberapa fitur di dasbor tampilan baru yang
tidak terdapat di dasbor tampilan lama. Yuk kita simak sama-sama.
A. Setelan Dasar
1. Untuk setelan dasar bisa di atur sebagai berikut;
- Judul adalah berfungsi untuk mengubah nama blog, misalnya punya saya ini Membuat Blog Ala Super Gaptek, silakan klik link edit, lalu masukkan nama blog sobat klik simpan perubahan. Jangan terlalu sering ganti nama, malahan kalau bisa jangan diganti sejak pertama kali dibuat. Kalaupun mau ganti adalah saat pertama bikin blog yaitu baru beberapa artikel dibuat.
- Deskripsi, boleh dikosongkan, kalaupun mau diisi, samakan dengan meta tag deskripsi blog (lihat di setelan preferensi penelusuran)
- Privasi adalah untuk mengatur apakah blog boleh diakses search engine google atau tidak, silakan pilih Ya pada kedua item.
2. Penerbitan
- Menu ini adalah untuk mengganti URL blog, misalnya punya saya adalah blogbelajar2.blogspot.com. Saran saya JANGAN PERNAH DIGANTI URL blog Anda.
- Selain itu juga untuk mengubah arah penerbitan post, jika suatu saat Anda ingin membeli domain, misalnya .com , .net . web.id , .info dll.
3. Izin
- Penulis blog Untuk mengatur siapa saja yang boleh membuat tulisan atau artikel di blog Anda. Jika mau silakan klik Tambahkan Penulis, Masukkan email Google teman yang diundang untuk menulis di blog kita.
- Pembaca blog pilih Siapapun, jika ingin seluruh orang yang berkomentar.
B. Setelan Pos dan Komentar
- Post ; silakan atur berapa jumlah postingan di halaman utama / homepage blog. Pilih Posting.
- Untuk setelan komentar selengkapnya silakan buka sebab mengapa blog sepi komentar
- Tampilkan gambar dengan lightbox pilih Ya
- Bagikan ke Google Plus pilih Ya (jika akun blogger anda sudah terintegrasi dengan akun google plus)
C. Setting Bahasa dan Pemformatan
- Setelan bahasa jika ingin menampilkan earning tab silakan pilih Inggris - english
- Aktifkan transliterasi pilih dinonaktifkan
- Format silakan atur waktu dimana anda tinggal, ini cukup mudah.
D. Pengaturan preferensi penelusuran
- Tag meta; Deskripsi silakan klik edit kemudian masukkan deskripsi blog. Ini juga berfungsi agar meta tag deskripsi setiap halaman posting blog bisa berfungsi, untuk penjelasan selengkapnya silakan buka Cara menambahkan meta tag deskripsi blogger versi terbaru
Kesalahan dan pengalihan
- Pesan Khusus untuk Laman Tidak Ditemukan klik Edit > masukkan kata-kata yang dikehendaki
- Pengalihan Khusus; untuk mengatur pengalihan halaman ke halaman lain (redirect) di pencarian google
- Untuk perayapan dan pengindeksan (crawl and indexing) biarkan gak perlu diedit kecuali anda punya keahlian alias sudah master. hehehe
E. Setelan Lainnya
Alat Blog
- Impor blog adalah fitur untuk memasukkan entri / posting blog dan komentar dalam format .xml. Saya sendiri kurang begitu paham cara kerja fitur ini.
- Ekspor blog adalah alat untuk mendownload seluruh isi blog, dengan tujuan untuk memindahkan isi blog ke blog layanan lain, misalnya wordpress dan untuk disimpan di hard disk komputer saja.
Umpan situs
- bolehkan umpan blog pilih Penuh
- Posting URL pengubahan arah feed di isi jika sudah membuat akun di feedburner.com
- Aktifkan tautan lampiran bisa Ya boleh juga tidak
Konten Dewasa
- Pilih Ya jika blog Anda memuat konten dewasa, pilih tidak jika tidak ada konten berbau gituan, hehehe
Google Analytics
- ID properti web analytics di isi kode yang diberikan saat mendaftarkan blog di google analytics
Panjang juga yaa... nah mudahan artikel cara
pengaturan dasbor blogger ini bisa membantu saudara blogger mania di
mana saja Anda berada.
Cara membuat tabel di Blog tanpa Coding
Membuat tabel
dalam sebuah artikel bagi sebagian blogger mungkin merupakan hal yang
sulit, karena bagi kita yang belum paham kode-kode HTML tentu akan
kebingungan. Sebenarnya bisa saja kita membuat tabel dengan mengcopy
paste dokumen tabel yang sudah kita buat di Microsoft word atau Excel.
tapi jika sobat blogger memiliki koneksi internet yang lelet, terkadang
tidak bisa terpublikasi. Mengapa bisa tidak terpublikasi? Karena tabel
atau dokumen yang langsung kita copy paste dari microsoft word / Excel
tadi sebenarnya mengandung kode-kode rumit. Terkadang pula tabel yang
sudah kita copas dari excel, ketika di masukkan ke posting blog tidak
menjadi sebuah tabel yang diinginkan / tidak ada garisnya.
Jika sobat sudah memakai software/aplikasi Windows Live Writer, membuat tabel akan mudah dilakukan, karena dalam toolsnya sudah ada pembuat tabel. Berbeda dengan blogger yang belum ada.
Buat sobat yang menemui kendala dalam pembuatan tabel di blog karena belum mengenal kode-kode HTML/CSS tabel, mungkin bisa mengikuti cara berikut ini.
1. Buatlah terlebih dulu tabel artikel kita di MS word/excel.
2. Blok/Highlight tabel yang sudah jadi tadi, kemudian copy.
3. Lalu Masuk ke http://tableizer.journalistopia.com/tableizer.php
4. Paste dokumen tabel tadi di dalam for .
Paste your cells from Excel, Calc or other spreadsheet here:
5. Jangan lupa mengatur ukuran huruf, jenis huruf dan warna header tabel di posting blog.
6. Jika sudah selesai, lihat preview kodenya di bagian bawah, Klik Tableize it!
7. Tunggu sebentar, maka Akan di dapat kode HTML untuk tabel yang siap dimasukkan ke dalam posting blog.
8. Langkah berikutnya adalah copy kode yang di dapat di form
9. Masuk ke pembuatan artikel, Silakan masukkan kata atau kalimat yang dikehendaki
Klik menu HTML di samping menu Compose.
Memasukkan kode yang sudah di copy tadi pada tempat yang dikehendaki
10. Kembali ke menu Compose untuk memasukkan kalimat atau kata-kata yang lainnya, seandainya tabel berada di tengah postingan.
Sebagai contoh bisa dilihat pada tabel di bawah adalah hasil Tableizer.
No | Nama Tutorial | KODE | Keterangan |
---|---|---|---|
1 | Cara membuat tabel | HTML | |
2 | Cara membuat tabel | CSS 3 | |
3 | Cara membuat tabel | CSS 5 |
Cukup mudah bukan? Memang untuk pewarnaan hanya bisa di header tabel saja. Silakan sobat coba-coba.
Cara Membuat Menu Vertikal di Blog
Sobat blogger pasti sudah tahu apa yang saya maksud. Pada tutorial kali
ini Julak mau berbagi tentang cara membuat menu navigasi dropdown
vertikal, Sobat bisa lihat di sidebar kanan sebagai contohnya. Caranya
cukup mudah hanya tinggal memasukkan kode ke dalam gadget. Menu vertikal ini cukup unik karena akan bergeser turun saat cursor mouse diarahkan ke menu.
Berikut kodenya
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 300px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #9DB6D7;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 115px;
}
</style>
<nav>
<div class="menu-item">
<h4><a href="http://namablog.com" target="_blank"">Membuat Blog</a></h4>
<ul>
<li><a href="http://namablog.com" target="_blank">Membuat Email </a></li>
<li><a href="http://namablog.com" target="_blank">Membuat tabel </a></li>
<li><a href="http://namablog.com" target="_blank">Promosi Blog</a></li>
<li><a href="http://namablog.com" target="_blank">Setelan Blogger</a></li>
<li><a href="http://namablog.com" target="_blank"> Membuat Gmail</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="masukkan URL/Link postingan">Widget</a></h4>
<ul>
<li><a href="masukkan URL " target="_blank">Cara Pasang widget</a></li>
<li><a href="masukkan URL " target="_blank">Cara Buat Laman Statis</a></li>
<li><a href="masukkan URL " target="_blank">Cara Ganti Favicon</a></li>
<li><a href="masukkan URL " target="_blank">Ganti Template Blog</a></li>
<li><a href="masukkan URL " target="_blank">Cara Ubah Background Blog</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="masukkan URL/Link postingan disini" target="_blank"">Widget</a></h4>
<ul>
<li><a href="masukkan URL disini" target="_blank">Cara Pasang Gadget</a></li>
<li><a href="masukkan URL disini" target="_blank">Menu Vertikal</a></li>
<li><a href="masukkan URL disini" target="_blank">Cara Ganti Favicon</a></li>
<li><a href="masukkan URL disini" target="_blank">Ganti Template Blog</a></li>
<li><a href="masukkan URL disini" target="_blank">Ubah Background Blog</a></li>
</ul>
</div>
</nav>
Cara memasang
1. Masuk ke Dasbor Blog >> Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript
2. Masukkan kode di atas.
Yang perlu sobat perhatikan antara lain;
1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.
2. Jumlah URL/Post maksimal 5 (saya gak tahu juga, kok cuma bisa segitu,
hehe maklum super gaptek). Jika sobat mengisi dengan 6 Link, gak
bakalan tampil semua.
3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri
warna merah tebal sebagai contoh, kemudian ganti URL dan Judul Post
4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.
5. Untuk pewarnaan menunya silakan utak atik sendiri yee, hehehe. contoh pewarnaan nya ada pada kode color: #0A0A0A; masuk aja ke Color Generator untuk mengetahui kode warna
6. Selamat Mencoba. Salam Super.
Membuat Read More dan Read More Otomatis di Blog
Cara
membuat read more, ya itulah tema kita kali ini, mengapa saya membuat
artikel seperti ini, karena saya melihat banyak sekali blog-blog baru
khususnya template yang menggunakan template default blogspot khususnya
blogger-blogger pemula (kaya saya, hehehe) yang belum mengetahui ataupun
belum tahu bagaimana cara menggunakan fitur read more ini di blogspot.
Fitur Read more
atau biasa disebut juga baca selengkapnya, atau selengkapnya, atau baca
lanjutannya yang biasa sobat lihat di blog adalah fitur dimana kita
hanya menampilkan penggalan awal ataupun paragraf awal dari postingan
blog kita. Jadi tidak seluruh artikel ditampilkan di halaman utama /
homepage.
Jika kita menggunakan template
default blogspot, fitur ini mudah digunakan pada saat menulis artikel.
Beda halnya jika kita memakai template blog hasil download
dari blog lain, biasanya mereka menyertakan langsung fitur read more
otomatis di template blog. Namun tidak sedikit juga yang tidak
menyertakan fitur auto read more di templatenya. Read more bisa juga
dibuat dalam bentuk image, yang bila kita klik image read more tersebut akan muncul seluruh isi artikel.
Banyak manfaat jika kita menggunakan fitur ini antara lain;
- Loading blog menjadi lebih ringan karena hanya sedikit tulisan yang ditampilkan, apalagi blog sobat banyak memuat gambar-gambar pasti makin berat tuh loading blog. Pengunjung blog juga tidak perlu berlama-lama menunggu selesai loading.
- Jumlah bukaan halaman / page view posting blog bertambah, karena mau tidak mau pengunjung akan membuka keseluruhan artikel yang ingin dia baca. (dengan read more khan cuma sebagian artikel saja yang ditampilkan). Kebalikannya adalah kerugian buat blog kita.
Oke gak perlu berlama-lama dech (walaupun biasanya yang lama banyak yang suka, xixixi...) langsung saja kita ikuti bagaimana cara membuat read more di blogspot.
1. Masuk ke akun blogger sobat, buka blog yang akan di buat postingannnya.
2. Klik entri baru, kemudian masukkan kata-kata atau kalimat artikel sobat.
3.
Jika sudah cukup kira-kira 1 paragraf atau 4 sampai lima baris atau
berapa barispun yang sobat kehendaki, barulah kita klik fitur read more
yang ada. (lihat gambar)
Cara membuat read more |
4. Taruh pointer cursor mouse di
tulisan atau kalimat yang ingin dibatasi, atau batas artikel yang hanya
ingin ditampilkan. Klik gambar kertas terpotong di atas (lihat gambar
warna hijau yang ditandai). Akan muncul garis putus-putus pada kalimat
yang dibatasi tadi, maka disinilah batas kalimat yang ditampilkan di
homepage atau halaman utama blog kita. Selesai menulis artikel, Klik
publikasikan.
5. Langkah selanjutnya adalah masuk ke Tata Letak > Klik link Edit pada Posting Blog.
akan muncul tampilan seperti gambar berikut
6. Pada konfigurasi posting blog
di atas, masukkan jumlah postingan di halaman utama yang dikehendaki,
jangan terlalu banyak cukup 4-5 postingan saja yang ditampilkan, agar
loading blog menjadi lebih ringan. Kemudian ganti kata "Baca
Selengkapnya" dengan kata-kata yang sobat kehendaki, misalnya Baca
lanjutannya, read more, selanjutnya dan lain-lain. Klik Simpan. Selesai,
fitur read more di halaman utama blog sobat sudah jadi.
Catatan;
Read
more ini hanya muncul pada artikel yang dibuat, sedangkan artikel lain
utuh alias seluruh isi postingan terlihat di hompage blog, Maka sobat
harus mengedit 3 atau 4 postingan sebelumnya untuk dimasukkan fitur read
more ini. Caranya sama dengan pada langkah nomor 3 dan 4 di atas.
Memang kelemahan cara ini adalah
kita harus mengklik ikon read more setiap membuat postingan, namun saya
yakin ini bukan hal yang memberatkan buat kita. Lagi pula template kita
menjadi ringan karena read more ini tanpa kode javascript.
Nah, bagaimana sobat sangat
mudah bukan...? Silakan dicoba buat sobat yang templatenya tidak ada
read more otomatisnya. Setelah ini saya akan membuat artikel tentang
cara membuat dan memasang fitur read more otomatis tanpa kode javascript di blogspot.