Widget entri populer

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
  
  Code:

  ]]></b:skin>
  

• Copy Code script CSS dibawah ini, pastekan diatas code
  
  Code:

  ]]></b:skin>
  

  tadi

Spoiler

Code:

#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
  
  Code:

  </b:section>
  

  ( tekan Ctrl+F untuk mempercepat )
• Copas Code HTML dibawah ini, paste di bawah code
• 
  
  Code:

  </b:section>
  

Spoiler

Code:

<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 == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>

<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 == "false"'>

<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/>

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

Code:

<b:widget id='PopularPosts1' locked='false' title='Entri Populer' type='PopularPosts'>

Ganti code dari code diatas , sampai dengan code dibawah. dengan code yang ada didalam spoler diatas.

Code:

</b:widget>

Referensi :http://rivai-silaban.blogspot.com/2013/07/cara-memodifikasi-widget-entri-populer.html

 

keren bnget... tapi jarang

keren bnget... tapi jarang pake widget ini biasanya pake recent post ama random post

 

kalo saya sih pake bawaan

kalo saya sih pake bawaan templatenya, jadi ga perlu setting"

 

keren

keren

 

gak pernah pake wiget ini

gak pernah pake wiget ini
soalnya terkadang populer post suka di intip blogger lain buat nembak keyword

 

mantap ...

modus entri populer yang mantap juga, bisa dicoba mas bro ......

 

cayun wrote:

tapi utnuk setting ke recentpost juga bisa sob hanya ganti code pemanggil ID nya di CSS

 

budiw92 wrote:

makasih atas pendapatnya sob, tapi sedikit tentang mengenai keyword, kalo menurut saya untuk meniru ataupun membuat keybord yang telah ada sangat sulit untuk artikel kita terindex pada halaman depan search engine, apalagi bila artikel itu memang sudah tu alis lama, yah pasti tautan perujuk untuk keyword tersebut sudah mencapai 1000 situs jadi sngat sulit bersaing, bagusan buat keyword yang baru kalo bisa yang unik sob biar dikit singan, ntar kalo makin banyak yang berkunjung yah pastinga tautan link artikel itu pasti royal dan ramah search engine.

 

mantap banget bang @Rivai

mantap banget bang @Rivai

 

keren widgetnya..

keren widgetnya..
tapi saya lebih sering pake widget populer post bawaan templatenya, coz males yg mau utak atik

 

zaky wrote:

silahkan gan..!!!