Cara Membuat Teks Area dan Variasi Text Area

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. 
cara membuat teks text area di blog
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






Kode diatas adalah cara membuat dengan text area dengan perintah / fungsi select / copy all

silakan sobat atur letaknya center artinya posisi text area ditengah, height > tinggi nya, width > lebar form teksnya.



C. Membuat Teks area dengan Tombol scroll


<div style="overflow:auto; width:80%px; height:50px; padding:10px; border:2px solid #f4f4f4; background-color:#f2f2f2">
Cara membuat text area dengan fungsi scroll / tombol gulir
</div>
Beginilah tampilannya jika menggunakan kode diatas, silakan sesuaika background color dengan template sobat masing-masing. Intinya kode merah adalah silakan modifikasi sendiri.

Cara membuat text area dengan fungsi scroll / tombol gulir


Demikian cara membuat teks area dalam postingan blog. Nah, bagaimana sobat, terserah anda mau pilih yang mana yang terbaik. silakan dicoba. Salam Blogger.
Lihat juga cara membuat kode tukar link yang hampir sama penerapannya.

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. 
cara mengatur atau setting dasbor blogger  tampilan baru
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.

tips menyetel atau mengatur blogger dashboard new interfaceA. 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.
  • 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

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



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.



NoNama TutorialKODEKeterangan
1Cara membuat tabel HTML
2Cara membuat tabel CSS 3
3Cara membuat tabelCSS 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;
  1. 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.
  2. 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
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

cara membuat read more di postingan blog

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.
Diberdayakan oleh Blogger.
Support : Your Link | Your Link | Your Link
Copyright © 2013. Blog Ahfa - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger