உங்கள் பிளாக்கில் பிரபல இடுகைகள் விட்ஜெட் அழகாக்க வேண்டுமா!

சில நாட்களுக்கு முன், நான் ஆங்கில தளத்தில் உலாவிய போது இந்த பிரபல இடுகைகள்  விட்ஜெட் ஜாவாஸ்கிரிப்ட் பதிப்பை பார்த்தேன். இந்த விட்ஜெட் என் மனதை கவர்ந்தது. வலைப்பதிவாளர்கள் பயன்படுத்தப்படும் மிகவும் பிரபலமான சாளரம் ஒன்று என்றால் Blogger இன் அதிகாரப்பூர்வ பிரபல போஸ்ட் விட்ஜெட் தான். எனவே நாம் இந்த கேஜெட்டை மாற்ற முடியாது, ஆனால் தற்போது அதன் வடிவமைப்பை மாற்றலாம்

DEMO

எப்படி கேஜெட் வடிவமைப்பை மாற்றுவது?

உங்கள் பிரபல இடுகைகள் விட்ஜெட் படிமுறைகள்

1. லேஅவுட் பக்கம் சென்று நீங்கள் ஏற்கனவே பிரபல இடுகைகள் விட்ஜெட் சேர்க்கவில்லை என்றால், பிரபல இடுகைகள் விட்ஜெட்யை சேர்க்கவும்.

2. இது சிறு உருவங்கள் மற்றும் துணுக்குகளை காட்டுகிறது.

3. இப்போது வார்ப்புரு / வடிவமைப்பு> திருத்து பக்கத்துக்கு செல்லவும். ( Template/Design > Edit HTML ) விரிவாக்கு விட்ஜெட் டெம்ப்ளேட்கள் சோதனை பெட்டியை கிளிக் செய்ய வேண்டாம். இதனை தேர்வு செய்யாமல் விடுங்கள், மற்றும் PopularPosts1 இருக்கும் (Ctrl + F உங்கள் டெம்ப்ளேட்டில் இதன் வரியை கண்டுபிடிக்க உதவும்) அதனை கண்டுபிடியுங்கள்

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

4. மேலுள்ள வரியை கண்டுபிடித்து மாற்றவும்

<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'>
              
                <div class='item-thumbnail'>
   <a expr:href='data:post.href' expr:title='data:post.title'>
    <b:if cond='data:post.thumbnail'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
       <b:else/>
        <img alt='' border='0' expr:height='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx9o3zS7BuCFM50zNfLf5jff198cvLPYMqf42D5Oubm8NxUsUPdfEURitNjLfdPto3KcVn_Q-F3tEyw35fxfUfTGs-WtrR73hXXuBXLZ6k9ot1hEPvViV1qtTbut5D6An1kZZbVGixhxw/s72-c/default.png' expr:width='data:thumbnailSize'/>
       </b:if>
                  </a>
                </div>         
             </div>
            <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>

5. உங்களுடைய வார்ப்புருவை சேமிக்கவும்

6. இப்போது வார்ப்புரு வடிவமைப்பாளர் > மேம்பட்டது> சேர் CSS ( Template Designer > Advanced > Add CSS ) அங்கே போய் பின்வரும் CSS துணுக்கை ஒட்டவும்,

.popular-posts .item-thumbnail{float:left;}
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;}

இப்போது உங்களின்  பிரபல இடுகைகள் விட்ஜெட்டில் மாற்றத்தை காணலாம்.
இந்த மாற்றம் பிடிக்கவில்லை என்றால் பழைய நிலையை அடைய CSS துணுக்கை மட்டும் நீக்கவும். பழைய படி வந்து விடும்