Kumpulan Blogger Hack Dan Tutorial Singkat Blogspot

Daftar Isi Ebook :
Kumpulan Blogger Hack dan Tutorial Singkat Blogspot.............................................

.....................................................................................................................................2
Agar Title SEO Friendly...............................................................................................
.....................................................................................................................................2
Menghapus Link Subsribe Post (atom) atau Berlangganan: Posting (atom)................
.....................................................................................................................................3
Menghilangkan Navbar.................................................................................................
.....................................................................................................................................4
Autohide pada navbar blogger......................................................................................
.....................................................................................................................................4
Mengganti Default atom dg RSS..................................................................................
.....................................................................................................................................5
Memasang Icon Sebelum title Post...............................................................................
.....................................................................................................................................6
Pasang Icon Pada Setiap Judul SideBar........................................................................
.....................................................................................................................................6
Memasang Icon di link Sidebar....................................................................................
.....................................................................................................................................7
Memasang Icon Sebelum Title Post pada halaman List Label.....................................
.....................................................................................................................................8
Pasang Icon Sebelum Jumlah Komentar.......................................................................
.....................................................................................................................................9
Pasang Icon Sebelum Nama Komentator.....................................................................
.....................................................................................................................................9
Mengganti Tulisan Posting Lebih Baru - Halaman Utama - Posting Lama dengan
tulisan sendiri atau bergaya Icon...................................................................................
.....................................................................................................................................9
Cara mencetak halaman (Print Page)............................................................................
...................................................................................................................................10
Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Cara pasang Auto Read More terbaru (Part 2)..............................................................
...................................................................................................................................12
Customized tampilan "Blogger Followers"..................................................................
...................................................................................................................................16
Percepat loading page dengan CSS Compressor..........................................................
...................................................................................................................................22
Membuat Menu Auto-Hide ( Spoiler )..........................................................................
...................................................................................................................................23
Pasang Iklan di bawah posting......................................................................................
...................................................................................................................................24
Membuat label dengan roll...........................................................................................
...................................................................................................................................29

Kumpulan Blogger Hack dan Tutorial Singkat Blogspot
Dibawah ini merupakan Kumpulan tutorial singkat Blogspot dan beberapa Blogger
Hack yang paling sering ditanyakan. Sengaja saya tidak membuat tulisan per-artikel
mengingat penjelasannya terlalu singkat dan terbilang sederhana. Nah..untuk menjawab
pertanyaan yang sama dan sering pada komentar dan Imel yang masuk saya kumpulkan
aja jadi satu. Silahkan dicoba :)
Agar Title SEO Friendly
Agar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita
dapat mengganti Title standar dengan Title kode yang sudah dimodifikasi.
Cari kode title dibawah ini:
<title><data:blog.pageTitle/></title>
Kemudian ganti semua kode diatas dengan kode dibawah
<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Menghapus Link Subsribe Post (atom) atau Berlangganan: Posting (atom)
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template
Widget, cari kode dibawah lalu hapus kode warna merah dibawah.
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != "item"'> 
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

Menghilangkan Navbar
Masuk halaman Edit HTML kemudian letakan dibawah kode <b:skin><![CDATA[
#navbar{height:10px; visibility:hidden; display:none}
Auto Hide pada Navbar Blogger
Pada halaman Edit HTML, kemudian letakan kode dibawah kode <b:skin><![CDATA[
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Mengganti Default Atom dengan RSS
Kadang mungkin kita ingin menggunakan default feed sebagai RRS, caranya masuk
halaman Edit HTML, Kemudian cari kode warna hijau dibawah
<b:includable id='feedLinksBody' var='links'>

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType'
target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
Ganti kode warna hijau dengan kode dibawah ini:
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml'

target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

Memasang Icon Sebelum title Post
Pertama cari .post h3{ pada deretan kode CSS kemudian masukan sesuai kode warna
hijau dibawah:
.post h3{ background:

url("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqt
zzzs4/s400/dotlink.gif") 0px 0px no-repeat; margin:.5em 0; padding:0 20px 0; font-
size:120%; font-weight:bold; font-style:normal; line-height:1.3em; color:#333}
Pasang Icon Pada Setiap Judul SideBar
Pertama cari #sidebar-wrapper h2{ pada deretan kode CSS, kemudian masukan sesuai
kode warna hijau dibawah:
#sidebar-wrapper h2{ background:

url("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqt
zzzs4/s400/dotlink.gif") 0px 0px no-repeat; margin:.6em 0 .6em; padding:0 20px; font-
size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222;
border-bottom:1px solid #C0C0C0}

Memasang Icon di link Sidebar
Pertama cari #sidebar-wrapper li{ pada deretan kode CSS, kemudian masukan sesuai
kode warna hijau dibawah:
#sidebar-wrapper
li{background:url("http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAA
ACFw/8XPCqtzzzs4/s400/dotlink.gif") no-repeat 0px .20em; margin:0; padding:0 0 .
25em 17px; line-height:1.2em}

Memasang Icon Sebelum Title Post pada halaman List Label
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template
Widget, cari kode warna hijau di kemudian masukan sesuai kode warna merah dibawah:
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<img alt='>>>' border='0'
src='http://2.bp.blogspot.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/8XPCqt
zzzs4/s400/dotlink.gif'/>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Pasang Icon Sebelum Jumlah Komentar
Pertama cari #comments h4{ pada deretan kode CSS, kemudian masukan sesuai kode
warna hijau dibawah:
#comments h4{ background:#eee5e5

url("http://1.bp.blogspot.com/_C6KkooKXCEw/SJGzpJXhKoI/AAAAAAAACGw/QZ7I
zDBHgFU/s400/icon_comments.png") no-repeat 3px .3em; width:430px; margin:.1em 0;
font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111;
padding-left:25px}
Pasang Icon Sebelum Nama Komentator
Pertama cari #comments-block .comment-author{ pada deretan kode CSS, kemudian

masukan sesuai kode warna hijau dibawah:
#comments-block .comment-author{ margin:.5em 0; padding-left:25px;

background:#FFFFCC
url("http://4.bp.blogspot.com/_C6KkooKXCEw/SJGzpDac4VI/AAAAAAAACGo/2L5Y
5P_BDWU/s400/icon_comment.gif") no-repeat 3px .3em; color:#111}
Mengganti Tulisan Posting Lebih Baru - Halaman Utama - Posting Lama dengan
tulisan sendiri atau bergaya Icon
Anda mungkin ingin mengganti tulisan standar Posting Lebih Baru - Halaman Utama -
Posting Lama dengan gaya sendiri atau anda juga bisa menganti tulisan tersebut dengan
icon. Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template
Widget, cari kode warna hijau di bawah kemudian ganti kode warna merah dibawah
sesuai keinginan.Untuk menganti gaya tulisan sendiri anda bisa langsung menulisnya
sedangkan jika ingin mengganti dengan gaya icon tinggal ganti dengan kode <img
src="http://loakasit-gambar-anda.com/contoh.jpg"/>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-newer-link"'
expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl'
expr:id='data:widget.instanceId + "_blog-pager-older-link"'
expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
</div>

Cara mencetak halaman (Print Page)
Anda mungkin ingin mencetak perhalaman langsung ke default Printer, caranya tinggal
memasang kode dibawah ini langsung disetiap halaman atau letakan di dalam halaman
Post.
<a href="javascript:print(document)">Cetak Halaman Ini</a>

Cara pasang Auto Read More terbaru (Part 2)
(Revisi: Solusi tanpa hosting file .JS) Fungsi Read More kali ini emang agak berbeda
dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut
tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div
class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini
biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto
Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan
kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.
Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam
postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang
kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja
dengan fasilitas image thumbnail.
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini
ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan
jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter
tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya
sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.
Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya
kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah
ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>
OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian
letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan
terlebih dahulu.
Langsung copy paste aja kode dibawah ini:
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;
}
//]]>
</script>
Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget
template" lalu temukan kode seperti dibawah
<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini
<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

silahkan disimpan dan lihat hasilnya :)
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail

berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting
dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Selamat mencoba..happy tutorial with o-om.com :)

Customized tampilan "Blogger Followers"
Customized Blogger Followers - Terus terang, saya kurang nyaman dengan tampilan
standar Blogger Followers. Bila anda perhatikan, terlihat link menu Follow this blog
yang berada diatas, kemudian diikuti informasi jumlah followers dan link View all
dibawahnya. Sekilas memang tidak terlalu mengganggu, tapi namanya juga selera, tentu
saja terasa ada yang kurang.

Jika anda sependapat dengan saya, tidak ada salahnya untuk mencoba memodifikasi
tampilan standar Followers ini agar nampak lebih manis. Jika Followers anda belum
support di mode indonesia, silahkan klik disini untuk cara menampilkanya.
Lihat sample modifikasi tampilan dibawah:
Anda bisa melihat perubahan diatas, dimana link tertata rapi, serta sedikit sentuhan
border (garis tepi) pada setiap photo.

Bila anda pada area mode sedang login, link Manage akan tetap pada posisi
menggantikan Link View All. jadi jangan kuatir pada perubahan kodingnya :)
Mari kita coba memodifikasinya:
Untuk menambahkan border (garis tepi) pada gambar, pertama masuk halaman Edit
HTML, kemudian copi-paste semua kode CSS dibawah, Sebaiknya letakan kode tersebut
dibawah kode <b:skin><![CDATA[
/* Follower (Modified by o-om.com)

----------------------------------
*/
.follower-grid {width:150px;}
.follower {width:32px; height:32px; float:left; margin:2px;}
.follower-img {float: left; border:1px solid #222; margin-top: 2px; margin-right: 2px;
margin-bottom: 2px; margin-left: 2px;}
.follow-this {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}
.followers-canvas {margin:0.5em 0.5em 0.5em 0; font-weight:bold;}
Jangan lupa simpan dulu perubahan diatas. (Sebenarnya kode CSS diatas bisa anda
modifikasi sesuai keperluan, jadi saya masukan saja kode CSS Followers secara lengkap
jika suatu waktu anda ingin memodifikasinya)

Kita lanjutkan mengedit kode utamanya, disini agak rumit karena akan banyak kode yang
harus anda perhatikan.
Pertama tuju ke halaman Edit HTML, jangan lupa beri tanda centang pada Expand
Widget Templates, Kemudian cari kode tercetak tebal sesuai warna hijau di bawah ini:
<b:widget id='Followers1' locked='false' title='ini sesuai dengan title masing-

masing' type='Followers'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2>
</b:if>
<div expr:id='data:widget.instanceId + "-wrapper"'>

<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<a expr:href='"javascript:_FollowersView._openPopup(\"" +
data:followUri + "\");"'>
<data:followThisMessage/>
</a>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>
<data:stopFollowingMessage/>
</a>
</div>
</b:if>
<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName'
rel='nofollow'>

<img class='follower-img' expr:alt='data:follower.displayName'
expr:height='data:follower.imageHeight'
expr:onerror='"this.onerror=null;this.src=\"" +
data:anonFollowerImageUrl + "\";"'
expr:onload='"setAttributeOnload(this, \"src\", \"" +
data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth'
src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>
<div class='followers-canvas profile-link'>

<data:followersFooterMessage/>
<span class='item-control following-not-admin'>
<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>
<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span>
</div>
Kemudian ganti semua kode warna merah diatas, dengan melakukan (copy-paste) kode
warna merah yang sudah saya modifikasi dibawah ini:
<div class='followers-grid'>
<b:if cond='data:totalFollowerCount == 0'>
<div class='profile-link item-control following-follow-this'>
<data:emptyFollowersMessage/>
</div>
</b:if>

<b:loop values='data:followers' var='follower'>
<div class='follower'>
<a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName'

rel='nofollow'>
<img class='follower-img' expr:alt='data:follower.displayName'
expr:height='data:follower.imageHeight'
expr:onerror='"this.onerror=null;this.src=\"" +
data:anonFollowerImageUrl + "\";"'
expr:onload='"setAttributeOnload(this, \"src\", \"" +
data:follower.imageUrl + "\")"' expr:width='data:follower.imageWidth'
src='http://img1.blogblog.com/img/blank.gif'/>
</a>
</div>
</b:loop>
<div class='clear'/>
</div>
<div expr:id='data:widget.instanceId + "-wrapper"'>

<b:if cond='data:followingLinkPresent'>
<div class='follow-this profile-link item-control following-follow-this'>
<data:followThisMessage/>
</a> -
<span class='item-control following-not-admin'>

<a expr:href='data:followersUri'>
<data:viewAllMessage/>
</a>
</span>
<span class='item-control blog-admin'>

<a expr:href='data:manageFollowersUri'>
<data:manageFollowersMessage/>
</a>
</span> - <data:followersFooterMessage/>
</div>
<div class='follow-this profile-link item-control following-stop-following-this'>

<data:stopFollowingMessage/>
</a>
</div>
</b:if>

Kemudian simpan pekerjaan anda, dan silahkan lihat perubahannya.
Jangan lupa untuk mem-follow blog oom disini atau anda bisa melihat siapa saja yang
sudah bergabung di followers oom disini. Good Luck ya :)

Percepat loading page dengan CSS Compressor
Teknik kompresi pada CSS paling tidak mampu meningkatkan performa loading page
blog anda. Disini bukan dalam artian super cepat ya, tapi cenderung ke arah optimalisasi
CSS. Jika kita bicara masalah kecepatan loading page, CSS Compress ini cuma salah
satu bumbu penyedap saja, tidak ada cara sebagus apapun selain optimalisasi pada size
image (jangan dibandingkan dengan kecepatan koneksi internet dulu ya...kita anggap saja
koneksi yang kita gunakan sama).
CSS Drive - CSS Compressor merupakan salah satu layanan gratis yang biasa om
gunakan untuk keperluan ini. Yang menarik, tools ini menyediakan 3 level mode
kompresi berbeda yaitu Light, nomal dan Compact. Cara kerjanya, metode kompresi
CSS ini berusaha memperkecil ukuran dengan menghilankan spasi dan komentar yang
tidak diperlukan. Om sarankan untuk yang baru utak atik CSS jangan langung mencoba
mode Super Compact dan Strip All Comments..sebaiknya gunakan mode Light dan don't
strip any comments terlebih dahulu. Untuk yang sudah mengerti bisa mencoba level
kompresi selanjutnya pada pilihan Advanced mode.
Selain fungsi Compress tentu kita juga mengenal mode Uncompress. Biasanya
uncompress digunakan sebagai kebalikannya. Sayang CSS Drive tidak memiliki fungsi
ini, jadi om sarankan kita bisa mencoba pada layanan ini CSS Optimizer.
Cara Kompresi CSS pada Blogger:
(sebelumnya jangan lupa backup semua kode pada halaman Edit HTML)
Pada halaman Edit HTML, Code CSS biasanya terletak diatara kode <b:skin><!
[CDATA[ dan ]]></b:skin> silahkan copy-paste semua kodenya kemudian lakukan
kompress pada tools diatas, jika sudah..copy-paste lagi kode yang sudah di compress ke
halaman Edit Html pada posisi semula. Selamat mencoba :)

Membuat Menu Auto-Hide ( Spoiler )
Hampir sama dengan postingan saya disini, kali ini akan menulis bagaimana membuat
menu auto-hide yaitu menu yang bisa dikenal sebagai spoiler berguna untuk menyimpan /
menyembunyikan sebuah gadget/widget yang dirasa terlalu menonjol dan menyebabkan
blog kita terlalu besar agar blog kita terlihat rapi, jadi nantinya spoiler hanya akan
muncul jika di klik oleh mouse dan sembunyi ketika diklik lagi.
Cara untuk membuatnya adalah :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript"
(Tempatnya terserah kamu).
3.Copy Paste Script yang ada di bawah ini :
<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;"

class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; "
value="Show" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display != '')
{ this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value =
'Hidden'; } else { this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value
= 'Show'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div
style="border: none; color:none; background-color:none; text-align: justify;
padding:10px;">
TARUH SCRIPT / KONTEN KALIAN DISINI
</div></div></div></div></div>
Keterangan :
+ Tulisan yang berwarna merah bisa Anda ganti sesuai keinginan.
+ Yang berwarna hijau adalah tempat untuk meletakkan konten / script widget Anda.
4. Klik Simpan dan selesai.

Pasang Iklan di bawah posting
Seperti yang diinformasikan pada posting terdahulu, bahwa blogger sekarang telah
mempunyai sistem read more sendiri, oleh karena itu semua posting kang Rohman
terdahulu yang berhubungan dengan kode read more yang lama menjadi usang atau out
of date, sehingga artikel-artikel tersebut harus diperbaharui atau di update. Salah satu
postingan yang telah usang tersebut adalah tentang cara memasang iklan di bawah
posting. Kenapa kang Rohman langsung menyoroti hal ini? ini di karenakan pada posting
tentang sistem read more bloger yang baru kemarin ada beberapa komentar yang
bernada khawatir bahwa apabila memakai sistem read more baru blogger maka iklan
yang di pasang di bawah setiap posting akan terganggu.
Satu yang harus di ingat adalah teknik ini tidak hanya untuk memasang iklan saja tapi
bisa juga memasang banner, pesan, informasi subscribe serta yang lainnya yang ingin di
pasang dibawah posting. Yang perlu di ingat pula yaitu iklan atau pesan yang terpasang
tidak akan tampil dihalaman depan, namun akan tampil dibawah setiap posting apabila
pembaca meng klik link "Read more" atau baca "selengkapnya" atau dengan kata lain
artikel anda di baca secara keseluhan.
Teknik yang dipakai adalah sebagai berikut, biasanya kode untuk posting adalah seperti
ini :
<div class='post-body entry-content'>

<data:post.body/>
<div style='clear: both;'/> 
</div>
atau ada juga yang seperti ini

</div>
Dua-duanya sama saja karena kode tambahan <p>…</p> itu adalah kode html untuk
"paragrap" atau dengan kata lain agar kode posting mempunyai paragrap yang berbeda
dengan yang lain.

Untuk memasang iklan atau pesan atau apapun sesuai keinginan anda di bawah posting,
maka anda hanya perlu menambahkan kode tambahan seperti ini :

<data:post.body/>
<p> Kode iklan, banner, pesan atau apapun di pasang disini! </p>
</b:if>

</div>
Nah, ternyata gampang bukan. jadi anda tidak perlu khawatir dengan sistem read more
baru blogger, karena kita bisa beradaptasi.
Namun ingat, beberapa kode iklan seperti kode iklan adsense, adbrite dan yang lainnya
tidak bisa langsung di pasang disitu tapi harus di parse terlebih dahulu seperti yang
pernah kang Rohman terangkan dahulu pada posting tentang Pasang Iklan Google
Adsense di Bawah Posting.
Masih bingung tentang cara pasang iklan di bawah posting, berikut sebagai gambaran
agar lebih gampang di praktikan :
1. Silahkan login ke blogger dengan ID anda.

2. Klik Tata Letak.
3. Klik Tab Edit HTML. lalu backup dahulu template anda.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template
Widget "

5. Carilah kode yang mirip seperti Ini :

<data:post.body/>
</div>
6. Silahkan tambahkan kode yang di cetak dengan warna merah serta hijau;

<data:post.body/>
<p> Kode iklan, banner, pesan atau apapun di pasang disini! </p>
</b:if>

</div>
7. Klik tombol SIMPAN TEMPLATE

8. Selesai.
Untuk teknik yang berhubungan dengan read more yang baru, mudah-mudahan bisa
diposting berikutnya.

Membuat label dengan roll
Pada tips blogger kali ini saya akan mencoba membuat sedikit tips tentang membuat
label dengan roll. Semua sudah tahu bukan bahwa label adalah katagory dari sebuah
blog, semakin banyak katagory maka tampilan label tersebut akan semakin panjang. Nah
saya akan memberikan solusi bagi yang memiliki banyak katagoy tapi ingin menghemat
space blognya. Gimana caranya?...
1. Pertama-tama masuk ke halaman html kamu dan klik centang ke expand widget.
(jangan lupa download template selengkapnya dulu)
2. Kedua cari kode ini
<b:widget id='Label1' locked='false' title='Daftar isi' type='Label'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
3. jika sudah pasang kode biru ini pada kode tadi.
<div style='overflow: auto; width: 140px; height: 400px; text-align:

left;'>
dan akhiri dengan kode hijau ini
</div>

cara Pemasangannya adalah seperti ini.
<b:widget id='Label1' locked='false' title='Daftar isi' type='Label'>

<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow: auto; width: 140px; height: 400px; text-align:
left;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
</div>
Penjelasan, 140px adalah lebar dari roll tersebut dan 400px adalah tinggi dari rollnya.
kamu bisa menggantinya sesuai dengan yang kamu inginkan.
Simpan dan lihat hasilnya...apa yang telah kamu buat bisa dilihat disini sebagai
contohnya (pada daftar isi, itu adalah label dengan roll. Selamat mencoba...salam tips
blogger pemula.

PENUTUP
Special Thanks to:
 Allah SWT, Muhammad SAW, keluarga & sahabat2nya
 Bapak, Emak, dan Keluargaku Tercinta
 Kang Rohman, O-om atas atas tips dan trik kerennya. Makasih banget
 Calon bini gue... Hehe… Siapa tuh???
Kalo ada kritik dan saran… silahkan kirim ke alamat emailku,

gamezone.wa2n@gmail.com
Semoga Bermanfaat.
Hormat Kulo
ebookhost.blogspot.com

Kumpulan Blogger Hack Dan Tutorial Singkat Blogspot

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Kumpulan Blogger Hack Dan Tutorial Singkat Blogspot

Diunggah oleh

Hak Cipta:

Format Tersedia

Daftar Isi Ebook :

Kumpulan Blogger Hack dan Tutorial Singkat Blogspot.............................................

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Agar Title SEO Friendly

Cari kode title dibawah ini:

Kemudian ganti semua kode diatas dengan kode dibawah

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

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Masuk halaman Edit HTML kemudian letakan dibawah kode <b:skin><![CDATA[

#navbar{height:10px; visibility:hidden; display:none}

Auto Hide pada Navbar Blogger

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

<b:includable id='feedLinksBody' var='links'>

Ganti kode warna hijau dengan kode dibawah ini:

<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml'

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

.post h3{ background:

Pasang Icon Pada Setiap Judul SideBar

#sidebar-wrapper h2{ background:

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

<b:include data='top' name='status-message'/>

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

#comments h4{ background:#eee5e5

Pasang Icon Sebelum Nama Komentator

Pertama cari #comments-block .comment-author{ pada deretan kode CSS, kemudian

#comments-block .comment-author{ margin:.5em 0; padding-left:25px;

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

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

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

<a href="javascript:print(document)">Cetak Halaman Ini</a>

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Langsung copy paste aja kode dibawah ini:

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

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

silahkan disimpan dan lihat hasilnya :)

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail

Selamat mencoba..happy tutorial with o-om.com :)

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Lihat sample modifikasi tampilan dibawah:

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Mari kita coba memodifikasinya:

/* Follower (Modified by o-om.com)

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

<b:widget id='Followers1' locked='false' title='ini sesuai dengan title masing-

<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

<div class='followers-canvas profile-link'>

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

<div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>

<span class='item-control following-not-admin'>

<span class='item-control blog-admin'>

<div class='follow-this profile-link item-control following-stop-following-this'>

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Cara Kompresi CSS pada Blogger:

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.com

Cara untuk membuatnya adalah :

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

<div expr:id='data:widget.instanceId + "-wrapper"'>

<div expr:id='data:widget.instanceId + "-wrapper"'>