Cara memberi title otomatis pada popular post

Cara memberi title otomatis pada popular post ~ Di postingan saya sebelumnya saya sudah membahas tentang Cara memberi title otomatis pada label blog dan kali ini saya akan membahas tentang Cara memberi title otomatis pada popular post

 Berikut Cara memberi title otomatis pada popular post

1. Masuk Akun Blogger

2. Pilih Template

3. Klik EDIT HTML
4. Cari code berikut <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>


Code lengkapnya biasanya seperti ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href''><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Tambahkan code berikut expr:title='data:post.title' ke dalamnya sehingga menjadi seperti di bawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a  expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank' expr:title='data:post.title'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Perhatikan code warna merah tebal itu

5. Simpan

Read More

Cara memberi title otomatis pada label blog

Cara memberi title otomatis pada label blog ~ Title adalah attribute untuk memberi keterangan pada sebuah link, selain memberi keterangan pada sebuah link, title juga bagus untuk meningkatkan SEO pada blog kita jadi title ini juga lumayan penting, contohnya anda lihat gambar di bawah ini:

Pada gambar di atas adalah contoh title pada label, untuk menambah title otomatis pada label sangatlah mudah berikut Cara memberi title otomatis pada label blog:

1. Silahkan login ke akun blogger anda, (pada halaman dasbor pilih  template.)
2. Lalu klik edit html, lalu cari kode expr:href='data:label.url' (sebelum mulai edit html sebaiknya download dulu themplate anda, untuk menjaga jika ada keslahan)
3. Jika sudah ketemu tambahkan kode attribute title tag seperti ini disampingnya expr:title='data:label.name'

Contoh penambahan attribute title

<a expr:href='data:label.url' expr:title='data:label.name'>
<data:label.name/></a>

     kode expr:href='data:label.url' ini biasanya lebih dari satu  yang ada ditemplate  blogger, silahkan dicari semuanya dan tambahkan kode expr:title='data:label.name' disampingnya. Setelah itu, save template. Selesai.

Read More

Cara pasang iklan di sebelah kanan / kiri postingan

Cara pasang iklan di sebelah kanan / kiri postingan - Agar pengunjung blog bisa dengan mudah melihat iklan yang kita pasang di blog jadi kita maka tidak hanya memasang iklan pada sidebar atau home page blog kita karna pengunjung kebanyakan dantang karena membaca artikel dari blog kita jadi alangkah baiknya kita pasang iklan di semua halaman postingan kita, gimana cara memasangnya?? caranya sangat mudah silahkan baca tutorialnya di bawah ini:

1. Login ke Blogger
2. Siapkan Kode iklan yang ingin dipasang dikanan atau kiri postingan blog
3. Edit HTML ==> Backup template
4. Beri tanda Centang Expand Template Widget
5. Lalu cari kode <data:post.body/> (jika terdapat lebih dari satu kode seperti itu, pilih kode yang ke  dua) atau anda cari code <div itemprop='articleBody'> dan letakkan di bawah code <div itemprop='articleBody'>
6. Copy pastekan kode berikut ini di atas kode <data:post.body/>, pilih salah satu untuk posisi kanan atau kiri postingan

A. Kode dibawah ini untuk menampilkan iklan di sebelah kiri postingan blog

<div style='float:left;margin-right:10px'>
Ganti dengan Kode iklan yang sudah di parse </div>

B. Kode dibawah ini untuk menampilkan iklan di sebelah kanan postingan blog

<div style='float:right;margin-left:10px;'>
Ganti dengan Kode iklan yang sudah di parse
</div>

7. Save template dan lihat hasilnya.

Untuk memparse kode iklannya silahkan parse Disini
Cara ini bisa diterapkan untuk menampilkan iklan google adsense atau PPc lainnya.
Selamat mencoba.

Read More

Menambah Recent Comments standart pada widget blog

Menambah Recent Comments standart pada widget blog - dengan tutorial yang pernah saya bahas sebelumnya Cara menambah Recent Comments pada widget blog kita menggunakan javascript dengan tampilan yang lebih menarik dan lebih bagus tentunya tapi itu membuat loding blog agak berat ya tergantung jaringannya... tapi menurut saya pribadi memang agak berat yang menggunakan script bukan dari bawaan blogspot karna tampilannya lebih bagus dengan adanya avatar atau gambar kecil tentunya berpengaruh dengan loding blog,, tapi dengan Recent Comments standart ini mungkin emang agak ringan tapi dengan tampilan sederhana saja tanpa ada gambar kecil untuk screenshootnya lihat gambar di bawah ini.

Untuk membuatnya sangatlah mudah silahkan ikuti langkah - langkah berikut:

1. Lgin ke acunt blogger anda.
2. Setelah masuk pada dasbor pilih TATA LETAK.

3. Lalu TAMBAHKAN GADGET.

4. Pilih FEED.

5. Masukkan url feed komentar kamu. contoh punya saya http://andiknet.blogspot.com/feeds/comments/default

6. Lihat pratinjaunya dan setting lihat gambar di bawah ini.

7. Simpan, dan lihat hasilnya,,

Demikian artikel dari saya semoga bermanfat

Read More

Cara membuat daftar isi otomatis dengan mudah

Cara membuat daftar isi otomatis berdasarkan label pada blog - Dulu saya sudah pernah menulis artikel tentang Cara membuat daftar isi otomatis pada blogspot,, mungkin di lihat dari judulnya memang mirip tapi intinya sama saja,, cuma ada bedanya tapi sedikit. jika dulug saya membahas tentang Cara membuat daftar isi otomatis pada blogspot,,  sekarang membuat daftar isi otomatis berasarkan label pada blog. untuk cara yang dulu pernah saya bahas tampilanya seperti gambar di bawah ini,,

 

 Tapi cara membuatnya agak ribet karena harus edit html pada template blog kita, Dan untuk cara yang sekarang Cara membuat daftar isi otomatis berdasarkan label pada blog memang lebih mudah akan tetapi tmoilannya cukup sederhana,, tampilannya seperti gambar di bawah ini...

 

Untuk cara membuatnya sangatlah mudah 

 Silahkan ligin ke akun blogger anda.

Selanjutnya anda mau letakkan di mana,, jika ingin menaruhnya di sidebar anda tinggal pilih TATA LETAK > TAMBAHKAN  GADGET > PILIH HTML/JAVASCRIPT,,

tapi jika anda ingin meletakkan di menu navigasi, silahkan buat posting baru kasih judul DAFTAR ISI pilih mode HTML dan Copy code di bawah ini

<div style="background-color: #6e7e79; border: 1px solid #008E00; height: 400px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="http://yourjavascript.com/6423042014/daftarisi.js" type="text/javascript"></script><script script="" src="http://andiknet.blogspot.com/feeds/posts/default?max-results=200&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
</div>

Warna background #6e7e79 bisa di ganti
Warna border: 1px solid #008E00  bisa di ganti
Url ''http://andiknet.blogspot.com''  ganti dengan url blog anda..
yang terakhir simpan/terbitkan setelah itu copy code url postingan anda, dan letakkan di menu navigasi.

Read More

Cara menambah Recent Comments pada widget blog

Cara menambah Recent Comments pada widget blog - Recent Comments adalah komentar - komentar yang masuk dan kita tampilkan sidebar atau widget,, jika anda adalah blogger mungkin anda sudah faham dengan judul yang saya sebutkan di atas,, tapi bagai mana cara membuatnya apakah anda bisa,, tentu saja bisa , dan mungkin sangat mudah bagi para blogger profesional yang sudah mahir di dunia blogger, terus bagaimana degan pendatang baru di blogger,, (newbie) pasti kebanyakan masih ada yang belum tau cara menambah Recent Comments pada widget blog dengan avatar,, jika belum tau yuk kita belajar bersama, sebelum kita mulai lihat dulu contoh gambar Recent Comments di bawah ini:

Setelah anda melihat gambar di atas,, sekarang kita coba mulai membuatnya:
Penerapan Widget Komentar Terbaru di Blogspot..

Seperti biasa  Login ke akun milik Anda di www.blogger.com
Pada Dashboard pilih Tata Letak → Tambahkan Gadget → Pilih HTML/Javascript
Kemudian masukan kode widget komentar terbaru di bawah ini kedalamnya

<style type="text/css">
ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
.sakahayang_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.sakahayang_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.sakahayang_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 11px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
maxfeeds=20,
adminBlog='Andik Gnw';
//]]>
</script>
<script type="text/javascript" src="http://yourjavascript.com/8274104061/andiknet.js"></script>
<script type="text/javascript" src="http://andiknet.blogspot.com/feeds/comments/default?alt=json&callback=sakahayang_recent_comments&&max-results=20"></script>

numComments = 5, (Jumlah komentar yang akan ditampilkan)
showAvatar = true, (Tampilkan avatar mini atau "false" untuk menonaktifkan avatar mini)
avatarSize = 30, (Ukuran pada avatar mini)
roundAvatar = true, (Tampilan avatar yang muncul berbentuk lingkaran , ganti "false" avatar berbentuk kotak)
characters = 40, (Jumlah karakter atau panjangnya komentar yang muncul)
adminBlog='Andik Gnw'; (menyembunyikan admin)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", (Foto default avatar dan bisa Anda ganti)
hideCredits = true;
maxfeeds=20,

 Jika sudah disesuaikan tahap akhir pilih Simpan (Save)

Read More