download mp3 cutter

Mungkin bagi anda yang ingin memperindah tampilan blognya,pada tutorial kali ini saya akan membagikan sedikit tutorial tentang cara membuat blog menjadi bertaburan kelopak bunga mawar,tentunya akan semakin menambah indah tampilan blog anda terutama buat para blogger cwek kalau yang suka dengan bunga dan ingin mengaplikasikan pada blog,berikut cara mudah dan simplenya. . langsung saja yaa. . !!
Untuk lebih jelasnya silahkan lihat demonya dulu disini,dan kalau anda suka langsung saja lihat cara mengaplikasikan di blog. .

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy dan paste kode di bawah ke dalam kotak HTML/javascript

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>

3. Kalau sudah simpan perubahan refresh blog anda dan lihat hasilnya.

Nah demikian tutorial singkat tentang cara membuat blog menjadi bertabur kelopak bunga mawar,sekian tutorial saya kali ini selamat mencoba dan selamat berksperimen. .

Label widget pada Blogger secara default ada 2 pilihan yaitu List dan Cloud. Widget Label Cloud yang akan kita bahas kali ini. Dengan sedikit tambahan kode CSS widget label type cloud ini bisa dipercantik tampilanya pada blog kita. Ada pilihan 2 Style Label Cloud Blogger, Anda bisa memberi sentuhan baru dan agar lebih menarik tampilan widget label pada blog Anda. Nah jika anda ingin menambah widget label cloud ini pada blog anda,silahkan ikuti caranya dibawah ini. . .
Label di blog adalah kata kunci yang mengkategorikan seluruh isi/konten blog . Label juga merupakan link-link singkat dan sederhana menuju postingan Anda. Pemasangan widget Tag, Label atau Kategori pada Blog/web bertujuan untuk memberikan navigasi yang mudah bagi pembaca blog. Pada Blogger sejak Google telah mengambil alih atau menyediakan layanan widget resminya melalui server Blogger sendiri, salah satunya adalah Page List and Label Cloud List dengan enable deisgner untuk membuat dynamic menus.

Nah Untuk membuat dan modifikasi tampilan Label Cloud Blogger seperti pada contoh gambar diatas, Anda hanya perlu menambah kode CSS pada template. Dibawah ini saya bagikan juga kode CSS berikut tutorial cara pemasanganya pada template blogger, kode terebut dapat disesuaikan dengan beberapa kiat untuk membuat desain label lebih menarik. Seperti dengan menambahkan gambar latar belakang ( image background) sendiri pada setiap label.

Langkah Pertama
1. Masuk Blogger Dasboard > Template > Edit HTML > Lanjutkan
2. Backup template anda,untuk berjaga-jaga seandainya terjadi kesalahan
3. Tekan Control + F > cari kode ]]></b:skin>
4. Copy salah satu kode CSS diatas ( yang Anda pilih )
5. Pastekan / letakkan kodenya tepat DIATAS tag ]]></b:skin>
6. Save Template

Langkah Kedua
1. Masuk Blogger Dasboard > Tata Letak > Klik Tambah Gadget > pilih Label
2. Setting widget Blogger Label > pilih Tampilkan Cloud
3. Untuk pilihan "Sortir" dan "tampilkan semua" atau label yang dipilih terserah Anda
Lihat gambar dibawah untuk lebih jelasnya
Untuk mengganti widget label pada blog anda silahkan pilih CSS style label cloud dibawah ini. . ! !

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

.label-size{ margin:0; padding:0; position:relative; } .label-size a , .label-size span{ float:left; height:24px; line-height:24px; position:relative;font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before , .label-size span::before{ content:""; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent;border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after , .label-size span::after{ content:""; position:absolute; top:10px; left:0; float:left; width:4px;height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover , .label-size span::hover { background:#555;} .label-size a:hover:before , .label-size span::hover::before{border-color:transparent #555 transparent transparent;}

Pada artikel saya kali ini saya akan mencoba memberikan tutorial singkat tentang  Cara membuat Related post atau artikel terkait pada blogger,tutorial yang akan kita bahas ini adalah membuat Artikel terkait dengan efek check list,cara menambahkan artikel terkait ini pada blog sangat mudah sob,bagi yang ingin menambahkan related post ini silahkan ikuti beberapa cara dibawah ini. . ! !

• Seperti biasa,langsung saja ke edit tempelate blog anda
• Selanjutnya cari kode ]]></b:skin> pada tempelate anda
• Kalau sudah ketemu,copy CSS dibawah ini dan pastekan di atas ]]></b:skin>

.rbbox
{
 font-family:Federant;
 background:#fff;
 border:1px solid #ccc;
 height:198px;
 overflow:auto;
 margin:10px 0 15px;
 padding:10px
}
.rbbox ul li:hover
{
 cursor:pointer;
 list-style-image:url(http://4umi.com/image/icon/check.png);
 color:#3B5998
}
.rbbox ul li
{
 list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8vhhJOM_KC_tipNGP0142EryOBECzF0cOSxQo1_ItRElSTPzkFQD9UsgQw2F-wS9fqyeD5bEbKHlvenypR3Oq6ho5dH4pb-RA8PGHxibvDw61e1ur_tG7hp_lCLjq6zw_eXk8buA9bX8/s12/uncheck.gif);
 padding:.5em 0 .5em .3em
}

• Kalau sudah sekarang cari kode <data:post.body/>
• Copy code dibawah ini dan pastekan dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='rbbox'>
<div>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel =999;
var maxNumberOfLabels = 999;
maxNumberOfPostsPerLabel = 999;
maxNumberOfLabels = 999;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

Simpan hasil edit tempelate anda,dan lihat hasilnya. . :)

Banyak ragam widget statistik untuk blogger yang disediakan oleh pihak ke tiga. Baik itu widget dari Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter dan segudang layanan widget statistik lainnya. Adapun widget statistik default dari blogger meskipun masih memiliki kekurangan karena belum memberikan data statistis yang lengkap seperti jumlah visitor karena hanya menampilkan jumlah total tayang laman saja, tetapi cukup untuk memantau perkembangan blog anda.

Tutorial kali ini tentang cara modifikasi widget statistik default blogger agar terlihat lebih keren dari aspek desain. Tentu dengan pengetahuan CSS anda bisa mengembangkan lagi desain dari widget ini.

Fitur dari widget statistik ini adalah:

1. Menampilkan jumlah postingan
2. Menampilkan jumlah komentar
3. Menampilkan total tayang laman

Nah jika anda tertarik Untuk memasang widget statistik ini pada blog anda,ikuti cara-caranya dibawah ini simple dan gak rumit. . :)

• Masuk ke dasbord blogger>>pilih menu tata letak
• Tambah gadget>>Pilih widget statistik blog
• Lebih jelasnya lihat gambar dibawah. . ! !

Pada kolom kongfigurasi,anda tidak perlu mengganti nama widget atau memilih tampilan widget statistik,langsung klik "SIMPAN" kemudian klik "SIMPAN SETELAN".

• Kalau sudah sekarang masuk ke menu tempelate>>edit HTML
• Copy Kode dibawah ini dan pastekan tepat diatas ]]></b:skin> pada tempelate anda.

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background-color:#fff;background:#0090D5;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

Sesuaikan sendiri Code CSS diatas,anda bisah mengubah kode warna Background dan kode warna font widget statistik,agar sesuai dengan tampilan warna yang anda inginkan. .

• Kalau sudah sekarang cari kode dibawah ini

<b:widget id='Stats1' locked='false' title='total tayang laman' type='stats'/>

• Jika sudah ketemu ganti kode diatas dengan kode dibawah ini

<b:widget id='Stats1' locked='false' title='' type='Stats'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <li> <h4 id='Stats1_totalPosts'>&amp;hellip;</h4> <span>Posts</span> </li> <li id='totalComments'> <h4 id='Stats1_totalComments'>&amp;hellip;</h4> <span>Comments</span> </li> <li id='totalCount'> <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4> <span>Pageviews</span> </li> </ul> <script type='text/javascript'> //<![CDATA[ function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>'); //]]> </script> </div> </b:includable> </b:widget>

Selesai Simpan dan lihat hasilnya. . :D

Pada kesempatan kali ini saya akan berbagi tip atau cara membuat kotak permalink blogger,namun pada atikel saya kali ini sedikit berbeda dari yang kemarin tentang cara membuat permalink dibawah postingan blog,kali ini saya akan membahas caranya menggabungkan kotak permalink seo friendly dengan kotak from berlangganan via email di bawah postingan,antara permalink dan from berlangganan dijadikan dalam satu kotak,biar lebih praktis dan lebih multi fungsi.Oke bagi yang mau tau cara membuatnya langsung saja sob,ke caranya. .

• Masuk ke dasbord blogger kalian
• Ke menu tempelate >> edit HTML
• Cari kode ]]></b:skin> pada tempelate anda
• Kemudian copy kode di bawah ini dan letakan tepat di atas ]]></b:skin>

#rss-wrapper {

background-color:#fff;

border-radius: 0px 0px 15px 15px;

border:2px solid #DF3A01;

margin:0 0 10px;

padding:5px 10px;

font-size: 13px;

}

.lsc-inp {

border:1px solid #DF3A01;

border-radius: 6px 6px 6px 6px;

width:180px;

height:20px;

font-size:13px;

padding:3px 4px 4px 10px

}

.lsc-sbmt {padding:2px}

.clear{clear:both}

• Kalau sudah menyesuaikan kode di atas
• Masih di edit html pada tempelate anda
• Sekarang cari kode <data:post.body/>
• Kalau tempelate anda menggunakan auto readmore kemungkinan kode <data:post.body/> ada dua,atau lebih. . .
• Copy code dibawah ini dan letakan di bawah kode <data:post.body/> yang kedua.

<!-- Artikel Berlangganan -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='rss-wrapper'>

<div class='lsc-rss'>

<div style='text-align: justify;'>

Anda baru saja membaca artikel yang berjudul <span style='color:red;'><strong><data:blog.pageName/></strong></span>.Anda boleh copy paste artikel ini dengan menyertakan link <span style='color:green;'><b><data:post.url/></b></span> sebagai sumbernya.Dan Jika Anda ingin berlangganan Artikel dari blog ini, Silahkan <a href='http://feeds.feedburner.com/blogspot/Andoelsean' target='_blank' title='Berlangganan'>

<b>klik disini</b></a> untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel terbaru setiap ada artikel yang terbit di blog ini.

<hr color="#DF3A01" />

</div>

<div class='lsc-subs'>

<table border='0' cellpadding='0' cellspacing='0' width='100%'>

<tr>

<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Andoelsean&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'>

<div align='left'>

<input class='lsc-inp' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email and submit&quot;;}' onfocus='if (this.value == &quot;Enter your email and submit&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email and submit'/>

<input name='uri' type='hidden' value='Andoelsean'/>

<input name='title' type='hidden' value='Andoelsean'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='lsc-sbmt' type='submit' value='Submit'/></div>

</form></td>

<td align='left' style='padding:10px 0 0 0;' valign='top' width='35%'>

<a href='http://feeds.feedburner.com/Andoelsean'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/Andoelsean?bg=DF3A01&amp;fg=444444&amp;anim=1' style='border:0' width='88'/></a> <a href='http://www.blogger.com/follow-blog.g?blogID=2407762948145064726' target='_blank' title='Follow my blog'><img height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfAl22DB1ZPfrjmiy53v3cZcNIt2SFydgUwagVXmseNFnd1zVp9PUqt-JhcGH_Q1ujohsS09HF_tLY299PkiYd_kEMRNI5hFmN-cWQpTuFhL3H-6JbmR-SYl64FUvRr9Jc15QNHw7GQGrs/w177-h38/Join+button.png' width='100'/></a><p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>

<a href='http://andoelsean.blogspot.com/' target='_blank'>:: Terimakasih ::</a></span></p>

</td></tr></table></div></div></div><div class='clear'/></b:if>

<!-- End Artikel Berlangganan -->

 

Kalau semua sudah disesuaikan,preview dulu tempelate anda,jika tidak ada yang error ya langsung di save saja,dan lihat hasilnya. .selamat blog anda sekarang sudah terpasang permalink dan from berlangganan otomatis dibawah postingan. .hhe
selamat mencoba dan selamat berksperimen. . :)

Menambah widget back to top,memang tidak di sarankan,tapi menurut saya widget back to top,penting dan harus juga di pasang di blog,karena dapat mempermudah dan mempersingkat untuk kembali pada halaman blog paling atas,daripada harus scroll-scroll pada mouse. . Nah pada postingan saya kali ini saya akan berbagi tips atau cara menambah widget back to top dengan efek bounce atau memantul setelah sampai di halaman atas. .ya mungkin sudah banyak blogger yang membahas tutorial ini, . .tapi tidak ada salahnya saya berbagi dengan cara yang saya tau. .oke langsung saja ke caranya sob. . !!

CARA MEMASANG WIDGET BACK TO TOP 

• Masuk ke blogger dasbord kalian
• Pilih menu tempelate >> Edti HTML
• Cari kode </head> pada tempelate anda
• Selanjutnya Script di bawah ini,dan pastekan tepat diatas kode </head>

<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'/><script
type='text/javascript'>$(function() { $(window).scroll(function() {
if($(this).scrollTop() &gt; 100) {
$(&#39;#ElitesRunTop&#39;).fadeIn(); } else { $(&#39;#ElitesRunTop&#39;).fadeOut();
} });
$(&#39;#ElitesRunTop&gt;
img&#39;).click(function() {
$(&#39;body,html&#39;).animate({scrollTop:0},800)
.animate({scrollTop:25},200) .animate({scrollTop:0},150)
.animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });</script>

• Kalau sudah save tempelate anda
• sekarang ke menu tata letak
• Tambah gadget, Html/javascript
• Copy script di bawah ini dan pastekan di kotak HTML/Javascript tadi

 <style>
#ElitesRunTop { text-align:center; position:fixed; bottom:0px; right:10px; cursor:pointer; display:none;}
</style>
<div id='ElitesRunTop'><img src='http://cdn1.iconfinder.com/data/icons/super-mono-basic/blue/arrow-up_basic_blue.png' alt='Back to top' style='margin-right:-9px'/></div> 

Kalau sudah yaa di save dan lihat hasilnya,sekarang di blog anda sudah terpasang widget back to top dengan efek bounce atau memantul. .selamat mencoba dan ber eksperimen. . :)

Ingin tampilan widget  followers google plus pada blog anda berbeda dari yang lainya?Pada postingan saya kali ini saya akan berbagi tips cara membuat widget followers google plus dengan effect hover,caranya sangat mudah sob hanya menambah beberapa kode saja. .Oke langsung saja bagi yang mau menycoba memasang di blog,lebih jelasnya silahkan lihat screenshot di bawah ini dulu sob. . ! !

CARA MEMASANG DI BLOG

• Masuk ke dashboard blogger kalian
• Kemudaian pilih menu Tata letak>Tambah gadget>Html/Javascrip

• Kalau sudah,selanjutnya silahkan copy kode di bawah ini. .!! 
• Dan pastekan di kotak HTML/Javascrip tadi. .

<style>
.bloggerspiceGplus{
    margin: 10px auto;
    background-color: #FEFEFE;
    width: 260px;
    padding: 10px 0 10px 10px;
    height: 255px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 3px solid #E50913;
}
.bloggerspiceGplus:hover {
    border: 3px solid #A0060E;
    background-color: #E50913;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
</style>
<div class="bloggerspiceGplus">
<div class="g-plus" data-action="followers" data-height="280" data-href="https://plus.google.com/109617190570026416526" data-source="blogger:blog:followers" data-width="280"></div>
</div>

KETERANGAN : 109617190570026416526 silahkan ganti dulu dengan ID google plus anda,kalau sudah ya di save,dan lihat hasilnya. . :)

Meruah dan memodifikasi widget blog,saya rasa juga sudah sewajarnya dilakukan para blogger,tidak lain tujuanya ya untuk memperindah tampilan blognya,membuat jadi senyaman mungkin dan membuat betah bila ada pengunjung di blog kita,Nah pada postingan saya kali ini,saya akan maembahas tentang cara merubah tampilan widget popular posts atau entri populer pada blog. .lebih jelasnya lihat screenshotnya sob,kurang lebih tampilanya akan jadi seperti itu. .Penasaran tentang cara merubah tampilan popular post pada blog?. 

langsung saja sob ke cara membuatnya,sangat simple dan mudah juga ga ribet. . hhe

1. Pastikan anda sebelumnya sudah memasang Popular posts/Entri populer pada blog anda.
2. Kalau sudah ada,sekarang saatnya mengedit pada tempelate anda
3. Backup dulu tempelate anda sob,untuk berjaga jaga,kalau terjadi kesalahan
4. Selanjutnya cari kode ]]></b:skin> pada tempelate anda
5. Jika sudah ketemu Copy CSS di bawah ini dan pastekan tepat di atas ]]></b:skin>

<style type='text/css'>

.PopularPosts .item-title{display:yes}

.PopularPosts ul li {

border-radius:50px 0px 0px 50px;

float: left;list-style: none outside none;margin: 1px !important;padding: 1px !important;

border: 1px solid #444;

overflow: hidden;

box-shadow: 0px 0px 1px #333;

font-style: normal;

font-weight:bold;

width: 100%;

height:60px;

border-radius:35px 5px 5px 35px;

}

.PopularPosts ul li:hover{

background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);

overflow: hidden;

color: #414141;

width: 100%;

height:60px;

border: 1px solid #ffffff;

box-shadow: 0px 0px 2px #ffffff;

}

.PopularPosts ul li img {

padding:1px  ;

margin:1px;

margin-top:3px;

border-radius:35px 35px 35px 35px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

border: 1px solid #333;

height: 50px;width:50px;

overflow: hidden;

}

.PopularPosts ul li img:hover {

border:1px solid #ffffff;

border-radius:25px 25px 25px 25px;

background: -moz-linear-gradient(top, #FFFFFF 1%, #5c5c5c 50%);

box-shadow: 0px 0px 10px #ffffff;

}

</style> 

Kalau sudah,preview dulu dan kalau tidak ada yang error save tempelate anda. .
Selaesai dan lihat hasilnya. . :)
Selamat mencoba dan berkreasi. .

Mungkin artikel tentang cara membuat related post sudah banyak dan mudah kita cari,tinggal bertanya ama mbah goggle aja,sudah muncul ribuan tutorial cara membuat related post untuk blogger,tapi gpp saya tetap membuat postingan ini,siapa tau ada yang baca dan ingin tau tentang cara modifikasi related post dengan thumbnail pada blogger. .oke langsung saja sob,ke cara membuatnya. . ! !

CARA MEMBUAT RELATED POST DENGAN THUMBNAIL

1. Login ke blogger kalian masing-masing
2. Pada menu klik tempelate>edit HTML
3. Tapi download atau backup dulu tempelate anda,untuk berjaga-jaga kalau terjadi kesalahan
4. Selanjutnya Cari kode </head> pada tempelate anda
5. Jika sudah ketemu copy kode di bawah ini,dan letakan di atas kode </head> tadi

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOrKxpIKBwOkiebGVNmhsJ6svqpbBPb9_rf53G8aSxAG7DX1BqoJd5quqdo87M1yWOzucqFhUkkD01Q32Oe0JUT2pq7OHQRlxUIoNJL_4yvCcEcd4cVFFBbrpS4rHZJc0bh3KM3n3jhY/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

KETERANGAN:

• Kode yang berwarna BIRU judul dari widget related post,silahkan ganti dengan kata-kata yang anda inginkan
• Dan kode yang Berwarna MERAH itu adalah jumlah related postnya,silahkan di seesuaikan

Masih di edit tempelate,selanjutnya cari kode <data:post.body/> (jika pada tempelate anda menggunakan readmore otomatis biasanya kode <data:post.body/> ada dua,cari kode yang kedua.) Copy kode dibawah ini dan letakan dibawah <data:post.body/> yang kedua.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End--> 

Klik preview dulu,jika tidak error save tempelate anda,selesai sekarang di tempelate anda sudah terpasang realted post dengan thumbnail. .
Begitulah cara membuat related post dengan thumbnail,semoga bermanfaat dan selamat mencoba.

Bagi yang ingin memasang yahoo smileys,sekarang ikuti langkah mudah di bawah ini. . ! !

CARA MUDAH MEMASANG YAHOO SMILEYS PADA BLOGGER

• Pergi ke dashboard blogger anda
• klik pada tempelate > edit HTML
• Cari kode ]]> </ b: skin> pada tempelate anda,gunakan ctrl+f untuk mempermudah
• Copy dan pastekan kode dibawah ini tepat diatas kode ]]> </ b: skin>

img.andoelsean {
    height: auto !important;
    vertical-align: middle !important;
    width: auto !important;
    border:0px !important;
}   

• Selanjutnya cari kode </body>
• Copy dan pastekan kode di bawah ini diatas kode </body>

<script src='http://rbcode.googlecode.com/files/yahoosmileys.js' type='text/javascript'/> 

• Berikutnya cari lagi kode </b:includable>
• Copy kode di bawah ini dan pastekan diatas kode </b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='andoelsean' id='ysmile' style='
background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4f5fc), color-stop(50%,#bfe8f9), color-stop(51%,#9fd8ef), color-stop(100%,#2ab0ed));background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -o-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: -ms-linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);background: linear-gradient(top, #e4f5fc 0%,#bfe8f9 50%,#9fd8ef 51%,#2ab0ed 100%);border-radius: 3px;width:100%; padding:10px; height:65px;'>
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :x
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-O
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif'/> :7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif'/> B-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif'/> #:-S
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif'/> :-B
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/101.gif'/> :-c
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~X(
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/103.gif'/> :-h
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/28.gif'/> I-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/41.gif'/> =D7
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/43.gif'/> @-)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/45.gif'/> :-w
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/47.gif'/> 7:P
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/48.gif'/> 2):)
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/110.gif'/> :!!
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/111.gif'/> \m/
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif'/> :-q
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/113.gif'/> :-bd
<img alt='' class='bhacksmly' src='http://l.yimg.com/us.yimg.com/i/mesg/emoticons7/114.gif'/> ^#(^
</div><a href="http://andoelsean.blogspot.com"></a></b:if>

Sekarang Save tempelate anda,dan sudah selesai memasang yahoo smileys pada blog anda. .
sekian tutorial saya kali ini,smoga bermanfaat dan selamat mencoba. . :)

Pada postingan saya kali ini saya akan share tutorial,tentang cara membuat tombol CSS keren dengan efek hover pada postingan blog.Tombol ini dibuat menggunakan CSS dengan efek hover yang keren mewakili dari warna yang berbeda,tombol yang akan kita buat ini untuk tombol Home,Demo dan Download. .Tapi anda juga bisa mengubah teksnya sesuai kebutuhan anda. .Langsung saja lihat demo gambarnya:

BAGAIMANA MENAMBAHKAN TOMBOL INI KE BLOG?

Tombol ini sangat mudah di gunakan,Sekarang saya ingin membagi cara instalasi widget ini menjadi dua bagian yaitu bagian untuk CSS dan bagian untuk HTML,Pada awalnya kita menambahkan kode CSS dulu ke tempelate kita,untuk membuat tombolnya.
Silahkan ikuti caranya di bawah ini:

• Masuk ke Dasboard blogger kalian
• Menuju ke menu tempelate
• Klik edit HTML
• Sekarang tekan ctrl+f untuk mempermudah mencari kode ]]></b: skin>
• Kalau kode ]]></b: skin> sudah ketemu
• Copy CSS di bawah ini dan letakan tepat diatas kode ]]></b: skin> pada tempelate anda

.button {

-moz-border-radius:5px5px 5px 5px;

-webkit-border-radius:5px5px 5px 5px;

border-radius:5px5px 5px 5px;

-moz-box-shadow:01px 3px rgba(0, 0, 0, 0.25);

-webkit-box-shadow:01px 3px rgba(0, 0, 0, 0.25);

box-shadow:01px 3px rgba(0, 0, 0, 0.25);

background:scroll0 0 #222222;

border-bottom:1pxsolid rgba(0, 0, 0, 0.25);

color:#FFFFFF!important;

cursor:pointer;

font-weight:bold;

line-height:1;

overflow:visible;

font-size:17px;

padding:8px19px 9px;

position:relative;

text-decoration:none;

text-shadow:0-1px 1px rgba(0, 0, 0, 0.25);

width:auto;

}

.demobutton {

background-color:#999999;

text-align:center;

width:100px;

}

.demobutton:hover {

background-color:#EB7D05;

}

.downloadbutton {

background-color:#999999;

text-align:center;

width:100px;

}

.downloadbutton:hover {

background-color:#00AC00;

}

.homebutton {

background-color:#999999;

text-align:center;

width:100px;

}

.homebutton:hover {

background-color:#1666DC;

}

.button:hover {

-moz-box-shadow:01px 11px rgba(0, 0, 0, 0.45);

-webkit-box-shadow:01px 11px rgba(0, 0, 0, 0.45);

box-shadow:01px 11px rgba(0, 0, 0, 0.45);

}

Sekarang kita telah menambahkan CSS (style) di tempelate, . .
Dan sekarang bagaimana cara menggunakanya? Silahkan pilih Kode HTML di bawah ini untuk membuat tombol di postingan anda. .!!

• Pastikan dulu anda beralih saat akan membuat postingan dari Compose ke HTML
• Pilih kode tombol di bawah ini dan pastekan dimana anda ingin menampilkan tombolnya

Kode untuk membuat tombol HOME

<a class="button homebutton" href="YOUR LINK HERE" rel="nofollow"

style="float: left;" target="_blank"><span style="display:

inline-block;">Homepage</span></a>

Kode untuk membuat tombol DEMO

<a class="demobutton button" href="YOUR DEMO LINK HERE" rel="nofollow"

style="float: left;" target="_blank"><span style="display:

inline-block;">Live Demo</span></a>

Kode untuk membuat tombol DOWNLOAD

<a class="button downloadbutton" href="YOUR DOWNLOAD LINK HERE"

rel="nofollow" style="float: left;" target="_blank"><span style="display:

inline-block;">Download</span></a>

KETERANGAN:

• Text yang berwarna merah adalah untuk link anda
• Dan text yang berwarna biru adalah untuk kalimat di dalam tombol
• Silahkan ganti dengan keinginan anda

Nah begitulah cara membuat tombol menggunakan css pada postingan blog,sekian tutorial ini,semoga bermanfaat untuk kita semua.
Selamat mencoba dan Happy Blogging. . :)

Efek tombol keyboard pada postingan blog,menjadikan postingan lebih menarik dan terlihat lebih profesional. . kenapa begitu? ya karena efek css ini emang simpel dan terlihat lebih menarik di aplikasikan pada postingan blog. .untuk lebih jelasnya lihat gambar aja deh,daripada kelamaan dan ribet jelasinya. . hehe
Nah kurang lebihnya seperti gambar di atas yang akan saya bahas dalam postingan saya kali ini. .
Membuat efek tombol keyboard pada postingan blog. .

CARA MEMASANG DI BLOGGER. .

• Masuk ke dasboard blogger kalian
• Langsung ke menu tempelate
• Edit HTML
• Tekan Ctrl+f biar mempermudah mencari kode ]]></b:skin> 
• kalau kode ]]></b:skin> sudah ketemu
• sekarang copy css di bawah ini dan pastekan tepat di atas kode ]]></b:skin> 

/*****************************************
Keyboard Style  CSS
******************************************/
kbd{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

• Kalau sudah meletakan kode di atas
•  Selanjutnya save tempelate anda

Untuk mengaplikasikan efeknya di postingan anda gunakan kode HTML di bawah ini Sob. . !!

<kbd>Masukan teks anda di sini</kbd>

• Sebelum memasukan kode di atas pastikan klik dulu HTML jangan yg Compose sob. .
• Ganti tulisan yang berwarna merah sesuai keinginan anda

Selesai sudah cara membuat efek tombol keyboard pada postingan. .
sangat simple dan mudah kan? hehe
sekian artikel ini semoga bermanfaat . .
Happy Blogging. .

Pengertian Permalink 

Permalink adalah sebuah link atau tautan yang menuju ke suatu situs atau blog kita.masuk setelah berlalu dari halaman depan ke arsip.Kebanyakan pengguna Blogger memasang permalink pada bagian bawah postingan.Biasanya dalam kotak permalink,sudah ada tag otomatis atau kode html yang berisi permalink dari postingan yang sedang di baca oleh pengunjung blog tersebut.Permalink ini juga berfungsi mempermudah pembaca dan pengguna blog lain agar mengetahui permalink dari postingan yang sedang dibacanya.Sehingga pengguna blog lain bisa dengan mudah seandainya ingin menaruh kode html postingan kita di blog mereka,sehingga memberikan tautan(backlink)di halaman postingan tadi. .

Cara membuat Permalink di bawah postingan. .

• Login ke blogger kalian masing-masing
• Masuk ke tempelate > edit > HTML
• Selanjutnya cari kode ]]></b:skin>
• Lalu copy kode di bawah ini dan paste tepat di atas kode ]]></b:skin>

 

.admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee"; color:#aaa;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid
#000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px
10px;margin:0 0 0 0;display:block;}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{background:#000000;width:90px;height:100px;border:1px solid
#000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-
box-shadow:none;-webkit-box-shadow:none;}

keterangan:

• width:90px adalah lebar foto dalam permalink
• height:100px tinggi foto dalam permalink
• dan #000000 adalah warna garis tepi atau border untuk foto 
• silahkan disesuaikan dengan keinginan sobat

Selanjutnya Masih di edit HTML

• cari kode <data:post.body/>
• Jika tempelate adana menggunakan auto readmore,kemungkinan kode <data:post.body/> ada dua. silahkan pilih kode <data:post.body/> yg ke dua.
• Copy kode di bawah ini dan letakan tepat dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> | SHARE TUTORIAL </h4>
<div class='kontainer'>
<img alt='Christian angkouw' src='https://lh5.googleusercontent.com/-L5gUQSlu1vc/AAAAAAAAAAI/AAAAAAAAAdc/qJ241K51R2M/s120-c/photo.jpg'/>
Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>. Dan Anda boleh mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk menyertakan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://andoelsean.blogspot.com/' target='_blank'>:: Terimakasih ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

Keterangan:

• Kode yang berwarna merah isi dengan title atau deskripsi tentang blog anda.
• Kode yang berwarna biru muda ganti dengan url foto anda.
• Dan kode yang berwarna biru adalah kata-kata yang berada dalam permalink,silahkan sesuaikan kata-kata dengan keinginan anda

Jika semua sudah di ganti,preview dulu bila tidak ada erorr lalu simpan tempelate anda. .
Selesai dan lihat hasilnya,selamat sekarang pada blog anda sudah terpasang permalink. .  :))

Sekian artikel ini,semoga bermanfaat. .