Bagaimana Cara Menghilangkan Tulisan Label Dibawah Postingan

 

Oke langkah untuk menghilangkan tulisan label pada sebuah blogger adalah sebagai berikut

1. Login ke Blogger.
2. Template/Edit HTML
3. Ceklist tulisan Expand Template Widget
4. Cari kode yang sama persis seperti dibawah ini

<span class='post-labels'>
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<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 != "true"'>,
</b:if></b:loop></b:if>
</span>

Jika Sudah ketemu, maka hapus kode tersebut, save dan lihathasilnya.?

Cara Membuat Label Keren Di Blog Dengan Efek CSS3

Hai Sobat kali ini Admin Update Artikel Yang Berjudul , Cara Membuat Label Keren Di Blog Dengan Efek CSS3

Cara Membuat Label:

1 . Log In Blogger
2 . Pilih Blog Yang Akan Di Edit
3 . Pergi Ke Template 
4 . Klik Edit HTML
5 . Centang Expand Template Widget
6 . Cari Tulisan ]]></b:skin> ( Tekan Ctrl + F Atau    F3 Di Keyboard Untuk Mencari )
7 . Pasang Kode Di Bawah Ini Tepat Di Atas Kode ]]></b:skin>

/*--- KxMadagascar Custom Label With CSS3 --- */ .Label a{ padding-left:20px; background:#00FFFF; padding:0 20px; color:#000!important; border-radius:100px; -moz-border-radius:100px; height:17px; line-height:17px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#fff; }

10 . Simpan
11 . Sekarang,Pergi Ke Tata Letak 
12 . Cari Label , Terus Klik Edit
13 . Sama-Kan Label Anda Dengan Gambar Di Sebelah Ini
14 . Simpan

NB : Yang Hitam Tebal Di Klik
         Yang Merah Di Cari
         Yang Orange Kotak Label Pertama
         Yang Hijau Text Label Pertama
         Yang Biru Kotak Label Berubah Warna
         Yang Pink Text Label Berubah Warna

Membuat Efek Hover Pada Gambar diblog

Berikut Kodenya:

 <img src="URL gambar" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

Berikut Kodenya:

 <img src="URL gambar" border="1" style="opacity:1;filter:alpha(opacity=100)"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"/>

Nah apabila sobat ingin membuat efek image hover pada semua gambar dipostingan blog secara otomatis, silahkan ikuti langkahnya dibawah ini. yang di tas adalah cara manual.

◉ Berikut cara penerapannya pada blog sobat:

• Login ke Akun Blog
• Rancangan Template Edit HTML *jangan lupa centang expand template widgate
• Cari kode ]]></b:skin>
• Copy dan pastekan kode dibawah ini tepat diatas ]]></b:skin>

◉ Berikut Kodenya:

.post img{opacity:1;filter:alpha(opacity=1); this.style.opacity=6}
.post img:hover{opacity:.5;filter:alpha(opacity=100); this.style.opacity=1}

• Selanjutnya simpan template

Nah, mungkin sekian dulu pembahasan kali ini tentang Cara Membuat Efek Hover Pada Gambar diblog. Semoga artikel ini bermanfaat buat sobat semua. Selamat mencoba..!!

Sekian dan terimakasih.

Membuat Efek Zoom Pada Gambar Postingan Blog

Bisa di lihat Contoh gambar di atas apabila sudah mencoba mengarah kan mouse arah gambar , gambar akan memberikan efek zoom kalau kalian sudah melihat gambar diatas silahkan kita mulai tutorial membuat efek zoom pada gambar postingan:

1. silahkan langsung saja kalian login ke blogger.

2. silahkan menuju edit tamplate . jangan lupa untuk centang expant widget.

3. cari kode ]]</b;skin>

4. kalau sudah ketemu silahkan copy kede dibawah ini dan paste diatasnya.

.post img:hover {
-moz-trnasform: scale(1.3) ;
-webkit-transform: scale(1.3);
-o-transform: scale(1.3)  ;
-ms-transform: scale(1.2)  ;
transform: scale(1.3) ;}

NB : kalau dalam template kalian ada kode  .post img:hover sebelum kode yang kalian taruh alangkah baiknya kalau kalian hapus dulu.

Cara Memasang Embed Link di bawah Postingan Blog

1. Seperti biasanya kawan-kawan harus membuka akun blog kawan sendiri.
2. Masuklah ke Template blog kawan Pilih Edit HTML dan Lanjutkan.
3. Jangan lupa Centang Expand Template Widget
4. Carilah kode </head> (gunakan Ctrl + F untuk memudahkan pencarian.
5. Setelah ketemu kode tersebut, copylah kode scrip di bawah ini dan pastekan tepat diatas kode </head>

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

6. Setelah kawan menempatkan kode script di atas, lalu carilah kode <data:post.body/>
7. Sudah ketemu kah ?
8. Lalu copylah kode script di bawah ini dan tempatkanlah (paste) tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>Silahkan salin/pasang embed link di bawah ini bila Anda  ingin memasangnya di situs yang Anda inginkan:</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://capoenk-blog.blogspot.com/' style='display:none;' target='_blank'>Widget by Bloggers </a></p>
&lt;/div&gt;<br/>
</b:if>

9. Setelah selesai, simpan template kawan. Dan lihat hasilnya seperti apa.

Cara Baru Membuat Recent Post

 

 

Cara Baru Membuat Recent Post / Artikel Terkait dengan Feed2js :

1. Masuk dahulu ke alamat situs dibawah ini

klik disini

2. Setelah masuk pada halaman utama, “isi url dengan url feed” Anda.

Contoh :http://capoenk-blog.blogspot.com/feeds/posts/default

3. Ganti url warna biru tersebut dengan url blog Anda

4. Kemudian Isi pada form – form selanjutnya :

"Show channel?...", pilih "no"

"Number of items to display..." Masukkan jumlah yang nantinya ingin ditampilkan di recent posts

“Show/hide item descriptions?..." Masukukan angka “0”

"Show item author?..." Masukkan "no"

"Use HTML in item display?..." pilih "no"

"Show item posting date?..." pilih "no"

"Target links in the new window?..." pilih "n" atau "y" terserah karena tidak terlalu berpengaruh

"UTF-8 Character Encoding..." biarkan tetap disilang

“Podcast enclosures For RSS 2.0..." tetapkan "no", untuk blog yang mempunyai niche tentang lagu, pilih “yes”

"Custom CSS Class (advanced users)..." Biarkan saja kosong

5. klik Preview Feed, Setelah hasil preview cocok, lanjutkan ke langkah no. 6, bila tidak cocok, ulangi dan setting langkah no. 4

6. klik Generate JavaScript

7. Copy paste kode tersebut yang muncul ke Widget blog Anda atau simpan

Sekian dulu artikel Cara Baru Membuat Recent Post dari saya, semoga bermanfaat dan membantu bagi semua. Terima kasih sudah menyempatkan berkunjung.

Membuat Fanspage Facebook Tampil Melayang di Blog

1. Login dahulu ke “akun blogger” anda

2. Pilih opsi “Tata Letak”

3. Klik “Tambahkan Gadget”

4. Setelah muncul menu baru, pilih “HTML/JavaScript”

5. “Copy Paste Kode dibawah ini” kedalam Kotak Widget Tersebut

<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
  var el=d.getElementById(id);
  if (!persistclose || persistclose && get_cookie("remainclosed")=="")
  el.style.visibility="visible"
  if(d.layers)el.style=el;
  el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
  el.x = startX;
  if (verticalpos=="fromtop")
  el.y = startY;
  else{
  el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
  el.y -= startY;
  }
  return el;
}
window.stayTopLeft=function(){
  if (verticalpos=="fromtop"){
  var pY = ns ? pageYOffset : iecompattest().scrollTop;
  ftlObj.y += (pY + startY - ftlObj.y)/8;
  }
  else{
  var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
  ftlObj.y += (pY - startY - ftlObj.y)/8;
  }
  ftlObj.sP(ftlObj.x, ftlObj.y);
  setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj38i3qe62xqcGkMd0RP-FkBAI42ir7DhwfFnsOoylIjpHO4UOfbzKpJLBesDxO9FTKpsjVZB9WjK17ytXIsG_bihQxFET7p7eUEat7DABwrYRJfe75qCD6Mb6JmCzuo5v8wEn2rH9c0v4_/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">
<div style="background: #fff;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBiss-key-lampung%2F383725461734757%3Fref%3Dhl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=160672950767906" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</div></center>
</div>

6. Ganti tulisan yang berwarna MERAH dengan “URL Fanspage Facebook” anda, contoh dibawah adalah URL FANSPAGE

Cara Membuat dan Memasang Facebook Like Box di Blog atau Website

• Masih dalam keadaan login dengan facebook
• Pergi ke  klik sini

Memasang Widget Melayang di Blog

 Pada Dasbor Blog anda, masuklah ke Elemen Tata Letak, pilih Add Widget / Tanmah Gadget
 Lalu pilih HTML/Jawascript
 Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.

<!-- FB melayang tombol close --!>
<style type='text/css'>
#kotak-facebook {
position:fixed !important;
position:absolute; /* IE6 */
bottom:-1000px;
right:40%;
margin:0px 0px 0px -182px;
width:310px;
height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// animasikan nilai top saat halaman telah selesai dimuat
$('#kotak-facebook').animate({bottom:"50px"}, 1000);
// hilangkan kotak pesan saat tombol (x) di klik
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='kotak-facebook'>
<p style=" margin-right:10px; font-size:15px; color:#000000;">Please Bantu Saya,<blink> klik I NI !!!</blink> </p>
<!-- Mulai --!>

<!-- Begin: http://adsensecamp.com/ -->
<script src="http://adsensecamp.com/show/?id=RE6BCJILlto%3D&cid=c9C%2F8a0h9TA%3D&chan=wLCfVBVoMM0%3D&type=11&title=3D81EE&text=000000&background=FFFFFF&border=000000&url=2BA94F" type="text/javascript">
</script>
<!-- End: http://adsensecamp.com/ -->

<!-- Selesai --!><a class='close' href='#'>&times;</a>
<p style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://blogcapoenk.blogspot.com/">arieadie</a>in  <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://capoenk-blog.blogspot.com/2013/08/inilah-memasang-widget-like-box.html">Get This Widget</a></p>
</div>

6. Simpat Widget/Gadget Baru yang anda buat tersebut.
7. Lihat hasilnya.

Perlu diperhatikan :
1. Tulisan berwarna Merah  Silahkan anda ganti Kode Script tersebut dengan Kode Script  Anda.
2. Bila tidak berhasil, coba ulang dari awal.

Cara Membuat Related Post Dengan Gambar

Beginilah Cara Membuat Related Post Dengan Gambar
1. Tentunya anda harus buka akun blogger anda kawan.
2. Masuk Elemen Template - Lalu Klik Edit HTML - Centang Expand Template Widget
3. Carilah kode ]]></b:skin> (gunakan CTRL + F untuk mempermudah pencarian)
4 Apabila sudah ketemu, copylah kode di bawah ini lalu tempatkan persis di atas kode ]]></b:skin> tadi.

/* Related Post Dengan Tooltips Membuat Blog Keren --- */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 100px;
height: 100px;
margin: 0; display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left; position: relative;
width: 108px;
height: 108px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;float: left; background: #00B366;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.related-post:hover .related-post-title {display: block;}

5. Jangan beranjank dulu, masih ada yang harus di cari. Lihat kode selanjutnya di bawah ini, lalu cari kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/> (gunakan CTRL + F untuk mempermudah pencarian)

6. Apabila sudah ketemu dan anda yakin, copy kode di bawah ini dan pastekan tepat di bawah kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/>

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMsSqz8d3SmZ3-FOpfQzJ7WsbTgpxZohrGE6RAax9_MAutm6mMA-FaU7yVa7PjCu3nF83Ws1yAwCYG3VY0tG6Z68Nx_DXo_ZjER1Ks17gSlaX64C6zXO-x4Om25g-ZgqFdvZxU3CcNu6Y6/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>

7. Selesai
8. Simpan template blog anda kawan.

Catatan Yang harus anda perhatikan.

• maxresults=5 adalah jumlah artikel yang anda tapilkan pada Related Post. Silahkan anda tambahi atau kurangi sesuai keingan anda.
• 100px adalah ukuran gambar, baik tinggi maupun lebarnya. Silahkan anda ganti bila anda ingin memperkecil atau memperbesarnya.
• Tulisan Related Post silahkan anda ganti dengan sesuka anda, misalnya jadi Artikel Terkait, atau Mungkin Ini Anda suka" dan lain-lain sesuka anda.
• Bila gagal, coba ulangi lagi perlahan-lahan. Biasanya sih bisa.

Cara Membuat Related Post Dengan Scroll

Langsung saja yah, Inilah Cara Membuat Related Post Dengan Scroll
1. Seperti biasa, buka akun blogger kawan
2. Masuk ke Elemen Template, piluh Edit HTML lalu centang Expand
3. Carilah kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F untuk mempermudah pencarian
4. Apabila anda menemukan 2 kode tersebut, anda pilih yang pertama.
5. Sudah ketemu belum nih, bila sudah Copy lah kode script dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<Script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
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>

6. Lalu tempatkan (paste) kode tersebut tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.
7. Simpan template blog anda. Lalu lihat hasilnya.
8. Selesai.

Catatan :

• <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa menghapusnya.
• <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
• maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan

Cara Membuat Related Post di Bawah Postingan

Cara Membuat Related Post di Bawah Postingan
1. Bukalah akun blogger anda dengan tenang dan damai sejahtera.
2. Pilihlah Elemen Template. Lalu Pilit Edit HTML, jangan lupa centang Expand Template Widget
3. Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian), setelah anda menemukannya, letakkanlah kode javascript di bawah ini (Copy) persis di atas kode </head> tadi (Pastekan)

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDg1UjbyP-wAWeqTNLhxqTTNHmVY20XPge6ful9LBMG-vgJp2i1xIPuAtnLVqP4ipSN-wWfTvP-OTvMrxq9rEaUTb9ZdAlQvZo3AfoyE6jHlFbxbyoBnlkGx_IzvBnaUFRRqiJeMDDm20/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

4. Aplagi cara no 3 diatas sudah anda lakukan, selanjutnya cari lagi kode berikut : <data:post.body/>, Sudah ketemu belum kode itu, kalau sudah ketemu, letakkan lagi kode di bawah ini (copy) tepat di bawah kode <data:post.body/> (pastekan)

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

5. Setelah selesai, lalu simpan template blog anda.
6. Lihat hasilnya seperti apa.

Membuat Related Post / Artikel terkait cepat loading

1.Log in ke blogger dengan akun yang anda miliki.

2.Klik rancangan.

3.Edit Html » Centag kotak Expand template widget.

4.Cari kode /head>5.letakkan kode dibawah ini sebelum kode </head  yang anda temukan.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDg1UjbyP-wAWeqTNLhxqTTNHmVY20XPge6ful9LBMG-vgJp2i1xIPuAtnLVqP4ipSN-wWfTvP-OTvMrxq9rEaUTb9ZdAlQvZo3AfoyE6jHlFbxbyoBnlkGx_IzvBnaUFRRqiJeMDDm20/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sitemapku-blog.googlecode.com/files/terkait.js' type='text/javascript'/>

B.Kode Source HTML Artikel terkat

Setelah anda selesai menempatkan css related postnya, maka ini adalah langkah terakhir. untuk diketahui bahwa penempatan source HTML related post adalah kunci dari tutorial ini. Ini menjadi sangat penting karena beberapa kegagalan terjadi pada langka ini. So perhatikan baik-baik...

Nah berhubung kebanyakan template berbeda-beda strukturnya, maka kita bisa pilih salah satu opsi berikut.

Cara pertama untuk memnampilkan related post ini adalah cari kode  <data:post.body/> jika ada dua, pilih yang kedua dan letakkan kode di bawah ini  tepat dibawah kode <data:post.body/> tersebut.

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>

Jika anda tidak berhasil juga membuat artikel terkait atau related post dengan cara tersebut, maka alternatif selanjutnya adalah pada <data:post.body/>, coba kita buat sedikit perubahan dengan mengapus sebagian kodenya seperti berikut (dan letakkan Tepat Dibawanya <data:post.body/>):

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'><font face='Arial' size='3'><b>Artikel terkait dengan <data:blog.pageName/>: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=4&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>
</b:if>

Akirnya Kita Berhasil membuat Related Posts dan coba lihat hasilnya.

Cara Membuat Tombol Share Media Sosial di Blog

1.   Login ke blooger Anda

2.   Klik Template - Edit HTML

3.   Tekan Ctrl+F dan cari kode  :<data:post.body/>

4.   Saat pencarian Anda akan menemukan beberapa kode yang sama, cari kode pertama saat pencarian.

5.   Setelah menemukan kode tersebut paste kode di bawah tepat selelah kode di atas.

<!-- share start here http://capoenk-blog.blogspot.com/ --><b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharelordhtml"> <center><div class="headinglordhtml">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj33BGJpIdT9RF4zl1tLzBeeb9G2jvcfvNzzCjHPoH9pQHxwPpObeuE41D3Vbq8Rlei2k5iuLpfG16O4KJ_5A5GMtgH9Hxb6I6DBv85tsHscXBLTtahHRPcCnSTJ2KWop8qYTiYBcMSro/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUjX8sKm_JTEOFLtzQfoo2_bStc8c5kmgGAZTl2g_mzWnP-lVoD1Ix4aEgGIDy4PdmmpANt7aniQ1nGK5F4oV4-Gvyu0Brp6n61Pb62f0OkxyTqPonhKUTVcAwZlI6IfZXClZAFUBbek0/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd9Mj04PjetBcb38YwofEkTuk-X6DPBmpOSO7vOg07vTa4x9o4MVetD1GWH6vTzSythXCwwGfGa679zfd3sAV1L56J4Rt09ouSTlh-eP1SHD7vpfj8T3oS2BMBMxcV_fbd-UCMrutVgkA/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1f_os4ZcHX8FRUW8zodcQQRnFbFthUQW9as4yTZyWD_VvFtuETqJK6iZcPK41ND0i8dCfs9aoavgmYAbc4S-YPQEtckFWf-e5ydIyKACxBfvmCdCZNkreHIhldzteUA9I1k2NaCOTmpg/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ50BkdBphgrPajZsMTlC4WyblgqaoDdYtNv7YiRsxXB2kFT1VpIiQByciXi5L1q5BVHDeWhfLEE4Rn4VnwWON5D2vR_74ACtHe7X4m5EXs-omRMyjgPPWKPG0vbDrGq7z6uaz27cMOI0/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnfmSIm0IUJLQjwEkYWhYMk2dJksdzLBZYtHtY2j3r7Aubd9ziw2geY-gaJVXUFGgios13dKGK3FRPrGwtKRINSM6M4OosGXqySJhH3A3RW08qmZLdsZvSIrNJVWfgaafaBB8nrWRBu-U/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx6Zyj3M4w6s-yDql8dnPp2bxrIMuiMZINHn1xsP4Dzm-Vuemyjk_y4khJuaV5Ub6t1Ev8m4nqOwCcP7L-u2wAkcX399MaK0aWGsE0otA__sYHln2kIXCb49Vtv-vXCVZbhFIWXopEN94/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3VY9DIFUwHs3dd-0v2uGzv9CWesWQhjZoao7gEIwVFQHeYsJ4LMlt3XuMuMk0SnvX8NuM5lBy9IuYxZrMFB83F_06zozcANBAis0RjK55BmbwCkxj2g7rpq4V_do2FbV48vcomzVXIZo/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzMjS0mU3eLdz28VsGNv9G25aCWndBvmEZsLqlVMxDfkiU-I-SQpt4GQa1hUrGlcnbvXn0w2Cn0GiVFbHHHn01r9bM8L7rAAHQsmU26ywMX6jYQKJqQUt8z3qh-1lHjj5Y3ZfYidppdZcT/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if><!-- share end here http://capoenk-blog.blogspot.com/ -->

 6. Langkah terakhir Klik Simpan template

Membuat Daftar Isi Dengan jQuery Accordion

Langkah Pertama

1. Login dulu ke blogger anda
2. Pada dasbor masuk ke Rancangan lalu pilih Edit HTML.
3. Setelah itu cari kode berikut ini ]]></b:skin>
4. Kemudian copas kode dibawah ini dan taruh diatasnya
   

   #dafis-acc{
   

   font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

   font-size:12px;

   color:#333;

   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9o9h9r-4wnPLFiQ3juADDRj5UD4yiEoE5RdLGFhiXPIWU8dY0oqBj8Ya-fF3sq7zQ0HmDUF6aku-i3ULUASNGNj-ZDLrwvh3zFUHd7YmuenDsIqtmQKPphwFObteQUA4TKvSxzpcXo6U/d/bg5.gif) repeat-y scroll left center #E7F7FB;

   padding:2px 0;

   border:1px solid #339DC6;

   }

   .dafis-label{

   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlRiQNfZ7Bs0HxD54T6_KDt-xUryMhrqWlRmCsuNeIputwmbOPA4ofniz_dMsvCl6PqPfR0mdt43HaoNfU25gOyD4sXV6q6vGCLLmCnNb87b8zVX_ZR1rbhYaWUulW6yub9J0N39vXXPw/d/bg4.gif) repeat-x scroll 0 0 #E1F4FB;

   font-weight:bold;

   line-height:1.4em;

   overflow:hidden;

   white-space:nowrap;

   vertical-align: baseline;

   margin: 1px 3px;

   outline: none;

   cursor: pointer;

   text-decoration: none;

   padding: 2px 10px;

   color: #fff;

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

   border:1px solid #2F94BA;

   }

   .dafis-label:hover{

   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHwYMCrnBrK_L7xIUINewKWKxpPMJjeZuizsE2E-s9xskIy84kTYYhc60G-yo38Ftj2RX9gg6KHdU93I0XJqqumH_kIMMqIdJsSgKUaw-iBjJr-_XHEl7VnF4CEdZ65jX4pu36VZ4vdMo/d/bg2.gif) repeat-x scroll 0 0 #E1F4FB;

   color:#003366;
   }
   .dafis-daf ol{
   margin:0 0 0 30px !important;
   padding:0 !important;
   }
   .dafis-daf ol li{
   background-color:#C9E9F4;
   line-height:1.5em;
   margin:1px 3px !important;
   white-space:nowrap;
   text-align:left;
   border:1px solid #339DC6;
   }
   .dafis-daf ol li a{
   text-decoration: none !important;
   color:#333 !important;
   display:block;
   padding-left:10px;
   }
   .dafis-daf ol li a:hover{
   background: #7BC4DF;
   border-left: 5px #333 solid;
   padding-left: 5px;
   text-shadow: 0 1px 1px rgba(0,0,0,.3);
   }

5. Selenjutnya cari kode </head>, lalu letakkan kode dibawah ini diatas kode </head>.
   
Nb : Jika sebelumnya sobat telah memasang scipt jQuery ini lewati saja langkah diatas
6. Kemudian Klik Simpan Template.

Langkah Kedua

1. Buatlah sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content )
2. Selanjutnya Masukkan kode html di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.
3. Ubah namablogsobat dengan url blog anda
4. Selanjutnya Klik Publish Post.

Itu tadi tutorial kali ini, jika ada di antara temen-temen yang bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini. Selamat mencoba dan semoga bermanfaat.

kode jQuery

 <script type='text/javascript'  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> 

kode html

1. <script type="text/javascript"  src="https://sites.google.com/site/bangkolis/javascript/daftarisimaskolis.js"></script>  
2. <script src="<span style="color: #990000;">http://namablogsobat.blogspot.com/</span>feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Membuat Related Post di Blogspot Versi 1

• Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger
•  ► Layout ► Edit HTML
• Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
• Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>

Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode

#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

Bila ingin mengganti warnanya, anda tinggal mengganti kode #E2EBF8 dengan kode warna HTML yang anda kehendaki.

Setelah mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

• Simpan Template anda .

Cara Membuat Recent Post Terbaru di Blogspot

Cara Membuat Recent Post / Artikel Terbaru Bergerak Pada Blogspot:
1.   Login ke Dasbor blogspot.
2.  Pilih Rancangan
3.  Klik Tambah Gadget pada bagian blog yang ingin di tambah Recent Post.
4.  Kemudian Pilih HTML/JavaScript
5  Isi Judul Sesuka anda, Copy dan letakkan kode dibawah ini kedalamnya

<center><style type=”text/css”>
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”>
</script>
<script src=”http://theplick.googlecode.com/files/newsticker-plick.js” type=”text/javascript”>
</script>
<script type=”text/javascript”>
var speed = 1000;
var pause = 2500;
$ (document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id=”rp_plus_img”><script>
var numposts = 20;
var numchars = 0;
</script> <script src=”http://capoenk-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt”>
</script> </ul>
</center>

6.  Ganti tulisan yang berwarna merah dengan nama blog yang sobat gunakan.
7. Simpan dan Lihat hasilnya.

Cara Membuat Widget Recent Post Berupa Gambar Kotak-Kotak

 

 

Berikut adalah langkah-langkah nya :

1. Masuk ke blogger >> Dashboard >> Tata Letak >> Add Gadget
2. Pilih Gadget HTML/Javascript.
3. Masukkan kode javascript di bawah ini.

<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://capoenk-blog.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</div>

Ganti http://capoenk-blog.blogspot.com dengan alamat blog anda,

Langkah 4 : Simpan

Modifikasi Widget Profil Blogger

Tutorial kali ini saya ingin mengetengahkan cara membuat modifikasi tampilan widget profil blogger. Sebagaimana tutorial sebelumnya, cara menambahkan basmalah dan hamdalah di awal dan akhir artikel blog, tutorial kali ini juga masih merupakan request sahabat blogger.

Ada beberapa pilihan modifikasi widget profil blog, intinya hanya pada permainan CSS, karena yang ditanya adalah yang terpasang diblog ini maka saya hanya akan memberikan kode sesuai permintaan, untuk selanjutnya anda bisa lebih kreatif dalam membuat modifikasi lainnya.

Baiklah silahkan ikuti langkah-langkah berikut:

cara membuat modifikasi widget profil blogger di blog

1. Setelah login ke akun anda.
2. Pada dasbor >> masuk menu tata letak >> klik tambah gadget >> HTML/JavaScript
3. Pada kolom title beri nama sesuai keinginan, selanjutnya copy dan tempelkan kode HTML berikut pada kolom kontent

<style>
#arieadie{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#arieadie:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity  {
opacity: 0.5;
margin-left: 50px;
-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;  
}
.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);  
-o-transform: rotate(0deg);  
-webkit-transform: rotate(0deg);  
-ms-transform: rotate(0deg);  
transform: rotate(0deg);  
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
} 
</style>
   <!--[endif]----> 

<img align="left" class="opacity" id="#arieadie" src="URL YOUR IMAGE PROFIL" />About YOU<a href="YOUR LINK BLOGGER PROFIL" style="color: #888888;">...Read More</a><!--![endif]----> 

<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/blogID=6929166714983995097&amp;widgetType=Profile&amp;widgetId=Profile1&amp;action=editWidget&amp;sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>

Kustomisasi

• Ganti profilAmatullah dengan nama profil anda,
• perhatikan tulisan tebal berwarna diatas, ganti dan sesuaikan dengan keinginan anda
• ganti blog ID dengan ID blog anda
• silahkan jika ingin menambahkan CSS untuk modifikasi sesuai keinginan.

4. Simpan dan klik simpan lagi. Lihat hasilnya diblog anda

Cara Membuat Profil Blog Keren di Blogger

Nah,,, Jika sobat tertarik untuk memasangnya agar widget profil sobat keren, yuk simak tutorial Cara Membuat Widget Profil Blogger Keren di Blog dibawah ini:

1. Login akun blogger Sobat.
2. Pilih Tata Letak » Tambah Gadget » HTML/JavaScript
3. Masukkan kode berikut ini kedalam kotak HTML/JavaScript

<style>
#aboutme {
  background-color:#fff;
  -moz-box-shadow:0 0 3px #7CFC00;
  -webkit-box-shadow:0 0 3px #7CFC00;
  box-shadow:0 0 3px #7CFC00;
  border:3px solid #7CFC00;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:290px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#0097BD;
  color:#FFF;
  font-family:Segoe UI;
  font-size:15px;
  font-weight:bold;
  margin:0 0 0 -3px;
  padding:3px 5px 3px 10px;
  width:100%;
  -moz-text-shadow:0 1px 0 black;
  -webkit-text-shadow:0 1px 0 black;
  text-shadow:0 1px 0 black;
}
.name-author h3:after {
  content:" ";
  width:0;
  height:0;
  position:absolute;
  left:100%;
  top:0;
  border-width:13px;
  border-style:solid;
  border-color:transparent transparent transparent #0097BD;
}
@-webkit-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-moz-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-keyframes name-author {
  0% {color:white}
 20% {color:Orange}
 40% {color:pink}
 60% {color:Orchid}
 80% {color:gold}
 100% {color:white}
}
/* Penerapan efek pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
  animation:10s infinite name-author linear;
  -webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
  font-size:12px;
  text-align:left;
  margin:0;
}
.aboutme-image-container {
  float:left;
  width:70px;
  height:70px;
  margin-right:75px;
        z-index:1;
}
.aboutme-image-container {
  margin:-20px 0 5px 0;
  padding:9px;
  position:relative;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:100%;
  -moz-border-radius-bottomright:100%;
  -moz-border-radius-bottomleft:100%;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  background-color:#59B52E;
}
.aboutme-image-container:before {
  content:' ';
  position:absolute;
  top:0;
  left:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #333 transparent;
}
.aboutme-image-container:after {
  content:' ';
  position:absolute;
  top:0;
  right:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 0 10px;
  border-color:transparent transparent transparent #333;
}
.aboutme-image-container img {
  width:100%;
  height:100%;
  border:2px solid yellow;
  border-radius:100%;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
.aboutme-image-container img:hover {
  border:2px solid GOld;
  cursor:pointer;
  margin-left:0;
  -moz-transform:scale(1.2) rotate(360deg);
  -webkit-transform:scale(1.2) rotate(360deg);
  -o-transform:scale(1.2) rotate(360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(360deg);
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>
<div class='aboutme-image-container'>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktcLcKU4YF7yJb1i0s0VsQJNlMN1ZR2GHD_AdCsaOXnwj-FdISLjzSja5ys-BJZiUFbM-DqfsmEdESndl3IPJZkYC6ScnuM9A7eZbhN4qNb7dneimE4ki8Zcjq-3DJGwO9zB3jEJadNc/s1600/cartoon-islam-muslimah-allah-hijau.png" />
</div>
<div class='name-author'>
<h3>arieadie</h3></div>
<div class='aboutme-text'>Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setenagh-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe. <a href="https://plus.google.com/u/0/102921613865056852662" style="color: #666;">...Read More</a>
</div></div>

good luck.....