Blog entries

Informative blog articles from Blogger IQ

How To Easily Find The Content Width Of An Image In Pixels On Screen

June 4, 2015 by Arun Sarathy Leave a Comment

How to find how many pixels wide your blog sidebar or content width is:

I recently wrote a post on how to adjust or change your blog’s content width or sidebar width. In that post we saw how to use Chrome’s Inspect Element option (or Firefox’s Firebug extension) to do the work.

Though that helps you to see it in a ‘programmatic’ way, here’s a simple way (a layman approach) to find how many pixels your pic or blog or anything on your computer screen is.

We will use Microsoft Paint to get this done:

Go to run, type mspaint and hit enter.
Paint opens up with a blank white ‘paintable’ screen. Here, adjust the canvas inside Paint to your desired size using the placeholders given at its edges and corners.
Hit CTRL + E on your keyboard which brings up ‘Image Properties’ window.
Under ‘units’ ensure ‘pixels’ is selected.

You’ll notice that the image’s width and height properties are shown in a numerical way.

That’s your width for the desired canvas or image or anything.

To compare this with any of your content on your blog, just place the paint canvas that we just measured on top of the content of your blog to see that content’s width: Here’s a screenshot example:

check any image or placeholder's width using this layman trick

This is a layman approach to find any content’s width and since I am one, I often use this to find my content’s width. Sometimes, I do this with Chrome’s Inspect Element option too for not always one should remain a layman. 🙂 ((Just a lame try to be funny there!))

Please let me know your comments or if you have any questions or if you are just plain confused with the technique above. Happy to help!

How To Change Sidebar Width Using CSS In A Child Theme With Genesis

June 3, 2015 by Arun Sarathy 4 Comments

The following technique best applies to CSS style sheets if you have a blog that is designed with a parent and child themes with the use of a framework like Genesis. Nevertheless, even if you have a Blogger Blogspot blog, this should still work seamlessly.

Problem: You want to adjust the width of your content area or the sidebar for your child theme but don’t know how.

You’ve come to the right place. Just sit back and read till the end and let me know if this helped you or if you have any questions.

First, let’s find the area on your blog which needs the adjustment. You can accomplish this by ‘Inspecting’ your page elements using Google Chrome’s Inspect Element option. (Friendly Note: Firefox fans – please use Firebug extension to do this exercise).

Go to your blog.
Right click on the area that needs alteration/adjustment.
Select ‘Inspect Element’.

Let me show you an example:

For my blog – thekeyponderer.com I wanted to increase my sidebar width by a little more pixels so I can easily fit in some of my widgets. So I right click on my sidebar in the blog.

If you notice the CSS styles section in the screenshot, my sidebar had a width of 270 pixels.

Go here if you want to learn an easy trick to calculate how much width a certain amount of pixels is.

Now, I want to increase my width to 280 pixels so that I know I can fit in a particular widget that doesn’t fit in its current 270 pixel-wide sidebar.

So, I go to my WordPress > Appearances > Editor and start editing my style.css file.

Since, I want to edit my sidebar section I will search for .sidebar { as seen in my STYLES section.
.sidebar {
display: inline;
float: right;
font-size: 13px;
line-height: 20px;
width: 270px;
}

I simply take a backup (copy/paste to a Notepad file) of my existing style.css code, then replace the width: 270px; with width: 280px;

Save and update the style.css file.

After I refresh my webpage, Voila! the sidebar width is now increased by 10 pixels; from 270px to 280px.

Changing the content width or any other area of your webpage is also similar. Just follow the steps given above.

I used Nomadic Child Theme for this above example and obviously, I use Genesis Framework. (Psst…I recommend this Framework strongly – one of the best and its the Industry standard in my humble opinion).

Buy Genesis Framework for your blogs. One time purchase, use it on all your WordPress blogs!

Hope this helped you in changing the content width or sidebar width for your blog. If it did, let me know and share your happiness with me below via comments.

Have questions, just shoot! I will do my best in helping you out.

Click to download the Genesis Guide for Absolute Beginners

Improve Reading Speed With Auto-Scroll Of Any Webpage

May 18, 2015 by Arun Sarathy 2 Comments

I am having all the time in the World or I am required to do a research – both will, more often than not, lead me to reading long blog posts, research papers and webpages. However, I cannot sit back and read focusedly as my one hand HAS to be on my mouse to scroll down the webpage manually.

This brings us to the question on how to read faster on our computer and what reading level you are at.

This can be accomplished by using two speed-reading techniques – both deals with auto-scroll of websites using scripts using which you can read faster. With the below techniques, you can still employ your Photo Reading or any other speed reading techniques.

How To Host Images (and Files) On Dropbox for Free

May 1, 2015 by Arun Sarathy 2 Comments

Host images or any file on Dropbox and reduce your blog’s loading time

This process also saves you storage space on your precious hosting account, by hosting static files. But please remember that Dropbox cannot act as a CDN in the long run and you might inevitably find yourself looking for a regular CDN someday. Till then, and up to a point you want to scale up to that level, you may use Dropbox as the CDN.

Get your Dropbox from here – this special referral link gives additional FREE 500MB storage!

If you want to learn how to use Dropbox for file storage and use it as a CDN, then skip directly to that section below by clicking here.

Some people do the mistake of uploading images to their WordPress blog by uploading it to their WP images directory.

This not only increases the website’s loading time but also adds up to your hosting space, eventually.

Fortunately, there is a neat way to mitigate this issue. We do this by using Dropbox’s free account feature as our CDN (Content Delivery Network)

If you don’t have Dropbox account yet, it’s now time to signup.

After uploading, click on the image icon to see a button called ‘SHARE‘.

Clicking on the ‘SHARE‘ button will give the link you want to paste to your blog HTML.

Important Note: change the default URL from this:
https://www.dropbox.com/s/azlux46yurbqkpp/Dropbox%2S…………..
to this:
https://dl.dropboxusercontent.com/s/azlux46……….

This setting is necessary to make sure the images show up correctly because Dropbox has set the image preview as default with a black background.

To get only the image to display after we host images on Dropbox, we will now replace ‘www.dropbox.com’ with ‘dl.dropboxusercontent.com’ in the URL.

Update: both ‘dl.dropboxusercontent.com’ and ‘dl.dropbox.com’ works. (Just remember to delete ‘www’)

How to Host Files on Dropbox as CDN

If you want to host files instead, simply follow the similar process of uploading the files to your Dropbox and get the link.

Change the URL endpoint from dl=0 to dl=1. Here’s a FREE PDF file for download for demo. This should take care of it!

How To Make Navigation Menu Stick On Top When Scrolling

April 18, 2015 by Arun Sarathy Leave a Comment

WordPress: Create Sticky Menu That Stays On Top When Scrolling Using CSS

This post is a little techy which involves working with code in WordPress > Appearance > Editor section. In particular, the menu items can be found in style.css file which can be fixed on scrolling.

If you don’t want to worry by coding or making changes to your WordPress themes, just check out the various plugins that are available in the WordPress market which does this job.

For those who want to fidget with the codes to create fixed menu when scrolling page, continue reading:

1. Go to your website as it is now. Right click on the menu you want to float while scrolling. Click on Inspect Element.

2. The name for your menu depends on which theme you use. It will mostly be named appropriately – ‘#navbar‘ or ‘#menu‘ or ‘#mainmenu‘ or ‘#subnav’. In this example, it’s named as ‘subnav‘. Expand this line by clicking on the small triangle icon to see all your menu items listed.

3. Now search this ‘subnav‘ in your style.css file. It’s better to take a backup of this file by copy-pasting the style.css contents to a Notepad file.

4. Find the attribute that says position: relative; and change it to position: fixed; you can also add other attributes like width, right, top, left depending on your preference to position your sticky item. Just check this w3.org article to know and read further.

5. Save. Exit. Refresh your webpage and you’ll notice that the menu bar sticks on top when you scroll down. I have Genesis Framework installed, so I had an option to install a custom plugin to do this job. However, following the above steps will help you accomplish the same tasks without installing any plugin.

Alternatively, jQuery also comes to rescue and you can find more details in this post and this post.

What other ways do you know to keep menu stick on top floating while scrolling? Let us know using the comments box below.