Διαμορφωση των Popular posts widget στο blogger

To popular posts widget δειχνει τις πιο δημοφιλεις αναρτησεις μας. Ο blogger μας αφηνει μεσα απο τη διαταξη να το προσθεσουμε στο ιστολογιο μας και να ορισουμε ποσες αναρτησεις θα φαινοντε αν θα εχουν μονο φωτογραφια η μονο κειμενο η και τα δυο μαζι. Δε μας αφηνει ομως να τους δωσουμε χρωμα για να ειναι λιγο πιο ομορφες. Αν δε σας αρεσει αυτο το στυλ τοτε δειτε την αλλη μου αναρτηση σχετικα με τις δημοφιλεις αναρτησεις widget και το πως να τους αλλαξουμε στυλ.


Για να το προσθεσουμε πρεπει να παμε στο προτυπο μας - επεξεργασια html και να βρουμε τον παρακατω κωδικο.
/* Variable definitions
   ====================

Σε περιπτωση που δεν τον βρειτε κοιταξτε για αυτον <b:skin><![CDATA[/*

ακριβως κατω απο αυτον τον κωδικο βαλτε αυτον

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

τωρα βρειτε αυτον  ]]></b:skin>
και ακριβως απο πανω του καντε επικολληση αυτον

 #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}

λιγο ακομα και τελειωνουμε αυτο ειναι και το πιο σημαντικο μερος του οδηγου.
Απο την μεταφορα στο γραφικο στοιχειο επιλεξτε το popular posts.

θα βρειτε αυτη τη γραμμη

μαρκαρετε τη ολη με το ποντικι σας με αλλα λογια καντε την μπλε με το ποντικι ή διαγραψτε την και στη θεση της βαλτε τον παρακατω κωδικο.

 <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuQe7w5f-6WOTDTFFXJp6dR8SP2-kiqGmEgXVf0dj8wxoZcXJIEm4wPrk9mzJj2XbdLyQlx1FMNMvImIuOxq67Hr_CWtF1yM8RKL-QY9dnxOJY26CcD-JPLRtPIzLofK9uywxDRVni5w/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQuQe7w5f-6WOTDTFFXJp6dR8SP2-kiqGmEgXVf0dj8wxoZcXJIEm4wPrk9mzJj2XbdLyQlx1FMNMvImIuOxq67Hr_CWtF1yM8RKL-QY9dnxOJY26CcD-JPLRtPIzLofK9uywxDRVni5w/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>

Τωρα θα πρεπει να πατε στη διαταξη στις διμοφιλεις αναρτησεις και να μεισετε τον αριθμο τους σε 5

τωρα καντε μια προεπισκοπηση και αν εχουν παει ολα καλα τοτε καντε αποθηκευση. Ελπιζω να τα καταφερετε.