Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Rabu, 14 Agustus 2013

Cara Membuat Widget Label Dengan Efek Berputar

STAR-US | Cara Membuat Widget Label Dengan Efek Berputar | Sobat blogger pasti pernah melihat widget label dengan efek berputar kan?, Pasti bingung kan gi mana buat widget seperti itu, tapi jangan khawatir sekarang saya akan memberi tips untuk membuatnya :D agar sobat tidak kebingungan untuk membuatnya ayo simak tutornya.


Cara Membuat Widget Label Dengan Efek Berputar
Cara Membuat Widget Label Dengan Efek Berputar 




HTML/Javascript


  1. Blogger sobat.
  2. Masuk pada bagian Tata Letak.
  3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
  4. Masukan kode berikut.

    <div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    var w2bFlashLabelSettings = {
    blogurl : "http://dhifakomputer.blogspot.com/",
    color : "000000",
    hoverColor : "333333",
    backgroundColor: "FFFFFF",
    size : 14,
    speed : 100,
    width : 250,
    height : 250,
    transparency : true
    };
    /*]]>*/
    </script>
    <script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-new-flash-label-cloud.js"></script>

    Catatan: 

    Text berwarna Merah dangan Url Blog anda.
    Text berwarna Hijau adalah tinggi widget.
    Text berwarna Orange adalah lebar widget.


    5. Klik "Simpan"

    Buka Blog dan liat hasilnya :D 


    "SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"
    Selasa, 30 Juli 2013

    Cara Membuat Widget Recent Comment di Blog

    STAR-USCara Membuat Widget Recent Comment di Blog,Bagi sahabat blogger yang masih bingung dalam Membuat Widget Recent Comment di Blog jangan khawatir karena saya akan memberikan tips nya membuat dengan cara yang mudah agar blog sahabat blogger dapat menampilkanWidget Recent Comment di Blog untuk lebih jelasnya sahabat bisa langsung baca dan langsung praktikkan di blog sahabat masing masing, dengantampilan dan tempat berbeda, langsung saja ^_^




    Cara Membuat Widget Recent Comment di Blog
    Cara Membuat Widget Recent Comment di Blog 


    HTML/Javascript


    1. Blogger sobat.
    2. Masuk pada bagian Tata Letak.
    3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
    4. Masukan kode berikut.
    <style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    // Recent Comments Settings
    var
    numComments = 5,
    showAvatar = true,
    avatarSize = 30,
    roundAvatar = true,
    characters = 60,
    defaultAvatar = "http://2.bp.blogspot.com/-6pCCeOe7wKA/UKRn7f0MK7I/AAAAAAAAB3s/oWt1dVVzc5Y/s1600/gravatar.jpg",
    hideCredits = true;
    maxfeeds=20,
    adminBlog='Rio Us';
    //]]>
    </script>
    <script type="text/javascript" src="http://www.geocities.ws/reggy1998/rcomment.js"></script>
    <script type="text/javascript" src="http://dhifakomputer.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

    Catatan:

    Ganti tulisan berwarna Merah dengan nama admin blog anda
    Ganti tulisan berwarna Orange dengan url blog anda
    Ganti tulisan berwarna Hijau adalah jumlah komentar yang di tampilkan.

    5. Klik "Simpan"


    Buka Blog dan Liat Hasilnya :)


    "SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"
    Senin, 29 Juli 2013

    Cara Membuat Widget Menjadi Simpel dan Rapi

    STAR-US | Cara Membuat Widget Menjadi Simpel dan Rapi | Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.


    Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalamscroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?






    Cara Membuat Widget Menjadi Simpel dan Rapi
    Cara Membuat Widget Menjadi Simpel dan Rapi




    HTML/Javascript


    1. Blogger sobat.
    2. Masuk pada bagian Tata Letak.
    3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
    4. Masukan kode berikut.



    <div style="text-align:center;">
    KODE WIDGET ANDA
    </div>


    Catatan:
    Kode berwarna Orange Agan bisa ganti dengan kode anda.

    5. Klik " Simpan "


    Buka Blog dan Liat Hasilnya :)




    "SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"
    Minggu, 14 Juli 2013

    Cara Membuat Widget Scroll di Blog

    STAR-US  | Kali ini saya akan share tentang Cara Membuat Widget Scroll di Blog Scroll pada widget memang hal yang bagus jika dipasang pada blog sobat. Selain agar widget sobat tidak terlalu memerlukan tempat yamg luas, tampilan blog kita juga akan terlihat rapih.

    Cara memasangnya juga tidak susah kok sob. Ikuti langkah-langkahnya.


    Cara Membuat Widget Scroll di Blog
    Cara Membuat Widget Scroll di Blog 

                                           


    Widget tanpa kode HTML/Javascript.


    Pertama kita harus tahu nama widget yang akan kita beri scroll sob. Caranya, masuk menu Tata letak dan sentuhkan cursor di tulisan edit pada widget yang akan sobat beri scroll. Pada bagian bawah akan terlihat nama widget, lihat pada gambar di bawah ini nama widget-nya adalah


    PopularPosts1.



                               
    Gambar di atas adalah cara mengetahui ID widget.






    Masukan kode berikut tepat di atas kode  ]]></b:skin>

      #PopularPosts1 .widget-content{
      height:230px;
      width:auto;
      overflow:auto;
      }

      Kode berwarna Orange ubah dengan ID widget yang ingin di beri scroll



      Terakhir, Save dan lihat hasilnya.


      Widget dengan kode HTML/Javascript.

      Untuk membuat scroll pada Widget dengan HTML/Javascript, sobat hanya perlu menambahkan sedikit kode berikut pada widget yang akan diberikan scroll.

      <div style="overflow:auto; width:100%px; height:230px; padding:10px; border:1px solid #999999;">
      kode widget anda
      </div>

      Catatan:


      Kode berwarna  Orange  adalah tinggi widget 
      Kode berwarna  Hijau   adalah lebar widget
      Kode berwarna  Merah  ganti dengan kode widget anda.


      Fungsi Scroll Untuk Blogroll Biasa


      <div style="border:1px solid#000000;overflow:auto;width:170px;height:100px;">
      <ul>
      <li><a href="http://dhifakomputer.blogspot.com/">STAR US</a></li>
      <li><a href="Url anda">Judul Blog </a></li>
      <li><a href="Url anda">Judul Blog </a></li>
      </ul>
      </div>


      Fungsi Scroll Untuk Blogroll Link Open In New Tab


      <div style="border:1pxsolid#000000;overflow:auto;width:170px;height:100px;"><ul>
      <li><a href="http://dhifakomputer.blogspot.com/" target="new">STAR US</a></li>
      <li><a href="Url anda" target="new">Judul Blog </a></li>
      <li><a href="Url anda" target="new">Judul Blog </a></li>
      </ul>
      </div>


      Fungsi Scroll Untuk Banner Atau Gambar


      <div style="border:1pxsolid#000000;overflow:auto;width:170px;height:100px;">
      <ul>
      <li><a href="Url anda" target="new"><img src="Url Gambar" height="150" width="200"/></a></li>
      <li><a href="Url anda" target="new"><img src="Url Gambar" height="150" width="200"/></a></li>
      </ul>
      </div>


      Terakhir, klik Simpan dan sobat lihat hasilnya.


      "SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"
      Kamis, 09 Juli 2009

      Hide/Show Elements Di Sidebar

      Pernah tengok expandable posting x? Contoh kat blog Ana yang ini AlmansuQie. Cara membuatnya disini. Ok, kali ni kita nak buat hide/show widget pada sidebar pulak. Sekaligus dapat menjimatkan ruang. Redhwan ade tertanya2. Boleh juga gunakan cara ini untuk hide/show pautan.

      Redhwan: Assalamualaikum..Tanye sikit, macam mana nak buat pautan kita pada sidebar boleh expand dan collapse macam blog archive?


      1. Pertama masuk ke Layout => Edit HTML dan tambahkan kod berikut selepas kod ]]></b:skin>.

      <style type="text/css">
      .texthidden {display:inline}
      .shown {display:block}
      </style>
      <script type="text/javascript">
      document.write('<style>.texthidden {display:none} </style>');
      </script>
      <script type="text/Javascript">
      function expandcollapse (postid) {
      whichpost = document.getElementById(postid);
      if (whichpost.className=="shown") {
      whichpost.className="texthidden";
      }
      else {
      whichpost.className="shown";
      }
      }
      </script>


      2. Klik save template dan selesai di bahagian ini. Pergi ke bahagian page Elements => Add a Gadget => HTML/Javascript. Tambah kod ni..

      <ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> [+/-] Pautan</a></ul>
      <ul class="texthidden" id="keyword">
      <li><a href="http://link.com">Link 1</a></li>
      <li><a href="http://link.com">Link 2</a></li>
      <li><a href="http://link.com">Link 3</a></li>
      <li><a href="http://link.com">Link 4</a></li>
      <li><a href="http://link.com">Link 5</a></li>
      </ul>


      4. Tukarkan link2 berwarna merah dengan link Antum yer.. Text biru mesti nama yang sama. Warna ungu boleh ditukar jadi perkataan atau gambar. Yang ni khas untuk pautan. Untuk sembunyikan widget pulak buat macam ni.

      <ul><a href="javascript:void(0);" onclick="expandcollapse('Cbox')"> [+/-] Kotak Jerit</a></ul>
      <ul class="texthidden" id="Cbox">
      ...............kod cbox disini...............
      ...............kod cbox disini...............</ul>


      5. Macam tu la jugak pada mana widget yer. Siap!! Selamat mencuba!!
      Unknown Widget
      Selasa, 02 Juni 2009

      Pasang Star Rating Pada Posting

      Ingin tahu rating sesuatu post dalam blog kita, boleh pasang widget ni. Seperti dibawah post ini ada lima bintang warna kuning. Kalau rasa post ni bagus boleh la bagi bintang skit. Ok ini disediakan kod javascript untuk ditanam dalam template. Caranya..

      1. Macam biasa dalam kedaan Loggin. Edit HTML. Tanda pada kotak Expand Widget Template. Cari kod berikut.

      <p><data:post.body/></p>


      2. Dah jumpa, tambahkan kod berikut tepat dibawahnya.

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script language='JavaScript'>
      var OutbrainPermaLink=&#39;Your-Post-Permalink-Here&#39;;
      var OB_demoMode = false;
      var OB_Script = true;
      </script>
      <script src='http://www.geocities.com/almansuqie/limabintang.js' type='text/javascript'/>
      </b:if>


      3. Tambahan: Kod <p><data:post.body/></p> kemungkinan sudah berubah atau tiada lagi sekiranya Antum gunakan Read More. Tapi jangan kecewa, cuba cari tulisan Read More tu. Tambahkan kod diatas diakhir kod Read Morenya.

      4. Dah siap klik save..
      Unknown Read More, Widget
      Minggu, 03 Mei 2009

      Script Total Posts & Total Comments

      Kebanyakkan teman sudah tahu cara untuk memasang Total Posts dan Total Comments, Banyak blog2 tutorial yang menulis tentang ini. Sekadar untuk simpanan peribadi Ana dan untuk perkongsian bersama rakan². Contoh seperti dibahagian bawah Recent Reader blog ini. Ok berikut scriptnya...

      1. Total Posts : 1000

      <script style="text/javascript">
      function showpostcount(json) {
      document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
      <script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>


      2. Total Comments : 19870

      <script style="text/javascript"></script>
      <script style="text/javascript">
      function numberOfComments(json) {
      document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
      <script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>


      3. Gantikan tulisan berwarna ungu dengan nama blog Antum.

      4. Untuk pemasangan, cuma tambahkan di bahagian Layout => Page Elements => Add a Gadget => HTML/Javascript. Atau kat mana saja yang Antum suka..
      Unknown Widget
      Sabtu, 21 Maret 2009

      Cara Membuat Brilliant Button



      Ini antara contoh Brilliant Button. kita boleh gunakannya untuk membuat button link kita sendiri atau apa saja laman yang kita rasa berguna untuk disimpan. Untuk membuatnya Antum boleh pergi ke dua laman ini.

      LucaZappa.com
      Button Maker


      Setelah button siap direka, iaitu pada pilihan warna, text dll maka savela button tersebut ke dalam komputer Antum. Pastu upload button tersebut untuk dapatkan linknya seterusnya ditambah ke dalam blog. Boleh upload di Photobucket atau Imageshack
      Unknown Icon, Link, Widget