Cara Membuat Tampilan Tanggal Hari Ini di Blog

Menampilkan tanggal hari ini di blog, maksudnya suatu cara untuk menampilkan tanggal secara otomatis di halaman blog. Dengan kode javascript, accesories blog ini akan tampil secara otomatis sesuai dengan tanggal dan harinya. 

Nah..buat anda yang pengen pasang tampilan tanggal pada blog, silahkan ikuti petunjuknya.

Login di Blogger

Langsung menuju edit HTML

Kemudian centang Expand Template Widget

Copy paste kode dibawah, dan simpan diantara kode ]]></b:skin> dan </head> :

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/tampil_tanggal.js'></script>

Sehingga hasilnya seperti ini :

]]></b:skin>

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/tampil_tanggal.js'></script> 

</head>

Save Template

Nah..untuk langkah awal sudah selesai. Sekarang langkah berikutnya yaitu memilih penempatan untuk tampilan tanggalnya. Anda bisa menempatkan accesories ini di semua tempat di blog anda. Baik itu postingan, sidebar, atau footer. Yang perlu anda lakukan adalah menuliskan kode berikut :

<script>tampiltanggal();</script>

Nah...selesai deh. 

Catatan : 

Accesories tersebut hanya menampilkan hari, tanggal, bulan dan tahun dalam bahasa indonesia. Jika blog anda memakai bahasa inggris, ganti kode yang no.3 dengan kode berikut 

<script type='text/javascript' src='http://mizwar.blog.googlepages.com/current-date.js'></script>

dan untuk kode yang terakhir (sebelum catatan ini) ganti dengan kode ini

<script>showCurrentDate();</script>

Tambahan

atau bisa juga menggunakan script dibawah ini, yang dipaste dibawah ]]></b:skin>

<script type='text/javascript'>//<![CDATA[var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December");function getthedate(){var a=new Date();var g=a.getYear();if(g<1000){g+=1900}var h=a.getDay();var e=a.getMonth();var b=a.getDate();if(b<10){b="0"+b}var i=a.getHours();var c=a.getMinutes();var j=a.getSeconds();var d="AM";if(i>=12){d="PM"}if(i>12){i=i-12}if(i==0){i=12}if(c<=9){c="0"+c}if(j<=9){j="0"+j}var f="<font color='DDDDDD' face='Arial'>"+dayarray[h]+", "+montharray[e]+" "+b+", "+g+" "+i+":"+c+":"+j+" "+d+"</font>";if(document.all){document.all.clock.innerHTML=f}else{if(document.getElementById){document.getElementById("clock").innerHTML=f}else{document.write(f)}}}if(!document.all&&!document.getElementById){getthedate()}function goforit(){if(document.all||document.getElementById){setInterval("getthedate()",1000)}};//]]></script>

lalu kode ini dipaste dimana saja sesuai selera Anda

<span id='clock'/>

Ok.. selamat mencoba

Cara Membuat Komentar Facebook dan Blogger di Blogspot

Cara Membuat Komentar Facebook di Blogspot. baik sobat blogger semua kali ini saya mau share mengenai cara membuat komentar facebook seperti yang ada di blog saya ini, ehem..dimana saya juga sebelumnya sudah menjelaskan mengenai cara memasang komentar facebook di bawah postingan blog, namun kali ini caranya lebih oke dan top deh , seperti gambar ini .

nah itu gambar yang ada komentar facebook di bawah postingan di blog saya, gimana ? tertarik sobat ? kalau tertarik yuk kita belajar buat itu :

1. pilih rancangan, edit html, centang expand template widget supaya semua kode nimbul, oya jangan lupa back up templatenya, di download full dulu ya buat jaga jaga .

2. oke selanjutnya Ctrl + F pada Keyboard sobat, Lalu cari code di bawah ini :

<div class='comments' id='comments'>

Setelah ketemu Silahkan Copy dan Paste code berikut di bawahnya :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

3. Cari kode </head> lalu letakkan kode dibawah ini diatasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='MASUKKAN ID FB SOBAT BLOGGER' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

 ID fb nya adalah di bagian adres bar profile, contoh misalnya fb saya profilnya ini http://www.facebook.com/berryhardisakha  maka ID saya berryhardisakha , gimana ? mudahkan ?


4. cari kode ini  /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang semirip Mungkin
Lalu Letakkan Code Berikut di Bawah nya

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

oke demikian tutorial saya mengenai membuat komentar facebook blogspot yang dapat berjejer dengan komentar di bawah artikel sehingga tampilannya bisa lebih rapi .

referensi : Kumpulancara.com

Cara Mudah Membuat Read More Otomatis Pada Blogspot Blogger

Bagi anda yang baru saja menekuni dunia blog, tidak perlu khawatir mengenai cara membuat read more pada blog, karena ternyata sangat mudah. Langkahnya cukup praktis dan sederhana, tinggal copykan script code yang ada ke template blogspot anda.

Untuk anda para blogger yang menggunakan cara membuat read more pada blog yang lama yaitu dengan menambahkan tag <span id="fullpost"> dan </span> dalam setiap postingan dianggap terlalu ribet dengan segala keterbatasannya. Nah, pada kesempatan kali ini admin mencoba untuk membagikan cara mudah membuat read more otomatis pada blog.

Sebelum anda mulai untuk mengikuti langkah cara membuat read more pada blog, berikut beberapa hal yang harus anda lakukan:

1. Terlebih dahulu anda harus login dan masuk ke akun blog anda.
2. Langkah kedua mengenai cara membuat read more pada blog yaitu dengan klik rancangan dan klik edit HTML.
3. Kemudian centang Expand Template Widget
4. Untuk memudahkan mencari kode HTML, silahkan tekan CTRL+F.
5. Anda harus mencari kode </head> dan jika sudah ketemu kemudian tambahkan kode di bawah ini tepatnya di atas kode </head>.

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

 

Dalam beberapa langkah cara membuat read more pada blog, jika anda ingin mengubah ukuran read more, anda dapat lakukan dengan mengubah angka-angka pada kode di bawah ini sesuai dengan kebutuhan anda.

summary_noimg = 430; merupakan tinggi potongan artikel tanpa gambar
summary_img = 340; merupakan tinggi potongan artikel dengan gambar
img_thumb_height =100; merupakan ukuran tinggi thumbnail
img_thumb_width = 120; merupakan ukuran lebar thumbnail

Setelah itu dalam langkah cara membuat read more pada blog yang harus anda lakukan adalah mencari kode <div class='post-header-line-1'/> yang pertama. Untuk memudahkan pencarian, fokuskan pencarian pada kode post-header-line-1, lalu ganti semua kode dibawahnya sampai diatas kode <div class='post-footer'> dengan kode dibawah ini (yang ber-background abu abu)..

 

<div class='post-header-line-1'/>

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<div class='post-footer'>

Perlu anda ketahui, kata READ MORE juga dapat anda ubah sesuai dengan keinginan anda. Nah, setelah itu langkah terakhir mengenai cara membuat read more pada blog adalah dengan menyimpan template dan lihat hasilnya. 

Disekitar atas dan dibawah kode inilah kelak kita bisa menaruh kode kode lainnya seperti, tombol like dibawah judul,  share dibawah posting, comment facebook dan lainnya sesuai yang kita inginkan.

Selamat mencoba...

Cara Menghilangkan Link Posting Lama, Posting Baru dan Home

Sebagaiman anda ketahui bahwa saat sekarang ini blogger.com masih menggunakan template dengan dua versi, yaitu versi Template Klasik serta versi Template baru. Salah satu perbedaan antara keduanya adalah versi klasik tidak mempunyai fasilitas link “Posting Lama” atau “Older Posts”, dengan di tambahkannya fasilitas tersebut pada template versi baru maka akan lebih mempermudah para pembaca untuk menemukan artikel yang sudah tidak tampil di halaman depan.

Ternyata memang “lain orang lain juga keinginan”. Di kala orang lain senang dengan kehadiran fasilitas tersebut, ternyata ada juga yang ingin menghilangkannya, apakah itu anda? pertanyaan selanjutnya apakah fasilitas tersebut bisa di hilangkan atau tidak? jawaban singkat “Bisa”, dan caranya pun terbilang sangat mudah.

Sebelumnya perlu di ketahui bahwa fasilitas link tersebut ada 3 yaitu “Posting baru” atau “Newer Posts”, “Home” atau “Halaman Muka”, serta “Posting Lama” atau “Older Posts”. Mana yang mau anda hilangkan, atau mau semuanya? tentu saja bisa. Untuk menghilangkannya anda hanya menambahkan sedikit kode pada CSS template anda.

Cari kode yang mirip seperti ini yang biasanya terdapat diatas kode ]]></b:skin>

    #blog-pager {

    ..

    ..

    .. (kode lengkap)

    ..

    .. }

lalu setelah karakter #blog-pager { ditambahkan kode

display:none;

sehingga menjadi

  #blog-pager { display:none;

    ..

    ..

    .. (kode lengkap)

    ..

    .. }

lalu Save Template...

Tips dan Keterangan:

#blog-pager adalah kode link footer dariuntuk urutan link halaman posting pada blog
pilih Template >> Edit HTML >> Lanjutkan dan centang Expand Template Widget
untuk memudahkan pencarian kode pada browser Mozilla Firefox = Edit >> Find dan pada Google Chroome = Edit Control Google Chrome  >> Find

Oke.. mudahkan?  Selamat mencoba..

Cara Membuat Tool Tambah Gadget Dibawah Halaman Posting Blog

Tool Tambah Gadget (Add gadget) blog merupakan sarana utama untuk menambah gadget-gadget seperti gadget HTML/JavaScript, gadget entri popular, gadget feed dan gadget-gadget lainnya. Umumnya tools tambah gadget ini biasanya hanya terlihat pada sidebar dan footer blog.

Salah satu manfaat membuat tools add gadget di bawah halaman posting blog adalah untuk memudahkan jika sewaktu-waktu ingin menempatkan gadget pada bagian bawah halaman posting. Dengan memanfatkan tools add gadget yang sudah terpasang di bawah posting, gadget yang ditambahkan akan langsung berada di bawah posting.

Tool Add gadget/tambah gadget pada bagian atas halaman posting blog

Cara menambah gadget pada bagian bawah halaman posting blog dapat dilakukan dengan langkah-langkah sebagai berikut, yaitu:

1. Sign in di blog

2. Klick Template

3. Cari kode berikut ini dalam kode template blog anda. Untuk menemukan dengan cepat gunakan CTRL F

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>

</b:section>

4. Copy lallu paste kode di bawah ini dan tempatkan tepat di bawah kode di bawah kode di atas

 <b:section class='main' id='mainunderpost' showaddelement='yes'/> 

5. Klick Simpan Template untuk menyimpan perubahan

6. Klick Tutup untuk kembali

7. Klick Tata Letak untuk melihat hasilnya.