Validasi HTML atau HTML5 itu Tidak Penting

Validasi HTML atau HTML5 itu Tidak Penting - Banyaknya pembuat template dan juga blogger-blogger yang sedang belajar memodifikasi tempate begitu menggemari Validasi HTML atau HTML5, meskipun saya bukan pembuat themplate tetapi saya juga sempat mementingkan masalah validasi ini walaupun hanya memodifikasi themplate saja. Namun untuk saat ini sudah tidak begitu mementingkannya lagi.

karena saya melihat themplate asli bawaan blogger tidak ada yang valid html 5, jika memang validasi sangatlah penting mungkin semua themplate default bawaan blogger sudah di lengkapi validasi atau valid html 5.

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

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.

Tidak Ada Yang Peduli Jika Kode HTML-mu Valid

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

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.

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.

Sekian postingan kali ini semoga bermanfaat..

Read More

Cara membuat artikel terkait dengan thumnail

Cara membuat artikel terkait dengan thumnail - Artikel terkait atau related post dalam dalam postingan sangatlah penting, karena dengan adanya artikel terkait (related post) kita bisa menunjukkan kepada pembaca untuk membaca artikel-artikel yang berhubungan dengan posting yang dibacanya, dan jika si pembaca tertarik maka si pembaca tersebut bisa berlama-lama di blog kita.

Berikut cara memasang artikel terkait dengan thumbnail.

1. Masuk ke akun Blogger Anda.

2. Klik Download Template Lengkap, untuk berjaga-jaga kalau nanti terjadi kesalahan dalam mengedit template.

4. Klik tab Edit HTML

5.Cari kode </head> Bila Anda menggunakan browser Mozilla Firefox, tekan tombol Ctrl +  F, lalu isikan kode yang dimaksud untuk memudahkan pencarian.

6. Copy kode berikut dan paste di atas kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:2px;
}

#related-posts h2{
text-align:center;margin:0
;height:25px;padding:5px 0px 0px;line-height:1.5em
;font:normal bold 100%&#39;Trebuchet MS&#39;,Verdana,Arial,Sans-serif;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJokxWZrAiLrqeOVJoZg3PE2SrmJR1iyIIn5CqfDs6JQtd3yPXfHNzHxhfnaDr-WRhKI6TXfVGqzsM8lvXBe2P_d12BC3xyNBa2wcBzwWbI_o6tXX-1U-sAeA4Qb9slDjpEcqUolnoroA/s320/pelangi1.jpg) repeat-x;color:#FFFFFF;
}
#related-posts a{
color:#FF8000;
}
#related-posts a:hover{
color:red;
text-decoration:underline
}

#related-posts a:hover {
background-color:#484B52;
}

</style>

<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='https://andiknet-code.googlecode.com/svn/file/relatedpostthumbnailandiknet.js' type='text/javascript'/>
<!-- remove -->
<!--Related Posts with thumbnails Scripts and Styles End-->

   6. Cari code <data:post.body/>
   7. Copy kode berikut dan paste bawah kode <data:post.body/> 

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>

8. Simpan.

untuk code <data:post.body/> biasanya lebih dari satu, coba anda pilih yang terakhir atau paling bawah.

dan jika themplate anda ada tombol share facebook, twitter dll

anda tinggal meletakkan dibawah tombol share jejaring social yang ada di themplate anda,,

Keterangan:

• Anda dapat mengubah jumlah artikel terkait yang ingin ditampilkan dengan mengubah kode var maxresults=6;

• Untuk mengubah judul widget, Anda dapat mengedit kode berikut var relatedpoststitle=&quot;Artikel Terkait&quot;

• Bila ingin mengganti default thumbnail, edit kode berikut var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2r4FASUacHpmUzvgFYbg2L47qNctFGXB_y5KM5lNryiQADpqLDBEZXqKXoU3Wku_rmeQ9ys9tvS-rRT2d7G4H-vpEd0Aoh5C_odFUwiQhxoq3sE46TdiXJsg_Z31d159XaUi7FMSfFWI0/s1600/Nonami_Takizawa_.jpg";

• Untuk mengubah warna dari Splitter Line, silakan edit kode var splittercolor=&quot;#d4eaf2&quot;;

Read More

Pengertian Slug Pada Blog WORDPRESS

Pengertian Slug Pada Blog WORDPRESS - Slug dalam bahasa inggris berarti siput,dan apa fungsi slug bagi blog wordpress kita?. Istilah Slug itu sama artinya dengan memperpendek judul tautan sebuah postingan pada wordpress,?.misalnya kita
membuat postingan dengan judul "Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 " pada judul postingan tersebut urlnya pasti juga panjang seperti http://namabloganda.wordpress.com/2013/02/08/Cara-membuat-Show-Hide-pada-Komentar-blog-Valid HTML5-dan-CSS3. Akan tetapi jika kita memanfaatkan fungsi slug url yang tadinya panjang bisa menjadi pendak seperti http://namabloganda.wordpress.com/2013/02/08/Cara-membuat-Show-Hide-pada-Komentar-blog. jadi fungsi slug di wordpress.com adalah untuk memperpendek url judul postingan yang terlalu panjang, biar url kita bisa dengan mudah di deteksi
oleh search engine seperti google,yahoo,bing dan lain-lain maka kita bisa menggunakan fasilitas yang sudah disediakan oleh pihak wordpress yang bernama slug tadi..

 Caranya sangat mudah, singkat judul yang panjang tadi

kemudian masukkan di slug, lalu terbitkan, 

selamat mencoba.

Read More

Cara mudah mengambil screenshot halaman blog full page

Cara mudah mengambil screenshot halaman blog full page - Mengambil screenshot pada halaman blog memanglah mudah tapi terkadang kita mengambilnya tidak secara penuh atau full page, Kalau kita ingin membuat suatu screenshot pasti menekan tombol Prnt Scrn terus di paste ke dalam Paint atau Photoshop, atau mungkin bisa juga menggunakan Photoscape. Tentu saja hal ini memiliki beberapa masalah, salah satunya adalah pengambilan gambar menjadi seperti tidak diinginkan. Misalnya anda ingin membuat ScreenShot gambar themplate. Maka kalau menggunakan Prnt Scrn, hanya sebagian Website saja yang tertangkap gambarnya. tapi dengan menggunakan sedikit tips ini kita bisa mengambil gambar secara penuh lihat gambar blog ANDIKNET ini..

Gambar di atas di ambil secara penuh,

Dan bagaimana cara mengambil screenshot full page silahkan ikuti langkah - langkahnya sebagai berikut Cara mudah mengambil screenshot halaman blog full page:

1. Silahkan anda klik di sini Awesome Screenshot Plus

2. Klik Add To Firefox untuk menambahkannya ke dalam Add Ons > Install kemudian Restart Mozilla Firefox anda.

3. Untuk mengambil gambar sebuah website yang ingin kita capture, klik gambar lingkaran yang ada di sudut toolbar. Atau dengan meng-klik kanan pada mouse > Awesome Screenshot > Capture Full Page.

4. Klik Done untuk melanjutkan, lalu klik Save untuk menyimpan screenshot.

OK cukup sampai di sini semoga bisa bermanfaan,,

Read More

Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE

Membuat Tombol DEMO dan DOWNLOAD Dengan Efek SLIDE - Sobat blogger semua kali ini ANDIKNET akan membagikan tutorial yaitu membuat tombol DEMO dan DOWNLOAD dengan efek slide,,

DOWNLOAD

• DEMO
• DOWNLOAD

Cara Membuat Tombol DEMO dan DOWNLOAD dengan Efek SLide.

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan CTRL+F cari kode ]]></b:skin> dan letakkan kode berikut di bawahnya, atau di atas code </style>

.download {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.download h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.download:hover h1{margin-left:100%;}
.download ul {display:inline-block;margin:0;padding:0;}
.download ul li {position:static;display:inline-block;padding:0 .1em;}
.download ul li::before {display:none;}
.download ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.download ul li a:hover {background:#fc8675;color:#fff;}
.download-info{background:#e27869;}
.download-info h1{background-color:#fff;}
.demo {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border:1px solid #e9e9e9;}
.demo h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#999;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background:#fff;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);}
.demo:hover h1{margin-left:100%;}
.demo ul {display:inline-block;margin:0;padding:0;}
.demo ul li {position:static;display:inline-block;padding:0 .1em;}
.demo ul li::before {display:none;}
.demo ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demo ul li a:hover {background:#48596d;color:#fff;}
.demo-info{background:#333c4b;}
.demo-info h1{background-color:#fff;}

4.Simpan template.
5. Gunkan kode di bawah ini kemudian taruh di postingan sobat (Gunakan mode HTML) untuk menerapkannya dalam postingan.

<div class="download download-info">
<h1>DOWNLOAD</h1><ul>
<li><a href="http://www.andiknet.com/" target="_blank"> DEMO </a></li>
<li><a href="http://www.andiknet.com/" target="_blank"> DOWNLOAD </a></li>
</ul></div>

Silahkan ganti url warna merah diatas dengan link DEMO dan Link DOwnload milik anda.

Read More

Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3

Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 - Untuk membuat tombol show dan hide pada komentar blog memang sangat mudah ANDIKNET akan membagikan tutorial Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3. Untuk Kode script yang akan saya bagikan ini sudah valid html5 dan css3 karena sebelumnya sudah pernah saya coba, dengan memasang tombol show hide pada kotak komentar blog mungkin bisa sedikit membuat loding blog menjadi lebih ringan, apalagi jika banyak komentar pada blog kita tentunya ini akan membuat halaman postingan terlalu panjang kebawah sehingga menjadikan loading blog lebih lama, untuk menjadikan lebih singkat dan loading yang cepat maka gunakanlah show hide komentar ini pada blog Anda. 

 Cara membuat Show Hide pada Komentar blog Valid HTML5 dan CSS3 tidak ada pengaruhnya terhadap SEO dengan membuat efek show hide atau tampilkan dan sembunyikan pada kotak atau kolom komentar blog akan sedikit lebih cantik dan hemat, cara ini memang sangat cocok digunakan untuk Blogger yang selalu dibanjiri dengan komentar setiap harinya, namun bagi blogger yang memang masih sedikit komentarnya (seperti blog ini) tidak masalah juga untuk mencoba menambah Show Hide pada Komentar blog. Langsung saja bagi Anda yang ingin menggunakan show hide komentar blog valid html5 dan css3 silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>

/*Show Hide*/
a.openpanel {display:block;border:1px solid #2AAADC;text-align:center;font-weight:bold;line-height:30px;background:#161616;transition: all .15s ease-in-out;transform-origin: 50% 1px;position:relative;
}a.openpanel em {display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#161616;border:1px solid #2AAADC}a.openpanel.active em {top:6px}div.paneline {height:0px;transition: all .15s ease-in-out}div.kerenPanel {padding:10px 20px 20px;margin:0px 0px !important}

Catatan :
Warna garis 2AAADC.
Warna background 161616.
Untuk mengganti warnanya silahkan cari kode warnanya disini

5. Cari kode </head>
6. Copy kode jQuery dibawah ini, lalu Paste diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Show Comments",
closePanelText = "Hide Comments",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
jQuery(function() {
jQuery(panelSelector).hide()
.addClass('kerenPanel')
.before('<a class="openpanel" href="#" title="Comments">' + openPanelText + '<em></em></a>')
.after('<div class="paneline"></div>');
jQuery('a.openpanel').toggle(function() {
jQuery(this).addClass('active').html(closePanelText + '<em></em>');
jQuery('div.kerenPanel').slideDown(slideDownPanelSpeed);
return false;
}, function() {
jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
jQuery('div.kerenPanel').slideUp(slideUpPanelSpeed);
return false;});
});
//]]>
</script>

Catatan :
Show Comments bisa diganti dengan Tampilkan Komentar (atau text lainnya).
Hide Comments bisa diganti dengan Sembunyikan Komentar (atau text lainnya).
600 dan 400 bisa Anda ganti sesuai selera Anda.

7. Klik Simpan Template

Read More

Cara menampilkan posting blog ke twitter secara otomatis

Cara menampilkan posting blog ke twitter secara otomatis, - Suatu hal yang penting membuat blog kita bisa lebih di kenal banyak orang adalah dengan cara mempromosikan, karena hal ini sangat penting untuk meningkatkan traffic blog, salah satu cara untuk mempromosikan blog adalah dengan menampilkan posting blog di facebook dan twitter secara bersamaan karena hampir semua orang menggunakan kedua social network ini,, Sobat hanya memasukan feed blog ke situs twitterfeed.com tapi kali ini saya hanya akan membahas tentang Cara menampilkan posting blog ke twitter secara otomatis untuk menampilkan postingan blog ke facebook secara otomatis silahkan baca artikel saya sebelumnya  tentang Cara Menampilkan Posting Blog diFacebook untuk artikel saya tentang Cara menampilkan posting blog ke twitter secara otomatis cara kerjanya pun tergolong mudah sehingga ketika sobat posting di blog maka secara otomatis postingan akan muncul di facebook dan twitter juga,

Untuk membuatnya adalah sebagai berikut :

 1. Silakan sobat kunjungi situs http://twitterfeed.com
 2. Klik don’t have an account yet atau sign in with open id, setelah itu akan muncul form pendaftaran

3. Masukan alamat email sobat beserta password kemudian ulangi password setelah itu klik create account jika anda sudah punya account langsung login saja. setelah itu klik create new feed

4. Kemudian masukan Nama dan Alamat feed blog sobat, contohnya seperti ini http://namablog.blogspot.com/feeds/posts/default/
atau
http://namablog.wordpress.com/feed/

5. Selanjutnya klik test rss feed dan bila sudah Feed parsed OK, klik tombol continue to step 2

6. Pilih twitter atau facebook, tentunya sobat sudah mempunyai kedua account faceebook dan twitter.

7 . Klik Twitter kemudian akan muncul koneksi untuk menghubungkannya, klik authenticate Twitter dan klik Allow.

8. Koneksi bila benar maka twitter feed akan memberitahukan pengaktifan koneksi feed blog ke akun twitter, kemudian Klik Facebook kemudian akan muncul koneksi untuk menghubungkannya, klik Connect with facebook dan klik Allow

9. Sekarang sobat hanya posting di blog dan dapat tampil secara otomatis di Twitter dan Facebook secara bersamaan. semoga bermanfaat,,

Read More