percobaan mall: Oktober 2013

Jumat, 25 Oktober 2013

About Us

nama nama
asla sekolah

Jumat, 11 Oktober 2013

Membuat Breaking News Menarik Dibawah Navigasi Menu

Pada artikel kali ini saya akan menjelaskan bagaimana membuat breaking news atau berita berjalan yang biasanya terdapat di bawah navigasi menu pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang breking news dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda.

Pertama kali saya melihat tampilan breaking news ini pada template Sporty Magazine 2 buatan Borneo Template, waktu itu template masih berbayar sekarang sepertinya sudah gratis di download. Disini saya akan memodifikasi sedikit tampilannya sehingga tampilannya seperti tampak pada gambar diatas, demonya anda bisa lihat disini. (http://martin-big.blogspot.com)

Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya :

Login ke blogger dengan akun anda
Kemudian klik Tata Letak > pilih Edit HTML
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>
view plain print ?
1. /* News Ticker Wrapper
2. ---------------------------------------------*/
3. .newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
4. .news {width: 970px;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;}
5. .news a:link, .news a:visited{color:#fff;text-decoration:none;}
6. .news a:hover {color:#ddd;text-decoration:underline;}
Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

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

Kemudian cari kode dibawah ini, atau kode yang biasa dipakai untuk meletakkan navigasi menu

<div class='menu horizontal'>
...........................................
...........................................
</div>

Jika sudah ketemu letakkan kode berikut tepat dibawah kode </div> yang dipakai untuk menutup kode navigasi menu pada template Anda.

<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("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://maskolis.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
Ganti URL yang saya beri warna merah dengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung saja disini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode (bener nggak sih ngomongku...... )
Langkah terakhir save/simpan, lihat dibawah navigasi menu anda, kalau cara memasangnya sudah benar pasti akan muncul breaking news itu.

Agar lebih ramping simpan kode javascript newsticker diatas (no.5) di tempat penyimpanan googlecode Anda. Mudah kan? Jika ada yang mau ditanyakan silahkan isi pada kolom komentar dibawah. Selamat mencoba dan semoga bermanfaat.

http://www.maskolis.com/2011/12/membuat-breaking-news-menarik-dibawah.html

Cara membuat readmore otomatis dengan gambar

Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
Cari Kode </head>.
Copy paste kode dibawah ini tepat 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, (for blogspot)
by: http://trikseosimple.blogspot.com/
********************************************/
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>

Save Template anda.
Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
selanjutnya akan terbuka kode kode yang lain.
geser atau scrol ke bawah dan cari kode

<data:post.body/>

Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.

APA ITU ARTIKEL ?

Menurut Eneste (2005) artikel didefinisikan sebagai bentuk karangan yang berisi analisis suatu fenomena alam atau sosial dengan maksud untuk menjelaskan siapa, apa, kapan, dimana, bagaimana dan mengapa fenomena alam atau sosial tersebut terjadi. Suatu artikel kadang-kadang menawarkan suatu alternatif bagi pemecahan suatu masalah.
Seseorang yang ingin menulis artikel di media massa harus paham bahwa media yang ia tuju adalah media yang dibaca oleh banyak orang. Artinya secara teoritis pembacanya adalah orang-orang yang beragam baik dari sisi usia, pekerjaan, sosial ekonomi, jenis kelamin dan tingkat pendidikan. Impilikasinya, ia harus bisa membuat artikel yang bisa mudah dimengerti oleh semua kalangan pembaca, termasuk didalamnya efek sosial politis yang mungkin timbul dari tulisannya tersebut.
Artikel adalah salah satu jenis tulisan. Artikel ditulis berdasarkan informasi-informasi fakta mengenai sebuah tema. Pembahasan pada sebuah artikel haruslah singkat, padat, tidak bertele-tele, aktual, dan memiliki daya tarik tersendiri.
Artikel merupakan:

karya tulis atau karangan;
karangan nonfiksi;
karangan yang tak tentu panjangnya;
karangan yang bertujuan untuk meyakinkan, mendidik, atau menghibur;
sarana penyampaiannya adalah surat kabar, majalah, dan sebagainya;
wujud karangan berupa berita atau “karkhas”.

Artikel itu termasuk karangan ilmiah yang mana selalu ditulis dengan bahasa kongkret, gaya bahasanya formal, kata-katanya teknis dan didukung dengan fakta umum yang dapat dibuktikan benar tidaknya. Adapun sifat-sifat dari karangan ilmiah ada 4 macam: karangan ilmiah non-teknik kongkret, karya ilmiah teknik umum, karangan ilmiah abstrak normal dan karangan ilmiah spesifk histories.
Ciri-ciri Artikel Ciri-ciri artikel sebagai berikut:

Lugas: tulisan langsung menuju persoalan
Logis: segala keterangan yang dipaparkan harus memiliki dasar dan alasan yang masuk akal dan dapat diuji kebenarannya.
Tuntas: masalah atau tema yang dipilih dipaparkan secara mendalam
Obyektif: keterangan yang disajikan sesuai dengan data dan fakta yang ada
Cermat: berusaha menghindari berbagai kekeliruan walau sekecil apapun.
Jelas dan padat: keterangan mudah dipahami Tidak melibatkan emosi yang berlebihan Menggunakan bahasa baku dan memperhatikan tanda baca
Menyajiakan fakta obyektif secara sistematis atau menyajikan aplikasi hokum alam pada situasi spesifik
Penulisannya cermat, tepat dan benar, serta tulus. Tidak memuayt terkaan pernyataan-pernyataannya tulus tanpa mengingat efeknya
Tidak mengejar keuntungan pribadi, yaitu tidak berambisi agar pembaca berpihak padanya. Motifasi penulis hanya memberitahukan tentang sesuatu. Penulis yang ilmiah tidak ambisius dan tidak berprsangka
Artikel itu sistematis, tiap langkah direncanakan sistematis terkendali, secara konseptual dan procedural
Artikel itu tidak emotif, tidak menonjolkan perasaan. Karangan ilmiah menyajikan sebab-musabab dan pengertian. kata-katanya mudah diidentifikasi. Alasan-alasan yang dikemukakan induktif, mendorong untuk menarik kesimpulan tidak terlalu tinggi, dan bukan ajaka
Tidak memuat pandangan-pandangan tanpa pendukung, kecuali dalam hipotesis kerja
Ditulis secara tulus, dan memuat hanya kebenaran. Tidak memancing pertanyaan-pertanyaan yang meragukan
Artikel tidak argumentative. Karangan ilimiah memungkinkan mencapai kesimpulan, tetapi penulisnya membiarkan fakta berbicara sendiri
Artikel itu tidak persuasive, yang dikemukakan fakta dan aplikasi hokum alam kepada problem spesifik, mengemukakan keyakinan itu sukar, tetapi keyakinan itu sendiri tidak ilmiah.
Menyajikan kebenaran fakta, oleh karena itu memutar balikkan fakta akan menghancurkan tujuan penulisan

source