Download Template Dapur White Happy

Download Template Dapur White Happy - Selamat datang dan Berjumpa kembali dengan Master Chef disiang hari ini. Pada postingan kalai ini Master Chef Akan bagikan template blog hasil karya dari 2 hari kemaren sampai tadi pagi. dan sukurlah bisa diselesaikan dan dapat dibagikan disiang hari ini.

Templete ini Master Chef berinama dengang Template Dapur White Happy, dengan harapan pengguna template ini akan selalu merasa happy. Template Dapur Whate Happy merupakan template penyempuraan dari pendahulunya yaitu Dapur Style Kopet dan Dapur White Style.

Template Dapur White Hppy dishare secara gratis dan template ini merupakan sebuah karya yang memerlukan usaha dalam membuatnya. jadi silahkan sobat download dan tidak mengubah atau menghapus Link Author (desain by) yang ada di bagian footer .
Beberapa Fitur tambahan yang dimasukan kedalam Template Dapur White Happy diantaranya yaitu : Conten Image Slider Otomatis, Jumlah Koment disamping judul postingan, Statis Page, halaman postinga bertukar posisi dengan sidebar. Fitur-fitur ini sebelumnya tidak dimiliki oleh pendahulunya.

Yang tertarik menggunakan template blog ini silah kan download. untuk pengaturan template caranya Sebgai berikut.

Pengaturan Conten Image Slider Otomatis.
  1. Pada bagian Dashboard Pilih Tata Letak
  2. Perhatikan Eleman Halaman Yang ada diatas Elemant halaman Postingan. klik Edit pada bagian yang Dilingkari
  3. Copas Kode berikut dan masukan ke kolom HTML/JavaScript
    4. <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default?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?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>
  4. Klik Simpan
Pengaturan Related Post Dibwah Artikel Blog.

Related PostUntuk melakukan pengaturan Related Post yang berada dibawah artikel blog seperti pada gambar Disamping ini silahkan kunjugngi halaman Postingan Template Dapur White Style.

Pengaturannya sama seperti yang tertera dalam postingan tersebut


Ok bro itu dia template Dapur White Happy. Semoga Template ini bisa membantu anda yang tengah membutuhkan template untuk blognya. Untuk sementara sampai disini dulu postingan master chef Download Template Dapur White Happy.
Template Dapur White Hppy dishare secara gratis dan template ini merupakan sebuah karya yang memerlukan usaha dalam membuatnya. jadi silahkan sobat download dan tidak mengubah atau menghapus Link Author (desain by) yang ada di bagian footer .
0 komentar
Label:

Cara Membuat Postingan dan Sidebar Berpindah Posisi

Cara Membuat Postingan dan Sidebar Berpindah Posisi - Sudah pernahkan anda melihat blog, dimana blog tersebut area postingan dan sidebarnya bertukar tempat ?. ya....pastinya sebagian besar sudah sering menemui blog yang seperti ini.  banyak para blogger juga menyukai blog dengan tampilan posting dan sidebarnya berpindah tempat. Alasannya jelas yaitu untuk membuat pengunjung blog terkesan dengan tampilannya, karna blog terlihat lebih profesional.



Jika anda sudah mengerti bagaimana blog yang Posisi Postingan dan Sidebar Berpindah lokasi, master Chef akan langsung berikan resepnya. Berikut Cara Membuat Postingan dan Sidebar Berpindah Posisi
  1. Silahkan login menggunakan akun Blogger masing-masing
  2. Pada bagian Dashboard Pilih Template untuk masuk ke area Edit HTML (Baca Cara Mengakses Atau Masuk ke Edit HTML )
  3. Silahkan back-up template terlebih dahulu untuk mengantisipasi kesalahan saat Editing (Baca cara Back-up dan Upload Template Blogspot)
  4. Setelah masuk diarea Edit HTML Cari Kode Berikut ]]></b:skin> (gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
  5. Setelah menemukan kode ]]></b:skin> Copas kode berikut dan letakan dibawah kode tersebut
    6. <style type='text/css'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    #main-wrapper{float:right;}
    #sidebar-wrapper{float:left;}
    </b:if>
    </style>
  6. Sekarang Klik Tombol Simpan Template tunggu beberapa saat dan lihat hasilnya
  7. Selesai.
Gimana gan...!, tidak terlalu sulitkan untuk mebuat posisi  Postingan dan Sidebar Berpindah Posisi. Master Chef rasa cukup sekian Tutorial Cara Membuat Postingan dan Sidebar Berpindah Posisi. mungkin sobat blogger Dapur Tutorial Blogspot Dan Seo juga membutuhkan Tutorial Cara Memasang Fitur Content Slider Image Otomatis Di blog.
0 komentar
Label: ,

Koleksi Gambar Header Untuk Blogger

Koleksi Gambar Header Untuk Blogger - Hem....postingan apa ni ! wah Master Chef juga bingung karena lagi malas bikin tutorial yang berat-berat jadi Master Chef share aja  Koleksi Gambar Header Untuk Blogger ya barang kali ada yang berminat dan membutuhkan gambar-gambar untuk header.

Gambar header merupakan bagian yang begitu penting untuk tampilan halaman blog. Sembarangan dalam memilih gambar untuk header bisa-bisa membuat tema blog menjadi tidak sesuai dengan topik pembahasan. Gambar Untuk Header sebenarnya bisa dibuat dengan mudah menggunakan software seperti Photoshop dan Corel. namun tidak semua orang mampu menguasai aplikasi tersebut.

Tadi Master Chef Googling cari-cari gambar header yang keren-keren terus saya simpan di komputer saya. setelah dipikir-pikir mendingan disimpan diblog saja barang kali ada yang minat dan menggunakan gambar tersebut di header blognya. ok sobat Blogger Dapur Tutorial Blogspot berikut ini hasil penelusuran Master chef bersama google :
  1. Image Header Creative Banner Designs







  2. Image Header Green Background Banner Designs









  3. Image Header Fantasy Header Designs







  4. Image Header Blue Background Header Designs








  5. Image Header Black Banner Designs





Nah itu dia bro gambar-gambar header hasil downloatan Master Chef malam ini. Semoga Artikel kali ini bisa memberikan manfaat. buat yang membutuhkan silahkan download gambarnya. Mungkin ada beberapa sobat yang mencari artikel Cara Memasang Fitur Content Slider Image Otomatis Di blog. demikian artikel kali ini sampai ketemu pada artikel berikutnya.
0 komentar
Label:

Cara Memasang Fitur Content Slider Image Otomatis Di blog

Cara Memasang Fitur Content Siler Image Otomatis Di blog - Sambil menunggu waktu sholat jumat tiba, Master Chef akan berbagi resep dulu mengenai Content Slider Otomatis. Content Slider atau banyak disebut orang "slide show postingan" merupakan fitur yang bisa kita tambahkan kehalaman blog. banyak para master tutorial blog yang membahas mengenai hal ini sehingga begitu mudah ditemukan dan dipelajari. Cotent slider yang akan kita pasang kurang lebih seperti berikut :



Pastinya anda sudah sering menemui blog-blog yang mengunakan fitur seperti tersebut. buat sobat blogger Dapur Tutorial Blogspot yang merasa tertarik untuk memasang fitur tersebut, master chef sudah sediakan resepnya dibawah ini.

Ok Langsung saja, berikut langkah-langkah untuk memasang fitur conten slider atau slide show diblog.
  1. Login terlebih dahulu kehalaman blog
  2. Silahkan Masuk ke halaman Edit HTML ( yang bingung bagaimana Masuk ke halaman Edit HTML, Baca Tutorial Cara Mengakses Atau Masuk ke Edit HTML Pada Tampilan Baru Blogspot)
  3. Centang  expand widget templates
  4. jangan Lupa Backup dulu template anda untuk antisipasi terjadiya kesalahan dalam Editing HTML (Baca Cara Upload dan Back-Up Template pada Tampilan Baru Blogspot)
  5. Setalah anda berada pada halaman Edit HTML Cari Kode  ]]></b:skin> 
  6. Sudah ketemu Copas kode berikut dan letakanan diatas kode  ]]></b:skin> 
    7. #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/AVvXsEgvCZz7rE7LNUFkpB2dQ_M-xY-GYlCCbD7y3AiEtp1vYyyk4lEiol7aq8cdRz9T4UCbChBoUt-9IvQUaG_iX4EsaFfEaqIvMhYw9utrw13Hk9i8pEN_TGSV2p6M29wo96PULxnj6jFNG5Ok/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}
    Keterangan : Kode yang berwarna biru dan merah adalah kode untuk ukuran slider silahkan disesuaikan.

  7. Selanjudnya cari kode </head>
  8. Sudah ketemu copas kode berikut dan letakan diatasnya kode </head>
    9. <script src='http://dapurtutorial.googlecode.com/files/jquery.js' type='text/javascript'/>
    <script src='http://dapurtutorial.googlecode.com/files/Content-slider.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBElAx02lbR7sIvr80olGhcGkKwmqw3sqiaU9qilpQpJssG2o9t3eybxCLu7nKw5_OP2ACry6uKhTJ0WNvnHI-bDrC0_-cZBCsp42UK-5HDAED_BnIr4MdSmjN4K0FxP4Y_i0YnewSKu8/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 Berwarna hijau adalah jumpal yang ditampilkan dalam slide sedangkan kode berwarna merah dan pink adalah panjang dan tinggi image slider kecil.

  9. Langkah berikutnya adalah Menambah elemen halaman diatas eleman halaman Posting. Cari kode berikut ini ]]></b:skin> Sudah ketemu Copas kode berikut dan letakan diatas kode ]]></b:skin>
    10. /* 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;}  
  10. Selanjutnya cari kode <div id='main-wrapper'> dan tambahkan kode berikut Dibawahnya
    11. <b:if cond='data:blog.url == data:blog.homepageUrl'>
          <div id='slide-wrapper'>
    <b:section class='slide' id='slide' preferred='yes'/>
          </div>
    </b:if>  
  11. Klik Save dan lihat pada bagian Tata Letak Atau Layout diatas element postingan sudah terdapat Elemant Halaman yang tadi anda tambahkan.
  12. Untuk menampilkan Fitur Slider Tambahkan kode berikut kedalam Kolom HTML/JavaScrip dibagian Eleman Halaman Yang tadi anda tambahkan.
    13. <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default?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?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>
  13. Klik Simpan Dan lihat Hasilnya
Nah...itu dia tutorial blog Cara Memasang Fitur Content Slider Image Otomatis Di blog yang lumayan membuat bingung dan berputar-putar. semoga tutorial bisa dipahami. selamat mencoba.
0 komentar
Label:

Cara Memasang Animasi Di Blog

Cara Memasang Animasi Di Blog - Saya punya gambar animasi sendirini, kira-kira gimanaya caranya agar saya bisa menampilkannya kehalaman blog saya ?. itulah sekilas pertanyaan dari sobat blogger Dapur Tutorial Blogspot Dan Seo. Ada begitu banyak widget yang bisa digunakan untuk menghias ataupun mempercantik tampilan halaman blog dan salah satunya adalah widget animasi. widget animasi begitu populer dikalangan pengguna blog.

Widget animasi bisa anda dapat dengan mudah cukup Googling di internet anda akan menemukan banyak sekali yang membagikan animasi siap pasang. Master Chef juga sudah bagikan beberapa Animasi Yang Siap pasang sebagai berikut :
  1. Cara Memasang Widget Burung Twitter Di Blog 
  2. Pasang Widget Animasi Naruto VS Sasuke Di Blog 
  3. Tutorial Cara Pasang Efek Salju Di Blog 
  4. Memasang Animasi Widget Orang Berlari di Blog
  5. Pasang Animasi Pinguin di Blog
Dalam Kesempatan ini Master Chef akan menjelaskan bagaimana cara memasang widget animasi milik sendiri. 

Sebagai contoh disini Master Chef punya widget Animasi Helicopter seperti berikut :


Widget tersebut ingin dijadikan sebagai widget animasi diblog Dapur Tutorial Blogspot dengan langkah-langkah sebabagai berikut :

  1. Animasi Helicopter tersebut di simpat atau di upload di www.Photobucket.com
  2. Setelah Diupload ambil URL Gambar Tersebut. kurang lebih sebagai berikut ;
    3. http://i1069.photobucket.com/albums/u466/dapur_zone/gift1_zps82a76f43.gif
  3. Menggunakan Url Tersebut Tambahkan Kode Berikut :
    4. <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"font-size:8px;>
    <img border="0" src=" Disini Letakan URL Gambar Dari Photo bucket " title="Widget Helicopter." /></a>
    </div>
  4. Pada kode diatas terdapat kode warna merah yang bertulisan " Disini Letakan URL Gambar Dari Photo Bucket" ganti dengan URL gambar yang tadi sudah diambil sehingga menjadi seperti berikut
    5. <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"font-size:8px;>
    <img border="0" src="http://i1069.photobucket.com/albums/u466/dapur_zone/gift1_zps82a76f43.gif" title="Widget Helicopter." /></a>
    </div>
  5. Kode yang berwarna biru adalah nama widget.  Sekarang Kode widget dengan animasi milik anda sendiri sudah jadi dan bisa langsung dipasang.
Cara untuk meletakannya kehalaman blog adalah sebagai berikut :
  1. Login kehalaman blogger
  2. Pada Dasboard Blog pilih Tata Letak atau Layout
  3. Selanjutnya klik pada Tambah Gadget atau Add a Gadget
  4. Pilih Widget HTML/Java Script
  5. Copas Kode Widget yang sudah anda buat tadi
  6. Klik simpan dan selesai.
Ok!, itu dia Cara Memasang Animasi Di Blog. mudahkan. Master Chef Rasa cukup sekian postingan kali ini. semoga bisa membantu sobat-sobat blogger yang ingin memasang widget animasi milik sendiri sehingga akan menjadikan animasi yang ada dihalaman blog semakin unik.
0 komentar
Label:

Pasang Animasi Pinguin Di Sudut Blog

Pasang Animasi Pinguin Di Sudut Blog - Animasi Dihalaman Blog belakangan ini banyak digemari oleh pengguna blog karena dapat membuat tampilan halaman blog menjadi lebih unik dan menarik. Dalam Kesempatan kali ini master chef juga akan berbagi animasi pinguin keren. animasi ini akan kita tampilkan pada bagian pojok halaman blog milik anda. contoh animasi seperti berikut :

 

Sebelum postingan mengenai animasi ini, Master chef juga pernah share mengenai animasi-animasi lain. untuk melihat bagai mana animasi-animasi tersebut sobat blogger bisa kunjungi postingan-postingan berikut :
  1. Cara Memasang Widget Burung Twitter Di Blog
  2. Pasang Widget Animasi Naruto VS Sasuke Di Blog
  3. Tutorial Cara Pasang Efek Salju Di Blog
  4. Memasang Animasi Widget Orang Berlari di Blog
Itu dia beberapa widget animasi lain yang sudah Master chef bagikan. Ok langsung saja kita pasang widget animasi pinguin ini kehalaman blog anda. caranya sama seperti memasang widget-widget animasi yang lain cukup mudah dan tidak perlu melakukan Edit HTML sebagai berikut :
  1. Login Kehalam Blogger
  2. Pada Bagian Dasboard blog pilih Tata Letak atau Layout
  3. Klik tambah Gadget atau Add  a Gadget
  4. Pilih Widget HTML/JavaScript
  5. Copas Kode berikut dan masukan kedalam kolom HTML/JavaScript
    6. <div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"font-size:8px;><a href="http://dapur-tutorial.blogspot.com/2012/11/pasang-animasi-pinguin-di-sudut-blog.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020484.gif" title="Click to get more." /></a><small><center><a href="http://dapur-tutorial.blogspot.com/2012/11/pasang-animasi-pinguin-di-sudut-blog.html" target="_blank">Get a Widget</a></center></small></div>
  6. Klik Simpan dan lihat hasilnya
  7. Selesai !
Sekian dulu postingan mengenai Pasang Animasi Pinguin Di Sudut Blog. semoga bisa membuat sobat blogger senang dengan animasi-animasi keren dan dapat membuat tampilan halaman blog sobat menjadi lebih menarik dengan munculnya animasi-animasi ini. selamat mencobat!
1 komentar
Label:

Cara Membuat Daftar isi Blog Otomatis Berdasarkan Label

Cara Membuat Daftar isi Blog Otomatis Berdasarkan Label - Jauh sebelum postingan ini dibuat, Master Chef Dapur Tutorial Blog Dan Seo juga sudah pernah membahas mengenai Cara Membuat Daftar ini Otomatis yang keren menggunakan JQuery. Nah pada kesempatan kali ini Master Chef kembali ingin berbagi resep tetang cara membuat daftar isi sederhana berdasarkan Label Seperti pada gambar berikut :


Didalam Postingan ini Master chef Tidak menjelaskan lagi apa fungsinya daftar isi. Pastinya sobat Blogger Dapur Tutorial Blogspot dan Seo sudah pada tau kegunaannya. Memasang daftar isi ini yang ini tidak begitu sulit seperti memasang daftar isi keren menggunakan JQuery karena anda tidak perlu melakukan Edit HTML. Namun dari segi tampilan, Daftar isi dengan JQuary lebih keren dibanding dengan daftar isi ini.

Daftar Isi bisa anda letakan dibagian sidebar atau didalam postingan seperti pada blog ini. Langsung saja berikut langkah-langkah untuk memasang widget daftar isi otomatis.

Memasang daftar isi didalam postingan
  1. Buat Sebuah Postingan Baru
  2. Pilih mode entri  HTML Bukan Compose
  3. Copas kode berikut kedalam halaman Entri HTML
    4. <div style="border: 1px solid #000000; height: 250px; overflow: auto; padding: 5px; width: auto;">
    <script src="http://dapurtutorial.googlecode.com/files/daftar-isi-auto.js"></script><script src="http://dapur-tutorial.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    </div>
  4. Jika sudah publikasikan postingan dan lihat hasilnya
Memasang Daftar Isi Pada Bagian Sidebar Blog
  1. Pada bagian dashboar blogger pilih Tata Letak atau Layout
  2. Klik Tambah Gadget atau Add a Gadget 
  3. Pilih widget HTML/JavaScript
  4. Copas kode berikut dan masukan ke kolom HTML/JavaScript
    5. <div style="border: 1px solid #000000; height: 250px; overflow: auto; padding: 5px; width: auto;">
    <script src="http://dapurtutorial.googlecode.com/files/daftar-isi-auto.js"></script><script src="http://dapur-tutorial.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
    </div>
  5. Klik Simpan dan Lihat Hasilnya
Keterangan :

  • Kode warna merah adalah ukuran tinggi daftar isi silahkan disesuaikan.
  • Kode warna biru adalah URL blog silahkan ganti dengan URL Blog milik anda
Mungkin demikian dulu tutorial Cara Membuat Daftar isi Blog Otomatis Berdasarkan Label kali ini. semoga bisa membantu sobat-sobat blogger yang lagi membutuhkan daftar isi dihalaman blognya.
0 komentar
Label:
 
Support : PING by :Ping-o-Matic | Pusat Promosi
Copyright © 2011. Tutorial dan Free Download - All Rights Reserved
Template Modify by Creating Website
Re Design by Bang Aris