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.

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

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 5:07 PM