Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Monday, December 17, 2012

Cara Membuat Widget Artikel Terbaru


Cara Membuat Widget Artikel Terbaru ini saya dapat dari blog nya kang salman ( kucoba.com ). Menurut kang salman sih widget ini memakai JQuery dengan memiliki kelebihan-kelebihan sebagai berikut :
  1.  Memiliki tampilan yang dinamis dan rapih.
  2.  Memiliki Load yang cukup cepat
  3.  Bisa di gunakan di Tab Menu atau New Window.
  4.  Terdapat Informasi Jumlah komentar di masing-masing artikel yang di munculkan.
  5.  Gambar/thumbails apik dan padat.
  6.  dan masih banyak lagi deh yang jelas kang salman jamin sobat informasi maya bakal puas.
Nah buat sobat blogger yang tertarik memakai widget ini, silahkan ikuti caranya berikut ini :

Cara Membutnya :
1.  Login Ke Blogger
2.  Pilih Tata Letak / Rancangan
3.  Klik Tambah Widget/Gedget
4.  Pilih HTML/Javascript
5.  Paste-kan Kode di Bawah ini ke HTML/Javascript tadi.

<script language="JavaScript">imgr = new Array();imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";showRandomImg = true;boxwidth = 298;cellspacing = 8;borderColor = "#ffffff";bgTD = "#000000";thumbwidth = 40;thumbheight = 40;fntsize = 12;acolor = "#666";aBold = true;icon = " ";text = "comments";showPostDate = false;summaryPost = 40;summarFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 5;home_page = "http://asksalman19.blogspot.com/";</script><script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

6. Simpan. dan lihat hasilnya.

NB : Didalam kotak kode tersebut, terdapat satu kode seperti di bawah ini :

    numposts = 5;

Yang di beri tanda merah adalah jumlah post yang akan di tampilkan. Jika sobat mengisi 5 maka widget ini akan menampilkan 5 artikel baru dst.

Okey cukup sekian tips blog kali ini  Cara Membuat Widget Artikel Terbaru.


Semoga Bermanfaat



Scrip by : www.kucoba.com

Tuesday, December 11, 2012

Cara Membuat News Ticker

Tips Blog kali ini yang ingin saya share ke sobat blogger adalah Cara Membuat News Ticker.
News Ticker adalah headline postingan terbaru blog kita, widget ini menampilkan beberapa postingan terbaru kita dalam bentuk teks berjalan. Untuk lihat demonya silahkan lihat gambar dibawah ini.


 Cara Membuat News Ticker :

1.    Login ke Blogger

2.    Pilih tab Design > Edit HTML

3.    Cari kode ]]></b:skin>

4.    Copy kode di bawah ini dan pastekan tepat di bawah kode ]]></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)?"<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)}}; //]]></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/AVvXsEhF_Hh-S1vaBnUtSKnqhIfwCKlA5LetVRLJMfC3zL2YeOwRGfwjzD2C3UTmFs6SeB9jiF6o_H2o5wu7EVP7uqsKavCzvlfnCaxZiNtVKJNvWLXE2DSh3zO5Sv62e2G477dpznlG-tkJi98/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>

5.    kemudian cari kode  <div id='main-wrapper'>

6.    Copy kode di bawah ini dan pastekan tepat 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>


8.     Ganti tulisan urlblogkamu dengan url yang kamu miliki

9.    Setelah selesai simpan template dan lihat hasilnya.

Selesai sudah tutorial Cara Membuat News Ticker. Selamat mencoba, semoga berhasil dan bermanfaat

Script by : www.tutorial-4u.com

Monday, November 26, 2012

Cara Memasang TV Online Di Blog

Sobat blogger mau memasang TV Online Di blog ?. Nah postingan kali ini saya ingin berbagi buat sobat blogger bagaimana caranya memasang TV Online di blog. Dibawah ini ada dua situs yang bisa sobat pergunakan, tapi yang satu gak bisa kalau di taruk di blog, kita cuma bisa nonton Lewat situs nya saja, tapi hebatnya kita bisa nonton TV luar negeri nih, seperti BBC,ESPN,CNN dll. Oh iya kalau kita pasang TV Online di Blog kan loading nya agak berat tuh, jadi jangan ditaruk di home page ya TV Online nya, supaya loading blog sobat tidak berat. Okey langsung saja cek kedua situs nya dibawah ini :

1. Cara Memasang TV Online Di Blog Melalui Mivo.tv


Sobat pasti sudah sering denger kan tentang mivo.tv. Ini adalah situs terbaik untuk menonton TV Online di Indonesia ( menurut saya ). Load untuk buffering nya tidak terlalu lama, dan program TV nya juga lumayan banyak. Untuk memasang nya di blog, silahkan sobat copy kode HTML dibawah ini, dan paste di add gadget HTML blog sobat :


 <embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="820" 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=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>


Note : Untuk lebar dan tingginya silahkan sobat atur sendiri.

2. Cara Menonton TV Online Melalui www.atdhenet.tv


Khusus buat nonton TV luar negeri. Kalau situs yang ini sob gak bisa kita taruk di blog, jadi sobat harus pergi kesitus nya langsung buat nonton TV Online nya. Tapi apa hebat nya situs ini ? Pertama : situsnya ringan dan sederhana banget, cuma nampilin link aja. Kedua : kita bisa nonton TV Luar negeri seperti CNN,ESPN,BBC dll. Langsung saja sobat pergi ke www.atdhenet.tv.

Okey sob, itulah dua Cara Memasang TV Online Di Blog + menonton TV luar negeri.
Semoga bermanfaat