Saturday, 6 September 2014

Android SQLite Database Operations

MainActivity.java

package com.firstapp;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;


public class MainActivity extends ActionBarActivity {
Button Login, Register, Delete, Update;
int status = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Login = (Button) findViewById(R.id.Login);
        Register = (Button) findViewById(R.id.Reg);
        Delete = (Button) findViewById(R.id.Delete);
        Update = (Button) findViewById(R.id.Update);
        Login.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
status = 1;
Bundle b = new Bundle();
b.putInt("status", status);
Intent i  = new Intent("login_filter");
i.putExtras(b);
startActivity(i);
}
});
        
        Register.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Intent i  = new Intent("register_filter");
startActivity(i);
}
});
        Update.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
status = 2;
Bundle b = new Bundle();
b.putInt("status", status);
Intent i  = new Intent("login_filter");
i.putExtras(b);
startActivity(i);
}
});
        Delete.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
status = 3;
Bundle b = new Bundle();
b.putInt("status", status);
Intent i  = new Intent("login_filter");
i.putExtras(b);
startActivity(i);
}
});
    }
}


LoginActivity.java

package com.firstapp;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.database.Cursor;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class LoginActivity extends Activity {
Button Login;
EditText USERNAME,USERPASS;
String username,userpass;
Context CTX = this;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.login_layout);
Login = (Button) findViewById(R.id.b_login);
USERNAME = (EditText) findViewById(R.id.user_name);
USERPASS = (EditText) findViewById(R.id.user_pass);
Login.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
Bundle b = getIntent().getExtras();
int status = b.getInt("status");
if(status == 1)
{
Toast.makeText(getBaseContext(), "Please wait...", Toast.LENGTH_LONG).show();
username = USERNAME.getText().toString();
userpass = USERPASS.getText().toString();
DatabaseOperations DOP = new DatabaseOperations(CTX);
Cursor CR = DOP.getInformation(DOP);
CR.moveToFirst();
boolean loginstatus = false;
String NAME = "";
do
{
if(username.equals(CR.getString(0))&& (userpass.equals(CR.getString(1))))
{
loginstatus = true;
NAME = CR.getString(0);
}
}while(CR.moveToNext());
if(loginstatus)
{
Toast.makeText(getBaseContext(), "Login Success----\n Welcome "+NAME, Toast.LENGTH_LONG).show();
   finish();
}
else
{
Toast.makeText(getBaseContext(), "Login Failed---- ", Toast.LENGTH_LONG).show();
   finish();
}
}
else if(status == 2)
{
Toast.makeText(getBaseContext(), "Please wait...", Toast.LENGTH_LONG).show();
username = USERNAME.getText().toString();
userpass = USERPASS.getText().toString();
DatabaseOperations DOP = new DatabaseOperations(CTX);
Cursor CR = DOP.getInformation(DOP);
CR.moveToFirst();
boolean loginstatus = false;
String NAME = "";
do
{
if(username.equals(CR.getString(0))&& (userpass.equals(CR.getString(1))))
{
loginstatus = true;
NAME = CR.getString(0);
}
}while(CR.moveToNext());
if(loginstatus)
{
Toast.makeText(getBaseContext(), "Login Success----\n Welcome "+NAME, Toast.LENGTH_LONG).show();
  
Intent i = new Intent("update_filter");
Bundle BN = new Bundle();
BN.putString("user_name",NAME );
BN.putString("user_pass",userpass );
i.putExtras(BN);
startActivity(i);
finish();
}
else
{
Toast.makeText(getBaseContext(), "Login Failed---- ", Toast.LENGTH_LONG).show();
   finish();
}
}
else if(status == 3)
{
Toast.makeText(getBaseContext(), "Please wait...", Toast.LENGTH_LONG).show();
username = USERNAME.getText().toString();
userpass = USERPASS.getText().toString();
DatabaseOperations DOP = new DatabaseOperations(CTX);
Cursor CR = DOP.getInformation(DOP);
CR.moveToFirst();
boolean loginstatus = false;
String NAME = "";
do
{
if(username.equals(CR.getString(0))&& (userpass.equals(CR.getString(1))))
{
loginstatus = true;
NAME = CR.getString(0);
}
}while(CR.moveToNext());
if(loginstatus)
{
Toast.makeText(getBaseContext(), "Login Success----\n Welcome "+NAME, Toast.LENGTH_LONG).show();
Intent i = new Intent("delete_filter");
Bundle B = new Bundle();
B.putString("user_name",NAME );
i.putExtras(B);
startActivity(i);
finish();
}
else
{
Toast.makeText(getBaseContext(), "Login Failed---- ", Toast.LENGTH_LONG).show();
   finish();
}
//Intent i = new Intent("delete_filter");
//startActivity(i);
}
}
});
}

}


RegisterActivity.java

package com.firstapp;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class RegisterActivity extends Activity {
EditText USER_NAME,USER_PASS,CON_PASS;
String user_name,user_pass,con_pass;
Button REG;
Context ctx = this;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.register_layout);
USER_NAME = (EditText) findViewById(R.id.reg_user);
USER_PASS = (EditText) findViewById(R.id.reg_pass) ;
CON_PASS = (EditText) findViewById(R.id.con_pass);
REG = (Button) findViewById(R.id.user_reg);
REG.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
user_name = USER_NAME.getText().toString();
user_pass = USER_PASS.getText().toString();
con_pass = CON_PASS.getText().toString();
if(!(user_pass.equals(con_pass)))
{
Toast.makeText(getBaseContext(),"Passwords are not matching", Toast.LENGTH_LONG).show();
   USER_NAME.setText("");
   USER_PASS.setText("");
   CON_PASS.setText("");
}
else
{
DatabaseOperations DB = new DatabaseOperations(ctx);
DB.putInformation(DB, user_name, user_pass);
Toast.makeText(getBaseContext(), "Registration success", Toast.LENGTH_LONG).show();
finish();
}
}
});
}

}

DeleteActivity.java

package com.firstapp;

import android.app.Activity;
import android.content.Context;
import android.database.Cursor;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class DeleteActivity extends Activity {
Bundle bn;
String USERNAME;
Button Del;
EditText PASS;
String Pass;
DatabaseOperations DOP;
Context CTX = this;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.delete_layout);
Del = (Button) findViewById(R.id.b_delete);
PASS = (EditText) findViewById(R.id.del_pass);
bn = getIntent().getExtras();
USERNAME = bn.getString("user_name");
Del.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Pass = PASS.getText().toString();
DOP = new DatabaseOperations(CTX);
Cursor CR = DOP.getUserPass(DOP, USERNAME);
CR.moveToFirst();
boolean login_status = false;
do
{
if(Pass.equals(CR.getString(0)))
{
login_status = true;
}
}while(CR.moveToNext());
if(login_status)
{
DOP.deleteUser(DOP,USERNAME , Pass);
Toast.makeText(getBaseContext(), "User Removed successfully.....", Toast.LENGTH_LONG).show();
finish();
}
else
{
Toast.makeText(getBaseContext(), "Invalid user.....Try later", Toast.LENGTH_LONG).show();
   finish();
}
}
});
}

}


UpdateActivity.java

package com.firstapp;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;

public class UpdateActivity extends Activity {
String user_name,user_pass,New_user_name;
Button b_update;
EditText newuser;
Context CTX = this;
DatabaseOperations DOP;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.update_layout);
Bundle BN = getIntent().getExtras();
user_name = BN.getString("user_name");
user_pass = BN.getString("user_pass");
b_update = (Button) findViewById(R.id.b_update);
newuser = (EditText) findViewById(R.id.new_user_name);
b_update.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
New_user_name = newuser.getText().toString();
DOP = new DatabaseOperations(CTX);
DOP.updateUserInfo(DOP, user_name, user_pass, New_user_name);
Toast.makeText(getBaseContext(), "Updation Success.....", Toast.LENGTH_LONG).show();
   finish();
}
});
}

}


DatabaseOperations.java

package com.firstapp;

import com.firstapp.TableData.TableInfo;

import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteDatabase.CursorFactory;
import android.database.sqlite.SQLiteOpenHelper;
import android.provider.SyncStateContract.Columns;
import android.util.Log;

public class DatabaseOperations extends SQLiteOpenHelper {
public static final int database_version = 1;
public String CREATE_QUERY = "CREATE TABLE "+TableInfo.TABLE_NAME+"("+TableInfo.USER_NAME+" TEXT,"+TableInfo.USER_PASS+" TEXT);";                              

public DatabaseOperations(Context context) {
super(context, TableInfo.DATABASE_NAME, null, database_version);
Log.d("Database operations", "Database created");
}

@Override
public void onCreate(SQLiteDatabase sdb) {
sdb.execSQL(CREATE_QUERY);
Log.d("Database operations", "Table created");

}

@Override
public void onUpgrade(SQLiteDatabase arg0, int arg1, int arg2) {
// TODO Auto-generated method stub

}
public void putInformation(DatabaseOperations dop,String name,String pass)
{
SQLiteDatabase SQ = dop.getWritableDatabase();
ContentValues cv = new ContentValues();
cv.put(TableInfo.USER_NAME, name);
cv.put(TableInfo.USER_PASS, pass);
long k = SQ.insert(TableInfo.TABLE_NAME, null, cv);
Log.d("Database operations", "One raw inserted");
}
public Cursor getInformation(DatabaseOperations dop)
{
SQLiteDatabase SQ = dop.getReadableDatabase();
String[] coloumns = {TableInfo.USER_NAME,TableInfo.USER_PASS};
Cursor CR = SQ.query(TableInfo.TABLE_NAME,coloumns, null, null, null, null, null);
return CR;
}
public Cursor getUserPass(DatabaseOperations DOP, String user)
{
   SQLiteDatabase SQ = DOP.getReadableDatabase();
   String selection = TableInfo.USER_NAME +" LIKE ?";
   String coloumns[] = {TableInfo.USER_PASS};
   String args[] = {user};
   Cursor CR = SQ.query(TableInfo.TABLE_NAME, coloumns, selection, args, null, null, null);
return CR;
}
public void deleteUser(DatabaseOperations DOP, String user, String pass)
{
String selection = TableInfo.USER_NAME+ " LIKE ? AND "+TableInfo.USER_PASS +" LIKE ?";
//String coloumns[] = {TableInfo.USER_PASS};
String args[] = {user,pass};
SQLiteDatabase SQ = DOP.getWritableDatabase();
SQ.delete(TableInfo.TABLE_NAME, selection, args);
}
public void updateUserInfo(DatabaseOperations DOP, String user_name, String user_pass, String new_user_name )
{
SQLiteDatabase SQ  = DOP.getWritableDatabase();
String selection = TableInfo.USER_NAME+ " LIKE ? AND "+TableInfo.USER_PASS +" LIKE ?";
String args[] = {user_name,user_pass};
ContentValues values = new ContentValues();
values.put(TableInfo.USER_NAME, new_user_name);
SQ.update(TableInfo.TABLE_NAME, values, selection, args);
}

}

TableData,java

package com.firstapp;

import android.provider.BaseColumns;

public class TableData {
public TableData()
{
}
public static abstract class TableInfo implements BaseColumns
{
public static final String USER_NAME = "user_name" ;
public static final String USER_PASS = "user_pass" ;
public static final String DATABASE_NAME = "userdb97";
public static final String TABLE_NAME = "regtb97";
}

}


activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.firstapp.MainActivity" >

    <Button
        android:id="@+id/Login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Reg"
        android:layout_alignParentTop="true"
        android:layout_marginTop="18dp"
        android:text="Login" />

    <Button
        android:id="@+id/Delete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Update"
        android:layout_below="@+id/Update"
        android:layout_marginTop="46dp"
        android:text="Delete User" />

    <Button
        android:id="@+id/Reg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Update"
        android:layout_below="@+id/Login"
        android:layout_marginTop="23dp"
        android:text="Register" />

    <Button
        android:id="@+id/Update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/Reg"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:text="Update Info" />

</RelativeLayout>

login_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/user_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter User name"
         >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/user_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPassword" 
        android:hint="Enter password"
        />

    <Button
        android:id="@+id/b_login"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login" />

</LinearLayout>

register_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/reg_user"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter User name"
         >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/reg_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPassword"
        android:hint="Enter password"
         />

    <EditText
        android:id="@+id/con_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPassword" 
        android:hint="Confirm Password"
        />

    <Button
        android:id="@+id/user_reg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Register" />

</LinearLayout>

delete_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hi User Delete your account from here" />

    <EditText
        android:id="@+id/del_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="Enter your password here"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/b_delete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Delete Account" />

</LinearLayout>

update_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/infotext"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="24dp"
        android:text="hello User Update user name Here" />

    <EditText
        android:id="@+id/new_user_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/infotext"
        android:layout_below="@+id/infotext"
        android:layout_marginTop="25dp"
        android:ems="10"
        android:hint="Enter a New User name"
         >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/b_update"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/new_user_name"
        android:layout_marginTop="20dp"
        android:text="Update " />

</RelativeLayout>















Friday, 5 September 2014

Analysing Android files



In this post I'll simply be listing several tools to analyse (malicious) Android files. 

All tools or scanners listed are free to use.

If you wish to analyze files from the Google Play store without actually installing/downloading them directly to your phone (or, for example, you don't use Android):


If you know of other free tools or scanners for Android files (.apk, .dex), do let me know.



Online tools


AndroTotal









http://andrototal.org/




Anubis (currently discontinued)




http://anubis.iseclab.org/





Apk Analyzer





http://www.apk-analyzer.net/



Apk-deguard









http://apk-deguard.com/






ApkScan











http://apkscan.nviso.be/




Android APK Decompiler







http://www.decompileandroid.com/




AVC UnDroid










http://www.av-comparatives.org/avc-analyzer/



CopperDroid










http://copperdroid.isg.rhul.ac.uk/copperdroid/




Fallible




https://android.fallible.co/



Judge






http://judge.rednaga.io/





Koodous




https://koodous.com/




Reverse.it (Hybrid Analysis)















https://www.reverse.it/



SandDroid







http://sanddroid.xjtu.edu.cn/#





VirusTotal









https://www.virustotal.com/en/






Offline tools


AndroGuard




https://github.com/androguard/androguard/




Androl4b



https://github.com/sh4hin/Androl4b




Android-apktool (APKtool)





https://ibotpeaches.github.io/Apktool/




Android SDK





 http://developer.android.com/sdk/index.html



Android Tamer












https://androidtamer.com/




APKiD






https://github.com/rednaga/APKiD



Apkinspector






https://github.com/honeynet/apkinspector/




CuckooDroid









https://github.com/idanr1986/cuckoo-droid




Dex2jar





http://code.google.com/p/dex2jar/ ( + JD-Gui)




Lobotomy 





https://github.com/LifeForm-Labs/lobotomy



Mobile Security Framework (MobSF)








https://github.com/MobSF/Mobile-Security-Framework-MobSF

Thursday, 4 September 2014

How To Host Blogger CSS and JavaScript Files in Google Drive

Anyone that has ever worked on a web design or development can tell you that where you decide to store your files is important. Every time someone visits your site, the server or host will access this location and bring up the relevant files that need to be displayed. Wherever you decide to store your files, this will have an impact on some important aspects like the speed that your site loads, your overall SEO ranking and your ability to make necessary adjustments to the site.

Things To Think About

When you are designing your online structure and where to store your important CSS and JavaScript files, here is a run down on how this decision might impact your site later on:

Site Loading Speed

By combining some of the style sheets and website files, the Blogger server only has to collect information from a single location. When you split up your files or decentralize the file system, it takes a longer time for all the data to come together to make your site possible.

Slow loading speeds can negatively impact your SEO ratings because the slower the site is, the less likely that visitors are going to wait around for it to load. If someone visits your site and immediately clicks the 'back' button because it's taking too long to load, that is going to increase your bounce rate and provide Google with statistics that show your site is either low quality or irrelevant to the search keywords.

File Storage Affects SEO

In addition to increasing your bounce rate, storing your files in a central location and managing the name of your files can affect SEO site wide. Web crawlers enlisted by Google, or some of the other search engines, index both the code on your site, and the name and directory of your files. If file names are random or not placed in the proper categories, the web crawlers aren't going to know what to do with the information.

Clear file structure and a central location provide you with incentive to organize everything and name them appropriately. All the content that is relevant to the subject of your website or blog will be in the same location for web crawlers to review.

Storage Locations Affect Editing Abilities

Shuffling through files and folders or opening up FTP connections just to make some simple edits can be a hassle, and take up a lot of time that could have otherwise have been spent writing new content.

If you're a Blogger site owner, this is something you need to think about. When you need to make alterations to things like social media sharing buttons, popular posts, recent posts and related posts widgets, you have to know where everything is intended to go, or risk losing both available content and money.

Some of the larger sites that produce hundreds of unique articles each month can't afford to have content in different locations. When articles start to get lost out of order, they run the risk of duplicating content on their site, or forgetting to post it altogether. Things should be right at your fingertips to minimize mistakes and reduce the amount of time spent editing the site while it's still live.

Storing Javascript/CSS Files With Google Drive

Storing Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.

Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.

Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.

This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.
host blogger css javascript files

Step 1. Prepare the CSS/JavaScript Files

  • First, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the <style> and </style> tags, remove them). 
  • In the Notepad menu, select 'File' > 'Save as' and type the file name with the .css extension just like I did with mycssfile.css - see the screenshot below.
create a css file
  • In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8.
  • If you want to host a JavaScript file, add the .js extension (instead of .css) at the end of your file name (remove the <script>...</script> tags if you see them). Click "Save" and navigate to the location where you want to save the file.

Step 2. Upload Your File on Google Drive

  • Access https://drive.google.com and log in with your Gmail account. After you logged in, click on the 'Create' button and add a new separate folder to upload your JavaScript and CSS files.
create folder in Google drive
  • Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload.
upload files using google drive
  • Now, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.
  • After the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select 'Share':
share google drive files
  • In the 'Sharing settings' window, click on the 'Change' link and choose the 'Public on the web' option. Press 'Save' and copy the link(s) of your uploaded file(s) from the 'Links to share' box highlighted in blue, then paste it into a Notepad to use it later.
javascript css file sharing

Step 3. How to Add an External CSS/JavaScript file to Blogger

Before you can use the links, you must replace 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and remove '/edit?usp=sharing' in the link.

For example, the link to mycssfile.css that I copied looks like this:
https://drive.google.com/file/d/0B4n9GL3eVuV-TkphMkc3SFR2Slk/edit?usp=sharing
Notice the part in blue after the "/file/d/" part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:
https://googledrive.com/host/
Add the file ID like this (remove the '/edit?usp=sharing' part):
https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk
Now log into your Blogger account, select your blog and go to Template > Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

open blogger search box

If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:
<head>
Just BELOW the <head> tag, add this line:
<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk" />
And replace https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk with the link of your CSS file:

add external css to blogger

If you want to add a Javascript file, search for the following tag:
</body>
And add this line just ABOVE it:
<script src='https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg' type='text/javascript'></script>
Replace the line in blue with your URL:

add external javascript js to blogger

Finally, press the 'Save template' button to save the changes. And you're done!

In Conclusion

Once you have saved all your file folders and closed out of the drive, open your site in a browser and make sure that all the changes have completed successfully.

Next time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.

As you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work.

Tuesday, 2 September 2014

itemId vs sameAs vs additionalType: how to distinguish and use correctly

correct usage of itemid, sameas and additionaltype
One of the best methods to gain the topical relevance of a text is to use entities instead of "plain" keywords. The most simple way to create an entity out of a keyword is to extend it as a standalone type with the Schema.org-markup and prove it with additional trustful informations. Here is the applying point of HTML5 attribute itemId and Schema.org-properties sameAs and additionalType. All of them are used to provide additional informations to a type. But while itemId and sameAs are pretty much the same, additionalType is used for different purpose. Let's look at the use cases in detail to get clear about distinguishing and correct assignment. Accurate usage of these properties is crucial for semantic SEO purposes, cause the kind of the entity creation turns the algorithms opinion about the given text to finally more or less topical ranking.
Read full article »

Monday, 1 September 2014

How To Upload and Use Custom Fonts in Blogger

Just about anyone can write and publish his or her own blog. In fact, there are about 152 million blogs out there on the internet. But, if you want your blog to stand out you need to impress visitors with the little things. You need to be able to catch there attention and keep it so that they want to come back.

Complementing your blog post with images, links, and catchy titled is a great way to start and should be something you practice on just about everything you post; however, don't just stop there. If you really want to impress people and draw attention toward your blog, you want to start where the content all begins. You need to make use of custom fonts in Blogger. This guide will help you learn a little bit about font styles and how to upload new fonts onto your Blogger site.

The Different Types of Font

Before you can upload any font files, you need to find the right font and typeface that will fit your style. Typeface is the design and symbols used for the letters; font is the actual characters. Some of the most common typeface terms that you should probably be familiar with before starting are:
  • Serif - distinguished by small decorative lines that are attached to the end of letter strokes; best used for the paragraph or body content.
  • Sans-serif - modern looking letter strokes that lack the decorate lines at the end; instead the letter end abruptly.
  • Script - a handwriting typeface that looks like cursive letters or custom strokes.
  • Display - typeface that is designed to stand out from the rest of the page; characterized by a broad and unique use of informal letter designs and transparency. Display typeface is best used on titles and headers.
Within each web browser there are also certain types of font files that are used. Most of the browsers, except Internet Explorer and the iOS browser, will use TTF font file. Internet Explorer is the only web browser service that uses EOS files, and Apple has opted for using an SVG for their mobile and tablet based products. Some custom fonts in Blogger have to be in an @Font-Face kit, but this will be discussed later on.

Where to Find Font

You can find custom font all over the internet when you're ready to get started. Some custom fonts in Blogger are free to use and can be downloaded to your computer, others you are considered 'premium' and you have to pay to use them, so please check twice whether they are having Commercial or Personal licenses. Google offers its own font service known as Google Web Fonts which can be a good place to start looking around for custom fonts in Blogger.

Using the Google Web Fonts service, you run a filter to find select fonts based on width, thickness, and slant. Better yet, you can test out how using the custom fonts in Blogger would appear by modifying the size, and viewing it in a small display window. If you like a couple different fonts, you can save them to your collection to come back to later.

Adding a Custom Font to Blogger from Google Web Font

Step 1. To browse the Google Fonts library, access www.google.com/webfonts. There are 650 font families in the collection right now, and they keep adding more, so you may want to sort them.

To organize the fonts by style, you can use the menu on the left side. The top menu lets you to add and preview your own text using the 'Preview Text' field. From the same menu, you can pick the 'Size' and sort the fonts in 'Alphabetical order', by 'Date added', 'Number of styles' and 'Popularity':

google web fonts

Step 2. Once you decided what font you want to use, click on the 'Add to Collection' button and then hit the 'Use' tab. This will take you to the 'Almost done!' page that will give you a link to the style sheet found in the 'Standard' tab (point 3) and the CSS style (point 4).

The link to style sheet would look like this:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css'>
And the CSS style would look like this:
font-family: 'FONTNAME', cursive;

google fonts CSS

Step 3. Now that you have selected the fonts and have a general understanding of the different types of fonts available, you can head over to your Blogger blog. Open up the Dashboard and make sure that the first thing you do is to create a backup of your template: go to Template and press the "Backup/Restore" button on the upper right side. That way, you can revert the changes back to the original in case something goes wrong.

Step 4. From the same "Template" location, press the "Edit HTML" button:


Step 5. Click anywhere inside the code area and press CTRL + F at the same time (PC) or Command + F (Mac) to open the Blogger' search box and type <b:skin> inside the search box. Press Enter and it will take you to the <b:skin> tag, which will be highlighted in yellow:

adding custom font to blogger
Step 6. Directly above the <b:skin> tag, copy & paste the link to the style sheet provided by Google Web Fonts (step 2). To prevent any errors, add a forward slash (/) right before the closing angle bracket (>), like this:
<link href='http://fonts.googleapis.com/css?family=FONTNAME' rel='stylesheet' type='text/css' />
Step 7. To apply the font on a specific part of our blog, we'll need to find the CSS selector and add the CSS style (point 4) just AFTER the curly bracket. If you don't know how to find the id/class selector, please read this tutorial: Add CSS rules to Design a Blogger blog using Firebug

For example, if I would want to add the "Rancho" font to the posts and comments titles, I will paste the CSS style like this:
h3.post-title, .comments h4 {
  font-family: 'Rancho', cursive;
  font-size: 28px;
}
Where "h3.post-title, .comments h4 {" is the class selector for the post and comments titles. Note: to change the size of your font, add the "font-size: 28px;" part as well, and change the "28px" value to make the font bigger/smaller.

custom font to blogger titles

You can also add the same CSS to "Template" > press the "Customize" button the right side, navigate to "Advanced" > "Add CSS" tab and paste the CSS code in the empty box.

css, blogger template designer

Step 8. Finally, press the "Save Template" button and you're all set!

Using a Custom Font that isn't on Google Web Fonts

Some of the good places to find free fonts are DaFont, FontSquirrel and UrbanFonts. Click to download the kit (unzip it if necessary), and save the TFF or OFT file on your desktop.

fontsquirell download font

Step 1: Convert the Font File

The font file that you've downloaded is most likely in a TFF or OFT file since this is the most popular type. You need to convert this file into a @Font-Face kit. Many online services can help you do this, but here are two recommended sites: If you are using the Font Squirrel Webfont Generator: press the "Add Fonts" button, choose the font file that you saved on your desktop and check the "Yes, the fonts I'm uploading are legally eligible for web embedding." checkbox. After the font has been successfully uploaded, click the "Download your kit" button.

font squirrel webfont generator

This should open the kit containing 4 formats of fonts (inside the fonts folder), a CSS stylesheet & the html file for the demo page. The only files that you need to extract are the ones with the .woff, .tff, .svg, .eot extension and the stylesheet.css file.

webfontkit rar file

Step 2: Upload The Font Files To Blogger

Custom fonts in Blogger have to be uploaded before you can use them. For this, we are going to use Dropbox and upload them to Public folder (upload only the files with the .woff, .tff, .svg and .eot extension).

upload fonts using dropbox

Once you've uploaded them, copy the Public URL's of all 4 fonts: right click on each file, choose "Copy public link..." and press the "Copy to clipboard" button. Paste each link separately in a Notepad, so that you can link to that location later.

copy public link in dropbox

Next, open up the stylesheet.css file that came with the kit and it will show you a similar code:
/* Generated by Font Squirrel (http://www.fontsquirrel.com) on September 2, 2014 */

@font-face {
    font-family: 'fontname';
    src: url('font-name.eot');
    src: url('font-name.eot?#iefix') format('embedded-opentype'),
         url('font-name.woff') format('woff'),
         url('font-name.ttf') format('truetype'),
         url('font-name.svg#fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}
Edit the link location to point toward the font file that you just uploaded to the Dropbox Public folder and pay attention to each extension which should correspond with that found in the stylesheet.css file.

For example, if you uploaded the font .tff file with this name:
https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf
...change the CSS link in blue in this line:
url('font-name.ttf') format('truetype'),  
to point to:
url('https://dl.dropboxusercontent.com/u/62316253/amatic-bold-webfont.ttf') format('truetype'),
After you've added all the links, copy the stylesheet.css code that you modified to your clipboard.

Step 3: Editing Blogger's CSS

Open up the CSS on your Blogger site. This can be found by navigating to Template > Edit HTML. Next, click inside the code area and press the CTRL + F keys to open the search box, then type the tag below and hit Enter to find it:
]]></b:skin>
Just ABOVE this tag, add the code that you copied in the stylesheet.css file.

custom face fonts in blogger

Finally, we need to declare the custom font using CSS. For example, if I want to change the font of the post title, I will add the line in red from above, just below the "h3.post-title, .comments h4 {" CSS selector:
h3.post-title, .comments h4 {
font-family: 'fontname';
font-size: 28;
}
Obviously, the fontname will be the actual name of the font. This will make sure that your blog can use the custom fonts in Blogger. After we've made these changes, press the "Save Template" button and exit.

Step 4: Test Out the Site

Navigate back to your sites homepage and you should now see the custom fonts in Blogger that you uploaded during the last few steps. Every time you go to make a new post, the site will now be able to use your font.

In Conclusion:

Website design is an important part to maintain a successful blog. As a blog owner, you are responsible for providing content that isn't just fun to read, but looks good. Modifying the font is just one easy way that you can help your blog stand out without making any major changes to your blog itself.

Do you have any other methods for adding custom fonts? Let us know by leaving a comment below!