Best Way To Learn HTML and CSS: Design and Build Websites

Are you interested in HTML and CSS to Design and Build your own, uncommon, great and stylist websites? I think you are and it is common. There are many people who have a websites with great contents but for their websites CSS and sometimes for HTML many people ignore those contents. And for that a business can be in a great loss!

Every day, more and more people want to learn some HTML and CSS for their websites or for an income source. Joining the professional web designers and programmers are new audiences who need to know a little bit of code
(HTML & CSS) at work (update a content management system or e-commerce store, etc) and those who want to make their personal/professional blogs more attractive to others.

So, what can solve this and teach me HTML and CSS greatly? I think if you learn HTML & CSS from a teacher or any institution it will be easy to learn but more easy to forget. Next if you learn HTML & CSS from any websites it is much annoying because the will not teach you full HTML & CSS and it will be hard to practice them by those websites (even my site), though it can harm your body parts much and waste you time.

Then What? If I say from my experience it is better to learn HTML & CSS from books. Because if you are learning HTML from a Book it can save your time and you don't need to stop practicing practically for seeing further codes, the only thing you have to do is change your book's page. Yes, one thing that you need to understand codes yourself but it is the best because if you try to understand the codes yourself it will be remember-able for a longer time!

But there are many books which is not good enough to buy! But I have found a book that can be a great book for learning HTML & CSS coding (Not Telling Lies). The Book is: "HTML and CSS: Design and Build Websites" by Jon duckett. (hardcover: 152 Pages)

One thing I forget to tell, if you are learning from a book whenever you need you can repeat learning from and if you forget anything instantly you can get it!

The Book I told you, it is available as Hardcover and Paperback. Hardcover will cost a little more than Paperback.

[gallery ids="1478,1479" type="rectangular"]

Price:

New Condition:

Hardcover: 24.17$ [List Price: $42.00 Save: $17.83 (42%)]

Paperback: 11.50$ [List Price: $29.99 Save: $18.49 (62%)]

Used- Like New Condition:

Hardcover: 21.75$

If I say this is the best price to buy this book. You can get it from this low price. This book can make your dream true, if you practice hard :) You are thinking I am asking you to buy the book for my income but that's not true at all, yes I have a profit but for that I am not interested to cheat you!

I suggest you to buy 'Paperback' of this book if you don't wanna invest much on this book. If you want to  know more about the Book you must:

Read More

You can also know what others say about this book and what was the first impression of them!

And don't forget to like, share, comment and obviously follow us! Any question solve it form the 'Read More' button. Thanks

Perbaikan Tombol Share Whatsapp yang Tidak Berfungsi

Berikut ini adalah Perbaikan Tombol Share Whatsapp yang Tidak Berfungsi setelah saya cek memang tidak berjalan sebagaimana mestinya khususnya pada template Infinite dan template lain yang saya bagikan di blog ini maupun blog Idntheme. Terima kasih kepada sobat yang sudah aware dengan hal ini.

Untuk perbaikannya sangat mudah, silakan ikuti langkahnya di bawah ini
Selengkapnya »

Material Design Artikel Terkait Otomatis Dalam Postingan Blog

Sebelumnya saya mohon maaf karena jarang sekali melakukan update artikel di blog ini, di karenakan saat ini saya sedang menjalani proses ulangan semester di sekolah.

Material Design Artikel Terkait Otomatis Dalam Postingan Blog: Tutorial Blog yang kali ini akan saya bahas mungkin sudah banyak blog lain yang mempublikasi tutorial ini.
Artikel Terkait: digunakan untuk menampilkan artikel lain yang berhubungan dengan artikel yang sedang di baca, atau artikel yang memiliki kategory yang sama namun berbeda pembahasan yang di sisipkan pada postingan tertentu, itu adalah penjelasan singkat kegunaan Artikel terkait dalam postingan.

Artikel Terkait kali ini menggunakan efek Material Design sehinggan tampilan yang di hasilkan rapih, sehingga terlihat lebih prefesional di mata pengunjung.

Anda tidak susah-susah lagi jika ingin menaruhkan Artikel Terkait lagi dalam postingan karena artikel terkait yang akan kita bahas kali ini sudah otomatis akan muncul, anda hanya harus memasang script pemanggilnya saja.

Result

Nah jika masih kurang jelas silahkan anda lihat demonya dengan mengklik link di atas ini, lalu geser scroll ke bawah, Bagaimana keren bukan langsung saja untuk tahap pemasanganya di blog.

Material Design Artikel Terkait Otomatis Dalam Pos Postingan Blog

1. Masuk ke Blogger>Tema>Edit Html, pada Edit Html silahkan kamu cari kode ]]</b:skin> lalu pastekan kode berikut tepat di atasnya, untuk mempercepat pencarian silahkan anda klik tombol

CTRL

+

F

pada keyboard kamu.

.front-articles{position:relative;padding:0;margin:15px auto;width:100%;border-radius:0 0 3px 3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.16),0 0 2px 0 rgba(0,0,0,.12)}.front-articles h4{background-color:#273e80;padding:15px 12px;border-top-right-radius: 4px;border-top-left-radius: 4px;margin:0;font-size:15px;font-weight:600;letter-spacing:1px;color:#FFF}.front-articles ul{margin:0;padding:0}.front-articles ul li{background-color:#FFF;position:relative;list-style:none;padding:9px;margin:auto;line-height:1.4em;border-bottom:0}.front-articles ul li:nth-child(odd){background-color:#FFF}.front-articles ul li:before{content:'\f105';font-family:'FontAwesome';position:absolute;margin:0 9px 0 4px;color:#0042ff;overflow:hidden}.front-articles ul li:hover:before{content:'\f107';font-family:'FontAwesome'}.front-articles a{color:#444;font-size:13px;margin:0 0 0 30px}.front-articles a:hover{color:#1da4c2}.front-articles ul li:nth-child(n+4) {display:none}

2. Nah jika sudah selesai selanjutnya silahkan cari kode <body> lalu copy pastekan script di bawah ini di atasnya.

<script type='text/javascript'>
//<![CDATA[
var frontArticles = new Array(); var frontArticlesNum = 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]; frontArticles[frontArticlesNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[frontArticlesNum] = entry.link[k].href; frontArticlesNum++; 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] = frontArticles[i];}} frontArticles = 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((frontArticles.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < frontArticles.length && i < 20) { document.write('<li><a href="' + relatedUrls[r] + '">' + frontArticles[r] + '</a></li>'); if (r < frontArticles.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');}
//]]>
</script>

3. Selanjutnya silahkan anda simpan/save template anda, lalu selanjutnya silahkan anda buat postingan baru atau mungkin masuk ke edit postingan lama anda pindahkan mode Compose>HTML lalu masukan kode script pemanggil berikut.

<div class='front-articles'>
<script src='/feeds/posts/default/-/Tutorial Blog?alt=json-in-script&callback=related_results_labels&max-results=4' target='_blank' type='text/javascript'></script>
<h4>Baca Artikel Ini</h4>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
        </script>
</div>

Silahkan anda ubah Tutorial Blog sesuai dengan kategory postingan yang ingin di tampilakan.

4. Silahkan anda publikasikan, lalu lihat hasilnya.

Nah bagaimana mudah bukan, mungkin sampai di sini saja tutorial yang saya sampaikan kali ini sampe ketemu di lain waktu selamat menunaikan ibadah puasa. :D

Cara Merubah Tampila Warna Address Bar Di Browser Mobile Sesuai Dengan Loyout Blog

Hallo kali ini blog ID Dzgn akan coba mengupas tutorial blog yang mungkin kalian belum ketahui atau mungkin sudah, bagi yang belum mengetahui mungkin masih penasaran dengan tutorial yang saya bagikan kali ini. Tutorial kali ini adalah: Cara Merubah Tampila Warna Address Bar  Di Browser  Mobile Sesuai Dengan Loyout Blog , Nah pastinya sobat ID Dzgn pernah mengunjungi situs web dalam tampilan mobile, nah di addres bar browser pasti terkadang kamu bingung karena addres bar warnanya berbeda dengan tampilan situs web lain, jika kamu pengguna blogger kamu bisa merubah tampilan warna addres bar situs kamu sesuai dengan keingan kamu, caranya pun tidak terlalu ribet hanya harus menambahkan tag untuk merubah warnanya pada setiap tampilan browser mobile yang berbeda.

Baca Artikel Ini

Nah di atas adalah gambar demo yang memperlihatkan perbedaan warna addres bar pada browser mobile, langsung saja ke tutorial pemasanganya di bawah ini!

Cara Merubah Tampila Warna Address Bar Browser Smartphone Sesuai Dengan Loyout Blog

1. Silahkan buka Blogger>Tema>Edit Html, lalu pastekan kode berikut tepat di atas kode </head> untuk mepercepat pencarian silahkan klik tombol

CTRL

+

F

Pada keyboard leptop kamu

<!-- Warna untuk Chrome, Firefox OS, Opera dan Vivaldi -->
<meta content='#0048b4' name='theme-color'/>
<!-- Warna untuk Windows Phone -->
<meta content='#0048b4' name='msapplication-navbutton-color'/>
<!-- Warna untuk iOS Safari -->
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#0048b4' name='apple-mobile-web-app-status-bar-style'/>(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

2. Sekarang silahkan kamu Save/Simpan dan buka situs web kamu pada tampilan mobile dan lihat hasilnya.

Untuk mengganti warna silahkan kamu ganti kode warna #0048b4 sesuai dengan keingan kamu.

Nah bagai mana shobat mudah bukan, ya caranya cukup mudah dan simple menurut saya. Semoga Tutorial Blog di atas bisa bermanfaat buat kamu, jangan mudah menyerah teruslah melangkah tampa rasa lelah (Kata Bijak) Terimakasi.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

Hallo sobat blog ID Dzgn, kali ini saya akan coba membagikan tutorial untuk: Material Design Membuat Tombol Back To Top Effect Ripple Di Blog, sudah hampir satu bulan saya tidak membuat postingan artikle untuk sobat semua, maklum akhir-akhir ini saya kena demam (Males Ngeblog) kalo ada yang mungkin punya solusi untuk penyakit saya ini tolong di bagikan yaa di kotak komentar di bawah.

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog: Back To Top pada blog digunakan untuk memudahkan pengunjung untuk men-scroll posisi dari bawah laman postingan ke atas sesuai dengan efek animasi keyframe yang di gunakan. Tombol back to top ini akan muncul bila scroll mouse atau scroll vertikal di geser ke bawah.
Tombol ini juga biasanya akan menambah kesan menarik tampilan web/blog sehingga tampilan akan terlihat prefesional di mata pengunjung, Hampir seluruh pengguna blog dan website menggunakan tombol back to top ini namun dengan tampilan yang berbeda-beda.
Nah yang kali ini saya bagikan adalah tombol back to top material design yang menggunakan effect ripple, jika kurang jelas silahkan lihat gambar demonya di bawah ini.

Tertarik membuatnya?? Yuk intip cara membuat dan memasangnya di bawah!!☺

Material Design Membuat Tombol Back To Top Effect Ripple Di Blog

1. Silahkan kamu buka Blogger>Tema>Edit Html lalu cari kode ]]></b:skin> pastekan kode CSS berikut tepat di atasnya, untuk mempercepat pencarian silahkan kamu klik tombol

CTRL

+

F

pada keyboard leptop kamu.

#BackToTop{overflow:hidden;position:fixed;transform:scale(0);z-index:90;right:30px;bottom:31px;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);width:55px;height:55px;color:#fff;text-align:center;background-color:#2196F3;font-size:22px;line-height:52px;cursor:pointer;border-radius:100%;transition:all .2s ease-in-out}#BackToTop:hover{background-color:#1976D2;color:#fff;box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}#BackToTop.active{transform:scale(1)}.ripplelink{border:1px solid rgba(0,0,0,0.12);position:relative;overflow:hidden;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;z-index:0}.ink{display:block;position:absolute;background:rgba(255,255,255,0.3);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .65s linear;-moz-animation:ripple .65s linear;-ms-animation:ripple .65s linear;-o-animation:ripple .65s linear;animation:ripple .65s linear}@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}.kbrd{border-radius:3px;border:1px solid #a3a3a3;box-shadow:1px 0 1px 0 #FFF,0px 2px 0 2px #D3D3D3,0px 2px 0 3px #888;box-sizing:border-box;display:inline;font-family:inherit;font-stretch:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;margin:0 5px;padding:1px 5px;text-transform:capitalize;vertical-align:baseline}

2. Jika sudah selanjutnya silahkan kamu pastekan kode berikut tepat di atas kode </body>

<div class='ripplelink' href='#' id='BackToTop'><i class='fa fa-angle-up'></i></div>
<script type='text/javascript'>
jQuery(document).ready(function(e){var t=e("#BackToTop");e(window).scroll(function(){e(this).scrollTop()>=200?t.show(10).animate("#BackToTop").addClass("active"):t.animate("#BackToTop").removeClass("active")});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
//<![CDATA[
$(function(){var t,e,i,n;$(".ripplelink").click(function(o){0===$(this).find(".ink").length&&$(this).prepend("<span class='ink'></span>"),t=$(this).find(".ink"),t.removeClass("animate"),t.height()||t.width()||(e=Math.max($(this).outerWidth(),$(this).outerHeight()),t.css({height:e,width:e})),i=o.pageX-$(this).offset().left-t.width()/2,n=o.pageY-$(this).offset().top-t.height()/2,t.css({top:n+"px",left:i+"px"}).addClass("animate")})});//]]></script>

3. Terakhir silahkan kamu save/simpan tema

Nah jika 3 tahap di atas sudah kamu lakukan sekarang coba kamu lihat hasilnya di blog kamu.
Mungkin hanya itu saja yang saya bisa sampaikan pada artikle tutorial kali ini, semoga bisa bermanfaat buat kamu terimakasi.

Material Design Box Subscribe With Heading

Material Design Box Subscribe With Heading: Baiklah kali ini blog ID Dzgn akan coba kembali membahas Tutorial yang bertemakan material design.
Material Design cukup membuat saya terpesona sehingga mendorong saya untuk mempelajari Strukture kode dalam material design ini. Sebelumnya saya juga sudah pernah membagikan artikle tutorial untuk Box Subscribe/Kotak berlangganan ini dengan menggunakan efek material design namun ada sedikit perbedaan untuk bentuk dan stylenya.
pada kesempatan sebelumnya saya juga sudah membahas pengertian dari Box Subscribe/Kotak Berlangganan secara singkat namun dapat bisa di cerna untuk para visitor yang belum mengetahui apa itu Box Subscribe, untuk melihat lebih lengkapnya kamu bisa lihat pada link berikut Widget Box

Baca Juga: 
Subscribe (Kotak Berlangganan) Menggunakan Material Design Di Blog
Cara Membuat Box Subscribe (Kotak Berlangganan) Keren Di Bawah Postingan Blog
Cara Membuat Kotak Berlangganan Keren Di Blog

Untuk jika masih penasaran dengan hasil demonya, berikut sudah kami sediakan link demonya.

Result

Nah bagai mana tertarik memasangnya di blog kamu??

Material Design Box Subscribe With Heading

1. Silahkan kamu masuk ke Blogger>Tema>Edit Html, lalu silahkan kamu pastekan kode berikut tepat di atas kode ]]></b:skin> atau </style> silahkan kamu cari satu-persatu bebas area kode. Untuk mempercepat pencarian silahkan klik tombol

CTRL

+

F

pada keyboard kamu.

.sidebar-nl
.subform1 {    box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
    height: 200px;
    box-sizing: border-box;
    width: 100%;
    padding-bottom: 15px;
    border-radius: 2px;}
.subtext {margin-top: 10px;
    font-size: 15px;
    text-align: center;}
.subinput1   {  margin: 14px 25px 15px;
    width: 81%;
    display: block;
    border: none;
    padding: 10px 0;
    border-bottom: solid 1px #03A9F4;
    -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);
    background-position: -300px 0;
    background-size: 300px 100%;
    background-repeat: no-repeat;
    color: #106288;
    transition: all 0.3s ease-out;}
.subinput1:focus, input:valid {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}
.subinput1:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #A9B1C6;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
  visibility: visible;
transition: all 0.1s ease;
}
.h6-subs {
  height: 50px;
  width: 100%;
  font-size: 18px;
  background: #0F98D5;
  color: white;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
  text-align: center;
  font-weight: 500;
}

.subform {height: 193px;
  box-sizing: border-box;
  width: 100%;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
  padding-bottom: 15px;
  border-radius: 2px;
  margin: 0 2%;
}
.subform .h6-subs {
  box-sizing: border-box;
  padding: 13px 0;
}
button {
      background: #FFFFFF;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    display: block;
    padding: 8px 15px;
    color: #5a5a5a;
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
    transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;border: none;    cursor: pointer;
    border-radius: 3px;font-size: 13px;text-align: center;font-weight: 500;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
margin-left: auto;
    margin-right: auto;
}
button:hover {
  background: rgba(0, 0, 0, 0.06);
}
 
The magic happens in a few lines of code for the input:focus and input:valid. The CSS transform property plays a crucial role to achieve this little instant feedback effect.

input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
}
.h6-subs {padding-top: 12px;}

2. Nah jika sudah selesai sekarang silahkan kamu save/simpan template, lalu pindah menu ke Tata Letak>Tambah Gadget/Widget>Html/JavaScript, nah pada kotak area widget silahkan kamu pastekan kode berikut.

<div class="sidebar-nl"><form action="https://feedburner.google.com/fb/a/mailverify" class="subform1" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=IDDzgn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><h6 class="h6-subs">Email Newsletter</h6><p class="subtext">Get Latest Posts Directly Into You Inbox</p><input class="subinput1" name="email" placeholder="Enter Your Email" required="" type="text" /><input class="subinput1" name="uri" type="hidden" value="IDDzgn" /><input name="loc" type="hidden" value="en_US" /><button class='ripple-effect button-center' type="submit" value="Subscribe">Submit</button><br />
</form></div>

Silahkan kamu ganti IDDzgn dengan ID FeedBurner Subscribe Via Email kamu

3. Jika Sudah terakhir silahkan kamu klik save/simpan, lalu silahkan kamu lihat kembali blog kamu untuk melihat hasilnya.

Oky mungkin itu saja untuk tutorial di malam ini, semoga tutorial saya bisa bermanfaat bagi kamu semua, salam dunia blogger ID Dzgn