Notice - Lihat Pengumuman Pemenang Event Jepret Beranda BAGAS31.com
Halo Sobat!, Members Area : Daftar - Masuk · Pasang Iklan · Peta Situs

Top Kategori

Pages

Alasan Kenapa Validasi HTML itu Tidak Penting

Written By Unknown on Minggu, 30 Maret 2014 | 12.07


Validasi HTML itu Tidak Penting



Validasi HTML ataupun HTML5 menjadi hal yang begitu digemari oleh para pembuat template dan juga blogger-blogger yang sedang belajar memodifikasi tempate. Saya sendiri dulu juga menjadi salah satu blogger yang begitu mementingkan masalah validasi ini. Namun untuk saat ini sudah tidak begitu mementingkannya.



Berikut ini adalah alasan-alasan kenapa validasi HTML sudah saya anggap tidak penting:




Blogger Tidak Seharusnya Valid



Alasan pertama adalah karena platform blogger yang tidak seharusnya dibuat valid. Kenapa tidak harus valid? Karena kebanyakan error-error yang terdapat pada blog-blog di blogger bukan karena faktor pembuat template yang nggak bisa coding, tapi karena memang error dari mesin blogger-nya sendiri.





Kebanyakan pembuat template mengorbankan banyak fitur yang ada di blogger demi valid HTML. Salah satu contoh sederhananya adalah fitur Quick Edit untuk memudahkan kita mengedit widget tanpa harus masuk ke dashboard.





Sebagai pengguna blogger, saya rasa itu adalah hal yang salah yang selama ini saya sendiri juga melakukannya. Alangkah lebih baik untuk memaksimalkan fitur-fitur yang ada di blogger daripada valid HTML yang tidak begitu dibutuhkan manfaatnya.




Browser Sekarang Sudah Canggih


Alasan kedua adalah karena zaman sekarang browser atau perambaan web sudah canggih. Website-website dengan struktur kode berantakan sekalipun tetap bisa tampil dengan baik. Jadi saya rasa bukanlah hal yang wajib untuk memiliki struktur kode yang benar-benar perfect valid HTML.




Tidak Ada Yang Peduli Jika Kode HTML-mu Valid



Untuk apa berusaha keras membuat kode HTML valid 100% kalau ternyata tidak ada yang mempedulikannya? Yaps, pengunjung blog kita datang ke blog kita untuk mencari konten buka mencari kode. Percuma kode HTML-nya valid tapi isi dari blog kita sendiri "error."




Tidak Ada Hubungannya Dengan SEO



Ini adalah alasan yang banyak digunakan para blogger kenapa blognya memilih untuk dibuat valid HTML, yaitu SEO. Banyak yang percaya validasi HTML dapat membantu meningkatkan ranking blognya di Google. Padahal kenyataan sesungguhnya adalah Tidak, validasi HTML tidak akan membantu posisi blog sobat di hasil pencarian Google.



Sudah lumayan lama saya menggunakan struktur template valid HTML pada blog ini dan saya tidak bisa melihat efek apapun terhadap SEO pada blog ini hingga akhirnya saya tidak lagi begitu mempedulikannya.





Berikut ini adalah penjelasan-penjelasan dari Matt Cutts tentang pengaruh validasi HTML terhadap SEO:













Dari penjelasaan pada dua video di atas setidaknya bisa diambil kesimpulan bahwa Google tidak begitu mementingkan validasi HTML pada sebuah halaman web. Seperti apa yang dikatakan oleh Matt Cutts valid HTML mungkin untuk saat ini tidak berpengaruh terhadap rangking, tapi bisa saja akan menjadi salah satu faktor di masa depan.




HTML5 dan SEO


Saya lihat masih banyak blogger-blogger terutama blogger pemula yang salah pemahaman terhadap valid HTML dan HTML5. Untuk membuat kode HTML yang valid tidak harus menggunakan HTML5. Semua kode HTML, entah itu HTML5 ataupun HTML versi sebelumnya bisa divalidasi.



Khusus masalah HTML5, banyak pakar SEO yang berpendapat bahwa struktur HTML5 memiliki peranan terhadap SEO. Hal itu bisa saja benar karena pada HTML5 terdapat beberapa element-element baru yang dapat membantu web browser ataupun search engine memahami isi halaman web lebih baik atau bisa disebut juga Semantic Elements. Beberapa contoh elemen tersebut adalah: <header>, <article>, <nav>, <footer> dll.



Saya sendiri sudah menggunakan struktur HTML5 tersebut lumayan lama dan untuk masalah SEO bisa jadi memang berpengharuh tapi tentu saja tidak ada yang bisa memastikannya. Tapi khusus untuk masalah validasi saya rasa tetap tidak memilki pengaruh apapun terhadap SEO, setidaknya untuk saat ini.




Manfaat Validasi HTML



Meskipun validasi bagi saya bukanlah hal yang begitu penting tapi bukan berarti validasi itu buruk dan tidak ada manfaatnya. Agar adil, berikut ini saya tuliskan beberapa manfaat validasi HTML yang bersumber langsung dari W3C.





  1. Validasi sebagai alat debugging

  2. Validation as a future-proof quality check (maaf kurang begitu bisa menerjemahkan :D)

  3. Validasi untuk memudahkan pemeliharaan 

  4. Validasi membantu mengajarkan praktik-praktik yang baik 

  5. Validasi adalah tanda profesionalisme




Apakah manfaat-manfaat di atas penting buat sobat? Jika sobat adalah seorang Web Developer, mungkin jawabannya adalah YA, tapi jika sobat hanyalah seorang blogger biasa, saya rasa jawaban yang pas adalah TIDAK PENTING.




Terakhir..


Validasi HTML bagi saya tidak begitu penting namun tentu saja bukan berarti banyak error itu bagus. Memiliki struktur kode yang bersih dan sedikit error sudah pasti adalah hal yang baik. Tapi untuk benar-benar valid 100% bukanlah sebuah keharusan.



Untuk masalah SEO saya rasa selama blog kita berisi konten-konten yang bagus dan optimasi offpage yang benar maka meskipun blog kita tidak valid HTML sekalipun Insya Allah akan tetap mendapatkan ranking yang bagus.



Nah mungkin hanya segitu saja apa yang bisa saya sampaikan pada postingan kali ini tentang validasi HTML. Bagi yang mempunyai pendapat lain, silakan bisa berbagi melalui form komentar.





Unknown | 12.07 | 0 komentar

Game Balap 3D Gratis : Motoracing

Download Game Balap 3D : Motoracing


Masuki dunia yang serba cepat dari balap styled biking challenge 3D yang realistis. Pilih nama untuk pembalap kamu dan kemudian pilih motor balap canggih yang kamu suka. Setiap motorcross mempunyai spesifikasi yang berbeda baik itu kecepatan, akselerasi dan handling. Selesai memilih stye motor kamu dengan memilih skema warna yang radikal. Sekarang saatnya untuk menghidupkan mesin dan memulai balapan!

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 06.57 | 0 komentar

Aplikasi Gratis Untuk Upload Video Ke YouTube : Free YouTube Uploader

Upload Video Ke YouTube Dengan Cepat Menggunakan Free YouTube Uploader

Free YouTube Uploader adalah aplikasi desktop PC pertama untuk meng-upload video ke YouTube tanpa menggunakan antarmuka web asli YouTube. Jika kamu sering meng-upload video, Free YouTube Uploader yang mudah digunakan, akan menjadi menghemat banyak waktu kamu saat mengupload video ke YouTube. 

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 00.36 | 0 komentar

Download Aplikasi Gratis Untuk Rekam Video Melalui WebCam : Free Webcam to AVI

Written By Unknown on Sabtu, 29 Maret 2014 | 12.48

Rekam Video Melalui WebCam Dengan Free Webcam to AVI

Free Webcam to AVI adalah sebuah aplikasi Windows yang berfungsi untuk membantu kamu merekam streaming video yang diproses oleh webcam kamu dan menyimpan hasil rekaman tadi ke format file video AVI.

Tampilan Free Webcam to AVI sangat sederhana dan terdapat beberapa pengaturan konfigurasi, walaupun begitu Karena Free Webcam to AVI adalah program gratisan yang terdapat iklan maka tata letak di aplikasi ini tidak cukup bersih.

Pada Free Webcam to AVI terdapat opsi preset untuk memilih beberapa profil output video, tiap profil dibedakan oleh pengaturan lebar, tinggi, FPS, dan stride output video. Selain preset untuk pengaturan video terdapat juga preset untuk pengaturan audio yang pada tiap profil terdapat pengaturan bits per sample, channels, dan samples per second yang berbeda.

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 12.48 | 0 komentar

Gratis Software Simulator Indikator LED Hard Disk

Written By Unknown on Jumat, 28 Maret 2014 | 22.02

Download Gratis Software Simulator Indikator LED Hardisk

Terkadang sangat berguna berguna untuk mengetahui apakah indikator LED hard disk pada komputer saat menyala. Indikator LED menyala itu akan menjelaskan mengapa komputer kamu berjalan lambat, atau menjadi patokan untuk tidak me-restart komputer saat itu (karena indikator LED masih menyala).

Masalahnya, tidak semua komputer dilengkapi dengan aktivitas hard disk LED lagi. Dan bahkan jika PC kamu memilikinya, mungkin PC kamu terletak di bawah meja dengan demikian indikator hard disk LED tidak mudah untuk dilihat .


Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 22.02 | 0 komentar

Software Pengembangan Perangkat Lunak : Phyton

Written By Unknown on Kamis, 27 Maret 2014 | 09.11

Download Software Pengembangan Perangkat Lunak : Phyton 

Python adalah bahasa pemrograman berorientasi objek dinamis yang dapat digunakan untuk berbagai jenis pengembangan perangkat lunak. Python menawarkan dukungan yang kuat untuk integrasi dengan bahasa tools lain, dilengkapi dengan standar libraries yang luas, dan dapat dipelajari dalam beberapa hari.

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 09.11 | 0 komentar

3 Aplikasi CMS Gratis Terbaik

Written By Unknown on Rabu, 26 Maret 2014 | 09.05

Software CMS Gratisan Terbaik

Sebuah situs web CMS (content management system) adalah program server yang menciptakan sebuah website tanpa ada halaman web statis di server. Sistem CMS berinteraksi dengan database, dan membangun halaman web secara on-the-fly ketika ada permintaan dari browser. Gambar atau konten lainnya lalu ditambahkan ke halaman yang dihasilkan tersebut dan untuk tata letak halaman didasarkan pada template. Karena tidak ada halaman tetap di server, maka biasanya pada server terdapat cache ('memory pool'), sehingga jika halaman yang telah dibuat beberapa saat lalu dapat dibuat langsung dari memori dan tidak perlu di buat ulang dari awal.

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 09.05 | 0 komentar

5 Aplikasi Gratis Terbaik Untuk Ripping DVD

Written By Unknown on Selasa, 25 Maret 2014 | 09.24

Software Gratis Terbaik Untuk Ripping DVD

Sementara CD ripper umumnya digunakan untuk menyalin raw audio digital dari CD ke file MP3 atau dalam format audio lainnya, DVD ripper biasanya digunakan untuk menyalin konten audio dan video dari DVD ke file dalam format AVI, MP4, MPEG, WMV atau format video lainnya. Lalu file hasil ripping disimpan dalam hard disk atau perangkat media lain untuk lebih lanjut diedit, di backup, di sharing atau di putar tanpa perlu memuat keping DVD lagi. 

Jika kamu memiliki koleksi film DVD atau video musik dan ingin mengekstrak atau membuat salinan data cadangan lengkap dari DVD ke file video dalam format yang dipilih, ini adalah DVD rippers gratis yang kamu mungkin cari.

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 09.24 | 0 komentar

Aplikasi Gratis Untuk Rubah Gambar Logon Windows 7 : LogonChanger.com

Written By Unknown on Senin, 24 Maret 2014 | 21.07

Rubah Gambar Logon Windows Dengan LogonChanger.com

LogonChanger.com merupakan software yang intuitif dan dapat diandalkan untuk sistem Windows 7, LogonChanger.com menawarkan fitur untuk merubah gambar layar pembuka ke gambar yang kamu inginkan hanya dalam beberapa langkah.

Setelah proses instalasi yang singkat dan lancar, kamu dapat memulai mulai mencari gambar-gambar yang kamu ingin gunakan sebagai gambar layar pembuka pada komputer kamu .

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 21.07 | 0 komentar

Aplikasi Gratis Untuk Konversi Gambar Ke PDF : i2pdf

Written By Unknown on Minggu, 23 Maret 2014 | 10.00

Aplikasi Gratis Untuk Konversi Gambar Ke PDF i2pdf

i2pdf (image to pdf) adalah aplikasi yang yang cepat dan ringan, dibangun untuk membuat dokumen Adobe PDF dari koleksi gambar yang biasanya merupakan gambar-gambar hasil scanning atau gambar foto digital. i2pdf tidak memerlukan instalasi.

i2pdf adalah merupakan tool khusus yang melakukan pekerjaan dengan efektif. Penggunaannya sangat sederhana: jalankan file exe, drag drop gambar anda ke jendela aplikasi lalu tekan tombol tombol "Build PDF".

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 10.00 | 0 komentar

Software Antivirus Terbaik 2014

Written By Unknown on Sabtu, 22 Maret 2014 | 07.58

Software Antivirus Terbaik 2014

Perangkat lunak antivirus menyediakan lapisan perlindungan penting dari banyak virus, trojan, worm, spyware, adware, dialer, keylogger dan infeksi rootkit. Program antivirus tradisional hanya mendeteksi virus dan spyware remover hanya mendeteksi spyware tetapi saat ini batas antara antivirus dan spyware tidak jelas . Kebanyakan antivirus saat ini memiliki tingkat deteksi cukup baik dari semua bentuk malware. Istilah malware termasuk virus, trojan, worm, spyware, adware, dialer, keyloggers dan ancaman rootkit yang melakukan kegiatan berbahaya pada komputer.

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 07.58 | 0 komentar

Game Facebook Gratis : Contracts Wars

Written By Unknown on Jumat, 21 Maret 2014 | 11.54

Facebook Game App : Contracts Wars

Contracts Wars merupakan game multiplayer Free2Play FPS dengan elemen RPG yang dikembangkan sebagai aplikasi berbasis browser untuk jejaring sosial. Pemain bisa langsung bermain di Contracts Wars di jejaring sosial favorit seperti facebook tanpa harus download atau instalasi langsung.

Pada game Contracts Wars pemain akan dibawa ke dunia masa depan di mana semua sumberdaya dihabiskan oleh perusahaan-perusahaan militer swasta. Senjata-senjata canggih, prajurit berpengalaman dari seluruh dunia, operasi pertempuran yang berbeda , dan tentunya sebuah  kemenangan dan kehormatan semuanya ada disini. 

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 11.54 | 0 komentar

Game Android Gratis : Mahjong Forever

Download Game Android Mahjong Forever Gratis


Mungkin sudah tidak asing bagi anda dengan permainan yang satu ini. Hanya sekedar mengingatkan bahwa di masalalu game ini sangat populer karena di windows 7 permainan ini sudah ada dan gratis nah bagi anda yang ingin sekedar bernostalgia atau anda penggemar game asah otak maka wajib buat anda untuk mendownload games ini.

Mahjong Forever adalah termasuk game terbaik untuk jenis game-game mahjong yang dibuat untuk os android karena di dukung fitur-fitur yang lumayan baik.

Terdiri dari 225 tingkatan yang unik,mamiliki banyak tema seperti : Musim panas, Flip Flops, Ocean, Kunang-kunang, Bintang, bola pantai, pohon-pohon palem, keranjang piknik, My Ice Cream, Sunglasses, Shades 3D, berenang, air, istirahat, olimpiade, perahu, dll.

Lihat Selengkapnya Dan Download Aplikasi Ini »
Unknown | 01.31 | 0 komentar

BroSense Blogger Template, Template untuk Adsense

Written By Unknown on Selasa, 18 Maret 2014 | 12.14

Sudah lumayan lama saya tidak berbagi template gratis, kali ini Alhamdulillah bisa berbagi template gratis lagi, meskipun template yang akan saya bagikan kali ini bukanlah template wah, hanya sebuah template sederhana.





Template ini saya buat sebenernya bukan khusus untuk saya bagi-bagikan, tapi untuk saya pasang di blog milik saya sendiri. Tapi nggak ada salahnya juga untuk dibagiin.





Desain template ini cukup sederhana, dan terlihat sangat kecil karena memang template ini sengaja saya buat dengan ukuran yang kecil untuk mengoptimalkan iklan Adsense pada blog saya.





Bagi sobat yang mungkin penasaran dan pengin mencobanya bisa melihat secreenshotnya berikut ini:





BroSense Blogger Template




Fitur-fitur, tutorial pengaturan, link demo dan link download untuk template ini bisa sobat lihat DI SINI.





Terima kasih, semoga bermanfaat!

Unknown | 12.14 | 0 komentar

Beberapa Tools Online yang Sering Saya Gunakan

Written By Unknown on Sabtu, 15 Maret 2014 | 16.57

Selain menggunakan software-software pendukung sebagai alat untuk menunjang aktivitas blogging, saya juga menggunakan beberapa tools online yang dapat diakses di internet.






image credit: sparkyhub.com



Tools online yang saya gunakan hampir kebanyakan gratis, tapi ada juga beberapa yang berbayar.



Di bawah ini adalah daftar tools online yang sering saya gunakan. Insya Allah akan selalu saya update seiring dengan perkembangan dunia blog dan juga pengalaman ngeblog yang saya miliki.






Domain :




Regsitrar atau tempat beli domain terbaik yang sudah saya pakai sejak lama. Bagi sobat yang bingung nyari tempat beli domain yang bagus, saya rekomendasikan untuk menggunakan Namecheap.









File & Web Hosting :


Hawkhost

Web hosting yang saat ini saya gunakan untuk beberapa blog WordPress milik saya. Web hosting ini terkenal dengan kualitasnya yang tidak murahan meskipun harganya murah.



Box.com

File hosting yang saya gunakan sebagai tempat menyimpan koleksi Blogger Template hasil kurang kerjaan saya.








Umum :


Google Webmaster Tool

Tool wajib digunakan dari google untuk memonitor kinerja situs/blog kita di mesin pencari.

 

Bing Webmaster Tool

Sama halnya seperti Google Webmaster Tool, Bing juga punya tool-nya sendiri.

 

Google Submit URL

Bagi yang blognya lama keindex google, submit lewat sini agar langsung terindex.



Bing Submit URL

Yang blognya kepengin terindex di mesin pencari Bing, jangan lupa submit URL lewat sini.






Konten : 


Copyscape

Cek keunikan artikel.

 

Google Trends

Update terus hal-hal yang sedang paling banyak dicari di Google.

 

Google AdWords: Keyword Planner

Bingung nyari keyword bagus? gunakan tool ini.

 

Thearticlespinner.com

Tool rewrite artikel khusus untuk bahasa Indonesia.

 

Best Free Spinner

Tool rewrite artikel bahasa inggris gratis.

 

Free Article Spinner

Artikel spinner generator.

 




SEO :


MOZ Open Site Explorer

Link analysis tools.

 

Majestic SEO Site Explorer

Link analysis tools.



Ahrefs

Link analysis tools.



Bulk Page/Domain Authority Checker

Cek Domain Authority dan Page Authority secara Bulk.



Bulk Metrics Checker

Alternatif yang gak kalah keren untuk mengecek Domain/Page Authority.



Google SERPs Checker

Cek posisi blog di google.



Cekpr

Cek pagerank.



Bulk Pagerank Checker

Cek pagerank banyak URL sekaligus.



Small SEO Tools

Macam-macam tools keperluan SEO ada di sini.



Expired Domains

Tempat khsusus nyari domain expired.



Private Proxies

Private proxies untuk keperluan software scrapebox.






Coding & Design :


HTML Encoder

Parse HTML.



Rich Snippets Testing Tool

Test google rich snippets.



Markup Validation

Test Validasi HTML.



PageSpeed Insights

Test kecepatan loading blog versi Google.



Gtmetrix

Test kecepatan loading blog versi Gtmetrix.



Online CSS Unminifier

Uncompress CSS dengan mudah.



Online JavaScript Beautifier

Uncompress JavaScript dengan mudah.



Online Javascript Compression Tool

Compress file JavaScript.



Placeit

Screenshot tampilan blog di layar smartphone, tablet dan desktop






Lain-Lain :




Compress file PDF





Pendekin URL







Nah itulah beberapa tools online yang sering saya gunakan. Mudah-mudahan bisa menjadi referensi buat sobat semua.

Unknown | 16.57 | 0 komentar

Modifikasi Template Blogger Jadi SEO Friendly

Written By Unknown on Minggu, 09 Maret 2014 | 11.35

Masih melanjutkan postingan saya sebelumnya seputar template SEO friendly, kali ini saya ingin sedikit berbagi tutorial tentang bagaimana cara memodifikasi template blogger menjadi lebih SEO friendly.



Tutorial seperti ini sebenernya sudah cukup basi. Ketika saya masih baru mengenal dunia blogger tutorial seperti ini sudah banyak yang membahasnya. Tapi tentu saja apa yang akan saya bagikan disini adalah sesuai dengan pengalaman dan hasil experimen sendiri, jadi mungkin akan ada perbedaan dengan tutorial-tutorial yang pernah ada sebelumnya.







Tutorial modifikasi template kali ini saya menggunakan template bawaan blogger bernama Simple sebagai bahan contohnya. Template yang sobat pakai mungkin berbeda jadi mungkin akan ada beberapa kode yang berbeda dengan yang ada pada tutorial ini.



1. Modifikasi Title SEO Friendly

Seperti yang sudah bahas pada postingan sebelumnya, hal pertama yang paling penting pada sebuah template adalah Title tag. Untuk memodifikasi Title tag pada template blogger agar lebih SEO friendly adalah seperti ini:



Cari kode berikut ini di dalam template sobat:



<title><data:blog.pageTitle/></title>

Setelah itu hapus dan ganti dengan kode title tag SEO friendly ala Mas Sugeng di bawah ini:




<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>

Note : jika sobat menggunakan template yang bukan dari blogger, maka biasanya struktur title tag di template sobat sudah dimodifikasi, jadi lebih baik untuk dibiarkan saja.



2. Modifikasi Meta Tag SEO Friendly

Di sini saya tidak akan memberikan terlalu banyak penjelasan tentang kode-kode yang dimodifikasi, karena semuanya sudah saya terangkan pada postingan saya sebelumnya, terutama masalah meta tag. Jadi langsung saja untuk memodifikasi meta tag agar lebih SEO friendly, silakan sobat copy/salin kode berikut ini:



<!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex,nofollow' name='robots'/></b:if>
<b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if>

Setelah itu paste kode tersebut di bawah kode <head> di dalam template sobat.



3. Tag Heading Dinamis

Selanjutnya yang perlu sobat lakukan adalah memodifikasi Tah Heading agar dinamis. Dinamis gimana kamsudnya masbro? please baca postingan saya sebelumnya untuk mendapatkan penjelasannya.



Cari kode ini di dalam template sobat:



        <b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
<b:include name='description'/>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>

Kode yang panjang banget tersebut adalah kode untuk bagian header sob, tempat menampilakan judul dan juga deskripsi. Sebelum sobat mencari kode tersebut silakn sobat perhatikan kode yang saya tandai merah di atas, kode tersebut akan berbeda-beda sesuai dengan judul blog sobat.




Jika sobat sudah menemukan kode tersebut, silakan hapus semuanya dan ganti dengan yg sudah saya modifikasi di bawah ini:



      <b:widget id='Header1' locked='true' title='Simple SEO (Header)' type='Header'>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
<!--
Show image as background to text. You can't really calculate the width
reliably in JS because margins are not taken into account by any of
clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
width if the user is using shrink to fit.
This results in a margin-width's worth of pixels being cropped. If the
user is not using shrink to fit then we expand the header.
-->
<b:if cond='data:mobile'>
<div id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!--Show the image only-->
<div id='header-inner'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
<b:include name='description'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
</b:if>
</b:if>
</b:if>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<p class='title'><b:include name='title'/></p>
<b:else/>
<h1 class='title'><b:include name='title'/></h1>
</b:if>
<b:else/>
<p class='title'><b:include name='title'/></p>
</b:if>
<b:include name='description'/>
</div>
</div>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>

Masih belum selesai, langkah selanjutnya adalah mengedit pada bagian judul postingan. Caranya cari kode di bawah ini di dalam template sobat:



    <b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Hapus semua kode tersebut dan ganti dengan yang ini:



    <b:if cond='data:post.title'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
<b:else/>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
</b:if>

Apakah sudah selesai ???? belum!!!



Sebenernya sampai langkah ini sudah cukup untuk membuat struktur tag heading di blog sobat menjadi dinamis, tapi mungkin akan ada keanehan yang akan sobat lihat di blog sobat, yaitu judul blog menjadi terlihat kecil. Solusinya silakan sobat cari kode ini:




.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
color: $(header.text.color);
}

Hapus dan ganti dengan ini:




.Header h1.title,.Header p.title {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1.title a,.Header p.title a {
color: $(header.text.color);
}

Saya yakin sobat nggak akan menemukan kode tersebut jika tidak menggunakan template Simple dari blogger, jadi saya hanya bisa mengucapkan selamat berpusing ria.



4. Memasang breadcrumb

Cari kode di bawah ini:



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

Hapus kode tersebut dan ganti dengan yang di bawah 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='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.searchQuery'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><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' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Setelah itu tinggal sobat tambahin sedikit CSS agar tampilannya nggak terlalu polos. Copy/salin kode CSS di bawah ini:





.breadcrumbs {
font-size: 11px;
color: #666;
padding: 10px 0px;
margin: 10px 0px 20px;
border-bottom: 1px solid #ddd;
}

Dan taruh di atas kode:




]]></b:skin>





Huft..!



Saya rasa semua yang di atas sudah cukup untuk membuat template blog sobat menjadi lebih ganteng dari sebelumnya. Saya tahu bagi sobat yang nggak terbiasa berurusuan dengan kode pasti tutorial di atas hanya akan membuat puyeng. Jadi solusinya cukup download saja template yang sudah jadi.



Simple SEO, template modifikasi ala Mas Sugeng. Download Klik Disini. Demo Klik Disini.



Silakan bisa sobat download template Simple yang sudah saya modifikasi melalui link di atas. Template ini sudah saya tambahkan auto readmore agar terlihat lebih rapih.



Sobat bisa menggunakan template ini untuk blog dummy, atau untuk belajar modifikasi template. Jangan lupa juga untuk melihat koleksi template saya di www.evotemplates.net.



Terima kasih...!
Unknown | 11.35 | 0 komentar
Next previous home