Cara Membuat Recent Post Bentuk Grid Thumbnail

Ada berbagai bentuk tampilan widget recent post. Ada yang hanya judul post, disertai ringkasan, dan ada pula yang disertai thumbnail. Semua widget recent post yang beragam itu memberikan keuntungan. Blogger bisa memilih tampilan dan sesuai dengan blognya.

Recent post adalah widget yang menampilkan post-post terbaru dari blog. Salah satu bentuk recent post adalah Grid Thumbnail, yaitu widget yang menampilkan galery thumbnail dari post terbarunya. Jadi hanya gambar atau foto dari post terbaru yang ditampilkan.

Widget recent post model grid thumbnail ini cocok untuk blog yang berupa photoblog. Walau blog dengan tema apapun juga bisa digunakan. Efek visual foto, memberikan pengalaman baru pada pengunjung blog dalam melihat post dari foto atau gambar ilustrasinya.

Cara Membuat Recent Post Bentuk Grid Thumbnail
1. Login ke blogger.com
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<div id='bp_recent'></div>
        <script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
        <script style='text/javascript'>
        var numberOfPosts = 10;
        var showPostDate = false;
        var showSummary = false;
        var titleLength = 0;
        var showCommentCount = false;
        var showThumbs = true;
        var showNoImage = true;
        var imgDim = 70;
        var imgFloat = 'left';
        var myMargin = 3;
        var mediaThumbsOnly = true;
        var showReadMore = false;
        </script>
        <script src='http://kurniasepta.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

5. Ubah kurniasepta.blogspot.com dengan URL blogmu sendiri. Angka 10 adalah banyaknya thumbnail post terbaru yang ditampilkan. Sedangkan angka 70 adalah ukuran dari thumbnailnya. Kamu bisa menyesuaikan tampilannnya dengan blogmu sendiri.
6. Simpan jika sudah selesai.
selengkapnya>>

Membuat Kotak Komentar Facebook dan Blogger

Mungkin kamu pernah menemui blog yang kotak komentarnya pakai facebook dan blogger. Nah, sekarang kita akan belajar membuat kotak komentar dan blogger jadi satu dalam bentuk tab. Tab komentar facebook berdampingan dengan kotak komentar dari bawaan blog, yaitu blogspot atau blogger.com

Dulu, kita telah belajar bersama untuk membuat kotak komentar blog hanya dengan memakai kotak komentar dari facebook. Salah satu manfaat memakai kotak komentar facebook adalah percakapan tentang blog tidak hanya sebatas di blog tapi bisa juga di bawa ke laman facebook, sehingga semakin mudah blog kita menyebar di facebook.

Dengan membuat pilihan kotak komentar, akan bisa lebih memudahkan pengunjung blog untuk memberikan tanggapan terhadap postingan blog. Karena tidak semua orang punya akun blogger ataupun blog. Tetapi hampir semua orang punya akun facebook, dengan demikian pembaca akan lebih mudah meninggalkan komentar.

Cara Membuat Komentar Facebook dan Blogger
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode ]]></b:skin>
4. Taruh kode berikut di atas ]]></b:skin>

.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px;cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}

5. Kemudian cari kode </head>
6. Taruh kode berikut di atas kode di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='IDfacebook' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();}
</script>

7. Ganti IDfacebook dengan ID sendiri (facebook.com/IDfacebook)
8. Kemudian cari kode <div class='comments' id='comments'>
9. Kamu akan menemukan 2 kode yang sama. Letakkan kode di bawah ini tepat di bawah 2 kode tersebut

 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

10. 5 adalah banyaknya komentar yang ditampilkan dan 450 adalah lebar kotak komentar facebook.
11. Simpan Template jika sudah selesai.

Kabar terbaru dari blogspot adalah, sekarang blogger bisa mengaktifkan atau mengganti komentar bawaan dengan kotak komentar Google+. Semakin banyak pilihan kotak komentar yang bisa dipakai, karena sebuah blog sejatinya adalah komunikasi dua arah, bukan hanya konten tetapi juga percakapan (komentar).
selengkapnya>>

Cara Pasang Kotak Komentar Google+ di Blog

Cara Mengaktifkan Google+ Kotak Komentar di Blog
Google kembali mengintegrasikan Blogger.com atau blogspot dengan Google+. Para pengguna layanan blog ini bisa memakai (mengaktifkan) kotak komentar Google+ di blognya. Google memang sudah banyak mengintegrasikan blogspot dengan Google+. Di dalam menu dasbor ada tab Google+ yang mengatur cara berbagi postingan ke Google+. Belum lagi ada lencana dan tombol +1 di galeri widget blog.

Tujuan dan fungsi dari fitur baru ini adalah untuk menyediakan sarana berkomentar dan melacak percakapan yang lebih baik mengenai blog kita. Jika kita mengaktifkan layanan baru ini, kita akan dapat melihat dua jenis komentar, yaitu komentar langsung di blog, dan komentar dari Google+.

Misalnya jika kita atau seseorang telah berbagi postingan blog ke profil Google+ nya, dan ada yang mengomentari. Maka komentar dari laman Google+ itu akan muncul di blog kita. Ini membuat percakapan tentang post (blog) kita mudah diketahui dan semua komentar bisa ditampilkan.

Cara Mengaktifkan Google+ Kotak Komentar di Blog
1. Login ke akun blogger.com
2. Pilih tab/menu Google+



3. Centang (pilih) Gunakan Google+ Komentar di blog ini

Cara Mengaktifkan Google+ Kotak Komentar di Blog

4. Selasai, sekarang tampilan dan fungsi kotak komentar di blog akan berubah seperti yang yang ada di Google+.

Seperti halnya kotak komentar dari facebook, keuntungan memakai kotak komentar Google+ adalah, komentar dan blog bisa dibagikan ke profil Google+ mereka. Sehingga blog bisa dapat kesempatan untuk mendapatkan traffik (pengunjung) yang lebih banyak dari pengintegrasian kotak komentar ini.

Mampu menjawab pertanyaan atau komentar di blog adalah salah satu yang tantangan blogger saat ini. Blog bukan penyedia konten satu arah, blogger yang mampu menjaga percakapan di blognya akan mendapatkan nilai plus. Model kotak komentar yang terintegrasi dengan layanan sosial media lain akan mempermudah blogger tetap menjaga percakapan (komentar) di blognya.
selengkapnya>>

Cara Membuat Efek Tulisan Berjalan Seperti Diketik

Cara Membuat Efek Tulisan Berjalan Seperti Diketik
Enaknya ngeblog di blogspot adalah bisa mencoba berbagai trik blog, baik untuk mengoptimalkan blog ataupun memperindah tampilan blog. Dalam sebuah blog yang biasa paling dominan adalah teks atau tulisan. Ada beragam cara membuat efek-efek pada tulisan, mulai dari tulisan berkedip, link bergoyang, sampai yang akan kita pelajari hari ini yaitu membuat tulisan berjalan seperti diketik.

Tulisan dengan efek berjalan seperti diketik, sama seperti sama seperti saat kita mengetik pakai laptop. Saat jari kita menekan huruf, maka akan muncul huruf dan seterusnya. Efek ini membuat tulisan tampil huruf per huruf. Efek ini bisa dipakai untuk memikat mata pengunjung agar melihatnya, misalnya sebuah pengumuman. Untuk membuat tulisan dengan efek seperti diketik cukup mudah. Kita tinggal menyalin script berikut ini:

<script language="JavaScript">
var text="Selamat Datang di Blog Saya, Jangan Lupa Baca & Komentar!";
var delay=20;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <b><div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div></b> <script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>

Script di atas bisa dipasang di post dan juga di sidebar. Untuk di postingan, masukan dengan opsi HTML saat menulis. Sedangkan untuk sebagai widget bisa dengan saat di tata letak, pilih tambakan gadget dan pilih HTML/Java Script. Ganti tulisan yang berwarna merah dengan teks yang kamu inginkan, contohnya akan tampil seperti ini:


Jika membahas cara membuat efek tulisan seperti diketik ini jadi teringat dengan pelajaran terdahulu, yaitu membuat news tiker dari recent post blog. Karena efek yang ditampilkan sama, yaitu seperti diketik. Sudahkah kamu mencoba?
selengkapnya>>

Cara Memasang Random Post di Bawah Postingan

Cara Memasang Random Post di Bawah Postingan
Sudah banyak yang membuat random post, ada yang juga random post yang disertai thumbnail. Sekarang kita akan belajar untuk menampilkan random post di bawah postingan. Jika biasanya di bawah postingan adalah related post berdasarkan kategori, ini memiliki kelebihan dan kekurangan.

Kelebihannya related post yang ditampilkan memang benar-benar terkait dengan postingan. Sedangkan kekurangannya adalah yang ditampilkan hanya yang terbaru, sehingga kurang bisa mempromosikan postingan-postingan terdahulu. Sehingga menu postingan yang ditampilkan related post cenderung statis.

Kelebihan memasang random post di bawah postingan adalah, menu di bawah postingan akan lebih dinamis. Postingan-postingan yang terdahulu, setahun yang lalu pun bisa tampil. Secara acak judul-judul postingan akan tampil di bawah halaman yang sedang dibaca pengunjung blog kita.

Cara Memasang Random Post di Bawah Postingan
Tampilan baru edit template
Cara Menampilkan Random Post di Bawah Postingan
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode <data:post.body/>, jika blog memakai auto read more mungkin kamu akan menjumpai 3 tag kode seperti itu. Pilih yang sesuai di mana kamu biasanya menaruh widget di bawah post. Lalu taruh kode berikut di bawahnya;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3>Baca juga tulisan menarik lainnya</h3>
&lt;script type=&quot;text/javascript&quot;&gt;
var acakarray = new Array();var l=0;var flag;
var numofpost=7; function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i &lt; 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&amp;&amp;l!=0){acakarray[i++]=l;}}document.write(&#039;&lt;ul&gt;&#039;);
for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];
for(k=0; k &lt; entry.link.length; k++){if(entry.link[k].rel==&#039;alternate&#039;){var item = &quot;&lt;li&gt;&quot; + &quot;&lt;a href=&quot; + entry.link[k].href + &quot;&gt;&quot; + entry.title.$t + &quot;&lt;/a&gt; &lt;/li&gt;&quot;;
document.write(item);}}
}document.write(&#039;&lt;/ul&gt;&#039;);}
&lt;/script&gt;
&lt;script src=&quot;/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</b:if>

4. Angka 7 adalah banyaknya judul yang ditampilkan.

Keuntungan memasang random post di bawah postingan adalah untuk memberikan menu yang bersifat navigasi, sehingga selain untuk mempromosikan postingan lama bisa juga untuk menambah page view blog. Setelah selesai membaca postingan, diberikan lagi pilihan untuk membaca postingan yang lain. Random post di bawah postingan cocok untuk blog yang kontennya khusus atau satu tema bahasa, seperti blog ini.
selengkapnya>>