Cara Membuat Menu Dropdown Sendiri di Blogger

Assalamualaikum

Kembali lagi nih saya mau sharing ilmu blogger, ya maklum lah kemaren-kemaren gak sempet post lagi karena banyak urusan. Untuk post yang sekarang ini saya akan membahas MENU DROPDOWN yang bisa di pasang diatas atau di bawah header, pasti sudah banyak yang tahukan terutama yang sering berselancar di dunia blogger, tapi bagaimana dengan sobat-sobat kita yang masih pemula,,????? Hehehehehe :-)
Maka dari itu saya mensharing ilmu ini buat para sobat blogger pemula karena semakin lama pengguna blogger semakin banyak. Buat para sobat blogger yang pemula pasti sering lihat di beberapa blog kalau di atas atau bawah header pasti ada menu yang jika di sorot dengan pointer keluar menu lagi kebawah. Nah itu yang disebut MENU DROPDOWN. Pengen mencobanya bukan,,,????? ini dia caranya di simak baik-baik ya :

• masuk akun blogger sobat dulu
• pilih menu Template, lalu Edit HTML
• pilih Lanjutkan/Procced, lalu centang Expand widget
• lalu cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBNa2VFChoQfFOYmSKM5N6763a3ayEuJc09GJMxJDBjPt-1T5QaWTaqS0p8REK7Vl6GST16p7hsLEyQvY1p7Dj2kitnbxJrsCBKm5uIMagiC46PuirtK1_P0mr_1604GTjwBQPbWpwmiQ/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ5svVF_gQn2uqFb3gJizCSEnFCSioUIkdCBQMEAs0KTv61NEDb_b095CK_5oqFcyxA8Mm_T8PNezrbxB7U1OySRxbZ8HATZHdDZLAYoz488wzRxnPHQuCTvys1T9hNS_R-tf3p7O_Hi8/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

•  selanjutnya sobat cari kode

1. <header> : untuk menaruh menu dropdown di atas header
2. </header> : untuk menaruh menu dropdown di bawah header

• copas kode berikut tepat diatas kode <header> atau dibawah kode </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdkeO4z6gYpPFbiaADz_BGllSlO6Ld1FcTf260fdvoTdALJ0St4fWXKGe6sJORVyWj73k0tD_vhGKUhZ3iJwd0e0hTjrgJlX12KdZwmhV5Aq9iN_8xVsthi9k1GXj7DVFcuDD_bFJmwPM/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
<li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='http://twitter.com/rizqi_kira' target='new'>Contact on Twitter</a></li>
<li><a href='http://www.myspace.com/username' target='new'>Contact on Myspace</a></li>
<li><a href='http://www.facebook.com/username' target='new'>Contact on Facebook</a></li>
</ul>
</li>
<li><a href='http://qiqialone.blogspot.com' target='new'>Zuaz&#39;Z Creator</a></li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://qiqialone.blogspot.com/search/label/PC dan Laptop'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/Blogger'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/facebook'>Facebook</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://qiqialone.blogspot.com/2012/01/tv-online.html'>TV Online</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/computer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/desain%20grafis'>Desain Grafis</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/game'>Game</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/microsoft'>Microsoft</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/software%20aplikasi'>Software APP</a></li>
<li class='hr'/>
<li><a href='http://qiqialone.blogspot.com/search/label/software%20program'>Software Program</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://qiqialone.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://qiqialone.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibj07Lsec7CBz0D3rju5IGIHWH6N3Mi2El4j2QPceysYRmzo36oOpNGo5aldijgWRJk6vhYCextDBRYp5qLqxaL4yWAIdD92wVcbvSMFw03tgs2OvbZ0s1FeHiwxAntZyTEPwUQWMKYto/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigj7RR3Z62gDIJDn3m11LAHGFGj3lJJCQLXvLGK7HAgJZcHJfrBWyeUYDytJKg-Lji_8sIA8HNrMdZkjTtI2na-E2vgrWZRcQ8n9oVHI0ciWsAhwU2jrRv1wSLFmFN_IIm-HhosFInmSk/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

 Ket :

1. kode yang berwarna UNGU adalah Link/URL tujuan dari menu dropdown sobat, silahkan diganti dengan URL sesuai dengan URL dari blog sobat
2. kode yang berwarna ORANGE adalah nama dari tampilan menu dropdown sobat, bisa diganti sesuai nama-nama label yang ada pada blog sobat

Sumber : http://zuazz.blogspot.com/2012/04/cara-membuat-menu-drop-down-di-atas.html

Read more »

Cara Memasang Widget Recommended Post

Assalamualaikum,

Setelah lama gak posting tutor buat blogger, kini Qiqi dapet ilmu baru lagi. Yah hitung-hintung belajar lebih jauh lagi tentang blogger. Qiqi rasa sudah banyak yang tahu tutor ini, tapi tidak menutup kemungkinan yang belum tahu juga banyak. Recommended Post ini berguna untuk mempercantik blog, juga berguna untuk merekomendasikan artikel di blog kita selain artikel yang sedang di baca. Bagi yang belum tahu pas banget nih Qiqi akan berbagi ilmunya. Simpel banget pengaplikasiannya di blog sobat, silahkan di ikuti langkah-langkahnya di bawah ini :

• masuk akun blogger sobat
• pilih template -> edit HTML
• centang expand widget jangan lupa
• lalu cari kode berikut

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

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

<data:post.body/>

• lalu paste kode berikut tepat dibawah salah satu kode diatas, pilih saja salah satu kode diatas :

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

• jika langkah diatas sudah maka simpan template blog sobat
• langkah selanjutnya buka tete letak (layout)
• lalu klik add gadget -> pilih HTML/Java Script
• lalu pastekan kode di bawah ini

<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="bpslidein_image"></div> <div  id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("https://sites.google.com/site/multipaste1/bp-out-slide.min.js?attredirects=0=1",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://multipaste.blogspot.com/2012/06/menggunakan-widget-recommended-post.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZztk3GeoPii6rBXUbSwCe5GxVYalJ0QNp7PGB9hKtxfY0zR4vdVPLvWMhAO5nkfwCcqral0X5EUXWwB4VfmTFI59vAZV7aUFqnUrAhgA0HDd2dH4q4kDbdCPsunRuWNEmKtrHBLOdNeQ/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

• jika sudah simpan widget sobat, lalu simpan juga tata letak (layout) blog sobat
• lihat hasilnya maka, tara,,,,,,, recommended post pada blogger sobat sudah muncul (Katakan Alhamdulillah)

Semoga tutor diatas berguna bagi sobat blogger. Happy blogging,,,,,,,,,,,

Sumber : http://multipaste.blogspot.com

Read more »

Membuat Related Post Blogger

Assalamualaikum sobat blogger semua.
Kembali lagi Qiqi akan berbagi ilmu blogger kepada sobat blogger semua, masih tentang related post. Ternyata related post pada blog itu banyak banget tampilannya, ada yang dengan gambar (thumbnail), ada yang dengan tabel scroll, ada juga yang biasa. Related post ini gunannya untuk menunjukkan beberapa artikel terkait dalam satu label dengan artikel yang sedang di baca. Bagi sobat blogger yang newbie, ini bisa di coba di aplikasikan do blognya, tapi hati-hati jangan sampai merusak tampilan dari blog sobat gara-gara memasang Related Post. Gak perlu banyak bicara lagi langsung saja ke step step pengaplikasiannya di bawah ini :

• Masuk akun blogger sobat
• Lalu klik Template --> edit HTML --> procced
• Centang expand widget, dan cari kode <data:post.body/>
•  Lalu copas kode di bawah ini tepat di bawah kode tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>


<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<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;data2007&#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>

</div>
</b:if>

• sobat bisa ganti tulisan Related Posts by Categories dengan tulisan yang sobat kehendaki
• jika sudah simpan template sobat 

Semoga tutorial ini bermanfaat bagi kita semua dan happy blogging buat sobat blogger semuanya.

Jangan lupa beri komentar, saran atau kritik yang membangun akan membantu kelangsungan dari blog ini agar bisa memberikan informasi bagi sobat blogger semua

Sumber : http://nobinoku.blogspot.com/, Sumber : http://trik-tips.blogspot.com

Read more »

Related Post Bergambar (Thumbnail) Di Blog

Assalamualaikum sobat blogger.
Masih seperti postingan terakhir Qiqi tentang membuat related post. Akhirnya Qiqi mendapatkan tutornya setelah mencari kesana kemari, tinggal sobat  blogger aplikasikan saja. Buat sobat blogger yang masih newbie pasti pas banget tutornya untuk di pajang di blognya. Buat yang sudah tahu tutor ini di mohon hanya untuk sekedar sundul postingan saya ini. Udah gak perlu banyak bicara lagi langsung saja ke langkah-langkah pengaplikasiannya di blog sebagai berikut :

• masuk akun blogger sobat
• pilih template --> edit html --> klik procced
• centang expand widget, lalu copas kode di bawah ini sebelum/diatas kode </head> (tekan Ctrl+F)

<!--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/AVvXsEg5fskLtHsQWTTvfqpYIuiH5-_ykoH2u3wMcqiEVjGImfk_ME0IYqbgdZRV3b4JIe2YS-C9pXVjiTb7KBH7ATGN2-oyWWUD9otxzCWjfrSYpeO6i3MCphDQBYvQGIXYDDlYAClzTfXn230/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-->

• jika sudah, sekarang sobat cari kode <div class='post-footer-line post-footer-line-1'> jika kode tersebut tidak di temukan, sobat bisa mencari kode ini <p class='post-footer-line post-footer-line-1'>
• Jika sudah ketemu silahkan copas kode di bawah ini setelah/dibawah kode diatas.

<!-- 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=5&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-->

• jika sudah semuanya, silahkan sobat simpan template sobat, lalu lihat hasilnya.

Semoga tutorial ini bermanfaat bagi kita semua, dan happy blogging buat sobat blogger yang newbie

Jika ada kesalahan, kritik, dan saran silahkan layangkan saja melalui FB ataupun kotak komentar.

Sumber http://tjoretan-akoe.blogspot.com/

Read more »

Membuat Related Post Pada Blogger

Assalamaualaikum.
Qiqi kembali lagi nih, tentunya untuk berbagi ilmu kepada sobat blogger semua. Kali ini Qiqi akan berbagi ilmu tentang cara membuat related post (artikel terkait) yang biasanya berada pada akhir sebuah artikel. Pasti sobat blogger yang banyak yang sudah tidak asing lagi, tapi bagaimana bagi sobat bloger yang masih newbie. Tutorial ini pas banget dan patut untuk di coba. Gak perlu banyak ngomong lagi, langsung saja hajar,   untuk mengaplikasikannya pada blog milik sobat, berikut stpe-stepnya :

• masuk akun blogger sobat
• pilih Template --> Edit HTML --> klik Procced
• jangan lupa centang pada expand widget
• lalu copas code berikut di atas kode ]]></b:skin>

.rbbox{-moz-box-shadow: inset 0 0 20px  #ffb60b ;
-webkit-box-shadow: inset 0 0 20px  #ffb60b ;
box-shadow: inset 0 0 20px  #ffb60b ;
.rbbox:hover{background-color:#000000);}

• jika sudah terlaksana semua langkah di atas, selanjutnya copas kode di bawah ini tepat di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<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 = 10;
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>

• untuk finishing simpan tempalte sobat dan lihat hasilnya

NB : Jika ingin mengganti warna dari tabel related post, silahkan ganti kode yang berwarna merah ( #ffb60b ) dengan warna yang sobat sukai. Untuk melihat kode HTML warna yang sobat sukai gak perlu susah-susah nyari Qiqi sudah sediakan tinggal sobat lihat disini.

Semoga tutorial ini bermanfaat bag kita semua.

Jika ada kesalahan, kritik, saran, maupun request, silahkan sobat blogger layang lewat kotak komentar.

Sumber : http://www.japarus.com/

Read more »

Cara Memasang Emoticon Di Blog Mudah (part 2)

Assalamualaikum :e:.
Qiqi masih akan bagi-bagi ilmu mumpung dapet hidayah dari-Nya :c:. Masih tentang emoticon yang Qiqi bahas, tetapi ini tampilannya berbeda dengan emoticon bisanya yang berbentuk bulat berwarna kuning :h:. Pasti sobat blogger sudah melihatnya di beberapa blog milik orang lain, dan terfikirkan bagaimana cara memasangnya di blog kita, ya kan,,,,???? hayo ngaku,,,????? :f:. Gak usah bingung Qiqi sudah sediakan langkah-langkahnya tinggal sobat aplikasikan ke blog milik sobat. Chek it dot step by step :

• masuk akun blogger
• pilih template --> edit html --> proceed
• jangan lupa centang expand widget
• copas kode berikut tepat diatas kode </body>

Script

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

• jika sudah simpan template sobat dan lihat hasilnya

Untuk contoh emoticonnya seperti apa bisa sobat download

Note :
Tips ini hanya working untuk template yang mempunyai kode <div class='post-body entry-content'>

Sumber  http://christiantatelu.blogspot.com/

Read more »