Tips Blog | Tutorial Blog | Belajar Blog

Tampilkan postingan dengan label Recent Posts. Tampilkan semua postingan
Tampilkan postingan dengan label Recent Posts. Tampilkan semua postingan

Memasang Text Berjalan Recent Posts di Blog

Fp002 Widget recent post biasa kita jumpai dengan model dan bentuk yang rata-rata sama, dengan kode http://kutu-blogspot.blogspot.com/feeds/posts/default maka widget default recent posts dengan mudah terpasang di blog. Ada pula widget recent posts yang disertai thumbnail atau gambar dari postingan dan beberapa widget recent posts lainnya yang bisa kita jumpai di beberapa blog yang berisi tutorial blog.

 

Agak berbeda dengan recent posts pada umumnya, recent post berikut adalah recent posts atau postingan terakhir dari blog yang berjalan atau biasa kita sebut dengan marquee. Contoh demonya bisa sobat lihat disini. Tertarik ingin memasangnya? berikut langkah singkat dan padatnya, tidak perlu backup template karena kita akan meletakkannya langsung di elemen halaman.

 

  • Pada Elemen Halaman, klik Tambah Gadget.

     

    image
  • Kemudian pilih yang HTML/Javascript.
  • Masukkan kode berikut kedalamnya :

    <script type='text/javascript'>
    //<![CDATA[
    function RecentPostsScrollerv2(json)
    {
                var sHeadLines;
                var sPostURL;
                var objPost;
                var sMoqueeHTMLStart;
                var sMoqueeHTMLEnd;
                var sPoweredBy;
                var sHeadlineTerminator;
                var sPostLinkLocation;
                try
                {           
                sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";           
                if( nWidth)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
                }
                else
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
                }

                if( nScrollDelay)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
                }
                if(sDirection)
                {
                    sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
                    if(sDirection == "left" || sDirection =="right")
                    {
                        //For left and right directions seperate the headilnes by two spaces.
                        sHeadlineTerminator = "&nbsp;&nbsp;";
                    }
                    else
                    {
                        //For down and up directions seperate headlines by new line
                        sHeadlineTerminator = "\<br/\>";
                    }
                }
                if(sOpenLinkLocation =="N")
                {
                    sPostLinkLocation = " target= \"_blank\" ";
                }
                else
                {
                    sPostLinkLocation = " ";
                }
                sMoqueeHTMLEnd = "\</MARQUEE\>"
                sHeadLines = "";
                for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
                {
                    objPost = json.feed.entry[nFeedCounter];
                    for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
                       {
                        if (objPost.link[nCounter].rel == 'alternate')
                        {
                              sPostURL = objPost.link[nCounter].href;
                              break;
                        }
                    }

    sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">"  + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
                }           
                document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
                }
                catch(exception)
                {
                    alert(exception);
                }
    }
    //]]>
    </script>

    <script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="�"; </script> <script style="text/javascript" src="http://kutu-blogspot.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

  • Simpan.

 

Keterangan :

  1. Ganti kode yang berwarna merah dengan alamat blog sobat.

     

  2. var nMaxPosts = 20 adalah jumlah postingan terakhir.

     

  3. var nScrollDelay = 180 adalah kecepatan text.

     

  4. var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.

     

  5. var sOpenLinkLocation="Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).

     

  6. var sBulletChar="�" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.

 

Semoga bermanfaat.

Widget Recent Posts dari Bloggertricks.com

recent posts Lagi � lagi tentang recent posts, semoga sobat tidak bosan dengan postingan saya. Sama dengan postingan yang kemarin, bedanya kalo postingan saya terdahulu, saya menulis tentang membuat recent posts dari fasilitas  yang ada di blogger, maka kali ini yang akan saya bahas adalah membuat recent posts yang di buat oleh Kranthi yang empunya bloggertricks.com.

 

Widget ini agak berbeda dari recent posts part 1, bedanya disini kita bisa atur lebar widget, warna border, ukuran font, tinggi dan lebar thumbnails, dll. Tapi kelemahan widget ini adalah tidak adanya cuplikan isi post atau preview dari postingan kita. Silahkan pilih sobat mau menggunkan yang mana.

 

Mau coba yang ini ? ayo kita lanjutkan. Jika dalam tulisan / postingan, sobat tidak pernah memasukkan gambar, maka gambar akan menjadi kotak hitam dan akan terlihat kurang bagus, jadi sebaiknya jika sobat menulis artikel, masukkanlah minimal 1 gambar agar dalam widget recent posts ini muncul gambar / thumbnails dari postingan kita. Lanjut, silahkan ikuti langkah � langkahnya berikut ini :

 

  1. Seperti biasa, loginlah ke blogger terlebih dahulu.

     

  2. Klik Tata Letak.

     

  3. Klik Elemen Halaman.

     

  4. Kemudian klik Tambah Gadget.

     

  5. Pilih yang HTML / Javascript, lalu masukkan kode scriptnya berikut ini :

     

    <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 = 298;
    cellspacing = 8;
    borderColor = "#FFFFFF";
    bgTD = "#000000";
    thumbwidth = 40;
    thumbheight = 40;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 5;
    home_page = "http://kutu-blogspot.blogspot.com/";
    </script>
    <script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

     

  6. Yang harus di ganti / edit:

     

       boxwidth = 298  -�> lebar kotak widget   
       cellspacing = 8  -�> ruang di antara sel   
       borderColor = "#FFFFFF"  -�> warna border / garis pada kotak
       thumbwidth = 40  --> lebar thumbnails
       thumbheight = 40  --> tinggi thumbnails 
       fntsize = 12  --> ukuran font (huruf)   
       acolor = "#666"  --> warna Judul   
       aBold = true  --> tebal huruf pada judul post (true or false)   
       numposts = 5  --> jumlah judul post yang ingin ditampilkan
      home_page = http://kutu-blogspot.blogspot.com/ -�> ganti dengan alamat url blog sobat.

     

    Untuk kode warna � warna, bisa lihat disini.

     

  7. Kemudian Simpan.

Selamat berkreasi !! WaveSleepy

Memasang Widget Recent Post Dari Blogger

contoh Postingan terbaru atau biasa disebut recent posts merupakan informasi singkat yang menampilkan judul postingan terakhir / terbaru secara berurutan untuk memudahkan pengunjung melihat postingan terbaru kita.

 

Pada postingan saya terdahulu, sudah pernah saya bahas tentang membuat recent post dengan menggunakan feeds url kita. kalau cara seperti itu sangat mudah , namun hasil yang di dapat kurang sempurna karena tidak di tampilkannya gambar / thumbnails dan comment count (total komentar) dari postingan kita.

 

Sebenarnya jika sobat jeli, widget recent posts ini ada didalam fasilitas yang disediakan oleh blogger. Tidak usah panjang lebar, langsung saja kita menuju lokasi.

 

  1. Seperti biasa sobat login dahulu ke blogger.

     

  2. Kemudian pada Elemen Halaman klik Tambah Gadget.

     

  3. Pilih Featured.

     

    featured

     

  4. Lalu pilih Recent Posts Advanced.

     

    recent post

     

  5. Pada halaman pengaturan, silahkan sobat ganti Blog Url dengan alamat blog sobat.

     

    pengaturan

     

    Untuk Height merupakan tinggi dari widget, Number of posts to display adalah jumlah postingan yang akan ditampilkan, Summary length adalah panjang karakter isi postingan yang akan ditampilkan. Untuk yang lain � lain sobat contreng saja semua.

     

  6. Dibawahnya ada preview recent posts untuk memudahkan sobat melihat seperti apa hasilnya nanti.

     

    Preview

     

  7. Setelah itu jangan lupa Simpan.

Silahkan lihat hasilnya, mudah kan. Open-mouthed