Cara Membuat Efek Salju di Blog

Hujan salju?

Berhubungan dengan adanya peringatan Natal, blog ini akan mempersembahkan sesuatu yang menarik. Yaitu membuat efek salju berjatuhan dari atas. Bisa dilihat di blog ini, atau di Detail dot, bisa juga di Benablog. Caranya cukup mudah. Coba aja simak dulu tutorialnya.

  1. Login ke akun Blogger anda
  2. Klik Template
  3. Pilih Edit HTML
  4. Cari kode </b:skin> CTRL + F untuk mempermudah
  5. Letakkan kode dibawah ini tepat dibawah kode </b:skin>
<script src='http://benablog.com/css/snowstorm-min.js'/>

     6.  Klik Save

Selamat! Blog anda telah dihias oleh salju berjatuhan!

Cara Membuat Read More Otomatis Di Blog

Salah satu contoh readmore

Artikel anda panjang? Tersusun hingga ke bawah sehingga anda harus scroll mouse anda untuk membaca "seluruh" artikel anda? Bagaimana jika kita buat lebih "simple" sehingga tidak perlu scroll ke bawah? Ya. Itu salah satu fungsi read more. Bagaimana cara membuat read more otomatis? Simak cara - caranya dibawah ini.

     1.  Login ke akun blogger anda
     2.  Klik Template
     3.  Pilih Edit HTML
     4.  Cari kode </head> untuk mempermudah, tekan CTRL + F
     5.  Letakkan kode dibawah ini tepat DIBAWAH kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://script-bamz-us.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

     6.  Lalu, cari kode <data:post.body/> untuk mempermudah, tekan CTRL + F
     7.  GANTI kode  <data:post.body/> dengan kode dibawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:5px;'>
<a expr:href='data:post.url'><img src='http://s16.postimg.org/ihv6avy81/Read_More.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
</b:if>

      8.  Klik Save / Simpan

 Selesai! Selamat mencoba dan semoga berhasil.

Cara Membuat Arsip Blog Bisa di Scroll

Memasang dan Membuat Roll pada Archive Blog
Arsip Blog berfungsi scroll.
Pasti pembaca blog anda akan risih jika melihat arsip blog anda panjang sampai ke bawah blog anda. Untuk meminimalisir arsip blog anda dan untuk memperindah blog anda tentunya, kita akan membuat arsip blog tersebut berfungsi scroll. Simak panduannya di bawah ini.

  1. Login ke Blogger
  2. Di halaman Dasbor, pilih Template
  3. Kemudian pilih Edit HTML
  4. Cari kode ini : <div id='ArchiveList'> lebih cepatnya gunakan CTRL+F
  5. Setelah ketemu taruh kode dibawah ini tepat diatasnya kode <div id='ArchiveList'>
 <div style='overflow:auto; width:ancho; height:200px;'>

     6.  Kemudian beri kode tambahan </div> sebelum kode <b:include name='quickedit'/>
     7.  Selesai!

Notes : Sebelum kalian menggunakan tutorial ini sebelumnya kalian harus tambahkan HTML/Java Script - Blog Archive pada Tata Letak kalian!
  • Jika masih bingung kalian bisa melihat tata letak yang benar seperti dibawah ini :

<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div></div>
  <b:include name='quickedit'/>
  </div>
</b:includable>

Cara Mengubah Template Blog

Template blog

Para blogger mencoba banyak cara yang dapat membuat blognya semakin menarik. Hal itu bertujuan untuk membuat pengunjung datang lebih banyak dan pengunjung menyukai blognya. Ada banyak cara untuk membuat blog semakin menarik seperti mengubah template standar yang diberikan oleh blogger sendiri. Bagaimana caranya? Simak tutorialnya dibawah ini.

  1. Login ke akun blogger anda.
  2. Kunjungi situs btemplates <-- Klik
  3. Cari template yang menurut anda bagus. Disana ada yang berdasarkan SEO, warna, bahkan ada yang berdasarkan jumlah kolom.
  4. Jika sudah, download templatenya, seperti contoh template SkyBlue dibawah ini.
Template SkyBlue
Notes : Klik Download untuk men-download template. Klik Preview untuk melihat preview template.

     5.  Jika sudah, maka bentuk filenya akan .rar.
     6.  Ekstrak file yang berkode .xml kemana saja.
     7.  Kembali ke blogger, masuk ke Template
     8.  Klik Cadangkan / Pulihkan

Upload Template

     9.  Klik Choose File
    10. Cari file .xml yang tadi anda simpan
    11. Klik Unggah.

Selesai! Template anda sudah diganti. Selamat mencoba.


Cara Membuat Breaking News di Blog


Sebenarnya, ini bukan widget breaking news.. Tapi mirip breaking news dan di google terkenal dengan sebutan "breaking news". Jadi, pada artikel kali ini kita akan membahas bagaimana caranya membuat breaking news di blog. Penasaran seperti apa penampakannya? Silahkan kunjungi link ini

LINK INI

Kurang lebih seperti itu lah. Berminat? Langsung di perhatikan tutorialnya.

  1. Login ke akun blogger anda
  2. Klik Template
  3. Klik Edit HTML
  4. Cari kode ]]></b:skin> untuk mempermudah pencarian, tekan CTRL + F
  5. Letakkan kode ini diatas kode ]]></b:skin>
.newspic {background:#c8d3ff url(http://s17.postimg.org/v3unlwf6z/Breaking_News.png) no-repeat top left;width:919px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 919px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Note: Tulisan berwarna biru diganti dengan lebar header blog anda.


     6.   Kemudian cari kode </head> untuk mempermudah pencarian, tekan CTRL + F
     7.   Letakkan kode ini diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script><script type='text/javascript'>//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date"
;document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a) 

     8.   Kemudian cari kode <div id='header-wrapper'> untuk mempermudah pencarian,
           tekan CTRL + F
     9.   Letakkan kode ini dibawah kode <div id='header-wrapper'>
<div class='newspic'>
<div style='float:left;width:979px;padding:1px 0 6px 130px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://dandi-ixa.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
Note : Ganti tulisan berwarna merah dengan link blog anda

     10.   Klik Simpan / Save

 Sekian. Selamat mencoba dan semoga sukses.


Cara Membuat Kotak Komentar Admin Berbeda dengan Pengunjung


Berkomentar di blog orang, sudah pasti blogger yang rajin dan aktif selalu berkomentar di blog orang, apalagi artikelnya bagus. Namun, jika kita menunggu balasan dari admin terkadang kita bingung membadakan mana admin mana pengunjung, bukan? Disini akan membahas bagaimana cara membuat kotak komentar admin berbeda dengan pengunjung. Seperti ini penampakannya.

Ingin membuatnya? Langsung aja ikuti langkah - langkahnya.
  1. Login ke akun blogger anda.
  2. Klik Template
  3. Klik Edit HTML
  4. Cari kode </body> . Untuk memudahkan pencarian, tekan CTRL + F.
  5. Taruh kode dibawah ini diatas kode </body>
<script src='http://code.jquery.com/jquery-latest.js'/><!-- Komentar admin by blog.kangismet.net start --><script>$(function() {function highlight(){$('.user.blog-author,.ssyby').closest('.comment-block').css('border', '1px solid #e1e1e1').css('background','#f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIMLSCILfnvGsae9rg3OmZkIRbCcUIkzbHcH4CGwY1lcPh1tKVGmJhSbgjwOnDC8jBkInJFkgzZxwG_o-9mBAyptq0hfqImUkp0paXmtfpet1hBJzyxXkFqIrqWUVj5L4Mu_WZtnGWCqs/s1600/admin2.png") no-repeat bottom right').css('padding', '10px');}$(document).bind('ready scroll click', highlight);});</script><!-- Komentar admin ends --> 

    6.  Klik Save / Simpan.
Notes: Ganti tulisan berwarna merah jika anda ingin mengganti gambar tulisan "admin" di bawah kanan komentar.

Mudah bukan? Selamat mencoba!

Cara Membuat Buku Tamu Tersembunyi di Blog


Sebelumnya, blog ini sudah posting tentang bagaimana caranya membuat chat box atau buku tamu. Mungkin bagi kalian, buku tamu ini sangat bermanfaat. Karena dapat membuat kita dan pengunjung dapat berinteraksi langsung. Tapi, ada juga pengunjung yang merasa terganggu dengan widget ini. Jadi, bagaimana jika kita menyembunyikannya? Seperti melayang disebelah kanan blog ini. Mari kita coba memasangnya di blog..
  1. Login ke akun blogger anda.
  2. Klik Layout atau Tata Letak
  3. Klik Add Gadget atau Tambah Gadget
  4. Lalu pilih HTML/JavaScript
  5. Copy kode dibawah ini
    <style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;}
    .gbtab{ height:100px; width:30px; float:left; cursor:pointer;background:url('http:// 
    s24.postimg.org/r5vr5jj35/Buku_Tamu_Tersembunyi.png') no-repeat; }.gbcontent{ float:left; border:2px solid #A5BD51;background:#F5F5F5; padding:10px; } </style><script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir;gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script>
    <div id="gb">
    <div class="gbtab" onclick="showHideGB()"> </div>
    <div class="gbcontent"> 
     LETAKKAN KODE SHOUTBOX, FOLLOWBOX, DLL TERSERAH ANDA DISINI 
    <div style="text-align:right"> <a href="javascript:showHideGB()"> [tutup] </a> </div>
    </div>
    <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script></div>
  6. Klik Save
Note : Ganti tulisan berwarna merah dengan kode chat box atau buku tamu anda. Jika belum memiliki chat box atau buku tamu, baca tutorialnya di sini<---klik.

Terima kasih, semoga bermanfaat dan selamat mencoba.


Langganan: Postingan (Atom)

Join Us!

Diberdayakan oleh Blogger.

Followers

Music Player

Site Info