Cara mempercepat Loding Blog Dengan Script

Animasi Loading Blog
Postingan Blogaul kali ini akan membahas trik mengenai mempercepat loading blog dengan menggunakan script/kode tertentu. Pada postingan sebelumnya, saya juga membahas artikel mengenai cara mempercepat loading blog yang hampir sama tapi agak sedikit rumit karena menggunakan berbagai cara/proses-proses tertentu. Silahkan dibaca bila tertarik. Nah, di postingan kali ini saya akan berbagi trik yang yang sama tapi sedikit lebih simple dan mudah karena hanya menggunakan sebuah script yang disebut dengan script lazyload. Dengan memasang script ini di blog ini di blog kita, loading blog memang sedikit lebih ringan karena script ini akan membantu meringankan gambar-gambar yang ada di blog sobat sehingga loading nya lebih cepat. Dengan loading blog yang cepat, tentu akan membuat pengunjung senang dan betah begitu juga dengan sobat sendiri. Bagi yang tertarik untuk memasang nya, silahkan ikuti langkah-langkah di bawah. Berikut cara menambah kecepatan loading blog dengan script ampuh:

1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Cari kode </head> di template sobat (Untuk mempermudah pencarian, gunakan Ctrl+F atau F3).
4. Letakkan kode berikut tepat di atas kode nomor 3 tadi
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://amronbadriza.googlecode.com/files/Lazyload%20Script.js' type='text/javascript'/>
<script>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs-ES-JJSzSF3JlpPgE4QEcKXJKlcYWhjLHVics9tw1Pmf4ah3cAIGrIEVfYT0bZmRDW4YVtJLEZems-4iExHUCYBG8Gy5GGYWuMmXpg20uyPbhN-MkXUP3KglRNpojn53LLCq2OVGKD8/s1600/loading.png&quot;,threshold : 200});
});
</script>
5. Simpan template sobat.

NB: Lazyload script ini tidak bekerja pada semua blog. Ada kalanya blog yang dipasangi memang bisa bertambah cepat loading nya, tapi ada kala nya juga malah bertambah berat. Oleh karena itu sobat perlu mencoba dan mengamati nya dulu. Bila memang bisa bermanfaat buat blog sobat berarti silahkan dipasang, tapi kalau malah menjadikan loading blog tambah berat silahkan dihapus saja.

Sekian postingan mengenai cara mempercepat loading blog dengan script yang bisa saya share kali ini. Semoga bermanfaat buat semua.

Sumber : amronbadriza

Cara Membuat Widget Artikel Terbaru

recent post maskolis

  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget ini.
  3. 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. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
    #terbaru{margin:0px}
    .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
    .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
    .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
    .mas-elemen:hover{background-color:#c3c3c3}
    .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
    #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj3xR7v7AWchxB0ncWxrN9TUEuIc84G4ytV-6-NYT4IiANXvd9SF8cJa7YK1OEfkUawNUnbf3fDqzD-v2L-sdiyD-J3kB1FSOhT4ZfY1IEoWiR67_nXEYelaxzhg9rvaeKlKeHqC8JzVM/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
    #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
    #mas-navigasifeed:hover{background-color:#c3c3c3}
    #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
    #mas-navigasifeed span{padding:5px 10px}
    #mas-navigasifeed .next{float:right}
    #mas-navigasifeed .previous{float:left}
    #mas-navigasifeed .home{text-align:center}
    #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
    Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
  6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://febridriver.blogspot.com/";
    var charac = 100;
    var urlprevious, urlnext;

    function maskolisfeed(johny,banget){
    var showfeed = johny.split("<");
    for(var i=0;i<showfeed.length;i++){
    if(showfeed[i].indexOf(">")!=-1){
    showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
    }
    }
    showfeed =  showfeed.join("");
    showfeed = showfeed.substring(0,banget-1);
    return showfeed;
    }
    function showterbaru(json) {
    var entry, posttitle, posturl, postimg, postcontent;
    var showblogfeed = "";
    urlprevious = "";
    urlnext = "";
    for (var k = 0; k < json.feed.link.length; k++) {
    if (json.feed.link[k].rel == 'previous') {
    urlprevious = json.feed.link[k].href;
    }
    if (json.feed.link[k].rel == 'next') {
    urlnext = json.feed.link[k].href;
    }
    }
    for (var i = 0; i < numfeed; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];
    posttitle = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }
    if ("content" in entry) {
    postcontent = entry.content.$t;
    } else if ("summary" in entry) {
    postcontent = entry.summary.$t;
    } else {
    postcontent = "";
    }
    if ("media$thumbnail" in entry) {
    postimg = entry.media$thumbnail.url;
    } else {
    postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8GBR3kgg1iEtVLfOAaJbLPtDtbYyr9Or9W0aF5bYuFE_i9TogZneL4bwIIJ2w7KZRlCw7z2uD40chES81kxXc3srAGTy_riCnh4_orvSaXwJqovgnJt-8xlYFLTZy8Lz3yd3UwBniCIU/s1600/no+image.jpg";
    }
    showblogfeed += "<div class='mas-elemen'>";
    showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
    showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
    showblogfeed += "</div>";
    }
    document.getElementById("terbaru").innerHTML = showblogfeed;
    showblogfeed = "";
    if(urlprevious) {
    showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
    } else {
    showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
    }
    if(urlnext) {
    showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
    } else {
    showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
    }
    showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
    document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
    }

    function navigasifeed(url){
    var p, parameter;
    if(url==-1) {
    p = urlprevious.indexOf("?");
    parameter = urlprevious.substring(p);
    } else if (url==1) {
    p = urlnext.indexOf("?");
    parameter = urlnext.substring(p);
    } else {
    parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
    }
    parameter += "&callback=showterbaru";
    incluirscript(parameter);
    }
    function incluirscript(parameter) {
    if(startfeed==1) {removerscript();}
    document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
    document.getElementById("mas-navigasifeed").innerHTML = "";
    var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
    var terbaru = document.createElement('script');
    terbaru.setAttribute('type', 'text/javascript');
    terbaru.setAttribute('src', archievefeed);
    terbaru.setAttribute('id', 'MASLABEL');
    document.getElementsByTagName('head')[0].appendChild(terbaru);
    startfeed = 1;
    }
    function removerscript() {
    var elemen = document.getElementById("MASLABEL");
    var parent = elemen.parentNode;
    parent.removeChild(elemen);
    }
    onload=function() { navigasifeed(0); }
    //]]>
    </script>
    Keterangan :
    var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
    var urlblog = "http://febridriver.blogspot.com/"; >> ganti dengan URL blog Anda
    var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
  7. Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
    <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>
    Terakhir save dan lihat hasilnya.
Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat.

Sumber : Febri Driver

Cara Membuat Post Display Grid Dan List ke Blogger

Display Grid And List
Cara Membuat Post Display Grid Dan List jarang orang yang membuat tutorial ini karena saya sendiri suka sulit untuk menemukannya di google. kebanyakan semua dalam bahasa ingris. dan kesempatan kali ini saya akan mencoba membuatnya semudah mungkin. sebelumnya kita akan mengetahui dulu apa yang di maksud dengan grid dan list. penggunaan ini untuk menambahkan style pada readmore otomatis dengan javascript plus tumbnail. tombol switch ini hanya untuk mempercantik blog anda dan bisanya Display Grid Dan List ini di gunakan untuk blog dengan konten gallery, template blog, iklan, pemasaran produk, info movies, download software dan lainnya.
Switch Display Grid And List
GRID: Posisi default saat membuka blog maka yang akan active adalah pada display grid.
LIST : untuk melihat artikel dengan keternagan serta gambar kita hanya cukup mengklik tombol list.
Contoh Display Grid Dan List
Artikel Grid : Jika pengunjung buka blog kita maka pada halaman depan blog secara default yang akan tampil adalah grid dengan artikel gambar. ini akan cocok sekali jika blog anda berupa blog dengan mengutamakan sebuah gambar.
Artikel List : pengunjung akan sangat terbantu dengan list ini agar pengunjung tidak perlu secara langsung membuka artikel blog untuk melihat keterangan. cukup klik timbol list maka keterangan akan muncul. seperti pada gambar di atas.
Cara Memasang Display Grid Dan List Pada Template
1. masuk bagian edit template. centang bagian Expand Widget Templates .
2. Pasang HTML : cari kode seperti ini <b:section class='main' id='main' showaddelement='yes'> . ket : kode tersebut adalah widget post cari yang mirip saja. jika ketemu maka simpan HTML berikut di atas kode tadi.
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='switch'>
  <div class='switch-left'>
    <span style='color: #CC0000;'>Recent</span> Post
  </div>
  <div class='switch-right'>
    <a class='bar_view' href='#'>Grid</a>
    <a class='dat_view' href='#'>List</a>
  </div>
</div>
</b:if></b:if>
keterangan : perhatikan yang di garis bawahi (no.5). ganti sesuai yang anda inginkan.
2. Sisipkan class="bar" : cari kode <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika sulit menemukannya gunakan ctrl+F untuk mempercepat. biasanya kode tersebut lebih dari satu. sisipkan pada semua kode tersebut. jika ketemu maka sisipkan bar pada atribut class maka hasilnya akan seperti ini.
<div class='post bar hentry uncustomized-post-template'>
atau
<div class='post bar hentry'>
3. Pasang Javascript dan jQuery. cari kode </head>.
dan simpan kode berikut di atasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://css3-tutsplus.googlecode.com/svn/trunk/personal/switch-display.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/**
 * jQuery switch
 *
 * active class active pada switch grid atau list
 * update by denddy gustiana
 * http://under-88.blogspot.com/
 * https://plus.google.com/109783772548428705949
 *
 */
jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.removeClass("bar");
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        $box.addClass("bar");
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});
//]]>
</script>
Catatan : script yang di garis bawahi di atas adalah plugin jquery versi 7. jika pada template anda sudah terpasang maka jangan di pasang kembali
4. Pasang CSS : karena grid ini hanya di tampilakan pada bagian home dan menggunakan tag conditional maka kita akan menaruh css di bawah ]]></b:skin> .
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
/*FONT PT Sans Narrow*/
@font-face {
    font-family:'PT Sans Narrow';
    font-style:normal;
    font-weight:400;
    src:local('PT Sans Narrow'),local('PTSans-Narrow'),
url(http://themes.googleusercontent.com/static/fonts/ptsansnarrow/v3/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff) format('woff');
}
/* CSS Untuk Tombol Switch*/
.switch {
 border-bottom:5px solid #CC0000;
 height:35px;
 color:#444;
 margin:0 10px;
 padding:5px 9px;
 text-transform:uppercase;
}
.switch-left {
 width:360px;
 float:left;
 margin:0 auto;
 padding-top:5px;
 font:20px PT Sans Narrow;
 text-shadow:1px 1px 0 #000;
 color:#AAA;
}
.switch-right {
 width:120px;
 float:right;
 margin:0 auto;
 padding-top:10px;
}
.switch a {
 border:1px solid #999;
 font:11px Arial;
 padding:3px 8px 3px 25px;
 text-transform:none;
 color:#aaa;
}
a.bar_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhaWxPZr1Wcc_-V4eulzZ5_Hn20Df4iOmf5scfDNAGiVJj3nn_ReO9H7n7zeDcKsQ1tFSjC_fZajfMUyuAgmMOXGx6ctr8p_WK_9WVM90RemZnDXY9fVwbOy-ZHABeYmWXf3Qbzbw7UcO6/s1600/drid.gif) no-repeat 3px center;
}
a.dat_view {
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-kHTd731DvxsY7ZFkVHz8Y4il5PoQFMdIjlGd2d1lgcq_o4Ob-1yX2CdhVB-6qcI6nPkyQhKd2QmnG8X5v5EN0A4dmlHZkeDqdi9kSqZE2-DKxl_cKcD4vknO9nBZ-DQ59xewWA_M28U/s1600/listed.gif) no-repeat 3px center;
}
.switch a.active {
 background-color:#aaa;
 border:1px solid #999;
 color:#111;
 cursor:default;
}
/* CSS Bar untuk bagian grid */
.bar {
    background-color:rgba(0,0,0,0.3);
    border:1px solid #000;
    box-shadow:0 0 0 1px #333;
    -moz-box-shadow:0 0 0 1px #333;
    -webkit-box-shadow:0 0 0 1px #333;
    -o-box-shadow:0 0 0 1px #333;
    display:inline;
    float:left;
    height:160px;
    list-style:none;
    margin:10px 0 0 9px;
    overflow:hidden;
    padding:2px 3px 5px;
    position:relative;
    text-align:center;
    width:160px;
}
.bar h3 {
    height:30px;
    border:0 none;
    line-height:8px;
    margin:0 5px 5px;
    padding:2px;
    text-shadow:1px 1px 0 #000;
}
.bar h3 a {
    font:14px PT Sans Narrow;
    text-align:center;
    line-height:16px;
}
.bar h3 a:hover {
    color:#c1541a;
}
.bar .post-body {
    background:none;
    height:245px;
    overflow:hidden;
    width:167px;
    padding:0;
    margin:0 0 .3cm;
}
.bar img {
    float:left;
    height:110px;
    margin:0 18px;
    width:110px;
}
</style>
</b:if></b:if>

Cara membuat Popular Post Dengan Thumbnail Bentuk Grid

Sistem atau Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery ini sebenarnya sama saja dengan dengan Cara membuat Popular Post dengan Thumbnail Horizontal. Hanya saja pemasangannya tetap di sidebar. Atau bisa juga di footer yang telah di bagi menjadi 2 atau 3 kolom.

Pada tutorial ini admin menggunakan sidebar dengan lebar 300px. Jika anda memiliki lebar sidebar yang berbeda, mungkin anda harus melakukan sedikit perubahan agar lebih serasi dengan template.

Berikut ini adalah Langkah-langkah untuk Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery:
1. Masuk kedashboard => Template => Edit Html.
2. Cari kode ]]</b:skin>
3. Letakkan kode CSS dibawah ini di atasnya.
.sidebar .popular-posts ul li img:hover, .cross2 ul li img:hover {-moz-transform:scale(1.1) rotate(-0deg); -webkit-transform:scale(1.1) rotate(-0deg); -o-transform:scale(1.1) rotate(-0deg); -ms-transform:scale(1.1) rotate(-0deg); transform:scale(1.1) rotate(-0deg);filter:alpha(opacity=100);opacity:1;border-radius: 50%;}
.sidebar .popular-posts ul{margin:0;padding:2px;}
.PopularPosts .widget-content ul li {padding: .1em 0;}
.sidebar .popular-posts ul li {margin: 0 3px;background:none;float:left;width:91px;list-style-type:none;border:none;line-height:0px;}
.sidebar .popular-posts ul li img {-webkit-transition:all 0.5s ease; -moz-transition:all 0.5s ease; transition:all 0.5s ease;width: 85px;height: 85px;opacity: 0.7;opacity:0.7;filter:alpha(opacity=70);background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;padding:4px;}
.PopularPosts .item-thumbnail {margin: 0;}
.sidebar .PopularPosts .item-title {display: none;}
4. Save template.
5. Kembali ke Dashboard => Design => Add Element.
6. Pasang popular post bawaan blogger dibagian sidebar. Bagi yang telah memasangnya, settingan yang "harus" dilakukan adalah seperti gambar dibawah ini.

Cara membuat Popular Post dengan Thumbnail Bentuk Grid atau Gallery
1. Hilangkan ceklist pada snippet.
2. Atur jumlah postingan tampil menjadi 3, 6 atau 9.

Cara Merampingkan / Mengecilkan Alexa Rank

Cara Merampingkan / Mengecilkan Alexa Rank
Siapa yang tidak menginginkan alexa ranknya terus meramping ? pasti semua blogger menginginkannya bukan ? ya ! sebab alexa rank yang ramping atau dengan digit yang kecil menandakan bahwa blog tersebut memiliki rangking yang bagus secara global maupun negara. Hal ini dikarenakan alexa memberikan sebuah layanan yang mana membuat suatu rangking sebuah blog secara global (dunia) maupun negara. Jadi jelas bagi blog yang beralexa ramping menandakan rangkingnya sangat bagus. Akan tetapi untuk membuat rangking alexa menjadi ramping tidak mudah loh,,, ada yang perlu dilakukan dan di usahakan. Berikut cara untuk Menurunkan Alexa Rank

Cara Menurunkan / Mengecilkan Digit Alexa Rank

1. Pasang widget alexa di blog anda untuk memantau keadaan blog anda.
Cara paling mudah dan murah meriah adalah dengan Blogwalking dan meninggalkan komentar di Blog-blog dengan Alexa Rank yang lebih tinggi dari Blog anda .

2. Daftar Blog ke Search Engine Terutama Google, Yahoo dan MSN                                      
Ini dilakukan agar blog kita cepat terindek di mesin pencari terutama yang sudah terkenel dan besar seperti Google, Yahoo, MSN dll, baru setelah itu ke search engine lainnya.

3. Daftar Blog ke Technorati                                                                                          
Technorati  merupakan salah satu direktori blog yang sudah terkenal, bia juga berfungsi sebagai blogsearch, tags aggregator, online bookmarks, juga bisa mengetahui  blog mana saja yg memasang link blog kita..

4. Cari Backlink
Cari backlink sebanyak-banyaknya dan berkualitas sebaiknya sih sesuai kategori blog, karena google menilai berdasarkan kuantitas dan kualitas link, tapi akhirnya mana saja yang mau bertukar link.. saya terima.

5. Bookmark  Blog Sebagai Homepage Browser
Bookmark blog sebagai homepage di komputer yang sering digunakan untuk browsing ini juga baru kemarin saya lakukan di komputer rumah sebenarnya sih ini bisa juga dikantor, diwarnet atau dimana saja, makin banyak tentu semakin baik.

6. Update blog 2 hari sekali , 1 minggu 2 kali atau 1 bulan sekali . bila perlu setiap hari justru lebih bagus lagi.

7. Tulis artikel Tentang Alexa
Tulis artikel tentang Alexa misalnya seperti yang sedang sobat baca tentang Cara Meningkatkan Alexa Rank ini dan ajak para pembaca untuk men-download Alexa Toolbar.  Jangan lupa saat membuat artikel tentang Alexa, selalu gunakan label atau kategori dengan keyword :  Alexa, Alexa rank, Alexa traffic rank, Rangking Alexa, dsb. Intinya ada kata ' Alexa '.

8. Melakukan Ping
Lakukan ping secara berkala , saya baru lakukan ini dua kali , ping ini untuk merefresh blog kita di data base mesin pencari.

9. Minta teman untuk mereview dan merating profil blog Anda di Alexa. Memang belum ada bukti, namun mungkin saja cara ini berguna.

Download / Instal Alexa toobar Disini

Semoga bermanfaat.

Cara Membuat Scroll To Top Button


Salam Blogger Sejati.
Untuk melengkapi tentang cara membuat Scroll To Top di blogger kali ini saya akan melengkapinya dengan Membuat Scroll To Top Button Menggunakan OW Generator.
Di postingan sebelumya blog Oto Website pernah membahas tentang Scroll To Top di antaranya berada di artikel : Memasang Tombol Smooth Scroll to Top With jQuery dan Blogger Scroll to Top With jQuery, yang pemasangannya menggunakan jQuwery dan perlu mengedit HTML.

Untuk kali ini Anda tidak perlu mengedit HTML karna Scroll To Top ini hanya menggunakan simple CSS yang di gabungkan menjadi satu Generator, bahkan Anda yang tidak mengerti tentang HTML ataupun pemula akan sangat mudah memasang Scroll To Top. Bahkan Anda dengan sangat mudah apa ingin memasang Scroll To Top ini di bagian kanan, kiri, bahkan di bagian tengah blog Anda. Di sini juga ada banyak pilihan Scroll To Top yang bisa Anda pilih.

Yang perlu Anda ketahui disini Generator ini di buat oleh teman saya ya itu Hasan dari Apps.dan saya memintanya agar saya bisa berbagi kepada Anda.


Membuat Scroll To Top Button Menggunakan OW Generator


Seperti yang saya bilang di atas bahwa cara Membuat Scroll To Top Button ini sangalah mudah dan simple karena menggunakan OW Generator.

Untuk cara menggunakan generator ini sepertinya tidak perlu saya jelaskan lagi karna generator ini sama dengan generator sebelumnya, silahkan Anda gunakan OW Generator ini dengan bijak.

Description: Membuat Scroll To Top Button Menggunakan OW Generator Rating: 5.0 Reviewer: dek rif ItemReviewed: Membuat Scroll To Top Button Menggunakan OW Generator

Select Button

General Options
Button Size :
Position :
Include jQuery Plugin(Do you want to add it?) :


Copyright © 2012 by dek_rif @ Oto Website.All Rights Reserved

Daftar Isi

Site Info

 
Support : Cly First | Android Aplication |
Copyright © 2011. Cly First Blog - All Rights Reserved
Template Created by Clayveno Kevin Published by Cly First
ClyFirst