eksak's

@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);

/* Override UGG site */
#main {width: 95%; padding:0;}
.content-asset p {margin:0 auto;}
.breadcrumb {display:none;}

/* Helpers */
/**************************/
.margin-top-10 {padding-top:10px;}
.margin-bot-10 {padding-bottom:10px;}

/* Typography */
/**************************/
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:24px; font-weight:400; text-transform: uppercase; color:black; padding:0; margin:0;}
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:14px; line-height:24px;}
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}

.sc {color: #3b8595;}
.ny {color: #3d3c3a;}
.atw {color: #c48660;}

/* Section - Title */
/**************************/
#parallax-world-of-ugg .title {background:; padding: 60px; margin:0 auto; text-align:center;}
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}

/* Section - Block */
/**************************/
#parallax-world-of-ugg .block {background: ; padding: 60px; width:600px; margin:0 auto; text-align:justify;}
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}

/* Section - Parallax */
/**************************/
#parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDcOJh974UKKEC3Tylb4Z4-iIfcm0RkTaVTyGAsKqzqb2fn-gNKqRBKeJV4-25TvVg4Hn4o_VnC7riRV5-ZO4PG2yUkwmlUqOWrsRF_bRGYTQuD592_VdPQElM8fv7qNvOH7-1bgNtYQk/s1600/2014-07-31-14-09-55_photo.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
#parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRz-aUjUipW1WPVCg7SrTGOcN_cLrKjl4sGxjuFyAivyljDO4Fu4YXsr9CeuF_syzxKqniVmPyhF35GmqBWtMSVFhyEjktQBFKZEMixfM4ewPgM1TO3Xbnl1gTTrNX5oeraVjCqoFaSBM/s1600/IMG_20140731_145733.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
#parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRwZQStJ-pZ8goK7mP4ie7Ff7Nb9q7Y6QqO8nt66eX33CURAb7rBKmW6XOIgyL-SHUuNP2ka8AJPTGEgQmy_oYhsXk46hSnUSC4N_1G7dAbSSX74ro-own_LV2lZl73q_zPUgS1iNTML8/s1600/2014-07-31-14-05-53_photo.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}

/* Extras */
/**************************/
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}

/* Media Queries */
/**************************/
@media screen and (max-width: 959px) and (min-width: 768px) {
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
}
@media screen and (max-width: 767px) {
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
  #parallax-world-of-ugg h2 {font-size:30px;}
  #parallax-world-of-ugg .block {padding: 30px;}
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
}
@media screen and (max-width: 479px) {
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
}
  

HTML

<div id="parallax-world-of-ugg">
<br />
<br />
<br />
<section>
  <div class="title">
<h3>
Gua Rong View</h3>
<h1>
Panorama 5 Gunung</h1>
</div>
</section>

<section>
    <div class="parallax-one">
<h2>
ENTER SOUTHERN SEMARANG</h2>
</div>
</section>

<section>
  <div class="block">
<span class="first-character sc">S</span>ebenernya tempat ini bukanlah tempat yang baru buat gue dan keluarga gue. Dari semasa gue SD, gue udah suka maen ke tempat ini. Gua Rong adalah sebuah gua di atas bukit dengan ketinggian 998 meter di atas permukaan laut. Berlokasi di desa Ndelik, kecamatan Tuntang, kabupaten Semarang. Jaman SD gue tentu aja Nggunung Rong (rong = lubang) gak kayak sekarang ini. Jalan menuju ke puncak juga gak aspal kayak sekarang. Juga bukan tempat wisata. Konon lubang Gua Rong panjangnya gak terukur. Menurut cerita orang-orang tua, Gua Rong adalah tempat bertapanya orang-orang suci zaman dulu. Katanya, para petapa ini dengan kebersihan hatinya, bisa masuk lubang Gua Rong dan keluar di Demak. Sekarang kawasan ini dikelola oleh Perusahaan Daerah Citra Mandiri  Jawa Tengah (PD CMJT). Trus dikasih nama Gua Rong View. Dinamai begitu karna dari atas bukit, kita ditawari pemandangan yang menakjubkan. Dari bukit yang gak terlalu tinggi ini, kelihat jelas Rawa Pening dan kalo beruntung bisa ngelihat lima gunung berjajar dari utara ke selatan: Merapi, Telomoyo, Ungaran, Sindoro, dan Sumbing.  <br />
<div class="line-break margin-top-10">
</div>
<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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpww01hRCeyT_Uy1xyw-CijjN4tNfg12qACX_AhfPq3aXD045ZPhgqSG6bz4BWR9pAAC1KZFOhqLyGtbj7RjfO2HVQR4RRiZhYzI93QmmG9s728bmytnV1ZrDBzNBwQqLkRBZsGgQtdJ0/s1600/6.Menikmati-Keindahan-5-Gunung-dari-Bukit-Rong.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="view" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpww01hRCeyT_Uy1xyw-CijjN4tNfg12qACX_AhfPq3aXD045ZPhgqSG6bz4BWR9pAAC1KZFOhqLyGtbj7RjfO2HVQR4RRiZhYzI93QmmG9s728bmytnV1ZrDBzNBwQqLkRBZsGgQtdJ0/s320/6.Menikmati-Keindahan-5-Gunung-dari-Bukit-Rong.jpg" height="300" title="view" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Rawa Pening dari puncak bukit</td></tr>
</tbody></table>
<div class="margin-top-10">
Dari Kota Semarang untuk menuju bukit Rong bisa di tempuh pake sepeda motor. Dari pertigaan Bawen ambil arah solo, trus entar ngelewatin jembatan Tuntang ada pertigaan pos polisi ambil arah kiri. Trus ikutin aja jalan ampe lapangan desa Ndelik. Ambil arah lurus kira-kira 200m ada pertigaan ambil kanan ampe ujung jalan, trus ambil arah kanan lagi. Di sekitar area ada papan yang nunjukin rute Gua Rong berada. Kalo masih bingung, gue saranin buat nanya ama warga setempat.
</div>
</div>
</section>

<section>
  <div class="parallax-two">
<h2>
GUA RONG</h2>
</div>
</section>

<section>
  <div class="block">
<span class="first-character ny">D</span>engan membayar tiket retribusi Rp.3000,- di hari biasa serta Rp.5000,- di hari Sabtu dan Minggu, kita bisa milih buat parkir kendaraan di pos jaga atau di lokasi wisata dengan biaya parkir Rp.2000,- buat sepeda motor serta Rp.4000,- buat mobil. Langkah kaki yang menaiki tanjakan menuju Goa Rong gak bakal kerasa capek pas ngeliat sekeliling jalan dipenuhin ama pepohonan serta sesekali memandang jauh daratan yang ngebentang di wilyah Kabupaten Semarang.
<br />
<div class="line-break margin-top-10">
</div>
<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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgno_mtwe3YF3igISeJI10_SFWgLMw_ehBsnSW8EAaFriNIYadgOE4utFFkAz4T_uSqsPHNRSn5907izFZpfgW1z_EmJsnR6rv9mDv9peABscmCB35bWWBAT2eIE_xj153q_VfAbgLAm5o/s1600/IMG_6649.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="loket" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgno_mtwe3YF3igISeJI10_SFWgLMw_ehBsnSW8EAaFriNIYadgOE4utFFkAz4T_uSqsPHNRSn5907izFZpfgW1z_EmJsnR6rv9mDv9peABscmCB35bWWBAT2eIE_xj153q_VfAbgLAm5o/s320/IMG_6649.JPG" height="266" title="loket" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Loket Masuk</td></tr>
</tbody></table>
<div class="margin-top-10">
Dengan ketinggian mencapai 998 mdpl, tentu kita perlu nyiapin fisik sebelum bisa memulai petualangan di bukit rong ini. Meskipun tidak terlalu tinggi, tetep aja kita perlu berhati-hati. Perjalanan yang ditempuh dengan melewati jalanan berkelok dijamin gak bakal ngebosenin. Dengan pemandangan indah di kanan kiri nemenin perjalanan kita. Disediain juga kendaraan, mobil ataupun motor dari pengelola bagi kita yang ngerasa gak siap secara fisik buat naik ke puncak. Jangan lupa juga bawa kamera buat mengabadikan keindahan pemandangan yang kita temuin. Ada beberapa spot di sepanjang perjalanan yang akan ditempuh menuju ke puncak yang sayang banget buat dilewatin. Wisata ini sendiri belum terlalu dikenal masyarakat luas, cuma wisatawan dari daerah sekitar seperti Semarang, Ungaran dan Salatiga yang tahu dan sering berkunjung di hari libur.</div>
</div>
</section>

<section>
  <div class="parallax-three">
<h2>
love is felt togetherness</h2>
</div>
</section>

<section>
  <div class="block">
<span class="first-character atw">M</span>ungkin ada dari elo yang punya mimpi mendaki gunung, karna emang kelihatannya kegiatan pendakian itu keren sekaligus menantang banget. Nah, buat yang pengen “latihan” mendaki gunung mungkin bisa ngunjungin Gua Rong ini. Gua Rong emang tempat yang pas buat nyobain gimana rasanya mendaki gunung sebelum beralih ke gunung atau bukit yang lebih tinggi.<br />
<div class="line-break margin-top-10">
</div>
<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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfnZHGUHEJqyWPDgTCpD1A4I6WA5ym-RxX8vO-5aP3fxW17uot_c3Qet7USBg3YlHQKIJjUDgcPiuKAW3deylchBG_o9xgzV__UutWGTO4jMQy-Ir9-pjS8jW2nqcQ-vYp3mfcnsWZ2E/s1600/17032013(008).jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="gazebo" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRfnZHGUHEJqyWPDgTCpD1A4I6WA5ym-RxX8vO-5aP3fxW17uot_c3Qet7USBg3YlHQKIJjUDgcPiuKAW3deylchBG_o9xgzV__UutWGTO4jMQy-Ir9-pjS8jW2nqcQ-vYp3mfcnsWZ2E/s320/17032013(008).jpg" height="300" title="gazebo" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Salah satu gazebo buat liat pemandangan</td></tr>
</tbody></table>
<div class="margin-top-10">
Namanya emang Goa Rong, tapi setelah nyampe ke puncak kita gak bakal nemuin goa atau rong yang dimaksud. Dari puncak ada jalan turun kecil menuju gua. Atau bisa juga dari bawah di pertengahan perjalanan menuju puncak bukit ada jalan setapak sedikit naik. Dari situ cukup naik sekitar 10 meter sudah sampai ke mulut gua. Gua Rong memang kecil dan kurang menarik, makanya yang dikelola PD CMJT bukan Goa Rong-nya tapi View-nya yang ada di puncak bukit.</div>
</div>
</section>
  
</div>

Assalamu 'alaikum, s0b ! Sibuk? Nggak? Atau lagi ngapain aja elo, pas ketemu artikel ini paling nggak elo lagi jalan-jalan atau bahasa gaulnya,"Blogwalking". Itu juga yang gue jalanin setiap hari, muter sana-sini, cari materi entri, komen itu-ini, dan apa aja deh yang penting hepi! :r Akhir-akhir ini banyak para blogger yang berlomba nunjukin kesaktian mereka dengan ngikut Kontes SEO. SEO tu apaan gue juga kagak tau banyak, sih! :( Yang kalo sok tau gue artinya Search Engine Optimization. Atau arti semau gue-nya, kegiatan yang tujuannya buat ningkatin peringkat situs/blog di halaman hasil mesin pencari (khususon buat Mbah Gugel). Tentu aja bukan gue, karna gue cuma blogger baru kemaren yang cemen! Apalagi hadiah yang bakal didapet dari kontes gede bangg-ngett! :D Cara apa aja dikerahin biar jadi jawara di Seach Engine.

Nah, di post kali ini gue cuma mau ngasih sedikit trik modifikasi template blogspot kita biar lebih SEO Friendly buat ngedukung optimasi blog di SERP (Search Engine Result Page). Istilahnya pas elo nyari sebuah kata kunci di mesin pencari, bakal ada 10 hasil pencarian yang klop dengan kata kunci yang elo mau.

Dan ini itu yang perlu elo modif adalah:

1. Page Title
Biasanya format page title dari blogspot kayak gini : JUDUL BLOG : JUDUL POSTING, nah agar blog elo lebih didemenin ama Google dan SEO friendly, elo harus ngerubah format page title standart itu jadi kayak gini : JUDUL POSTING | JUDUL BLOG. Caranya cari kode berikut di EDIT HTML :

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

kalo udah ketemu, elo hapus trus elo ganti dengan kode ini:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Kata kunci | Kata kunci </title>
</b:if>

Biar gak acak-acakan mending elo sikat dari sini aja:

<b:if cond='data:blog.pageType == "item"'><br><title><data:blog.pageName/> | <data:blog.title/></title><br><b:else/><br><title><data:blog.pageTitle/> | Kata kunci | Kata kunci </title><br></b:if>

Trus elo ganti "Kata kunci" ama keyword yang elo pengen. Abis itu elo save template, deh ! :)

2. Meta Keyword dan Deskripsi
Mesin pencari ala gugel sangat suka web/blog yang jelas tema dan isinya. So, elo kudu nambahin tag yang namanya meta tag. Caranya, dengan nambahin kode di bawah ini sebelum kode <b:skin><![CDATA[/*

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Deskripsi Blog Anda" />
<meta name="keywords" content="Kata kunci, kata kunci, kata kunci, kata kunci, kata kunci" />
</b:if>

Kopas disini, s0b!:

<b:if cond='data:blog.url == data:blog.homepageUrl'><br><meta name="description" content="Deskripsi Blog Anda" /><br><meta name="keywords" content="Kata kunci, kata kunci, kata kunci, kata kunci, kata kunci" /><br></b:if>

Lo tau mana yang perlu elo ganti. Trus elo save lagi, deh! :D

3. Masang Navigasi Breadcrumbs
Jadi bagian dari tehnik SEO juga, yang kurang lebih fungsinya buat nggampangin mesin pencari ngindex artikel-artikel di blog elo. Keterangan ini gue dapet dari Blogger Ponsel-nya Kang Yusup . Langsung aja cabut ke EDIT HTML, trus cari kode di bawah ini:

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

Nah, trus elo tarok kode ini di atas kode tadi:

<b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:2px;border-bottom:1px dotted #cccccc;'>
<p>Your here: <a dir='ltr' expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if> &#187; <strong><data:post.title/></strong>
</p>
</div>
</b:if>
</b:if>

Sikat disini, kang!:
<b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><br><b:if cond='data:blog.pageType == "item"'><br><div style='padding:2px;border-bottom:1px dotted #cccccc;'> <br><p> Your here: <a dir='ltr' expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><br><b:loop values='data:post.labels' var='label'><br><a expr:href='data:label.url' rel='tag'><data:label.name/></a><br><b:if cond='data:label.isLast != "true"'>,</b:if><br></b:loop><br></b:if> » <b><data:post.title/></b><br></p> <br></div> <br></b:if><br></b:if>

Untuk penampakannya kayak apa elo bisa liat diatas judul artikel ini:


Simpen lagi, deh! :r








4. Masang Related Post
Alhamdulillah,ya! Di template mobile karya Kang Bagas kita ini udah ada related post-nya, buat yang belom ada silahkan tanya Mbah Gugel! :r



5. Matiin Seting Arsip Blog
Simbah Gugel ini benci banget ama yang namanya duplicate content. Jadi mau nggak mau elo kudu menge-nonaktifkan opsi arsip. Caranya Lo langsung aja ke Setelan>Arsipkan>pilih Arsip Tidak Ada di Frekuensi Arsip.



Atau pake cara laen, elo simpen kode di bawah ini setelah kode <head>

<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>



Silahkan:

<b:if cond='data:blog.pageType == "archive"'><meta content='noindex' name='robots'/></b:if>

Jangan lupa simpen, ya! :o

6. Nambahin kode ‘rel=canonical’
Hampir sama dengan fungsi pe-nonaktifan arsip di nomor 5, pokoknya yang namanya duplicate content itu gak banget deh buat SEO. :r Gak bisa ditolerir! :r Caranya setelah kode <head> elo pasang deh kode di bawah ini:

<link expr:href='data:blog.url' rel='canonical' />

Disave, ya disave... :D

7. Tag Heading
Simbah yang satu ini seneng banget ama tulisan yang make tag H1. So, elo kudu ngikutin kesenengan dia. Caranya elo cari kode ini di EDIT HTML:

<b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if>
Setiap tulisan h3 disitu, elo hapus trus elo ganti dengan h1. Simpel, kan? :) Terakhir, tambahin kode berikut ini sebelum kode ]]></b:skin>

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Akhirnya kelar juga, s0b! Sebenarnya entri ini cuma dalam rangka catatan belajar SEO gue aja, s0b...! Dan moga aja manpaat buat elo juga. :) Karna intinya gue kurang antusias ama tehnik optimasinya si Gugel. Apalagi sampe harus ngikut kontes-kontes segala. Entar aja kali, ya! :D Tapi gimana juga lapak ini butuh pengunjung, apalagi mau sekedar corat-coret di kotak komen gue. Sampe pada akhirnya gue dapet jawaban dari lubuk hati gue yang paling dalem bahwa, "Gue nulis di blog ini adalah buat MANUSIA, bukan buat robot pencari macam GOOGLE!!!"