Cara Membuat Text Box pada Postingan Blogger / Wordpress Terbaru

Cara Membuat Text Box pada Postingan Blogger / Wordpress Terbaru

Sesuai namanya, textbox adalah sebuah box atau kotak yang berisi tulisan dan diletakkan di area postingan. Lebih jelasnya silakan lihat contoh text box di bawah ini:

ini adalah contoh text box text box anda nanti akan seperti ini bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla..... bla.....bla.....bla.....bla.....bla.....

Kegunaan text box yang utama adalah untuk menyisipkan text atau tulisan apa saja kedalam box yang kita buat, seperti kode script, link, dll terserah anda.

Ada 3 macam text box yang akan saya bagikan di artikel ini dan memiliki fungsi berbeda-beda. Berikut cara membuat text box tersebut:

1. Editable Text box
<textarea rows="3" cols="10">
Your Text Here
</textarea> 
2. Read only text box
<textarea rows="5" cols="20" name="Privacy Policy" readonly="readonly">
Your text here
 </textarea>
3. Link Text box
<textarea rows="5" cols="20" name="Link To Blog" readonly="readonly">

Link anda disini
 </textarea>

Catatan:

• rows dan cols bisa anda ganti angkanya, sesuaikan dengan ukuran yang anda inginkan.
• Your text here atau tulisan yang berwarna merah, silakan di ganti dengan tulisan atau link yang anda inginkan.

Baca Selengkapnya >>>

Cara Membuat Auto Readmore Keren di Blogger Terbaru

Auto Readmore - Diari Biasa

Pada saat awal membangun sebuah blog, penerapan auto read more terbilang cukup penting. Selain berguna untuk memudahkan pengunjung untuk memilih dan mencari konten yang ia sukai, auto readmore juga berguna untuk mempercantik tampilan blog. berikut cara membuat auto readmore diblogger.

1. Login ke Akun Blogger sobat lalu klik Tema

2. Klik Edit HTML ( Silakan backup tema anda terlebih dahulu untuk menghindari hal hal yang tidak diinginkan)

3. cari kode </head> dan Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script Start --> <script type='text/javascript'> var thumbnail_mode = "yes"; summary_noimg = 430; summary_img = 340; img_thumb_height = 150; img_thumb_width = 150; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(thumbnail_mode == "yes") { if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script> <!-- Auto read more script End -->

Silakan edit nilai kode berikut sesuai selera anda
summary_noimg = 430; Jumlah Huruf  Tanpa gambar
summary_img = 340; Jumlah Huruf dengan gambar
img_thumb_height = 150; Tinggi gambar
img_thumb_width = 150; Lebar Gambar

4. Sekarang cari kode <data:post.body/> terdapat lebih dari satu kode yang sama, ganti semuanya dengan kode dibawah ini.

<!-- Auto read more Start --> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div style='text-align:justify;' expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='more' expr:href='data:post.url'>Baca Selengkapnya >>></a> </b:if> </b:if> <!-- Auto read more End -->

Tulisan Baca Selengkapnya >>> bisa diganti dengan kata yang kalian inginkan, selanjutnya klik Pratinjau Tema, jika sudah berhasil lalu klik Simpan Tema. Selesai.

Baca Juga :Cara Membuat Text Box pada Postingan Blogger / Wordpress Terbaru

Kode diatas akan membuat auto Readmore dengan tampilan seperti ini

Baca Selengkapnya >>>

Cara Aman Menghapus / Menghilangkan Navbar pada Blogger

Cara Aman Menghapus / Menghilangkan Navbar pada Blogger

Langsung aja berikut ini dua cara menghilangkan Navbar pada blogger.

1. Melalui Tata letak
- Silakan login akun blogger anda
- klik Tata letak

- Lalu klik edit pada widged navbar

- Kemudian pilih Off

- Lalu simpan
---Selelsai---

2. Cara kedua yaitu melalui Edit HTML
untuk menghindari hal yang tidak diinginkan, silakan backup terlebih dahulu tema anda jika dirasa diperlukan.
langsung aja dimulai
- Login ke akun Blogger nya jangan lupa
- Klik Tema

- Klik Edit HTML

- Silakan cari kode ]]></b:skin>

- Lalu letakkan kode berikut tepat diatas kode  ]]></b:skin>

 #navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

- Klik Simpan Tema
---Selesai---

Baca Juga :Cara Menghilangkan Tanda Obeng dan Tang (Quick Edit) pada Blogger

Nah itu tadi 2 cara Aman Menghapus / Menghilangkan Navbar pada Blogger

Baca Selengkapnya >>>

Cara Menghilangkan Tanda Obeng dan Tang (Quick Edit) pada Blogger

Quick Edit Blogger

Tujuan utama dari fasilitas quick edit sebenarnya adalah sebagai tools untuk mempermudah kita untuk melakukan edit langsung pada blog. akan tetapi fasilitas ini justru terasa tidak nyaman dan terlihat mengganggu.

Nah ternyata untuk menghilangkan ikon quick edit ini cukup gampang lo, ikuti langkahnya dengan hati hati ya guys.

1. Login keakun Blogger sobat
2. Klik template / Tema

3. Klik Edit HTML

4. Silakan carikode ]]></b:skin> (ctrl+f untuk mencari)

5. Pastekan kode ini

.quickedit{
display:none;
} 

tepat diatas kode ]]></b:skin>
6 Klik Simpan tema


---Selesai---

Nah cukup mudah bukan, jangan lupa buka blog kamu untuk mengeceknya.

Baca Selengkapnya >>>