Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan

Minggu, 30 Desember 2012

Cara Pasang Tombol Share Lintas Berita Di Blog

Share Lintas BeritaCara Pasang Tombol Share Lintas Berita Di Blog - Tau soal Lintas berita kan ?, pastinya tau semua dengan hal ini karena sudah tidak asing lagi dikalangan para blogger. Berhubungan dengan Postingan kali ini Master Chef sebelumnya juga sudah share tetang Cara Memasang Tombol Share Infogue Di Blog. nah tombol share Litas berita ini fungsunya sama dengan tombol share infogue dimana fungsinya adalah untuk submit artikel anda ke halaman web lintas Berita.

Jika sobat Dapur Tutorial Blogspot Dan Seo juga ingin memasang tombol share lintas berita diblog, Master Chef sudah sediakan resepnya. Resepnya sangat mudah jika langkah-demilangkah dapat kamu ikuti secara benar. Ok langsung saja berikut Cara Pasang Tombol Share Lintas Berita Di Blog :
  1. Silahkan login pada halaman blog masing-masing
  2. Pada bagian dashbord blog kamu pilih menu Template untuk masuk kehalaman Edit HTML. Jika masih belum paham cara mengakses halaman Edit HTML ( Baca  Cara Mengakses Halaman Edit HTML)
  3. Sebelum Edit HTML jangan Lupa Back-up template blog kamu terlebih dahulu untuk mengantisipasi kesalahan saat Edit HTML ( Baca : Cara Back-Up dan Upload Template Blog Lengkap)
  4. Jika kamu sudah masuk pada halaman Edit HTML centang kotak kecil bertulisan Expand Widget Template.
  5. Sekarang Cari kode <data:post.body/> atau <p><data:post.body/></p> (Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
  6. Sudah menemukan kode tersebut Copy kode dibawah ini dan letakan diatas kode <data:post.body/> atau <p><data:post.body/></p>
  7. <a expr:href='&quot;http://www.lintasberita.com/kirimmedia/url:&quot; + data:post.url' rel='nofollow' target='_blank'><img src='http://www.lintasberita.com/buttons_lb/lintasberita-100x20.gif' alt='lintasberita'/></a>
  8. Jika sudah sekarang Klik Simpan Template
  9. Selesau dan Lihat Hasilnya
Demikian pembahasan Master Chef soal Cara Pasang Tombol Share Lintas Berita Di Blog. ingin tau tutorial lainnya nantikan terus diblog Dapur Tutorial Blogspot dan Seo. Semoga apa yang sudah disampaikan bisa memberikan banyak manfaat. terimasikasih!

Sabtu, 29 Desember 2012

Cara Membuat Text Logo Blog Keren Dengan Mudah

Cara Membuat Text Logo Blog Dengan Mudah - Dimana-mana sebuah kemudhan adalah hal yang dicari-cari setiap orang begitu jug para blogger segala sesuatu semuanya ingin mudah. bahasan Master Chef kali ini hanya sekedar resep ringan mengenai Cara membuat logo keren untuk blog. Seperti sebuah logo emang sudah menjadi tradisi untuk blog. sebuah logo akan menjadi indentitas sebuah blog yang kita miliki. namun tidak sedikit dari pemilik blog kesulitan untuk membuat logo karena tidak mengusai beberap software seperti Photoshop dan sejenisnya.

Untuk membuat sebuh Text logo blog kamu sekarng tidak usah pusing dan tidak perlu menguasai keahlian mengunakan software-software editing, kamu cukup menggunakan layanan free dari internet. Salah satu hasil dari pembutan Text logo gratis tersebut bisa kamu lihat pada gambar dibawah ini. hasilnya tidak mengencewakan.

Dynamic Blinkie Text Generator at TextSpace.net

Caranya sangat mudah kamu tinggal memasukan kata atau judul blog kamu saja dan Text untuk logo blog keren kamu jadi. Nah Jika sobat Dapur Tutorial Blogspot Dan Seo tertarik untuk mencobanya langsung saja dibawah ini beberapa web penyedia jasa pembuatan text logo untuk blog kamu yang menurut Master chef memiliki desain-desain yang keren-keren.
  1. www.textspace.net
  2. www.flamingtext.com
  3. www.cooltext.com
  4. www.simwebsol.com
  5. www.logomatik.net
  6. www.thelogoshop.info
Nah itu dia 6 Web penyedia layanan gratis pembuat Text logo blog dengan cara yang sangat mudah. Untuk sementara Master Chef cukupkan sekian informasi ini. Semoga Postingan Cara Membuat Text Logo Blog Keren Dengan Mudah dari Master Chef kali ini banyak memberikan manfaat. Terimakasih!

Rabu, 19 Desember 2012

Cara Pasang Widget Counter Statistik Histats Di Blog

Cara Pasang Widget Statistik Histats Di Blog - Selamat bermalam kamis semuanya !. Buat sobat blogger Dapur Tutorial Blogspot dan Seo yang pacaran dengan blogger seperti master Chef kali ini, mari kita bahas lanjutan cerita postingan Sebelumnya mengenai Cara Mendaftar Di Histats. Didalam topik kita kali ini akan membahas lebih lanjut mengenai cara memasang Widget Statistik Histats di Blog. Fungsinya jelas yaitu sebagai tool yang digunakan untuk mencatat dan mendokumentkan lalulintas jumlah pengunjung blog kamu.

Untuk dapat memasang Widget ini, terutama kamu harus memiliki akun pribadi kamu di Histats. Nah jika kamu belum membuat akun Di Histats silahkan baca postingan Master Chef yang membahas Cara Mendaftar Di Histats. Jika sudah mendapatkan akunnya langsung saja kita lanjutkan ke Cara Pemasangan Widget Statistik Histats di blog.
  1. Silahkan Kunjungi halaman Web Histats di www.histats.com
  2. Yang belum Login silahkan login menggunakan akun Histats masing-masing
  3. Step 1
  4. Jika semua sudah login maka kamu akan dihadapkan pada Dashbord Histats kamu masing masing seperti berikut :
  5. Step 2
  6. Jika sudah Selanjutnya klik pada tombol " +Add a website " Tunggu sesaat dan akan tampil halaman seperti berikut :
  7. Step 3
  8. Pada gambar diatas, anda diminta untuk melengkapi data seperti URL blog, Time Zone, Kategory Title Blog dan Description. silahkan anda lengkapi seperti terlihat pada gambar diatas setelah itu jangan lupa masukan konde konfirmasi untuk membuktikan bahwa anda manusia seterusnya klik pada tombol " Continue " Tunggu beberapa saat sampai tampil halaman seperti berikut :
  9. Step 4
  10. Dari gambar diatas blog anda sudah muncul dan menandakan kalau blog anda sudah terdaftar di Hitstats. untuk mendapatkan kode widget statistik Histats klik pada Url Blog kamu pada bagian yang ditunjuk oleh anak panah dalam gambar diatas dan tunggu sesaat sampai tampil halaman seperti ini :
  11. Step 5
  12. Jika sudah berada pada halaman seperti gambar diatas kemudian klik "Counter Code" pada bagian yang dilingkari dalam gambar diatas. kemudian klik Add New Counter pada bagian yang dilingkari dalam gambar dibawah ini.
  13. Step 6
  14. Setelah anda klik tunggu beberapa saat dan anda akan dihadapkan kan kehalaman yang berisi model-model Counter seperti berikut ini.
  15. Step 7
  16. Silahkan pilih jenis counter yang kamu sukai, jika sudah ketemu klik pada counter tersebut dan anda akan dibawa kehalaman seperti berikut.
  17. Step 8
  18. Halaman ini adalah halaman pengaturan conter anda. bagian yang dilingkari diatas conter anda adalah statistik yang ingin ditampilkan atau tidak, jika ingin ditampilkan berikan tanda centang jika tidak matikan tanda centang tersebut. Master Cheaf sarankan untuk mencentang semuany. jika sudah klik pada tombol " Seve " jika sudah anda akan dibawah kehalaman berikut.
  19. Step 9
  20. Counter anda sekarang sudah jadi dan siap untuk dipasang dihalaman blog. untuk memunculkan kode klik pada bagian Counter ID anda seperti yang ditunjuk anak panah pada gambar diatas, jika sudah diklik akan muncul kodenya seperti yang ditunjuk oleh anak panah pada gambar diatas dengan tulisan Copy. kode tersebutlah yang harus anda masukan ke blog anda untuk menampilkannya di halaman blog.
  21. Cara memasang kode kehalaman blog sama seperti anda memasang kode-kode widget lainya yaitu Pilih Tata Letak -->add a gadget atau Tambah Gadget -->Pilih Widget HTML/JavaScript kemudian paste kode widget Counter Histats Tersebut kedalam kolom Widget HTML/JavaScript
  22. Selesai
Nah itu dia Cara Pasang Widget Counter Statistik Histats Di Blog. Master Chef sudah usahakan untuk membuatnya selengkap mungkin agar mudah untuk dipahami. Sekian dulu untuk bahasan kali ini. Insyaalah jika ada kesempatan kembali kita akan membahas topik lainnya, Salam blogger dan sukses selalu.

Senin, 17 Desember 2012

Cara Mendaftar Di Histats

Cara Mendaftar Di Histats - selamat malam semua sobat blogger Dapur Tutorial Blogspot dan Seo semuanya. dalam postingan kali ini Master Chef akan memberikan resep soal Histats. Histats merupakan salah satu web yang menyediakan widget untuk melakukan perhitungan jumlah pengunjung blog secara akurat. dengan Histarts kamu bisa tau berapa saja pengunjung blog perhari, minggu, bulan dan seterusnya.

Sebelum Sampai disini Master Chef juga sudah berhasil mempublikasi postingan yang berjudul Kereta Mini, Kereta Mall, Komedi Putar Ya Keretaminiku.com. Artikel ini merupakan artikel kontes seo yang master Chef ikuti. Tidak mudah memang untuk menang dalam pertandingan kontes seo namun disini Master Chef bukan untuk menang tapi untuk belajar karena dengan ikut kontes seo membuat semangat belajar seo semakin tinggi. untuk itu buat sobat blogger yang masih belajar seo seperti Master Chef ini jangan takut untuk ikut kontes.

Selain artikel tersebut Master Chef juga sukses Posting Tutorial Squidoo. yang masih belum tau soal squidoo ini bisa kunjungi halaman postingan Master Chef bahasan Pengenalan Squidoo Untuk Memperoleh Banyak Trafik Pengunjung Blog.

Kembali Ke topik bahasan kali ini, disini Master Chef akan berikan resep lengkapnya cara membuat akun histats yang nantinya akan kita lanjutkan ke cara memasang counter widget histats ke halaman blog. langsung saja berikut Cara mendaftar Di Histats.
  1. Hal yang pertama silahkan kunjungi halam Web Histats di www.histats.com, Jika sudah kamu akan menjumpai halaman seperti dibawah ini. Kemudian klik Registrasi sepeti pada bagian yang dilingkari dalam gambar berikut:
  2. Registrasi Histats 1
  3. Tahap selanjutnya, kamu akan diminta untuk mengisi from pendaftaran seperti pada gambar dibawah ini. silahkan masukan data yang diminta.
  4. Registrasi Histats 2
  5. Jika semua data yang diminta sudah dirasa terisi dengan benar Klik pada tombol Register. Tunggu beberapa saat sampai tampil halaman berisi pesan seperti gambar dibawah ini.
  6. Complete Registrasi 1
  7. Dengan munculnya pesan tersebut menandakan bahwa proses registrasi kamu berhasil. untuk dapat mengakses halaman Histats kamu haris memverifikasi email kamu terlebih dahulu.
  8. Untuk Mengkonfirmasi email kamu, silahkan buka email yang tadi kamu gunakan untuk mendaftar di Histast, jika sudah buka pesan yang sudah dikirimkan histats ke akun email kamu dan kamu akan menjumpai isi email tersebut kurang lebih seperti ini :
  9. Verifikasi Email
  10. Sekarang klik Link konfirmasi yang ada di email tersebut.Jika sudah kamu klik maka akan terbuka Tap Baru pada Browser kamu dengan pesan yang berisi seperti dalam gambar dibawah ini :
  11. Complete Registrasi 2
  12. Dengan demikian semua proses pendaftaran di Histats sudah sukses 100% dan kamu sudah bisa login ke halaman web Histats menggunakan Email dan pasword yang tadi kamu daftarkan.
Sekian informasi Tutorial Blogspot mengenai Cara Mendaftar Di Histats kali ini. semoga Resep ini bisa memberi banyak manfaat. dilain kesempatan Master Chef akan sampaikan kelanjutan dari bahasan kali ini mengenai Cara Memasang Widget Counter Histars Di Blog. Sekian dan Terimakasih !

Senin, 03 Desember 2012

Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog

Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog - Kenal dengan Menu Dropdown kan ?, Menu Navigasi ini memang banyak digemari oleh para blogger karena dapat menghemat tempat dengan mengelompokan beberapa kategri dalam satu wadah. Tutorial sejenis juga pernah Master Chef bahas sebelumnya didalam postingan Master Chef berjudul Cara Membuat Menu Horizontal di Blog, dan Cara Membuat Navigasi Dropdown Menu Unik Style Kompas, dan Tehnik Membuat Menu Dropdown Horizontal Plus Search Enggine Blog M.1.

Dropdown menu yang akan kita buat berbeda dengan menu dropdown pendahulunya. kali ini dropdown menu tampil keren dan menarik. posisi ploating sehingga akan selalu terlihat dan mudah diases pengunjung blog. Contoh Menu Navigasi yang akan kita buat bisa sobat Dapur Tutorial Blogspot dan Seo Lihat dibawah ini. jika ingin melihat Demonya Klik saja pada Teks Link Demo dibawah gambar



Nah gimana keren kan ?. Bagai mana caranya, langsung saja ikuti resep dari Master Chef berikut ini :
  1. Pastikan kamu sudah login ke Dashbord Blog kamu
  2. Dari Dashbord blog kamu Pilih Templete untuk mengakses halaman Edit HTML ( Baca : Cara Mengakses Halaman Edit HTML Blogspot)
  3. Jangan lupa untuk Download Lengkap Template terlebih dahulu ( Baca : Cara Back-Up dan Upload Template Blogger)
  4. Jika semua sudah sekarang Cari Kode ]]></b:skin> Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode
  5. Jika kode sudah ketemu,, Copy kode berikut dan letakan diatas kode ]]></b:skin> 
  6. /* Horyzontal Droupdown menu
    ----------------------------------------------- */
    #top-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNpJOxOQLaZGoj7bAgjStrpaxOIH5LWp-PWq_PugUeB-_FsJeDD065GQl_ymTcs5D7s5DvbvsQN9zm4greptUDuYTlsvAkMG315kqkFQDda1pJZkNL6L7D6U9j-O3NrYbDC_4gVDcjJ5lC/s1600/menutop.png) repeat-x;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #444;border-top:3px solid #f1c822}
    #topbar{width:980px;height:40px;margin:0 auto}
    #top{width:100%}
    #top,#top ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
    #top a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
    #top a.arrow{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3cOUFHvVuAh7n_ODrohJdtHPvmMRzL-8Z5n5r5sm2nTYXHHeZgub7-gn9wfnsWPU-PlFiLEIypSMuCzOxkzTtLlOQmBh07xKtVeHMmWt3BSr3kqWgy78aGq7nRnOyRcFi1wA-bvSUP6A/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
    #top li{float:left;position:static;width:auto}
    #top li ul,#top ul li{width:170px}
    #top ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
    #top li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.4);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4)}
    #top li:hover a,#top a:active,#top a:focus,#top li.hvr a{background-color:#222;color:#fff}
    #top li:hover ul,#top li.hvr ul{display:block}
    #top li:hover ul a,#top li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
    #top li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
    #top ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
    #top a span,#top a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;text-shadow: 1px 2px 2px #000}
    #top li:hover a span,#top li:hover a.arrow span{color:#f1c822}

    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
    .clearfix{display:inline-block}
    #inner{padding-top:40px;}
    #fixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
    #fixedinner{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
    * html, * html body{overflow-y:hidden;height:100%;}
    * html #fixedinner{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
    * html #fixedinner{margin-right:17px;}
    * html #fixed {position:absolute;}
  7. Kode Warna Kuning diatas adalah ukuran panjang menu
  8. Kalau sudah, langkah selanjutnya cari salah satu kode berikut :
  9. <div id='header-wrapper'>  
    (disini nanti letak kode menu dropdown)
    </b:section>
        </div>

    Jika Tidak Ketemu Kode Diatas Cari Kode Yang Ini

    <div class='header-outer'>
       (disini nanti posisi kode menu dropdown)
    </b:section>
        </div>
  10. Jika Sudah ketemu salah satu kode diatas letakan Kode dibawah ini dibawah salah satu kode Diatas
  11. <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='#'><span>This is</span>About Us</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 5</a></li>
    </ul>
    </li>

    </ul>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div></div>
  12. Sehingga susunannya menjadi seperti ini
  13. <div class='header-outer'>

    <div id='fixed'>
    <div id='fixedinner'>
    <div id='top-wrapper'>
    <div id='topbar'>
    <ul id='top'>
    <li><a href='/'><span>Welcome</span>Homepage</a></li>
    <li><a href='#'><span>This is</span>About Us</a></li>

    <li><a class='arrow' href='#'><span>Menu 1</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 2</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    </ul>
    </li>

    <li><a class='arrow' href='#'><span>Menu 3</span>Keterangan Disini</a>
    <ul>
    <li><a href='#'>Sub menu 1</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 2</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 3</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 4</a></li>
    <li class='hr'/>
    <li><a href='#'>Sub menu 5</a></li>
    </ul>
    </li>

    </ul>
    <br class='clearit'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div></div>

    </b:section>
        </div>
  14. Sekarang Klik Simpan Template 
  15. Selesai dan Lihat hasilnya
Demikian Resep Cara Membuat Menu Dropdown Horizontal Floating Keren Di Blog. Semat Mencoba dan semoga bisa bermanfaat.

Cara Memasang Search Engine Di Blog Dengan Mudah

Search Engine
Cara Memasang Search Engine Di Blog Dengan Mudah - Search Engine atau Mesin Pencari, pastinya sobat blogger Dapur Tutorial Blogspot dan Seo sudah tidak asing lagi karena setiap kita browsing akan selalu berhubungan dengan Search Engine baik itu Search Engine Google, Yahoo, Bing dan lain-lain. Nah sekarang bagaimana jika Search Engine tersebut kita pasang di Blog ?. Yup tentu bisa, Search Engine sangat disarankan untuk dipasang di blog.

Dengan Membuat Search Engine Di Blog, kamu sudah melakukan salah Satu Optimasi Seo On Page. Kenapa demikian ?, Ya.....dengan kamu memasang Search Engine Di Blog kamu, pengunjung akan lebihh mudah menemukan Artikel yang dicari dengan demikian akan meningkatkan jumlah Page View blog kamu.

Belum Pasang Search Engine Di blog kamu ?, pasang sekarang, berikut ini Master Chef sudah sediakan resep Cara Memasang atau Membuat Search Engine Di Blog sebagai beriktu :

  1. Login ke dashbord blog kamu
  2. Jika sudah, Dar Dashbord blog kamu pilih Tata Letak
  3. Jika sudah Klik Add a Gadget atau Tambah Gadget
  4. Pilih Widget HTML/JavaScript
  5. Copas Kode berikut ini, dan masukan kedalam kolom Widget HTML/JavaScript
  6. <form name="jksearch" action="http://www.google.com/search" method="get" onsubmit="jksitesearch(this)" target="_blank">

    <input id="hiddenquery" type="hidden" name="q" />
    <input name="qfront" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search on this site..." type="text" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 240px;border:none;padding:8px 10px; font:normal 11px arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgap7J37s84fS8JJirGRAJEIQ8MdWSoGEQojNEZIjsu54ttsvGPAML6jMipWHNgntU6A2TG35Hw1hDxebb-MxiPOivMzl9UtJEWTtwDVJJlVIHRyyGyAEg_1tmv7PFWYcjWOib4q9PcVmw/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3B3HiV8LAX1Tm09uJQpGGZksJyxsCWCgaB_cxiNIoUJGfG244NI_zuvt_80u74DBOdkqpTky1jccww_w03UekkwTLg9FLbaaTs1dsWnKIToS6OhQmA58cAbTLtUiQWKhi96azWdrgvw/s1600/search_button.jpg" align="top" value="Search"/>

    <div style="font: normal 11px Arial;color:#666;padding:2px 0;">
    <input name="se" type="radio" checked /> Google
    <input name="se" type="radio" /> Yahoo

    <input name="se" type="radio" /> Msn
    </div>

    <script type="text/javascript">

    // All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use

    //Enter domain of site to search.
    var domainroot="http://dapur-tutorial.blogspot.com/"

    var searchaction=[ //form action for the 3 search engines
    "http://www.google.com/search",
    "http://search.yahoo.com/search",
    "http://search.msn.com/results.aspx"
    ]

    var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines

    function switchaction(cur, index){
    cur.form.action=searchaction[index]
    document.getElementById("hiddenquery").name=queryfieldname[index]
    }

    function jksitesearch(curobj){
    for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see which is checked
    if (document.jksearch.se[i].checked==true)
    switchaction(document.jksearch.se[i], i)
    }
    document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value
    }


    </script>

    </form>
  7. Jangan Lupa ganti kode yang berwarna Merah dengan Url Blog Kamu
  8. Sekarang Klik Simpan
  9. Selesai dan Lihat Hasilnya
Gimana mudahkan Membuat Search Engine Di Blog. Sekian dulu Tutorial Blogspot mengenai Cara Memasang Search Engine Di Blog Dengan Mudah. Selamat mencoba dan semoga bisa bermanfaat.

Minggu, 02 Desember 2012

Tanya Jawab Cara Membuat Blank Page Di Blogspot

Tanya Jawab Cara Membuat Blank Page Di Blogspot - Postingan Master Chef kali ini berhubungan dengan pertanyaan Sobat Dapur Tutorial Blogspot dan Seo "Sir Maurice Doyle" seperti berikut:

Pertanyaan

Master Chef sebenarnya tidak begitu paham dengan maksut, yang Master Chef ambil dari pertanyaan tersebut yaitu Entri baru tapi tidak tampil dihalaman Home page atau banyak yang disebut dengan Blank Page blogspot. nah jika yang dimaksut Master Chef berbeda dengan isi dari pertanyaan Saya mohon maaf dan bisa dijelaskan kembali tetang aksut pertanyaan lewat komentar postingan ini.

Sekilas mengenai Laman Kosong atau Blank Page Blogspot ini merupakan fasilitas yang suda ada disediakan blogger hanya saja jumlahnya terbatas. kita hanya bisa membuat Blank Page maksimal 10 halaman. Cara Membuat Halaman Tidak Tampil Di Branda Blog Resepnya sebagai berikut :
  1. Login kehalaman Blog masing-masing
  2. Dari dashbord blog pilih Page atau Laman
  3. Menu Laman Blogspot
  4. Jika sudah akan tampil halaman seperti ini, klik Blank Page atau Laman Kosong
  5. Blank Page
  6. Jika sudah kamu akan dihadapkan kehalaman postingan seperti halaman postingan biasanya seperti ini. jadi silahkan isi sesuai apa yang ingin kamu tulis.
  7.  Halaman Postingan Blank Page
  8. Setelah selesai klik Publikasi
  9. Lihat Hasilnya. Laman yang sudah kamu buat tidak akan tampil di branda atau home page kamu.
Nah itu dia sekilas mengenai Tanya Jawab Cara Membuat Blank Page atau Laman Kosong Di Blogspot. semoga bisa menjawab pertanyaan  "Sir Maurice Doyle". Sekian terimakasih dan selamat mencoba!

Jumat, 30 November 2012

Cara Menyembunyikan Judul Atau Title Blog

Judul Atau Title Blog
Cara Menyembunyikan Judul Atau Title Blog - 2 Hari yang lalu Master Chef membuatkan blog dan memodifikasi sedikit tampilah headernya. nah disini Master Chef mmengalami sedikit kesulitan untuk meletakan background blog di Header karena terhalang oleh judul atau Title blog. Master Chef coba memasang background tanpa Edit HTML yaitu menggunakan fasilitas bawaan blogger. judul bisa diatasi tetapi Backgroundnya tidak bisa menyesuaikan dengan header blog yang sudah Master Chef Modifikasi.

Solusi satu-satunya yaitu mengganti gambar header blog melalui Edit HTML dan menghilangkah Judul Blog tersebut. Nah buat sobat blogger Dapur Tutorial Blogspot Dan Seo yang mengalami kasus serupa bisa menggunakan metode ini yaitu menyembunyikan atau menghilangkan Title blog. Berikut Cara Menyembunyikan Judul Blog.
  1. Masuk ke akun Blogger Masing Masih
  2. Dari halaman Dasbord blog kamu Pilih Template untuk mengakses halaman Edit HTML ( Baca : Cara Mengakses Halaman Edit HTML Blogspot)
  3. Jangan Lupa untuk Download Templete Lengkap Terlebih Dahulu untuk antisipasi kesalahan saat Edit HTML. ( Baca : Cara Back-Up dan Upload template Blogger)
  4. Beri tanda centang pada Expand Widget Template.
  5. Kemudian cari script berikut "header h1" seperti dibawah ini :
  6. Jika sudah ketemu kamu akan menemukan susunan kode biasanya kurang lebih seperti dibawah ini.
  7. #header h1 { margin:50; padding:5px 0 0 10px; font-size: 100%; font-weight:bold; line-height: 1.2em; letter-spacing:.0em; font-style:italic; color:#FFFFFF; }
  8. Kemudian tambahkan kode berikut ini " visibility:hidden; " (tanpa tanda petik) Sehingga susunannya menjadi seperti ini
  9. #header h1 { margin:50; padding:5px 0 0 10px; font-size: 100%; font-weight:bold; line-height: 1.2em; letter-spacing:.0em; font-style:italic; color:#FFFFFF; visibility:hidden; }
  10. Kalau sudah sekaran klik Simpan Template
  11. Selesai dan Lihat Hasilnya.
Jika sobat Blogger Dapur Tutorial Blogspot dan Seo mengitu langkah-langkah tersebut dengan benar dipastikan judul atau title blog akan tersembunyi dan tidak terlihat lagi. Sekian dulu yang bisa Master Chef sampaikan soal Cara Menyembunyikan Judul Atau Title Blog kali ini. semoga bisa bermanfaat, selamat mencoba dan terimakasih.

Cara Membuat Tab View Menu Tanpa Edit HTML Di Blog

Cara Membuat Tab View Menu Tanpa Edit HTML Di Blog - Masih ingat dengan postinga Master Chef sebelumnya yang hapir serupa dengan Resep Tutorial Blog kali ini yang berjudul Cara Membuat Tab View menu Di Blog? cara yang sebelummnya Master Chef sampaikan sedikit rumit karena harus melakukan Edit HTML. Berbeda dangan cara yang akan kita bahas dalam postingan kali ini, untuk memasang Tab Menu View Sobat tidak perlu melakukan Edit HTML. Cara yang dilakukan kurang lebih sama dengan Cara Memasang Widget Animasi Di Blog.
Tab View Menu
Lasung saja kita bahas Resep Cara Membuat Tab View Menu Tanpa Edit HTML Di Blog.
  1. Login kehalaman blog
  2. Dari dashbord blog pilih Tata Letak atau Layout
  3. Tata Letak atau Layout
  4. Klik Add a Gadget atau Tambah Gadget
  5. Add a Gadget
  6. Pilih widget HTML/JavaScript
  7. HTML/JavaScript
  8. Copy kode berikut dan letakan dalam Widget HTML/JavaScript
  9. <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 80px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #000; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */

    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #736F6E; /* Warna background utama kotak tab */ }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 300px;" class="Tabs">
    <a><span style="color: #fff">Tab 1</span></a>
    <a><span style="color: #fff">Tab 2</span></a>
    <a><span style="color: #fff">Tab 3</span></a>
    </div>
    <div style="width: 300px; height: 200px;" class="Pages">

    <div class="Page">
    <div class="Pad">
    konten 1
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 2
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 3
    </div>
    </div>
    </div></div></form>

    <script src="http://dapurtutorial.googlecode.com/files/Tabview%20menu.js">
    </script>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script></div>
  10. Jika sudah Klik Simpan
  11. Selesai dan lihat hasilnya
Nah Begitulah Cara Mudah Membuat Tab View Menu Tanpa Edit HTML Di Blog. Selamat Mencoba dan semoga sukses!.

Kamis, 29 November 2012

Cara Membuat Tab View Menu Di Blog

Cara Membuat Tab View Menu Di Blog - Tap View Menu Master Chef rasa sangat bermanfaat dipasang dihalaman blog karena Tab View menu membantu kita untuk menghemat halaman blog kita. dengan Memasang Tab View Menu Di Blog kita bisa menempatkan beberapa aksesoris kedalam tab view menu. Mungkin beberapa Sobat Blogger Dapur Tutorial Blogspot dan Seo yang baru mengenai Blog masih bertanya apa itu Tab View Menu ?

Sekilas Master Chef jelaskan mengenai Tab View menu adalah Menu yang berupa tabel sesuai dengan pengelompokannya berdasarkan menu diatasnya yang terbagi dalam beberapa kolom. Biar tidak bingung dengan penjelasan Master Chef, Contohnya bisa dilihat pada gambar berikut :

Tab View Menu
Bagaimana Cara Pasang Tab View Menu Di blog ?, Jangan kemana-mana ikuti terus Master Chef karena Master Chef akan membahas tuntas mengenai resep ini. Berikut langkah-langkahnya :
  1. Silahkan masing-masing login kehalaman blog
  2. Jika semua sudah masuk ke akun blog masing-masing, sekarang Akses halaman Edit HTML Blogspot (Baca Cara Masuk Kehalaman Edit HTML Blogspot)
  3. Jangan lupa juga untuk download template lengkap untuk antisipasi kesalahan dalam edit HTML ( Baca : Cara Back-Up dan Upload Template Blog)
  4. Jika sudah masuk hlaman Edit HTML cari kode ]]></b:skin> ( Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode )
  5. Jika kode sudah ditemukan Copy kode dibawah dan letakan diatas kode ]]></b:skin>
  6. div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
    height: 24px; /* Tinggi Menu Utama Atas */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000; /* Warna border Menu Atas */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
    font-weight: 900;
    color: #000; /* Warna Font Menu Utama Atas */
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #FF9900; /* Warna background Menu Utama Atas */
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
    overflow: hidden;
    background-color: #FF9900; /* Warna background Kotak Utama */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
  7. Kode yang berwana Biru merupakan keterangan dari kode yang bisa kamu rubah untuk penyesuaian dengan halaman blog kamu
  8. Sekarang Klik Simpan template
  9. Ok Langkah selanjutnya, Kembali ke dashbord blog kamu pilih "Tata Letak atau Layout"
  10. Menu Tata letak Blog
  11. Klik Add a Gadget atau Tabah a Gadget
  12. Elemat halaman Blogspot
  13. Tunggu bebera saat akan muncul tampilan seperti dibawah, kemudian pilih Widget HTML/JavaScript
  14. Kumpulan Widget standar Blogspot
  15. Copy Kode Berikut dan letakan kedalam kolom Widget HTML/JavaScript
  16. <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 350px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 350px; height: 250px;">

    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br />
    </div>
    </div>

    </div>
    </div>
    </form>

    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
    Keterangan :
    1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
    2. Code yang berwarna Merah adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
    3. Code yang berwarna Pink diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.

  17. Klik Simpan 
  18. Selesai dan Lihat hasilnya
Gimana gampang kan bro Cara Membuat Tab View Menu Di Blog. Semoga apa yang Master Chef share bisa membantu kamu yang halaman blognya sudah penuh. selamat mencoba dan terima kasih.

Cara Posting Artikel Beserta Gambar Dan Video Di Blog

Cara Posting Artikel Beserta Gambar Dan Video - Tutorial Blog Master Chef kali ini berhubungan dengan sobat blogger Dapur Tutorial Blogspot dan Seo Dibawah ini yang bingung  bagaimana cara Membuat Postingan Artikel yang disertai Gambar Atau video.

Comment

Master Cheft sebelumnya juga sudah postinga Tutorial Dasar Blogger yaitu Cara Posting Artikel Blogspot namun Tutorial Blogspot tersebut masih umum, berhubung ada pertanyaan dari Sobat Blogger Dapur Tutorial Blogspot dan Seo ini sekalian Master Chef lenggkapi Tutorial Blog tersebut. Berikut Cara Posting Artikel Beserta Gambar Dan Video :

Cara Posting Artikel Beserta Gambar :
  1. Silahkan Login dan Buat Entri Baru di Blog kamu
  2. Jika sudah Tulis artikel yang ingin kamu post
  3. Untuk Mengisi gambar dihalaman blog kamu klik pada Tool "Inset Image" seperti yang terlihat pada gambar berikut :
  4. Insert image
  5. Tunggu beberapa saat akan tampil halaman seperti dibawah, kemudian klik pada tombol "Choose Files"
  6. Choose Files
  7. Silahkan pilih gambar yang ingin di Upload jika sudah Klik Open
  8. Pilih Open
  9.  Kemudian klik Upload dan tunggu sampai proses Upload selesai 
  10. Jika Proses Upload selesai Klik pada Tombol Add Selected
  11. Tombol Add Selected
  12. Selesai dan lihat hasilnya
Cara Posting Artikel Beserta Video :

Untuk posting artikel beserta video sebenarnya sama saja dengan cara posting artikel beserta Gambar . berikut caranya untuk menampilkan kehalaman blog.
  1. Buat Entri baru jika ingin memasang Video dalam postingan kamu buka halaman postingan tersebut
  2. perhatikan tool yang ada diatas halaman Entri postingan blog kamu, Klik pada Insert a Video seperti terlihat pada gambar
  3. Insert a video
  4. Tunggu beberapa saat akan tampil halaman seperti ini, klik pada Tombol Choose a Video To Upload
  5. Choose a Video To Upload
  6. Pilih Video yang ingin diupload Jika sudah klik Open 
  7. Klik Tombol Upload dan tunggu sampai proses selesai
  8. Jika sudah klik pada tombol Add Selected
  9. Selesai dan lihat hasilnya
  10. Sobat juga bisa mengambil video dari Youtube dan memasukannya kehalaman blog kamu.
Demikian Cara Posting Artikel Beserta Gambar Dan Video. semoga bisa membatu sobat blogger yang kesulitan untuk menampilkan gambar dan video kehalaman postingan. Semoga bisa bermanfaat dan Selamat Mencoba.

Selasa, 27 November 2012

Cara Lengkap Membuat Read More Otomatis Di Blog

Read More Otomatis
Cara Lengkap Membuat Read More Otomatis  Di Blog - Sebelum Master Chef sudah menyampaikan Tutorial Blog mengenai Resep Cara Membuat Read More Otomatis, Ternyata ada sobat blogger Dapur Tutorial Blogspot dan Seo yang kebingungan karena tutorialnya saya pisah antara Cara Membuat Read More Otomatis Standar dengan Text dan Cara Membuat Read More Otomatis Dengan Gambar.

Nah supaya tidak ada yang bingung lagi kedua tutorial tersebut Master Chef gabung menjadi satu disini makanya Master Chef kasih judul Cara Lengkap Membuat Read More Otomatis Di Blog. disini Master Chef usahakan untuk sedetail mungkin dan semoga sobat Blogger Dapur Tutorial Blogspot dan Seo bisa menyelesaikan Resep ini.

Berikut langkah-langkahnya :
  1. Silahkan Login Kehalam Blog masing-masing
  2. Masuk kehalaman Edit HTML (Baca Caranya Masuk Kehalaman Edit HTML)
  3. Back Up Template kamu terlebih dahulu untuk antisipasi kesalahan edit HTML (Baca Cara Upload dan Back-Up Template Blog)
  4. Jangan lupa Centang Expand Widget Templates
  5. Halaman Edit HTML
  6. Cari Kode </head> (gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
  7. Jika sudah ketemu Copy kode berikut dan letakan diatas kode </head> tersebut.
  8. <script type='text/javascript'>
    var thumbnail_mode = &quot;float&quot; ;
    summary_noimg = 150;
    summary_img = 150;
    img_thumb_height = 100;
    img_thumb_width = 120;
    </script>
    <script src='http://dapurtutorial.googlecode.com/files/ReadMoreScript.js' type='text/javascript'/>
  9. Tahap selanjutnya cari lagi salah satu kode berikut : <data:post.body/> atau <p><data:post.body/></p>.Mungkin kamu akan menemukan lebih dari satu kode ini. jika demikian pilih kode yang pertama, lihat hasilnya jika belum berhasil coba pilih yang kedua dan seterusnya.
  10. Ganti Kode yang anda temukan diatas dengan kode berikut ini :

  11. Kode Ini adalah Kode Untuk Membuat Read More Standar denga Text
    <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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
    <b:else/>
    <data:post.body/>
    </b:if>
    Kode Ini adalah Kode Untuk Membuat Read More Dengan Gambar
    <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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
    <b:else/>
    <data:post.body/>
    </b:if>
  12. Tahap terakhir klik Tombol Simpan
  13. Selesai dan lihat hasilnya.
Nah itu dia Cara  Lengkap Membuat Read More Otomatis Di Blog. semoga kamu bisa menyeselaikan Resep ini dengan baik. Sekian dulu dari Master Chef semoga bisa bermanfaat dan selamat mencoba.

Senin, 26 November 2012

Cara Memasang Like Box Facebook Melayang Di Blog

Cara Memasang Like Box Facebook Melayang Di Blog - Pastinya punya like box Facebook kan dihalaman blognya !. Like box facebook belakangan ini memang banyak digemari oleh blogger. like box facebook bagi Master Chef sangat bermanfaat sekali untuk populeritas blog. karena semakin banyak orang yang like fans page anda tandanya semakin baik juga pupuler blog kamu. Tetapi Like Box Facebook bukan satu-satunya alat untuk menunjukan kepopuleran sebuah blog masih ada banyak Tool ataupun widget untuk menunjukan kepopuleran sebuah blog.

Dalam kesempatan kali Master chef akan mengajak Sobat Blogger Dapur Tutorial Blogspot dan Seo Semuanya untuk mencoba resep Cara Membuat Like Box Facebook Melayang Di Blog.  karena banyaknya jumlah widget yang terpasang dihalaman blog membuat halaman blog menjadi sempit, nah banyak orang untuk mengatasi masalah tersebut tanpa mengurangi widget didalam blognya menggunakan metode ini yaitu membuat widget melayang dihalaman blog. Salah satu yang pernah Master Chef bahas adalah Cara Membuat Buku Tamu Tersembunyi Diblog. contohnya kamu bisa lihat pada gambar dibawah ini

Like Box Facebook Melayang

Sebelum kamu memasang like box facebook melayang dihalam blog kamu, kamu terlebih dahulu harus meiliki halaman Fans page Facebook (Baca Cara Membuat Halaman Fans Page Facebook), setelah ini kamu harus mengambil kode Like Box Facebook dari halaman Fans Page Facebook kamu (Baca Caranya Memasang Linke Box Facebook Di Blog).. jika semua sudah siap dan supaya tidak kepanjangan cerita langsung saja kita bahas bareng-bareng mengenai resep Memasang Like Box Facebook Melayang Di Blog ini sebagai berikut :
  1. Login Kehalaman Blog Masing-masing
  2. Dari bagian dashbord blog kamu pilih Tata Letak atau Layout
  3. Pilih Menu Layout
  4. Jika sudah klik Add a Gadget atau Tambah Gadget
  5. Klik Tambah Gadget
  6. Pilih Widget HTML//JavaScrip
  7. Widget HTML/JavaScript
  8. Copy Kode dibawah dan letakan kode tersebut kedalam kolom HTML/JavaScript
  9. <!-- Script kotak like Facebook Melayang mrrainboow-xp -->
    <style type="text/css">
    #topbar{
    position:absolute;
    padding-left:260px;
    background-color: transparancy;
    width: 300px;
    visibility: hidden;
    z-index: 100;
    }
    </style>
    <script type="text/javascript">
    var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
    var startX = 30 //set x offset of bar in pixels
    var startY = 5 //set y offset of bar in pixels
    var verticalpos="fromtop" //enter "fromtop" or "frombottom"
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }
    function closebar(){
    if (persistclose)
    document.cookie="remainclosed=1"
    document.getElementById("topbar").style.visibility="hidden"
    }
    function staticbar(){
    barheight=document.getElementById("topbar").offsetHeight
    var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
    var d = document;
    function ml(id){
    var el=d.getElementById(id);
    if (!persistclose || persistclose && get_cookie("remainclosed")=="")
    el.style.visibility="visible"
    if(d.layers)el.style=el;
    el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
    el.x = startX;
    if (verticalpos=="fromtop")
    el.y = startY;
    else{
    el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
    el.y -= startY;
    }
    return el;
    }
    window.stayTopLeft=function(){
    if (verticalpos=="fromtop"){
    var pY = ns ? pageYOffset : iecompattest().scrollTop;
    ftlObj.y += (pY + startY - ftlObj.y)/8;
    }
    else{
    var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
    ftlObj.y += (pY - startY - ftlObj.y)/8;
    }
    ftlObj.sP(ftlObj.x, ftlObj.y);
    setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("topbar");
    stayTopLeft();
    }
    if (window.addEventListener)
    window.addEventListener("load", staticbar, false)
    else if (window.attachEvent)
    window.attachEvent("onload", staticbar)
    else if (document.getElementById)
    window.onload=staticbar
    </script>
    <br />
    <div class="clear">
    </div>
    <div id="topbar">
    <table border="1" bgcolor="FFFFFF">
    <tr>
    <td>
    <div style="text-align: right;">
    <a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0hsYX7Um2jipRQZyAoa268lT6uHibbra7igm5LUIpbDimvtn943FlZpkklvB03FHaItcE0BcrrHuV_sP6GdmUAeLch2u6JmAyBAEJMBhhGXFhYJ3woYAPfzDh-LUChtMMfBhuTwSowPGF/s1600/close3.png" /></a></div>
    <center>
    <div style="background: #fff;">


    Letakan Script/code Like Box fans page Anda di sini


    </div>
    </center></td>
    </tr>
    </table>
    </div>
    <!-- End Like Fan Page Melayang MrRainboow-xp -->
  10. Klik Simpan
  11. Selesai dan lihat hasilnya.
Ok bro selesai sudah Tutorial Blog Cara Membuat Like Box Facebook Melayang Di Blog dari Master Chef kali ini. semoga bisa bermanfaat. Selamat mencoba.....!

Sabtu, 24 November 2012

Cara Membuat Recent Post Dengan Thumbnail Keren

Cara Membuat Recent Post Dengan Thumbnail Keren - Recent Post atau List Artikel Terbaru banyak sekali digunakan oleh para blogger. Memasang widget recent post juga berperan dalam Optimasi Seo On Page. dengan memasang Widget Recent Post di Halaman Blog pengunjung akan lebih mudah mengakses setiap artikel terbaru kamu. Tentunya kemudahan mengakses artikel dihalaman blog akan meningkatkan jumlah page view blog kamu.

Recent Post yang Master Chef katakan keren disini karena gayanya berbeda dengan gaya recent post yang lainya karen Widget Recent Post ini dilengkapi dengan Fitur Previous dan Next dibawahnya seperti terlihat pada gambar dibawah ini :

Recent Post Keren

Nah buat Sobat Blogger Dapur Tutorial Blogspot dan Seo yang tertarik dengan Widget ini kamu bisa memasangnya dengan sedikit melakukan Edit HTML pada halaman blog kamu. Berikut resepnya untuk Membuat Recent Post Dengan Thumbnail Keren.
  1. Login terlebih dahulu kehalaman blog 
  2. Dari bagian Dashbord blog kamu pilih Template untuk Masuk kehalaman Edit HTML (Baca Cara Masuk ke Halaman Edit HTML)
  3. Downlad dulu template lengkap blog kamu untuk mengantisivasi kesalahan Edit HTML (Baca Caranya Upload dan Back-Up Template Blog)
  4. Jangan lupa Centang Expand Template Widget
  5. Jika sudah cari kode ]]></b:skin> (Gunakan Tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
  6. Setelah kode berhasil ditemukan Copy Kode dibawah ini dan paste diatas kode ]]></b:skin>
  7. #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/AVvXsEiKEZm_EyYfOcik0b68AJKGq5WfU7zoaPQQuGcAAby8frKHSbpsD587VxFfsoUXSfv0e982C74PuyfiEyG_6czYqOSsW76FVcb43OCYvddNiN7Q0Ld02CHDZFtR_zfZsJiGbepITuo3K8A/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}
  8. Masih di are Edit HTML, sekarang cari kode </head>
  9. Copy kode dibawah dan letakan diatas kode </head>
  10. <script type='text/javascript'>
    //<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://dapur-tutorial.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/AVvXsEhqwI-QNss62rzUx7lcwOVZrqM4mFS3PA_v5qGZj6Vm9OxDE2qdDv0Y56d5LZ6SF8O1b-HQcu-y9TJ4TETz4lCR3Dg9DmsSrVBACHIcMzleTN0UMqI-fMREMC46aJyVImLRygt7cg6a914/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 :
    Kode yang berwarena merah adalah URl blog kamu, ganti dengan URL Kamu. Sedangkan kode yang berwarna Hijau menunjukan jumalah Artikel yang ditampilkan, dan kode yang berwarna kuning adalah jumlah karakter yang ditampilkan

  11. Setelah itu Klik pada tombol Save Template
  12. Kembali ke Dashbord blog kamu, Pilih Tata Letak
  13. Klik Add a Gadget atau Tambah Gadget
  14. Pilih Widget HTML Java/Script
  15. Copy Kode Berikut  :
  16. <div id="terbaru"></div>
    <div id="mas-navigasifeed"></div>
  17. Paste kedalam kolom HTML/JavaScript
  18. Klik Simpan 
  19. Selesai dan Lihat hasilnya
Itu dia Resep Cara Membuat Recent Post Dengan Thumbnail Keren semoga bisa membantu.