Tampilkan postingan dengan label Blogger Costumize. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger Costumize. Tampilkan semua postingan

26/12/13

Pasang Widget Popular Post Cantik Tanpa Edit HTML

Pasang Widget Popular Post Cantik Tanpa Edit HTML

Blog cantik itu penting, apalagi dengan widget-widget yang enak dipandang mata dan mendukung penampilan blog itu sendiri.
Setelah bongkar pasang-bongkar pasang Popular Post akhirnya Warnet Pakai Speedy menemukan widget yang pas.
Seperti ini penampakannya.... atau lihat aja disebelah >>>>>>>

 Popular Post Warnet Pakai Speedy

Jika ada yang ingin..
Lankah-langkahnya seperti ini :
1. Log in ke Blogger
2. Pilih Tata Letak / Lay Out
3. Tambah Widget Populart Post, centang image thumbnail dan klik Save
Gadget
4. Kemudian Privew blog anda dan hasilnya ............................. Masih standar kan heheheheh!
5. Lanjut ke langkah berikutnya.. kembali ke Tata Letak/Lay Out kemudian pilih lagi Tambah Widget HTML/JavaScript
Add Gadget
6. Copykan script dibawah ini seperti gambar dibawah ini, kemudian Save
 Gadget HTML/JavaScript
7. Copy script dibawah ini
<style type='text/css'>
    /*----- popular post warna warni by farhanshare.blogspot.com-----*/
  #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
background: #F2F2F2;}#PopularPosts1 img:hover {
-moz-transform: scale(1.2) rotate(-560deg) ;
-webkit-transform: scale(1.2) rotate(-560deg) ;
-o-transform: scale(1.2) rotate(-560deg) ;
-ms-transform: scale(1.2) rotate(-560deg) ;
transform: scale(1.2) rotate(-560deg) ;
}
    </style>

8. Kemudian Save Tata Letak / Lay Out 
9. Selesai.

Bagaimana?
Tertarik?
Sekian cara pasang widget popular post cantik di blog Warnet Pakai Speedy

18/12/13

Cara Pasang Iklan Dibawah Posting Blog

Bagaimana cara pasang iklan dibawah posting blog
Sebelum memasukkan script iklan, kode script harus di parse dulu agar well formed dengan template blog. Untuk memparse script  DISINI (www.blogcrowds.com)


1. Log in ke blogger
2. Pilih Blog yang akan dipasang iklan (jika blog lebih dari satu)
3. Pilih Template,
4. Pilih Edit HTML
5. Pada halaman Edit HTML cari kode <data:post.body/> (gunakan Ctrl+f)
atau lebih lengkapnya seperti dibawah ini
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
6. Setelah ketemu, masukkan script dibawah ini diantara kode diatas :
<data:post.body/> dan
<div style='clear: both;'/> <!-- clear for photos floats -->;
maka hasilnya akan seperti ini :
<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'> <p> Letakkan kode iklan yang tadi sudah sobat parse disini </p> 
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

7. Sebelum disimpan kllik Preview dulu, untuk melihat apakah ada script yang error atau tidak kemudian klik Save Template

8. Silahkan cek apakah iklan sudah muncul dengan mengklik salah satu judul posting
9. Selesai..


Catt :
Jangan lupa untuk memback up template blog anda
Semoga bisa membantu
Hasilnya seperti iklan di bawah posting blog ini..

17/02/13

Cara Pasang Newsticker / Berita Berjalan pada Blog

Banyak cara untuk mempercantik blog, salah satunya dengan memasang berita berjalan, atau neswticker di blog,
Pada blog Warnet Pakai Speedy sudah diprakterkkan dan hasilnya sperti gambar dibawah ini


Bagi yang suka dan ingin mempraktekkan, mangga dicobian hehehehhehe

Langkah

1. Pertama anda harus login pada akun blog anda.
2. Masuk ke " Dashboard -> Template -> Edit Html " Lali beri tanda centang pada " expand template widget ".
3. Lalu cari code " ]]> ". cara nya dengan tekan tombol ctrl+F untuk mencari.
4. Lalu Copy paste code yang ada di bawah ini tepat diatas code " ]]> ".( backup dulu template anda).
 /* News Ticker Wrapper */ .newspic {background:#000 url(http://2.bp.blogspot.com/-Gi_4y7eGWlg/TzePAUfnxbI/AAAAAAAAA4g/WsJKC56NBs4/s1600/headline.png) no-repeat top left;width:940px;margin:0 auto;padding:0 auto;height:28px;color:#ff0000;} .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{color:#ff0000;font-weight: bold;text-decoration:none} .news a:visited{color:#ddd;font-weight: bold;text-decoration:none} .news a:hover{color:#fff;font-weight: bold;text-decoration:underline}
 NB : warna BIRU bisa anda ganti dengan ukuran yang anda inginkan.

5. Kemudian cari code " </head> ".
6. Copy paste code yang ada di bawah ini tepat di atas code " </head> ".
 <script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw' type='text/javascript'/>
<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+'" /> INFONETGUE';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>
7. Kemudian penempatan code untuk " newsticker ", anda bisa tempatkan sesuai dengan keinginan dan kemauan anda. Disini saya akan mencontohkan, saya akan meletakkannya dibawah menu navigasi horizontal.
8. Lalu cari code " <div id='navigation'> " dan tutup code " <div id='navigation'> " dengan code </div>.
10. Copy paste code yang ada dibawah ini tepat setelah code " </div> " tadi.
<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 60px 5px 7px;font:bold 14px Arial;color:#333;text-transform:none;'>
Berita Terbaru :
</div><div style='float:left;width:680px;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;FakhrianAmrullah&quot;, &quot;http://warnet-speedy.blogspot.com/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 style='clear:both;'/>
</div>
 NB : Warna BIRU ganti dengan url blog anda.

11. Jika anda tidak menemukan code " <div id='navigation'> ", Maka anda cari code " <div id='content-wrapper'> ". tekan ctrl+f untuk mencarinya.
12. Copy paste code " newstickernya " tepat diatas code " <div id='content-wrapper'> ".

Sekian mudah-mudahan bisa bermanfaat ..
SELAMAT MENCOBA


Sumber :

03/02/13

Cara Pasang Permalink, Artikel Terkait dan Facebook Widget di Blog

Subscribe box, artikel terkait dan Facebook Fanpage

Langkah :

  1. Buka akun Blogger Anda
  2. Masuk ke Menu Edit HTML, jangan lupa centang Expand Template Widget
  3. Cari kode dibawah ini :
</head>
      4.  Pastekan kode dibawah ini, dan letakkan diatas pada kode diatas :
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>
      5.  Cari kode dibawah ini :
]]></b:skin>
      6.  Diatas pada kode diatas, pastekan kode dibawah ini :
#related-posts{float:left; width: 60%;  padding: 0px 3px;}
#related-posts {font-size:16px; text-align:left; color: #1476cc; font-weight: bold;}
#related-posts a{font-size:12px;}
#related-posts li{list-style:decimal; border-bottom: 1px dashed #ccc;}
#box-kanan{float: right; width: 38%; height:250px; padding: 0px 0px 5px;}
.authorinfo { font-size: 12px; border-bottom:double 3px #e6e4e3; margin: 10px 0 10px 0;}
.kotakRSS1 {background-color: rgb(255, 255, 255); -moz-border-radius: 5px;-webkit-border-radius:5px; border: 1px solid #cccccc; padding:5px 10px; margin: 0 0 10px 0; } .Rssardi33 { background: url('http://3.bp.blogspot.com/_jeu1dUw9AK4/TS1nXs3efdI/AAAAAAAAAQk/vMny_o0OLEI/s1600/maskolis.co.cc.jpg') no-repeat bottom right; } .Rssardi33 a { background: none;}  .inpRssardi33 { border: 1px solid #B9C1C6; width: 170px;height: 16px; font-size: 12px; padding:3px 4px 4px 10px;-moz-border-radius:5px;-webkit-border-radius: 5px;} .sbmtRssardi33 {background:#9b9b9b;border: 1px #9b9b9b solid;color:#FFF;font-size:12px;font-family:Arial,Tahoma,Verdana;margin-left:5px;padding:3px 5px 3px 5px;font-weight:bold;-moz-border-radius:7px;-webkit-border-radius: 7px;} .ardi33subs table {border-collapse: inherit; border: none;} .ardi33subs tr { border:0;} .ardi33subs td { border:0;} .ardi33subs th { border:0;} .clear { clear: both; }
      7.  Cari kode dibawah ini :
<div class='post-footer-line post-footer-line-3'>

     8.  Pastekan kode dibawah ini, dibawah pada kode diatas (langkah 6) :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- Script Artikel Berlangganan D-Copy Blog -->

<div class='kotakRSS1'>

<div class='Rssardi33'>

Anda sedang membaca Artikel tentang <strong><u><data:blog.pageName/></u></strong>, jika Anda menyukai Artikel di blog ini, silahkan masukkan email Anda dibawah ini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel baru.

<div class='ardi33subs'>

<table border='0' cellpadding='0' cellspacing='0' width='100%'>

<tr>

<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=diesilver&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'><div align='left'>

<input class='inpRssardi33' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketikkan email anda disini&quot;;}' onfocus='if (this.value == &quot;Ketikkan email anda disini&quot;) {this.value = &quot;&quot;;}' type='text' value='Ketikkan email anda disini'/>

<input name='uri' type='hidden' value='blogspot/frUpz'/>

<input name='title' type='hidden' value='blogspot/frUpz'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='sbmtRssardi33' type='submit' value='Subscribe'/></div>

</form></td>

<td align='left' style='padding:6px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/blogspot/frUpz'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/blogspot/frUpz?bg=9b9b9b&amp;fg=fffffff&amp;anim=0' style='border:0' width='88'/></a>

</td>

</tr>

</table>

</div>

</div>

</div>

<div class='clear'/>

<!-- End Artikel Berlangganan D-Copy Blog-->

<div id='related-posts'>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=11&quot;' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

Artikel Terkait

<script type='text/javascript'>

removeRelatedDuplicates();

printRelatedLabels();

</script>

</b:if>

</div>

<div id='box-kanan'>

<div class='fb-like-box' data-header='true' data-height='292' data-href='http://www.facebook.com/dcopy.blog' data-show-faces='true' data-stream='false' data-width='292'/>

</div>

</b:if>

Catt :

Ganti warna merah seuai dengan deskripsi blog anda…!

Source

29/11/12

Cara Pasang Read More Otomatis Terbaru di Blogspot

Cara Pasang Read More Otomatis Terbaru di Blogspot
Langsung saja kita praktekan cara membuat read more otomatis tersebut di bawah ini:

Penting!
Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)
<div class='post-header-line-1'/><div class='post-body'><b:if cond='data:blog.pageType == "item"'><style>.fullpost{display:inline;}</style><p><data:post.body/></p><b:else/><style>.fullpost{display:none;}</style><p><data:post.body/></p><a expr:href='data:post.url'>Readmore</a></b:if><div style='clear: both;'/>
Kalau sudah kita ke tahap selanjutnya

Pertama, silahkan menuju menu DESIGN -> Edit HTML, Cari kode
</head> kemudian letakan script dibawah ini di atas kode </head> jangan lupa save template/simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><script type='text/javascript'>var thumbnail_mode = &quot;float&quot; ;summary_noimg = 280;summary_img = 250;img_thumb_height = 70;img_thumb_width = 100;</script><script type='text/javascript'>//<![CDATA[function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};//]]></script></b:if></b:if>

Cara Pasang Read More Otomatis Terbaru di Blogspot

Updates!:
Kode Warna Biru berfungsi agar halaman statis tidak ikut terpenggal seperti halaman HOME.


Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> dengan semua 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 == &quot;item&quot;'><data:post.body/></b:if>
Kalo sudah silahkan klik preview kalau memang masih ragu-ragu lalu silahkan disimpan dan lihat hasilnya..

Keterangan:
  • var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
  • summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
  • summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan diposting dengan gambar / thumbnail)
  • img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
  • img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)



31/10/12

Cara Memasang Star Rating di Posting Blog

Cara Memasang Fitur Blogger Star Rating di Posting Blog

Star Rating Blogger
Blogger star rating adalah salah satu fitur baru Blogger yg resmi diluncurkan pada pertengahan 2011 lalu. 
Dulu, uji coba serta akses pengaktifan & penggunaannya harus melalui draft.blogger.com. Tapi kini tidak lagi, aktivasi fitur star rating for blogger dapat dilakukan melalui dashboard blogger.com. Star rating memberikan kesempatan pada pengunjung blog untuk menilai konten/isi posting yg dibacanya. Bagi pemilik blog, star rating dapat memberikan gambaran guna mengevaluasi penyajian isi blog.
Cara Memasang Star Ratings Widget Pada Official Blogger Templates
Template Blogger resmi (non custom templates) telah memiliki bagian yg berisi kode-kode widget star rating. Apabila ingin mengaktifkannya, cukup dengan melakukan beberapa langkah berikut:
1. Masuk ke dashboard Blogger.
2. Buka halaman layout (page elements).
3. Klik "edit" pada bagian badan posting (blog posts).
blogger
4. Klik/centang "Show Star Ratings"
blogger
5. Setelah itu save.
Cek posting blog, widget star ratings blogger ditampilkan pada bagian bawah posting.
Note: Pada beberapa kasus tertentu, opsi "Show Star Ratings" tidak ada. Jika sobat menemui kasus demikian, akses Blogger melalui draft.blogger.com.
Cara Memasang Star Ratings Widget Pada Custom Blogger Templates
Pada template blogger yg tidak disediakan oleh Blogger sendiri, star ratings tidak akan muncul meskipun sudah diaktifkan dengan cara seperti di atas. Hal ini karena pada template Blogger yg disediakan oleh pihak ketiga tidak diberikan script serta HTML star ratings. Melihat hal demikian, saya mencoba menengok template-template resmi Blogger dan menemukan beberapa bagian widget star ratings. Sebagai uji coba, saya kemudian mengekstraknya & mengaplikasikannya pada template blog ini.
Ada dua langkah penting untuk memasang star rating blogger:
  • Memasang Kode HTML star ratings:
1. Aktifkan terlebih dahulu fitur star ratings seperti cara di atas. Apabila tidak ditemukan, akses dashboard melalui draft.blogger.com. Save.
2. Buka edit HTML ( template > edit HTML), jangan lupa centang "Expand Widget Templates".
3. Jika ingin memasang star ratings di bawah judul posting, cari <div class='post-header-line-1'/> (gunakan Ctrl+F), letakkan kode berikut di bawahnya. Jika ingin memasang di bawah isi posting, cari <data:post.body/>, letakkan kode berikut di bawahnya:
<div class='star-ratings' style='float:right;'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='180'/>
</b:if></div>


Note:
-Apabila anda telah menggunakan share buttons (Facebook, Twitter, Google+) yg saya share pada posting terdahulu, letakkan kode di atas </b:if>.
- Apabila <div class='post-header-line-1'/> tidak ditemukan, cari <data:post.body/>, letakkan kode di atasnya.
  • Memasang Script star ratings:
1. Masih pada edit HTML, cari <b:include name='feedLinks'/>, letakkan script berikut di bawahnya:
<b:if cond='data:top.showStars'>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load(&quot;annotations&quot;, &quot;1&quot;);
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>
</b:if>










Note: Jika <b:include name='feedLinks'/> tidak ditemukan, cari <b:includable id='feedLinks'>.
2. Save template.
Blogger star ratings akan muncul di atas atau di bawah posting sesuai cara yg dipilih. Pastikan & perhatikan posisi widget agar sesuai dengan template blog. Jika perlu beri pengaturan CSS agar tampil pada posisi yg sempurna & sesuai keinginan.
Have a nice blogging * Have a nice learning!
























13/10/12

Cara Memasang Widget Popular Post Di Blog

Cara Memasang Widget Popular Post Di Blog

Widget popular post atau yang biasa di sebut Artikel atau postingan terpopuler, dimana hanya ada beberapa postingan yang sering dikunjungi orang lain, hal ini memudahkan seorang pembaca artikel dapat menemukan artikel populer kemudian membacanya. untuk memasang widget ini sebetulnya cukup mudah yakni Menambahkan Gadget baru dan Menambahkan script CSS-nya.
Berikut cara-cara memasang widget popular post di blogspot:

1. Login Blogger
2. Pilih Tabs "Tata Letak"
3. Klik "Tambah Gadget"
4. Cari dan pilih "Entri Populer"
5. Setelah itu klik "Simpan"

    Sekarang Tambah Script CSS-nya pada HTML blog anda

6. Pilih Tabs "Rancangan" -> Pilih "Edit HTML" -> Cek "Expand Template Widget"
7. Cari kode ]]></b:skin>
8. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>
/*--- BD Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(http://4.bp.blogspot.com/-9BPpVGRT6pA/T8po_f_yYKI/AAAAAAAANJo/N0U32K-c4CE/s1600/PPW.gif ) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul li:hover {
border:1px solid #389CFF;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

9. Klik "Simpan Template"
10. Selesai

Sekarang lihat hasilnya,
Sekian tips blogging ini semoga bermanfaat ..!!

Sumber :
http://dyan-seller.blogspot.com

25/09/12

Memberi Warna Background Widget Blog

Pada blog blog kostum kali ini adalah memberi warna background widget blog.

  • Log in ke blog
  • Pilih Template, jangan lupa centang Expand temlplate widget
  • Cari kode ]]></b:skin>
  • Copy paste kode dibawah ini tepat diatas ]]></b:skin>

h2 {
background:#ff9900 repeat-x;
color: #071019;
font-size: 12px;
font-family: Arial;
font-weight: strong;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align:center;
}

  • Ganti kode warna biru (#ff9900) sesuai dengan warna yang diinginkan
  • Kode warna blog lihat disini : Kode Warna Blog
  • Simpan dan lihat hasilnya.
  • Catt : Sebelum merubah template jangan lupa untuk membackup template dulu.

 

Selamat berkreasi…!

24/08/12

Pasang Headline News, Seperti Warnet Pakai Speedy. Mau???

Coba perhatikan dibagian bawah layar warnet pakai speedy! Ada yang baru khan?

Betul..

Setelah warnet pakai speedy utak-atik template blog warnet pakai speedy dalam beberapa hari ini, warnet pakai speedy menemukan widget yang pas, yang selama ini warnet pakai speedy inginkan, yaitu headline news, sebenarnya posisinya berada diatas layar tapi demi kenyamanan pengunjung dan biar kelihatan lebih rapih, widger headline news dipindahkan ke bawah layar.

Ingin tahu bagaimana cara pasang headline news seperti yang warnet pakai speedy pasang?

Gampang sekali kok… Begini caranya:

1. Tentu saja Log In ke Blogger dulu disini

Log In To Blogger

2. Pilih Blog yang ingin dipasang widget headline news (Blog lebih dari satu) kemudian pilih Layout

Blog Layout

3. Setelah masuk ke Layout pilih Add a Gadget, kemudian pilih HTML/JavaScript

HTML JavaScript

4. Akan muncul windows seperti dibawah ini..

Configure HTML Java Script

5. Copy dan Pastekan Script dibawah ini, seperti gambar di atas . Jangan lupa di Save!

<script type="text/javascript">
var hn_url_blog = "isi dengan alamat url blog anda";
var hn_jumlah_post = 5;
var hn_warna_latar = "#";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src="http://zykry.googlecode.com/files/headline-news.js">
</script>

Ket : semua value diatas bisa dirobah,

  • jumlah_post = 5; (Bisa ditambah atau dikurangi)
  • warna_latar = "#"; (Bisa diganti sesuai dengan selera atau warna diblog)
  • warna_garis = "#000000"; (Bisa diganti sesuai dengan selera atau warna diblog)
  • posisi = "top"; (Bisa diganti dengan “bottom” / posisi dibawah)

6. Terakhir… Save Layout.

7. Coba lihat apakah script sudah bekerja dengan baik..

8. Selamat mencoba..!

Cara Flash Mito A82 100% Success

Flashing Mito A82 Success 100% Lupa pola, Lupa Password dan Bootloop dapat diatasi dengan cara flashing, untuk lupa pola atau lupa passwo...