Belajar Membuat Border Teks Menggunakan Element Text-Shadow Dan Text-Stroke

...

Belajar Membuat Border Teks Menggunakan Element Text-Shadow Dan Text-Stroke - Pada tutorial kali ini kita akan mencoba membuat sebuah border pada teks, yang akan kita bungkus menggunakan element text-shadow dan juga text-stroke.

Seperti yang telah kita ketahui, terdapat banyak sekali element - element atau bahasa pemrograman yang bisa kita pelajari diluaran sana atau bisa juga melalui W3Schools atau situs lainnya, mulai dari yang mudah di cerna hingga yang tersulit sekalipun. Salah satu contoh nya yang akan kita bahas  text-shadow, text-stroke. Mungkin disini saya akan menerangkan untuk yang mudahnya atau dasarnya dulu agar mudah untuk kalian mengerti.

Belajar Membuat Border Teks

Bagaimana Cara Dan Proses Pembuatan Border Text Menggunakan Element Text-Shadow Dan Text-Stroke?

Untuk memulai langkah pada tutorial ini, kita hanya perlu sedikit syntax, yaitu Css Dan Html.

Lalu apakah kegunaan dari text-stroke ini? Kegunaannya hanya untuk mempercantik sebuah teks agar terlihat lebih keren.

Nah untuk praktek yang pertama, disini saya akan coba dengan menggunakan text-shadow terlebih dahulu. Langkah yang pertama adalah, buat file css nya atau bisa kalian perhatikan css berikut ini:

.contoh {
          background-color:#f1f1f1;
          color:#f44336;
          padding:10px;
          text-align:center;
          text-shadow:2px 2px 3px #333;
          font-size:15px;
          text-decoration:none;
}
Note:
Pada contoh diatas terlihat di dalam text-shadow nya, disitu saya beri nilai 2px 2px dengan diakhiri nilai 3px. 3px ini fungsinya sebagai pengatur tingkat ketebalan bayangan pada teks tersebut, dan 2px 2px nya untuk mengatur posisi bayangan itu sendiri dan #333 adalah target warna untuk shawdownya.

Untuk mengeksekusinya, sangat mudah cukup dengan menggunakan html seperti ini:

<div class="contoh">BERI TEKS DISINI</div>
Lanjut ketahap selanjutnya yaitu,
Cara Membuat Border Untuk Teks Menggunakan Text-Stroke

Untuk caranya mari perhatikan pada contoh berikut ini:

.contoh {
            background:#0095d8;
            padding:10px;
            text-align:center;
}
h1,h2,h3,h4,h5 {
           -webkit-text-stroke:2px #555;
           color:#fff;
}
Bisa dilihat sangat jelas berbeda dengan text-shadow sebelumnya, pada text-sroke kita menggunakan element webkit agar syntax tersebut bekerja. Coba kalian buat dengan tidak menggunakan element webkit, seperti ini:

h1,h2,h3,h4,h5 {
           text-stroke:2px #555;
           color:#fff;
}
Setelah itu kalian lihat hasilnya, apakah bekerja atau tidak.

Bagaimana menurut kalian, mudah bukan? Silahkan di praktekan sendiri dan selamat mencobanya.

Demikianlah tutorial singkat dari saya, tentang Belajar Membuat Border Teks Menggunakan Element Text-Shadow Dan Text-Stroke.

Akhir kata saya ucapkan, terimakasih telah berkunjung dan membaca tutorial sederhana ini. Sedikit kurangnya mudah - mudahan bermanfaat.

Baca Selengkapnya

Tutorial Membuat Kalkulator Keren Menggunakan Html, Css, Dan Javascript

...

Tutorial Membuat Kalkulator Keren Menggunakan Html, Css, Dan Javascript - Setelah berhari - hari tidak membuat tutorial, dengan alasan sibuk di dunia nyata dan banyak pula pekerjaan yang belum terselesaikan ditambah dengan minimnya ide.

Namun sewaktu - waktu saya sempatkan untuk berfikir, tutorial apa yang harus saya buat untuk postingan diblog saya ini? Sambil berfikir.. ? ? ?

Tutorial Membuat Kalkulator

Dan pada akhirnya munculah ide ini yaitu membuat sebuah kalkulator sederhana namun tetap keren dengan perpaduan antara HTML, CSS, dan juga JAVASCRIPT.

Mungkin sobat semua berfikir, ah ini sih tutorial jadul. Saya akui memang jadul, sudah banyak dan berserakan tutorial seperti ini di Google. Akan tetapi jika diulas kembali, selagi ini bermanfaat ya kenapa tidak.

Oke saya rasa cukup untuk basa basinya, mungkin kita langsung saja ketahap cara pembuatannya.

Untuk melengkapinya, disini kita memerlukan beberapa file script diantaranya:

1. Html
2. Css
3. Javascript

Bagaimana Cara Membuatnya?

Silahkan sobat simak dan perhatikan langkah dibawah ini.

Langkah pertama yaitu, kita buat file Css terlebih dahulu untuk keperluan agar tampilannya terlihat keren. Bisa sobat lihat syntax Css berikut ini:

/* Seo Techman Calc */
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font: bold 14px Arial, sans-serif;
}

html {
 height: 100%;
 background: white;
 background: radial-gradient(circle, #fff 20%, #ccc);
 background-size: cover;
}
 
#calculator {
 width: 325px;
 height: auto;
 margin: 100px auto;
 padding: 20px 20px 9px;
 background: #333;
 border-radius: 3px;
 box-shadow: 0px 4px #009de4, 0px 10px 15px rgba(0, 0, 0, 0.2);
}

.top span.clear {
 float: left;
}
 
.top .screen {
 height: 40px;
 width: 212px;
 float: right;
 padding: 0 10px;
 background: rgba(0, 0, 0, 0.2);
 border-radius: 3px;
 box-shadow: inset 0px 4px rgba(0, 0, 0, 0.2);
 font-size: 17px;
 line-height: 40px;
 color: white;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
 text-align: right;
 letter-spacing: 1px;
}
 
.keys, .top {overflow: hidden;}
 
.keys span, .top span.clear {
 float: left;
 position: relative;
 top: 0;
 cursor: pointer;
 width: 66px;
 height: 36px;
 background: white;
 border-radius: 3px;
 box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
 margin: 0 7px 11px 0;
 color: #888;
 line-height: 36px;
 text-align: center;
 user-select: none;
 transition: all 0.2s ease;
}

.keys span.operator {
 background: #FFF0F5;
 margin-right: 0;
}
 
.keys span.eval {
 background: #ffc107;
 box-shadow: 0px 4px #9da853;
 color: #888e5f;
}
 
.top span.clear {
 background: #f44336;
 box-shadow: 0px 4px #ff7c87;
 color: white;
}
 
.keys span:hover {
 background: #9c89f6;
 box-shadow: 0px 4px #6b54d3;
 color: white;
}
 
.keys span.eval:hover {
 background: #abb850;
 box-shadow: 0px 4px #717a33;
 color: #ffffff;
}
 
.top span.clear:hover {
 background: #f68991;
 box-shadow: 0px 4px #d3545d;
 color: white;
}
 
.keys span:active {
 box-shadow: 0px 0px #6b54d3;
 top: 4px;
}
 
.keys span.eval:active {
 box-shadow: 0px 0px #717a33;
 top: 4px;
}
 
.top span.clear:active {
 top: 4px;
 box-shadow: 0px 0px #d3545d;
}
Jika sudah kita klik simpan jangan lupa beri nama style.css atau yang lain terserah sobat.

Langkah selanjutnya, kita buat Javascript nya supaya kalkulator ini bekerja, perhatikan berikut ini:

// Get all the keys from document
var keys = document.querySelectorAll('#calculator span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;
 
// Add onclick event to all the keys and perform operations
for(var i = 0; i < keys.length; i++) {
 keys[i].onclick = function(e) {
  // Get the input and button values
  var input = document.querySelector('.screen');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
   
  // Now, just append the key values (btnValue) to the input string and finally use javascript's eval function to get the result
  // If clear key is pressed, erase everything
  if(btnVal == 'C') {
   input.innerHTML = '';
   decimalAdded = false;
  }
   
  // If eval key is pressed, calculate and display the result
  else if(btnVal == '=') {
   var equation = inputVal;
   var lastChar = equation[equation.length - 1];
    
   // Replace all instances of x and ÷ with * and / respectively. This can be done easily using regex and the 'g' tag which will replace all instances of the matched character/substring
   equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
    
   // Final thing left to do is checking the last character of the equation. If it's an operator or a decimal, remove it
   if(operators.indexOf(lastChar) > -1 || lastChar == '.')
    equation = equation.replace(/.$/, '');
    
   if(equation)
    input.innerHTML = eval(equation);
     
   decimalAdded = false;
  }
   
  // Basic functionality of the calculator is complete. But there are some problems like
  // 1. No two operators should be added consecutively.
  // 2. The equation shouldn't start from an operator except minus
  // 3. not more than 1 decimal should be there in a number
   
  // We'll fix these issues using some simple checks
   
  // indexOf works only in IE9+
  else if(operators.indexOf(btnVal) > -1) {
   // Operator is clicked
   // Get the last character from the equation
   var lastChar = inputVal[inputVal.length - 1];
    
   // Only add operator if input is not empty and there is no operator at the last
   if(inputVal != '' && operators.indexOf(lastChar) == -1)
    input.innerHTML += btnVal;
    
   // Allow minus if the string is empty
   else if(inputVal == '' && btnVal == '-')
    input.innerHTML += btnVal;
    
   // Replace the last operator (if exists) with the newly pressed operator
   if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
    // Here, '.' matches any character while $ denotes the end of string, so anything (will be an operator in this case) at the end of string will get replaced by new operator
    input.innerHTML = inputVal.replace(/.$/, btnVal);
   }
    
   decimalAdded =false;
  }
   
  // Now only the decimal problem is left. We can solve it easily using a flag 'decimalAdded' which we'll set once the decimal is added and prevent more decimals to be added once it's set. It will be reset when an operator, eval or clear key is pressed.
  else if(btnVal == '.') {
   if(!decimalAdded) {
    input.innerHTML += btnVal;
    decimalAdded = true;
   }
  }
   
  // if any other key is pressed, just append it
  else {
   input.innerHTML += btnVal;
  }
   
  // prevent page jumps
  e.preventDefault();
 }
}
Lalu sobat berinama kalkulator.js, jika sudah klik simpan file. Yang selanjutnya adalah kita buat Html nya untuk membangun kerangka kalkulator ini.

<!DOCTYPE html>
<html>
 <head>         
 <link href="style.css" rel="stylesheet">
    </head>
    <body>
  <div id="calculator">
   <!-- Screen and clear key -->
   <div class="top">
    <span class="clear">C</span>
    <div class="screen"></div>
   </div>
    
   <div class="keys">
    <!-- operators and other keys -->
    <span>7</span>
    <span>8</span>
    <span>9</span>
    <span class="operator">+</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
    <span class="operator">-</span>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span class="operator">/</span>
    <span>0</span>
    <span>.</span>
    <span class="eval">=</span>
    <span class="operator">x</span>
   </div>
  </div>
  <script src="prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
 <script src="jquery.min.js" type="text/javascript" type="text/javascript"></script>
 <script src="calc.js" type="text/javascript" type="text/javascript"></script>
    </body>
</html>
Berinama lagi dengan index.html kemudian simpan.

Nah untuk Jquery.min.js dan Prefixfree-1.0.7.js sobat bisa download dan cari di google.

Jika semuanya sudah terselesaikan, Html, Css, dan Javascriptnya sudah kita buat. Langkah terakhir adalah sobat akses dan lihat hasilnya seperti apa dari ketiga script diatas.

Tidak lupa pula disini saya sisipkan untuk live demonya, sobat bisa klik linknya dibawah:


Jangan lupa jika ingin mencoba membuatnya, silahkan di modifikasi sesuai dengan selera masing - masing.

Mungkin saya rasa cukup sekian saja untuk pembahasan hari ini, semoga apa yang hari ini saya jelaskan dapat bermanfaat dan memberi pengetahuan baru terutama para pemula diluar sana.

Itulah Tutorial Membuat Kalkulator Keren Menggunakam Html, Css Dan Javascript. Akhir kata saya ucapkan terimakasih.

Baca Selengkapnya

Cara Membuat Sitemap Html Terbaru Keren Dan Juga Menarik

...

Cara Membuat Sitemap Html

Cara Membuat Sitemap Html Terbaru Keren Dan Juga Menarik - Oke, pada tutorial kali ini saya akan mengajak kalian untuk membuat Sitemap otomatis di website ataupun di blog.

Mungkin dengan saya mengangkat tutorial seperti ini, saya rasa agak ketinggalan jaman dan itupun sudah banyak diperbincangkan di blog teman-teman semua. Namun disini saya sedikit memodifikasinya, sehingga tampilan dari sitemap tersebut jadi lebih menarik dan terlihat baru.

Pastinya kalian sudah tahu dong ya, apa fungsi dan kegunaan dari sitemap ini. Nah disini ada #2 tahapan atau cara pembuatanya, yang dimana saya jabarkan sebagai berikut:

- Cara Membuat Sitemap Html Otomatis Part #1.

- Cara Membuat Sitemap Html Otomatis Part #2.

Apa saja perbedaan dari keduanya?

Perbedaannya hanya pada tampilan dan sedikit tambahan scroll saja, simple namun tetap keren. Jika kalian tertarik mari kita simak cara pembuatannya dan ikuti setiap langkah-langkah dibawah agar hasilnya 100% tampil di blog kalian.

I. Cara Membuat Sitemap Html Otomatis Part #1.

Untuk memulai langkah pada tutotial ini, disini kita hanya memerlukan sebuah html dan javascript yang tidak lain yaitu untuk membuat sitemapnya. Dan maka dari itu simak baik-baik cara berikut ini:

1. Seperti biasa pergi kehalaman dasboard Blogger kalian -> Klik Halaman -> Buat Halaman Baru.
2. Pada langkah yang kedua ini, ingat klik html jangan compose.
3. Setelah itu kalian copy paste javascriptnya seperti tampak dibawah ini:

<div style="background:#49ACE1;background:linear-gradient(45deg,#49ACE1,#48D1CC); color: #fff;height:100px;border:3px solid #ddd;padding:20px;">
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="https://www.google.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
Note:
Bisa dilihat, disitu saya menambahkan sebuah element div untuk mengatur background dan yang lain-lain. Pada height nya saya beri nilai 100px bisa kalian ubah dan disesuaikan. Untuk link https://www.google.com silahkan ganti dengan alamat URL blog kalian, dan untuk warna background kalian ganti dengan warna lain sesuai dengan selera.

Jika sudah langsung klik simpan halaman, selanjutnya coba kalian akses dan lihat bagaimana tampilannya.

II. Cara Membuat Sitemap Html Otomatis Part #2.

Caranya lakukan sama seperti langkah yang pertama, copy paste lagi html dan javascript berikut:

<div style="background: #38424B url(&quot;https://laguin.website/blogfoot.png&quot;); color: #efefef;height:100px;overflow:auto;border:3px solid #ddd;border-radius:10px;padding:20px;">
<script src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap1.js"></script>
<script src="https://www.google.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
Klik simpan halaman, jika sudah coba akses kembali dan lihat hasil dan perbedaannya.

Nah untuk selanjutnya terserah kalian mau diapakan, selamat berkreasi dan selamat mencobanya. Bila ingin melihat contoh sitemap blog saya, bisa dilihat melalui link dibawah ini:



Demikianlah tutorial kali ini Cara Membuat Sitemap Html Terbaru Keren Dan Juga Menarik. Semoga dapat membantu dan bermanfaat buat kalian yang sedang mencari tutorial seperti ini.

Tidak kurang dan tidak lebih mungkin hanya itu yang bisa saya berikan lewat pembelajaran hari ini. Dan akhir kata saya ucapkan terimakasih banyak sampai berjumpa di tutorial selanjutnya.

Baca Selengkapnya

Cara Memasang Dan Membuat Breadcrumb Flat Seo Friendly Di Website HTML Menggunakan CSS3

...

Cara Memasang Dan Membuat Breadcrumb Flat Seo Friendly Di Website Html Menggunakan Css3 - Apa itu Breadcrumb? Pada umumnya fungsi dan arti dari Breadcrumb adalah fitur atau sistem navigasi menu halaman sebuah website, yang kegunaannya untuk mempermudah para pengunjung website supaya lebih mudah melacak lokasi mereka saat ini dan dari mana awal mereka mulai melakukan perjalanan diwebsite atau blog tersebut.

Tahukah kalian, bahwa Breadcrumb juga telah menyediakan suatu link penghubung untuk menghubungkan halaman yang sedang dibuka dengan diikuti halaman - halaman yang sudah lebih dulu dibuka sebelumnya. Dengan kata lain, Breadcrumb ini juga akan memberikan sebuah jejak bagi pengunjung website atau blog.

Cara Membuat Breadcrumb Flat Css3 - Seo Techman

Itulah sedikit pengertian dari Breadcrumb. Nah untuk tutorial yang akan saya berikan saat ini yaitu, cara membuat Breadcrumb website Html menggunakan Css3.

Oke, sebelum kita lanjut dan mulai kedalam tahap pembuatannya, disini kita memerlukan beberapa buah file seperti:

• Html
• Css
• Scss
• Jquery

Untuk cara pembuatannya ikuti langkah - langkah dibawah ini:

Yang pertama yaitu, buatlah file html nya dan beri nama index.html atau terserah kalian. Lalu copy contoh syntax berikut ini:

<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>
Pastekan kedalam file index.html yang sudah kalian buat sebelumnya, kemudian simpan file tersebut.

Langkah selanjutnya adalah kalian buat lagi file dan beri nama style.css. kalau sudah copy kembali syntaxnya berikut ini:

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

body {
  text-align: center;
  background-color: #34495e;
}

h1 {
  font-weight: 100;
  font-size: 32px;
  padding: 40px;
  color: #fff;
}

#breadcrumb {
  list-style: none;
  display: inline-block;
}
#breadcrumb .icon {
  font-size: 14px;
}
#breadcrumb li {
  float: left;
}
#breadcrumb li a {
  color: #FFF;
  display: block;
  background: #3498db;
  text-decoration: none;
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 10px 0 5px;
  text-align: center;
  margin-right: 23px;
}
#breadcrumb li:nth-child(even) a {
  background-color: #2980b9;
}
#breadcrumb li:nth-child(even) a:before {
  border-color: #2980b9;
  border-left-color: transparent;
}
#breadcrumb li:nth-child(even) a:after {
  border-left-color: #2980b9;
}
#breadcrumb li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
#breadcrumb li:first-child a:before {
  border: none;
}
#breadcrumb li:last-child a {
  padding-right: 15px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
#breadcrumb li:last-child a:after {
  border: none;
}
#breadcrumb li a:before, #breadcrumb li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #3498db;
  border-width: 20px 10px;
  width: 0;
  height: 0;
}
#breadcrumb li a:before {
  left: -20px;
  border-left-color: transparent;
}
#breadcrumb li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #3498db;
}
#breadcrumb li a:hover {
  background-color: #1abc9c;
}
#breadcrumb li a:hover:before {
  border-color: #1abc9c;
  border-left-color: transparent;
}
#breadcrumb li a:hover:after {
  border-left-color: #1abc9c;
}
#breadcrumb li a:active {
  background-color: #16a085;
}
#breadcrumb li a:active:before {
  border-color: #16a085;
  border-left-color: transparent;
}
#breadcrumb li a:active:after {
  border-left-color: #16a085;
}
Pastekan kembali kedalam kedalam style.css nya.

Untuk saat ini apa ada pertanyaan? Jika tidak, mari kita lanjutkan ke tahap berikutnya. Langkah selanjutnya yaitu, buat sebuah file scss disini sebagai contoh saya beri nama style.scss setelah itu copy paste syntaxnya kedalam style.scss. Perhatikan dibawah ini:

@import "compass/css3";

$blue-gray        : #34495e;
$blue-gray-darken  : #2c3e50;
$blue           : #3498db;
$blue-darken       : #2980b9;
$green           : #1abc9c;
$green-darken     : #16a085;

*{
  margin: 0;
  padding: 0;
  @include box-sizing(border-box);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}

body{
  text-align: center;
  background-color: $blue-gray;
}

h1{
  font-weight:100;
  font-size:32px;
  padding:40px;
  color:#fff;
}

#breadcrumb{
  list-style:none;
  display: inline-block;
  
  .icon{
    font-size: 14px;
  }
  
  li{
    float:left;
    a{
      color:#FFF;
      display:block;
      background: $blue;
      text-decoration: none;
      position:relative;
      height: 40px;
      line-height:40px;
      padding: 0 10px 0 5px;
      text-align: center;
      margin-right: 23px;
    }
    &:nth-child(even){
      a{
        background-color: $blue-darken;
        
        &:before{
          border-color:$blue-darken;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$blue-darken;
        }
      }
    }
    &:first-child{
      a{
        padding-left:15px;
        @include border-radius(4px 0 0 4px);
        &:before{
          border:none;
         }
      }
    }
    &:last-child{
      a{
        padding-right:15px;
        @include border-radius(0 4px 4px 0);
        &:after{
          border:none;
         }
      }
    }
    
    a{   
      &:before,
      &:after{
        content: "";
        position:absolute;
        top: 0;
        border:0 solid $blue;
        border-width:20px 10px;
        width: 0;
        height: 0;
      }
      &:before{
        left:-20px;
        border-left-color:transparent;
      }
      &:after{
        left:100%;
        border-color:transparent;
        border-left-color:$blue;
      }
      &:hover{
        background-color: $green;
        
        &:before{
          border-color:$green;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$green;
        }
      }
      &:active{
        background-color: $green-darken;
        
        &:before{
          border-color:$green-darken;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:$green-darken;
        }
      }
    }
  }
}
Langsung saja kalian simpan. Untuk jquery nya, disini kita memakai:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Tempatkan script diatas pada bagian bawah atau disebut footer.

Jika semua langkah diatas sudah dilakukan, waktunya kalian untuk menggabungkan semua file yang sudah kalian buat.

Bagaimana Cara Menggabungkannya?

Mudah saja, cukup dengan kalian lihat contoh keseluruhan dari syntax tersebut seperti penampakan dibawah:

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>SeoTechman CSS3 Breadcrumb</title>
  <link rel="stylesheet" href="css/style.css"/>
 </head>
 <body>
 <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/>
  <h1>Flat CSS3 breadcrumb</h1>
<ul id="breadcrumb">
  <li><a href="#"><span class="icon icon-home"> </span></a></li>
  <li><a href="#"><span class="icon icon-beaker"> </span> Projects</a></li>
  <li><a href="#"><span class="icon icon-double-angle-right"></span> Breadcrumb</a></li>
  <li><a href="#"><span class="icon icon-rocket"> </span> Getting started</a></li>
  <li><a href="#"><span class="icon icon-arrow-down"> </span> Download</a></li>
</ul>
<div class="footer">
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</div>
</body>
</html>
Setelah semuanya sudah kalian buat dengan mengkuti panduan diatas, sekarang coba kalian akses pada browser dan bagaimana hasilnya.

Live demonya untuk saat ini saya hanya melampirkan screenshoot hasil dari syntax diatas.

Breadcrumb Flat

Apabila kalian ingin mendapatkan hasil yang lebih bagus dan maksimal, kalian hanya cukup memainkan atau edit pada bagian Css nya sehingga menjadi terlihat sebegitu menarik breadcrumbs itu.

Mungkin saya rasa cukup untuk pembahasan kali ini, mudah - mudahan bermanfaat selalu untuk semuanya.

Itulah Cara Memasang Dan Membuat Breadcrumb Flat Seo Friendly Di Website Html Menggunakan CSS3. Ambil ilmu positifnya dari setiap pembahasan kali ini dan hiraukan yang negatifnya.

Saya akhiri dengan, terimakasih . Wassalammuallaikum, wr, wb. Sampai bertemu dilain waktu.

Baca Selengkapnya

Cara Membuat Web Design Html Sederhana

...

Cara Membuat Web Design Html

Cara Membuat Web Design Html Sederhana - Pada dasarnya jika kita ingin membuat sebuah web atau halaman website, tentunya kita harus mengerti pokok atau inti dasar dari isi web tersebut.

Apa yang dimaksud dengan pokok dasar dari isi web tersebut? Pokok-pokok dasarnya yaitu, disini kita dituntut harus memahami kode-kode tertentu atau sering disebut sebagai bahasa pemrograman.

Contohnya seperti:
Html, Css, Php, Javascript dan masih banyak lainnya.

Mungkin untuk seorang pemula, ini adalah hal yang rumit bagaimana caranya agar bisa paham dan mengerti dengan segitu banyaknya istilah pada kode tersebut.

Nah maka dari itu, pada kesempatan kali ini saya akan mencoba membahas bagaimana contoh dasar atau cara dasar membuat web dengan html. Tidak hanya sebatas memahami atau mengerti jika kita ingin memulai membuat web, kitapun harus memiliki rumah dan alamat rumah kita agar bisa dikunjungi oleh banyak orang nantinya.

Apa yang dimaksud dengan rumah dan alamat rumah? Yang dimaksud dengan rumah dan alamat rumah yaitu, Hosting dan Domain.

Apa itu hosting?

Hosting jika diibaratkan sama seperti sebuah rumah atau apartemen yang memiliki ukuran luas dan lebar yang berbeda. Sedangkan Domain adalah sebagai alamat kita nantinya, yang mana jika kita telah selesai membuat rumah tersebut kita sudah dapat mengunjunginya.

Dimana tempat untuk membeli hosting dan domain yang terpercaya dengan support 24jam fast respon? Kalian bisa kunjungi alamat dibawah:

• Untuk order hosting murah bisa Disini
• Untuk Order Domain Disini.

Oke, disini saya anggap kalian sudah mempunyai hosting dan domainnya. Dan untuk memulai langkah pada tutorial ini, kita membutuhkan:

1. Html (Kerangka Web)
2. Css (Sebagai Penghias Kerangka Web)

Langkah yang pertama yaitu, masuk ke hosting cpanel kalian terlebih dahulu. Setelah itu klik filemanager yang terdapat didalam cpanel itu, kemudian buat sebuah file yang berekstensi index.html dan copy kode html berikut ini:

<div class="navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                </div>
<div class="container">
<div class="row">
<h1>Demo Web Html</h1>
<p>Selamat datang di web kami.</p>
<p>Web ini hanya sekedar contoh untuk keperluan demo.</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Tutorial</h3>
<p>- Cara cara membuat web html -</p>
<p>- Design web html dan css -</p>
<p>- Membuat web sederhana -</p>
<p>- Membuat simple web html -</p>
</div>
</div>
<div class="footer">
Copyright @ 2019 <a href="https://www.seotechman.com">SEO TECHMAN</a> | Allright Reserved.
</div>
Pastekan kedalam file index.html yang sudah kalian buat sebelumnya. Langkah berikutnya adalah, kalian buat file lagi didalam root filemanager tersebut beri nama style.css sebagai contoh dan copy kode css dibawah ini:

body {
      font-family: "Open Sans Condensed", Sans-serif;
      background: #F5F5F5;
      color: #777;
      font-weight: 400;
}
h1,h2,h3,h4,h5 {
      font-family: "Open Sans Condensed", Sans-serif;
      color: #333;
      text-align: center;
      font-weight: 700;
}
.navbar {
      background: #49ACE1;
      width: 100%;
      margin-bottom: 10px;
      padding:10px 0;
      text-align: center;
      -webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 6px 0 rgba(0,0,0,.2);
}
.navbar a{
      color:#ffffff;
      text-decoration:none;
      margin-right:5%;
}
.navbar a:last-child {
      margin-right:0;
}
.container {
       max-width: 100%;
}
.row {
       background-color: #FFFFFF;
       border: 1px solid #ddd;
       border-radius: 5px;
       color: #777;
       text-align: center;
       padding: 10px;
       margin-bottom: 10px;
       display: block;
       -webkit-box-shadow:0 2px 6px 0 rgba(0,0,0,.2);box-shadow:0 2px 6px 0 rgba(0,0,0,.2);
}
.footer {
       width: 100%;
       background: #333;
       padding: 10px;
       color: #FFFFFF;
       text-align: center;
}
.footer a {
       color: #A7EA59;
}
Setelah itu pastekan kedalam file style.css dan klik simpan.

Untuk menggabungkan kedua file diatas antara index.html dan style.css, bisa kalian lihat seperti contoh dibawah:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="navbar">
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                </div>
<div class="container">
<div class="row">
<h1>Demo Web Html</h1>
<p>Selamat datang di web kami.</p>
<p>Web ini hanya sekedar contoh untuk keperluan demo.</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Tutorial</h3>
<p>- Cara cara membuat web html -</p>
<p>- Design web html dan css -</p>
<p>- Membuat web sederhana -</p>
<p>- Membuat simple web html -</p>
</div>
</div>
<div class="footer">
Copyright @ 2019 <a href="https://www.seotechman.com">SEO TECHMAN</a> | Allright Reserved.
</div>
</body>
</html>
Jika semua persiapan seperti diatas sudah kalian buat semua, tinggal kalian simpan. Kemudian coba dilihat hasilnya seperti apa.

Disini saya lampirkan juga untuk demonya, jika ingin melihatnya silahkan menuju link yang sudah saya sediakan dibawah.



Intinya, membuat sebuah web dengan html dan css ini bisa dibilang mudah. Itupun kalau kita telah paham dan mengerti dasar-dasarnya, sama seperti apa yang sudah saya jelaskan sebelumnya.

Untuk contoh seperti kode diatas, bisa kalian kreasikan sendiri entah itu html nya ataupun css nya. Edit dengan sebaik mungkin agar tampilannya menarik dan bagus.

Itulah sedikit tutorial kali ini dari saya Cara Membuat Web Design Html Sederhana, kurang lebihnya hanya itu yang dapat saya tutorialkan untuk pembahasan kali ini.

Ambil sisi positifnya dari pembelajaran ini dan buang sisi negatifnya. Mudah-mudahan bermanfaat dan sedikit membantu, terutama untuk para pemula.

Akhir kata saya ucapkan, terimakasih dan sampai bertemu kembali dilain waktu.

Baca Selengkapnya

Membuat Animasi Bergerak Pada Text Dengan Css

...

Cara Membuat Animasi Bergerak

Membuat Animasi Bergerak Pada Text Dengan Css - Pada tutorial sebelumnya sudah saya jelaskan Cara Membuat Animasi Shake Pada Image Dan Button. Sama halnya pun dengan tutorial yang akan saya bagikan pada kesempatan ini, hanya saja tutorial ini agak sedikit berbeda dengan yang sebelumnya.

Apa Perbedaannya?

Perbedaanya:
Jika ditutorial yang sebelumnya animasi tersebut harus di klik terlebih dahulu baru bisa bergerak. Namun berbeda dengan pada tutorial kali ini, dimana tutorial ini akan menyuguhkan sebuah animasi yang bergerak secara otomatis dengan objek yang saya ambil yaitu berupa text.

Sebelum kita lanjut, mungkin saya akan beri sedikit penjelasan tentang properti animation, dan @keyframes yang terdapat didalam css.

Keyframes dapat didefinisikan sebagai langkah untuk merangkai timeline dalam animasi css tersebut. Kemudian kita wajib menghubungkannya dengan selector yang akan kita beri sebuah animasi. Perlu dicatat, disini kita juga mebutuhkan properti animation khusus demi mendapat dukungan pada browser.

Adapun properti animation yang dimaksud adalah sebagai berikut:

1. -Webkit-
Webkit adalah properti untuk pengguna chrome atau safari.

2. -Moz-
Moz adalah properti untuk pengguna firefox.

3. -O-
Adalah properti untuk pengguna opera.

4. -ms-
Adalah properti untuk pengguna internet explorer.

Nah itulah sedikit penjelasan dari saya, dan mari kita lanjutkan untuk memulai pembuatan beserta tahapan-tahapannya.

Bagaimana Cara Pembuatan Animasi Pada Text Tersebut?

Untuk membuat animasi pada text agar bergerak otomatis, sama halnya dengan yang sebelumnya yaitu kita hanya perlu:

• Css
• Html

Untuk langkah yang pertama adalah, sediakan atau buat Css nya.
Sebagai contoh:

/* SEOTECHMAN */
h4{ animation: shake 2.5s infinite; -webkit-animation:shake 2.5s infinite; text-align:center;}
  @-webkit-keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      background: none;
      color: #333;
      font-weight: bold;
    }

    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
 
  @keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
 
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }
Note:
Pada contoh Css diatas bisa kalian lihat, disitu terdapat h4 atau sebuah tags heading untuk kita gunakan di text yang akan kita beri animasi. Jika kalian ingin menerapkannya pada title atau judul, kalian bisa rubah dengan h1 atau h2. Dan untuk animasi nya bisa kalian lihat lagi, disitu saya beri timeline dengan nilai 2.5s.

Tahap selanjutnya yaitu, kita buat html nya bisa kalian lihat contoh html dibawah ini:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Test Animasi</h1>
<h4>Masukan Text Disini</h4>
</body>
</html>
Kalian masukan sebuah text kedalam tags heading h4 tersebut yang akan dijadikan sebagai objek.

Yang terakhir adalah simpan kedua file tersebut, lalu coba kalian akses dan lihat bagaimana hasil dari kedua file tersebut. Apakah berjalan atau tidak.

Jika kedua file tersebut digabungkan, akan terlihat seperti ini:

/* SEOTECHMAN */
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  h4{ animation: shake 2.5s infinite; -webkit-animation:shake 2.5s infinite; text-align:center;}
  @-webkit-keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
 
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
 
 
  @keyframes shake {
    0%, 100% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
 
    10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
    }
 
    20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }
</style>
</head>
<body>
<h1>Test Animasi</h1>
<h4>Masukan Text Disini</h4>
</body>
</html>
Adapun sebagai contoh matangnya bisa kalian lihat melalui link berikut:



Sampai disini bisa dikatakan kita sudah berhasil membuatnya, itupun jika dilakukan dengan benar seperti apa yang sudah saya rincikan pada langkah diatas. Bilamana kalian belum jelas bisa dibaca ulang dari awal hingga akhir.

Saya harap disetiap tutorial yang saya berikan di Blog ini, bisa bermanfaat dan bisa memberikan ilmu baru kepada para pemula.

Demikianlah sepenggal tutorial dari saya tentang Membuat Animasi Bergerak Pada Text Dengan Css, dan mungkin itu saja yang dapat saya berikan untuk hari ini. Akhir kata saya ucapkan, terimakasih.

Baca Selengkapnya

Cara Membuat Animasi Shake Pada Image Dan Button Dengan Css

...

Cara Membuat Animasi Shake

Assalammuallaikum,
Hallo sahabat berjumpa kembali dengan saya Virm Aditya bisa disebut juga seorang pemimpi yang tidak pernah tidur, Administrator dari SEOTECHMAN.COM.

Mungkin Sedikit perbincangan kecil dari saya sebelum masuk ketutorial hari ini. Tahukan kalian, bahwa menulis sebuah artikel unik memang sangat perlu pemikiran yang objektif, penuh dengan ide-ide yang menarik juga yang lainnya. Namun kita juga tidak pasti setiap harinnya mendapatkan suatu ide untuk dijadikan sebagai objek kedalam artikel yang akan kita tulis untuk disajikan kepada pengunjung.

Dimana yang telah kita ketahui dan dapat disimpulkan bahwa, ada masanya dimana kita tidak selalu bisa berfikir dengan jernih atau susah berkonsentrasi untuk membuat artikel. Yang dengan jelas sudah tercatat, artikel mempunyai arti penting dalam sebuah Blog yang bisa disebut juga sebagai RAJA.

Oke mungkin saya rasa sudah cukup untuk basa-basinya, dan saya skip saja.

Untuk menu pembahasan hari ini yang akan saya berikan yaitu: Cara Membuat Animasi Shake Pada Image dan Button Dengan Css. Nah pasti diantara kalian telah banyak yang mengira, bahwa didalam nya tersisipkan javascript yang tidak lain yaitu untuk menjalankan sistem animasinya.

Tapi jawaban dari saya adalah, tidak! Karena disini kita hanya perlu menggunakan css, dengan css kita tidak perlu khawatir akan terjadinya pemberatan pada loading blog.

Bagaimana Cara Pembuatanya Dan Apa Saja Yang Dibutuhkan?

Untuk memulai langkah pada tutorial ini, kalian hanya membutuhkan langkah seperti berikut:

• Css
• Html

Dan untuk cara pembuatanya bisa kalian lihat dan perhatikan dengan seksama dibawah ini.

1. Membuat Animasi Shake Pada Image.


Langkah yang pertama yaitu, kita harus membuat sebuah Css, untuk contohnya sebagai berikut:

/* Seo Techman */
img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Jika css nya sudah kalian buat seperti contoh diatas lanjut kelangkah berikutnya yaitu, buatlah sebuah kode Html. Sebagai contoh:

<img src="peanute.jpg" alt="Peanute" width="300" height="300">
Terakhir kalian simpan kedua file tersebut dengan format style.css dan index.html jika sudah, sekarang waktunya kalian lihat hasilnya dan apakah berjalan atau tidak.

2. Membuat Animasi Shake Pada Button.


Jika kalian ingin menerapkannya dengan objek button, bisa saja karena menurut saya itu sama halnya dengan yang pertama. Kenapa bisa sama? Ya dikarenakan memang tidak ada bedanya, disini kalian hanya sedikit mengubahnya pada bagian Css dan html.

Sebelumnya pada penarapan image Css terlihat seperti ini:

img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
Lalu kalian rubah hingga menjadi seperti contoh berikut:

.button:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.button {
  background: #49ACE1;
  width: 70px;
  height: auto;
  border: 2px solid #ddd;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  text-align: center;
  font-size: 17px;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
Untuk file htmlnya hanya berubah sedikit, bisa dilihat dan perhatikan:

<div class="button">
Klik Disini
</div>
Note:
Script diatas sebelumnya sudah saya uji coba terlebih dahulu, dan hasilnya pun 100% berjalan.

Untuk demonya bisa melalui link dibawah ini:



Ikuti langkah demi langkahnya seperti apa yang sudah dijelaskan diatas pada awal cara pembuatanya. Jika kalian masih bingung, silahkan dibaca ulang dari awal hingga menurut kalian sudah cukup mengerti.

Mungkin itu saja yang dapat saya berikan pada tutorial kali ini, seperti biasa mudah-mudahan bermanfaat apa yang saya bagikan dalam tutorial ini untuk kalian semua.

Jangan pernah merasa cukup ataupun sombong dengan apa yang telah kita punya dan kita dapatkan. Seperti pepatah mengatakan, dibalik sebuah kesuksesan pasti ada faktor pendukung dibelakangnya. Karena menurut saya dan tidak cukup banyaknya orang lain berpendapat bahwa, berbagi adalah hal yang indah selagi itu bermanfaat. Petik nilai positifnya dari perbincangan hari ini dan kesampingkan nilai negatifnya.

Prinsip saya:
Apa saja ilmu yang saya dapat hari ini, itu pula yang akan saya bagikan dan saya sampaikan melalui tulisan diblog ini.

Demikianlah tutorial kali ini Cara Membuat Animasi Shake Image Dan Button Dengan Css. Bila ada pertanyaan, silahkan sampaikan pada kolom komentar dibawah.

Dan akhir kata saya ucapkan, terimakasih sampai bertemu kembali diartikel selanjutnya.

Baca Selengkapnya

Membuat Profile Card Dengan Desain Html Dan Css

...

Membuat Profile Card

Membuat Profile Card Dengan Desain Html Dan Css - Mungkin artikel yang akan saya bahas kali ini, sudah banyak bertaburan di Google. Akan tetapi sudah pasti berbeda orang, berbeda pula cara penerapan dan pembuatanya.

Awalnya saya ragu untuk mengangkat tutorial ini dan mempublikasikannya. Tetapi setelah saya pikir-pikir dengan penuh pertimbangan, apa salahnya jika kita ingin berbagi walaupun hanya sekedar tutorial sederhana.

Seperti yang saya katakan diatas, kali ini saya akan mengajak kalian kembali untuk berjalan-jalan dalam dunia perkodingan atau pemrograman.

Sedikit flashback tentang saya, yang tidak dapat di pungkiri sama halnya dengan para pemula. Pada awalnya pun saya sendiri tidak mengerti tentang bahasa koding, html dan lain sebagainnya.

Sebagai contoh jika kalian bertanya, ketika pertama kali anda melihat isi koding tersebut, apakah anda merasakan setres atau gimana? Saya jawab dengan jujur, bukan setres lagi melainkan lieur kalau kata orang sunda bilang.

Dengan bermodalkan sedikit pengetahuan, dan mencoba memberanikan diri untuk terjun bebas dalam dunia perkodingan yang pada awalnya lebih cenderung tidak paham, akan tetapi dengan rasa penasaran saya yang tinggi dan rasa ingin mempelajarinnya, akhirnya saya pun nekat untuk mempelajarinya secara otodidak dengan bantuan guru saya, yang tidak lain yaitu Google.

Sedikit catatan dari saya:
Rajin-rajinlah membaca artikel di Google walau hanya beberapa menit atau jam, pastikan itu kalian terapkan setiap harinya. Karena dengan membaca kita bisa mengerti dan paham, apa yang harus dilakukan itu tergantung pada diri kita masing-masing dan tidak bisa ditolak dan dipungkiri kalau Google adalah gudangnya semua ilmu, apa saja ada.

Itulah sedikit tentang saya yang awalnya tidak mengerti namun pada akhirnya alhamdulillah sudah dapat memahami tentang koding atau bahasa pemrograman, itupun tidak instant langsung paham ada tingkatan-tingkatannya.

Lanjut pada artikel yang akan saya bahas, tentang cara membuat profile card dengan desain html dan css.

Bagaimanakah Cara Pembuatan Profile Card Ini?

Cara pembuatannya cukup mudah kalau menurut saya, nah jika kalian penasaran mari kita langsung saja masuk ke tahapan-tahapannya dan apa saja yang dibutuhkan untuk membuat profile card ini.

Untuk cara yang pertama, jika kalian menggunakan hosting maka buatlah sebuah file index.html atau sejenisnya. Setelah itu copy kode html dibawah ini:

<div class="profilecard">
  <img src="img_avatar2.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>Virm Aditya</b></h4> 
    <p>Webs Html Design</p> 
  </div>
</div>
Jika sudah, kalian pastekan kedalam file index yang telah dibuat tadi dan klik simpan file.

Langkah selanjutnya yaitu, buat lagi sebuah file dan beri nama style.css atau yang lainnya lalu copy kembali kode css berikut ini:

.profilecard {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.profilecard:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}
Sama seperti langkah pertama, pastekan kedalam file css tersebut dan klik simpan file. Setelah itu coba kalian lihat bagaimana hasilnya. Apabila berhasil saya ucapkan selamat, praktek kalian telah sukses.

Adapun Jika digabungkan dari kode keseluruhannya, akan terlihat seperti contoh dibawah:

/* By Seo Techman */
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.profilecard {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.profilecard:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}
</style>
</head>
<body>

<div class="profilecard">
  <img src="img_avatar2.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>Virm Aditya</b></h4> 
    <p>Webs Html Design</p> 
  </div>
</div>

</body>
</html>
Bagaimana Jika Kita Ingin Menerapkannya Di Blogger?

Ikuti langkah-langkah berikut ini:
1. Seperti biasa, masuk ke dashboard Blogger kalian.
2. Klik Tema/Template -> Lalu klik Edit Html.
3. Cari kode ]]></b:skin> atau bisa juga </style>.
4. Kemudian copy paste kode css dibawah dan tempatkan tepat diatas ]]></b:skin> tersebut.

.profilecard {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 40%;
  border-radius: 5px;
}

.profilecard:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.container {
  padding: 2px 16px;
}
5. Jika sudah, kalian langsung klik simpan tema.

Langkah berikutnya adalah, buat html seperti langkah sebelumnya dengan cara pergi ke menu halaman dan buatlah sebuah halaman baru. Ingat bukan edit dibagian compose melainkan pada bagian html. Copy paste lagi kode html dibawah ini dan tempatkan didalam halam baru tersebut.

<div class="profilecard">
  <img src="img_avatar2.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>Virm Aditya</b></h4> 
    <p>Webs Html Design</p> 
  </div>
</div>
Pratinjau terlebih dahulu setelah itu baru klik publish.

Mungkin dengan profile card ini bisa kalian manfaatkan untuk membuat halaman seperti About Me, agar terlihat lebih menarik dan keren.

Untuk contoh live demonya bisa dilihat Dibawa ini:



Nah itulah sedikit perbincangan kita pada hari dan kesempatan ini. Apabila ada kode yang eror, bisa kalian sampaikan melalui kolom komentar dibawah.

Mungkin cukup sekian pembahasan mengenai Membuat Profile Card Dengan Desain Html Dan Css. Tidak kurang tidak lebih, hanya itu yang bisa saya sharing pada tutorial kali ini.

Semoga dapat bermanfaat, dan akhir kata dari saya, wassalammuallaikum, wr, wb.

Baca Selengkapnya

Cara Mudah Membuat Contact Chips Pure Css

...

Cara Mudah Membuat Contact Chips

Pada kesempatan kali ini saya akan coba kembali memberikan sebuah artikel, yang tidak lain yaitu sebuah tutorial lengkap beserta langkah-langkahnya.

Untuk tutorial yang akan saya angkat adalah cara membuat sebuah contact chips, yang dimana ini dapat dikategorikan sebagai tutorial termudah.

Kok tutorial termudah? Ya memang, karena menurut saya ini yang sangat-sangat mudah di cerna dan simple. Tujuannya, agar dapat dimengerti dan tidak ada tingkat kerumitannya sama sekali.

Bagaimana Cara Membuatnya?

Mudah sekali, kode-kodenya pun bisa dibilang yang paling irit atau sedikit. Kenapa namanya Contact Chips? Karena bisa dikatakan Contact Chips ini sama persis dengan Name Tags atau sebagai tanda pengenal. Namun bedanya kalau Contact Chips dibuat sesimple mungkin hanya terdapat foto dan nama kalian saja.

Jika kalian ingin membuatnya dan menerapkannya pada website atau blog kalian, saya sarankan tempel dibawah navbar supaya terlihat menarik.

Mungkin kita langsung saja untuk mempraktekannya, tidak perlu berlama-lama lagi. Untuk cara pembuatannya bisa perhatikan langkah dibawah ini.

Langkah pertama, seperti biasa buatlah sebuah file css dan beri nama style.css lalu kalian copy paste kode css berikut:

.contactchips {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.contactchips img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
Selanjutnya yaitu, kalian buat file html nya, bisa index.html atau terserah kalian. Kemudian copy lagi kode html berikut:

<div class="contactchips">
  <img src="img_avatar.png" alt="Person" width="96" height="96">
  Virm Aditya
</div>
Lalu pastekan kedalam file index.html tersebut, yang telah dibuat tadi. Untuk kode keseluruhannya bisa dilihat dibawah ini:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.contactchips {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #f1f1f1;
}

.contactchips img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="contactchips">
  <img src="img_avatar.png" alt="Person" width="96" height="96">
  Virm Aditya
</div>

</body>
</html>
Note:
Untuk link foto dan nama, bisa kalian rubah dengan link foto dan nama kalian lalu klik simpan.


Bagaimana hasilnya? Bisa kalian lihat sendiri hasil Contact Chips tersebut. Adapun saya lampirkan untuk live demonya dibawah ini:



Mungkin itu saja yang bisa saya berikan pada artikel tutorial kali ini, mudah-mudahan dapat bermanfaat.

Demikianlah Cara Mudah Membuat Contact Chips Pure Css. Dan akhir kata saya ucapkan, terimakasih.

Baca Selengkapnya

Cara Mudah Membuat Side Navigation W/Opacity

...

Cara Membuat Side Navigation

Cara Membuat Side Navigation W/Opacity - Pada artikel yang lalu, mungkin saya sudah menjelaskan Cara Membuat Navigation Bar Keren.

Sama halnya pun dengan artikel kali ini yang menjelaskan tentang bagaimana cara membuat side navigation, namun untuk yang ini kita agak sedikit berbeda, kenapa berbeda dan apa perbedaannya? Jelas berbeda, karena disini kita akan membuat side navigation tersebut menggunakan w/opacity.

Apa Itu Opacity Dan Apa Fungsinya?

Berikut penjelasannya: Opacity adalah sebuah efek yang dapat menciptakan suatu objek menjadi transparansi yang tidak lain yaitu melalui opacity property ini. Hal ini disebabkan karena transparansi yang tercipta ketika opacity property digunakan, kalian juga bisa menggunakan efek opacity pada box, image atau objek lain seperti teks.

Meskipun opacity effect dapat digunakan tanpa melibatkan hover effect, namun pada kenyataannya lebih banyak desain blog/web yang menggabungkan fungsi CSS opacity property dan hover effect secara bersamaan.

Berikut dibawah ini adalah beberapa contoh value atau nilai dari opacity:

1.0
0.9
0.8
0.7
0.6
0.6
0.5
0.4
0.3
0.2
0.1
0.0

Kesimpulannya:
Semakin rendah value atau nilai dari opacity, maka tingkat transparansinya juga akan semakin rendah pula.

Itulah sedikit penjelasan atau pengertian dari opacity. Mari kita lanjutkan ketopik pembahasan yang akan kita kupas secara tuntas.

Mungkin diantara kalian semua sudah paham bagaimana membuat sebuah side navigation menggunakan nilai opacity , akan tetapi untuk para pemula ini adalah hal yang mungkin cukup membingungkan dan maka dari itu disini saya akan memberikan langkah-langkah cara membuatnya.

Untuk cara pembuatannya dapat kalian lihat dibawah ini, agar mudah dipahami.

Apa hal pertama yang harus kita buat?

Langkah pertama yang harus dilakukan yaitu buat sebuah file Css nya, beri nama style.css dan copy kode dibawah ini:

body {
  font-family: "Lato", sans-serif;
  transition: background-color .5s;
}

/* Add a black background color to the top navigation */
.topnav {
 background: #fff;
 border:2px solid #ddd;
 overflow: hidden;
 width: 100%;
}
/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #777;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
 
/* Change the color of links on hover */
.topnav a:hover {
    background-color: #00BBFF;
    color: white;
}
 
/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
 
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
 
a svg{
  transition:all .5s ease;
 
  &:hover{
    #transform:none;
  }
}
 
#ico{
  display: none;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #49ACE1;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
Setelah itu pastekan kode Css diatas kedalam file style.css yg telah dibuat tadi.

Langkah selanjutnya adalah, kalian buat lagi file javascript nya terserah mau diberi nama apa saja. Disini saya contohkan sidenav.js copy kodenya dibawah ini dan pastekan kedalam file sidenav.js:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.7)";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft= "0";
  document.body.style.backgroundColor = "white";
}
Note:
Lihat pada bagian - document.body.style.backgroundColor = "rgba(0,0,0,0.7)";
Disitu terlihat nilai dari opacity nya yaitu 0.7 Yang tandanya tingkat transparansinya tinggi. Bisa kalian rubah, entah itu lebih rendah ataupun lebih tinggi misalnya menjadi 0.9.

Nah jika sudah selesai, lanjut ke langkah berikutnya yaitu membuat html nya. Perhatikan dibawah ini:

<div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
<a href="#">Mailer</a>
<a href="#">Privacy</a>
<a href="#">Tos</a>
</div>
<nav class="topnav">
<a href="#" onclick="openNav()">
<svg width="30" height="30" id="icoOpen">
<path d="M0,5 30,5" stroke="#777" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#777" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#777" stroke-width="5"/>
</svg>
</a>
</nav>
Sampai tahap ini bisa dikatakan, kita sudah selesai membuat side navigation tersebut. Untuk detailnya bisa kalian praktekan dan coba sendiri dengan mengikuti langkah diatas. Kode-kode diatas akan berjalan jika kalian mengikuti apa yang telah saya jelaskan diatas dengan benar.

Namun untuk melihat berjalan atau tidaknya, silahkan kalian coba akses dan lihat hasilnya. Karena saya sendiri sudah menguji cobanya terlebih dahulu dan hasilnya pun 100% work.

Live demo bisa kalian lihat dibawah:



Saya rasa sudah cukup jelas pembahasan kali ini Cara Mudah Membuat Side Navigation, semoga dapat bermanfaat. Untuk masalah tampilan bisa kalian edit dibagian css nya sesuaikan dengan selera kalian.

Dan jangan lupa juga subscribe blog sederhana ini, agar dapat tutorial menarik lainnya. Apabila menurut kalian artikel ini bermanfaat, silahkan di share kepada yang lainnya.

Akhir kata saya ucapkan, terimakasih.

Baca Selengkapnya

Cara Mudah Membuat Scroll Horizontal Menu Pure Css

...

Cara Membuat Menu Horizontal

Cara Mudah Membuat Scroll Horizontal Menu Pure Css - Pada umumnya sebuah menu yang terdapat pada website atau blog, memang diharuskan. Kenapa diharuskan? Karena berguna untuk memudahkan para pengunjung agar bisa menjelajahi situs kalian dengan mudah bila adanya menu tersebut.

Dapat dipastikan juga, jika para pengunjung itu akan betah berlama-lama disitus kalian apalagi ditambah dengan artikel yang mereka sedang cari, semuanya ada dan lengkap.

Tidak hanya menu bar saja, hampir 100% nya semua website menambahkan sebuah FORM SEARCH dengan kegunaan yang sama seperti menu bar.

Bicara tentang menu bar, pada artikel sebelumnya saya sudah menerangkan bagaimana Cara Membuat Navigation Bar Keren. Namun tidak jauh berbeda dengan artikel yang akan saya bahas kali ini, yang intinya sama-sama menu.

Bagaimanakah Cara Membuat Menu Aktif Horizontal Scroll?

Sangat mudah, tidak sulit sama sekali. Loh koq bisa mudah gitu? Ya memang mudah karena kita hanya perlu membuatnya dengan Css saja tidak perlu javascript ataupun yang lainnya.

Nah, jika kalian tertarik mari kita lanjutkan. Untuk cara dan langkah-langkahnya bisa kalian simak dan perhatikan dibawah.
Sudah tidak sabarkan? Ok kita langsung mulai saja tanpa perlu banyak kata.

Langkah-langkahnya:
1. Masuk ke dashboard Blogger kalian.
2. Setelah itu klik Tema -> Edit Html dan cari kode ]]></b:skin> atau bisa juga </style>.
3. Salin kode CSS berikut ini, dan tempelkan tepat diatas ]]></b:skin>.

div.scrollmenu {
  background-color: #f5f5f5;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: #afafaf;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background:rgba(0,0,0,0.2);
  color:#fff;
  border-bottom: 3px solid #48d1cc;
}

div.scrollmenu a.active {
  border-bottom: 3px solid #48d1cc;
}
4. Klik simpan template.
Setelah selesai dengan langkah pertama, selanjutnya langkah kedua yaitu buat html nya seperti kode dibawah ini:

<div class="scrollmenu">
<a href="" class="active">Home</a>
<a href="">About</a>
<a href="">Contact</a>
<a href="">Disclaimer</a>
<a href="">Privacy</a>
<a href="">Sitemap</a>
<a href="">Tos</a>
</div>
Salin dan tempel dibawah kode </body> atau terserah kalian, mau ditempel dimana, atau bisa juga pada bagian footer.

Jika sudah selesai semua, waktunya kalian untuk melihat hasilnya. Untuk link demo nya bisa dilihat dibawah ini:



Bagaimana jika kita membuatnya bukan diplatform Blogger, melainkan di HTML?

Simak dan perhatikan dibawah ini: Langkah pertama adalah, buat sebuah file Css dan beri nama style.css salin kode berikut:

div.scrollmenu {
  background-color: #f5f5f5;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: #afafaf;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background:rgba(0,0,0,0.2);
  border-bottom: 3px solid #48d1cc;
}

div.scrollmenu a.active {
  border-bottom: 3px solid #48d1cc;
}
Lalu kalian tempel kode css nya didalam file style.css tersebut dan simpan. Selanjutnya buat sebuah file index.

<div class="scrollmenu">
<a href="#home" class="active">Home</a>
<a href="">About</a>
<a href="">Contact</a>
<a href="">Disclaimer</a>
<a href="">Privacy</a>
<a href="">Sitemap</a>
<a href="">Tos</a>
</div>
Jika sudah kalian simpan file tersebut. Untuk pemasangan lebih jelas dan keseluruhannya, bisa dilihat dibawah ini:

<!DOCTYPE html>
<html>
<head>
<title>Demo Menu Horizontal Scroll</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="scrollmenu">
<a href="" class="active">Home</a>
<a href="">About</a>
<a href="">Contact</a>
<a href="">Disclaimer</a>
<a href="">Privacy</a>
<a href="">Sitemap</a>
<a href="">Tos</a>
</div>
</body>
</html>
Bagaimana menurut kalian, mudah bukan? Tentunya sangat mudah dan simple, jika ingin merubahnya kalian bisa explore dengan mengedit Css nya dan sesuaikan dengan selera kalian masing-masing.

Mungkin saya rasa sudah cukup jelas untuk pembahasan kali ini, kurang atau lebihnya saya mohon maaf semoga artikel ini bermanfaat.

Dan jangan lupa subscribe blog ini, untuk mendapatkan artikel terbaru lainnya. Jika menurut kalian artikel ini bermanfaat, tolong dishare pada yang lain.

Demikianlah Pembahasan kali ini Cara Mudah Membuat Scroll Horizontal Menu Pure Css. Akhir kata saya ucapkan, terimakasih.

Baca Selengkapnya

Membuat Popup Modal menggunakan Javascript Dan Css

...

Membuat Modal Pop Up About Terbaru

Membuat Popup Modal Menggunakan Javascript Dan Css - Pada artikel sebelumnya saya sudah menjelaskan tentang, Cara Menampilkan File Hidden .htaccess Di Cpanel.

Lain cerita dengan artikel sebelumnya, pada artikel kali ini yang saya akan coba bahas adalah cara membuat modal pop up about keren dengan css animasi dan js.

Bicara tentang about, yang dimana kita telah ketahui jika diartikan kedalam bahasa indonesia yaitu "Tentang" atau bisa juga berupa sebuah informasi mengenai seseorang ataupun tentang website itu sendiri.

Kenapa harus ada about? Karena peran about ini sangatlah penting didalam sebuah website, blog dan lain-lain. Gunanya untuk memudahkan para pengunjung, dikala mereka ingin tahu siapakah dan apa tujuan dari website ini yang sebenarnya.

Bagaimana menurut kalian, sudah pahamkan arti dari about? Kalau sudah mari kita lanjutkan kepembahasan intinya.

Modal box about yang akan kita bahas kali ini yaitu menggunakan bantuan CSS dan disini saya sedikit mencampurnya dengan taburan JAVASCRIPT  ditambah dengan animasi, agar terlihat bagus dan mempesona.

Bagaimana Cara Membuatnya?

Oke tanpa berlama-lama lagi langsung saja kita praktekan saat ini juga.
Perhatikan dan simak baik-baik dibawah ini:

Langkah yang pertama yaitu, buatlah sebuah file style.css lalu salin kode css berikut:

/* Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.8);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border-radius:5px;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
.btn {
     background:none;
     border:solid 2px #afafaf;
     color:#afafaf;
     font-size:18px;
     font-weight:bold;
     margin-left:115px;
     text-align:center;
}
.btn:hover {
     background:#333;
}

/* Animasi */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

/* Close Button */
.close {
  color: #000;
  float: right;
  font-size: 40px;
  font-weight: bold;
}

.close:hover, .close:focus {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 2px 16px;
  background:#48d1cc;
  background:linear-gradient(#48d1cc, #49ACE1);
  color: white;
  height:auto;
}
.modal-header img {border-radius:100%;padding:10px;width:120px;height:120px;}

.modal-body {padding: 2px 16px;height:auto;}
.modal-body p {color:#afafaf;}

.modal-footer {
  padding: 2px 16px;
  background:#48d1cc;
  background:linear-gradient(#48d1cc, #49ACE1);
  color: white;
  height:auto;
}
Langkah selanjutnya adalah, kalian buat file html nya dan salin kode berikut ini:

<!-- Trigger/Open The Modal -->
<button id="myBtn" class="btn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <img src="yourpic" alt="mypic"/>
    </div>
    <div class="modal-body">
      <p>Your Name</p>
      <p>Your Age</p>
      <p>Your Hoby</p>
    </div>
    <div class="modal-footer">
      <h3>Regard: </h3>
    </div>
  </div>

</div>
Kalau sudah selesai, lanjut dengan membuat file javascript. contoh: modal.js lalu salin kode dibawah dan tempel di dalam modal.js tersebut:

<script type="text/javascript">
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

//When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
Jika kalian sudah selesai membuat semua file nya dengan mengikuti langkah-langkah yang telah saya jelaskan diatas, waktunya kalian akses dan lihat hasilnya. Apakah berkerja atau tidak!

NOTE:
Apabila terjadi eror atau kesalahan, mungkin kalian tidak sepenuhnya mengikuti langkah diatas ataupun ada kode yang terhapus atau bisa juga kurang. Karena kode-kode tersebut sudah saya coba sebelum saya postingkan dan hasilnya work.

Adapun saya lampirkan untuk live demonya, agar kalian dapat melihatnya dengan langsung:



Explore dengan cara kalian masing-masing dan edit sebaik mungkin, agar terlihat lebih elegan dan menarik.

Mungkin saya rasa cukup untuk pembahasan kali ini, apabila ada pertanyaan silahkan tinggalkan komentar kalian.

Itulah Cara Membuat Modal Pop Up About Keren Dengan Css Dan Javascript. Mudah-mudahan artikel ini bermanfaat dan menambah pengetahuan kalian.

Akhir kata saya ucapkan terimakasih dan sampai bertemu kembali pada artikel selanjutnya.

Baca Selengkapnya

Cara Menampilkan File Hidden .htaccess Di Cpanel

...

Melihat Htaccess Di Cpanel

Cara Menampilkan File Hidden Htaccess Di Cpanel - Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara menampilkan file htaccess yang tersembunyi di localhost filemanager.

Setelah beberapa hari tidak update artikel dikarenakan sibuk dalam urusan didunia nyata, lantaran kerjaan kantor yang sangat menumpuk membuat saya susah untuk berpikir. Pusing ya mas? Bukan main pusingnya, sampai-sampai otak ini pun rasanya mau pecah.

Coba kalian bayangkan ketika masuk kantor kalian sudah dihadapkan dengan tumpukan file yang begitu banyak dimeja kerja kita, dan yang menjadi pertanyaannya adalah bagaimana cara kalian menyikapinya? Jawabanya sudah pasti terima nasib dan disyukuri saja sebagai bawahan, yang tentunya kita juga harus menunjukan propesionalisme kita dalam bekerja dan yang paling penting yaitu tanggung jawab.

Maaf saya jadi curhat sedikit, oke mari lanjutkan kepembahasan yang akan kita kupas secara tuntas pada hari ini juga.

Bagaimana sih cara menampilkan file .htaccess dan file lainnya yang tersembunnyi pada localhost?

Mungkin dari kalian semua sudah banyak yang tahu tentang hal ini, namun apa salahnya jika kita mengulas ulang untuk sumber pembelajaran para pemula yang baru terjun kedalam dunia hosting.

Nah untuk cara dan langkah-langkahnya bisa kalian perhatikan dan simak baik-baik dibawah ini:

1. Kalian wajib harus punya hosting, bagaimana jika belum punya? Kalian bisa membelinya di profider yang menyediakan jasa hosting tersebut.

2. Setelah kalian punya hosting sendiri, kalian masuk (login) ke cpanel.

3. Setelah masuk kalian klik filemanager, lalu kalian klik gambar roda gigi atau pengaturan yang terdapat pada bilah sisi kanan atas dan centang pada bagian (Tampilkan File Tersembunyi), seperti gambar dibawah ini:

Contoh File Htaccess

4. Lalu klik simpan. 

Dan lihat hasilnya, jika file htaccess tidak muncul berarti di cpanel kalian tidak ada file htaccess nya.
Namun, apabila file tersebut muncul akan terlihat seperti gambar dibawah ini:

Htaccess file

Lalu bagaimana cara membuatnya?
Cukup mudah, kalian hanya perlu klik +File (Tambah File Baru) beri nama .htaccess dan isi file tersebut terserah mau di isi apa saja karena hanya untuk contoh saja.

Nah bagaimana menurut kalian? Sangat mudah bukan.. Silahkan kalian praktekan dirumah dan ikuti seperti langkah-langkah yang telah saya jelaskan diatas.

Semoga info kali ini dapat bermanfaat, guna untuk tahap awal pembelajaran. Dan jangan lupa untuk mengsubscribe blog ini agar mendapatkan update artikel menarik lainnya.

Demikianlah pembahasan kali ini Cara Menampilkan File Hidden Htaccess Di Cpanel, akhir kata saya ucapkan terimakasih.

Sampai bertemu kembali dilain waktu dan kesempatan berikutnya.


Baca Selengkapnya

Cara Membuat Navigation bar Keren Dengan Css

...

Cara Membuat Navigation Bar Keren

Cara Membuat Navigation Bar Keren Dengan Css - Navbar atau sering disebut Navigation Bar, yang posisinya terdapat pada head atau tepat diatas (fixed top), bisa juga dibawah (fixed bottom). Tampilan Navbar akan terlihat lebih menarik jika kita mempercantiknya dengan balutan CSS, animasi, ataupun dengan javascript.

Bagi para pakar koding atau seorang yang paham bahasa pemograman, tentunya dalam hal ini sangatlah mudah. Akan tetapi, pada artikel yang akan saya bahas kali ini adalah khusus untuk para pemula yang mungkin sedikit kesulitan bahkan cenderung tidak mengerti, cara membuat sebuah menu bar pada webs, blog dan lain sebagainya.

Apa Itu Navbar Dan Apa Fungsinya?
Navbar adalah sebuah toolbar yang memiliki fungsi spesifik untuk menghandle semua navigasi, yang dimana terdapat didalamnya bermacam-macam bisa itu alamat website, form search dan lain-lain. Jika disebuah situs webs maupun blog tidak terdapat menu bar atau navbar, mungkin rasanya kurang menarik. Jadi, dapat dikatakan peran Navbar ini sangatlah penting.

Nah, sesuai apa yang telah saya katakan pada pembahasan kali ini saya akan memberikan tutorial bagaimana cara membuat sebuah Navbar keren. Perlu diketahui bahwa, disini saya hanya menggunakan bantuan dari CSS saja, dan dibalut dengan gradient color yang bisa berubah-ubah.

Bagaimana Cara Membuatnya?

Mungkin kita langsung praktekan saja, untuk proses pembuatannya bisa perhatikan dibawah ini:

Langkah pertama yaitu, login ke Cpanel (Control Panel) atau hosting kalian. Nah kalau belum punya hosting, kalian bisa order Disini.

Disini saya anggap kalian sudah punya hosting, setelah login masuk ke menu filemanager lalu buatlah sebuah file, beri nama style.css. Setelah itu copy paste kode CSS dibawah ini dan masukan kedalam file style.css yang sebelumnya sudah kalian buat.

        * {
 padding:0;
 margin:0;
}
body {
 font-family:'Jockey One', Geneva, sans-serif;
 font-size:15px;
 background-color:#FFF
}
header {
 width:100%;
 background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71);
 -webkit-animation: color 2.5s ease-in  0s infinite alternate running;
 -moz-animation: color 2.5s linear  0s infinite alternate running;
 animation: color 2.5s linear  0s infinite alternate running;
 z-index:1000;
 position:fixed;
}
/* Animasi + Prefix untuk browser */
@-webkit-keyframes color {
    0% { background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71); }
    25% { background: linear-gradient(45deg, #3c8dbc, #7095c1, #48d1cc); }
    50% { background: linear-gradient(45deg, #9b59b6, #7095c1, #48d1cc); }
}
@-moz-keyframes color {
     0% { background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71); }
    25% { background: linear-gradient(45deg, #3c8dbc, #7095c1, #48d1cc); }
    50% { background: linear-gradient(45deg, #9b59b6, #7095c1, #48d1cc); }
}
@keyframes color {
  0% { background: linear-gradient(45deg, #9b59b6, #7095c1, #e74c3c, #f1c40f, #48d1cc, #2ecc71); }
 25% { background: linear-gradient(45deg, #3c8dbc, #7095c1, #48d1cc); }
 50% { background: linear-gradient(45deg, #9b59b6, #7095c1, #48d1cc); }
}
.menu-bar {
 color:#ddd;
 border:2px solid #ddd;
 font-size:35px;
 width:60px;
 cursor:pointer;
 text-align:center;
 padding:5px;
 margin-left:10px;
 margin-top:12px;
 margin-bottom:5px;
 -webkit-animation: slide 0.2s ease;
 -moz-animation: slide 0.2s ease;
 animation: slide-in 0.2s ease;
 animation-fill-mode: forwards;
}
.navbar-brand {
        float:right;
        padding:0 4px 4px 0;
        margin:3px;
        color:#fff;
}
.menu-bar:hover {
        background:rgba(0, 0, 0, 0.3);
        border-radius:4px;
}
#tag-menu {
 display:none;
}
#tag-menu:checked ~ div.jw-drawer {
 -webkit-animation: slide 0.2s ease;
 -moz-animation: slide 0.2s ease;
 -o-animation: slide 0.2s ease;
 animation: slide-in 0.2s ease;
 animation-fill-mode: forwards;
}
.jw-drawer {
 position:fixed;
 left:-280px;
        height:100%;
 z-index:100;
 width:230px;
 margin-top:5px;
 animation: slide-out 0.2s ease;
 animation-fill-mode: forwards;
 background: #F5F5F5;
}
.jw-drawer ul li {
 list-style:none;
}
.jw-drawer ul li a {
 padding:10px 20px;
 text-decoration:none;
 display:block;
 color:#3c8dbc;
 border-top:none;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
}
.jw-drawer ul li a:hover{
 background-color:rgba(0, 0, 0, 0.1);
 transition: all 0.8s;
}
.jw-drawer ul li a i {
 width:50px;
 height:35px;
 text-align:center;
 padding-top:15px;
 -webkit-transition-duration: 0.4s;
 transition-duration: 0.4s;
}
@-webkit-keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}
@-moz-keyframes slide-in {
 from {left: -280px;}
 to {left: 0;}
}
@keyframes slide-out {
 from {left: 0;}
 to {left: -280px;}
}
Kalau sudah klik simpan, langkah selanjutnya yaitu buat file head.php atau terserah kalian. Copy paste kode html berikut ini lalu tempel pada head.php yang sudah kalian buat.

 <link rel="stylesheet" href="css/styles.css">
<header>
  <input type="checkbox" id="tag-menu"/>
  <label class="fa fa-bars fa-2x menu-bar" for="tag-menu"></label>
  <a class="navbar-brand"></a>
  <div class="jw-drawer">
<nav>
      <ul>
        <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
        <li><a href="/about"><i class="fa fa-address-card-o"></i> About Us</a></li>
        <li><a rel="nofollow" href="#"><i class="fa fa-envelope-open"></i> Mailer</a></li>
        <li><a href="#"><i class="fa fa-mixcloud"></i> Music partner</a></li>
        <li><a href="#"><i class="fa fa-mixcloud"></i> Music Partner</a></li>
        <li><a href="#"><i class="fa fa-feed"></i> Blog</a></li>
        </ul>
        </nav>
        </div>
        </header>
Setelah selesai lalu klik simpan file. Pada bagian link yang saya beri tanda #, bisa kalian ganti dengan url webs kalian atau bisa dengan alamat email ataupun yang lainnya.

Langkah berikutnya adalah, memasukan file head.php atau navbar.php kedalam file inti atau index. Bagaimana caranya? Sangat mudah, kalian tinggal menginclude nya saja dengan cara seperti dibawah ini.
Contoh File Index

<!DOCTYPE html>
<html>
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Head Navbar -->
<?php include 'head.php'; ?>
</head>
<body>
<h1>Navbar Is Here</h1>
</body>
</html>
Kalau sudah selesai semua, kalian bisa lihat hasilnya seperti apa dan bagaimana jadinya. Jika terjadi erorr atau kesalahan, mungkin kalian tidak mengikuti langkah seperti diatas yang sudah saya jelaskan secara detail.

Dan untuk link demonya, bisa kalian lihat dibawah ini.



Mungkin itu saja yang dapat saya sampaikan, dan saya rasa cukup untuk pembahasan kali ini. Lebih atau kurangnya semoga bermanfaat khususnya bagi pemula.

Demikianlah Cara Membuat Navbar Keren Di Html. Atas perhatiannya saya ucapkan, Terimakasih.

Baca Selengkapnya