RSS

Pasang RSS Pada Label Kategori Blogger

Salah satu kemudahan bagi pengguna blogger beta atau template baru blogger adalah pemberian label kategori pada setiap postingan.Pada postingan lainnya sudah pernah dibahas cara menghilangkan angka pada label kategori.Kali ini adalah bagaimana menambahkan label RSS pada label kategori.Syarat utamanya adalah anda sudah membuat widget label kategori jadi tinggal menambahkan label RSS pada bagian samping dari label kategori yang telah anda buat.

Cara Pertama
Menambah label RSS berada Sebelum label kategori:
Berikut ini cara membuatnya.

1.Login pada Blogger.
2.Klik Layout pada Dashboard.
3.Pada Layout klik Edit HTML, centang Expand Widget Template.
4.Temukan kode seperti dibawah ini pada HTML Template anda.

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>


5.Lalu letakkan kode berikut ini setelah kode

<b:loop values='data:labels' var='label'>
<li>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot;
+ data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'
style='vertical-align:middle;border:0'/></a>


Hasilnya seperti ini
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot;
+ data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'
style='vertical-align:middle;border:0'/></a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Setelah selesai Simpan Template. Lihat Hasilnya.















Cara Kedua

Sedangkan bila anda ingin label RSS berada sesudah label kategori, kodenya yang berwarna merah anda letakkan seperti dibawah ini.

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot;
+ data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png'
style='vertical-align:middle;border:0'/></a>
</li>
</b:loop>


Setelah selesai simpan Template.
read more
Your Ad Here

Membuat Navigasi Breadcrumb Blogger

Navigasi breadcrumb atau breadcrumb navigation adalah sebaris link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat. Namun saat ini penempatan breadcrumb lebih sering digunakan pada bagian atas halaman artikel posting. Urutan link breadcrumb dimulai dari home (homepage) dan diakhiri dengan judul artikel posting yang sedang dibaca. Contohnya: Browse » Home » SEO » Membuat Navigasi Breadcrumb Blogspot.

Saya tertarik dengan breadcrumb yang tertulis pada Google's Search Engine Optimization Starter Guide. Karena google mengatakan demikian dan saya masih menjadi penggunanya hingga saat ini, maka dengan senang hati saya praktekkan.



Ikuti langkah berikut:
1. Login blogger dengan ID kamu » Klik Tata Letak » Edit HTML » beri tanda centang pada Expand Template Widget » Download Template Lengkap untuk mem-backup template blog.


2. Carilah kode ]]></b:skin> agar lebih mudah tekan kebor Ctrl F atau F3 maka akan muncul tools pencarian (mozilla). Copy dan paste kode di bawah ini tepat di atas kode tadi.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}


3. Carilah kode berikut pada template kamu
<div class='post hentry uncustomized-post-template'>


Copy dan paste kode berikut tepat di bawah kode tadi.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>


4. Klik Simpan Template dan tunggulah beberapa saat hingga selesai.
5. Lihat blog kamu dan coba klik satu judul artikel dan lihat hasilnya.
6. Selesai.
read more
Your Ad Here

Membuat Halaman 123 / Page Number Navigation Berurut di Blogger

Baru beberapa hari lalu saya menemukan artikel yang benar-benar saya cari.
Adalah bagaimana cara membuat halaman berurut 123 /page 123 navigation untuk blog di blogger/blogspot.


Kode membuat halaman 123 di blogspot ini,saya dapat dari hasil karya besar Bp.Wijaya di ariawijaya.com

Untuk hasilnya akan seperti gambar dibawah ini:

Ingin membuatnya?

Pertama,pergilah ke dashboard blogger anda,selanjutnya,pilih tata letak,dan pilih edit html.
Seperti biasa,contreng option expand widget templates,selanjutnya cari kode berikut:

]]></b:skin>


Setelah ketemu,letakkan persis diatasnya kode css dibawah ini:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}



Lalu,cari lagi kode seperti ini:

</body>


Jika sudah ketemu,tepat diatasnya letakkan script dibawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>


Langkah terakhir,carilah kode berikut:

'data:label.url'


Jika sudah ketemu,hapus kode tersebut dan gantilah kode berikut:

'data:label.url + &quot;?&amp;max-results=5&quot;'


Sekarang,simpan templates anda,dan anda bisa lihat hasilnya.
read more
Your Ad Here

Menghilangkan "Showing post with label...show all posts"

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" , kasih tanda centang "Expand Widget Templates"
3. Cari kode dibawah ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>


ganti kode diatas dengan kode ini :

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>


Save Template dan Selesai
read more
Your Ad Here

Mengatur Hurup dan Warna Pada Postingan

Untuk para blogger baru, sobat akan menikmati fasilitas baru dari blogger.com, yaitu sobat bisa mengatur jenis font (hurup) serta warna font dengan sangat mudah. Di bawah adalah langkah untuk mengatur Fonts And Colors (khusus untuk blogger baru dengan template baru, sedangkan untuk blogger yang memakai template klasik, menu ini tidak disediakan). Klik menu "Fonts and Colors", maka akan muncul beberapa pengaturan : (ini khusus untuk template "minima")

  1. Page Background color --> pengaturan warna background blog. Silahkan klik warna yang ada di sebelah kanan yang di sukai.
  2. Text Color --> pengaturan warna hurup dari posting-an
  3. Link Color --> pengaturan warna hurup yang di link
  4. Blog Title Color --> pengaturan warna hurup judul Blog
  5. Blog Description Color --> pengaturan warna hurup deskripsi blog
  6. Post Title Color --> pengaturan warna hurup judul posting-an
  7. Border Color --> pengaturan warna kotak yang mengelilingi judul blog, serta garis pemisah
  8. Sidebar Title Color --> pengaturan warna hurup judul yang anda di sidebar (kolom samping)
  9. Sidebar Title Color --> pengaturan warna hurup yang ada di sidebar(kolom samping)
  10. Visited link Color --> pengaturan warna hurup link ketika pengunjung mengarahkannya ke tulisan yang mengandung link
  11. Text Font --> pengaturan jenis hurup,berlaku untuk hurup hasil dari posting-an ataupun hurup yang ada di sidebar
  12. Sidebar Title Font --> pengaturan jenis hurup untuk judul yang ada di sidebar serta tanggal postingan
  13. Blog Title Font --> pengaturan jenis hurup Judul blog
  14. Blog Description Font --> Pengaturan jenis hurup dekripsi blog
  15. Post Footer Font --> pengaturan jenis hurup footer (contoh : posted by )
  16. Klik “ SAVE CHANGES” untuk mengakhiri pengaturan. Selesai
Untuk template-template selain template "minima", pada dasarnya sama aja, hanya saja ada sedikit perbedaan, tapi itu tidak sulit. Untuk mengetahui tulisan mana yang sedang di rubah oleh anda, anda cukup melihat mana yang berubah tulisannya pada preview yang terletak sebelah bawah.
read more
Your Ad Here
Prev

Recent Posts