Cara Memasang Permalink Pada Blogspot

Pada post kali ini saya akan sharing tutorial blogspot, yaitu "Cara memasang permalink di bawah postingan". Sedikit penjelasan dari saya, permalink atau yang biasa juga disebut permanen link adalah sebuah kotak yang berisi pesan dan alamat url atau link yang permanen postingan. Pemasangan Permalink di blog sangat penting untuk menambah link internal di artikel postingan kita. Karena permalink yang satu ini dapat membuat template kita seo friendly sehingga mudah dibaca oleh google. Untuk lebih jelas, lihat pada screen shoot di samping.

Untuk memasangnya cukup ikuti langkah - langkah di bawah ini:

1. Login pada blog sobat
2. Rancangan
3. Edit HTML
4. Expand template widget
5. Cari kode ]]></b:skin>
6. Copy kode di bawah ini dan paste di atas kode pada no 5

.permalink {border: 1px dotted #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;} .permalink a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

7. Setelah itu cari kode <div class='post-footer'>
8. Copy kode di bawah ini dan paste di atas kode pada no 7

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='permalink'> <center><small>Sobat sedang membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> dan sobat bisa menemukan artikel <data:blog.pageName/> ini dengan url <strong><data:post.url/></strong>, sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi teman-teman sobat, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sumbernya.</small></center></div></b:if>

9. Simpan template dan lihat hasilnya.

»»  read more

Cara buat Bingkai pada postingan blog

Berikut adalah contoh 7 bingkai yang bisa anda gunakan pada tulisan di Blog. Langsung aja dan caranya sama yaitu copas kode yang ada di bawah ini dan letakkan di EDIT HTML.
Untuk warna ataubackground-color, border, dll bisa anda sesuaikan dengan keinginan anda. Selamat mencoba

Solid

<div style="border: 1px solid #000000; background-color: #FFFFFF; padding: 5px; width: 400px;"> Tulisan yang akan diberi bingkai </div>

Dashed

<div style="border: 1px dashed #000000; background- padding: 5px; width: 400px;"> Tulisan yang akan diberi bingkai </div>

Dotted

<div style="border: 1px dotted #000000; background-color: #FFFFFF; padding: 5px; width: 400px;"> Tulisan yang akan diberi bingkai </div>

Double

<div style="border: 4px double #000000; background- padding: 5px; width: 400px;"> Tulisan yang akan diberi bingkai </div>

Groove

<div style="border: 4px groove #000000; background-color: #FFFFFF; padding: 5px; width: 400px;"> Tulisan yang akan diberi bingkai </div>

Outset

<div style="border: 4px outset #000000; background- padding: 5px; width: 400px;"> Tulisan yang akan diberi bingkai </div>

Ridge

<div style="border: 4px ridge #000000; background- padding: 5px; width: 400px;"> Tulisan yang akan diberi bingkai </div>

»»  read more

Cara membuat related post dengan gambar bergerak

Recent Post adalah widget yang akan menampilkan beberapa artikel / postingan terakhir blog. Adapun jumlah portingan yang di tampilkan bisa diatur sesuai keinginan kita dengan mengacak - acak kode HTMLnya. Dengan Related Post Thmbnails ini, pengunjung akan dengan mudah melihat beberapa artikel terakhir yang diposting di blog. Dengan sekali klik, pengunjung akan langsung menuju ke artikel yang masih fresh.
Contoh nya silahkan lihat di blog saya ini hahahaha.... narsis mode on :) 

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Copy kode di bawah ini dan paste di atasnya </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Trus cari kode di bawah ini :

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

Kalau sudah ketemu copy code dibawah ini dan pastekan kode dibawah salah satu kode di atas yang anda temukan

<!-- Marquee Hajsmy Blog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.hajsmy.co.cc/2011/06/cara-membuat-related-post-thumbnails.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.hajsmy.co.cc/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>
<!-- Marquee Hajsmy Blog Related Posts with Thumbnails Code End-->

Langkah terakhir yaitu save template.

Selamat mencoba.

»»  read more

Tool HTML Parser

"Convert text to HTML entities and vice versa" was created to Parser HTML/XHTML so HTML or XHTML code can be added into the body of your Blog Templates. artinya..
Silahkan masukkan kode HTML anda untuk di parse di bawah ini, dan silahkan kopas aja hasilnya di artikel target bla...bla...bla...
hahahahaa....... enjoy it!!!

»»  read more