Sunday 3 June 2012

0

How to Add and Use SyntaxHighlighter 3 for Blogger

  • Sunday 3 June 2012
  • Tanmay Kapse

  • The latest version of Syntax Hihglighter has been released and there are quite a few changes in the way things work now. This version was named Syntax Hihglighter 3.0.83.


    NEW FEATURES IN 3.0.83



    Dynamic Brush Loading
    • SyntaxHighlighter comes with almost 30 brushes out of the box. One of the most requested feature has been the ability to dynamically load them without having to load them all on the same page.
    No Flash Copy to Clipboard
    • Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.
    Code Selection
    • This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.
    Add Title
    • Now you can add a title to the code block by title="title name" parameter to the <pre> tag.
    • More under the hood
    • More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.
    • Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.
    Code Selection
    • This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.
    Add Title
    • Now you can add a title to the code block by title="title name" parameter to the <pre> tag.
    • More under the hood
    • More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.


    INSTALLATION
    • Before you could get in to the process, I recommend you to back up your template.
    • Navigate to Dashboard > Design > Edit HTML
    • Find </head> 
    • Copy below code and paste it just before the </head> tag
    <!-- Syntax Highlighter 3.0.83 START -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>
    <!-- Syntax Highlighter 3.0.83 END -->
    • Save your template.
    NOTE:

    • Whenever you have to write some codes in your posts, click on "Edit HTML" tab of your post editor and write the codes between the following tags
    <pre class="brush: js">
    Your code here
    </pre>
    • To add title in your code add title="Title Here" it's look like the code below:
    <pre class="brush: js" title="Title Here">
    Your code here
    </pre>Your code here</pre>
    For an example :

    <pre class="brush: js" title="This is a title, check it out!">
    <b:includable id='comments' var='post'>
      <div class='comments' id='comments'>
        <a name='comments'/>
        <b:if cond='data:post.allowComments'>
          <h4>
            <b:if cond='data:post.numComments == 1'>
              1 <data:commentLabel/>:
            <b:else/>
              <data:post.numComments/> <data:commentLabelPlural/>:
            </b:if>
          </h4>
    </pre>


    Will display like the below image on your blog post.


     I hope you were able to implement this in your blog.

    Pls do share this post .

    Enjoy :)

    Read More

    Saturday 2 June 2012

    0

    Stop Your Articles From being copied with Simple CSS

  • Saturday 2 June 2012
  • Tanmay Kapse

  • Consider you are working hard in creating articles and someone just copy and paste your content on their website without adding any credit link,then how would you feel ? Here I have an unique and simple trick to stop your post stealing.The biggest advantage of this trick is you don't have to put any scripts or any other things in your template it totally works with pure CSS3.You just have to put a little snippet of CSS code in your template which will prevent users to copy text from your articles.And I hope this small trick will surely help you to prevent your articles from republishing/redistributing on other websites.



    How To Stop Your Post Stealing
    • Go to Your Blogger Dashboard > Design > Edit HTML.
    • Take a backup of your template.
    • Now find for below code in your template
    ]]></b:skin>

    •  add below code just above/before of above code
    .post-body {
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    user-select: none;
    }
     Now save your template and you are done....

    Follow my blog to get more tricks like dese.... :) 
    Read More
    0

    How to Choose Brilliant Images for Your Blog Posts

  • Tanmay Kapse

  • We are living in a world that rewards instant gratification; people do not want to take the time to read a book, if the movie is available. In other words, "a picture is worth a thousand words." It should not be difficult to see why illustrations are important when keeping readers interested in your blog posts. Pictures can help readers to follow your writing more easily, breaking up the text so that it doesn't look like one long, tedious piece of work.
    Here are some tips on how to choose the best images for your blog posts:


    (#1.) Relevance - blog posts are generally there to persuade readers to show interest in a certain topic, product, or service. Adding pictures to help illustrate those concepts can only help, but don't go overboard. Shy away from adding pictures for the sake of adding pictures. Make sure that you are putting up illustrations that are going to add to the relevance of your text, not take away from it. It is easy to add too much, so try to keep it straight forward and to the point, just like the text.

    (#2.) Copyrights - always remember that not all images are available for your use. There are copyrights for images that are on the internet as well as copyrights for images that are in print. If you want to avoid any problems that you might encounter with copyrighted materials, use your own images. Go looking for images that give relevance to your post and take the pictures yourself. If that doesn't seem like a viable option for you, there are public image sites that you can locate off of any search engine. Most search engines will provide you with an image option; type in the object or term that you are looking for and browse through the hundreds of images that are available to use without objection. If you find an image on another blog or site that you would like to use, remember to be courteous. It is polite to send a short email or contact the owner of the site asking for permission to use the image.

    (#3.) Editing - it is important to do minor (and sometimes major) editing on your images before just sticking them up on your blog. It is more than aggravating to have to wait an eternity for a page to load because the file is too large. In fact, in this "instant gratification" world, no one waits for a page to load for very long without just moving along. If you have a file to add that is of larger size, put a thumbnail up on the page. If users want to wait to view the full photo, they have that option. If not, it doesn't create problems when loading. When finalising photos or images for your blog post, keep clarity in mind. A clean and crisp image gets the point across a lot better than an unclear one. Photoshop is a great tool to use before putting pictures up on your blog; you can add or subtract from an image as needed, and sometimes it is needed.

    (#4.) Avoid - there are some things that you should try and avoid when choosing images for your blog post. For instance, animations are great and can potentially add just the right ingredient to your post, but it is important to think about internet connections. Some people don't have the fastest connections, and you don't want to alienate parts of your audience. It is also a good idea to stay away from background images; they can slow the process of loading your page down to snail pace. Account for those readers who may want to print your post without the background attached.

    (#5.) Include - there are images that are better to use than others and should be highly considered. You want to make sure that you are using unique illustrations. If people have seen the image a thousand times, it loses its weight. People associate certain objects with a product or service and you want your readers to associate illustrations with your work. Include pictures that capture the essence of what you are trying to relay to your readers, it doesn't have to be completely literal. Capitalise on reader satisfaction by using photos that mean something to them; use pictures of people, kids, animals. Everyone likes to laugh, so adding a humorous image is a tool that will keep readers returning to your page. This is your chance to shine, to set yourself apart from similar blogs or from those that are selling the same product or service. Images can very easily turn into a mascot for a particular product, site or service. Mascots can be very beneficial to a business and finding a good one starts with searching through images that are relevant to your end goals.
    Read More
    0

    Optimize Your Headings For more Traffic

  • Tanmay Kapse

  • What are Heading Tags?
    H means "Heading" tags. They starts from H1 to H6 in descending order of importance. The words written in H1 tags are most important words in our whole blog and the search robots give first search priority to these H1 Tags. H2 tag are less important than H1 and so on to H6. These tags plays very important role in our SEO. They are used to tell the search robots about the most important words in our blog which should be crawl first. Headline tags are also used to organize our posts. They are very useful for our posts visibility in search engines.




    How To Use Headline Tags In Your Blog?
    As already said, H1 tag is the most important tag in our whole blog, so it should be used only once per page of your blog to avoid duplicate contenting. In every blog (including Blogger), H1 tags are used as Blog's title. Search robots also consider the words written in H1 tag as your blog's title. So the most important thing after Blog's title is your Posts Title which should be written under H2 tags. But, I noticed that most of the Bloggers are using H3 tag as post title which is tremendously reducing the post visibility in search engines.

    Increase Traffic : 
    Convert Your Posts From H3 to H2 Tag


    • Go to Blogger Dashboard >> Your Blog >> Template.
    • Backup your template.
    • Now click Edit HTML and check the box of expand widget template.
    • Search for h3.post-title.
    • Now replace it with h2.post-title. (Replace all h3.post-title in your template).
    • Now find the following code:
     <h3><data:title/></h3>

    •  And replace it with the following:
     <h2><data:title/></h2>

     Now you've successfully completed the job!




    Read More
    0

    ADD FLOATING +1, TWEET AND FACEBOOK LIKE BUTTON IN BLOGGER - Add This

  • Tanmay Kapse
  • These days bloggers are giving stress on floating share buttons because of their permanent visibility. They are always on the screen of reader and available for like and sharing. It is a fast and easy way to spread your blog.

    This share plugin include floating facebook like, tweet and google +1 button in a simple and good style which makes it easy to like and share your pages.







    Add Floating Social Share Widget
    • Go to Blogger > Layout.
    • Click Add a Gadget and select HTML / Javascript.
    • Now paste the following code in it.
    <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;"> <a class="addthis_button_facebook_like" fb:like:layout="box_count"></a> <a class="addthis_button_tweet" tw:count="vertical"></a> <a class="addthis_button_google_plusone" g:plusone:size="tall"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4fc4b1e85de9796e"></script> <!-- AddThis Button END -->
    To change the position of the widget change the following values  

    • Change the value " 50 " to your desired number. 

    left:50px 
     top:50px

    Also have a look at the modified look of this widget : Click here 



    Read More
    0

    " Stay Connected " Widget for Blogger Sidebar

  • Tanmay Kapse
  • Having sharing buttons in your blogger sidebar is very useful . It helps you get your blog shared . Today I am showing you  some cool looking share buttons for blogger.


    How to add the widget ? 


    • Login to your blogger account 
    • Dashboard - Layout - Add a gadget - Html / JavaScript
    • Copy the Code in it . 
    <table border="0"><tbody>
    <tr><td><img src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TM9g9IUnPEI/AAAAAAAAB_4/vL57WmouxO8/s1600/stay+connected.png" /></td><td>
    <a target="_blank" href="http://feeds.feedburner.com/btzz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TUioxHuEqUI/AAAAAAAACzw/sDjXq2r-LEo/s1600/connect-rss-feed.png" /></a></td><td>
    <a target="_blank" href="https://twitter.com/#!/shipsocker" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_rKG-ziTSNUQ/TUiowIW-2bI/AAAAAAAACzo/PgDZVQrh7c8/s1600/connect-twitter-follow.png" /></a></td><td>
    <a target="_blank" href="http://www.facebook.com/BloggerTrickzz" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TUiowob8qHI/AAAAAAAACzs/Fsw_CkgSTSQ/s1600/connect-facebook-follow.png" /></a></td></tr>
    </tbody></table>
    <a href="http://www.bloggertrickszz.blogspot.com/"><img alt="Best Blogger Tips" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png" /></a>

    Customizations : 

    • Change btzz to your feedburner account name 
    • Change Shipsocker to  your twitter account name.
    • Change BloggerTrickzz to your facebook page name. 
    Save your template and you are done.

    ----------------------------------------------------------------------------------------------------------------------------------
    Demo > > 


                                       
    ---------------------------------------------------------------------------------------------------------------------------------------------------
    Best Blogger Tips

    Having problems ? Do comment below .


    Read More

    Friday 1 June 2012

    0

    Attractive " Table Of Contents " Page

  • Friday 1 June 2012
  • Tanmay Kapse





  • It's very important for a publisher To insert Sitemap (Table of Contents) in his blog  to make it look more professional. Basically Sitemap (Table of contents) is a place in your blog where all of your post are arranged according to their type.This is the reason why today we will going to Insert a Table of Contents in Blogger.

    We have designed a table of contents for blogger which will update automatically so you don't need to just edit it every time when you publish a new post.If you  publish a new post on your blog it will automatically added  to your Table of Contents Page so it really saves lot of time.This Table of Contents widget will display all of your post well arranged under their specific categories (LABELS). 

    This widget is designed and optimized with CSS so it looks really attractive and has some Jquery which do attract your eyes.So let us start our fingers rolling over the tutorial.

    But first I know you would love to see the preview of the widget,so first see the widget which we are going to apply on our blog



    ( Its My other Blog ) 

    Adding a Table Of Content in Blogger:

    • To insert an Attractive Table Of Contents (Sitemap) in Blogger Follow these Steps
    • Go To Blogger >> Template >> Edit HTML >> Proceed 
    • Now search For  ]]></b:skin> in Your Template with (CTRL+F)
    • when you find  ]]></b:skin> just above it  place the following code
    /*--------Blogger TricksZz-----*/ .judul-label{ background-color:#E5ECF9; font-weight:bold; line-height:1.4em; margin-bottom:5px; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 1px 1px 4px #AAAAAA; box-shadow: 0 1px 2px rgba(0,0,0,.2); color: #e9e9e9; border: 2px solid white !important; background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757)); background: -moz-linear-gradient(top,  #888,  #575757); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757'); .data-list{ line-height:1.5em; margin-left:5px; margin-right:5px; padding-left:15px; padding-right:5px; white-space:nowrap; text-align:left; font-family:"Arial",sans-serif; font-size:12px; .list-ganjil{ background-color:#F6F6F6; .headactive{     color: #fef4e9;     border: 2px solid white !important;     background: #1C8DFF;     background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));     background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2'); }


    •  Now save the template by pressing Save Template button 
    • Now we will create a new page for our Table of contents Remember:we will create a new page not post.To create a new page go to Blogger >> Pages >> New Page >> Blank Page 
    • Now Give title to your page i.e "XYZ Table Of Contents" and now under EDIT HTML tab (button) paste the following code

      <script src="http://nurulimaminfo.googlecode.com/files/daftarisiv2-pack.js"></script> <script src="http://www.bloggertrickszz.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script> <script type="text/javascript">var accToc=true; </script> <script src="http://deroc.googlecode.com/files/accordion-pack.js" type="text/javascript"></script>
      Now after pasting the code above look for 
       
      http://www.bloggertrickszz.blogspot.com and replace it with your blog URL and Publish the page now go and view your Amazing Table of Contents with Drop down style. 


    Read More
    Receive Free Updates Via Email. Subscribe Now!