Senin, 23 April 2012

Membuat judul posting artikel berjalan




Membuat judul posting artikel berjalan
Kemarin pada saat saya nongkrong di blognya KR, ada salah seorang pengunjung blog yang bertanya bagaimana cara membuat judul posting berjalan. Pada awalnya saya berpikir mustahil bisa dilakukan hanya dengan menggunakan kode marquee, saya pikir mungkin itu hanya dapat dilakukan dengan menggunakan Java script. Tetapi setelah berusaha keras mengutak-atik kode HTML blog saya, akhirnya saya menemukan cara sederhana untuk membuat judul pada posting atau artikel blog berjalan. Hasil yang di dapat seperti anda membuat teks berjalan dengan kode marquee atau seperti judul blog berjalan yang menggunakan Java script.

Baiklah tanpa perlu panjang lebar saya akan memberikan triknya. Seperti biasa pertama login ke Dashboard Blogger anda kemudian klik Layout - Edit HTML. Untuk berjaga-jaga sebaiknya backup dulu template anda, lalu klik pada Expand widget templates dan carilah kode dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a
expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a
expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3> </marquee>
</b:if>

Teks yang berwarna hijau adalah kode yang harus anda tambahkan. Anda dapat merubah arah dengan mengganti kode left menjadi right. Klik tombol Preview untuk melihat hasilnya, jika anda sudah cukup puas silahkan di simpan pekerjaan anda.
Contoh hasil seperti ini :

JUDUL POSTING BLOG ANDA

Bagaimana, mudah bukan? Selamat mencoba..

Cara Membuat Related Posts Di Sidebar



Cara Membuat Related Posts Di Sidebar
Related posts widget atau artikel terkait adalah widget yang memunculkan artikel yang berkaitan dengan postingan yang sedang di baca. Cara ini sudah banyak yang menjelaskan di postingan para sahabat Blogger, namun saya juga ingin berbagi pengalaman yang sudah saya kerjakan.

Related posts sangat bermanfaat bagi blog kita terutama untuk SEO dan juga bermanfaat bagi pengunjung. Dengan related posts widget ini, pengunjung suatu blog akan mudah untuk membaca atau menelusuri setiap postingan yang ada di blog kita.

Nah tentunya hal ini akan meningkatkan page view blog kita. Related posts widget ini di buat dengan berbagai bentuk yang menarik agar pengunjung tertarik untuk menelusuri blog kita. Tertarik untuk mencobanya di blog anda? Silahkan ikuti totorial Cara Membuat Related Posts Di Sidebar berikut ini.


  1. Log in ke blogger dengan akun yang anda miliki.
  2. Pergi menuju ke rancangan » edit HTML » centang kotak expand template widget. Atau bagi yang menggunakan tampilan blogger yang baru, anda tinggal klik template » edit HTML » centang kotak expand template widget.
  3. Hampir aja lupa, sebelum melakukan pengeditan, sebaiknya anda memback-up template anda dulu buat jaga-jaga bila terjadi kesalahan dalam melakukan pengeditan.
  4. Cari kode </head> dan letakkan kode di bawah ini sebelum kode </head>.
<script src='http://contents-ente.googlecode.com/files/sidebar-ente.js' type='text/javascript'></script>
5. Cari kode yang kira-kira mirip seperti ini.
<b:if cond='data:post.labels'>

<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if> </b:loop>
</b:if>
6. Kalau sudah ketemu, tambahkan kode di bawah ini di dalam kode di atas.
<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
Sehingga kodenya menjadi seperti ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Keterangan : kode yang bercetak tebal berwarna merah adalah jumlah artikel terkait atau related posts yang akan di munculkan, sedangkan kode yang berwarna hijau adalah kode yang di tambahkan.
7. Save template anda.
8. Sekarang anda menuju ke tata letak » tambah gadget » HTML/Java script. Masukkan kode di bawah ini pada kolom yang sudah di sediakan.


<script type="text/javascript">

removeRelatedDuplicates();
printRelatedLabels();
</script>

9. Save gadget anda, dan lihat hasilnya.

Sekian dulu tutorial dari saya kali ini tentang Cara Membuat Related Posts Di Sidebar, bagi yang masih bingung silahkan untuk bertanya ya.

Sabtu, 24 Maret 2012

Mengenal Twitter





Kita sekarang akan mengenal yang namanya twitter, walau sudah usang beritanya namun bagi saya pun anda yang belum tahu akan berkenalan dengan yang namanya jejaring sosial yang bergambar khusus ini, memiliki logo berupa seekor burung berwarna biru yang bernama "Larry the "Bird".


Twitter adalah sebuah situs web yang dimiliki dan dioperasikan oleh Twitter Inc., yang menawarkan jejaring sosial berupa mikroblog sehingga memungkinkan penggunanya untuk mengirim dan membaca pesan yang disebut kicauan (tweets). Kicauan adalah teks tulisan hingga 140 karakter yang ditampilkan pada halaman profil pengguna. Kicauan bisa dilihat secara luar, namun pengirim dapat membatasi pengiriman pesan ke daftar teman-teman mereka saja. Pengguna dapat melihat kicauan penulis lain yang dikenal dengan sebutan pengikut ("follower").


Di Indonesia, Twitter sangat populer. Terlebih lagi, kemudahan yang disediakan oleh telepon seluler yang ada serta aplikasi yang mendukung. hal ini membuat Indonesia menduduki peringkat ke enam sebagai negara dengan pengguna Twitter terbanyak, meski Amerika masih menjadi negara nomor satu untuk urusan Twitter. Daftar akunnya mudah sekali tinggal signup saja.

Oke selamat bertwitter ria.

Kamis, 08 Maret 2012

Cara Memasang Tag Permalink di Bawah Postingan




Manfaat memasang tag permalink artikel di setiap postingan ini selain untuk SEO on page juga kita memberikan penjelasan kepada pembaca artikel tentang alamat permalink, serta judul tersebut. Memasang permalink di setiap postingan sangat bermanfaat untuk menambah internal link dalam postingan, yang tentunya dengan adanya permalink ini akan membuat postingan kita lebih Seo Friendly.

Bagaimana cara memasang tag permalink di psotingan :
Masuk ke akun blogger sobat
Kemudian langsung saja menuju ke halaman Edit HTML
Cari kode ]]></b:skin>
Lalu pastekan code di bawah ini tepat di atas kode ]]></b:skin>
.permalink
{border: 1px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}
.strikpermalink a
{background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;}
Cari lagi kode <data:post.body/> (mungkin sobat akan menemukan 2 kode tersebut, pilih kode yang kedua)
Jika sudah di temukan, ganti kode tersebut dengan kode dibawah ini
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
<div class='permalink'>
<center><small>Anda sedang membaca artikel <strong><u><data:blog.pageName/></u></strong> dan artikel ini url permalinknya adalah <strong><data:post.url/></strong></small></center><center><small>Semoga artikel <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> ini bisa bermanfaat.</small></center></div>
<b:else/>
<p><data:post.body/></p>
</b:if>
Save dan lihat hasilnya.
Sekarang tag permalink sobat sudah terpasasng dibawah postingan.. Cara Memasang Tag Permalink di Bawah Postingan

Selamat mencoba...!!!