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-googlemail.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
kecil sobat tinggal klik yang bertanda TT

tampilan

huruf

Post Blog 4

Post Blog 5

B

= Bold dalam artian tulisan Tebal

mau

besar

atau

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
postingan

= Untuk memberikan readmore/penggalan

Aligment
kanan

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

Number List

= Untuk member nomor/penomoran pada postingan

Bullet List

= Untuk member Bullet pada postingan

Quote
psotingan

= Untuk memberi Block Note atau catatan kecil pada

T

= untuk mengahapus format dalam postingan

Spelling

= Untuk Cek Grammer

Selain
itu
ada
dalam
postingan
label,Jadwal,Tautan Permanen,Lokasi dan Pilihan

Post Blog 6

ada

lagi

yaitu

cara

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)
b)
c)
d)
e)
f)
g)
h)
i)
j)
k)
l)
m)
n)

Optimasi Tampilan Blog
Optimasi Header Blog
Optimasi Widget Untuk Interkasi
Optimasi Alamat Blog Ke Google
Optimasi Alamat Blog Ke Yahoo
Optimasi Menggunakan Ping
Optimasi Dengan Backlink
Optimasi Dengan Tukaran Link
Optimasi Menggunakan Meta Tag
Optimasi Berlangganan Artikel Melalui Email
Optimasi Mengetahui Kebiasaan Pengunjung
Optimasi Blog Dengan Situs Jejaring Social
Optimasi Memasang Page Rank(PR)
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 postfooter-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 postfooter-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/s72c/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-pdfdari-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/widgetslidebok.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; borderradius: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-displayPageNum1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum2){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 ('+(postNum1)+')</span>'+html;if(thisNum<(postNum1)){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+'?&maxresults='+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+'&maxresults='+pageCount}}itemCount++}for(var
p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPage
Html='<span class="showpage"><a
href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum1)){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<(postNum1)){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-inscript&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; -mozborder-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-borderradius:20px; -moz-border-radius:20px; border-radius:20px; -moz-boxshadow: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; fontsize:11px; height:28px; width:55px; text-shadow:0 1px 1px #222; -webkitborder-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/Tslwr7TSfI/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”

Tutorial blog pemula

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to Tutorial blog pemula (20)

Tutorial blog pemula