Cara Artikel Terindex Search Engine

Cara Artikel Terindex Search Engine - Mungkin sudah banyak sekali tutorial blogger yang membahas tentang tips seo friendly seperti ini di luar sana, dan kalian tentunya sudah sangat hafal dengan hal seperti ini terutama bagi mereka para webmaster. Namun pada kesempatan ini saya hanya akan memberikan sedikit rangkuman untuk blog ini sekaligus sebagai pelengkap artikel tentang bagaimana cara agar artikel blog bisa terindex dengan cepat setelah artikel kita publish.

Berikut cara agar artikel blog lebih cepat terindex oleh search engine :

1. SUBMIT SITE MAP
Submit Peta situs /sitemap pada Webmaster Tool baik Google maupun Bing. Pastikan blog anda sudah terhubung dengan kedua webmaster tool tadi.

2. FETCH AS GOOGLE
Alangkah baiknya selalu melakukan fetch as google pada artikel yang telah kita publish, caranya : Masuk se google web master tool >> Crawl >> Fetch as google >> copy url artikel >> kemudian klik Fetch dan terakhir klik Submit To Indexs

3. SOCIAL BOOKMARK
Promosikan artikel ke beberapa Sosial bookmark seperti facebook, google plus, linkedin, pinterest, twitter dan sebagainya.

4. ANCHOR TEXT
Menyisipkan anchor text ( link internal yang menghubungkan artikel lainnya ) yang masih berkaitan. Usahakan dalam anchor text ini mengandung keyword, jangan pernah   membuatinternal link dengan anchor text ( klik disini, baca disini dan sebagainya ) karena   tidak akan ada dampak sama sekali untuk SEO walaupun sebenarnya link yang dimaksudkan sudah ada keterkaitan.

5. UPDATE ARTIKEL DI FORUM
Update artikel dengan cara thread di forum yang mempunyai page rank tinggi.

6. PING OTOMATIS
Usahakan melakukan ping otomatis ke beberapa directory setelah update artikel. Misalnya ( pingomatic.com, pingoat.com dan google ping )

7. UNIQ CONTENT
Artikel original dengan content uniq lebih berpeluang menduduki posisi serp, untuk layanan checknya bisa anda lakukan di Plagiarism Checker sebelum artikel di publikasikan. Anda juga bisa membaca tips membuat artikel seofriendly.

8. BLOGWALKING
Luangkan waktu anda sejenak untuk mengunjungi blog - blog sahabat yang masih ada kaitan tema dengan artikel yang anda posting. 

9. UPDATE POST
Blog dengan artikel fresh dan unik akan lebih cepat terindex search engine, jadi usahakan selalu update artikel secara rutin.

10. SUBMIT URL
Selain ping sitemap ke webmaster tool anda juga bisa submit url artikel ke google dan bing. Google Submit Url dan Bing Submit Url

Demikian sedikit tips blogger kali ini semoga bisa membantu.

Pure CSS Modal Dialog Tanpa Javascript

Pure CSS Modal Dialog Tanpa Javascript - Banyak cara untuk menampilkan efek dialog modal mulai dari penerapan CSS murni ,plugin jquery ui modal maupun menggunakan javascript. Nah pada postingan tutorial blogger kali ini saya akan memberikan sedikit contoh membuat efek dialog modal tanpa menggunakan Javascript. Ini sekaligus melengkapi artikel terkait efek dialog modal sebelumnya :

Random Post Efek Modal Jquery UI
Simple Flat UI Menu Modal Dialog
Flat UI Button Awesome Modal Dialog

Namun untuk efek modal kali ini kita hanya akan memanfaatkan pseudo selector (:target) sebagai pembentuk efek yang akan kita tampilkan nantinya. Untuk demonya kurang lebih seperti ini :

DEMO

Sedangkan element pembentuknya adalah sebagai berikut :

.wrap {
  padding: 40px;
  text-align: center;
}
hr {
  clear: both;
  margin-top: 40px;
  margin-bottom: 40px;
  border: 0;
}
h1 {
  font-size: 30px;
  margin-bottom: 40px;
}
p {
  margin-bottom: 20px;
}
.btn {
  background: #e06666;
  border: #e06666 solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #555;
  border: #555 solid 1px;
}
.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #aaaaaa;
  font-size: 30px;
  text-decoration: none;
  position: absolute;
  right: 5px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 20%;
}
.modal-dialog {
  background: #fefefe;
  border: #333333 solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed;
  left: 50%;
  top: -100%;
  z-index: 11;
  width: 360px;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 20px;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  text-align: right;
}

<div class="wrap">
  <h1>Pure CSS Modal Dialog Tanpa Javascript</h1>
  <p>Ini adalah contoh efek modal tanpa Javascript  dan  hanya memakai  pseudo selector ":target" untuk menampilkan efek light box</p>
  <a href="#modal-one" class="btn btn-big">Contoh Modal</a>
</div>
<div class="modal" id="modal-one" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-header">
      <h2>Tampilan Modal Box</h2>
      <a href="#" class="btn-close" aria-hidden="true">x</a>
    </div>
    <div class="modal-body">
      <p>Klik OK jika anda setuju atau klik tanda ( X ) untuk mengakhiri sesi ini</p>
    </div>
    <div class="modal-footer">
      <a href="#" class="btn">OK</a>
    </div>
  </div>
</div>

Untuk isi dialog tinggal mengubah pada content "modal-body" sesuai selera anda

Responsive New Faster Blogger Template

Responsive New Faster Blogger Template - Setelah sekian lama ga ada aktivitas otak atik template blog akhirnya bisa juga membuat template design sederhana dengan konsep  blog cantik dan cepat . Sesuai slogan dari blog ini yang lebih menonjolkan dengan speed loading maka template ini pun saya kembangkan dengan design minimalis dan cepat agar lebih seo friendly yang menjadikan template blogger super cepat.

DEMO

DOWNLOAD

Untuk fitur template ini :

RESPONSIVE NEW FASTER BLOGGER TEMPLATE

  1. Responsive Design Check disini
  2. Mobile friendly Check disini
  3. Simple and Minimalis Design
  4. Faster Loading
      Check GTMetrix
      Check PageSpeed Insight
      Check Web page Test
      Check Pingdom Tool
  5. Thread Komentar
  6. Sticky Menu Responsive
  7. SEO 100% chkme.com
  8. Simple Dropdown Navigasi Menu

Navigasi Breadcrumb

Cari kode

<b:includable id='main' var='top'>

Kemudian ganti dengan kode dibawah ini :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Kemudian tambahkan kode CSS

.breadcrumbs{
background:#ff6c60;
padding:15px 20px 15px 20px;
margin-bottom:19px;
font-size:18px;
text-align:center;
color:#fafafa;
position:relative
}

.breadcrumbs a{
color:#555;
text-decoration:none
}

.breadcrumbs a:hover{
color:#fafafa;
text-decoration:none
}

Demikian sedikit sharing kali ini semoga bermanfaat
Happy Blogging

Simple Progress Animasi CSS3

Simple Progress Animasi CSS3 - Untuk artikel kali ini saya akan memberikan contoh konsep sederhana penggunaan efek keyframe animasi warna css3, yang nantinya bisa kita gunakan untuk memodifikasi tampilan about me dengan skill bar ataupun widget blog lainnya. Cara seperti ini biasa kita jumpai pada portofolio template atau website desain template lainnya. Fungsi dari progress bar ini untuk menggambarkan tingkat pengetahuan admin yang berkaitan dengan web design baik itu css, html, javascript dan pengetahuan lainnya.

Sebagai contoh berikut ini :

DEMO

CSS

#progress { 
list-style: none;
font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  color: #222;
width: 296px;
margin: 50px auto 0;
position: relative;
line-height: 2em;
padding: 30px 0;
}

#progress li { 
margin-bottom:50px; 
background:#e9e5e2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
background-image: linear-gradient(top, #e1ddd9, #e9e5e2);  
height:20px; 
border-radius:10px; 
-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;  
-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;  
box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;  
}

#progress li h3 { 
position:relative; 
top:-25px;
}

.bar { 
height:18px; 
margin:1px 2px;  
position:absolute;
border-radius:10px;
-moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
-webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;  
box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
}

.merah {
width:100%; 
-moz-animation:merah 2s ease-out;
-webkit-animation:merah 2s ease-out;
background-color: #f674a4;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
background-image: -moz-linear-gradient(top, #f674a4, #e06995);
background-image: -ms-linear-gradient(top, #f674a4, #e06995);
background-image: -o-linear-gradient(top, #f674a4, #e06995);
background-image: linear-gradient(top, #f674a4, #e06995);
}

.kuning {
width:90%;
-moz-animation:kuning 2s ease-out;
-webkit-animation:kuning 2s ease-out;
background-color: #f0bb4b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0bb4b), to(#d9aa44));
background-image: -webkit-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: -moz-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: -ms-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: -o-linear-gradient(top, #f0bb4b, #d9aa44);
background-image: linear-gradient(top, #f0bb4b, #d9aa44);
}

.ijo {
width:65%;
-moz-animation:ijo 2s ease-out;
-webkit-animation:ijo 2s ease-out;
background-color: #a1ce5b;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a1ce5b), to(#91ba52));
background-image: -webkit-linear-gradient(top, #a1ce5b, #91ba52);
background-image: -moz-linear-gradient(top, #a1ce5b, #91ba52);
background-image: -ms-linear-gradient(top, #a1ce5b, #91ba52);
background-image: -o-linear-gradient(top, #a1ce5b, #91ba52);
background-image: linear-gradient(top, #a1ce5b, #91ba52);
}

.biru {
width:80%;
-moz-animation:biru 2s ease-out;
-webkit-animation:biru 2s ease-out;
background-color: #66b3cc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#66b3cc), to(#5da3ba));
background-image: -webkit-linear-gradient(top, #66b3cc, #5da3ba);
background-image: -moz-linear-gradient(top, #66b3cc, #5da3ba);
background-image: -ms-linear-gradient(top, #66b3cc, #5da3ba);
background-image: -o-linear-gradient(top, #66b3cc, #5da3ba);
background-image: linear-gradient(top, #66b3cc, #5da3ba)
}

@-moz-keyframes merah {0%  { width:0px;} 100%{ width:100%;}  }
@-moz-keyframes kuning        { 0%  { width:0px;} 100%{ width:90%;}  }
@-moz-keyframes ijo      { 0%  { width:0px;} 100%{ width:65%;}  }
@-moz-keyframes biru   { 0%  { width:0px;} 100%{ width:80%;}  }

@-webkit-keyframes merah       { 0%  { width:0px;} 100%{ width:100%;}  }
@-webkit-keyframes kuning        { 0%  { width:0px;} 100%{ width:90%;}  }
@-webkit-keyframes ijo     { 0%  { width:0px;} 100%{ width:65%;}  }
@-webkit-keyframes biru   { 0%  { width:0px;} 100%{ width:80%;}  }

HTML

<ul id="progress">
<li><span class="bar merah"></span><h3>Merah</h3></li>
<li><span class="bar kuning"></span><h3>Kuning</h3></li>
<li><span class="bar ijo"></span><h3>Ijo</h3></li>
<li><span class="bar biru"></span><h3>Biru</h3></li>
</ul>

Untuk mengubah ukuran sesuai prosentase ganti ukuran {width : ...%} sesuai class masing - masing