Metro Personal

[Lanjutan] Koleksi Google Font API untuk Blogger

2013-11-22T22:56:00.001-08:00

Postingan ini merupakan lanjutan Artikel kemaren di Koleksi Google Font API untuk Blogger, Font Google pilihan dari Metro Personal Blog. Dan masih banyak lagi jenis font-font google yang support untuk Blogger, tapi inilah jenis font-font pilihan terbaik versi Metro Personal Blog :). Sebenarnya ribuan jenis font-font Google sih, tapi tidak semuanya Support untuk Blogger.

Berikut ini beberapa jenis font-font dari google, lanjutan dari postingan kemaren tentang Koleksi Google Font API untuk Blogger, Koleksi Pilihan dari Metro Personal Blog.

PT Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'PT Sans', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'PT Sans', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Actor
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Actor', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Actor', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

PT Sans Narrow
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'PT Sans Narrow', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'PT Sans Narrow', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Dosis
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Dosis', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Dosis', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Cabin
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Cabin', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Cabin', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Playfair Display SC
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Playfair+Display+SC' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Playfair Display SC', sans-serif;
        font-size: 14px;
 text-transform: normal;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Playfair Display SC', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Gabungan dua atau tiga jenis Font menghasilkan Font Unik

Oswald | Ubuntu
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Oswald|Ubuntu' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Oswald', 'Ubuntu', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Oswald', 'Ubuntu', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Source Sans Pro | Oswald
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Oswald' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Source Sans Pro', 'Oswald', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Source Sans Pro', 'Oswald', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Cabin | Playfair Display SC
Amazing Metro Personal Blog

Normal Font 14 pixels Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Cabin|Playfair+Display+SC' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
 background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Cabin', 'Playfair Display SC', sans-serif;
        font-size: 14px;
        color: #333333;
 }

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
 font-family: 'Cabin', 'Playfair Display SC', sans-serif;
 margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Note :
Untuk penggabungan jenis font-font yang lain, silahkan gabung-gabungkan menurut selera anda, contohnya gabungan jenis font-font diatas (maksimal dua atau tiga jenis font).

Contoh gabungan dua jenis font --> http://fonts.googleapis.com/css?family=Oswald|Ubuntu

Untuk informasi lengkap silahkan kunjungi Google Font API Labs disini dan Visit the Google Font Directory disini atau di Google Webfont disini.

Selamat mencoba.

Koleksi Google Font API untuk Blogger

2013-11-22T06:21:00.000-08:00

Koleksi Google Font API untuk Blogger - Hi sobat blogger, berikut ini beberapa koleksi Google Font API, pilihan dari Metro Personal Blog, di gunakan untuk mempercantik style tulisan-tulisan blog anda. Silahkan pilih yang mana, sesuai kesukaan anda.

Berbagai macam jenis Font disediakan oleh Google Font API untuk membantu para Web Development dan Blogger untuk meningkatkan kualitas Blog. Font atau jenis Huruf Pilihan Metro Personal Blog di antaranya adalah :

Tangerine
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Tangerine', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Tangerine', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Open Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Open Sans', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Montez
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Montez', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Montez', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Rochester
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Rochester', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Rochester', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Open Sans Condensed
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Open Sans Condensed', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Open Sans Condensed', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Six Caps
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Six Caps', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Six Caps', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Tulpen One
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Tulpen+One' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Tulpen One', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Tulpen One', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Yanone Kaffeesatz
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Yanone Kaffeesatz', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Yanone Kaffeesatz', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Love Ya Like A Sister
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Love Ya Like A Sister', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Love Ya Like A Sister', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Oswald
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Oswald', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Oswald', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Meddon
Amazing Metro Personal Blog

Normal Font 12 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Meddon' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Meddon', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Meddon', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Reenie Beanie
Amazing Metro Personal Blog<

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Reenie Beanie', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Reenie Beanie', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Dancing Script
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Dancing Script', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Dancing Script', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Calligraffitti
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Calligraffitti' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Calligraffitti', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Calligraffitti', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Pacifico
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Pacifico', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Pacifico', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Kristi
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Kristi' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Kristi', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Kristi', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Zeyada
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Zeyada', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Zeyada', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Vibur
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Vibur' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Vibur', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Vibur', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Over The Rainbow
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Over The Rainbow', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Over The Rainbow', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Drawing of A New Day
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Dawning+of+a+New+Day' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Drawing of A New Day', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Drawing of A New Day', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Josefin Slab
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Josefin Slab', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Josefin Slab', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Ubuntu
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Ubuntu', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Ubuntu', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Noto Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Noto Sans', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Noto Sans', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Lato
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Lato', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Lato', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Bitter
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Bitter', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Bitter', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Source Sans Pro
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Archivo Narrow
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Archivo Narrow', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Archivo Narrow', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Kaushan Script
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Kaushan Script', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Kaushan Script', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Lobster
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Lobster', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Lobster', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Shadows Into Light
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Shadows Into Light', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Shadows Into Light', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Droid Sans
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Droid Sans', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Droid Sans', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Droid Serif
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Droid Serif', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Droid Serif', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Playfair Display
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Playfair Display', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Playfair Display', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Racing Sans One
Amazing Metro Personal Blog

Normal Font 14 pixels Size Article Post → Amazing Metro Personal Blog

Tambahkan kode dibawah ini, simpan dibawah kode <head>

<link href='http://fonts.googleapis.com/css?family=Racing+Sans+One' rel='stylesheet' type='text/css'>

Sampel pengintegrasian font ke CSS

Sampel mengintegrasikan font ke CSS di Body Blog :

body    {
	background: #f0f0ed;
        margin: 0;
        padding: 0;
        font-family: 'Racing Sans One', sans-serif;
        font-size: 14px;
        color: #333333;
	}

Sampel mengintegrasikan font ke CSS di Heading Blog :

#header h1, .post h2, #sidebar-wrapper h2, #comments h4, #bottom h2 {
	font-family: 'Racing Sans One', sans-serif;
	margin: 0;
        padding: 0;
        font-size: 40px;
        font-weight: 700;
        line-height: 1.0em;
        color: #333333;
        }

Untuk informasi lengkap silahkan kunjungi Google Font API Labs disini dan Visit the Google Font Directory disini atau di Google Webfont disini.

Selamat mencoba.

Memanfaatkan Halaman Error Page 404 Blog dan Cara Membuat auto Error Page 404

2013-11-17T22:04:00.001-08:00

Memanfaatkan Halaman Error Page 404 Blog dan Cara Membuat auto Error Page 404 - Pernakah anda mecari artikel atau tutorial di blog, tapi anda tidak menemukan apa yang anda cari di blog yang anda kunjungi?. Hal ini kemungkinan halaman tersebut sudah terhapus atau URL yang anda masukkan salah. Nah!! disini anda sebagai blogger tentunya tidak mau kehilangan pengunjung, dan ini memungkinkan mempengaruhi jatah Traffic Blog anda :).

Disini, kita akan memanfaatkan Halaman Error page 404 dengan tampilan khusus dan dinamis sebagai penunjuk arah atau direct, untuk mengarahkan pengunjung ke blog anda sekaligus pengunjung bisa melihat-lihat menu-menu dan artikel-artikel yang anda sajikan.

Ada dua metode membuat halaman error page, yaitu :

Halaman ERROR 404 otomatis (redirect error page). Pengunjung akan di redirect secara otomatis ke halaman utama atau halaman lain yang ditentukan.
Halaman ERROR 404 manual (non redirect). Ketika pengunjung menemukan halaman ini, maka dia harus melakukan klik secara manual untuk pindah menuju ke halaman utama (homepage) atau halaman lainnya.

Cara Pertama
Halaman ERROR 404 otomatis (redirect error page)

Silahkan login dulu di blogger anda, terus masuk ke > Template > Edit Template, dan masukkan code meta tag dibawah ini, tepat dibawah code <head> :

<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>

Set Meta tag selengkapnya kira-kira seperti ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
.
.
.
<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>
.
.
.
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/

Setelah itu, Masuk ke Setelan blogger > Preferensi Penelusuran > Kesalahan dan Pengalihan > Pesan Khusus untuk Laman Tidak Ditemukan > dan Edit. Berikut Screenshotnya :

Lalu Copy Paste Code HTML dibawah ini di Kotak yang disediakan :

<p align='center'><strong><font color='#ff0000' size='25px'>Opsst!! Error 404 [Page Not Found]</font></strong></p>
<br/>
<br/>
<br/>
<p align='center'><h1><b>Halaman tidak ditemukan</b></h1></p>
<p align='center'>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p align='center'>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>

Note :

Ganti Deskripsi Pesan Error Page sesuai keinginan anda.
Ganti Titel URL diatas, menjadi Page title Blog anda.
Lalu Save dan selesai.

Cara Kedua
Halaman ERROR 404 manual (non redirect)

Demo Error Page

Demo halaman yang anda lihat diatas, adalah hasil dari tag kondisional untuk halaman kesalahan/error page. Berikut ini, cara sederhana untuk membuat halaman Error Page 404 :

Contoh tag kondisional yang akan digunakan :

</head>
<body>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
.
.
Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
.
.
</b:if>

Dibawah ini adalah pesan error yang akan muncul ketika permintaan tidak di temukan :

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get' target='_top'>
<input id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari Artikel di Blog Daeng Kulle&quot;;}' onfocus='if (this.value == &quot;Cari Artikel di Blog Daeng Kulle&quot;) {this.value = &quot;&quot;}' type='text' value='Cari Artikel di Blog Daeng Kulle'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>

</body>
</HTML>

Pertama, cari code <body> dan penutup </body> di template anda, lalu sisipkan kode tag conditional berikut di antaranya, lihat cara seperti di bawah ini :

Pastekan kode di bawah ini di bawah kode <body>

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Kemudian cari kode </body> dan pastekan kode berikut di atasnya :

</b:if>

Lalu letakkan kode berikut ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get' target='_top'>
<input id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari Artikel di Blog Daeng Kulle&quot;;}' onfocus='if (this.value == &quot;Cari Artikel di Blog Daeng Kulle&quot;) {this.value = &quot;&quot;}' type='text' value='Cari Artikel di Blog Daeng Kulle'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>

</body>
</HTML>

Jika benar penempatan code Tag Error Page, akan tampak seperti dibawah ini :

</head>
<body>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
.
.
Baris/bidang element blog seperti posting, widget, sidebar dan yang lainnya.
Element ini akan di sembunyikan jika tak ditemukan url/link apa pun yang ada dalam directory widget.
.
.
</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman tidak ditemukan</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Kembali ke <a expr:href='data:blog.homepageUrl'>BLOG DAENG KULLE</a></p>
<div id='search-box'>
<form action='/search' id='cse-search-box' method='get' target='_top'>
<input id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari Artikel di Blog Daeng Kulle&quot;;}' onfocus='if (this.value == &quot;Cari Artikel di Blog Daeng Kulle&quot;) {this.value = &quot;&quot;}' type='text' value='Cari Artikel di Blog Daeng Kulle'/>
<button id='search-button' type='submit'/>
</form>
</div>
</div>
</div>
</b:if>

</body>
</HTML>

Selanjutnya, sisipkan Meta Tag di bawah ini, tepat di bawah kode <head> :

<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>

Set Meta tag selengkapnya kira-kira seperti ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
.
.
.
<!-- Meta Title Halaman Error/404 -->
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>404: Maaf halaman yang ada cari tidak ada | <data:blog.title/></title>
</b:if>
.
.
.
&lt;style type=&quot;text/css&quot;&gt; &lt;!-- /*<b:skin><![CDATA[*/

Setelah semuanya selesai diatas, tambahkan kode CSS berikut dibawah ini, di template anda. Simpan diatas kode ]]></b:skin> :

#error-page {background-color: #e9e9e9;position: fixed !important;position: absolute;text-align: center;top: 0;right: 0;bottom: 0;left: 0;z-index: 99999;}
#error-inner {margin: 11% auto;}
#error-inner .box-404 {width: 200px;height: 200px;background: #21afa4;color: #fff;font-size: 80px;line-height: 200px;border-radius: 10px;margin: 0 auto 50px;position: relative;}
#error-inner .box-404::after {content: " ";width: 0;height: 0;bottom: -8px;border-color: #21afa4 transparent transparent;border-style: solid;border-width: 9px 9px 0;position: absolute;left: 47%;}
#error-inner h1 {text-transform: uppercase;}
#error-inner p {line-height: 1.9em;font-size: 15px;}

Note :
Ganti Deskripsi Error Page Tag <h1> dan <p> dengan Deskripsi Error Page yang anda inginkan.

Selamat Mencoba!!

Trik Auto Heading H1 so that become Heading Article

2013-11-13T06:57:00.000-08:00

Trik Auto Heading H1 so that become Heading Article - Basically H1 tag is the main thing that concerns the search engine compared to H2, H3, H4. Put the H1 tag on the title of the article would be more effective than putting it in the title of Home blog. The main objective is the article indexed in search engines. Setting the default template blogger certainly put in the H1 Tag Title Home blog, so you will need to modify the template so that article SEO Friendy.

How to change the title of the article become the H1 tag, consider these steps carefully to avoid mistakes in the application.

Go to the blogger account. on the dashboard, select and click > Template > Edit HTML. Find the code below :

<b:includable id='post' var='post'>
  <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
    <b:if cond='data:post.firstImageUrl'>
      <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
    </b:if>
    <meta expr:content='data:blog.blogId' itemprop='blogId'/>
    <meta expr:content='data:post.id' itemprop='postId'/>

    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Replace with the code below :

<b:includable id='post' var='post'>
  <div class='post hentry'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:if cond='data:post.title'>
        <h1 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
                <b:else/>
                <data:post.title/>
              </b:if>
              <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        </h1>
      </b:if>
      <b:else/>
      <b:if cond='data:post.title'>
        <h2 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
            <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url' expr:title='data:post.title' target='_blank'><data:post.title/></a>
                <b:else/>
                <data:post.title/>
              </b:if>
              <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
        </h2>
      </b:if>
    </b:if>

Find the code below :

              <h1 class='title' style='background: transparent; border-width: 0px'>
                <b:include name='title'/>
              </h1>

Replace with the code below :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
                <h1 class='title' style='background: transparent; border-width: 0px'>
                  <b:include name='title'/>
                </h1>
              <b:else/>
                <p class='title' style='background: transparent; border-width: 0px'>
                  <b:include name='title'/>
                </p>
              </b:if>

The last step click on the preview, if the template is not error. then click save template.

Note:
Remember re-edit your post CSS template. setting CSS .post h1, .post h2 or .post h3.

Menjadikan File HTML di Google Drive Menjadi File Host HTML Publik

2013-11-10T03:12:00.002-08:00

Bagaimana Cara Menjadikan File HTML di Google Drive Menjadi File Host HTML Publik - Cloud Computing adalah suatu paradigma di mana informasi secara permanen tersimpan di server di internet dan tersimpan sementara di komputer pengguna (client) termasuk di dalamnya adalah komputer tablet, notebook, komputer desktop, handheld dan lain-lain.

Nah!! google drive boleh dikatakan adalah salah satu bentuk cloud computing sementara dikembangkan oleh google. pada google drive bisa melakukan penyimpanan data secara online, menjadikan anda lebih produktif. membuat dokumen, presentasi, spreadsheet sendiri. Berbagi Publik file dengan orang lain.

Namun pada pembahasan kali ini, saya ingin berbagi pengetahuan tentang Bagaimana Cara Menjadikan File HTML atau File PHP di Google Drive Menjadi File Host HTML Publik di google drive. Berikut screenshot File HTML Publik yang saya upload di google drive :

Demo : https://googledrive.com/host/0ByTiMnJfMclLeDh4eEZXQnpzbUE/index.html

Okay!! Berikut cara membuat File HTML atau File PHP di Google Drive Menjadi Host HTML Publik :

Langkah Pertama
- Tentunya anda sudah memiliki akun google gmail dan silahkan login di Google Drive disini.
- Memiliki File HTML yang siap dijadikan Host HTML Publik di Google Drive.
- Setelah Login di Akun Google Drive anda, Klik Create. Kemudian Pilih > Folder dan beri nama, misalnya nama Foldernya create. Berikut Screenshotnya :

Langkah Kedua
- Buka folder tadi, yang diberi nama Create tadi.
- Upload file index.html anda di Folder Create, dengan cara klik tombol upload. Berikut Screenshotnya :

Langkah Ketiga
Nah!! Langkah yang ketiga ini paling penting, karena folder create yang baru dibuat tadi berikut isi file index.html-nya harus di Setting Share Publik, agar supaya file index.html yang di dalam folder create tadi, berjalan sebagai Host HTML Publik. Klik Kanan Folder create kemudian pilih > Berbagi > Bagikan. Berikut Screenshotnya :

Note:
File index.html nya tidak usah di share publik secara terpisah, karena otamatis ter-share melalui folder create tadi.

Langkah Keempat (Penutup)
Setelah di share ke publik, anda akan mendapatkan URL publik (Lihat Screenshoot diatas yang berwarna biru). Contohnya Seperti ini > https://drive.google.com/folderview?id=0ByTiMnJfMclLeDh4eEZXQnpzbUE&usp=sharing.

Perhatikan kode ID yg berwarna Biru, itulah kode ID Google Drive saya. Kemudian ubah arah URL agar supaya menjadi URL Host Publik. Contohnya Seperti ini > https://googledrive.com/host/0ByTiMnJfMclLeDh4eEZXQnpzbUE/index.html

Atau anda bisa copy langsung URL Host Publik anda, melalui file index.html, Caranya Klik Kanan file index.html kemudian Pilih > buka dengan > Penampil Google Drive Setelah menuju ke Penampil Google Drive, lalu kemudian klik > Pratinjau. Jangan lupa Copy Alamat URL di Adress Bar Browser Anda. berikut Sceenshootnya :

Sekian dari saya, tentang Bagaimana Cara Menjadikan File HTML atau File PHP di Google Drive Menjadi File Host HTML Publik.

Demo

Selamat Mencoba.

How To Choose The Right Template For Your Blog

2013-11-01T09:31:00.001-07:00

How To Choose The Right Template For Your Blog - Templates is a display that supports a blog. For my blog template is home, because the more beautiful our house, so guests will feel happy and will probably visit again. The phrase that I always use in the selection of templates for all of my blog.

You have to be smart to use a template for your blog, guests who come not only amounted to one or two visitors but dozens, hundreds, perhaps thousands. You will feel hurt when the wrong template. I suggest before you change the blog template, you must know tips on choosing a template that suits your blog. Here are my tips on choosing a template :

1. Select the template that is SEO Friendly
Actually, this does not really matter, because I think all of template's blog SEO Friendly, if we want to edit it a bit so so SEO. If you do not want to bother editing the template, I think you should use this procedure.

Then how can I get a template that is SEO Friendly?. Search in google with keyword "SEO Friendly Template Download".

2. Select the template that it looks Light Loading
Usually mild template that is below 15Kb. So how do I test Loading blog?, If you want to test Loading blog do not use fast internet connection, its heavy Blog 200MB will be lighter (except if another trouble).

To test Loading blog, I used to use that speed Modem fitting, as SmartFreen. so loading blog will be tested.

3. Choose your Blog Theme As Template
Do not let you choose a template specially if your blog has a Game Topics News or Tutorial Blog, will actually look weird in the eyes of visitors.

4. Select the template that was not too bothersome Sidebar
SideBar is intent layout that will be used. SideBar column template with right hand much better than the side bar on the right and the left, because it allows visitors to see the widget that you install. Sidebar template example which is just to the right of this blog.

6. Do not be too long to choose a template
If you visit the site free templates provider, I'm sure you'll pick her long. When you select a template and even old days when you would lose. You should use the time to Blogwalking or writing articles, will be depleted because of choosing a template. Only apply the five ways above, then you will quickly choose a template.

I simply share Tips on choosing a template that suits you, not the template that is SEO Friendly.

Qualified Content was like what?

2013-10-29T20:24:00.001-07:00

Qualified Content was like what? - The question that always comes up at every going to write an article, quality may be interpreted as providing benefits , have appropriate accuracy, focus on the core (red line) and the issues raised are not long-winded . Equipped with arguments ( reasons ) that logically acceptable to readers , that's the simple version of the content that I think could be considered qualified.

But as we all know, an information in the form of text, audio or video that is part of a website / blog search engines need help in order to get to the prospective reader (human).

And now how can we know (assess) quality content version of google or other search engines? Search engine algorithms will perform a filter on all the sites will be given a position in SERP in accordance with the quality that is in the article.

Two equally important factors, human and search engine algorithms need each other in giving judgment on a piece of content. I think personally, first build a quality content that is intended for the reader, with the increasing number of visits to a site, and BR ( bounce rate) are increasingly ramping up the search engine algorithms will start providing a decent position on the site.

In making an article can be considered the On Page will be the reference search engine algorithms pass judgment on the content. Such as the selection of article titles, using keywords (keywords ) that are relevant, density ( keyword density ) as well as the placement of each paragraph.

Well that's my brief article this afternoon that try to give a little opinion (personal) on how to create quality content that could lift the popularity of a website in the eyes of the readers and which will have a positive effect on the position of a website in search engines SERP.

Promo - Teh Kulit Manggis

2013-10-28T11:05:00.000-07:00

TEH KULIT MANGGIS Untuk Penyembuhan Penyakit :
DIABETES - DARAH TINGGI - KOLESTEROL dan Dapat Mencegah STROKE & PENYAKIT JANTUNG

MINUMLAH SECARA RUTIN - HARGA TERJANGKAU

PRODUK MINUMAN KESEHATAN INI DAPAT DIPEROLEH :
DI TOKO INDRAJAYA - MAKASSAR
HP : 0852 9936 9749
Email : familysyam@gmail.com

DEPKES RI P-IRT31334040226418

Gratis Telpon dan SMS Sesama Blackberry

2013-10-27T22:10:00.002-07:00

Gratis Telpon dan SMS Sesama Blackberry - Aplikasi ini membuat pengguna blackberry aktif dapat menelpon dan sms antar sesama pengguna blackberry aktif, tanpa mengurangi pulsa alias gratis. Seperti halnya aplikasi VIBER pada Idevice atau Android. Tetapi pada BB sayangnya VIBER masih dalam versi beta, belum bisa nelpon. (baru bisa smsan gratis saja).

Mungkin beberapa waktu lagi lima tipe smartphone (BB/iphone/android/symbian dan windows phone) dapat nelpon secara gratis, belum tau kapan.

Kembali pada topik semula!!.

Syarat utama pengguna TringMe adalah :
BB harus dalam keadaan aktif BIS nya, minimum signal EDGE tetapi lebih baik menggunakan signal 3G.
Dalam keadaan BIS nonaktif satu2nya jalan adalah menggunakan WIFI hotspots.
Masing-masing BB harus mempunyai aplikasi TringMe untuk saling menelpon dan ber SMS secara gratis, jadi tidak bisa cuma satu BB saja.
Tidak perlu paket FUll Service, dua BB yg saya coba satu paket sosial. yg satu lagi pake wifi karena BIS-nya belum aktif.

Fitur TringMe
Selain dapat menelpon dan SMS secara gratis, ternyata ada fitur-fitur lain yg menarik pada aplikasi ini, yaitu :

Telp gratis.
SMS gratis.
Contact gratis.

Membuat sinkronisasi contact dari contact BB, jadi contactnya menyatu (tidak terpisah) :

Conference Call, yang pasti dari namanya sudah jelas bisa telp lebih dari dua orang secara bersamaan.
Chit-chat.
Ringtones Telpon.
Ringtones SMS, membuat bunyi panggilan masuk/sms berbeda.

Installasi

Cara mendapatkan "TringMe" pada BB, bisa dengan beberapa cara, yaitu:
Untuk BB full service BISnya, masuk ke app world pada bb anda, search tringMe, trus donlot beres
Untuk BB full service BISnya tapi app wordnya error, buka browser ketik http://bb.tringme.com/downloads/5.0/tringme.jad --> ini buat BB OS 5 dan OS 6, http://bb.tringme.com/downloads/7.0/tringme.jad --> ini buat BB OS 7 dan 7.1 terus install.
Untuk BB paket gaul/sosial/email dan sebangsanya, mesti cari hotspot via wifi, dengan dengan menuliskan alamat link seperti di point no. dua.
Untuk yg mau download via PC, buka http://bb.tringme.com habis itu masukkan ke SD CARD lalu install manual.

Cara Pakai TringMe
Setelah aplikasi sudah di install, maka akan diminta email yg valid. Masukin emailnya terus nanti akan dapat satu deretan nomor baru, nomer-nomer itu adalah nomer TLP/ID TringMe anda. Jadi tidak sama dengan nomor yg nempel di BB. Anda bisa saling tukar nomer tersebut untuk nelpon/sms gratis.

Sehabis BB dimatikan atau lowbatt, login TringMe menggunakan email yg di masukan sebelumnya, nanti diminta password, cek di email itu, ada email dari TringMe, anda tinggal copy paste passwordnya.

Still Rely on Old SEO Tricks?

2013-10-27T10:01:00.001-07:00

Still Relying on Old SEO Tricks? - This post will cover some of the old methods of popular as well as what you need to know to succeed with your SEO initiatives today.

Paid Blog Networks
Wouldn’t it be great if there were an easy way to automate posting hundreds of high-quality backlinks per month? A few years ago, several groups formed blog networks (Build My Rank, Linkvana, etc.) to meet this demand. Some blog networks even supplied the writers, so you could place your order and they’d take care of the writing and post it to blogs across the Internet.

For a few years, many website owners used blog networks to easily post content to many sites for backlinks. They worked so well at improving rankings, that Google took action to kill their effectiveness and prevent search engine ranking manipulation. In March 2012, Google took action against blog networks and removed some of the major networks from their search index. At that point, those blog network backlinks became suddenly worthless.

As a result of this, some websites lost thousands of backlinks overnight and their search engine rankings on Google plummeted.

Link Spam
Link spam, also known as spamdexing, is a deliberate attempt to influence search engines. There are several different methods used, and all of them are considered to be black-hat and should be avoided. Some examples of these are :

Spun Content
Spun content is a method typically used to create backlinks by taking unique content and changing certain words, sentences, and even paragraphs, to create a new version. By rewriting existing content and replacing elements, an article spinner is able to get a certain percentage of unique content.

This method was used extensively by black-hat SEOs for years. Unfortunately, much of the content that was created using this method had terrible grammar and in most cases was simply unreadable. Since Google realized this was becoming a real problem, it is believed that grammar checking is now used as a signal for ranking.

Link Wheels
Once cheap SEO providers realized that they could use spun content to create link spam, it was only a matter of time until link wheels became a tool in their arsenal. Link wheels are a pattern of links created to help promote the rankings of a website. They are typically used with a mixture of links that funnel their link juice to a single page.

There are good indications that Google is getting more adept every day at recognizing link wheel schemes. Many methods that used to rank sites using link wheels have been abandoned and new methods are being created to take their place.

Automated Blog Commenting and Forum Posting
Automated blog commenting and forum posting was a favorite technique of black-hat SEOs for quite some time. Several tools popped up on the market to help people get large numbers of low-quality links quickly. The problem is that these comments were typically generic and provided little to no benefit to the conversation. Google has not only devalued the quality of these links, but also has lowered the ranking of sites that have them.

Google Panda
Google Panda was first introduced in February 2011. The goal was to remove low quality and thin sites with poor or duplicate content from Google’s index. Google Panda was said to have affected around 12% of search engine results.

Google Panda was designed to fight problems with content scraping and copyright infringement that allowed sites to get higher rankings without having original content. The Panda algorithm has received many updates since it was initially rolled out as Google continues to refine the algorithm.

Google Penguin
Google Penguin was released on April 24, 2012. While Google Panda was designed to remove websites from the index that had poor or thin content, Penguin targeted websites that had achieved their rankings by manipulative link building techniques.

Black-hat methods such as link schemes, duplicate content, keyword stuffing, and cloaking were addressed.
Google has said that Penguin affected 3.1% of websites in English and about 3% in other languages. Penguin 1.1 was introduced on May 25, 2012 and another update, Penguin 3, was introduced on October 5th of 2012.

As Google continues to refine their algorithms, it's doubtful that the old methods of ranking (above) will continue to work for long.

Tips :
Most of the time when a site gets hit by Penguin, a bad link profile is the culprit. Have an SEO professional do a backlink analysis (or do it yourself) to figure out which sites are providing your inbound links, as well as which ones may be hurting your rankings.

What Works Now
B2B Tactics
Now that Google Panda and Penguin have been released, Google search engine rankings will never be the same. The old methods won’t be reliable in the future. While some of these methods may still work, Google is continuing to update its algorithms.

Here are some white-hat methods that professional SEOs are using to get sites to rank today :

Guest Posting
Guest posting has become more popular since Google made these changes. It's basically when an author is allowed to write content on another person or company’s website. Guest posting can be a great way to get traffic and backlinks.

Unfortunately, some unscrupulous people often try to post low quality content as guest posts. In most cases, the website owner rejects low quality content as it may endanger their website and incur the wrath of Panda.

Your best choice is to write extremely high-quality content that will have readers follow the links to your site after reading the article.

Tips:

Make guest blogging a regular part of your daily routine: don’t just do one and think you're done. As readers continue to read your guest posts, your level of trust with them will grow and they will be more likely to follow the link to your site.
Take the time to read the site before submitting a guest post and match the writing style. Also, make sure the site doesn’t already have articles written on the same topic.
Participate on the site before posting. This may sound like a simple suggestion, but in reality few people do it.

Social Media
Most of us use social media on a daily basis, but are we utilizing it in the best ways for our brand? Social media marketing is the process of gaining traffic and attention through social media sites.

It can be a great opportunity to build trust if used properly. Please keep in mind that social media should be used fundamentally to help people and not as a way to directly market your products.

Tips :

Make the most of your social media: post high quality, interesting content that people will want to share.
Create a hook in at least some of your posts to keep your readers interested.
Educate your readers. The more you can teach them, the better. This is not a place to sell your brand.

Content Marketing

Content marketing has become a buzzword in the past year, but what does it mean? In short, content marketing is communicating with your current and future customers without trying to promote your products.

It's a method of helping your customers by teaching instead of selling. It could also be a great way to improve trust and loyalty. Think of this as an umbrella term, which covers several types of content: articles, blogging, social media, videos, images, infographics, eBooks, and more.

Tips :

Create compelling content that will be shared.
Be careful when you promote your brand. Instead of advertising, create interesting pieces that teach.
Use a narrative voice whenever possible.
A great story can create readership and promote sharing. Use it often.

There are many steps to a successful SEO campaign. As long as you’re not still practicing the old methods and have embraced the evolution and changes within the SEO industry, work hard and smart and your SEO initiative will yield the positive ROI you’re looking for.

Cara Merawat Blackberry

2013-10-18T07:22:00.003-07:00

Cara Merawat Blackberry - Blackberry merupakan salah satu jenis telepon selular yang cukup laris dan banyak digunakan di Asia, khususnya fitur blackberry messanger (BBM) yang cukup efektif memberikan kemudahan komunikasi dalam sebuah jejaring komunitas tertentu. Namun, karena penggunaan yang berlebihan, kadangkala telepon selular blackberry Anda sering bermasalah, misalnya Hang, kontak BBM Anda terhapus semua dan sebagainya. Untuk mengatasi hal tersebut, Blackberry Anda perlu dirawat dan diperlakukan dengan benar. Berikut ini Metro Personal akan memberikan cara cerdas bagaimana merawat telepon selular blackberry Anda :

Setiap dua tiga hari sekali, lepas batere Blackberry Anda dan diamkan selama kurang lebih tiga menit. Melepas batere membuat Blackberry melakukan reboot pada saat batere kembali dipasang. Hal ini berguna untuk menghapus sisa-sisa file (temporary files) yang tidak terpakai akibat proses chatting ataupun browsing.
Lakukan Clear Log setiap beberapa hari sekali. Hal ini Bisa dilakukan dengan cara menekan Alt+ L G L G. Fungsinya mirip dengan langkah pertama di atas, yaitu membersihkan file-file log (temporary files) pada Blacberry.
Anda juga bisa melakukan Cleaning Memory secara rutin, dengan cara pilih Option -> pilih Security Option -> pilih Advanced Security Option -> pilih fitur Cleaning Memory -> pilih modus Enable untuk mengaktifkannya. Proses ini berguna untuk mengoptimasi memory (RAM).
Setiap dua tiga hari sekali, lakukan Host Routing Table, dengan cara pilih Option -> Advanced Option -> Pilih Host Routing Table, tekan tombol logo Blackberry Icon lalu pilih Register Now.
Anda juga dapat melakukan Diagnostic Test Setidaknya seminggu sekali. Hal ini sangat penting, karena melalui cara inilah, Anda dapat mengetahui apakah fungsi smartphone Blackberry Anda terkoneksi semua dengan baik, baik PIN, register maupun koneksi email. Caranya adalah, pilih Option -> Mobile Network -> Tekan Logo Blackberry Icon -> Pilih Diagnostic Test -> Tekan logo Blackberry Icon -> Pilih Run. Biarkan hingga proses selesai.

Demikian Tips/Trik dari Metro Personal, Semoga Bermanfaat !!

Kelebihan phpDesigner 8

2013-10-16T21:37:00.002-07:00

Kelebihan phpDesigner Editor 8 adalah PHP IDE dan PHP Editor fast built-in HTML5, CSS3 dan editor JavaScript. di tambah fitur menarik membantu dalam pembuatan website dan pembuatan template. Selain pengeditan PHP, phpDesigner 8 juga di lengkapi pengeditan HTML5, CSS3 dan JavaScript. Berikut fitur pendukung dari phpDesigner 8 :

- Fast, powerful and intuitive to use
- PHP IDE and PHP editor
- HTML5-, CSS3- and JavaScript editor
- Code insight
- Debug and profile PHP with Xdebug
- PHP frameworks
- JavaScript frameworks Integration with GIT and SVN
- Work with files over FTP/SFTP

Syntax highlighters
Code Insight helps you master PHP, HTML5, CSS3 and JavaScript on the fly.

HTML5
Built-in code completion for HTML5. It can even suggest you the missing tag.

PHP Debugging
Analyze, evaluate, profile, find errors in your PHP code line by line with Xdebug.

PHP Frameworks
Supports all frameworks for PHP e.g. Zend, CodeIgniter, Yii and Symfony.

JS Frameworks
Supports libraries like jQuery, ExtJS, Yui, Dojo. MooTools and Prototype.

Themes
Syntax themes are customizable and also comes in black variants.

Code Insight untuk PHP, HTML5, CSS3 dan JavaScript, termasuk kerangka JavaScript jQuery populer lainnya.

Intelligent syntax highlighting for PHP, HTML5, CSS3, and JavaScript
Switch automatic between highlighters for PHP, HTML5, CSS3, and JavaScript dependant on your position in your code and dim the rest of the code so you can keep a focus on your code. You can even see syntax errors as you type.

Saya Paling suka phpDesigner 8 Editor ini daripada PHP Editor yang lain. Untuk informasi lengkap phpDesigner 8 silahkan kunjungi situs resminya disini

Download

Cara Cloning Template Blogger

2013-10-16T20:47:00.001-07:00

Cara Cloning Template - Berawal dari saya mencari di mbah google template Blogger Valid HTML5 + Responsive untuk mengganti template default bawaan dari blogger untuk Blog Sederhana saya ini, namun semuanya tidak sesuai dengan selera/keinginan saya hehehe :D Dalam pencarian Template Valid HTML5, saya di arahkan mbah google ke blog master om Agus Ramadhani dan Kang Ismet

Saya suka Tema Template kedua master Blog ini. Nah di sini muncul ide kreatif saya untuk meng-cloning template master blog ini. (Maaf ya om Agus dan Kang Ismet) hehehe Piss \m/_.._\m/ saya hanya sekedar mengembangkan kreatifitas saya, dan tidak akan share hasil Template clonengan buatan saya :).

Pertama kali saya clonng template Kang Ismet dan berhasil. Berikut screenshoot nya :

Waktu Pembuatan template clonengan hanya membutuhkan waktu dua jam, termasuk menyusun formulasi template, dan menemukan kode kode yang disembunyikan atau yang tidak ditampilkan, sampai proses upload template di blogger. Dalam pembuatan template, anda tidak perlu repot-repot mencari template yang mirip mirip template bawaan template orang yang anda akan di cloning. cukup copy source code templatenya saja.

Disini saya tidak akan share hasil Template clonengan blog master buatan saya, namun saya akan memberitahukan cara cloning template blog orang lain. Okay !! mari kita langsung aja caranya (simak baik-baik) :

Dalam Bahasan postingan ini, saya kasih contoh cloning template blog saya sendiri, hasil clonengan dari template Blog om master blog Agus Ramadhani atau biasa dikenal di sebut o-om.com

Pertama
Hal pertama yang anda lakukan pilih salah satu postingan template target anda, terserah anda postingan apa aja!!. Setelah memilih salah satu postingan, lalu klik kanan di area bebas. Klik Kanan > Lihat Code Sumber Laman. Jika browser di kommputer anda berbahasa inggris kira-kira seperti ini: Right Click > See Source Code. (saya menggunakan Browser Firefox Berbahasa Indonesia). Lalu buat Notepad, dan copy semua Source code halaman postingan pilihan anda, Paste lalu beri Judul notepad anda "dplkt-halaman-postingan.txt" (tanpa tanda kutip). atau "dplkt-halaman-postingan.xml" (tanpa tanda kutip). Jangan Lupa Buat Folder Baru dan Beri judul "Duplikat Template" (Tanpa Tanda Kutip). Simpan Hasil Copian Sorce Code anda di folder tersebut, biar gampang di ingat.

Kedua
Perlu di ketahui, susunan Template Blog umumnya seperti ini :

Header Wrapper terdiri dari Header Left dan Header Right. (pada Template duplikat saya, seperti ini Header Inner dan .blog-desc)
Outer Wrapper terdiri dari Main Wrapper dan Sidebar Wrapper.
Footer Wrapper terdiri dari Bottom Left, Bottom Center dan Bottom Right
Credit Wrapper.

Okay!! anda mulai dari bawah code HTML dulu, hasil dari copian sorce code tadi. Cari dan perhatikan baik-baik code pada bagian Footer Wrapper, misalnya seperti ini: <div id='footer-wrapper'>

Susunan code bagian Footer Wrapper dari template duplikat saya, terdiri dari :

<div id='footer-wrapper'>
<div id='bottom'> ..... susunan dari Bottom terdiri dari :
- left-bottom
- center-bottom
- right-bottom
<div id='upper-footer'> dan
<div class='credits'>

Contoh code pada bagian Footer Wrapper:

<div id='footer-wrapper'>
<div id='bottom'>
<div class='bottom section section' id='left-bottom'><div class='widget HTML' id='HTML4'>
<h2 class='title'>About Me</h2>
<div class='widget-content'>
<div class="profile-textblock">
<!-- isi widget ABOUT ME saya hapus -->
</div>
</div>
</div></div>

Note:

Perhatikan code yang berwarna merah. yang berwarna merah, Hapus saja.
Perhatikan code yang berwarna Hijau, code div ganti dengan b:section lalu tambahkan preferred='yes' di belakang code id='left-bottom', sehingga hasilnya seperti ini :

<b:section class='bottom section' id='left-bottom' preferred='yes'/>

Lalu lanjut pada bagian center-bottom dan right-bottom. dan hasil lengkap dari b:section widget pada sub bagian bottom seperti ini :

<b:section class='bottom section' id='left-bottom' preferred='yes'/>
<b:section class='bottom section' id='center-bottom' preferred='yes'/>
<b:section class='bottom section' id='right-bottom' preferred='yes'/>

Hasil Selengkapnya pada sub bagian Bottom dari Footer Wrapper seperti ini :

<div id='footer-wrapper'>
<div id='bottom'>
<b:section class='bottom section' id='left-bottom' preferred='yes'/>
<b:section class='bottom section' id='center-bottom' preferred='yes'/>
<b:section class='bottom section' id='right-bottom' preferred='yes'/>
<div id='upper-footer'>
<b:section class='footer section' id='footer' preferred='yes'/>
</div> <!-- end upper footer -->
</div> <!-- end bottom -->
<div class='credits'>
</div> <!-- end credits -->
</div> <!-- end footer wrapper -->

Note:
Perhatikan dan teliti baik-baik code </div> sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code </div> tersebut.

Ketiga
Lanjut pada bagian Outer Wrapper yang terdiri dari Main Wrapper dan Sidebar Wrapper.

Contoh susunan bagian Outer Wrapper :

<div id='main-wrapper'>
<div id='main-wrapper-border'> <-- ini sekedar tambahan style border saja, sebelah kanan body postingan tebalnya 5px
<div id='sidebar-wrapper'>

Pada bagian Outer Wrapper ini, sama seperti cara menyusun bagian Footer Wrapper, namun khusus pada bagian b:section Main, anda sisa meng-copy saja code template yang lama milik anda. Contohnya seperti ini :

<div id='outer-wrapper'>
<div id='main-wrapper'>
<div id='main-wrapper-border'>
<b:section class='main' id='main' showaddelement='no'>  <---(star copy) mulai copy semua code b:section Main, dari template blog anda yang lama sampai....
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main' var='top'>
.
.
.
<!-- bla bla bla bla bla -->
.
.
.
</b:includable>
</b:widget>
</b:section> <-- sampai dengan akhir dari code ini
</div> <!-- end main wrapper border -->
</div> <!-- end main wrapper -->

Note:

Yang berwarna biru mulai star peng-copian dari template blog lama anda sampai akhir dari </b:section>.
Khusus code </div> penutup untuk Outer Wrapper belum ditambahkan dari keterangan diatas, karena masih ada Sidebar Wrapper. Nantinya code </div> penutup untuk Outer Wrapper akan di sematkan tepat dibawah Sidebar Wrapper.
Dalam kasus ini, saya meng-copy isi code Main Wrapper dari template default bawaan blogger. mengingat masih lengkap, masih perawan, Karena belum ada pengurangan atau pengeditan yang saya lakukan dari template default bawaan blogger tersebut. (isi dari code Blog Post dan isi code Comments).

Selanjutnya, anda lanjut pada sub bagian Sidebar Wrapper. Lihat contoh di bawah ini :

<div id='sidebar-wrapper'>
<div class='inner-box section section' id='inner-box'><div class='widget Feed' id='Feed1'>
<h2>New Post</h2>
<div class='widget-content' id='Feed1_feedItemListDisplay'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a href='http://metropersonal.blogspot.com/feeds/posts/default'>Memuat...</a>
</span>
</div>
</div>

Note:

Perhatikan code yang berwarna merah. yang berwarna merah, Hapus saja.
Perhatikan code yang berwarna Hijau, code div ganti dengan b:section lalu tambahkan preferred='yes' di belakang code id='inner-box', sehingga hasilnya seperti ini :

<b:section class='inner-box section' id='inner-box' preferred='yes'/>

Hasil Selengkapnya pada sub bagian Sidebar Wrapper dari Outer Wrapper seperti ini :

<div id='sidebar-wrapper'>
<b:section class='inner-box section' id='inner-box' preferred='yes'/>
</div> <!-- end sidebar wrapper -->

Dan sebagai penutup bahasan bagian Outer Wrapper, berikut Hasil Selngkap-lengkapnya :

<div id='outer-wrapper'>
<div id='main-wrapper'>
<div id='main-wrapper-border'>
<b:section class='main' id='main' showaddelement='no'>  <---(star copy) mulai copy semua code b:section Main, dari template blog anda yang lama sampai....
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main' var='top'>
.
.
.
<!-- bla bla bla bla bla -->
.
.
.
</b:includable>
</b:widget>
</b:section> <-- sampai dengan akhir dari code ini
</div> <!-- end main wrapper border -->
</div> <!-- end main wrapper -->
<div id='sidebar-wrapper'>
<b:section class='inner-box section' id='inner-box' preferred='yes'/>
</div> <!-- end sidebar wrapper -->
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>  <!-- clear fix do not remove -->
<br/>
</div> <!-- end outer-wrapper -->
</div> <!-- end outer wrapper line -->
<div class='clear'/>
<div class='backtotop'><a href='#'>Back to Top</a></div>

Note:

Perhatikan dan teliti baik-baik code </div> sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code </div> penutup tersebut.
Khusus untuk code penutup </div>  ini, fungsinya sebagai code </div> penutup dari data vocabulary Review, gunanya untuk merating semua postingan anda, letak tepatnya, anda bisa lihat tepat dibawah code <body>

Keempat
Selanjutnya, anda lanjut pada bagian Header Wrapper, sebagai akhir dari pembahasan code ini. Berikut Susunan code dari Header Wrapper :

<div id='branding'>
<div id='head-inner'>
<div id='header-wrapper'>

Header Wrapper terdiri dari Blog Desc dan Header. Pada bagian Header Wrapper ini, sama seperti cara menyusun bagian Outer Wrapper, namun khusus pada bagian b:section Header, anda sisa meng-copy saja code template yang lama milik anda. Contohnya seperti ini :

<div id='branding'>
<div id='head-inner'>
<div id='header-wrapper'>
<b:section class='blog-desc section' id='blog-desc' preferred='yes' showaddelement='yes'/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  <---(star copy) mulai copy semua code b:section Header, dari template blog anda yang lama sampai....
<b:widget id='Header1' locked='true' title='Metro Personal (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
.
.
.
<!-- bla bla bla bla bla -->
.
.
.
</b:includable>
</b:widget>
</b:section> <-- sampai dengan akhir dari code ini
</div> <!-- end header wrapper -->
</div> <!-- end head inner -->
</div> <!-- end branding -->

Note:

Pada bagian blog-desc section, saya tambahkan showaddelement='yes' yang nantinya anda akan ganti menjadi 'no' setelah anda mengisi deskripsi tambahan agar supaya tidak ada penambahan widget lagi. Khusus deskripsi tambahan saja.
Yang berwarna biru mulai star peng-copian dari template blog lama anda sampai akhir dari </b:section>.
Perhatikan dan teliti baik-baik code </div> sebagai code penutup. Jangan sampai ada yang salah dalam penempatan code </div> penutup tersebut.

Kelima (penutup)
Rangkuman hasil Duplikat Template dari semua pembahasan code HTML diatas sebagai berikut :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<!-- Sisipkan Code META TAG disini -->
//////////////////////////////////////////////
<!-- Sisipkan Code CSS disini -->
]]></b:skin>
<!-- Sisipkan Code Javascript RELATED POST disini -->
<!-- Sisipkan Code Javascript AUTO READ MORE disini -->
<!-- Sisipkan Code Javascript MOBILE MENU disini -->
</head>
<body>
<div><div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<div id='branding'>
<!-- Sisipkan Code Social Facebook dll disini -->
<!-- Sisipkan Code Search disini -->
<div id='head-inner'>
<div id='header-wrapper'>
<b:section class='blog-desc section' id='blog-desc' preferred='yes' showaddelement='yes'/>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>  <---(star copy) mulai copy semua code b:section Header, dari template blog anda yang lama sampai....
<b:widget id='Header1' locked='true' title='Metro Personal (Header)' type='Header'>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
.
.
.
<!-- bla bla bla bla bla -->
.
.
.
</b:includable>
</b:widget>
</b:section> <-- sampai dengan akhir dari code ini.
</div> <!-- end header wrapper -->
</div> <!-- end head inner -->
</div> <!-- end branding -->
//////////////////////////////////////////////
<!-- Sisipkan Code Stripe Style disini -->
<div id='outer-wrapper'>
<!-- Sisipkan Code Javascript MOBILE MENU disini -->
<!-- Sisipkan Code Menu Navigasi disini -->
<div id='main-wrapper'>
<div id='main-wrapper-border'>
<b:section class='main' id='main' showaddelement='no'>  <---(star copy) mulai copy semua code b:section Main, dari template blog anda yang lama sampai....
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='main' var='top'>
.
.
.
<!-- bla bla bla bla bla -->
.
.
.
</b:includable>
</b:widget>
</b:section> <-- sampai dengan akhir dari code ini
</div> <!-- end main wrapper border -->
</div> <!-- end main wrapper -->

<div id='sidebar-wrapper'>
<b:section class='inner-box section' id='inner-box' preferred='yes'/>
</div> <!-- end sidebar wrapper -->

<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>  <!-- clear fix do not remove -->
<br/>
</div> <!-- end outer-wrapper -->
</div> <!-- end outer wrapper line -->

<div class='clear'/>
<div class='backtotop'><a href='#'>Back to Top</a></div>
//////////////////////////////////////////////
<div id='footer-wrapper'>
<div id='bottom'>
<b:section class='bottom section' id='left-bottom' preferred='yes'/>
<b:section class='bottom section' id='center-bottom' preferred='yes'/>
<b:section class='bottom section' id='right-bottom' preferred='yes'/>
<div id='upper-footer'>
<b:section class='footer section' id='footer' preferred='yes'/>
</div> <!-- end upper footer -->
</div> <!-- end bottom -->
<div class='credits'>
</div> <!-- end credits -->
</div> <!-- end footer wrapper -->

</div>
</body>
</HTML>

Note:
Untuk code Meta Tag silahkan kunjungi Blog Kedua Master yang saya sebutkan diatas, disini dan disini

Bila ada yang kurang jelas silahkan tanyakan melalui kotak komentar dibawah. Selamat Mencoba!!
Keep Spirit and Keep Imagination...Enjoy!! :)

Taufik Hidayat - About Me

2013-10-16T01:35:00.003-07:00

METRO PERSONAL adalah Situs Blogging sederhana yang berisikan Tentang Tips Trik, Tutorial, Software dan berbagai Artikel lainnya yang menarik. Mudah-mudahan dapat memberi Solusi yang Berguna serta Bermanfaat bagi kita semua. semoga METRO PERSONAL dapat menjadi media Informasi, Solusi & Inspirasi. selalu bermangat mengarungi dunia maya, menempuh perjalanan seribu mil dimulai satu langkah awal.

Saya, Taufik Hidayat memulai kegiatan Blogging sejak Tahun 2004. saat ini memimpin sebuah Perusahaan Swasta bergerak di bidang Konstruksi dan properti. saya blogging sekedar mengisi waktu senggang sambil belajar Desain Template Blog :)

Jadi Blogger tidak harus pintar, cukup memiliki imajinasi, ide kreatif, uptodate dan mencari semua jawaban di Google

Anda dapat menghubungi saya di Twitter, Facebook dan Google+. Atau hubungi saya via Email.

Automatic Background Color different Every Post Blogger

2013-10-12T23:12:00.001-07:00

Automatic Background Color different Every Post Blogger - Easy!! Find the code </head> then put the following Javascript code just above the </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(".post").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]>
</script>

If you just want to change the color of posts on the main page alone you stay just use conditional tags like the code below:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(".post").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]>
</script>
</b:if>

Display different colors on the background of each posting may be ideal only for Templates with Style Gallery. But there is no harm if you want to try.

How to Add the Twitter Share Button to Your Blogger Posts

2013-10-12T04:53:00.000-07:00

How to Add the Twitter Share Button to Your Blogger Posts - Twitter has recently officially released its new Sharing Button with optional counter (Tweet Button). The button comes in three styles and features a new URL shortener. The Tweet Button will show how many times your post has been shared on Twitter.

The main advantage of the Tweet Button is that it enables the reader to follow you (and a related account) after he tweets your post. If you have a WordPress blog, please use the WordPress Tweet Button Plugin

To add the new Tweet Button to your Blogger blog, follow these simple steps:

Login to your Blogger Dashboard and Navigate to Design Edit HTML
Click on the Check box which says Expand Widget Templates
Now look for (Ctrl + F)

<data:post.body/>

and immediately above it paste the following code snippet (after proper editing)

<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='metropersonal:Tips and Tricks for Blogger' data-count='vertical' data-via='' data-lang='en'>Tweet</a>
<b:if cond='data:post.isFirstPost'>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</b:if>
</div>

4. Save your template.
5. Now you should see the Twitter button somewhere near your blog posts.

Editable parameters

Float:left - you can change this to float:right if you need the button on the right side of the post instead of on the left.
data-count='vertical' - you can change this to data-count='horizontal' or data-count='none'
data-via='' - you can edit it with your Twitter username. So if your Twitter name happens to be tom, then change it to data-via='tom'
Adding some extra text in the tweet – With the current code, the button will make a tweet with the title of the blog post. If you want to add some extra text to the tweet, change expr:data-text='data:post.title' to expr:data-text='"I am Reading: "+data:post.title' This will append "I am Reading:" to the tweet
Recommend another Twitter user - data-related='metropersonal: Tips and Tricks for Blogger' here metropersonal can be replaced with the twitter username that you want to recommend (don't use @) and you can replace Tips and Tricks for Blogger with the a short description of the related account.
Change language – you can change data-lang='en' to data-lang='fr' or data-lang='de' or data-lang='es' or data-lang='ja' (en, fr, de, es and ja stand for English, French, German, Spanish, Indonesia and Japanese respectively) Displaying the Tweet Button on Post Pages Only If you want to display the Twitter button on posts page only, then wrap the code with conditional tags like (wrapping tags in green)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style="float:left;padding:4px;">
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button' expr:data-url='data:post.url' expr:data-text='data:post.title' data-related='bloggerplugins:Tutorials and Widgets for Blogger' data-count='vertical' data-lang='en' data-via=''>Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js">
</script>
</div>
</b:if>

Demos

1.data-count='vertical'
2.data-count='horizontal'
3.data-count='none'

If you want to display a simple Text link instead of the Button, pleease read my article Simple "Tweet This" Text Link for Blogger.

More Info about the Tweet Button

<iframe width="360" height="360" src="http://www.youtube.com/embed/LB0hrJ_ZZzc?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Using CSS/HTML to Make a Responsive Website

2013-10-12T03:35:00.001-07:00

Using CSS/HTML to Make a Responsive Website - A website is responsive if it is able to adapt to the screen of the client. In this article, I’ll show you how to easily make a website responsive in three easy steps.

The layout
When building a responsive website, or making responsive an existing site, the first element to look at is the layout. When I build responsive websites, I always start by creating a non-responsive layout, fixed at the default size. For example, CatsWhoCode.com default width is 1100px. When I’m pleased with the non-responsive version, I add media queries and slight changes to my code to make the code responsive. It’s way easier to focus on one task at a time.

When you’re done with your non-responsive website, the first thing to do is to paste the following lines within the <head> and </head> tags on your html page. This will set the view on all screens at a 1×1 aspect ratio and remove the default functionality from iPhones and other smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching.

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

It’s now time to add some media queries. According to the W3C site, a media query consists of a media type and zero or more expressions that check for the conditions of particular media features. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself. In other words, media queries allows your website to look good on all kinds of displays, from smartphones to big screens.

Media queries depends of your website layout, so it’s kinda difficult for me to provide you a ready to use code snippet. However, the code below is a good starting point for most websites. In this example, #primary is the main content area, and #secondary the sidebar.

By having a look at the code, you can see that I defined two sizes: The first have a maximum width of 1060px and is optimized for tablet landscape display. #primary occupies 67% of its parent container, and #secondary 30%, plus a 3% left margin.

The second size is designed for tablet portrait and smaller sizes. Due to the small sizes of smartphones screens, I decided to give #primary a 100% width. #secondary also have a 100% width, and will be displayed below #primary.

As I already said, you’ll probably have to adapt this code a bit to fit the specific needs of your website. Paste it on your site .css file.

/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}
}

/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

Once done, let’s see how responsive your layout is. To do so, I use this awesome tool created by Matt Kersley.

Medias
A responsive layout is the first step to a fully responsive website. Now, let’s focus on a very important aspect of a modern website: medias, such as videos or images.

The CSS code below will ensure that your images will never be bigger than their parent container. It’s super simple and it works for most websites. Please note that the max-width directive is not recognized by older browsers such as IE6. In order to work, this code snippet have to be inserted into your CSS stylesheet.

img { max-width: 100%; }

Although the technique above is efficient, sometimes you may need to have more control over images and display a different image according to the client display size.

Here is a technique developed by Nicolas Gallagher. Let’s start with the html:

<img src="image.jpg"
     data-src-600px="image-600px.jpg"
     data-src-800px="image-800px.jpg"
     alt="">

As you can see, we used the data-* attribute to store replacement images urls. Now, let’s use the full power of CSS3 to replace the default image by one of the specified replacement images if the min-device-width condition is matched:

@media (min-device-width:600px) {
    img[data-src-600px] {
        content: attr(data-src-600px, url);
    }
}

@media (min-device-width:800px) {
    img[data-src-800px] {
        content: attr(data-src-800px, url);
    }
}

Impressive, isn’t it? Now let’s have a look to another very important media in today’s websites, videos.

As most websites are using videos from third parties sites such as YouTube or Vimeo, I decided to focus on the elastic video technique by Nick La. This technique allows you to make embedded videos responsive.

The html:

<div class="video-container">
	<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

And now, the CSS:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Once you applied this code to your website, embedded videos are now responsive.

Typography
The last step of this tutorial is definitely important, but it is often neglected by developers when it comes to responsive websites: Typography.

Until now, most developers (including myself!) used pixels to define font sizes. While pixels are ok when your website has a fixed width, a responsive website should have a responsive font. Indeed, a responsive font size should be related to its parent container width, so it can adapt to the screen of the client.

The CSS3 specification included a new unit named rems. They work almost identically to the em unit, but are relative to the html element, which make them a lot easier to use than ems.

As rems are relative to the html element, don’t forget to reset html font size:

html { font-size:100%; }

Once done, you can define responsive font sizes as shown below:

@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }

Please note that the rem unit is not recognized by older browers, so don’t forget to implement a fallback. That’s all for today – I hope you enjoyed this tutorial!

Creating and resetting BlackBerry ID

2013-10-12T02:28:00.000-07:00

Creating and resetting BlackBerry ID - Your BlackBerry ID username and password gives you access to BlackBerry websites, apps, and services. It helps sync your information with your computer, and transfer that information when you change devices. One BlackBerry ID can be used for all your BlackBerry devices.

When you first power up your BlackBerry, the set up wizard will suggest that you set up a BlackBerry ID. If you prefer, follow the steps below to set up your ID via the internet.

From your computer, go to blackberry.com/blackberryid Click the link to Create a BlackBerry ID
Review the BlackBerry ID Terms and Conditions, then click I Agree to continue
Complete the required fields on the BlackBerry ID sign-up page, then click Save
A confirmation message will be displayed advising that the BlackBerry ID has been created successfully, click Ok to continue. You should receive a confirmation email.
When you receive the validation email, click the link within the email message and, when prompted, enter the BlackBerry ID password

Note: The link within the validation email will expire after a 24-hour period. If you don't receive the validation email check your spam/junk folder or that it's not been blocked by your Internet Service Provider.

How to reset your BlackBerry ID To reset your password go to blackberryid.blackberry.com

Creating Mobile First Responsive Design

2013-10-12T01:59:00.001-07:00

Creating Mobile First Responsive Design - We're going to walk through how to create an adaptive web experience that's designed mobile-first. This article and demo will go over the following:

Why we need to create mobile-first, responsive, adaptive experiences
How to structure HTML for an adaptive site in order to optimize performance and prioritize flexibility
How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
What we could do to further enhance our adaptive experience

The Need for Adaptivity
As the web landscape becomes increasingly complex, it's becoming extremely important to deliver solid web experiences to a growing number of contexts. Thankfully, responsive web design gives web creators some tools for making layouts that respond to any screen size. We'll use fluid grids, flexible images and media queries to get the layout looking great regardless of the size of the device's screen dimensions.

However, mobile context is much more than just screen size. Our mobile devices are with us wherever we go, unlocking entire new use cases. Because we constantly have our mobile devices with us, connectivity can be all over the board, ranging from strong wi-fi signals on the couch to 3G or EDGE when out and about. In addition, touch screens open new opportunities to interact directly with content and mobile ergonomics lead to different considerations when designing layout and functionality.

In order to create a site that's truly designed for mobile context and not just for small screens, we want to ensure that we tackle the many challenges of mobile development upfront. The constraints of the mobile context force us to focus on what content is essential and how to present that content as quickly as possible. Building fast-loading, optimized experiences mobile first has a trickle down (or up, depending on how you look at it) effect for tablet, desktop and other emerging contexts.

What We're Making: The Humble Product Detail Page

View the demo

The demo we're making is a simple e-commerce product detail page for a fictitious t-shirt company. Why choose this? E-commerce sites can have many use cases across contexts. For example, 70% of smartphone owners use their mobile phones to influence in-store purchases. So while we'll make sure that purchasing the product is as easy as possible, we'll also try to make the product reviews accessible and utilize the user's location to enhance the mobile experience.

Structure
Authoring lean, semantic HTML5 markup keeps adaptive experiences manageable and accessible, and also provides opportunities for enhanced experiences (quick example: using proper HTML5 input types brings up the appropriate virtual keyboard on many touch devices). Semantic markup is extremely portable and can be accessed by many mobile devices, tablets, desktop browsers and future web-enabled devices, regardless of feature set or capability.

Setting the viewport
In order to accommodate for sites not optimized for mobile screens, many modern mobile browsers set a larger browser viewport, which allows for better viewing of non-mobile-optimized sites. Users can then pinch-to-zoom in on the content they want. That's fine for non-mobile experiences, but because we're optimizing our experience for mobile browsers, we'll use the viewport meta tag to set the screen width to the device width:

<meta name="viewport" content="width=device-width, initial-scale=1" />

It's important to note that we're not disabling the user's ability to zoom the page (which you could do by adding user-scalable=no to the content attribute), even though we're optimizing the content for small screens. It's recommended to keep user zooming enabled to keep things as accessible as possible. However, there are use cases to disable user-zooming, such as if you're including fixed positioned elements.
Content fragments

In order to keep the experience as lightweight as possible and to improve the perceived loading time, we're creating two additional HTML documents for our auxiliary content, reviews.html andrelated.html. Because this content isn't required for the main use case (buying the product) and includes a number of images, we won't load it by default to keep the initial page size down. By default the content is accessible via links on the page, but if a certain level of javascript support is present, we'll conditionally load the content when the user requests it or when the resolution reaches a certain breakpoint.

HTML Special Characters
A simple technique to reduce the need for background images (thereby saving HTTP requests) is to use HTML special characters for simple shapes. In the case of our rating stars, we're using ★ to create a solid star (★) and ☆ to create empty stars (☆) for our ratings. And because it's HTML and not an image, it stays crisp even on high resolution screens.

The tel: URI Scheme
Another simple yet effective technique we're including in our footer is a clickable link to the customer service number. This is accomplished by using the tel URI scheme, which looks like this:

<a href="tel:+18005550199">1-800-555-0199</a>

We sometimes forget that mobile devices can make phone calls, and also that some desktop configurations can launch VoIP applications to initiate a phone call. We're including an easy way for users to facilitate a phone call, which in some cases might make sense (i.e. a mobile user who might prefer finishing the transaction over the phone versus going through a checkout flow on their mobile device). Now that we have a strong, semantic foundation in place, let's move onto adding style enhancements.

Style
When crafting our CSS, we'll do everything in our power to keep things lightweight and as fluid as possible. We understand that all these devices have many different screen sizes, and that tomorrow's devices won't have the same resolutions as today's. Because screen size is an unknown, we'll use the content itself to determine how the layout should adjust to its container.

Separate style sheet for larger screens
We're creating two separate CSS files, style.css and enhanced.css in order to deliver basic styles for screens less than 40.5em and using media queries to serve up enhanced styles for screens larger than 40.5em.

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="enhanced.css" />
<![endif]-->

We're using the conditional code <!--[if (lt IE 9)&(!IEMobile)]> in order to serve up enhanced.css to non-mobile versions of IE less than version 9, which unfortunately don't support media queries. While this method does indeed add an HTTP request to the mix, it gives us greater flexibility over our styles. Alternately, we could use respond.js to deliver enhanced styles to IE.

We're using the em unit instead of px to maintain consistency with the rest of our relative units and account for user settings like zoom level. Also, the content should determine the breakpoint (we're using 40.5em as a breakpoint) because device dimensions are too varied and are always changing so are therefore unreliable.

Mobile-First Styles
Starting with baseline shared styles and introducing more advanced layout rules when screen size permits keeps code simpler, smaller and more maintainable. Here's just a quick example to demonstrate this point:

/*Large screen styles first - Avoid*/
.product-img {
  width: 50%;
  float: left;
}
@media screen and (max-width: 40.5em) {
  .product-img {
    width: auto;
    float: none;
  }
}

We want to avoid complexity as much as we can, so here's what a mobile-first approach looks like:

@media screen and (min-width: 40.5em) {
  .product-img {
    width: 50%;
    float: left;
  }
}

Instead of declaring large screen rules first only to override them for smaller screens, we'll simply define rules as more real estate becomes available. The web by default is a fluid thing so we'll do our best to work with it instead of against it. It's important to note that some mobile browsers (Symbian browsers, Blackberry <OS 6.0, Netfront, WP7 pre-Mango, etc) don't support media queries, so serving base styles by default reaches more devices and browsers. As Bryan Rieger puts it, "the absence of support for @media queries is in fact the first @media query."

Applying Media Queries
We're continuing our mobile-first style when we apply our media queries. Our related product list starts off two to a row, but increases to 3 in a row when the screen size is at least 28.75em wide (roughly the size of mobile phones in landscape mode) and then to 6 to a row when the screen size is at least 40.5em (roughly tablets in portrait mode or small desktop screens).

/*Default styles*/
.related-products li {
  float: left;
  width: 50%;
}
/*Display 3 per row for medium displays (like mobile phones in landscape or smaller tablets)*/
@media screen and (min-width: 28.75em) {
  .related-products li {
    width: 33.3333333%;
  }
}
/*Display 6 to a row for large displays (like medium tablets and up) */
@media screen and min-width: 40.5em) {
  .related-products li {
    width: 16.6666667%;
  }
}

Assuming small screen by default allows us to support more platforms and also makes it easy add more breakpoints without having to modify existing styles. Defining styles as they're needed also keeps file size down, reduces complexity and keeps code more maintainable.

Using Relative Units We're using percentages and em units in our design in order to keep things as flexible as possible. Relative units are far more compatible with the tremendous variance brought on by screen size, pixel density and zoom level.

While media queries are responsive web design's secret sauce, we want our fluid grids to do most of the work. Maintaining a whole slew of set-width styles across many media queries can become unwieldy, so we'll make sure the stylesheet's foundation is entirely flexible. Ethan Marcotte provides a formula for converting dimensions and font sizes from pixel-based to relative units:

target ÷ context = result

Using CSS to Reduce Requests Too many HTTP requests can be a huge killer for performance, especially on mobile. We're incorporating some CSS techniques to save HTTP requests which will improve the site's performance. Using CSS gradients instead of background images reduces the amount of image requests and gives us more control over the design. We're including the appropriate vendor prefixes to ensure maximum compatibility (there are tools for this) and hoping that one day that these rules will become standardized to save us some time.

/*Using CSS gradients instead of background images*/
header[role="banner"] {
  position: relative;
  background: #111;
  background: +linear-gradient (top, #111 0%, #222 100%);
}

We're also using data URIs instead of background images for some of the smaller icons (for icons like search, social features and location). While data URIs might look a bit ugly and can increase up the stylesheet file size, the reduction of requests results in a faster perceived download time.

/*Using a Data URI for Background Image*/
.find-nearby {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAADHmlDQ1BJQ0MgUHJvZmlsZQAAeAGFVN9r01AU/tplnbDhizpnEQk+aJFuZFN0Q5y2a1e6zVrqNrchSJumbVyaxiTtfrAH2YtvOsV38Qc++QcM2YNve5INxhRh+KyIIkz2IrOemzRNJ1MDufe73/nuOSfn5F6g+XFa0xQvDxRVU0/FwvzE5BTf8gFeHEMr/GhNi4YWSiZHQA/Tsnnvs/MOHsZsdO5v36v+Y9WalQwR8BwgvpQ1xCLhWaBpXNR0E+DWie+dMTXCzUxzWKcECR9nOG9jgeGMjSOWZjQ1QJoJwgfFQjpLuEA4mGng8w3YzoEU5CcmqZIuizyrRVIv5WRFsgz28B9zg/JfsKiU6Zut5xCNbZoZTtF8it4fOX1wjOYA1cE/Xxi9QbidcFg246M1fkLNJK4RJr3n7nRpmO1lmpdZKRIlHCS8YlSuM2xp5gsDiZrm0+30UJKwnzS/NDNZ8+PtUJUE6zHF9fZLRvS6vdfbkZMH4zU+pynWf0D+vff1corleZLw67QejdX0W5I6Vtvb5M2mI8PEd1E/A0hCgo4cZCjgkUIMYZpjxKr4TBYZIkqk0ml0VHmyONY7KJOW7RxHeMlfDrheFvVbsrj24Pue3SXXjrwVhcW3o9hR7bWB6bqyE5obf3VhpaNu4Te55ZsbbasLCFH+iuWxSF5lyk+CUdd1NuaQU5f8dQvPMpTuJXYSWAy6rPBe+CpsCk+FF8KXv9TIzt6tEcuAcSw+q55TzcbsJdJM0utkuL+K9ULGGPmQMUNanb4kTZyKOfLaUAsnBneC6+biXC/XB567zF3h+rkIrS5yI47CF/VFfCHwvjO+Pl+3b4hhp9u+02TrozFa67vTkbqisXqUj9sn9j2OqhMZsrG+sX5WCCu0omNqSrN0TwADJW1Ol/MFk+8RhAt8iK4tiY+rYleQTysKb5kMXpcMSa9I2S6wO4/tA7ZT1l3maV9zOfMqcOkb/cPrLjdVBl4ZwNFzLhegM3XkCbB8XizrFdsfPJ63gJE722OtPW1huos+VqvbdC5bHgG7D6vVn8+q1d3n5H8LeKP8BqkjCtbCoV8yAAAACXBIWXMAAAsTAAALEwEAmpwYAAABbmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNC40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpCYWcvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrlPw1BAAABGUlEQVQoFXWSvU4CQRRGdwydxWYLXkCp7ayIhMYIRPEJtDOGAG8AFY1vQOigZi202cQYY4XFJiRYWm2NsbE2LOfbnYlbwE0O3/2bO8PMemma+uAJ7AjuILHco8eurl6jwBhTonAOHfiFMzDwDgGM4YXePzf5gsQHXGsAFsKj9dv4C2gpLjFdx+jBA4knVLbKxdPAZ3o2xF30S9vqzDUKN65pl9I8Ix9rQWIbYvSThSMbZ0LjAOcETuFQf1aLZE7z6P9X+QNbNwp0dVUm36J7jZ2mFJda+QoBiSs0Mx0DhoW4iV+GyF1ri0BXd8lOiDeH0Pqq6cqzWvHhGiR1vB+og477Bpo8gYgB2cMVP40KBb3JGr6hDxXtZPG3KYiAhJlWaikAAAAASUVORK5CYII=) no-repeat 100% 43%;
}

Behavior
Now that we have our structure and style in place, we'll add JavaScript enhancements to add functionality to the navigation, image gallery and auxiliary content.

Navigation
Navigation can be especially tricky for adaptive experiences. Top navigation is common for desktop sites, but top navigation can crowd the screen and push down the primary content on small screens. We want to highlight the product and not the site navigation, so we'll do our best to get the navigation out of the way. in our markup we've created a list called #nav-anchors, which will be used to toggle the visibility of the navigation and search bar for small screens.

<ul id="nav-anchors" class="nav-anchors">
  <li><a href="#nav" id="menu-anchor">Menu</a></li>
  <li><a href="#search" id="search-anchor">Search</a></li>
</ul>
<form id="search" action="#" method="post" class="search reveal">
  <fieldset>
    <legend>Search the Site</legend>
    <input type="search" placeholder="Search Store" />
    <input type="submit" value="Search" />
  </fieldset>
</form>
<nav id="nav" class="nav reveal">
  <ul role="navigation">
    <li><a href="#">T-shirts</a></li>
    <li><a href="#">Hoodies</a></li>
    <li><a href="#">Pants</a></li>
  </ul>
</nav>

We'll add a resize listener which will determine whether there's enough room to show the navigation and search bar.

$(w).resize(function(){ //Update dimensions on resize
  sw = document.documentElement.clientWidth;
  sh = document.documentElement.clientHeight;
  checkMobile();
});

//Check if Mobile
function checkMobile() {
  mobile = (sw > breakpoint) ? false : true;

  if (!mobile) { //If Not Mobile
    $('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
  } else { //Hide
    if(!$('#nav-anchors a').hasClass('active')) {
      $('#nav,#search').hide(); //Hide full navigation and search
    }
  }
}

Image Gallery
By default the image gallery is simply a large image with thumbnail images that click through to their larger counterparts. This means that they're accessible to browsers and devices with poor or no JavaScript support.

<div id="product-img" class="product-img">
  <figure class="img-container" id="img-container">
    <img src="images/product_img_1.jpg" alt="Super Ffly T-shirt" />
  </figure>
  <nav>
    <ul>
      <li><a href="images/product_img_1.jpg"><img src="images/product_img_1_thumb.jpg" alt="Super Ffly Men's Shirt" /></a></li>
      <li><a href="images/product_img_2.jpg"><img src="images/product_img_2_thumb.jpg" alt="Super Ffly Women's Shirt" /></a></li>
      <li><a href="images/product_img_3.png"><img src="images/product_img_3_thumb.jpg" alt="Ffly Logo" /></a></li>
    </ul>
  </nav>
</div>

We'll build an image carousel from the available thumbnail images:

function buildGallery() {
  container.html('<div id="img-list"><ul /></div>');
  imgList = $('#img-list');
  nav.find('a:first').addClass('active');

  //For Each Navigation Link
  nav.find('a').each(function() {
    var $this = $(this);
    var href = $this.attr('href');

    //Prepare list item with image source in data attribute
    arr += '<li data-imgsrc="'+href+'"></li>';
  });

  //Append to #img-list
  imgList.find('ul').append(arr);

  //Nav Thumbnail Click
  nav.on('click', 'a', function(e) {
    var pos = $(this).parent().index();
    e.preventDefault();
    loadImg(pos);
    if(swipeEnabled) {
      mySwipe.slide(index, 300);
    }
    updateNav(pos);
  });
}

To enhance the experience further, we're using Modernizr to detect for the presence of touch events and CSS transitions, and if they are supported, we'll load in a library called SwipeJS to make a touch-friendly image carousel.

Modernizr.load({
  test: Modernizr.touch && Modernizr.csstransitions,
  yep: 'js/swipe.js',
  complete: function() {
    if (Modernizr.touch && Modernizr.csstransitions) {
      swipeEnabled = true;
      buildSwipe();
    }
  }
});

//Build Swipe Carousel
function buildSwipe() {
  //Initialize Swipe.js
  w.mySwipe = new Swipe(document.getElementById('img-list'), {
    callback: function(event, index, elem) {
      updateNav(index);
      loadImg(index + 1);
    }
  });
}

We now have an accessible image gallery with added enhancements for touch-enabled devices.

Related Content In order to keep Initial page size down, we're not loading auxiliary content, namely the related t-shirts and product reviews, by default. Instead, they exist as their own HTML pages, which are accessed by links as a default behavior.

<section class="aux related-products" id="related-products">
  <header id="tab-related">
    <a href="related.html">
      <h2>Similar T-shirts</h2>
    </a>
  </header>
</section>
<section class="aux reviews" id="reviews">
  <header id="tab-reviews">
    <a href="reviews.html">
      <h2>8 Reviews</h2>
      <ol class="star">
        <li class="on">&#9733;</li>
        <li class="on">&#9733;</li>
        <li class="on">&#9733;</li>
        <li class="on">&#9733;</li>
        <li>&#9734;</li>
      </ol>
    </a>
  </header>
</section>

We'll pull in the related content when one of two conditions are met: When a small-screen user clicks the related shirts or product reviews links When the screen has enough room to load in the auxiliary content.

//Check if Mobile
function checkMobile() {
  if(sw > breakpoint) {
    mobile = false; //Not Mobile
  } else {
    mobile = true; //Mobile
  }

  if (!mobile) { //If Not Mobile
    loadAux(); //Load auxiliary content
  }
}

//Set up Auxiliary content
function loadAux() {
  var $aux = $('.aux');
  $aux.each(function(index) {
    var $this = $(this);
    var auxLink = $this.find('a');
    var auxFragment = auxLink.attr('href');
    var auxContent = $this.find('[role=tabpanel]');
    if (auxContent.size()===0 && $this.hasClass('loaded')===false) {
      loadContent(auxFragment,$this);
    }
  });
}

function loadContent(src,container) { // Load Tab Content
  container.addClass('loaded');
  $('<div role="tabpanel" />').load(src +' #content > div',function() {
    $(this).appendTo(container);
  });
}

note: we're using screen size to determine when to load in content, but this is in no way perfect. Keep an eye out for navigator.connection for a better way to determine whether it's worth introducing extra content.

Geolocation
Leveraging user location to deliver enhanced experiences is an important aspect of mobile development. Thankfully geolocation is one of the best supported Features across mobile browsers (as well as most desktop browsers). The fallback functionality could be a simple form where the user simply inputs their ZIP code to find store near them.

Adaptive Images
Our demo isn't incorporating many large images, but it's best practice to load in mobile optimized images by default then conditionally load in larger images only when needed. There are lots of different techniques for responsive images, both client-side and server side. We've done a lot so far to be mindful of performance, and optimizing images is an easy way to optimize performance even further.

Less JS
Keeping pages as lightweight as possible is important for performance, so we should look to optimize scripts as much as possible. We're using the jQuery library for our demo, but we're definitely not using all of it. We could look into using Closure Compiler to strip out unused bits of the library to keep things as lightweight as possible while still taking advantage of what jQuery offers. Alternately, we could look into micro-frameworks like Zepto.js and others, but they typically don't necessarily offer the best cross-browser support. Writing vanilla Javascript could avoid additional heft but can be more difficult to author and harder to maintain. Ultimately, each approach has its pros and cons, just be sure to consider the tradeoffs when making these decisions.

Offline Access
It's increasingly important to make sure web experiences are accessible offline, especially when considering mobile users with variable connectivity. Thankfully, appcache and other offline techniques gives us a way to keep our resources accessible even when the user is offline.

Wrapping Up
We've created an experience that is mindful to user context and adapts both layout and functionality based the browser and device's features. We've also set up a foundation that can adapt to future devices and browsers. Here's some key takeaways:

Author semantic HTML5 markup as a foundation for adaptive experiences.
Create mobile first CSS to keep things lightweight, simple and maintainable.
Use relative units like ems and percentages to keep styles as fluid and flexible as possible.
Let content determine the breakpoints for media queries
Exploit opportunities to reduce HTTP requests by conditionally-loading content and using HTML characters, CSS gradients, Data URIs and more
Author unobtrusive javascript and use tools like Modernizr to detect features
Take advantage of mobile-centric features like touch events, telephone links and geolocation to deliver enhanced experiences to mobile users.

Creating adaptive experiences allows your content to go more places, which means more opportunities to reach potential customers wherever they may be. By adhering to the principles of progressive enhancement and addressing constraints first, we're laying a future-friendly foundation that gives our site a better chance of working in future browsers and environments.