Total Tayangan Halaman

Translate

Selasa, 12 November 2013

Cara Membuat Arsip Blog Bergerak Dengan Gambar

 Cara Membuat Arsip Blog Bergerak Dengan Gambar


kalian bisa mengubahnya melalui cara berikut:



Untuk Cara Membuat Arsip Blog Bergerak Dengan Gambar, silahkan kalian ikuti step - step berikut ini, tenang saja . . . mudah kok Cara Membuat Arsip Blog Bergerak Dengan Gambar

1. Login ke akun blogger kalian.
2. Pilih blog yang akan kalian rubah tampilan Blog Archive nya.
3. Klik pada tombol Menu Opsi Lainnya Pilih tulisan "Tata Letak" klik tulisan tersebut.


4. Klik tambah Gadget -> Pilih dan klik tulisan "HTML/Javascript". Maka akan muncul tampilan seperti gambar berikut ini


5. silakan copy code di bwah ini
====================================
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <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 = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 5;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://sealkazzsoftware.blogspot.com/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
 /*
 * Script dikombinasikan dari bloggerstricks.com
 * spy effect dari jqueryfordesigners.com
 * Oleh Abu Farhan (www.abu-farhan.com)
 * Modifikasi oleh daw-xp.blogspot.com
 */
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>



======================================
sbr;http://sealkazzsoftware.blogspot.com/2013/10/Cara-Membuat-Arsip-Blog-Bergerak-Dengan-Gambar.html

Senin, 11 November 2013

Memasang Scroll Pada Arsip Blog

 Contoh Artikel Terkait Dengan Scroll



 Cara Membuat Blog Archive dengan Scroll ~ Mungkin teman blogger semua masih bingung dengan tema artikel saya kali ini. Maksudnya kita akan  memberikan scrolling pada widget Arsip Blog yang saudara pasang. Apa manfaat memasang arsip blog dengan scroll? Ingin tahu kegunaannya, silahkan baca lebih lanjut.
Memasang Scroll Pada Arsip Blog
Memasang scroll pada arsip blog memang tidak ada pengaruhnya terhadap SEO, tetapi dapat memberikan kenyamanan pada pengunjung blog. Kebanyakan blogger memasang scroll pada widget ini karena daftar isi blognya terlalu banyak dan memanjang ke bawah, sehingga membuat tampilan blog terlihat tidak rapih dan membuat pengunjung berpikir bahwa adminnya kurang prosesional dalam menata blog.

Jadi jika anda memiliki daftar isi blog yang terlalu banyak dan memanjang ke bawah, tidak ada salahnya jika saudara melakukan trik sederhana ini. Tapi sebelumnya anda itu harus memasang dulu widget arsip blognya.  Silahkan ikuti panduan sederhana berikut ini:
Cara Memasang Widget Arsip Blog

    Login dengan akun blog saudara
    Pilih menu Tata Letak, kemudian klik Tambah Gadget atau Add Gadget
    Kemudian cari widget Archive Blog, lalu klik
    Setelah itu akan muncul menu pengaturan untuk tampilan widgetnya, saudara bisa merubahnya sesuai selera anda.
    klik Simpan

Setelah anda memasang widget Archive Blognya, saudara tinggal mengikuti langkah-langkah berikut untuk memberikan Srolling pada widget Archive Blognya:
Memasang Scroll Pada Arsip Blog

    Pastinga anda sedang login dengan akun blog saudara
    Masuk ke menu Template Blog, lalu klik tombol Edit HTML
    Cari kode <div id='ArchiveList'>
    Klik pointer pada kolom edit HTML, kemudian tekan Ctrl+F atau F3 untuk mempemudah pencarian kode <div id='ArchiveList'>
    Jika sudah ketemu, Simpan kode di bawah ini tepat di atas kode <div id='ArchiveList'>

     <div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
    Sehingga menjadi seperti ini

    <h2><data:title/></h2>
      </b:if>
      <div class='widget-content'>
    <div style="border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; width: 100%; height: 200px; background-color: #FFFFFF;">
      <div id='ArchiveList'>
      <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
        <b:if cond='data:style == &quot;HIERARCHY&quot;'>
         <b:include data='data' name='interval'/>
        </b:if>
        <b:if cond='data:style == &quot;FLAT&quot;'>
          <b:include data='data' name='flat'/>
        </b:if>
        <b:if cond='data:style == &quot;MENU&quot;'>
          <b:include data='data' name='menu'/>
        </b:if>
      </div>
      </div>
    </div>
      <b:include name='quickedit'/>

    Jangan lupa berikan tag penutup </div> seperti contoh yang berwarna merah di atas
    Klik simpan template

Keterangan Kode Berwarna Merah di Atas:

    Kode height adalah kode yang menentukan tingginya scrolling pada blog arsip.
    #FFFFFF adalah warna background,anda bisa mengubahnya sesuai ke inginan anda. Lihat di sini " Kode Warna HTML Lengkap"

Jika anda melakukan langkah-langkah di atas dengan benar, maka hasilnya kurang lebih akan seperti ini:

Contoh Artikel Terkait Dengan Scroll

Bagaimana, mudahkan? jika anda merasa artikel ini bermanfaat, jangan lupa menyebarluaskan artikel ini dengan tombol sosial media yang ada di bawah ini. Selamat Mencoba . . .

sbr;http://ngeblog07.blogspot.com/2013/05/cara-membuat-scroll-pada-blog-archive.html
Related Posts Plugin for WordPress, Blogger...