Trik Mudah Menerapkan Tututorial Blog

Diposkan oleh Siti Nurjanah 12/25/2014 09:57:00 PM

Sebenarnya Saya bingung untuk menulis Judul untuk postingan ini padahal ide penulisan artikelnya sudah saya dapatkan. Posting saya kali ini membahas tentang bagaimana mengikuti atau mengaplikasikan tutorial blog untuk anda yang masih baru dalam dunia blogging seperti Saya.

Untuk para blogger pemual biasanya akan mencari pelajaran ngeblog dengan mengetikkan kata atau kalimat di adress bar di home page google atau halaman browser lainnya. Misalnya saja bagaimana cara membuat read more otomatis, bagaimana cara membuat artikel terkait, dan lain-lain.

Umumnya dalam tutorial yang kita dapatkan terdapat poin-poin yang berurutan, misalnya dari mulai "masuk ke blogger.com" "unduh template lengkap" > masuk ke menu template>edit HTML" lalu "cari kode ini", "masukkan kode ini di atas kode di atas". terakhir cari kode ini lalu ganti dengan kode ini" dan lain lain.

Untuk beberapa blogger baru ada sedikit ketakutan karena di tutorial tersebut ada kata "unduh template lengkap" untuk jaga-jaga bila terjadi kesalahan. Memang benar bila terjadi kesalahan maka kode yang diterapkan tidak akan berfungsi atau bisa saja tata letak template akan tidak beraturan.

Mungkin benar apa yang ada di tutorial bahwa dengan mengunduh template dapat mengatasi kbila ada kesalahan. Namun setelah Saya mengikuti beberapa tutorial, ternyata ada cara mudah dan sederhana untuk menerapkan tutorial blog bila terjadi kesalahan.

Ambil contoh bila kita sedang menerapkan tutorial cara Membuat Raleted Post With Image Thumbnails

1. Login ke akun blogger
2. Masuk ke menu template > edit HTML
3. Pastekan kode berikut tepat diatas </head>

<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKgOGUaj3M_Oxgj3kAD3J7Eoj7Ok_00lIw5QN-icxRuvkCDwGZdpDOXdmEYwLDwyHvxVuYBJsvz_RQiX7N_P0CW675GdqrIU4w-70hd-ZfIi776Vmcqt0l5jEAxNd2xA7is5w63QVjZ48/s400/noimage.png";
var maxresults=8;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='https://bloggergubug.googlecode.com/files/grelposttumb.js' type='text/javascript'/>



4. Cari kode <data:post.body/> silahkan pastekan kode berikut tepat dibawahnya


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


5. Simpan

Untuk opoin 3 bisa diterapkan langsung, namun untuk poin 4 yakni mempastekan kode di bawah <data:post.body/> Namun kode pada umumnya terdapat beberap <data:post.body/>

Bila anda gagal dengan <data:post.body/> yang pertama maka anda dapat menekan ctr+Z untuk mengurungkan perintah terakhir, sehingga anda dapat menuju <data:post.body/> yang lainnya dengan meletakkan mouse di kotak pencarian dalam kotak yang ada kode-kode HTML lalu tekan enter ... begitu seterusnya sampai tutorialnya dapat anda terapkan dengan benar.