belajar dan berbagi

Buat komentar facebook di blogger

Buat komentar facebook di blogger. Komentar facebook berguna untuk memudahkan pengunjung memberikan komentar pada posting yang ada, tanpa harus login melalui blogger. jadi cukup login dengan facebook, pengunjung dapat memberikan komentar pada posting.
berikut cara Buat komentar facebook di blogger:
1. login ke blogger
2. Template > Edit html
3. cari kode :
<div class='comments' id='comments'>

tambahkan kode berikut dibawahnya:
<h4>Komentar Anda</h4>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%'><fb:comments expr:href='data:post.url' num_posts='5' width='600'/></div>
Buat komentar facebook di blogger

4. Simpan template. semoga bermanfaat

Buat komentar facebook di blogger

Membuat artikel terkait dengan thumbnail

Membuat artikel terkait dengan thumbnail. Artikel terkait dengan thumbnail biasanya terletak di bawah posting. saat posting dibuka, bisanya tepat di bawah posting terlihat bacaan: Artikel terkait, related post, artikel lainnya, baca juga atau apa saja. Pada posting berikut adalah tentang cara Membuat artikel terkait dengan thumbnail, artikel terkait tersebut hanya menampilkan gambar tanpa judul artikel atau penggalan artikel, namun jika kursor diletakkan diatas gambar akan muncul judul posting.


Membuat artikel terkait dengan thumbnail
cara Membuat artikel terkait dengan thumbnail

berikut cara Membuat artikel terkait dengan thumbnail:


1. Login ke blogger
2. Pilih template > edit html
3. Cari kode : ]]></b:skin>
4. tambahkan kode ini diatasnya:
LIHAT KODE Membuat artikel terkait dengan thumbnail



5. cari lagi kode : <div class='post-footer-line post-footer-line-3'>
6. tambahkan kode berikut di bawahnya: LIHAT KODENYA Membuat artikel terkait dengan thumbnail




Pengaturan jumlah tampilan
var maxresults=9; adalah jumlah penampakan, jumlah penampakan ini bisa disesuaikan dengan keinginan

7. Simpan dan lihat hasilnya.


Membuat artikel terkait dengan thumbnail

Membuat random post hanya thumbnail tanpa edit html

Membuat random post hanya thumbnail tanpa edit html. kita lihat dulu gambarnya, kalau bagus silahkan di coba
Membuat random post hanya thumbnail tanpa edit html
Membuat random post hanya thumbnail tanpa edit html
Langsung saja kita coba Membuat random post hanya thumbnail tanpa edit html
1. Login ke blogger
2. Pilih tata letak
3. Tambahkan Gadget
4. HTML/JavaScript
5. Masukkan kode berikut:
<style text-type="CSS">
img.label_thumb {
float:left;
padding:3px;
background:#CCC;
border:1px solid #A4A4A4;
width:70px;
height:70px;
margin-right:2px;
margin-top:2px }

img.label_thumb:hover {
opacity:0.8;
filter:alpha(opacity=80);
-moz-opacity:0.80;
-khtml-opacity:0.8 }
</style>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

<script type='text/javascript'>var numposts =9 ;</script>
<script type="text/javascript" src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

6. SImpan dna lihat hasilnya

Membuat random post hanya thumbnail tanpa edit html

Membuat random post sederhana

Membuat random post sederhana. Langsung saja kita gambar random post sederhana dibawah ini:
Membuat random post sederhana
Membuat random post sederhana
seperti itulah random post yang akan kita buat. berikut cara membuat random post sederhana:
1. Login ke blogger
2. Pilih tata letak
3. Tambahkan Gadget
4. HTML/JavaScript
5. Masukkan kode berikut:

<style>
#random-posts{border:1px solid #aaa;font-size:10pt;margin:auto;padding:0}#random-posts li{background:url(http://goo.gl/FvA0Rj) no-repeat 0 -67px;border-bottom:1px solid #ccc;height:36px;line-height:1.5em;list-style-type:none;margin:0;overflow:hidden;padding:6px 10px 10px 3.5em !important}#random-posts img{display:none}
#random-posts{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1))},#random-posts
</style>
<div id='random-posts'><script type='text/javaScript'>var rdp_numposts=15;var rdp_snippet_length=0;var rdp_info='no';var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts"></script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};</script><script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry);if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://goo.gl/hRi75m"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" title="'+rdp_posttitle+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts"></script>')}</script></div>

6. Klik simpan dan lihat hasilnya
membuat random post sederhana

Membuat recent post slideshow blogger

Membuat recent post slideshow blogger. recent post slideshow berfungsi untuk menampilkan posting terbaru dengan animasi slide show. biasanya recent post slideshow di letakkan diatas posting, ada juga yang meletakkan pada widget sebelah kanan / kiri posting.

Membuat recent post slideshow blogger

Berikut cara Membuat recent post slideshow blogger.
1. Login ke blogger
2. Pilih tata letak
3. Tambahkan Gadget
4. HTML/JavaScript
Masukkan kode berikut, lalu simpan :


Hasilnya akan seperti ini :
Membuat recent post slideshow blogger

Blogspot maintenance mode

blogspot maintenance mode. Maintenance mode adalah adalah sebuah modus pemeliharaan untuk mencegah pengguna selain administrator melihat dan menggunakan situs pada saat pemeliharaan berlangsung, dan Maintenance Mode bukan untuk mencegah pengguna mengakses selama waktu pemeliharaan berlangsung.
Pada saat Maintenance Mode diaktifkan pengguna masih dapat mengakses / mengunjungi situs Anda, tetapi hanya akan melihat pesan bahwa situs tersebut masih dalam perbaikan.

Biasanya maintenance mode sering kita jumpai pada website berplatform CMS wordpress, Joomla, prestashop, osclass dll dengan menambahkan add on pada plugin. Lalu bisakan blogspot/blogger menampilkan maintenance mode. Jawabannya bisa.

Blogspot maintenance mode
Blogspot maintenance mode


1. Login ke blogger
2. Pilih tata letak
3. Tambahkan Gadget
4. HTML/JavaScript
5. Masukkan kode berikut:

<style type="text/css">

html {
height: 100%;
background: url(http://goo.gl/9otxnK) no-repeat center 50%;
margin: 0;
}
body {
display: none;
http://goo.gl/O3lJIA
}

</style>


6. Simpan dan lihat hasilnya



blogspot maintenance mode

Imsakiyah wilayah Jambi dan sekitarnya

Imsakiyah wilayah Jambi dan sekitarnya

Jadwal imsakiyah untuk daerah jambi tahun 2014 sekarang sudah ada yang versi apk / android yang dibuat oleh salah satu pengembang android daerah jambi yaitu RITEKNO. Jadwal imsakiyah ini diberi nama Jadwal Imsakiyah Prov. Jambi berikut skrensutnya
Imsakiyah wilayah Jambi dan sekitarnyaImsakiyah wilayah Jambi dan sekitarnyaImsakiyah wilayah Jambi dan sekitarnya


Jadwal Imsakiyah Prov. Jambi ini dilengkapi dengan pilihan beberapa kabupaten yang berada di jambi diantaranya :
- kota jambi
- kuala tungkal (tanjung jabung barat)
- tanjung jabung timur
- muara jambi
- muara tebo
- muara bungo
- kerinci
- sungai penuh
- batanghari
- merangin
- sarolangun

Jadwal Imsakiyah Prov. Jambi ini dapat dimiliki secara gratis, bisa didapatkan di SINI

Imsakiyah wilayah Jambi dan sekitarnya

Bikin Popular post hanya tampil gambar

Bikin Popular post hanya tampil gambar
Bikin Popular post hanya tampil gambar
Bikin Popular post hanya tampil gambar. Menu popular post sebenarnya telah disediakan pada widget blogger, namun kita juga dapat membuatnya sesuai dengan keinginan diantara popular post hanya tampil gambarnya saja tanpa text

1. Login ke blogger
2. buat terlebih dahulu poplular post dengan cara : Tambah Gadget > Entri Populer Tambahkan > hilangkan conteng cuplikan lalu Simpan
Bikin Popular post hanya tampil gambar

3. Pilih template
4. Edit html
5. Cari kode : ]]></b:skin> Letakkan kode berikut diatasnya:
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:3px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-0deg) ;-webkit-transform: scale(1.3) rotate(-0deg) ;-o-transform: scale(1.3) rotate(-0deg) ;-ms-transform: scale(1.2) rotate(-0deg) ;transform: scale(1.3) rotate(-0deg);}
.GoogleGenius-SEO {font-family: verdana; text-align: justify; color: #fff; font-size: 2px; line-height: 0.9; display: inline-table;}

6. Kemudian car lagi kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

ganti kode tersebut dengan kode dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<b:if cond='data:post.thumbnail'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
<b:else/>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi2_C81LJrQu2zwec-jtAmszhBq4pVDnp-wBiJ1JQa-gQv_W2pd3DIHpZxHScjLxuX3npr9Ah9ZttzbLI3vGXEGWi_8_pg0s9q0eY1XJl_Fq_p4NslIPuaQg3iS6xcG-uGNbg35v88IsA/s1600/no+image.jpeg'/>
</b:if>
</a>
</div>
</div>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

7. Simpan template, lihat hasilnya.



Your Keywords Here

Bikin read more otomatis

Readmore / baca selanjutnya berfungsi untuk memperpendek artikel yang ada pada home page / halaman utama.
banyak bikin read more / baca selanjutnya yang telah di posting pada website/blog diantaranya bikin read more otomatis.
Bikin read more otomatis

berikut cara bikin read more otomatis:
1. Login ke blogger
2. Pilih template
3. Edit html
4. Cari kode </head>, letakkan kode berikut diatasnya:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>


5. Cari lagi kode <data:post.body/> ganti dengan kode berikut:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><b>Baca</b> &gt;&gt;&gt; <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>

bikin read more otomatis

Menyembunyikan Header pada blogger

Menyembunyikan Header pada blogger
Header biasa berisi tentang Title dan Deskripsi. Secara default, header akan ada pada setiap template. header juga dapat disembunyikan jika kita tidak ingin header itu ada dan dapat menggantinya dengan banner iklan ppc, atau iklan apa saja.
Contoh header:
sebelum disembunyikan:
Menyembunyikan Header pada blogger

setelah disembunyikan,:


Menyembunyikan Header pada blogger
pada contoh diatas adalah header yang telah disembunyikan dan telah pasang banner ppc. agar banner dan ukuran blog tidak banyak kosong, maka ukuran blog dengan banner bisa diseseuaikan dengan keinginan.

berikut cara menyembunyikan header.
1. Login ke blogger
2. Pilih tempate
3. edit html
4. cari kode:
.header-outer {
lengkapnya:
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;}
5. tambahkan kode
display:none;
6. Hasilnya:

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
display:none;
}

7. Simpan template, dan lihat hasilnya

Menyembunyikan Header pada blogger

Cara install osclass di localhost

cara install osclass di localhost.

Cara install osclass di localhost
logo osclass
Osclass merupakan sebuah script yang disedikana oleh salah satu organisasi bernama OSCLASS S.L. yang berada di Barcelona.
Osclass adalah merupakan script php yang dapat digunakan untuk membuat dan mengelola sendiri situs iklan baris secara gratis. dengan menggunakan script ini, Anda dapat menyediakan iklan secara gratis pejualan barang, real estate, pekerjaan, mobil dan lain-lainnya. sepertinya tidak perlu panjang lebar tentang osclass, untuk lebih jelasnya silahkan lihat DEMO

Pada posting terdahulu kita telah bahas tentang Cara Install Osclass dengan auto installer, dan pada posting kali ini kita coba lagi bagaimana cara install osclass di localhost / cara install melalui upload pada cpanel
Sama seperti posting terdahulu, untuk install Osclass kita juga di harusken telah memiliki domain dan hosting tentunya. perlu diulangi lagi bagi yang belum memiliki domain dan hosting bisa di dapat di sini (Domain DISINI dan hosting DISINI)

Jika keduanya telah tersedia, maka yang harus di lakukan adalah:
- Download osclass pada situs resminya DISINI
- Upload semua file ke hosting, tepatnya di root /public_html
- Biar lebih cepat uploadnya, gunakan filezilla
- Tunggu upload sampai selesai, upload bisa memakan waktu 30 detik atau lebih tergantu kecepatan internet yang digunakan.
- Jika upload sudah selesai, buka url domain anda pada browser, lalu halaman error akan terlihat dengan kalimat: There doesn't seem to be a config.php file. Osclass isn't installed. Need more help?

Cara install osclass di localhost

- Lanjutkan dengan klik install
- Halaman berikutnya adalah sebuah halaman yang menyatakan selamat datang dari Osclass
Welcome

All right! All the requirements have met:
PHP version >= 5.x
MySQLi extension for PHP
GD extension for PHP
Folder oc-content/uploads exists
oc-content/uploads folder is writable
Folder oc-content/downloads exists
oc-content/downloads folder is writable
Folder oc-content/languages folder exists
oc-content/languages folder is writable
Root directory is writable
config-sample.php file exists
Allow my site to appear in search engines like Google.
Help make Osclass better by automatically sending usage statistics and crash reports to Osclass.

lihat gambar berikut:
Cara install osclass di localhost

klik Run Install

Cara install osclass di localhost
silahkan isi formulir "Database information"
- Dilanjutkan dengan mengisi formulir berikutnya berupa data :
Information needed
Admin user
Username
Password
A password will be automatically generated for you if you leave this blank.
Contact information
Web title
Contact e-mail
Location
Choose countries/cities where your target users are located
seperti inilah formulirnya:
Cara install osclass di localhost
- Jika sudah selesai lanjutkan dengan klik Next
bersambung.....................
Cara install osclass

Cara Install Osclass dengan auto installer

Cara Install Osclass dengan auto installer

Osclass adalah sebuah script yang dapat di gunakan untuk membuat website advertising, website periklanan, iklan baris. Dan osclass juga dapat di setting/diganti thema menjadi seperti Toko Bagus, Berniaga.com dan lainnya
Cara Install Osclass dengan auto installer
Cara Install Osclass dengan auto installer
Cara Install Osclass dengan auto installer
Untuk meng-install osclass tentunya kita telah mempunyai domain, baik itu domain premium maupun domain gratisan. untuk domain premium dengan akhiran dot com, net, cc, co, web.id bisa di beli DISINI.
Dan setelah memiliki domain, tentunya harus mempersiapkan sebuah hosting. Untuk hosting juga ada yang berbayar dan aja juga yang gratisan. jika ingin menggunakan hosting gratisan bisa Daftar DISINI. salah satu kelebihan hosting gratis pada link diatas adalah telah menyediakan Autoinstaller Osclass dan banyak lagi Autoinstaller yang lainnya.

Jika domain dan hosting telah siap, maka kita bisa mulai install Osclass. Berikut cara install Osclass

1. Login ke cpanel
2. Pilih Website
3. Auto Installer
4. e-Commerce and Business

Cara Install Osclass dengan auto installer

5. Klik pada Logo Osclass, kemudian akan muncul sebuah halaman formulir yang harus kita isi, berikut formnya
Cara Install Osclass dengan auto installer
6. Jika formulir telah di isi dengan benar, lalu klik Install, dan silahkan tunggu hingga penginstallan selesai.
Cara Install Osclass dengan auto installer
7. Apabila telah install osclass telah selesai maka kita akan mendapatkan sebuah email notifikasi pada alamat email yang telah kita buat. seperti inilah isi email tersebut:
Cara Install Osclass dengan auto installer
8. Setelah mendapatkan email notifikasi, admin bisa login ke website yang telah di buat melalui http://namadomainsampeyan/oc-admin
9. Semoga bermanfaat.
10. Jangan lupa komentar pada kolom di bawah
Tag: cara bikin website seperti toko bagus, cara bikin website seperti berniaga, cara bikin website media iklan
Cara Install Osclass
Back To Top