Inspect Element Untuk Edit HTML

Inspect Element Untuk Edit HTML - Mungkin bagi kalian sudah sering mendengar kata tersebut yaitu inspect element yang berada pada fungsi Right Click pada semua browser baik Google Chrome, IE. Firefox maupun Opera mini. Fungsinya dari Inspect Element ini adalah untuk melihat secara detail konsep dari sebuah website maupun blog, yang meliputi CSS dan HTML.

Nah udah tau kan fungsinya...!!!

Jika anda ingin edit template blog alangkah baiknya gunakan fitur ini agar lebih mudah melihat bagian mana yang akan kita edit nantinya. Cara penggunaannya pun cukup mudah dan simple hanya menyorotkan mouse pada bagian yang ingin kita edit kemudian klik kanan scroll kebawah dan klik Inspect element. Maka akan terbuka sekumpulan text HTML disebelah kiri dan Element Style ( CSS ) disebelah kanan sesuai dengan yang kita maksudkan dari sorotan mouse tadi. Untuk lebih jelasnya silakan lihat gambar dibawah ini :

Saya memberikan contoh melihat element dari diskripsi blog ini :

Artinya pada diskripsi tersebut dibentuk dari kode CSS sebelah kanan dan HTML sebelah kiri, jika anda ingin edit CSSnya cukup copy pada bagian CSS dan simpan di notepad dan ubahlah sesuai keinginan anda.
Cara seperti ini akan mempermudah proses edit HTML template pada blog maupun website.

Demikian sedikit tips blog tentang inspect Element, semoga bermanfaat

Awesome Breadcrumb SEO Friendly

Setelah sebelumnya saya pernah memberikan artikel tentang menu breadcrumb metro style yang mungkin akan lebih pas dan cocok buat kalian yang menggunakan template blog gaya metro style. Kini saya akan memberikan sedikit tips membuat navigasi breadcrumb agar blog lebih seofriendly, mungkin kalian semua sudah sering melihat beberapa tips - tips seperti ini di internet. Namun disini ada sedikit yang berbeda dengan menu breadcrumb yang saya berikan, yaitu menggunakan fitur font awesome bootstrap. Untuk tampilannya kira kira seperti gambar diatas.

Langsung saja kita masuk ke cara pemasangan di Blog :

Masukkan kode dibawah ini sebelum kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian Tambahkan kode CSS dibawah ini sebelum ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:10px;margin-top:0px;font-size:11px;color:#5B5B5B;}

Lalu cari Kode <b:includable id='main' var='top'> dan 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'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <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'><i class="icon-home"></i> HOME</a></span>
<b:loop values='data:post.labels' var='label'>
<i class="icon-check"></i> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
<i class="icon-check"></i> <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>Unlabelled</span> <i class="icon-check"></i> <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'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <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'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <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'/>

Terakhir Save template.

Fungsi dari navigasi breadcrumb ini agar semua label dapat ditampilkan dalam pencarian di search engine, untuk melihat hasilnya silakan check di http://www.google.com/webmasters/tools/richsnippets
Jika anda berhasil akan tampak seperti gambar dibawah ini :

Demikian sedikit tips blog kali ini semoga bisa bermanfaat

Membuat Pesan Alert Metro Style

Setelah membuat template blog dengan gaya Metro Style sudah saatnya kita untuk menambahkan pesan yang anda tuliskan dalam sebuah postingan blog, agar para pembaca dapat dengan mudah memahami maksud dari informasi yang anda sajikan . Termasuk cara untuk menunjukkan kesalahan , pemberitahuan , informasi dan keberhasilan pesan dengan gaya yang tepat . Dalam posting ini ada kode CSS sederhana untuk menambahkan kotak Siaga mengagumkan dalam blogger .
Ini adalah campuran dari HTML sederhana dan tag CSS . Yang akan menciptakan efek yang mengagumkan untuk Anda . Dapatkan tampilan pada berbagai jenis bar pemberitahuan .

1 . Pesan Kesalahan

Pesan Informasi

2 . Pesan Peringatan

Pesan Peringatan

Fungsi tanda - tanda tersebut untuk memperjelas maksud dari sebuah informasi  yang anda berikan dalam postingan blog, baik itu tips maupun tutorial.

Untuk pemasangan di blog :

Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

.info, .success, .warning, .error {
background-repeat: no-repeat;
background-position: 10px center;
border: 1px solid;
margin: 10px 0;
padding: 14px 9px 14px 48px;
}
.info {
color: #0D81E9;
background-color: #C8E9F8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ylb_TeTxgGnFrTmYM2CMdIIHipC-ZWzMqOywnoChVQcnUf_vY5FQ52LF5JZWG-_SBjcJL6SPRlRyrhy027MUtlyut-f8Lr_3oWxdUlufEQmN4_QAWs_7JDtwLPneaUjaR59lDRQIOwQ/s1600/tbm_info.png');
}
.success {
color: #0D8F07;
background-color: #E5FAC3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG-ZA_iR-7HeMpn4EggASjJHZef4q5Hf6m6syqIG2RoR_lJNoVWWl-QHNjh055_wr2GDobSR2rjjl-hSoV1qverW0ILrJfIieAjWB85-59O97z19MIdjnzMuKq_OLPoRNLLH2XbXpuqeg/s1600/tbm_success.png');
}
.warning {
color: #DD8500;
background-color: #EBDCA3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-9_-KTYyhitN_tQT0tQkqvjLBRBUZEG3TbR_zmBhJzKlBK6aw54JQd1AH6eT2qumP3c-8wg-aIJPB9-j8i7ap4hNRnmyUyILQqSWLMUoU3WMHQmSouMpT9DQV0sakHtVpMJoxlNLgQTU/s1600/tbm_warning.png');
}
.error {
color: #DF000C;
background-color: #F5C8C8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRBnH_1m-MtL9yc4y3oir_wSpyLAwDdk4RZp0GMinaqYYy-wf2O9bFg03rcda0C-dNkyHyl5Hp0tnYWQmxgARknm6UUUvYhi8DZeGt4zpRz4T-L_wfr_roZ45mu8PzFSsRnLDxqFhToU/s1600/tbm_error.png');
}

Kemudian untuk menampilkan pada postingan blog :

Masuk dalam Mode HTML, lalu masukkan kode dibawah ini sesuai dengan pesan yang ingin ditampilkan.

<div class="info">Pesan Informasi</div>
<div class="success">Pesan Sukses</div>
<div class="warning">Pesan Peringatan</div>
<div class="error">Pesan Error</div>

Anda hanya perlu mengganti tulisan ( Pesan Informasi, Pesan Sukses, Pesan Peringatan, Pesan Error ) dengan kalimat yang ingin anda sampaikan pada postingan blog.

Demikian sedikit tips blog yang saya berikan semoga bermanfaat.
Enjoy Blogging

Update PR Google Tahun 2013

Setelah beberapa kali jadwal update PR google yang juga tak kunjung datang sampai akhir tahun 2013, dan pada akhirnya google memberikan informasi menunda untuk update PR  tahun 2013. Namun ternyata ada yang aneh pada blog ini yang dulunya tidak ada PR justru sudah ada PR 1. Ini saya lihat ketika browsing dengan Mozilla Firefox dan tampak jelas pada toolbar bahwa blog ini memang berPR 1. Pengecekan tidak berhenti disini saya langsung masuk ke mypagerank.net dan Pagerank Prediction dan ternyata hasilnya sama.

Sebenarnya ada apa dengan PR google yang katanya tidak mengupdate PR pada tahun 2013, namun kenyataannya update PR sudah dilakukan untuk tahun 2013 khususnya pada blog ini. Apakah update pagerank juga terjadi pada blog kalian..???

Silakan check http://mypagerank.net/

Kesimpulanya berarti google tetap menggunakan PR untuk menillai kualitas sebuah blog/websites, berapapun angka PR yang diberikan google  tetaplah semangat untuk terus menulis dan menerapkan tips seo blog yang sudah anda lakukan seperti tips menulis artikel seofriendly walaupun algoritma google sering berubah.
Demikian postingan kali ini Happy Blogging.

Tips Mempercepat Blog Untuk SEO Friendly

Tips Mempercepat Blog Untuk SEO Friendly - Google sangat menganjurkan untuk kecepatan loading blog, dan ini juga termasuk dalam tekhnik SEO. Karena biar sebagus apapun content dan tampilan blog tapi jika loading pagenya terlalu berat ini akan sangat berpengaruh pada SEO, yang akhirnya akan menurunkan trafic pada blog kita. Bagaimana tidak kalau blog yang diakses berat  otomatis para pengunjung akan lari dan memilih berkunjung ke blog lain. Itu yang saya rasakan jika kebetulan ketemu blog/web yang load pagenya berat dan lama. Jadi speed blog juga memegang peranan penting bagi popularitas blog itu sendiri. Untuk kecepatan loading blog ini sebenernya kita bisa mengubah template blog jadi seo friendly ataupun memilih template seo friendly.

Nah berdasarkan ulasan diatas tips blog seo friendly kali ini saya akan berbagi tentang cara meningkatkan kecepatan loading blog/website. Namun sebelumnya silahkan anda check dulu seberapa cepat blog anda di Google Page Insight dan GTMetrix. Standar speed blog disini Google dan GTMetrix memberikan angka 80 untuk blog yang dianggap cepat.

Berikut langkah - langkah meningkatkan kecepatan loading blog agar lebih ke arah Seo Friendly :

1. Widget

Hindari pemasangan widget yang berlebihan pada blog, semakin banyak widget yang kita pasang maka load pagenya akan semakin berat. Saya tidak perduli dengan tampilan blog yang cantik, saya hanya membuat simple seperti pada blog ini.

2. Iklan

Jika ingin pasang iklan saya rekomendasikan ke google andsense, karena servernya masih milik google dan jadi lebih ringan untuk proses load pagenya.

3. Gambar

Semakin banyak gambar yang kita tampilkan di halaman muka Blog juga akan memperlambat waktu loading, usahakan sebelum gambar diterbitkan alangkah baiknya kita compress size dan formatnya lebih dulu. Ini bisa dilakukan dengan ekternal tool seperti Photoshop maupun layanan online lainnya seperti JPEG & PNG Stripper, Smush.it, Online Image Optimizer, SuperGIF. Dan usahakan tetap pada format gambar standar yaitu jpeg dan png.

4. CSS Dan Javascript

Penggunaan CSS dan Javascript yang berlebihan juga mempengaruhi kecepatan loading blog, jika di blog anda banyak menggunakan CSS dan Javascript sebaiknya dikurangi atau bisa kita kompres di layanan CSS Compressor dan Javascript Compressor. Atau bisa menerapkan Eksternal CSS dan Eksternal Javascript.

5. HTML Compressor

Sesudah melakukan semua kompress CSS dan Javascript kemudian kompreslah seluruh HTML Codenya. Untuk layanan ini bisa anda lakukan di HTML Compressor.

6. Text Graphic

Beberapa situs mungkin perlu menggunakan teks bergaya untuk membuat halaman web terlihat cantik dan menarik. Namun, harus diingat bahwa teks bentuk gambar dapat mengambil banyak dari ukuran halaman blog/website yang malah tidak ada gunanya buat SEO.

7. Post Display

Kurangilah jumlah posting yang ditampilkan di halaman muka blog, jangan lebih dari 5 judul posting. Untuk mengatur ini anda bisa ke Layout >> Blog Post >> dan atur jumlah postingan yang akan ditampilkan.

8. Mengurangi HTTP Request

Ada beberapa tool yang mematok standar blog cepat dengan HTTP request kurang dari 20, setiap gambar yang kita masukkan dalam posting otomatis akan menambah request HTTP. Ini juga berlaku pada jumlah Javascript, Jquery yang ada pada template blog kita.

9. CSS Sprite

Css sprite ini berfungsi untuk menggabungkan beberapa gambar yang fungsinya untuk mengurangi HTTP request, jika blog anda banyak menggunakan icon - icon kecil seperti share button, icon navigasi dan lain lain alangkah baiknya menggunakan CSS Sprite ini. Karena sekecil apapun gambar akan dihitung 1 request HTTP, namun jika anda menggunakan css sprite ini maka gambar yang anda gabungkan tadi akan dihitung 1 HTTP saja. Anda bisa membuatnya dengan software photoshop untuk cara ini.

10. Konsisten Pada Ukuran Gambar

Jika anda menggunakan auto readmore gambar, biasanya ada ukuran gambar yang akan ditampilkan secara default pada template blog. Sebagai contoh scriptnya seperti ini :

<script type='text/javascript'>
 summary_noimg = 200;
 summary_img = 300;
 img_thumb_height = 300;
 img_thumb_width = 300;
 img_thumb_nosrc = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr1y_xijTY4fydHRFi3ow8dNxh5pLMsIQnZ8vsZ91UQN8UsPJV3RWKAwx0TooHiwfLKUSLEGCy9CM3oftT-gpweS_OfS0jQyiRh8KapX-w9rYDZyhOg6aNjkMcqTMOYD1Hm5TOaQ1Ly6Mv/s1600/default.png&quot;;
</script>

Perhatikan tulisan warna merah diatas !!!
Untuk pengaturan gambar seperti diatas berarti kita tidak boleh upload gambar melebihi 300 px X 300 px

Demikian tips mempercepat loading blog yang saya sampaikan semoga bermanfaat dan Terimakasih.

Tips Sederhana Agar SEO Score 100% Di ChkMe

Masalah Seo terkadang sering membuat bingung para blogger terutama para blogger newbie. Sebenarnya secara definisi  SEO ada 2 yaitu seo onpage dan seo offpage. Lalu apa maksud dari masing - masing tekhnik Seo tersebut..???
Seo Onpage adalah nilai nilai Seo yang ada dari dalam blog kita sendiri yang meliputi penyusunan tag heading mulai H1 H2 H3 H4 dst, pemasangan metatag, penulisan konten dan sebagainya. Sedangkan Seo Offpage adalah nilai - nilai seo yang utamanya adalah backlink yang relevan dan berkualitas.

Nah untuk tips seo blog kali ini adalah cara bagaimana mendapatkan score seo 100% dengan tool ChkMe. Untuk tool seo checker sebenarnya banyak sekali anda bisa mencobanya di SEO ANALYSER agar lebih akurat. Namun disini saya tidak membahas untuk check seo di Seo Analyser, melainkan di Chk.Me.

Untuk faktor faktor yang mempengaruhi score di Chk.me adalah sebagai berikut :

1. Diskripsi Blog
Jika anda belum menambahkan meta discription silahkan tambahkan kode berikut dibawah <head>

 <meta content='DISKRIPSI BLOG KAMU' name='description'/>

2. Meta Keyword

<meta content='KEYWORD KAMU' name='keywords'/>

3. Penyusunan H1 H2 H3 H4 dengan benar
Silahkan anda cari di google untuk tips penyusunan tag heading standar seo

4. Title Link
Tambahkan Title link pada setiap memasukkan link di postingan, untuk kodenya seperti dibawah ini :

title="Judul Link"

5. Tidak menggunakan Flash Movie/Animasi pada blog

6. Tambahkan ALT tag dan Title pada semua gambar di blog
Untuk format penulisan kodenya seperti berikut :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQ-23wDCaSApQsONkWbx4fC2Y08X2VasW2i58gZBrbcRWg61mL5O3-IAL4rZN7UZeDY2tzGXjex7FRSODEhmT0UsOucTC-58Tge62Nd1eq3hzTga6bUVSuHQgF6GzX627QiUlbhyphenhyphenAllh0/s1600/Check+Seo.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="seo score blog" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQ-23wDCaSApQsONkWbx4fC2Y08X2VasW2i58gZBrbcRWg61mL5O3-IAL4rZN7UZeDY2tzGXjex7FRSODEhmT0UsOucTC-58Tge62Nd1eq3hzTga6bUVSuHQgF6GzX627QiUlbhyphenhyphenAllh0/s200/Check+Seo.jpg" title="tips seo score" width="200" /></a>

Jika semua point diatas sudah anda terapkan dengan benar silahkan check di sini. Demikianlah tips blog kali ini semoga bermanfaat dan Salam Blogger

Tips Hosting File Javascript Di Google Drive

Sehubungan dengan kabar ditutupnya Hosting file di Google Code mulai 15 Januari 2014, maka tips blog kali ini saya akan memberikan tutorial tentang cara menyimpan file java script di google drive sebagai alternatif untuk google code.

Buat anda para blogger yang suka otak atik template blog pasti sudah tidak asing lagi dengan yang namanya google code, karena semua blogger biasanya menyimpan File- file Scriptnya di Hosting gratisan milik google ini. Manfaat google code selain gratisan juga karena lebih cepat dan mudah diakses oleh website khususnya platform Blogger. Mulai sekarang sudah banyak para blogger yang memindahkan file - file ke hosting lain salah satunya adalah Google Drive yang masih milik google.

OK, kita kembali ke topik bahasan diatas tentang cara membuat eksternal java script di Google Drive.
Sebagai contoh saya akan memindahkan file dari Google code ke Google Drive.


Contoh :

<script src='http://ngadiyo.googlecode.com/files/embel-embel.js' type='text/javascript'/>

Silahkan ikuti langkah langkah berikut ini :

1. Copy URL yang ada di java script diatas dan paste pada New Tab Browser.
dari contoh di atas adalah http://ngadiyo.google.code.com/files/embel-embel.js
maka akan terbuka sekumpulan code java script dari url tersebut.

2. Kemudian tekan CTRL+A dan Copy Paste di Notepad, setelah itu Save dengan (eksistensi .js )
Contoh : Embel Embel.js

3. Buka Halaman Google Drive atau klik disini. Kalau belum punya akun silahkan Register dulu.

4. Setelah itu Upload File java scriptnya dan akan tampak seperti ini :

5. Klik Share >> Change Sharing Setting >> Public On the Web >> Save

6. Kemudian Copy Link URLnya ke Notepad
https://docs.google.com/file/d/0B0QTgfBgnob0Z3IxMm5rYVF3SGM/edit?usp=sharing

7. Sampai disini kita sudah mempunyai File Javascript di Google Drive, Kemudian kita lanjutkan lagi ke cara pemasangan Script Code pada blog agar dapat terbaca oleh Browser. Perhatikan kode pada URL hasil upload diatas 0B0QTgfBgnob0Z3IxMm5rYVF3SGM

8. Untuk memasangnya di template ganti Script Google Code :

<script src='http://ngadiyo.googlecode.com/files/embel-embel.js' type='text/javascript'/>

Menjadi  :

<script src="http://googledrive.com/host/0B0QTgfBgnob0Z3IxMm5rYVF3SGM/" type="text/javascript"/>

Demikianlah tips blog dari saya semoga bermanfaat, dan akhirnya saya ucapkan Terima kasih telah membaca artikel ini dan Happy Blogging.

Tips Sederhana Posting Artikel SEO Friendly

Tips SEO friendly yang akan saya berikan adalah tentang cara menulis artikel agar lebih SEO Friendly. Kadang sebagian dari kita mengabaikan hal ini, lalu apa keuntungan membuat artikel seperti ini. Sebenarnya keuntungan artikel seo friendly adalah semata mata agar cepat terindex oleh search engine, langsung tampil di halaman search engine serta meningkatnya trafic pengunjung blog. Yang semua itu memberikan keuntungan tersendiri buat blog kita.

Berikut tips tips sederhana membuat artikel SEO Friendly :

1. Konten Berkualitas

Pikirkan Content apa yang akan kita posting, usahakan artikel yang berkualitas. Dalam artian artikel yang paling di cari para pengguna internet saat ini. Atau paling tidak sesuatu yang unik, karena ini akan mengurangi persaingan keyword di SERP yang utamanya adalah Google.

2. Original Content Tentunya

3. Buatlah Judul Simple
Dalam judul ini usahakan mengandung kata kunci sesuai tema blog anda.

4. Edit Permalink

URL artikel bisa kita potong menjadi lebih pendek, caranya pada menu permalink disebelah kanan >> Custom Permalink >> Done

5. Kata Kunci Di Awal dan Akhir Paragraf
Susunlah kata kunci pada paragraf pertama dan terakhir.

6. Berikan Tanda Cetak Tebal ( Bold ) atau Tanda Miring ( Italic ) pada setiap kata kunci yang anda masukkan, namun jangan terlalu banyak karena bisa detect Spam.

7. Setiap memasukkan link tambahkan Title.
untuk formatnya title="NAMA LINK ANDA"

8. Tambah ALT dan Title pada gambar posting, setiap selesai upload gambar
kemudian hapus kode imageanchor="1" dan border="0"
ini gunanya untuk validasi html5

9. Gunakan Anchor text
Fungsinya untuk mengaitkan artikel yang berhubungan di blog anda.

10. Gunakan Template SEO Friendly

Karena template blog seperti ini biasanya sudah dilengkapi dengan  fitur Tag heading yang benar, gunakanlah template SEO Friendly agar penerapan SEO lebih optimal. Untuk contoh templatenya bisa anda Download Disini

Demikianlah Tips Seo Friendly kali ini semoga bisa membantu dan bermanfaat, dan akhir kata saya ucapkan Terimakasih telah membaca artikel ini. Happy Blogging