Cara Membuat Judul Blog Dan Artikel Muncul Satu Kata - Deny Listianto

July 4, 2018

Cara Membuat Judul Blog Dan Artikel Muncul Satu Kata

Tutorial kali ini kita akan belajar Cara Memendekkan Judul Blog Dan Artikel dengah hanya memunculkanya satu kata.

Misalnya untuk keseluruhan judul blog kita adalah "Blog Tutorial Belajar Ngoding" maka kita akan memotong atau memunculkanya hanya "Blog Tutorial".

Untuk judul artikel yang kita munculkan satu kata hanyalah di halaman utama (Homepage), misalkan judul artikel kita adalah "Sarada Blogger Theme" maka yang muncul hanyalah "Sarada".

Ingat untuk judul artikel yang muncul satu kata hanya berlaku di halaman utama jadi pada halaman postingan muncul semua judulnya.

Cara Membuat Judul Blog Dan Artikel Muncul Satu Kata

Cara seperti ini bisa merapikan judul yang terlalu panjang dengan memotong atau memunculkanya hanya satu kata.

Baiklah bagi yang ingin mencobanya silahkan simak tutorial berikut ini.

Cara Membuat Judul Blog Dan Artikel Muncul Satu Kata di Homepage


Ada dua tutorial kali ini yang pertama adalah cara membuat judul blog muncul satu kata dan juga cara membuat judul artikel muncul satu kata di halaman utama.

Sebelum itu, tambahkan kode jQuery library diatas kode </head> jika pada template Anda belum terdapat kode tersebut, berapapun versinya. Contoh kode jQuery library seperti berikut ini.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Berikut dua tutorial yang sudah saya terangkan diatas :

Cara Membuat Judul Muncul Satu Kata


Buka Blogger buka menu Tema lalu Edit HTML.

Tambahkan kode dibawah ini sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; sesuai dengan versi tema blog yang sobat gunakan.

<script type='text/javascript'>
$(document).ready(function(){var e=$("body").find("#header .title a").eq(0).text().split(" ");$("body").find("#header .title a").eq(0).text(e[0])});
</script>

Perhatikan kode yang ditandai, sesuaikan kembali dengan ID atau class pada HTML Header tema yang sobat gunakan.

Setelah itu klik Simpan tema.

Cara Membuat Judul Artikel Muncul Satu Kata di Homepage


Buka Blogger buka menu Tema lalu Edit HTML.

Tambahkan kode dibawah ini sebelum kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; sesuai dengan versi tema blog yang sobat gunakan.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
    $(document).ready(function(){
   var abc = $("body").find(".entry-title a").eq(0).text().split(" ");
    $("body").find(".entry-title a").eq(0).text(abc[0]);
    var def = $("body").find(".entry-title a").eq(1).text().split(" ");
    $("body").find(".entry-title a").eq(1).text(def[0]);
    var ghi = $("body").find(".entry-title a").eq(2).text().split(" ");
    $("body").find(".entry-title a").eq(2).text(ghi[0]);
    var jkl = $("body").find(".entry-title a").eq(3).text().split(" ");
    $("body").find(".entry-title a").eq(3).text(jkl[0]);
    var mno = $("body").find(".entry-title a").eq(4).text().split(" ");
    $("body").find(".entry-title a").eq(4).text(mno[0]);
    var pqr = $("body").find(".entry-title a").eq(5).text().split(" ");
    $("body").find(".entry-title a").eq(5).text(pqr[0]);
    var stu = $("body").find(".entry-title a").eq(6).text().split(" ");
    $("body").find(".entry-title a").eq(6).text(stu[0]);
    var vwx = $("body").find(".entry-title a").eq(7).text().split(" ");
    $("body").find(".entry-title a").eq(7).text(vwx[0]);
    var yzz = $("body").find(".entry-title a").eq(8).text().split(" ");
    $("body").find(".entry-title a").eq(8).text(yzz[0]);
    });
</script></b:if>
</b:if>

Kode di atas hanya akan berlaku pada 8 artikel/postingan pertama yang tampil dihalaman utama.

Jika ingin menerapkan pada artikel yang lebih banyak lagi, silahkan tambahkan kode berikut, dengan mengganti beberapa kode yang saya tandai di bawah ini :

var yzz = $("body").find(".entry-title a").eq(8).text().split(" ");
$("body").find(".entry-title a").eq(8).text(yzz[0]);

Keterangan :
  • Kode yzz silahkan ganti dengan huruf apa saja, asalkan tidak sama dengan kode sebelumya.
  • Ganti Angka 8 dengan angka selanjutnya.

Setelah itu klik Simpan tema.

Cukup mudah bukan? jika ada yang masih bingung atau ada yang mau ditanyakan silahkan sampaikan dikolom komentar atau Halaman Kontak kami.

Selamat mencoba dan semoga bermanfaat...
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo