Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Wednesday, 11 March 2020

Cara simpel membuat laman contact us pada blog

Laman contact us merupakan sebuah laman yang harus ada pada setiap blog, karena contact us bisa menjadi sebuah cara untuk para pengunjung blog berinteraksi langsung dengan author melalui pesan singkat via email

Mengapa blog sobat harus membutuhkan laman contact us? karena laman ini berfungsi memudahkan pembaca untuk menghubungi sobat.

Mungkin sobat akan bertanya lagi akan hal ini, kenapa harus memasangnya di halaman statis? Memang sih lebih mudah jika memasannya di sidebar blog, sekarang jamannya template yang mendukung fitur mobile friendy, jadi mungkin ini pilihan yang lebih baik untuk memindahkan formulir kontak blogger ke halaman statis.

Jadi inilah sobat cara simpel membuat laman contact us pada blog yang sangat mudah untuk ditiru

Lalu bagaimana cara membuat contact us ini di halaman statis blog?

Mudah... Seperti judul yang saya ilustrasikan. Cara simpel membuat laman contact us pada blog, jadi cara ini sangatlah gampang, super duper gampang :D

Oke langsung saja disimak cara membuatnya... Cekidott

Cara membuat laman contact us pada blog

#1 Langsung saja sobat buka menu Laman pada dashboard blogger, kemudian buat laman baru.
#2 Buat laman pada menu HTML (Bukan Compose)
#3 Copy kode di bawah ini dan pastekan ke laman yang sobat buat.
<script>
var blogId = '8694494030520005341';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Your Email: <em>(required)</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>Your Message: <em>(required)</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
#4 Terakhir tinggal publikasikan Laman.

Agar email yang dikirim pengunjung blog sobat masuk ke email sobat, sobat harus mengganti 8694494030520005341 dengan ID Blog sobat.

Bagaimana cara mengetahui ID Blog kita?

Cara simpel membuat laman contact us pada blog jadi harus merubah id blog terlebih dahulu

Angka yang saya blok dengan warna biru tersebut adalah ID Blog sobat.

Nah, saya rasa sobat pasti mudah untuk menerapkan tutorial kali ini. Semoga tutorial membuat laman contact us ini berhasil diterapkan di blog sobat.

Demikian dulu tutorial singkat, jelas dan padat yang bisa saya bagikan pada kali ini. Sampai jumpa di tutorial tutorial mudah lainnya sobat. Sekian dan terima kasih.

Cara mudah memasang widget video Youtube pada sidebar blog

Jika sobat memiliki video yang bagus-bagus dan ingin di tampilkan di blog sobat itu merupakan cara  yang tepat, banyak sekali manfaat yang akan sobat dapatkan jika sobat memasang video youtube sobat di sidebar blog. Selain meletakkan di sidebar, video ini juga bisa dipasang di postingan artikel sobat.

Keuntungan dari widget ini bisa menambah viewer maupun agar channel youtube sobat semakin dikenal oleh pengunjung blog sobat. Apalagi jika topik yang dimuat di video tersebut sama dengan topik yang diulas pada blog sobat.

Tapi kekurangan dari widget ini ialah video tidak bisa berputar otomatis jika pengunjung blog sobat berselancar di blog sobat, tapi video ini akan berputar jika pengunjung blog sobat mengklik tombol play secara manual.

Untuk model atau bentuk widgetnya bisa sobat lihat gambar dibawah ini.

Cara mudah memasang widget video Youtube pada sidebar blog

Manfaat lain dari pemasangan widget ini ialah bisa mempercantik tampilan blog sobat, tapi masalahnya juga bisa malah membuat loading blog sobat jadi melambat.

Tutorial memasang widget video youtube di sidebar

#1 Sobat login ke blogger.com, lalu saat di dashboard blogger, sobat pilih menu Tata Letak.
#2 Tambahkan gadget baru (Gadget HTML/JavaScript), kemudian salin kode dibawah ini lalu pastekan ke gadget HTML/JavaScript yang baru sobat tambahkan tadi.

<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="250" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/kmMulF1B-Es/0.jpg" src="https://www.youtube.com/embed/u_DlT537gg0?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>

CATATAN! Untuk menampilkan video sobat, sobat perlu mengganti u_DlT537gg0 dengan link video youtube sobat. Tetapi yang diambil hanyalah link yang paling terakhir setelah tanda "="

 #3 Nah, terakhir tinggal klik Simpan.

Selamat, kini blog sobat sudah makin tampil cantik dengan adanya widget ini. Untuk membuat para pengunjung blog tertarik untuk memutar video sobat, tampilkanlah video yang berhubungan dengan topik blog sobat. Sekian dari saya, semoga bermanfaat dan sampai jumpa di artikel selanjutnya.

Cara simpel membuat halaman daftar isi per label keren pada blog

Membuat halaman daftar isi pada blog itu merupakan hal yang sangat penting dilakukan oleh para pemilik blog. Karena daftar isi merupakan sebuah peta situs yang akan memudahkan pengunjung kita mencari artikel yang diinginkan.

Jika sobat adalah seorang blogger, maka pemasangan daftar isi/sitemap adalah langkah awal untuk menciptakan sebuah blog yang terlihat lebih profesional.

Daftar isi biasanya lebih mudah lagi jika dibagi ke berbagai label per label, karena bisa mempermudah untuk menemukan sesuatu artikel yang berkaitan dengan artikel yang lainnya.

Pentingnya memasang sitemap pada blog kita, menjadikan kita harus tau juga bagaimana cara membuat sitemap yang terlihat bagus dan rapi.

Nah, mungkin sobat tertarik untuk membuat sitemap simpel ini.

Cara membuat sitemap per label di blog

Seperti diatas adalah contoh dari tampilan sitemap tersebut, atau jika sobat ingin tau langsung, sobat bisa langsung klik DEMO dibawah ini untuk melihatnya secara live.


Jika sobat suka dengan model sitemap tersebut, dan ingin tau bagaimana cara membuatnya, sobat pastikan ikuti tutorialnya dibawah ini dengan baik dan benar.

Cara membuat sitemap per label di blog

#1 Sobat langsung saja login ke blogger.com.
#2 Buka menu Laman.
#3 Lalu buat laman baru.
#4 Beri judul laman terserah dengan apa yang sobat inginkan.
#5 Ganti tab mode Compose ke mode HTML untuk menambahkan kode sitemap.
#6 Salin kode dibawah ini, lalu tempelkan ke laman yang sobat buat tadi.

<style type="text/css">

#toc{

width:97%;

margin:5px auto;

border:1px solid #00a3c1;

-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);

}

.labl{

color:#ff0000;

font-weight:bold;

margin:0 -5px;

padding:1px 0 2px 11px;

background:-moz-linear-gradient(right,#C2EAFE 0%,#00a3c1 40%);

background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#00a3c1),color-stop(1,#C2EAFE));

border:1px solid #00a3c1;

border-radius:4px;-moz-border-radius:4px;

-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;

-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;

}

.labl a{

color:#fff;

}

.labl:first-letter{t

ext-transform:uppercase;

}

.new{

color:#ff0000;

font-weight:bold;

font-style:italic;

}

.postname{

font-weight:normal;

background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);

background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));

}

.postname li{

border-bottom: #ddd 1px dotted;

margin-right:5px

}

</style>




<div id="toc">
<script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script>

<script src="http://www.blog-far.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">

</script></div>
Ganti url www.blog-far.com dengan url blog sobat.

#7 Nah, jika sobat sudah yakin melakukannya dengan benar, sobat tinggal publikasikan laman tersebut dan lihat hasilnya.

taraa!!! Sekarang blog sobat sudah memiliki daftar isi/sitemap yang keren dan pastinya ringan.

Oiya sob, kelebihan dari sitemap ini ialah selalu memperbarui secara otomatis. Jadi, jika sobat misalnya update artikel baru, sitemap ini akan langsung menambahkan artikel tersebut secara otomatis di blog sobat.

Intinya sitemap ini keren deh buat blog sobat.

Demikian dulu artikel kali ini sobat, silahkan dicoba dan semoga berhasil diterapkan di blog sobat. Sekian dulu artikel kali ini yang bisa saya bagikan.

Sunday, 11 March 2018

Cara mengatasi agar artikel di blog tidak di copy paste oleh para copaser

Bagaimana jadinya jika saat kita sudah membuat artikel panjang lebar di blog kita kemudian di copy paste oleh para copaser? Bagaimana cara mengatasinya?

Dalam dunia blogging kita harus dituntut membuat artikel yang benar-benar original, seo friendly agar blog kita akan menjadi baik di mata google. Namun apa jadinya jika artikel original yang kita buat itu di copy paste oleh copaser.

Jadi disinilah tempat yang tepat sobat menemukan Cara mengatasi agar artikel di blog tidak di copy paste oleh para copaser
Dulu blog ini bernama INI BLOGFAR dan sekarang berubah menjadi Blog Mas Febryan

Copy paste memang sering menjadi permasalahan bagi para blogger yang tidak suka artikelnya di ambil begitu saja oleh para copaser, apalagi dia berani memasang artikel tersebut di blognya. Sungguh ironi.

Apalagi jika blog kita kalah bersaing dengan blog yang mengcopy paste artikel kita, entah kita kalah dari sisi ranking ataupun kualitas blog.

"Tuh orang gila ya. Udah copas gak di kasih sumber lagi.."

Ini juga yang biasanya mungkin pernah sobat pikirkan jika artikel sobat di copas habis sama orang tak bertanggung jawab tersebut.

Namun tenang sobat, disini saya akan membagikan cara agar artikel di blog kita tidak bisa di copy paste begitu saja oleh para copaser.

Cara agar blog tidak bisa di copy paste

Disini sobat hanya perlu memberikan sedikit script saja yang bisa menangkal blog sobat dari pencurian si copaser. "Cara ini hanya bisa diterapkan di platform blogger ya sob."

Langsung saja ikuti cara berikut ini :
#1 Sobat langsung saja login ke dashboard blogger.
#2 Buka Template >> EDIT HTML
#3 Cari kode </head> pada template sobat
#4 Ganti kode </head> tersebut dengan script anti copy paste di bawah ini.
<SCRIPT type=”text/javascript“>
if (typeof document.onselectstart!=”undefined”) {
document.onselectstart=new Function (“return false”);
}
else{
document.onmousedown=new Function (“return false”);
document.onmouseup=new Function (“return true”);
}
</SCRIPT>
#5 Terakhir, tinggal simpan template.

Nah, sekarang blog kita bisa aman deh dari tangan-tangan para copaser. Boleh di coba deh apakah kode ini berhasil atau tidak di blog sobat.

Sedikit saran, jika blog sobat adalah blog tutorial yang memuat berbagai macam kode, lebih baik sobat tidak usah menggunakan script anti copy paste ini, karena bisa membuat pengunjung sobat akan tidak bisa mengambil kode tersebut dari blog sobat.

Demikian dulu artikel kali ini sobat, silahkan dicoba dan semoga berhasil diterapkan di blog sobat. Sekian dulu artikel kali ini yang bisa saya bagikan.

Wednesday, 29 November 2017

Cara membuat menu navigasi dengan sosial media ala evo magz

Hallo sobat setia FARB pada kesempatan kali ini saya akan share cara membuat menu navigasi dengan social media ala evo magz. Fungsi dari menu navigasi ini, yaitu untuk memudahkan para pengunjung blog kita untuk mencari kategori isi postingan pada blog tersebut. Selain itu, tampilan dari menu navigasi yang disertai tombol sosial media ini sangat bagus dan terlihat sangat keren.

Evo magz sendiri merupakan salah satu template buatan mas Sugeng yang sudah sangat terkenal dengan struktur SEO dan responsivenya. 

Jika sobat belum tau bagaimana model dari menu navigasi disertai dengan sosial media tersebut, sobat bisa lihat gambar dibawah ini :

Disini saya akan berbagi tutorial cara memasang menu navigasi dan sosial media ala evo magz

Jika sobat tertarik dengan model dan desain dari menu navigasi dan sosial media evo magz tersebut, sobat bisa langsung simak tutorialnya dibawah ini

Cara membuat menu navigasi dengan sosial media ala evo magz

Caranya sangat mudah sekali sobat, yang perlu sobat lakukan adalah sebagai berikut :
1. Sobat login dulu ke blogger.com
2. Sobat pilih menu template
3. Pilih tombol "Edit HTML" yang ada didalam menu template
4. Kemudian sobat pasang kode di bawah ini sebelum/diatas kode ]]></b:skin> atau </style>. Gunakan "CRTL+F" agar lebih mudah untuk mencari kode tersebut.


/* NAVIGATION MENU */
.menu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 auto;height:38px;border:1px solid #f0f0f0;overflow:hidden}
.nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
.nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0}
.nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
.nav-menu li a:hover{background:#f5f5f5}
ul.nav-social{height:38px;margin:0 0 0 0;padding:0 0;float:right}
ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0;border-right:none;border-left:1px solid #f0f0f0}
ul.nav-social li a{display:inline-block;line-height:38px;height:38px;padding:0 8px;margin:0 0 0 0;color:#666666}
ul.nav-social li a i{line-height:38px}
ul.nav-social li a:hover{color:#fff}
ul.nav-social li a.fcb:hover{background:#3B5A9B}
ul.nav-social li a.gpl:hover{background:#DD4B39}
ul.nav-social li a.twt:hover{background:#1BB2E9}
ul.nav-social li a.ytb:hover{background:#ED3F41}

5. Cari lagi kode <div class='header-wrapper'> atau <div id='header-wrapper'> atau <header id="header-wrapper"> dan letakkan kode dibawah ini tepat diatasnya.


<div id='nav-wrap'>
<nav class='menu'>
<!-- primary navigation menu start -->
<ul class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<!-- primary navigation menu end -->
<!-- social media button start -->
<ul class='nav-social'>
<li><a class='fcb' href='#' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a></li><li><a class='gpl' href='#' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a></li><li><a class='twt' href='#' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a></li><li><a class='ytb' href='#' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a></li>
</ul>
<!-- social media button end -->
</nav>
<div class='clear'>
</div>
</div>

Karena tombol sosmed ini menggunakan font awesome, jadi sobat perlu memasang maxcdn font awesomenya.

6. Untuk memasang font awesomenya, sobat hanya perlu mengcopy kode dibawah ini sebelum atau diatas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

7. Terakhir, sobat tinggal simpan template


Nah, sekian dulu artikel kali ini tentang cara membuat menu navigasi dengan sosial media ala evo magz, semoga artikel kali ini bermanfaat, selamat mencoba dan semoga sukses. Keep visit sobat...

~salam FARB

Monday, 27 November 2017

Cara paling mudah membuat artikel terkait di tengah postingan blog

Cara membuat artikel terkait di tengah postingan - Hallo sobat, kali ini saya akan berbagi cara untuk membuat artikel terkait otomatis yang bisa langsung ada di tengah-tengah postingan blog sobat. Kode dibawah ini saya dapatkan dari blognya bung Franky.


Berbeda dengan biasanya artikel terkait hanya ada di akhir postingan ataupun dibawah postingan. Artikel terkait ini memiliki fungsi yang sangat besar untuk menjadi salah satu pengikat pengunjung untuk berlama-lama di blog sobat. Karena dengan artikel terkait ini, para pengunjung blog sobat akan bisa menelusuri lebih jauh lagi tentang artikel-artikel dari blog sobat.

Oke daripada berlama-lama, langsung saja sobat ikuti tutorial dibawah ini.


Cara membuat artikel terkait di tengah postingan dengan mudah


1. Sobat login dulu ke blogger.com
2. Sobat pilih menu template
3. Pilih tombol "Edit HTML" yang ada didalam menu template
4. Kemudian sobat pasang kode di bawah ini sebelum/diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; relatedTitles[relatedTitlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[relatedTitlesNum] = entry.link[k].href; relatedTitlesNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];}} relatedTitles = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((relatedTitles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < relatedTitles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>'); if (r < relatedTitles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>
  </b:if>

5. Cari kode <data:post.body/> (cari kode yang terakhir) lalu hapus kode tersebut dan ganti dengan kode dibawah ini :


<div expr:id='&quot;post1&quot; + data:post.id'/>
<div class='post-terkait'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<h4>Baca Juga</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
<div expr:id='&quot;post2&quot; + data:post.id' class='artbody' itemprop='articleBody description'><data:post.body/></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;);
var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;);
var s=obj1.innerHTML;
var t=s.substr(0,s.length/3);
var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);
if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);}
</script>


6. Sekarang tambahkan kode CSS di bawah untuk mempercantik tampilan dari widget artikel terkait tersebut. Letakkan kode dibawah ini sebelum kode </style> atau ]]></b:skin>

/* Related Post CSS */
.post-terkait {position:relative;background:#fff;padding:0;margin:10px 15px 0 0;float:left;width:165px;border:1px solid #1b71bc}
.post-terkait h4{background:#1b71bc !important;padding:5px 0 !important;margin:0;text-align:center !important;font-size:15px !important;font-weight:400;text-transform:uppercase;color:#fff !important}
.post-terkait ul {margin:0;padding:0}
.post-terkait ul li {list-style:none !important;padding:7px 0;margin:0 7px;border-bottom:2px dotted #ddd;line-height:1.4em !important;text-align:left !important}
.post-terkait ul li:last-child{border:none !important}
.post-terkait a {color:#1b71bc;font-size:13px !important}
.post-terkait a:hover {text-decoration:underline}

7. Terakhir, simpan template

Nah, sekian dulu artikel kali ini tentang cara membuat artikel terkait di tengah postingan, semoga artikel kali ini bermanfaat, selamat mencoba dan semoga sukses. Keep visit kawan...

~salam FARB

Sunday, 26 November 2017

Cara membuat menu navigasi responsive ala evo magz

Hallo sobat setia FARB pada kesempatan kali ini saya akan share cara membuat menu navigasi evo magz. Fungsi dari menu navigasi ini, yaitu untuk memudahkan para pengunjung blog kita untuk mencari kategori isi postingan pada blog tersebut.

Evo magz sendiri merupakan salah satu template buatan mas Sugeng yang sudah sangat terkenal dengan struktur SEO dan responsivenya.

Jika sobat belum tau gimana sih bentuk dari menu navigasi ala evo magz buatan mas Sugeng ini. Coba sobat lihat dulu screenshot dibawah ini :

Inilah contoh gambar dari menu navigasi yang ada di template evo magz


Jika sobat suka dengan menu navigasi tersebut, langsung saja ikuti tata cara pemasangannya di bawah ini:

Cara membuat menu navigasi responsive ala evo magz

Caranya sangat mudah sekali sobat, yang perlu sobat lakukan adalah sebagai berikut :
1. Sobat login dulu ke blogger.com
2. Sobat pilih menu template
3. Pilih tombol "Edit HTML" yang ada didalam menu template
4. Kemudian sobat pasang kode css di bawah ini sebelum/diatas kode ]]></b:skin> atau </style>. Gunakan "CRTL+F" agar lebih mudah untuk mencari kode tersebut.


/* NAVIGATION MENU 2 */
.toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
#nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
.nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}
.nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0 0}
.nav-menu2 > li{float:left}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
.nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset}
.nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
.nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block}
.nav-menu2 li li.hover ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
#search-form{background:#333333;float:right;margin:0 0;width:200px}
#search-form table{width:100%;margin:0 0 0 0}
#search-form td.search-box{padding-right:30px}
#search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
#search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
#search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
#search-form input#search-box[type="text"]:focus{background:#eee;outline:none}

5. Untuk memanggil kode css diatas, pasang kode dibawah ini tepat dibawah kode </header>

<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
<!-- secondary navigation menu start -->
<ul class='nav nav-menu2'>
<li><a class='active' href='blog-far.com'><i class='fa fa-home'></i> Home</a></li>
<li><a href='#'>Menu 1</a>
<ul>
<li><a href='#'>Sub Menu 1</a></li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Sub Menu 1</a>
</li>
<li><a href='#'>Sub Menu 2</a></li>
<li><a href='#'>Sub Menu 3</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='blog-far.com'>Markup</a></li>
<li><a href='blog-far.com'>Error Page</a></li>
<li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li>
</ul>
<!-- secondary navigation menu end -->
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

6. Selanjutnya tinggal simpan template.

Lantas, bagaimana membuat menu navigasi ala evo magz agar menjadi responsive

1. Pertama, masih di dalam menu edit html
2. Pasang kode css responsive di bawah ini sebelum/diatas kode ]]></b:skin> atau </style>


@media only screen and (max-width: 768px) {
      .nav { float: none; width: 100%; max-width: 100%; }
.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }
.nav li ul:before { display: none; }
.nav > li { float: none; overflow: hidden; }
.nav ul { display: block; width: 100%; float: none; }
.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }
.nav-menu2 li li ul { background: #f5f5f5; }
.nav-menu2 li li a:hover { background: #ddd; }
.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; }
}

3. Kemudian pasang kode javascript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]></script><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>

Karena menu navigasi ini menggunakan font awesome, maka sobat harus memasang maxcdn font awesomenya.

6. Untuk memasang font awesomenya, sobat hanya perlu mengcopy kode dibawah ini sebelum atau diatas kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>

7. Terakhir, sobat tinggal simpan template

Nah, sekian dulu artikel kali ini tentang cara membuat menu navigasi responsive ala evo magz, semoga artikel kali ini bermanfaat, selamat mencoba dan semoga sukses. Keep visit sobat...

~Salam FARB