Pages

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Senin, 29 Juli 2013

Cara memasang iklan ditengah-tengah postingan secara otomatis

Halo sobat blogger. Kali ini saya ingin berbagi trik yang begitu bermanfaat untuk para blogger yang mengandalkan PPC(PayPerclick) untuk mendapatkan uang diblognya masing-masing. Nah untuk mendapatkan uang pada PPC tersebut dibutuhkan orang untuk mengklik iklan pada PPC tersebut. Salah satu cara meningkatkan klik pada link iklan adalah dengan cara menempatkannya di area yang strategis, salah satunya ditengah-tengah postingan, nah bagaimana caranya agar iklan tersebut muncul secara otomatis di tengah setip postingan yang telah kita buat. jadi gak perlu sobat nempelin iklan pada saat setiap postingan itu dibuat.

Caranya:
1. Login pada blogger.com
2. Lanjut ke menu template
3. Pilih Edit HTML
 


4. Lalu cari code <data:post.body/> 
(Jika menggunakan auto readmore, pilih code yang ketiga)
 

5. Jika sudah ketemu, ganti code <data:post.body/>  dengan code dibawah ini

<div expr:id='"iklan1" + data:post.id'></div> <div style="clear:both; margin:10px 0"> <b:if cond='data:blog.pageType == &quot;item&quot;'>
Letakan kode iklan di sini      
</b:if></div><div expr:id='"iklan2" + data:post.id'><data:post.body/></div><script type="text/javascript">var obj0=document.getElementById("iklan1<data:post.id/>");var obj1=document.getElementById("iklan2<data:post.id/>");var s=obj1.innerHTML;var t=s.substr(0,s.length/2);var r=t.lastIndexOf(" ");if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}</script>

6. Jika sudah simpan dan lihat hasilnya.

Semoga setelah menggunakan tutorial Cara memasang iklan ditengah-tengah postingan secara otomatis yang saya berikan dapat meningkat penghasilan kalian diblog.

Selamat mencoba ^_^

Share:

Cara Memasang Robots.txt Yang Cepat Terindex Google

Robots.txt itu berperan sangat besar dalam pengindexan suatu blog terhadap search Engine seperti Google. Oleh karena itu , sebaiknya kalian memasang Robots.txt diblog kalian. Akan tetapi , dalam memasang Robots.txt harus dengan hati-hati ya , karena kesalahan sedikit dalam memasang robots.txt pada blog dapat mempengaruhi blog tersebut . Tetap tenang , karena yang akan saya berikan kali ini adalah Robots.txt yang benar . 

Cara mengoptimalkan robots.txt agar cepat terindex Google


Silahkan ikuti tutorial berikut :
1. Login Blogger.
2. Masuk ke menu Setelan.
3. Pilih Prefensi Penelusuran dan pilih yang robots.txt Khusus.
4. Aktifkan konten robots.txt khusus ? pilih YA.
5. Masukkan kode robots.txt nya.
6. Ini code robots.txt nya.
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://url.blogspot.com/feeds/posts/default?orderby=UPDATED
*ganti tulisan berwarna biru dengan alamat blog kalian


7.Setelah itu , silahkan klik Simpan Perubahan.
8. Robots.txt yang semula nonaktif , menjadi aktif.
Selamat mencoba, dan semoga berhasil :)
Share:

Cara Memasang Iklan di Bawah Judul Postingan Blogger

Cara Memasang Iklan di Bawah Judul Postingan Blogger/Blogspot - Jika sobat adalah seorang blogger dan ingin menghasilkan uang dari blognya, maka sobat pasti ingin memasang iklan di blog sobat untuk mendapatkan sebuah penghasilan, tapi tahukah anda jika peletakan iklan sangat mempengaruhi penghasilan sobat. untuk itu hari ini ie-usa.blogspot.com akan membagikan cara memasang iklan diposisi terbaik, yaitu dibawah judul postingan.


Memasang iklan dibawah judul postingan adalah cara terbaik untuk mendapatkan penghasilan yang banyak daripada memasang iklan diposisi lain, karena letak iklan yang dibawah judul adalah posisi yang biasanya pengunjung pertama kali lihat, nah dengan adanya iklan diposisi yang setrategis memungkinkan pengunjung untuk lebih tertarik mengklik iklan yang kita tampilkan di blog kita.

dan berikut ini adalah langkah langkah memasang iklan dibawah judul postingan blogger/blogspot :

1. Silahkan Login ke akun Blogger sobat
2. Jika sudah silahkan masuk ke menu Template >> Lalu Klik Tombol Edit HTML
3. Setelah masuk ke editor template, silahkan cari kode <data:post.body/> untuk mempermudah pencarian, silahkan tekan tombol ctrl+f pada browser yang sobat pakai.
4. Setelah ketemu silahkan parse kode iklan sobat di situs ini (NB: Buat sobat yang belom tahu, setelah sobat masuk ke situs parser, sobat tinggal pastekan kode iklan sobat di kolom yang tersedia, lalu klik tombol parse maka sobat akan mendapatkan kode iklan yang telah ter-parser, dan kode itulah yang nantinya akan kita gunakan di step selanjutnya)
5. Agar iklan muncul dibawah postingan dan sejajar dengan paragraf awal silahkan pastekan kode di bawah ini tepat diatas kode <data:post.body/> :

<div style='float:left'>
      LETAKAN KODE IKLAN YANG SUDAH DI PARSE DISINI
</div>
6. Jangan lupa ganti 'LETAKAN KODE IKLAN YANG SUDAH DI PARSE DISINI' dengan kode iklan yang sudah sobat parse sebelumnya, dan save. maka iklan akn muncul di bawah postingan dan sejajar dengan paragraf awal.

dan hasilnya adalah seperti ini :


Tambahan : Jika sobat ingin merubah posisi iklan dari kiri ke kanan sobat dapat merubah kode <div style='float:left'>  dengan <div style='float:right'>

Saya kira cukup sekian tips seputar cara memasang iklan di bawah judul postingan, semoga postingan ini membantu sobat blogger dalam penempatan posisi iklan yang baik!
Share:

Cara Memasang Lagu/Musik Di Blog

Cara Memasang Lagu/Musik Di Blog adalah materi yang akan saya berikan kali ini dalam kategori tips blogging, mungkin banyak blogger yang ingin membuat nyaman pengunjungnya dengan cara memasang musik di blognya, hal ini bertujuan agar pengunjung lebih kerasan di blog kita.
Tapi, anda harus benar-benar tepat dalam memilih lagu yang akan sobat pasang di blog sobat, jangan sampai pengunjung blog sobat malah merasa risih akan adanya lagu yang sobat putar di blog sobat! ok deh, buat sobat-sobat yang ingin tau cara memasang lagu/musik di blog sobat! pastikan sobat mengikuti dengan pasti urutan langkah-langkahnya di bawah ini :
1. Ok, untuk yang pertama kali, sobat harus memilih lagu terlebih dahulu dari sebuah server yang menyimpan file lagu tersebut, sobat dapat mengupload file mp3 ke server sobat sendiri (jika punya hosting) atau sobat dapat menuju ke situs soundcloud.com disana anda dapat mencari lagu sesuai keingan sobat! dengan cara mengetikkan judul dan artis penyanyi di kolom pencarian seperti di bawah ini :
2. Setelah Mengetikkan di kolom pencarian, maka sobat akan mendapatkan hasil pencarian berupa-lagu-lagu yang telah ada di situs soundcloud, seperti di bawah ini :
Tak ada salahnya mengecek lagunya terlebih dahulu sebelum memasang lagu di blog sobat! g lucu kan kalau lagu yang kita pasang ternyata kualitas/judul sama lagunya tidak sesuai! sobat dapat mengeceknya dengan mengklik tombol play yang ada di hasil pencarian.
3. Setelah sobat menemukan lagu yang pas, silahkan sobat ambil script dengan cara klik tombol share :
Kemudian silahkan sobat pilih yang widget code, dan silahkan sobat copy code yang ada di dalamnya
4. Setelah sobat mendapatkan kode script di atas, silahkan sobat masuk ke akun blogger yang akan sobat pasang lagu di blognya.
5. Setelah sobat login ke dashboard blog sobat, silahkan sobat masuk ke layout/tata letak, kemudian klik add widget/tambahkan gadget >>kemudian silahkan pilih yang HTML/Java script. kemudian pastekan code script yang telah sobat dari langkah ke empat tadi ke dalam box! kemudian save, dan lihat blog sobat!
6. Pada settingan deffaultnya, musik yang dipasang di blog tidak akan autoplay, jika sobat menginginkan musiknya autoplay, silahkan tambahkan code"&amp;auto_play=true&amp;show_artwork=true" di bagian paling belakng URL file mp3, untuk lebih jelasnya silahkan lihat gambar di bawah ini.
kemudian save, dan lihat blog sobat! maka musik yang sobat pasang di blog sobat akan autoplay! selamat mencoba! dan di bawah ini adalah contohnya!



Demikian tutorial yang dapat saya berikan di blog ie-usa, semoga postinagn kali ini bermanfaat! dan saya harap bagi sobat yang meng copy paste artikel ini untuk mencantumkan source dari blog ie-usa! jangan full copas yah! semoga berhasil ^^
Share:

Selasa, 09 Juli 2013

Menghilangkan Tulisan Tampilkan Semua Posting

Tampilan Sebelum di Hapus 

Menghilangkan Tulisan Tampilkan Semua Posting | "Tampilkan posting dengan label blablabla | Tampilkan Semua Posting" Adalah tulisan yang sering muncul bila sobat telah mengklik lebel pada blog.
Mungkin bagi sebagian orang ( termasuk saya ) tulisan "Tampilkan posting dengan label blablabla | Tampilkan Semua Posting" membuat pemandangan blog jadi tidak bagus. Jadi kali ini saya akan membahasnya agar tulisan tersebut tidak muncul lagi. Berikut Cara Menghilangkan Tulisan Tampilkan Semua Posting.

  • Login Ke Blogger
  • Pergi ke Template >> Edit HTML >> Conteng kotak expand widget template
  • Cari kode ]]></b:skin> Untuk mempermudah gunakan F3 atau Ctrl+F
  • Copy lalu Pastekan kode berikut tepat di atas kode ]]></b:skin>
.status-msg-wrap{
display:none;
}
.status-msg-body{
display:none;
}
.status-msg-border{
display:none;
}
  • Simpan
Share:

Cara Menghilangkan Jumlah Nomor Postingan Pada Label Blog

Cara Menghilangkan Nomor Pada Label Blog -Label yang telah disediakan oleh blogspot tentunya secara otomatis dibelakang label blog ada nomornya. nah,,, untuk menghilangkan nomor pada label blog ternyata cukup mudah. jika sobat ingin menghilangkan nomor atau angka pada label blog perhatikan petunjuk dibawah ini:

1. Masuk Blogger Dasboard > Template > Edit HTML
2. Backup template
3. Silahkan sobat cari kode berikut pada kode template milik anda, untuk lebih mudah (cntrl+F):
    (<data:label.count/>)
4. Jika sobat sudah menemukan kode yang seperti di atas, silahkan hapus/delete.
5. Jika sobat menemukan 2 kode , Pilih kode yg pertama (diatasnya)
6. Klik tombol Simpan Template.

    Selesai. Silahkan lihat hasilnya !



Apabila anda sudah melakukan langkah di atas, maka dapat di pastikan angka yang menyertai Label akan menghilang entah kemana.

Selamat mencoba !
Share:

Cara Mudah Membuat Breaking News di Blog

Cara Mudah Membuat Breaking News di Blog - Apakah sobat sudah mengenal breaking news pada blog? breaking news artikel terbaru di blog memang nampaknya sekarang para blogger memilih untuk beralih ke widget seperti ini (Breaking news) karena hemat tempat dan juga tidak besar beban loading blognya jika dibandingkan dengan widget Entri terbaru di sidebar slider ke bawah yang bisa memakan 4-5 elemen.http://cacinx-ams.blogspot.com/


Lebih jelasnya, Breaking news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk  meningkatkan pageview blog seperti pada gambar diatas. Widget ini berupa judul artikel yang ditampilkan secara bergantian yang terkadang juga di sertai dengan tanggal posting artikel tersebut.
Pada Kesempatan Kali ini saya akan share Cara Membuat Breaking News Terbaru di Blog, karena desain yang ada sangat keren dan terbaru. jika sobat ingin memasangnya diblog, ikuti tutorial dibawah ini:

Cara Memasang Breaking News di Blog

1. Login Ke Blogger.
2. Pilih Template.
3. Sobat download full template terlebih dahulu (Tampilan Baru).
4. Klik "Edit HTML".
5. Setelah itu sobat cari kode ]]></b:skin> menggunakan f3 atau CTRL+F, lalu sobat letakkan kode di bawah ini persis di atas kode ]]></b:skin>.
/* News Ticker Wrapper
---------------------------------------------*/ 
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCbH5YrVDNEnXloC3U17e7A19mmOas2tw2oBc_mVZBdVfboW3jEQZHNi74suRISIwXnqMs2ChhySYGeaU4AWBmZj-mZW5s5g9Tw3XaXgDI2w2QG3s38mzK5CXmtHaQPz6PWEG5IK45pQg/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. Masih dalam posisi Edit HTML, selanjutnya sobat cari kode </head>, dan letakkan kode di bawah ini persis 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>

7. Selanjutnya sobat cari kode Navigasi, seperti di bawah ini:

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

8. Selanjutnya sobat letakkan kode di bawah ini di bawah kode navigasi yaitu setelah kode </div> sebagai penutup navigasi.
<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://softwaremaniapc.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>

9. Jika di letakkan di bawah kode navigasi akan menjadi seperti ini:
 <li><a href='/'>Home</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/02/contact-me.html'>Contact Us</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/02/tukar-link.html'><blink>Tukar Link</blink></a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Komputer'>Komputer</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html'><blink>Pasang Iklan</blink></a></li></ul>
<div class='navsearch'>
<div style='float:right;padding:1px px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
</form>
</div>
</div>
</div>
</div>
<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://softwaremaniapc.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. Klik "Save template" dan selesai. Lihat Hasilnya.
Share:

Cara Mudah Memasang Tombol Like di setiap Postingan

Cara Mudah Memasang Tombol Like di setiap Postingan - Kali ini kang zain share tentang tombol like di setiap postingan blog. Fungsi Tombol Like adalah blog kita langsung terhubung dengan jejaring sosial Facebook, sehingga apabila ada seseorang yang mengklik tombol like maka secara otomatis postingan diblog kita ajan tershare ke beranda orang tersebut. 

Dengan demikian Tombol Like adalah cara alternatif untuk mempromosikan blog kita ke khalayak ramai. bagaimana sudah jelas? nah,,, jika pada postingan sobat belum ada tombol like, bisa memasangnya sekarang juga. selengkapnya ikuti petunjuk dibawah ini:

Kurang lebihnya akan seperti dibawah ini :

Cara Mudah Memasang Tombol Like di setiap Postingan


- Cara Memasang Tombol Like di Setiap Postingan :
- Login Blogger
- Masuk ke Menu Template Kemudian Edit HTML
- Sobat Cari Kode Seperti dibawah ini (lebih mudah ctrl+F) :
    <data:post.body/>
- Letakan kode berikut tepat dibawah kode <data:post.body/>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:310px; height:31px;'/>
- Simpan Template.

Keterangan:

Jika dalam pencarian kode <data:post.body/> sobat menemukan lebih dari 1 kode, maka pilih saja kode yang kedua.

Sekian sulu postingan Kang Zain tentang Cara Memasang Tombol Like di Setiap Postingan, semoga dapat bermanfaat bagi sobat :)
Share:

Cara Mudah Membuat Like Button Facebook di Blog

Cara Mudah Membuat Like Button Facebook di Blog - Kemarin Kang Zain sudah posting Cara Mudah Memasang Tombol Like di setiap Postingan, nah,, kali ini temanya masih sama yaitu like facebook pada blog atau postingan. namun ini beda dengan postingan saya yang kemarin, karena like facebook satu ini akan menyatu otomatis pada bawah postingan sobat. untuk lebih jelasnya seperti gambar Like Button Facebook di Blog dibawah ini: 
Bagaimana sudah jelas sobat? untuk Membuat Like Button Facebook di Blog cukup mudah, jika sobat ingin memasangnya ikuti tutorial dibawah ini :

Cara Mudah Membuat Like Button Facebook di Blog


1. loggin ke blogger
2. sobat pilih dashboard >>> template >>>edit html
3. lalu sobat cari kode  <data:post.body/>  ( gunakan ctrl+f  untuk mempermudah pencarian )
kalau kode seperti diatas terdapat lebih dari satu, cari kode lengkapnya seperti ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
Keterangan :
Jika kode diatas tidak ada jangan menyerah, kode <data:post.body/> biasanya kode nomor 3 yang ditemukan lebih dari satu, gunakanlah satu persatu dalam langkah berikutnya ( saya pernah mencoba satu persatu dan akhirnya berhasil di salah satu kode yang ketemu lbih dari satu tadi )

4. Jika sudah ketemu, letakkan kode dibawah ini tepat dibawah kode <data:post.body/> atau <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
5. Jangan lupa sobat SAVE jerih payah sobat.
6. Lihat hasilnya...
Sekian dulu Cara Mudah Membuat Like Button Facebook di Blog semoga bermanfaat. Good Luck
Share:

Cara Membuat Bismillah Otomatis Di awal Postingan Blog

Cara Membuat Bismillah Otomatis Di awal Postingan Blog - Tips dan trik kali ini buat blog sobat yang ingin memasang lafaldz bismillah di awal postingan, ini cocok banget buat sobat yang beragama islam untuk membuat widget satu ini yaitu bismillah di awal postingan blog, setelah sobat pasang bismillah di awal postingan blog, maka secara otomatis akan berada di awal postingan blog. sebenarnya sudah lama untuk dipublikasikan, tapi para pembuat blog baru setiap harinya membanjiri dunia maya. 
Nah,,, Jika sobat ingin menambah bismillah di awal postingan Blog, ikuti petunjuk dibawah ini: Cekidot !!!!
Cara Memasang Bismillah Di Awal Postingan
1. Buka blog anda
2. Pilih Template => Edit HTML
3. Cari kode <data:post.body/> jika sudah ketemu.
4. Lalu letakkan kode Bismillah dibawah ini, tepat diatasnya
<div style='text-align: center;'><span style='font-size: large;'><span style='font-family: Traditional Arabic;'>?&#1616;?&#1618;?&#1616; ????&#1616; ???&#1617;&#1614;?&#1618;??&#1616; ???&#1617;&#1614;?&#1616;??&#1616;</span></span> </div><br/>

Atau Sobat bisa juga memasang kode dibawah ini, Bedanya pada tampilan font :
<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>?&#1616;?&#1618;?????????????????&#1616; ??&#1616;???&#1614;&#1617;?&#1618;?&#1614;?&#1616; ???&#1614;&#1617;?&#1616;??</span></span></span></div><br/>
Sekian dulu sobat Cara Membuat Bismillah Otomatis Di awal Postingan Blog tentunya sangat menarik buat blog sobat, hehehe Selamat Mencoba Widget Bismillah Di awal postingan Blog.
Share:

Cara Memasang TV Online di Blog

Cara Memasang TV Online di Blog - Tips tutorial blog kali ini Cara Memasang TV Online di Blog, apakah blog sobat memiliki tv online? jika belum ada, sobat bisa langsung memasangnya, nah,, sebelum mesasang sobat harus perhatikan untuk memasang tv online di blog dengan tempat yang tepat,, saya sarankan taruhnya pada postingan aja,,, Bagaimana sudah jelas? 
Lo sudah jelas, mari kita simak tutorial Cara Memasang TV Online di Blog dibawah ini:
1.Masuk akun blog sobat.
2.Sobat Klik tata letak >>>>  Tambah widget html/javascript
3.Copas kodenya dibawah ini dan letakan pada kolom kosong javascriptnya untuk judul kosongkan saja.
 <!-- TV Online Buat Blog Copy Scriptnya Dari Sini -->
<div style="border: 10px solid #868e89; height: 558px; overflow: hidden; width: 450px;">
<div style="margin-left: -34px; margin-top: -227px; text-align: center;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="860" width="100%"><param name="wmode" value="transparent" /><param name="src" value="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" /><param name="scale" value="noscale" /><param name="quality" value="high" /><param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" /><param name="menu" value="true" /><param name="devicefont" value="false" /><param name="allowscriptaccess" value="sameDomain" /><param name="allowfullscreen" value="true" /><param name="scroll" value="auto" /><a href="http://blogseo-tutorial.blogspot.com"></a><embed width="100%" height="860" type="application/x-shockwave-flash" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" wmode="transparent" scale="noscale" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="true" devicefont="false" allowscriptaccess="sameDomain" allowfullscreen="true" scroll="auto" /></object></div>
</div>
<!-- Sampai Sini -->

4.Aturlah width dan height dulu jika dirasa kurang cocok ukurannya dan sekarang lihat hasilnya dulu.
-width: 450px: panjang Lebar, bisa sobat ganti sesuai keinginan sobat.
-height: 558px: Tinggi kotak tv online, bisa sobat ganti sesuai kebutuhan
Peringatan !!!!
Seperti saran saya diatas, Sebaiknya di pasang pada post artikel caranya; sobat buka entri baru masuk pada mode html bukan compose lalu pasteukan script-nya. pratinjau dulu aturlah ukurannya oleh sobat jika masih dirasa kurang pas. 
Share:

Cara Memasang Jumlah Postingan dan Komentar di Blog

Cara Memasang Jumlah Postingan dan Komentar di Blog - Menampilkan jumlah postingan dan komentar di blog ternyata mudah. sebenarnya widget satu ini sudah lama dikembangkan, namun sudah tentu jika yang melihat para blogger pemula pasti bingung dan bertanya-tanya bagaimana cara mudah menampilkan jumlah postingan dan komentar di blog? akhirnya saya posting buat sobat blogger semua yang ingin menampilkan jumlah postingan dan komentar pada sidebar blog atau pada blog.

Sobat bisa memasang jumlah postingan dan komentar pada sidebar, footer atau tempat yang lainnya dengan mudah, karena cukup dengan menambah kode jumlah postingan dan komentar. jika sobat tertarik bisa langsung simak tutorial dibawah ini:
Cara Mudah Memasang / Menampilkan  Jumlah Postingan dan Komentar di Blog

1. Login terlebih dahulu di blog sobat
2. Masuk ke menu Tata Letak >>>Tambah Gadget >>>pilh HTML atau JavaScript
3. Masukan kode dibawah ini dalam kotak HTML atau JavaScript
<script type="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http://softwaremaniapc.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script type="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
<script src="http://softwaremaniapc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

4. Simpan

Keterangan:
Sobat ganti warna url BIRU diatas dengan alamat blog sobat.
Share:

Cara Cek Kecepatan Loading Blog

Cara Cek Kecepatan Loading Blog - Bagaimana Cara Cek Kecepatan Loading Blog?? itu yang sering ditanyakan teman-teman disaat edit blog untuk mempercepat loading. banyak hal yang membuat loading blog lemot alias lambat yaitu dengan memasang beberapa animasi di blog. sobat blogger harus pandai-pandai memasang animasi yang nantinya dari efek itu dapat memberatkan loading blog.
Jika berat loading blog kita bisa diminimalisir untuk secepat mungkin, kenapa tidak?? mungkin tampilan blog lebih simple dan sedikit gambar untuk menjadi pilihannya. Ada beberapa cara untuk mengukur kecepatan loading blog untuk dioptimasi diantaranya trik yang akan saya share kali ini dalam mengecek loading blog menggunakan website tool kecepatan loading yaitu:
1. PageSpeed Insight From Google Klik DISINI 
2. Website Speed and Performance Optimization by GTmetrix Klik DISINI
3. Pingdom Tools by Pingdom Klik DISINI
Keterangan:
1. PageSpeed Insight From Google
Ini adalah tool besutan google yang dapat mengukur seberapa besar performa blog kita. Dengan tool ini kita bisa meneliti masalah-masalah apa saja yang mempengaruhi performa kecepatan blog kita, mulai dari High Priority sampai Low Priority, selain itu tool ini juga menyediakan fitur Experimental Rules yaitu kamu akan diberikan masukan-masukkan yang berguna untuk meningkatkan kecepatan loading blog kamu
2. Website Speed and Performance Optimization by GTmetrix
Ini tool dari GTmetrix, fungsinya sama saja seperti PageSpeed Insight, melalui tool ini kita bisa melihat lamanya waktu blog kita untuk dimuat 100%, ukuran halaman blog kita (dalam kb), serta total request ketika blog kita diakses. Situs ini juga memberi masukan / saran untuk meningkatkan performa blog kita, tapi sayangnya kalau sobat tidak mendaftar menjadi pro member maka akan diberi batasan dalam menggunakan situs ini, yaitu hanya boleh 20 kali test dalam sehari.
3. Pingdom Tools by Pingdom
Tool ini fungsinya sama saja seperti GTmetrix, hanya saja di pingdom kita tidak diberi batasan mengetest speed blog dalam satu harinya tidak seperti di GTmetrix yang hanya boleh 20 kali dalam sehari. Dan fitur khusus pingdom ini kita bisa memilih mau mengetest menggunakan server Amsterdam, Dallas, atau New York.
Share:

Cara membuat kolom scroll pada blog archive

?Trik cara membuat scroll pada arsip blog, cara membuat scroll pada arsip blog (blog archive), cara membuat kolom blog archive dengan scroll. apapun itu judulnya pasti hasilnya tetap sama.

cara membuat kolom scroll pada blog archive ini tergolong cara untuk mempercantik blog, pada umumnya arsip blog itu puanjang buanget. hehehe namun bisa dipendekkan tanpa merubah subtansinya. ok dengan membuat efek scroll widget jadi ringkas dan keren. sobat blogger juga bisa membaca postingan saya kemarin Cara Membuat Scroll Pada Kolom Komentar sobat akan lihat hasilnya betapa menarik dan ringkas menggunakan efek scroll. lebay...... hahaha
Ini cara membuat kolom scroll pada blog archive, sobat ikuti tutorialnya. OK !!! cekidot......
Cara/tutorial 1
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian sobat Cari kode berikut <div id='ArchiveList'> atau ArchiveList agar lebih mudah gunakan ctrl+F. 
6. Jika sudah ketemu Selanjutnya tambahkan kode yang berwarna merah seperti di bawah ini:
<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'/>
</div>
</b:includable>
Keterangan :
  • Untuk menemukan kode <div id='ArchiveList'> atau ArchiveList maka teman-teman harus memasang Blog Archive nya terlebih dahulu dengan cara : klik Design/Rancangan >> Page Element >> Add a Gadget >> Blog Archive >> Save. Jika teman-teman sudah memasang Blog Archive nya maka langsung saja mencari kodenya tadi.
  • Harap disesuaikan saja kodenya, karena tidak semua templates sama,
  • 200px : Adalah Untuk merubah tinggi kolom scrollnya, silahkan ganti pada kode height:
  • Jika sudah klik Save templates dan lihat hasilnya. 

Cara/tutorial 2

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Widget Templates,
3. Cari kode berikut :


    <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

4. Lalu Terapkan Seperti di bawah ini.....
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:200px;'>
    <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'/>
    </div>
    </b:includable>

5. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
 200px adalah tingginya, dan kalian  bisa ubah seseuai ke inginann kalian..
Share:

Selasa, 04 Juni 2013

Cara Membuat Widget Entri Populer Keren dan Cantik

Cara Membuat Widget Entri Populer Keren dan Cantik - Sejauhmana sobat Mempercantik blog ? banyak cara untuk modifikasi blog sobat, ini bisa menjadi salah satu pilihan. entri popular kalau dari google tentunya biasa saja,, tanpa ada variasi  yang menarik dan keren. dengan tambahan script pada artikel ini sobat dapat Membuat Widget Entri Populer Keren dan Cantik.

Nah,,, waktunya ke TKP Cara Membuat Widget Entri Populer Keren dan Cantik , untuk lebih lanjut nih,,,, baca tutorialnya :
1. Login ke blog anda
2. Klik Tata letak >> Tambah Gadget >> Entri Populer >> tampilkan entri populer hanya judulnya saja. Jangan menggunakan tubnail dan cuplikan. Atur jumlah judul posting yang akan dimunculkan.
3. Klik simpan
4. Selanjutnya klik Template
5. Klik Edit Html >>klik lanjutkan
6. Cari kode  ]]></b:skin> Jika sudah ketemu kopi paste kode css berikut ini tepat diatas kode ]]></b:skin>
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#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,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#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:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#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:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
7. Sobat Preview dahulu, setelah berhasil baru di SAVE

Sekian Dulu Sobat  Cara Membuat Widget Entri Populer Keren dan Cantik semoga bermanfaat. Good Luck Tunggu Update dari kang Zain. Ok
Share:

Senin, 03 Juni 2013

Cara Memasang Like Facebook Melayang di Blog

Cara Memasang Like Facebook Melayang di Blog* - Artikel tutorial Cara Memasang Like Facebook Melayang di Blog tentunya sudah tidak asing lagi, like box facebook yang biasanya terdapat pada sidebar sekarang bisa sobat modifikasi blog menjadi like facebook melayang di Blog , ini menjadi daya tarik tersendiri oleh blogger dan membuat pengunjung klik like facebook kita.
Syaratnya mudah kok sob,,, yang penting sobat sudah punya punya halaman fanpage facebook, lalu Ambil kode Script Likebox yang sudah disesuaikan dengan blognya. Bagi yang belum punya fanpage facebook monggo silahkan dibuat dulu Cara Membuat Like Facebook Pada Blog. jika sudah lengkap syaratnya, sekarang lihat tutorialnya....... meluncur !!!!!


1. Login Seperti biasa ke akun blog sobat.
2. Pada halaman Dashboard blog pilih >> Tata Letak >> Lalu Klik Add a Gadget atau Tambah Gadget.
3. Scroll ke bawah sedikit >> Lalu pilih Widget HTML/Javascript
4. Jika sudah Copy Kode di Bawah ini dan Paste di dalam Widget kolom HTML/Javascript,,, 
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute; /* IE6 */
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background: #f5fffa;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"},
1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
Kode Script Facebook Likebox DISINI !!!
</center>
<center><div class='widget-content'>
<a href="http://softwaremaniapc.blogspot.com/search/label/Modifikasi%20Blog"><div style="background: #1e90ff; border:2px solid #ffd000;border-radius:10px;padding:10px;margin:10px;font-size:16px;"><strong>Modifikasi Blog<strong></strong></strong></div></a></div></center>
<!-- HTML End -->
<a class='close' href='http://softwaremaniapc.blogspot.com'>&times;</a></div>

Keterangan :
Untuk warna biru bisa sobat sesuaikan dengan blog sobat. Ok
5. Jangan lupa disave
Jika semuanya sudah dilengkapi dan dipasang maka hasilnya seperti ini sob,,, :



Sobat blogger ingin membuat like box facebook melayang dan cukup simple kang zain juga punya tipsnya,
Cara Memasang Like Facebook Melayang
Caranya sama diatas sob,, cuma sobat ganti kode diatas dengan kode dibawah ini:
<!-- Script kotak like Facebook Melayang mrrainboow-xp -->
<style type="text/css">
#topbar{
position:absolute;
padding-left:260px;
background-color: transparancy;
width: 300px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("topbar");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<table border="1" bgcolor="FFFFFF">
<tr>
<td>
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2GTMpxh_ijOK-FIJ3sR0zw30qwUhC-TsMOtR_Ks6JASXNz4vmhphWFCgfHQTWxpBX7gX9pagDX2EEEPpmmQIWePzx0sigJ_LKIlGi1A_9IbrXEiMFztC5G5dV02ed0BBavAfGHBVqGZCB/s1600/close3.png" /></a></div>
<center>
<div style="background: #fff;">

Kode Script Facebook Likebox Here !!!
</div>
</center></td>
</tr>
</table>
</div>
<!-- End Like Fan Page Melayang MrRainboow-xp -->

Keterangan:
 Kode Script Facebook Likebox Here !!! :sobat ganti dengan dengan kode script yang sudah diambil dari fanpage facebook yang sudah dibuat sebelumnya.
Share:

Rabu, 29 Mei 2013

Cara Membuat Artikel Terkait dibawah Postingan Blog

Cara Membuat Artikel Terkait dibawah Postingan Blog - Cara Membuat Related Post Dengan Gambar Berjalan - Cara Membuat Artikel Terkait Dibawah Posting Blog - Cara Membuat Artikel Terkait dengan Gambar - Cara Membuat Artikel Terkait dengan Thumbnail itulah judul -judul dalam pembuatan artikel terkait pada artikel Kang Zain Kali ini. 
Artikel terkait dibawah postingan blog bermacam-macam, mulai dengan scroll, dengan gambar berjalan atau cuma dengan gambar saja,, Ok ... pada kesempatan ini akan dibawas tuntas sebagai pilihan sobat dalam membuat artikel terkait. hehehe

Cara Membuat Artikel Terkait dibawah Postingan Blog

1. Login ke Dasbor >> Template (Untuk mengantisipasi terjadinya kesalahan Back Up dulu template blog sobat.)
2. Edit Template >> Lanjutkan >> Conteng Expand Template Widget
3. Cari kode  <data:post.body/> Untuk mempermudah gunakan F3 atau Ctrl+F. Biasanya akan ada 3 kode seperti itu, jika memang benar pilih kode yg ke-2 
4. Letakan Kode berikut tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;ardi33&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </div> </b:if>
 5. Jangan Lupa di SAVE

 Cara Membuat Related Post Dengan Gambar Berjalan


 1. Login ke Blogger dengan menggunakan akun anda
2. Lalu masuk ke Rancangan
3. Lalu Edit HTML
4. Centang Expand Template Widget
5. Jangan lupa untuk mendownload dulu template anda. dan kalau ada kesalahan bisa dikembalikan kesemula
6. Kemudian cari kode </head> (untuk mempermudah pencarian silahkan tekan CTRL + F pada keyboard)
7. Copy kode dibawah ini dan letakan tepat diatas kode </head>
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <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: #585858;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:#FFFFCC;
    }
    #related-posts a:hover{
    color:#000000;
    }
    #related-posts a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script src='http://sundaboy.googlecode.com/files/relatet%20post.txt' type='text/javascript'/>
    </b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->


8. Selanjutnya cari lagi kode yang mirip dengan kode dibawah ini
    <div class='post-footer-line post-footer-line-1'>


9. Lalu Copy dan pastekan kode dibawah ini tepat dibawah kode diatas
    <!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
    <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>
    <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_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
    <h3><b>Artikel Terkait</b></h3>
    <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=8;
    var relatedpoststitle=&quot;&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script></marquee>
    </div><div style='clear:both'/>
    </b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    </b:if>
    </b:if>
    <!-- Marquee Nobi Related Posts with Thumbnails Code End-->

10. Simpan template dan lihat hasilnya



Cara Membuat Artikel Terkait dengan Gambar

 Cara Membuat Artikel Terkait dengan Gambar :

   1. Login Blogger
   2. Masuk Menu Template - Edit HTML - Lanjutkan
   3. Centang pada Expand Template Widget
   4. Cari kode </head> Gunakan tombol CTRL + F untuk mempermudah pencarian.
   5. Lalu Copy kode berikut dan letakan tepat diatas kode </head>
    <!--Start Related Posts-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    float:center;
    text-transform:none;
    height:90%;
    min-height:90%;
    padding-top:0px;
    padding-left:8px;
    }
    #related-posts h2{
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    font-family: Rockwell,Georgia,Serif;
    margin-bottom: 0.8em;
    margin-top:0em;
    padding-bottom:0em;
    }
    #related-posts a{
    color:white;
    }
    #related-posts a:hover{
    color:white;
    }
    #related-posts a:hover {
    background-color:#080;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMS3ugAr_Nr7wpI8SHuk_eBpx2I-aI5eThfItxmrdhI5Bfog_hm-KooOGXvvvNTpI4-HdB_ZpmfRpBrcHMvuV7t0CyRwz95T_iFjfmqAqs24zjq7pU7cc2wjI6yRcoJe7Th4XlsA7d-RhJ/s1600/No+Image.jpg&quot;;
    var maxresults=6;
    var splittercolor=&quot;#000000&quot;;
    var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
    </script>
    <script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
    </b:if>
    <!--End Related Post-->


    6. Selanjutnya cari kode berikut ( Jika ada dua kode, pilih bagian yang kedua ) :
    <data:post.body/>

    7. Kalau kode diatas sudah ketemu, Sekarang copy'lah script berikut :
    <!-- Start Related Posts-->
    <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=7&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'/>
    </b:if>
    <!-- End Related Posts-->


    8. Paste'kan kode script diatas tepat dibawah kode :
    <data:post.body/> 
    9. Jika sudah, klik Simpan Template.

Catatan :

Berikut ini adalah kode yang bisa sobat ganti sebelum menyimpan template, gantilah tulisan berwarna merah sesuai keinginan sobat.

    Menampilkan jumlah artikel terkait yang muncul max-results=7
    Judul artikel terkait var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
    Warna Tulisan var splittercolor=&quot;#000000&quot;;

Cara Membuat Artikel Terkait dengan Thumbnail
1. Login ke akun Blogger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Dengan menggunakan CTRL+F atau F3, cari kode berikut: </head>
4. Pastekan kode di bawah tepat di atas kode nomor 3 di atas
    <!--Related Posts with thumbnails Scripts and Styles Start-->
    <!-- remove --><b:if cond='data:blog.pageType == "item"'>
    <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, Times New Roman , 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/AVvXsEgHmMioCEJf3iZu66xZqP7V1g3DO9nkAIElU3IPKTB73aSmWc9hs2A3YQKrVFRI6M30BCSksa8EDhrYOhJ6gRNY5J7yT1iX8LLq2cjXSwes0t2LyrnKo53EhBfLtUqnLdQL47UYRkoFjtk/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://infonetmu.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->

5. Lanjutkan dengan mencari kode <data:post.body/> dan pastekan kode berikut tepat di bawah kode <data:post.body/> tadi
    <!-- 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>
    <!-- Related Posts with Thumbnails Code End-->

6. Simpan template sobat dan lihat hasilnya

Keterangan :
var maxresults = 5 adalah jumlah artikel akan ditampilkan di related post blog sobat.
var relatedpoststitle="Related Posts";  kamu bisa ganti kata Related Posts atau kalimat lain yang sobat inginkan.

Sampai disini sobat, beberapa tutorial lengkap Cara Membuat Artikel Terkait dibawah Postingan Blog semoga bermanfaat. Good Luck Selamat Mencoba.
Share:

Toko-One

Aksesoris Fashion:


Aksesoris Komputer:

Aksesoris Mobil & Motor:

Aksesoris Rambut:


Alat Kantor:

Alat Kecantikan:


Alat Kesehatan:

Alat Olahraga:


Baju:

Buku, CD, Ebook:

Alat Keamanan & CCTV:


Charger dan Power Supply:

Dompet:

Elektronik Lain:

Gadget Komputer:


Handphone & Aksesoris HP:

Jam Tangan:


Kacamata & Softlens:


Kamera Digital & Handycam:

Kamera Tersembunyi:


Kecantikan:


Lampu Hias:

Mainan Anak:

Makanan & Minuman:

Obat & Jamu:

Pelangsing:


Pemutar Musik & Media Player:


Perawatan wajah & kulit:

Perlengkapan Bayi:

Perlengkapan Kerja:


Rumah Tangga:

Sepatu:

Software:

Suplemen Makanan:

Tablet PC & Laptop:


Tas:

Unik dan Hobby:


Tablet PC & Laptop:

Elektronik Lain:

Obat & Jamu:

pcash