Showing posts with label How to. Show all posts
Showing posts with label How to. Show all posts

11/07/2015

How To Rename Multiple Files (Windows)

Renaming files can be quite a tedious task, and when you have hundreds of files with names such as “DSC01927.JPG”, things just get worse. It can take forever to properly name each file and add them in a sequence. At the same time, many are probably related, and could share part of their name, such as “sf-photos-2015-001.jpg”.

Fortunately, In Windows 7 and above, you now have the option to rename multiple files (it’s called batch-renaming or renaming in batch). Windows will take the first name and apply it to all the files by adding a Suffix (sequel numbering) in the end to distinguish each file and make sure that each file name is unique.

However, the renaming multiple files option is not easy to find in the context menu, unlike the regular “Rename” one. In this tutorial, we are going to show you how you can batch-rename files and also a quick method to give a unique name to each file, and maybe the easiest one is to use a dedicated app…

Method #1: Use a Dedicated app to Batch Rename Files
Some apps offer powerful features to rename files. They get the job done for a wide variety of renaming tasks, but the number of options can also be dizzying. The simplest one may be Massive File Renamer, but it is relatively unknown and not as well rated by savvy reviewers.

AdvancedRenamer is also a good tool and is more reputable. It is completely free to use and seemed actually a bit less complex than many other batch renaming tools. All you need to do is add your files in the tool, select renaming method (out of many) and click on “Start Batch” to rename files. You can always refer to AdvancedRenamer guide, if you are having an issue using the tool.
How To Rename Multiple Files (Windows)

Use Windows Explorer to Rename files
If you don’t have a fancy renaming task at hand, or don’t want to install anything, you can simply use Windows Explorer to Rename files. Put all the files which you would like to rename, in a single folder (if they are scattered).

Now, highlight each file which you want to rename. If you want to rename all the files in the folder, press Ctrl+A to highlight them all, if not, then press and hold Ctrl and click on each file you want to highlight.

Once all the files are highlighted, right click on the first file and from the context menu, click on “Rename” (you can also press F2 to rename the file).

How To Rename Multiple Files (Windows)


Note: Before renaming the file, you should arrange them properly if you want to provide any specific order. The renaming process will start from the first selected file and end on the last with proper numbering sequence.

Just enter the name which you would like to give and press enter. All the files will be given the same name with a numbering sequel in the end. It’s a pity that Windows is adding spaces, and ( ) characters in names, instead of having a simple _number option.




Give Unique Name to Each File
If you don’t want to give a similar name to each file, then you also have the option to provide a unique name faster. You can’t provide a unique name with just a single click, unlike above. However, you can make the process faster with this simple trick.

Arrange the Files
To get started, put all the files which you would like to edit in a folder. If you are about to give names to the Images or Videos, it is recommended that you first enable the preview option. This way, you will be able to know which Image/Video you are about to rename.

In the same folder, click on “Show the Preview pane” button located at the top right corner of the window, located on the left of “Help” (question mark icon) button. When you will select, you will see a preview panel on the right side of the window.



Give Unique Name
Now, right click on the first file in the list and select “Rename” from the context menu (you can use the F2 shortcut to rename as well). You will see a preview of the Image/Video on the right, making it easier to name it.
How To Rename Multiple Files (Windows)

However, to make the process faster, instead of hitting enter to give the name, you can press “Tab button” to move to the next file with rename option already opened. This way, you will not have to go through the standard process of renaming files every time.

Just keep pressing the Tab button to move from one image to another and rename them. If you don’t want to rename an image in between, just press Tab on it again without changing the name and its name will not be changed.

11/05/2015

How to Add Zoom Effect To Your Blog Images On Mouse Hover

CSS is really very powerful and useful tool today , We can different types of the effects to images , buttons and text on your Blog. It very easy and simple to implement on Blogger blogs. In the previous post we discussed about adding rollover effect to your images on your Blogger blog. Now we are going to discuss about adding zoom over effect to Blogger images .

Zoom hover effect means , when you hover you mouse cursor on an image , the image size will increase.

1. Log in to Blogger
2. Now go to "Template" 
3. Find next code (CTRL + F) ]]></b:skin> and just above him, add next code:
.zoomeffect img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.zoomeffect img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Click on Save template

How To Activate On Images

Whenever you have uploaded any image in your post editor, simply switch to HTML mode and change the class from what ever it is, to zoomeffect.
Example: Your image class in post editor will be <div class="seperator", now change it to <div class="zoomeffect"

If you are adding it to any other part on your blog, you can use the following code.
<a class="zoomeffect" href="YOUR-IMAGE-URL/" target="_blank">
<img src="http://YOUR-IMAGE-URL"/></a>

Replace YOUR-IMAGE-URL with the link of the image you want to apply the effect to.
That's all!

11/03/2015

How To Add JQuery Pop-Up Facebook Like Box To Blogger


Before adding this, Widget you need to instal jQuery Plugin. If jQuery Plugin is already installed on your Blog then just follow the steps below  and install the widget,but if not,then Go To Blogger Dashboard >> Click On Template >> and Search for </Head> tag , now copy the below script and paste it above
tag.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>


  • After instaling the jQuery Plugin To Your Blog Follow the below steps
  • Go To Blogger Dashboard
  • Click On Layout
  • Now Click On Add a Gadget

  • Now a Box will Popup
  • Select HTML/JavaScript There
  • Now another Box will popup
  • Now Copy the below Script and make the specific changes and paste it into the HTML/JavaScript Box 
<style type="text/css">#makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(http://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>

<div class="htmlarea"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/freebloggerthemes&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" style="border:none; overflow:hidden; width:400px; height:250px;"></iframe>
<div class="grabthis">By <a href="http://blogger-templatees.blogspot.com/" target="_blank">Get This Widget!</a></div>
</div>

<div id="mdfooter">Please wait..<span>10</span> Seconds <a href="#" id="mdclose" onclick="return  false;">Cancel</a></div>
</div>
<!-- End popup -->


  1. Replace freebloggerthemes in the script with your Own Facebook Fan page username.
  2. For changing the Time Interval, change var sec = 10 with your Own Desire time.
  3. If you are interested in changing the height and width of the Box Change 250 and 400 in the Script
  4. For Changing The Text "Join us on Facebook" just change the text with your Own.
  5. Change The Text "Cancel" with your Desire text
  6. Now Copy the Script and paste it into the box 
  7. Now hit Save and that's it 
Credit - "MakingDifferent"

Adding this jQuery Popup will force your Readers to like your Fan page and as a result you can increase your Fan page Likes,Share your Beautiful Ideas with us and if you have any Question ask us, stay Blessed , Happy Blogging.

11/02/2015

How to Create Rounded Images with CSS

Do you want to display circular images on your website? With CSS3, this can be done with in few seconds. You can use CSS border-radius property to make rounded images. Just add below CSS code into your style-sheet.
.img-rounded {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

If you are using Blogger, go to "Edit HTML" and add it just before ]]></b:skin> tag.

Now when you want to make an image circular, just add "img-rounded" CSS class into it. Look at the example below:
<img class="img-rounded" src="https://1.bp.blogspot.com/-DRZxqqXOMtE/V7D9bT9uH6I/AAAAAAABNCs/_yJ3JJBmTOoRwylgeXIY9yhHmAz_j6txQCLcB/s320/df50754a21636a29dbd50bff8190e9fe%255B1%255D.jpg" />

Result:
Rounded Images with CSS


10/19/2015

How to add Pinterest Button - Hover Effect

Pinterest Button
One of the easiest and most important things any website can do to help people to discover their stuff on Pinterest is to install the Pin It button. The Pin It button makes it super simple for people to save and share things they find on your site.
These Pins link back to your website and increase the spread of your content across Pinterest.
The Pin It button is easy to integrate. You just copy and paste a few lines of HTML and JavaScript into your pages, and you're ready to go.

Find  </body>, that is on the bottom of some blogs, ussually custom blog templates and imidiatly above that, post this code:

<script data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js' type='text/javascript'/>


That's all and I hope you'r satisfied because it's simple but great. Thank you for reading and please share if you like it. 


10/08/2015

How to Add Image Gallery with Thumbnails to Blogger

How to Add Image Gallery
For those who would like to show pictures in an image gallery, here's a gallery made with JavaScript and CSS that includes some thumbnails with which you will be able to pick different images on mouse click.

With the help of CSS, we can then place the <img> element to make it appear at the same position for each thumb and we'll be able to style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and assigns an "active" class name to the <li>.

Step 1. Log in to your Blogger dashboard, go to Template > Edit HTML
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box
Step 3. Inside the search box type </head> and click enter to find it.
Step 4. Now pick one of the styles below and copy the code below it:

<style type='text/css'>#image-gallery {display: none;}#jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}#jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}#jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}</style>
  

 Style 2

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;text-transform: uppercase;margin: 0 -17px;position: absolute;right: 0;text-align: center;top: 3px;width: 370px;}
</style>

Note: The display: none; of the first ID (#image-gallery) is to prevent images appear with their actual size before they go inside the gallery container, this is while loading the code. In #jquery-gallery we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to count the width of the thumbnail (80px) plus the margins between them. The left declaration of #jquery-gallery li img is to move the larger thumbnail that shows on mouse click so that it won't overlap with the smaller thumbnails.

Step 5. Paste the code that you copied earlier just bellow the </head> tag.

Step 6. Just above the same </head> tag, add this script:

<script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>
Basically what this script does is to look if there is any ID named "image-gallery" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do when they are clicked. So, each time we click on a thumbnail, the "active" class will be assigned and the thumbnail should be visible in a larger container.

Step 7. Save the changes by clicking on the Save template button.

And finally, here's the HTML code. This is a normal list with the image-gallery ID, enclosed within a DIV with a relative position to avoid side effects of other pre-existing positions.

Step 8. Paste the below HTML to where you want to display the gallery by going either to Layout and adding a new gadget (click on the Add a gadget link and choose HTML/JavaScript), or inside a post or page within the HTML section.

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Note: if elements on your page overlap with this gallery, you might need to add the height declaration after the position: relative; The value of height depends on the size of your gallery.


Example:


 <div style="position:relative; height: 500px;"> 


Change IMAGE-URL1 with the image URL.

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>


Here you need to replace the page-URL text with the URL of your page/post
Few tips:

To add space for more rows, increase the 100px value from this line:
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}

Save your widget and Happy Blogging.

How to Add jQuery i CSS3 Magnifying Glass

Idea came by surfing web and saw on some site how they made this awesome effect. There is similar effect on my blog, maybe better, but this one isn't bad at all on contrary, you will see and you will lke it 100%. Take a look at the site I mentioned above, you may find some solution how to implement this hack. You have to know CSS, HTML i jQuery for this. Here is one way  - Zoom Effect 1  ,read it, it's cool. The only diference is in codes and style. This one is a little harder for beginners.
 Magnifying Glass


 HTML
 <img class="magniflier" src="http://4.bp.blogspot.com/-Qz-_RUSyXZo/UsdMfAz96jI/AAAAAAAARI8/qVzSQxXDsIg/s1600/iphone-5-thumb%5B1%5D.jpg" width="460"/>

Replace "image.jpg" with your image URL

CSS
.glass {
  width: 170px;
  height: 170px;
  position: absolute;
  border-radius: 50%;
  cursor: crosshair;
  /* Multiple box shadows to achieve the glass effect */
  box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
    display: none;
}

CSS gives you style and make Magnify


jQuery
$(function() {
  var native_width = 0;

  var native_height = 0;
  var mouse = {x: 0, y: 0};
  var magnify;
  var cur_img;
  var ui = {
    magniflier: $('.magniflier')
  };
  // Connecting to the magnifying glass
  if (ui.magniflier.length) {
    var div = document.createElement('div');
    div.setAttribute('class', 'glass');
    ui.glass = $(div);
    $('body').append(div);
  }
  // All the magnifying will happen on "mousemove"
  var mouseMove = function(e) {
    var $el = $(this);
    // Container offset relative to document
    var magnify_offset = cur_img.offset();
    // Mouse position relative to container
    // pageX/pageY - container's offsetLeft/offetTop
    mouse.x = e.pageX - magnify_offset.left;
    mouse.y = e.pageY - magnify_offset.top;
 
    // The Magnifying glass should only show up when the mouse is inside
    // It is important to note that attaching mouseout and then hiding
    // the glass wont work cuz mouse will never be out due to the glass
    // being inside the parent and having a higher z-index (positioned above)
    if (
      mouse.x < cur_img.width() &&
      mouse.y < cur_img.height() &&
      mouse.x > 0 &&
      mouse.y > 0
      ) {
      magnify(e);
    }
    else {
      ui.glass.fadeOut(100);
    }
    return;
  };
  var magnify = function(e) {
    // The background position of div.glass will be
    // changed according to the position
    // of the mouse over the img.magniflier
    //
    // So we will get the ratio of the pixel
    // under the mouse with respect
    // to the image and use that to position the
    // large image inside the magnifying glass
    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;
    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;
    var bg_pos = rx + "px " + ry + "px";
 
    // Calculate pos for magnifying glass
    //
    // Easy Logic: Deduct half of width/height
    // from mouse pos.
    // var glass_left = mouse.x - ui.glass.width() / 2;
    // var glass_top  = mouse.y - ui.glass.height() / 2;
    var glass_left = e.pageX - ui.glass.width() / 2;
    var glass_top  = e.pageY - ui.glass.height() / 2;
    //console.log(glass_left, glass_top, bg_pos)
    // Now, if you hover on the image, you should
    // see the magnifying glass in action
    ui.glass.css({
      left: glass_left,
      top: glass_top,
      backgroundPosition: bg_pos
    });
    return;
  };
  $('.magniflier').on('mousemove', function() {
    ui.glass.fadeIn(100);
 
    cur_img = $(this);
    var large_img_loaded = cur_img.data('large-img-loaded');
    var src = cur_img.data('large') || cur_img.attr('src');
    // Set large-img-loaded to true
    // cur_img.data('large-img-loaded', true)
    if (src) {
      ui.glass.css({
        'background-image': 'url(' + src + ')',
        'background-repeat': 'no-repeat'
      });
    }
    // When the user hovers on the image, the script will first calculate
    // the native dimensions if they don't exist. Only after the native dimensions
    // are available, the script will show the zoomed version.
    //if(!native_width && !native_height) {
      if (!cur_img.data('native_width')) {
        // This will create a new image object with the same image as that in .small
        // We cannot directly get the dimensions from .small because of the
        // width specified to 200px in the html. To get the actual dimensions we have
        // created this image object.
        var image_object = new Image();
        image_object.onload = function() {
          // This code is wrapped in the .load function which is important.
          // width and height of the object would return 0 if accessed before
          // the image gets loaded.
          native_width = image_object.width;
          native_height = image_object.height;
          cur_img.data('native_width', native_width);
          cur_img.data('native_height', native_height);
          //console.log(native_width, native_height);
          mouseMove.apply(this, arguments);
          ui.glass.on('mousemove', mouseMove);
        };


        image_object.src = src;
       

        return;
      } else {
        native_width = cur_img.data('native_width');
        native_height = cur_img.data('native_height');
      }
    //}
    //console.log(native_width, native_height);
    mouseMove.apply(this, arguments);
    ui.glass.on('mousemove', mouseMove);
  });
  ui.glass.on('mouseout', function() {
    ui.glass.off('mousemove', mouseMove);
  });
});

Final Words. 
If you want to get back your pictures to normal, without magnifying, simply switch   <img class="magniflier"  to normal code which was before you added this one.

That's it, if you can handle, please, lieve a comment, that would be so valuable, if not, we will try to find some solution, jQuery and CSS are hard to manage but nothing is impossible. Happy Blogging dear friends !


10/05/2015

Automatically Resize Blogger Images to Fit Blog Post Area

Blogger offers most of the tools you would need to add and resize Blogger images quick and easy. You can upload photos directly on the platform and even change the dimensions based on the type of content that you are attempting to produce.

In order to do this, create a post and click on the small photo icon on the top toolbar next to the font style settings. A pop-up will show up on your screen asking you where you'd like to upload the image source. You have a choice between adding pictures from:
  • Your local computer
  • Previously uploaded images on the blog
  • Picasa Web Albums
  • An image URL


Once you select the image that you want to use, you'll see four image sizes to choose from - small, medium, large, and x-large; it also gives you the option to determine the alignment. If you find that the four preset dimensions aren't providing the outcome you desire, there are easy ways to resize Blogger images to custom dimensions in order to fit your blog post area.

Step #1: Retain the Image Quality

If you know that you are going to need to resize Blogger images once you post them to your blog, make sure that you start with a photo larger than the 640px dimensions of the x-large option. It's easy to bring an image down in size, but if you try to make a small image bigger, you'll lose some of the quality. Just make sure that you watch out for the file size containing the image; the larger the file, the slower it will load on your website.

Photoshop is a powerful image editor that can help you to resize Blogger images or modify your images before you post, but it is also an expensive investment. There are also many other freeware image editors that can perform the simple task of resizing the photo. Determine what size you'd like the photo to display on the page and manually resize Blogger images to those dimensions; other users have found that 700px is a pretty flexible width size that works well on posts.

Once you've got your photo resized and added to your post, click on it and choose the 'Original size' option. If your photos are going to exceed the post editor, it probably means that they are larger than the body of your post, so let's fix that and make them fit exactly.


Step #2: Modify The Site's CSS

Next, you'll want to modify the CSS of your Blogger template to accommodate the adjustments. Don't worry; you won't need much coding experience to complete this task.

Open up the Blogger dashboard and go to 'Template' > 'Customize'. You'll see the option for 'Advanced', click on it and find your way to the 'Add CSS' tab... paste the following CSS code inside the empty box:
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
}
Adding the code to this section, automatically adds it between the <b:skin>....<b:skin> tags of your Template (Template > Edit HTML, above the ]]></b:skin> tag). So, no matter whether you add it above ]]></b:skin> or within the Add CSS box, the effect should be the same.

Remember that when you make changes to the CSS of the blog's Template, these changes will affect every post previously added, using the "Original size" dimension option.

To spruce up the post even more, add the last three lines shown in green below:
.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto;
box-shadow: none;
border: none;
padding: 0px;
}



This code will get rid of any borders and padding around the image and give it a much more natural look within the post. Hit the "Apply to Blog" button once you've finished adding it.

Note: This will only change the images set to Original size. To resize images with different sizes and apply this change on ALL the pictures added to your posts, add this CSS instead:
.post-body img {
width:100%;
height:100%;
display: block;
}
Please consider that, if you have posts with photos floating either on the right or left side of the content, they will automatically go full width.

Step #3: Create A Post

After making the adjustments to both file size and CSS, you may go back to the post editor and repeat the Step 1 to add an image. When you return to the screen that asks for size, click on the "Original size" option and confirm your choice. Your newly added image will then be displayed with the adjustments that you created, so that it fits nicely the width of the post area.

10/04/2015

How to add auto read more in blogger with thumbnail - Version 2

How to add auto read more in blogger with thumbnail

To be more specific, this will show the title of the post, then a short summary with a number of characters and a thumbnail, that will be the thumbnail of the first image uploaded inside the post. After the thumbnail and the post summary, there will be a "Read More" link, which when you click on it, will take you to the actual post.
This  Automatic Read More script will summarize content and a post summary will be shown only on the main blog page (homepage), category pages, and archive pages.

Step 1) Applying auto read more

  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Check the  Expand Widget Templates check box on top right of the HTML window.
  5. In the code window, look for <data:post.body/> line. 
Note: after hitting Enter, you'll find this code more than once but you need to stop at the third one.

Replace the code above with this one:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
Note: If you don't see any changes after going through all the steps, please try to replace the second <data:post.body/>

Step 2) Now search for the following tag:
</head>

Step 3) Just above the </head> tag, add the following code:
<script type='text/javascript'>
posts_no_thumb_sum =
490;
posts_thumb_sum =
400;
img_thumb_height =
200;
img_thumb_width =
210;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

Note: - To change the number of characters shown when there is no thumbnail, modify the 490 value in blue. For the number of characters shown when a post has a thumbnail, modify the 400 value.
- If you want larger thumbnails, modify the 200 (height) and  210 (width) values in red.
 Click on the Save template button to save the changes.

That's it, enjoy!

10/03/2015

How to remove "Quick Edit" icon from blogger

You may have seen a pen, screwdriver and key links to blogger. You may think that these symbols appear only when you are logged into your blog. But if you look directly from your browser, then you will find a bunch of "quick edit" links on your blog, even if you are not logged. These are quick links (shortcuts), they are hidden using the CSS if you are not logged into your Blogger (but they are still present in your blog as hidden links).

Many bloggers bothered by the presence of these screws, pencil, etc. ... and here's how to get rid of:

  1. Always login to blogger 
  2. Go to Layout  ➝  Page Elements and click on the Edit Button to Blog Posts 
  3. There you will find this:

      image%25255B9%25255D%255B1%255D
      Since this is the default setting tick, you click on it and remove the mark, check mark.
      Now go like this: Template> Edit HTML and click - check the box "Expand your Widget Templates"
      Find this code (Ctr + F, click both buttons together and look for what you like)
      ]]></ b: skin>
      Immediately above it, add the following code:


      .quickedit{ display:none; }


      Simple, isn't it.
      Click "Save Template" & that's it. If you want to restore all of this again, just go to layout and check the stylus and everything is the same as before. If it is helpful, I am really glad. Thanks for reading and happy blogging.