Membuat Animasi Bergerak Pada Text Dengan Css

Cara Membuat Animasi Bergerak

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:

Live Demo

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.

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.

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:

Live Demo

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.

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.

Selengkapnya

Membuat Profile Card Dengan Desain Html Dan Css

Membuat Profile Card

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.

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:

Live Demo

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.

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:

Live Demo

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.

Selengkapnya

Cara Mudah Membuat Side Navigation W/Opacity

Cara Membuat Side Navigation

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?
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:

Live Demo

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.

Selengkapnya

Cara Mudah Membuat Scroll Horizontal Menu Pure Css

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:

Live Demo

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.

Selengkapnya

Membuat Popup Modal menggunakan Javascript Dan Css

Membuat Modal Pop Up About Terbaru

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:

Live Demo

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.

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.

Selengkapnya

Cara Membuat Navigation bar Keren Dengan Css

Cara Membuat Navigation Bar Keren

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 di Niagahoster.

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.

Live Demo

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.

Selengkapnya

Cara Membuat Widget Sticky Sosial Media Di Blog

Cara Membuat Widget Sticky Sosial Media

Memanfaatkan media sosial, adalah sebuah teknik yang cukup baik untuk kemajuan suatu projek kedepannya.

Seperti yang telah kalian ketahui, bahwa peran sosial media pada saat ini sangat penting. Kenapa penting? Karena di jaman yang serba canggih seperti sekarang ini telah terbukti hampir beberapa persen dari perusahaan atau yang lainnya, telah menargetkan dan memasarkan produk mereka melalui sosial media dan di tambah lagi dengan beragam sosial media lainnya yang saat ini bermunculan.

Nah maka dari itu, untuk kesempatan kali ini saya akan memberikan sebuah tutorial cara membuat widget stikcy sosial media yang lumayan bagus menurut saya.

Apakah Terdapat Javascript Didalam nya?

Tidak sama sekali, karena disini kita akan membuatnya hanya menggunakan CSS untuk mempercantik widget tersebut. Untuk langkah pembuatnya sangat mudah tidak sulit, bisa kalian simak dan perhatikan dibawah ini.

Langkah-langkahnya:
1.Seperti biasa login ke dashboard Blogger -> Click Tema -> Edit Html.
2.Cari kode ]]></b:skin> atau </style>
3.Lalu Copy Paste kode CSS dibawah ini, dan letakan tepat di atas ]]></b:skin> atau </style> tersebut.

.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}
Langkah selanjut nya adalah, memasang kode html nya. Copy Paste kode dibawah ini, terserah mau diletakan di bagian mana. Bisa didalam kode <body> atau dibagian lainnya.

<div class="icon-bar">
<a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
<a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
<a href="#" class="google"><i class="fa fa-google"></i></a>
<a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
<a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
</div>

Note:

Silahkan ganti kode # dengan alamat sosial media kalian. Dan kalian juga bisa menambah sosial media lain jika kalian menginginkanya.

Kreasikan kode diatas sesuai dengan imajinasi kalian masing-masing. Mungkin saya rasa cukup untuk pembahasan kali ini.

Itulah Cara Membuat Widget Sticky Sosial Media, sedikit atau kurangnya semoga bermanfaat. Dan bilamana ada kesalahan dalam kode tersebut, silahkan berkomentar.

Akhir kata saya ucapkan, Terimakasih.

Selengkapnya

Cara Membuat Label Hashtag Keren Di Blogger Blogspot

Cara Membuat Label Keren

Jenuh atau bosan dengan label di blog kalian yang tampilannya hanya begitu-gitu saja? Mari, saatnya kalian merubah label tersebut agar terlihat lebih menarik dan elegan.

Sebelum masuk kemenu pembahasan kalin ini, alangkah baiknya terlebih dahulu kita mengenal label tersebut dan juga fungsinya.

Apa sih fungsi dan kegunaan label pada blog? Simak berikut dibawah ini:

Fungsi label di blog yaitu untuk mengelompokan artikel kedalam satu topik atau menu bahasan tertentu, sehingga dapat memudahkan setiap pengunjung untuk menemukan artikel yang cocok dan sesuai dengan topik label tersebut.

Dapat disimpulkan bahwa, dengan adanya sebuah label pada blog, maka kita tidak perlu bersusah payah membuat beberapa halaman untuk mengelompokan artikel yang ada. Kenapa? Karena setiap label yang telah kita buat itu akan secara otomatis mengarah pada halaman label tersebut, apabila kita mengkliknya.

Jika kalian sudah mengerti fungsi dari label, mari kita lanjutkan ke pembahasan kita kali ini yaitu "Cara Membuat Label Keren Di Blog".

Simak langkah-langkahnya di bawah ini:

Apa hal pertama yang harus kita buat? Yang pertama yaitu, cari kode </head> pada template blog yang kalian gunakan.

Caranya adalah:
1.Masuk kemenu dashboard blogger kalian -> Click Tema -> Edit Html.
2.Lalu carilah kode </head>
3.Setelah itu kalian copy paste script CSS dibawah ini, dan letakan tepat diatas kode </head> tersebut.

<style type='text/css'>
/*Post Label*/
.post-labels{float:left;display:block;width:100%;color:#999;margin-right:8px}
.post-labels a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-left:12px;padding:0 10px;background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;border-bottom-right-radius:3px;border-top-right-radius:3px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:#fff;border-style:solid;border-width:12px 12px 12px 0}
.post-labels a:after{content:"#";position:absolute;top:0;left:-1px;float:left;width:0;height:0;border-radius:none;color:#fff;transition:all .3s}
.post-labels a:nth-child(1){background:#ca85ca}
.post-labels a:nth-child(1):before{border-color:transparent #ca85ca transparent transparent}
.post-labels a:nth-child(2){background:#e54e7e}
.post-labels a:nth-child(2):before{border-color:transparent #e54e7e transparent transparent}
.post-labels a:nth-child(3){background:#61c436}
.post-labels a:nth-child(3):before{border-color:transparent #61c436 transparent transparent}
.post-labels a:nth-child(4){background:#f4b23f}
.post-labels a:nth-child(4):before{border-color:transparent #f4b23f transparent transparent}
.post-labels a:nth-child(5){background:#46c49c}
.post-labels a:nth-child(5):before{border-color:transparent #46c49c transparent transparent}
.post-labels a:nth-child(6){background:#607ec7}
.post-labels a:nth-child(6):before{border-color:transparent #607ec7 transparent transparent}
.post-labels a:nth-child(7){background:#ca85ca}
.post-labels a:nth-child(7):before{border-color:transparent #ca85ca transparent transparent}
.post-labels a:nth-child(8){background:#e54e7e}
.post-labels a:nth-child(8):before{border-color:transparent #e54e7e transparent transparent}
.post-labels a:nth-child(9){background:#61c436}
.post-labels a:nth-child(9):before{border-color:transparent #61c436 transparent transparent}
.post-labels a:nth-child(10){background:#f4b23f}
.post-labels a:nth-child(10):before{border-color:transparent #f4b23f transparent transparent}
</style>

Note:

Gantilah kode warna pada CSS diatas sesuai dengan selera kalian masing-masing agar lebih memberi kesan yang menarik.

Langkah selanjutnya adalah,
Cari kode <b:includable id='postdateinfo' var='post'> Sampai Dengan..
</b:includable>
atau terserah kalian mau ditempatkan dimana.
Copy paste kode dibawah ini dan letakan tepat dibawah postdateinfo seperti kode diatas.

<b:includable id='postlabelinfo' var='post'>
 <span class='post-labels'>
        <b:if cond='data:post.labels'>
          <span style='float: left;font-weight:bold;'><em>Tags:</em> </span>
  <b:loop values='data:post.labels' var='label'>
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'/>
  </b:loop>
</b:if>
  </span>
</b:includable>
Jika di tema blog kalian sudah ada kode labelnya, kalian bisa ganti dengan kode label diatas atau merubahnya sedikit.

Nah bagaimana menurut kalian, mudah bukan?
Mudah-mudahan dengan artikel ini, bisa memecahkan masalah kalian yang sedang mencari atau ingin merubah dan membuat label yang keren diblog kalian.
Apabila ada pertanyaan seputar pembahasan kali ini, silahkan berkomentarlah dengan bijak diblog ini.

Demikianlah Cara Membuat Label Keren Di Blogger Blogspot full tutorial. Dan jangan lupa untuk mensubscribe blog saya ini, untuk mendapatkan info menarik lainnya.

Tanpa mengurangi rasa hormat saya kepada semua pembaca, saya ucapkan terimakasih.

Selengkapnya

Tips Dan Cara Agar Artikel Blog Tidak Bisa Di Copy Paste

Tips Dan Cara Agar Postingan Blog Tidak Bisa Dicopy Paste

Copas (Copy Paste) atau AGC (Auto Generate Content), mendengarnya saja sudah tidak asing. Mungkin sebagian dari kalian pernah mengalami kasus seperti ini, yang sudah pasti kesal bercampur emosi. Sudah susah payah menulis artikel dengan penuh kerja keras untuk berfikir dan mencari ide-ide yang unik, tapi alhasil pada akhirnya ada saja yang mengkopi paste artikel kita.

Kesimpulannya:

Sudah jelas terlihat, para blogger yang ciri-cirinya seperti itu adalah orang yang pemalas hanya mau yang instant dan dengan mudahnya mengkopi paste artikel orang lain tanpa memperdulikan sipembuat artikel tersebut, terlebihnya lagi setelah mereka mengkopi paste mereka tidak menyertakan url/link aslinya.

Melihat blogger seperti itu apa kalian kesal? Pastinya kesal, tapi dibalik semua itu pasti ada hikmahnya dan itu dapat dimungkinkan mereka tidak akan bertahan lama.

Nah, pada pembahasan kali ini saya akan mencoba membantu agar kalian terhindar dari pencurian artikel. Bagaimana caranya dan apakah bisa menangkal artikel kita agar tidak di Copy Paste? Insya'allah bisa, maka dari itu disini saya akan membahasnya secara detail dan mudah-mudahan bisa membantu kalian semua.

Apa Saja Yang Harus Dipersiapkan?

Tanpa berlama-lama lagi kita langsung saja ketopik pembahasan, bagaimana cara menangkal agar artikel kita tidak di Copy Paste, simak langkah demi langkahnya dibawah ini:

Cara Yang Pertama Adalah Dengan Mengandalkan CSS.

Langkah-langkahnya:
1.Seperti biasa, kalian masuk ke dashboard Blogger.
2.Kalian Click -> Tema -> Edit Html
3.Setelah itu kalian cari kode ]]></b:skin> atau </style>
4.Selanjutnya silahkan kalian copy paste kode css dibawah, dan letakan tepat berada diatas kode ]]></b:skin> atau </style>

.body{display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
unselectable:on;}
Pada script css diatas terlihat kode body yang artinya, itu akan bekerja untuk keseluruhan isi situs kalian agar tidak bisa diblock atau di copas. Namun, jika kalian hanya ingin halaman tertentu saja yang tidak bisa diblock, seperti halaman postingan artikel saja kalian bisa copy paste css berikut dan letakan diatas ]]></b:skin> atau </style>:

.post{display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
unselectable:on;}
Disetiap halaman postingan artikel tentunya kalian sudah tahu, didalamnya pasti terdapat kode blockquote. Dan bilamana kalian ingin blockquote ini bisa diblock, silahkan kalian copy paste css nya dibawah ini:

blockquote{display:block;
-khtml-user-select:text;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
-o-user-select:text;
user-select:none;
unselectable:off;}
Cara Yang Kedua Adalah Dengan Javascript.

Mas, bukanya kalau memakai javascript itu bisa di akali ya, contohnya dengan menonaktifkan setelan javascript pada browser mereka masing-masing? Memang bisa, tapi apa salahnya jika kita tetap mencoba dan memasang javascript ini pada blog kita demi menjaga keamanan agar terhindar dari pencurian artikel dari tangan-tangan jahil tersebut. Jika kalian tertarik, simak langkah-langkahnya berikut ini:

Sama seperti langkah diatas, Kalian cari kode </head> jika sudah ketemu, kalian kopi paste javascript dibawah ini tepat diatas kode </head> tersebut.

<script type="text/javascript"> function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
    target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
    target.style.MozUserSelect="none"
else //All other route (ie: Opera)
    target.onmousedown=function(){return false}
target.style.cursor = "default"
}
</script>
Atau bisa juga dengan javascript ini:

<script language="javascript">
      var message = "function disabled";
        function rtclickcheck(keyp){if (navigator.appName == "Netscape" && keyp.which == 3){alert(message); return false; }
          if (navigator.appVersion.indexOf("MSIE") != -1 && event.button ==2){alert(message); return false;}
      } document.onmousedown = rtclickcheck;
    </script>
Menurut kalian, manakah yang lebih bagus atau efektive dengan css atau javascript? Kalau menurut saya, akan lebih bagus lagi jika kalian gunakan keduanya, css dan javascript nya. Agar lebih paten guna menghindari pencurian artikel kalian.

Bila kalian merasa sudah cukup dengan semua persiapan diatas, silahkan kalian cek dan lihat hasilnya.

Demikianlah pembahasan kali ini tentang Tips dan cara agar artikel postingan blog tidak bisa di copy paste. Semoga artikel ini bermanfaat untuk semuanya, dan jangan lupa ikuti blog saya ini agar dapat update artikel terbaru dan menarik lainnya.

Akhir kata saya ucapkan, terimakasih.

Selengkapnya

Mengarahkan Lalu Lintas Organik Dengan Teknik SEO Terbaru

Tahukah kalian, bahwa algoritma google terus diperbarui dalam beberapa tahun terakhir sehingga strategi SEO juga berubah seiring jalan dengan pembaruan algoritma ini.


Nah maka dari itu disini saya akan coba sedikit membahasnya, bagaimana algoritma bekerja dan melindungi situs web atau blog agar terhindar dari pinalti Google.

Simak dan perhatikan baik-baik dibawah ini, beberapa pembaruan dalam algoritma google dan strategi SEO seperti:

Panda.
Pinguin.
Mobilegeddon.
EMD.
FRED.
HUMMINGBIRD.
BRAIN Google RANK.
Possum.
Pirate.

Sedikit Penjelasan:
  • Panda algoritma awalnya dirilis pada bulan februari 2011 yang berfungsi untuk menganalisis dan menghukum situs web yang memiliki konten Low Duplicate Small dan Thin Duplicate (disalin).
  • Pinguin algoritma diumumkan pada 24 april 2012 dan menghukum situs-situs yang memiliki tautan yang tidak relevan dan berisi spam (tautan balik).
  • Mobilegeddon dirilis pada 21 april 2015 dan peran utamanya adalah untuk kembali ke situs web yang tidak ramah seluler.
  • EMD (Exact Match Domain) menghukum situs web tersebut yang memiliki kata kunci utama pada domain mereka. Dengan algoritma ini, menjadi sulit untuk menentukan peringkat situs web dengan domainnya.
  • FRED bekerja dengan Iklan jika kalian memiliki situs web dan memasang banyak iklan di atas, bilah sisi kanan, dan di mana saja, maka itu akan menurunkan pengalaman pengguna, dan algoritma FRED ini menghukum situs web tersebut.
  • HUMMINGBIRD dirilis pada 20 agustus 2013 dan terutama difokuskan dengan pengalaman pengguna untuk memberikan informasi berkualitas tinggi sesuai dengan niat penggunanya. Algoritma ini mengelompokkan penjejalan kata kunci.
  • Dengan algoritma Hummingbird ini, konsep kata kunci Long Tail dimulai karena kata kunci Long Tail membantu untuk mengetahui tentang niat pengguna dengan jelas.
  • Rankbrain dirilis pada 26 oktober 2015, algoritma ini jauh lebih cerdas karena diimplementasikan dengan Machine Learning dan AI untuk menentukan hasil yang relevan dengan permintaan mesin pencari.
  • Algoritma possum dirilis pada 1 September 2016 yang menunjukkan hasil lokal menurut Lokasi IP pada perangkat kalian.
  • Pirate algoritma dirilis pada 12 agustus 2012 yang tidak begitu efisien karena mirip dengan Panda, memblokir halaman dengan konten duplikat dan menampilkan kesalahan DMC (Digital Millennium Copyright) di Google Search Console.

  • Untuk memulai semua strategi SEO efisien agar bekerja dan mengamankan situs web atau blog kalian dari pinalti dan meningkatkan lalu lintas, simak dibawah ini:

    Beberapa Teknik SEO untuk Meningkatkan Lalu Lintas Organik


    >> Optimasi Pencarian Suara.
    >> Gunakan Kata Kunci Long Tail.
    >> Jaga Pengguna Ponsel Kalian.
    >> Backlink Dengan Otoritas Tinggi.
    >> Menurunkan Tingkat Bouncing.
    >> Perbarui Ulang Tulisan Blog lama.
    >> Gunakan Google Search Console.

    - Optimasi Pencarian Suara

    Dalam beberapa kurun waktu terakhir, Google Search Engine menjadi lebih mudah digunakan dan Voice Search juga telah ditingkatkan. Sehingga itu akan menjadi sebuah tantangan bagi semua blogger dan pemasar digital untuk mengoptimalkan halaman web mereka sehubungan dengan pencarian suara Google.

    Dengan mengoptimalkan konten untuk penelusuran suara akan mengarahkan kalian untuk meningkatkan lalu lintas penelusuran organik ke situs atau blog kalian.

    kalian juga dapat melalui beberapa teknik mengoptimasikan pencarian suara untuk mengarahkan Lalu Lintas Organik menggunakan pencarian suara.
    Pastikan situs web kalian harus komplitable dengan https, agar lebih cepat memuat halaman web, dan optimalkan gambar untuk mengurangi kecepatan pemuatan.

    - Penggunaan kata kunci long tail terkait yang masuk akal

    Gunakan kata kunci long tail dengan algoritma HummingBird dan lepaskan semua penjejalan kata kunci (penggunaan kata kunci singkat di mana saja). Jadi kalian harus mulai menggunakan kata kunci long tail untuk meningkatkan Traffic Organik.

    Kata kunci long tail cenderung memiliki tingkat konversi yang lebih baik karena Google HummingBird Algoritma hanya menampilkan halaman web yang relevan yang sesuai dengan niat pengguna. Jadi, pengunjung kalian juga mendapatkan hasil berkualitas tinggi yang sebenarnya dan ini akan mengurangi tingkat bouncing.

    Fokus pada judul postingan dengan menambahkan Kata Kunci Long Tail dalam tag judul untuk mendapatkan lebih banyak lalu lintas penelusuran organik di postingan kalian.

    - Merawat Pengguna Seluler Kalian
    Algoritma mobilegeddon mengatakan bahwa sebuah situs web haruslah responsif terhadap pengguna seluler. Jika pengguna kalian merasa kesulitan untuk menjelajahi situs web kalian di perangkat seluler mereka, maka google akan mengeluarkan pinalti terhadap situs web kalian dan itu akan berpengaruh pada peringkat penelusuran situs web kalian.

    Mulai membuat situ web AMP (Accelerated Mobile Pages) yang mengarah untuk mempercepat kecepatan dan meningkatkan kinerja pada situs web tersebut.

    Kalian dapat menjadikan situs web lebih sesuai untuk ponsel dengan desain berikut:
    - Membuat navigasi menu yang tepat.
    - Tambahkan widget yang penting saja dan ubah kode situs web.
    - Gunakan bootstrap untuk membuat situs web yang ramah perangkat.
    - Backlink Dengan Otoritas Tinggi

    Mulai dengan membangun tautan dengan situs web yang kewenangannya lebih tinggi dan memiliki lalu lintas tinggi di dalamnya.

    Ingat bahwa "hanya satu backlink berkualitas tinggi yang efektif dari pada 1000 backlink tetapi kualitasnya rendah". Jadi mulailah dengan membuat sebuah tautan balik (backlink) otoritas tinggi untuk blog kalian, guna menyediakan sebuah rujukan atau arahan berkualitas yang akan meningkatkan lalu lintas blog organik.

    - Menurunkan Tingkat Bouncing

    Buat sebuah konten yang lebih menarik untuk menurunkan rasio pentalan. Menurut Rank Brain, jika pengguna di situs web tidak ada untuk waktu yang lama dan segera kembali maka peringkat situs web tersebut akan menurun. Dan jika kalian dapat menahan pengguna untuk waktu yang lebih lama di situs web kalian, maka google secara otomatis meningkatkan peringkat situs kalian pada SERP (Search Engine Result Page).

    Cara untuk mengurangi tingkat bouncing:

    - Tulis lebih banyak konten panjang (lebih dari 1000 kata).
    - Tuliskan dengan paragraf yang pendek.
    - Gunakan Infografis di blog-post.
    - Gunakan gambar yang menarik di Postingan.
    - Tambahkan sebuah video demi menahan pengunjung untuk lebih banyak waktu.
    - Mulai membuat tautan Internal.
    - Biarkan tautan internal kalian terbuka di tab baru.

    - Perbarui tulisan blog lama kalian, untuk meningkatkan lalu lintas hingga 60% keatas

    Saat kalian menulis postingan dan mempublikasikannya, kalian bisa mendapatkan lalu lintas yang baik tetapi setelah sekitar sebulan kalian tidak akan mendapatkan lalu lintas karena tidak ada orang yang terlibat dalam postingan lama tersebut.

    Sangat disarankan untuk kalian membuat beberapa perubahan seperti menambahkan paragraf baru, mengedit beberapa kalimat, menambahkan infografis dan memperbarui postingan lama dan membagikannya di media sosial seperti reddit dan yang lainnya. Setelah itu, maka barulah pengguna juga akan mulai terlibat di halaman ini dan google juga akan melihat keterlibatan tersebut.

    Dan yang terakhir adalah,

    - Google Search Console

    Google Search Console paling populer di kalangan blogger dan pakar SEO karena ini adalah salah satu alat webmaster gratis.

    Kalian dapat menganalisis seluruh situs web dan halaman web, mencari tahu kesalahan yang mungkin terjadi selama perayapan dan pengindeksan dan sumber daya yang diblokir. Kalian juga dapat memecahkan kesalahan tersebut dan meningkatkan kinerja situs web kalian. Seperti, kalian dapat mengetahui sumber lalu lintas, rasio pentalan, dan tayangan total situs web kalian.

    Itulah cara sederhana Mengarahkan Lalu Lintas Organik Dengan Teknik SEO.

    Mungkin cukup sekian untuk pembahasan kali ini, sedikit kurangnya mudah-mudahan bisa bermanfaat untuk kalian, terutama para pemula seperti saya.

    Akhir kata saya ucapkan, terimakasih.

    Selengkapnya

    Tips Seo: Cara Optimasi Seo On Page (Terbaru) Di Website & Blog

    Cara Optimasi Seo On Page

    Search Engine Optimization (SEO) adalah trik dan praktikum untuk meningkatkan keterlihatan (visibilitas) situs di Internet agar menarik sumber lalu lintas organik yang dapat mempengaruhi posisi peringkat situs web di SERP (Halaman Hasil Mesin Pencari).

    Pada pembahasan sebelumnya, saya sudah menjelaskan tentang Teknik Dan Cara Optimasi SEO Off-Page. Namun untuk pembahasan kali ini adalah kebalikan dari pembahasan sebelumnya.

    Apa Itu SEO On-Page Dan Bagaimana Cara Kerjanya?

    SEO On-Page Atau (SEO On-Site): Dalam arti yang lebih sederhana, SEO On-Page adalah teknik SEO yang dilakukan di situs web atau halaman web kalian. SEO On-Page yang berarti mengoptimalkan seluruh situs / blog yang juga dapat menyesuaikan struktur permalink, menggunakan kata kunci, meta tag optimization, dan internal link building.

    Mengapa SEO On-Page perlu dibutuhkan? Jelas sangat dibutuhkan terutama dalam algoritma mesin pencari, karena berguna untuk menemukan berbagai faktor dalam postingan atau konten kalian dan untuk mengoptimalisasi halaman agar dapat membantu pengunjung dan perayapan google memahami dengan lebih baik isi dari situs web kalian.

    Apa saja poin utama yang perlu dipertimbangkan untuk SEO On-Page?

    1. Penghubungan Internal Atau Tautan Internal

    Tautan Internal adalah sistem pengacu yang berpindah dari satu halaman ke halaman lain di situs web yang sama. Ketika seorang pengunjung mengunjungi satu postingan blog kalian, maka mereka akan tetap terhubung ke situs web kalian.

    Jadi tautan internal ini sangat membantu untuk mengurangi tingkat pentalan, dengan membuatnya tetap lebih lama berada di situs web kalian. Dan bisa Juga disebut sebagai anchor text atau hyperlink yang menghubungkan konten dari satu halaman ke halaman lain dalam sebuah situs web.

    Apa saja poin penting untuk menghubungkan tautan internal?
    Simak berikut dibawah ini:

  • Sertakan hingga 2-3 tautan internal untuk konten rata-rata 500 kata.
  • Buka jendela baru untuk tautan internal sehingga halaman awal akan tetap terbuka dan pengguna kalian dapat menilai secara komparatif.

  • Contoh Sintax: <a href="http://newpage.com/new-page.html">NewPage</a>


    2. Pemilihan Tema atau Template

    Pemilihan tema adalah titik kunci utama untuk dipertimbangkan karena Google hanya memilih halaman web yang berjalan lebih cepat dan relevan. Jadi, disini kalian hanya harus memilih tema yang ringan, sehingga kecepatan pemuatan situs kalian menjadi lebih sedikit dan itu akan mudah dimuat.

    Catatan:

    Jika kalian memilih tema dengan animasi flash atau lebih banyak gambar, maka itu akan lebih banyak memakan waktu untuk pemuatan situs kalian dan itu akan berdampak menjengkelkan bagi pemirsa kalian.

    3. Judul situs

    Tambahkan sebuah judul baru dan unik atau kalian dapat menempatkan judul tersebut sesuai dengan kata kunci utama untuk situs kalian. Selanjutnya, carilah konsep yang sesuai dengan situs kalian di Google Trends dan temukan topik apa yang terbaru yang memiliki tren tertinggi di Google.

    Sebagian besar orang mencari di Google menggunakan kata-kata seperti "terbaik", "terbaru", "panduan", "ulasan", "daftar". Semua kata ini disebut sebagai pengubah. Dengan menggunakan pengubah ini untuk judul artikel kalian, kalian bisa dengan mudah mendapatkan kata kunci yang kalian inginkan.

    4. Analisis dan Penempatan Kata Kunci

    Semua pertanyaan yang digunakan saat mencari sesuatu di mesin pencarian, itu disebut sebagai Kata Kunci. Kata kunci akan membantu meningkatkan posisi peringkat situs web di Google dan memberikan lalu lintas organik terbaik.

    Tingkat kepadatan kata kunci harus sekitar 1,5% dari total konten. Kata kunci harus digunakan dalam Tag Judul, Tajuk, Deskripsi Meta, Meta Keyword dan juga dalam Konten.

    Dalam analisis kata kunci ini dapat dipertimbangkan sebagai berikut:

    • kata kunci manakah yang akan kita gunakan di situs kita?
    • bagaimana kita dapat mempromosikan situs kita dari beberapa jenis kata kunci?
    • Berlatih SEO untuk mendapatkan kata kunci sedemikian rupa sehingga situs web kita akan mendapatkan peringkat teratas.

    Untuk mendapatkan hasil cepat, kalian dapat menjatuhkan kata kunci bertargetkan dalam 100 kata pertama.
    Jadi kalian dapat menganalisis kata kunci kalian sendiri dengan menggunakan alat pemeriksa SEO on-page paling populer: Keyword Tool.

    5. Optimasi Tag

    Saat mesin pencari merayapi dan mengindeks tag tersebut, namun besar kemungkinan memang akan dirayapi akan tetapi, tag tidak akan ditampilkan kepada pengguna. Jadi, jika kalian ingin mendapatkan peringkat dimesin pencari maka kalian harus mempertimbangkan terlebih dahulu Tag HTML tersebut. Dan lebih mengoptimalkannya lagi termasuk, Tag Judul Meta, Deskripsi Meta, Tag Kata Kunci Meta.

    Meta Tag ini tidak akan terlihat oleh pengguna tetapi tag ini hanya dapat dilihat oleh Google bot, dengan bantuan Meta Tag, Google bot juga dapat memberikan informasi yang terletak di dalam konten blog tersebut.

    6. Robots.txt

    Robots.txt adalah teks yang memberi tahu mesin pencari bahwa "halaman mana yang harus dirayapi dan mana yang tidak harus dijelajahi".

    Contoh Robots.txt:

    Agen-pengguna: Mitra media-Google (Nama bot)
    Disallow: (ini kosong dan itu berarti bahwa bot dapat merangkak dan mengindeks halaman mana pun dari situs ini)
    User-agent: * (artinya ini untuk semua agen)
    Izinkan: / cari
    Sitemap: https://code-tempo.blogspot.com/sitemap.xml (untuk dikirimkan ke alat webmaster)

    7. Meningkatkan Konten

    Dalam optimasi mesin pencari, konten dikenal sebagai Raja untuk mengoptimalkan situs web pada Halaman Hasil Mesin Pencari (SERP).

    Terlebih itu, pengunjung akan datang ke situs kalian dan terlibat untuk waktu yang lama jika konten itu mudah dimengerti dan tanpa kesalahan ejaan terlebih lagi konten kalian memberikan informasi yang diperlukan kepada para pengunjung.

    Jadi kesimpulannya, Mesin Pencari akan mulai merangkak dan mengindeks halaman-halaman tertentu yang memiliki konten Berkualitas Tinggi.

    Oleh karena itu, mulailah membuat konten atau artikel yang berkualitas tinggi yang mudah dibaca oleh pengguna. Dan dapatkan lebih banyak umpan balik dari pengunjung kalian, untuk meningkatkan keterampilan kalian dalam menulis konten.

    8. Optimalisasi Gambar

    Optimalkan semua gambar yang disertakan pada halaman kalian, untuk mendapatkan lalu lintas dari gambar tersebut. Dan jangan lupa untuk menambahkan "Alt Teks" pada setiap gambar dan sertakan kata kunci bertarget di dalamnya.

    Ingat! Jangan sertakan gambar yang dikenakan hak cipta di dalam halaman, karena Google dapat menghukum situs web kalian.

    Dan yang terakhir adalah,

    9. Tambahkan Tombol Berbagi (Sosial Media)

    Tombol berbagi ke media sosial mungkin tidak benar-benar berfungsi untuk meningkatkan peringkat situs kalian, tetapi berfungsi untuk meningkatkan tampilan halaman dan lalu lintas media sosial dan mengekspos bisnis kalian di Media Sosial, terlebih lagi itu akan meningkatkan pengikut media sosial kalian.

    Nah, Itulah Sepenggal pembahasan kali ini, tentang Cara Optimasi SEO On Page (Terbaru) Di Website & Blog. Mungkin saya rasa cukup, semoga bermanfaat untuk semuannya, apabila dalam penulisan kata ada sebuah kesalahan mohon dimaafkan.
    Terimakasih.

    Selengkapnya