Cara Membuat Recent Post Warna-Warni ala Kang Taufik Nurrohman Lebih SEO Friendly

Penulis : Insan Biasa

Cara Membuat Recent Post Warna-Warni Lebih SEO Friendly - Anda seorang blogger ? Jika ya, pasti tahu dong dengan Kang Taufik Nurrohman, pemilik blog DTE yang membahas tentang berbagai kode script misalnya CSS, HTML, Jquery, dan Java Script serta PHP. Karena keahlian beliau tersebut tidak salah jika beliau dianggap sebagai salah satu blogger terbaik Indonesia dalam masalah coding dan tidak perlu heran juga jika blog beliau dengan alamat www.dte.web.id dijadikan sebagai tempat belajar ngeblog bagi pemula ataupun para blogger senior lain yang ingin menambah ilmu tentang kode script agar bisa merancang template yang baik, keren, dan tentu saja memenuhi kriteria SEO friendly.

Ada begitu banyak karya Kang Taufik yang sangat bermanfaat dan menjadi inspirasi bagi para blogger termasuk para master perancang dan pembuat template top Indonesia sekaliber Kang Ismet dan Mas Sugeng. Contohnya antara lain adalah widget recent post bergambar dan popular post with thumbnail serta related post bergambar yang indah dipandang mata.

Modifikasi Widget Recent Post Bergambar Warna-Warni Kang Taufik Nurrohman

Berkaitan dengan Kang Taufik Nurrohman ini, pada kesempatan yang baik ini saya mencoba membahas tentang salah satu hasil karya beliau yang dianggap sangat populer, yaitu : recent post warna-warna SEO friendly, yaitu : widget artikel terbaru bergambar dan berwarna-warni yang memenuhi standar SEO di mana loadingnya cepat dan tidak membebani blog serta mempunya title tag alias priview judul postingan saat link pada widget recent post disorot dengan pointer mouse. Namun, menurut saya pribadi recent post ala Kang Taufik Nurrohman tersebut bisa dibuat menjadi lebih SEO friendly. Nah, untuk hal itu saya coba menambahkan atau memodifikasi kode script artikel terbaru itu agar benar-benar memenuhi kategori SEO friendly yang diinginkan oleh mesin pencari khususnya Google dan tentu saja oleh blogger serta pengunjung blog atau website. Berikut ini contoh kode script recent post ala Kang Taufik Nurrohman yang sudah saya edit :

Klik show untuk melihat:

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

<style scoped="scoped">

#ptb-repost {

font:normal normal 11px/normal Arial;

color:#333;

margin:0 auto;

padding:0;

min-height:100px;

background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_2cgynZn6HougRxiE8JK2Qjf5H6Cr7qxNj3upa9daXuJhymrNJ86PyuvRiq4ugnAhR9hwyDkSjTUMECw_wH7ch9NCMpyq-TFLvqcOtoOXyXy4JK3NpzOQsF1KCM180pRDO_Ssts1WyQ/s1600/loading.gif') no-repeat 50% 50%;

}

#ptb-repost li {

list-style:none;

margin:0;

padding:8px;

background-color:white;

border-bottom:1px solid #ddd;

}

#ptb-repost li a img:hover {

-webkit-transform: scale(1.1, 1.1);

-moz-transform: scale(1.1, 1.1);

-ms-transform: scale(1.1, 1.1);

-o-transform: scale(1.1, 1.1);

transform: scale(1.1, 1.1);opacity: 0.5;

}

#ptb-repost li a img {

float:left;

margin:0 10px 0 0;

padding:0;

border:none;

background:none;

outline:none;

}

#ptb-repost li a.title {

font:normal normal 12px/normal Oswald;

display:block;

text-decoration:none;

color:#fdfdfd;

}

#ptb-repost li a.title:hover {

text-decoration:none;

color:#ffffff;

}

#ptb-repost li:nth-child(1) {background-color:#E11E28;margin-right:0%}

#ptb-repost li:nth-child(2) {background-color:#FECB09;margin-right:0%}

#ptb-repost li:nth-child(3) {background-color:#6EBE27;margin-right:0%}

#ptb-repost li:nth-child(4) {background-color:#FD3C03;margin-right:0%}

#ptb-repost li:nth-child(5) {background-color:#2E2EFE;margin-right:0%}

#ptb-repost li:nth-child(6) {background-color:#149A48;margin-right:0%}

#ptb-repost li:nth-child(7) {background-color:#DF013A;margin-right:0%}

#ptb-repost li:nth-child(8) {background-color:#01DFD7;margin-right:0%}

#ptb-repost li:nth-child(9) {background-color:#8A2908;margin-right:0%}

#ptb-repost li:nth-child(10) {background-color:#5F4C0B;margin-right:00%}

</style>

<ul id="ptb-repost"></ul>

<script>

//<![CDATA[

var rp_homePage = "http://oke-reload.blogspot.com/",

    rp_numPosts = 5,

    rp_thumbWidth = 50,

    rp_numChars = 80,

    rp_sortByLabel = false,

    rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinO-97NqzehJN247q9eMQxpEQNYgQm5sIKoLIdxALm8cJwI3vlLGOUz1o9PZDWuNAz4E6y33VG_AG9-psZhTcNSiukYQwtv00aARUSnSUlbaQzTFIXK1WPEYJT0gs6oHMy3k-gC6nlew8/s1600/minismallest-img.png",

    rp_newTabLink = true,

    rp_loadTimer = false;

//]]>

</script>

<script src="https://dl.dropboxusercontent.com/s/dpejlk23zlafv7h/Artikel%20Terbaru.js" type="text/JavaScript"></script></div>

Kode Script Apa Saja yang Saya Ubah ?

Berikut ini penjelasan detail tentang modifikasi kode recent post with thumbnail warna-warni lang Taufik Nurrohman agar lebih SEO friendly yang saya lakukan.

1. Autoscroll

Pada kode artikel terbaru (recent post) bergambar di atas saya menambahkan kode script autoscroll dengan kode :

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #999999;">

Kode Recent Post

</div>

Kenapa memakai autoscroll atau fungsi gulir ke atas-ke bawah atau ke bawah-ke samping ? Jawabannya adalah untuk menghemat ruang di blog dan sudah pasti untuk mempercepat loading widget.

2. Waktu Loading

Saya juga mengubah kode waktu loading widget posting terbaru agar widget bisa muncul dengan cepat mwskipun jaringan agak lambat. Kode awalnya :

rp_loadTimer = true;

Setelah saya ubah menjadi seperti berikut ini :

rp_loadTimer = false;

Kenapa saya ubah waktu tunggu loading widget ini ? Sebab ternyata jika waktu tunggunya masih memakai kode 'true' sering sekali widgetnya tidak muncul lebih-legih ketika internet sedang lola.

3. Pemindahan Tempat File Hosting

Selain dua perubahan itu saya juga mengubah tempat penyimpanan file hosting kode java script recent post bergambar dan berwarna-warni tersebut dengan menyimpannya di Drop Box. Tujuannya apa ? Tentu saja untuk mempercepat proses loading widget artikel terkait itu. Dengan begitu, nilai SEO dari segi kecepatan proses loading blog akan bertambah.

4. Menambahkan Script Code Terbuka di Tab Baru

Salah satu kekurangan kode script recent post kang Taufik Nurrohman ini adalah tidak dilengkapi kode target="_blank", yaitu : kode agar link postingan yang diklik terbuka di tab baru. Dengan tidak adanya fitur itu maka nilai bounce rate pada suatu postingan akan meningkat sebab ketika pengunjung mengklik link atau judul di widget artikel terbaru, otomatis postingan yang sedang dibaca oleh pengunjung akan tertutup. Tentu hal ini kurang bagus buat seorang blogger yang sangat mendalami ilmu SEO.

Dengan memasukkan keempat perubahan di atas, akan membuat widget recent post ala Kang Taufik Nurrohman menjadi lebih SEO friendly. Demikian pendapat saya yang masih dalam tahap pembelajaran mengenai ilmu SEO dan membuat template. Akhir kata saya ucapkan maaf jika tulisan saya ini tidak berkenan atau tidak berkualitas sebab saya masih seorang blogger pemula (newbie). Wassalam !

Anda sedang membaca artikel tentang Cara Membuat Recent Post Warna-Warni ala Kang Taufik Nurrohman Lebih SEO Friendly dan anda bisa menemukan artikel Cara Membuat Recent Post Warna-Warni ala Kang Taufik Nurrohman Lebih SEO Friendly ini dengan url https://oke-reload.blogspot.com/2015/03/cara-membuat-recent-post-warna-warni-ala-kang-taufik-nurrohman-lebih-seo-friendly.html . Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Recent Post Warna-Warni ala Kang Taufik Nurrohman Lebih SEO Friendly ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Tag : Tips Blog

Share :