cara membuat read more otomatis

cara membuat read more otomatis

cara membuat read more otomatis

Seringkali kita melihat kata Readmore / Baca Selengkapnya pada setiap artikel di halaman home blog seseorang. Kegunaan Readmore adalah untuk memenggal kalimat yang ditampilkan pada halaman utama situs kita. Letak Readmore ini ditempatkan di sebuah artikel.

Fungsi dari pemasangan Readmore :

• Menghemat Ruang pada tampilan halaman utama sebuah website.
• Menjadi Lebih Elegant dan Interaktif.
• Membuat pengunjung membaca artikel tersebut hingga selesai.
• Menambah pageviews artikel yang dibaca oleh pengunjung.
• Menambah Link Anchor terhadap keyword judul.

Hingga saat ini sudah banyak tersedia berbagai macam template dengan fitur auto readmore dan lainnya. Tetapi anda harus cermat dalam pemilihan readmore. Apabila anda menggunakan readmore dengan hanya menggunakan kata saja, anda tidak boleh memakai kata tersebut melainkan dengan menggunakan gambar.

Karena apabila pada setiap artikel yang anda potong menggunakan readmore dengan anchor yang sama, maka Google kurang menyukai halaman yang anda buat. Contohnya pada blog ini saya menggunakan kata read more tetapi kata tersebut adalah gambar. Jadi, secara otomatis tidak ada kata readmore di halaman blog saya.

Cara Membuat Readmore Otomatis di Blogger yang lebih berkualitas terhadap SEO :

1. Login ke Blogger > Template > Edit HTML.
    Kemudian tempatkan kursor dibagian pengeditan template dan klik salah satu script, lalu tekan CTRL+F untuk melakukan pencarian.

2. Cari kode </head> , dan letakkan kode ini diatasnya :

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 250;

summary_img = 220;

img_thumb_height = 120;

img_thumb_width = 220;

</script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; 

//]]>

</script>

3. Ganti kode <data:post.body/> ( yang pertama ) pada template anda, dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

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

<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>

</b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Klik Pratinjau untuk melihat hasilnya. Jika sudah sesuai dan terpasang dengan benar klik Save Template.

Contoh hasil Auto Readmore :

Dengan memanfaatkan judul artikel, maka readmore tersebut dapat lebih terjaga kualitas kalimatnya di bandingkan hanya dengan memberikan 2 kata tersebut. Apabila anda ingin menggunakan readmore dengan gambar dapat mengikuti panduan berikutnya.

Untuk pemasangan readmore cara manual dapat menggunakan tools, insert jump break di dalam opsi posting artikel. Untuk sebagian template memang memiliki prmasalahan yang berbeda. Oleh karena itu, sebagai solusi silahkan coba Cara Membuat Readmore Otomatis dengan Gambar .

Dilarang copy paste artikel tanpa menggunakan sumber link - DMCA Protected Readmore: http://www.mediabloger.com/2013/03/cara-membuat-auto-readmore-di-blog.html#ixzz2ZC6I62uL 
Under Creative Commons License: Attribution

Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog

Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog

Cara Membuat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog

Ketika membuat blog dengan menggunakan platform Blogger atau Blogspot, maka secara default di atas header akan ditampilkan bilah mendatar berisikan beberapa menu yang biasa disebut dengan istilah ‘Navbar’ atau dapat pula disebut sebagai baris navigasi. Namun karena beberapa alasan (misalnya adalah untuk mempercantik tampilan halaman), maka tidak sedikit pengelola blog yang menyembunyikan bagian tersebut dengan cara menambahkan kode tertentu ke dalam template.

Apabila sekarang kita berbicara dan membahas mengenai navbar, maka perlu diketahui bahwasanya navbar tidak hanya dapat disembunyikan, namun dapat pula dilakukan kustomisasi untuk bagian tersebut yaitu dengan cara menambahkan navbar baru yang lebih ‘cantik’ bila dibandingkan dengan navbar standar Blogger. Dan untuk mempermudah pemahaman mengenai navbar baru yang dimaksud di sini, maka Anda dapat melihatnya pada gambar di tas, dalam hal ini adalah bagian yang ditunjukkan dengan tanda anak panah.

Oke, sekaligus menanggapi pertanyaan Sobat Blogger dalam artikel tanya jawab tentang bagaimana cara membuat menu navbar seperti yang tampak pada gambar di atas, maka sekarang kita langsung pada pokok pembahasan yaitu mengenai cara membuat bilah navigasi di atas header sebagai pengganti navbar. Dimana teknik yang perlu dilakukan untuk keperluan tersebut adalah dengan cara mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

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

Keterangan:

Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga, sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin> .

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.

Keempat, cari kode <body dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUS3sUUH6u85CHVHOF0OJVVR8La27l5qY-ewgtWK2UVpDxs6i1XY__zxjpdlTUSUlw6gM4GGp_bM4a_p4B-i0ONpzjE5imgKb3IcKhA5Z830CmO-zBJ4ORCsaBq-OS7vBYk9raZFxwrog/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:

Ganti http://eltelu.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima, simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga berguna dan bermanfaat.

Salam.

Sumber: http://eltelu.blogspot.com/2012/09/cara-membuat-tab-menu-horizontal.html#ixzz2ZC3wy0Xw