Showing posts with label 4-Blog Tricks. Show all posts
Showing posts with label 4-Blog Tricks. Show all posts

15 Jan 2015

Create a Smooth Scrolling "Back To Top" Button for Blogger


Finally yet another exciting trick to create a smooth scroll to top button for BlogSpot blogs. We designed and released many buttons and tutorials on back to top/bottom buttons but they were all static and had no fade out effects and smooth scroll effects. Luckily we just discovered a cool jquery script that does all the work. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. Please see this button in action towards the bottom right corner of this blog.



The best thing about this button is that it appears only when the user scrolls down the page and disappears as he scrolls up.

Add Scroll to Top button to Blogspot

  1. Go To Blogger > Design
  2. Choose HTML/JavaScript widget
  3. Paste the following code inside it
Replace IMAGE LINK with the image link of your back to top button. You can get several beautiful free buttons from our library. Download Back to top/bottom buttons.

4.   Save the widget and drag it near the footer or any bottom position.
      5.  View your blog to see the magic.

I this little trick works for all of you. If you have any questions on how to adjust the position and fade duration then please let me know. I didn't mention them for simplicity. Please do a favour by sharing it with your friends on FB and G+. Peace brothers. :)

Guide to Embed Almost Anything in your Website

arn how to embed almost anything in your HTML web pages from Flash videos to Spreadsheets to high resolution photographs to static images from Google Maps and more.
Embed RSS Feeds in Web Pages
Go to this page, replace the feed URL with your own feed, use the default color scheme or change it to something else and then click Get Code. You’ll get a JavaScript snippet that can be easily placed in the sidebar of your blog.
If you like to embed feeds from multiple sources, merge all of them into one using Yahoo Pipes and then pass the combined feed to the Google Gadget. You can also use RSS widgets like WidgetBox or YourMinis that are done in Flash and not JavaScript.
Embed High Quality or HD YouTube Videos
To embed a high resolution version of YouTube clip in your web pages, first make sure that “Watch in High Quality” or “Watch in HD” link exists next to the YouTube player as most videos are only available in standard format.
Next copy the YouTube embed code and append &ap=%2526fmt%3D18 (for high quality) or &ap=%2526fmt%3D22 (for 720p High Definition) to the URL value of the movie parameter in both instances (see YouTube HD example).
Embed MP3 music and other Audio
If you like to embed audio files like songs, podcasts or interviews in your web pages, use Yahoo! Media Player – its a free Flash music player that automatically detects all links to MP3 files in the current web page and turns them into a music player.  Another alternative is the Google MP3 Player.
To embed other audio formats like 3GP, Midi, Real or Windows Media, it may be a good idea to convert these files into MP3 using Zamzar so that they play on almost any web browser.
Embed Flickr Photos and Slideshows
To embed an individual Flickr photograph in your blog, click the "Share This" link (available next to the photo title) and choose embed it. Flickr requires that the embedded image should link back to Flickr and this built-in embed option automatically takes care of that requirement. (see example)
To embed a Flickr photo slideshow in your web page, open any Slideshow in a new page (see example) and choose "Customize HTML" from the embed option (seeexample). Here you can specify a custom size for your Flash slideshow so that it fits just right into your web page.
Embed Picasa Web Albums
When you open a photo album inside Picasa, click the link in the right sidebar that says "Link to this album" and choose "Embed Slideshow". You can use the same approach to embed individual photographs that are available inside Picasa.
Embed Events from Google Calendar
Click the drop-down arrow next to any Google Calendar and select Calendar settings. Open the Google Embeddable Calendar Helper program by clicking the customize button and choose elements that you want to display or hide in the calendar.
Embed Very Large Photographs
To embed really large images in your blog, you may either use Deep Zoom or theGoogle Maps viewer. These programs break your photographs in small tiles and you can even pan / zoom across these images very similar to the default interface of Google Maps.
Embed Charts and Graphs in Web Pages
My personal favorite is Zoho Sheet – any chart created inside Zoho Sheet can be published as an external image without exposing the full spreadsheet. If you are interested in creating charts with low volume of data, use Google Charts. 
Embed GIF Animations and Screencasts
GIF animations (see example) are a perfect way to embed short screencasts in web pages as they require no plugins and auto-play inside feed readers. You should upload GIF files to your Flickr account as it preserve all the frames while lot of other image hosting website will drop anything after the first frame.
Embed Chat in your Blog
If you like to chat with visitors who are currently on your site, get the chat widget from Meebo Me and place it in the sidebar of your website. Visitors show up in your Meebo buddy list so you can strike up a conversation, answer questions, or just keep tabs on guests. Also see some more options to embed chat in blogs.
Embed Word Documents
Upload your document to Scribd and they’ll give you the embed code in Flash. Scribd supports both doc and the new Office 2007 docx format in addition to Open Office documents. Even Barack Obama is using Scribd to upload his public documents and upcoming plan.
Embed PowerPoint Presentations
While the popular choice is Slideshare, you should also consider using Issuu (best web application) for presentations that are either large or formatted in the form of magazines or catalogues (see example). The only downside is that Issuu accepts PDFs so you need to convert the presentation before uploading onto Issuu.
Embed Spreadsheet Data
Both Zoho Sheet and Google Docs allow you to publish a range of cells from a spreadsheet into a web page but the embedding process in Zoho is less complicated – select a range and choose "Publish" from the contextual menu to embed that range into your web page.
Embed Adobe PDF Files
To embed PDFs in a web page, you can either use Issuu (for magazine style PDFs) or Scribd for PDFs has either have lot of text or have a top-to-bottom reading layout similar to Word documents.
Embed Flash (SWF) or Flash Video (FLV)
The best option to embed Flash content is via swfobject. It improves the overall user experience by providing alternatives in case Flash is missing and your Flash content also becomes more searchable. This tutorial has all the files and other details to help you get started with SwfObject 2.
Embed LinkedIn Profile
If you wish to display your LinkedIn profile in the sidebar of your blog, tryLinkInABox. People (site visitors) can read a summary of your LinkedIn profile without leaving the site.
Embed Google Maps in Web Pages
Embedding a Google Map in your website is now almost as easy as adding an image – just open the Static Maps wizard, search for location that you want to embed and specify the dimensions of your map. They’ll provide a simple URL that actually points to a static image of that map.  
Embed Another Webpage in your Blog
If you like to embed another website into your web page, your best bet is anIFRAME tag also known as an Inline Frame. Just set the SRC value to the address of the web page that you want to embed into your current HTML document. You could try IFRAMEs for inserting live search results from Google into your web page without having to worry about APIs.
Embed Windows Media or QuickTime movies
While it is possible to embed mov or wmv videos in web pages directly using theOBJECT tag, I recommend that you put these videos onto blip.tv and then embed them in web pages as Flash video.  That’s because your visitors can then play the video without extra plugins and two, they always have the option to download the video in the original format from blip.tv servers.
Embed Other Fonts in Web Pages
Most web pages use universal fonts like Arial, Times New Roman or Verdana since they are installed on most computers and hence your web pages will render correctly. If you want to try something different and render pages in fonts like Microsoft Calibri or Adobe Garamond Pro that are only available on some machines, all you need is sIFR – it lets you use almost any font for your web pages using JavaScript + Flash and is perfect for writing “newspaper style” headlines.
Embed your Lifestream in a Web Page
You have a presence on YouTube, Flickr, Twitter, Last.fm, Facebook, Amazon and a dozen other online places. It can get really tough for friends to track you at so many places so what you should do is create an account at FriendFeed, import all the different services that you use and then use the FriendFeed Badge to embed your lifestream activity on your main site. You can also create Lifestream with Google Reader.

13 Jan 2015

Create sitemap XML for Blogger blog in 1 minute.




Create sitemap XML for Blogger blog in 1 minute.


A Sitemap is a list of accessible pages in your website. Sitemaps helps search engines like Google, Yahoo and Bing to easily crawl pages in your site which helps in better index. As a blogger you must create a sitemap so whenever you make a new post search engines can crawl and index them easily. In this post will guide you to create sitemap for Blogger blog and submitting it to Google webmaster tools in just 1 minute.

Default Blogger sitemap

By default your blogger blog will have sitemap, but the issue with that sitemap is it only shows your recent blog posts. A perfect sitemap is that it should contain the list of all you pages so that search engines know the complete structure of your site. Let’s see how to create sitemap for Blogger blog.

How to create sitemap for Blogger

Creating sitemap is very simple. Just use this (atom.xml?redirect=false&start-index=1&max-results=500)next to your blogs URL. See example below.
http://yourblogname.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Now you have created sitemap for your Blogger blog, but you need to tell search engines about your sitemap by Submitting your sitemaps in Google webmaster tools

Submitting your Blogger sitemap in Google webmaster tools

Login to your Google webmaster tools and select you website. In your site dashboard click sitemaps below. Now click add/test sitemaps, add your sitemap (just the atom.xml?redirect=false&start-index=1&max-results=500) and submit your sitemap.

That’s it you have successfully submitted your sitemap in Google webmaster tools. Now it’s ready for crawling and indexing. You can find the number of pages crawled and indexed in Google webmaster tools.
Blogger sitemap - Submitting sitemap in Google webmaster tools
If you like then also submit your Bloggers sitemap to Bing webmaster tools.

8 Jan 2015

Create a Drop Down Menu In Blogger Blogspot


Update: We have published almost 9 more menus like this one. To get them all just use the search box and type drop down menu. If you wish to add the same menu to Blogger Template Designer templates then read this post -> Custom Drop Down menu

image
Why do you run after scripts such as jquery while you can use simple CSS and HTML to create beautiful drop down menus for your blog. I already shared a list of 30 Navigation menus and now you need to learn how to create a drop down menu in a navigation. I am sharing a simple code here that can be fully customize to make your preferred changes. So lets get to work!


Live Demo


How To Create a Drop Down Menu?

A drop down menu is needed when you have too much content on your blog or you love keeping things organized. To add a drop down menu to your blogger blogs do this:
  1. Go To Blogger > Design > Page Elements
  2. Select a HTML/JavaScript Widget just under the header and paste the following code inside it,
drop down menu

     

           

  •           Home
           

       



  •           About
          

  •        



  •           Contact
           

  •  



  •            Sitemap
               
           

  •      
        Replace # with your Page Links and the bolded text with relevant page names. The yellow highlighted code is responsible for the drop down menu. You can copy and paste it under any tab you want just before
    To add another tab just paste this code above




  •           Tab Name
           

  •             3.   Now Go to Design > Edit HTML
        4.   Backup your template and search for ,
    ]]>
         3.   Just above it paste the code below,
    /*----- MBT Drop Down Menu ----*/

    #mbtnavbar {
        background: #060505;
        width: 960px;
        color: #FFF;
            margin: 0px;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px;
    }

    #mbtnav {
        margin: 0;
        padding: 0;
    }
    #mbtnav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #mbtnav li {
        list-style: none;
        margin: 0;
        padding: 0;
            border-left:1px solid #333;
            border-right:1px solid #333;
            height:35px;
    }
    #mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
        color: #FFF;
        display: block;
       font:normal 12px Helvetica, sans-serif;    margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
           
    }
    #mbtnav li a:hover, #mbtnav li a:active {
        background: #BF0100;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 10px 12px;
           
       
           
    }
    #mbtnav li {
        float: left;
        padding: 0;
    }
    #mbtnav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;
    }
    #mbtnav li ul a {
        width: 140px;
    }
    #mbtnav li ul ul {
        margin: -25px 0 0 161px;
    }
    #mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
        left: -999em;
    }
    #mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
        left: auto;
    }
    #mbtnav li:hover, #mbtnav li.sfhover {
        position: static;
    }
    #mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
        background: #BF0100;
        width: 120px;
        color: #FFF;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
       
    }
    #mbtnav li li a:hover, #mbtnavli li a:active {
        background: #060505;
        color: #FFF;
        display: block;     margin: 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    }
    Make these changes:
    • Change #060505 to change background color of the Main menu
    • Change  the yellow highlighted text to change font color, size and family
    • Change #BF0100 to change the background of a tab on mouse hover
    • Change #BF0100 to change the background color of the drop down menu
    • Change #060505 to change the background color of drop down menu on mouse hover
          4.    Save your template and you are done!

    Visit your Blogs to see a beautiful Navigation menu just below Header. Have Fun! :)
    If you have any questions feel free to post them.

    Source from: Mohammad Mustafa Ahmedzai

    No One Reads My Blog. 9 Tricks to Change Things.

    13 Intelligent Opinions, Leave Yours.
    no one reads my blog
    No one reads my blog.
    That is one of the most common complaints I’ve heard since starting Blog Tyrant.
    Even when you do all the right things (like long-form content that rocks) it still seems to amount to only small bits of traffic.
    Why is that?
    In this post I’m going to talk a little bit about why no one reads your blog and some tricks you can use to completely change things no matter what niche you’re in or how old your blog is.
    Ready?

    Why doesn’t anyone read my blog?

    If no one is reading your blog the first thing you need to do is ask yourself a big fat question.
    Would I share this stuff on Facebook?
    If “no” is your answer then chances are you aren’t producing anything worth reading.
    Remember, people are bombarded with dozens of excellent, viral pieces of content every day.
    You see Charlie biting his brother’s finger, Bored Panda and BuzzFeed showing you nostalgic funnies from the 90’s, and a million other articles borrowed from the front page of Reddit and imgur.
    Think what you will about these sites, the content is compelling.
    There wouldn’t be a single person reading this article now who could hold their hand to their heart and swear that they’ve never clicked on one of those shareable posts on Facebook.
    We all do it.
    So now we need to look at our own blogs and ask ourselves deeply and honestly about how well we are competing for peoples’ attention.
    Do our blogs cut it?

    Why it might not matter

    The interesting thing to note at this point is that creating content that “cuts it” is often not enough.
    It still doesn’t get noticed.
    That is when things start to get really frustrating for bloggers – you do all the right things as far as content production goes but still nothing happens.
    Depressing.
    So what can we do about it?

    9 tricks to get people to read your blog

    If no one is reading your blog then there might be a few things that you’ve failed to consider.
    Here are a bunch of tricks that aren’t always directly related to good writing, but will help to get you read.
    1. Check your site speed right now
    The number one reason that I click the back button is when a site isn’t loading fast enough – especially if I’m in “research mode” and have 40 other tabs open to investigate. The stats always seem different but the generally accepted figure is that you’ll lose 20% of visitors for every second that you site takes to load over 1.5 seconds.
    Tip: A fast blog is achieved by using fast servers and minimising objects that need to be loaded. Use Pingdom Tools to analyse what’s causing yours to lag and start your research on an item-by-item basis. For example: firstly, how do I shrink big images.
    2. Change your blog photos to engage humans
    Photos are often the first thing that you notice on a blog. Humans have evolved to recognise faces and this carries over to our online lives as well. This means you have to pay careful attention to the imagery that you use on your blog, and make sure any photos that you have of yourself are professional and of good quality. Don’t ever use clip art imagery, or photos that have a stale white background from a cheap stock photography site. Make sure every photo fits the brand.
    Tip: Taking your own photos is often the best option. It gives you complete ownership of the rights and is another piece of original content that Google will identify. Failing that, check the downloads number on each photo before using it. If it’s been used by heaps of people it’s basically like lots of duplicate content.
    3. Get a mobile responsive design that collapses well
    A time will come when we won’t have to keep recommending this to bloggers! But, alas, that day is not here yet. So many of the websites I visit through the comments here on Blog Tyrant are designs that are not mobile friendly. Not only is it bad for user experience, it is now a negative ranking factor for your blog’s SEO. But before you go and grab just any theme, make sure it “collapses” so that the content is at the top and not menus, sidebars and other distractions.
    Tip: Get on WordPress already. There are hundreds of free mobile responsive themes including the new default theme which is beautifully simple and easy to customize. If you have an existing theme you want to keep contact my buddy Viktor who can code it to make it responsive.
    4. Link out way, way more
    A lot of bloggers think that linking out to other websites will cause you to lose page rank. Personally, I think that is total rubbish. The more you link out to other (quality) blogs the more value you will provide your readers. Not only that, the people that you link to will notice you and often give you a shout out or help to promote the post. A lot of SEOs have been predicting that putting well-trusted links around your own will also help your ranks.
    Tip: In a 1,000-word post you’ll want to have at least 10 links to other websites. Try and imagine you’re back at college and you need quality references.
    5. Make your font a lot bigger
    I recently updated the font here on Blog Tyrant to a larger size and a less harsh color. I also used a Google Font instead of a self hosted one and saw significant speed improvements. But, the studies all show that bigger fonts are important because there are a lot of older people reading your blog, a lot of people reading on small phones and a lot of older people reading on small phones! A large well spaced font makes a huge difference to how appealing your writing appears.
    Tip: Make sure your font matches your brand. Try to use fonts that are familiar to people as they appear less confronting to new readers. The best bet is to find a website you like and ask your coder to copy the typography.
    6. Get really good at sneaky research
    It doesn’t matter how good your articles are if they’re pitched at, and promoted to, the entirely wrong group of people. You need to know what your audience wants, what problems they’re having and then where you can reach them best. You also need to know what your competitors are doing and how you can improve on that. A lot of it comes down to clever Google searches but you can also use tools like SEMRush and Google estimator to get some good details.
    Tip: Find out the top 10 most successful posts on your main competitors’ websites. Figure out where they got their links and shares from and then try to imitate it with a better article or tool.
    7. Focus on reach, not loyalty
    This is something that a lot of people find upsetting but is so important to business. It has really helped me grow a lot over the last two years and is an idea I wish more people understood. You need to get in front of more people, not make your existing readers more loyalty. Loyalty is a by-product of reach. So if you get more traffic you will get more loyal readers. In fact, Brian Sharp showed in his book that if you focus on loyalty you’re actually losing money.
    Tip: If you read one book this year make it How Brands Grow which talks about why loyalty is not as important as everyone thinks. Every marketer needs this.
    8. Do one test a week – every week
    Last year a few big bloggers talked about how split testing is not all its cracked up to be. In fact, a lot of tests, they argued, were a waste of time and caused you to get the wrong kind of results. Well, the thing I feel that is missed from this argument is what split testing itself teaches you. And it’s often not about one particular goal.
    By split testing on my blog and with adverts I’ve learned so much about the people who visit my blog, branding, conversions and even the tech behind my set up. Testing is how we learn.
    Tip: Start by using AWeber (or your equivalent) to work on increasing sign ups on your blog by 1% only. Then figure out how to get 1% more email opens. Then try to get 1% more clicks. Repeat.
    9. Stop doing the same thing that’s brought zero results
    I think it was the motivational speaker, Tony Robbins, who has the famous quote: “If you do what you’ve always done, you’ll get what you’ve always gotten.” I’m not a big one for TV self-help stuff, but that is really true when it comes to blogging. Sometimes you see bloggers writing the same kinds of articles month in, month out, and hoping for some big break. Unfortunately it doesn’t often work like that.
    Tip: Get your writing out there. Guest blog, approach newspapers, buy adverts, etc. And then experiment with different formats and even different writers. Try videos. Try podcasting. Add value and solve problems in radically different new ways. Keep trying.

    What would you tell someone who told you that no one reads their blog?

    I am really curious to hear what all the Tyrant Troops would advise to someone who said that no one reads their blog. Do you agree with the tips above or do you think there is something else major that they should be working on?

    8 Dec 2014

    Create a Customized Three Column Footer Widget In Blogger


    Three-Column-Footer You might have seen a three column widget at the bottom section of many commercial and professional blogs. Where you can add whatever stuff you like. Take my footer widget as an example. I have added widgets that further keeps the reader busy. This Footer widget contains three columns where each column can accommodate as many widgets as you can add! In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.

    See a screenshot, Three-Column-Footer-Widget

    Add This Three Column Widget Inside Your Blogger Templates

    Follow these steps,

    1. Go To Blogger > Layout > Edit HTML
    2. Back Up your template
    3. Search for ]]>
  • Just before ]]>
  • paste this CSS code,
    /* -----   LOWER SECTION   ----- */
    #lower {
           margin:auto;
           padding: 0px 0px 10px 0px;
           width: 100%;
           background:#333434;
    #lower-wrapper {
           margin:auto;
           padding: 20px 0px 20px 0px;
           width: 960px;
    }
    #lowerbar-wrapper {
         border:1px solid #DEDEDE;
          
    background:#fff;        float: left;
           margin: 0px 5px auto;
           padding-bottom: 20px;
           width: 32%;        text-align: justify;
           font-size:100%;
           line-height: 1.6em;
           word-wrap: break-word; 
           overflow: hidden;
    }

           .lowerbar {margin: 0; padding: 0;}
           .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
          margin: 0px 0px 10px 0px;
           padding: 3px 0px 3px 0px;
           text-align: left;
           color:#0084ce;         text-transform:uppercase;
          font: bold 14px Arial, Tahoma, Verdana;        border-bottom:3px solid #0084ce; }
    .lowerbar ul {
          margin: 0px 0px 0px 0px;
          padding: 0px 0px 0px 0px;
          list-style-type: none;
    }
    .lowerbar li {
          margin: 0px 0px 2px 0px;
          padding: 0px 0px 1px 0px;
          border-bottom: 1px dotted #ccc;
    }



        5.   Now Search For
    and just above this code type the codes below,

     
    6.  Save your template. done!
    Now visit the page Layout > Page Elements and start adding widgets!

    Customization

    You can easily customize the look and colours of the this footer widget. I have bolded the important parts in the CSS code above. Read the descriptions below carefully to better stylize your three column widget. For changing colours use our advanced Colour Code Generator
    • background:#333434;   Changing the six digit colour code will change the background colour of this widget.
    • width: 960px;  This is the width of the widget. If you want you can adjust this width value in accordance with the width of your blog.
    • background:#fff;  and    width: 32%; is the background colour and width of the three columns where the widgets are added.
    • color:#0084ce; This is the Colour of Title Headings
    • font: bold 14px Arial, Tahoma, Verdana;  Edit this to change the font size and family.
    • border-bottom:3px solid #0084ce;   Edit this to change the thickness, style and colour of the border that appears at the bottom of Title Heading
    • border-bottom: 1px dotted #ccc; Editing this will change the size, style and colour of the border that appears below links.
    That’s All!
    A tutorial on Four Column Footer widget will be posted soon. Till then keep playing with this one :> Do let me know if you needed help. Your questions are more than an honor!