Blogspot Tutorial

cara membuat title header blog sama seperti title posting

2013-01-12T16:28:00.001+09:00

halo...
kembali lagi dengan saya riou hato :D
kali ini, saya akan menjawab salah satu pertanyaan dari pengunjung disini yang dikirimkan lewat PM Facebook. berikut isi dari pertanyaan tersebut.

gan..
cara membuat title header blog sama seperti title posting, itu gimana sich?
contohnya bisa dilihat di blog ini

http://demo-creandoproyecto1.blogspot.com/2012/12/lowongan-kerja-januari-2013-tangerang.html

okelah...
saya akan menjelaskan cara membuat title header blog sama seperti title posting.
1. login blogger
2. Template
3. edit template
4. centang expand template widget

search code ini

<h1 class='title'>
<b:include name='title'/>
</h1>

lalu ganti dengan code ini...

<b:if cond='data:blog.pageType != "item"'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
<b:else/>
        <p class='title'>
          <data:blog.pageName/>
        </p>
</b:if>

oke...
jika semuanya sudah selesai, sekarang waktunya menyimpan template anda.

download template dopind.blogspot.com

2013-01-03T19:47:00.001+09:00

halo...
kembali dengan saya riou hato :D

kali ini, saya akan berbagi template kloningan kepada kamu semua. blog yang aku jadikan korban kali ini adalah dopind. alasan saya berbagi template ini, karena banyak yang request template ini (jika yang request ada lebih dari 7 orang, akan saya kerjakan dan akan saya bagikan disini).

berikut merupakan penampakan dari template dopind.blogspot.com.

*click pada gambar diatas untuk melihat demo

Download Template dopind.blogspot.com

jika ada yang mau ditanyakan silahkan koment pada post ini atau menghubungi FACEBOOK saya :D . oh ia... yang mau request template kloningan... bisa lewat koment disini juga .... tapi, saya akan mengerjakan template tersebut jika ada 7 orang yang mau request :D.

Cara Memasang Script Anti Iframe pada Dashboard Blogger Terbaru

2012-12-28T21:41:00.002+09:00

halo...
kembali bersama saya :D mumpung hari liburan... saya sempatkan untuk mengurus blog ini...
kali ini, saya akan membahas tentang Cara Memasang Code/Script Anti IFrame Pada Dashboard Blogger Terbaru. kebanyakan tutorial yang bertebaran diinternet (28/12/2012) saat ini, yang membahas tentang Cara Memasang Code/Script Anti Iframe sudah tidak berlaku lagi. karena, dashboard blogger sendiri, menggunakan iframe, jadi... ini akan bentrok dengan code/Script anti iframe yang dipasang pada template.

oke... langsung saja. copy and paste code ini, diatas tag </head>

<b:if cond='data:blog.pageType == "item"'>
<script language='JavaScript' type='text/javascript'> if (top.location != self.location) top.location.replace(self.location); </script>
</b:if>

dengan sedikit kombinasi tag conditional, script anti iframe diatas akan hanya bekerja pada bagian item/post blog. karena itu, dashboard blogger terbaru tidak akan mengalami error... karena, dashboard blogger hanya memperlihatkan bagian index/homepage saja.

itulah cara memasang code/script anti iframe pada dashboard blogger terbaru

Download Template Borneotemplates.com Versi Pertama

2012-12-22T14:07:00.001+09:00

halo...
udah lebih dari 1 bulan, saya telantarkan blog ini, hal ini dikarenakan kesibukan di real world yang tak bisa ditinggalkan... tapi, alhamdulillah visitor masih setia datang untuk menunggu post terbaru dari saya :D

oke, kali ini saya akan men-share template yang pernah digunakan oleh borneotemplates, template ini saya share atas izin pemilik dari borneotemplates, yaitu herdiansyah hamzah.

langsung saja, ini penampakan dari template lama borneotemplates.

*click gambar diatas, untuk demo

berikut adalah fitur dari template borneo yang saya share disini...

Auto Page Navigation
Auto Readmore with gallery style
Slideshow
Menu Navigation
SEO Friendly
Facebook Like on every thumbnail
Elegant Style

Download Template Borneotemplates.com

Jangan lupa mampir lagi ya, karena... akan ada template cloningan yang akan saya share disini :D

Download Template Cemungudh Blogger Version

2012-11-24T20:10:00.003+09:00

hohoho...
hampir 2 minggu blog ini saya telantar, karena... saya banyak tugas sekolah yang tak dapat ditinggalkan. okelah... kali ini, saya akan men-share template cemungudh blogger version. template ini, pernah saya gunakan pada blog ini. alasan saya men-sharenya, karena banyak yang request ~_~ serta simple dan fast loading (kalau ditanya SEO friendly, saya ga jamin) enggak lupa... template ini support mobile :D.

berikut merupakan penampakan dari template tersebut :D

*klik gambar diatas untuk demo

Click Here To Download Cemungudh Blogger Template

Setelah anda menginstall template ini pada blog anda, anda diharuskan mengaktifkan custom mobile template. oh ia, kalau mau beli versi Wordpressnya silakan klik disini .

bagi anda yang mengira bahwa template yang saya share disini adalah ~~colongan~~ mengambil dari sini. anda salah besar, template yang saya share disini, adalah murni karya saya yang diadopsi dari cemungudh WP Theme. sedangkan disini, dia meng-clone template lama platorial dan men-sharenya tanpa footer link menuju blog ini. dan juga, template yang saya share disini, lebih dulu saya gunakan, sebelum disini men-share template ini.

karena GBT men-share template platorial (mirip cemungudh) tanpa izin dan tanpa mempertahankan footer link, maka template GBT telah saya share disini dan juga tanpa mempertahankan footer link :)) S3ngg0l Cl0n3

Perbedaan Selector ID dan Class pada CSS

2012-11-12T20:27:00.003+09:00

halo..
udah seminggu enggak update post nich ~_~
oke, kali ini saya akan memberikan penjelasan tentang Perbedaan ID dan Class pada CSS. post ini terpirasi ketika saya sedang mencoba mengoprek template cemungudh (the original platorial old theme) agar valid HTML5. ternyata banyak multiple selector ID CSS ~_~ yang membuat templatenya enggak valid HTML5.

bagi para pemula, mungkin mengira tidak ada perbedaan yang jauh antara ID dan Class dalam pemakainnya. tapi sebenarnya, terdapat perbedaan yang cukup jauh antara ID dan Class.

dalam penggunaanya, ID (disimbolkan => #) hanya bisa dipanggil/dipakai 1 kali dalam 1 halaman. sedangkan Class {disimbolkan => . (baca:dot)} bisa dipanggil/dipakai lebih dari 1 kali (beberapa kali) dalam 1 halaman.

Contoh Peng-aplikasian:
Selector ID :

#main-wrapper {width:600px}

hanya bisa dipanggil 1 kali dalam 1 halaman

<div id='main-wrapper'/>

Selector Class :

.kotak-item {background: #000;color:#fff;text-align:center;font-size:40px;}

Bisa dipanggil beberapa kali dalam 1 halaman

<div class='kotak-item'>Belajar HTML</div>
<div class='kotak-item'>Bersama Platorial</div>

Itulah Perbedaan Selector ID dan Class Pada CSS, jika ada yang mau bertanya, kritik dan serta saran. silahkan tinggalkan komentar dibawah post ini :-bd.

Download Template GalleryBloggerTemplates.com

2012-11-06T20:51:00.001+09:00

halo...
ketemu lagi dengan saya, kali ini... saya akan mengshare template kloningan yang keempat pada blog ini. sebenarnya, saya enggak mau share template ini. tapi, karena ada sesuatu hal yang memaksa saya untuk menshare template ini.

mungkin, banyak yang bertanya2 kepada saya... kenapa harus GalleryBloggerTemplates yang diclone, kenapa tidak yang lain..? salah satu faktor yang menyebabkan saya harus meng-clone dan share template GBT, karena... templatenya keren, simple, banyak yang request :D dan juga, saya menerapkan sistem S3ngg0l Cl0n3.

Demo GalleryBloggerTemplates.com

Download Template GalleryBloggerTemplates.com

Setelah anda mendownload template, anda diharuskan untuk mendaftarkan blog anda pada www.intensedebate.com .

Jika ada yang mau memberikan protes/kritik serta saran, bisa tinggalkan koment dibawah atau bisa menghubungi FACEBOOK saya.

Struktur Dasar Template Blogger

2012-11-01T12:43:00.001+09:00

hihihihi...
mumpung dalam keadaan free, saya meluangkan waktu untuk menulis post ini. okelah... ada yang tanya lewat FB nich, lagi2... orangnya ga mau disebut namanya =)), seperti ini nich.. pertanyaannya :-bd

Gan,
saya mau belajar cara membuat template nich, kira2... apa saja yang harus ada pada template blogger?

sebenarnya, struktur dasar template blogger hampir sama dengan struktur dasar HTML. hanya saja, ada beberapa tag khusus yang harus dimasukkan. oke... langsung saja...

<?xml version="1.0" encoding="UTF-8" ?>

    <!DOCTYPE html>

    <html >

    <head>

    <b:include data='blog' name='all-head-content'/>

    <title><data:blog.title/></title>

    <b:skin><![CDATA[
    /* Masukkan CSSmu disini */

    ]]></b:skin>

    </head>

    <body>

    <b:section class='header' id='header' maxwidgets='1' showaddelemenet='no'>

    <b:widget id='Header1' locked='true' title='titl blog (Header)' type='Header'/>

    </b:section>

    <b:section class='main' id='main'>

    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

    </b:section>

    </body>

    </html>

simple banget kan?
sebenarnya sich, enggak ada yang sulit...

hehehe... jika ada yang salah dalam penulisan post ini, silahkan tinggalkan komentar dibawah ya :D
itulah Struktur Dasar Template Blogger

Struktur dasar HTML

2012-10-28T10:38:00.003+09:00

halo, ketemu lagi dengan saya :D oke, kali ini saya akan mencoba menjawab pertanyaan dari salah seorang teman blogger yang namanya enggak mau disebut (kok mulai dulu, yang tanya selalu enggak mau disebut namanya ya?).

eh kk riou
aku mau tanya dong, dalam suatu halaman HTML...itu strukturnya seperti apa sich? kok saya bingung...

oge, struktur dasar HTML adalah susunan yang ada di dalam suatu halaman HTML yang wajib ada didalamnya. jikalau struktur ini tidak ada, maka halaman HTML akan tak dapat bekerja dengan baik.

berikut adalah struktur dasar HTML.

<html>
<head>
<title>judul halaman<title/>
</head>
<body>
tubuh halaman HTML
</body>
</html>

Tag HTML
tag HTML terdiri dari 2 bagian, opening/start tag dan end/closing tag.
<html> = opening tag
</html> = closing tag

Keterangan Lain
1. didalam tag <head/> anda bisa menambahkan meta tag, css, dan JS yang berfungsi mengatur tampilan (warna, ukuran font, dan lainnya) pada halaman HTML.
2. didalam tag <body/> anda bisa menambahkan tag apa saja yang berfungsi untuk mngatur susunan halaman HTML (mulai dari header, post/content, sidebar, footer dan lainnya). anda juga bisa menambahkan css dan JS layaknya tag <head/> pada tag <body/>

itulah Struktur Dasar HTML, jika ada yang ingin memberikan kritik/saran serta masukan... silakan koment dibawah ya :D

List Tag Code Blogger Template Classic dan Modern

2012-10-14T15:20:00.000+09:00

Halo, ketemu lagi dengan saya di platorial :D udah hampir 2 minggu blog ini saya telantarkan =)) okelah... kali ini, saya akan membagikan list tag Code Template Classic dan Modern. daftar berikut, pasti akan sangat berguna bagi kalian yang suka ngoprek / modif template :-bd

Tag Code Classic Template	Tag Code Modern Template
<BlogDateHeader>	<b:if cond='data:post.dateHeader'>
</BlogDateHeader>	</b:if>
<$BlogPageTitle$>	<data:blog.pageTitle/>
<$BlogMetaData$>	<b:include data='blog' name='all-head-content'/>
<style type="text/css">	<b:skin><![CDATA[
</style>	]]></b:skin>
<$BlogURL$>	<data:blog.homepageUrl/>
<$BlogDescription$>	<b:section class='posts' id='posts' showaddelement='yes' growth='vertical'>
<Blogger>	<b:widget id='PostWidget' locked='false' title='Posts' type='Blog'> <b:includable id='main'> <b:loop values='data:posts' var='post'>
</Blogger>	</b:loop> </b:includable> </b:widget> </b:section>
<$BlogItemNumber$>	<data:post.id/>
<$BlogDateHeaderDate$>	<data:post.dateHeader/>
<$BlogItemPermalinkUrl$>	<data:post.url/>
<BlogItemTitle>	<b:if cond='data:post.title'>
</BlogItemTitle>	</b:if>
<$BlogItemTitle$>	<data:post.title/>
<$BlogItemBody$>	<data:post.body/>
<$BlogItemAuthorURL$>	<data:blog.homepageUrl/>
<$BlogItemAuthor$>	<data:post.author/>
<$BlogItemDateTime$>	<data:post.timestamp/>
<BlogItemCommentsEnabled>	<b:if cond='data:post.allowComments'>
</BlogItemCommentsEnabled>	</b:if>
<$BlogItemCommentCount$>	<data:post.numComments/>
<$BlogItemControl$>	<span class='control'> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' title='Email Post'> <span class='email-post-icon'> </span> </a> </span> </b:if> <b:include data='post' name='postQuickEdit'/> </span>
<$BlogEncoding$>	<data:blog.encoding/>
<$BlogTitle$>	<data:blog.title/>
<$BlogItemAuthorNickname$>	<data:post.author/>
<$BlogItemUrl$>	<data:post.link/>
<ItemPage>	<b:if cond='data:blog.pageType == "item"'>
</ItemPage>	</b:if>
<MainOrArchivePage>	<b:if cond='data:blog.pageType != "item"'>
</MainOrArchivePage>	</b:if>
<MainPage>	<b:if cond='data:blog.pageType == "main"'>
</MainPage>	</b:if>
<ArchivePage>	<b:if cond='data:blog.pageType == "archive"'>
</ArchivePage>	</b:if>
<$BlogItemCreate$>	<a expr:href='data:post.addCommentUrl'>Post a Comment</a>
<BlogItemComments>	<b:loop values='data:post.comments' var='comment'>
</BlogItemComments>	</b:loop>
<$BlogCommentNumber$>	<data:comment.id/>
<$BlogCommentDateTime$>	<data:comment.timestamp/>
<$BlogCommentAuthor$>	<address style="display:inline;font-style:normal;" class="author vcard"> <b:if cond='data:comment.authorUrl != ""'> <a class="url fn" expr:href='data:comment.authorUrl'><data:comment.author/></a> <b:else/> <span class="fn"><data:comment.author/></span> </b:if> </address>
<$BlogCommentBody$>	<data:comment.body/>
<$BlogCommentDeleteIcon$>	<b:include data='comment' name='commentDeleteIcon'/>
<$BlogCommentPermalinkURL$>	<data:comment.id/>

Jika pada tabel diatas, kalian tidak menemukan tag yang anda inginkan. silahkan komen dibawah ya :-bd

Itulah Kumpulan Tag Code Template Classic dan Modern.

Download Template Mas Sugeng

2012-10-05T14:30:00.002+09:00

update lagi nich, berkat izin dari mas sugeng, saya memberanikan diri untuk meng-clone template blog beliau dan men-sharenya disini. ini adalah template kloningan ketiga yang share disini. pada template ini, sudah saya sertakan custom mobile template.

dari segi fitur, sudah hampir semuanya mirip dengan blog mas sugeng. hanya saja, saya tidak menghapus code <b:include data='blog' name='all-head-content'/>, ini menyebabkan, template ini tidak valid HTML5 (homepage). kalaupun anda menghapusnya, anda harus memberikan tag pengganti.

Dekstop Template

Mobile Template

Click pada Gambar diatas untuk demo

Download Template Mas Sugeng

Setelah anda menginstall Template, anda diharuskan untuk mengaktifkan fitur custom mobile template. tutorialnya bisa dilihat di sini.

Jika ada kesulitan dalam menginstall Template atau ada kesalahan/error dalam template silahkan berkomentar atau hubungi saya lewat FACEBOOK. saya akan membantu sebisanya jika saya sedang tidak sibuk.

Cara Custom CSS Berdasarkan Label

2012-09-11T16:27:00.000+09:00

atas request dari sobat blogger yang tak mau disebutkan namanya, dia bertanya lewat email yang isinya sebagai berikut:

kk rito
caranya membuat warna navbar yang ada dihalaman posting, berbeda warna setiap labelnya itu gimana?
saya penasaran banget, kan di blog platorial, postingan yang masuk label "template" maka warna navbarnya merah, kalau masuk label "blogspot" warna navbarnya jadi biru...
ajarin dong... eh jawabannya diposting aja diblognya kk, tapi... jangan bawa2 namaku yaw :D hihihihi

okelah... gpp, sebenarnya ga usah malu =)) yang namanya orang belajar itu, ga usah malu bertanya :-bd
oke... langsung saja,

memang benar, jika kita perhatikan postingan diblog ini dengan label "template", maka navbar blog ini akan berubah jadi warna merah :-bd dan juga, postingan dengan label "blogspot", maka navbar blog ini akan berubah jadi biru.

caranya tinggal copy and paste code dibawah ini dibawah tag <data:post.body/> pada templatemu (jika anda menggunakan read more, pastekan dibawah <data:post.body/> yang kedua)

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "LabelMU"'>
<style type='text/css'>
CSSmu
</style>
</b:if>
</b:loop>

keterangan :
LabelMU : ganti dengan nama label yang kamu inginkan
CSSmu : beri CSSmu disini :-bd

nich... saya kasih contoh pengaplikasiannya pada template :-bd

<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Template"'>
<style type='text/css'>
#cat{background:#ff3900; }
</style>
</b:if>
</b:loop>

Sekian dari saya, jika ada yang salah... silahkan komen ya :-bd

Download Template abdieblogs.blogspot.com

2012-09-01T19:29:00.000+09:00

hampir 2 minggu blog ini aku telantarkan =)). okelah, kali ini... saya akan berbagi template mirip abdieblogs. pasti banyak yang bertanya-tanya, kenapa harus abdieblogs? menurut saya... templatenya simple dan tentunya berdasarkan prinsip S3ngg0l Cl0n3 :D

Name	AbdieBlogs Clone Template
Author	Brian Gardner
URL Author	www.briangardner.com
Description	Abdieblogs is Free Clone Premium Blogger Templates with 2 Column, SEO Friendly, Auto Readmore, Social Bookmark, White, Fresh, Premium, Right Sidebar, Top Navigation Bar,3 Column on Footer

Menampilkan dan Menyembunyikan Widget di Halaman Tertentu menggunakan Tag Conditional Blogger

2012-08-19T00:00:00.000+09:00

pada tanggal 1 Syawal ini, saya akan memposting tentang bagaimana cara memunculkan atau menyembunyikan Widget pada halaman tertentu. mungkin sudah banyak yang tau tentang hal ini, tapi ... ada baiknya diposting kembali xD.

kalau dipikir-pikir halaman ini dan ini, memiliki perbedaan yang cukup mencolok. Ya, halaman ini tidak memiliki sidebar, sedangkan ini memiliki sidebar.

berikut adalah list code yang digunakan untuk mengontrol widget.

1. Menampilkan widget di homepage / halaman awal.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
....................................................
</b:if>

2. Menampilkan widget diseluruh halaman kecuali homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
....................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

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

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != "archive"'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

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

6. Menampilkan widget di semua halaman, kecuali halaman posting.

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

7. Menampilkan widget hanya di URL tertentu saja.

<b:if cond='data:blog.pageType == "URL-tertentu"'>
......................................................
</b:if>

8. Menampilkan widget di semua halaman, selain di URL tertentu.

<b:if cond='data:blog.pageType != "URL-tertentu"'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

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

10. Menampilkan widget di semua halaman kecuali halaman staticpages.

<b:if cond='data:blog.pageType != "static_page"'>
......................................................
</b:if>

11. Menampilkan widget di Mobile Template saja.

<b:if cond='data:blog.isMobile'>
.................................................
</b:if>

11. Menampilkan widget di halaman error 404

<b:if cond='data:blog.pageType != "error_page"'>
.................................................
</b:if>

dari kode-kode diatas, dapat kita aplikasi dalam code suatu widget. pertama2, anda harus masuk ke edit HTML template blogger, dan centang Expand Widget. oke, kita ambil salah satu contoh widget saja.

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

diatas merupakan code default widget dari HTML1 . jika kalian ingin menampilkan widget HTML1 diatas hanya pada homepage saja, maka code widgetnya akan menjadi seperti ini.

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>



<b:if cond='data:title != ""'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div></b:if>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Custom Mobile Template

2012-08-16T09:26:00.000+09:00

banyak blogger yang mengutamakan tampilan blognya agar terlihat nyaman bagi para visitor. salah satunya dengan membuat Template Responsive yang bisa diakses dengan tampilan rapi untuk resolusi layar yang berubah-ubah (ex. HP, Ipad, Android, BB, Tablet). jadi, hari ini saya akan menerangkan cara custom template untuk mobile devices.

jika kamu punya mobile template dan ingin menampilkannya di mobile browser, click "template" tab di dashboardmu, lalu click icon gear dibawah mobile preview.

lalu pilih "custom/tersesuai" pada bagian "pilih template seluler"

sebelum menyimpan template, ada baiknya melihat hasilnya dengan click "preview/pratinjau" , jika sudah yakin, silahkan tekan tombol "save/simpan".

jika kamu memiliki widget pada dekstop templatemu, kamu dapat mengontrol tampil atau tidaknya widget tersebut di mobile template. kamu bisa menggunakan atribut mobile di <b:widget/> dengan tag "default" , "yes" , "no" dan "only" .

sebagai contoh, code widget dibawah ini, tidak akan tampil di mobile template karena menggunakan tag "no".

<b:widget id="HTML1" locked="false" mobile="no" title="" type="HTML"/>

widget dibawah ini, akan tampil di mobile template karena menggunakan tag "yes".

<b:widget id="HTML1" locked="false" mobile="yes" title="" type="HTML"/>

widget dibawah ini, hanya akan tampil di mobile template karena menggunakan tag "only".

<b:widget id="HTML1" locked="false" mobile="only" title="" type="HTML"/>

secara default, widget dibawah ini akan otomatis tampil di mobile template meskipun belum kita kasih tag "yes".

Header
Blog
Profile
PageList
AdSense
Attribution

kamu juga bisa memberikan CSS antara dekstop and mobile template. pertama-tama, kamu harus memastikan tag <body> templatemu sama seperti dibawah ini.

<body expr:class='"loading" + data:blog.mobileClass'>

lalu, kamu bisa berikan CSS antara dekstop dan mobile template. seperti contoh dibawah ini:

/* For desktop view */
#main-wrapper {margin-left: 10px;overflow: hidden;width: 468px;padding-left: 23px;}
/* For mobile view */
.mobile #main-wrapper {margin:0 auto !important; width:auto !important; max-width:540px !important; padding-left: 5px; padding-right: 5px;}

ya, cukup berikan .mobile didepan id dan class CSS untuk mobile, dan tak usah .mobile didepan id dan class CSS untuk dekstop.

That's All Tutorial About How To Custom Blogger Mobile Template

Blogspot SEO Meta Tags

2012-08-13T15:41:00.002+09:00

setelah lama tidak update blog ini, kali ini saya akan post tentang Meta Tag.

Meta Tag adalah tag dalam bahasa HTML/XHTML yang berfungsi untuk menyatakan deskripsi/keyword suatu halaman/page yang diletakkan antara <head> ... </head>. Meta Tag ini sangat berpengaruh terhadap SEO suatu halaman blog.

Pada post kali ini, saya akan memberikan contoh Meta Tag Otomatis yang dapat anda aplikasikan pada template blog anda. Apa itu Meta Tag Otomatis? Gunanya untuk memberikan Deskripsi/keterangan dan Keyword untuk semua posting diblog secara otomatis.

Berikut merupakan Contoh SEO Meta Tag Otomatis.

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title>Home Title</title>
<meta content='Deskripsi' name='description'/>
<meta content='Keyword Anda' name='keywords'/>
<meta content='Subjeksi' name='subject'/>
<meta content='Abstraksi' name='Abstract'/>
<b:else/><b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + " Keyword Anda"' name='keywords'/>
<meta expr:content='data:blog.pageName' name='subject'/>
<meta expr:content='data:blog.pageName' name='Abstract'/>
<b:else/>
<title><data:blog.pageName/></title>
<meta expr:content='data:blog.pageName' name='description'/>
<meta expr:content='data:blog.pageName + " keyword Anda"' name='keywords'/>
<meta expr:content='data:blog.pageName' name='subject'/>
<meta expr:content='data:blog.pageName' name='Abstract'/>
</b:if>
</b:if>
<meta content='XXX' name='copyright'/>
<meta content='XXX' name='author'/>
<meta content='UTF-8' name='Charset'/>
<meta content='Global' name='Distribution'/>
<meta content='General' name='Rating'/>
<meta content='INDEX FOLLOW' name='Robots'/>
<meta content='1 days' name='revisit'/>
<meta content='ID' name='language'/>
<meta content='ID' name='geo.country'/>
<meta content='Indonesian' name='geo.placename'/>
<meta content='global' name='distribution'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='global' name='target'/>
<meta content='index,follow,snipet' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>

Keterangan.

Keyword Anda : isi dengan keyword blog anda.
Deskripsi : Deskripsikan blog anda secara singkat.
Abstraksi : Hampir sama seperti Deskripsi.
Subjeksi : url blog anda.
Home Title : Judul halaman utama pada blog anda.

Jika merasa ada yang salah pada Meta Tag diatas, silahkan berikan komentar dibawah ini. Karena, Kita sama-sama belajar.

Itulah Tutorial Tentang Meta Tag SEO.

Cara membuat Sidebar Auto Slider/Scroll (Sticky Widget)

2012-07-07T17:45:00.002+09:00

pada artikelku kali, saya akan menjawab pertanyaan dari seseorang yang tidak mau disebut namanya. pertanyaan yang dia ajukan kepada saya adalah.

"bagaimana cara membuat Sidebar Auto Slider/Scroll seperti di blog ini?"

kebetulan juga, blog tersebut, adalah blog milik saya yang sudah lama tidak diurus. jadi, cukup mudah bagi saya untuk menjawab pertanyaan orang yang tidak mau disebutkan namanya itu.

Sebelum menyampaikan step-by-step cara membuat Sidebar Auto Slider/Scroll, saya akan menjelaskan dulu, apa itu Sidebar Auto Slider/Scroll.

Sidebar Auto Slider/Scroll fungsinya adalah, memungkinkan Sidebar bergerak keatas atau kebawah mengikuti bergesernya Scroll Browser, sehingga, sidebar akan tetap terlihat dikanan atau dikiri postingan meskipun Scroll Browser telah di geser keatas maupun kebawah.

silahkan lihat beberapa gambar dibawah ini, untuk lebih memahami apa yang dimasud Sidebar Auto Slider/Scroll.

Mau dengan Sidebar yang bisa geser-geser seperti diatas ? silahkan ikuti petunjuk dibawah ini.

login ke blogger
click tab "rancangan" (kalau dalam bahasa indonesia)
terus click sub tab "Edit HTML"
Sebelum edit template kamu, ada baiknya untuk membackup template kamu
Copy code dibawah ini dan paste code tersebut tepat di " dibawah ]]></b:skin> "
<script type='text/javascript'> $(function(){var offset=$("#sidebar-wrapper").offset();var topPadding=35;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#sidebar-wrapper").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#sidebar-wrapper").stop().animate({marginTop:0})}})}); </script>

Ganti #sidebar-wrapper pada script diatas dengan tag id sidebarmu.

contoh:

#sidebar-wrapper

jika tag id sidebarmu seperti ini:

maka, script Auto Slider/Scrollnya berubah menjadi.

<script type='text/javascript'> $(function(){var offset=$("#right-sidebar").offset();var topPadding=35;$(window).scroll(function(){if($(window).scrollTop()>offset.top){$("#right-sidebar").stop().animate({marginTop:$(window).scrollTop()-offset.top+topPadding})}else{$("#right-sidebar").stop().animate({marginTop:0})}})}); </script>

Itulah Tutorial Membuat Sidebar Auto Slider/Scroll

Cara, Fungsi dan Kumpulan Web Penyedia Layanan Ping Blog

2012-07-01T15:09:00.000+09:00

Ada yang tanya sama aku melalui E-mail tentang Bagaimana cara nge-ping blog, fungsi ping blog, dan kumpulan web penyedia layanan ping Blog.

Fungsi Ping adalah untuk memberitahu Search Engine bahwa blog kita, mempunyai postingan/update terbaru. atau, juga berfungsi mempermudah Search Engine mengetahui keberadaan blog kita.

berikut merupakan beberapa daftar kumpulan web/situs penyedia layanan ping gratis.

Untuk cara ngeping Blog, sebenarnya sich... gampang banget kok. cukup mengisi.

Name Blog
RSS Feed Blog
URL Blog
dan menandai Search Engine yang mau di ping.

Untuk lebih jelasnya, bisa melihat contoh pengisian formulir web penyedia ping di TotalPing!.

Itulah artikel tentang Bagaimana cara nge-ping blog, fungsi ping blog, dan kumpulan web penyedia layanan ping Blog.

Download template hasbihtc.blogspot.com

2012-06-28T14:14:00.000+09:00

Pada postingan perdana ini, saya ingin berbagi template hasil kloningan dari blog hasbihtc. sebanarnya, saya sempat bingung, pada post pertama ini, mau isi saya apa.... akhirnya, ada seseorang yang request template mirip blog hasbihtc.

Name	Hasbihtc Clone Template
Author	Isal
URL Author	hasbihtc.blogspot.com
Description	Hasbihtc is Free Clone Premium Blogger Templates with 1 big and 2 small right Sidebar, 2 Column, Adsense Ready, SEO Friendly, Auto Readmore, Social Bookmark, White, Red, Fixed width, Fresh, Premium, Right Sidebar, Top Navigation Bar.
Template Custom Setting	Recent Posts Widget : <div class ="recentposts" id="latestposts"></div> <script type="text/javascript" src="http://isal-blog-com.googlecode.com/files/recent-post.js"></script> <script type="text/javascript" src="http://hasbihtc.blogspot.com/feeds/posts/default?max-results=5&alt=json-in-script&callback=listEvents"> </script>