Quoc Viet's Blog - Nothing is impossible !: Related post with thumnail

Related post with thumnail

Step 1. From your Blogger Dashboard, go to Template and click on Edit HTML.

Step 2. Click anywhere inside the code area and then press CTRL + F to open the Blogger search box.

Step 3. Type or paste this tag inside the search box and hit enter to find it: "</head>"

Note:

- To change the number of posts that are being displayed, modify the value (4).

- To change the number of characters to be shown in posts summary, modify the value (75).

Step 4: Now that we added the script, we will need to add the style. Paste the following code above the same "</head>" tag.

<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 120px;
    height: 200px;
    border-right: 1px solid #E5E5E5;
    display: inline-block;
}

.relatedsumposts:hover {
    background-color: #F7F7F7;
}

.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.relatedsumposts a {
  /* link properties */
    color: #linkcolor;
    display: inline;
    font-size: 10px;
    line-height: 1;
}

.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 82px;
    padding: 5px;
    width: 82px;
    border: 1px solid #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
}

.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    color: #summarycolor;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: left;
}

#relatedpostssum {
    background: #F3F3F3;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}

.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #777;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: left;
    margin: 0px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:left top 0; 
   font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

Note:

- Modify the values in red to adjust the width (120) and height (210) of the widget area.

- Replace #linkcolor with the hex value of your color to change the color of post titles.

- If you want to change the size of thumbnails, modify the values marked in violet (82).

- To determine the border roundness, modify the values in orange (100).

- To change the color of the post snippet, change #summarycolor with color hex value.

- In case you add more that 5 related posts, change the container height 200px to 400px.

If you have a dark background, you may want to add this style instead:

<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 120px;
    height: 200px;
    border-right: 1px solid #0A0A0A;
    display: inline-block;
}

.relatedsumposts:hover {
    background-color: #0A0A0A;
}

.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.relatedsumposts a {
  /* link properties */
    color: #linkcolor;
    display: inline;
    font-size: 10px;
    line-height: 1;
}

.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 82px;
    padding: 5px;
    width: 82px;
    border: 1px solid #000;
background:#282828;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
}

.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #0A0A0A;
    border-bottom: 1px solid #0A0A0A;
    color: #summarycolor;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: left;
}

#relatedpostssum {
    background: #121212;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}

.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #ccc;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: left;
    margin: 0px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin:left top 0;
   font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

Step 5. Next, search (CTRL + F) for the following code snippet: "<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>". And after you found it, add this script just below it:

Step 6: Finally, find this fragment of code: "</b:includable><b:includable id='postQuickEdit' var='post'>". Just ABOVE the </b:includable> tag, add the following code:

Click on the Save Template button and that's it ! Enjoy !

No comments:

Post a Comment