Cara Membuat Animasi Joged Pada Blogger

 

Panduan blogger yang akan membahas, menjelaskan serta membantu sobat blogger semua khususnya yang masih awam ataupun masih di bilang pemula dalam dunia blog. Panduan blogger pemula yang akan menerangkan tentang Cara Membuat Animasi Joged di Blog. Untuk membuat/menambahkan gambar di blog memang sangat mudah, tapi untuk bisa menampilkan gambar animasi yang bisa bergerak (animasi) bisa dibilang tak mudah juga. Karena membutuhkan sebuah kode HTML yang bisa membuat gambar tersebut bisa bergerak.

Gambar animasi yang akan diterangkan dalam panduan blogger kali ini adalah gambar animasi yang bisa berjoged.Memang gambar animasi ini tidaklah terlalu penting untuk dipasang pada sebuah blog.Gambar animasi ini hanya untuk sebuah hiasan di blog atau dalam hal ini hanyalah untuk mempercantik tampilan sebuah blog.Dan jika sobat blogger tertarik dengan gambar animasi "Joged" ini silahkan lihat beberapa contoh gambar animasi serta kode HTML nya di bawah ini :

Gambar 1:

<center><a href="http://febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-011.gif" border="0" alt="picture widgets"></a></center>

Gambar 2:

<center><a href="http:/febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-013.gif" border="0" alt="picture widgets"></a></center>

Gambar 3:

<center><a href="http://febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-020.gif" border="0" alt="picture widgets"></a></center>

Gambar 4:

<center><a href="http://febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-021.gif" border="0" alt="picture widgets"></a></center>

Gambar 5:

<center><a href="http://febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-017.gif" border="0" alt="picture widgets"></a></center>

Gambar 6:

<center><a href="http://febridriver.blogspot.com/" target="_blank">
<img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-002.gif" border="0" alt="picture widgets"></a></center>

Gambar 7:

<center><a href="http://febridriver.blogspot.com/" target="_blank">
<img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-005.gif" border="0" alt="picture widgets"></a></center>

Gambar 8:

<center><a href="http://febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-008.gif" border="0" alt="picture widgets"></a></center>

Gambar 9:

<center><a href="http://febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-006.gif" border="0" alt="picture widgets"></a></center>

Gambar 10:

<center><a href="http://febridriver.blogspot.com/" target="_blank"><img src="http://widgia.com/wp-content/uploads/2009/10/dancing-icon-015.gif" border="0" alt="picture widgets"></a></center>

Berikut ini cara memasangnya di Blog :

1. Login ke Blogger
2. Klik Tata Letak
3. Klik Tambah Gadget
4. Pilih opsi HTML/Java Script
5. Klik Simpan

Demikian tentang Cara Membuat Animasi Joged di Blog, semoga bermanfaat.



Sumber : Febri D'river

Read More ->>

Cara membuat "Related Post" di Bloger

Panduan Blogger untuk blogger pemula. Panduan blogger yang akan membahas dan menjelaskan tentang Panduan Cara Membuat "Related Post" di blog. Related post atau Artikel Terkait pada blog mempunyai peran penting untuk blog itu sendiri dan akan memudahkan para pengunjung blognya untuk menemulan artikel yang mungkin mereka anggap menarik. Dalam hal ini penggunaan Related Post atau Artikel Terkait memang membantu pengunjung blog dan juga membantu pemilik blog itu sendiri, sehingga setiap artikel / postingan dapat dimungkinkan untuk dibaca oleh pengunjung.

Berikut Panduannya / langkah" nya :

1. Login  ke akun blog sobat
2. Setelah login, klik EDIT HTML
3. Centang "Expand Widget Templates"
4. Sekarang cari kode </head> ,untuk pencarian termudah silahkan sobat tekan Ctrl + F pada keyboard komputer sobat.
5. Copy dan Paste kode di bawah ini persis diatas kode </head> :

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
 height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZaM_YUJDFk8o1PbsriNrNM3V9qxDTSkKHLs4tLoxHj7jI8kAWFGp3IU2GD1xtK-EuOz7dyp5aFSrVXgyZ80nTXAXxa3lElGuZGi2bKu4r4uoEJLCzuzNoyoDD5aQgqpQ6E6u8AUbKGbY/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

   

       

    8.   Langkah selanjutnya sobat cari kode :

       <div class='post-footer-line post-footer-line-1'>

     9.   Cara mencarinya sama seperti panduan no. 4

   10.   Jika sobat tak menemukan kode tersebut,silahkan sobat cari kode:

       <p class='post-footer-line post-footer-line-1'>  

   11.   Copy dan Paste kode di bawah ini dan letakkan di bawah kode di atas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

 
  12. Simpan, dan lihat hasilnya.....

Semoga Bermanfaat.......

Read More ->>

Cara Membuat Posting Blog Terpisah

Bagaimana sudah jelas bukan tentang kolom postingan terpisah? kalau sudah jelas mari kita lihat langkah-langkah pembuatannya

1. Login ke blogger
2. masuk ke Tata Letak => Edit HTML
3. lalu cari kode di bawah ini
   
   .post {
   ..............
   }
4. titik-titik di atas menunjukan ada kode yang terdapat di dalamnya kenapa saya tidak menunjukan-nya? karena setiap template kode yang dimaksud berbeda-beda
5. setelah ketemu ganti dengan kode di bawah ini
   
   .post {
   background:#fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXt78YM0k0OsmmCwBphJsX8EvGgCWGpvczuwds5vFD4J2XPQm_DFMo_MNZkhT9bomR4lfPfJgaohipnKVlyNGETm5PQja7AWRTiexcjYHNAAsA4a_oUz9kgv5o2oCly8Qa5PH4EXaq48_/s1600/Sidebar.jpg") repeat-x bottom;
   border:5px solid #000;
   margin:0 0 0.5em;
   padding:0.5em;
   color:#000;
   font-family:"Trebuchet MS";
   -moz-border-radius-topleft: 20px;
   }
   
   
   Penjelasan :
   
   • fff : menunjukan warna latar belakang dari kolom postingan, sobat bisa menggantinya dengan kode warna yang lain
   • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqXt78YM0k0OsmmCwBphJsX8EvGgCWGpvczuwds5vFD4J2XPQm_DFMo_MNZkhT9bomR4lfPfJgaohipnKVlyNGETm5PQja7AWRTiexcjYHNAAsA4a_oUz9kgv5o2oCly8Qa5PH4EXaq48_/s1600/Sidebar.jpg : menunjukan gambar yang berada di bawah kolom postingan, sobat juga dapat menggantinya tapi dengan ukuran yang kecil
   • 000 : menunjukan dari warna garis pada kolom postingan terpisah, sobat bisa ganti akan tetapi harus di sesuaikan dengan warna main-wrapper agar terlihat terpisah
   • 000 : warna dari tulisan pada klolom postingan, sobat dapat mengganti dengan warna yang berlawanan dengan warna latar belakang agar terlihat jelas
6. Setelah itu sobat dapat menyimpannya dan melihat hasilnya

Dengan modifikasi tampilan Kolom Postingan memungkinkan pengunjung blog sobat dapat menikmati dan mendalami postingan yang sobat tulis. Semoga bermanfaat dan salam bogging.

Sumber : Febridriver.blogspot.com

Read More ->>

Cara membuat sidebar terpisah

 

Banyak cara untuk membuat kotak sidebar blog kita kelihatan menarik. Contohnya adalah seperti tips kali ini. Terkadang sidebar blog perlu ditata dengan baik, supaya pengunjung blog kita merasa nyaman dengan konten-konten yang ada dalam sidebar blog kita. Selain ditata dengan bagus, tentu kita harus memberi tampilan yang menarik pula pada sodebar blog kita. Nah untuk menampilkan sidebar yang lebih menarik lagi, anda perlu mengikuti langkah-langkah di bawah ini:

1. Login ke blogger.com
2. Pada dasbor blog Sobat, silahkan berkunjung ke Edit HTML.
3. Jangan Lupa Expand Widget Templates
4. Kemudian silahkan cari kode yang mirip seperti kode berikut ini.

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

(kode di atas berlaku buat template minimal) Jika sudah ketemu, silahakan pisah kedua konten kode di atas menjadi seperti kode di bawah ini.

.sidebar .widget{
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Jadi untuk terlihat terpisah maka ada yang harus dimodifikasi yaitu kode pada Sidebar . Widger dimodifikasi menjadi seperti kode di bawah ini
:

.sidebar .widget{
background:#fff;
border:1px dotted #6c6b6b;
margin:0 0 1.5em;
padding:0.5em;
}

Semoga Bermanfaat......., Di like y....

Read More ->>

Cara membuat Breaking News

Salam sejahtera untuk Sobat blogger semua. Setelah sekian lama saya tidak update artikel kali ini saya akan share kepada Sobat semua bagaimana cara membuat breaking news di blog. Breaking news pada blog berfungsi untuk memperindah tampilan, terlihat lebih profesional, dan bisa jadi menambah link in yang akan berefek baik pada nilai SEO blog Sobat. Mungkin ada diantara Sobat blogger yang belum pernah liat breaking news itu kaya apa, silahkan lihat screenshootnya.

Langkah-Langkah Cara Membuat Breaking News di Blog :

1. Login ke akun blog Sobat, kemudian masuk ke Dashboard
2. Setelah itu masuk ke menu Template
3. Klik Edit HTML, kemudian klik Lanjutkan, dan centang (checkclist) Expand Widget Template.
4. Cari kode ]]></b:skin> (gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian)
5. Setelah itu, salin kode dibawah ini tepat diatas kode ]]></b:skin> tersebut
   

   .newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4C1JORW6VwKSRQwt2LCLf-VTgatn0lQ7cXi9zyhPoUx6zi8QIfSscMacPgZ86-HOWa6dyUkVEDogZe4Iv2wVpecLFmq2K4OBWednx5evNFas1JE9ELrC-12vRsFbsXvs81EoXImT-Us/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
   .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;}
   .news a:link, .news a:visited{color:#fff;text-decoration:none;}
   .news a:hover {color:#ddd;text-decoration:underline;}

6. Setelah itu cari lagi kode </head>
7. Jika sudah ketemu, salin kode dibawah ini tepat diatas kode </head> tersebut
   

   <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>

8. Kemudian cari kode yang biasa dipakai untuk menu navigasi seperti kode dibawah ini
   

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

9. Jika sudah ketemu kode navigasi blog Sobat (atau kalaupun tidak ada Sobat bisa cari kode </head>) kemudian letakan kode dibawah ini tepat dibawah kode tersebut
   

   <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(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
   cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://septia-mujizat.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 style='clear:both;'/>
   </div>

10. Ganti tulisan yang berwarna merah dengan alamat (url) blog Sobat, kemudian simpan template blog Sobat

Nah, itu dia cara membuat breaking news di blog yang dapat saya sampaikan pada Sobat. Sekian saja postingan saya kali ini, mohon maaf apabila masih banyak kekurangannya.

Read More ->>