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

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

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 == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <title><data:blog.pageName/></title> </b:if>

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

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 != &quot;item&quot;'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div class='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if>

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

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)}

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

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>

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

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; fontsize: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; fontsize:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px solid #C0C0C0}

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

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}

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

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 != &quot;item&quot;'> <a expr:href='data:post.url'> <img alt='&gt;&gt;&gt;' 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>

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

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"/>

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

<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 + &quot;_blog-pager-newer-link&quot;' 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 + &quot;_blog-pager-older-link&quot;' 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>

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

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>

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

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)

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

<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> <p><data:post.body/></p> <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

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

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/>

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

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 == &quot;item&quot;'><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 :)

Dapatkan Koleksi ebook gratis lainnya di: www.ebookhost.blogspot.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.

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

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)

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

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 masingmasing' type='Followers'> <b:includable id='main'> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2> </b:if> <div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'> <b:if cond='data:followingLinkPresent'> <div class='follow-this profile-link item-control following-follow-this'> <a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'> <data:followThisMessage/> </a> </div> <div class='follow-this profile-link item-control following-stop-following-this'> <a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'> <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> <!-Relies on the js written out in navbar.gxp --> <b:loop values='data:followers' var='follower'> <div class='follower'> <a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName' rel='nofollow'>

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

<img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; + data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this, \&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;' 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> <!-Relies on the js written out in navbar.gxp --> <b:loop values='data:followers' var='follower'> <div class='follower'> <a expr:href='data:follower.profileUrl' expr:title='data:follower.displayName'

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

rel='nofollow'> <img class='follower-img' expr:alt='data:follower.displayName' expr:height='data:follower.imageHeight' expr:onerror='&quot;this.onerror=null;this.src=\&quot;&quot; + data:anonFollowerImageUrl + &quot;\&quot;;&quot;' expr:onload='&quot;setAttributeOnload(this, \&quot;src\&quot;, \&quot;&quot; + data:follower.imageUrl + &quot;\&quot;)&quot;' 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 + &quot;-wrapper&quot;'> <b:if cond='data:followingLinkPresent'> <div class='follow-this profile-link item-control following-follow-this'> <a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'> <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'> <a expr:href='&quot;javascript:_FollowersView._openPopup(\&quot;&quot; + data:followUri + &quot;\&quot;);&quot;'> <data:stopFollowingMessage/> </a> </div> </b:if>

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

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 :)

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

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 :)

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

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.

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

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;'/> <!-- clear for photos floats --> </div> atau ada juga yang seperti ini

<div class='post-body entry-content'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </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.

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

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

<div class='post-body entry-content'> <data:post.body/> <b:if cond='data:blog.pageType == "item"'> <p> Kode iklan, banner, pesan atau apapun di pasang disini! </p> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </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. 2. 3. 4.

Silahkan login ke blogger dengan ID anda. Klik Tata Letak. Klik Tab Edit HTML. lalu backup dahulu template anda. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "

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

5. Carilah kode yang mirip seperti Ini :

<div class='post-body entry-content'> <data:post.body/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> 6. Silahkan tambahkan kode yang di cetak dengan warna merah serta hijau; <div class='post-body entry-content'> <data:post.body/> <b:if cond='data:blog.pageType == "item"'> <p> Kode iklan, banner, pesan atau apapun di pasang disini! </p> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div> 7. Klik tombol SIMPAN TEMPLATE 8. Selesai. Untuk teknik yang berhubungan dengan read more yang baru, mudah-mudahan bisa diposting berikutnya.

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

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:includable id='main'> <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>

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

cara Pemasangannya adalah seperti ini.
<b:widget id='Label1' locked='false' title='Daftar isi' type='Label'> <b:includable id='main'> <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.

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

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

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