Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Tuesday, September 6, 2011

Cara Membuat/Memasang Widget Top Komentator Berbentuk Cloud

top komentator berbentuk cloudCara Membuat/Memasang Widget Top Komentator Berbentuk Cloud - Pada tutorial blog kali ini kita akan mempelajari tentang cara membuat/memasang widget top komentator berbentuk cloud.

Widget Top Komentator Berbentuk Cloud yang satu ini sudah banyak digunakan oleh kalangan blogger yang tentunya ingin memiliki komentar banyak. Sama halnya blog Deny ini juga memasang widget top komentator berbentuk cloud ini karena saya memiliki alasan tersendiri mengapa memasang widget top komentator.

Widget top komentator ini sangat berbeda dengan versi sebelumnya yaitu widget top komentator yang hanya menggunakan daftar. Penempatan daftar yang vertikal seperti itu tidak terlalu menghemat tempat, berbeda sekali dengan top komentator berbentuk cloud yang satu ini mengandalkan bentuknya memang bisa dikatakan menghemat tempat. Widget seperti ini juga memudahkan pengunjung untuk melihat dan menarik simpatinya untuk berkomentar lebih banyak lagi agar tampil di widget top komentator blog anda. Selain itu, data pada widget top komentator berbentuk cloud ini juga lebih akurat dan tidak memberatkan blog (baca: optimalkan kecepatan blog).

top komentator cloud

Selain memberikan backlink untuk pengunjung dengan widget top komentator, widget ini juga berfungsi sebagai memberikan traffic bagi pengunjung itu sendiri, dan yang paling khusus adalah memperkuat tali persaudaraan antar sesama blogger sehingga terjaring saling kunjung atau disebut pengunjung setia (baca: tips mendapatkan pengunjung setia). Anda berminat memasang widget top komentator berbentuk cloud ini di blog anda? ikuti langkah-langkahnya berikut ini:

1. Login ke akun blogger anda
2. Pergi ke menu rancangan > elemen laman
3. Klik add widget/tambah widget (sesuaikan posisinya), lalu klik HTML/JavaScript dan isikan kode berikut pada kolom yang tersedia:
<!-- Top Commentators Cloud Start -->
<div style="text-align:justify;line-height:1.2;"><script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max){
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);}</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://bloganda.blogspot.com
&Exclusions=Anonymous,Deny Arya Wiranata
&ShowHowMany=10
&Order=alphabet
&_callback=cCloud&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script><br/>
<span style="font-size: 8px;">Widget by <a href="http://daw-xp.blogspot.com/2011/09/membuat-widget-top-komentator-cloud.html" title="cara membuat/memasang widget top komentator berbentuk cloud">DAW-XP</a></span></div>
<!-- Top Commentators Cloud End -->
Keterangan:
  • Hapus tulisan yang berwarna merah jika sobat tidak ingin menampilkan jumlah komentar.
  • Angka 10 adalah jumlah top komentator di blog anda.
  • Ganti http://bloganda.blogspot.com dengan url blog anda.
  • Anonymous,Deny Arya Wiranata (dua nama) adalah nama-nama yang tidak ingin ditampilkan dalam top komentator anda, anda dapat mengubahnya dengan nama anda sendiri ketika berkomentar (besar kecilnya huruf berpengaruh).
  • Alphabet adalah urutan top komentator berdasarkan abjad atau huruf, silahkan ganti dengan "frequency" jika ingin mengurutkannya berdasarkan banyaknya komentar.

Sekian dulu postingan saya hari ini mengenai cara membuat/memasang widget top komentator berbentuk cloud. Semoga setelah anda memasang widget top komentator ini blog anda semakin ramai dan banyak komentarnya. Amin, semoga bermanfaat.

Tuesday, June 14, 2011

Cara Menambah Tombol Google +1

Tombol +1Cara Menambah Tombol Google +1 - Beberapa hari yang lalu Google menambahkan fitur terbarunya, yaitu +1 Button atau Tombol +1. Sebelum kita membahas lebih jauh tentang >cara menambah tombol google +1 lebih baik kita harus mengetahui pengertian dari tombol +1.

Tombol Google +1 adalah istilah singkat untuk "ini lumayan keren" atau "Anda harus melihat ini". Klik +1 untuk memberikan cap persetujuan Anda pada sesuatu secara publik. +1 yang Anda berikan dapat membantu teman, kenalan, dan orang lain yang ada di web menemukan barang terbaik sewaktu mereka menelusuri. Dengan tombol ini, berarti anda setuju untuk memberikan penilaian tentang suatu artikel atau halaman di blog orang lain.

Dengan adanya fasilitas ini, diharapkan nantinya hasil pencarian di Google akan lebih relevan dan sangat membantu user, selain itu, kita sebagai pengguna Google pun akan lebih bisa  menghemat waktu dalam mencari sesuatu atau data di Google apabila hasil pencarian benar-benar sesuai dengan yang kita harapkan.

Seperti yang kita ketahui, saat ini untuk mencari sebuah data atau suatu informasi saja sangat sulit sekali dikarenakan banyaknya blogger yang menggunakan AGC. Tapi, kita juga tidak bisa main hakim sendiri untuk membenci mereka yang menggunakan AGC, karena itu sudah menjadi pilihan mereka.

DEMO - Di bawah sudah ada 4 style tombol +1, semua dapat kamu coba di blog kamu!



Jika sobat berminat untuk menambahkannya pada web atau blog sobat, lihat tutorialnya di bawah ini.

Menambah +1 di Tombol Share Awal Blogger
Ini cara praktis jika kamu ingin menambah tombol +1 di blog kamu. Dengan cara ini tanpa menambah kode apapun maka jika diaktifkan maka secara otomatis tombol +1 akan ditambah di postingan kamu. Berikut adalah screenshot atau gambar dari +1 di tombol share awal blogger:

Tombol Share

Untuk menambah tombol +1 di blog anda, anda harus mengaktifkan tombol share di Blogger. Untuk itu, pergi ke Rancangan > Elemen Lama di Blogger dashboard anda, cari area posting blog, klik edit, dan centang "Tampilkan Tombol Berbagi". Jika Anda sudah mengaktifkan tombol Share, tombol +1 secara otomatis akan muncul sebagai pilihan baru di postingan anda.

Tombol +1

Sekarang anda bisa menggunakan tombol +1 otomatis dengan hanya mengaktifkan tombol share di Blogger.

Menambahkan Tombol +1 di Semua Blog
Anda bisa mengambil kode tombol dari +1 untuk dipasang di blog anda melalui Google +1 For Webmasters.

Ada 4 ukuran tombol +1 yang dapat anda gunakan untuk dipasang di blog anda. Di kode tersebut ada pesan "Tempatkan tag ini di bagian head atau tepat sebelum tag body penutup". Kode pertama letakkan kodenya sebelum kode </head> dan yang kode kedua letakkan dimana anda ingin meletakkan tombol +1 di blog anda.

Menambahkan Tombol +1 di Bawah dan di Atas Postingan Blogger
Mari lihat tempat dimana anda menambahkan kode tombol +1 di Blogger.

Anda dapat pergi ke halaman +1 for webmasters untuk mendapatkan tombol +1 google kode, namun saya menyediakan kodenya untuk anda.

Menambah Kode
Kode ini hanya perlu ditambahkan sekali saja. Lihat pada kode dengan pesan Tempatkan tag ini di bagian head atau tepat sebelum tag body penutup" di halaman +1 for webmasters. Lihat di bawah:

Pergi ke halaman Rancangan > Edit HTML > Cari kode berikut di bawah ini (gunakan CTRL dan F untuk mencari kodenya):

</head>

Copy and paste kode tersebut di atas / sebelum kode </head> dan simpan template anda.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
Di atas adalah kode yang anda dapat tambahkan. Di bawah ini adalah kode ukuran tombol +1 dan anda dapat memilihnya sesuai keinginan anda.


Tombol +1 Kecil



Kode tombol kecil

<g:plusone size="small"></g:plusone>

Tombol +1 Sedang



Kode tombol Sedang

<g:plusone size="medium"></g:plusone>

Tombol +1 Standar



Kode tombol standart
<g:plusone></g:plusone>

Tombol +1 Besar



Kode tombol besar

<g:plusone size="tall"></g:plusone>

Menambah ke Sidebar Blogger
Pergi ke Halaman Rancangan > Klik Tambah Gadget> Pilih Html/Javascript dan paste kode untuk tombol +1 di kolom yang tersedia.

Menambah Tombol +1 di Atas Postingan Blogger
Pergi ke Halaman Rancangan > Edit HTML > Centang Expand Widget Templates.

Cari kode berikut di bawah ini (gunakan CTRL dan F untuk mencari kodenya):
<div class='post-header-line-1'>
Paste kode tombol +1 anda di sebelum / di atas kode <div class='post-header-line-1'> dan simpan template anda.

Menambah Tombol +1 di Bawah Postingan Blogger
Pergi ke Halaman Rancangan > Edit HTML > Centang Expand Widget Templates.

Cari kode berikut di bawah ini (gunakan CTRL dan F untuk mencari kodenya):
<div class='post-footer-line post-footer-line-1'>
Paste kode tombol +1 anda di sesudah / di bawah kode <div class='post-footer-line post-footer-line-1'> dan simpan template anda.

Update 20072011: Google sekarang mendirikan jejaring sosial baru yang bernama google plus atau google+. Silahkan baca artikel Apa itu Google Plus? untuk mengetahui details mengenai google plus tersebut. Untuk cara daftarnya silahkan baca artikel cara daftar google plus.

Sekian tutorial mengenai cara menambah tombol google +1 dan semoga anda yang membacanya dapat mengerti tentang coretan Deny ini. Semoga bermanfaat

Tag : Tombol +1, Tombol Google +1, Cara Menambah Tombol Google +1, Menambah Tombol Google +1, Membuat Tombol Google +1, Menambahkan Tombol Google +1, Google +1, Google +1 Button, Menampilkan Tombol +1, Tombol +1 Blog.

Sunday, May 29, 2011

Membuat Navigasi Breadcrumb Di Blogspot

Navigasi Breadcrumb
Navigasi Breadcrumbs adalah sebaris tautan internal pada bagian atas atau bawah laman yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke laman dasar dengan cepat. Banyak breadcrumbs memiliki laman yang paling umum (biasanya laman dasar) sebagai tautan pertama dan paling kanan dan memuat bagian yang lebih spesifik keluar ke sisi kanan.

Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage.


Ada 3 manfaat/kegunaan dari navigasi breadcrumb, yaitu:
  • Memperindah tampilan halaman/artikel.
  • Memudahkan pengunjung dalam menelusuri blog.
  • Mengoptimalkan halaman di search engine (mesin pencari).
Yang terpenting dari 3 hal di atas tentu adalah "mengoptimalkan halaman di search engine" atau sering disebut SEO. Bagi yang belum mengetahui mengenai SEO, silahkan lihat artikel apa itu SEO.

Cara Membuat Navigasi Breadcrumbs di Blogspot:
1. Masuk ke dashboard > Design/Rancangan > Edit HTML, jangan lupa centang (check) "Expand Widget Templates" di pojok kanan atas kotak edit HTML.
2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:
.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}
3. Cari (Ctrl+F) <b:includable id='main' var='top'>, lalu hapus kode tersebut dan ganti dengan kode berikut:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
4. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

Selamat Mencoba!

Begitulah Kiranya Step by Step Cara Membuat Menu/Navigasi Breadcrumb di Blogger/Blogspot

Monday, May 9, 2011

Cara Membuat Widget Top Komentator

Top Komentator
Cara Membuat Widget Top Komentator - Banyak cara dilakukan untuk memancing orang lebih sering berkomentar. Salah satunya adalah dengan membuat widget top komentator terbanyak. Dengan adanya widget top komentator ini, si pengkomentar juga akan untung karena namanya dan bonus link ke blognya akan tampil di halaman utama. Bagi pemiliki blog ini menguntungkan karena widget ini memacu blogger-blogger lain untuk terus berlomba menjadi yang terbanyak berkomentar guna mendapat tempat di widget.

Selain itu widget top komentator ini juga berfungsi menampilkan daftar link komentar pengunjung yang paling banyak berkomentar di blog kita secara berurutan, sesuai dengan jumlah komentarnya. Selain itu widget ini juga memberikan keuntungan bagi kedua belah pihak (kayak timbal balik aja), yaitu si komentator dan si pemilik blog. Link Si komentator akan ditampilkan pada widget tersebut jika berkomentar paling banyak, Sedangkan Si pemilik blog dapat mengukur baik tidaknya posting tersebut, sehingga lebih mudah untuk memperbaiki posting-posting berikutnya.

Bagi yang ingin memasangnya, instalasi sangat mudah. Ikuti cara di bawah ini:

1. Login ke akun blogger sobat
2. Klik menu Rancangan
3. Klik Add Gadget/Tambah Gadget
4. Pilih HTML/Java Script, masukkan kode berikut ini:
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=a55cb97ebb368bb1b89b7f6bdeb35336&url=http%3A%2F%2Fdaw-xp.blogspot.com &num=5&filter=Deny Arya Wiranata" type="text/javascript">
</script>
Keterangan :
- Ganti kode yang berwarna hijau dengan url blog Anda
- Ganti kode yang berwarna biru dengan jumlah komentator yang ingin ditampilkan
- Ganti kode yang berwarna merah dengan nama Anda (fungsinya untuk mem-blok nama anda untuk ditampilkan di widget ini)
5. Simpan, dan lihat hasilnya!

Mudah kan? Semoga dengan adanya artikel ini bisa memacu pengunjung untuk berkomentar di blog Anda!

Kiranya Begitulah Step by Step Cara Membuat Widget Top Komentator


Semoga Bermanfaat

Sunday, May 8, 2011

Cara Membuat Widget Translator Berbentuk Bendera

Translator
Hhmm, posting lagi, posting lagi, itulah keseharian blog DAW-XP. Menanggapi request dari sobat @setiawan yang meminta untuk script widget translator yang ada pada blog ini. Nah, kali ini lah kita akan membahasnya.

Sebagian blogger yang mendapatkan traffic juga pasti menggunakan widget translator sebagai penerjemah online di konten blognya. Blog tersebut sendiri akan merasa lebih lengkap jika menggunakan widget ini karena dianggap fiturnya semua ada. Disini, kita akan menggunakan translator dari Google Translate.

Lalu, apakah translator itu sendiri?

Google Translate (Google Terjemahan) adalah layanan yang disediakan oleh Google Inc. untuk menerjemahkan bagian teks atau halaman web dalam satu bahasa ke bahasa lain. Untuk beberapa bahasa, pengguna diminta untuk memberikan terjemahan alternatif, seperti untuk istilah teknis, yang akan dimasukkan untuk pembaruan dalam proses penerjemahan selanjutnya.

Sobat blogger bisa lihat di sebelah kiri atas blog saya yang saya pasang fasilitas google translate tersebut. Silahkan diklik gambar bendera mana untuk ganti bahasa yang sobat inginkan, maka blog ini akan berubah sesuai dengan bahasa yang sobat inginkan.

Cuma masalahnya terjemahan bahasa yang kita inginkan terkadang agak membingungkan, maklum yang menterjemahkannya adalah mesin….hehehe…

Cara pasang google translate ini juga cukup mudah koq, untuk memasangnya silahkan ikuti cara di bawah ini:
Untuk Blogspot

1. Login ke akun blogger sobat
2. Setelah itu masuk ke menu Rancangan
3. Pada tab Elemen Laman, klik Add a Gadget/Tambah Gadget
4. Pada jendela yang terbuka, gerakan mouse ke bawah lalu klik HTML/Javascript
5. Isikan kode beriku pada kolom yang ada:

6. Save/Simpan, dan lihat hasilnya!

Untuk Wordpress
  1. Login ke blog wordpress.com Anda
  2. Setelah masuk di dashbor, Anda pilih widget pada menu tampilan
  3. Pada menu widget, Anda tarik widget “Teks” yang biasa untuk memasukkan teks biasa atau kode HTML ke barisan sidebar
  4. Lalu, isi widget “teks” dengan kode HTML google translate berikut:
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|en&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/english_thumb3.png” title=”English”>daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/chinese-simplified_thumb1.png” title=”Chinese”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|ko&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/korean_thumb1.png” title=”Korean”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|fr&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/french_thumb5.png” title=”France”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|ja&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/japanese_thumb1.png” title=”Japanese”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|ru&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/russian_thumb1.png” title=”Russian”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|es&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/spain_thumb1.png” title=”Spain”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|ar&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/arabic_thumb1.png” title=”Arabic”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|it&amp;u=http://daw-xp.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/italian_thumb1.png” title=”Italy”>
<a href=”http://translate.google.com/translate?hl=id&amp;langpair=id|pt&amp;u=http://fikriyansyah8.wordpress.com/”> <img src=”http://fikriyansyah8.files.wordpress.com/2011/03/portuguese_thumb1.png” title=”Portuguese”>


Keterangan:
Ganti alamat yang berwarna merah dengan alamat blog Anda.

SETELAH DI COPY-PASTE GANTI TANDA PETIK (“) DENGAN TANDA PETIK (“) JUGA, KARENA TANDA PETIK (“) TIDAK BERFUNGSI DENGAN BAIK SETELAH DI PASTE-KAN SEHINGGA SETELAH DI PASTE TERKADANG KODENYA HILANG ATAU BENDERANYA TIDAK TAMPIL JADI JANGAN LUPA MENGGANTI TANDA PETIKNYA.


Referensi from yang Wordpress

Saya rasa itu cara yang paling mudah membuat widget translator berbentuk bendera di blog. Tunggu versi selanjutnya hanya di DAW-XP.

Begitulah Kiranya Step by Step Cara Membuat Widget Translator Berbentuk Bendera


Semoga Bermanfaat

Saturday, May 7, 2011

Membuat Kotak Berlangganan Via Email

Berlangganan Lewat Email
Membuat Kotak Berlangganan Via Email - Blog yang mempunyai banyak pengunjung pasti menggunakan widget berlangganan via email di blog anda. Widget berlangganan via email/subscribe via email ini memudahkan pengunjung agar dapat berlangganan artikelnya setiap hari melalui email. Setelah pengunjung berlangganan, maka tiap ada artikel terbaru dari blog itu akan dikirimkan langsung melalui email.

Selain itu, blog yang mempunyai fitur berlangganan via email ini terkesan menarik dan mempunyai kemampuan tinggi dalam mengelola blognya. Mengapa tidak, karena dia selalu mengutamakan kenyamanan pengunjung dalam blognya (baca: buatlah pengunjung blog anda nyaman), bukan mempercantik blog dengan widget-widget yang tidak penting, seperti jam dan tanggal (baca: 5 widget pilihan untuk blog) serta tidak akan memberatkan berat blog (baca: optimalkan kecepatan blog).

Cara membuatnya mudah sekali, untuk itu jika sobat mau membuatnya silahkan ikuti cara di berikut:

1. Masuk dan Login ke Situs feedburner.com menggunakan akun google kamu

2. Setelah masuk kamu harus mengisi alamat feed blog kamu terlebih dahulu misalnya
http://daw-xp.blogspot.com/feeds/posts/default
Ganti tulisan daw-xp dengan alamat blog kamu

3. Check Box Im a Podcaster! kamu centang bila blog kamu isinya video

4. Tekan tombol Next terus hingga muncul gambar berikut yang menandakan kita telah sampai pada Dasboard Feeds kita:
Berlangganan Lewat Email

5. Kemudian tekan menu Publicize lalu pilih Menu Email Subscribetions

6. Dan Kemudian tekan Activate

7. Jika kamu menggunakan blogspot, ubah type nya menjadi blogger
Berlangganan Lewat Email

8. Jika sudah, kopy kode pada kolom yang terdapat pada gambar, lalu Taruh Codenya di blog kamu dengan cara ke menu Layout--->Page Elements lalu Add a Gadget dan pilih HTML/JavaScript kemudian paste code-nya

Mudahkan? Sudah kubilang :D. Kamu juga bisa memodifikasi kodenya untuk tampilan yang lebih bagus. Sekian dulu postingan dari saya, semoga dengan membuat kotak berlangganan via email ini blog anda semakin ramai dan banyak pengunjungnya. Semoga bermanfaat

Monday, April 18, 2011

Cara Membuat Recent Post Dengan Thumbnails

Cara Membuat Recent Post Dengan Thumbnails - Hari ini kita akan mempelajari tentang recent post dengan versi thumbnail atau Cara Membuat Recent Post Dengan Thumbnails.

Recent Post dengan thumnails? Sebelumnya kita harus tahu dulu thumbnails itu apa.
Thumbnails merupakan gambar atau pictures yang terpajang di media-media, contohnya widget yang sekarang kita bahas ini. Gambar yang dihiasi kata-kata dari javascript ini sangat bagus. Anda tidak akan menyesal untuk mencobanya.

Recent Post With Thumbnails


Recent post dengan thumbnails ini berbeda dengan artikel terbaru yang hanya menggunakan bullet sebagai penghiasnya (baca: Menambahkan Recent Posts + Comment Dengan Javascript). Slideshow kali ini dilengkapi dengan efek marquee/berjalan (baca: Cara Membuat Kotak Blogroll dan Efek Marquee) yang membuat blog kita semakin cantik. Dengan membuat Slide Show pada halaman blog kita, pengunjung akan lebih mudah lagi untuk menyelusuri daftar isi pada blog yang kita buat.

Tertarik membuatnya? Ikuti langkah berikut di bawah ini.
1. Login ke akun blogger sobat.
2. Lalu klik rancangan - tambah gadget - pilih HTML/Javascript.


3. Lalu masukkan kode di bawah ini di kolom tersebut.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='javascript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Reply(s)";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://daw-xp.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
 /*
 * Script dikombinasikan dari bloggerstricks.com
 * spy effect dari jqueryfordesigners.com
 * Oleh Abu Farhan (www.abu-farhan.com)
 * Modifikasi oleh daw-xp.blogspot.com
 */
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>
  • boxwidth = 300 adalah lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog.
  • text = "Reply(s)" adalah teks di belakang jumlah komentar, ganti Reply(s) sesuai keinginan, misalnya: komentar, comment(s), dll.
  • numposts = 10; adalah jumlah posting terbaru yg akan di-crawl, ganti nilainya sesuai keinginan.
  • limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai keinginan.
  • intervalspy=6000 adalah kecepatan scroll / spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

4. Save widget dan lihat hasilnya.

Selesai sudah cara membuat artikel terbaru dengan thumbnails. Bagi sobat kunjungi terus dan dapatkan artikel terbaru disini.

Selayaknya Dibaca:

Sunday, April 10, 2011

Cara Membuat Kotak Blogroll dan Efek Marque

Kotak BlogrollCara Membuat Kotak Blogroll dan Efek Marque - Membicarakan masalah efek marque dan kotak blogroll, pada posting sebelumnya saya pernah share cara membuat efek marque pada judul blog. Pada kesempatan kali ini, kita akan mempelajari cara membuat kotak blogroll dan efek marque pada blog. Apa maksudnya kotak blogroll? Kotak blogroll adalah sebuah kotak kecil yang dapat diatur ukurannya yang dalamnya berisi anchor text teman. Lalu apakah efek marque pada kotak blogroll tsb? Sama aja kok kayak kotak yang berisi anchor text namun berjalan.

Ngerti ga ya sobat semua. Kalo sobat masih belum ngerti silahkan lihat demonya disini.

Nah sudah mengerti kan? Begitulah kotak blogroll tsb. Penasaran sobat ingin membuatnya? Ikuti langkah-langkahnya berikut ini:

1. Kotak Blogroll Model Text Area


1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:
<div style="background:"white";border: 1px solid rgb(153, 153, 153); height: 100px; overflow: hidden; text-align: left; width: 200px;">
<ul>
<li><a href="url sahabat1" target="blank">title blog sahabat1</a></li>
<li><a href="url sahabat2"target="blank">title blog sahabat2</a></li>
<li><a href="url sahabat3"target="blank">title blog sahabat3</a></li>
<li><a href="url sahabat4"target="blank">title blog sahabat4</a></li>
<li><a href="url sahabat5"target="blank">title blog sahabat5</a></li>
<li><a href="url sahabat6"target="blank">title blog sahabat6</a></li>
<li><a href="url sahabat7"target="blank">title blog sahabat7</a></li>
<li><a href="url sahabat8"target="blank">title blog sahabat8</a></li>
<li><a href="url sahabat9"target="blank">title blog sahabat9</a></li>
<li><a href="url sahabat10"target="blank">title blog sahabat10</a></li>
</ul></div>
Keterangan:
- Kode width: 200px; dan height: 100px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "url sahabat1,url sahabat2, url sahabat3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.

2. Kotak Blogroll Model Marquee


Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar.  Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
1. Login ke akun blogger sobat.
2. Pilih Rancangan, lalu klik Add a Gadget.
3. Pada window yang terbuka, pilih HTML/Javascript, lalu isikan kode berikut:
<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>
 Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (Pasti udah tau artinya kan).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

Sekian dulu artikel mengenai Cara Membuat Kotak Blogroll dan Efek Marque. Anda bisa menerapkan widget ini dan diisi dengan daftar link teman-teman anda.
Selamat Mencoba ..

Thursday, April 7, 2011

Cara Membuat dan Memasang Shoutbox di Blog

Shoutbox
Shoutbox atau yang lebih dikenal dengan nama buku tamu ini telah digunakan oleh puluhan bahkan ratusan ribu blogger dunia untuk digunakan sebagai jejaring sosial hangat untuk berkomunikasi sesama blogger.

Selain itu, shoutbox ini juga digunakan untuk request sesuatu kepada sang admin ataupun untuk mengkritik bagaimana blog ini, bagaimana blog itu, dan sebagainya. Kan sudah ada kolom komentar? Buat apa susah-susah bikin shoutbox, malah bikin berat aja. Sobat pasti bertanya-tanya tentang itu. Memang kolom komentar juga dibuat dari sononya, tapi hanya untuk req atau koment terhadap artikel yang di komentarin tsb, kalo dia kritik di artikel yang bukan seharusnya, kita juga yang pusing kan.

Nah sobat blogger wajib gunain ni shoutbox. Ga terlalu berat kok buat di pasang di blog, memang kita harus perlu juga memerhatikan berat blog. Tapi shoutbox ini perlu juga lho untuk sobat lain yang ingin menyampaikan saran dan kritiknya.

Cara membuat shoutbox di blog :

1. Buka situs http://www.shoutmix.com kemudian pada halaman website tersebut anda klik CREATE YOUR SHOUTBOX NOW. Seperti pada gambar dibawah ini.
Shoutbox

2. Setelah itu anda akan dibawa ke halaman pendaftaran seperti dibawah ini, dimana pada halaman tersebut anda harus mengisi semua data yang diperlukan dengan benar.

Shoutbox

3. setelah anda mengisi data-data anda pada halaman pendaftaran tadi, kemudian anda akan diminta untuk memilih style ataupun bentuk tampilan shoutbox yang akan anda pasang pada blog anda nantinya. Seperti pada gambar dibawah ini.

Shoutbox

4. Setelah anda pilih salah satu style shoutbox seperti pada gambar di atas dan setelah anda mengisi  kode verifikasinya juga maka proses pembuatan account shoutbox anda telah selesai. Dan anda sudah bisa memasang shoutbox  dengan style yang anda pilih tadi pada blog anda.

Cara memasang shoutbox di blog :
  • Login to BloGGeR : Tulis User Name atau Alamat email kemudian tulis Password (sandi) sampeyan.
  • Dashboard (Dasbor) :Sampeyan akan di hantarkan ke halaman Dasboard. KLIK link "Layout (Tata Letak)".
  • Page Element (Elemen Laman) : Di halaman ini akan terlihat "blok-blok" desain blog kita. Terlihat ada beberapa elemen penyusun blog (Atas, tengah, samping kanan atau kiri dan bagian bawah). KLIK "Tambah Gadget" (dalam box garis terputus-putus), yang terletak di bagian samping kanan atau kiri (Sidebar).
  • HTML/Javascript : Setelah beberapa saat akan terlihat sebuah window baru yang di dalamnya terlihat beberapa jenis widget yang bisa di tambahkan ke blog sampeyan. Tarik halaman lebih ke bawah dan temukan box penambahan widget yang bertuliskan "HTML/Javascript". KLIK tepat di teks "HTML/Javascript" dan tunggu hingga muncul box tempat kode html nantinya di simpan.
  • Paste Kode Shouthbox : Box HTML/Javascript seperti di atas adalah tempat menyimpan kode css, javascript atau kode html. Copy kode shoutbox yang sampeyan dapatkan kemudian paste-kan di sini.
  • SAVE/Simpan KLIK "SAVE/Simpan". Setelah proses penyimpanan selesai, lihatlah shoutbox sampeyan dengan membuka blog.
Contoh Kode html shoutbox (dari --> www.shoutmix.com) :
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="Garyu78" src="http://www5.shoutmix.com/?Garyu78" 
width="200" height="350" 
frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?Garyu78">View shoutbox</a>
</iframe><br /><br />
<!-- End ShoutMix -->
Beberapa situs penyedia shootbox gratis :
Langsung KLIK alamat yang tertulis bila sampeyan pingin datang dan mendapatkan shoutbox!
  1. http://www.shoutmix.com
    Setelah tiba di Shouthmix.com, teruskan KLIK "Create Shouthbox" (perlu registrasi).
  2. http://www.freeshoutbox.net
    Lanjutkan dengan mengisi kolom registrasi.
  3. http://oggix.com
    KLIK "Register" di ujung kanan-atas, kemudian Kembali KLIK "Register" (kanan-atas). Bila mau sekali KLIK "Register", KLIK saja di sini.
  4. http://www.myshoutbox.com
    KLIK link "JOIN NOW!" (di kolom sebelah kiri), kemudian lakukan registrasi. Tampilan shoutbox lumayan cantik!
  5. http://www.sbox.ws
    Silahkan langsung isi kolom registrasi.
  6. http://www.shout-box.com
    KLIK "SignUp" untuk registrasi.
  7. http://www.yellbox.com
    Langsung lakukan "Registrasi".
  8. http://shoutbox.widget.me
    Langsung ambil "kode html shoutbox" tanpa proses registrasi.
  9. http://www.shoutbox.us
    KLIK "JOIN NOW!" untuk dapatkan widget shoutbox.
  10. http://site.bumpin.com/.
  11. http://free-shoutbox.net.
    Setelah terbuka halaman shoutbox.net, KLIK "Register Here"

Monday, April 4, 2011

Menambahkan Random Posts Widget

Sebelumnya Saya pernah sharing cara menambahkan recent posts dengan javascript. Namun kali ini kita akan mempelajari cara menambahkan random posts widget. Random posts sangat berbeda sekali dengan recent posts. Recent posts hanya menampilkan artikel terbaru yang tentunya dimuat hanya artikel baru tsb, sedangkan random posts akan memuat artikel yang acak, dan menampilkan artikel yang baru maupun lama serta artikelnya akan sirih berganti dan bisa menimbulkan pageviews yang tinggi.





Contohnya bisa sobat lihat pada gambar di bawah ini.





Berikut ini adalah script untuk menampilkan postingan secara acak di blogspot , script ini saya peroleh dari blog bloggerstop


<script type="text/javascript">

var acakarray = new Array();var l=0;var flag;

var numofpost=5;function randomposts(json){

var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}

if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');

for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

document.write(item);}}

}document.write('</ul>');}

</script>

<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>



Catatan:
Angka 5 pada numofpost=5 adalah jumlah postingan yang akan ditampilkan secara acak ,bisa diganti dengan kebutuhan anda.

Prosedur yang harus anda lakukan:
1. Login ke blogger
Pilih Tata Letak , Elemen Halaman , Tambah Gadget ,pilih HTML/Javascript
Masukkan kode javascript di atas ke dalam gadget HTML /Javascript.

Sunday, April 3, 2011

Cara Membuat Recent Post Berdasarkan Label dan Thumbnail

Cara Membuat Recent Post Berdasarkan Label dan Thumbnail
Cara Membuat Recent Post Berdasarkan Label dan Thumbnail - Pada tutorial kali ini, Saya akan berbagi cara membuat recent post berdasarkan label dan thumbnail. Widget ini akan otomatis menampilkan update posting kita hanya pada label/kategori yang tentunya bisa sobat pilih sendiri. Contoh bisa sobat lihat pada gambar di samping ini.

Nah kalo sobat blogger tertarik buat masang widget ini, gampang koq. Tinggal ikuti tutorial berikut ini…

1. Seperti biasa, login ke akun blogger sobat
2. Pergi ke tab rancangan >> edit html
3. EXPAND TEMPLATE WIDGET
4. cari kode ]]></b:skin>.

(*Gunakan F3 di keyboard untuk mempermudah pencarian)
5. Copy paste kode di bawah ini sebelum kode No.4

img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

6. Scroll ke bawah dan temukan kode </head>
7. Copy paste kode di bawah ini sebelum kode No.5

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKuy9Cgou97dxvfxfhu8tPwX86916LlMXxMzgg7_Xvq4aKVEnE-s-2TvIpaozoIeuHWbqqBeqctkdXcK5YhWAGtr8CkInRwjtXLnKhxCjHdAikGRlZ_nrXFUO0BNKtGRUwU0zeNgYkQzp/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

8. SAVE template.sampai disini belum selesai.
9. masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript
10. Masukkan kode di bawah ini kedalam contents


<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
11. Untuk kategori/label yang berspasi seperti Belajar SEO Blogspot, Blog SEO dsb, ganti lah spasi dengan kode %20. Contoh penulisan lengkap:
http://daw-xp.blogspot.com/feeds/posts/default/-/Belajar%20SEO%20Blogspot
atau,
http://daw-xp.blogspot.com/feeds/posts/default/-/Blog%20SEO
12. Jika sudah selesai masukkan kodenya, jangan lupa sobat blogger masukkin judul/title widgetnya.
13. Klik Save / Simpan.
14. Selesai! Semoga bermanfaat…


Jika ada yang kurang dimengerti, silahkan tanyakan dengan tinggalkan komentar.

Selayaknya Dibaca:

Thursday, March 31, 2011

Cara Menambahkan Recent Posts + Comment Dengan Javascript

Cara Menambahkan Recent Posts + Comment Dengan Javascript
Cara Menambahkan Recent Posts + Comment Dengan Javascript - Biasanya kebanyakan dari sobat blogger membuat recent posts dan recent comment pasti menggunakan fasilitas dari gadget blogger. Cara itu memang mudah dan simple, tapi sobat tidak akan bisa membuat lebih dari 5 dengan menggunakan fasilitas blogger, makanya dengan javascript ini dimudahkan untuk membuat recent posts + recent comment ini.

Selain itu, kamu juga bisa menambahkan recent posts / recent comment ini pada tabview widget kamu seperti pada kotak tabview di samping di Blog Deny ini.

Dibanding cara pertama (menggunakan Gadget Blogger), cara kedua ini memiliki kelebihan dimana jumlah judul posting atau komentar dapat diatur sekehendak kita (bisa lebih dari 5). Untuk menggunakannya kamu bisa mengikuti langkah-langkah berikut:
  • Login ke akun blogger kamu

  • Masuk ke tab rancangan, elemen laman

  • Setelah masuk ke Elemen Halaman, klik Tambah Gadget.

  • Setelah itu pilih HTML/JavaScript untuk ditambahkan, seperti nampak pada gambar berikut:
    html

  • Kemudian masukkan script berikut dan ubah NamaBlogKamu dengan nama blog kamu sendiri:


Kode untuk Recent Posts:
<script style="text/javascript" src="http://my-project-tabview-tab.googlecode.com/files/recents-posts.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogKamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
Keterangan variabel:
- numposts = 10; artinya 10 posting yang ditampilkan (maksimal 25 posting)
- showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
- showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
- numchars = 100; artinya banyaknya karakter (huruf) untuk ringkasan posting yang ditampilkan adalah 100 huruf.
- standardstyling = true; artinya menggunakan type standard.

Jika ternyata tidak muncul bullets pada setiap judul Recent Posts kamu (karena setiap template selalu berbeda), maka tambahkan perintah <ul> pada script terakhir dan ditutup dengan </ul> (lihat contoh pada script Recent Comments yang kedua).

Kode untuk Recent Comments:
<script style="text/javascript" src="http://my-project-tabview-tab.googlecode.com/files/recentc-comments.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Keterangan variabel:
var numcomments = 10; artinya 10 komentar yang ditampilkan.
var showcommentdate = true; artinya tanggal komentar ditampilkan.
var showposttitle = true; artinya menampilkan judul posting yang dikomentari.
var numchars = 100; artinya banyaknya karakter (huruf) komentar yang ditampilkan adalah 100 huruf.

Jika Recent Comments kamu ingin menggunakan bullets, seperti pada Recent Comments pada blog ini, gunakan script berikut:
<script style="text/javascript" src="http://my-project-tabview-tab.googlecode.com/files/recentc-commentsbullet.js"></script>
<script style="text/javascript">
var numcomments = 10;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<ul>
<script src="http://NamaBlogKamu.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
Setelah memasukkan kode script dan melakukan editing variabel yang disesuaikan dengan keinginan kamu. Lakukan Preview (Pratinjau) untuk melihat hasilnya. Jika sudah OK, simpan hasil kerjaan kamu. Sekian dulu postingan saya mengenai membuat recent posts + recent comment, semoga bagi kamu yang ingin membuat recent comment bisa terbantu dengan postingan ini.

Nah, selesai dah. Selamat mencoba.....

Selayaknya Dibaca:

Tuesday, March 29, 2011

Recent Artikel Blog di Facebook Melalui NetworkedBlogs

Networkedblogs, sobat blogger tentu sudah tidak asing lagi dengan aplikasi yang satu ini. Aplikasi ini makin diramaikan dengan adanya Facebook yang sebagai sarana dari aplikasi ini.

NetworkedBlogs sebenarnya hampir serupa dengan widget Google Foolowers atau Google Friend Connect. Seingat saya MyBlogLog pun punya widget serupa. Intinya widget semacam ini gunanya bagi pembaca blog adalah mengingatkan blog mana saja yang pernah kita kunjungi dan sukai. Bagi Blogger, widget ini tentu berguna untuk mengetahui siapa saja yang menyukai dan mengikuti blog sobat. Namun jika kita ingin follow blog di networketblogs kita hanya memerlukan akun facebook saja dibanding Google Friend Connect yang mengharuskan untuk memiliki akun blogger.

Sobat blogger kebanyakan menggunakan aplikasi ini untuk hanya sebagai followers di Facebook, padahal sebenarnya networkedblogs ini bisa digunakan sebagai sarana promosi di Facebook juga lho, caranya yaitu dengan cara menampilkan artikel di profile Facebook kita. Dengan begitu, teman-teman sobat bisa melihat adanya artikel terbaru dari blog sobat tsb.

Untuk supaya aplikasi NetworkedBlogs dapat memunculkan artikel-artikel terbaru dari blog kita di dalam status Fecebook, kamu harus melakukan pen-setting-annya terlebih dahulu . Berikut adalah cara untuk melakukan settingnya pada aplikasi NetworkedBlogs:

Settingan Bagi Yang Belum Pasang Aplikasi NetworkedBlogs
Bagi kamu yang belum menambahkan aplikasi NetworkedBlogs, kamu dapat mengikuti langkah-langkah berikut: 
1. Login terlebih dahulu ke akun Facebook kamu.
2. Setelah itu pada pencarian di header Facebook kamu (di atas), ketik NetworkedBlogs lalu klik pencarian. Lalu klik aplikasi networkedblogs.

3. Selanjutnya klik Register a Blog, untuk mendaftarkan blog kamu.


4. Isi formulir yang disediakan. Jika sudah selesai, klik Next.
5. Pada pertanyaan "Are you the author this blog?", jawab Yes.
6. Pada pertanyaan "How do you like to verify ownership of this blog?", pilih Use our widget to verify ownership.
7. Selanjutnya klik use widget, lalu copi kode HTML untuk verifikasi dan paste pada gadget HTML/JavaScript blog kamu.

8. Setelah selesai di-paste pada gadget blog kamu, klik Verify Widget.
(Jika tidak diperlukan, kamu dapat menghapus widget ini sesudah author terverifikasi).

9. Setelah muncul verification successful, lalu klik Next.
10. Selanjutnya syndication pada menu sebelah kanan.
11. Selanjutkan klik Add Facebook Target dan pilih facebook profile.


12. Klik 1x pada gambar facebook profile kamu (contoh di atas), lalu klik publish test. Selesai deh!

Pada nomor 11, kamu dapat menambah tidak hanya di Facebook, namun juga dapat menambah melalui Twitter, Add Twitter Target ada di sebelah menu facebook target.

Settingan Bagi Yang Sudah Pasang Aplikasi NetworkedBlogs
Bagi kamu yang sudah menambahkan aplikasi NetworkedBlogs, namun belum men-setting syndication-nya sehingga artikel-artikel terbaru kamu tidak muncul di status Facebook, kamu dapat mengikuti langkah-langkah berikut:
1. Login terlebih dahulu ke akun Facebook kamu.
2. Setelah itu pada pencarian di header Facebook kamu (di atas), ketik NetworkedBlogs lalu klik pencarian. Lalu klik aplikasi networkedblogs.

3. Selanjutnya klik Profile pada navbar menu, lalu klik blog kamu.


3. Selanjutnya sama seperti cara pada nomor 10, 11 dan 12, yaitu klik syndication di menu sebelah kanan dan bla bla bla.
4. Selesai.

Segitu aja dulu sob, semoga bermanfaat ..