Tutorial

Selasa, 18 Desember 2012

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 :

Login ke akun blog sobat
Setelah login, klik EDIT HTML
Centang "Expand Widget Templates"
Sekarang cari kode </head> ,untuk pencarian termudah silahkan sobat tekan Ctrl + F pada keyboard komputer sobat.
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 ->>

Minggu, 16 Desember 2012

Cara Membuat Posting Blog Terpisah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaCGh2f37g2qnRWJXieb0IFu3Zi07DVCi35FvINOXoWcgJbCzR21BUFWXLUC7Y5u3Z5p6UxHJI-GDV6fh63-Lj5hMjwWJfETQVZw6aJQJRNmZRWUAwhWac1yGF7Pft5fiwkjLfWbORrZ-_/s1600/www.blogger.com+-+2010-05-17+-+10-24-28.png

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

Login ke blogger
masuk ke Tata Letak => Edit HTML
lalu cari kode di bawah ini

.post {
..............
}
titik-titik di atas menunjukan ada kode yang terdapat di dalamnya kenapa saya tidak menunjukan-nya? karena setiap template kode yang dimaksud berbeda-beda
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
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 :

Login ke akun blog Sobat, kemudian masuk ke Dashboard
Setelah itu masuk ke menu Template
Klik Edit HTML, kemudian klik Lanjutkan, dan centang (checkclist) Expand Widget Template.
Cari kode ]]></b:skin> (gunakan kombinasi tombol Ctrl + F untuk mempermudah pencarian)
Setelah itu, salin kode dibawah ini tepat diatas kode ]]></b:skin> tersebut
.newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}
.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;}
Setelah itu cari lagi kode </head>
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>
Kemudian cari kode yang biasa dipakai untuk menu navigasi seperti kode dibawah ini
<div class='menu horizontal'>
...........................................
...........................................
</div>
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("example1", "example1class", 4000, "_new")
cssfeed.addFeed("Creating Website", "http://septia-mujizat.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>
Ganti 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 ->>

Button Size :	Small (50px)	Medium (67px)	Large (83px)
Position :	Left	Center	Right
Include jQuery Plugin(Do you want to add it?) :

Tutorial

Kamis, 20 Desember 2012

free Download Smadav Antivirus 2013

Cara Membuat Scroll To Top Button

Gratis Download Video Pad

Free Audio Converter

Convert audio to iPod, iPhone, iPad

MP3 to iTunes

Join audio files

Export audio from video

This is Free Audio Converter

Soon! Burn Audio CD and MP3 discs

Cara Membuat Animasi Joged Pada Blogger

Selasa, 18 Desember 2012

Cara membuat "Related Post" di Bloger

Minggu, 16 Desember 2012

Cara Membuat Posting Blog Terpisah

Cara membuat sidebar terpisah

Cara membuat Breaking News

Langkah-Langkah Cara Membuat Breaking News di Blog :

Popular Posts

Archive

Labels

Visitor

	Simple CSS3 animated Scroll Top Button