Saatnya Mengganti Kursor Pada Blog

Hai Sobat pembaca setia Blog_Iqrar!!

Ketemu lagi, lagi, dan lagi, masih dalam gelombang yang sama, yaitu Tips n' Trik Blogger. Sebelumnya kita sudah membahas Cara Membuat Head Line News Pada Blogger, Sekarang kita banting setir ke Cara mengganti kursor pada blog.

Sobat pandai mengganti kursor mouse, kan? tahu nggak cara ngeganti nih kursor ketika ada pengunjung yang masuk ke blog kita?

Terkadang SI Pembaca bosan dengan kursor miliknya sendiri, apalagi kalu kursornya default yang warna putih itu, tuh. Tapi jika kita memasang script untuk proses pengubahan kursor ini, maka otomatis kursor pembaca akan berubah bentuk menjadi kursor-kursor yang lucu. Pembaca menjadi bersemangat deh, keliling-keliling blog kita. Penasaran? Cekidot....

Cara Pembuatan:

1. Login Ke Blogger.com

2. Pilih Template > Edit Template

3. Copy dan Paste kode script di bawah ini di atas kode </head>

<style type='text/css'>HTML,BODY{cursor:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIkkUI88WitkqKBlwwHx1DkwmoqE5pVCfgk-FH43CjbD0PD1i5a15jAxfR9SfL4vHrcGcGEAeedTxU1InkiBCmKYfeUyEHrQFtWRcnrv_FvLGOf7A_UEAxED30M17hgrmghVjZrZjoLJU/s1600/Kursor+ViperGoy.gif"), auto;}</style>

4. Ganti tulisan merah dengan dengan alamat url gambar kursor yang sobat inginkan.
5. Pilih Simpan

Taraaa.... Kursor nya udah berubah deh. Semoga artikel di atas bermanfaat, jika ada yang kurang dipahami, silakan poskan komentar....

Read More

Ada Head Line News Berjalan Di Blog?

HALO..!!! Ketemu lagi nih di Blog_Iqrar....

Sobat pernah lihat headline news di TV? tentu pernah dong, tulisan yang berjalan di bawah TV itu. Sekarang itu tidak hanya terjadi di TV saja, di dunia perbloggeran pun ada.

Tujuan pembuatanya adalah tidak lain untuk memberikan berita-berita yang hangat dan terbaru agar pembaca tahu. Dan pembaca akan mengklik dan tiba di halaman yang tertera di headline news tadi. Penasaran? Cekidot...

Cara pembuatan:

1. Login ke Blogger.com

2. Pilih Template > Edit HTML

3. Copy dan Paste kode script dibawah ini tepat di atas kode ]]></b:skin>


.newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.news {width: 940px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#fff;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

4. Copy dan Pastekan juga kode di bawah ini diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script><br /> <script type='text/javascript'><br /> //<![CDATA[<br /> 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+'" /> Loading news...';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)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+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)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+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)}};<br /> //]]><br /> </script><br /> <style type='text/css'><br /> .titlefield{ /*CSS for RSS title link in general*/<br /> text-decoration: none;}<br /> .labelfield{ /*CSS for label field in general*/<br /> color:#aaa;font-size: 100%;}<br /> .datefield{ /*CSS for date field in general*/<br /> color:#aaa;font:normal 14px Arial;text-transform:none;}<br /> #example1{ /*Demo 1 main container*/<br /> width: 780px;<br /> height: 14px;<br /> border: 0px solid #aaa;<br /> padding: 0px;<br /> font:bold 16px Arial;<br /> text-transform:none;<br /> text-align:left;<br /> background-color:transparent;}<br /> code{ /*CSS for insructions*/<br /> color: #fff;}<br /> #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}<br /> #example1 a:hover {color:#C8D3F2;text-decoration:none;}<br /> </style>

5. Sama dengan diatas, Copas kode di bawah ini di bawah kode <body>


<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; 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;Creating Website&quot;, &quot;http://vipergoy.blogspot.com/feeds/posts/default&quot;)
cssfeed.displayoptions(&quot;date&quot;)
cssfeed.setentrycontainer(&quot;div&quot;)
cssfeed.filterfeed(10, &quot;date&quot;)
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>


 6. Pilih Simpan Template jika sudah selesai

Semoga artikel di atas bermanfaat Sob, mohon maaf jika kodenya terlalu panjang tapi kode di atas sudah di uji coba dan 100% Work....

Read More

Yuk membuat float like box facebook!

Hai Sobat..... masih dalam kategori tips n' trik blogger, sekarang kita akan mengulas tata cara membuat float like box facebook!

ingin dapat like dari pengunjung yang hadir ke blog kita banyak caranya, salah satunya dengan sistem float like box facebook yang berasal dari Facebook Plugins. Float like box facebook terkesan seakan-akan melayang di depan blog kita. tujuan pembuatan widget ini salah satunya untuk mempromosikan blog kita kepada pengunjung lainnya. fungsi lainnya yaitu sebagai bukti bahwa pengunjung menyukai postingan-postingan yang ada di blog kita.

udah penasaran? Cekidot!!

Cara pembuatan:

1. Login ke Blogger.com

2. Pilih Tata letak > Tambahkan Gadget
3. Pilih HTML/JavaScript

4. Masukkan Kode HTML berikut:

<style type='text/css'> /* Message Box */ #box-message { position:fixed !important; position:absolute; top:-1000px; left:50%; margin:0px 0px 0px -182px; width:200px; height:auto; padding:16px; background:#fff; font:normal Dosis, Georgia, Serif; color:#111; border:2px solid #333; -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; } #box-message a.close { position:absolute; top:-10px; right:-5px; background:#fff; font:bold 16px Arial, Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#111; border:2px solid #333; -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:22px; -moz-border-radius:22px; border-radius:22px; cursor:pointer; } #twitterx { background: #EEF9FD; padding: 10px; text-align:center; border: 1px solid #C7DBE2; border-top: 0; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type='text/javascript'> $(window).bind("load", function() { // Animate Top Value When Page Loaded Completed $('#box-message').animate({top:"50px"}, 1000); // Remove Mailbox When Close Button On Click $('a.close').click(function() { $(this).parent().fadeOut(); return false; }); }); </script> <div id='box-message'> <!-- HTML Start --> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/username?ref=hl&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe> </center> <!-- HTML End --> <a class='close' href='#'>×</a> </div>

5. kata yang bertuliskan " http://www.facebook.com/username " diganti dengan alamat facebook sobat
6. pilih simpan jika sudah selesai

Read More

Mau mengganti background blog dengan gambar/foto?

Halooo semuaaa..... masih bersama BlogIqrar nih.....

sekarang kita akan membahas cara mengganti background pada blog sobat....

terkadang kita jadi bosan dengan background yang ada di blog kita karena background disesuaikan dengan template, kita ingin background blog kita bisa diganti-ganti sesuai dengan keinginan kita. Kita bisa membuat blog kita menjadi berwarna karena gambar atau foto yang kita pasang tanpa mengganti template.....

penasaran dengan caranya langsung aja cekidot...!!

persiapan awal yaitu dengan mempertimbangkan gambar yang akan sobat pasang, usahakan tidak terlalu besar dan tidak terlalu kecil. Jika gambar terlalu besar, loading pada blog sobat akan lambat karena foto yang ukurannya besar, sebaliknya jika ukurannya kecil, gambar akan menjadi pecah karena diperbesar. Oleh karena itu pertimbangkan gambar yang akan sobat pasang.

caranya:

1. Login ke dasbor Blogger.com

2. pilih template, lalu pilih edit HTML

3. untuk memudahkan pencarian tekan Ctrl + F pada keyboard dan ketik body{

4. ganti kode di atas dengan kode dibawah ini

body{background-image: url(alamat url gambar sobat);

5. ganti tulisan merah dengan alamat url gambar sobat yang telah ditentukan
6. pilih pratinjau untuk memastikan
7. jika sudah pas, maka pilih simpan template

sekarang background sobat sudah berganti tanpa harus mengganti template!!
tunggu tips n' trik blogger lainnya dari BlogIqrar!!  See uu...

Read More