Design, Tutorial and Tips Trik Blogger | Lostsector

Panduan Lengkap Membuat & Mengatur Tabel Pada Blog
Meta Tag SEO Friendly Valid HTML5
Text Efek Keyboard Dengan CSS3 Pada Blog
Syntax Highlighter dengan Tombol Source Code, Copy & Print
4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger
Cara Membuat Peringatan Saat Blog Dalam Perbaikan
Cara Mengatasi "Peringatan Missing Required Field Updated"
6 Style / Skin Widget Search Box Untuk Blogger
Cara Membuat Auto ReadMore Blogspot dengan Image Thumbnail
Cara Memasang Parser HTML/Javascript Tool pada Blog

Panduan Lengkap Membuat & Mengatur Tabel Pada Blog

Posted: 20 Mar 2013 12:18 PM PDT

Untuk tutorial kali ini, saya akan menjelaskan Bagaimana Cara Membuat dan Mengatur Tabel pada blogger kedalam 2 (dua) bagian, dimana pada bagian pertama saya akan menjelaskan bagaimana cara membuat tabel dan yang kedua adalah cara bagaimana mengatur ukuran, warna dan jarak tabel. Well, karena tutorial ini akan sangat panjang, langsung saja simak bagaimana caranya berikut ini :

Bagaimana cara membuat tabel pada blogger

Cara Membuat dan Jenis-Jenis Tabel

Sebelum saya mulai, saya ingin menjelaskan sedikit mengenai element yang terdapat dalam tabel. Sebuah tabel terdiri dari beberapa element pelengkap seperti <table> yang didalamnya terdapat <caption> (Title table), <th> (Header table), <td> (Table Coloum) dan <tr> (Table Row).

1. Kerangka Table Sederhana (Standard)
Untuk membuat sebuah Tabel sederhana diperlukan 3 (tiga) buah element seperti <table>, <td> dan <tr> sebagai penyusunnya.

<table border="1">
<tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
<tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
<tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</table>

2. Tabel Header
Tabel header terbentuk dari penambahan element <th>. Secara default (tanpa penambahan CSS tambahan), biasanya teks yang terdapat didalamnya akan tercetak tebal dan rata tengah (center).

<table border="1">
<tbody>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
  <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
  <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

3. Menambahkan Judul Tabel
Element <caption> adalah sebuah element pada tabel untuk menambahkan judul kedalam tabel yang penempatannya tepat di bawah element <table> dan textnya secara otomatis akan rata tengah.

<table border="1">
   <caption>HEADER TITLE</caption>
<tbody>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  <tr><td>Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
  <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
  <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

4. Menggabungkan Sel-Sel (Marge Cell) Tabel
Ada dua cara menggabungkan sel table, yaitu vertical (marge row) dan horizontal (marge coloumn). Attribut yang digunakan pun ada dua, rowspan dan colspan.

Marge Cell Colspan

<table border="1">
   <caption>HEADER TITLE</caption>
<tbody>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  <tr><td colspan="2">Division 1.1</td>~~<td>Division 1.2</td>~~<td>Division 1.3</td></tr>
  <tr><td>Division 2.1</td><td>Division 2.2</td><td>Division 2.3</td></tr>
  <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

Catatan :
Menambahkan attribut colspan="2" pada element <td> berarti anda akan menggabungkan 2 cell column atau cell horizontal menjadi satu dan yang saya beri tanda warna biru diatas harus anda hapus. Nah, hal ini juga berlaku untuk penggabungan 2 sell row (vertical) dengan menambahkan attribut rowspan="2" dan menghapus table yang berada di bawahnya. Untuk menggabungkan 3 atau lebih sel menjadi satu, maka ganti angka 2 menjadi 3 dan seterusnya.

Marge Cell Rowspan

<table border="1">
   <caption>HEADER TITLE</caption>
<tbody>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  <tr><td rowspan="2">Division 1.1</td><td>Division 1.2</td><td>Division 1.3</td></tr>
  <tr>~~<td>Division 2.1</td>~~<td>Division 2.2</td><td>Division 2.3</td></tr>
  <tr><td>Division 3.1</td><td>Division 3.2</td><td>Division 3.3</td></tr>
</tbody>
</table>

Mengatur dan Mendesain Tampilan Tabel

Mengubah tampilan sebuah tabel dengan merubah warna border, background, tulisan atau mengatur jarak serta perataan text cukup menambahkan beberapa pengaturan pada kode CSS yang terdapat di dalam template.

table, th, td {
border:1px solid #ccc;
border-collapse:collapse;
font:normal normal 13px/1.4 Arial,Sans-Serif;
color:#333;
padding:.4em 0;
text-align:left;
background:#fff;
width:100%;
}

Attribut	Penjelasan
table, th dan td	pengaturan tabel secara keseluruhan
border:	mengatur warna dan ukuran border
border-collapse:	jika attribut ini tidak diberikan, maka table akan terlihat tidak rapat
font:	mengatur jenis dan ukuran huruf
color:	mengatur warna huruf yang terdapat di dalam table
padding:	mengatur jarak antara tabel dengan border
text-align:	pengaturan untuk perataan huruf (rata tengah, kiri, dan kanan)
background:	mengatur warna latar belakang tabel
width:	mengatur lebar tabel secara keseluruhan

Nah, di bawah ini adalah contoh tabel dengan pengaturan element yang terpisah-pisah dan itu berarti anda bisa melakukan pengaturan perbagian, mulai dari pengaturan judul, header, border, background dan seterusnya.

table {
  border-collapse:collapse;
}
table tr {
  background:#fafafa;
}
table caption {
  background:#000;
  vertical-align:top;
  padding:5px 10px;
  border:1px solid #bbb;
  color:#fff
}
table th, table td {
  vertical-align:top;
  padding:5px 10px;
  border:1px solid #bbb;
}
table tr:nth-child(even) {
  background:#f5f5f5;
}
table th {
  background:#418AA4;
  color:#fff;
  font-weight:bold;
}

Demo / hasil dari modifikasi kode CSS tabel di atas seperti terlihat pada gambar di bawah ini.

Rekomendasi »

Butuh Bantuan ?

Semoga penjelasan di atas bisa anda mengerti, namun jika masih kurang bisa dipahami, silahkan meninggalkan pertanyaan pada kolom komentar. Semoga apa yang saya sajikan kali ini bisa memberikan manfaat kepada anda, terima kasih dan salam blogger...!!!

Meta Tag SEO Friendly Valid HTML5

Posted: 21 Mar 2013 07:01 AM PDT

Jumpa lagi sobat...!!! Pada kesempatan kali ini saya akan membahas sedikit mengenai Meta Tag SEO (Search Engine Optimization) Friendly dan jujur saya sendiri belum terlalu paham tentang meta tag ini, tapi tidak ada salahnya jika kita bersama-sama membahas tentang Meta tag yang SEO Friendly ini.

Meta tag yang SEO Friendly pada blog mempunyai dampak yang sangat besar bagi sebuah blog. Contoh kecilnya yakni pada postingan-postingan yang sudah sobat publikasikan, apakah sudah terindex oleh search engine atau belum? Nah, Meta tag yang SEO Friendly inilah yang nantinya akan membantu sehingga postingan-postingan yang sudah di publikasikan akan terindex oleh search engine.

Well, untuk pemasangan Meta tag yang SEO Friendly pada Template ini, yuk simak aja penjelasannya berikut ini :

Login ke blogger
Pilih Rancangan » Edit HTML
Cari <b:include data='blog' name='all-head-content'/> (Gunakan Ctrl+F). Jika sudah ketemu, hapus semua kode di bawahnya sampai <b:skin><![CDATA[ dan masukkan meta tag di bawah ini :

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Your Blog Description</title>
</b:if>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
</b:if>

Keterangan :

'Your Blog Description here!' = Ganti dengan deskripsi singkat mengenai blog/web anda
'Your Keywords here!' = Ganti dengan keywords anda
'Author Name here!' = Silahkan ganti dengan nama anda

Simpan template dan rasakan perbedaannya.

Oh ya, buat para Master SEO, mohon dikoreksi jika Meta Tag SEO Friendly di atas jika masih terdapat kekeliruan. Sebelum dan sesudahnya, saya ucapkan terima kasih...!!!

Text Efek Keyboard Dengan CSS3 Pada Blog

Posted: 21 Mar 2013 07:31 AM PDT

Memepercantik postingan blog dengan menambahkan dan menampilkan beberapa efek pada text memang merupakan suatu hal yang tidak jarang bloggers lakukan, baik itu efek dengan berbagai kombinasi antara CSS, JavaScript maupun jQuery.

Nah, pada tutorial kali ini, saya akan berbagi tentang bagaimana cara menambahkan efek keyboard pada text-text tertentu dengan cara mudah dan hanya memerlukan beberapa potong kode CSS3 dan tidak memerlukan tambahan seperti Javascript maupun jQuery sehingga tidak akan mempengaruhi load time blog.

Kode CSS

lsc{
border:1px solid gray;
font-size:14px;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Bagaimana Cara Memasukkan Kedalam Template

Login ke Blogger
Pada Dashboard, pilih Template » Edit HTML
Copy kode di atas kemudian pastekan tepat di atas tag ]]></b:skin>
Selanjutnya, pilih Simpan Template

Cara Menggunakan pada Postingan Blog

Pada saat membuat postingan baru pada blog, pilih HTML (samping kanan Compose) dan gunakan kode pemanggil <lsc> dan diikuti oleh text yang akan diberikan efek keyboard serta diakhiri dengan kode penutup </lsc>. Berikut contohnya :

<lsc>Ctrl</lsc> <lsc>Shift</lsc> <lsc>Contoh yang lain</lsc>

Maka hasilnya akan terlihat seperti di bawah ini :

Ctrl Shift Contoh yang lain

Selamat Mencoba dan Semoga Bermanfaat...!!!

Syntax Highlighter dengan Tombol Source Code, Copy & Print

Posted: 21 Mar 2013 07:24 AM PDT

Apa Pengertian Syntax Highlighter? Syntax Highlighter adalah fitur dari teks editor yang berfungsi untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, font sesuai dengan istlah kategori dan mempermudah penggunanya di dalam menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup.

Syntax Highlighter merupakan sebuah media yang sering digunakan oleh para webmaster maupun blogger untuk membuat sebuah kolom untuk menempatkan source kode seperti JavaScript, HTML, CSS, PHP, XML dan lain sebagainya sehingga tampilannya terlihat lebih unik dan menarik.

LIVE DEMO

Memang sekarang ini banyak jenis Syntax Highlighter yang diposting oleh orang lain, tetapi tidak banyak dari mereka memposting Syntax yang standar. Nah, pada kesempatan kali ini saya akan berbagi kepada sobat tentang cara memasang Syntax Highlighter yang dilengkapi dengan tombol Source Kode, Copy to Clipboard, Print dan Help. Oh ya sebelum lanjut tentang pembahasan ini, saya ingin mengingatkan bahwa beberapa waktu yang lalu saya juga sudah sempat memposting sebuah artikel yang hampir sama dengan postingan saya kali ini yakni Cara Membuat Kotak Script/Css [Sintax Highlighter] pada Postingan Blog. Bagi yang berminat melihatnya, silahkan... Hehehe

Bagaimana Cara Memasukkan ke dalam Template?

Perhatikan langkah-langkah berikut ini dan saya akan memberikan penjelasan singkat dan mudah.

Login ke Blogger
Pilih Template › Edit HTML › Proceed
Cari dan Temukan tag ]]></b:skin> kemudian copy kode di bawah ini dan pastekan tepat dibawah tag ]]></b:skin> tersebut.

<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

Simpan Template

Bagaimana Cara Penggunaannya?

Copy salah satu kode di bawah ini kemudian pastekan kedalam HTML postingan, tapi ingat pilih salah satu kode saja, misalnya untuk kode CSS, maka pilih <pre class="brush:css"> kemudian sisipkan kode CSS tersebut diantara tag pembuka dan penutupnya. Berikut tag dari masing-masing kode :

CSS

<pre class="brush:css">
Masukkan kode CSS disini
</pre>

HTML

<pre class="brush:html">
Masukkan kode HTML disini
</pre>

Javascript

<pre class="brush:js">
Masukkan kode Javascript disini
</pre>

PHP

<pre class="brush:php">
Masukkan kode PHP disini
</pre>

SQL

<pre class="brush:sql">
Masukkan kode SQL disini
</pre>

Jika sobat mengalami kesulitan dalam penggunaanya, silahkan memberikan komentar di bawah.

4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger

Posted: 21 Mar 2013 07:43 AM PDT

Beberapa waktu lalu saya sempat membuat dua buah postingan yang membahas tentang Tombol / Button untuk Live Demo, Download dan lain sebagainya. Kedua postingan yang saya maksud tersebut adalah CSS Buttons With Transitional Hover Untuk Blogger dan Cara Membuat Tombol Keren [Cool Button] untuk Blogger dimana kedua tombol tersebut mempunyai efek yang berbeda tetapi menarik.

Nah, untuk kesempatan kali ini saya akan membuat dan berbagi tutorial tentang cara membuat Tombol Animasi Unik dan Menarik Untuk Blogger dengan animasi Transitional Hover dengan 4 varian yang berbeda, diantaranya animasi berwarna biru, hijau, orange dan grey atau abu-abu. Berikut Screenshootnya :

4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger

Kode CSS

Untuk penempatan kode CSS di bawah ini anda tinggal mencopynya kemudian paste ke dalam template blogger tepatnya di atas tag ]]></b:skin>

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* Blue Lsc-Button */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Lsc-Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Lsc-Button */.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Gray Lsc-Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl9bRNV16jbtYLjLuA0LSjYCktUQc2qTGjtfQNOBIZqm-OUBTOwPWlyL6U9xaaROg3JO0VI3s3Upx3qgqOLa61IyHH-T_zvw_nbjw3N0VD4W8XGXiLuAlHOFEZFYcVWBUTWzn7Fvcl9pyc/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

HTML

Untuk kode pemanggil dari CSS diatas, anda hanya memerlukan beberapa kode Tag Pemanggil di bawah ini kemudian menepatkan kode pemanggil tersebut kedalam "HTML" postingan. Oh ya, untuk efeknya sendiri, silahkan anda sorot tombol "LIVE DEMO" di bawah ini dengan pointer mouse anda.

Tombol Nuansa Biru

Live Demo

<a class="button medium blue" href="Masukkan_Link_Disini" target="_blank">Demo</a>

Tombol Nuansa Hijau

Live Demo

<a class="button medium green" href="Masukkan_Link_Disini" target="_blank">Demo</a>

Tombol Orange

Live Demo

<a class="button medium orange" href="Masukkan_Link_Disini" target="_blank">Demo</a>

Tombol Grey

Live Demo

<a class="button medium gray" href="Masukkan_Link_Disini" target="_blank">Demo</a>

Keterangan :

Medium adalah ukuran Tombol Sedang, anda bisa menggantinya dengan kata "big" untuk ukuran besar dan "small" untuk ukuran kecil.
Masukkan_Link_Disini adalah tempat untuk memasukkan link yang dituju
Demo silahkan anda ganti dengan kata-kata anda sendiri. Anda bisa menggunakan kata Download, Info, More dan lain sebagainya.

Butuh Bantuan ?

Jika anda membutuhkan bantuan atau ingin bertanya seputar tutorial di atas, silahkan meninggalkan komenter pada form komentar di bawah postingan ini. Terima kasih...!!!

Cara Membuat Peringatan Saat Blog Dalam Perbaikan

Posted: 21 Mar 2013 07:34 AM PDT

Mengedit bahkan mengganti template blog merupakan suatu hal yang paling sering dilakukan oleh seorang blogger, namun ketika melakukan pengeditan atau penggantian template, tentu memakan waktu yang cukup lama sehingga tampilan baru tersebut bisa teraplikasikan dengan segera sesuai dengan apa yang diinginkan.

Pada saat pengeditan template berlangsung, sering kali tampilan blog tersebut tidak sempurna atau acak-acakan sehingga mengganggu para visitor dengan tampilan blog yang kurang enak untuk dilihat. Nah, untuk mengakalinya, mungkin diperlukan sebuah pemberitahuan khusus agar para pengunjung tidak dapat mengakses untuk sementara waktu blog yang sedang dalam perbaikan tersebut dengan cara membuat sebuah peringatan bahwa blog tersebut sedang dalam perbaikan / maintenance.

Tetapi kekurangan pada saat menerapkan tips ini pada blog yakni pada saat kita ingin melakukan Preview atau pratinjau karena apa yang pengunjung lihat sama persis dengan apa yang kita lihat sehingga mempersulit kita untuk melakukan pratinjau tentang hasil dari editing template.

Tips yang satu ini mungkin sangat cocok untuk para bloggers yang sudah sangat paham [Advanced] dengan kode-kode template yang tidak memerlukan yang namanya Preview/pratinjau pada saat melakukan pengeditan template blog.

Nah, untuk para sahabat bloggers yang ingin menggunakan cara ini, berikut kode CSS yang diperlukan dan bagaimana cara meletakkannya kedalam Template.

CSS

html {
height: 100%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6VRMbdtzVfu7Gq4YAG9Pkse8Z2V-wF_LlpjtCubROecj1jJWSAo6QEA-c0l5RJmnqvaSwBiDR_ixEWXDOaT3HV10wew989dbj_b0WHT32Vudmbn5LFbjVM-tAFhq_De8rPXUu2ob-J6N/s1600/lostsector-under-maintenance.gif) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}

Keterangan :

URL yang berwarna Merah pada kode CSS di atas adalah URL gambar yang nantinya akan jadi pemberitahuan bahwa blog sedang dalam perbaikan/maintenance. Silahkan diganti dengan URL gambar yang sobat desain sendiri.

Bagaimana Cara Meletakkan CSS Kedalam Template

Untuk penempatannya sendiri di dalam template, cukup mengcopy kode CSS di atas dan mempastenya tepat di atas tag ]]></b:skin> serta lanjutkan dengan mengklik tombol Save atau pratinjau untuk melihat hasilnya.

Selamat mencoba dan semoga bermanfaat. Terima kasih, salam bloggers...!!!

Cara Mengatasi "Peringatan Missing Required Field Updated"

Posted: 21 Mar 2013 07:18 AM PDT

Apa yang menyebabkan adanya Peringatan: Missing required field "updated" dan bagaimana cara mengatasinya?

Sobat mungkin mendapatkan peringatan Missing required field "updated" pada saat mengecek blog sobat di webmaster tool richsnippets dan mencari solusi untuk memperbaiki peringatan tersebut sehingga bisa sobat terdampar di blog ini... hehehehe...!!!

Kembali ke laptop...!!!

Kebanyakan dari bloggers tidak pernah memperhatikan hal-hal seperti ini dan hanya berfokus kepada hal-hal lain seperti sibuk mencari backlink yang berkualitas, mencari ide-ide segar untuk mempersiapkan postingan selanjutnya dan tidak memperhatikan kesehatan blognya sendiri. Terus apa yang menyebabkan adanya peringatan missing required field "update" ini? Penyebab adanya Peringatan : Missing required field "updated" yakni karena googlebot tidak dapat mendeteksi tanggal dan jam postingan pada saat sobat menerbitkan atau memposting artikel baru.

Memang banyak blogger lain beranggapan bahwa peringatan semacam itu tidaklah penting dan tidak akan berpengaruh terhadap pagerank blog pada search engine, tetapi tidak menurut saya, kenapa? karena jika webmaster seperti google sendiri sudah menemukan adanya error pada blog dan memberikan peringatan, berarti blog tersebut sudah dinyatakan tidak sehat.

Terus bagaimana cara mengatasinya?

Cara mengatasi peringatan error tersebut tidaklah susah, hanya saja memerlukan ketelitian dalam memasang beberapa potong kode ke dalam template blog, namun sebelum pamasangan kode sobat lakukan, saya sarankan untuk membackup template karena apabila terjadi kesalahan dalam pemasangannya, sobat bisa mengembalikannya ke keadaan semula.

Kode yang diperlukan dan cara pemasangannya ke dalam blog.

Langkah pertama yang sobat harus lakukan yakni login ke blogger terlebih dahulu dengan akun yang sobat punya
Pada Dashboard, pilih Template » Edit HTML serta jangan lupa mencentang "Expand Template Widget
Langkah selanjutnya cari kode seperti di bawah ini :

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

Jika sudah menemukan kode seperti di atas, ganti kode yang saya beri tanda merah di atas dengan kata "updated". Maka hasilnya akan terlihat seperti di bawah ini :

<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

Kemudian simpan template.

Namun, jika kode di atas tidak terdapat dalam template, maka sobat tinggal mencopy kode di atas dan memasukkannya ke dalam template (ada tambahan kode lainnya) dan berikut caranya :

Pertama cari kode <b:if cond='data:post.hasJumpLink'>
Jika sudah ketemu, copy kode di bawah ini dan pastekan tepat di atas kode <b:if cond='data:post.hasJumpLink'>

<div class='vcard' id='hcard- Ganti dengan nama sobat'>
<span class='fn n'>
<span class='given-name'></span>
</span>
<a class='updated' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='updated' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</div>

Langkah selanjutnya, simpan template sobat dan lihat hasilnya

Jika penjelasan di atas masih belum dimengerti, silahkan memberikan komentar di bawah & Insya Allah saya akan membantu sobat dalam pemasangannya. Sekian dan terima kasih, semoga artikel atau postingan saya kali ini memberikan manfaat bagi sobat. Salam bloggers...!!!

6 Style / Skin Widget Search Box Untuk Blogger

Posted: 21 Mar 2013 07:27 AM PDT

Search Box atau biasa juga disebut sebagai kotak pencari adalah sebuah media atau alat yang bisa digunakan untuk mencari dan menemukan sesuatu hal yang berhubungan dengan keyword atau kata kunci yang diketikkan oleh seseorang kedalam form dan diikuti dengan menekan tombol enter atau mengklik tombol search yang tersedia.

Search box mempunyai peranan yang sangat vital bagi blog maupun website karena jika seorang pengunjung ingin mencari sesuatu, misalnya mencari sebuah artikel yang berhungan dengan widget blogger, maka pengunjung tinggal menggunakan alat pencari tersebut dengan memasukkan kata "widget blogger" kedalam form dan ketika ia menekan tombol enter atau search, maka secara otomatis semua judul maupun isi postingan blog/web yang sudah pernah diposting akan ditampilkan semuanya.

6 Style / Skin Widget Search Box Untuk Blogger

Nah, karena widget search box ini saya anggap sangatlah penting, maka pada kesempatan kali ini saya akan memberikan 6 Style / Skin Widget Kotak Pencari untuk Blog/Web khusus buat para pengunjung setia Lostsector beserta bagaimana cara memasangnya pada blog. Berikut cara memasangnya dan jenis skin dengan 6 pilihan yang berbeda.

Cara Memasang Pada Blog

Terlebih dahulu login ke Blogger
Pada Dashboard, pilih Tata Letak » Add Gadget » HTML/JavaScript
Langkah selanjutnya, copy salah satu kode yang saya sediakan di bawah kemudian pastekan ke dalam form HTML/JavaScript Tersebut
Lanjutkan dengan menekan tombol Simpan.

Skins Search Box Widget

SKIN 01

KODE

SKIN 02

KODE

SKIN 03

KODE

SKIN 04

KODE

SKIN 05

KODE

SKIN 06

KODE

Selamat Mencoba dan semoga bermanfaat...!!!

Cara Membuat Auto ReadMore Blogspot dengan Image Thumbnail

Posted: 21 Mar 2013 01:35 AM PDT

Cara Membuat Auto Readmore Blogspot dengan Thumbnail

Memang sudah banyak blog yang membuat artikel tentang bagaimana cara membuat auto readmore ini, tetapi sebagian dari blog atau website tersebut tidak menjelaskan secara detail tentang bagaimana cara membuat karakter yang ditampilkan bisa rata kanan kiri dan tidak menjelaskan bagaimana memasukkan url image ke dalam auto readmore tersebut.

Nah pada kesempatan kali ini saya akan menjelaskan dari beberapa fitur yang bisa ditambahakan pada auto readmore ini, seperti memasukkan url image atau mengganti karakter readmore menjadi gambar serta karakter yang bisa rata kanan kiri, rata kiri, rata tengah dan rata kanan. Simak penjelasan tentang pemasangan dan penambahan fitur auto readmore berikut ini :

1. Langkah-Langkah Pemasangan

Login ke Blogger
Pilih Template » Edit HTML » Centang Expand Template Widget
Copy kode di bawah ini dan pastekan tepat di atas tag </head>

Update :

Tag conditional (warna biru) yang saja saya tambahkan pada script di atas adalah tag yang berfungsi untuk menyembunyikan "Tombol Auto Readmore" pada halaman postingan dan halaman statis (laman) dan hanya akan menampilkan pada Homepage atau beranda.

Pengaturan Lanjutan :

summary_noimg = 500; adalah jumlah karakter yang ditampilkan tanpa image atau gambar
summary_img = 400; adalah jumlah karakter yang ditampilkan jika terdapat sebuah gambar
img_thumb_height = 100; adalah tinggi gambar / image
img_thumb_width = 100; adalah lebar gambar / image, silahkan sobat sesuaikan sendiri sesuai keinginan

Langkah selanjutnya cari tag <data:post.body/> lalu ganti dengan kode di bawah ini :

<b:if cond='data:blog.pageType !== "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/><span style='padding-top:3px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more »</b></a></span>
</b:if>

Keterangan :

Read more » silahkan sobat ganti dengan kata-kata sendiri. Contoh Baca Selengkapnya », Baca Selanjutnya » dan lain sebagainya.

Nah, sekarang untuk melihat hasilnya, pilih pratinjau dulu dan kalau sobat sudah merasa pas dengan hasil yang ditampilkan, baru klik save atau simpan.

2. Penambahan fitur

Untuk mengganti kata Read more » dengan image atau gambar, ganti kata Read more » dengan kode di bawah ini beserta url gambar yang sudah diupload :

<img border='0' src='url (url image disini)'/>

Nah selanjutnya, untuk membuat karakter yang akan ditampilkan menjadi rata kanan kiri, cari kode di bawah ini :

<div expr:id='"summary" + data:post.id'>

Dan tambahkan style='text-align:justify;' tepat dibelakang kode "<div" atau di depan kode "expr;id". Jika sudah dimasukkan, maka hasilnya akan terlihat seperti ini :

<div style='text-align:justify;' expr:id='"summary" + data:post.id'>

Sampai disini mengerti kan...?? hehehe...!!! Kalau penjelasan di atas masih belum sobat pahami, silahkan meninggalkan komentar pada di bawah. Oh ya, untuk kode javascriptnya sendiri, sobat tidak usah upload ke tempat hostingan javascript yang sobat miliki karena penggunaan javascript yang mentah pada template tidak akan membebani loading pada blog, yaaaa memang sih dampaknya akan menambah ukuran template, tapi itu tidak menjadi masalah.

Cara Memasang Parser HTML/Javascript Tool pada Blog

Posted: 21 Mar 2013 04:05 AM PDT

Tool Parser adalah sebuah tool yang berfungsi untuk menconvert kode HTML/Javascript kedalam karakter tertentu (tergantung kode yang akan diparse) sehingga bisa menampilkan kode pada web/blog, baik itu pada widget maupun didalam postingan. Nah, jika anda bertanya, untuk apa dan kenapa saya harus memasang tool ini ? Maka saya akan menjawabnya : "Karena tujuan utama dari pemasangan Tool HTML/Javascript ini yakni untuk memberikan kemudahan kepada seseorang ataupun anda sendiri untuk memparser kode dan tanpa harus mencari kesana kemari lagi...!"

Cara Memasang Parser HTML/Javascript Tool pada Blog

Untuk itu pada kesempatan kali ini saya menyempatkan diri untuk membuat tutorial tentang bagaimana cara memasang HTML/Javascript Tool (powered by google webmaster) ini pada blog dan bagi anda yang berminat memasang tool ini, berikut panduan lengkapnya :

Pertama login ke akun blogger yang anda kelola kemudian buat sebuah Postingan baru atau laman baru.
Selanjutnya, pada sudut kiri atas postingan ada 2 (dua) tab, yang pertama tab compose dan yang kedua tab HTML. Nah untuk memunculkan tool ini, anda harus memasukkan kode yang nantinya saya berikan kedalam tab HTML. Lihat gambar untuk lebih jelasnya...!!!

Sekarang, copy kode/script di bawah ini dan pastekan kedalam tab HTML postingan seperti yang sudah saya jelaskan di atas.

<center>

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=450&h=200&title=Code+HTML+Converter&border=%23ffffff%7C0px%2C1px+solid+%2399BB66%7C0px%2C2px+solid+%23AACC66%7C0px%2C2px+solid+%23BBDD66&output=js"></script> </center>

Klik Publikasikan atau Pratinjau untuk melihat hasilnya dan Untuk melihat contohnya secara langsung, silahkan KLIK DISINI...

Gimana, gampang bukan...??? Semoga bermanfaat...!!! Salam Blogger...!!!