Showing posts with label tips blog. Show all posts
Showing posts with label tips blog. Show all posts

Saturday, December 15, 2012

cara buat widget cek berat blog

alhamdulilah akhirnya abiyyi abdurrouf bisa ngepost lagi setelah disibukkan oleh berbagai kegiatan. oke kali ini saya akan ngepost tentang cara buat widget cek berat blog. untuk demonya sobat bisa lihat di bawah ini:


Masukkan Alamat Blog/Web Max 10 Url:
(http://vikrymadz.blogspot.com)

jika sobat tertarik caranya sangat gampang tingal copy kode di bwah ini dan taruh di kotak postingan yang HTML( bukan compose)
<center>
<form action="http://www.iwebtool.com/tool/tools/speed_test/speed_test.php" method="get" name="pageform" onsubmit="return validate(this);" target="pageframe">
<table border="0" style="border-collapse: collapse;"><tbody>
<tr> <td height="91" valign="top">
<table class="tooltop" height="76" style="border-collapse: collapse;"><tbody>
<tr> <td>
<table border="0" cellspacing="5" style="border-collapse: collapse;"><tbody>
<tr> <td colspan="5" valign="top"><b><span style="font-size: medium;">Masukkan Alamat Blog/Web Max 10 Url: </span></b></td> </tr>
<tr> <td colspan="4" valign="top">
<textarea name="domain" rows="11" style="width: 100%;"></textarea></td> <td>
</td> </tr>
<tr> <td>
<input style="float: left;" type="submit" value="Check!" /></td> <td>
<span style="font-size: x-small;">(<a href="http://vikrymadz.blogspot.com/">http://vikrymadz.blogspot.com</a>)</span></td> <td>
</td> <td colspan="2"></td> </tr>
</tbody></table>
</td> </tr>
</tbody></table>
</td> </tr>
<tr> <td>
</td> </tr>
<tr> <td height="39">
</td> </tr>
</tbody></table>
</form>
<script language="JavaScript">
function validate(theform) {
if (theform.domain.value == "") { alert("No domain provided"); return false; }
return true;
}
</script>
</center>

jika sudah tinggal di publikasikan 

Thursday, November 22, 2012

cara buat sitemap/daftar isi di blog

untuk menjawab request dari kang dieky. kali ini abiyyi abdurrouf akan bahas tentang cara buat sitemap/buku tamu di blog. untuk demonya sobat bisa lihat di sini. oke tanpa panjang lebar jika sobat ingin menerapkan sitemap ke template sobat kopas aja kode dibawah ini dan lalu buat posting baru dan pilih mode HTML
<div style="background-color: none; border: 1px solid #000000; height: 500px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 100%;">
<script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://abiyyiabdurrouf.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

catatan:
ganti  
http://abiyyiabdurrouf.blogspot.com
dengan alamat blog sobat

Tuesday, November 20, 2012

cara buat kotak pesan admin di bawah poting


halo sobat semua. pada kesempatan kali ini saya akan ngpost tentang cara buat kotak pesan admin di bawah posting. untuk demonya sobat bisa lihat di blog ini dan dari gambar di atas. jika sobat mau mencobanya ikuti aja langkah langkah berikut:
1. loggin blog
2. klik template
3. klik edit HTML(jangan lupa centang expand widget template)
4. next cari kode ini <div class='post-footer'>  (tekan f3 agar lebih mudah mencarinya)\
5. pastekan kode di bawah ini di atas kode nomor 4


<!-- Kotak Pesan Admin by ROG -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> 
DESKRIPSI BLOG ANDA </h4>
<div class='kontainer'>
<img src=' 
ALAMAT URL FOTO ANDA '/>Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terima Kasih atas kunjungan sahabat kesini. Semoga sobat dapat berkenan untuk sedikit memberikan sekelumit komentar mengenai postingan kali ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://no-doong.blogspot.com/2012/06/cara-membuat-kotak-pesan-di-posting.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Pesan Admin b ROG-->


5. selanjutnya cari kode ]]></b:skin> 
6. copy kode di bawah ke atas kode no 5 atau ke <data:post.body/>


.admin-tulisan h4{
background:
#999999;
border:none;
border-bottom:1px solid 
#FFFFFF;
color:
#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 
12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:
#FFFFFF;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid 
#FFFFFF;
padding:2px;
background:
#FFFFFF;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

7. simpan
keterangan 

  • ganti tulisan berwarna biru dengan deskripsi blog sobat
  • ganti tulisan barwarna merah dengan url foto blog sobat
  • ganti tulisan berwarna bitu dengan deskripsi blog sobat

Saturday, November 17, 2012

cara buat threaded coment














akhirnya bisa ngepost lagi. pada pagi yang cerah ini saya akan ngepost tentang cara buat threaded coment di blog. oke dari pada kelamaan mending kita langsung aja. jika sobat berminat langsung aja ikuti langkah iniL:
1. loggin blog
2. klik template
3. pilih edit HTML
4. jangan lupa sob centang expand template widget
5. cari kode di bawah ini (tekan f3 agar lebih cepat)
<b:include data='post' name='comments'/>
6. hapus semua kode diatas dan ganti dengan
<b:if cond='data:post.showThreadedComments'>
 <b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/> </b:if>
7. selanjutnya simpan templatenya


Thursday, November 15, 2012

cara buat kode warna di blog

akhirnya saya bisa ngepost lagi. di pagi  yang masih gelap ini saya akan memberi tahu sobat tentang cara buat kode warna di blog. bagi sobat yang tertarik untuk membuat kode warna di blog begini cara buatnya:
1. loggin blog
2. klik tata letak
3. pilih add gdget
4. pilih HTML/javascript
5. copas kode di  bawah ini lalu klik simpan

<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie">
<param value="High" name="quality">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object>




<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess">
<param value="http://www.2createawebsite.com/build/col.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>
;


Wednesday, November 14, 2012

cara buat kotak chat mirip facebook di blog
















kali ini saya akan memberi tahu sobat tentang cara buat kotak chat seperti di facebook. kotak ini memungkinkan para pengunjung blog sobat untuk bisa chating dengan pengunjung lainya.sebenarnya ada beberapa situs yang menyediakan layanan ini tapi kali ini kita akan menggunakan https://www.envolve.com/.
untuk demonya sobat bisa lihat di http://abdurroufalthofabiyyii.blogspot.com/. jika sobat kepingin pasang ikuti langkah- langkah berikut ini:
1. buka https://www.envolve.com/
2.klik sign up
















3. isi kolom formulir dan klik cerate my account
















4. pilih kategori blog sobat. jika sobat memakai blogspot maka pilih other
















5. copy kode pada kotak kode dan klik i'm finished
















6. loggin blogger sobat
7.klik tata letak
8. klik add gadget
9. pilih HTML/javascript
10. paste kode
11. simpan
12. selesai
semoga info ini dapat bermanfaat bagi sobat

Monday, October 29, 2012

cara buat news update di blog

1. loggin blog sobat
2. klik template 
3.  cari kode ]]></b:skin>
4. copy kode di bawah ini dan letakan di bawah ]]></b:skin>

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Retrieving RSS feed(s)';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"
"+a[c].content:/snippet/i.test(this.showoptions)?"
"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"
"+d[e].content:/snippet/i.test(b)?"
"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]></script>

<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#eee;font:normal 13px Arial;}
#example1{ /*Demo 1 main container*/
width: 800px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 13px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #000;}
#example1 a:link, #example1 a:visited {color:#FFC932;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
.newspic{background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1qcb6GHrmPVZpKolj008EIa9fmOv6MtxaRduNO07ACty0OquzTSaWHoOAnEmgYdEIFUMge4OG8p2RwxlgGDxcTrGmJoB5DRPwko5c1sQeuT8a6cRJUdQtA0Tu3vd3KKwSNXrDz1CdKgQ/s1600/bg_news.png) no-repeat top center;width:970px;margin:0 auto;padding:0 auto;height:26px}.news{width:970px;margin:0 auto;padding:0 auto;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#ddd;overflow:hidden;clear:both}.news a:link,.news a:visited{color:#ddd;text-decoration:none}.news a:hover{color:#fff;text-decoration:underline}
</style>

3.cari kode <div id='main-wrapper'> dan kopy kode ini di atas kode <div id='main-wrapper'>
<div class='newspic'>
<div class='news'>
<div style='float:left;margin-left:10px;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>
News Update :
</div>

<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Tutorial Blog&quot;, &quot;urlblogsobat/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div></div></div>
 
catatan:
1.ganti tulisan urlblogsobat dengan url sobat

selesai


cara buat readmore di blog

oke langsung aja ya ini adalah cara membuat readmore di blog:
1. loggin blog
2. klik template
3. klik edit html
4. jangan lupa ceklis pada"expant widget template"
5. cari kode </head> dan paste kode di bawah ini di atas kode head
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

6. cari code ini
<data:post.body/> atau <p><data:post.body/></p>
dan ganti dengan
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


7. selesai

Thursday, October 25, 2012

cara buat tv online di blog

oke langsung aja. berikut  ini adalah cara buat tv online di blog:
1. loggin blog
2. plih tata letak
3. pilih HTML/javascript
4. copy kode di bawah ini lalu paste di kotak HTML/javascript
<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="790" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>

5. selesai


Monday, October 15, 2012

cara buat energy saving mode di blog







kali ini saya menulis tenteng cara buat energy saving mode di blog. energy saving mode berguna untuk menghemat penggunaan energy.karena dapat membuat tampilan pada blog ini menjadi hitam. jika sobat ingin coba ikuti langkah- langkah berikut ini:

1. loggin blog
2. klik template pilih edit HTML
3. jangan lupa beri centang pada kotak expand template widget
4. cari kode /head. biar cepat ketemu tekan tombol ctrl+F
5. pasang kode di bawah sebelum kode /head
<script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'/>
6. simpan template lalu klik tata letak
7. klik add gatged lalu kik HTML/javascript
8. paste kode di bawah ini
<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js?time=240"></script>

240 bisa sobat ganti dengan waktu sesuka sobat

9. klik save dan energy saving mode akan terpasang di blog sobat

Wednesday, September 26, 2012

cara buat efek salju pada blog

untuk membuat blog menjadi lebih indah biasanya para blogger akan menggunakan beberapa efek misalnya adalah efek salju. dan jika sobat ingin membuat efek salju di blog tinggal ikuti aja langkah langkah ini:
1. loggin blog
2. klik tata letak
3. klik add gadget pilih HTML/ java script
4. copy paste kode di bawah ini
<script src="http://ayriyzone.googlecode.com/files/salju.js"></script>

5. simpan 
efek salju akan terlihat di blog anda
selamat mencoba 
good luck 

Saturday, July 28, 2012

cara buat menu drop down di blog

ada berbagai jenis menu yang ada di blog. salah satunya adalah menu drop down. menu dropdown ini dapat kita pasang diatas ataupun di bawah judul blog.menu ini juga dapat membuat blog kita menjadi lebih indah. bagi yang mau coba silahkan ikuti langkah berikut ini:



1. login blog
2. klik template pilih edit HTML dan centang "expand template widget"
3. cari kode ]]></b:skin> biar cepet nyarinya pencet aja ctrl+f  dan letakan kode di bawah ini di bawah kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/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/AVvXsEhZH1RhqTz-2wqZKSroAK2T7DDF377eF8oZWMeM3VFv18nWOXHTQVxcE__q_VjFrM9tE0ykvWjWr7Mpd7kKR8KbsKL3Qnjqw3TfrZri_bW9m2ys0a1VSRrHnm648sO3YsdXeSHkifK5zZ4/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}


4. cari kode <header> untuk menu di atas nama blog
                   </header> untuk menu di bawah nama blog
copy code di bawah ini dan letakan  ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>



<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg19GoysAa5QicS4U7U-6Ee-ExHq9OlKV9qWC_YraC1cdwhoIxj2TmhVMcca8APVaO_3dK3ZDBV044TbbQaRcizTXHiFoVTmhpTpHlFuDF5f8ROqOhN7GDvQCdvyRRuqN6xnEZrTmFlLDo/s1600/home_white.png' style='padding:0px;'/>
Home</a></li>
<li><a href='http://www.blogger.com/profile/13131228580224261220' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://plus.google.com/u/0/109807818288407377931' target='new'>Goggle +</a></li>
<li class='hr'/>
<li><a href='https://twitter.com/#!/abdurroufalthof' target='new'>Contact on Twitter</a></li>
<li><a href='http://id-id.facebook.com/abiyyiabdurrouf' target='new'>abiyyi on Facebook</a></li>
</ul>
</li>
<li><a class='trigger'>Tips dan Trik</a>
<ul>
<li><a href='http://abiyyiabdurrouf.blogspot.com/search/label/tips%20komputer'>Komputer</a></li>
<li class='hr'/>
<li><a href='http://abiyyiabdurrouf.blogspot.com/search/label/tips%20blog'>Blogspot</a></li>
<li class='hr'/>
<li><a href='http://abiyyiabdurrouf.blogspot.com/search/label/pendidikan'>pendidikan</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Kategori</a>
<ul>
<li><a href='http://abiyyiabdurrouf.blogspot.com/search/label/download%20game'>download game</a></li>
<li class='hr'/>
<li><a href='http://abiyyiabdurrouf.blogspot.com/search/label/lirik%20lagu'>lirik lagu</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://abiyyiabdurrouf.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://abiyyiabdurrouf.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/AVvXsEjFCaE6jIzplhck8_LUik3FvVedCksdg7aaRUkbuFQGYX025tm9_4ga-6lIAnLr8wn2Q-zh4KRcfjbd3yvkjBV8ik7iv2nIc8EXu4SH5njnxHF6I0XLeVgQmi5mghyphenhyphenMhwGBbnCihv96MwU/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/AVvXsEi8OzxyYu4X30w4LveOLgE4HHgpR5AQApNqeud5lpHp9612oH2_4Jbu1ZSFq63fwXuOW-JTKezApPt43AtQW3d11XbKAllnxz82GBbvfnQndz8aEyVqgh8YX6R23yyQ1Mto1njIMh3zN9w/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>


ganti tulisan yg berwarna biru dengan url anda dan yang berwarna merah dengan tulusan yang akan keluar di menu drop down

5. selesai 
selamat mencoba 
good luck


Wednesday, July 18, 2012

cara buat cbox pada blog


chatbox ini sangat berguna bagi anda para blogger karena dapat membuat pengunjung dapat meninggalkan pesan di dalam cbox ini. mau tau caranya ikuti langkah- langkah berikut:

1.buka website http://www.cbox.ws/
2. klik sign up














3. isi semua kolom kemudian klik create my cbox!














4. klik publish dan tuliskan url blog sobat dan pada kolom step 1 pilih blogger/blogspot









5. copy kode









6. login blogger
7. klik tata letak
8. tambah gadget pilih HTML/javascript
9. paste kode
10. selesai

Saturday, April 28, 2012

cara membuat statistik pengunjung di blog

statistik pengunjung tentunya perlu di pasang di blog agar sobat bisa mengetahui berapa jumlah pengunjung di blog sobat. pada postingan kali ini membahas tentang membuat statistik pengunjung menggunakan histats di blog.

dan langkah langkah membuat statistik di blog menggunakan histats adalah sebagai berikut:

1. buka http://www.histats.com/
2. klik register















3. Tunggu beberapa saat sampai pemberitahuaan bahwa registrasi telah selesai/ Registration Done.

4. Masuk dan login kedalam email yang telah anda register untuk melihat laporan ulang dari hitsats.com dan klik link yang berikan .

5. pada halaman control panel klik +add a website 












6. isi data blog dan klik continue 

7. lalu akan terbuka traffic summary untuk menambahkan kode histats klik counter code 

8. selanjutnya sobat klik "add a new counter", dan pilih salah satu model histats yang ingin sobat tampilkan di blog
 9. Ceklist semua data yang ditampilkan pada model histats yangn kita pilih ada Visitor today, Total visitor, Page view today, Total page view, dan users online.


10. klik save 


11. sobat akan kembali ke list counter code, klik ID counter code yang tadi sobat buat.


12. Akan muncul kode/script HTML histats. Copy paste kode/script HTML tersebut di gadget HTLM/Javascript di blog sobat.


13. selesai

Saturday, April 21, 2012

cara memasang musik pada blog



setelah sebelumnya kita telah membahas tentang cara buat jam pada blog dan cara pasang kalender pada blog. kali ini kita akan membahas tentang cara pasang musik pada blog agar para pengunjung dapat lebih nyaman saat mengunjungi blog anda. dan jika sobat ingin memasang musik pada blog ikuti langkah- langkah berikut ini:


1. buka mixpod.com
2.klik sign up bagi yang belum punya akunya
3. pilih tampilan musik yang sobat sukai lalu klik Create A Playlist



4. pilih lagu yang anda inginkan untuk dimasukan ke dalam playlist

5. klik save playlist kemudian beri judul dan deskrepsi untuk playlist. klik save (getd code) dan copy codenya


6. login blog
7. pilih tata letak 
8. tambah gadget pilih HTML/ javascript 
9. paste kodenya 
10. selesai 





Wednesday, April 11, 2012

cara pasang burung follow twitter terbang di blog





agar pengunjung dapat memfollow twitter anda kita harus membuat tombol twitter. kalo biasanya tombol follow twitter hanya berupa burung yang diam di tempat saja kali ini kita akn membuat burung di twitter bergerak dan dapat terbang sehingga burung follow twitternya akan seperti hidup.








cara memasang burung follow twitter terbang:

1. login blog
2. pilih tata letak tambah Gadget 
3. pilih javascript
4. copy code di bawah ini

   <!-- floating twitter Bird -->

    <script type="text/javascript" src="http://p4r46h-blog.googlecode.com/files/twitterfloat.js"></script>

    <script type="text/javascript">

    var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGhSXNi5b9R9VHqX4hlTbC761ZXbJv-uly0it5AbliENG_jQYNjkPIoDXV8vMOzotAYDO_JnArGL9DpPOBSLm2Xdr-uNOJsywAuwz4hNA4GjeWcmSnJfgxI157n4-yNrnACOxpnD6ZIP_/s1600/original.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button",

    "select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "https://twitter.com/#!/abiyyiabdurrouf";var tweetThisText = "Twitter - abiyyiabdurrouf http://abiyyiabdurrouf.blogspot.com/";tripleflapInit();

    </script>


ganti text berwarna merah dengan akun twitter dan alamat blog anda 

5. klik simpan 
6. selesai buka blog dan lihat hasilnya 

Warna Pilihan Burung Terbang Twitter

Rubah Warna Burung Twitter


Warna Kuning

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXx6MNj6N3xqvtdj4Pr-mkoNfWWVWLp1Tgzit6_yrvUzm_18WVnWChPkWzNKES-YFKrD1bkmkibqFP0rTfHMoLa_cmMC9YWwP_MV559kuU-gaV0A6DRL_-2r-earc21kKninxqVltX3h0/s1600/yellow+bird.png
Warna Hitam

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpQyuAe0lqpRY-0-Tmel8-948TM8w186AzrwDajzRXQeYUZ6Qla3tKoogdRd2RvnDwbT647_3382T5qCETaKN4M2cLK59dQcr71dLP3-Pe2NTcF8M2fPfccqrAKkxGFDU-RyrFqewf-4/s1600/black+bird.png
Warna Biru

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE4TpvRZ8yADI2-sAzkiANJb6htNK5jczvPfuAWx4SgmICnxBZpITAnFbBd8iUcu5zolB5W5oDPD5jfxkTtDtx8jd5IiB-1n8_lefCCrOZxrghcU2lPvcipVMituj-qGp_Ndmnjb8QF9s/s1600/Blue+bird.png
Warna Coklat

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv_4dbsKpGEEEICBfCVIMW4Nm2XIij5n5ykz26uDvHusGuJUydayv6py29G2Vy0ztdLlVVgkmcL4I8abYXBNkDFzznMr5-wVZSb_-oSsqerSeYrNroCZyMQg1z_GlOfnx8oz0IYBVIjIM/s1600/brown+bird.png
Warna Hijau

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixzj-o38pIgVBTytOHwYIMyZ1REMFbQ1B2IrToBx_c-2KipAOcYnClE5swSCYKpCdDIYfP6YqhPq4wH6Zb5Q942Yed44wpr1QgoHbgxlNRqodEW3RL_xvWGnGQ__ngVDEmSp6wiM2GlGw/s1600/Green+bird.png
Warna Ungu

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLpO4L9EnN6Hn7DEdiWg7AIsPDKao_DkgokaqlxmJwQV-8rVf1u1KMHQ1KE-XWaTFGVREGVxmeTAh_1TuXEQV1hAeCcvc_b-pRlW0stnFuTCBEW6yBnvGI_xixiynoOhXbK8kTQy09NJs/s1600/purple+bird.png
Warna Putih

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTahU6stl6LcMbPtRIQHEgaB6vh9CKalHZ17swwMDKZ__1KWwipe309BlVlt-4dc57Cpf66ewnC9s03E3hsdrHI3dE5eDc6xIxMkKzY65SJ50PYjo9XinWTOmtLvZa9YLJ4ikOzK5ptRA/s1600/white+bird.png
Warna Merah

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxCbbdUoAQMLiqnXLsyGNV7WdqxZxR-aoPqT-4Rmtae75-2_zvKnAW-Vr9Bo4SFjoX5bAgd_HtUwc2L1Eg8bxVj6YTewo04hAtXA4FZne0rB6GjOuM2BOU_fohKgzh9wGY0Yuyr9B5Ks/s1600/red+bird.png

cara membuat like box untuk blog

















pada kesempatan kali ini kita akan membahas tentang bagaimana cara memberi like box (kotak penggemar) pada blog like box itu sendiri adalah semacam developers.facebook.com. dan like box berguna untuk para blogger untuk mempromosikan halaman facebook miliknya. agar si pengunjung tidak perlu jauh jauh pergi ke beranda halaman facebook.
untuk membuat like facebook untuk blog ikuti langkah langkah berikut ini:




1.kunjungi http://developers.facebook.com/docs/reference/plugins/like-box/.


2.  keterangan:

  • ganti  facebook page URL dengan facebook page URL milik anda. 
  • ubah ukuran with sesuai dengan ukuran yang anda inginkan. 
  • ubah ukuran hight sesuai dengan ukuran yang anda inginkan.
  • color scheme untuk memilih warna tampilan gelap atau terang.
  • Show Faces: Centang untuk menampilkan foto profil likers.
  • tulis warna yang anda inginkan jika ingin memberi border atau kosongkan jika ingin transparan.
  • Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.
  • centang jika ingin menampilkan tulisan temukan kami di facebook.



3. jika sudah selesai settingannya klik get kode maka akan muncul pop- up window dan akan muncul 3 jenis kode yaitu HTML5,XFBML,IFRAME dari ke tiga kode tersebbut pilih salah satu lalu copy kodenya.


4. login blogger.
5. buka tata letak pilih tambah Gadget. 
6. pilih javascript.
7. paste kode yang di copy di kotak kode.
8. simpan.


selamat mencoba