EnglishFrenchGermanSpainItalianDutchRussianBrazilJapaneseKoreanArabicChinese Simplified

Labels

Profil

Foto saya
Fauzi Maulana Akhyar, masih sekolah (sudah SMA kelas 2) masih belajar ngeblog
FA CORP. Diberdayakan oleh Blogger.
Flag Counter

Membuat Efek Daun Berjatuhan di Blog

 


Efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript

Berikut Cara Membuat Efek Daun Berjatuhan :

  • Login ke dashboard blogger anda.
  • Klik Template >  Edit HTML.
  • Centang Expand widget template(kalau ada)
  • Cari kode </head>  pada template dengan menggunakan Ctrl+F.
  •  Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
    <script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>
  • Save template anda dan lihat hasilnya.
Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.
source

Cara Simple Menambahkan Widget Back To Top



Kali ini saya akan membagikan share artikel Cara Simple Menambahkan Widget Back To Top Keren di Blog tanpa harus edit template gan :D

Tombol back to top ini emang bukan navigasi utama tapi bisa jadi sangat penting buat beberapa pengunjung gan. Gak susah kok membuat tombol back to top di blog gan cuma tinggal nambahin widget tanpa perlu edit HTML.

Berikut Langkahnya:

1. Login di Blogger.com punya sobat

2. Buka Tata Letak >> Tambahkan Gadget >> HTML/Javascript

3. Masukkan Kode dibawah berikut:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URLGAMBARSOBAT" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

4. Langkah terakhir yang paling penting.... klik tombol "Simpan". Selesai

Catatan: Ganti URLGAMBARSOBAT dengan url gambar yang kalian inginkan
nih, sudah saya siapkan ur gambar nya
"http://imgnow.com/uploads/713041231balik_atas.jpg"

Cara Membuat Content Slider Image Otomatis

 image slider otomatis


Cara Pembuatan

Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :

  1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
  2. Pilih blog yang ingin anda tambahkan slider image ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
    #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
    #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9mK7VlDFGjg-ScqvVtXjmJhuItT8Bo5kWft2xfMjgkMy7FpoUdYXcj0IIQ4yDyjkajBn-xHYhQ59PK89y86ThIfN3L_kD2qLjSY5NsBrZmJvdawJ4mpkA5RNtdc91aBem2lVvXHEPA0Yq/s1600/transparant.png)}
    #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
    #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
    #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
    #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
    #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
    #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
    #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
    #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
    #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
    Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
  6. Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCSNIJ0SSYbyR27y-telfYY0NLZ2ReXpay-mY9ikVggAjPB3otTW9g8_c9bjIEkw82a951boIVZK_uxcMZhT4jwbsoZPPIMzAqNUKOmbNFgPo2JQLxuo5Ye9uRSFhUTfPUBiuLfhtu3po/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 100;
    summaryTitle = 25;

    numposts3 = 5;

    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }

    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts3(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

          for (var i = 0; i < numposts3; i++) {
            var entry = json.feed.entry[i];
            var posttitle = entry.title.$t;
            var pcm;
            var posturl;
            if (i == json.feed.entry.length) break;
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                  }
            }
           
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                    pcm = entry.link[k].title.split(" ")[0];
                    break;
                  }
            }
           
            if ("content" in entry) {
                  var postcontent = entry.content.$t;}
            else
            if ("summary" in entry) {
                  var postcontent = entry.summary.$t;}
            else var postcontent = "";
           
            postdate = entry.published.$t;
       
        if(j>imgr.length-1) j=0;
        img[i] = imgr[j];
       
        s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

        if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

        //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


        var month = [1,2,3,4,5,6,7,8,9,10,11,12];
        var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

        var day = postdate.split("-")[2].substring(0,2);
        var m = postdate.split("-")[1];
        var y = postdate.split("-")[0];

        for(var u2=0;u2<month.length;u2++){
            if(parseInt(m)==month[u2]) {
                m = month2[u2] ; break;
            }
        }

        var daystr = day+ ' ' + m + ' ' + y ;

        var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
        document.write(trtd);


        j++;
    }

    }

    function showrecentposts4(json) {
        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

          for (var i = 0; i < numposts3; i++) {
            var entry = json.feed.entry[i];
            var posttitle = entry.title.$t;
            var pcm;
            var posturl;
            if (i == json.feed.entry.length) break;
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'alternate') {
                    posturl = entry.link[k].href;
                    break;
                  }
            }
           
            for (var k = 0; k < entry.link.length; k++) {
                  if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                    pcm = entry.link[k].title.split(" ")[0];
                    break;
                  }
            }
           
            if ("content" in entry) {
                  var postcontent = entry.content.$t;}
            else
            if ("summary" in entry) {
                  var postcontent = entry.summary.$t;}
            else var postcontent = "";
           
            postdate = entry.published.$t;
       
        if(j>imgr.length-1) j=0;
        img[i] = imgr[j];
       
        s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

        if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

        //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


        var month = [1,2,3,4,5,6,7,8,9,10,11,12];
        var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

        var day = postdate.split("-")[2].substring(0,2);
        var m = postdate.split("-")[1];
        var y = postdate.split("-")[0];

        for(var u2=0;u2<month.length;u2++){
            if(parseInt(m)==month[u2]) {
                m = month2[u2] ; break;
            }
        }

        var daystr = day+ ' ' + m + ' ' + y ;

        var trtd = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
        document.write(trtd);

        j++;
    }

    }

    //]]>
    </script>
    Keterangan :
    Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Warna biru : Jumlah post yang ditampilkan dalam slider
    Warna hijau : Panjang dan lebar image besar
    Warna merah tua : Panjang dan lebar image kecil
  7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :

    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
    </script>
    </div>
    <div id='paginate-featured-slider'>
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>
    </ul>
    <div class='clear'></div>
    </div>
    <script type='text/javascript'>
    featuredcontentslider.init({
    id: "featured-slider", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.4], //[true/false, fadedegree]
    autorotate: [true, 5000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    </script>
    </div>
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
    Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
    script src=\"/feeds/posts/default/-/sport?max-results
    dengan kode berikut :
    script src=\"/feeds/posts/default?max-results
  8. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>
    /* Slide Content
    ----------------------------------------------- */
    .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
    word-wrap: break-word; overflow: hidden;} 
    .slide {color: #666666;line-height: 1.3em;}
    .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
    .slide li {margin:0;padding-top:0;
    padding-right:0;padding-bottom:.25em;
    padding-left:0px;text-indent:0px;line-height:1.3em;}
    .slide .widget {margin:0px 0px 6px 0px;}
  9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
          </div>
    </b:if> 
    slider otomatis
Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat
 

Cara Membuat Menu Tab View



Cara membuat Menu Tab View keren dengan Efek jQuery:


  • Buka Dasbor Blog anda.
  • Pilih menu tata Letak


Cara membuat Menu Tab View keren dengan Efek jQuery


  • Tambah Widget HTML/JavaScript.
  • Kemudian Copy Paste Kode dibawah ini kedalam Widget HTML/JavaScript tersebut:

<style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     font-size: 12px;
     padding: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px;
     overflow: hidden;
     position: relative;
     background: #0000FF;
     cursor:pointer;
     -moz-border-radius:5px 5px 0 0;
     border-radius:5px 5px 0 0;
    }
    html .tabber h2.active {
     background: #000000;
     border-bottom: 1px solid #fff;
    }
    .tabber .widget-content {
     border: 1px solid #bbb;
     padding: 10px;
     background: #fff;
     clear:both;
     margin:0;
    }
    .codewidget, #codeholder {
     display:none; {
    </style>  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     $('#codeholder').bloggerTabber ({
      tabCount : 3
     });
    });
    </script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>

  • Simpan.
Catatan: Untuk menampilkan Menu seperti Popular Post, Category, Random Post dll. Silahkan anda letakkan Widget widget tersebut dibawah Widget Menu Tab View ini.

Cara membuat Menu Tab View keren dengan Efek jQuery

Sekian, Semoga bermanfaat!

Cara Membuat Random Posts



Langkah Membuat Widget Random Post Valid HTML5 Sebagai Berikut :
  • Login Ke Akun Blogger Anda Seperti Biasanya
  • Masuk Ke Menu Tata Letak Blog Anda
  • Klik Tambah Gadget > HTML/JavaScript 
  • Copy Kode dibawah dan Pastekan di Gadget Tersebut
<script type="text/javascript">
var randarray = 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 < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://willyseo.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>
Keterangan : Kode yang Berwarna Merah Ganti Sesuai jumlah Post yang di inginkan.
                           Kode yang Berwarna Biru Ganti Sesuai Alamat Blog Anda
  • Terakhir Klik Save 
Langkah Membuat Widget Random Post Valid HTML5 Sebagai Berikut :
  • Login Ke Akun Blogger Anda Seperti Biasanya
  • Masuk Ke Menu Tata Letak Blog Anda
  • Klik Tambah Gadget > HTML/JavaScript 
  • Copy Kode dibawah dan Pastekan di Gadget Tersebut
<script type="text/javascript">
var randarray = 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 < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://willyseo.blogspot.com/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script>
Keterangan : Kode yang Berwarna Merah Ganti Sesuai jumlah Post yang di inginkan.
                           Kode yang Berwarna Biru Ganti Sesuai Alamat Blog Anda

Cara Membuat Scrool Pada Popular Posts




Cara Membuat Scroll Pada Popular Post di Blog :
1. Login ke blogger dengan akun sobat
2. Masuk ke halaman Template
3. Klik Edit HTML Lalu Lanjutkan
4. cari kode ]]></b:skin>
(gunakan Ctrl+F)
5. copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin>
 
#PopularPosts1 .widget-content{
height:200px;
overflow:auto;
}
6. Ganti angka 200 dengan tingginya
7. Simpan dan lihat hasilnya

Demikian artikel saya tentang Cara Membuat Scroll Pada Popular Post di Blog .

lihat hasilnya

Cara Membuat Social Bookmark Di Samping Blog


floating social bookmark


Berikut ini langkah-langkah pembuatannya :
  1. Login ke Blogger
  2. Masuk ke Template >> Edit HTML (centang expand widget templates)
  3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

Cara Mengatur Lebar Kolom Blog

 
Bagaimana sih cara merubah lebar  kemudian tinggi sebuah template sehingga tampilan blog kita sesuai dengan apa yang kita inginkan. ada beberapa kode yang perlu kita pahami. dan silahkan langsung uji coba untuk menggantinya. Coba cari kode yang berwarna biru dan ubah nilainya , misal width:900px kalian rubah menjadi width:750px
kemudian simpan hasilnya
 Letak kode2 yang mengatur lebar kolom template kalian adalah

Cara Membuat Widget Google Translate Berputar



Gan, taukan google translate? pasti tahu. Widget anda bisa berputar seperti punya saya kalau anda mengikuti langkah saya:


1.Masuk ke akun Blogger

2.Pilih Opsi Template --> Edit HTML --> Centang expand Template Widget

Menambah Animasi Ucapan Selamat Datang Pada Blog




hay teman., membuat orang tertarik pada blog kita mamang punya banyak cara. salah satunya dengan memberi ucapan selamat datang. Berikut cara-caranya :
1, masuk ke alamat ini disini lalu masukkan kata yang ingin di ucapka seperti "selamat datang" atau "welcome" di antara [f24]******24[/f] ganti bintang dengan kalimat yang mau ditampilkan.
2, lalu preview untuk melihat hasil,
3, lalu klik get code, copy script di dalam kotak.
4, buka blog kamu, lalu ke design, pilih add a gadget di bawah header.
5, pilih htlm/javascript paste link yang tadi kamu dapat di content,
6, save, lalu lihat hasilnya

Membuat Auto Scroll Pada Widget Blog Archive


auto-scroll-blog-archive-ngeposta

Membuat Auto Scroll Pada Widget Blog Archive - Hello kawan! Cara membuatnya cukup mudah sekali dan simple, hanya dengan menyisipkan sedikit script css saja.
Nahh, bagi anda yang berminat dan ingin mencoba untuk membuat auto scroll pada widget blog archive silahkan simak dengan baik tutorial di bawah ini :




Membuat Teks Berjalan Pada Tab Browser

teks-berjalan-pada-tab-browser


 Membuat Teks Berjalan Pada Tab Browser - Efek yang satu ini memang terbilang unik, bagaiamana tidak? Kalau biasanya efek teks berjalan hanya pada bagian tulisan dalam artikel yang di posting atau pada bagian sidebar tertentu yang di sisipi dengan tag marquee, namun efek yang satu ini bisa menghasilkan suatu efek yang berbeda dengan tag marquee tersebut. Yang pada intinya, efek ini akan membuat tulisan yang ada di tab browser berjalan sesuai dengan kecepatan yang telah di atur.

Penasaran? Langsung saja simak dengan baik langkah-langkah cara membuat teks berjalan pada tab browser berikut ini :

Cara Membuat Page Navigation Number Pada Blog


Tutorial Blog lengkap, b-digg
Sudah pernah melihat kan beberapa template yang menggunakan page navigation number pada templatenya. fungsi dari page navigation number ini adalah untuk menggantikan link posting lama atau posting baru yang ada pada bawah postingan halaman utama pada sebuah template. Dengan page navigation number ini pengunjung bisa bebas memilih halaman postingan keberapa yang ingin dibaca.

Cara Menambahkan Follow Me/Us Pada Blog

sobat... saya baru bisa menambahkan follow me yang link-nya bisa langsung ke twitter agan. Berikut caranya:

1. browsing pada google, kelamaan... buka ini
2. pilih salah satu style
3. blok semua kode >> klik kanan>>copy
4. login ke www.blogger.com>>masuk ke tata letak
5. tambahkan gadget

Cara Menambahkan Jam dan Kalender Pada Blog

 

Apakah blog agan sudah ada jam, kalendar. lebih baiknya bila blog agan dilengkapi dengan  kalendar atau jam. berikut caranya:


A. Untuk menambah kalender:
1. Silahkan kunjungi situs ini
2. Pilih kalender yang anda suka
3. Jika sudah copy code javascript kalender
4. Login ke blogger

5. Pilih tata letak kemudian tambah gadget
6. Pilih Html/Javascript
7. Paste code kalender tadi
8. Jreng.. Jadi deh^^

B. Untuk Menambah Jam :
1. Silahkan kunjungi situs ini
2. Pilih Jam yang kamu inginkan
3. Copy code javascript jam
4. Langkah selanjutnya seperti buat kalender

3 Cara Ampuh Meningkatkan Koneksi Internet Modem AHA


Cara Ampuh Meningkatkan Koneksi Internet Modem AHA- Selamat siang menjelang sore sobat semua, ketemu lagi dengan saya. Sudah baca postingan sebelumnya tentang Cara Mempercepat Proses Copy Paste File? Kali ini, saya akan berikan tips meningkatkan koneksi internet dengan menggunakan modem AHA. Biasanya masalah ini yang kerap diderita oleh pengguna internet,termasuk penulis sendiri. Sudah banyak cara yang dilakukan namun, hanya beberapa saja yang bekerja atau berhasil.

Cara Meningkatkan koneksi Internet pada Windows 7 & XP

 

Internet kamu lemot yaa ? Coba tips berikut ini tentang bagaimana cara mempercepat koneksi internet. Biasanya bagi para pengguna internet dengan kartu provider yang sekarang mulai rame dengan menggunakan modem. Simpel dan praktis tanpa colok2 kabel lagi, apalagi jika kamu pakai laptop kemana pun kamu bisa terhubung dengan internet. Tapi banyak sekarang yang mengeluh karena akses kecepatan internet menggunakan kartu ini..kartu itu..sama saja 'LELET'. Berikut ini ada tips sederhana untuk mempercepat koneksi internet. Sebelumnya trik ini tidak secara langsung merubah kecepatan koneksi internet kamu secepat kilat, tapi tidak salahnya dicoba .

Cara Mempercepat Koneksi Internet Pada Windows 7 dan XP

  • Klik menu Start pada windows
  • Lalu Klik Run
  • Ketik gpedit.msc
  • ENTER
  • Lalu pilih Administrative Templates
  • Kemudian double click Network
  • Double click QoS Packet scheduler
  • Double click pada Limit reservable bandwidth
  • Ubah setting menjadi Enable
  • Kemudian ubah Bandwidth Limitnya menjadi 0
  • Klik Apply, OK
  • Kemudian restart komputer                                                                                                                                       
sumber :http://terbaru-terbaik.blogspot.com/2012/11/cara-mempercepat-koneksi-internet.html