Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Tuesday, July 9, 2013

Cara memodifikasi widget entri populer menjadi SEO

Widget Entri Populer atau yang biasa juga disebut dengan post populer adalah aplikasi widget yang biasa kita dapat ataupun kita lihat pada suatu halaman blog ataupun situs web. Widget yang satu ini memang dapat dikatakan termasuk widget andalan suatu halaman, tapi widget artikel yang satu ini berpenampilan biasa saja untuk settingan Devaultnya. Pada postingan saya kali ini setelah saya berpikir hal ini perlu untuk para bloger, saya membuat ataupun memodifikasi tampilan widget ini agar lebih bagus dan mendukung tampilan halaman blog agar semakin indah. CSS widget ini saya buat Valid dengan HTML 5 dan sudah memakai validasi CSS level 3 oleh karena itu modifikasi widget yang satu ini dapat dipasang pada template yang memang sudah valid HTML 5 dan CSS 3. Untuk mewujudkan agar tampilannya sesuai dengan yang anda harapkan, silahkan buat widget " ENTRI POPULER " pada halaman anda dan setting agar gambar tidak dimunculkan, yang anda munculkan hanya Judul Postingan dan text saja.

Cara memodifikasi widget entri populer menjadi SEO

    Install Program CSS

  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

#PopularPosts1 ul li a:hover{color:#FF0000;text-decoration:none} #PopularPosts1 ul li a { color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px;text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#F8F8F8;box-shadow:0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#0000FF} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#F8F8F8;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#F8F8F8; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#F8F8F8 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:0px 0px 25px 0px;border:1px solid #909090;box-shadow:3px 3px 3px #000;padding:10px}

Install Program Tag HTML


Agar tampilan Entri Populer halaman anda lebih SEO Friendly dan Valid HtML 5 dan CSS 3 silahkan ganti semua code widget Entri Populer nya dengan code widget Entri Populer yang ada dibawah ini, bila anda memang sudah memasang widget tersebut bila belum silahkan simak tutorial dibawah ini.

  • Anda masih berada dihalaman dasbor lalu anda menuju "Template"
  • Masuk ke "Template"
  • lalu klik "Edit HTML"
  • Cari code </b:section> ( tekan Ctrl+F untuk mempercepat )
  • Copas Code HTML dibawah ini, paste di bawah code
    </b:section>

<b:section class='sidebar' id='sidebar' showaddelement='yes'>
<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) tidak muncul text / gambar -->
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<!-- (2) Hanya text saja yang muncul -->
<div class='item-title' style='background-color:#E0E0E0;padding:2px 0 2px 10px; '><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) muncul hanya gambar saja -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='image' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Muncul text dan gambar bersamaan -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='image' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize' expr:title='data:post.title'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>

Note :


Bila widget Entri Populer sudah anda pasang di halaman blog kesayangan anda silahkan ganti semua code yang ada dibawah ini dengan code hTML yang ada diatas, agar lebih SEO Friendly sebab tampilan yang devaultnya belum dipermak menjadi SEO dan valid HTML 5 dan CSS 3.

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>
Ganti code dari code diatas warna biru, sampai dengan code warna biru dibawah. dengan code yang ada didalam spoler diatas.
   </b:widget>

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 5:07 PM

13 comments :

  1. terima kasih infonya sangat bermanfaat...
    sudah saya terapkan dan alhamdulilah kini blog saya passed valid html5...
    silahkan berkunjung ke blog saya...
    dasepnewkasep[dot]blogspot[dot]com

    ReplyDelete
    Replies
    1. sama sama sob, salam kenal dari saya.
      thx atas kunjungannya..

      Delete
  2. teima kasih kang atas informasi seo nya..

    ReplyDelete
    Replies
    1. sama sama neng..
      makasih atas kunjungannya
      salam kenal

      Delete
  3. Bentuknya menarik
    Coba kalau ditambah pic pada post populer
    pic bisa membuat pengunjung tertarik untuk klik post populer
    dan pastinya dapat meningkatkan jumlah kunjungan setiap hari.

    ReplyDelete
    Replies
    1. scriptnya bukan di gunakan pake pic tapi saya juga telah membuatkan satu script dengan gambar.

      kalo yang ini bukan pake gambar.

      Delete
  4. Untuk scripnya, apakah itu langsung di paste saja.
    atau melakukan pilihan scrip?

    HTML

    ReplyDelete
    Replies
    1. langsung dipaste saja dari atas b.widget sampai /b.widget

      Delete
  5. Ilmu baru lagi buat saya Nih Bang Rivai
    izin belajar dan terapkan di blog saya Bang
    Terima kasih atas artikelnya.

    ReplyDelete
  6. Hmm menarik sekali membahas modifikasi widget ini mas hehe. Kalau bisa request saya mau yang mas rivai pake hehe :)

    Kunjungan perdana http://cara-sendiri.blogspot.com/
    Maap nitip link :)

    ReplyDelete
    Replies
    1. iya yah tapi widget yang saya pake semuanya polosnya tidak layak untuk di posting.. heheh
      thx atas kunjungannya..

      Delete
  7. Tutoialnya bagus gan,sangat bermanfaat.tk

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog