Monday, 9 June 2014

How To Host JavaScript And CSS Scripts On Google Drive


Embedding JavaScript and CSS files in your blogger template or any page of your blog instead of writing all the script in your template has an advantages to prevent to clone your template. However more external JavaScript and CSS files are not good for template and SEO but you can host 2 to 3 external files with your template. You must have Gmail account to access google drive and who is using blogger then he must have gmail account.


  • Log in to your Gmail account and open drive.google.com
  • Click on the upload button and choose file to upload and choose your JavaScript or CSS file which you want to host on Google Drive.
When Upload is complete click on Share link.

Sharing setting will be open and you'll get the file link. You need to change the privacy of file from only you to public.
In access option change from private to public.

here is the file url which we copied.

https://drive.google.com/file/d/0B9brGLrh9B3yY0E3WEJUN1JxbDg/edit?usp=sharing

0B9brGLrh9B3yY0E3WEJUN1JxbDg it is the unique ID of your file.This is the ID which we need. Now change the link to:

https://googledrive.com/host/0B9brGLrh9B3yY0E3WEJUN1JxbDg

How to Embed External javascript or CSS Files.
We all learn about the topic but this is the code which we need to put in the template to host external Jaascript or CSS files.
Embed CSS Files.
<link rel="stylesheet" href="CSS_file_link"/>
To Embed Javascript files
<script src="JavaScript_file_link"></script>
You are done :) 


Thursday, 15 May 2014

'No Ordinary' Social Sharing & Subscription Widget


This social subscription widget is specially design for increasing your social followers and share your content on social sites with addthis plugin. This social subscription widget is every thing which you want to add in social widget. It contain Email Subscription Widget, Social profiles links, share widget and Facebook like widget.
Features : 
  • Email Subscription widget
  • Follow us buttons to connect your visitors with popular networks
  • Social Sharing Widget
  • Facebook like box which increase your Facebook fans.

How to add this widget to your blog.

  • Go To Blogger.com -> Template -> Backup Your Template
  • Edit HTML 
  • Search for 
1
<data:post.body/>
Add the following piece of code after this code.
Note : Add after the first one ""

 <!--No Ordinary Social Subscription Widget-->   
 <b:if cond='data:blog.pageType == &quot;item&quot;'>   
 <style>   
 .tbibox {   
 background: #fff;   
 border: 1px solid #ddd;   
 height: 360px;   
 margin: 10px auto;   
 padding: 10px;   
 width: 572px;   
 -webkit-border-radius: 10px;   
 border-radius: 10px;   
 }   
 .tbisubscribe {   
 border: 1px solid #D3D3D3;   
 padding: 8px;   
 width: 300px;   
 -webkit-transition: all 0.5s ease-in-out;   
 -moz-transition: all 0.5s ease-in-out;   
 -ms-transition: all 0.5s ease-in-out;   
 -o-transition: all 0.5s ease-in-out;   
 transition: all 0.5s ease-in-out;   
 }   
 .tbisubscribe:hover {   
 -moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);   
 -webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);   
 box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);   
 }   
 .tbimailbox {   
 border: 1px solid #D3D3D3;   
 -webkit-border-radius: 4px;   
 border-radius: 4px;   
 -moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;   
 -webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;   
 box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;   
 color: #666;   
 font: 14px "trebuchet ms", sans-serif;   
 padding: 7px 15px;   
 width: 160px;   
 -webkit-transition: all 0.5s ease-in-out;   
 -moz-transition: all 0.5s ease-in-out;   
 -ms-transition: all 0.5s ease-in-out;   
 -o-transition: all 0.5s ease-in-out;   
 transition: all 0.5s ease-in-out;   
 }   
 .tbimailbox:hover {   
 -webkit-box-shadow: none;   
 box-shadow: none;   
 -webkit-transition: all 0.5s ease-in-out;   
 -moz-transition: all 0.5s ease-in-out;   
 -ms-transition: all 0.5s ease-in-out;   
 -o-transition: all 0.5s ease-in-out;   
 transition: all 0.5s ease-in-out;   
 }   
 .tbisubmit {   
 font: bold 12px Tahoma, Geneva, sans-serif;   
 font-style: normal;   
 color: #ffffff;   
 background: #ff5714;   
 border: 0px solid #ffffff;   
 text-shadow: 0px -1px 1px #222222;   
 box-shadow: 2px 2px 5px #000000;   
 -moz-box-shadow: 2px 2px 5px #000000;   
 -webkit-box-shadow: 2px 2px 5px #000000;   
 border-radius: 10px 10px 10px 10px;   
 -moz-border-radius: 10px 10px 10px 10px;   
 -webkit-border-radius: 10px 10px 10px 10px;   
 padding: 8px 15px;   
 cursor: pointer;   
 margin: 0 auto;   
 }   
 .tbisubmit:active {   
 cursor: pointer;   
 position: relative;   
 top: 2px;   
 }   
 .tbisubmit::-moz-focus-inner {   
 border: 0;   
 padding: 0;   
 margin: 0;   
 }   
 .tbisharebox {   
 border: 1px solid #D3D3D3;   
 margin: -157px 0 0 330px;   
 padding: 8px;   
 width: 225px;   
 -webkit-transition: all 0.5s ease-in-out;   
 -moz-transition: all 0.5s ease-in-out;   
 -ms-transition: all 0.5s ease-in-out;   
 -o-transition: all 0.5s ease-in-out;   
 transition: all 0.5s ease-in-out;   
 }   
 .tbisharebox:hover {   
 -moz-box-shadow: 1px 1px 2px #CCC inset;   
 -webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);   
 box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);   
 -webkit-transition: all 0.5s ease-in-out;   
 -moz-transition: all 0.5s ease-in-out;   
 -ms-transition: all 0.5s ease-in-out;   
 -o-transition: all 0.5s ease-in-out;   
 transition: all 0.5s ease-in-out;   
 }   
 </style>   
 <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />   
 <div class='tbibox'>   
 <div class='tbisubscribe'>   
 <div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>   
 <div style='margin: 10px 0 0 6px;'>   
 <form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'   
 method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=CBTricks&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'   
 style='margin: 0pt;' target='popupwindow'>   
 <input name='uri' type='hidden' value='CBTricks' />   
 <input name='loc' type='hidden' value='en_US' />   
 <input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'   
 onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}'   
 type='text' value='Enter your email...' />   
 <input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>   
 </form>   
 </div>   
 <div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>   
 <div style='margin: -32px 0 0 120px;'>   
 <a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3qB2tNI7XhW62e6UIxwd3SGHC4AFO1XKgdlDv2WiKxA581hOTYEWFhjiXOzGGdvve9lOmmQvVlLlstW5HjkSvZlqoPbwEfGGXLSTOfWFPtN-AuXzKhMX6oD-9Mpv7yqM5hdTO0_RwKu4/s32/facebook500.png' alt='facebook'/></a>   
 <a href='TWITTER URL' rel='nofollow' target='_blank'   
 title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xieLok1xnoJPHB0UMPxoSZd_-65bRKoSZTa0vVBwex1t0x6ORTjs-CgydVD2nUkObj7rhRy7XP3QbOA5VSoFfKctytpAiGHtGwdROQmwo3GcTOXqCL7m2JBx1DHSsKf4mIypyewtGFs/s32/twitter.png' alt='twitter'/></a>   
 <a href='GOOGLE+ URL' rel='nofollow' target='_blank'   
 title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7hbburCeTDseCepd_yJAN-ph20eJ-Gm71uuaULkT6O1KwXspG-8wfvBNjO8PYthZK7amNQqB00JcDKlOjPBQWJMENzKuhHYXk86icVprCm0IfP-H1rr84B9M2DoA_KG0Qbd9kh87Msl0/s32/googleplus-revised.png' alt='gplus'/></a>   
 <a href='PINTEREST URL' rel='nofollow' target='_blank'   
 title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuZTP1Aw9PrBi-DDNeHxj7t3fKTR8VHmywqeUoBTqLkYWQ4e5Cp9k7lW15m2Vnk7C9xhrUhoxswG_8DFLbT-v138g49KpK3hHDKR6HvdsoRlGRuH1ZLrgHlUSxzf5x_6zZTTg9o2mMnC8/s32/pinterest.png' alt='pinterest'/></a>   
 <a href='RSS URL' rel='nofollow' target='_blank'   
 title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfWzqnGQ6UD8iAd6kkvGcxaA_3g6C9YTjMHJHuOnpN0TSJ1m1YdKCBkMd65AkR6B01sk5u7SSb35m1ex-zWYquiU71-Z178jNHtQw8PC58YB1zlIUjMk7XVI1SiDa-NRe2I6v77C3l93M/s32/rss.png' alt='rss'/></a>   
 </div>   
 </div>   
 <div class='tbisharebox'>   
 <script type='text/javascript'>   
 var switchTo5x = true;   
 </script>   
 <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>   
 <script type='text/javascript'>   
 stLight.options({   
 onhover: false   
 });   
 </script>   
 <div style='margin: 5px 5px;'>   
 <span class='st_fblike_hcount' displaytext=''></span>   
 </div>   
 <div style='margin: -30px -20px 0 0; float: right;'>   
 <a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'   
 expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'   
 data-count='horizontal' data-lang='en'></a>   
 <b:if cond='data:post.isFirstPost'>   
 <script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>   
 </b:if>   
 </div>   
 <div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>   
 <a class='addthis_counter'></a>   
 <script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>   
 </div>   
 <div style='margin: 5px 5px;'>   
 <su:badge layout='1'></su:badge>   
 <script type='text/javascript'>   
 (function () {   
 var li = document.createElement('script');   
 li.type = 'text/javascript';   
 li.async = true;   
 li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';   
 var s = document.getElementsByTagName('script')[0];   
 s.parentNode.insertBefore(li, s);   
 })();   
 </script>   
 </div>   
 </div>   
 <div style='float: right; margin: -40px -5px 0 0;'>   
 <div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>   
 <script type='text/javascript'>   
 (function () {   
 var po = document.createElement('script');   
 po.type = 'text/javascript';   
 po.async = true;   
 po.src = 'https://apis.google.com/js/plusone.js';   
 var s = document.getElementsByTagName('script')[0];   
 s.parentNode.insertBefore(po, s);   
 })();   
 </script>   
 </div>   
 <div style='margin-top: 20px;'>   
 <iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FCoolBloggertricks&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'   
 style='border:none; overflow:hidden; width:570px; height:180px;' />   
 </div>   
 </div>   
 </b:if>   
 <!--No Ordinary Social Subscription Widget-->  
Customization : 

  1. Replace CBTricks with your feedburner ID.
  2. Replace 'FACEBOOK URL' with your Facebook fan page link
  3. Replace 'TWITTER URL' with your Twitter link
  4. Replace 'GOOGLE+ URL' with your Google+ page
  5. Replace 'PINTEREST URL' with Pinterest link
  6. Replace 'RSS URL' with RSS feed link
  7. Replace coolbloggertricks with your facebook page username
You are Done :)


Saturday, 10 May 2014

How To Automatically Nofollow External Links In WordPress


How To Automatically Nofollow External Links In WordPress

Adding ref="nofollow" tag to your all external links in your website is ensures that search engine indexing your website such as Google and bing does not follow that links which are added attribute with rel="nofollow". Now a days every webmaster want to add nofollow tag to all attribute and some of the bloggers does not add nofollow tag to external link and when they publish a lot of posts and want to add nofollow tag then it take much time to add nofollow tag.
Today I am sharing a wordpress plugin which add rel="nofollow" to all external links which you added in the posts.

Features

  • Add rel="nofollow" to all external links, SEO friendly.
  • Add target="_blank", Open external links in new window or tab

How to Add Auto Nofollow attribute to External Links

First of all Install Auto Nofollow Links WordPress Plugin.
Activate it.
Now go to Plugin setting page. Wp-admin >> Setting>> Auto Nofollow Links.

Check Both Options.
  • Add rel="nofollow" to all external links.
  • Add target="_blank", Open external links in new window or tab.
Save setting.
You are Done. :)
All the External links are auto added rel="nofollow" and Target=" _blank" attribute automatically.


Thursday, 1 May 2014

Personal Mag Responsive Blogger Template


Personal Mag is a responsive, elegant style SEO Friendly and Professional Blogger Template. It is 3 column and easily created for portfolio, magazine site or personal blog. It is unique fluid design with robut element. Theme is fully responsive with mega drop down menu, feature label area, random article button and more features.
All Features : 

  • Custom Home page
  • Header Drop down menu
  • Header ads
  • Retina style
  • Footer slider
  • Google Map
  • 4 column Footer widget
  • Ads Ready
  • SEO Friendly
  • USer friendly
  • Dynamic Fluid Layout
  • Elegant color scheme
  • Professional design
  • Tabbed sidebar widget



Saturday, 26 April 2014

Awesome Mag Responsive Blogger Template


                Demo           Download

Awesome Mag is a responsive, elegant style SEO Friendly and Professional Blogger Template. It is 3 column and easily created for portfolio, magazine site or personal blog. It is unique fluid design with robut element. Theme is fully responsive with mega drop down menu, feature label area, random article button and more features.

  • All Features : 
  • Mashable Like Mega Menu
  • Random Article Button
  • Header Ads (728*90)
  • 4 column footer
  • 3 column template
  • Beautiful Recent Post and Popular Post widgets
  • Header Search Button
  • 100% fully Responsive
  • SEO Friendly
BlogTube Professional Blogger Template

How to Customize Top Label
to customize top label,
go to blogger dashboard >> Layout >> Right Sidebar >> Edit, and paste the following piece of code.
Note: Replace "featured" with your label name. The spelling of label name should be same as your label. If the spelling mistakes then it don't works.


 <script type='text/javascript'>  
 var numposts = 10;  
 var showpostthumbnails = true;  
 var displaymore = false;  
 var displayseparator = false;  
 var showcommentnum = false;  
 var showpostdate = true;  
 var showpostsummary = false;  
 var numchars = 280;  
 </script>  
 <script type="text/javascript" src="/feeds/posts/default/-/Featured?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>  


How to Display Recent Posts?
Go to Blogger >> Layout >> Recent Posts >> Edit >> Paste the following piece of code in the HTML Box and save the template.

 <div class="recent_posts">  
 <script type='text/javascript'>  
 var numposts = 5;  
 var showpostthumbnails = true;  
 var displaymore = false;  
 var displayseparator = true;  
 var showcommentnum = false;  
 var showpostdate = false;  
 var showpostsummary = true;  
 var numchars = 100;</script>  
  <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>  
 </div>  

Final Words : 
So, This is Awesome professional blogger template for your blog. SEO friendly, user friendly, 100% responsive design. Hope that you'll like this template. Template is design by templateism.


Wednesday, 23 April 2014

How to Create Table of Content or Sitemap in Blogger


Table of Content is a page where all the content of book or website located but the main heading are viewed in that page. If we want to to see any of the topic from table of content then we visit the page number or web address where that topic is located. In website, Actually table of content is a sitemap of the website. You can create a beautiful Table of Content in your blogger blog. It'll help you to increase search ranking.

How to add Table of Content on blogger

Go to blogger dashboard
Dashboard >> Template
Backup your Template
Edit your Template
Search in your blogger template for ]]></b:skin>
Add this CSS code just above the ]]></b:skin>

 /*-------CoolBloggerTricks.com TOC-----*/  
 .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');  
 }  

Save your Template.
Now go to pages > New page > Blank Page
Click on HTML
Paste the piece of code in your blogger page.

 <script src="https://dl.dropboxusercontent.com/s/6r0aysnjjj0umcj/toc.js"></script><script src="http://www.coolbloggertricks.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://olusegun-fapohunda-calculator.googlecode.com/svn/concordian-tos.js" type="text/javascript"></script>  

Replace www.coolbloggertricks.com with your own website address.
You are Done :)
Final Words
So this is table of content for blogger and I hope that you'll like it.


Monday, 7 April 2014

How to Add Customized Colorful Flat UI Labels Cloud Widget For Blogger


Improving the presence of blog like getting awesomeness and proficiency to blog templates and themes is always best. Because there are some causes for this like receiving approval from big advertising corporations such as Google Adsense and BuySellAds. There are many professional templates on the internet which we can use but it might not have uniqueness because they're made for public and everyone can use that. After theme or template, it's also important to have skilled widgets such as Labels or Tags widget, Popular Posts widget, Related Posts etc. If you're sufficient smart in web designing then you can easily take professionalism to your widgets but if not then there are also already ready amazing widgets for you on the internet. I've custom-made label cloud widget for blogger and below I'm going to share it with all.

Step 1. Adding Labels Cloud Widget
  • Go To Blogger >> Layout >> Add a Gadget
  • Choose "Labels" Widget.
  • Make Settings Like The Below Image & "Save" It.

Cloud lable widget has been added to your blog now add some customized css code in blogger template.
Step 2. Customizing Labels Cloud Widget
  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTMl and Find For ]]></b:skin>
  • Copy and Paste The Following Code Above ]]></b:skin>



/* Flat UI Labels Cloud By Www.CoolBloggerTricks.Com ---------------- */
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

Now save your template.
You are done :)

Final Words
So this is customized cloud lable, I hape that you'll like it and use it to your blog.