How to Add Featured Post in Blogger Homepage?

Featured post is most popular in WordPress site where we can easily make any post as author's choice or Editors pick or featured post. But in Blogger you can easily add this kinds of feature in your Blogger template. To do this just follow the below steps-

ADDING CSS CODE IN BLOGGER TEMPLATE

First of all we will add CSS code in our Blogger template. So please follow the below steps-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

/* Featured Post By www.bloggerspice.com */
.ribbon {
 position: relative;
 top: 0;
 right: 0;
}
.ribbon a {
 color: #fff;
 text-decoration: none;
}
.ribbon .banner {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 color: #fff;
 -webkit-font-smoothing: antialiased;
 display: block;
 float: right;
 position: relative;
 right: -14px;
 top: 22px;
 width: 100px;
}
.featured-post-banner .banner {
 right: -8px;
 top: 15px;
 width: 65px;
}

.ribbon .banner::after,
.ribbon .banner::before {
 content: '';
 display: block;
 height: 12px;
 position: absolute;
 width: 30px;
}
.featured-post-banner .banner::after,
.featured-post-banner .banner::before {
 height: 6px;
 width: 20px;
}

.ribbon .banner::before {
 -webkit-transform: skewY(-45deg) translate(50%,15px);
 -moz-transform: skewY(-45deg) translate(50%,15px);
 -ms-transform: skewY(-45deg) translate(50%,15px);
 -o-transform: skewY(-45deg) translate(50%,15px);
 -webkit-transform-origin: 100% center;
 -moz-transform-origin: 100% center;
 -ms-transform-origin: 100% center;
 -o-transform-origin: 100% center;
 left: -45px;
}
.featured-post-banner .banner::before {
 top: -5px;
 left: -30px;
}
.ribbon .banner::after {
 -webkit-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -moz-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -ms-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -o-transform: translate(100%,-100%) skewY(45deg) translateX(-58%);
 -webkit-transform-origin: 0 center;
 -moz-transform-origin: 0 center;
 -ms-transform-origin: 0 center;
 -o-transform-origin: 0 center;
 right: -17px;
}
.featured-post-banner .banner::after {
 top: 18px;
 right: -12px;
}
.ribbon .text {
 position: relative;
 z-index: 2;
 padding: 6px 0;
 font-size: 12px;
 font-weight: bold;
 min-height: 18px;
 line-height: 18px;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20);
 white-space: nowrap;
 text-overflow: ellipsis;
}
/* text */
.featured-post-banner .text {
 padding: 3px 0;
 font-size: 8px;
 min-height: 14px;
 line-height: 14px;
}
.ribbon .text::before,
.ribbon .text::after {
 content: '';
 display: block;
 height: 30px;
 position: absolute;
 top: 0;
 width: 100%;
 z-index: -1;
}
/* text */
.ribbon.featured-post-banner .text::before,
.ribbon.featured-post-banner .text::after {
 height: 20px;
}

.ribbon .text::before {
 -webkit-transform: translateX(-15%) skewX(-45deg);
 -moz-transform: translateX(-15%) skewX(-45deg);
 -ms-transform: translateX(-15%) skewX(-45deg);
 -o-transform: translateX(-15%) skewX(-45deg);
}

.ribbon .text::after {
 -webkit-transform: translateX(15%) skewX(45deg);
 -moz-transform: translateX(15%) skewX(45deg);
 -ms-transform: translateX(15%) skewX(45deg);
 -o-transform: translateX(15%) skewX(45deg);
}
/*--- RIBBON COLORS ---*/
.ribbon-color .banner::after,
.ribbon-color .banner::before {
 background-color: #5BC3EE;
}
.ribbon-color .text::before,
.ribbon-color .text::after,
.ribbon-color .text {
 background-color: #5BC3EE;
}

CUSTOMIZATION

To change the ribbon color please alter the #5BC3EE with different color code.

Step 5 hit the Save template button.

FINDING THE POST'S HTML CODE FROM BLOGGER TEMPLATE

In this stage we will find the post's HTML code which one we want to make it Featured.  So..

Step 1  Go to your Blogger Dashboard

Step 2 Locate the Post Title and right click on it after that click on Inspect Element option. Now post element will be visible at the bottom of the page. Now fold the post code. Thus it will look like below code-

<div class="post-outer"></div>

Step 3 And Now right click on it and select Edit As HTML. now copy the whole code by using Ctrl+C (Windows) or CMD+C (Mac) . 

And Paste the code in a notepad file in your PC by using Ctrl+V (Windows) or CMD+V (Mac). 

Step 4  Now wrap the whole code by below code on text file.

<div class="ribbon featured-post-banner ribbon-color">
    <div class="banner">
        <div class="text">Featured Post</div>
    </div>
</div>
<div style='background:white;padding:10px;margin-top:10px;border-left:5px solid #5BC3EE; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.38);'>

Paste your Post's HTML Code Here

</div>

After wrap up the code it will be look like below image.

Everything is done. Now we will add this code inside a HTML/JavaScript gadget from Blogger Layout section.

ADDING WRAP UP CODE INSIDE HTML/JAVASCRIPT GADGET

This is pretty easy task just follow the below steps-

Step 1  Go to your Blogger Dashboard

Step 2  Click on  Now click on -> Layout -> Add a Gadget-> A popup window will appear and now scroll down and select HTML/JavaScript gadget. Again another popup window will appear.  And leave blank the Title field.  

Step 3 From notepad  copy the whole code and paste it inside Content field on HTML/JavaScript gadget.

Step 4 Now Click on orange color Save button. And again click on orange color Save arrangement button from Layout page. 

Now check your Blogger site and see the Featured post at the top of the posts. I know this tutorial is bit complicated but I have tried with my best effort to make it easy. If you have any question regarding this tutorial then feel free to leave a comment below. Thank you. 

Share:

Read More

Image Spoiler With Simple Animation For Blogger

we often use Spoiler effect or show hide effect in our Blogger template. This is useful for hiding multiple image and which can be visible by clicking on an spoiler button. The main effectively of this widget is to loading the Blog post fast. Because if you Blog post contain 5/10 images then it will take longer time to load, so image spoiler is the solution to control loading speed. So in this tutorial I will show you image Spoiler effect or show hide effect where you will able to hide multiple images and visitors can view by click on Spoiler button. Just follow the below steps-

LIVE DEMO

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML->

Step 3 Now find the ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 4 Copy the script from below and Paste it above/before ]]></b:skin>

#image-spoiler {text-align:center;}
#image-spoiler button{margin:10px auto;cursor:pointer;background-color:#5a6269;color:#fff;padding:10px 14px!important;text-transform:uppercase;border:none;font-size:14px;transition:all .3s ease-out}
#image-spoiler button:hover, #image-spoiler button:focus {outline:none;opacity:1;color:#fff;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}
.spoilerrow {-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.spoilerrow img{-webkit-backface-visibility:hidden;margin-bottom:15px;max-width:100%;}
.spoilerrow br {display:none;}

Step 5 Now again find the </head> by pressing Ctrl+F (Windows) or CMD+F (Mac)  

Step 6 Copy the script from below and Paste it above/before </head> 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//Image Spoiler widget by www.bloggerspice.com
$(document).ready(function(){$("#image-spoiler").click(function(){$("#spoilerpanel").slideToggle("normal")})});
</script>

CUSTOMIZATION

• If you template already contain latest Jquery then you don't have to add the below jquery file.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

Step 7 hit the Save template button.

HOW TO MAKE IT WORK?

For using this Custom button you have to add the code in HTML view while writing a Blog post. Just write a post and from Post Editor Select HTML mode. Now add the below code-

<div id="image-spoiler"><button>Spoiler with Image</button></div><div id="spoilerpanel"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src=" IMAGE URL HERE " style="border: none;" /></a></div>
</div></div>

CUSTOMIZATION

• To add Images on Spoiler just replace IMAGE URL HERE with your image link
• For adding multiple image just add the whole code twice. Just like below-

<div id="image-spoiler"><button>Image Spoiler</button></div><div id="spoilerpanel"><br />
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src=" IMAGE URL HERE " style="border: none;" /></a></div>

<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE " style="border: none;" /></a></div>
</div></div>

After adding the spoiler image then publish your post and check it a Image Spoiler button will be visible and click on it to view the images. 

Share:

Read More