Created (c) by Muhammad Hanafi (DeeJayHan)
Tampilkan postingan dengan label Tips dan Trick Blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label Tips dan Trick Blogspot. Tampilkan semua postingan

Cara Menambahkan Gadget Di Sedebar Blogspot

Sobat blogger, setelah kemarin kita bahas bersama mengenai cara membagi kolom header, kali ini, saya akan berbagi tentang cara menambah gadget di sidebar. Biasanya, ini dilakukan bila sidebar hanya  terdiri 1 kolom besar saja. Mari kita mulai ...
  • Log in ke blogger : dashboard >> layout >> Edit HTML
  • Cari kode di bawah (bisa gunakan Ctrl+F untuk mempercepat)
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Feed2' locked='false' title='Recent Posts' type='Feed'/>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>
</div>
  • Kemudian, tambahkan kode di bawah, di antara </b:section> dan </div>.
<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text514' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text524' locked='false' title='Column 2' type='Text'/>
</b:section>

<div style="clear: both;"></div>
  • Kemudian, cari kode : ]]></b:skin>
  • Tambahkan kode CSS di bawah di atas ]]></b:skin>.
#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}
Note : Sobat bisa ubah nilai dari lebar/width, sesuai keinginan Anda.
  • Simpan Template sobat. Hasilnya akan tampak seperti di bawah ini


Semoga manfaat ...

Cara membuat banner animasi


banner animasi
Cara membuat banner animasi – banner animasi terkadang lebih menarik perhatian bila di bandingkan dengan banner biasa yang diam dan statis. Oleh karenanya banyak para pebisnis online lebih suka menggunakan banner animasi untuk sarana promosi produk ataupun jasa yang mereka miliki. Bagi mereka yang terlatih dalam menggunakan berbagai software design grahic tentu tidak ada masalah untukmembuat banner animasi, namun akan berbeda keadaannya bagi yang awam termasuk kang rohman. Akan tetapi tentu banyak cara untuk mencapai sesuatu termasuk masalah pembuatan banner animasi. Untuk kita yang awam, banyak layanan online baik gratis ataupun berbayar yang bisa kita pergunakan. Banner animasi umumnya dibuat dalam file gambar berekstensi gif serta gambar dalam bentuk banner flash. Berikut beberapa contoh website yang menyediakan layanan membuat banner animasi : Gif Banner 
  • http://picasion.com
  • http://www.loogix.com
  • http://www.createagif.net
  • http://gickr.com

Flash banner 
  • http://www.123-banner.com
  • http://bannersabc.com
  • http://www.flashbannernow.com
  • http://www.quickbanner.com
  • http://www.flash-banner-maker-online.com

Cara Membuat Banner Animasi

Sebagai contoh, Kang Rohman akan bahas bagaimana cara membuat banner animasi berupa banner gif di http://picasion.com. Berikut adalah langkah-langkahnya : 
  1. Buatlah 2 atau 3 buah banner misal ukuran 125x125 px. Contoh : 
    banner animasi banner animasi banner animasi
  2. Silahkan kunjungi website http://picasion.com
  3. Klik tombol browse untuk memasukkan file banner membuat banner animasi
  4. Pilih ukuran banner yang sesuai dengan keinginan pada opsi Size.
  5. Pilih kecepatan animasi pada opsi Speed
  6. Klik tombol Create Animation
  7. Banner animasi anda telah dibuat. Contoh hasilnya : 
  8. Anda dapat menyimpan file banner animasi tersebut, atau bisa juga menggunakan link yang di berikan.
  9. Selesai
Ah ternyata sangat mudah membuat banner animasi. Untuk selanjutnya anda dapat memasang gambar tersebut di blog anda. Semoga artikel tentang cara membuat banner animasi ini dapat bermanfaat bagi anda.

Cara Pasang Daftar Isi Otomatic Di Blog


daftar isi blog
Cara Memasang Daftar Isi di sidebar - Daftar isi (sitemap ) atau tak jarang juga di sebut Table Of  Content, adalah bagian yang sangat penting yang harus ada di blog sobat. Umumnya, daftar isi biasa di letakkan di suatu halaman dengan tujuan untuk mengurangi beban blog saat loading.
Berbeda dengan postingan saya sebelum yang membahas tentang cara membuat daftar isi sitemap di blog, kali ini saya akan share untuk sobatbagaimana cara memasang daftar isi pada sidebar blog sobat. Widget ini akan menampilkan daftar isi blog sobat dalam bentuk per label dan akan menampilkan seluruh postingan ( artikel ) jika sobat mengklik opsi All label. Selain itu, widget ini juga di lengkapi dengan fungsi scrolling yang berguna untuk menghemat halaman blog sobat. 

Sobat yang tertarik untuk memasang widget ini, silahkan ikuti langkah - langkahnya berikut :

1. Log in ke akun blog sobat.
2. Kliik Rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan script berikut kedalam kotak.

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:2px solid #FFFFFF;height:310px; overflow:auto; padding:10px; width:260px;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 250;
</script>
<script src="http://tateluproject.googlecode.com/files/DaftarMenuOtomatis.js">
</script>
<script src="http://www.jokorowotlogorejo.co.cc/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">
</script></div>



Tambahan :
  • Semua tulisan yang bercetak tebal pada script adalah kode yang bisa di utak-atik atau di ganti terutama kode width ( lebar ) dan height ( tinggi ) yang harus di sesuaikan dengan ukuran sidebar blog sobat dan tentunya nama blog juga..
  • Kode yang berwarna biru (500) pada script adalah jumlah yang daftar isi yang akan di tampilkan. Ubah kode tersebut jika halaman blog sobat berjumlah lebih dari kode tersebut.
4 . Klik Simpan.

Demikianlah Cara Membuat Daftar Isi di Sidebar Blog, semoga bisa membantu sobat blogger dalam menghias blog sobat.

Cara Pasang Welcome Imej Di Blogspot


Welcome image ini adalah imej akan terpapar bila kita mula-mula masuk ke blog.Kita perlu klik pada imej tersebut bagi memasuki blog berkenaan.Rasanya sudah banyak blog yang memasangnya dengan berbagai imej.Jika ada yang berminat untuk membuatnya.Ikuti langkah-langkah di bawah ini:


1.Log in ke Dashboard
2.Pilih Design >>Edit HTML







3.Cari kod  ]]></b:skin> pada template
Kemudian masukkan kod dibawah ini diatasnya:




</style></head>
<script language="javascript" type="text/javascript">
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}

function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}

function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('ybl', 3000); this.style.display='none';
document.getElementById('tbb').style.display=''">
<center><img src="http://i219.photobucket.com/albums/cc282/garam63/welcome.png"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="ybl" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="tbb" style="display : none;">
<body>

#bahagian teks berwarna biru boleh digantikan dengan url imej anda sendiri

4.Kemudian simpan template anda

Selamat mencoba semoga berhasil.....

Cara Pasang Kotak Admid di Bawah Pstingan


Tips dan Cara Membuat Permalink di Blog - Apa kabar sobat blogger semua!!! Kali ini saya akan mempostingan jawaban atas pertanyaan sobat blogger tentang cara membuat / memasang permalink di blogspot sama persis dengan permanen link di blog ini. Sekedar informasi, postingan sebelumnya adalah cara membuat logo. Sebelum kita ke tkp ada baiknya saya jelaskan sedikit dulu tentang Permalink.


Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat. Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya adalah permanen link.

Permalink kali ini saya sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ) . Contohnya seperti di bawah ini...



Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.

Cara Membuat Permanen Link di Blog

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>
.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya. 

<!-- Permalink Bakalan City -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Suprayitno bakalan city' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4IWWtv5ZK29GATjf6xiTwQt26XQ1s5G6yC0KF9SHJOjbVcI-mBgN00rB4ZyECvcC8pjJuzVZ8aJLeR-tUbCgSahgGTodLGo5efgfcDcsBqEoDzsQXJQRU_fv8g3w2UIcnVcV1PChIzHo/s1600/559457_366792523361390_100000919374428_1083481_1160803163_n.jpg'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://bakalan-tlogorejo-city.blogspot.com/search/label/Tips%20dan%20cara%20Blogspot' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink Bakalan City -->
5. Klik save dan lihat hasilnya.

Tambahan :
  • Ganti kode yang berwarna dengan Url foto / gambar milik sobat
  • Sesuaikan angka yang berwarna  dengan ukuran template blog sobat ( ukuran textarea )
  • Semoga Artikel Ini Bermanfaat.......
  • Terima Kasih

Cara pasang hot news di blogspot

Cara pasang hot news  seperti yang boleh anda lihat di bahagian bawah blog ini adalah widget yang sangat menarik. Widget tersebut memaparkan tajuk post terkini yang berefek slider.

Untuk memasang widget Recent posts floating bar slider ini pada blog anda, sila ikut beberapa langkah di bawah.

1. Log in dashboard--> Template --> Edit HTML --> Proceed.

2. Seterusnya tick "Expand Widget Templates"

3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod </head>

4. Copy dan paste kod css ini, di atas atau sebelum kod </head> 


 <style type='text/css'>

#bd {
float:bottom;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-top:5px;
font-size:12px
}

.text {
color:#98BF2F;
margin-left:8px
}

div#news-1 .gk_news_highlighter {
font-family:Verdana, Arial;
font-size:11px;
color:#666
}

div#news-1 {
width:960px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlLCgd82p35dfZvxFBCM0maHBn5blzYY2_Vc-EWjwUH-OuNyDWTEPQn5jSypRYXTj3IaEhLrxnX2VKBAI7TtDmKPIs71FGBp8b70S2DzhM7pq6K985tCelfQNhqEmcmoqH_-C4FLoW3va/s320/gradient.png) repeat-x 0 -100px;
clear:both;
overflow:hidden
}

div#news-1 .gk_news_highlighter_wrapper {
float:left;
width:820px;
height:24px;
line-height:24px;
overflow:hidden;
position:relative
}

div#news-1 .gk_news_highlighter_item {
width:auto;
height:24px;
padding-left:20px;
display:none;
position:absolute
}

div#news-1 .nowrap {
white-space:nowrap
}

div#news-1 .gk_news_highlighter_title {
padding-left:5px
}

div#news-1 .gk_news_highlighter_desc {
padding-right:5px
}

div#news-1 .gk_news_highlighter_interface {
float:left;
width:120px;
height:24px;
text-align:right;
line-height:24px;
z-index:1000
}

div#news-1 .gk_news_highlighter_interface .text {
float:left;
display:block;
width:auto;
padding-left:5px;
font-weight:700
}

div#news-1 .gk_news_highlighter_interface div {
width:30px;
float:right
}

div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
cursor:pointer;
width:13px;
height:24px;
display:block;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFUXBqizlX1ZtkTosfVif71mpkaym1LsYQH1pk7kkcwEYGalxy2obqTHgeobHjOdm4sX5HcJqsWwYfI_TmvoCn2RNBG-kcrdXABx7mq7U8dQ_DFT1bZFsPYLdiaeKghURPK5HMNWZmQo/s1600/play.png&#39;) no-repeat 0 50%;
float:left
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position:-13px 50%
}

div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
color:#FFF
}

div#news-1 .gk_news_highlighter_interface a.next {
float:right;
background-position:-26px 50%
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position:-39px 50%
}

</style>


5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>. 

Bagi blog yang menggunakan template dari template designer, cari kod </footer>


6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>

 Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer>

 <div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = &quot;no&quot;;
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
icon = &quot; &#187; &quot;;
label = &quot;&quot;;
numposts = 30;
home_page = &quot;http://www.jokorowotlogorejo.co.cc/&quot;;
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick[&quot;gk_news_highlighternews-1&quot;] = {
&quot;animationType&quot; : 3,
&quot;animationSpeed&quot; : 200,
&quot;animationInterval&quot; : 2000,
&quot;animationFun&quot; : Fx.Transitions.linear,
&quot;mouseover&quot; : 1};
</script>

7. Edit kod yang di bold dengan warna merah dengan menggantikannya kepada URL blog anda dan juga bilangan post yang hendak dipaparkan.

8. Seterusnya klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, sila edit nilai pada kod yang di bold dengan warna biru pada langkah 4.

width:960px; (Panjang bar)
margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya)

9 . Akhir sekali, jika anda berpuas hati dengan kedudukan bar tersebut, klik Save.

Cara Memasang Breaking News di Blog

 Cara Memasang Breaking News di Blog- Ada yang baru dengan tampilan ! opo jare ! blogspot ! bakalan ! tlogorejo ! kepohbaru ! bojonegoro ! city, blog jelek ini kini dilengkapi dengan breaking news. Breaking news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk  meningkatkan pageview blog. Widget ini berupa judul artikel yang ditampilkan secara bergantian yang terkadang juga di sertai dengan tanggal posting artikel tersebut.... keren kan...?



 Sobat yang tertarik memasang widget ni, silahkan ikuti tutorial berikut.


Cara Memasang Breaking News di Blog

1. Login dulu ke akun blog sobat
2. Klik rancangan --> Edit HTML
3. Letakkan kode berikut di atas kode ]]></b:skin>
.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipmrqwxIE8Kn0KugjWudMUjcpg-y_gxFee9vPaIphMxBzDaVzP5C55jCRWCLEubueeMKUlTGUHfkNMbMwZsSFDbPylmPG77O8KHmUkhtX4kH4DzJ1gDI3uuYythEv2BESLulpilDt8dA0/s1600/BRK+NW.png) no-repeat top left;width:979px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 979px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}

Catatan :
Sesuaikan kode yang berwarna biru dengan ukuran template blog sobat


4. Kemudian letakkan kode berikut 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>

5. Cari kode <div id='header-wrapper'> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.
<div class='newspic'>
<div style='float:left;width:979px;padding:1px 0 6px 130px; 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://www.jokorowotlogorejo.co.cc/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 style='clear:both;'/>
</div>

Catatan :
Ganti http://www.jokorowotlogorejo.co.cc dengan url blog sobat.
Semoga artikel ini bermanfaat untuk menghias blog anda,terima kasih...

6. Klik save dan lihat hasilnya

Cara Pasang Background Berubah-ubah


Cara Pasang Background Berubah-ubah - Siapa pun senang jika mempunyai blog yang keren dan tampil elegan, kali ini saya akan berbagi tentang background yang bisa berubah-ubah sesuai minat pengunjung nya, keren kan!! awalnya saya menemukan ini ketika saya  cari-cari raferensi di google, akhirnya dapat juga, 

Di blog nya si chumienk dapat dilihat backgroundnya bisa di ganti sesuai selera dan saya putuskan untuk berbagi dengan teman-teman, buat yang ingin melihat contohnya silahkan melihat di di blog satunya ini Study Forever untuk selanjutnya langsung yosh gan, gak basa basi lagi dah. 


Langkah 1

Login Blogger Dashboard >> Design 
>> Add A Gadget >> HTML/Javascript.

Copy kode di bawah ini dan pastekan di dalam content html:
<div class="widget-content">
<center><blink style="color: rgb(0, 102, 0);"><span style="font-weight: bold; color: rgb(0, 153, 0);">Change Background of This Blog!</span></blink><br /><br />
 <center><select onchange="document.body.style.background = this.value;this.style.background = this.value;" name="DADcbgc" title="Change Background Image" width="185" height="30">
<option value="url() repeat center center fixed" />None
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKREZ4R9QW-1cC6YmV_76DdQrJC7LSNsuNztVmobOGJruqek9w2l8xE0M7ujppNfM2eSzddfzhlgNtqQzwfJsAzYMWAG2SKwuzlwTbafvu3eYwv-FcKVlFdg6GHOnD3_gyCDC-uTUqwEhv/s1600/naruto_sage_of_six_path-naruto+manga+prediction-narutokar.blogspot.com.jpg) repeat center center fixed" />Naruto Full cakra
<option value="url(http://cdn.indowebster.com/www42.indowebster.com/7dd2ae51f4b0cb792d3a435dc953f5cc_thumbnail.gif) repeat center center fixed" />Red Matrix
<option value="url(http://yahyarezpectors.files.wordpress.com/2011/01/sharingan_wheel_by_neronin2.gif) repeat center center fixed" />Sharingan
<option value="url(http://data0.eklablog.fr/hinata/mod_article214242.gif) repeat center center fixed" />Sharingan 2
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3RjT_skbiKsDy5CokYgpcIhgfhK1MU2-7TIl4ejKz5kvJ5EdrVsNc7h8EoAodJHUYhMbR5tZ97PMr1HGkuhPmNcnmhJ8lxPSVVmsFS5z3jQ1L_Kn-L6C3G03RUXWEVXcKRM50ckqFRPI/s1600/death-note%25284%2529.jpg) repeat center center fixed" />Death Note 1
<option value="url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGjp9Q1gVe02nDKzyKe6yLlgUVJdNPLBDaDVtTx7Iyb92eY1QS61VUS-nM9rtpKUIEU4CINqDkkUfmkbi6XqR8E7UxwqENw-Y2SBfTtNsivSJ7FbTJj_og5q0jFjmejWiQg-bI9Ptl-_Bj/s1600/naruto_360_kyuubi.jpg) repeat center center fixed" />Kyubi
<option value="url(http://i469.photobucket.com/albums/rr57/dragonknight0000039/ae/death20note20L.jpg) repeat center center fixed" />L Lawliet 1
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGDGbOqsnI/AAAAAAAAEwI/FWAbOOZu2go/DAD1.jpg) repeat center center fixed" />Deidara
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC7eK9TtI/AAAAAAAAEvw/Ly5L0UA3D4s/DADcloud.gif) repeat center center fixed" />Akatsuki Cloud
<option value="url(http://lh4.googleusercontent.com/_GaKwmMcf4N4/TZGC4NlmmMI/AAAAAAAAEvk/cma5mtW-beU/DADbg2.JPG) repeat center center fixed" />Rikimaru
<option value="url(http://lh6.googleusercontent.com/_GaKwmMcf4N4/TZGC24bJuCI/AAAAAAAAEvg/O1mDH3LU91w/DADbg0.jpg) repeat center center fixed" />Yu-Gi-Oh!
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZGC7UA67RI/AAAAAAAAEv0/ehJ-oez_akU/DADbluematrix.gif) repeat center center fixed" />Blue Matrix
<option value="url(http://lh5.googleusercontent.com/_GaKwmMcf4N4/TZF_GOqPR_I/AAAAAAAAEsY/iGS-uTIVDs8/DADbg.JPG) repeat center center fixed" />Hidden Leaf
<option value="url(http://lh3.googleusercontent.com/_GaKwmMcf4N4/TZGC9O9ZNUI/AAAAAAAAEv8/Idjb8xIrw60/DADgreenmatrix.gif) repeat center center fixed" />Green Matrix
</select></center></center>
</div><br/><center><a href="
http://www.jokorowotlogorejo.co.cc/2012/05/cara-pasang-background-berubah-ubah.html target="_blank">Pasang Seperti Ini</a></center>

klik Save.
Jreeng"..., jadi kan!!! sekarang blog agan uda bisa dipilih-pilih background nya, untuk judul nya boleh kosong atau boleh juga di isi.

NB:   Sebenarnya tampilan pemilhan background dapat ditambahkan atau dikurangi sesuai keinginan agan, yang jelas tinggal kreatif-kreatif aja ngeditnya, atau dapat memahami sedikitlah.
  
semoga bermanfaat tutorial mengenai Cara Pasang Background Berubah-ubah...
 
silahkan tambahkan komentar anda jika terdapat hal yang kurang jelas dengan tutorial ini...

Cara Menghilangkan Tampilkan Semua Posting Dengan Label


Tampilan Tampilkan Semua Posting Dengan Label terkadang atau bahkan selalu muncul pada blog yang Tampilkan Posting Dengan Label nya belum dihilangkan,  pada saat mencari kategori pada tersebut. Misalnya: postingan-postingan blog kita masuk ke dalam label atau kategori CSS, lalu saat dicari pada bagian atas  akan terdapat tulisan Tampilkan posting dengan label CSS, Tampilkan semua posting. 
tampilkan posting dengan label

Cara Menghilangkan Tampilkan Posting Dengan Label tidaklah sulit, mudah saja jika anda sudah mengetahuinya, maka dari itu  jika anda berniat untuk mencobanya silahkan ikuti tutorialblog singkat ini seperti dibawah:
>> Masuk ke account blogger
>> Masuk ke menu rancangan/ design
>> Pilih Edit Html
>> Centang Expand Widget template

Cari kode yang mirip seperti dibawah ini (biar mudah untuk pencarian, tekan Ctrl+F) :
 <b:includable id='status-message'><b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>


Atau cari kode yang mirip seperti ini:
 <b:includable id='status-message'>
  <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <p class='pagetitle'>Archive for <data:blog.pageName/></p>
  </b:if>
  <b:if cond='data:navMessage'>
    <p class='pagetitle'><data:navMessage/></p>
  </b:if>
</b:includable>

Setelah ketemu, lalu  hapus saja kode-kode tersebut dan ganti dengan kode dibawah ini:
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>

</b:includable> 
Setelah selesai, lalu Simpan. Semoga postingan Cara Menghilangkan Tampilkan Posting Dengan Label kali ini bisa membantu dan bermanfaat untuk anda.

Membuat background musik/lagu otomatis di blog dengan yahoo media player


Membuat background musik/lagu otomatis di blog dengan yahoo media player

Selain memasang lagu youtube di blog , kita dapat juga menggunakan ccript media player yahoo untuk memutar lagu otomatis saat blog dibuka oleh pengunjung. Lagu yang dipasang bisa dalam format mp3 maupun    lagu yang tersedia di website youtube. Dalam contoh postingan ini akan digabungkan fasilitas yang disediakan oleh yahoo dan live streaming video/lagu youtube.


Berikut script yang bisa dipasang di blog (untuk memasang script lagu di sidebar bisa masukkan script di bawah ini ke gadget html/javascript )



<script type="text/javascript">
var YWPParams =
{
autoplay: true,
volume: 0.5,
defaultalbumart: 'http://somedomain.com/path/someimage.gif'
};
</script>
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js">
</script>


<a href="http://www.youtube.com/watch?v=4XWYefe9EzI">Massachusetts</a>
<a href="http://www.youtube.com/watch?v=N42bYLoaZho">Bee Gees</a>


Tampilan yahoo media player bisa dilhat di bawah ini



Catatan:
Untuk mengganti lagu cukup ganti http://www.youtube.com/watch?v=4XWYefe9EzI,dengan url lagu yang lain yang tersedia di situs youtube
Anda juga bisa memasang / menambahkan lagu hingga belasan /puluhan lagu dengan menambahkan script seperti di bawah ini dengan mengganti url lagu:
script lagu :
<a href="http://www.youtube.com/watch?v=N42bYLoaZho">Bee Gees</a>

Ganti  (http://www.youtube.com/watch?v=N42bYLoaZho) dengan url lagu yang akan dijadikan lagu background blog.



Sumber.... http://artikelkomputerku.blogspot.com/

Twitter Delicious Facebook Digg Stumbleupon Favorites More