AGC BLOGGER

  • Home
  • Themes
  • Sitemap
  • Privacy Policy
  • Contact
  • Dropdown Menu ▼
    • Submenu 1
    • Submenu 2
    • Submenu 3
  • Advertise
Home » Html » Meringkas Artikel Otomatis Tanpa Javascript

Meringkas Artikel Otomatis Tanpa Javascript

Posted by Unknown
» Html
» 2015-03-15

Mad Trik - Pada tutorial kali ini kita akan membahas tentang membuat ringkasan artikel otomatis tanpa javascript atau yang sering kita sebut dengan auto read more.

Meringkas artikel tanpa javascript
Hasilnya akan seperti di blog ini.
Dan dengan menggunakan ringkasan artikel otomatis ini, kecepatan muat halaman blog kamu akan menjadi seperti kilat (tergantung apa yang di blog kamu juga sih). Itulah salah satu kelebihan dengan ringkasan artikel ini.

Karena ringkasan yang diambil itu dari <data:post.snippet> yang juga ada di dalam widget artikel populer. Cara ini berasal dari blog Duypam yang kemudian di perjelas lagi di blog DTE karena di blog awal tadi memakai bahasa asing.....mungkin bahasa Vietnam ?

Tapi kalau saya lihat ada sedikit kekurangan pada tutorial yang sudah dijelaskan di blognya om Taufik (DTE) maupun di blog Duypam itu, yaitu ringkasan artikelnya nanti akan berdampak buruk jika artikelnya nanti kita bagikan ke Google+.

Deskripsi artikelnya hilang !. Awalnya saya juga tidak memperdulikan hal ini, tapi karena lama-kelamaan tidak enak juga dengan hasilnya maka saya mencoba beberapa eksperimen dengan mengorbankan beberapa template bawaan Blogger dan saya teliti sedikit kemudian saya pasangkan beberapa kode yang ada ke dalam template blog saya, hasilnya pun cukup berhasil.

Dan hasil akhirnya kira-kira akan seperti gambar dibawah ini:

Dengan sedikit penambahan kode, hasil akan seperti ini.
Hasilnya akan seperti ini.
Tapi jangan lupa juga untuk mengaktifkan deskripsi penelusuran di blog kamu terlebih dahulu.

Nah daripada banyak basa-basi, saatnya kita melakukan beberapa hack lagi:

Pertama-tama pasang dulu bagian termudah di tutorial ini. Yaitu dengan memasang kode CSS dibawah ini:

/*Gambar*/
 .img-thumbnail {
    float:left;
    padding:4px;
    border:1px solid #ddd;
    width:75px;
    height:75px;
}
.img-thumbnail:hover {
    background-color:#00AFAF;
    border:1px solid #00AFAF;
}


Kemudian bagian agak sulitnya. Cari kode ini <data:post.body> yang ada di blog kamu.

Jika terdapat dua kode yang sejenis, cari saja kode yang ada di dalam area <b:includable id='post' var='post'>

Jika sudah ketemu, ganti kode tersebut dengan kode dibawah ini:

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
    <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <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:if>
        </b:if>
        <div style='clear: both;' />
        <!-- clear for photos floats -->
    </div>
    <b:else/>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <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:if>
        </b:if>
        <div style='clear: both;' />
        <!-- clear for photos floats -->
    </div>
</b:if>

<b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
</b:if>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:post.thumbnailUrl'>
         <a expr:href='data:post.url'>
        <img class='img-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
        <b:else/>
         <a expr:href='data:post.url'>
        <img class='img-thumbnail' expr:alt='data:post.title' src='Logo Blog Kamu Disini'/></a>
        </b:if>

        <div class='post-snippet'>
            <b:if cond='data:post.snippet'>
                <data:post.snippet/>
            <b:else/>
                Konten tidak ada
            </b:if>
        </div>
    </b:if>
</b:if>


Jika selesai semua simpan perubahan yang ada di template kamu. Dan lihat hasilnya


Related Posts

  • Cara Menambahkan Sub Menu Pada Navigasi Menu Evo Magz
  • Kerangka Template Schema.org , Fast loading and Valid
  • Cara Membuat Footer Keren 2 Kolom Responsive di Template Blog
  • Memperbaiki Deskripsi Artikel Di Google+ Yang Tidak Muncul
  • Menggabungkan Twitter Card & Facebook Open Graph
ADS HERE !!!

Newer Post
Older Post
Home
Subscribe to: Post Comments (Atom)

Featured Post

Cara Menampilkan Iklan Adsense Youtube di Blog

Belum lama ini google adsense telah melakukan update secara berkala dan update ini juga tengah mengubah beberapa tampilan termasuk tampilan ...

Popular Posts

  • #2 Kerangka Template Bootstrap
    Mad Trik - Saatnya melanjutkan edisi membuat template sendiri dengan bootstrap. Dan pada tutorial kali ini adalah bagian yang paling pentin...
  • Cara Reskin Source Code Aplikasi Android dengan Eclipse
    Ada banyak cara yang dapat digunakan untuk reskin source code android seperti eclips, android studio, unity3d dan lain lain. Namun yang pali...
  • Logo Kebanggaan MAN 1 Semarang HD High Resolution
    Logo MAN 1 Semarang ~ Hallo sahabat siswa -  siswi Madrasah Aliyah Negeri 1 Kota Semarang , gimana nih kabarnya ? semoga kita selalu diberik...
  • GabengAMP Fast Free AMP HTML Blogger Template
    Mediababe.net - Gabengamp template blogger AMP HTML adalah nama template yang kali ini saya buat dan dibagikan secara gratis. Setelah menget...
  • Cara Membuat Template Blog Sendiri dengan Bootstrap
    Cara Membuat Template Blog Sendiri dengan Bootstrap Cara Membuat Template Blog Sendiri dengan Bootstrap. Responsive 100% dan Fast Loading. T...
  • Emejing Hijau Fast and Responsive Template Blogger Premium
    Mediababe.net - Template Blogger Keren dari mediababe yang sudah dibuat sedemikian rupa agar dapat digunakan dengan baik yakni template emej...
  • Cara Mengatasi Gambar Buram atau Blur Pada Blogspot
    Mediababe.net - Tips cara memperbaiki thumbnail gambar buram di blogger. Blogger kini telah melakukan maintenance tiba-tiba mungkin blogger ...
  • Tips Memilih Topik Channel YouTube yang Pas dan Mantap
    Masih di tips youtube, kali ini mediababe.net akan membahas tentang tips bagaimana cara memilih topik atau tema youtube yang pas. Sebelum ak...
  • Download 11 Lagu MP3 Takbiran Lebaran 1437 H Lengkap
    Download 11 Lagu MP3 Takbiran Lebaran 1437 H Lengkap 2016 Non stop 24jam - Tak terasa sebentar lagi Lebaran akan tiba , di kesempatan kali i...
  • Mengenal lebih jelas Bisnis PPOB dan Apa itu Software IRS ?
    Mediababe.net - Apa sih yang dimaksud dengan IRS, terus apa sih kegunaan dan manfaat dari IRS tersebut? Nah kali ini saya akan memberikan se...

Labels

Tutorial Blogging (64) CSS (15) SEO (15) Adsense (6) Belajar Android (6) Bootstrap (6) Html (6) Trick Android (6) Tips Adsense (5) BBM (4) Template (4) Tips Youtube (4) App Mobile (3) Cara Cek (3) Lainnya (3) MA (3) Media Sosial (3) Paket Internet (3) Tutorial Blogger (3) Blogger (2) Facebook Tutorial (2) Jasa Adsense (2) Tajwid (2) Bisnis Online (1) Blogging (1) Cara Daftar (1) Domain (1) Forex (1) Javascript (1) MP3 (1) PES (1) Religi (1) Software (1) Takbiran (1) Template Blog (1) Tips (1) Trik Youtube (1) Twitter (1) Widget (1)

LATEST POSTS

Blog Archive

Search This Blog

©2017 - AGC BLOGGER | Designed by: Making Different | Provided by: DevPuts | Powered by: Blogger