Google Snippets : Ubahsuai Tema Chip Life

Mangsa seterusnya untuk dibedah dan di’godek’ oleh saya untuk melepasi ujian Google Snippets. Tema ini juga dikategorikan sebagai ‘framework’ sama seperti tema ‘Thesis’. Ramai juga dikalangan rakan-rakan blogger yang menggunakkannya dan salah satu diantaranya ialah Puteri Kasih. Berbeza dengan entri sebelum ini, tema Chip Life memerlukan kita untuk mengubahsuai fail CSS untuk memberikan kesan yang sama sebelum diubahsuai. Ia tidaklah sukar dan tidak memerlukan CSS yang baru kerana ia hanyalah salinan asal ‘class’ yang lama kepada ‘class’ yang baru. Rakan-rakan blogger digalakkan menggunakan Google Plus Author Information in Search Result (GPAISR) kerana ianya mudah dan senang untuk menghubungkan profil Google Plus dan blog kita.

Updated Error
Terdapat beberapa amaran setelah ujian Google Snippets dijalankan. Amaran ‘Updated’ dan ‘Hcard’ dipaparkan didalam keptusan ujian. Berikut merupakan langkah-langah yang boleh diambil untuk menyelesaikan maslaah ‘updated’ dan mematuhi standard ‘microdata’ Google Snippets.

  1. Login ke WP Admin -> Appearance -> Editor -> edit fail stylesheet.css
  2. Cari .post-time dan copy.
  3. Scroll stylesheet.css paling bawah dan paste. Ubah .post-time kepada .updated seperti dibawah.
  4. Cari .post-author dan copy paste dibawah .updated. Tukar kepada .vcard

.updated {
background: url(images/icon-time.png) no-repeat top left;
margin: 0 3px 0 3px;
padding: 1px 0 1px 20px;
}

.vcard{
background: url(images/icon-author.png) no-repeat top left;
margin: 0 3px 0 3px;
padding: 1px 0 1px 20px;

  1. Login Cpanel dan terus ke folder theme Chip Life
  2. Pilih folder chip -> folder functions -> edit fail shortcodes.php
  3. Cari kod seperti dibawah.

/** * Post Shortcodes */

/** Output */

{

$output = sprintf( '<span class="post-date post-published post-time" title="%4$s"><a title="%6$s" href="%5$s" rel="bookmark">%1$s%3$s%4$s%2$s</a></span> ', $atts['before'], $atts['after'], $atts['label'], $post_date, get_permalink(), the_title_attribute( 'echo=0' ) ); return apply_filters( 'chip_life_post_date_shortcode_output', $output, $atts ); 

}

Tukar kepada kod dibawah.

/**
* Post Shortcodes
*/

/** Output */
{

$output = sprintf( '<span class="updated" title="%4$s"><a href="%5$s" title="%6$s" rel="bookmark">%1$s%3$s%4$s%2$s</a></span> ', $atts['before'], $atts['after'], $atts['label'], $post_date, get_permalink(), the_title_attribute( 'echo=0' ) );
return apply_filters( 'chip_life_post_date_shortcode_output', $output, $atts );

}

Hcard Error

  1. Cari kod berikut didalam shortcodes.php

/**
* Author Shortcodes
*/

{

/** Output */
$output = sprintf( '<span class="post-author post-vcard">%2$s<span class="fn">%1$s</span>%3$s</span>', $author, $atts['before'], $atts['after'] );
return apply_filters( 'chip_life_post_author_posts_link_shortcode_output', $output, $atts );

}

Dan tukar kepada kod seperti berikut.

/**
* Author Shortcodes
*/
{

/** Output */
$output = sprintf( '<span class="vcard">%2$s<span class="url fn">%1$s</span>%3$s</span>', $author, $atts['before'], $atts['after'] );
return apply_filters( 'chip_life_post_author_posts_link_shortcode_output', $output, $atts );

}

Jebeng Otai™
cuba jaya jer.. 🙂

jebengotai

Menulis sekadar perkongsian. Memberi info dari pembacaan, pengalaman dan kajian dari penulis. Mungkin dari sini, pandangan kita dapat diperluaskan. - Freelance VPS setup ( NGINX + Pagespeed + Vesta ) - Part-Time Blogger

This Post Has 36 Comments

        1. SuhairiDotCom

          Promo jangan tak promo 🙂
          Ce tengok layout baru aku, gambar tu sementara je cuba dulu coding bagai tadi.hehe

          1. JebengOtai

            fuiyo..simple jer..tp cun 🙂

          2. JebengOtai

            kemas dan simple 🙂

          3. SuhairiDotCom

            Hehehe TQ bro! Berkat usaha belajaq coding pagi tadi 🙂
            Mau tukar kaler purple 🙂

          4. SuhairiDotCom

            Responsive aku masuk sekali lam Thesis tu. Tapi kalau skrin kecik macam ada yang tak berapa ngam kot :p

          5. SuhairiDotCom

            TQ bro. Nampak dah kemas sikit dari yang hari tu. Aku dok tgk coding lagi nak tukar warna font dan background body. Nak warna ungu 🙂

          6. JebengOtai

            experimentasi diri.. 🙂

          7. SuhairiDotCom

            Tula trademark kau 😛 hehehe
            Aku da buat link sume,dia x nk kua aku x tw la pe hal bro. Last2 aku letak microformat data trus kt /about aku 🙂

          8. JebengOtai

            owh..aku dh tau kenapa..hehe

          9. SuhairiDotCom

            Kenapa jebeng..ce twitter aku 🙂

  1. Hafizul

    tak pernah guna lagi ni..tapi entri ni akan dijadikan bahan rujukan kepada pondok kecil nanti..hehe

  2. sop

    dok2 baca.. rupanya sop pakai blogspot.. heheheh

    1. JebengOtai

      kalo dh tukar hosting…leh la cuba.. 🙂

  3. hatiputera

    dah boleh buat service google snippets,,, 😀

    1. JebengOtai

      hehe..utk member link exhcnge free of charge jer.. 🙂

    1. JebengOtai

      chip life ker??..yg ni utk wp…kalo blogspot lom ag..tp leh bg html utk torai..huhu

  4. Aelfi

    hehe.abis theme dah kena bedah ni..waa..lepas ni try framework genesis pulak. 🙂

  5. onlajer

    satu benda pun aku tak tau ,tapi kalau kau suruh buat program cnc sikit – sikit aku boleh buat

    1. JebengOtai

      owh..pki mastercam boleh gak wat..tp 3d mmg lom expert ag..hehe 🙂

  6. mak lagenda

    Dari coding pertama hingga la yg terakhir, 1 apa pun mak x paham. Klu bab koding2 ni, mmg awal lg mak dah angkat tgn surender. Huhuhu..

    1. JebengOtai

      hehe..cuba la..mana la tau jdik wanita pertama malaysia terer koding2 ni..hehe

  7. SuhairiDotCom

    Dah ok sikit cuma ada part yang dekat bahagian post kecik2 tu je missing 1 tempat.

    1. JebengOtai

      aah..br smlm mengkaji part post teaser tu..kene wat penambahan skit author kat situ..hehe

      1. SuhairiDotCom

        Aku da tau sebab aku x tick link admin pd plugin tu.bila da tick tgl 1 je lg merah,hcard utk teaser lak..huhuhu

        1. JebengOtai

          tahniah bro..hmpir2 dah tu..hehe

          p/s : leh sama2 try godek2 utk teaser tu..hehe

          1. SuhairiDotCom

            Kena cari kat bahagian mana coding tu duduk, pastu kita bedah dia cukup2! Geram da nih! @_@

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.