Belajar Cara Edit Template Blogger Supaya Keren Part 4 ( Final ! )

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqQ6kjk_SVXV9sm1QRkjyFWJvlHV9yJuZuDE8-iH3xF7Ire-NObB5zPAEAoEcIrhiuR9JovFW_UWTXFF9tMA4aqhVNpuwImtYgGljJbbB3LwerQabFckuG2-aS1v2y3qF_P8J1SoLrSM/s1600/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+Final.jpg" target="_blank"><img alt="Cara Edit Template Blogger Final" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqQ6kjk_SVXV9sm1QRkjyFWJvlHV9yJuZuDE8-iH3xF7Ire-NObB5zPAEAoEcIrhiuR9JovFW_UWTXFF9tMA4aqhVNpuwImtYgGljJbbB3LwerQabFckuG2-aS1v2y3qF_P8J1SoLrSM/s320/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+Final.jpg" title="Cara Edit Template Blogger Final" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Tutorial Final ini saya dedikasikan khusus untuk teman-teman Blogger yang masih kesulitan mengedit template. Jadi untuk para master silahkan skip ke comment atau close saja halaman ini.<br /><br />Sesuai janji saya <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-3.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 3">kemarin</a>, pada post kali ini maka saya akan menjelaskan mengenai Cara Memasukan CSS yang masih ada di Developer Tools ke dalam template yang sesungguhnya (xml).<br /><div><br /></div><div>Saya harap Anda sudah membaca tutorial sebelumnya, agar nantinya saat membaca pejelasan dibawah ini Anda tidak bingung.</div><div><br /></div><div style="text-align: center;">' link alternatif untuk membaca artikel sebelumnya '</div><div><br /></div><div><ul><li><a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 1">Belajar Cara Edit Template Blogger Supaya Keren Part 1</a></li></ul><ul><li><a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 2">Belajar Cara Edit Template Blogger Supaya Keren Part 2</a></li></ul><ul><li><a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-3.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 3">Belajar Cara Edit Template Blogger Supaya Keren Part 3</a></li></ul><div><br /></div><div>Untuk mengingatkan saja, template yang akan kita import ke dalam xml nanti hasilnya akan seperti ini.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQrHHeZLajGyYGyf3X9XCGYa2L3PoI0iKbF4vJBS8QXScVpSlf8uScDo7c_0p9kVZr5xTRXb7N66UU0f3Cuf9dszyyTdNEi0qVAE1sLUyuIVTEj8kJwgwvqrszyx2Ep-9Yh75N3GK1zg/s1600/Hasil+Akhir+Belajar+Cara+Edit+Template+Blogger.jpg" target="_blank"><img alt="Hasil Akhir Belajar Cara Edit Template Blogger Keren" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQrHHeZLajGyYGyf3X9XCGYa2L3PoI0iKbF4vJBS8QXScVpSlf8uScDo7c_0p9kVZr5xTRXb7N66UU0f3Cuf9dszyyTdNEi0qVAE1sLUyuIVTEj8kJwgwvqrszyx2Ep-9Yh75N3GK1zg/s320/Hasil+Akhir+Belajar+Cara+Edit+Template+Blogger.jpg" title="Hasil Akhir Belajar Cara Edit Template Blogger Keren" width="313" /></a></div><div style="text-align: center;"><br /></div><div><br /></div><div>Tak perlu berlama-lama sekarang kita mulai saja penjelasannya.<br /><br /></div></div><div><br /><h2 style="font-size: 18px; text-align: center;">Tutorial Mengedit Template Blogger Supaya Keren <span style="color: red;">Part 4 ( Final ! )</span></h2><br />Sebenarnya cukup mudah untuk memindahkan css yang sudah kita tulis di Developer Tools dan memindahkannya ke dalam xml, yaitu cukup dengan mencari '' dan mengcopas kan saja. Agar lebih jelas saya sertakan pula gambar. Dan pastikan Anda sudah masuk ke dalam file xml di template Anda, caranya : lihat sidebar kiri, lalu Template dan pilih Edit HTML.<br /><br /><ol><li><span style="font-size: 16px;"><b>Mengedit Warna Background dan Border Body</b></span><br /><br />Untuk mengubah Background Body kita cari dulu class dengan nama <i>.body-fauxcolumns</i> lalu kita tambahkan <i>background: #f2f2f2;</i> untuk mengganti warna backgroundnya.<br /><br />Dan lanjut kita cari lagi selector class bernama <i>.content-inner</i> dan kita masukan property <i>border: 1px solid gainsboro;</i><br /><br /><div style="text-align: center;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFxr9YnqEOs8oZtg0Sg3lvTsAWthCXdwpZB7WoxOm9eogviC5zLTdTjAowf907me2LgSiafo0XUfEsI8wcKWhbi3DDQAZlt2iA5H71HXihb1czyUapcFqArY8p2gjKkEHh1iRggmcOYo/s1600/Belajar-Cara-Edit-Template-Blogger-1.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger Keren Gambar 1" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDFxr9YnqEOs8oZtg0Sg3lvTsAWthCXdwpZB7WoxOm9eogviC5zLTdTjAowf907me2LgSiafo0XUfEsI8wcKWhbi3DDQAZlt2iA5H71HXihb1czyUapcFqArY8p2gjKkEHh1iRggmcOYo/s320/Belajar-Cara-Edit-Template-Blogger-1.jpg" title="Belajar Cara Edit Template Blogger Keren Gambar 1" width="320" /></a></div><br /></div><br /></li><li><span style="font-size: 16px;"><b>Mengedit Warna Tanggal dan Border Artikel</b></span><br /><br />Tak jauh beda dengan cara diatas, caranya kita cari (ctrl+f) terlebih dahulu selector <i>.main-inner</i> dan selanjutnya kita masukkan property ini.<br /><br /><blockquote class="tr_bq">padding: 0 0;<br />border: 1px solid gainsboro;<br />padding-bottom: 10px;<br />border-radius: 6px;</blockquote><br />Sementara untuk mengganti warna tanggal kita cari selector <i>.date-header span</i> dan tambahkan selector dibawah ini.<br /><br /><blockquote class="tr_bq">background-color: #FFFFFF;<br />color: #747474;<br />padding: 0.4em;<br />letter-spacing: 3px;<br />margin: inherit;<br />border: 1px solid gainsboro;<br />border-radius: 6px;<br />font-weight: bold;<br />font-size: 14px;</blockquote><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwC-FM2ftAxrCCzfFCN3pZP0NLTSKiYNBY-yK53lE7iwqzMhQHsD8skArr9_YOcoerIkaQSpXz78Iv1e-O16CHaGB0aayA4dwhGH55FqGEIcleNLyAWmO9oFJ3_ZfYqBS34Of7iVH_mBg/s1600/Belajar-Cara-Edit-Template-Blogger-2.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger Keren Gambar 2" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwC-FM2ftAxrCCzfFCN3pZP0NLTSKiYNBY-yK53lE7iwqzMhQHsD8skArr9_YOcoerIkaQSpXz78Iv1e-O16CHaGB0aayA4dwhGH55FqGEIcleNLyAWmO9oFJ3_ZfYqBS34Of7iVH_mBg/s320/Belajar-Cara-Edit-Template-Blogger-2.jpg" title="Belajar Cara Edit Template Blogger Keren Gambar 2" width="320" /></a></div><div style="text-align: center;"><br /></div><br /></li><li><span style="font-size: 16px;"><b>Mengedit Warna Background, Border dan Judul Sidebar</b></span><br /><br />Langkahnya sama persis dengan cara diatas namun bedanya disini kita tidak mencari selektor, melainkan kita akan menambahkan atau membuat selektor sendiri.<br /><br />Cara pertama, ketik ctrl + f lalu ketikkan </b:skin> dan masukkan selektor baru ini, tepat diatas kode </b:skin> tadi.<br /><br /><blockquote class="tr_bq">aside {<br />border: 1px solid gainsboro;<br />border-radius: 6px;<br />padding-top: 10px;<br />padding-bottom: 10px;<br />}<br />#sidebar-right-1 h2 {<br />border-bottom: 1px solid gainsboro;<br />padding: 10px;<br />text-align: center;<br />font-size: 16px;<br />}</blockquote><br />Untuk lebih jelasnya tentanng peletakannya, bisa Anda lihat screenshot dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7i6m4Nh28kYrHBdmx4ki70Aq8zFQYewdrKQGeaI5KHiQ6c6i8DDJoQL75Ex5EvZpt83P5WCWCM51wLRXNESJZzoC8cLnWRgq-HV49iFY5U3sTcVViWCPYsp79EiWTQGBFyZdyyam9Yk/s1600/Belajar-Cara-Edit-Template-Blogger-3.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger Keren Gambar 3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA7i6m4Nh28kYrHBdmx4ki70Aq8zFQYewdrKQGeaI5KHiQ6c6i8DDJoQL75Ex5EvZpt83P5WCWCM51wLRXNESJZzoC8cLnWRgq-HV49iFY5U3sTcVViWCPYsp79EiWTQGBFyZdyyam9Yk/s320/Belajar-Cara-Edit-Template-Blogger-3.jpg" title="Belajar Cara Edit Template Blogger Keren Gambar 3" width="320" /></a></div><div style="text-align: center;"><br /></div><br /></li><li><span style="font-size: 16px;"><b>Menambahkan Slot Iklan, Menu Help dan Menu Navigasi</b></span><br /><br />Untuk mempermudah Anda memahaminya maka saya akan membaginya menjadi tiga bagian.<br /><br /><ul><li><b>Menambahkan Slot Iklan</b><br /><br />Cari div dengan selector <i>content-outer</i> lalu pastekan kode html ini <i><div class="slotiklan">Advertisement 728x90</div></i> dibawahnya <i>content-outer.</i><br /><br />Selanjutnya kita tambahkan CSSnya.<br /><br /><blockquote class="tr_bq">.slotiklan {<br />border: 1px solid gainsboro;<br />height: 90px;<br />background-color: #FDF5F5;<br />border-bottom: 0;<br />font-size: 20px;<br />padding-left: 60px;<br />line-height: 90px;<br />}</blockquote><br /></li><li><b>Menambahkan Menu Help</b><br /><br />Letakan kode dibawah ini, tepat dibawahnya div slot iklan tadi.<br /><br /><blockquote class="tr_bq"><div id="navbarfirst"><br /><ul><br /><li><a href="">About Us</a></li><br /><li><a href="">Sitemap</a></li><br /><li><a href="">Contact Us</a></li><br /></ul><br /><div></blockquote><br />Lalu kita permak dengan CSS seperti ini.<br /><br /><blockquote class="tr_bq">#navbarfirst {<br />background: white;<br />padding: 5px;<br />border: 1px solid gainsboro;<br />border-bottom: 0;<br />padding-left: 515px;<br />height: 40px;<br />}<br />#navbarfirst ul li {<br />float: left;<br />list-style-type: none;<br />padding-left: 33px;<br />font-size: 14px;<br />}</blockquote><br /></li><li><b>Menambahkan Menu Navigasi</b><br /><br />Menu navigasi ini akan kita letakkan dibawah header (judul blog), maka kita cari dulu </header> dan masukkan kode html unyuk membuat navigasi dibawah ini.<br /><br /><blockquote class="tr_bq"><div id="navbarsecond"><br /><ul><br /><li><a href="">SEO Lokal</a></li><br /><li><a href="">SEO Manca</a></li><br /><li><a href="">SEO Tips</a></li><br /><li><a href="">SEO Kawe</a></li><br /><li><a href="">SEO Sawang</a></li><br /><li><a href="">SEO Sumber</a></li><br /><li><a href="">SEO Google</a></li><br /></ul><br /></div></blockquote><br />Selanjutnya kita cari lagi </b:skin>, dan letakkan css dibawah ini tepat diatasnya kode </b:skin>.<br /><br /><blockquote class="tr_bq">#navbarsecond {<br />border-bottom: 1px solid gainsboro;<br />height: 30px;<br />padding-left: 50px;<br />}<br />#navbarsecond ul li {<br />float: left;<br />list-style-type: none;<br />padding-right: 40px;<br />font-size: 14px;<br />}</blockquote></li></ul></li></ol>Dan wala, selesai sudah template simple yang gak ada namanya ini, hha. Dengan begini selesai sudah rangkain Tutorial berseri ini.<br /><br />Selanjutnya terserah Anda, mau dijual kah templatnyae atau dibuangkah, tapi saran saya sih dijual murah aja dulu Rp. 5.000,00 misalnya. Kalau laku 1000 template kan lumayan banget dapat 5 Juta.</div><div><br /></div><div>Jika tidak mau repot memasang satu persatu kode diatas, Anda bisa mendownload Template XML secara lengkapnya melalui link dibawah ini :</div><br /><div class="judul-download">Template Blogger SEO Light</div><img alt="Cara Edit Template Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPbfK-OQZTvjak5TGA2GaM_kivF6dWYYqpaGJzK0dcN-cS8wBM9ehNp4nYYAqqvfh6BnkJ1_b1_lZeHHvGxKvb1QQAiAOFbW7dXthVnioKREpXuXozhdgKj_0oIN9TgbrzN7IOT5SW0lU/s1600/Cara+Edit+Template+Blogger+Download.jpg" title="Cara Edit Template Blogger" width="100%" /><br /><div style="overflow: hidden;"><div class="download"><div class="download-1"><a href="https://docs.google.com/file/d/0BxJoMiJjkpFta1J1UXJvLTAzZ0E" rel="nofollow" target="_blank">Download</a></div></div><div class="download"><div class="download-2">Demo</div></div></div><br />Mungkin ini saja yang bisa saya begikan, mohon maaf jika ada yang kurang dalam Tutorial ini. Akhir kata saya ucapkan terimakasih banyak telah berkunjung dan bersedia membaca tutorial cupu ini.<br /><br /><br /><div class="caraedittemplate"><b>[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 1">Part 1</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 2">Part 2</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-3.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 3">Part 3</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-4.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 4">Part 4</a></b></div>

Blogger Tips Belajar Cara Edit Template Blogger Supaya Keren Part 4 ( Final ! )

Tutorial Final ini saya dedikasikan khusus untuk teman-teman Blogger yang masih kesulitan mengedit template. Jadi untuk para master silahkan...

Read more »

Belajar Cara Edit Template Blogger Supaya Keren Part 3

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGwIF7EVM24I2QxEMoAAPwI73z5r9n24NoyDZM_621zBOrfgHRrY6-3loF8fiJ-2ebETE7_FeO5DHg96j6N0V8qlVRIWqqHHqL5Qj4MfmEzXgOyGOFX6NR7iCjn9KpJaMlbRRsHSYGg2k/s1600/Belajar+Cara+Edit+Template+Blogger+Keren.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Edit Template Blogspot Keren" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGwIF7EVM24I2QxEMoAAPwI73z5r9n24NoyDZM_621zBOrfgHRrY6-3loF8fiJ-2ebETE7_FeO5DHg96j6N0V8qlVRIWqqHHqL5Qj4MfmEzXgOyGOFX6NR7iCjn9KpJaMlbRRsHSYGg2k/s320/Belajar+Cara+Edit+Template+Blogger+Keren.jpg" title="Cara Edit Template Blogspot Keren" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Halo sahabat setia Blog Berguru SEO, akhirnya admin punya waktu luang nih untuk melanjutkan tutorial berseri ini. Nah untuk Anda yang elum tahu apa aja sih yang kita bahas di tutorial mengedit template blogger seri sebelumnya. Berikut cuplikan singkat mengenai apa yang sudah kita pelajari pada part-part sebelumnya.<br /><br /><ul><li><h3 style="font-size: 14px;"><a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank" title="Cara Edit Template Blogger Keren">Belajar Cara Edit Template Blogger Supaya Keren Part 1</a></h3><br />Pada part pertama ini kita fokus pada cara menggunakan alat yang akan dipakay untuk mengedit (developers tool) dan juga sedikit melakukan goresan pada bagian heading, backgorund body luar, dan <br /><br /></li><li><h3 style="font-size: 14px;"><a href="http://berguruseo.blogspot.jp/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank" title="Cara Edit Template Blogger Keren">Belajar Cara Edit Template Blogger Supaya Keren Part 2</a></h3><br />Untuk part dua, yang kita bahas adalah pengeditan sidebar, meliputi judul widget yang ada di sidebar, border pemisah judu widget dan isi widget. Intinya pada part ini fokus untuk sidebar blog.</li></ul><br />Nah, semenatara untuk tutorial pada part 3 ini, kita akan fokus pada pembuatan Menu Navigasi dan Menu Bantuan yang berisi About, Contact dan Sitemap.<br /><br />Dibawah ini adalah penampakan hasil akhir yang akan kita buat.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-v5nmqSp714sSjhK3RswD-KjPziC_PwZ72Yw3LxPq2OluDJEMH1Ck2XHQwhGrFgqL7DboBmdwimw34mcYiLjHli0nwT0XpQy7mtrvvLnOxnSXqgOKD0iYGYAnVuVABSzO6AT30X0uF4/s1600/Belajar-Cara-Edit-Template-Blogger-Keren-1.jpg" target="_blank"><img alt="Hasil Akhir Belajar Cara Edit Template Blogger" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9-v5nmqSp714sSjhK3RswD-KjPziC_PwZ72Yw3LxPq2OluDJEMH1Ck2XHQwhGrFgqL7DboBmdwimw34mcYiLjHli0nwT0XpQy7mtrvvLnOxnSXqgOKD0iYGYAnVuVABSzO6AT30X0uF4/s320/Belajar-Cara-Edit-Template-Blogger-Keren-1.jpg" title="Hasil Akhir Belajar Cara Edit Template Blogger" width="320" /></a></div><br /><br />Menu ini saya buat sesimple mungkin (karena bisanya cuma gitu, hhe) tapi fungsinya akan tetap sama seperti menu menu keren lainnya.<br /><br />Tanpa perlu basa-basi lagi sekarang saatnya kita mulai tutorialnya.<br /><br /><br /><h2 style="font-size: 18px; text-align: center;">Tutorial Mengedit Template Blogger Supaya Keren <span style="color: #3d85c6;">Part 3</span></h2><br />Sedikit penjelasan, nantinya disini kita akan membuat dua menu, yaitu menu navigasi yang berada di bawah judul dan deskripsi blog dan satunya lagi menu bantuan yang akan kita letakan diatas judul dan deskripsi blog kita. Ok, langsung saja berikut langkah-langkahnya.<br /><br /><ol><li><h3 style="font-size: 16px;">Membuat Menu Navigasi</h3><br />Pertama kita buat dahulu daftar menu menggunakan kode html ul li. Contoh yang paling sederhana adalah seperti ini. Dan kita bungkus dengan div atau nav (html5) tapi disini saya akan mencontohkan menggunakan div, karena div terdengar lebih familiar, kalau nav masih liar, hehe.<br /><br /><blockquote class="tr_bq"><div id="navbarsecond"><br /><ul><br /><li><a href="">SEO Lokal</a></li><br /><li><a href="">SEO Manca</a></li><br /><li><a href="">SEO Tips</a></li><br /><li><a href="">SEO Kawe</a></li><br /><li><a href="">SEO Sawang</a></li><br /><li><a href="">SEO Sumber</a></li><br /><li><a href="">SEO Google</a></li><br /></ul><br /><div></blockquote><br />Pada pemberian nama id boleh Anda kreasikan, misal menu2 jadi tidak harus navbarsecond.<br /><br />Dan selanjutnya letakkan dibawah header. Lihat gambar dibawah agar lebih jelas.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAYpurPCuWjsjcheygNZX_iGWNRgzUee_8gqusjxB8cjlLmSklrVVGcjCyt47mP9ye_wMGYNV2Cmn3zS_LKVo3o8Re6o1S4NDXqF0rdRMoGKINf3Jf_Ab_fBBd_OcrMRo6297BxNTIGEY/s1600/Belajar-Cara-Edit-Template-Blogger-Keren-2.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger gambar 1" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAYpurPCuWjsjcheygNZX_iGWNRgzUee_8gqusjxB8cjlLmSklrVVGcjCyt47mP9ye_wMGYNV2Cmn3zS_LKVo3o8Re6o1S4NDXqF0rdRMoGKINf3Jf_Ab_fBBd_OcrMRo6297BxNTIGEY/s320/Belajar-Cara-Edit-Template-Blogger-Keren-2.jpg" title="Belajar Cara Edit Template Blogger gambar 1" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Tapi ada yang aneh, menunya kok kebawah (vertikal) kan seharusnya ke samping (horisontal) ? solusinya cukup Anda tambahkan property float: left; untuk membuat menu tersebut mengarah kesamping. Masalah kedua adalah jarak yang terlalu dekat, maka kita gunakan padding untuk mengatur jaraknya. Lalu untuk menghapus bulatannya kita gunakan list-style-type: none;. Kode lengkapnya ada di bawah.<br /><br /><blockquote class="tr_bq">#navbarsecond ul li {<br />float: left;<br />padding: 10px;<br />list-style-type: none;<br />margin-left: 30px;<br />}</blockquote><br />Masukan selector diatas dengan cara menekan tombol new style rule (simbol +) yang ada di pojok kanan atas menu inspect element.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBUqtSXiUbtR37EwiERDpygXwIyrqdttjG7YBv2qy-7C8KKvryVejXCJfAMOas6D6becp93_vWlesaPLWvuySV3NlM544M3WK8vYhtxJT3vxWqZQGOLffSbZIHp_Bu9FvyzJILUwr9Gw/s1600/Belajar-Cara-Edit-Template-Blogger-Keren-3.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger gambar 2" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjBUqtSXiUbtR37EwiERDpygXwIyrqdttjG7YBv2qy-7C8KKvryVejXCJfAMOas6D6becp93_vWlesaPLWvuySV3NlM544M3WK8vYhtxJT3vxWqZQGOLffSbZIHp_Bu9FvyzJILUwr9Gw/s320/Belajar-Cara-Edit-Template-Blogger-Keren-3.jpg" title="Belajar Cara Edit Template Blogger gambar 2" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Selanjutnya, klik pada div dengan selector navbarsecond, klik tanda +, lalu tambahkan kode dibawah ini.<br /><br /><blockquote class="tr_bq">#navbarsecond {<br />border-bottom: 1px solid gainsboro;<br />margin: 0 20px;<br />margin-top: -12px;<br />margin-bottom: -10px;<br />}</blockquote><br />Hasilnya akan seperti gambar dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidto_tf_g-P05Ux_PuM2AjWQpAqFYQTScOinKxFm3R-JUjxBz6r-gHHiO26EdsJ0NaCu1WahtLkRKlIso84fCKa8lcwKjXmwDVjrXEBCtTv1vPqamhX0C7FxrGd7fOPDzfRyj5_8NaiuM/s1600/Belajar-Cara-Edit-Template-Blogger-Keren-4.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger gambar 3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidto_tf_g-P05Ux_PuM2AjWQpAqFYQTScOinKxFm3R-JUjxBz6r-gHHiO26EdsJ0NaCu1WahtLkRKlIso84fCKa8lcwKjXmwDVjrXEBCtTv1vPqamhX0C7FxrGd7fOPDzfRyj5_8NaiuM/s320/Belajar-Cara-Edit-Template-Blogger-Keren-4.jpg" title="Belajar Cara Edit Template Blogger gambar 3" width="320" /></a></div><div style="text-align: center;"><br /></div><br /></li><li><h3 style="font-size: 16px;">Membuat Menu Bantuan</h3><br />Seperti yang saya jelaskan sebelumnya, menu bantuan disini akan terdiri dari about, contact, sitemap dan bisa Anda tambahkan sendiri lainnya.<br /><br />Untuk caranya mudah saja, cukup tambahkan (ctrl + c) div menu navigasi yang sudah kita buat tadi, dan letakkan dibawah selector content-outer. Dan jangan lupa tambahkan selektor ul li didalam id navbarfirst. Contoh kode cssnya seperti dibawah ini.<br /><br /><div style="text-align: right;"><blockquote class="tr_bq"><div style="text-align: left;">/* CSS Untuk Mengatur DIV */</div><div style="text-align: left;">#navbarfirst {</div><div style="text-align: left;">background: white;</div><div style="text-align: left;">padding: 5px;</div><div style="text-align: left;">border: 1px solid gainsboro;</div><div style="text-align: left;">border-bottom: 0;</div><div style="text-align: left;">padding-left: 485px;</div><div style="text-align: left;">}</div><br /><div style="text-align: left;">/* CSS Untuk Mengatur UL LI ( Menu ) */</div><div style="text-align: left;">#navbarfirst ul li {</div><div style="text-align: left;">float: left;</div><div style="text-align: left;">padding: 10px;</div><div style="text-align: left;">list-style-type: none;</div><div style="text-align: left;">padding-left: 47px;</div><div style="text-align: left;">}</div></blockquote></div><br />Untuk lebih jelasnya perhatikan gambar dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3g3z5BKRoc6sgUEIUoKnJPaSpIv6OxP5kOleALl76_9s5rODvbnUlRveb1BFc0Eh8SR5OWNp5p4itwN8zEX8DPENEfpzhhHgWgqqQBfWnEps0UWOVt2BaXjgtGF3UDqPOuYHDWDPxjac/s1600/Belajar-Cara-Edit-Template-Blogger-Keren-5.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger gambar 4" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3g3z5BKRoc6sgUEIUoKnJPaSpIv6OxP5kOleALl76_9s5rODvbnUlRveb1BFc0Eh8SR5OWNp5p4itwN8zEX8DPENEfpzhhHgWgqqQBfWnEps0UWOVt2BaXjgtGF3UDqPOuYHDWDPxjac/s320/Belajar-Cara-Edit-Template-Blogger-Keren-5.jpg" title="Belajar Cara Edit Template Blogger gambar 4" width="320" /></a></div><div style="text-align: center;"><br /></div></li></ol><br />Dengan begitu selesai sudah pembuatan Menu Navigasi kita kali ini. Dan juga itu menandakan selesai juga <b>Tutorial Edit Template Blogger Supaya Keren seri ke 3</b> ini.<br /><br />Pada Artikel selanjutnya <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-4.html" target="_blank"><b>Belajar Cara Edit Template Blogger Supaya Keren Part 4</b> <b><span style="color: red;">( Final )</span></b></a> kita akan memasukan semua css yang sudah kita buat ke dalam template blogger sesungguhnya (xml). Pastikan Anda tidak melewatkannya, karena itu adalah akhir dari rangkain tutorial berseri ini.<br /><br />Akhir kata saya ucapkan terimakasih banyak.<br /><br /><br /><div class="caraedittemplate"><b>[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 1">Part 1</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 2">Part 2</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-3.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 3">Part 3</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-4.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 4">Part 4</a></b></div>

Blogger Tips Belajar Cara Edit Template Blogger Supaya Keren Part 3

Halo sahabat setia Blog Berguru SEO, akhirnya admin punya waktu luang nih untuk melanjutkan tutorial berseri ini. Nah untuk Anda yang elum t...

Read more »

Belajar Cara Edit Template Blogger Supaya Keren Part 2

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlqo85gnjC9KR64mIijxDGUs8p4qsT81rj943Cn6ej9pkviyFDKyto1QZ3PPZm-QF-wvBYLPpd6UlhsKtG57ZdDnjlxYBT6RNF1wk6mJpoPsz2afnv6FXEUMFbTcSKDvT3EuvfavhNXQA/s320/Belajar-Cara-Edit-Template-Blogger-Supaya-Keren-Part+2.jpg" width="320" /></a></span></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif; font-size: x-small;"><a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank">Belajar Edit Template Blogger Part 2</a></span></td></tr></tbody></table><br />Melanjutkan tutorial <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank"><b>Belajar Cara Edit Template Blogger Part 1</b></a> kemarin, maka kali ini Blog <a href="http://berguruseo.blogspot.com/" target="_blank"><b>Berguru SEO</b></a> akan melanjutkan seri ke duanya.<br /><br />Oke, seperti biasa pertama siapkan dulu Alat dan Bahan 'memasaknya'<br /><br /><ul><li>Untuk bahanya, siapkan dulu sebuah Blog yang akan kita 'racik'</li></ul><ul><li>Sementara untuk alatnya adalah Google Chrome Developers Tool</li></ul><br />Jika semua Alat dan Bahan sudah terseida, sekarang saatnya memulainya.<br /><br />Ohya, tema dari Template yang akan kita buat ini saya namakan Superficial Simple Silver Template, yang artinya Template yang berwarna Abu-abu dengan desain Simple dan Datar.<br /><br />Hasil akhir pada Tahap ke 2 ini akan seperti gambar dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVPgFXBZ5BZdnNOQBzayXVyillXgtbuJoeGxi81fmxeVdRKv9Rl_d6MW9WSyLHA8M_7b9tdg46sLTM9EFGCGZ5rH4IfqZ6Y7t_2dr1WUkg5NNHfIkHOmMBKpdlRkFLROB1GBxxgpxsyJs/s1600/Cara-Edit-Template-Blogger-4.jpg" target="_blank"><img alt="Cara Edit Template Blogger" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVPgFXBZ5BZdnNOQBzayXVyillXgtbuJoeGxi81fmxeVdRKv9Rl_d6MW9WSyLHA8M_7b9tdg46sLTM9EFGCGZ5rH4IfqZ6Y7t_2dr1WUkg5NNHfIkHOmMBKpdlRkFLROB1GBxxgpxsyJs/s320/Cara-Edit-Template-Blogger-4.jpg" title="Cara Edit Template Blogger" width="320" /></a></div><div style="text-align: center;"><br /></div>Saya rasa cukup basa-basinya, mari kita mulai mengedit.<br /><br /><br /><h2 style="font-size: 18px; text-align: center;">Langkah Mengedit Template Blogger Supaya Keren <span style="color: red;">Part 2</span></h2><br />Pada tahap kedua ini kita akan fokus mengedit tampilan Content dan Sidebar.<br /><br /><ol><li><h3 style="font-size: 16px;">Edit Tampilan Sidebar Template</h3>Yang pertama kita edit adalah Sidebarnya, maka sama seperti pada tutorial kemarin, klik kanan dimana saja, pilih inspector, lalu arahkan ke bagian Sidebar Template kalian. " pastikan kita berada di selector 'aside' lihat gambar agar dibawah agar lebih jelas. "<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CuZNP_DSHkILWcVj_92UWrGGBiDC1CLvgz7ote8-QiuHk-exscSquHuEym7asJ69dDpYM4Zkq4q9IBsVIUWf6CmXLwFYhnZlUtO-UWpFudRCJ1NQcIqUPr_1a67J8yljB9un0psPbQg/s1600/Cara-Edit-Template-Blogger-1.jpg" target="_blank"><img alt="Cara Edit Template Blogger" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CuZNP_DSHkILWcVj_92UWrGGBiDC1CLvgz7ote8-QiuHk-exscSquHuEym7asJ69dDpYM4Zkq4q9IBsVIUWf6CmXLwFYhnZlUtO-UWpFudRCJ1NQcIqUPr_1a67J8yljB9un0psPbQg/s320/Cara-Edit-Template-Blogger-1.jpg" title="Cara Edit Template Blogger" width="320" /></a></div><div style="text-align: center;"><br /></div>Jika sudah terklik selector aside, sekarang lanjutkan dengan mengisi Element Stylenya dengan kode css (property) di bawah ini.<br /><br /><blockquote class="tr_bq">border: 1px solid gainsboro;<br />border-radius: 6px;<br />padding-top: 10px;<br />padding-bottom: 10px;<br />margin-left: 10px;<br />width: 280px;</blockquote><br />Maka akan muncul garis tepi melengkung setebal 1pixel dan berwarna abu-abu muda. Garis melengkung disebabkan oleh property border-radius.<br /><br /></li><li><h3 style="font-size: 16px;">Edit Judul Sidebar Template</h3>Kita Lanjutkan mengedit bagian Juduln Sidebarya, defaultnya kan sangat kecil ukurannya maka kita akan sedikit membesarkannya dan memberi garis tepi bawah.<br /><br />Caranya masih sama seperti cara diatas, pertama arahkan inspector tepat di bagian judul.<br /><br />Maka kita akan menemui selector h2, jika kita langsung memperbesar fontnya dengan font-size maka iitu nanti akan mengubah seluruh bagian isi template. Disini kan, kita hanya ingin mengubah h2 yang ada di bagian Sidebar bukan ? solusinya, tambahakan #sidebar-right-1 di samping selector h2.<br /><br />Perhatikan gambar dibawah ini, untuk lebih jelasnya.<br /><br /><div style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53paybkpZYKpxuO2LhYwn8k3o3WHN6PUtBX4XmqlXuL-4PMsvBPJFjgQORJr1fs58cyIiPjeXmR5sfqxG6UtWSRL2GB8lfBebivtw8WA7h4rY9mnzjcNNzWP8DUZGfhdAteTWdFIiltg/s1600/Cara-Edit-Template-Blogger-2.jpg" target="_blank"><img alt="Cara Edit Template Blogger" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53paybkpZYKpxuO2LhYwn8k3o3WHN6PUtBX4XmqlXuL-4PMsvBPJFjgQORJr1fs58cyIiPjeXmR5sfqxG6UtWSRL2GB8lfBebivtw8WA7h4rY9mnzjcNNzWP8DUZGfhdAteTWdFIiltg/s320/Cara-Edit-Template-Blogger-2.jpg" title="Cara Edit Template Blogger" width="320" /></a></div><br />Lalu fungsinya menambahkan #sidebar-right-1 ini untuk apa ? itu adalah selector bertingkat, intinya untuk merubah tampilan css secara spesifik, lebih jelasnya bisa Anda googling.<br /><br />Lanjut, tambahkan property dibawah ini untuk mengubah ukuran font dan memberi garis tepi dibagian bawah Sidebar.<br /><br /><blockquote class="tr_bq">border-bottom: 1px solid gainsboro;<br />padding: 10px;<br />text-align: center;<br />font-size: 16px;</blockquote><br />Dan judul yang ada di sidebar pun akan terlihat sedikit menarik.<br /><br /></li><li><h3 style="font-size: 16px;">Edit Tampilan Artikel dan Background Tanggal Template</h3>Seperti yang sudah-sudah arahkan kursor pada bagian outer isi artikel, lalu pada Matched CSS Ruler tambahkan property dibawah ini.<br /><br />border: 1px solid gainsboro;<br />border-radius: 6px;<br /><br />Jangan lupa untuk menghapus property width:100%, agar bagian Sidebar tidak bergeser kebawah.<br /><br />Selanjutnya pada bagian Tanggal yang mempunyai selector date-header, masukan property dibawah ini.<br /><br /><blockquote class="tr_bq">background-color: #FFFFFF;<br />color: #747474;<br />padding: 0.4em;<br />letter-spacing: 3px;<br />margin: inherit;<br />border: 1px solid gainsboro;<br />border-radius: 6px;<br />font-weight: normal;</blockquote><br />Dan walaa, Background Artikel dan Tanggal akan berubah wujud menjadi seperti gambar dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVOHJx9_hIJ6_rK4qcVI0H7k7NUYIixUFtOW4c-1WRZYcUHIdHxT85qJh1p-0Xsaog4aC_Su5C6h8tIB5Cm0fJTYo0xIwohttZkY5PBb-V2QGwOQrD18P-PAdyQk3zs9wkTPoIjmAEQU/s1600/Cara-Edit-Template-Blogger-5.jpg" target="_blank"><img alt="Cara Edit Template Blogger" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggVOHJx9_hIJ6_rK4qcVI0H7k7NUYIixUFtOW4c-1WRZYcUHIdHxT85qJh1p-0Xsaog4aC_Su5C6h8tIB5Cm0fJTYo0xIwohttZkY5PBb-V2QGwOQrD18P-PAdyQk3zs9wkTPoIjmAEQU/s320/Cara-Edit-Template-Blogger-5.jpg" title="Cara Edit Template Blogger" width="320" /></a></div><br /></li><li><h3 style="font-size: 16px;">Edit Tampilan Judul Blog</h3>Disini kita akan memindahkan Judul Blog kita dibagian tengan, dan memberi batasan border dibagian bawah.<br /><br />Caranya klik judul blog dengan inspector, pastikan selectornya adalah header-inner lalu masukan property css dibawah ini.<br /><br /><blockquote class="tr_bq">overflow: hidden;<br />text-align: center;<br />border-bottom: 1px solid gainsboro;</blockquote><br />Maka tampilan blog kita akan terlihat lebih kece badai.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvFHuL3uLguxHmJkqKm0hsCJRXEDenEfdJxsgOaJUY3rFPoUd0QD0Xo3fZ4FlUP8b-L5iz3ORVDyE9DdWWsb4dcGEa7mPJXK6_muNi4msORobfdivvvEs1guUO8Eigbb2gnB3zmRbK6s/s1600/Cara-Edit-Template-Blogger-3.jpg" target="_blank"><img alt="Cara Edit Template Blogger" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvFHuL3uLguxHmJkqKm0hsCJRXEDenEfdJxsgOaJUY3rFPoUd0QD0Xo3fZ4FlUP8b-L5iz3ORVDyE9DdWWsb4dcGEa7mPJXK6_muNi4msORobfdivvvEs1guUO8Eigbb2gnB3zmRbK6s/s320/Cara-Edit-Template-Blogger-3.jpg" title="Cara Edit Template Blogger" width="320" /></a></div><div style="text-align: center;"><br /></div></li></ol><br />Yap saya rasa untuk tutorial <b>Belajar Cara Edit Template Blogger Supaya Keren Part 2</b> ckup sampai disini dulu, dan besok kita akan lanjutkan Bagaimana Cara Menambahkan Navigasi Menu di Template.<br /><br />Akhir kata saya ucapkan terimakasih sudah membaca tutorial cupu dan berkenan berkunjung di Blog yang alakadarnya ini.<br /><br /><br /><div class="caraedittemplate"><b>[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 1">Part 1</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 2">Part 2</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-3.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 3">Part 3</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-4.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 4">Part 4</a></b></div>

Blogger Tips Belajar Cara Edit Template Blogger Supaya Keren Part 2

Belajar Edit Template Blogger Part 2 Melanjutkan tutorial Belajar Cara Edit Template Blogger Part 1  kemarin, maka kali ini Blog Berguru SEO...

Read more »

Belajar Cara Edit Template Blogger Supaya Keren Part 1

<b>Mengedit Template</b> yang ada di <a href="http://www.blogger.com" rel="nofollow" target="_blank"><b>Blogspot</b></a> memang saya akui bukan pekerjaan yang mudah, dimana kita tidak diberi ruang yang bebas dalam melakukan pengeditan. Walaupun tidak seluasa saat kita Membuat Website, namun jangan khawatir dengan kreatifitas yang Anda miliki, kita bisa 'menembus' batasan tersebut.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc7zju_jvzDJMFcS1ZNRuEorZszYIBRUt1EDCidnSlJa19P9RTzmuDnSvpChE0XMt-4ipzFdRMgfDiMXP8sVVWueazwMebbPhXCEjeLSoFsY1yLgBHCnf2h94I2KupI6nDAd2syiWfQzw/s1600/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren.jpg" target="_blank"><img alt="Logo Belajar Cara ubsh Edit Template Blogspot Keren" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc7zju_jvzDJMFcS1ZNRuEorZszYIBRUt1EDCidnSlJa19P9RTzmuDnSvpChE0XMt-4ipzFdRMgfDiMXP8sVVWueazwMebbPhXCEjeLSoFsY1yLgBHCnf2h94I2KupI6nDAd2syiWfQzw/s320/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren.jpg" title="Logo Belajar Cara ubsh Edit Template Blogspot Keren" width="320" /></a></div><br /><br />Baik. tanpa perlu berlama-lama, sekarang langsung saja kita mulai pembahasan <b>Cara Edit Template Blogger</b> milik Anda supaya menjadi lebih keren.<br /><br />Catatan : Disini saya akan mengedit <b>Template Sederhana bawaan Blogger yang ada di urutan 1</b>.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcBIfc0ZM7KIs2tZVLxtNRu0xVAvjXCUYZthvxKe7GfKtLvY0vFuTJ8UPsTvNlhCIbpxjebpJwiwKDHEPPq3eKVEIbrfnZuzra8fOiHd0yG8eT_WL-eW8XukuyLriwSJ-cS4Rm4_LqFU/s1600/template+sederhana+blogger+no+1.jpg" target="_blank"><img alt="Template Sederhana Blogger No 1" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBcBIfc0ZM7KIs2tZVLxtNRu0xVAvjXCUYZthvxKe7GfKtLvY0vFuTJ8UPsTvNlhCIbpxjebpJwiwKDHEPPq3eKVEIbrfnZuzra8fOiHd0yG8eT_WL-eW8XukuyLriwSJ-cS4Rm4_LqFU/s320/template+sederhana+blogger+no+1.jpg" title="Template Sederhana Blogger No 1" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Alasan utama saya memilih Template ini adalah karena Ringan dan cukup Mudah jika kita ingin mengedit seluruh bagian Template, karena sudah tersedia comment dari pihak Blogger untuk memudahkan kita mengenali setiap bagian dari kode xml template tersebut.<br /><br />Contoh comment :<br /><br /><ul><li> /* Content ------------ */ ( menandakan kode kode css yang ada dibawahnya untuk mengatur tampilan isi )</li></ul><ul><li>/* Header ------------*/ ( menandakan kode kode css yang ada dibawahnya untuk mengatur tampilan atas template, seperti misalnya judul blog )</li></ul><br />Lalu kapan kita mulai mengedit Template Blogspotnya ? sebentar, dalam mengedit sebuah tampilan sebuah blog, kita tidak wajib untuk terjun langsung kedalam sourcenya. Yang pastinya itu akan berisi ribuan kode CSS, JS, dan HTML yang akan membuat Anda dan saya bingung 7 keliling.<br /><br />Lalu apa solasinya, *eh solusinya ? mudah saja kita bisa menggunakan beberapa Tool yang sudah dibundling oleh Browser kita, misal di Chrome ada Developer Tool, dan di Mozilla juga ada tool bernama Web Developer, keduanya memiliki fungsi yang sama tentunya. (namun saya lebih memilih punyanya Chrome karena lebih simple tampilannya).<br /><br /><div style="text-align: center;"><h2 style="font-size: 18px;">Langkah Mengedit Template Blogger Supaya Keren</h2></div>Saya ingatkan sekali lagi, untuk alatnya saya menggunakan <b>Chrome Developer Tool</b> dan untuk bahannya saya menggunakan <b>Template Sederhana Blogger</b>.<br /><br /><ol><li><h2 style="font-size: 16px;">Menghilangkan Navigasi Bar Template</h2><br />Langkah awal kita akan merombak tampilan depan, yang jadi masalah ada Navigasi Bar yang (menurut saya) sedikit membingungkan kita saat ingin melakukan pengeditan template. Untuk itu kita akan menghilangkannya.<br /><br />Caranya, klik kanan dimana saja, lalu pilih Inspect Element. Selanjutnya kita akan sedikit bermain-main dengan alat yang mempunyai ikon kaca pembesar atau sering disebut selector.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWelp3_wUqt8TAj_s-KZ7QxCZqqCQdtufMcISR__FN2lBKnNYkk48USFjW3ZjsizwtMxQ0k_HAxs3f6IyZyerp21IixEArKFVe2c1UGF24NCtrtY6mrNEN76qEKmXA5mdyP4hm7SqA-w/s1600/mengedit+template+blogspot+dengan+developer+tool.jpg" target="_blank"><img alt="Mengedit Template Blogspot Dengan Developer Tool" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaWelp3_wUqt8TAj_s-KZ7QxCZqqCQdtufMcISR__FN2lBKnNYkk48USFjW3ZjsizwtMxQ0k_HAxs3f6IyZyerp21IixEArKFVe2c1UGF24NCtrtY6mrNEN76qEKmXA5mdyP4hm7SqA-w/s320/mengedit+template+blogspot+dengan+developer+tool.jpg" title="Mengedit Template Blogspot Dengan Developer Tool" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Sekarang arahkan kursor Anda tepat dipojok kiri bawah Navigasi Bar tersebut (intinya hingga semua tertutupi dengan warna biru), contoh seperti gambar dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOstuHCat13yMk7Ytn_iZma75L0MfNT7tfWccsQAhf8FE42jq8FJtpRgsHsceAy6RU7e34JnskHJQB1AInhdAIOU7QoH0Ezad5KHU-6kcE-tHHBTAUuOuRr03Q81swCAWeoKJtbJoLFVI/s1600/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+part+1.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger Supaya Keren gambar 1" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOstuHCat13yMk7Ytn_iZma75L0MfNT7tfWccsQAhf8FE42jq8FJtpRgsHsceAy6RU7e34JnskHJQB1AInhdAIOU7QoH0Ezad5KHU-6kcE-tHHBTAUuOuRr03Q81swCAWeoKJtbJoLFVI/s320/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+part+1.jpg" title="Belajar Cara Edit Template Blogger Supaya Keren gambar 1" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Lalu lihat sebelah kanan bawah layar Anda, tulisan Matched CSS Rules, lalu tambahkan kode 'display: none;' tanpa tanda kutip. Cara menambahkannya klik pada simbol '}' lalu tinggal Anda ketikkan perintah 'display: none;' dan lenyap sudah Navigasi Bar tersebut.<br /><br />Catatan : Untuk menghilangkan Navigasi Bar tersebut sebenarnya ada dua cara, yaitu dengan visibility: hidden dan display: none. Bedanya, kalau hidden itu hanya menyembunyikan, sementara none itu benar-benar menghilangkan. Jika masih bingung silahkan Anda coba, dan lihat perbedaanya.<br /><br /></li><li><h2 style="font-size: 16px;">Mangganti Warna Background Template</h2><br />Cara kedua ini bisa dibilang yang paling penting ya, karena jika salah dalam memadukan warna, bisa jadi pengunjung akan kabur. Dan langkah untuk Mengganti Warna Template ini sama saja seperti waktu kita ingin menghilangkan Navigasi Bar tadi.<br /><br />Pertama tentu klik dulu kaca pembesarnya, lalu arahkan ke tempat yang ingin Anda ganti Backgroundnya, contoh saya ingin mengganti warna background hanya dibagian sisi kanan dan sisi kiri, maka akan saya arahkan ke sebelah kiri template. Lalu saya ingin mengubahnya menjadi warna abu-abu muda, ya tinggal saya tambahkan kode css 'backgorund-color: #f2f2f2'.<br /><br />Lihat gambar dibawah ini agar tidak bingung.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OA7s4TT-dhJJ5i3iRy2YxS9_mqCXiLeKV8X3ioUiIAHsHuDATx1CQGOW2bvvrCcYR4vD8O8XVvIr-UB-l0qJqIdkFS9DdJznJKSgVBGs3kAhTY58wQyhmQ16zXeggQadlViJv9AthCA/s31600/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+part+3.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger Supaya Keren gambar 3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8OA7s4TT-dhJJ5i3iRy2YxS9_mqCXiLeKV8X3ioUiIAHsHuDATx1CQGOW2bvvrCcYR4vD8O8XVvIr-UB-l0qJqIdkFS9DdJznJKSgVBGs3kAhTY58wQyhmQ16zXeggQadlViJv9AthCA/s320/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+part+3.jpg" title="Belajar Cara Edit Template Blogger Supaya Keren gambar 3" width="320" /></a></div><div style="text-align: center;"><br /></div><br /></li><li><h2 style="font-size: 16px;">Menambahkan Border Pada Sisi Template Tertentu</h2><br />Yah, sekali lagi tak jauh beda dengan 2 Cara diatas, seperti biasa Anda arahkan dahulu pada bagian yang ingin Anda tebali dengan garis (border).<br /><br />Contoh saya ingin memberi border pada pembatas sisi kiri dan kanan, caranya tinnggal saya tambahkan '<span style="color: #666666;">border: 1px solid gainsboro;</span>' ini merupakan selektor bertingkat ya, jadi border akan berwarna abu-abu (gainsboro mirip gray).], memiliki garis yang padat (tidak putus-putus) dan mmemiliki ketebalan 1px.<br /><br />Hasilnya seperti gambar dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk0seH8dBWmI8WZfSL4OMko5kRBv6vqi-S9JYfElhjUsEccyOv0petwUxoweqsZKm6fXABpaVtWnkLIi2HlTpn2YymSZnPwzR854JB-czhu_gb6HauY9DM-CUAmdv8jUZU5OXBWdO84gQ/s1600/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+part+4.jpg" target="_blank"><img alt="Belajar Cara Edit Template Blogger Supaya Keren gambar 4" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk0seH8dBWmI8WZfSL4OMko5kRBv6vqi-S9JYfElhjUsEccyOv0petwUxoweqsZKm6fXABpaVtWnkLIi2HlTpn2YymSZnPwzR854JB-czhu_gb6HauY9DM-CUAmdv8jUZU5OXBWdO84gQ/s320/Belajar+Cara+Edit+Template+Blogger+Supaya+Keren+part+4.jpg" title="Belajar Cara Edit Template Blogger Supaya Keren gambar 4" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Lanjut semisal kita ingin menambahkan ruang diatas judul, semisal untuk penempatan iklan. Caranya cukup kita tambahkan <span style="color: #666666;">'div'</span> dibawah <span style="color: #666666;">class='content-cap-top cap-top'</span> Lalu edit css divnya dengan value :<br /><br /><blockquote class="tr_bq"><span style="color: #666666;">border: 1px solid gainsboro;</span><br /><span style="color: #666666;">height: 40px;</span><br /><span style="color: #666666;">background-color: #FDF5F5;</span><br /><span style="color: #666666;">border-bottom: 0;</span><br /><span style="color: #666666;">padding-top: 20px;</span><br /><span style="color: #666666;">font-size: 20px;</span><br /><span style="color: #666666;">text-align: center;</span></blockquote><br />Alasan saya menuliskan 'border-bottom: 0' adalah untuk menghilangkan garis yang bertumpuk antara div yang kita buat dengan content-inner.<br /><br />Dan hasil akhir akan seperti gambar dibawah ini.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR16j_45-sbY_be7jNdQi2W3_ieBlZb_52FwqNQabX_wtVvRLDw761mrI2ZSB9l8cx92S3sqh-59ULi1mk_nJvCBkE2296FbRhK37tawFiDsy0-LYz8nfrdjkU-8GcyHyVl1vibjz9Sl8/s1600/Hasil+Akhir+Belajar+Cara+Edit+Template+Blogger+Supaya+Keren.jpg" target="_blank"><img alt="Hasil Akhir Belajar Cara Edit Template Blogger Supaya Keren" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR16j_45-sbY_be7jNdQi2W3_ieBlZb_52FwqNQabX_wtVvRLDw761mrI2ZSB9l8cx92S3sqh-59ULi1mk_nJvCBkE2296FbRhK37tawFiDsy0-LYz8nfrdjkU-8GcyHyVl1vibjz9Sl8/s320/Hasil+Akhir+Belajar+Cara+Edit+Template+Blogger+Supaya+Keren.jpg" title="Hasil Akhir Belajar Cara Edit Template Blogger Supaya Keren" width="320" /></a></div><div style="text-align: center;"><br /></div></li></ol><br />Cukup mudah bukan <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank"><b>Tutorial Pertama Edit Template Blogger</b></a> kali ini. Nah, untuk Tutorial Mengedit Template selanjutnya kita akan fokus pada pengeditan Sidebar dan tapilan Artikel. Selengkapnya bisa Anda baca di <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" style="font-weight: bold;" target="_blank">Belajar Cara Edit Template Blogger Supaya Keren Part 2</a>.<br /><br />Akhir kata saya ucapkan terimakasih dan selamat Belajar.<br /><br /><br /><div class="caraedittemplate"><b>[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 1">Part 1</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-2.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 2">Part 2</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-3.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 3">Part 3</a> - <a href="http://berguruseo.blogspot.com/2013/12/belajar-cara-edit-template-blogger-4.html" target="_blank" title="Belajar Cara Edit Template Blogger Supaya Keren Part 4">Part 4</a></b></div>

Blogger Tips Belajar Cara Edit Template Blogger Supaya Keren Part 1

Mengedit Template yang ada di Blogspot memang saya akui bukan pekerjaan yang mudah, dimana kita tidak diberi ruang yang bebas dalam melaku...

Read more »

Misteri Dibalik Pemberian PageRank oleh Google

PageRank adalah sebuah algoritma yang telah dipatenkan yang berfungsi menentukan situs web mana yang lebih penting ataupun populer. Itu menurut wikipedia.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibx7uRGfNfvFU2stqNVKqth_36eIyr3tzn9Es2bPGYwGHNIKW1zsObDMCa4i-GLzaF0XHt3TALOTX2NVpfEHhwNYYSbUPpukXzDz8JYocWnTMVw5Ed-oyM7t4dx6W2GYS1BkDi6QxzQNI/s1600/Misteri-Dibalik-Pemberian-PageRank-oleh-Google.jpg" rel="nofollow" target="_blank"><img alt="Misteri Dibalik Pemberian PageRank oleh Google" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibx7uRGfNfvFU2stqNVKqth_36eIyr3tzn9Es2bPGYwGHNIKW1zsObDMCa4i-GLzaF0XHt3TALOTX2NVpfEHhwNYYSbUPpukXzDz8JYocWnTMVw5Ed-oyM7t4dx6W2GYS1BkDi6QxzQNI/s320/Misteri-Dibalik-Pemberian-PageRank-oleh-Google.jpg" title="Misteri Dibalik Pemberian PageRank oleh Google" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Tapi menurut saya pribadi, untuk bisa mendapatkan PageRank, Anda tidak pelu memiliki situs yang populer ataupun penting. Tidak perlu juga memiliki visitor ribuan untuk mendapatkan hadiah PageRank dari google. Tidak perlu Update rutin 3x sehari.<br /><br /><div style="text-align: center;"><span style="font-size: large;">Apa Alasan Saya Berani Mengatakan Seperti Ini ( atas dasar apa ? )</span></div><br />Curhat sebentar ya, saya sendiri memiliki 2 buah Blog. Blog utama ya <a href="http://berguruseo.blogspot.com/">berguruseo.blogspot.com</a> ini, dan Blog kedua adalah trasher.mywapblog.com terlihat dari namanya trash atau bisa diartikan sampah, maka Blog tersebut adalah Blog 'sampah' yang tidak terlau saya urus, update juga asal-asalan.<br /><br />Tapi anehnya, justru Blog 'sampah' seperti itu diberi hadiah PageRank 2 dari mbah Google ? aneh bukan.<br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6uLwhb9pHpo6lXhC-xoRJptEi4_2x9k5bEK1oqYm0cbgjssk0K4zenmuuVQo6n2XtE2kaqtfFrge8BqSEsQCYN5OA9UvICZPD3zfr3iwOlt7ccsDcHMikPPr45Sw81hTSE10yV2RXMjo/s1600/PageRank+Blog+Trasher.mywapblog.com.jpg" rel="nofollow" target="_blank"><img alt="PageRank+Blog+Trasher.mywapblog.com" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6uLwhb9pHpo6lXhC-xoRJptEi4_2x9k5bEK1oqYm0cbgjssk0K4zenmuuVQo6n2XtE2kaqtfFrge8BqSEsQCYN5OA9UvICZPD3zfr3iwOlt7ccsDcHMikPPr45Sw81hTSE10yV2RXMjo/s320/PageRank+Blog+Trasher.mywapblog.com.jpg" title="PageRank+Blog+Trasher.mywapblog.com" width="320" /></a></span></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6uLwhb9pHpo6lXhC-xoRJptEi4_2x9k5bEK1oqYm0cbgjssk0K4zenmuuVQo6n2XtE2kaqtfFrge8BqSEsQCYN5OA9UvICZPD3zfr3iwOlt7ccsDcHMikPPr45Sw81hTSE10yV2RXMjo/s1600/PageRank+Blog+Trasher.mywapblog.com.jpg" rel="nofollow" target="_blank">Blog trasher.mywapblog.com mendapat PR 2</a></span></td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Sementara blog utama yang saya besarkan dengan penuh kasih sayang tanpa copas sana sini justru dicampakkan oleh Google.</div><div class="separator" style="clear: both; text-align: left;"><br /></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfIFu6DIfkggoMqYzxt8liJE3qsuAjKvfPbLG2-RuviuJS5v9QcPUcjTMWrEh_9gtl4RwdQee2CK6d1TNaC1P83Y0PWVVpGko174ZEN-N1OI070bObdjF-DiMn4j28wCzc0_dm0aIl8zA/s1600/PageRank+Blog+berguruseo.blogspot.com.jpg" rel="nofollow" target="_blank"><img alt="PageRank+Blog+berguruseo.blogspot.com" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfIFu6DIfkggoMqYzxt8liJE3qsuAjKvfPbLG2-RuviuJS5v9QcPUcjTMWrEh_9gtl4RwdQee2CK6d1TNaC1P83Y0PWVVpGko174ZEN-N1OI070bObdjF-DiMn4j28wCzc0_dm0aIl8zA/s320/PageRank+Blog+berguruseo.blogspot.com.jpg" title="PageRank+Blog+berguruseo.blogspot.com" width="320" /></a></span></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfIFu6DIfkggoMqYzxt8liJE3qsuAjKvfPbLG2-RuviuJS5v9QcPUcjTMWrEh_9gtl4RwdQee2CK6d1TNaC1P83Y0PWVVpGko174ZEN-N1OI070bObdjF-DiMn4j28wCzc0_dm0aIl8zA/s1600/PageRank+Blog+berguruseo.blogspot.com.jpg" rel="nofollow" target="_blank">Blog berguruseo.blogspot.com setia dengan PR 0</a></span></td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: left;">Disini banyak hal yang saya pelajari mengenai Misteri dibalik pemberian PageRank ini. Diantaranya :</div><div class="separator" style="clear: both; text-align: left;"><br /></div><div class="separator" style="clear: both; text-align: left;"></div><ul><li>Bukan banyaknya jumlah visitor yang menyebabkan suatu Blog diberikan hadiah PageRank</li></ul><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeC0h5lnpczOHMPhlxwr8i5sXc-K7AbLmgpMRFVJjvaUDdr71q0ZxMsFNNnV9IqR9KDJC1Ta8UHSgS_8JanfV2mkbbHb4ya9ZD_aXIJH3zdaLYUx3Nr6PDqGrQp_f0CTDWUVfBshq5vA/s1600/alasan+dibalik+pemberian+pagerank.jpg" rel="nofollow" target="_blank"><img alt="alasan+dibalik+pemberian+pagerank" border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeC0h5lnpczOHMPhlxwr8i5sXc-K7AbLmgpMRFVJjvaUDdr71q0ZxMsFNNnV9IqR9KDJC1Ta8UHSgS_8JanfV2mkbbHb4ya9ZD_aXIJH3zdaLYUx3Nr6PDqGrQp_f0CTDWUVfBshq5vA/s320/alasan+dibalik+pemberian+pagerank.jpg" title="alasan+dibalik+pemberian+pagerank" width="320" /></a></span></td></tr><tr><td class="tr-caption" style="text-align: center;"><span style="font-family: Verdana, sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOeC0h5lnpczOHMPhlxwr8i5sXc-K7AbLmgpMRFVJjvaUDdr71q0ZxMsFNNnV9IqR9KDJC1Ta8UHSgS_8JanfV2mkbbHb4ya9ZD_aXIJH3zdaLYUx3Nr6PDqGrQp_f0CTDWUVfBshq5vA/s1600/alasan+dibalik+pemberian+pagerank.jpg" rel="nofollow" target="_blank">Pageview trasher.mywapblog.com < 1000</a></span></td></tr></tbody></table><div style="text-align: center;"><br /></div><ul><li>Pemberian PageRank Bukan karena jumlah BackLink </li></ul><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7PYFSVuMSPCK_jLtbd7-_IIFrnA2p2O_Cky-LQtiUXpPLQcRQ-zeLYoQi827N5AxHeVOIxKXWsaNIdc7w94JUPpPeSgH2rSzOiz5o97nzd2N7BqZMSzxVLi-e_vrzb-QUWKbmkMfeGes/s1600/perbandingan+sitelinking+trasher+dan+berguruseo.jpg" rel="nofollow" target="_blank"><span style="font-family: Verdana, sans-serif;"><img alt="perbandingan+sitelinking+trasher+dan+berguruseo" border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7PYFSVuMSPCK_jLtbd7-_IIFrnA2p2O_Cky-LQtiUXpPLQcRQ-zeLYoQi827N5AxHeVOIxKXWsaNIdc7w94JUPpPeSgH2rSzOiz5o97nzd2N7BqZMSzxVLi-e_vrzb-QUWKbmkMfeGes/s400/perbandingan+sitelinking+trasher+dan+berguruseo.jpg" title="perbandingan+sitelinking+trasher+dan+berguruseo" width="400" /></span></a></span></td></tr><tr><td class="tr-caption" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7PYFSVuMSPCK_jLtbd7-_IIFrnA2p2O_Cky-LQtiUXpPLQcRQ-zeLYoQi827N5AxHeVOIxKXWsaNIdc7w94JUPpPeSgH2rSzOiz5o97nzd2N7BqZMSzxVLi-e_vrzb-QUWKbmkMfeGes/s1600/perbandingan+sitelinking+trasher+dan+berguruseo.jpg" rel="nofollow" target="_blank"><span style="font-family: Verdana, sans-serif;">Perbandingan BackLink Trasher dan BerguruSEO</span></a></td></tr></tbody></table><br /><ul><li>Bukan juga karena kualitas Konten</li></ul><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><span style="margin-left: auto; margin-right: auto;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhybgW1KdHbWmD80FPNSmawc9c46LbqF-RmOGng4uNtrHgyGKcxLqFEUR8kOekaDiWe-zJzum-1gm11UpHXkSbIeJxkzG8xmiIj-bun4fFV2waExfjRgEQB4dbHbC6vwKuKtkr31b42bzM/s1600/Misteri+Dibalik+Pemberian+PageRank+oleh+Google+1.jpg" rel="nofollow" target="_blank"><span style="font-family: Verdana, sans-serif;"><img alt="Kualitas Konten Blog trasher yang biasa saja, malah tidak lulus SNI" border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhybgW1KdHbWmD80FPNSmawc9c46LbqF-RmOGng4uNtrHgyGKcxLqFEUR8kOekaDiWe-zJzum-1gm11UpHXkSbIeJxkzG8xmiIj-bun4fFV2waExfjRgEQB4dbHbC6vwKuKtkr31b42bzM/s320/Misteri+Dibalik+Pemberian+PageRank+oleh+Google+1.jpg" title="Kualitas Konten Blog trasher yang biasa saja, malah tidak lulus SNI" width="320" /></span></a></span></td></tr><tr><td class="tr-caption" style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhybgW1KdHbWmD80FPNSmawc9c46LbqF-RmOGng4uNtrHgyGKcxLqFEUR8kOekaDiWe-zJzum-1gm11UpHXkSbIeJxkzG8xmiIj-bun4fFV2waExfjRgEQB4dbHbC6vwKuKtkr31b42bzM/s1600/Misteri+Dibalik+Pemberian+PageRank+oleh+Google+1.jpg" rel="nofollow" target="_blank"><span style="font-family: Verdana, sans-serif;">Kualitas Konten Blog trasher yang biasa saja, malah tidak lulus SNI</span></a></td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="text-align: left;">Jadi hampir bisa dipastikan, bukan ketiga aspek diatas lah yang membuat suatu Blog mendapatkan PageRank. Saya ulangi lagi, bukan karena jumlah visitor, backlink maupun kualitas konten.</div><div style="text-align: left;"><br /></div><div style="text-align: left;">Pertanyaan yang akan muncul tentunya adalah 'Lalu Apa Yang Membuat Sebuah Blog Diberi Hadiah PageRamk Oleh Google ?' ya kembali ke judul diatas ini masih menjadi Misteri Google yang belum terpecahkan hingga saat ini 11 Desember 2013 (11-12-13).</div><div style="text-align: center;"><br /></div><br /><br />

Google PageRank Misteri Dibalik Pemberian PageRank oleh Google

PageRank adalah sebuah algoritma yang telah dipatenkan yang berfungsi menentukan situs web mana yang lebih penting ataupun populer. Itu menu...

Read more »

Tips Memilih Jasa SEO Murah dan Terbaik di Indonesia

<b>Memilih Jasa SEO</b> ibaratkan memilih sebuah baju atau pakaian, yang mahal belum tentu memuaskan dan yang murah juga belum tentu mengecewakan, tergantung pada kualitas dari pelayanan yang diberikan (tidak bisa disamaratakan).<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3pEs8Q0KfTh5K50MzrjdL19SSDClKmReGoXrwKI65PBPRsWRcbNrYzo5UsdO37PANMAu_QV3UFYelPlbzh0OqBy8rhsaPG5hIN8YPDyY_vk-haFyOeiA5hi8QN1NtscmlSRdUIvXvDY/s1600/LOGO+JASA+SEO+TERBAIK+MURAH.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="LOGO JASA SEO TERBAIK MURAH" border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw3pEs8Q0KfTh5K50MzrjdL19SSDClKmReGoXrwKI65PBPRsWRcbNrYzo5UsdO37PANMAu_QV3UFYelPlbzh0OqBy8rhsaPG5hIN8YPDyY_vk-haFyOeiA5hi8QN1NtscmlSRdUIvXvDY/s320/LOGO+JASA+SEO+TERBAIK+MURAH.gif" title="LOGO JASA SEO TERBAIK MURAH" width="320" /></a></div><div style="text-align: center;"><br /></div>Pada postingan kali ini, saya tidak akan merekomendasikan kepada Anda, Jasa SEO mana yang sebaiknya Anda pilih, karena disini saya hanya akan memberikan Tips Memilih Jasa SEO. Jadi posisi saya disini adalah netral alias tidak memihak penyedia Jasa SEO manapun.<br /><br />Baiklah, untuk memilih sebuah Jasa SEO ada beberapa hal yang harus Anda tanyakan kepada sang penyedia Jasa SEO tersebut. Diantaranya adalah :<br /><br /><ol><li><h2 style="font-size: 18px;">Apakah Jasa SEO Yang Mereka Tawarkan Melakukan Optimization Audit & Report Pada Blog Anda ?</h2><br /><span style="color: #cc0000;">Audit</span> disini artinya adalah <span style="color: #cc0000;">Memeriksa</span>, sementara <span style="color: #0b5394;">Report</span> adalah <span style="color: #0b5394;">Melaporkan</span>. Jadi jika Jasa SEO tersebut tidak 'mampu' <span style="color: #cc0000;">Memeriksa</span> dan <span style="color: #0b5394;">Melaporkan</span> kesalahan apa yang ada di Blog Anda, maka bisa dipastikan Jasa SEO yang mereka tawarkan bisa dibilang belum Memenuhi syarat sebagai Jasa SEO Terbaik, atau dengan kata lain mereka belum pantas menyediakan atau membuka Jasa SEO.<br /><br /></li><li><h2 style="font-size: 18px;">Apakah Jasa SEO Mereka Mampu Menganalisa Persaingan ?</h2><br />Yang saya maksud Menganalisa Persaingan disini bukan mengambil data dari Google Adword Keyword Planner ya. Karena data persaingan disitu kurang memuaskan (tidak akurat) yang katanya persaingannya Low ternyata sangat High saat kita melakukan pencarian di Google.<br /><br />Tips untuk Anda dalam melihat Persaingan Sebenarnya di Google adalah dengan mengganti start= pada alamat url.<br /><br />Agar Anda tidak semakin bingung saya jelaskan menggunakan gambar :<br /><br /><ul><li>Masuk ke Google (disini saya menggunakan google.co.id), lalu Ketikkan Kata Kunci yang ingin Anda lihat persaingannya (misal : ilmu seo)<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVrVwxKfXTvd9msRiW5EIa9-NePI1DWxpfBDJxovxUogHkjG3sPxy9pzGYHTTnbAolivdaNoo2S0DLqGTuJrkRzen5Fu2iB5pqfn5worWTChE11FBCNFVEe0MMkbexcu-LKrdOEZH3T-k/s1600/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+1.jpg" target="_blank"><img alt="Tips Memilih Jasa SEO Murah Terbaik Indonesia 1" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVrVwxKfXTvd9msRiW5EIa9-NePI1DWxpfBDJxovxUogHkjG3sPxy9pzGYHTTnbAolivdaNoo2S0DLqGTuJrkRzen5Fu2iB5pqfn5worWTChE11FBCNFVEe0MMkbexcu-LKrdOEZH3T-k/s320/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+1.jpg" title="Tips Memilih Jasa SEO Murah Terbaik Indonesia 1" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Perhatikan Jumlah dari Hasil Pencariannya, mengejutkan memang. Apakah benar ada 2 Juta Blog yang akan bersaing dengan kita pada keyword 'ilmu seo' ? Untuk mengetahuinya, baca langkah selanjutya.<br /><br /></li><li>Skrol kebawah dan Bukalah halaman 2<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hrEM9IzzayofKrNpmOqKYblwB-2yqOj2owjUSCrPl7mtIMunamW8-0EBRCS7XOL6pYu2K2UspGEJ5BXEWEkQ4Ftn2HhV-Y4m3Qh7cO1aZMegl4zYaSRNZ8cB4Nv_TRSFfljbHwWsWQk/s1600/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+2.jpg" target="_blank"><img alt="Tips Memilih Jasa SEO Murah Terbaik Indonesia 2" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9hrEM9IzzayofKrNpmOqKYblwB-2yqOj2owjUSCrPl7mtIMunamW8-0EBRCS7XOL6pYu2K2UspGEJ5BXEWEkQ4Ftn2HhV-Y4m3Qh7cO1aZMegl4zYaSRNZ8cB4Nv_TRSFfljbHwWsWQk/s320/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+2.jpg" title="Tips Memilih Jasa SEO Murah Terbaik Indonesia 2" width="320" /></a></div><div style="text-align: center;"><br /></div><br /></li><li>Disini kita akan merubah url pencarian tersebut, Caranya perhatikan kata start=30 pada alamat url yang ada di address bar. Lalu ganti angka 30 menjadi 900. Maka akan menjadi seperti ini :<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKSxQ4_ufCnP1buZlWqa8s1eFGQRykzoem4DNA84Cv2pNj-4bX_-1PGxgnj0S8K0Mtc_fjfdCibjxrU0DeENcEr9t9Y0uHDUEnmDKRYa7JNkOZuD7zvL-iHUdW-f9CzSu7rNCImRFKp5w/s1600/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+3.jpg" target="_blank"><img alt="Tips Memilih Jasa SEO Murah Terbaik Indonesia 3" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKSxQ4_ufCnP1buZlWqa8s1eFGQRykzoem4DNA84Cv2pNj-4bX_-1PGxgnj0S8K0Mtc_fjfdCibjxrU0DeENcEr9t9Y0uHDUEnmDKRYa7JNkOZuD7zvL-iHUdW-f9CzSu7rNCImRFKp5w/s320/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+3.jpg" title="Tips Memilih Jasa SEO Murah Terbaik Indonesia 3" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Lalu klik Enter.<br /><br /></li><li>Dari sini sudah terlihat persaingan sesungguhnya yang akan kita hadapi, yaitu tak kurang dari 300 Blog.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8E5vDFpvgnS_tPKrzxWBfKdbO-Eo3qWBY7HUUmoyeeon8rzpWq054u3tcV6mxjwbjswOyONEOjZ3-ZFhelYxFDI_o08LoB1f05P-MtA-15jn7WS7v5dY049_Mc3MTi3grIRG8B46XgQ/s1600/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+4.jpg" target="_blank"><img alt="Tips Memilih Jasa SEO Murah Terbaik Indonesia 4" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis8E5vDFpvgnS_tPKrzxWBfKdbO-Eo3qWBY7HUUmoyeeon8rzpWq054u3tcV6mxjwbjswOyONEOjZ3-ZFhelYxFDI_o08LoB1f05P-MtA-15jn7WS7v5dY049_Mc3MTi3grIRG8B46XgQ/s320/Tips+Memilih+Jasa+SEO+Murah+Terbaik+Indonesia+4.jpg" title="Tips Memilih Jasa SEO Murah Terbaik Indonesia 4" width="320" /></a></div><div style="text-align: center;"><br /></div><br />Anda pun bisa melanjutkan dengan mengecek data dari setiap blog saingan Anda dengan SEOquake.</li></ul><br /></li><li><h2 style="font-size: 18px;">Apakah Penyedia Jasa SEO Tersebut Mampu Melakukan Keyword Analysis ?</h2><br />Melakukan Keyword Analysis itu maksudnya bukan hanya dengan menggunakan Tool Keyword Planner, maksud dari Keyword Analysis disini adalah mampukah mereka menyusun Keyword yang dibidik dan menjadikannya judul yang mampu mendatangkan ribuan traffic atau pengunjung. Jika jawabannya adalah mampu, maka Jasa SEO tersebut layak Anda pertibangkan.<br /><br /></li><li><h2 style="font-size: 18px;">Apakah Jasa SEO Yang Mereka Berikan Juga Akan Melakukan Link Building ?</h2><br />Bisa dibilang <a href="http://berguruseo.blogspot.com/2013/07/teknik-link-building-untuk-seo.html" target="_blank"><b>Link Building</b></a> atau Membangun BackLink merupakan tahapan yang cukup penting dalam Dunia SEO. Pasalnya, Google menganggap Link yang mengarah ke Blog kita itu ibaratkan sebuah <b>Referensi yang diberikan oleh Blog lain</b> kepada Blog kita.</li></ol><br />Jika Jasa SEO yang mereka berikan mampu menjawab Keempat pertanyaan diatas dengan jawaban Iya atau Mampu, maka hampir bisa dipastikan (99%) penyedia Jasa SEO tersebut, adalah Yang Terbaik.<br /><br />Sekarang soal <b>Harga dari Jasa SEO</b> tersebut, Untuk Harga sendirinya yang saya tahu berkisar antara <b>Rp. 1.000.000 - 3.000.000</b>. Per Tahun ? bukan, tapi Per Bulan. Nah, jika Anda mendapati seorang Pakar SEO yang menyediakan Jasa SEO namun mematok (lu pikir ayam) harga dibawah Rp. 1.000.000 per Bulan, maka Anda perlu waspada dan sebaiknya mintalah Garansi untuk memastikan Anda tidak tertipu dalam jebakan betmen.<br /><br /><br /><h2>Jasa SEO Murah bukan Jaminan Jasa Tersebut Buruk !</h2><br /><div class="separator" style="clear: both; text-align: center;"><img alt="Jasa SEO Murah" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6XkbXv4lU181LD6hO_5Mxv21YR9xNddF1lhckhYqC28042DWKQ-cCZZCQAL8s2RvbS97DzJiOSLmgMamF-T0tcMjbkUNY8U3bS7cWz47P1Vhb87MgY8axeyTuj0L7R4b4iQ0Geoloz8/s1600/jasa+seo+murah.jpg" title="Jasa SEO Murah" /></div><br /><br />Banyak yang menganggap jika mlihat atau menemui Jasa SEO Murah, pasti ornag-orang akan mengganggap, ah harga murah paling kualitasnya juga murahan.<br /><br />Tapi taukah Anda, bahwa hal tersebut tidak selalu benar, saya punya pengalaman yang mungkin akan menarik jika untuk disimak.<br /><br />Kamis 20/10/2013<br /><br />Saya dan teman saya (sebut saja namanya si otong). Nah saya dan si otong ini, bisa dibilang sangat pemula dalam hal seo, dan kebetulan saat itu saya memang belum terlalu mengerti apa itu SEO.<br /><br />Singkat cerita, saya dan si otong ditawari oleh seseorang yang 'ngakunya' <a href="http://berguruseo.blogspot.com/" target="_blank">pakar seo</a>, saya tidak terlalu mengingat jelas apa yang beliau katakan, tapi hal yang paling membekas di pikiran saya saat itu adalah saat beliau menawarkan jasa seo murah, ya dengan harga yang sangat murah ( tidak lebih dari 50rb ).<br /><br />Spotan saya dan teman saya kegirangna, tapi di satu sisi kami juga curiga, apakah jasa seo murah tersebut dapat diandalkan ? maksud saya apakah benar-benar bisa menaikkan posisi blog saya di SERP.<br /><br />Pertanyaan itu muncul kami berdua, dan akhirnya beliau menyakinkan kami, dan berani memberi garansi, jika dalam satu bulan belum page one, maka uang kembali. Dari situ saya langsung percaya (karena ada jaminan).<br /><br />Dan kami 1 minggu belum ada pergerakan, 2 minggu sudah mulai naik, 3 minggu naik drastis tapi belum masuk page one, dan setelah 4 minggu akhirnya blog kami naik ke Page One, walaupun tidak diurutan pertama.<br /><br />Tentu saat itu kami sangat senang, karena hanya dengan modal Rp.50.000 blog kami sudah menempati halaman satu google, Itu membuktikan bahwa <i><span style="color: red;">Jasa SEO Murah tidak Selalu Murahan</span></i>.<br /><br />Nah, mungkin sampai disini dulu cerita singkat saya mengenai jasa seo murah, dan semoga Tips Memilih Jasa SEO Murah dan Terbaik di Indonesia ini bisa menjadi dasar untuk Anda dalam memilih Jasa SEO yang Terbaik dan tentunya yang benar-benar dapat memberi manfaat untuk Blog Anda, akhir kata saya ucapkan sekian dan terimakasih.

Blogger Tips Nasihat SEO Tips Memilih Jasa SEO Murah dan Terbaik di Indonesia

Memilih Jasa SEO ibaratkan memilih sebuah baju atau pakaian, yang mahal belum tentu memuaskan dan yang murah juga belum tentu mengecewakan,...

Read more »