Code Sprints - We Share Awesome Tutorials

Cordite Blogger Template Released

noreply@blogger.com (Unknown) — Tue, 12 Jun 2012 17:13:00 +0000

Since last week i was working on my Blog's Design, though it is not complete yet but still it looks great. Yesterday i got three emails regarding my blogger template and as per their request i am releasing a blogger template similar to my layout for free.

I have named this template Cordite as it is very explosive. It is loaded with tons of great features as an amazing typography. Some of the main features included in this template are:

Search Engine Optimised

beautiful Typography

Easy Customization

Disqus Integrated

Minimal Design

More ...

You can download this template [LINK] and here is the [DEMO].

Design Login Box With Gravatar Image

noreply@blogger.com (Unknown) — Fri, 08 Jun 2012 16:17:00 +0000

Gravatar is a service for providing globally unique avatars which was created by Tom Preston-Werner and is currently owned by Automattic. Gravatar is widely used by various websites and blogs in order to provide profile pictures to their users directly from their Gravatar accounts. Srinivas Tamada from 9Lessons has a very useful conecpt of using Gravatar pictures along with a login box.

He has designed a simple interesting login box with contains Gravatar image, just importing user avatar from Gravatar.com based on email ID. This concept uses very basic level CSS implementation and few lines of Jquery and PHP code.

[LINK][Demo]

Simple Concept for Fixing iPAD's Lousy Typing

noreply@blogger.com (Unknown) — Sun, 03 Jun 2012 17:51:00 +0000

It’s hard to write elegantly on the iPad, to hone your word choice with an edge of only the strongest, most specific verbs. Hell, it’s hard just to type a proper curse word without autocorrect getting in the way. But what if it could be different? What if iPad typing were as easy as real typing?

Hooper Selection is an iPad interface concept by Georgia Tech student Daniel Hooper. He’s so excited about the project that he not only coded and filmed the demo software; he built a Wikipedia page on the technique.

It’s a simple as this: You type normally at all times. But if you want to move the cursor, just drag your finger around the keyboard, and the cursor moves with it. If you want to drag faster, you use two fingers to move the cursor. And, most usefully, if you want to highlight a word to edit it, just hold shift while cursoring and you’ll highlight it.

Lets see whether he can make up some app like this or not.

Adding Sassy Social Bookmark Widget to Blogger Blogs

noreply@blogger.com (Unknown) — Sun, 03 Jun 2012 16:57:00 +0000

Shareaholic is always famous for their Social Bookmarking widgets. Recently they released their latest Sassy Social Bookmark widget and in this post we will learn how to add Sassy Social Bookmark Widget to your blogger blog. This is another cool gadget by Shareaholic,it floats botttom left corner of your blog and when any user hovers mouse on it,some icons pop outs.

Add Sassy Social Bookmark to your Blogger blog:

Step 1: In Your Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Tick The Expand Widget Templates and search for </body> and just before it add the code given below

<!-- Start Shareaholic Sassy Bookmarks HTML -->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script -->

Now Save your template and you are done.

Replace Blog Pager Links with Post Titles in Blogger

noreply@blogger.com (Unknown) — Sat, 02 Jun 2012 17:48:00 +0000

Designing template for Blogger Platform is not as difficult as it seems. This month i was very busy designing my template. While doing so i tried to replace the Newer and Older post links with their respective post titles.

While designing the template i was trying to keep the design minimal and functional at the same time. Its really a good experience designing my first template. While making some changes to my template i tried replacing Newer Older post links with their post titles.

If you are trying to do the same follow the steps properly in order to change those static texts to dynamic post titles.

Loading jQuery library

This hack works only if jQuery library is available on your blog. To load jQuery library adding following code before .

Install Bluestacks with Offline installer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Adding the code

In order to add this code go to Design > Page Elements > Add A Gadget and paste this code into a HTML/Javascript gadget.

<style type="text/css"> 
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;} 
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;} 
</style> 
<script type="text/javascript">
$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>

This jQuery script will work instantly and you can test it on your post page. You can easily try to customize the Newer or Older post title using CSS. Try it and share the results with us.

Prettify Syntax Highlighter for Blogger Blog

noreply@blogger.com (Unknown) — Sat, 02 Jun 2012 02:21:00 +0000

If you are running a website where you share certain code maybe javascripts or HTML/CSS codes, then you must be interested in highlighting those codes in a meaningful manner. One of the best way of doing so is by using Syntax highlighters. Prettify by Google is also a very good and powerful syntax highlighter which you can easily add to your Blogger Blog.

Step 1: Go to your Layout settings and select Edit HTML, and then click in the Edit Template area. You need to add the following code somewhere within the <head> section - I did it just above </head>

<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'/>

Also in the template, modify the <body> tag to look like

<body onload="prettyPrint()">

The Prettify comes with two color schemes Desert and Sunburst both are good. You can add any color scheme, add either of the two lines of code before </head>.

<link href='http://google-code-prettify.googlecode.com/svn/trunk/styles/desert.css' rel='stylesheet' type='text/css'/>
OR
<link href='http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css' rel='stylesheet' type='text/css'/>

And finally to use the syntax highlighter in your post add the pre or code tags with class prettyprint and enclode all the code within these tags. You can take help of the example given below.

//Highlighting a Javascript code --- An Example
<pre class="prettyprint">
$(document).ready(function() {
 alert('I am using Prettify as Syntax Highlighter');
});
</pre>

If you have any problem, feel free to contact me.

How to insert Adsense Ads in Vbulletin Forum

noreply@blogger.com (Unknown) — Fri, 01 Jun 2012 17:21:00 +0000

Vbulletin is a very powerful and the best Forum software available for ordinary use. It is written in PHP and uses a SQL database server. Recently a friend of mine create an online Forum for mobile users and he is using Vbulletin for it. His Forum is just amazing and i can now feel the power of Vbulletin.

But yesterday he asked me about adding Adsense Ads to his Forum and the answer to this is not as simple as it seems. In order to add Adsense Code to you forum you will have to login as administrator.

A list of best alternatives to bluetsacks

Before proceeding you have to save all data from "postbit_legacy" to be sure that everything that you perform on your Vbulletin will be safe and perfect.

Adding Ad After the First Post

In order to add Adsense AD after the first post follow the steps:

Now click on the search in temple.
Type postbit_legacy and then click on the find button.
Now double click on the postbit legacy and go to a very bottom of your page.
Add the code below and put your AdSense code inside it.
And then click on the save button.

<vb:if condition="$post['isfirstshown']">

<li class="firstpost_advert_container"><div class="firstpost_advert">

   Your Google Adsense code here

</li>

</vb:if>

Adding Adsense Ad After any X posts

All the steps will remain same but we will just replace the the above code with the code given below. In the code given below replace X with the number of posts after which you want your ad to be displayed.

<vb:if condition="$show[guest] AND $post[postcount] % $vboptions[maxposts] == X">

<li class="firstpost_advert_container"><div class="firstpost_advert">

   Your Google Adsense code here

</li>

</vb:if>

Centering and coloring the ads

Now Go to Styles & Templates>Search in Templates>your style then search for additional.css and anywhere add :

.firstpost_advert_container {
    clear: both;
    display: block;
    float: left;
    margin-bottom: 12px;
    position: relative;
    width: 100%;
    border: 1px solid #E5E6F4;
}

.firstpost_advert {
    with: 100%;
    background: #F1F1FA;
    border: 1px solid #fff;
    min-height: 90px;
    margin: 0;
    padding: 7px;
    text-align: center;
    vertical-align: middle;
}

There is some risk associated with customization so do this at your own risk and I am not responsible to any of the loss. I have tried these myself , so worries. If you are still facing any problem do comment here.

How to Fix DLL Files Missing Error

noreply@blogger.com (Unknown) — Sat, 12 May 2012 16:34:00 +0000

Dynamic Link Library (DLL) is Microsoft's implementation of the shared library concept in the Microsoft Windows and OS/2 operating systems. There are a lot of DLL files in your Windows installation. DLL files are extremely necessary as they provide certain basic underlying functionality that is needed by other software.

Recently i tried installing a game on my PC and when i tried running that Game it showed me an error "****.dll file missing". I searched a bit and found that this kind of error may arise because of removing an installed software to a bad sectors or corrupt disk to installation of a new software, so on and so forth.

If you are facing the same problem then don't worry you can overcome this problem just by following the steps given below:

DOwnload the required DLL files from DLL-FILES
Extract the DLL files and copy it the SYSTEM32 folder.
Reboot your PC

If you did everything correct, hopefully you will not see the error again. If you still see this error then you will have to re-install your windows or you will have to find some other way.

Blogger Template of the Week

noreply@blogger.com (Unknown) — Tue, 08 May 2012 16:32:00 +0000

I love trying new blogger templates on my blogs. I love exploring new designs and experimenting with typography elements. This week while searching for a great blogger template i came across Daybook Blogger Template by Cinnamon Girl Studio.

This template is for photographers who love sharing photos on their blogs. You can also this blogger template for your personal blog too. The best thing about this blog is its great design.

At first look it doesn't look like a blogger template at all. This template has a very minimal layout and a clean color scheme. Some of the main feature of Daybook blogger template are given below.

Main Features

The main column supports images up to 764px wide
A right sidebar for gadgets, ads, content
Linen/Organic Background
Upload your logo as an image file in Blogger’s Design/gadget section
Title, Labels & Author formatted in a leftside block (we love)
Top menu with drop-down feature (html)
Four columns in footer for gadgets, ads, content
Social sliding tab with Feed, Pinterest, Twitter & Facebook
Facebook like buttons under each post

Daybook blogger template is a premium blogger template and in order to use you will have to buy it from Cinnamon Girl Studio. This blogger template is worth $30. [LINK]

How to Access Linux Partitions from Windows

noreply@blogger.com (Unknown) — Fri, 04 May 2012 15:56:00 +0000

I started using Linux around 2 years back and i just love it. Though it is not as user friendly as Windows but still it supports my programmer side. But i am also very much dependent on Windows as most of my games don't run on linux (even with Wine).

So currently i have both Windows 7 and Linux installed on my PC. Both OS are running perfectly fine. But sometime there are certain situations arise when i have to access some files from the other OS's partition.

Linux can access files from the Windows partition, but the linux partition is not accessible from Windows. This is a very critical problem as you will be forced to shut down and access that files after logging into Linux.

If you are facing the same problem then you can take help from the blog HowtoGeek which is a very popular blog among Geeks. HowtoGeek has provided 3 possible ways in whcih you can access Linux partition from WIndows. [Link]

How to Add Custom Sitemaps to your Blogger Blogs

noreply@blogger.com (Unknown) — Wed, 02 May 2012 17:17:00 +0000

Blogger is a blogging platform which is quite popular among newbie bloggers or bloggers who can blog with certain restrictions. One of such restrictions is inability to edit Robots.txt file and other is lack of complete XML sitemap. other is lack of complete XML sitemap.

A sitemap is a webpage which consists of links to all the webpages or posts on your blog. Search engines like Google and Bing can use these sitemap files to discover pages on your site and index them.

With WordPress and other CMS you can easily create XML sitemaps and optimize then for better results, but if you are using Blogger platform then you can will face problems.

The problem with Blogger sitemaps is that -> it will have only the 26 most recent blog posts. That’s a limitation because some of your older blog pages, that are missing in the default XML sitemap file, may never get indexed in search engines.

Amit Agrawal from Labnol has published a good guide which tells you how you can add Google Sitempa to your blog and edit Robots.txt file. [LINK]. This article is a must read for all Blogger users.

Solved: phpMyAdmin not working on Ubuntu

noreply@blogger.com (Unknown) — Sat, 28 Apr 2012 15:17:00 +0000

Yesterday, i installed Elementary OS Luna on my PC and let me tell you it is just awesome. Just after installing it I installed LAMP (Linuz, Apache, Mysql and PHP) components along with PhpMyAdmin on it. After the installation was over i restarted Apache and tried running PhpMyAdmin on the browser and i didn't work.

First i thought it might be a bug in Elementary OS as i am running an unstable version. But then i searched about it on the internet and found many people were facing the same problem. This problem was not with LUNA but many Ubuntu users were facing it too.

I started searching through forums and found something interesting which was the solution of the problem.

Now check if /etc/apache2/conf.d/phpmyadmin.conf exists? And if not, check if /etc/phpmyadmin/apache.conf exist? If the first doesn't exist and the second does, open terminal and run the following command

sudo ln -s /etc/phpmyadmin/apache.conf /etc/apache2/conf.d/phpmyadmin.conf sudo /etc/init.d/apache2 restart

After running this command try opening phpmyadmin in your browser and it will run.