Tutorial HTML Part 1 - Pengertian HTML

Untuk membuat halaman situs web, langkah pertama yang harus kamu lakukan adalah mempelajari HTML. HTML adalah dasar dari pembuatan situs web di internet, nah jika kamu penasaran, mari kita kupas tuntas mengenai bahasa ini.

Pengertian HTML

HTML adalah singkatan dari Hypertext markup languange. Disebut Hypertext karena pada HTML sebuah text biasa dapat berfungsi lain, kamu dapat membuatnya menjadi link yang bisa berpindah dari satu halaman ke halaman yang lainnya hanya dengan mengklik text berupa link tersebut. Kemampuan inilah yang disebut Hypertext, walaupun pada praktiknya tidak hanya text saja yang bisa dijadikan link.

Disebut Markup Languange karena bahasa HTML ini menggunakan tanda (mark) yang berfungsi untuk menandai bagian bagian dari text. Misalnya, text yang bisa menjadi tebal (bold) atau text yang bisa menjadi besar (size). Tanda ini dikenal sebagai HTML tag.

Jika kamu ingin melihat bagaimana macam macam kode HTML, silahkan buka browser kamu (Google chrome / Mozila firefox) lalu bukalah halaman web, contohnya facebook, dll.. Lalu Klik kanan > View page source, Atau bisa juga dengan kombinasi keyboard dengan menekan tombol CTRL + U.

HTML bukanlah bahasa program (Programming languange), Melainkan bahasa markup (markup languange), hal ini tentu saja membuat kamu bingung dan aneh, tetapi jika kamu sudah mengenal bahasa pemrograman lain, memang betul bahwa HTML bukanlah bahasa program, karena didalam penulisan HTML tidak ditemukan bahasa program seperti IF, LOOP, maupun variabel lainnya.

HTML 5

sampai saat ini, perkembangan bahasa markup HTML sangat cepat berkembang, dari yang sebelumnya dikenal dengan xHTML (Extensible Hypertext Markup Languange) dan sekarang berkembang yang disebut dengan HTML 5.

HTML 5 berisi beberapa fitur baru, tetapi mengembangkannya tidak menghilangkan pada HTML sebelumnya, seperti xHTML dan HTML 4.

File HTML ini tidak bisa berjalan kecuali dengan menggunakan Fungsi web browser untuk bisa membacanya, biasa menggunakan extensi .html > Contoh (index.html), Nah pada tutorial lain akan dibahas mengenai Fungis web browser:)

Semoga bisa bermanfaat.

Read More

Google+ Akan Segera dihapus, Migrasi Sekarang Juga!

Google+ Merupakan Platform terbesar yg diterbitkan oleh Google guna memperbanyak komunikasi antar negara dengan Google+, Tetapi baru baru ini beredar kabar bahwa Google+ akan segera dihapus, lalu apakah berdampak pada blogger ? Yaps Tentu saja sangat berdampak, tidak hanya bagi blogger, bahkan bagi para developer yang menggunakan Res API yang diberikan oleh Google+ untuk bisa melakukan Login Session.

Google+ Ditutup karena sebuah alasan, ada kabar bahwa Google+ di tutup guna menjaga Privacy Data yang telah diinput Google, Karena Google+ ini mengalami kebocoran data atau Bug pada Product Google+nya, dan Google mengambil tindakan yang benar Untuk Menjaga Data data para pengguna Google.

Dampak Bagi Blogger : 

Ketiga Product tersebut akan dihapus dari Blogger, Sebagaimana Yang Telah diberitahukan pada Dashboard Blogger kita bahwa akan segera dilakukan Penghapusan, hanya tinggal menunggu hari saja sob.

Dan tidak lupa, Selain itu Komentar Blogger yang menggunakan Google+ sudah tidak bisa lagi, jadi menggunakan Komentar Blogger Yupss!. Tidak lupa juga bahwa Profil Kita akan Berubah, Karena sebelumnya Terdapat Settingan blogger versi  Google+ atau versi Blogger (PROFIL), Maka Segera Kamu ubah ke Profil Blogger ya sob!

Kesimpulan : 

Ya terbilang tidak asik sih karena kita sudah akrab dengan Google+ sebagai Media Sharing untuk blogger, dan seperti media sosial pada umumnya, Jadi semoga saja muncul Product baru yaitu Google++++++ Heheh :D 

Read More

Cara Membuat Contact Form Responsive di Blog

Untuk membuat Contact form atau form contact responsive di blog tidak terlalu sulit jika kamu mengikuti apa ya mimin katakan. Contact form ini berfungsi untuk mempermudah para pengunjung untuk berkomunikasi dengan admin dengan cara mengirim pesan melalui form contact.

Pesan yang akan diterima dari form yang akan mimin buat ini terbilang sangat bagus, mengapa ? karena ketika kamu menggunakannya, dijamin pesan akan masuk dalam waktu beberapa detik melalui email blog, Nah jika kamu penasaran dan ingin membuatnya mudah saja kok, ikuti ya tutorialnya:)



1. Login ke blogger kamu
2. Lihat tab kiri > Halaman > buat halaman baru > Mode HTML
3. Masukkan kode dibawah ini :

<div class="enterblogger-logo">
<i class="material-icons md-48">verified_user</i>
</div>
<style scoped="scoped">
  .enterblogger-logo{text-align:center;}
  @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align:middle;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
  .md-48{font-size: 100px;
    color: #546de5;
    padding: 10px;
    background: #dde3ff;
    border-radius: 100px;}
.enterblogger-input{float:none;position:relative;margin-bottom:45px;margin-right:10px}.enterblogger-input input,.enterblogger-input textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.enterblogger-input input:focus,.enterblogger-input textarea:focus{outline:none}.enterblogger-input label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:14px;color:#546de5}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#546de5;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.enterblogger-input input:focus ~ .bar:before,.enterblogger-input input:focus ~ .bar:after,.enterblogger-input textarea:focus ~ .bar:before,.enterblogger-input textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.enterblogger-input input:focus ~ .highlight,.enterblogger-input textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.enterblogger-input input:focus ~ label,.enterblogger-input input:valid ~ label,.enterblogger-input textarea:focus ~ label,.enterblogger-input textarea:valid ~ label{top:-20px;font-size:13px;color:#546de5}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#546de5;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}
input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
</style>
<form name="contact-form">
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
account_circle
</i> Name</label>
</div>
<div class="enterblogger-input">
<input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" />
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
contact_mail
</i> Email</label>
</div>
<div class="enterblogger-input">
<textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea>
<span class="highlight"></span>
<span class="bar"></span>
<label><i class="material-icons">
message
</i> Message</label>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</form>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '5705102215223474422';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d5705102215223474422','//enterblogger.com/','5705102215223474422');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '5705102215223474422', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Ganti 5705102215223474422 dengan ID Blog kamu dan Ganti Enterblogger.com dengan blog kamu

Dimanakah Letak Blog ID ??

1. Login ke blogger kamu
2. Lihat URL pada blog kamu, untuk lebih jelasnya lihat gambar berikut :

Menurut kamu gimana ? Mudah kan untuk membuat form contact responsive dari enterblogger:p semoga bisa bermanfaaat ya untuk teman teman semua. mimin pergi dulu, dahhh :*

Read More

Cara Menghilangkan Bulan dan Tahun di URL Blogspot

Untuk Menghilangkan bulan dan tahun pada url Postingan Blogspot / Blogger terbilang sangat mudah untuk kamu terapkan.
Permalink atau link yang dihilangkan pada postingan blogspot harus dipertimbangkan juga, Mengapa ? Karena kita akan membahas tuntas mengenai hal ini. baik dalam penggunaan dan sisi negatif jika diterapkan.

Nah jika kamu penaran kira kira apa sih dampaknya dan keuntungannya apa untuk blog kita, yukk simak artikelnya..

Pembahasan

1. Apakah Berpengaruh Terhadap SEO ?
2. Apakah Pengunjung akan Hilang ?
3. Apakah berpengaruh terhadap Adsense ?
4. Contoh Permalink Seperti apa?
5. Cara Menggunakannya

Apakah Berpengaruh Terhadap SEO ?

Jika kamu bingung dan bertanya tanya mengenai hal ini, Apakah jika diterapkan akan berpengaruh terhadap SEO ? Tentu saja sangat berpengaruh, karena bot crawl akan mengindex ulang halaman / url yang telah dirubah atau di custom secara tidak sengaja, karena pada umumnya URL pada postingan blogspot harus menggunakan tanggal dan tahun, itu sudah menjadi settingan default pada Blogger. Tapi, jika kamu menggunakan hanya untuk gaya gayaan atau sekedar mempekeren URL saja layaknya wordpress, maka silahkan dicoba dan diterapkan. Dan juga disarankan bagi kamu yang artikel nya masih sedikit, maka diperbolehkan menggunakan Custom permalink ini.

Apakah Pengunjung akan Hilang ?

Bisa saja pengunjung kamu akan hilang, karena google bot crawl akan mengindex ulang halaman kita dan dianggap jelek, karena sampai saat ini format permalink pada blogspot sudah yang terbaik, jadi tidak perlu di custom lagi hanya untuk gaya gayaan, toh kita main blog untuk menghasilkan uang bukan untuk gaya gayaan,, Hehe kok ngegas adminnya:D

Apakah Berpengaruh Terhadap Adsense ?

Seperti yang kita ketahui bahwa blogspot merupakan perusahaan milik Google yang telah dibeli oleh Google sekitar tahun 2000 an, jadi Google lebih mengetahui mana yang baik untuk blogspot. Jadi sebagaimana yang kita tahun Google adsense merupakan salah satu produk iklan Google yang terbesar, jadi Format permalink ini mungkin saja berpengaruh terhadap Google Adsense.

Contoh Permalink seperti apa ?

Misalkan URL postingan Blog Kamu seperti dibawah ini :

https://www.namablog.com/2018/07/cara-membuat-anak.html

Nahh, nantinya jika di custom, maka formatnya akan berubah seperti dibawah ini :

https://www.namablog.com/cara-membuat-anak.html

Cara Penggunaan

Apakah kamu tertarik dan ingin Mencobanya ? Mari lihat Tutorialnya.
1. Silahkan Login ke Blogger Terlebih dahulu
2. Lihat tab Kiri, ada Tulisan Tema > Edit HTML
3. Masukkan Kode Javascript dibawah ini, Tepat diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
// BloggerJS v0.3.1
// Copyright (c) 2017-2018 Kenny Cruz
// Licensed under the MIT License
var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();
//]]>
</script>

Nah itulah yang bisa admin bagikan untuk kamu, semoga bisa bermanfaat ya :) terima kasih

Read More