Tips Blog | Tutorial Blog | Belajar Blog

Tampilkan postingan dengan label Marquee. Tampilkan semua postingan
Tampilkan postingan dengan label Marquee. 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.

Membuat Label Dengan Marquee

image Jika sobat pernah membaca postingan saya tentang membuat label dengan fungsi scroll, tentunya sobat tidak akan kesulitan membuat label dengan marquee (text berjalan). Agak sedikit aneh memang postingan saya kali ini, label (kategori) dibuat berjalan, tapi tidak ada salahnya kita coba bahas. Buat yang ingin mencoba sekedar ingin tau, berikut tutorial singkatnya. Untuk demo-nya bisa dilihat disini.

 

Seperti biasa, login dulu ke blogger.

  • Jika sobat belum menampilkan label, silahkan sobat pasang dulu labelnya, tentunya label dengan model yang biasa (bukan label cloud).
  • Jika sudah, klik Edit HTML.
  • Klik Expand Template Widget.
  • Kemudian cari kode yang mirip seperti dibawah ini, sebagai catatan untuk title='Label' adalah judul label yang ada di blog sobat, silahkan disesuaikan. Dan kode yang berwarna merah adalah kode yang harus disisipkan.

    <b:widget id='Label1' locked='false' title='Label' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>

    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <marquee align='left' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> 
    <b:if cond='data:display == &quot;list&quot;'>

    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:else/>
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
    </b:if>
    <b:include name='quickedit'/>
    </marquee>
    </div>
    </b:includable>
    </b:widget>
  • Kemudian Simpan Template.

Keterangan :

  1. direction='up' adalah text yang berjalan dari bawah keatas.

     

  2. height='300' adalah tinggi dari menu

     

  3. scrollamount='2' adalah kecepatan gerakan text, semakin tinggi angkanya maka akan semakin cepat gerakannya.

Saya kira itu saja yang bisa saya sampaikan, semoga bisa bermanfaat.

Tips Membuat Efek Marquee

Tips Membuat Efek Marquee

Apa itu Marquee? mungkin buat blogger baru kata marquee tidak terlalu akrab di telinga, padahal efek marquee ini sering kita lihat pada website atau blog yang sering kita kunjungi. Marquee adalah kode HTML yang bisa membuat teks bisa berjalan, dari kiri, kanan, bawah ataupun atas.


Teks berjalan atau marquee ini banyak diminati oleh para blogger, karena sifatnya yang dinamis, selain untuk menghemat tempat juga bisa menarik pengunjung. Berikut ini ada beberapa contoh marquee yang bisa sobat gunakan untuk blog sobat.

I. Contoh Marquee dari gerakan

<MARQUEE align="center" direction="right" height="50" scrollamount="2" width="80%">

TEXT BERJALAN DARI KIRI KE KANAN

</MARQUEE>

Hasilnya :

TEXT BERJALAN DARI KIRI KE KANAN

Atribut yang biasa digunakan :
  1. Widht = lebar blok teks dalam pixel atau persen

  2. Title = pesan yang akan muncul saat mouse berada di atas teks

  3. Direction = �left / right / up / down� untuk arah gerakan teks

  4. Scrollmount = kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

  5. Bgcolor = warna background teks

  6. Behavior = �scroll / slide / alternate� untuk mengatur perilaku gerakan


II. Contoh Marquee dari prilaku gerakan :

<MARQUEE align="center" direction="left" height="50" scrollamount="3" width="70%" behavior="alternate">

TEXT BERJALAN MENURUT PRILAKU

</MARQUEE>


Hasilnya :

TEXT BERJALAN MENURUT PRILAKU

III. Contoh Marquee yang didalamnya terdapat link :

<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" align="center" width="100%" height="200">

<a href="http://kutu-blogspot.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html">Cara Pasang Search Engine </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/trik-membuat-read-more.html">Trik Membuat Read More (Template Baru) </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/membuat-favicon.html">Cara Membuat Favicon </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/cara-membuat-label-kategori.html">Cara Membuat Label (Kategori) </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/mengganti-template-blogspot.html">Mengganti Template Blogspot </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/cara-pasang-banner-di-blog.html">Cara Pasang Banner di Blogspot </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/tutorial-membuat-text-area.html">Tutorial Membuat Text Area </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/kode-html-tampil-di-postingan.html">Kode HTML Tampil di Postingan </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/link-berkelip-warna-warni.html">Link Berkelip Warna-Warni </a>

</marquee>



Hasilnya :
(arahkan mouse kesini)
Cara Pasang Search Engine

Trik Membuat Read More (Template Baru)

Cara Membuat Favicon

Cara Membuat Label (Kategori)

Mengganti Template Blogspot

Cara Pasang Banner di Blogspot

Tutorial Membuat Text Area

Kode HTML Tampil di Postingan

Link Berkelip Warna-Warni



Selamat Mencoba !