Kumpulan Tips Blogger

Di bawah 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. Silahkan dicoba :)


Agar Title SEO Friendly


Agar title blogger lebih lebih bersahabat dengan Search Engine (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>

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>

Menghilangkan Navbar

Masuk halaman Edit HTML kemudian letakkan 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 RSS, 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqOcbdXfu_fNP7t3wCwn5-0iBjsK110BdEEh80Z4QKqRtGVghwoT9Dx1AUQSqtIzMYrmcIn4xJP_DFalJ32vKb5mFlmlJzx6QZ5n9AWRzQ9oja-E3T0SaHX62ggTL5eBPctaui6rri09z/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqOcbdXfu_fNP7t3wCwn5-0iBjsK110BdEEh80Z4QKqRtGVghwoT9Dx1AUQSqtIzMYrmcIn4xJP_DFalJ32vKb5mFlmlJzx6QZ5n9AWRzQ9oja-E3T0SaHX62ggTL5eBPctaui6rri09z/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqOcbdXfu_fNP7t3wCwn5-0iBjsK110BdEEh80Z4QKqRtGVghwoT9Dx1AUQSqtIzMYrmcIn4xJP_DFalJ32vKb5mFlmlJzx6QZ5n9AWRzQ9oja-E3T0SaHX62ggTL5eBPctaui6rri09z/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 masukkan 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfqOcbdXfu_fNP7t3wCwn5-0iBjsK110BdEEh80Z4QKqRtGVghwoT9Dx1AUQSqtIzMYrmcIn4xJP_DFalJ32vKb5mFlmlJzx6QZ5n9AWRzQ9oja-E3T0SaHX62ggTL5eBPctaui6rri09z/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyr3dUdNCN9Qb2cYOZ74FTBMK2F8Eo8iKSOjdtuy-dcTfwI3btv5IVrdOK41DKWTPNrkBeQeGZrKy2u2byejmp6OeaZvQ2aSNtI6uM-lmFCbwqZBqwjyNf0HBBahnNHzphRkyd84E4GKjD/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 di bawah :

#comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIvhrfk2WzpF5rjnOy4618_hi8X5nHemtKwovt5-hbkqRmDA4I0yvQAPntvnf2OMSSiqxzImO1wgV3Bo8C2ouqL5fZwazL8-cS1cmDcEGgaqQO3MVBGVRnDwZ3Y585Al8LFepYVmELbxb/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 di bawah sesuai keinginan. Untuk mengganti gaya tulisan sendiri Anda bisa langsung menulisnya sedangkan jika ingin mengganti dengan gaya icon tinggal ganti dengan kode <img src="http://lokasi-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 + &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>

Cara mencetak halaman (Print Page)

Anda mungkin ingin mencetak perhalaman langsung ke default Printer, caranya tinggal memasang kode dibawah ini langsung di setiap halaman atau letakkan di dalam halaman Post.

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

Artikel ini diambil dari o-om.com. Hehe, o-om jangan marah ya..

Dapatkan update hacking tutorial, tips dan trik menarik seputar teknologi, download full software, belajar bisnis internet, dan masih banyak lagi langsung ke email Anda sekarang juga!

Related Post