How To Change Thumbnail Size for Blogger Images, Popular Posts Widget

Blogger by default assigns a 72 x 72 pixel size for thumbnails generated from your post images. You may desire to change the image thumbnail size on the Popular posts widget or even thumbnails displayed on homepage, generated from blog posts.

In your template, you'll find a couple of instances of the
"<img expr:src='data:post.thumbnailUrl'/>" tag . Using this tag, you can pick up the first image from a post and generate its thumbnail. By assigning a class/id to this tag and using a simple jquery code, we can define a custom thumbnail size for it.

Before you begin, make sure you have jquery installed in your template. If not, copy the latest version from below and paste it above the closing head tag </head>.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Custom thumbnail Size for Post Images 

As mentioned in the begening, a 72 x 72 pixel size thumbnail from post image can be created using the tag: 

<img expr:src='data:post.thumbnailUrl'/> 

1. To the relevant image tag, simply add a class or id to the tag like this: 

<img class="post-thumb" expr:src='data:post.thumbnailUrl'/> 

2. Just above the closing head tag </head> in your template, paste the code below.

<script type="text/javascript"> $(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});}); <!-- helparchive.blogspot.com --> </script>

3. The "120" is your new thumbnail size. You can increase or decrease the thumbnail width by changing the "120" to any other number. Lastly, ".post-thumb" is the class you have assigned to your images.

Changing thumbnail Size In Popular Posts Widget

Changing the thumbnail size for Popular Post images is simple. Just paste the code below just above closing head tag </head> in your template.

<script type="text/javascript"> $(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});}); <!-- helparchive.blogspot.com --> </script>

Change "120" to any other number to set the desired size for popular posts thumbnail images and you are all done.

Share:

Read More

How To Install (Hide/Unhide) Spoiler button In Blogger Post

This time around am gonna share with a  simple tips on how to make the spoiler which has an amazing slide effects in the blog post.

The spoiler has the function to hide and show text or images, and is very useful when trying to reduce space in the inputs or only if you want the text or image only see when pressed.

This effect displays a button with text and by clicking on the button it will expand the content and on clicking it again will hide the content. It has a simple script code and can also be used anywhere. You can hide whatever you want an image, code, text etc.

Follow me step by step through this tutorial ans we'll learn 'How to Add Spoiler or Hide/Show Button in Blogger'.

Always Instruction To Follow:

1. Go to Blogger Dashboard→Your Blog
2. Click Template→Click Edit HTML tab
3. Find anywhere inside template </style> or ]]></b:skin>

Step 1: Now,copy the below CSS code and put it above ]]></b:skin>

#flippy {
text-align: center;
}
#flippy button {
background: # aa65c7;
color: # fff;
text-align: center;
margin: 0 auto;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: bold;
box-shadow: 3px 0px 0px 0px # 883da7;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px RGBA (0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}
#flippy button: hover, #flippy button: focus {
background: # 9e4fbf;
outline: none;
}
#flippanel {
padding: 1px;
text-align: left;
background: # f5f5f5;
border: 0px;
}
#flippanel {
padding: 24px;
display: none;
}

Step 2:  After you have Done that! proceed and copy JQuery code below and paste it just after/below </body>

<Script>
$ (Document) .ready (function () {
    $ ("# Flippy"). Click (function () {
        $ ("# Flippanel"). SlideToggle ("normal");
    });
});
</Script>

Save your template and follow the step below.

Step 3: Now whenever you want to put the spoiler button to your post just copy the below HTML code and switch to HTML POST EDITOR and the add it anywhere you want the spoiler to appear.

HTML CODE TO USE

<Div id = "Flippy"><button> Your Button Text Here </button></div>
<Div id = "flippanel">
--- Put Your Content Here ---
</Div>

I hope this tutorial has been of great help to you and also further decorate your blogs like never before by creating beautiful widgets that may engage your readers even more. If facing any difficulties let me know the the comment section below and I will glad to help you more.

Share:

Read More