Monday, December 28, 2015

Happy New Year - jQuery Popup For Sites!

Happy New Year - jQuery Popup For Sites!

Link to My Blogger Tricks

Happy New Year - jQuery Popup For Sites!

Posted: 28 Dec 2015 04:47 AM PST

happy new year jquery popup for sites

Time fly too fast! Two years back we released a combination of 2 different popups to wish your website visitors happy winter holidays and happy new year, we are releasing today a dynamic popup for new year so that you may not remain dependant on a fixed background theme and instead change the date and time by editing the text.

This Popup plugin contains 4 Unique Features!

  1. Falling snowflakes,
  2. It has a digital countdown timer,
  3. It has 3 different animations,
  4. Supports HTML5 sessionStorage functionality to set cookie in order to control the popup display. You can choose to show the popup once or several times.

It is perfectly compatible with all major browsers. A perfect way to greet your website visitors.  You can add it easily to your blogspot or wordpress blogs or on HTML webpage you may have. It is extremely easy to customize. View the demos below and then proceed to the installation guide.

Note: I have willingly set the counter to 2017 so that the demo may live longer :)

DEMO

How to install this popup?

All steps are exactly similar to the ones we already shared on our christmas popups tutorial except for the styling which I will discuss here. Kindly therefore follow all steps shared in the Winter Holidays tutorial linked below. Follow all steps there and skip step#5.

Add the following CSS code instead of the code shared in step#5 of previous tutorial:

/* -------------------------------------------------- 
New Year Popup by MBT
-------------------------------------------------- */

#mbt-counter {

padding: 10px;
font-family: oswald,verdana;
background-color: transparent !important;
position: relative;
top: 28%;
font-size: 25px;
left: 28%;
text-shadow: 1px 2px 4px rgb(51, 51, 51);
color: rgb(255, 254, 198) !important;
border: 2px solid orange;}

        .reveal-modal h2 { 
   position: relative;
top: 25%;
font-family: oswald,arial;
font-size: 1.7em;
text-shadow: 2px 4px 10px #000;
color: orange;
text-align: center;}

    .reveal-modal-bg {
        position: fixed;
        height: 100%;
        width: 100%;
        background: rgba(0,0,0,.8);
        z-index: 100;
        display: none;
        top: 0;
        left: 0;
        }
    .reveal-modal {
        visibility: hidden;
        left: 50%;
        top:170px;
        margin-left: -300px;
        width: 550px;
        height: 305px;
        background: rgba(51, 51, 51, 0) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXIiuaukvFtzXPXmDcx6GTpB5iaMn1osqEcSAtmFy70ApyUEJeiazPBkc1c1KNuvlMiw6eiNSxAbqCG1icLpbPQm8rwWTF4C1s8LIVnPCiUnIwHt8pypTZ1uNv8wZjCGDSkTfTTT7BT2g/s1600/happy-new-year-png.png) no-repeat -17px 0px;
        position: absolute;
        z-index: 101;
        padding: 30px 40px 34px;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        color: #FFF;
        }
    .reveal-modal.small         { width: 200px; margin-left: -140px;}
    .reveal-modal.medium         { width: 400px; margin-left: -240px;}
    .reveal-modal.large         { width: 600px; margin-left: -340px;}
    .reveal-modal.xlarge         { width: 800px; margin-left: -440px;}
    .reveal-modal .close-reveal-modal {
        font-size: 32px;
line-height: 0.5;
position: absolute;
right: 25px;
font-weight: bold;
cursor: pointer;
bottom: 25px;
color: orange;
        }
        .reveal-modal .close-reveal-modal:hover {
            color:#2d2d2f;
        }

That's all!

Hide Winter Snow Fall

If you don't want to show the falling snow then kindly remove this code:

$(document).snowfall({deviceorientation : true, round : true, minSize: 1, maxSize:8,  flakeCount : 250});

This code is given in step#4 of previous tutorial.

The HTML

For step#6 use the following HTML code

<div id="myModal" class="reveal-modal" >
        <h2>Count Down Begins...</h2>
        <script type='text/javascript' src="http://tools.mybloggertricks.com/mbt-counter.js"></script>
        <a class="close-reveal-modal">&#215;</a>
        </div>

Need Help?

Kindly let me know if you needed any help. I whole heartedly expect that you will like this pleasant gift for new year. Happy new year 2016 buddies but before I go here goes my new year resolution:

"Spending more time with my newly born baby "Ifza" and ofcourse blogosphere."

Love you all buddies! What are your new year resolution? =)

Friday, December 25, 2015

HTTPS: Blogger Images Given Relative Paths

HTTPS: Blogger Images Given Relative Paths

Link to My Blogger Tricks

HTTPS: Blogger Images Given Relative Paths

Posted: 25 Dec 2015 04:47 AM PST

blogger images served with relative urlsI guess blogger heard us finally! =) We reported back some 5 major disadvantages of switching to HTTPS for blogspot blogs and among these disadvantages was the serious concern of mixed content issue majorly caused by picasa images inserted inside the blog posts. These images was given absolute paths and we discussed that unless images are given relative paths, switching to https at this stage could be a nightmare. Fortunately just recently all blogspot blogs which uses the encrypted and secure HTTPS connection will get all its media content auto replaced with Relative URLs. All images are auto served with relative paths

Note: Click the Button below to see full list of topics under discussion.

Topics List

How are Images Stored in Relative URLS?

All images that you upload in a blogger blog are stored inside Picasa web album. Previously even if you had enabled HTTPS, your visitors would continue seeing the following http error in their address bar. It was caused mainly due to image links stored in http:// instead of https://

https error in blogspot blog

Connection is Not Secure

The connection to this website is not fully secure because it contains unencrypted elements (such as images) or the encryption is not strong enough.

But now this issue has been fixed thanks to relative paths which automatically replaces your Image HTTP URLS with HTTPS URLS. 

relative path and absolute path for images

In Relative URLS case you don't need to change the URLs from http to https because the image src will pick the current Domain URL structure of your site no matter how many times you change it.

BEFORE:

Before switching to https, blogger images are stored in absolute paths which looks like the one below:

http://3.bp.blogspot.com/-uH6EWDyC8uc/URKlnspDBRI/AAAAAAAAJGw/z_6DsQvaH9g/image%25255B7%25255D.png?imgmax=800

 

AFTER:

After switching your .blogspot.com domain to HTTPS, the images will get a relative path or naked paths without the hyper text protocol as shown below:

//3.bp.blogspot.com/-uH6EWDyC8uc/URKlnspDBRI/AAAAAAAAJGw/z_6DsQvaH9g/image%25255B7%25255D.png?imgmax=800

Thanks to this relative URLS your connection will remain secure and your visitors wont see "connection Is Not Secure" Instead they will now see a "Secure connection" alert box in the address bar as shown below:

secure connection in blogger blogs

Secure Connection

Firefox has blocked parts of this page that are not secure

Areas which are blocked are your widget scripts which are using the HTTP connection. You will need to manually replace it with HTTPS or upload your scripts at a secure https hosting.

Your views?

Just two months ago we raised this SEO blunder that was causing serious trouble but I am really glad now that blogger has fixed this mixed content issue and has handled it effectively at server side. This was exactly was we recommended in our post. Do read that post to get a clear idea of what we mean. Although I will still request that blogger team may now also fix the http to https redirection problem which is not yet sorted out. Only then switching to HTTPS could effect a blog's search ranking positively.

How do you think this latest development will help publishers better fix the mixed content errors? What else would you request from blogger to fix? Do share your views in the comment box below.

Finally for bloggers with over 1K-10K posts, relative paths are surely no less than a heaven! =) 

Monday, December 21, 2015

Open Live Writer — Keyboard Shortcuts

Open Live Writer — Keyboard Shortcuts

Link to My Blogger Tricks

Open Live Writer — Keyboard Shortcuts

Posted: 21 Dec 2015 04:47 AM PST

Open Live Writer - Keyboard shortcutsWindows Live Writer is dead now for Blogger users and replaced with its Open Source alternative "Open Live Writer (OLW)" which is the perfect blogging toolkit for publishers using Wordpress, Blogger, TypePad and all other popular blogging CMS platforms. As an addicted user of this new blog editor I just figured out some useful keyboard shortcuts that you can use to save time updating your blog using Open Live Writer. I have compiled below the complete list of keyboard shortcuts supported by OLW. Indeed most of these shortcuts are inherited from OLW's parent - Microsoft's Windows Live Writer.

Note: Click the Button below to see full list of topics under discussion.

OLW Topic List

Following is a categorized list of the most common keyboard shortcuts used in Open Live Writer:

BLOG & POSTING Shortcuts

Shortcut Function
Ctrl + N Creates a new post
Ctrl + G Creates a new page
Ctrl + O Open recently posted
Ctrl + S Save a post
Ctrl + Shift + P Publish a post
Ctrl + Shift + D Post draft to blog
Ctrl + K Insert hyperlink
Ctrl + J Add picture from computer
Ctrl + Shift + C Set categories or Labels
Ctrl + Shift + J Add picture from the web
Shift + F11 Switch to source view
Ctrl + F11 Update blog theme
F11 Switch to edit view
F12 Switch to preview view
F2 See post properties like keywords and post date


TEXT Formatting Shortcuts

Shortcut Function
Ctrl + B Bold
Ctrl + I Italicize
Ctrl + H Strikethrough
Ctrl + U Underline
Ctrl + = Subscript
Ctrl + Shift + = Superscript
Ctrl + Shift + L Bullets
Ctrl + Space Clear formatting
Ctrl + E Center text
Ctrl + L Align text left
Ctrl + R Align text Right
Ctrl + Shift + N New paragraph
Ctrl + Left Alt + 1 Heading 1
Ctrl + Left Alt + 2 Heading 2
Ctrl + Left Alt + 3 Heading 3
Ctrl + Left Alt + 4 Heading 4
Ctrl + Left Alt + 5 Heading 5
Ctrl + Left Alt + 6 Heading 6
Ctrl + Left Shift

Set text direction from left to right
(Only available in RTL mode)

Ctrl + Right Shift

Set text direction from right to left
(Only available in RTL mode)


PHOTO Editing Shortcuts

Shortcut Function
PrntScr + Ctrl + V Takes screenshot from your desktop screen and then press Ctrl + V to paste it in OLW


GENERAL Shortcuts

Shortcut Function
Ctrl + X Cut
Ctrl + C Copy
Ctrl + V Paste
Ctrl + Left Alt + V Ctrl+Left Alt+V
Ctrl + A Select all
Ctrl + F Find
Ctrl + Z Undo
Ctrl + Y Redo
Ctrl + P Print
Ctrl + F1 Show or hide ribbon
F1 Get Help for OLW

Need Help?

This is so far the complete list of keyboard shortcuts which are supported by Open Live Writer's latest build. I will keep updating the list to add more useful shortcuts. I hope this makes your posting hobby even more worthwhile. Let me know if you needed any help. Peace and blessings buddies! =)

Saturday, December 19, 2015

Open Live Writer — Edit Blog Labels and Pages

Open Live Writer — Edit Blog Labels and Pages

Link to My Blogger Tricks

Open Live Writer — Edit Blog Labels and Pages

Posted: 19 Dec 2015 04:47 AM PST

Create labels and pages in Open Live WriterNow when Windows Live Writer is dead and Open Live Writer has taken its place as its Open source clone, many blogger users have started complaining about errors and absence of features in OLW. We have already discussed how to fix these OLW errors and today we will share some exciting tweaks to help you organize blog labels and edit Blogger static Pages using the new Open Live Writer. Note that the official download copy of OLW has no option to set categories but do supports to add/create stand-alone pages but with this simple tweak you will be able to create new categories and assign multiple categories to a post. This tutorial is first time shared online to help you make the best possible use of OLW's unreleased features.

Note: Click the Button below to see full list of topics under discussion.

OLW Topics List

Category Option is available only in the Nightly Copy

Inside your OLW window, Click the tab "Blog Account" followed by "Blog options"

blog options

Then click the link "See blog capabilities" just below the password field.

 

capability in OLW

You can clearly see that the following options are not supported:

  • Categories
  • Multiple Categories 
  • New Categories

Which means neither can you apply a label or multiple labels nor can you create a new label for your blog posts.

To enable the Category box, you will need to download and install the "Nightly" setup copy.

Download OLW (Build 0.5.1.2) - Nightly

Difference between Nightly and Release

According to Scott hanselman (OLW co-developer) they have two builds of Open Live Writer, the NIGHTLY (they build it many times a day) and the RELEASE. They use the nightly for testing, but it means that Open Live Writer will be downloading 5 megabytes every day, a few times a day and updating itself with features they are testing. Release copy is updated a few times a year, maybe once a month but the Nightly copy is updated on daily basis to test new features. .

So if you want to get the most updated copy each time just like I did and had the benefit of getting an extra feature of "Category", you can surely uninstall your Release copy and replace it with a Nightly one.

No Category Option in Release

no category option

Category Option in Nightly

Category option available in OLW

As you can see there exists a Category box just to the left of "Set post date" utility.

Organize Labels in Open Live Writer

(1) Setting a Label

Blogger labels are case sensitive but OLW has handled this problem quite smartly. You don't need to worry about letter casing while assigning labels to your posts in OLW. All you need to take care is to ensure you are not making any spelling mistakes.

For example if your blogger label is "Affiliate Marketing" , you can easily set this label to your post inside OLW by writing "affiliate marketing" or even "AffiLiatE markETING" , no matter what you write as long as the spelling is correct, OLW will apply the label correctly. Spelling mistakes would create new labels in your blog!

To set multiple labels to a blog post, comma separate labels inside the "Category box" . As shown below:

adding labels

(2) Create a New Label

You can also create new labels inside Open Live Writer to tag your blog posts.

Simply write down your new Label inside the "Category Box" and publish your post to Blogger! That's it.

creating new label

New Label will be created and added automatically to your blog post. Thus OLW helps better organization of your blog categories. You can easily create, remove or apply label to a specific post but if you wish to delete a label from your blog completely then you will need to do that through your blogger dashboard.

Creating and Editing a Static Page

This is an amazing new feature that OLW has which "Windows Live Writer" lacked. This option was only available for WordPress blogs but now thanks to "Open Live Writer" opensource courtesy, blogspot users can create static pages for their blog using OLW editor.

To create a new Page go to File Menu > New post > Choose "New page"

Create a Page

That's it! Give your page a title and hit publish.

To delete a Static Page in blogger, you will need to do that by going to Blogger > Pages

Delete a Page

Need Help?

Let me know if you needed any assistance in better understanding the technical configurations of OLW. I would love to help. I hope this tutorial series may help most of you in better configuring the blogging tool. Peace and blessings buddies! =)