29 December, 2016

CODA Basic Instructions

CODA Basic is Adsense ready responsive blogger template.

Here are some of the instructions you might need when using CODA Basic.

1. Blog Header.
The theme uses a blog header widget which you need to define. You can use text header but a logo based header would look better.

2. Blog Footer.
Footer is hard coded in the theme. Go to theme editor and at the bottom of the file you will find
<div class='foobar'> inside which there is a table and its content as an linked image and text.
You can either edit these content or remove the
foobar element all together. 

3. Removing/editing header links.

Go to edit template, click anywhere in the editor and press CTRL + F and enter "header" without quotes.
Just below the header you will find the desired links you wan to edit as shown in the picture.


4. Removing/replacing Ads.
There are 2 ad units integrated in the template for easy usage.
First is the bill board of size 900x280 and other is the links ad unit between the post.
To remove or edit the billboard ad unit go to template editor and search for "adsenseBillboard" and remove the part between container and primary division.
To remove the links ad search for "adsenseLinks" and remove the part as shown in the image below.


In case you want to add your own ad units, you have to put it in the predefined division "adsenseBillboard" and "adsenseLinks" then encode the ad unit.
Or you can use the following code and replace your converted ad code for blogger.

     &lt;div class=&#39;adsenseBillboard&#39;&gt;



     ///////your converted adsense billboard code here //////

     &lt;/div&gt;


and for the links


     &lt;div class=&#39;adsenseLinks&#39;&gt;


     ///////your converted adsense links code here //////

     &lt;/div&gt;

28 December, 2016

Create a multi-profile badge for your Blog

Check out another version of this profile badge here



I just realized that there is no way to add multiple profile's link on your blog. It is either Google+ profile badge or you have to copy your badge code from other sites like facebook in a widget.
How about we make a custom badge with multiple links to our different profiles.

To do so I am going to use a simple CSS trick to encircle my profile picture and simply add the links to my various profiles.

We are making a profile badge which would end up looking like this


Step 1. We need to define some CSS for the box and list of profiles. Add following code in your CSS.

.profileBadge img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: auto;
    display: block;
    padding: 5px;
    text-align: center; 

}
.profileBadge li {
text-transform: uppercase;
list-style: none;
line-heigth: 1.4px;
text-align: center; 
padding: 5px;
}
.profileBadge{
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}

Step 2. Since we are using fontawesome here. we need to call that CSS as well. For that add following line just before the </HEAD> in your template.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>


Step 3. Go to page layout and add a gadget of HTML/Javascript. Leave the title part empty if you like and add following code in the next part.

<div class="profileBadge">
<img src="YOUR_PROFILE_PICTURE.png" alt="profile_picture" width="200" height="200" />
<p align='center'>Whatever you want to say goes here..</p>
<li><i class='fa fa-google-plus'></i> <a href="http://plus.google.com/u/0/+YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-instagram'></i> <a href="http://instagram.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-facebook'></i> <a href="http://facebook.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
</div>

And change everything with your credits. Your custom profile badge is ready.

Make your own Blogger theme that you can sell

UPDATE: All of the download links to the final theme are available here.
 http://www.shiftescape.com/p/codathemes.html
Make sure you go through the instructions properly available here
http://www.shiftescape.com/2016/12/coda-basic-instructions.html

I have always had a love for web designing.  At first I used to make themes for WordPress now that I have moved to Blogspot I decided to make a Blogspot theme that I can customize as I like. In doing so I thought why not make a theme that everybody can customize, rather I decided to make a free version and write up my progress from start to end.



I did all that yesterday as I made CODAthemes.

You can follow up the progress from the last post that was written, or I am summarizin everything here for ease.

If you are not much of a reader you can simply download the final version and do as you like from here.

Step1. At first we made a dummy template, here.

Step2. We added a CSS for post images in our blog, here.

Step3. Applied a new font and set font size, here.

Step4. Added CSS for sidebar, here

Step5. Made the theme responsive, here.

Step6. Thumbnails summary in the home page was added, here.

Step7. Finalised the template with few changes, here.

Now this theme is complete in its own sense, but if you plan to sell a theme you need to do alot more than this. Go ahead and experiment with stuffs. You can add featured contents slider, custom sidebar and better footer and sell it on Themeforest.

Finishing up our First Blogger theme


I used this for my sidebar.

.sidebar li {
    text-transform: uppercase;
list-style: none;
line-heigth: 1.4px;
}
.sidebar h2 {
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    margin-left: 30px;
    margin-top: 30px;
}
.sidebar .widget {
    font-size: 12px;
}


Of course you are free to play around with whatever you like.

Also I have added CSS to make a read more button at the home page as follows.

.readmore a {
    padding: 8px 15px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
}

.readmore a:hover {
color: #FFFFFF;
text-decoration: none;
}

Then I defined a little CSS as

.post-footer{
    padding: 18px 22px 10px 22px;
    background-color: #f5f4f4;
}
.primary h3 {
    font-size: 2em;
}

Now the post-footer part is the one where "Posted by eff on 12/12/16 ..etc" is written. This is done to distinguish it from the post content. And I just resized font in the title on home page.
With this I conclude my blank template. It will be available for free download and will be open source. You can create your own versions and let me know if you like.

I would feel proud to display them on here for downloads.

The complete blank template download is below.

27 December, 2016

Making the homepage more attractive and simple

Uptill now we have a responsive design which has little to no design CSS added to it.
This time we are going to add a little bit to the design. We are going to make post summary and post images to appear on the homepage as or like featured content.
In short we are going to make post thumbnails, and summary for our home page.
To do this I took help from this post.

To do this we use a Javascript that uses the first image in a post and creates an excerpt which then is shown.

To do this search for

<data:post.body/>

There are only 2 occurrences of this in our theme. Replace the 2nd occurrence with 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>



For this to work, we need to define following javascript code as well.

Go to the HEAD section of the template and past following code just before </HEAD>

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>


That's all.
You can also download the theme I have made with all the changes below.


Making the theme responsive

Uptil the previous post we had completed a theme wtih a sidebar and a footer. Now if you might not have noticed that our theme's images and sidebar breaks in the smaller screens. So here we are going to make our theme responsive.

To do so we will use 

@media (min-width: 1200px)
.container {
    width: 1040px;
}





This is used for the browser to distinguish which CSS is to be used.

We will simply add 
@media (min-width: 1200px)
to our container, body, main, sidebar and if you are using my version primary and secondary tags instead of main and sidebar respectively.  

I used this

@media all and (min-width: 1020px) and (max-width: 4080px){
.container
{
width: 1020px;
margin: auto;
}
.primary{
width: 70%;
float: left;
}
.secondary{
float: left;
width:30%;
}
}/* media all and (min-width: 800px) and (max-width: 1020px) */

@media all and (min-width: 800px) and (max-width: 1020px){
.container
{
width: 800px;
margin: auto;
}
.primary{
width: 70%;
float: left;
}
.secondary{
float: left;
width:30%;
}
}/* media all and (min-width: 800px) and (max-width: 1020px) */

@media all and (min-width: 100px) and (max-width: 640px){
.container
{
width: 100%;
margin: auto;
}
.primary{
width: 100%;
float: left;
}
.secondary{
float: left;
width:100%;
}
}/* media all and (min-width: 100px) and (max-width: 640px) */


This covers 3 types of views which are ones with width 100 to 640px which will cover almost all phones and some tablets, and others are ones with 800px to 1020px wide display and 1020px and beyond for which I used 4080px.

Also I removed the padding of 20px I added to container in previous posts because it was causing problem with the page(scroll was appearing).

Download the responsive Blank template for Blogger from below.
Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIR19aVFFxYzJ6WG8

Adding a sidebar to Blogger theme

Now that we have a template that shows posts properly, we need to setup the sidebar.
Also we are making a responsive design here we will be ensuring that page doesn't breaks on different browsers and devices.

In previous versions of the Blank template you must have noticed that we added a footer and sidebar module to our theme. And you would have probably noticed that you can add the widgets to this area. Now all we have to do is to take this module and show it to the right of our theme so that it appears like a sidebar.
Now if you look back to our code, the module was

 <b:section class='sidebar' id='sidebar' showaddelement='yes'>

I removed other parts since this is our concerns with. This part has the class 'sidebar' being used. So we are going to define this sidebar in the CSS section. 
To do so add this.
#sidebar {
    float: left;
    width: 30%;

}


Now our sidebar is ready. But this doesn't really do anything and our sidebar doesn't look anything like a sidebar. This is because we have not defined any container to our theme and even if it floats left, it takes the left reference from the body section which again is still undefined. Now we will define an outer section to enclose the main and the side bar. 

#container
{
padding: 20px;
width: 1020px;
margin: auto;;

}

Padding so that the content appears fine and margin: auto to align the content in the center of the screen.
Now we need to define our main as well.
#main {
    float: left;
    width: 70%;

}

Now if you have added content to your footer, you theme would break. To fix that we need to define our footer as well.
#footer
{
width: 100%;
float: left;

}

Now this float:left is important. I might revisit this to align the footer contents to the center. But it still works for now.


Applying a font and changing font color

Previously we had made a blank blogger template which can show the images in the post properly in any device, we fixed the head section not showing the page title in the tab. Now we are going to change the font and font colors for our little theme.
For this we will add the font in body section in CSS.

Of course you can use any font as you like. Just make sure it is supported everywhere or there is no use of defining it.

Now we need to set a particular color for our links. So that it doesn't look low quality with visited and not-visited links in your blog.

For this we will add this:


again you are free to mess around with.

You can download the blank template from below.
Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIRnpmUllpRXViTFU





Blank template Update One HEAD section fixed

So this is the round up of this session for now. I will get back to this after some hours and a game or two of DOTA.

In previous to previos post the theme we made had no title defined in its head section.
Download this version for the HEAD section fix and images width defined.

Download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIclhuOFZkOFhWRlE


Setting up a logo and images size

In previous post we created our demo template which had no CSS design defined. Also the images I used in the post were considerable big which I did on purpose. Now when the screen size is reduced the image size remains same. This way the image overflows the view area on device. Which is not acceptable when making responsive designs. So we are going to make the images in our blog fit the view area of visitors.
To do so we simply define the image size to be 100% by default.
That is add

.post-body img {
max-width: 100%;
max-height: auto;
display: block;
margin: auto; 
}
   


to the CSS of out theme.
This will not only apply to the images in the post. 

Making the basic dummy template

UPDATE: Please read this. There is a much better and updated version of this blank template. If you are not much of a reader, use this link for download.

Basic template for Blogger template development.

This is a basic and plain blogger template with no design or customization added. You can use this as a base for developing your own blogger template.

With main post, sidebar and footer widget area and fixed HEAD section download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIclhuOFZkOFhWRlE

With main post area only download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIN3NFWFhNQzNTY0k

Blank template with footer and sidebar widget area download link: https://drive.google.com/open?id=0B8Qb2-H0P8xIRnpmUllpRXViTFU

I am not making any demo page for this theme since it is complete plain. It should look something like this photo when applied. With your content of course.






Welcome to CODA Themes

This is a two day project initiated today, more precisely now.
Objective: is to create a Blogspot theme from scratch.
Audience being any one who want s to make blogspot themes that you can sell or just give away for free downloads.



What we will be doing here is make a dummy template first. Then apply all kinds of design preferences we have.

At first I will be making a dummy template which will have all the necessities of a Blogspot theme without any design at all.

Off to next to post.

20 December, 2016

How to make a floating navigation bar

Navigation bar are really useful and helps the visitors in properly using your website or blog. By this method you can not only make a navigation bar float but you can even make floating ads for better user interaction.



Assuming you already have a navigation bar in your blog's theme. Go to the CSS of your theme.
If using WordPress, go to stylesheet.css in the editor.
If using Blogger, go to edit template and find the CSS of your navigation bar.

Use inspect element tool in Chrome and Firefox to correctly identify your navigation bar's CSS.

Now simple add

position: fixed;
width: 100%;
to the CSS of your navigation bar. Actually the width part is optional and you might have to do some hit and trial for your navigation bar to look right.

How it works?

It in the position part. When we set the position at FIXED the browser will keep the navigation bar's position at one place even when the page is scrolled through. 

08 December, 2016

How to MySQL with EasyPHP

PHP and MySQL always go side by side. Now if you are going to build a PHP website that would be saving any kind of that you will need a database to store that data. MySQL is that database which will be saving your data, and to access, modify or save data in this database you need SQL which stands for Structured Query Language.

Now if you are aware of the previous post we are going to use EasyPHP for our work here as well.
Considering you have installed and configured EasyPHP from previous post. Lets get started with MySQL.

1. First of all open the EasyPHP dashboard by right(or left) clicking the EasyPHP tray icon.



2. Now click on Start under Database Server to start a database server.




3. If you find multiple option go with any I went with the first.


And click on start.

4. Once started we need to run queries. To do so we need PHPmyAdmin.
Go to the  EasyPHP dashboard again and there you will find MySQL Administration PHPmyAdmin as shown.



5. Upon opening you will find the PhpMyAdmin dashboard. To execute your SQL commands you have to open console which is at the bottom of the Window as shown.


6. Let's execute our first query to see what all databases are already there.

mysql> SHOW DATABASES



Upon doing that I got the list of databases I already have. Out of these "mynotes" is the database I have made previously.

That's it. Now you are good to go. Create your own database, tables and enter data into that.

Let's do some queries now.


Since all of the data is always placed in a database, we need to first create a database.
To do that query mysql

mysql> CREATE DATABASE mydb;

Here mydb is just a name and you can use any name of your choice as you like.
Now the information in a database is stored in the tables. We need to create a table for that.
But before we create a table we need to specify in MySQL that we want a table to be created in the database we just created. In order to do that we query

mysql> USE mydb;

Following SQL query will create a table.

mysql> CREATE TABLE myTable (
                          columnOne INT NOT NULL PRIMARY KEY,
                         
columnTwo TEXT,
                         
columnThree DATE
                         
);

This will create a table with three columns with the names columnOne, columnTwo and columnThree respectively.

You can use the query

mysql> DESCRIBE myTable;


to see how your table looks like.

Now there are two ways of inserting data into these tables.

1. 
mysql> INSERT INTO mytable SET 
columnTwo = "Any textual message here!",
columnThree = "2016-12-8"


2.
mysql> INSERT INTO mytable (columnTwo, columnThree) 
VALUES("Like I said any thing textual!", "2016-11-7")


You must have already noticed that I did not enter anything for columnOne, infact I did not even mentioned it in my queries. It is because I made that column NOT NULL and set it to AUTO_INCREMENT when I defined the table. 

Now to check out our table content we query

mysql> SELECT * FROM myTable

That's all. Your table is up and running your database.
If you are confused as to use the semi-colon or not, it does not matter. 

07 December, 2016

How to install and configure EasyPHP

If you are going to learn PHP programming you will need to run a server that hosts your PHP pages. For doing this there are multiple ways. All of them are nothing but server applications that run an Apache server on your system, For some reasons I find installing the Apache server itself bit confusing. But that can be worked around by using WAMP or EasyPHP.

If you are getting "msvcr100.dll missing" error see this.

1. Going with EasyPHP download the latest EasyPHP Dev Server from their official site, here. As of writing this the latest is 16.1.1

2. Go with the default installation. Which will install in the directory of your windows.

3. Once installed you will see an EasyPHP tray icon as shown.



4. Right(or left) click the tray icon and click Open Dashboard. Which will open up a page in your Web Browser as shown.


5. Once we got the all we have to do is start the service we need. Since we want make PHP pages, click start under HTTP SERVER. If there are multiple choices of the server as shown below go with anyone. I went with the first one which starts with 32 bit server. I guess the other choices would have done the same.

Now let everything in default and Start it.
6. Once started you can check whether your server is running or not by opening the local host of your computer. To open local host, just type "localhost" (without quotes) in the address bar of your web browser or just click this http://127.0.0.1/ 
If you don't see any error means everything is working fine.

7. Now this localhost is a location in your system which is present in the installation directory of EasyPHP. Go to the installation directory and find the Folder by the name "www" or "eds-www" in my case. 

Open this folder and you will find a phpinfo.php file there. Let it remain there. Now we will work with our php files in this "www" folder.

You can create as many subfolders you want. Like I created a "test" folder for the sake of testing.

8. Now create a PHP file.

I did by this code:

<?php
$testPhrase= "Hello World!";
echo $testPhrase;
?>


Copy it and save the file by the name "index.php"

Place this file anywhere in the "www" directory of EasyPHP as shown.






I placed the index.php in the subfolder "test" I created.

9. To test my code is working we open the localhost in the web browser and head over to the "test" directory.


Upon clicking the "test" subfolder I get my code running.




That's it.


Fix msvcr100.dll missing for EasyPHP Windows 10

The main root of this problem is the missing Microsoft Visual C++ environment. Now one way to fix it is by downloading the Visual C++ Redistributable one by one of different releases. Which did not work for me. 



After having numerous retries and reinstall I decided to download the Visual Studio itself which actually solved my problem.

Actually the problem was that I am using an AMD based system and using the auto-installer of Visual Studio it automatically downloaded the desired files. 

Download Visual Studio from the official website. It comes with an installer. It fixed my missing dll files mid way through.