Cara Membuat Related Post

Cara Membuat Related Post  / Artikel Terkait SEO untuk memperbagus blog dan supaya pengunjung bisa melihat artikel-artikel yang terkait atau label yang sesuai tema. Menambahkan Artikel terkait atau related post ini sangat penting karena bisa menambahkan nilai seo di Serp engine.

Penting sekali memasang Related Post / Artikel Terkait yang menambahkan nilai SEO untuk mempermudah pengunjung dengan artikel-artikel yang terkait. Memasang Related Post ( Artikel terkait ) akan mempercepat index ke google.

Jika anda yang masih pemula bisa langsung membaca artikel khusus buat pemula yaitu artikel Persiapan SEO untuk pemula, Anda disana bisa melihat dasar-dasar SEO sebelum membuat blog.

Cara membuat Ongoing Series Mirip AWSubs

Kali ini Kang Taha akan memberikan sebuah tutorial yang sangat dicari oleh blogger anime tutorial tersebut adalah cara membuat Ongoing series seperti salah satu fansubs yaitu AWSubs (wardhanime).

Kelebihan dari fitur ongoing series ini adalah memiliki tampilan yang keren dan dilengkapi dengan gambar cover series anime sehingga memiliki daya tarik sendiri bagi pengunjung. Disamping itu cara pembuatannya cukup mudah juga. jadi tak perlu risau tentang editingnya. Disini Kang Taha akan memberikan tutorial yang begitu mudah dipahami buat para blogger anime. Langsung saja tanpa basa basi lagi berikut ini tutorial cara membuat ongoing series seperti AWSubs.

Membuat Navigasi Halaman Blog Menjadi Nomor

Cara terbaru memasang atau membuat Navigasi Halaman Nomor atau Angka (Numbered Page Bavigation) di blogger.

Diistilahkan dengan Page Navigation with WP-PageNavi style, navigasi halaman untuk blogger dengan gaya navigasi halaman blog CMS WordPress.

Disebut terbaru karena kode scriptnya tidak ngelink ke Google Code dan Google Drive yang sudah dihentikan Google, sehingga semua kode script yang disimpan (di-hosting) di sana tidak work lagi.

Jika kode navigasi halaman nomor blog Anda ngelink ke Google Code, dipastikan tidakan muncul. Satu lagi yang baru: navigasi jalaman angka/nomor ini responsive (mobile friendly).

Related Post Valid HTML5 Terbaru

Artikel Terkait (Related Post) Valid HTML5 2014- Artikel terkait atau juga related post berfungsi sebagai penunjuk kepada para pembaca blog atau visitor untuk membaca artikel lainnya yang saling berkaitan dengan artikel yang sedang dibacanya. Banyak sekali artikel terkait atau related post ini yang sudah dibuat, namun banyak Blogger yang menggunakan artikel terkait atau related post dibawah postingan ini tidak valid html5, dan sekarang pada blog Ficri Pebriyana akan membagikan artikel mengenai cara memasang atau membuat related post atau artikel terkait dibawah postingan blog. 

Menjadikan Halaman Postingan Valid HTML5itu sangat berguna dan bermanfaat sekali, ditambah dengan HomePage Valid HTML5 ini akan membantu Artikel Cepat Teridex Google. Pada tahun 2014 ini banyak sekali Blogger yang mengiginkan blognya Valid HTML5 namun ketika mereka menggunakan Template Blog yang sudah dipasangnya sejak lama, mereka kesusahan dalam menjadikan blognya Valid HTML5. Jadi untuk memudahkan blog valid html5 silahkan download saja template yang seo friendly tahun 2014.

Cara Agar Artikel Tidak Bisa di Block (Copy) Menggunakan CSS

Cara Agar Artikel Tidak Bisa di Block (Copy) Menggunakan CSS - Pada kesempatan kali ini blog Ficri Pebriyana akan membagikan sebuah tutorial blog dengan judul artikel Cara Agar Artikel Tidak Bisa di Block (Copy) Menggunakan CSS. Sebelumnya saya pernah membuat artikel mengenai Anti Ctrl + U Dengan Efek Redirect (Mengalihkan)  artikel tersebut menjelaskan tentang bagaimana ketika ada seseorang yang akan mencuri atau mengintip/melihat kode script yang ada pada blog kita dengan menekan tombol ctrl+u dan secara otomatis akan di alihkan ke halaman yang sudah ditentukan sebelumnya. Dan pada malam hari ini saya akan membagikan artikel mengenai cara agar artikel tidak bisa di copy atau copas dengan menggunakan css, biasanya script anti copas ini menggunakan javascript dan ini memang masih bisa kita akali dengan mematikan javascript pada browser yang kita gunakan dan dengan menggunakan tutorial ini mungkin akan sulit ketika artikel kita akan di block untuk di copy (copas) dengan menggunakan kode css.

Cara Membuat Kotak Pencarian di Blog Dengan CSS

Cara Membuat Kotak Pencarian di Blog Dengan CSS - Tak lengkap rasanya ketika sebuah blog belum memiliki sebuah kotak pencarian, kotak pencarian ini sangat bermanfaat dan berguna bagi pengunjung blog yang sedang mencari artikel di blog kita yang mungkin bermanfaat dan sangat dibutukan bagi mereka, dengan begitu kita perlu menambahkan sebuah widget pencarian di blog kita untuk mempermudah pengunjung mencari arikel lainnya. Kotak pencarian pada blog banyak sekali bentuk dan macamnya, namun pada kali ini blog akan membagikannya dengan menggunakan CSS3, jadi ini merupakan kotak pencarian keren dan paling baru dengan menggunakan css3.

Cara Modifikasi Tampilan Widget Followers GFC | Google Friend Connect

Cara Modifikasi Tampilan Widget Followers GFC | Google Friend Connect - Memodifikasi atau mengubah tampilan widget followers blog Google Friend Connect (GFC) atau tombol Join Us tujuannya agar blog menjadi valid html5, dengan mengubah tampilan gfc atau followers blog maka blog akan menjadi valid html5 saat melakukan validasi untuk itu bagi Anda yang blognya memasang widget followers blog alangkah baiknya melakukan modifikasi pada tampilan jumlah followers blog atau google friend connect tersebut.

Mengatasi Komentar Blog Yang Tidak Muncul

Mengatasi Komentar Blog Yang Tidak Muncul - Tidak disangka komentar blog menghilang atau tidak muncul pada sebagian postingan atau ada juga kotak komentar blog yang menghilang begitu saja, menghilangnya kotak komentar atau form komentar pada blog disebabkan beberapa faktor ada yang disebabkan oleh kode css, ada juga yang disebabkan karena Anda salah menekan tombol atau mengatur pengaturan pada postingan blog Anda, atau bahkan Anda menghapus beberapa kode htmldengan tidak sengaja. Semua hal itu bisa saja terjadi pada blog Anda, saya mengalami hal ini ketika saya akan membuat sebuah template blog responsive karena kebetulan saat ini sedang maraknya algoritma baru mobilegeddon yang mengutamakan penelusuran melalui seluler atau handphone, oleh sebab itu saya membuat sebuah template baru yang cocok untuk pengguna seluler atau mobile.

Cara Membuat Efek Teks Pelangi Dengan JavaScript

Cara Membuat Efek Teks Pelangi Dengan JavaScript - Teks dengan efek rainbow atau warna-warni seperti pelangi ini memang sangat menarik untuk di coba di terapkan di blog kita, apalagi dengan efek warna yang berganti-ganti membuat mata pembaca tertuju pada warna tersebut sehingga kemungkinan besar visitor melihatnya. Biasanya para blogger yang baru mengenal blog suka dengan menghiasi blognya dengan beberapa widget atau efek-efek seperti hujan salju dan efek animasi lainnya termasuk efek teks pelangi ini. 

Membuat Garis Pelangi Dengan CSS di Blog

Membuat Garis Pelangi Dengan CSS di Blog - Cara membuat garis di blog warna-warni seperti pelangi di blog memang sangat bagus terlihat lebih berwarna, sebelumnya saya juga pernah membuat artikel mengenai cara membuat efek teks pelangi sekarang saya memberikan tutorial membuat garis pelangi dengan css di blog. Garis ini sangat cocok digunakan untuk di bagian header blog atau bagian footer blog agar desainnya terlihat lebih berwarna dan sangat menarik untuk di lihat oleh pengunjung blog. 

Memasang Script Anti AdBlock di Blog

Memasang Script Anti AdBlock di Blog - AdBlock merupakan plugin yang berfungsi sebagai penghapus atau menyembunyikan iklan pada setiap laman yang sedang kita buka, dengan plugin yang kita pasang pada browser kita memungkinkan kita untuk melakukan browsing lebih cepat karena tanpa adanya iklan yang mengganggu. Namun, di beberapa pihak penggunaan adblock pada browser ternyata menyebabkan kerugian, dianataranya bagi Advertiser atau orang yang beriklan dan Publisher atau orang yang menyebarkan iklan. Kedua pihak ini akan merasakan efeknya, jika setiap orang memasang script pemblokir iklan ini.

5 Style Halaman Navigasi Blog Dengan Angka

Cara Mengganti Halaman Navigasi Blog Dengan Angka

Halaman Navigasi merupakan elemen penting di sebuah blog yang berfungsi untuk menampilkan artikel per halaman mulai dari halaman utama sampai postingan terakhir. Dengan adanya elemen tersebut, pengunjung bisa melihat setiap artikel di blog kita yang menarik untuk mereka baca.

Cara Membuat Tabel Thumbnail Di Blog Untuk Bisnis Online

Membuat tabel di blog tentunya sangat diperlukan jika sewaktu waktu kita akan memposting sebuah artikel yang berhubungan dengan penyisipan gambar, metode pengklasifikasian sebuah benda, artikel yang mendefinisikan sebuah perbandingan, dsb. Namun seperti kita ketahui bahwa blogger untuk sementara ini tidak menyediakan fasilitas untuk membuat tabel di dalam fitur mereka. Karena itu kita sendiri yang harus membuat tabel tersebut dengan cara menyisipkan kode HTML yang dibuat secara manual.

Cara Membuat Anime Ongoing Series di Homepage

Di Postingan ke-3 saya kali ini saya akan membuat tutorial, Cara Membuat Anime Ongoing Series di Homepage ala Fansub.

Cara Membuat Slider Keren dibawah Header

Selamat Malam buat sobat blogger semua. pada kesempatan kali ini aku akan bagikan bagaimana membuat slider post di bawah header tutorial ini merupakan kelanjutan dari cara membuat recent post slide disidebar yang sudah aku share beberapa waktu yang lalu, dan juga permintaan salah satu sobat saya yang kemarin request tentang tutorial ini. untuk melihat DEMOnya silahkan buka halaman Gemsmeet.

Membuat Footer Kolom Pada Template Blogger

Berhubung ada beberapa permintaan dari para pengguna template yang saya desain yang ingin menambahkan footer kolom (footer column), kali ini saya akan share cara membuat atau menambahkan 4 kolom pada template blogger tersebut.

Cara Membuat atau menambah Footer kolom pada Template

• Lahkah pertama login ke blog anda > Design > Edit HTML dan jangan lupa back up terlebih dahulu template yang anda gunakan
• Setelah itu cari kode ]]></b:skin> dan paste kode Css berikut tepat di atas kode ]]></b:skin>

/*----- Colom Footer Bamz-----*/
#footer { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#footer-wrapper { margin:auto;width: 860px; border:0; }
#footer-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.footer {margin: 0; padding: 0;}
.footer .widget {margin: 0; padding: 10px 0px 0px 0px;}
.footer h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:uppercase; font: bold 12px Arial, Tahoma, Verdana;
}
.footer ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.footer li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.footer li a { text-decoration:none; color: #333; }
.footer li a:hover { text-decoration:none; color:#000;}
.footer li:hover { display:block;}
/*----- End Colom Footer Bamz-----*/

• Masih pada halaman Edit HTML, cari kode <div id='credits'>. Kalau sudah ketemu silahkan anda paste kode berikut tepat di atas kode <div id='credits'>

<!-- Kolom Footer -->

<div id='footer'>
<div id='footer-wrapper'>
<div id='footer-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer2' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer3' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- end Kolom footer Bawah -->

Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.

Bisakah cara membuat kolom ini digunakan untuk template lain?

Cara membuat footer kolom ini sebenarnya bisa di gunakan untuk semua template, cuma mungkin cara penempatannya yang berbeda karena setiap template memiliki elemen yang berbeda. Kalau anda ingin mencobanya, silahkan saja. Dan cara paling gampangnya adalah paste kode HTML (kode ke-2) di atas kode </body>.

Hasil yang anda buat ini nantinya akan sama seperti kolom footer pada blog ini. Kalau anda ingin menjadikannya 3 atau mungkin 2 kolom tentu saja bisa. Bagaimana cara membuat footer tersebut menjadi 3 kolom?

Cara merubah footer menjadi 3 kolom

Untuk menjadikannya 3 kolom anda hanya tinggal mengubah lebar kolomnya menjadi 32%. Lihat kodenya di bawah ini

# footer-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#ddd; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }

Selanjutnya hapus kode

<div id='footer-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'>
</b:section>
</div>

Simpan template dan jadilah 3 kolom Footer.

Cara Memasang Realated Post Keren dengan Gambar

Cara Memasang Realated Post Keren dengan Gambar

Kali ini saya akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Ingin tahu caranya bukan? Dengan memberikan gambar pada artikel terkait pada blog kita maka blog akan terlihat lebih menarik,,, naah dengan itu mazinu akan memberikan tutorial blogger ini kepada kalian yang sebelumnya tutorial ini sudah saya pakai dan hasilnya lumayan bagus,, tapi mazinu lebih suka yang simpel2 saja seperti yang mazinu gunakan saat ini! yaitu dengan memasang Artikel Terkait dengan icon sendiri. Tapi semua itu selera sendiri-sendiri. benar kan?

yang hasil Realated Past-nya nanti seperti ini : (gambar disertai judul artikel)

Cara Membuat Widget Search Box Super Keren Dan Responsive

Cara Membuat Widget Search Box Super Keren Dan Responsive - Search Box adalah salah satu unsur alami dari sebuah situs web yang cukup penting, memiliki fungsi yanghampir sama seperti mesin pencari, yaitu untuk mencari kata kunci atau konten tertentu di website maupun blog. Setelah Saya Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive Kali Saya akan Memberikan Tutorial Cara Membuat Widget Search Box Super Keren Dan Responsiv.
Pada Kali ini Search Box nya akan saya bagi menjadi 4 type Search Box. Dan Cara Memasang nya Adalah Sebagai Berikut :

Klik Menu Layout ( Tata Letak ) 

   

 Pilih Add a Gadget

Pilih HTML/JavaScript

Dan Copy Script nya

Oke dan dibawah ini adalah script dari keempat seacrh box yang telah saya buat  :

1. Simple search

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
body{
  text-align:center;

  background-color:#ebebeb;
}
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}   
 /* Form wrapper styling */
.search-wrapper {
width: 240px;
margin: 45px auto 50px auto;
  border: 1px solid #ccc;
border-radius: 5px;
  
}

/* Form text input */

.search-wrapper input {
width: 160px;
height: 20px;
padding: 10px 15px;
float: left;
font: normal 16px 'Arial', 'Tahoma';
border:0;
background: #fff;
border-radius: 5px 0 0 5px;
}
.search-wrapper input:hover + .search-wrapper button {
    background: #ccc
}

.search-wrapper input:focus {
    outline: 0;
    background: #FFF;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #c6c7c6;
   font-weight: normal;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border:0;
padding: 0;
cursor: pointer;
height: 40px;
width: 50px;
font: bold 18px 'Arial', 'Tahoma';
color: white;
background: #3498db;
border-radius: 0 5px 5px 0;
transition: all 2.0s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}
  
.search-wrapper button:hover{   
    background: #2980b9;
    transition: all 2.0s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
} 
  
.search-wrapper button:active,
.search-wrapper button:focus{ 
    background: #329400;
    outline: 0; 
    transition: all 0s linear;
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -ms-transition: all 0s linear;
    -o-transition: all 0s linear;

}


.search-wrapper button:hover:before{
    border-right-color: #e54040;

}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}     

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"  class="search-wrapper cf">
        <input name="q" type="text" placeholder="Search" required="" />
        <button type="submit" id="button-submit"> <span class="fontawesome-search"></span>
        </button>
    </form>

 

2. Corner shape style

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}   
 /* Form wrapper styling */
.search-wrapper {
width: 252px;
margin: 15px auto;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.search-wrapper input {
width: 150px;
height: 20px;
padding: 10px 15px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}

.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 72px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
  
.search-wrapper button:hover{   
    background: #e54040;
} 
  
.search-wrapper button:active,
.search-wrapper button:focus{ 
    background: #c42f2f;
    outline: 0; 
}

.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.search-wrapper button:hover:before{
    border-right-color: #e54040;
}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}     

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off" class="search-wrapper cf">
        <input type="text" name="q" placeholder="Search here..." required="" />
        <button type="submit" id="button-submit" >Search</button>
    </form>

 

3. Style With Icon

<style>
@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.search {
  width: 100%;
  position: relative;
}
.search:before {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-family: 'FontAwesome';
  content: '\f002';
  background: #34495e;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smooth: always;
}
.searchTerm {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 5px solid #34495e;
  padding: 5px;
  height: 40px;
  border-radius: 5px;
  outline: none;
}
.searchButton {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off" class="search">
  <input class="searchTerm" type="search"  name="q"   placeholder="Enter your search term ..." /><input class="searchButton" id="button-submit" type="submit" />
</form>

 

4. Basic Style

<style>
.is-vishidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
}
.pattern {
  padding: 1em;
  line-height: 1;
}
.f {
   position: relative;
}
input {
  display: block;
  border: 1px solid #000;
}
input[type=search] {
    width: 100%;
    padding: 1em;
    padding-right: 7em;
    position: relative;
   top: 0;
}
#button-submit {
  position: absolute;
  right: 0.75em;
  top: 0.5em;
  bottom: 0.5em;
  z-index: 1;
  width: 6em;
  padding: 0;
  cursor: pointer;
}
</style>
<div id="pattern" class="pattern">
  <form id="searchbox" method="get" action="/search" autocomplete="off" class="f">
      <label class="is-vishidden">Search the site</label>   
    <input type="search"  name="q" placeholder="Enter your keywords..."/>
      <input id="button-submit" type="submit" class="btn search-submit" value="Search" />
</form>
</div>