Info Penting

Harga Domain Premium Rp. 10.000 Mau?

M emiliki blog pribadi atau blog bisnis dengan menggunakan domian premium tentu ada kebanggaan dan kepuasan tersendiri, untuk blog bisnis ...

Artikel Terbaru

Menampilkan postingan yang diurutkan menurut relevansi untuk kueri membuat blog dengan html. Urutkan menurut tanggal Tampilkan semua postingan

Cara Membuat Email Notifikasi Otomatis Google Form Mudah dan Cepat

Salah satu fasilitas google drive adalah adanya fasilitas untuk membuat formulir online yang sangat mudah dioperasikan/ user friendly sehingga siapapun bisa membuat formulir online dengan cepat tanpa harus belajar kode program yang rumit. Disamping itu karena formulir online ini diberikan gratis oleh google, kita tidak perlu lagi dipusingkan dengan biaya sewa bulanan atau tahunan untuk menyimpan data-data atau untuk menjalankan formulir online ini.

Formulir online yang dibuat dengan google form ini, biasa saya gunakan untuk mendata klien MungBisnis.com yang hendak menggunakan jasa pembuatan blog, dan mendata calon peserta Workshop Online SAGUSABLOG (Satu Guru Satu Blog) anda bisa melihat contohnya disini => [Form Order Jasa Blog] dan disini [Pendaftaran Workshop Online].

Selain kemudahan membuat formulir online dengan google form ini, ternyata salah satu fasilitas google ini menyediakan fitur menambah script khusus yang bisa disesuaikan sesuai kebutuhan penggunanya, namun untuk masalah ini tentunya anda harus paham dengan dunia pemrograman sehingga bisa menggunakan fasilitas ini dengan maksimal sesuai dengan keperluan anda.

Pada kesempatan ini kita akan memanfaatkan google script untuk membuat email notifikasi otomatis sehingga formulir online ini akan lebih canggih dan keren.

Oke, kita mulai Cara Membuat Email Notifikasi Otomatis Google Form Mudah dan Cepat:

Saya anggap anda sudah bisa membuat formulir online di google drive, jika belum bisa silahkan anda simak panduan "Cara Membuat Formulir Online dengan Google Drive" terlebih dulu.

Langkah #1
Silahkan anda login ke drive.google.com dengan menggunakan email gmail anda, kemudian buatlah formulir online sesuai kebutuhan anda, sebagai contoh dalam latihan ini anda bisa buat formulir seperti berikut:

  • Nama
  • Email
  • Pesan Tambahan

Hasilnya seperti pada gambar berikut:

Laporan dalam bentuk tabel pada spreadsheet otomatis seperti gambar dibawah ini:

Langkah #2
Aktifkan script editor melalui menu Tool - Script Editor pada halaman spreadsheet anda, perhatikan gambar dibawah ini:


Langkah #3
Setelah terbuka script editornya seperti pada gambar berikut:

silahkan copy kode di bawah ini kedalam kotak yang diberi nomor 2 pada gambar diatas (hapus terlebih dulu kode bawaan yang ada):


//script email notifikasi otomatis dengan google form mrmung.com function emailkonfirmasi(e) { var nama=e.values[1]; //membaca email pada kolom kolom B var email=e.values[2]; //membaca kolom ke kolom C var pesan=e.values[3]; //membaca kolom kolom D var subject="Ebook Soal Online Gratis dari Mr. Mung"; var message=createHTMLHeader(); message+="<b>Haloo "+nama+"</b><br/>"; message+="Terima kasih atas minat anda untuk mendapatkan ebook gratis dari saya<br/>"; message+="Silahkan anda buka tautan berikut untuk mendownload ebook soal online gratis buatan Mr. Mung: <br/>"; message+="<b>Kunjungi: http://www.mrmung.com/p/ebook.html </b> <br/><br/>"; message+="Hormat Kami<br/><br/>"; message+="Mr. Mung<br/>"; message+="Owner mrmung.com<br/>"; message+=createHTMLFooter(); MailApp.sendEmail({to:email, subject:subject, htmlBody:message, name:"Download Ebook Gratis" }); } //script untuk membuat email notifikasi ke email anda sebagai pemilik formulir online function emailNotifikasi(e) { var nama=e.values[1]; //membaca email pada kolom kolom B var email=e.values[2]; //membaca kolom ke kolom C var pesan=e.values[3]; //membaca kolom kolom D var subject="Ebook Soal Online Gratis dari Mr. Mung"; var message=createHTMLHeader(); message+="<b>Assalamualaikum Bos,</b><br/><br/>"; message+="Barusan ada yang berminat dengan ebook soal onlinenya<br/>"; message+="<b>Berikut Data peminatnya:</b><br/>"; message+="Nama :"+nama+"<br/>"; message+="Email :"+email+"<br/>"; message+="Pesan Tambahan:"+pesan+"<br/>"; message+=createHTMLFooter(); MailApp.sendEmail({ to:"emailkamu@gmail.com", subject:subject, htmlBody:message, name:"Download Ebook Gratis" }); } function createHTMLHeader(){ var html="<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>"; html+="<html xmlns='http://www.w3.org/1999/xhtml'>"; html+="<head>"; html+="<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />"; html+="</head>"; html+="<body>"; return html; } function createHTMLFooter(){ var html="</body>"; html+="</html>"; return html; }

Silahkan anda ganti email diatas (teks warna merah) dengan email anda, ganti juga teks warna biru dengan kalimat sesuai formulir online yang anda buat, kemudian klik tombol simpan.

Kode diatas bisa didownload juga DISINI.

Langkah #4
Langkah selanjutnya adalah aktifkan trigger untuk script diatas, trigger berfungsi untuk mengintegrasikan script dengan spreadsheet, dalam pengaturan trigger ini kita setting supaya setiap ada orang yang mengisi formulir dan mengirimnya, maka secara otomatis akan ada laporan ke email pemilik formulir dan penjelasan atau informasi tambahan ke email orang yang mengisi formulir.

Caranya:
1. Klik icon trigger, kemudian anda klik link No triggers set up, kemudian klik link Click here to add one now,

2.  Berikutnya anda atur trigger seperti gambar berikut:

3. Klik link notification dan lakukan pengaturan seperti gambar berikut, lakukan hal yang sama pada link kedua:

4. Klik tombol Simpan/ Save, dan klik tombol review permission 
Login email dan klik tombol Allow.
5. Formulir online dengan notifikasi otomatis sudah berhasil anda buat, silahkan anda uji coba terlebih dulu sebelum disebarkan.

Untuk demonya, silahkan anda coba isi formulir online untuk mendapatkan ebook gratis dari saya melalui link berikut:


Simak video panduan Cara Membuat Email Notifikasi Otomatis Google Form Mudah dan Cepat di bawah ini:
Demikian, semoga bermanfaat.

Mengenal Lebih Dekat Google Webmaster

Google webmaster tool berfungsi untuk memantau lebih lanjut tentang bagaimana perkembangan blog Anda di mesin pencari Google, bagaimana kekuatan web/ blog anda di SERP Google (SERP adalah singkatan dari Search Engine Results Page istilah Indonesianya Halaman Hasil Pencarian Mesin Pencari) dan  juga yang tak kalah pentingnya dengan Google webmaster ini kita bisa mendiagnosa serangan malware di blog sebagaimana pernah saya tulis pada posting terdahulu: Cara Mengatasi Reported Attact di Page Blog, yang jelas informasi ditampilkan secara detail dan tentu bisa dinikmati secara gratis.

Sebagai contoh perhatikan gambar dibawah ini, ketika saya login di google webmaster dan membuka blog mr-mung.com, maka akan tampak laporan berikut;
Laporan periode 3 April - 3 Mei 2012

Dengan melihat informasi tersebut, kita bisa tahu ternyata jumlah tampilan pencarian terbanyak untuk blog ini pada periode 3 April - 3 Mei 2012 adalah dengan menggunakan kata kunci "murotal" dan kita bisa juga membaca informasi lain mengenai grafik pencarian, link yang masuk ke blog kita, dll.
Klik untuk melihat ukuran penuh


Sebagai prasyarat penggunaan tool ini, blog anda harus terverifikasi, salah satu caranya adalah dengan  menanamkan meta tag kedalam kode template blog anda (dibawah kode <head> ). Setelah blog anda terverifikasi google, anda baru bisa melihat informasi lengkap di google webmaster,
Verifikasi Blog Menggunakan MetaTag
Verifikasi Blog Menggunakan MetaTag

Berikut beberapa tool yang ada di google webmaster yang biasa saya gunakan dan tentunya yang sedikit saya ketahui, yang lainya belum saya gunakan:
=> Site Configuration

1. Sitemaps
Fungsi dasar dari sebuah sitemap adalah untuk mempermudah robotnya google dalam menelusuri situs atau blog anda. sebagai contoh untuk memasukan sitemap blogspot adalah: http://alamatblog.blogspot.com/atom.xml (perhatikan gambar dibawah ini:)



2. Crawler Access
Crawler access mempunyai fungsi sebagai robot penerima tamu (robot teks) yang mempersilahkan halaman yang mana yang boleh diakses dari mesin pencari dan halaman yang tidak tidak boleh diakses mesin pencari, Untuk akun blogspot sudah mempunyai robot teks bawaan, jadi tidak usah pusing memikirkan membuat robot teks sendiri.

=> Your Site On The Web
Pada fasilitas ini Google memberikan akses kepada anda untuk memantau perkembangan blog anda di SERP:
  1. Search Queries adalah gambaran tentang kueri-kueri yan mengarah ke situs atau halaman blog anda.
  2. Links To Your Site berisi informasi tentang semua link yang berasal dari luar yang mengarah ke blog anda.
  3. Keywords adalah gambaran atau informasi yang didapat oleh robot mesin pencari Google ketika merayapi seluruh halaman blog anda.
  4. Internal Links adalah daftar link dalam blog anda yang mengarah ke halaman lain.
  5. Subscriber Stats adalah statistik feed blog anda, yaitu seberapa banyak pelanggan blog anda.

=> Diagnostic
Pada fasilitas ini anda bisa memantau semua masalah yang terdapat pada blog anda:
  1. Malware adalah sebuah laporan robot kepada anda jika ada suatu hal di blog anda yang dicurigai sebagai malware.
  2. Crawl Errors, fasilitas ini memberikan informasi kepada anda tentang halaman error yang ditemui robot google, bisa berupa halaman yang tidak ditemukan (not found).
  3. Crawl Stats adalah statistik aktifitas robot dalam merayapi halaman situs anda, kalau grafiknya konstan atau naik berarti bagus tapi kalau sebaliknya maka ada sesuatu masalah dengan blog anda sampai-sampai robot google tidak mau lagi merayapi halaman blog anda.
  4. Fetch As a Googlebot, dengan alat yang satu ini anda bisa memanggil robot ketika ada pembaruan atau update dalam blog anda yang anda anggap penting, atau ketika si robot lagi lambat mengindex halaman dan artikel anda maka ini bisa jadi pilihan yang baik buat anda, tapi dengan catatan jangan terlalu sering karena ada batasnya.
  5. HTML Suggestion adalah saran dari Google jika ada elemen HTML dalam halaman anda dapat mempersulit robot, jika template, html, css dan meta tag anda baik-baik saja maka fitur ini tidak akan menampilan apa-apa.

Semoga Bermanfaat.

Cara Menampilkan Soal Online Format HTML5 di Blog Guru

Pada posting Sebelumnya saya sudah menjelaskan Bagaimana cara menampilkan file SWF di blog guru dengan hosting berbayar di mana pada artikel tersebut saya jelaskan bagaimana cara mengupload file SWF hasil pembuatan soal online menggunakan aplikasi seperti wondershare quiz creator ataupun ispring Quiz Creator yang outputnya salah satunya adalah tipe file flash atau SWF.

Pembuatan soal online menggunakan aplikasi ispring Quiz Maker outputnya bisa berupa file html 5 di mana dengan menggunakan file html 5 ini maka soal online yang dihasilkan dari aplikasi ispring Quiz Maker bisa ditampilkan di perangkat Android di samping juga bisa ditampilkan di perangkat komputer atau laptop, untuk cara membuat soal online menggunakan aplikasi ispring Quiz Creator bisa anda baca pada postingan ini: Cara Membuat Soal Online dengan iSpring Quizmaker dan Integrasikan ke Blog Guru.

Langsung saja untuk posting kali ini kita akan belajar bagaimana cara mengintegrasikan hasil pembuatan soal online menggunakan ispring Quiz Maker yang outputnya berupa file HTML 5 kemudian kita upload di hosting berbayar yang sudah kita sewa di mungbisnis.com.

Langkah #1
Publish soal online dari Quiz Creator dengan memilih opsi HTML5 dan centang pada opsi kompres menggunakan ZIP.

Langkah #2 
Login ke cpanel hosting Anda kemudian masuk ke File Managerpublic_html atau domain yang ada di cPanel hosting Anda kemudian buatlah satu folder dengan cara klik file folder Tuliskan misalkan usbntik.

Buka folder yang sudah anda buat, contoh pada tutorial ini saya buat folder usbntik, kemudian klik tombol upload untuk mengupload file html 5 dalam format zip yang dihasilkan dari aplikasi ispring Quiz Maker.


Langkah #3
Berikutnya ekstrak file zip yang sudah terupload di dalam cPanel dengan cara klik kanan pada file yang sudah terupload, pilih Extract:


Berikutnya Anda bisa menghapus file zip yang sudah tidak digunakan lagi dan anda berikutnya bisa mengakses alamat domain dengan folder usbntik.

Langkah #4
Silahkan anda coba akses soal online yang sudah selesai terupload ke cPanel  hosting anda, contoh disini saya buka dengan alamat: http://quiz.mung.web.id/usbntik/ , jika sudah berhasil tampil seperti gambar berikut:
Selanjutnya anda panggil soal online tersebut dengan menggunakan kode iframe berikut:

<iframe src="https://quiz.mung.web.id/usbntik/" width="500px" height="600px"></iframe>


Silahkan anda ganti teks warna biru dengan alamat soal online anda, sedangkan untuk lebar dan tinggi (teks warna merah) tampilan soal online silahkan anda sesuaikan dengan desain yang sudah anda buat.

Jangan lupa saat memposting iframe pastikan mode yang dipilih adalah mode HTML bukan Compose kemudian Klik tombol publikasikan dan sekarang soal online yang dihasilkan dari ispring Quiz Maker dalam format HTML 5 bisa tampil di blog guru Anda.

Demikian panduan bagaimana cara mengintegrasikan soal online hasil output dari aplikasi ispring Quiz Maker, Semoga bermanfaat.

Lebih jelasnya simak video Cara Menampilkan Soal Online Format HTML5 di Blog Guru:

Download Video Panduan

Membuat Kode Order via WhatsApp di Blog Bisnis

Saat ini pengguna android lebih khusus pengguna aplikasi perpesanan WhatsApp memang sangat luar biasa banyaknya, terbukti bahwa aplikasi whatsApp di playstore telah diunduh dan diinstall lebih dari 2 milyar pengguna di seluruh dunia, hampir segala umur yang menggunakan smartphone sebagian besar ada aplikasi whatsappnya, oleh karenanya ketika kita memiliki blog bisnis yang terhubung dengan whasapp dengan sekali klik, tentu akan sangat mempermudah para pengunjung blog bisnis kita saat berkeinginan untuk mengorder produk kita, sebagai contoh perhatikan gambar dibawah ini:
Tombol Order Via WhatsApp

Pesan otomatis siap diisi calon pembeli
Bagaimana menurut anda? cukup keren kan?

Dengan kode order via whatsApp yang terpasang di blog bisnis anda, tentu sangat membantu dan memberi pelayanan awal kepada pembeli yang mau melakukan order produk anda, pelayanan awal yang saya maksud adalah anda sudah menyediakan data-data diri yang anda butuhkan, yang harus dilengkapi pembeli produk anda, dan pembeli tidak harus bertanya format cara beli produknya seperti apa, dst.

Pada tutorial kali ini kita akan membahas cara membuat kode order via whatsapp yang bisa anda pasang di blog bisnis anda. Berikut kode order via whatsapp yang bisa anda pasang di blog anda:
<a href="https://api.whatsapp.com/send?phone=6285640335006&amp;text=Saya%20Mau%20Order"><img src="https://2.bp.blogspot.com/-_A6eHtF2uGQ/WY4wV1vOEVI/AAAAAAAARqY/Q_6BJbkmWYEtFHklydscYQXXscC2s5f-ACLcBGAs/s1600/order%2Blewat%2Bwhatsapp.png"/></a>

Kode diatas silahkan anda edit sesuai dengan kebutuhan, mulai dari mengganti nomor hp (warna merah), kemudian teks yang anda inginkan (warna biru). Khusus untuk membuat kode yang berisi teks order kita butuh alat bantu URL encoder untuk merubah, mulai dari spasi, ganti baris, titik dua.
Dalam hal ini Anda bisa menggunakan tool yang tersedia di situs ini: https://www.freeformatter.com/url-encoder.html

Sebagai contoh, saya akan membuat data order sebagai berikut:

Dengan menggunakan tool URL encoder anda tinggal klik tombol encode, maka akan muncul baris kode sebagai berikut:
Order+Produk%3A%0D%0ANama%3A%0D%0AAlamat%3A%0D%0ANo+Hp%3A%0D%0AJumlah+Produk%3A
Anda copy kode tersebut, kemudian pastekan pada baris kode yang saya beri warna biru diatas, untuk merubah tanda + menjadi spasi dari baris kode diatas, anda bisa ganti tanda + dengan kode: %20, untuk mempercepat proses ini, anda bisa gunakan fasilitas replace All di notepad.

Hasil tutorial ini, anda bisa mencoba klik tombol berikut (pastikan anda menggunakan android atau menggunakan komputer yang sudah terhubung dengan whatsApp versi web):



Demikian Cara Membuat Kode Order via WhatsApp di Blog Bisnis, Semoga bermanfaat.

Cara Membuat Menu Responsive Praktis di Blogger

Template Responsive untuk blogger saat ini banyak sekali tersedia di internet, anda bisa mendapatkanya secara cuma-cuma alias gratis, anda download, dan pasang di blog anda dengan mudah dan cepat. Beberapa template blog responsive yang tersedia di internet ada yang sudah menggunakan menu responsive lengkap dengan menu dropdown, namun banyak juga yang hanya menggunakan menu utama saja, tidak tersedia fitur menu drop down pada template responsive gratis tersebut.


Lain halnya dengan template responsive blogger yang versi premium, atau anda harus membeli kepada pembuat template blog responsive tersebut, menu-menu yang tersedia sudah support menu drop down, dan pengelolaan template responsive jenis premium ini tentunya semakin mudah, karena tiada lain ingin memanjakan anda sebagai pembeli template blog.

Pada kesempatan kali ini, akan saya bagikan tutorial Cara Membuat Menu Responsive Praktis di blogger, lengkap dengan menu dropdown, dengan tampilan seperti berikut:
Untuk tempilan menu saat blog dibuka menggunakan laptop seperti pada gambar berikut:


Sedangkan untuk tampilan menu saat blog dibuka menggunakan hp tampilan sebagai berikut:

Cara membuatnya, anda cukup menambahkan gadget HTML/ JavaScript dibawah header blog anda, kemudian copy paste kode berikut:

   <nav id='menu'>
    <input type='checkbox'/>
    <label>≡<span>MENU</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Bisnis Online <font size='1'>▼</font></a>
    <ul class='menus'>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Blog</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Web</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Toko Online</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Blog Pribadi</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Instansi</a></li>

    </ul>
    </li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down <font size='1'>▼</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
           </ul>
        </nav>

<style>
    /*-----Start Responsive Drop Down Menu by MBT redesign by MungBisnis.com ----*/
    body {
    margin: 0px;
    }
    #menu{
    background: #333333;
    color: #FFF;
    height: 40px;
    }
    #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
    #menu ul{height:45px;width:1024px}
    #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
    #menu a{display: block;
    line-height: 40px;
    padding: 0 14px;
    text-decoration: none;
    color: #FFF;
    }
    #menu li a:hover{
    color: #E4E4E4;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    background: #5c5b5b;
    }
    #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
    #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
    #menu label span{font-size:16px;position:absolute;left:35px}
    #menu ul.menus{
    height: auto;
    overflow: hidden;
    width: 170px;
    background: #333333;
    position: absolute;
    z-index: 99;
    display: none;
    }
    #menu ul.menus li{

    display: block;
    width: 100%;
    font:normal 0.8em Arial;
    text-transform: none;
    text-shadow: none;
    border-bottom: 1px dashed #333333;

    }
    #menu ul.menus a{
    color: #FFF;
    line-height: 35px;
    }
    #menu li:hover ul.menus{display:block}

    #menu ul.menus a:hover{
    background: #5c5b5b;
    color: #FFF;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
    }

    @media screen and (max-width: 800px){

      #menu{position:relative}
      #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
      #menu ul.menus{width:100%;position:static;padding-left:20px}
      #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
      #menu input,#menu label{position:absolute;top:0;left:0;display:block}
      #menu input{z-index:4}
      #menu input:checked + label{color:white}
      #menu input:checked ~ ul{display:block}

    }
    /*-----End Responsive Drop Down Menu by MBT redesign by MungBisnis.com ----*/
 </style>   
Perhatikan gambar berikut:

Kode diatas sudah berisi menu2 yang bisa anda edit langsung saat memasukan di gadget HTML/JavaScript, untuk mengatur warna agar sesuai dengan warna blog anda, silahkan anda ganti saja kode warna berikut:
  • Kode warna background menu utama: #333333 Klik DISINI untuk mencari kode warna yang lain.
  • Kode warna background sub menu: #5c5b5b
Untuk melihat demo menu responsive silahkan buka link DISINI.

Tutorial Cara Membuat Menu di Blog


Menu dan sub menu di blog berfungsi untuk memudahkan pengunjung blog untuk membuka berbagai informasi yang ada di web/ blog kita. Bagi website/ blog yang memiliki informasi sangat banyak dengan berbagai kategori informasi yang banyak pula, membuat sub menu tentunya pilihan yang tepat. Nah... pada kesempatan ini akan kita pelajari bersama bagimana cara membuat menu dan sub menu di blog dengan mudah dan cepat.

1.    Login Blogger.com
2.    Klik halaman "Template" backup template lengkap untuk berjaga-jaga terjadi hal-hal yang tidak di inginkan dengan mengklik Cadangkan/ Pulihkan.


3.    Kemudian klik Edit HTML;

4.    Cari kode ]]></b:skin>
dengan menggunakan Ctrl + F.

5.    Copy kode script di bawah ini dan letakkan tepat di atas kode  ]]></b:skin>
#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
6.    Simpan Template.

7.    Copy script berikut dan pasang di widget HTML/JavaScript blog anda:
<div id='menubar'>
<ul>
<li><a href=””>Home</a></li>
<li><a href=”URL_TUJUAN”>About Me</a></li>
<li><a href=”URL_TUJUAN”>>Contact Me</a>
<ul>
<li><a href=”URL_TUJUAN”>>Google +</a></li>
<li><a href=”URL_TUJUAN”>>Facebook</a></li>
<li><a href=”URL_TUJUAN”>>Twitter</a></li>
</ul>
</li>
</ul>
</div>
8.    Letakan widget HTML/JavaScript yang berisi kode menu diatas di bawah header, perhatikan gambar berikut:




  • Download Lengkap tutorial : Cara Membuat Menu di Blog Drive
  • Cara Mendapat Hosting Gambar Gratis

    Mendapat tempat penyimpanan gambar gratis buat blog atau web kita tentu sangat kita inginkan, apalagi Unlimited Bandwidth. Dengan memiliki hosting unlimited bandwidht tentu saja kita tidak khawatir lagi dilain hari gambar di blog kita jadi lambat nge-load-nya atau bahkan malah gak tampil.

    Sering kali hal ini ditanyakan klien Mung Bisnis- Jasa Pembuatan Blog Elegant, Keren dan Murah, bagaimana sih memasang banner di blog, membuat kode pasang banner, atau kadang juga bagaimana upload gambar dan dimana tempat yang pas dan cocok untuk tempat gambar kita?
    Okey, sekarang langsung saja kita pelajari bersama:

    Changing the Read More in blogger - New Feature

    If you feel like changing the Read More text to your own custom phrase, you can easily do this from the Layout | Page Elements tab. Click Edit on the Blog Post widget, and then change the Post page link text to whatever you'd like.


    Cara Membuat Slide Gambar Posting Otomatis

    Pada tutorial ini kita akan belajar bagaimana Cara Membuat Slide Gambar Posting Otomatis pada blog dengan engine blogger.com, dan bagi anda yang telah berhasil mempraktikan tutorial Membuat Slide Gambar di Blog Dengan JQuery pada posting saya terdahulu saya ucapkan SELAMAT, dan anda bisa mencoba tutorial saya kali ini pada blog kesayangan anda.

    Beberapa klien MungBisnis.com | Jasa Pembuatan Blog Elegant Keren dan Murah ada yang menghendaki blog hasil redesain MungBisnis diberi slide gambar dan posting otomatis yang posisinya diletakan diatas posting, dibawah header, browsing cari-cari yang cocok, ketemulah di blognya mas kholis, hanya sedikit perubahan yang saya lakukan, yaitu compressing kode, dan beberapa saya non aktifkan, sebagai gambaran lihat demo di link berikut: mungdemo1.blogspot.com

    Oke, langsung ke tutorial Cara Membuat Slide Gambar Posting Otomatis di Blogger:
    WARNING!   Biasakan backup template anda supaya jika terjadi kesalahan, anda bisa mengembalikan template blog sebelum di edit (klik gambar dibawah untuk memperbesar tampilan).


    Cara backup template blog anda perhatikan gambar diatas.

    1. Login Blogger.com
    2. Buka Template dan klik EDIT HTML perhatikan gambar berikut:

    3. Letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
    /*SLIDER MRMUNG.COM */
    #featured{width:530px;height:300px;position:relative;margin:0;padding:0}
    #featured ul.ui-tabs-nav{display:none;position:absolute;top:0;right:0;list-style:none;width:240px;height:300px;margin:0;padding:0}
    #featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
    #featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
    #featured .ui-tabs-panel{width:530px;height:300px;background:#ddd;position:relative;overflow:hidden}
    #featured .ui-tabs-panel img{width:530px;height:300px}
    #featured .ui-tabs-hide{display:none}
    #featured li.ui-tabs-nav-item a{display:none;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
    #featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
    #featured li.ui-tabs-selected{position:absolute}
    #featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
    #featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
    #featured .ui-tabs-panel .info{position:absolute;top:228px;left:0;height:71px;width:530px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
    #featured .info a{text-decoration:none;color:#eee}
    #featured .info a:hover{color:#FE9A2E;text-decoration:underline}
    #featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
    #featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}
    /*END SLIDER MRMUNG.COM */
    Keterangan: Angka yang saya beri warna merah pada kode diatas, silahkan anda ganti sesuai dengan kebutuhan anda.

    4. Copy kode dibawah ini dan letakkan di atas kode </head> 
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>

    <script type='text/javascript'>
        $(document).ready(function(){
            $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
        });
    </script>

    <script type='text/javascript'>
    //<![CDATA[
      eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('w=Z T();w[0]="1Y://2.1Z.1X.1W/-1U/1V-21/22/27/26/25+23.1T";V=17;28=17;19=1K;1I=20;X=4;14 15(18,1a){e s=18.q("<");u(e i=0;i<s.h;i++){g(s[i].z(">")!=-1){s[i]=s[i].N(s[i].z(">")+1,s[i].h)}}s=s.1M("");s=s.N(0,1a-1);1Q s}14 1L(C){j=(V)?M.1i((w.h+1)*M.1d()):0;n=Z T();u(e i=0;i<X;i++){e f=C.O.f[i];e G=f.R.$t;e P;e A;g(i==C.O.f.h)v;u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1e\'){A=f.l[k].D;v}}u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1f\'&&f.l[k].1g==\'1h/1c\'){P=f.l[k].R.q(" ")[0];v}}g("Q"E f){e r=f.Q.$t}J g("H"E f){e r=f.H.$t}J e r="";x=f.16.$t;g(j>w.h-1)j=0;n[i]=w[j];s=r;a=s.z("<n");b=s.z("F=\\"",a);c=s.z("\\"",b+5);d=s.1j(b+5,c-b-5);g((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))n[i]=d;e B=[1,2,3,4,5,6,7,8,9,10,11,12];e K=["1E","1F","1D","1B","1p","1q","1r","1o","1n","1k","1l","1m"];e 1s=x.q("-")[2].N(0,2);e m=x.q("-")[1];e y=x.q("-")[0];u(e o=0;o<B.h;o++){g(1t(m)==B[o]){m=K[o];v}}e I=\'<L 13="Y-U-1R Y-U-1P" 1z="W-\'+i+\'"><a D="\'+A+\'"><n 1A="24" 1y="1O" F="\'+n[i]+\'"/></a><L 13="1N"><1b><a D="\'+A+\'">\'+G+\'</a></1b><p>\'+15(r,19)+\'...<a D="\'+A+\'"></a></p></L></L>\';1v.1w(I);j++}}14 1H(C){j=(V)?M.1i((w.h+1)*M.1d()):0;n=Z T();u(e i=0;i<X;i++){e f=C.O.f[i];e G=f.R.$t;e P;e A;g(i==C.O.f.h)v;u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1e\'){A=f.l[k].D;v}}u(e k=0;k<f.l.h;k++){g(f.l[k].S==\'1f\'&&f.l[k].1g==\'1h/1c\'){P=f.l[k].R.q(" ")[0];v}}g("Q"E f){e r=f.Q.$t}J g("H"E f){e r=f.H.$t}J e r="";x=f.16.$t;g(j>w.h-1)j=0;n[i]=w[j];s=r;a=s.z("<n");b=s.z("F=\\"",a);c=s.z("\\"",b+5);d=s.1j(b+5,c-b-5);g((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))n[i]=d;e B=[1,2,3,4,5,6,7,8,9,10,11,12];e K=["1E","1F","1D","1B","1p","1q","1r","1o","1n","1k","1l","1m"];e 1s=x.q("-")[2].N(0,2);e m=x.q("-")[1];e y=x.q("-")[0];u(e o=0;o<B.h;o++){g(1t(m)==B[o]){m=K[o];v}}e I=\'<1u 1z="1C-W-\'+i+\'" 13="Y-U-1C-1J"><a D="#W-\'+i+\'"><n 1A="1G" 1y="1S" F="\'+n[i]+\'"/><1x>\'+G+\'</1x></a></1u>\';1v.1w(I);j++}}',62,133,'||||||||||||||var|entry|if|length||||link||img|u2||split|postcontent|||for|break|imgr|postdate||indexOf|posturl|month|json|href|in|src|posttitle|summary|trtd|else|month2|div|Math|substring|feed|pcm|content|title|rel|Array|tabs|showRandomImg|post|numposts1|ui|new||||class|function|removeHtmlTag|published|true|strx|summaryPost|chop|h2|html|random|alternate|replies|type|text|floor|substr|Oct|Nov|Dec|Sep|Aug|May|Jun|Jul|day|parseInt|li|document|write|span|height|id|width|Apr|nav|Mar|Jan|Feb|80|showrecentposts5|summaryTitle|item|70|showrecentposts4|join|info|246|hide|return|panel|50|jpg|uitX7ROPtTU|Tyv|com|blogspot|http|bp||G4NA_uI|AAAAAAAAFBY|image|400|no|s1600|NcWLPVnYEnU|aBold'.split('|'),0,{}))
     //]]>
    </script>
    5. Langkah terakhir Copy kode dibawah ini dan letakkan didalam widget HTML/ Java Script
    <div id='featured'>
    <ul class="ui-tabs-nav">
    <script>
    document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
    </script>
    </ul>
    <script>
    document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>

    </div>
    Perhatikan gambar berikut (klik gambar untuk memperbesar):



    Demikian, semoga berhasil anda prakatikan dan bermanfaat.

    Bagi yang gak ada waktu dan gak  mau repot cara membuat dan mengedit blog, serahkan saja kepada Mung Bisnis | Jasa Pembuatan Blog.

    Membuat Tombol Share Facebook Dengan Counter

    Membuat Tombol Share/ berbagi tulisan ke salah satu situs jejaring sosial yang lagi booming facebook sangatlah baik untuk mendongkrak jumlah visitor ke blog kesayangan kita. Dengan Counter atau penghitung otomatis ketika tombol share di klik bisa kita jadikan masukan tentang kwalitas dan laku tidaknya tulisan kita, tapi itu semua tidak lepas dari keinginan visitor sendiri untuk membagikan tulisan kita ke orang lain.
    Untuk membuat tombol share ke facebook dengan counter caranya adalah sebagai berikut:

    Cara Menampilkan Dokumen Office (Word, Excell, Power Point) di blog Guru

    Kebutuhan blog yang didedikasikan sebagai blog education saya kira tidak akan lepas dari menampilkan materi pembelajaran bisa berupa presentasi maupun hasil penilaian peserta didik. Dalam kondisi offline kita dengan mudah membuat file dokumen, presentasi dan laporan daftar nilai siswa dengan menggunakan program aplikasi dari Ms. Office atau menggunakan open office, namun apabila kita ingin menampilkan secara online kadang bingung. Sebenarnya fasilitas ini sudah lama disediakana cara menampilkan file yang sudah kita buat di komputer ke blog secara online, dan mudah untuk di edit apabila ada kesalahan.

    Google sebagai perusahaan raksasa di Internet sudah menyediakan fasilitas yang bisa dijadikan sebagai alternatif selain Ms. Office, seperti google Sheet sebagai alternatif selain Ms. Excel, ada Google Docs sebagai alternatif selain Ms. Word, ada juga Google Slides yang bisa kita gunakan sebagai alternatif selain Ms. Power Point, dan berbagai layanan lain yang itu semua bisa digunakan secara gratis hanya modal mempunyai akun google saja, nama produk google ini adalah Google Drive.

    Pada kesempatan ini kita akan belajar bagaimana cara menampilkan file Ms. Excel di blog guru. Misal disini saya akan menampilkan file daftar nilai siswa yang sudah selesai dibuat dengan program pengolah angka populer Ms. Excel.
    1. Login ke halaman drive.google.com dengan account gmail anda,
    2. Upload file excel yang sudah dibuat dikomputer anda
    3. Klik kanan pada file excel yang sudah terupload ke Google Drive, pilih Open With - Google Sheet:
    4. Klik menu File -  Publish to the web...
    5. Pilih opsi Embed, pilih sheet yang akan di publikasikan, kemudian klik tombol Publish
    6. Klik OK pada kotak verifikasi, kemudian anda copy kode iframe untuk selanjutnya ada pasang di blog guru:

    Catatan penting saat anda akan memasukan dalam posting blog, pastikan pilih mode EDIT HTML (bukan Compose), perhatikan gambar berikut:


    Pada gambar di atas saya tambahkan pengaturan width="100%" dan height="400" pada kode penyematan dokumen yang anda dapatkan dari google drive, hal ini bertujuan supaya tampilan rapi dengan lebar maksimal 100% sesuai lebar kolom postingan, sedangkan tinggi 400 bertujuan supaya tampilan dokumen tingginya di tetapkan 400pixel, angka ini bisa anda ganti sesuai kebutuhan anda.

    Dibawah ini contoh file excel daftar nilai yang sudah berhasil tampil di blog guru:

    Follow Me


    Iklan Penyemangat

    Koleksi Tutorial Blog

    Arsip Blog