Download - Tutorial blog pemula

lutfietutor.blogspot.com

Puji syukur senantiasa tercurah ke hadirat Allah SWT, karena atas limpahan

rahmat dan karuniaNya Buku yang berjudul "Cara Mudah Membuat Blog di

Blogspot" dapat terselesaikan. Buku ini disusun untuk memberikan panduan bagi

mereka yang masih awam dan punya keinginan dan mau belajar tentang dunia blog.

Semoga buku ini bermanfaat. Amin Ya Robbal Alamin.


Daftar Isi

BLOG .................................................................................................................................... 3

1. CARA MEMBUAT BLOG ............................................................................................. 3

2. CARA POSTING DI BLOG ............................................................................................ 4

3. HALAMAN PADA BLOG .............................................................................................. 7

4. CARA MENAMBAHKAN GADGET DAN TATA LETAK .................................................... 7

5. Cara Pengaturan Postingan ....................................................................................... 8

6. Cara Merubah Skin/Template Dalam Blogspot .......................................................... 9

SEO (Search Engine Optimation) ......................................................................................... 11

1. Seputar Seo ............................................................................................................ 11

2. TUJUAN SEO ........................................................................................................... 11

3. BEBERAPA TEKNIK SEO ............................................................................................ 11

TAMBAHAN ........................................................................................................................ 16

1. Cara Membuat Related Post ................................................................................... 16

2. Cara Menyisipkan Widget Flash Analog ................................................................... 18

3. Cara Membuat Slide Box Di blogger/blogspot ......................................................... 19

4. Cara Membuat Slide Box Di Blogspot bagian 2 ........................................................ 21

5. Cara Membuat Page Navigasi 123 di Blogspot ......................................................... 22

6. Membuat Halaman Blog Seperti Halaman Buku ...................................................... 25

7. Cara Membuat Search Form.................................................................................... 26

8. Cara Mengganti Coursors Mouse di blogspot .......................................................... 28

9. Cara Menyisipkan Tombol PDF Creator di Blogspot ................................................. 28

10. Cara Mengganti Komen Di Blogspot Dengan IntenseDebate ................................ 29

11. Cara Menyisipkan Button Sharing Widget............................................................ 30

12. Float Social Bookmarks Di Blogspot ..................................................................... 32

13. Free Template Blogspot ...................................................................................... 33


BLOG

1. CARA MEMBUAT BLOG

Berbicara tentang blog memang tidak ada habisnya. Walaupun pada saat ini

sedang tren situs pertemanan, namun ekstensi blog tidak akan tergantikan. Blog

yang pada awal diperkenalkan sebagai buku harian Online, kini berubah menjadi

mesin multifungsi yang bukan hanya bisa di jadikan buku harian online.

Blogspot, Wordpress, Multiply dan beberapa layanan blogging lainnya masih

tetap eksis dan bahkan penggunanya semakin banyak di tengah menjamurnya situs

sejaring semacam Facebook Dan Twitter.

Langsung pada artikel ini saya akan membahas sedikit tentang cara

membuat Blog Di Blogspot. caranya mudah dan gampang sebelum memulai

membuat blog , alangkah baiknya kita mempunyai email terlebih dahulu dan

direkomdasikan pakai Gmail. cara Membuat E-mail Silahkan anda baca artikelnya

disni (http://lutfietutor.blogspot.com/2012/01/cara-membuat-akun-gmail-google-

mail.html).

Setelah mempunyai E-mail anda buka alamat www.blogger.com atau anda

bisa cari di www.google.com. setelah di buka anda akan di hadapkan dengan

tampilan seperti gambar di bawah

Blogger.com 1

Jika sudah punya email di Gmail.com sobat tinggal login dengan

menggunakan email dan sandi dan klik tombol masuk.


Setelah masuk blogger dasboard anda tinggal klik buat blog baru dan

masukan Judul Blog,Alamat Blog dan memilih Tampilan.

Tampilan Awal Membuat Blog 1

Sebelum di teruskan cek dulu alamat blognya apakah tersedia atau tidak,

jika alamatnya sudah tersedia sobat tinggal klik Tombol Buat Blog, selesai sudah

sobat membuat blog.

2. CARA POSTING DI BLOG

Blog sudah tebentuk sekarang sobat tinggal posting dan

membuat artikel di blog, untuk membuat tulisan di blog sobat

tinggal klik tombol yang bergambal pinsil

Post Blog 1

Setelah itu akan terbuka halaman untuk membuat posting di blog.


Post Blog 2

Disana ada 2 tampilan yaitu Compose dan HTML, jika sobat lebih

mengerti dengan kode HTML sebaiknya sobat menggunakan

tampilan HTML tapi jika masih awan sebaiknya menggunakan

interface Compose saja.

Cara memilih jenis hurup sobat tinggal Klik logo yang bertanda F

Post Blog 3

Untuk Selanjutnya untuk mengatur tampilan huruf mau besar atau

kecil sobat tinggal klik yang bertanda TT

Post Blog 4

Post Blog 5

B = Bold dalam artian tulisan Tebal


I = Italic artinya tulisan di post miring

U = Underline tulisannya bergaris bawah

ABC = Strikethrough artinya tulisan di coret di tengah tengah

A = Untuk member warna pada hurup/tulisan

Teks BackGround Color = Untuk member warna latar pada tulisan

Link = Untuk Memberi Link Pada Tulisan

Insert Image = Untuk menyisipkan gambar pada postingan

Insert Video = Untuk memasukan Video ke dalam blog

Insert Jump Break = Untuk memberikan readmore/penggalan

postingan

Aligment = Untuk mengatur rata teks baik rata kiri,tengah atau rata

kanan

Number List = Untuk member nomor/penomoran pada postingan

Bullet List = Untuk member Bullet pada postingan

Quote = Untuk memberi Block Note atau catatan kecil pada

psotingan

T = untuk mengahapus format dalam postingan

Spelling = Untuk Cek Grammer

Selain itu ada dalam postingan ada lagi yaitu cara

label,Jadwal,Tautan Permanen,Lokasi dan Pilihan

Post Blog 6


Label : Untuk member label pada postingan

Jadwal : Untuk Memberi Jadwal Postingan

Tautan Permanen : Untuk menyisipkan tautan permanen pada postingan

Lokasi : Untuk menyisipkan lokasi postingan

Pilihan : Untuk memberikan apakah postingan tersebut boleh di

komentar atau tidak,dll.

3. HALAMAN PADA BLOG

Cara membuat halaman Static pad blogspot caranya mudah, sobat tinggal klik laman

terus pilih Laman kosong

4. CARA MENAMBAHKAN GADGET DAN TATA LETAK

Untuk menambahkan gadget pada blogspot caranya pertama sobat klik tab tata

letak terus klik tambah gadget yang terdapat pada blog sobat.

Desgin Blog 1


Setelah itu akan muncul beberapa gadget, sobat tinggal pilih dari salah satu gadget

tersebut untuk ditampilkan dalam dalam blog sobat.

Desgin Blog 2

5. Cara Pengaturan Postingan

Untuk mengatur tampilan posting sobat tinggal klik dalam area posting

Desgin Blog 3

Setelah itu akan muncul form untuk mengatur tampilan posting


Desgin Blog 4

Jumlah Posting : Tampilan posting di halaman utam

Teks Tautan : Untuk memberikan tautan teks jika postingan di ringkas

Tanggal : Untuk mengatur format tanggal dalam tampilan postingan

Komentar : Untuk menampilkan komentar

Label : untuk menampilkan label dalam postingan

6. Cara Merubah Skin/Template Dalam Blogspot

Untuk merubah template dalam blogspot ada beberapa cara

Cara pertama sobat tinggal memilih template yang telah di sediakan oleh

blogger.com caranya sobat tinggal klik Template terus pilih template yang sesuai

dengan selera.

Desgin Blog 5


Cara kedua sobat bisa desain sendiri di blogger editor, caranya sobat tinggal klik

tombol seseuaikan, disana sobat bisa atur dari mulai lebar blog, Latar

Belakang,BackGround,Tata Letak,Warna,dan yang lainnya.

Desgin Blog 6

Cara Ketiga sobat bisa upload template hasil download dari penyedia template

blogger terus sobat copy Script nya terus masukan dalam form edit HTML lalu klik

simpan.

Desgin Blog 7


SEO (Search Engine Optimation)

1. Seputar Seo

Mungkin sobat sudah bosan dan jenuh mendengar kata SEO (Search Engine

Optimation), tapi mudah mudahan ketika membaca artikel ini sobat tidak lagi bosan tapi

malah tambah semangat untuk untuk mempelajari ilmu SEO, saya juga lagi belajar tentang

teknik SEO ini karena saya juga belum paham betul tentang mahluk yang satu ini... he he..

dulu saya pernah posting tentang Apa Arti SEO? mungkin kata katanya masih rancu dan

sukar untuk di pahami dikarenakan masih tahap belajar. he he.

Secara umum SEO Adalah cara optimasi website agar bisa ditampilkan di halaman

utama pada sebuah situs pencarian. Intinya adalah apabila seseorang mengetikkan kata

pencarian pada kotak search engine seperti di Google, Yahoo,Bing maupun MSN maka

alamat web kita bisa muncul di halaman pertama pencarian sesuai dengan kriteria kata

kunci yang dicari user tersebut. terus apa Tujuan SEO tersebut?

2. TUJUAN SEO

Tujuannya yaitu untuk mengoptimalisasi blog/web supaya menjadi nomor satu di

Search Engine (mesin pencari), jika kita mempunyai visi dan misi dalam pembuatan

web/blog maka dengan teknik ini tujuan dari suatu web/blog akan mudah di capai,

dikarenakan dengan secara otomatis pengunjung/visitor akan naik dan meningkat, dan

kepopuleran web/produk kita akan lebih cepat.

3. BEBERAPA TEKNIK SEO

Content

Konten adalah paktor utama, karena jika blog kita jarang di update pengunjung

males untuk membuka blog/web kita, dan di usahkan kontennya harus rapi dan di

sukai oleh para pembaca/visitor

Back Link

Bakclink adalah sebuah link yang neglink pada blog/web kita, backlink ini sangat

berpengaruh untuk kualitas web/blog karena akan meningkatkan ranking suatu

web/blog semakin tinggi pagerank suatu web/blog maka akan cepat mudah di

indeks dan sangat di senangi oleh search engine.

Alamat Domain

Dalam pemilihan nama domain di usahakan mengandung unsur kata kunci

(keyword) yang sesuai dengan visi misi web/blog kita.

Menambahkan Tag Title dan Meta tags

Dari beberapa teknik seo ini kita mulai dai menyisipkan meta tah diantanya Meta

tag Title, Tag description,Tag keywords,Tag robots,Tag alternate,Tag author dan

Copyright

Sitemaps sebagai peta dan daftar isi otomatis


Adalah halaman yang menampilkan peta link pada website, sitemaps memudahkan

spider dari search engine untuk menelusuri isi website dan mengupdate setiap

perubahan yang terjadi di website pada database search engine.

Natural Listing

Natural Listing adalah kita mendaftarkan website pada search engine untuk diindex

dalam database search engine tersebut agar bisa ditampilkan pada hasil pencarian

melalui search engine tersebut

1) Beberapa Cara Optimalisai Blog supaya Seo Friendly dengan Mesin Pencari

a) Optimasi Tampilan Blog

b) Optimasi Header Blog

c) Optimasi Widget Untuk Interkasi

d) Optimasi Alamat Blog Ke Google

e) Optimasi Alamat Blog Ke Yahoo

f) Optimasi Menggunakan Ping

g) Optimasi Dengan Backlink

h) Optimasi Dengan Tukaran Link

i) Optimasi Menggunakan Meta Tag

j) Optimasi Berlangganan Artikel Melalui Email

k) Optimasi Mengetahui Kebiasaan Pengunjung

l) Optimasi Blog Dengan Situs Jejaring Social

m) Optimasi Memasang Page Rank(PR)

n) Optimasi Dengan Mengisikan Label

2) Cara Optimalisasi Tampilan Blog

Cara optimasi blog dengan tampilan blog, emangnya tampilan/design blog

mempengaruhi dalam optimasi? mungkin itu yang menjadi pertanyaan sobat

blogger, tampilan blog yang bagus dan menarik adalah salah satu optimasi yang

dapat meningkatkan pengunjung ke dalam blog, tampilan ini harus sesuai dengan

tema yang akan diangkat dan dibahas dalam isi blog kita.

Banyak ragam template blogspot yang dapat sobat gunakan untuk

mempercantik tampilan blog, baik template dari blogspot itu sendiri hingga

template yang disediakn oleh pihak ketiga, jika sobat menggunakan template

bawaan blogspot tentunya template blog sobat masih standar, ada banyak sekali

template blogspot gratis yang disediakan di dunia maya ini, kalo tidak salah dulu

saya pernah posting beberapa situs penyedia template blogger secara gratis, cara

optimasi tampilan blog ini ada dua cara :

Pertama, sobat Design Template sendiri dengan menggunakan fasilitas

Blogger Design Template.

Kedua , sobat bisa download template dari situs penyedia Blogger Template


3) Cara Optimalisasi Tampilan Blog

Jika blog diibaratkan sebuah buku, maka header blog di ibaratkan dengan jilid

buku yang bisa mewakili isi dari suatu buku, begitu pula dengan Header Blog yaitu

mewakili isi dari suatu blog, tampilan header yang menarik atau setidaknya

menunjukan suatu identitas dari isi konten suatu blog akan dapat membantu

pengunjung mengenali apa isi yang dimaksud.

Sehingga setelah pengunjung melihat tampilan header akan langsung mengerti

konten yang ada di dalam blog sobat, untuk membuat tampilan header pada blog

memang perlu sedikit keahlian dalam bidang desain Grafis, seperti Adobe

Photoshop , Corel Draw, Gimp dan yang lainnnya.

Untuk mengganti atau menambahkan Header pada blogspot caranya sangat

mudah, jika sobat bermaksud mengganti header blog sobat silahkan sobat terus

baca Tutorial blog pada artikel ini. langkah awal yang harus sobat persiapkan adalah

sebuah gambar untuk header, dan ingat gambar tersebut harus cocok dengan

isi/konten blog sobat, setelah gambar siap di upload langkah selanjutnya sobat ikuti

langkah langkah di bwah ini.

Login ke blogger

Masuk ke area design/tata letak blog

Terus sobat tambahakan (jika belum ada) header, atau klik edit pada Gadget

Header

Langkah selanjutnya sobat klik Browse untuk mencari file header yang sudah

sobat buat, atau sobat bisa masukan alamat gambar jika sobat sudah mengupload

gambar header tersebut ke internet.

Desgin Blog 8

Sebelum di save sobat atur dulu tampilan header nya disana ada beberap pilihan


Behind Title and Description

Instead of Title and Description

Have Description placed after the image

Sharink to fit

Langkah terakhir (jika sudah selesai) sobat klik tombol save dan lihat hasilnya

4) Cara Optimalisasi Widget Untuk Interaksi

Cara optimalisasi blog lewat widget untuk interaksi dengan pengunjung,

salah satu hal yang menarik dan dapat dijadikan optimalisasi blogspot adalah

adanya bermacam macam widget yang dapat dipasang ke dalam sidebar blog.

Widget-widget tersebut bukan hanya sebagai pemanis di dalam blog, tetapi dapat

pula dijadikan sebagai optimalisasi dan interaksi antara pengunjung dengan admin

atau pemilik suatu blog/website.

Jika sobat selalu berinteraksi dengan pengunjung maka sobat akan mengerti dan

paham tentang apa yang di butuhkan oleh pengunjung, ada bermacam macam

widget blog untuk digunakan interaksi antara pemilik blog dengan pengunjung,

diantanya :

Pemasangan Kotak Komentar

Pemasangan YM (Yahoo Masangger)

Pemasangan Buku Tamu

Pemasangan Chat Live

Pemasangan Forum

Pemasangan Social Media Milik Admin blog

5) Cara Optimalisasi Blog dengan Google

Untuk Optimaliasi ini sama dengan submit blog ke webmaster milik google.com

Cara Submit Ke Google Webmaster. menurut para ahli Seo cara ini mungkin

sering di lakukan dan harus, karena kebanyakan orang mencari sesuatu di dunia

maya atau internet bisanya menggunakan jasa search engine google. jadi sebaiiknya

jika blog rekan rekan ingin di index dalam mesin pencari google sebaiknya sobat

ikuti cara ini.

Sebelum ke TKP alangkah baiknya kita mengetahui dahulu apa Itu Google

Webmaster?. Google Webmaster adalah alat untuk para webmaster yang berguna

untuk memeriksa status pengindexan dan visibilitas pengoptimalan web di mesin

pencari google, atau bisa juga di katakan salah satu teknik Seo, oke mungkin itu

sedikit gambaran tentang google webmaster. Silahkan sobat kunjungi alamatnya di

www.google.com/webmasters/

6) Cara Optimalisasi dengan Backlink

Sebelum menganal lebih jauh tentang backLink sebaiknya kita mengetahui

apa itu BackLink? backliknk atau blogwalking adalah suatu optimasi blog yang sering

dugunakan, sobat dapat berkunjung dari blog satu ke blog lainnya dengan

memberikan komentar ke dalam blog yang sobat kunjungi. Tentu saja dengan


meninggalkan suatu jejak atau link blog milik sobat agar blog sobat yang kunjungi

dapat kembali mengunjungi blog sobat.

Sobat dapat mencari blog-blog yang sejenis dengan konten yang ada di dalm

blog yang sobat buat, sobat dapat memanfaatkan Google (search engine) untuk

melakukan pencarian, selain itu sobat juga dapat mengunjungi layanan Direktory

blog, misalkan Blog Catalog, Technorati, Topofblogs, Blogtopsite, dan direktori blog

yang lainnya.

Ada beberapa hal yang harus sobat perhatikan dalam meninggalkan komentar yaitu

:

Dalam memberikan komentar gunakanlah bahasa yang sesuai dengan

bahasan isi/konten blog.

Kunjungi Blog yang mempunyai konten sama

Jangan melakukan Spaming

Berikan kalimat referensi saja jangan kalimat kalimat promosi

Yang penting sertakan Link URL artikel sobat yang berhubungan dengan isi

artikel yang sobat kunjungi.

7) Cara Optimalisasi dengan Ping Services

Sebelumnya sobat mungkin bertanya apa itu ping? Ping adalah sebuah tools

atau alat yang dapat sobat gunakan mempromosikan blog ke banyak service yang

ada di dunia internet. Jika ping di analogikan sebagai speker pengumuman di

keluarahan, maka setiap RT dapat mendengar pengumumam yang dilakukan oleh

speaker di kelurahan, jadi jika di dalam dunia blog pengumuman dapat diartikan

adalah konten artikel yang ada di dalam blog, dan setiap RT diartikan sebagai web

services yang menerima pengumuman.

Sobat sudah mengertikan dengan maksud kata kata diatas? kesimpulannya

ping services adalah sebuah tools yang dapat digunakan untuk mempromosikan

sebuah konten web/blog di dalam dunia internet. banyak sekali tools yang dapat

digunakan untuk melakukan ping diantaranya :

Google Ping

Ping O Matic

Pingates

Pingoat

Dan Masih banyak lagi..

Untuk menggunakan tools ping yang ada di internet caranya mudah sekali

pertama sobat kunjungi situs penyedia layanan ping misalkan Ping O Matic, setelah

itu sobat diminta untuk memasukan Nama Blog, Alamat (URL) Blog, RSS URL.

misalkan sobat ingin ping blog sobat menggunakan Ping O Matic sobat tinggal

masukan apa yang harus diasukan dalam form isian. Setelah semuanya di isi sobat

klik tombol Send Pings


TAMBAHAN

1. Cara Membuat Related Post

Cara membuat related post di blogger, namun pada kesempatan ini saya

akan menulis tentang related post dengan gambar, untuk membuat related post

dengan gambar seperti di bawah caranya hampir sama seperti pada postingan

yang terdahulu, namun ada sedikit penambahan script.

Desgin Blog 9

Oke sekarang kita langsung saja, langkah pertama untuk membuat related

post dengan thumbail/gambar yaitu :

Sobat Login ke akun Blogger

Terus Sobat masuk ke area Design/Rancangan Blog

Langkah Selanjutnya Klik Tab Edit HTML

Terus jangan lupa sobat centang Expand Widget Templates

Terus sobat cari tag </head>, setelah ketemu tag </head> sobat copy kode

di bawah ini


Setelah itu sobat cari tag/kode <div class='post-footer-line post-

footer-line-1'> atau yang menyerupai atau sobat juga bisa meletakannya di

bawah tag <data:post.body/>, silahkan yang mana saja boleh yang penting

bisa dipasang, setelah itu sobat copy kode di bawah ini dan letakan di

bawah kode <data:post.body/> atau kode <div class='post-footer-line post-

footer-line-1'>.

<div class='rthumbail'>

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>


3. Cara Membuat Slide Box Di blogger/blogspot

Gadget 2

Slide box disini hampir mirip dengan related post namun disini sobat harus

manual memasukan link (url) dan gambarnya. sebelum ke cara membuat slide

box sebaiknya sobat lihat dulu contonya di gambar atau sobat bisa lihat di blog

ini, jika sobat tertarik dengan gadget seperti itu silahkan sobat di coba pada blog

sobat.

Langkah pertama untuk membuat slide box yaitu :

o Sobat login ke blogger dengan akun masing masing.

o Setelah itu sobat langsung menuju ke tab Design/Rancangan blog

o Langkah selanjutnya sobat masuk ke area edit HTML terus centang kotak

Expand Widget

o Setelah itu sobat cari kode/tag <b:skin>, setelah ketemu sobat copy kode di

bawah ini dan letakan di atas kode <b:skin>

CSS Unutuk Slide Box <link

href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css'

media='screen' rel='stylesheet' type='text/css'/>

Jangan dulu di save langkah selanjutnya sobat cari lagi kode/tag </body>, terus

sobat masukan kode JavaScript di bawah ini di atas kode/tag </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'

type='text/javascript'/>

<script>//<![CDATA[

$(function() {

/**

* the list of posts

*/

var $list = $('#rp_list ul');

/**

* number of related posts

*/

var elems_cnt = $list.children().length;


/**

* show the first set of posts.

* 200 is the initial left margin for the list elements

*/

load(200);

function load(initial){

$list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');

var loaded = 0;

//show 5 random posts from all the ones in the list.

//Make sure not to repeat

while(loaded < 5){

var r = Math.floor(Math.random()*elems_cnt);

var $elem = $list.find('li:nth-child('+ (r+1) +')');

if($elem.is(':visible'))

continue;

else

$elem.show();

++loaded;

}

//animate them

var d = 200;

$list.find('li:visible div').each(function(){

$(this).stop().animate({

'marginLeft':'-50px'

},d += 100);

});

}

/**

* hovering over the list elements makes them slide out

*/

$list.find('li:visible').live('mouseenter',function () {

$(this).find('div').stop().animate({


},200);

}).live('mouseleave',function () {

$(this).find('div').stop().animate({


},200);

});

/**

* when clicking the shuffle button,

* show 5 random posts

*/

$('#rp_shuffle').unbind('click')

.bind('click',shuffle)

.stop()

.animate({'margin-left':'-18px'},700);

function shuffle(){

$list.find('li:visible div').stop().animate({

'marginLeft':'60px'

},200,function(){

load(-60);


});

}

});

//]]></script>

Langkah terakhir sobat masukan kode HTML di bawah ini di atas kode/tag

</body>

<li>

<div>

<img height='72' width='72' alt='JUDUL GAMBAR' src='URL-GAMBAR'/>

<span class='rp_title'>JUDUL-POSTINGAN</span>

<span class='rp_links'>

<a href='URL-ARTIKEL' target='_blank'>Article</a>

<a href='URL-DEMO' target='_blank'>Demo</a>

</span>

</div>

</li>

Keterangan : ganti lah kode di atas dengan url milik sobat

JUDUL GAMBAR ="Judul gambar dalam artikel"

URL-GAMBAR ="Alamat (url) gambar contoh

'http://4.bp.blogspot.com/-

82zuLn1pxRQ/TrOw0D0XkeI/AAAAAAAAAMU/gsibuP0_zac/s72-

c/download-template-today.jpg' "

JUDUL-POSTINGAN : "Judul artikel milik sobat blogger"

URL-ARTIKEL ="Alamat artikel yang akan di tuju" contoh

:http://lutfietutor.blogspot.com/2012/03/cara-download-file-pdf-

dari-scribd.html

URL-DEMO ="Alamat demo jika blog sobat memiliki demo/tutorial

yang online"

4. Cara Membuat Slide Box Di Blogspot bagian 2

Oke sobat, jika sobat mau membuat slide-box di blogspot caranya mudah

banget, oke untuk mebuatnya pertama sobat harus :

Login ke Blogger,

Terus sobat masuk ke area Rancangan/Design Blog,

Setelah itu terus sobat tambahkan gadget HTML/JavaScript,

Selanjutnya sobat Copy (CTRL+C) code di bawah ini dan masukan Vaste

(CTRL+V ) ke area HTML/JavaScript,


Setelah itu klik tombol Save/Simpan dan lihat hasilnya.

SCRIPT SLIDE BOX

<script type="text/javascript" src="http://bloggertutorial.googlecode.com/files/widget-

slidebok.js"></script>

<div style="position:fixed; width:342px; overflow:hidden; bottom:20px; right:10px;

display:none;background: -webkit-gradient(linear, left top, left bottom, from(#0078a5),

to(#00adee));

background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));

background: -moz-linear-gradient(top, #000, #444);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',

endColorstr='#666666');-moz-border-radius:15px; -webkit-border-radius:15px; border-

radius:15px; border:2px solid #111111;" id="lutfietutorial">

<div style="width:320px; padding:10px; margin:0 auto; overflow:hidden;">

<a href="#" style="float:right; color:#999; padding:0 3px;

border:1px solid #CCC; text-decoration:none; font-size:9px; font-family:Verdana,

Geneva, sans-serif;" id="lutfietutorialclose">X</a>

<strong style="color:#fff;">Judul Slide Box</strong>

///Simpan apa saja yang sobat inginkan (gambar,script, link facebook atau yang

lainnya//

</div></div>

5. Cara Membuat Page Navigasi 123 di Blogspot

Langkah pertama anda login ke blogger dan klik Design, langkah selanjutnya

Klik Edit HTML dan jangan lupa anda centang Expand Widget. nah setelah itu

anda cari kode ]]></b:skin> , setelah ketemu anda anda paste kode di bawah ini

tepat di atas kode ]]></b:skin> .

Code

.showpageArea {

font-family:verdana,arial,helvetica;

color: #000;

font-size:11px;

margin:10px;

}

.showpageArea a {

color: #000;

font-weight: 700;

}

.showpageNum a {

padding: 3px 8px;

margin:0 1px;

text-decoration: none;

border:1px solid #999;


background: #ddd url(http://2.bp.blogspot.com/-

xNwmGFU6lS4/Tlwd880bSSI/AAAAAAAABgc/kh0r70Q5UMM/s000/wp1.jpg) 0 -

50px repeat-x;

}

.showpageNum a:hover {


background: #ccc url(http://2.bp.blogspot.com/-

xNwmGFU6lS4/Tlwd880bSSI/AAAAAAAABgc/kh0r70Q5UMM/s000/wp1.jpg) 0 -

25px repeat-x;

}

.showpageOf{

margin:0 8px 0 0;

}

.showpagePoint {font-size:11px;

color:#fff;

padding: 3px 8px;

margin: 1px;

font-weight: 700;


background: #444;

text-decoration: none;

}

Oke setelah itu save template blog anda dulu biar poll.. he he.. tidak di save

juga tidak apa apa. oke next anda cari kode </body> setelah ketemu oke

setelah ketemu anda copy kode di bawah dan letakan di atas kode tadi.


var pageCount=3;

var displayPageNum=5;

var upPageWord ='Sebelumnya';

var downPageWord ='Selanjutnya';

</script>


//<![CDATA[

function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new

Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var

html='';var upPageHtml='';var downPageHtml='';for(var

i=0,post;post=json.feed.entry[i];i++){var

timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);ti

mestamp=encodeURIComponent(timestamp1);var

title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCoun

t-1))){if(thisUrl.indexOf(timestamp)!=-

1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?u

pdated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var

p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-

1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-

2){if(thisNum==2){upPageHtml='<span class="showpage"><a

href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span

class="showpage"><a

href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-


1)){html+='<span

class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span

class="showpageNum"><a href="/">1</a></span>'}else{html+='<span

class="showpageNum"><a

href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPa

geHtml='<span class="showpage"> <a

href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){h

tml=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span

style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-

1)+')</span>'+html;if(thisNum<(postNum-

1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var

pageArea=document.getElementsByName("pageArea");var

blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var

p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageAre

a.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function

showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var

isLablePage=thisUrl.indexOf("/search/label/")!=-1;var

thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.le

ngth):"";thisLable=thisLable.indexOf("?")!=-

1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var

postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var

upPageHtml='';var downPageHtml='';var labelHtml='<span

class="showpageNum"><a href="/search/label/'+thisLable+'?&max-

results='+pageCount+'">';var thisUrl=home_page_url;for(var

i=0,post;post=json.feed.entry[i];i++){var

timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);ti

mestamp=encodeURIComponent(timestamp1);var

title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCoun

t-1))){if(thisUrl.indexOf(timestamp)!=-

1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/la

bel/'+thisLable+'?updated-max='+timestamp+'&max-

results='+pageCount}}itemCount++}for(var

p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-

1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-

2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPage

Html='<span class="showpage"><a

href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-

1)){html+='<span

class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a><

/span>'}else{html+='<span class="showpageNum"><a

href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPa

geHtml='<span class="showpage"> <a

href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if

(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+'

'}}html='<div class="showpageArea"><span style="COLOR: #000;"

class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-

1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var

pageArea=document.getElementsByName("pageArea");var

blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var

p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageAre


a.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var

home_page_url=location.href;var

thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-

1){if(thisUrl.indexOf("?updated-max")!=-1){var

lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?u

pdated-max"))}else{var

lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?

&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-

1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script

src="'+home_page+'feeds/posts/summary?alt=json-in-

script&callback=showpageCount&max-results=99999"

><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-

/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999"

><\/script>')}}

//]]>

</script>

Setelah selesai anda save template blog anda. dan lihat hasilnya. jika belum

ada hasil dan masih tetap seperti semula anda cari kode ini 'data:label.url'

jika setelah ketemu anda ganti code tersebut dengan kode ini 'data:label.url

+ "?&max-results=5"' terus klik save biar cepet. he he..

keterangan untuk yang berwana merah diatas yang kodenya seperti

ini Sebelumnya dan Selanjutnya silahkan anda ganti sesuai dengan selera

anda.

var pageCount=3; jumlah tampilan nomor yang di bawah kode ini akan

menampilkan cuma 3

var displayPageNum=5 sedangkan yang ini untuk menapilkan postingan

ketika di klik angka/nomor anda akan menampilkan berapa postingan,

silahkan anda sesuaikan dengan banyak postingan yang kan di tampilkan

tiap halamannya.

6. Membuat Halaman Blog Seperti Halaman Buku

Gadget 3

Untuk membuat halaman blog seperti diatas caranya mudah sekali,

langkah pertama yang harus sobat lakukan adalah :


Login ke Blogger

Setelah itu sobat masuk ke area design/rancangan blog,

Terus sobat masuk ke area Edit HTML dan jangan lupa centang expand

widget templates.

Setelah itu sobat cari tag </head>,

Setelah ketemu tag </head> sobat sisipkan kode dibawah ini diatas tag

</head>.

Code

<script type='text/javascript'>var tujuan

='http://lutfietutor.blogspot.com/'</script>

<script src='http://bloggertutorial.googlecode.com/files/jendela.js'

type='text/javascript'/>

Oke sebelum di save sobat ganti tulisan yang berwana merah

(http://lutfietutor.blogspot.com/) dengan url milik sobat.

7. Cara Membuat Search Form

Gadget 4

Untuk membuat kotak pencarian (serch form) seperti itu sangatlah

mudah dan gampang, langkah pertama untuk membuat kotak pencarian

dalam blogspot yaitu :

Sobat login ke Blogger,

Setelah itu sobat mauk ke area Design/Tata Letak Blog

Selanjutnya sobat masuk ke area Edit HTML dan jangan lupa sobat

Centang Expand Widget Templates,

Setelah itu sobat cari kode </head>,

Setelah ketemu tag </head>, sobat masukan kode CSS di bawah ini

tepat di atas tag </head>.

<style type='text/css'>

.searchform{background: -webkit-gradient(linear, left top, left bottom,

from(#000), to(#444));


filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',

endColorstr='#666666');

border-radius:20px;

-moz-border-radius:20px;

-webkit-border-radius:20px;

-webkit-box-shadow:0px 1px 0px #000;


border:1px #fff solid; display:inline-block; zoom:1; *display:inline;

border:solid 1px #555; padding:3px 5px; -webkit-border-radius:20px; -moz-

border-radius:20px; border-radius:20px; -webkit-box-shadow:0 1px 0px

rgba(0,0,0,.1); -moz-box-shadow:0 1px 0px rgba(0,0,0,.1); box-shadow:0 1px

0px rgba(0,0,0,.1)}

.searchform input{font:normal 12px Arial,Helvetica,sans-serif}

.searchfield{background:-webkit-gradient(linear,left top,left

bottom,from(#243d63),to(#1a2638)); padding:6px 6px 6px 8px;

width:200px; border:solid 1px #222; outline:none; -webkit-border-

radius:20px; -moz-border-radius:20px; border-radius:20px; -moz-box-

shadow:inset 0 1px 3px #222; -webkit-box-shadow:inset 0 1px 3px #222;

box-shadow:inset 0 1px 3px #222}

.searchbutton{color:#fff; cursor: pointer; border:solid 1px #fff; font-

size:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkit-

border-radius:20px; -moz-border-radius:20px; border-radius:20px;

background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e),

to(#7db72f));

background: -webkit-gradient(linear, left top, left bottom, from(#000),

to(#444));


filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',

endColorstr='#666666');

}

</style>

Setelah selesai terus simpan / Save template blog sobat

Keterangan Code CSS

searchform : Kode CSS untuk memberi style kotak pencarian

searchform input : Kode CSS untuk memberi style kotak input

searchbutton : Kode CSS untuk memberi style pada tombol

Silahkan sobat ganti warna serta beckgrounnya supaya selaras dengan blog

sobat. setelah itu sobat masuk ke area Design/Tata Letak Blog dan

tambahkan gadget HTML/JavaScript lalu sobat masukan kode di bawah ini

<form class="searchform" method="get"

action="http://lutfietutor.blogspot.com/search" >

<input class="searchfield" type="text" value="Search..." onfocus="if (this.value ==

'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}"

name="q" />

<input class="searchbutton" type="button" value="Search" />

</form>


8. Cara Mengganti Coursors Mouse di blogspot

Untuk mengganti coursors mouse pada halaman blogspot cukup mudah dan

gampang, langkah pertama untuk mengganti tampilan cursor ini adalah :

Sobat Login ke Blogger

Selanjutnya sobat masuk ke area Design/Rancangan Blog

Terus Sobat masuk ke Edit HTML

Jangan lupa sobat centang Expand Widget Template

Setelah itu sobat cari kode ]]></b:skin>

Setelah ketemu, sobat tambahkan kode di bawah ini dibawah kode ]]></b:skin>

Code

body, a, a:hover {cursor: url(http://1.bp.blogspot.com/-EqdSuJ1lQr4/Tsl-

wr7TSfI/AAAAAAAAAj4/hBoRlPJy8qM/s300/contoh-cursor.png), progress;

Sebelum di save sebaiknya sobat ganti dulu gambar yang akan dijadikan kursor,

yaitu dengan cara mengganti kode gambar (http://1.bp.blogspot.com/-

EqdSuJ1lQr4/Tsl-wr7TSfI/AAAAAAAAAj4/hBoRlPJy8qM/s300/contoh-cursor.png)

.

Langkah terakhir Save Template Blog sobat.

Cara lain untuk mengganti coursor mouse yaitu dengan

Cari Tag </head>

Setelah ketemu sobat tamabahkan kode di bawah ini diatas kode </head>

<style>

body, a, a:hover {cursor: url(url-gambar-coursors-mouse,png), progress;

</style>

9. Cara Menyisipkan Tombol PDF Creator di Blogspot

Sebenarnya cara menyisipkan pdf creator ini banyak sekali caranya. tapi jika sobat

ingin mudah dan sudah terlanjur masuk ke blog tutorial ini silahkan sobat lanjutkan

baca tutorial ini. langkah pertama yang harus sobat lakukan adalah :

Kunjungi situs http://www.web2pdfconvert.com/

Setelah terbuka sobat pilih PDF Button

Langkah selanjutnya sobat pilih Website and allow visitor convert my web page.

Sobat bisa memilih dengan menggunakan text atau gambar silahkan sobat pilih,

terserah mau pilih yang mana

Setelah di pilih, sobat copy code JavaScriptnya.

Langkah selanjutnya sobat login ke Blogger

Terus masuk ke area design/tata letak blog, terus masuk ke area Edit HTML

Jangan lupa sobat centang tanda Expand Widgets Templates. terus sobat cari tag

<data:post.body/>

Terus sobat Vaste (Ctrl + V) kode yang tadi sobat copy


Jika sobat mau meletakan button pdf tersebut di atas postingan maka sobat simpan

kode tersebut di atas kode <data:post.body/>

Contoh di Atas Postingan

kode JavaScript

<data:post.body/>

Di bawah Postingan

<data:post.body/>

kode JavaScript

Setelah selesai disimpan sobat klik save template dan lihat hasilnya

10. Cara Mengganti Komen Di Blogspot Dengan

IntenseDebate

Gadget 5

Untuk membuat kotak komentar seperti itu pertama sobat kunjungi situs

http://intensedebate.com/ terus sobat register/daftar jika sobat punya akun

WordPress sobat langsung saja tinggal login. langkah pertama yang harus sobat

lakukan adalah

Login ke Blogger

Terus masuk ke area Design/Rancangan Blog

Terus masuk Edit HTML

Setelah itu sobat Download Full Template

Setelah template blog sobat di download, sobat login ke akun IntenseDebate

Terus sobat klik Site dan Pilih Add Blog/Site terus masukan URL blog sobat

Gadget 6

Setelah itu sobat klik Next Step dan akan tampil seperti di bawah


Gadget 7

Terus Geser ke bawah dan upload template yang tadi sobat download, setelah itu

klik Upload. setelah upload selesai sobat copy kode yang ada pada form

Gadget 8

Terus Paste (Ctrl + V) dalam template Blog sobat, terus lihat hasilnya..

11. Cara Menyisipkan Button Sharing Widget

Caranya cukup mudah dan gampang, langkah pertama untuk menyisipkan

Tombol sharing ini sobat harus login pada blogger, setelah itu sobat kunjungi situs share

button yang beralamat di http://sharethis.com/, disana banyak beberapa pilihan

platform website diantanya :

Platform Website

Platform WordPress

Platform Blogger

Platform Drupal

Platform Jomla

Platform Typepad

Platform Thumblr

Platform Posterous

Platform NewsLetter

Sobat tinggal klik dan pilih sesuai dengan Platform yang sobat gunakan, jika sobat

menggunakan Platform Blogspot/Blogger sobat pilih Blogspot, selain itu sobat bisa

memilih style yang telah disediakan.


Style Button yang Petama

Dalam style button pertama sobat bisa mengatur backgroun apakan mau memakai

background atau tidak

Style Button yang Kedua

Dalam style button ini sobat bisa mengatur dan menambahkan social networking

yang lain misalkan Digg, Digo, OZone ,Delicios,Edmodo,Technorati Dan yang lainnya,

yang telah disediakan oleh situs sharing Widget cara menambahkan dan

menguranginya sobat tinggal klik tombol yang ada di tengan untuk panah yang

menghadap ke kiri yaitu untuk menambahkan, sedangkan arah panah yang

menghadap ke kanan untuk mngurangi, untuk panah yang mengahadap ke atas dan

ke bawah fungsinya untuk menyortir/mengurutkan, selain itu sobat bisa mengatur

besar dan kecilnya tombol, jika ingin besar otomatis sobat pilih Large, Terus

Horizontal dan Vertikal Layout untuk mengatur tampilan

Horizontal : Kesamping

Vertikal : Ke bawah

Untuk Style yang ketiga tampilannya seperti di atas, dalam style ketiga ini terdapat

Counter, dengan adanya counter kita bisa mengetahui berapa banyak yang add

website/blog kita dalam social networking tersebut, terus sobat bisa menambahkan

tombol Like Facebook dan Tombol Google Plus (+1).


Untuk style ke empat ini hampir sama dengan style ketiga namun counternya

terdapat diatas, untuk style ketiga counternya terdapat di pinggir tombol sedangkan

ke empat terdapat diatas tombol.

Oke setelah sobat memilih setyle buttonnya langkah terakhir sobat tinggal klik Get

Button yang terdapat di bawah , setelah itu akan tampil seperti di bawah dan Klik

Add Widget.

12. Float Social Bookmarks Di Blogspot

Untuk menambahkan Gadget Social bookmark ini tidak perlu repot pokonya mudah.

langkah pertama yang sobat harus lakukan adalah :

Login ke Blogger

Terus masuk ke area Design/Rancangan Blog

Setelah itu Tambahkan Gadget HTML/JavaScript

Lalu copy Script di bawah ini dan masukan ke area HTML/JavaScript

Terakhir Save Dan lihat hasilnya.

Script Social Bookmarks


http://btemplates.com/

http://www.blogcrowds.com/resources/blogger-templates/

http://blogtemplate4u.com/

http://www.premiumbloggertemplates.com/

http://www.zoomtemplate.com/

http://bloggertemplateplace.com/

http://www.mybloggerthemes.com/

Dll.. mamasih banyak lagi

Sampai disini dulu artikel yang bisa saya sharing semoga bermanfaat…

Me And Best Friend


Sekilas Tentang Saya

Salam Blogger

Nama : Muhammad Lutfi

My Blog lutfietutor.blogspot.com

My Twitter : http://twitter.com/#!/mukri

My Fb : https://www.facebook.com/sabardaniklhas

“Yakinlah Kamu Pasti Bisa”

“Harta yang paling menguntungkan ialah SABAR. Teman yang paling akrab adalah AMAL. Pengawal peribadi yang paling waspada adalah DIAM. Bahasa yang paling manis adalah SENYUM. Dan ibadah yang paling indah tentunya KHUSYUK.”

“Pelajarilah Ilmu, karena mempelajarinya karena Allah adalah khasyah, Menuntutnya adalah ibadah, mempelajarinya adalah Tasbih, mencarinya adalah Jihad, Mengajarkannya kepada orang yang tidak mengetahui adalah Shadaqah, menyerahkan kepada ahlinya adalah Taqarrub. Ilmu adalah teman dekat dalam kesendirian dan sahabat dalam kesunyian”

“Sejauh Mata Memandang, Harapan Terbentang untuk diraih, dan Jangan Lupa Sertakan

Tuhan Dalam segala rencan Hidupmu, Karena DIA yang berkenan unutk merancangkan

yang baik dalam Hidupmu”

http://lutfietutor.blogspot.com/

http://twitter.com/#!/mukri

https://www.facebook.com/sabardaniklhas