[Tutorial] Membuat Menu Navigasi Html Keren Dengan Efek Modal

Pada pembahasan yang lalu saya sudah memberi tutorial tentang cara membuat responsive layout dengan efek transition yang bisa dibilang cukup keren. Namun untuk tutorial kali ini saya akan mencoba kembali memberikan langkah untuk membuat menu navigasi HTML keren, ditaburi dengan efek animasi yang membuatnya menjadi lebih terlihat modern.

Tutorial Membuat Menu Navigasi Html Keren Dengan Efek Bounce

Jika sobat ingin memasangnya di blog atau di website, sobat bisa ikuti langkah pembuatanya dibawah. Namun sebelumnya, perlu sobat ketahui disini kita juga memakai javascript untuk menjalankan efek tersebut. Lalu bagaimana cara pembuatannya?

Baca Juga: 7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3

Sebelum lanjut ke langkah pembuatan menu navigasinya, disini kita memerlukan:

1. HTML
2. CSS
3. JAVASCRIPT
4. JQUERY


OKE, mungkin kita langsung saja. Untuk yang pertama disini kita coba buat file HTML nya, seperti contoh berikut:

<!doctype html>
<html lang="en" class="no-js">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>

 <link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
 <link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
 <script src="js/modernizr.js"></script> <!-- Modernizr -->
   
 <title>Menu Navigasi | Seo Techman</title>
</head>
<body>
<header>
 <h1>Bouncy Navigation</h1> 
</header>

<section class="cd-section">
 <a class="cd-bouncy-nav-trigger" href="#0">Browse categories</a>
</section> <!-- .cd-section -->

<div class="cd-bouncy-nav-modal">
 <nav>
  <ul class="cd-bouncy-nav">
   <li><a href="#0">Category 1</a></li>
   <li><a href="#0">Category 2</a></li>
   <li><a href="#0">Category 3</a></li>
   <li><a href="#0">Category 4</a></li>
   <li><a href="#0">Category 5</a></li>
   <li><a href="#0">Category 6</a></li>
  </ul>
 </nav>
 
 <a href="#0" class="cd-close">Close modal</a>
</div> <!-- cd-bouncy-nav-modal -->
 
<script src="js/jquery-2.1.1.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
Jika sudah, jangan lupa beri nama index.html lalu simpan. Dan yang kedua adalah kita buat CSS nya, lihat kode nya di link berikut:

Live Css

Setelah itu sobat copas Css nya, dan masukan ke dalam style.css kemudian simpan. Langkah selanjutnya, kita buat file lagi dan beri nama main.js, sobat bisa lihat contoh berikut ini:

jQuery(document).ready(function($){
 var is_bouncy_nav_animating = false;
 //open bouncy navigation
 $('.cd-bouncy-nav-trigger').on('click', function(){
  triggerBouncyNav(true);
 });
 //close bouncy navigation
 $('.cd-bouncy-nav-modal .cd-close').on('click', function(){
  triggerBouncyNav(false);
 });
 $('.cd-bouncy-nav-modal').on('click', function(event){
  if($(event.target).is('.cd-bouncy-nav-modal')) {
   triggerBouncyNav(false);
  }
 });

 function triggerBouncyNav($bool) {
  //check if no nav animation is ongoing
  if( !is_bouncy_nav_animating) {
   is_bouncy_nav_animating = true;
   
   //toggle list items animation
   $('.cd-bouncy-nav-modal').toggleClass('fade-in', $bool).toggleClass('fade-out', !$bool).find('li:last-child').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
    $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
    if(!$bool) $('.cd-bouncy-nav-modal').removeClass('fade-out');
    is_bouncy_nav_animating = false;
   });
   
   //check if CSS animations are supported... 
   if($('.cd-bouncy-nav-trigger').parents('.no-csstransitions').length > 0 ) {
    $('.cd-bouncy-nav-modal').toggleClass('is-visible', $bool);
    is_bouncy_nav_animating = false;
   }
  }
 }
});
Disini kita juga memerlukan javascript modernizr.js dan jquery-2.1.1.js sobat bisa mencarinya di Google. Untuk langkah berikut nya, apabila sobat sudah mendownload kedua file tersebut. Sobat letakan modernizr.js di atas </head>, sedangkan main.js dan jquery-2 letakan di atas </body>.

Lalu sobat simpan dan setelah itu silahkan dilihat seperti apa hasilnya. Untuk icon nya, sobat bisa menggunakan icon apa saja sesuai dengan selera. Entah itu fontawesome atau yang lainnya.

Dan...untuk live demo nya, bisa dilihat melalui link dibawah ini:

Live Demo

Nah, bagaimana menurut sobat, cukup keren bukan? Silahkan praktekan sendiri dan selamat mencobanya.

Mungkin saya rasa cukup untuk pembahasan hari ini tentang, Tutorial Membuat Menu Navigasi Html Keren Dengan Efek Modal. Dan akhir kata saya ucapkan terimakasih.

Selengkapnya

[TIPS] Membuat Rencana Permainan SEO Terbaru Foolproof 2019

Tips Membuat Rencana Permainan SEO Terbaru Foolproof 2019 - Jika Anda siap untuk meningkatkan lalu lintas situs web Anda menggunakan strategi SEO, Anda akan memerlukan rencana. Teruslah membaca untuk menemukan cara membuat rencana permainan SEO yang sangat mudah. Tahukah Anda bahwa, antara kisaran 70% dan 80% pengguna web sepenuhnya mengabaikan iklan berbayar di bagian atas hasil pencarian. Itu berarti bahwa jika Anda berharap untuk meningkatkan lalu lintas web Anda, penting agar Anda mendapat peringkat tinggi dalam hasil pencarian organik.

Tips Membuat Rencana Permainan Seo Terbaru FoolProof 2019

Untuk mendapat peringkat tinggi dalam hasil pencarian, Anda memerlukan rencana permainan SEO yang kuat. Kebanyakan pemilik bisnis tahu apa itu SEO, dan memahami bagaimana hal itu dapat membuat bisnis mereka sukses. Tetapi mereka tidak mengerti bagaimana mengembangkan strategi yang baik.

Berikut adalah beberapa cara agar Anda dapat membuat rencana yang solid di 2019.

Kenali Audiens Anda Seluruh tujuan di balik optimasi mesin pencari adalah untuk peringkat tinggi di mesin pencari yang akan mengarahkan lalu lintas ke situs web Anda. Tapi itu tidak berarti banyak situs web Anda berperingkat tinggi di depan audiens yang tidak tertarik.

Langkah pertama adalah mengidentifikasi audiens target Anda. Salah satu cara untuk melakukan ini adalah melalui penciptaan personas pembeli. Ini adalah saat Anda membuat representasi pelanggan ideal Anda sehingga semua konten, salin, dan iklan dapat ditargetkan khusus untuk mereka.

Ini berarti menggali lebih dalam tentang siapa pelanggan Anda sebenarnya. Beberapa hal yang perlu Anda ketahui antara lain:

Ciri-ciri kepribadian kunci

Demografi (kisaran pendapatan, lingkungan, pria / wanita, usia dll.)

Perjalanan pembeli yang khas

Tujuan bersama

Dan Anda dapat menemukan informasi ini dalam berbagai cara berbeda, termasuk:

• Mempertanyakan pelanggan Anda saat ini

• Bertemu dengan tim penjualan, pemasaran, dan layanan pelanggan

• Menggunakan Google Analytics

• Melaksanakan penelitian media sosial

Membuat persona pembeli memungkinkan Anda untuk memikirkan pesan pemasaran Anda, dan memahami strategi SEO mana yang akan menjangkau mereka.

Penelitian Kata Kunci Lengkap


Setelah Anda tahu siapa yang Anda targetkan, Anda perlu melakukan penelitian kata kunci. Memilih kata kunci apa yang akan ditargetkan dapat membuat atau menghancurkan rencana permainan SEO Anda.

Putuskan setiap kategori kata kunci berdasarkan persona pembeli Anda dan pengelompokan situs web Anda. Setelah Anda mendapatkan daftar kata kunci ini, Anda dapat menggunakan Google Keyword Planner untuk meneliti setiap kata kunci dan memberi peringkat berdasarkan estimasi volume pencarian bulanan.

Struktur Situs Dan SEO On-Page


Google harus dapat memahami apa itu situs web perusahaan Anda, dan optimasi SEO On-Page pada halaman sangatlah penting. Untuk itu hal pertama yang perlu Anda lakukan adalah memastikan bahwa Google dapat menjelajah situs Anda secara efisien, sehingga dapat melihat semua konten Anda.

Ini berarti mengatur situs Anda dengan navigasi intuitif, tautan internal yang hebat, konten unik, waktu buka halaman yang cepat, dan tanpa tautan yang terputus.

Disini Anda juga dapat menggunakan kata kunci untuk mengoptimalkan konten Anda. Anda dapat membuat halaman spesifik di sekitar kata kunci yang berbeda atau anda juga bisa membuat Long Tail Keywords sebagai pilihan terbaik, dan ini akan menunjukkan kepada Google tentang setiap halaman.

Namun, penting bahwa Anda menghindari isian kata kunci. Tulis konten Anda seperti yang biasa Anda tulis, ingat kata kunci yang Anda pilih saat menulis.

Pemasaran Konten


Konten harus menjadi salah satu pilar utama dari rencana permainan SEO Anda. Kunci konten tidak hanya untuk menerapkan kata kunci, tetapi juga membantu memandu pelanggan Anda melalui saluran pemasaran Anda.

Konten juga membantu Anda mendapatkan daya tarik di saluran media sosial Anda, peringkat yang baik di mesin pencari, dan mengomunikasikan merek Anda ke dunia.

Konten Anda perlu di tegakkan dengan istilah, nada dan suara pada merek Anda di semua saluran sambil menciptakan strategi khusus untuk meningkatkan keterlibatan dan meningkatkan konversi.

Beberapa opsi untuk konten meliputi:

Blog

Email

Ebooks

Kertas putih

Salinan produk

Video

Infografis

Podcast

Blogging, khususnya, adalah cara terbaik untuk memasukkan kata kunci Anda dan terlibat dengan pengunjung. Setiap posting blog adalah kesempatan lain untuk menentukan peringkat di Google. Namun, penting untuk diingat bahwa membuat konten adalah tentang menghubungkan dengan audiens Anda, dan bukan mesin pencari.

Tulis tentang hal-hal yang diminati prospek dan / atau audiens Anda, gunakan kata kunci yang relevan, dan Anda akan mulai meningkatkan pengunjung Anda secara organik dan naik peringkat.

Pembuatan tautan adalah faktor besar dalam bagaimana peringkat halaman web Anda di mesin pencari. Membangun tautan resmi dari situs web tepercaya dan relevan mendorong lalu lintas rujukan, meningkatkan peringkat, dan meningkatkan visibilitas merek Anda secara online.

Tautan selalu menjadi salah satu sinyal peringkat paling kuat dalam algoritme Google. Mereka menentukan kredibilitas dan popularitas situs.

Sumber daya seperti layanan SEO terkelola Squawika adalah pilihan yang sangat baik untuk membangun tautan, tetapi Anda juga harus berupaya membangun tautan yang akan menggerakkan jarum. Salah satu cara untuk melakukan ini adalah melalui posting tamu.

Ini tidak hanya membantu Anda mendapatkan tautan yang tepercaya dan relevan, tetapi Anda dapat memperluas jangkauan dan memanfaatkan pemirsa baru di mana Anda mungkin tidak dikenal.

Lacak dan Ukur Kesuksesan Anda SEO membutuhkan banyak waktu dan usaha. Tidak ada gunanya membuat rencana permainan SEO jika Anda tidak dapat melihat hasilnya.

Ada banyak metrik yang dapat Anda lacak setiap bulan, mingguan, atau bahkan setiap hari. Ini akan membantu Anda menjaga rencana Anda di jalur sehingga Anda dapat dengan mudah mengukur kesuksesan Anda (atau kurang sukses) dan menyesuaikan rencana Anda sesuai.

Gunakan paket analisis web atau spreadsheet Excel untuk memantau berapa banyak lalu lintas yang Anda peroleh ke situs Anda dari pencarian organik. Anda juga harus melacak prospek, kata kunci, halaman yang diindeks, ROI, dan peringkat Anda untuk setiap kata kunci pada SERP. Ini memudahkan Anda untuk melihat apa yang berfungsi dan mengidentifikasi peluang baru.

Bagaimana, Sudah Siap Untuk Membuat Rencana permainan SEO Anda? Langkah-langkah di atas akan membantu Anda membuat rencana permainan SEO strategis yang akan membantu Anda naik peringkat. Dan ini akan memastikan Anda memiliki lebih banyak pengunjung situs web, yang akan mengarah pada peningkatan konversi dan keuntungan.

Dengan mengetahui audiens Anda, dan memilih kata kunci yang tepat, untuk mengembangkan konten yang bermanfaat dan membuat strategi penautan yang cerdas, Anda akan melihat peningkatan peringkat pencarian hanya dalam beberapa bulan.

Demikianlah tips SEO kali ini, semoga Anda menikmati artikel yang kami suguhkan dan dapat bermanfaat. Jangan lupa untuk Subscribe blog ini agar update di artikel terbaru lain nantinnya (GRATIS tidak bayar :D ).

Terimakasih.

Selengkapnya

[Tutorial] Cara Membuat Responsive Layout Dengan Efek Transition Pure Css

Tutorial untuk kali ini yaitu, tentang cara membuat Responsive Layout dengan Transition yang smooth. Dengan menggunakan navigasi button radio dan kombinasi yang akan memicu transisi ke panel konten masing-masing, dan menciptakan efek tersebut. Dan kita akan membuat tata letak lebar / tinggi 100% responsif dengan beberapa transisi halaman yang smooth. Idenya adalah untuk memiliki beberapa panel konten dan navigasi yang akan memungkinkan kita untuk menavigasi antar panel.

[Tutorial] Cara Membuat Responsive Layout Dengan Efek Transition Pure Css

Disini kita akan menggunakan button radio untuk navigasi dan menghidupkan konten ke posisi yang tepat dengan transisi, menciptakan efek "Scrolling Smooth". Gagasan tata letak ini bisa berguna untuk halaman web atau aplikasi web di mana konten harus benar-benar seukuran layar (lebar dan tinggi). Perhatikan bahwa ini tentu saja sangat eksperimental dan hanya merupakan bukti konsep.

Markup


Struktur akan terdiri dari, Container utama dengan class st-container yang akan berisi tombol dan tautan radio, dan Wrapper harus diberi class st-scroll untuk panelnya. Dan setiap panel ini akan memiliki beberapa elemen konten.

Berikut dibawah ini contoh markupnya:

<div class="st-container">
   
 <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
 <a href="#st-panel-1">Serendipity</a>
 
 <input type="radio" name="radio-set" id="st-control-2"/>
 <a href="#st-panel-2">Happiness</a>
 
 <input type="radio" name="radio-set" id="st-control-3"/>
 <a href="#st-panel-3">Tranquillity</a>
 
 <input type="radio" name="radio-set" id="st-control-4"/>
 <a href="#st-panel-4">Positivity</a>
 
 <input type="radio" name="radio-set" id="st-control-5"/>
 <a href="#st-panel-5">Passion</a>
 
 <div class="st-scroll">

  <section class="st-panel" id="st-panel-1">
   <div class="st-deco" data-icon="H"></div>
   <h2>Serendipity</h2>
   <p>Banksy adipisicing eiusmod banh mi sed...</p>
  </section>
  
  <section class="st-panel st-color" id="st-panel-2">
   <!-- ... -->
  </section>
  
  <!-- ... st-panel-3, st-panel-4, st-panel-5 -->

 </div><!-- // st-scroll -->
 
</div><!-- // st-container -->
Pada dasarnya, memindahkan Wrapper panel dengan mengubah nilai teratas dan membawa masing-masing panel ke dalam viewport, ini bisa kita lakukan dengan memilih button radio st-scroll, dengan kombinasi dan target panel yang benar di dalamnya. Karena teknik ini, kita perlu menjaga button radio di tingkat yang sama seperti st-scroll di atas tautan (mereka tidak akan terlihat, karena kita akan memberi mereka 0 opacity). Untuk dapat memilih panel yang benar, disini kita akan memberikan ID dan button radio.

Perlu kalian ketahui, tautan ini memiliki nilai href dari ID panel, jadi kita hanya akan menyembunyikan button radio nya dan membuat tautan yang dapat diklik yang akan memungkinkan untuk "beralih" ke panel kanan.

CSS/Style


Sekarang, bagaimana kita membuat tata letak ini menjadi fleksibel dan panelnya sama persis dengan ukuran layar? Caranya adalah dengan membuat sebuah Container utama yang mutlak, dengan lebar dan tinggi 100% saat mengatur Panel dan Wrapper ke posisi yang lebih relatif. Dengan lebar dan tinggi 100% dan membuat setiap panel menjadi sama persis dengan ukuran layar (karena adanya Container utama dan Wrapper panel).

Karena disini kita akan melakukan navigasi konten dengan menghidupkan wrapper panel, jadi kita hanya perlu mengatur body overflow menjadi tersembunyi:

body {
     overflow: hidden;
}
Dan dibawah ini Css untuk Container utama:

.st-container {
 position: absolute;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}
Setelah itu, letakkan "navigasi" di bagian bawah halaman dengan memberinya posisi tetap (Position:fixed). Perhatikan, jika kita ingin mengatur lebar dan tinggi yang sama untuk input dan tautan. Idenya adalah buat overlay button radio pada elemen tautan sehingga dapat diklik, dan beri nilai 0 opacity agar tidak terlihat. Karena itu penting juga untuk mengatur z-indeks pada button radio.

Seperti contoh Css berikut ini:

.st-container > input,
.st-container > a {
 position: fixed;
 bottom: 0px;
 width: 20%;
 cursor: pointer;
 font-size: 16px;
 height: 34px;
 line-height: 34px;
}

.st-container > input {
 opacity: 0;
 z-index: 1000;
}

.st-container > a {
 z-index: 10;
 font-weight: 700;
 background: #e23a6e;
 color: #fff;
 text-align: center;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
Karena disini kita menggunakan persentase untuk menyebarkan tautan dan input di lebar layar, tapi mungkin ini akan sedikit mengalami masalah pembulatan yang akan membuat beberapa celah muncul. Tapi, untuk menyembunyikannya, gunakan elemen pseudo yang ada di bawah tautan dan input. Karena ini akan memiliki warna latar belakang yang sama seperti elemen tautan:

container:before {
 content: '';
 position: fixed;
 width: 100%;
 height: 34px;
 background: #e23a6e;
 z-index: 9;
 bottom: 0;
}
Contoh Css diatas masih belum diposisikan, artinya masih belum lengkap. Dan untuk memaksimalkannya, lihat berikut:

#st-control-1, #st-control-1 + a {
 left: 0;
}

#st-control-2, #st-control-2 + a {
 left: 20%;
}

#st-control-3, #st-control-3 + a {
 left: 40%;
}

#st-control-4, #st-control-4 + a {
 left: 60%;
}

#st-control-5, #st-control-5 + a {
 left: 80%;
}
Dengan menggunakan prinsip yang sama, kita akan menetapkan status "selected" untuk elemen tautan. Setelah itu, kita akan memberi warna latar belakang elemen tautan:

Css nya seperti berikut:

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
 background: #821134;
}
Jika dirasa sudah, jangan lupa untuk menambahkan little triangel (segitiga kecil) menggunakan pseudo-class: after dan beri warna yang sama:

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
 bottom: 100%;
 border: solid transparent;
 content: '';
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-bottom-color: #821134;
 border-width: 20px;
 left: 50%;
 margin-left: -20px;
}
Kalian dapat melihat CSS Arrow tersebut Disini, itupun jika kalian ingin cara cepat untuk membuat arrow tersebut.

Dan mari kita lanjutkan untuk menentukan status hover untuk elemen tautan:

.st-container > input:hover + a{
 background: #AD244F;
}

.st-container > input:hover + a:after {
 border-bottom-color: #AD244F;
}
Wrapper untuk panel dan panel akan memiliki posisi relatif dengan memberinya lebar dan tinggi 100%. Panel wrapper juga akan mendapatkan posisi atas dan kiri 0 sementara itu, kita tidak perlu memberi nilai untuk panelnya (karena itu sudah otomatis).

Dan transisi itu akan menganimasikan nilai properti transformasi ke posisi masing-masing:

.st-scroll,
.st-panel {
 position: relative;
 width: 100%;
 height: 100%;
}

.st-scroll {
 top: 0;
 left: 0;
 transition: all 0.6s ease-in-out;
 
 -webkit-transform: translate3d(0, 0, 0);
 -webkit-backface-visibility: hidden;
}

.st-panel{
 background: #fff;
 overflow: hidden;
} 
Selanjutnya, mari kita tentukan posisi wrapper st-scroll untuk setiap button radio yang dicentang. Karena kita tahu bahwa setiap panel memiliki ketinggian 100%, kita tahu posisi yang tepat. Maka dari itu, disini kita akan menggunakan properti transform untuk menerjemahkan wrapper panel dalam dimensi Y (atas dan ke bawah):

#st-control-1:checked ~ .st-scroll {
 transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
 transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
 transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
 transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
 transform: translateY(-400%);
}
Sekarang, mari kita beri style pada elemen konten. Untuk segitiga atas dengan ikon, kita cukup memutar dan menerjemahkan divisi st-deco. Kita akan memposisikannya di tengah atas layar dengan mengatur bagian atas ke 0 dan ke kiri menjadi 50% sambil memberikan margin kiri minus setengah dari lebar itu. Menerjemahkannya -50% akan membuat setengah dari kotak yang muncul sehingga menciptakan sebuah segitiga:

.st-deco{
 width: 200px;
 height: 200px;
 position: absolute;
 top: 0px;
 left: 50%;
 margin-left: -100px;
 background: #fa96b5;
 transform: translateY(-50%) rotate(45deg);
}
Untuk ikon kita akan menggunakan Raphaël Icon-Set via @font-face dan teknik data-atribut / pseudo-class. Konten elemen pseudo: after akan menjadi nilai ikon data yang telah kita tetapkan dalam HTML untuk elemen itu. Perhatikan, bahwa kita perlu memutarnya kembali ke arah yang berlawanan dari elemen induk untuk mengembalikannya ke "normal":

[data-icon]:after {
    content: attr(data-icon);
    font-family: 'RaphaelIcons';
    color: #fff;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 position: absolute;
 width: 200px;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 90px;
 top: 50%;
 left: 50%;
 margin: -100px 0 0 -100px;
 transform: rotate(-45deg) translateY(25%);
}
Judul akan ditempatkan di tengah layar dengan margin atas negatif untuk "menariknya" sedikit:

.st-panel h2 {
 color: #e23a6e;
 text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
 position: absolute;
 font-size: 54px;
 font-weight: 900;
 width: 80%;
 left: 10%;
 text-align: center;
 line-height: 50px;
 margin: -70px 0 0 0;
 padding: 0;
 top: 50%;
 -webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
 animation: moveDown 0.6s ease-in-out 0.2s backwards;
}

@keyframes moveDown{
 0% { 
  transform: translateY(-40px); 
  opacity: 0;
 }
 100% { 
  transform: translateY(0px);  
  opacity: 1;
 }
}
Paragraf akan memiliki gaya seperti berikut:

.st-panel p {
 position: absolute;
 text-align: center;
 font-size: 16px;
 line-height: 22px;
 color: #8b8b8b;
 z-index: 2;
 padding: 0;
 width: 50%;
 left: 25%;
 top: 50%;
 margin: 10px 0 0 0;
 -webkit-backface-visibility: hidden;
}
Sementara tajuk panel akan turun, dan paragraf akan naik:

#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
 animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@keyframes moveUp{
 0% { 
  transform: translateY(40px); 
  opacity: 0;
 }
 100% { 
  transform: translateY(0px);  
  opacity: 1;
 }
}
Untuk membuat tata letak, kita perlu menambahkan class warna dan "membalikkan" warna untuk panel tersebut dan elemen kontennya:

/* Colored sections */

.st-color,
.st-deco{
 background: #fa96b5;
}
.st-color [data-icon]:after {
 color: #fa96b5;
}
.st-color .st-deco {
 background: #fff;
}
.st-color h2 {
 color: #fff;
 text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 
.st-color p {
 color: rgba(255,255,255,0.8);
}
Terakhir, namun tidak kalah pentingnya, kita akan menambahkan beberapa media query untuk mengontrol posisi dan ukuran font elemen untuk layar yang lebih kecil

@media screen and (max-width: 520px) {
 .st-panel h2 {
  font-size: 42px;
 }
 
 .st-panel p {
  width: 90%;
  left: 5%;
  margin-top: 0;
 }
 
 .st-container > a {
  font-size: 13px;
 }
}

@media screen and (max-width: 360px) {
 .st-container > a {
  font-size: 10px;
 }
 
 .st-deco{
  width: 120px;
  height: 120px;
  margin-left: -60px;
 }
 
 [data-icon]:after {
  font-size: 60px;
  transform: rotate(-45deg) translateY(15%);
 }
}
Mungkin untuk browser lama yang tidak mendukung beberapa penyeleksi, dan jika ingin kembali ke "target jump" klasik. Kita bisa melakukannya dengan mengubah beberapa style (simple.css). Secara khusus, disini kita perlu mengatur overflow body nya menjadi "otomatis" dan menyembunyikan input, dengan membuat elemen tautan yang dapat diklik (karena mereka memiliki ID panel masing-masing):

body {
 overflow: auto;
}
.st-container > input{
 display: none;
}
Untuk demo nya silahkan klik dibawah ini:

Live Demo

Nah, Demikianlah Tutorial Cara Membuat Responsive Layout Dengan Smooth Transiton Pure Css. Saya harap Anda menikmati tutorial ini dan menginspirasi!

Akhir kata saya ucapkan, terimakasih

Selengkapnya

Pengertian Dan Kegunaan Bootstrap Menurut Para Ahli

Apa itu Bootstrap?

Menurut para ahli mengatakan bahwa, Bootstrap adalah kerangka kerja front-end gratis untuk pengembangan web yang lebih cepat dan mudah. Bootstrap mencakup template desain berbasis HTML dan CSS untuk tipografi, bentuk, tombol, tabel, navigasi, modals, korsel gambar dan banyak lainnya, serta plugin JavaScript opsional. Bootstrap juga memberikan sobat kemampuan untuk membuat desain responsif dengan mudah.

Pengertian Dan Kegunaan Bootstrap Menurut Para Ahli

Apa itu Desain Web Responsif?

Desain web responsif adalah perihal yang terkait tentang membuat situs web yang secara otomatis menyesuaikan diri agar terlihat bagus di semua perangkat, dari ponsel kecil hingga desktop besar.

Bootstrap sendiri dikembangkan oleh Mark Otto dan Jacob Thornton di Twitter, dan dirilis sebagai produk open source pada Agustus 2011 di GitHub dan pada bulan Juni 2014 Bootstrap adalah proyek No.1 di GitHub!

Nah, apa saja keuntungan jika menggunakan Bootstrap?

Mudah digunakan dan siapa saja yang memiliki pengetahuan dasar tentang HTML dan CSS dapat mulai menggunakan Bootstrap. Salah satu fitur responsif pada Bootstrap adalah,dapat menyesuaikan dengan ponsel, tablet, dan desktop.

Dalam Bootstrap 3, gaya seluler pertama adalah bagian dari kerangka inti Kompatibilitas browser: Bootstrap kompatibel dengan semua browser modern (Chrome, Firefox, Internet Explorer, Edge, Safari, dan Opera).

Di mana tempat mendapatkan Bootstrap? Ada dua cara untuk mulai menggunakan Bootstrap di situs web kalian sendiri yaitu:

Kalian bisa mengunduh Bootstrap dari Getbootstrap dan sertakan Bootstrap dari CDN. Bilamana kalian ingin mengunduh dan menginangi Bootstrap sendiri, buka Getbootstrap kembali, dan ikuti petunjuk di sana.

Atau jika kalian tidak ingin mengunduh dan menginangi Bootstrap sendiri, kalian dapat menyertakannya dari CDN (Jaringan Pengiriman Konten).

MaxCDN menyediakan dukungan CDN untuk CSS dan JavaScript Bootstrap. Kalian juga harus menyertakan jQuery seperti berikut:

Contoh MaxCDN:

CSS:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
JQUERY:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
JAVASCRIPT:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Sudah banyak para pengembang dan pengguna lainnya yang telah memanfaatkan dan juga mengunduh Bootstrap dari MaxCDN.

JQuery

Bootstrap menggunakan jQuery untuk plugin JavaScript (seperti modals, tooltips, dll). Namun, jika kalian hanya menggunakan bagian CSS dari Bootstrap, kamu tidak perlu jQuery.

Contoh Membuat Suatu Halaman Web Pertama Dengan Bootstrap.

Tambahkan Doctype HTML5. Bootstrap menggunakan elemen HTML dan properti CSS yang memerlukan doctype HTML5. Selalu sertakan doctype HTML5 di awal halaman, bersama dengan atribut lang dan set karakter yang benar

Bootstrap 3.

Bootstrap 3 ini sudah dirancang khusus untuk responsif terhadap perangkat seluler. Gaya pertama seluler adalah bagian dari kerangka inti.

Untuk memastikan rendering yang tepat dan menyentuh zoom, tambahkan tag:

<meta name="viewport" content="width=device-width, initial-scale=1">


Width = bagian lebar perangkat menetapkan lebar halaman untuk mengikuti lebar layar perangkat (yang akan bervariasi tergantung pada perangkat).

Initial-scale = 1 adalah suatu bagian untuk menetapkan tingkat zoom awal ketika halaman pertama kali dimuat oleh browser.

Dan yang terakhir,

Wadah

Bootstrap juga membutuhkan wadah elemen yang mengandung untuk membungkus isi situs.

Ada dua class container untuk dipilih:

Yang saya ketahui, class container ini menyediakan wadah lebar tapi tetap responsif. Sedangkan class container-fluida menyediakan wadah lebar penuh, yang mencakup keseluruhan lebar viewport.

Itulah sedikit pembahasan kali ini tentang, Pengertian Dan Kegunaan Bootstrap Menurut Para Ahli. Sedikit kurangnya mudah-mudahan informasi ini dapat bermanfaat.

Akhir kata saya ucapkan, terimakasih.

Selengkapnya

7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3

Tahukan Anda bahwa Twitter Bootstrap merupakan kerangka kerja CSS terbaik di Internet saat ini. Ini juga dapat memungkinkan para pemula dengan mudah memahaminya, tanpa adanya pengetahuan tentang CSS.

7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3

Twitter Bootstrap memiliki satu set komponen JavaScript terbaik yang kuat. Komponen-komponen ini mudah digunakan dan berguna dalam proyek web Anda.

Nah, dalam tutorial ini saya akan membahas beberapa komponen JavaScript Bootstrap Twitter terbaik dan cara menggunakannya.

Hal pertama yang harus kita pahami adalah bahwa komponen JavaScript Bootstrap ditulis dalam jQuery. Jadi, disini kita perlu jQuery untuk bisa menjalankannya.

Setelah itu, Anda perlu mengunduh Bootstrap 3 dan menyalin isi folder dist dan menempelnya di dalam folder baru.

Anda pasti berpikir mengapa kita perlu mengaktifkan JavaScript untuk melihatnya? Ada banyak komponen Bootstrap JavaScript yang bergantung pada CSS agar berfungsi dengan baik.

Twitter Bootstrap 3 juga memungkinkan kita untuk menggunakan setiap modul alih-alih mengunduh semua komponen JavaScript. Kita akan melihat akhir tutorial ini bagaimana menggunakan modul tunggal dan bukan semua komponen.

Berikut ini beberapa komponen JavaScript Bootstrap Twitter yang paling utama:

Modal
dropdown
ScrollSpy
tab
tooltip
popover
Alert


Modal


Modal adalah prompt dialog seperti alih-alih sebuah peringatan. Pada modal terdapat fitur-fitur canggih seperti modal title, modal body, modal footer, close button dan close symbol di sudut kanan atas. Ini dapat digunakan sebagai jendela konfirmasi di banyak aplikasi seperti sebelum melakukan pembayaran, atau menghapus akun, dll.

Contoh:


<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal </button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"> Modal title </h4></div>
<div class="modal-body">
<h1>Hello World! </h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"> Close </button><button type="button" class="btn btn-primary"> Save changes </button></div>
</div></div>

Bootstrap Modal memiliki tiga bagian yaitu: header, body dan footer.

DropDown


Membuat Bootstrap 3 menjadi sangat mudah. Anda hanya perlu memahami markup yang dibutuhkan. Anda dapat menggunakan DropDown ini di bilah navigasi atau di dalam div mana pun yang Anda inginkan.

Contoh:


<div class="dropdown">
<a data-toggle="dropdown" href="#"> Show Links <b class="caret"> </b> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#"> First Link </a></li>
<li> <a href="#"> Second Link </a></li>
<li role="presentation" class="divider"></li>
<li><a href="#"> Third Link </a></li></ul></div>

Pertama, Anda harus memberi class "dropdown" untuk setiap elemen induk yang ingin Anda perlakukan sebagai elemen drop down. Dalam kasus saya, saya menggunakan elemen div. Ini juga dapat dijadikan elemen sebagai "dropdown". Maka dari itu Anda harus menempatkan tag "<a>" langsung di dalam elemen dropdown tersebut. Selanjutnya, tambahkan atribut baru seperti "data-toggle" lalu masukan ke dalam tag tautan dan beri nilai sebagai "dropdown". Terakhir, tambahkan daftar di bawah tag tautan. Anda harus menambahkan menu dropdown ke tag ul.

Untuk menambahkan pemisah antara elemen, tambahkan elemen baru dengan class sebagai "pembagi (divider)" ke dalam daftar.

jika Anda tidak nyaman dengan atribut data, cara lainya adalah Anda bisa menambahkan dropdown menggunakan jQuery.

Sebagai contoh:


Dropdown $ ('# MyDropDown') ()

ScrollSpy


ScrollSpy adalah modul JavaScript yang menarik yang ditambahkan melalui daftar Bootstrap ini. Lalu apa peran pentingnya? Peran pentingnya adalah untuk memperbarui item yang aktif di bilah navigasi saat Anda menggulir ke bawah area konten.

Untuk dapat menggunakan fitur ScrollSpy Anda harus menambahkan atribut data-spy = "scroll" dan data-target = "# top-navigation" ke elemen body. Navigasi atas adalah id dari bilah navigasi sebuah situs. Pastikan tautan di bilah navigasi adalah tautan internal.

Tab


Tab Twitter Bootstrap 3 mengambil inspirasi dari tab jQuery lama, yang dimana Keduanya memiliki fungsi yang sama. Untuk menggunakan Bootstrap Tab Anda perlu menentukan dua bagian terpisah: navigasi tab dan area tab.

Markupnya seperti di bawah ini:



<ul class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab"> Home </a></li>
<li><a href="#profile" data-toggle="tab"> Profile </a></li>
<li><a href="#messages" data-toggle="tab"> Messages </a></li>
<li><a href="#settings" data-toggle="tab"> Settings </a></li></ul>
<div class="tab-content">
<div class="active tab-pane" id="home"> ... </div>
<div class="tab-pane" id="profile"> ... </div>
<div class="tab-pane" id="messages"> ... </div>
<div class="tab-pane "id="settings"> ... </div></div>

Sebuah menu navigasi yang dibuat menggunakan class "nav-tab", pada saat tambahan digunakan dan disetiap tautan harus mendefinisikan atribut "data-toggle" sebagai "tab". Twitter ini memicu Tab JavaScript Bootstrap dan area tab masing-masing akan ditampilkan.

Pada area tab, terdiri dari satu set elemen div. Par induk harus memiliki class sebagai "tab-conten" dan anak harus memiliki class "tab-pane". Setiap tab-pane harus memiliki id yang sesuai dengan tautan internal yang ditentukan dalam tab navigasi.

Tooltip


ToolTip adalah sebuah JavaScript yang sangat berguna dan juga kompatibel dalam lintas-browser!

Untuk menggunakan ToolTip, markupnya seperti ini:


<button id="myButton" type="button" class="btn btn-default " data-toggle="tooltip" data-placement="left" title="" data-original-title="Tooltip on left"> Tooltip on left </button>

Markup di atas menampilkan tombol dengan fitur tooltip. Dengan atribut "data-toggle" yang digunakan oleh Bootstrap untuk mengidentifikasi elemen mana yang harus ditampilkan pada tooltip. Atribut "data-original" digunakan untuk menentukan apa yang ada di dalam tooltip. Atribut "data-placement" digunakan untuk membantu bootstrap agar dapat tempat untuk menampilkan tooltip tersebut.

Untuk alasan kinerja, Bootstrap tidak akan menginisialisasi komponen ToolTip dan Popover secara default. Anda sendirilah yang harus menginisialisasi dengan menggunakan jQuery berikut:


Tooltip $ ('# MyButton') ()

Popovers


Jika Anda pernah menjadi pembaca iBook hardcore, maka Anda akan mengerti apa itu popover. Mereka adalah versi yang diperluas dari ToolTip dengan beberapa lebih banyak fungsi. Anda dapat menampilkan lebih banyak tag, tautan, divs tambahan, di dalam Popovers.


<button id="myPopover" type="button" class="btn btn-default" data-toggle="popover" data-placement="left" data-html="true" data-content="<a href =\"http: //www.google.com\">Go to google</a>" data-original-title="" title ="">Popover on left</button>

Cuplikan HTML di atas menampilkan tombol dengan fungsionalitas sembul. Ini juga memiliki set data khusus yang harus Anda pahami.

Atribut "data-toggle" mengidentifikasi elemen mana yang harus mengontrol popover. Atribut "data-content" berisi data yang harus ditampilkan di dalam popover dan Atribut "data-placement".

Gunakan jQuery di bawah ini untuk menginisialisasi popover:


$ ( '# MyButton') popover ()

Alerts


Alerts Twitter Bootstrap tidak seperti jendela sembulan. Mereka adalah satu set divs dengan warna latar yang telah ditentukan dan tombol pemberhentian. Markupnya seperti di bawah ini:


<div class="alert alert-warning fade in"><button type="button" class="close" data-dismiss="alert" aria-hidden="true"> × </button><strong> Hello ! </strong>Best check yo self, you're not looking too good.</div>

Lansiran di atas memiliki latar belakang kuning pucat, karena merupakan pesan peringatan. Anda bisa mengubah warnanya menjadi warna danger (Merah). Setiap div peringatan harus memiliki close button dengan seperangkat atribut data sebagaimana didefinisikan di atas. Atribut "data-dismiss" menyembunyikan div peringatan ketika diklik.

Kesimpulannya: Anda mungkin memiliki pemahaman yang lebih baik tentang cara menggunakan JavaScript dalam kode Anda sendiri. Komponen JavaScript ini adalah salah satu alasan utama mengapa kerangka Bootstrap Twitter begitu populer di web saat ini.

Karena ini telah menjadi sebuah kerangka kerja sejak lama, tidak hanya bagi para pengembang dengan nol pengetahuan CSS tetapi juga bagi para desainer untuk meningkatkan dan mengatur waktu, bagaimana dan kapan mereka harus mengganti desain mereka.

Demikian pembahasan hari ini, tentang 7 Daftar Komponen Javascript Terbaik Twitter Bootstrap 3.

Terimakasih.

Selengkapnya

[UPDATE] Pembaruan Komentar Balasan Pada Disqus Akan Diciutkan (Shortlisted)

Pembaruan Komentar balasan Disqus! Pada tanggal 28 tepatnya maret 2019, Disqus telah mengumumkan adanya perubahan pada komentar balasan. Atau biasa disebut Collapsed Replies.

Pembaruan Komentar Balasan Pada Disqus

Apa yang diperbarui? Letak pembaruan terdapat pada komentar utas panjang, yang dimana fitur tersebut mungkin akan segera diciutkan (shortlisted) oleh Disqus.

Seperti yang dikatakan oleh author Disqus Sabra Mwaura bahwa,

"Discussion threads are an opportunity for readers to share their unique perspectives, opinions, and feedback about articles and topics across their favorite websites. However, sometimes entire discussions turn into a series of replies to a single comment. With this update, in cases where a top-level comment has a long threads of replies, instead loading all replies by default, we use a “Show More Replies” prompt.

What doeas this mean for me?



As with any change, our goal is to improve the experience on Disqus for both publishers and readers. Prior to rolling out this update across the network, we spent time testing the new experience to better understand how it impacts discussion. Through this testing, we found that by collapsing long sub-threads of replies, more overall readers choose participate in discussions. Because the collapsed experience exposes more unique viewpoints (more top-level comments), there are more opportunities for readers to both leave their own top-level comments and reply to several different opinions from others".

Detailnya


[UPDATE] Pembaruan Komentar Balasan Pada Disqus Akan Diciutkan (Shortlisted)

Sebagai bagian dari perubahan ini, kami akan menutup utas bila memiliki lebih dari 6 total balasan atau lebih dari 4 sub-utas (balasan ke balasan). Kami pun mulai menguji balasan tersebut di beberapa bulan yang lalu, tapi volume tersebut tidak memuaskan alias sangat rendah, tercatat dari beberapa tanggapan para pengguna. Selama beberapa minggu mendatang, kami berencana untuk secara bertahap meluncurkan pengalaman baru di seluruh jaringan. Jadi, segeralah Anda untuk melihatnya, jika Anda belum melakukannya. Pada awal pertengahan April, Balasan yang Diciutkan akan menjadi pengalaman default di Disqus.

Nah itulah kabar terbaru dari Disqus tentang pembaruannya pada komentar balasan yang segera di update, jika Anda penasaran langsung saja lihat postingan blognya disini.

Selengkapnya

Tips Cara Membuat Konten Blog Yang Berkualitas Untuk Meningkatkan Organik Traffic Dan SEO

Tips Cara Membuat Konten Blog Yang Berkualitas Untuk Meningkatkan Organik Traffic Dan SEO - Membuat sebuah kontent yang baik dan berkualitas dengan memanfaatkan seo itu adalah point yang sangat penting, demi kelancaran situs Anda.

Apabila Anda seorang pemula atau seorang yang baru saja terjun ke dalam peran yang berurusan dengan ini, maka benar adanya, mengelola SEO bisa dibilang cukup membingungkan. Faktanya dalam bentuk yang paling murni, SEO adalah tentang peringkat halaman, dengan aturan untuk peringkat yang terkait dengan persyaratan mesin pencari. Namun, meskipun mungkin tampak terlalu teknis, SEO bisa disebut sebagai komponen penting dari strategi pemasaran konten yang sukses.

Tips Cara Membuat Konten Blog Yang Berkualitas Dan Seo

Membuat konten untuk keperluan SEO dapat membantu Anda menjangkau target audiens Anda, yang tujuannya untuk mengarahkan mereka ke properti web Anda melalui peringkat mesin pencari. Semakin tinggi pangkat situs Anda di SERP, semakin tinggi pula para pelanggan menemukan situs web Anda.

Ada banyak cara untuk membuat situs Anda muncul di peringkat tinggi, akan tetapi dalam artikel ini, mungkin kita akan fokus terutama pada konten. Konten yang berhubungan dengan SEO adalah materi yang Anda hasilkan untuk tujuan tunggal yang dapat membantu peringkat situs web Anda lebih tinggi di mesin pencari. Proses ini biasanya tergantung pada kata kunci yang Anda pilih, dari frekuensi Anda dalam menambahkan konten terbaru.

Nah, disini saya akan memberikan 6 Langkah terbaik Untuk Membuat Konten Berkualitas Dan SEO Friendly. Dan inti dari proses ini adalah membuat konten yang solid yang dapat memberikan nilai baik bagi audiens Anda.

Bagaimana caranya?

Berikut ini langkah-langkah yang harus Anda ambil untuk memastikan Anda membuat konten yang berkualitas.

1. Tentukan Jenis Konten yang Ingin Anda Buat


Tidak ada salahnya memiliki berbagai konten yang tersedia untuk target audiens Anda. Salah satunya dengan keragaman konten yang memungkinkan Anda untuk menarik berbagai segmen audiens. Berikut adalah beberapa jenis konten SEO yang dapat Anda manfaatkan di situs web Anda:

- Artikel: Potongan-potongan tulisan yang layak diberitakan kemungkinan besar ada di surat kabar atau majalah.

- Posting blog: Biasanya artikel antara 1.000 dan 1.500 kata memiliki peringkat lebih tinggi dari pada yang lain, karena dengan begitu para pembaca akan betah berlama-lama di situs web Anda. Gunakan judul dan buat prosa yang memberikan jawaban dan gambaran yang jelas untuk pertanyaan, itu juga dapat membantu menaikan peringkat situs Anda.

- Panduan dan Halaman Pilar: Ini kemungkinan akan lebih lama daripada posting blog, dan akan berusaha menjawab pertanyaan yang lebih akurat. Konten ini bisa dalam satu posting blog atau dipisahkan menjadi beberapa halaman.

- Infografis: Konten ini sangat bagus untuk menangkap pemirsa yang lebih didorong oleh materi visual. Teks dalam infografis apa pun tidak dapat dirayapi. Karena ini adalah gambar, jadi pastikan untuk menggunakan Alt Text dan pasangkan dengan posting atau panduan blog pendamping untuk memaksimalkan nilai SEO dari konten ini.

- Listicles: Listicles sangat baik untuk secara alami termasuk berbagai kata kunci dan juga karena mudah dinavigasi.

- Video: Mirip dengan infografis, video tidak dapat dirayapi, tetapi Anda dapat memasangkan video dengan posting blog informatif atau tajuk yang ramah-SEO. Daftar ini tidak lengkap, karena ada banyak jenis konten lainnya. Anda juga dapat menggabungkannya dengan media konten di atas.

2. Mengaudit Konten Dan Menargetkan Audiens Anda


Memilih jenis konten terbaik dan menggunakan kata kunci yang paling relevan untuk mengatur konten Anda demi mendapat peringkat yang lebih baik, adalah salah satu cara terbaik. Lalu bagaimana cara membuatnya? Untuk proses pembuatannya yaitu, dengan cara mengaudit konten Anda sendiri dan mengidentifikasi apa yang beresonansi dengan audiens Anda.

Kemudian, Anda dapat membuat persona yang membahas informasi demografis, lokasi, dan perilaku online.

Anda juga dapat menentukan jenis pertanyaan yang akan dicari oleh orang-orang, dengan memilih kata kunci dan frasa untuk digunakan dalam konten Anda. Inilah yang akan menentukan peringkat untuk pertanyaan-pertanyaan ini.

3. Fokus Pada Tujuan Apa Yang ingin Anda dapatkan


Yang dimaksud adalah, Apakah Anda ingin meningkatkan konversi? Apakah Anda berusaha membangun suatu merek, atau secara umum meningkatkan kesadaran perusahaan Anda?

Dalam upaya pembuatan konten yang SEO, ini akan membantu Anda untuk mencapainya. Salah satunya, dengan meluangkan waktu untuk mengembangkan sasaran yang dapat ditindak lanjuti, lalu buatlah sebuah strategi yang unik untuk menentukan bagaimana konten ini dapat membantu agar tercapainya tujuan Anda.

Misalnya, jika Anda ingin mendorong webinar Anda menjadi titik tarik utama bagi audiens Anda, Anda harus mengoptimalkan kata-kata dan berita utama yang terkait dengannya untuk menarik dan mempertahankan pelanggan.

Dengan begitu Anda dapat melacak seberapa sukses upaya konten Anda menggunakan analitik situs yang terkait dengan webinar Anda.

4. Kembangkan Kalender Editorial & Tentukan Garis Waktu Pembuatan Konten


Membuat konten untuk SEO dapat menjadi padat karya. Oleh karena itu, sangat penting untuk memiliki strategi kapan dan bagaimana Anda akan membuat konten. Contoh: Kalender editorial yang dapat memungkinkan Anda mengembangkan garis waktu untuk pembuatan konten dan memiliki lokasi untuk menyimpan dan mengatur konten tersebut.

Anda dapat merencanakan konten sebelumnya dan bahkan melakukan penelitian pendahuluan sejauh kata kunci dan frasa yang relevan untuk dimasukkan dalam tulisan Anda. Berikut ini adalah beberapa tips untuk memulainya:

- Sisihkan waktu Anda yang cukup untuk membuat konten dan melakukan penelitian yang sesuai.

-Kategorikan konten Anda berdasarkan topik atau jenis, ini akan memudahkan untuk mencari apa yang Anda butuhkan.

- Sertakan kategori untuk kata kunci dan tag potensial. Ini akan membuat penelitian lebih mudah, karena Anda telah menentukan istilah dan frasa yang ingin Anda gunakan.

5. Mulai Dan Buat Konten Anda Sebaik Mungkin


Setelah Anda menentukan jenis konten seperti apa yang ingin Anda buat dan mengembangkan jadwal postingan, sekarang saatnya untuk membangun konten Anda.

Prosesnya akan mencakup sedikit rencana yang lebih mendalam untuk penelitian kata kunci (Keyword Planner), panjang konten, dan kata kunci strategis serta penempatan frase.

Sebagai Contoh: Dengan meningkatkan kecerdasan dalam konten sangatlah penting, kenapa? Karena ini akan Menggali metrik yang benar-benar mendorong konversi Anda dan cara termudah untuk memastikan konten Anda efektif, tanpa harus menebak-nebaknya.

6. Mengevaluasi Situs Web


Dengan menempatkan analitik sebagai tonggak dari pada situs web Anda, ini akan memberikan gambaran kinerja dari konten Anda, Kunjungan halaman, rasio pentalan, dan atribusi semua akan menyampaikan potensi keberhasilan konten Anda.

Informasi ini tidak hanya akan membantu Anda mengetahui hasil dari konten Anda, tetapi juga akan memungkinkan Anda untuk melihat di mana harus meningkatkan dan memahami nya, jika Anda perlu memperbarui atau mengganti materi lainnya.

Yang terakhir, Setelah Anda memahami pentingnya SEO dan bagaimana hubungannya dengan konten Anda, mulailah dengan membuat sebuah materi untuk konten Anda, yang nantinya akan membantu memberi peringkat baik pada situs Web Anda.

Sekali lagi, mulailah dengan menilai apa yang dicari oleh audiens Anda, dan kemudian cari tahu topik seperti apa yang paling diminati saat ini dan industri secara keseluruhan.

Dari sanalah, Anda dapat mulai membuat keputusan tentang kata kunci dan frasa yang akan cocok dengan pencarian potensial mereka dan menyebabkan konten Anda mendapat peringkat tingggi di SERP.

Seperi itulah tips pada pembahasan kali ini, kurang atau lebihnya, hanya itulah yang dapat saya berikan dengan niat dan tujuan untuk sekedar berbagi. Semoga bisa memberikan inspirasi dan bermanfaat.

Terimakasih.

Selengkapnya

8 Cara Cermat Memilih Jasa SEO Yang Sah Dan Terpercaya

8 Tips Memilih Jasa Layanan SEO Terpercaya - Jika Anda sedang mencari salah satu penyedia layanan SEO, kemungkinan besar akan sedikit rumit, kenapa? Karena di jaman yang sudah serba modern ini kemungkinan besar jasa SEO itu sendiri Telah berkembang pesat dan mungkin sudah banyak tersebar di indonesia sendiri. Terlebih Anda akan sedikit rumit mana yang baik untuk dipilih demi kelancaran bisnis Anda nantinya. Banyak dari mereka yang mengklaim telah memberikan peringkat teratas di antara mesin pencari.

Memilih Jasa Seo Yang Sah Dan Terpercaya

Namun tahukah kalian, lebih dari 70% dari perusahaan SEO ini ada saja yang mengandalkan ketidaktahuan dari klien mereka tentang SEO untuk mendapatkan uang tunai cepat tanpa memberikan hasil nyata, dalam jangka panjang dan berkelanjutan. Tidak ada satupun jalan pintas untuk tugas ini. Anda harus melakukan uji tuntas dan mengikuti langkah-langkah di bawah ini untuk memastikan bahwa Anda membuat keputusan yang tepat.

Berikut langkah-langkahnya:

1. Verifikasi Informasi Perusahaan SEO

Perusahaan SEO yang sah harus dapat memberi Anda alamat fisik dan informasi kontak. Jika ya, verifikasi bahwa mereka memberi Anda detail yang benar. Kontak mereka untuk memverifikasi apakah nomor mereka berfungsi. Google harus dapat mengenali alamat fisik mereka sehingga perlu waktu untuk memeriksanya di Google Maps.

Ketika perusahaan tersebut mengelola kampanye SEO Anda, Anda harus dapat berbicara dengan agensi / konsultan Anda saat Anda perlu, dan memastikan bahwa Anda dapat menjangkau mereka melalui telepon kapan saja. Karena itu merupakan indikasi yang baik bahwa mereka menghargai dukungan pelanggan.

2. Bicara dengan Pelanggan Saat Ini & Sebelumnya

Salah satu cara paling efektif untuk menyelidiki perusahaan SEO yang baik adalah berbicara dengan klien mereka saat ini dan sebelumnya. Perusahaan SEO terkemuka harus memiliki umpan balik dan testimonial klien di situs web mereka atau di seluruh web. Luangkan waktu untuk membaca, jika mungkin, hubungi beberapa dari mereka untuk mengkonfirmasi apakah perusahaan SEO itu telah memenuhi janji mereka.

Jika itu adalah rekomendasi Facebook atau LinkedIn, jangan takut untuk mengunjungi profil klien mereka dan mengirimi mereka pesan singkat.

3. Hubungi Biro Bisnis Yang Lebih Baik (BBB)

Meskipun tidak semua perusahaan SEO memiliki catatan di Better Business Bureau, Anda mungkin masih menemukan beberapa informasi bermanfaat tentang prospek Anda yang lain. Jika sebuah perusahaan SEO mendapat masalah yang sama dengan klien mereka secara konsisten, itu adalah bendera merah. Namun, itu tidak berarti bahwa jika perusahaan mendapat 100% umpan balik positif dari klien mereka, Anda harus memilih mereka.

Bahkan perusahaan dengan 300 pelanggan yang puas mungkin memiliki satu klien yang tidak bahagia karena satu diantara lain alasan. Sementara beberapa perusahaan akan membeli ulasan palsu, biasanya cukup mudah dikenali ketika Anda membaca konteks ulasan atau mengunjungi profil pengulas.

4. Pastikan Perusahaan SEO Tidak Terdaftar Di Situs Web Penipuan

Scam adalah salah satu situs web yang mencantumkan perusahaan yang menipu klien mereka. Situs web populer lain yang mencantumkan keluhan pelanggan adalah PissedConsumer. Perusahaan di salah satu dari situs ini harus diperlakukan dengan hati-hati jika melibatkan mereka dalam proyek SEO Anda.

Reputasi adalah masalah besar online, terutama bagi perusahaan yang membangun kehadiran merek mereka. Untuk menelusuri nama perusahaan dengan menambahkan istilah 'penipuan,' sah, 'atau' ulasan, 'Anda harus dapat dengan mudah mengetahui apakah perusahaan SEO Anda memiliki reputasi buruk atau tidak.

Berikut ini tiga contoh pencarian untuk menyalin dan melewati langsung ke Google,

Perusahaan SEO + scam Perusahaan SEO + ulasan Perusahaan SEO + melegitimasi Ganti "Perusahaan SEO" dengan nama agensi atau konsultan yang ingin Anda sewa atau sedang bekerja sama dengan Anda.

5. Jangan Bekerja Dengan Perusahaan SEO Yang Tidak Peduli Tentang SEO Mereka Sendiri

Anda harus berhati-hati dengan perusahaan SEO yang tidak melakukan apa-apa. Mereka adalah perusahaan SEO dan bukti pertama mereka dalam menunjukkan keterampilan mereka harus situs web mereka sendiri.

Bagaimana mereka dapat membantu Anda berhasil jika mereka tidak memberi peringkat di Google, Yahoo, dan Bing untuk kata kunci yang penting bagi mereka? Jika mereka tidak peduli dengan peringkat mereka sendiri dan kehadiran online mereka sendiri, bagaimana Anda berharap mereka peduli dengan Anda?

Cara lain untuk mengetahui apakah perusahaan SEO itu sah adalah dengan mempelajari SEO dan menanyai setiap perusahaan yang Anda dekati.

Berikut adalah beberapa pertanyaan cepat untuk diajukan sebelum merekrut perusahaan SEO Anda,

- Seberapa penting kepadatan kata kunci untuk menentukan peringkat halaman web?
- Apa kepadatan kata kunci yang optimal?
- Strategi apa yang Anda gunakan untuk meningkatkan visibilitas mesin pencari?
- Berapa banyak lalu lintas berkualitas yang dapat saya lihat di bulan berikutnya, dua bulan, dan tiga bulan?
- Apakah Anda terbiasa dengan cara LSI berkorelasi dengan SEO?
- Bisakah Anda memberi saya jaminan peringkat satu halaman untuk kata kunci yang saya inginkan?
- Berapa panjang konten optimal untuk posting blog dan artikel untuk peringkat yang lebih tinggi di mesin pencari?

6. Periksa Durasi Operasi Perusahaan SEO

Dengan segala cara, hindari bekerja dengan perusahaan SEO fly by night. Ini sangat penting karena jika mereka keluar dari bisnis, Anda harus melalui proses yang sama lagi. Mempertimbangkan kondisi ekonomi, bekerja dengan perusahaan SEO yang stabil yang dapat memberikan Anda tingkat keamanan tertentu. Untuk alasan ini, Anda harus melakukan upaya untuk memeriksa seberapa lama perusahaan SEO ini telah beroperasi - biasanya semakin lama mereka dalam bisnis, itu akan semakin terlihat baik.

7. Apakah Mereka mempunyai Wewenang?

Biasanya mereka akan memberikan otoritas dan akan berbicara secara langsung di konferensi teknologi di mana mereka telah menunjukkan keahlian mereka dalam mesin pencari atau SEO.

Indikator kualitas lain bahwa mereka adalah Perusahaan SEO terkemuka adalah kehadiran mereka di Blogosphere. Jika mereka telah menulis posting blog dan artikel tentang SEO untuk situs otoritas populer dan mapan, maka Anda dapat yakin mereka tahu barang-barang mereka.

8. Pastikan Anda Memahami Kontrak SEO Mereka

Perusahaan yang mengharuskan Anda menandatangani kontrak enam bulan untuk satu tahun untuk layanan SEO-nya harus ditangani dengan sangat hati-hati. Pastikan Anda benar-benar memahami syarat dan ketentuan kontrak mereka.

Demikianlah tips dan cara untuk mencari jasa penyedia layanan SEO yang rekomendasi untuk Anda. Semoga tips ini bisa bermanfaat, agar Anda tidak salah dalam memilih, ikuti seperti apa yang sudah saya jelaskan diatas.

Akhir kata saya ucapkan, Terimakasih.

Selengkapnya

Inilah 10 Kumpulan Daftar Javascript Animasi Terbaik

10 Daftar Javascript Animasi Terbaik - Jika anda melihat sisi dari situs web yang modern, maka akan terlihat beberapa tampilan yang menggunakan animasi berkualitas. Banyak daftar Javascript yang memiliki potensi untuk menjadikan tampilan web menjadi lebih baik, salah satunya yang akan kita bahas kali ini. Disini saya akan membagikan sepuluh daftar Javascript untuk membuat sebuah animasi. Khususnya untuk para Design UI.

Kumpulan Daftar Javascript Animasi Terbaik

Tanpa berlama-lama lagi, dan langsung saja inilah daftar selengkapnya persi Seo Techman.

10 Daftar Javascript Teratas



1. Three.js

Animasi yang pertama dan paling populer dalam daftar ini (dengan lebih dari 900 kontributor untuk proyek ini), adalah Three.js. kenapa Three.js? Karena Javascript ini tetap menjadi alat animasi yang kuat dan bertahan sampai delapan tahun belakangan ini. Bergantung pada WebGL, Three.js dapat digunakan untuk membuat grafik komputer 3D yang luar biasa dan dapat dioperasikan atau dijalankan melalui browser web. Tidak ada batasan apapun yang terdapat pada fitur dari Three.js termasuk, efek Anaglyph, perspektif dan kamera ortografis, alat-alat geometri seperti bidang, kubus, bola, dan torus.

2. Anime.js

Anime.js berada di nomor dua dalam daftar ini. Dibuat oleh Julian Garnier, anime.js adalah salah satu daftar animasi tercepat yang akan Anda temui. Anime.js bekerja sangat lancar, dengan DOM. Salah satu ke unggulannya adalah, Anime.js mendukung disemua jenis browser web seperti Chrome, Firefox, Opera, Safari, dan Internet Explorer 10+. Berikut adalah fitur dari anime.js: Transformasi CSS yang berguna untuk menghidupkan Transisi pada CSS, Animasi SVG untuk garis, dan garis waktu untuk menyinkronkan beberapa instance. Satu hal yang membuat anime.js menarik bagi pengembang yaitu sangat ringan.

3. Particles.js

Daftar ketiga yang akan kita lihat adalah Particles.js. Dibuat oleh Vincent Garreau, Particles.js adalah salah satu JavaScript khusus animasi untuk membuat animasi yang indah dengan titik dan garis. Seperti yang dinyatakan sebelumnya, particles.js ini digunakan untuk membuat suatu animasi yang akan terlihat seperti sebuah partikel-partikel. Oleh karena itu, ini memungkinkan para pengembang web design untuk beralih ke particles.js. Particles.js sangat cocok untuk dijadikan sebagai latar belakang atau background.

4. ScrollReveal.js

scrollReveal.js mengambil tempat nomor empat di daftar kami, dan seperti halnya Particles.js, itu juga merupakan daftar JavaScript khusus untuk animasi. ScrollReveal.js bisa digunakan untuk membuat animasi yang luar biasa dan dapat dikatakan sebagai alat yang ringan (tidak memiliki dependensi) dan cukup mudah digunakan. scrollReveal.js berfungsi dengan baik dengan node DOM, beberapa wadah, konten asinkron, dan mendukung rotasi 3D. Alat terbaik yang dapat Anda peroleh pada animasi ini sudah mendukung banyak browser web, asalkan mendukung pada Transformasi CSS dan Transisi CSS juga.

5. Velocity.js

Berikutnya pada daftar animasi yang luar biasa menakjubkan ini yaitu Velocity.js. Sayang, dari para desainer UI tidak begitu banyak yang menggunakannya. Padahal alat ini dapat memudahkan Anda untuk membuat animasi web yang kuat hanya dengan menggunakan HTML dan SVG. Velocity.js dapat digunakan untuk menggulir jendela browser dan bahkan membatalkan animasi sebelumnya. Salah satu dari beberapa alat animasi yang akan Anda temukan tidak selalu bergantung pada kerangka jQuery yang kuat meskipun menggunakan API yang sama dengan $ .animate () dari jQuery. Beberapa aplikasi seperti WhatsApp dan MailChimp dikenal sebagai pengguna alat yang luar biasa ini.

6. Popmotion.js

Popmotion berada di urutan keenam. Popmotion.js sangat mirip dengan anime.js, Popmotion dapat digunakan untuk membuat animasi browser yang luar biasa. Dan juga memiliki fitur seperti pelacakan pointer, fisika pegas, animasi objek 3D, dll.

7. Mo.js

Dengan fungsionalitas yang mirip dengan Popmotion, mo.js masuk di nomor tujuh dalam daftar ini. Mo.js sangat sederhana untuk membuat animasi web, mudah dipelajari, karena pembuatnya Oleg Solomka telah membuat banyak tutorial dan demo untuk membantu pemula dengan cepat. mo.js juga dilengkapi dengan fitur untuk membuat bentuk seperti lingkaran, poligon, persegi panjang, garis, dll. mo.js mungkin terlihat sederhana untuk digunakan, tetapi ia mampu membuat animasi web animasi gerak grafik yang sangat canggih.

8. Vivus.js

Vivus mengambil posisi nomor delapan dalam daftar ini. Jika Anda sedang mencari alat yang bagus yang dapat bekerja dengan SVG, maka Vivus.js adalah pilihan terbaik, terutama untuk pemula. Vivus.js ini juga sangat cepat dan ringan, karena tidak memiliki dependensi. Selain bekerja dengan SVG, Vivus.js juga dapat digunakan untuk membuat tombol yang bagus dan ada banyak animasi luar biasa lainnya yang tersedia untuk digunakan.

9. GreenSock

GreenSock sering disebut sebagai GSAP (GreenSock Animation Platform) dan merupakan salah satu javascript paling populer.

Dengan kecepatan dan efisiensi tinggi GreenSock juga berfungsi dengan baik di sejumlah besar browser web dan tidak memiliki ketergantungan.

10. AOS

Dari beberapa daftar yang tercatat diatas, sangat banyak yang bergantung pada JavaScript, berbeda dengan AOS (Animate On Scroll) jauh lebih bergantung pada CSS dari pada JavaScript. Dengan AOS, para pengembang web dapat menghidupkan elemen-elemen halaman selama discroll ke bawah dan kemudian membalikkannya ke animasi status sebelumnya (scroll ke atas). AOS sudah dilengkapi dengan banyak fitur yang ditentukan, salah satunya scrolling event.

Nah, itulah sepuluh daftar Javascript Teratas untuk membuat animasi yang indah. Jika ingin mencobanya, silahkan cari saja di google, github dan lainnya.

Terimakasih.

Selengkapnya

Update Algoritma Pencarian Google Terbaru Maret 2019

Update Algoritma Pencarian Google Terbaru Maret 2019 - Pada hari Rabu 13 Maret 2019, Google mengkonfirmasi bahwa mereka merilis pembaruan algoritma pencarian peringkat inti luas (A Broad Core Search Algorithm) minggu ini.

Update Algoritma Pencarian Google Terbaru Maret 2019

"Panduan kami tentang pembaruan tersebut tetap seperti yang telah kami bahas sebelumnya", kata perusahaan.

Google mengatakan: Minggu ini, kami merilis pembaruan algoritma inti luas, seperti yang kami lakukan beberapa kali per tahun. Panduan kami tentang pembaruan tersebut tetap seperti yang telah kami bahas sebelumnya. Silakan lihat tweet ini untuk informasi lebih lanjut: https://twitter.com/searchliaison/status/973241540486164480 https://twitter.com/searchliaison/status/1050447183260962816

Update Algoritma Pencarian Google Terbaru Maret 2019

Berikut ini adalah pembaruan tentang pembaruan - pembaruan untuk algoritma pencarian kami. Seperti yang dijelaskan sebelumnya, setiap hari, Google biasanya merilis satu atau lebih perubahan yang dirancang untuk meningkatkan hasil kami. Sebagian besar memiliki sedikit perubahan nyata tetapi membantu kami terus meningkatkan pencarian secara bertahap ....

Salah satu juru bicara Google, Danny Sullivan mengonfirmasi pembaruan ini dimulai pada 12 Maret.

Mengapa itu penting? Kerena Google selalu melakukan beberapa pembaruan pada peringkat inti per tahunnya. Khusus untuk pembaruan inti yang luas, Google telah mengatakan berkali-kali bahwa Anda tidak dapat melakukan sesuatu yang spesifik untuk memperbaiki peringkat Anda. Saran Google sebelumnya adalah, “tidak ada‘ perbaikan ’untuk halaman yang mungkin berkinerja lebih baik selain tetap fokus pada pembuatan konten yang hebat. Seiring waktu, mungkin konten Anda akan naik relatif terhadap halaman lain. "

Jika peringkat Anda memang berubah baru-baru ini, itu mungkin terkait dengan pembaruan peringkat inti luas ini dan belum tentu terkait dengan perubahan teknis yang Anda buat di situs web Anda.

Apa yang berubah? Saat ini masih sangat dini dan sulit untuk menebak apa yang telah berubah. Berdasarkan obrolan SEO seputar pembaruan ini, sebelum Google mengonfirmasi pembaruan, ada yang mengatakan ini lagi menargetkan ruang kesehatan / medis. Namun, Google mengatakan tidak ada target khusus di situs medis atau kesehatan pada pembaruan 1 Agustus itu.

Sulit untuk mengetahui jenis situs mana yang paling terkena dampak saat ini. Kami akan terus memantau situasi dan memberi Anda informasi terkini tentang setiap wawasan yang kami lihat terkait dengan pembaruan ini.

Google sebelumnya telah membagikan saran ini seputar pembaruan algoritma inti luas:

“Setiap hari, Google biasanya merilis satu atau lebih perubahan yang dirancang untuk meningkatkan hasil kami. Beberapa berfokus pada perbaikan spesifik. Beberapa perubahan luas. Pekan lalu, kami merilis pembaruan algoritma inti luas. Kami melakukan ini secara rutin beberapa kali per tahun.

Seperti halnya pembaruan, beberapa situs mungkin mencatat penurunan atau perolehan. Tidak ada yang salah dengan laman yang sekarang kinerjanya kurang baik. Sebaliknya, perubahan pada sistem kami menguntungkan halaman yang sebelumnya kurang dihargai.

Tidak ada "perbaikan" untuk halaman yang mungkin berkinerja kurang baik selain tetap fokus pada membangun konten yang hebat. Seiring waktu, mungkin konten Anda akan naik relatif terhadap halaman lain. "

Jika Anda ingin melihat saran lebih lanjut dari Google seputar pembaruan ini, lihat utas Twitter ini.

Selengkapnya

8 UX Tips (Terbaru) Untuk Hasil SEO Yang Lebih Baik

Dari bisnis kecil hingga merek besar sangat bergantung pada SEO dan User Experience (UX) untuk membuat merek dan konten mereka menonjol dari pesaing-pesaing lainnya. Dan juga dapat memberikan pengalaman pengguna yang jauh lebih baik. Tidak hanya penting dalam kepuasan pelanggan, tetapi juga merupakan salah satu kriteria untuk mendongkrak peringkat situs web Anda di Google.

8 Ux Tips (Terbaru) Untuk Hasil Seo Yang Lebih Baik

Saat ini peran yang dimainkan UX dalam SEO selama pengembangan situs terkadang dapat dilupakan. Ketidaktahuan atau kurangnya pengetahuan tentang UX dapat mempengaruhi visibilitas situs web di SERP (Halaman Hasil Mesin Pencari).

"Dua tahun yang lalu Google memperkenalkan algoritma yang mulai menghukum situs web yang tidak responsif."

Ketika algoritma mesin pencari menjadi semakin canggih, diyakini bahwa pengalaman pengguna (UX) akan memainkan peran penting dalam peringkat pencarian. Oleh karena itu, Google tidak pernah berhenti menciptakan kembali dirinya sendiri, dan bukti dari hal ini adalah bahwa Google memperbarui algoritma-nya sekitar 500 kali sepanjang tahun.

Bagian dari filosofi Google selalu difokuskan pada penawaran pengalaman pengguna terbaik. Namun, bagi banyak pakar dan agen SEO, pengalaman pengguna tidak selalu menjadi bagian dari toolkit SEO.

Jika SEO tidak dapat memengaruhi (atau menjadi bagian sentral dari) pendekatan merek UX, maka tuas kinerja SEO akan berada di luar kendali kami. Oleh karena itu, jika belum, pengalaman pengguna harus memiliki prioritas tinggi dalam program pembelajaran dan pengembangannya.

UX harus berkembang melampaui pendekatan linier. Dengan seiring meningkatnya penggunaan mesin pembelajaran, sinyal dari pengalaman pengguna akan menjadi faktor yang lebih menonjol di mesin pencari. Karenanya, masalah UX dapat mencegah merek mencapai potensi mereka dalam hasil pencarian organik dan berpikir secara lebih umum, dapat mengekang kinerja konversi.

Kurangnya pertimbangan untuk pengalaman pengguna dapat menyebabkan konsumen meninggalkan situs dan mencari di tempat lain.

Menurut definisi, pengalaman pengguna adalah tentang memberikan pengalaman terbaik bagi konsumen dan tidak boleh terbatas pada tur tertentu yang dimulai pada halaman utama. Sebagai gantinya, itu harus didorong oleh data, dengan mempertimbangkan berbagai titik masuk pada halaman web.

Peran SEO di UX



SEO tidak mungkin bisa untuk diragukan lagi, salah satu hal paling penting untuk dipertimbangkan dalam semua jenis situs web, entah itu toko online atau katalog produk karena ini tergantung pada visibilitas perusahaan.

Untuk memahaminya dengan lebih baik, kita harus ingat bahwa SEO (penentuan posisi web) memastikan bahwa situs web muncul dalam hasil pencarian yang paling relevan. Agar hal ini terjadi, teknik organik harus diterapkan di berbagai bagian situs web.

Selama bertahun-tahun, SEO telah menjadi bidang yang tidak memerlukan strategi pemasaran digital yang komprehensif untuk mencapai hasil yang diinginkan. Pada kenyataannya, lalu lintas organik diperoleh melalui dua elemen: pemilihan kata kunci yang tepat dan pembangunan tautan yang agresif. Itu adalah masa lalu.

Pengembangan algoritma mesin pencari telah menjadikan SEO sebagai bidang interdisipliner, yang menggabungkan berbagai elemen pemasaran digital dalam satu strategi tunggal. Saat ini, salah satu aspek terpenting dari strategi SEO adalah UX.

Pentingnya UX dalam SEO tumbuh setiap tahun. Untuk mencapai hasil yang baik, penting untuk membuat konten yang menarik dan memenuhi kebutuhan dan niat pengguna yang mengunjungi situs web.

Hal ini dikonfirmasi oleh penelitian yang dilakukan oleh SEMRush yang berusaha menemukan korelasi antara metrik individual dan posisi halaman di mesin pencari: UX dan SEO adalah konsep yang terhubung erat. Pengalaman pengguna yang berkualitas rendah akan menyebabkan optimasi web yang buruk, dan sebaliknya. Jika pengguna tidak memiliki pengalaman yang baik dengan situs web, maka sangat mungkin bahwa itu tidak sesuai dengan niat mesin pencari. Untuk alasan ini, sangat penting bahwa UX berjalan seiring dengan SEO.

Berikut ini adalah 8 tips UX untuk mencapai hasil SEO yang lebih baik:

1. Memahami tren


Sebagai desainer UX, kita harus mengikuti tren untuk tetap di depan para pesaing. Tren UX untuk 2019, seperti yang dijelaskan oleh Careerfoundary adalah bercerita, penulisan UX, teknologi suara, desain gerak, dan pengalaman agnostik perangkat.

2. Terhubung dengan orang


Tujuan utama sebuah situs web adalah untuk terhubung dengan pengguna dan pelanggannya, bukan dengan robot atau mesin pencari. Prioritas itu harus, karena situs web dibangun untuk dikunjungi oleh pengguna dan situs web itu harus menarik dan juga tertib.

3. Menawarkan konten yang dioptimalkan


Dengan mengoptimalkan konten untuk penentuan posisi, kami juga membuat konten untuk pengguna. Kategorisasi dan pelabelan yang benar akan positif untuk kegunaan pengguna dan untuk SEO.

4. Memberikan navigasi yang mudah bagi pengguna Anda


Bantu pengguna menavigasi situs web dengan lancar dengan merancang sistem kategorisasi yang komprehensif dan relevan. Pastikan situs web Anda memiliki label dan item navigasi yang jelas.

5. Desain Yang Bersih Untuk Situs


Jalan menuju pengalaman pengguna yang luar biasa dimulai dengan desain situs web yang bagus. Kegunaannya: untuk meningkatkan situs web Anda menjadi lebih menarik dan jelas dapat menunjukkan dorongan besar untuk tingkat konversi Anda. Sederhanakan desain dan hindari penggunaan gambar yang berlebihan, serta font yang membingungkan atau kombinasi warna yang buruk.

6. Tingkatkan kecepatan situs Anda


Anda harus memahami bahwa Google lebih mementingkan kecepatan situs, karena itu berdampak pada pengalaman pengguna. Kecepatan situs juga memengaruhi permanen, karena pengguna online cenderung tidak sabar dan biasanya tidak memiliki pertimbangan dengan situs web yang lambat. Maka dari itu, teruslah melakukan uji coba dan periksa kecepatan situs web Anda dengan sebagaimana mestinya.

7.Membuat jalur pengguna yang jelas


Pengguna harus mengetahui apa yang dapat mereka capai sebagai tujuan saat mengunjungi situs web. Anda dapat membantu mereka dengan memiliki pendekatan jalur pengguna dan elemen tindakan yang jelas dan dapat dimengerti. Dalam hal desain, ini pun sangat penting untuk memikirkan setiap detail yang ada, agar terciptanya rasa nyaman saat para pengguna berkunjung ke situs web Anda.

8. Pengoptimalan seluler


Google mengumumkan beberapa tahun yang lalu bahwa pengalaman seluler yang berhasil akan dihargai. Yoshikiyo Kato, Insinyur Perangkat Lunak di Google, menunjukkan hal-hal berikut:

"Untuk meningkatkan pengalaman pencarian bagi pengguna ponsel cerdas, kami berencana untuk segera meluncurkan beberapa perubahan peringkat yang membahas situs-situs yang salah konfigurasi untuk pengguna ponsel cerdas."

Dengan catatan: Ini sangat penting untuk mengembangkan strategi SEO yang berfokus pada pengalaman pengguna seluler -> Mobilegeddon.

Kesimpulan

Dengan berfokus pada pengguna dan mempertimbangkan pengalaman daring mereka, pemosisian juga akan ditingkatkan. Dengan mengambil langkah-langkah yang diperlukan untuk meningkatkan UX Anda dengan menggunakan prinsip-prinsip SEO, Anda akan memiliki peluang lebih besar untuk meningkatkan peringkat situs web Anda.

Itulah 8 UX Tips Untuk Hasil SEO Yang Lebih Baik. Dan apabila artikel ini inspiratif dan bermanfaat, silahkan beri rating di bawah untuk meningkatkan blog ini supaya lebih maju kedepannya dalam menyajikan konten-konten yang inovatif.

Terimakasih.

Selengkapnya

Trending Topik: Facebook, Instagram, Dan Whatsapp Down Hampir Di Seluruh Dunia, Bukan Akibat Serangan Dari DDoS

Para pengguna platform Facebook Mengeluh Di Twitter dengan hashtag #facebookdown Rabu, setelah kehilangan akses ke Facebook.
Trending Topik: Facebook, Instagram, Dan Whatsapp Down Diseluruh Dunia

Jejaring sosial populer yang masif itu mulai mengalami masalah di sekitar tengah hari waktu Timur, dengan masalah bermunculan di Facebook, Facebook Messenger, Instagram Dan Whatsapp di seluruh dunia. Pemadaman layanan pada Rabu lalu adalah salah satu yang terpanjang yang pernah dialami Facebook.

Setelah keluar Dari masalah pada hari Rabu, Facebook mulai hidup kembali Kamis pagi tengah malam ET.

Pada saat publikasi, layanan belum sepenuhnya dipulihkan, tetapi beberapa pengguna dapat mengaksesnya lebih dari yang lain.
Rob Leathern, direktur produk Facebook on tweeter Rabu sore bahwa para pejabat "Kami juga sadar bahwa banyak orang yang mengalami masalah dengan akses ke antarmuka iklan kami, dan kami akan melakukan pembaruan sesegera mungkin."

Seorang juru bicara Facebook pun akhirnya angkat bicara dan mengatakan kepada USA HARI INI bahwa pada pukul 10 malam ET, tidak ada pembaruan kapan layanan akan sepenuhnya pulih.

Roland Dobbins, seorang insinyur dengan perusahaan kinerja jaringan Netscout mengatakan pemadaman itu disebabkan oleh masalah kemacetan lalu lintas yang tidak disengaja dengan perusahaan internet Eropa yang bertabrakan dengan Facebook dan situs web lainnya.

"Meskipun tidak berbahaya, peristiwa semacam itu dapat terbukti mengganggu secara luas," katanya.

Beberapa pengguna WhatsApp yang memilik akun Facebook melaporkan mengalami masalah pengiriman foto pada aplikasi perpesanan populer.
Pada Rabu lalu saat pemadaman Facebook, para pengguna pun akhirnya menuju ke Twitter dan memposting masalah tersebut dengan hashtag #facebookdown. Dan masalah ini pun menjadi topik tren teratas di Amerika Serikat.

Downdetector.com, yang memantau situs web, menunjukkan perusahaan tersebut mengalami masalah di sebagian besar AS dan Eropa selain masalah yang dilaporkan di beberapa bagian Amerika Selatan, Asia, dan Australia.

Tidak terlalu jelas apa yang menyebabkan masalah pada hari Rabu itu. Beberapa pengguna melaporkan melihat pesan yang mengatakan bahwa situs tersebut mati karena "pemeliharaan yang diperlukan," sementara yang lain bisa membuat jejaring sosial memuat secara singkat sebelum menemukan bahwa fungsinya terbatas.

"Kami menyadari bahwa beberapa orang saat ini mengalami kesulitan mengakses aplikasi Facebook," kata seorang juru bicara Facebook dalam sebuah pernyataan yang diberikan kepada USA HARI INI. "Kami sedang berupaya menyelesaikan masalah ini sesegera mungkin."

Dalam tweet pukul 3:03 malam ET, perusahaan itu menegaskan bahwa mereka masih memperbaiki. Facebook juga mengkonfirmasi bahwa pemadaman itu bukan akibat dari penolakan layanan yang didistribusikan, atau serangan DDoS.

Waktu Twitter: Apa yang harus dilakukan ketika Facebook dan Instagram turun? Buka Twitter untuk selengkapnya #FacebookDown

Setelah perbaikan, dan masalah pemadaman terpanjang ini, akhirnya: Facebook, Instagram, WhatsApp sudah dipulihkan kembali Kamis pagi.

Itulah tranding info kali ini, Facebook, Instagram, Dan Whatsapp Down Di Seluruh Dunia.

Selengkapnya

Seo Tips: Tren SEO Paling Penting Untuk Meningkatkan Traffic Di 2019

Pada awal setiap tahun, arus tips dan trik baru untuk mesin pencari optimisasi mengisi feed pemasaran digital dengan prediksi untuk bulan-bulan mendatang. Selama beberapa tahun terakhir, Google baru saja meluncurkan sejumlah pembaharuan yang akan terus mempengaruhi usaha dan keberadaan online mereka pada tahun 2019. Untuk menjaga penampilan digital, mengikuti kiat kecenderungan ini.

Seo Tips: Tren Seo Paling Penting Untuk Meningkatkan Traffic Di 2019

Put Mobile First (Memprioritaskan Pengguna Ponsel)


Beberapa tahun yang lalu, Google menerapkan algoritma baru yang disebut indeks mobile-pertama, sebuah sistem peringkat atas yang lebih tinggi untuk optikal yang ramah pada ponsel. Untuk berhasil dalam indeks terbaru, anda akan memerlukan antarmuka mobile yang kuat yang dirancang dengan kemudahan penggunaan. Lebih dari setengah pencarian di internet dilakukan dengan perangkat seluler, maka kesan pertama dan satu-satunya yang dapat dimiliki situs web anda adalah situs seluler. Ada banyak alat di internet untuk membantu anda memastikan situs web anda berfungsi dengan platform mobile.

Metadata


Anda mungkin telah memperhatikan beberapa perubahan pada halaman pencarian Google selama beberapa tahun terakhir, yaitu cuplikan fitur dan data yang kaya. Anda akan mengenali ini sebagai hal-hal seperti peringkat bintang di bawah judul tautan, jam bisnis, dan sebagainya. Lalu lintas yang menemukan situs Anda melalui mesin pencari akan melihat informasi ini sebelum mengklik ke situs web Anda. Gunakan kata kunci utama dalam tajuk dan judul halaman Anda. Jangan lupa deskripsi meta situs Anda, deskripsi singkat yang muncul setelah nama situs web Anda dan informasi di SERP Google.

Pembaruan Kata Kunci


SEO dan pemetaan kata kunci telah menjadi bagian dari diskusi pemasaran sejak mesin pencari lahir. Ruang pemasaran digital telah menggunakan SEO sebagai dasar bagi banyak praktikum untuk meningkatkan lalu lintas dan e-niaga hingga sedemikian rupa. Di 2019 ini mungkin akan lebih banyak kesulitan dalam meningkatkan situs web Anda ke puncak SERPs.

Tips:

Sudah waktunya Anda untuk menyingkirkan isian kata kunci untuk selamanya. Tahun ini, fokuslah untuk membangun perpustakaan dengan kata kunci niche panjang untuk berintegrasi secara alami ke dalam salinan dan blog situs web Anda. Dan jangan lupa untuk membiasakan diri dengan kata kunci LSI. Apa itu kata kunci LSI? Kata kunci Ini adalah kata kunci yang secara kontekstual terkait dengan niche Anda, seperti sinonim untuk daftar kata kunci utama Anda. Dengan kata lain, kata kunci LSI akan mengalihkan kata kunci utama dalam salinan situs web Anda dan juga dapat membantu menjaga konten Anda, seperti isian kata kunci awal 2000-an. Kata kunci yang ditargetkan secara geografis juga masih sangat penting, dan dapat meningkatkan kata kunci berekor panjang (Long Tail Keyword), dengan menghubungkan bisnis Anda ke suatu lokasi.


Pentingnya Pertemuan Sesama Pengguna Intent


Kata kunci bukanlah satu-satunya hal yang membantu peringkat situs web Anda lebih tinggi dalam hasil pencarian. Tahun ini mungkin akan semakin fokus pada keinginan dan kebutuhan pengguna, terutama Google yang fokus pada niat pengguna. Apakah pembaca Anda lebih suka teks dari pada video untuk mengumpulkan informasi di situs web Anda? Atau apakah infografis dan gambar lebih adil? Apa pertanyaan paling umum yang akan dimiliki pengunjung ke situs Anda yang dapat Anda jawab langsung?

Di web-scape modern, optimisasi mesin pencari tradisional menempati urutan kedua untuk memenuhi keinginan lalu lintas masuk Anda, jadi pertimbangkan untuk mengoptimalkan situs web Anda dengan salinan yang kreatif namun informatif dan blog yang aktif. Semakin baik Anda menjawab tidak hanya pertanyaan awal pembaca Anda, tetapi juga potensi pertanyaan lanjutan, semakin besar kemungkinan pembaca Anda akan tetap ingin berlama-lama di situs web Anda. Rasio pentalan yang lebih kecil, persentase orang yang mengunjungi dan dengan cepat meninggalkan situs web Anda, sangat cocok untuk bot Google.

Optimasi Pencarian Suara


Penjualan speaker pintar seperti Google Home dan Amazon Echo meningkat lebih pesat dua kali lipat selama setahun terakhir. Jangan ketinggalan dalam tren teknologi terbaru; optimalkan pencarian suara dan jadilah yang terdepan.

Menggunakan kata kunci ekor panjang dan metadata yang dioptimalkan dapat berkontribusi secara positif terhadap pengalaman yang didapat pengguna saat input pencarian suara mereka mengarah ke situs web Anda. Pastikan uraian meta situs Anda terdengar wajar ketika diucapkan dan menjawab setidaknya satu dari pertanyaan yang Anda antisipasi dari pengguna.

Konten Video yang Dioptimalkan


Video telah melampaui blog dalam preferensi pembaca, dengan hampir 90% browser lebih memilih untuk menonton dari pada membaca. Tren ini sepertinya tidak akan melambat dalam waktu dekat, jadi penting untuk membangun perpustakaan konten video untuk diintegrasikan ke dalam salinan situs web, blog, dan outlet media sosial Anda. Pastikan metadata pada video Anda dioptimalkan juga, dengan judul dan deskripsi yang kuat secara alami dilindungi dengan kata kunci.

Konten Bentuk Panjang


Pada masa awal internet, salinan situs web dan posting blog yang panjang bukan hanya tren tetapi membuat pembaca tahu bahwa Anda adalah seorang ahli di bidangnya. Siapa yang akan menghabiskan begitu banyak waktu menulis semua informasi itu jika mereka bukan ahli? Melalui berbagai periode dalam sejarah SEO awal, formulir pendek mengambil alih dalam hal konten tertulis.

Seperti yang dinyatakan sebelumnya, semakin lama pengguna berada di situs web Anda, semakin baik situs web Anda melihat ke algoritma peringkat pencarian Google. Konten semacam ini, sangat membantu pembaca yang ingin tahu belajar tentang bisnis Anda dan bagaimana barang atau jasa Anda dapat meningkatkan kehidupan mereka. Gunakan perpustakaan Anda dari kata kunci ekor panjang dan LSI untuk menulis salinan yang sempurna untuk situs Anda. Posting blog antara 1000 dan 2500 kata memungkinkan Anda untuk secara aktif mempublikasikan konten bentuk panjang di niche Anda.

Pemasaran Influencer


Kekuatan dalam pemasaran influencer datang dari gagasan umum bahwa influencer adalah orang biasa, bukan selebritas; mereka biasa sama seperti Anda, dan karena mereka menjamin suatu produk atau merek, itu pasti bagus untuk Anda juga.

Karena influencer sangat banyak dan mudah ditemukan di media sosial, jauh lebih mudah untuk berhubungan dan bekerja dengan mereka. Telusuri melalui situs web seperti Instagram untuk influencer yang dapat meningkatkan pemirsa khusus Anda, lalu hubungi mereka.

Peringkat tinggi pada halaman hasil mesin pencari akan selalu kompleks dan selalu berubah. Dapatkan pegangan yang lebih baik di pasar digital dengan menggunakan tren ini untuk keuntungan Anda, dan Anda akan menjadi yang terdepan dalam kompetisi tahun ini.

Demikianlah Ulasan Kali ini tentang, Seo Tips: Tren Seo Paling Penting Untuk Meningkatkan Traffic Di 2019. Semoga bermanfaat bagi Anda semua dan Terimakasih.

Selengkapnya

5 Tips Cara Menghilangkan Rasa Jenuh & Stres Pikiran Saat Menulis

Ketahuilah jika kalian gemar menulis, tentu pasti ada saja hal yang membuat kita bosan dan merasa jenuh. Wajar saja, karena setiap kita sedang menulis atau membuat tulisan untuk artikel, pasti dimana rasa itu akan datang tiba-tiba. Bukan hanya kita saja, bahkan sampai seorang penulis yang sudah profesional pun akan merasakan hal yang sama. Contohnya seperti: lelah, atau butuh refreshing dikarenakan otak dan pikiran kita tidak selalu harus berfikir di depan laptop dan terlebih lagi jika memaksakan diri untuk menulis atau mengetik.

5 Tips Cara Menghilangkan Rasa Jenuh Dan Stres Pikiran Saat Menulis

Sesuai dengan judul artikel kali ini, disini saya akan memberikan beberapa Tips, untuk menghilakan rasa jenuh saat menulis. Lalu apa saja yang harus kita lakukan untuk mengatasi dan menghilangkan rasa jenuh itu? Selain untuk menghilangkan rasa jenuh, tips ini juga dapat dikatakan bisa untuk menemani kita disaat sedang menulis supaya kita bisa lebih santai dan rilex untuk menangkap ide-ide yang cemerlang dan menuangkannya ke dalam tulisan.

Oke, mungkin kita langsung saja tanpa berlama-lama. Inilah ke 5 Tips tersebut:

1. Menulis Sambil Mendengarkan Lagu-lagu Paforit.
Untuk orang yang lebih aktif sebagai penulis fiksi, sepertinya ini hal utama yang biasa dilakukan. Mengetik, menulis, mencurahkan ke dalam tulisan sambil mendengarkan lagu menggunakan headseat itu sangat membantu. Misal menulis cerita romance, atau percintaan, pasti lagu selow dan romantic pilihannya. Atau bisa juga sesuai selera. Dengan mendengarkan musik kita akan bisa meresapi setiap bait kata yang akan kita tulis. Memang tidak semuanya, ada saja yang tidak dengan cara ini.

2. Menulis Sambil Ditemani Cemilan Atau Makanan Ringan.
Nah untuk tips yang satu ini, kalian jangan sampai terlena, kenapa? Karena disaat sedang asyik nya menulis sambil mengngemil, dan ternyata ditengah-tengah cemilannya habis duluan, alhasil tulisanpun belum terselesaikan sama sekali.

Hmmmm,, ini namanya bukan menulis, melainkan ngemil. 😂

Jika ingin menulis sambil ditemani dengan cemilan atau makanan ringan didekat laptop kita boleh-boleh saja. Bagi sebagian penulis dan banyak pula yang mengatakan, bahwa cemilan merupakan sahabat setia untuk kita disaat sedang menulis. Tetapi ingat! Tetaplah fokus pada tulisan.

Menurut pengalaman jika menulis ditemani cemilan itu akan menambah semangat kita. Mungkin bisa dibilang seperti ada sedikit tenaga kecil penambah Mood Booster kita. Karena dengan begitu setiap imajinasi pasti akan terkumpul sedikit demi sedikit secara perlahan.

3. Hunting Atau Mencari Tempat Yang Lebih Nyaman.
Memang pada mayoritasnya, kalau menulis itu sudah pasti di meja sambil mata melotot tak jemu-jemu di depan laptop kesayangan. Tentu pastinya dari kalian semua ingin tempat yang lebih nyaman, damai, dan tentram untuk nulis, apalagi sambil ngopi-ngopi mmmmmm..pasti lebih mantul.

Kenapa harus mencari tempat yang sunyi, tentram, terlebih jauh dari orang-orang ataupun jauh dari kebisingan? Dikarenakan, jika kita bersama teman atau malahan teman lebih dari satu, saya yakin ini tidak akan membuat tulisanmu banyak tertuang. Terkadang setiap orang berbeda-beda dan tidak menutup kemungkinan bisa dengan lancar melahap banyak tulisan meski di tempat ramai sekalipun. Untuk tips ini, saya mengajak kalian untuk mengambil suasana nyaman untuk sendiri saja menulis. Karena ini akan membuatmu lebih fokus ke menulis. Nilai tambahan, apabila ada pemandangan indah di depan mata, kenapa tidak kita jadikan obyek bahan menulis. Penulis pasti lebih tahu apa yang harus dilakukan untuk bahan tulisan.

4. Tinggalkan Sebentar Untuk Beberapa Waktu.
Apa sih tinggalkan sebentar?
Yang ini maksudnya adalah refreshing dahulu. Iya benar sekali, kita tidak perlu memporsir otak untuk menulis, karena jelas ini otak bukan robot. Ada masanya dimana otak juga butuh istirahat sama halnya dengan kita, juga seluruh anggota tubuh tidak luput dari kata istirahat. Dan ingat! Jangan biarkan hati dan tubuh serta pikiran kalian untuk dipaksa bekerja padahal itu sudah pada titik yang sangat lelah. Kenapa? Karena percuma, bukan ide yang kalian tangkap, malah lelah yang di dapat.

Terlebih tulisan makin tidak karuan karena keterpaksaan. Lalu bagaimana caranya? Saya punya beberapa cara mengatasinnya, diantaranya:

- Membaca buku, kenapa membaca buku? Karena menurut saya, dengan di selingi membaca buku apa saja, kegiatan menulis yang kita tinggalkan sesaat untuk mengisi bahan kembali untuk di tuangkan kita perlu membaca buku. Keuntungan dan manfaatnya dapat menyegarkan otak kita kembali, apalagi membaca komik yang lucu-lucu atau novel favorit kalian. Dengan begitu kita bisa mengumpulkan kosa kata baru yang dapat kita serap.

- Kumpul dengan keluarga, ini adalah hal yang wajib dilakukan di sela kamu menulis. Keluarga itu harta, “harta yang paling berharga adalah keluarga” karena dengan berkumpul dan bercanda dengan keluarga kita akan punya semangat menulis nantinya untuk melanjutkan, apalagi dengan melihat ponakan-ponakan lucu semua keluarga berkumpul, indah bukan?

5. Atribut yang menunjang.
Atribut di sini, atribut yang bagaimana ya maksudnya? Nah saya jelaskan sedikit. Jika salah satu dari kalian yang hobinya menulis di dalam kamar, atau di meja kerja. Supaya tambah lebih berkesan atau bersemangat maka kamu lengkapi peralatan yang menunjang seperti, buku tulis, tip ex atau correction tipe, pena, dan sebagainya. Kita menulis itu juga butuh buku dan kertas untuk coret-coret kan? Sebelum kita mengetiknya.

Walau sebagian penulis beda caranya. Satu hal lagi rapikan meja dan tambahkan hiasan kecil agar melengkapi mood kita dalam menulis. Ini ada gunanya juga, dengan begitu kamu akan lebih nyaman menulis dengan semua hal yang menunjang. Jangan sampai kalian kelabakan mencari semua barang itu sambil menulis, yang ada malah emosi jika mencari barang-barang kita yang entah raib kemana perginya. Seperti Flahdisk yang hilang dan sebagainya. Mengganggu banget kan?

Karena dalam menulis artikel, esai, novel dan lain-lain, itu amat diperlukan riset dan kerangka atau pembuatan potlot yang sebagian akan di tuliskan dahulu di buku atau noted. Maka alat penunjang ini amat diperlukan. Contohnya seperti notes, ini sangat diperlukan kemanapun kalian berada. Dan menjadi salah satu penunjang kamu dalam menulis.

Nah itulah 5 Tips Menghilangkan Rasa Jenuh Saat Menulis dari saya, semoga inspiratif dan bermanfaat.

Jika menurut kalian artikel ini berguna silahkan di share, dan akhir kata saya ucapkan terimakasih.

Selengkapnya