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

How to Add HTML Parse Tool To Blogger (Adsense Parser)

HTML Parse tool for blogger also known as HTML encoder tool can also be used to parse any HTML or javascript code into XML code format. In our tutorial today we are going to learn on how to add an HTML parse tool to your especially in the blog's static page. The advantages of having this tool in your blog will be useful whenever you need to convert and display XML code instead of HTML codes in your blogger post.

Since you can't add Ad codes directly without parsing them in you blog post, you will be required to use Ads parser tool to solve your problem. Most effectively Adsense codes or any other Ads code can be parsed and you get the XML code to put in your template or anywhere in the post section.

Let's see how we can add this code in you blogger.

How to Add HTML Parse Tool to Blogger

Step 1: Log into you blogger account and then from the dashboard, click on 'Pages', select 'new page' to create a static page.

Step 2: Click on 'HTML' mode, then Copy the code below and paste into the text field of the new page you've created.

<form> <textarea style=" height: 320px; width: 600px;" name="data1" ></textarea><input type="button" class="myclass" value="Convert" onclick="html2entities(this.form.data1)" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"><input type="reset" class="myclass" value="Clear" onmouseout="this.className='myclass'" onmouseover="this.className='myclass myclasshov'"></form>

Step 3: Save the page and the go back to Template/Theme>>>click on 'Edit HTML'. Click anywhere inside your template the press CTRL+F to search  for </head> and then copy the code below and paste code above it.

<script type='text/javascript'> //<![CDATA[ function html2entities(){var a=/[(<>"'&]/g;for(i=0;i<arguments.length;i++)arguments[i].value=arguments[i].value.replace(a,function(a){return replacechar(a)})}function replacechar(a){if("<"==a)return"&lt;";if(">"==a)return"&gt;";if('"'==a)return"&quot;";if("'"==a)return"&#039;";if("&"==a)return"&amp;"}; //]]> </script>

Step 4: Last but not the least with CTRL+F search for ]]></b:skin> and then Copy the CSS code below and paste above it.

input.myclass{background:none repeat scroll 0 0 #888;border:2px dotted #777;color:#eef;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif} input.myclasshov{background:none repeat scroll 0 0 #aaa;border:1px dotted #aaa;color:#FFF;font:bold 13px ‘trebuchet ms’,helvetica,sans-serif} textarea{width:100%;color:#261fc0;font:14px verdana;background:#fffdf7;border:2px dotted #ff180d} textarea:hover{border:1px dotted #444}

Lastly save you template the refresh you blog to see the result. Ask me if trouble arise will help you out. It always nice having you around. Ciao,...

Share:

Read More

How To Add Javascript/HTML Code Box Tool In Blog post

Most bloggers whose work mainly involving developing widget using code will always need some special tool to share them out with other. That's why today I will sharing with a simple trick on how to add Javascript/HTML code box into your blog post. This tool is essential in organizing you content and displaying different sections designed for specific purposes

Okay below is how you can go about adding this code box too in your post.

Step 1. As always you will need to sign into your blogger account>>>>then go to Dashboard and then to the template/theme section.

If you ain't a pro, you can easily go to customize then from the new window  select Advanced and click on Add CSS.

For pros or those who need heavy tactics, you will need to go to Edit HTML and then use CTRL+F to find "]]></b:skin>".

Step 2. Copy and Paste the below codes in the CSS section or just above "]]></b:skin>" and apply to the blog or save your template.

.code { overflow:auto;width:503px;height:200px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 ; border : 1px solid #000000; border-left:20px solid #ccc; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code:hover{ color:#FEF9BF; border : 1px solid #000; border-left:20px solid #ccc; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }

Step 3. You will need to go back to post page and on HTML tab view add the code below:

<div class="code">
Your Codes
</div>

Change your codes with whatever code you have and you are done to save your work. publish int to see the result...

Comment below if you got any trouble.

Share:

Read More