TutorNesia ~ Popular Posts bawaan dari blogger biasanya akan terjadi Without Description, dikarenakan tidak memiliki ALT dan TITLE, tentu hal ini sangat berpengaruh pada CHKME. Saya bukanlah seorang pakar SEO jadi tidak begitu banyak tahu apakah akan berpengaruh besar terhadap blog kita, namun jika ada trik untuk memperbaikinya mengapa tidak kita lakukan?
Namun tidak sampai disini yang mau saya bahaskan, tentu hal itu tidak cukup kalau tanpa dibumbuhi CSS untuk mempercantik popular Postsnya, saya lebih tertarik untuk memhiasinya daripada bawaan blogger yang terlihat begitu kaku, anda bisa lihat Popular Posts saya yang berada disamping Sidebar blog ini. Bagaimana? tertarik untuk menerapkan? Silahkan ikuti langkah-langkah simple ini.
01. Biasa id Popular Posts akan tampak seperti dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
isi kode panjang disini....
</b:widget>Atau keseluruhan akan tampak seperti dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' 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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<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='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><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>Hal-hal yang harus anda ketahui adalah dimana Popular Posts tersebut terjadi Without Description karena tidak memiliki ALT dan TITLE, kita tinggal tambahkan expr:title='data:post.title pada Link dan ALT dan TITLE pada gambar dan secara keseluruhan akan tampak seperti dibawah ini. Jika anda tidak mau pahami anda bisa copy HTML dibawah ini dan pastekan pada keseluruhan Popular Posts anda sebelumnya. Namun alangkah baiknya jika anda mau pelajari semuanya.
<b:widget id='PopularPosts1' locked='false' title='Populer Post' 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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'/></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail' height='56' width='100' 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) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' target='_blank'>
<img alt='thumbnails' expr:src='data:post.thumbnail' height='56' width='100' 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>02. Setelah langkah-langkah diatas telah anda terapkan dengan benar maka di CHKME bisa dipastikan telah diperbaiki, silahkan cek dulu.
03. Untuk mempercantik tampilan Popular Posts kita harus bumbuhi dengan CSS, silahkan simpan CSS dibawah ini dibagian ]]></b:skin> atau </style>
.popular-posts ul li {background:none;no-repeat scroll 5px 5px rgb(255, 255, 255);list-style-type: none;margin: 0px 0px 5px;padding: 5px 5px 5px 5px !important;border-bottom: 1px solid #E7CECE;}
.popular-posts .item-thumbnail{width:100px;height:56px;float:left;border:4px solid #9A9AFC;}
.PopularPosts .widget-content ul li:first-child {background:#04043C;width:100%}
.PopularPosts .widget-content ul li:first-child + li{background:#0A0A54;width:100%}
.PopularPosts .widget-content ul li:first-child + li + li{background:#14146D;width:100%}
.PopularPosts .widget-content ul li:first-child + li + li + li{background:#282889;width:100%;}
.PopularPosts .widget-content ul li:first-child + li + li + li + li{background:#3939A2;width:100%;}
.PopularPosts .widget-content ul li:first-child + li + li + li + li +li{background:#4E4EBB;width:100%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li +li{background:#5D5DD8;width:100%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li +li{background:#6A6AE9;width:100%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li +li{background:#8181FC;border-radius:3px;width:100%}
.PopularPosts .widget-content ul li:first-child + li + li + li + li + li + li + li + li +li{background:#9A9AFC;width:100%}
.PopularPosts .widget-content ul li a{color:white;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:#fff;text-decoration:underline}
.PopularPosts .widget-content {padding-right:10px;}04. Simpan dan lihat hasilnya.
Baca Juga Artikel Terkait Lainnya
Silahkan bertanya sesuai dengan artikel yang telah anda baca diatas.
Link aktif otomatis terseleksi ke SPAMMER.
Alasan komentar anda tidak terjawab adalah OOT atau diluar kemampuan Admin.