MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Seo Master present to you: Popular Posts is a widget provided by Blogger that displays the most viewed posts on the blog in the last 7 days, last month and of all time. It has three displaying modes: display title only, display title with image thumbnail or display title along with the posts snippets.

To customize this popular posts widget, we have to add a new variable and some CSS codes to our blogger template. So let's begin:



How to add multi-colored popular posts to Blogger

Step 1. Login to your Blogger Dashboard, go to Design >> Edit HTML


Step 2. Select "Expand Widget Templates" (make a backup first)

Step 3. Search for the following tag:

/* Variable definitions
   ====================

Note: If you can't find it, paste it below the autor information that is usually below this tag (CTRL + F):

 <b:skin><![CDATA[/* 

...and should end up with this symbol:
 

 ----------------------------------------------- */

Step 4. Copy and paste just below/after this tag, the next code:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>

Step 5. Search for the following piece of code:

]]></b:skin>

Step 6. Just above/before it, add this code:

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Step 7. Now find the following code:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

Step 8. Delete it until you reach at this tag (delete the </b:widget> also):

</b:widget>

Note: Be very careful when removing it. The entire fragment of code should look like this:

<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 == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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 == &quot;false&quot;'>
            <!-- (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='' border='0' 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='' border='0' 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>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Step 9. After you have deleted the above code, paste the following in its place:

<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 == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://www.matrixar.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='http://www.matrixar.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>

Step 10. Save template.

Settings

- Go back to Layout  and click on the edit link of Popular Posts widget.

Select to "display up to 5 posts", then Save the widget.


- You can easily change the background color of the popular posts widget, going to Template >> Customize  >> Advanced >> PopularPostsBackground and there you can select any color you want.



You're done!

If you are enjoying reading this blog, please like & subscribe for more tutorials.
For any questions or suggestions, leave a comment below.2013, By: Seo Master

Seo Master present to you: 2013, By: Seo Master

Seo Master present to you: Keyword Density คือความหนาแน่นของคำสำคัญ หรือ คีย์เวิร์ดของเว็บไซต์ ซึ่งจะส่งผลให้ Search Engine เข้าใจว่าเว็บไซต์ของเราต้องการสื่ออะไร หรือเป็นเว็บไซต์เกี่ยวกับอะไร ยกตัวอย่างเช่น ผมทำเว็บขึ้นมาหนึ่งเว็บ ชื่อเว็บว่า ลูกหมา.com ซึ่งชื่อเว็บบอกอยู่แล้วว่าจะต้องทำเกี่ยวกับหมา หรือลูกหมา แต่ถ้าในเว็บไซต์ของผมดันไปพูดถึงแต่เรื่อง Google เรื่องการหาเงิน Amazon Adsense มันคงไม่ถูกต้องนัก ดังนั้นในเว็บไซต์ ลูกหมา.com นี้ควรมีคำว่าลูกหมาอยู่ในบทความต่างๆ พอสมควร แต่ว่าไอ้พอสมควรเนี่ยคือเท่าไรกันเล่า จริง ๆ การคิด Keyword Density นั้น เราสามารถพิจารณาได้ทั้งสองแบบเลยครับ คือ
1. Keyword Density ทั้งเว็บ
2. Keyword Density เฉพาะบทความ 1 บทความ หรือ Page หนึ่ง Page
สมการของ Keyword Density คือ (จำนวน Keyword ที่เราสนใจ / จำนวนคำทั้งหมด)x100
โดยเปอร์เซนต์ความหนาแน่นที่เหมาะสม เป็นดังนี้ครับ
1. เราสามารถใส่ Keyword ให้ได้มากที่สุดเท่าที่จะไม่ให้ Google แบน คือ ประมาณ 12 – 20 % (อันนี้หมายถึงเปอร์เซ็นต์ Keyword ทั้งหมดของทั้งเวบนะครับ) โดยคุณสามารถที่จะรู้ได้ว่า % Keyword ทั้งหมดของเวบคุณอยู่ที่เท่าไหร่ โดยลอง Search ใน GG ด้วยคำว่า Keyword Density Analyzer ดูนะครับ จะเวบไซต์มากมายที่สามารถคำนวณ % Keyword ของเวบไซต์ของคุณได้  (ใส่ URL ของเวบ)
2. ทีนี้พูดถึง % Keyword เฉพาะบทความ 1 บทความ หรือ Page หนึ่ง Page สามาถแบ่งได้เป็น 2 กรณีดังนี้
2.1 กรณีเนื้อหาในหน้า Page นั้น มีคำมากเกิน 600 คำขึ้นไป ควรมี Keyword Density ไม่เกิน 10%
2.2 กรณีเนื้อหาในหน้า Page นั้น มีคำน้อยกว่า 600 คำ ควรมี Keyword Density ไม่เกิน 20 %
สาเหตุที่ต้องมี 2 กรณี คือ ในเนื้อหาสั้นๆ นั้นจะทำให้มีตัวหารน้อย ตัวเลขของความหนาแน่นก็จะมีมากขึ้นไปด้วยนั่นเอง

เครดิต Seosamutprakarn2013, By: Seo Master