Learning Life Together

Home > All posts

Cara Membuat Drop Down Menu di Blog

<h2 class="post-title entry-title">
</h2>
<div class="post-header">
</div>
<div dir="ltr" style="text-align: left;">
Sebenarnya sangat mudah. Saat
 ini semakin banyak blogger pemula yang tertarik untuk belajar 
dasar-dasar kode untuk mengatur tampilan blognya. Jadi kali ini saya 
hendak berbagi cara membuat drop down menu yang horizontal. Menu ini bisa ditaruh di bawah header, di atas footer, atau di mana saja dalam posisi horizontal.
<a href="http://www.blogger.com/blogger.g?blogID=378694305801421948" name="more"></a> 
<div style="text-align: justify;">
Lalu bagaimana cara membuat menu drop down horizontal ini? 
Sebenarnya anda bisa menggunakan CSS yang sangat sederhana untuk 
melakukan ini. Untuk memasang Drop down menu horizontal ada dua langkah 
yang harus dilakukan, yaitu: 
<h3>
MEMASANG CSS MENU DROP DOWN DI BLOG </h3>
</div>
<ul style="text-align: justify;">
<li>Login ke dalam akun blogger anda</li>
<li>Pilih blog yang akan dipasangi</li>
<li>Pilih Menu Template</li>
<li>Klik Tombol EDIT HTML. Setelah itu akan muncul jendela konfirmasi, silahkan klik LANJUTKAN</li>
<li>Carilah kode ]]></b:skin> 
Copy kode CSS di bawah ini dan paste tepat di atas kode ]]></b:skin> tadi... <div style="text-align: center;">
</div>
</li>
</ul>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<blockquote class="tr_bq">
#RickyMenu { 
    background: warna1; 
    width: 880px; 
    height: 35px; 
    font-size: 12px; 
    font-family: Arial, Tahoma, Verdana; 
    color: warna2; 
    font-weight: bold; 
    margin-bottom: 30px; 
    padding: 2px; 
 
} 
#Rickybox { 
    width: 875px; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 
 
#punch { 
    margin: 0; 
    padding: 0; 
} 
#punch ul { 
    float: left; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#punch li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#punch li a, #punch li a:link, #punch li a:visited { 
    color: warna2; 
    display: block; 
    font-size: 16px; 
    font-family: Georgia, Times New Roman; 
    font-weight: normal; 
    text-transform: lowercase; 
    margin: 0; 
    padding: 9px 15px 8px; 
} 
#punch li a:hover, #punch li a:active { 
    background: warna2; 
    color: warna1; 
    margin: 0; 
    padding: 9px 15px 8px; 
    text-decoration: none; 
} 
#punch li li a, #punch li li a:link, #punch li li a:visited { 
    background: warna1; 
    width: 150px; 
    color: warna2; 
    font-size: 14px; 
    font-family: Georgia, Times New Roman; 
    font-weight: normal; 
    text-transform: lowercase; 
    float: none; 
    margin: 0; 
    padding: 7px 10px; 
    border-bottom: 1px solid #FFF; 
    border-left: 1px solid #FFF; 
    border-right: 1px solid #FFF; 
} 
#punch li li a:hover, #punch li li a:active { 
    background: warna2; 
    color: warna1; 
    padding: 7px 10px; 
} 
#punch li { 
    float: left; 
    padding: 0; 
} 
#punch li ul { 
    z-index: 9999; 
    position: absolute; 
    left: -999em; 
    height: auto; 
    width: 170px; 
    margin: 0; 
    padding: 0; 
} 
#punch li ul a { 
    width: 140px; 
} 
#punch li ul ul { 
    margin: -32px 0 0 171px; 
} 
#punch li:hover ul ul, #punch li:hover ul ul ul, #punch li.sfhover ul ul, #punch li.sfhover ul ul ul { 
    left: -999em; 
} 
#punch li:hover ul, #punch li li:hover ul, #punch li li li:hover ul, 
#punch li.sfhover ul, #punch li li.sfhover ul, #punch li li li.sfhover 
ul { 
    left: auto; 
} 
#punch li:hover, #punch li.sfhover { 
    position: static; 
}</blockquote>
</blockquote>
</div>
<ul style="text-align: justify;">
<li>Ganti kode warna1 dan warna2 dengan kode warna yang anda inginkan sebagai contoh bisa mengikuti kode di bawah ini:</li>
</ul>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<blockquote class="tr_bq">
Menu Hitam 
warna1 = #555555 
warna2 = #FFFFFF 
 
 
Menu Biru 
warna1 = #66bbdd 
warna2 = #004661 
 
 
Menu Hijau 
warna1 = #38761d 
warna2 = #FFFFFF 
 
Menu Abu-abu 
warna1 = #d4d4d4 
warna2 = #555555 
 
 
Menu Kuning 
warna1 = #ffd966 
warna2 = #d4812a </blockquote>
</blockquote>
</div>
<ul style="text-align: justify;">
<li>Jika sudah mengganti semua kode warna di atas silahkan klik SIMPAN TEMPLATE....</li>
</ul>
<h3 style="text-align: left;">
 MEMASANG KODE HTML DROP DOWN MENU DI TATA LETAK BLOG</h3>
<ul style="text-align: justify;">
<li>Sekarang masuk ke Menu TATA LETAK atau LAYOUT</li>
<li>Klik  ADD A GADGET atau TAMBAH GADGET</li>
<li>Pilih HTML/JAVASCRIPT. Biarkan kolom judul nama gadget kosong, lalu copy paste kode di bawah ini ke kolom HTML yang tersedia</li>
</ul>
<div style="text-align: justify;">
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<div id="RickyMenu"> 
       <div id="Rickybox"> 
      <ul id="punch"> 
        <li><a href="#">Home</a></li> 
        <li> 
          <a href="#">Sample Page</a> 
          <ul> 
            <li> 
              <a href="#">Sub Page #1</a> 
              <ul> 
                <li><a href="#">Sub Sub Page #1</a></li> 
                <li><a href="#">Sub Sub Page #2</a></li> 
                <li><a href="#">Sub Sub Page #3</a></li> 
              </ul> 
            </li> 
            <li><a href="#">Sub Page #2</a></li> 
            <li><a href="#">Sub Page #3</a></li> 
            <li><a href="#">Sub Page #4</a></li> 
            <li><a href="#">Sub Page #5</a></li> 
          </ul> 
        </li> 
        <li><a href="#">Sample Post</a></li> 
        <li><a href="#">Blog Page</a></li> 
      </ul> 
    </div> 
  </div></blockquote>
</blockquote>
</div>
<ul style="text-align: justify;">
<li>Edit semua nama menu sesuai keinginan anda. Jangan lupa mengganti tanda # dengan alamat URL yang anda inginkan</li>
<li>Klik SIMPAN</li>
<li>Atur posisi gadget drop down menu horizontal ini di tempat yang anda
 inginkan, lalu klik tombol SIMPAN SETELAN di bagian kanan atas layar.</li>
</ul>
<div style="text-align: justify;">
Jika anda melakukan langkah-langkah di atas dengan benar, anda akan 
melihat sebuah horizontal dropdown menu di tempat yang anda inginkan. 
Bentuknya kurang lebih seperti gambar di bawah ini.</div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Menu horizontal dropdown" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHFcb_jid3-Fg1frk5r9gfqduL3-_E0TZbydzz4S_kcOnJPZ8CG8C4ohZ2Dq70K5tlMigXAH_vHD8qpeY1QUoYCEChr7ZfyHC0cG1LzCPIAKH-cJ9-nD36N6dmw0arvh8ci4KVEMEy3Lxg/s320/menu+horizontal+dropdown.jpg" title="Menu horizontal dropdown" width="320" /></div>
 
Untuk Menambah Item di dalam drop down menu horizontal ini sangatlah mudah: 
<ul>
<li>Silahkan cari pada bagian akhir ada kode seperti ini:</li>
</ul>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<li><a href="#">Blog Page</a></li> 
      </ul> </blockquote>
</blockquote>
<ul>
<li>Tepat di bagian atas </ul> bisa disisipkan menu baru, dan akan terlihat seperti di bawah ini:</li>
</ul>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<li><a href="#">Blog Page</a></li> 
<li><a href="LINK BARU">TEKS BARU</a></li> 
      </ul> </blockquote>
</blockquote>
<ul>
<li>Jika menu tambahan lebih dari satu akan terlihat seperti di bawah ini</li>
</ul>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<li><a href="#">Blog Page</a></li> 
<li><a href="LINK BARU 1">TEKS BARU 1</a></li> 
<li><a href="LINK BARU 2">TEKS BARU 2</a></li> <li><a href="LINK BARU n">TEKS BARU n</a></li> 
</ul></blockquote>
</blockquote>
 
<ul>
<li>Jika salah satu menu tambahan mempunyai sub menu, maka perhatikan 
kode </li> menu tersebut yang diturunkan untuk membuka ruang baru 
bagi sub menu di dalam menu tersebut</li>
</ul>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<li><a href="#">Blog Page</a></li> 
<li><a href="LINK BARU 1">TEKS BARU 1</a></li> 
<div style="color: blue;">
<li><a href="LINK BARU 2">TEKS BARU 2</a> </div>
<div style="color: blue;">
        <li><a href="LINK BARU SUB MENU 1">SUB MENU 1</a></li></div>
<div style="color: #38761d;">
        <li><a href="LINK BARU SUB MENU 2">SUB MENU 2</a></li></div>
<div style="color: blue;">
</li></div>
</blockquote>
<blockquote>
<li><a href="LINK BARU n">TEKS BARU n</a></li>  

      </ul></blockquote>
</blockquote>
 
Ok, silahkan divariasikan sendiri cara untuk menambah dan mengurangi 
item pada drop down menu horizontal di atas pada blog anda. </div>

Sebenarnya sangat mudah. Saat ini semakin banyak blogger pemula yang tertarik untuk belajar dasar-dasar kode untuk mengatur tampilan ...

Cara Membuat Blog Gratis

Mungkin Sobat sedang kebingungan bagaimana cara
membuat blog, apakah karena tugas sekolah yang diharuskan
murid-muridnya mempunyai blog agar bisa mengikuti latihan dan mengerjakan tugas
di blog masing-masing agar mendapat nilai, ataukah ada sebab lain seperti ingin
berbagi kisah hidup, kata mutiara, kata bijak, kisah
lucu, atau foto lucu supaya
dapat diketahui oleh khalayak umum, ataupun Sobat ingin membuat blog karena ada
teman yang bisa mendapatkan penghasilan dari blog. 
 
<div class="separator" style="clear: both; text-align: center;">
<img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCSLoxiJ0edhNgj9jDUOBVb25GIV_T5PRNjQ26_RxrNxdqeajiHJvUSOo0p9HlwUoodicV2qcQtUCY0gTEPuSgS8XkQtuMKCTGXJ4kcJ-KLfhR0lp5DtYrwloHo8OXB4zA4eDMJNAkSw/s200/bloggingan3-situs-penyedia-layanan-blog.jpg" width="200" /></div>
<div align="center" class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: center;">
 </div>
<div class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
Blog pada dasarnya
disebut sebagai Web Blog yang merupakan salah satu aplikasi web yang mana
postingan atau artikel yang diposting didalam blog sering sekali berurutan,
yaitu dari tulisan terbaru hingga tulisan yang paling lama. Blog merupakan salah satu media yang tepat untuk
mencurahkan segala pikiran kita, mengenai pengetahuan, peristiwa, atau
pengalaman yang dialami. kegiatan di blog atau biasa disebut blogging menjadi
begitu sangat menyenangkan ketika apa yang kita utarakan, apa yang kita
ungkapkan, apa yang kita tulis di blog menghasilkan manfaat bukan hanya bagi
diri kita sendiri, tapi bagi orang lain. Untuk para sahabat yang suka membuat
blog, berikut ini akan saya sampaikan beberapa Situs Penyedia Layanan
Untuk Membuat Blog Gratis yang dapat menjadi referensi dalam membuat
blog.</div>
<div class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
 Untuk link Download cara
membuat blog, silahkan download di sini :</div>
<div class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto;">
 </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.4shared.com/office/l1JV1IyU/BLOG.html" target="_blank"><img alt="http://www.4shared.com/office/l1JV1IyU/BLOG.html" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkexlQ_3M3V7brNh8b-rxjktVi-XZd2UNesqHzcKPCjzcR1jRO-K_E9WP1Nc8PE4Ex018X3HzWQQSn9-Bsj08e4gzgJx73uA8FDIFYW8I_RY2k5z5TKn2X09EDJvGX1X5fXc5f7jsOrbI/s1600/button-download.gif" /></a></div>
<div align="center" class="MsoNormal" style="line-height: normal; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: center;">
</div>

Mungkin Sobat sedang kebingungan bagaimana cara membuat blog , apakah karena tugas sekolah yang diharuskan murid-muridnya mempunyai blog aga...

Cara Membuat Tulisan Berjalan Di Blog

<a href="http://razebook.blogspot.com/2013/12/cara-membuat-tulisan-berjalan.html">Cara Membuat Tulisan Berjalan Di Blog</a>
 Saya tidak tahu pasti apa kegunaan dari cara membuat tulisan text 
berjalan ini, namun jika kamu pengen mempraktekkan trik ini bisa saya 
kasih lihat contoh di sini . pergerakan bisa kamu rubah sesuai kehendak.
 jadi kamu bisa bergerak dari bawah ke atas atau sebaliknya. 
 
<a href="http://razebook.blogspot.com/2013/12/cara-membuat-tulisan-berjalan.html">TEXT Bergerak</a> adalah text yang bisa dipasangkan di blog dan bisa di atur dengan arah yang disesuaikan. 
berikut adalah cara membuat tulisan text bergerak dari segala arah. 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
Kamu copy code biru nya di bawah ini. <marquee direction="up" scrollamount="2" align="center"> TULISAN BERJALAN ADA DISINI </marquee> 
 
Keterangan kode warna kode merah : 
<ol>
<li>Ganti Up untuk merubah arah bawah 
ke atas </li>
<li>Ganti Down untuk merubah atas
ke bawah</li>
<li>Ganti Left untuk merubah kiri
ke kanan</li>
<li>Ganti Right Untuk merubah  kanan
ke kiri </li>
<li>text orange adalah tulisan imajinasi bebas kamu... </li>
</ol>
Silahkan jika kamu ingin memasang <a href="http://razebook.blogspot.com/2013/12/cara-membuat-tulisan-berjalan.html">TEXT BERJALAN SENDIRI di widget blog</a> caranya sama seperti biasanya  
<ol>
<li>Masuk ke blogger</li>
<li>Pilih TATA LETAK - pilih ADD GADGET/TAMBAH GADGET - Klik HTML/Javascript</li>
<li>Patekan kode yang warna biu di atas</li>
<li>Simpan kodenya.</li>
</ol>
jangan dilihat terus tulisannya ya... nanti kamu bisa puyeng... he..he.. 
 
 
Gimana bisa khan.. terima kasih sudah membaca artikle<a href="http://razebook.blogspot.com/2013/12/cara-membuat-tulisan-berjalan.html"> Cara membuat TEXT Berjalan di blog</a> . semoga berhasil.

Cara Membuat Tulisan Berjalan Di Blog Saya tidak tahu pasti apa kegunaan dari cara membuat tulisan text berjalan ini, namun jika kamu pen...

Cara Memasang Jam di Blog

<div style="text-align: center;">
<a href="http://www.blogger.com/blogger.g?blogID=378694305801421948" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="http://www.blogger.com/blogger.g?blogID=378694305801421948" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvRbhkMlJOzrgDnPEunbx-oesoKCIlEoc6g0zUNmNuH2vFL9yM6rkM0J8Lim75im9qoTALLI0iVnQiyjJR51e1Vd_Cj7UadolhPKBFIXmTOcjwLAoWk_Wqv67dMrbxYWFaCzBOoIzerSc/s200/Svn_Segmen_810in_200511130557_ll.jpg.png" width="200" /> </div>
Time is Money = waktu adalah uang. kali ini saya
mau memberi tahu tentang bagaimana memasang jam di blog. agar blog kita
mempunyai jam ada banyak cara untuk memasang jam di blog. Ada sebuah 
situs yang menyediakan berbagai bentuk jam apalagi di situs tersebut 
kita tinggal mengcopy dan paste kodenya tanpa harus registrasi terlebih 
dahulu ke situs tersebut situs-situs tersebut sangatlah banyak tetapi 
yang banyak di pakai adalah :
 
 <a href="http://www.clocklink.com/">www.clocklink.com</a> 
 
Berikut cara memasang widget Jam di blogger
 
 
<ol>
<li>Pertama kunjungi www.clocklink.com</li>
<li>lalu klik pada menu Gallery (disitu kita bisa memilih kategori-kategori yang ingin kita pilih)</li>
<li>sebagai contoh kategori analog kita pilih,</li>
<li>kemudian klik view html tag
 pada kotak di bawah jam yang kita pilih lalu akan timbul halaman baru 
di window baru. disitu nanti kita ada ketentuan-ketentuan yang memakai 
bahasa inggris,</li>
<li>langsung aja kita pilih accept</li>
<li>Selanjutnya
 kita diminta memilih warna (color), {time zone untuk Waktu Indonesia 
Bagian Barat sebaiknya memilih JOG : Jogyakarta Indonesia Time (GMT + 
07.00)} serta jangan lupa tuliskan ukuran (size) jam agar sesuai dengan 
sidebar tempat meletakan jam itu nantinya. Dapat juga diatur kemudian.</li>
<li>Copy seluruh kode HTML kemudian disimpan di komputer kita contoh pada notepad.</li>
</ol>
Langkah selanjutnya kita menuju blog kita
 
<ol>
<li>Silahkan login ke blogger dengan ID anda </li>
<li>Klik Tata Letak </li>
<li>Klik tab Elemen Halaman
</li>
<li>Klik Tambah Gadget</li>
<li>Klik tanda plus (+) untuk HTML/Javascript</li>
<li>Copy paste kode yang kita taruh di notepad tadi ke dalam kolom konten yang tersedia</li>
<li>selesai  </li>
</ol>
 
<div style="text-align: center;">
 SEMOGA BERHASIL...................... </div>

Time is Money = waktu adalah uang. kali ini saya mau memberi tahu tentang bagaimana memasang jam di blog. agar blog kita mempunyai jam a...

Mengganti "Older Posts" Dengan Angka

<div class="top_post">
</div>
Secara umum, navigasi untuk pindah halaman di blogspot biasanya 
menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer 
Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa 
berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman 
ke postingan yg lama maupun baru. 
Nha trik kali ini akan menjelaskan 
bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer 
Posts (posting baru)" menjadi angka seperti gambar di bawah ini 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwN9dflYduXKaAEWAmT7bnRU67ukAXaNWlbx5L8wSCcetK4J1Gas0f9CkqWc2DHsttQkaRZSSI0G-j92jw-yyGjne_OxXHvnLF2G7u_ja42z-MVo5IQR1JxZSj9ZxbixJeV6maZBMSZx-c/s1600/numbered-page-navigation-for-blogger.png"><img alt="" border="0" height="55" id="BLOGGER_PHOTO_ID_5744999610205121234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwN9dflYduXKaAEWAmT7bnRU67ukAXaNWlbx5L8wSCcetK4J1Gas0f9CkqWc2DHsttQkaRZSSI0G-j92jw-yyGjne_OxXHvnLF2G7u_ja42z-MVo5IQR1JxZSj9ZxbixJeV6maZBMSZx-c/s400/numbered-page-navigation-for-blogger.png" style="height: 44px; width: 317px;" width="400" /></a> 
 
1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML" 
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut 
<div class="alert">
.showpageArea a { 
text-decoration:underline; 
} 
.showpageNum a { 
text-decoration:none; 
border: 1px solid #cccccc; 
margin:0 3px; 
padding:3px; 
} 
.showpageNum a:hover { 
border: 1px solid #cccccc; 
background-color:#cccccc; 
} 
.showpagePoint { 
color:#333; 
text-decoration:none; 
border: 1px solid #cccccc; 
background: #cccccc; 
margin:0 3px; 
padding:3px; 
} 
.showpageOf { 
text-decoration:none; 
padding:3px; 
margin: 0 3px 0 0; 
} 
.showpage a { 
text-decoration:none; 
border: 1px solid #cccccc; 
padding:3px; 
} 
.showpage a:hover { 
text-decoration:none; 
} 
.showpageNum a:link,.showpage a:link { 
text-decoration:none; 
color:#333333; 
}</div>
 
 3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut. 
<div class="alert">
 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<script type='text/javascript'> 
var pageCount=5; 
var displayPageNum=5; 
var upPageWord =&#39;Previous&#39;; 
var downPageWord =&#39;Next&#39;; 
</script> 
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> 
</b:if> </b:if> 
</div>

 Kalau sudah silahkan dilihat hasilnya.

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan ...

Membuat Read More / Baca Selengkapnya di Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6vSqo2CTe4fqFJaWdxyR7Cy4Hj0WIxaQGNzIhWJ2VIQw_z5GJJww2ipVLtuEZgwWLf_XtFHkRLzW2U_lYQx3b2AWpILq2JYqN_HGjyD1vfRlfz7M5lCU6xnsly3q5lvuJzKBfNCMRn30/s1600/readmore20kt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6vSqo2CTe4fqFJaWdxyR7Cy4Hj0WIxaQGNzIhWJ2VIQw_z5GJJww2ipVLtuEZgwWLf_XtFHkRLzW2U_lYQx3b2AWpILq2JYqN_HGjyD1vfRlfz7M5lCU6xnsly3q5lvuJzKBfNCMRn30/s200/readmore20kt.png" width="200" /></a></div>
Cara Mudah Membuat Read More Otomatis di Blog – banyak para 
blogger yang masih kebingungan untuk membuat readmore secara otomatis di
 blog mereka, walaupun banyak sekali artikel-artikel yang mebahas 
bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena 
banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham
 dengan caranya. Disini saya akan menjelaskan cara membuat readmore 
otomatis secara detail sehingga blogger pemula sekalipun bisa 
membuatnya. 
 
Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll. 
 
Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang 
panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya 
menampilkan gambar dan beberapa kalimat saja. 
 
<h3>
Cara membuat readmore otomatis dengan gambar</h3>
<ul>
<li>Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.</li>
<li>Cari Kode </head>.</li>
<li>Copy paste kode dibawah ini tepat di atas kode </head></li>
</ul>
<blockquote class="tr_bq">
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style> .post-body{text-align:justify;} .post-body img{max-width:none;width:auto;} .read-more{float:left; padding-top: 10px;} .read-more
 a{ color: #fff!important;text-shadow:0 1px 0 
rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px
 Arial;padding:5px;} .read-more a:hover{text-decoration:none;background:#666;} .pic{border:
 10px solid #fff;float:left;height:165px;width:250px;margin-right: 
20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;} .grow img{height:165px;width:250px;transition: all 2s ease;} .grow img:hover{width:400px;height:250px;} </style> <script type='text/javascript'> var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar summary_noimg = 300; //banyaknya huruf jika tidak ada gambar summary_img = 250; //banyaknya huruf jika ada gambar img_thumb_height = 165; img_thumb_width = 250; </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 = 
'<div class="grow pic"><img src="'+img[0].src+'" 
width="'+img_thumb_width+'px" 
height="'+img_thumb_height+'px"/></div>';summ = 
summary_img;}}var summary = imgtag + '<div>' + 
removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = 
summary;} //]]></script> </b:if> </b:if> </blockquote>
<ul>
<li>Save Template anda.</li>
<li>Kemudian scroll template anda kebawah cari kode seperti berikut:</li>
</ul>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPE0DXoDnc4cKVr_C-L4vBJmyYhjgrofuzk67vc62Z3drR3wE3VhnCNN90vObdftp13DMnR6hyphenhyphenb4rpmw304-uGndhu8z3jwOo3SJ8sCfTODn3GPjeKPsO9st4TjIRLgL7nY68JsBNC5rwW/s1600/Blog+Post.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="31" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPE0DXoDnc4cKVr_C-L4vBJmyYhjgrofuzk67vc62Z3drR3wE3VhnCNN90vObdftp13DMnR6hyphenhyphenb4rpmw304-uGndhu8z3jwOo3SJ8sCfTODn3GPjeKPsO9st4TjIRLgL7nY68JsBNC5rwW/s400/Blog+Post.png" width="400" /></a></div>
Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia. 
<ul>
<li>Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.</li>
<li>Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut</li>
</ul>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bcZO8TVcB846jkKdzGd78MbQ1e8yuEE68t0o4JMcZDGH41wyujHRmIu1ZaZY8tw1NVJmEvyjD03-mPzqKlCO__hoLr6AuA51Wfm7DHs875naecmCfMWZhXHYHoOF7CvUq5U02nqWOxRN/s1600/Post+Var.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="161" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8bcZO8TVcB846jkKdzGd78MbQ1e8yuEE68t0o4JMcZDGH41wyujHRmIu1ZaZY8tw1NVJmEvyjD03-mPzqKlCO__hoLr6AuA51Wfm7DHs875naecmCfMWZhXHYHoOF7CvUq5U02nqWOxRN/s400/Post+Var.png" width="400" /></a></div>
 
<ul>
<li>Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".</li>
<li>Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.</li>
<li>selanjutnya akan terbuka kode kode yang lain.</li>
<li>geser atau scrol ke bawah dan cari kode </li>
</ul>
<blockquote class="tr_bq">
 <data:post.body/></blockquote>
<ul>
<li> Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:</li>
</ul>
<blockquote class="tr_bq">
 <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); </script>       <div class='read-more'>       <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>       </div> </b:if> </b:if> </blockquote>
<ul>
<li>Klik SAVE / SIMPAN dan lihat hasilnya. </li>
</ul>
Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena
 ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin 
para blogger pemula tidak akan mengerti atau kesusahan membuatnya. 
 
sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan 
jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya 
langsung.
 
<ul style="-webkit-text-stroke-width: 0px; color: black; font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;" type="disc">
</ul>

Cara Mudah Membuat Read More Otomatis di Blog – banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blo...