Tips Blog | Tutorial Blog | Belajar Blog

Menambahkan Random Posts Widget

Random Posts Widget
Sebelumnya Saya pernah sharing cara menambahkan recent posts dengan javascript. Namun kali ini kita akan mempelajari cara menambahkan random posts widget. Random posts sangat berbeda sekali dengan recent posts. Recent posts hanya menampilkan artikel terbaru yang tentunya dimuat hanya artikel baru tsb, sedangkan random posts akan memuat artikel yang acak, dan menampilkan artikel yang baru maupun lama serta artikelnya akan sirih berganti dan bisa menimbulkan pageviews yang tinggi.

Contohnya bisa sobat lihat pada gambar di bawah ini.

Random Posts Widget

Berikut ini adalah script untuk menampilkan postingan secara acak di blogspot , script ini saya peroleh dari blog bloggerstop


<script type="text/javascript">

var acakarray = new Array();var l=0;var flag;

var numofpost=5;function randomposts(json){

var total = parseInt(json.feed.openSearch$totalResults.$t,10);

for(i=0;i < numofpost;){flag=0;acakarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in acakarray){if(l==acakarray[j]){ flag=1;}}

if(flag==0&&l!=0){acakarray[i++]=l;}}document.write('<ul>');

for(n in acakarray){ var p=acakarray[n];var entry=json.feed.entry[p-1];

for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";

document.write(item);}}

}document.write('</ul>');}

</script>

<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>


Catatan:
Angka 5 pada numofpost=5 adalah jumlah postingan yang akan ditampilkan secara acak ,bisa diganti dengan kebutuhan anda.

Prosedur yang harus anda lakukan:
1. Login ke blogger
Pilih Tata Letak , Elemen Halaman , Tambah Gadget ,pilih HTML/Javascript
Masukkan kode javascript di atas ke dalam gadget HTML /Javascript.

Google+ to RSS : RSS Feeds Dari Google Plus

Google Plus adalah salah satu jaringan sosial yang terbaik dan terbesar yang sedang ramai di gunakan oleh blogger-blogger untuk sekedar mencari teman atau bisa juga lahan untuk mempromosikan artikel blog. Sayangnya google plus masih kurang dalam beberapa pilihan dan masih tertinggal dari Facebook yang telah lama berdiri. Saya akan bercerita tentang RSS feed dan perangkat gratis untuk menambahkan fitur di jaringan Google Plus. Kita akan mempermudah membaca RSS Feeds melalui Google+ to RSS.


Google+ untuk RSS adalah alat online gratis yang memungkinkan sobat menghasilkan RSS feed dari Google+ akun sobat. Bagaimana cara mendaftar di Google+ to RSS?
  1. Silahkan sobat kunjungi situs Google+ to RSS.
  2. Masukkan informasi yang diminta seperti Profile-ID, Api-Key dan Email kemudian klik tombol OK. untuk Profile-ID dan Api-Key sobat dapat mengetahui dengan menyorot mouse ke tombol warna biru di setiap kolom pengisian. 
  3. Setelah selesai, maka Google+ to RSS otomatis akan membuat RSS feed dan mengirimkan e-mail konirmasi yang sudah sobat daftarkan, kemudian klik link konfirmasi tersebut dan lihat hasil RSS dari Google Plus.
Seperti yang sobat lihat, pembuatan RSS oleh Google+ sangat sederhana, silahkan dicoba dulu dan semoga berhasil.
Meta Tag Generator

Meta Tag Generator

Meta Tag Generator - Sebelumnya Saya pernah share tentang Apa Itu Meta Tag?. Nah pada pembahasan kali ini kita akan mempelajari bagaimana tentang memasang meta tag ke google lewat meta tag generator. Sebenarnya banyak cara memasang meta tag ke google, namun kali ini kita akan mempelajari lewat meta tag generator saja dulu.

Meta Tag Generator akan membaca halaman yang Anda tentukan, menghapus kata-kata umum dari itu, dan memilih kata-kata yang paling sering digunakan pada halaman. Ini kemudian akan menghasilkan tag Meta Keywords menggunakan kata-kata itu telah ditemukan. Ekstra berat akan diberikan kepada kata-kata dalam tag pos.
Meta Tag Generator
Nah jika ingin memasukkan situs web sobat ke dalam meta tag google atau search engine lainnya silahkan sobat isi form / kotak di bawah ini.



Advanced Meta-Tags Generator Tool � SEO Chat� This Table Was By synasmedseo



Title (Judul)
The Title Tag must contain no more than 70 characters (generally, 100 characters may be indexed).



Author (Nama Pembuat)
The Author Tag is for the person who wrote the material for the site.


Subject (Tema)
The Subject Tag is for what your site is. Business, music, hobby, cars. Use up to 100 characters.


Description (Keterangan)
The Description Tag can have up to 150 characters (generally, 200 to 250 characters may be indexed, though only a smaller portion of this amount may be displayed).


Classification (Klasifikasi)
The Classification tag is similar to description but more in detail.


Keywords (Kata Kunci)
In the Keyword tag use everything you think someone will search for to find your site. Use 200 characters.


Geography (Geografi)
Where are you located? Full Address


Language (Bahasa)
Is your site in English, Spanish, French.....?


Expires (Kadaluarsa)
Use "never" unless your site will expire. (Eg. Tue, 18 Apr 2006 14:57:09 GMT | Note: Requires RFC1123 date as shown here


Cache Control (Kontrol Cache)
Cache control level.


No Cache (Tidak Sembunyikan)
This directive indicates cached information should not be used and instead requests should be forwarded to the origin server.
Yes
No


Copyright (Nama Situs)
Who is the Owner of the site, Company Name


Zip Code (Kode Pos)
Your Zip Code


City (Kota)
Your City, Town


Country (Negara)
Your Country, use all names; USA, United States, United States Of America, America, etc.


Designer (Seniman Blog)
Webmaster name


Publisher (Terbit)
Owner, Webmaster, Company Names.


Revisit-After (Terakhir Update)
Tell search engine how often this page updates. (Eg. 21 days | Note: Most search engines do not support this Meta Tag)


Distribution (Distribusi)
Use [Global] unless it is a [Local] only site.


Robots (Mensin Pencari)
The values ALL and NONE set all directives on or off: [ALL=INDEX,FOLLOW] and [NONE=NOINDEX,NOFOLLOW].


MS Tags (Label MS)
Do you want Microsoft products to automatically generate smart tags on your web pages.
Yes
No


Enter Captcha To Continue (Kode Verifikasi)
To prevent spamming, please enter in the numbers and letters in the box below




Report Problem with Tool.


Cara Membuat Recent Post Berdasarkan Label dan Thumbnail

Cara Membuat Recent Post Berdasarkan Label dan Thumbnail
Cara Membuat Recent Post Berdasarkan Label dan Thumbnail - Pada tutorial kali ini, Saya akan berbagi cara membuat recent post berdasarkan label dan thumbnail. Widget ini akan otomatis menampilkan update posting kita hanya pada label/kategori yang tentunya bisa sobat pilih sendiri. Contoh bisa sobat lihat pada gambar di samping ini.

Nah kalo sobat blogger tertarik buat masang widget ini, gampang koq. Tinggal ikuti tutorial berikut ini�

1. Seperti biasa, login ke akun blogger sobat
2. Pergi ke tab rancangan >> edit html
3. EXPAND TEMPLATE WIDGET
4. cari kode ]]></b:skin>.

(*Gunakan F3 di keyboard untuk mempermudah pencarian)
5. Copy paste kode di bawah ini sebelum kode No.4
img.label_thumb{float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left; width:100%; min-height:70px; margin:0px 10px 2px 0px; adding:0}
ul.label_with_thumbs li{padding:8px 0; min-height:65px; margin-bottom:10px}
.label_with_thumbs a{}
.label_with_thumbs strong{}

6. Scroll ke bawah dan temukan kode </head>
7. Copy paste kode di bawah ini sebelum kode No.5

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZuAi6YL9W_Nwqm9F4b1X6XhFnUCKjIdvI3_ClybcTHBX0kKcZ8qCaM31SMMWNr-jQMR1a5emA1bbNXFimCpxRG4dC6QR-RueXLvp4SALt4jMBJfrcPXut4GZvDd35aHd8xBwrLJjqXSv2/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

8. SAVE template.sampai disini belum selesai.
9. masih di menu DESIGN >> PAGE ELEMENTS >> ADD GADGET >> HMTL/javaScript
10. Masukkan kode di bawah ini kedalam contents
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>

<script type="text/javascript" src="/feeds/posts/default/-/NAMA LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
11. Untuk kategori/label yang berspasi seperti Belajar SEO Blogspot, Blog SEO dsb, ganti lah spasi dengan kode %20. Contoh penulisan lengkap:
http://kutu-blogspot.blogspot.com/feeds/posts/default/-/Belajar%20SEO%20Blogspot
atau,
http://kutu-blogspot.blogspot.com/feeds/posts/default/-/Blog%20SEO
12. Jika sudah selesai masukkan kodenya, jangan lupa sobat blogger masukkin judul/title widgetnya.
13. Klik Save / Simpan.
14. Selesai! Semoga bermanfaat�

Cara menyembunyikan Facebook Fan Page di Blog

Cara menyembunyikan FB Fan Page di Blog


Bagi blogger yang mempunyai facebook fanpage sendiri, adalah biasa untuk meletakkan fanpage tersebut di blog. Biasa untuk letakkan di sidebar blog, untuk kali ini admin akan tunjukkan pula cara untuk sembunyikan facebook fan page ditepi blog anda

Langkah - langkah sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:

i. Dari dashboard > design > edit HTML

ii. Menggunakan fungsi find, (ctrl + F), cari kod </head>

iii. Copy dan paste kod di bawah SEBELUM kod </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

cth: 


Note: Jika blog anda sudah mempunyai kode di atas, abaikan langkah 1, langsung saja  ke langkah 2.

iv. Setelah selesai klik Save Template

Langkah 2:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://kutu-blogspot.blogspot.com/2012/02/cara-menyembunyikan-facebook-fan-page.html">Tutorial Here</a></span></div></div>
Note: Gantikan dengan "URL PAGE ANDA"

contoh url page:
iii. Save dan lihat hasilnya.:)
Optimalkan Kecepatan Blog

Optimalkan Kecepatan Blog

Kecepatan Blog
Optimalkan Kecepatan Blog - Selain mempertimbangkan masalah Keyword, Meta Tag  dan segala macam pernak-pernik lainnya yang berbau Search Engine Optimation (SEO) , sebuah blog juga wajib mengedepankan masalah berat halaman sebagai aspek yang paling utama untuk dibenahi. Kita harus bisa meng-optimalkan berat blog kita agar pengunjung juga bisa akses blog kita dengan cepat. Maka berikut adalah penjelasan mengenai optimalkan kecepatan blog.

Salah satunya adalah dengan menggunakan widget yang berguna dan mempunyai minat pengunjung serta menambahkan jumlah pageviews kita dalam blog.

Bagi blogger yang memang menggunakan akses berkecepatan tinggi dalam mengurus blognya, masalah mengenai berat loading page kadang sering luput dari perhatian mereka. Hal ini tentu saja terjadi karena mereka membuka blognya sendiri dengan kecepatan tinggi yang mereka miliki, sehingga blog mereka seolah-olah ringan dan baik-baik saja.

Blog yang ringan adalah blog yang mampu beradaptasi tidak hanya kepada user internet dengan kecepatan akses tinggi, melainkan juga kepada user yang datang dengan akses berkecepatan rendah.

Standar Ukuran Blog

Standarnya, sebuah situs seharusnya tidak memiliki berat lebih dari 25kb per-halamannya. Hal ini di sarankan oleh banyak sekali situs mengenai Search Engine Optimation (SEO), termasuk situs-situs besar seperti www.iwebtool.com, www.websiteoptimization.com, bahkan hingga www.google.com/analytics. Mereka serempak menganjurkan hal yang sama.

Jujur saja, walaupun 25kb bukan sesuatu yang mustahil dan sangat mungkin bisa dicapai, standar tersebut masihlah terlalu berat untuk di penuhi oleh kalangan blogger.

Apa benar sesulit itu standar yang harus kita ikuti..? , kalo ngga percaya, coba cek dulu berat blog kalian lewat  http://www.iwebtool.com/speed_test / pada kolom di bawah ini . Masukkan alamat blog kalian pada kolom yang disediakan, kemudian klik tombol check dan tunggu hasilnya.

Your domain(s):
Enter each address on a new line (Maximum 10)



(eg. daw-xp.blogspot.com)

Bagaimana? apa blog kalian sudah berhasil mengikuti standar tersebut? atau jangan-jangan blog kalian malah hampir 3-4x lipat lebih berat dari yang disarankan?

Ukuran yang paling realistis untuk sebuah blog

Setelah melihat hasil test, mungkin saja kalian berpikir bahwa mengurangi ukuran blog hingga 25kb adalah hal yang sulit diikuti. Dan kalo benar demikian, maka kalian mempunyai pemikiran yang sama dengan Saya. Standar tersebut memang disarankan agar blog kita lebih mudah di index oleh Robot Search Engine, tapi bukan berarti itu adalah standar yang paling ideal.

Perhitungannya, sebuah blog berukuran "super duper berat (150kb keatas)" sekalipun, tetap saja tidak akan terlihat berat ketika diakses dari koneksi 1mbps. Lain ceritanya ketika blog tersebut diakses dari koneksi yang hanya berkecepatan 152kbps.. dijamin, minimal diperlukan waktu sekitar 3-4 menit untuk melihat blog secara utuh. Bahkan ada beberapa blog yang membutuhkan waktu hingga 10 menit sampai bisa diload sempurna.

Kalau kalian pernah menonton acara MTV Booling Points, kalian pastinya udah tau dengan jelas tentang bagaimana tahap mendidihnya amarah seseorang. Hal ini juga terjadi lho pada pengunjung yang menunggu terlalu lama saat mengunjungi sebuah blog. Ada titik mendidih yang membuat mereka akhirnya kabur ke tempat lain, dan ngga mau kembali lagi. Yap!, kurang lebih seperti itulah yang terjadi.
Standar sebuah blog yang ideal sebenarnya masih tergantung pada seberapa cepat koneksi yang pengunjung gunakan ketika mengakses blog kita.
Lupakan masalah standar yang benar (25kb), sekarang kita akan menghitung ukuran yang paling seimbang, yang bisa diakses dengan mudah oleh pengunjung low speed connection ataupun yang high speed connection.

Perbedaan antara standard blog yang benar dengan standar blog yang ideal

Blog yang benar di mata SEO memang seharusnya berukuran 25kb.., tapi dalam hal ini, standard yang dimaksud tersebut mungkin hanya sebatas ukuran default blog yang wajar. Selebihnya, ketika ditambahi beberapa widget-widget, sebuah blog tentu saja akan kesulitan dalam mempertahankan berat badannya.

Oleh karena itu, walaupun ada tolak ukur 25kb dalam warning yang muncul dalam analysis page-nya, kebanyakan situs-situs analyzer selalu memberikan toleransi. Minimal jika blog kita tidak melebihi 100kb, maka blog kita masih masuk ke dalam tahap aman.

Bagaimana kalo lebih dari 100kb..? Kalo blog kalian lebih dari 100kb, Saya rasa sudah saatnya kalian mengurangi beberapa widget yang dirasa ngga terlalu penting dari blog kalian. Zona 100kb sudah termasuk ke dalam zona bahaya, dimana search engine sudah dipastikan akan kesulitan dalam mengindex blog kita.

Dan jika kalian bertanya kepada Saya tentang berapa ukuran blog yang ideal.., maka Saya akan menjawab "60kb". Kenapa? karna ukuran 60kb bisa dibilang adalah perbatasan yang paling seimbang, agar blog kita bisa mudah diakses oleh pengunjung berkoneksi lemot.

Selain hal tersebut, ukuran 60kb juga ukuran yang paling pas untuk dimasukkan kedalam kategori Mobile Friendly. Disini, Saya menggunakan Opera Mini sebagai acuannya. Seperti yang kita ketahui, ketika kita membuka sebuah situs menggunakan Opera Mini, maka kita akan dialihkan terlebih dahulu ke server mereka, sebelum akhirnya mereka mengkompresi seluruh isi halaman agar situs lebih kecil dan menampilkannya di browser. Betul..?

Berdasarkan hal tersebut, sebuah blog dengan ukuran 60kb, ngga akan melebihi 25kb ketika diakses lewat Opera Mini. Sudah masuk standar kan sekarang? setidaknya, buat Mobile. Sekian dulu postingan saya mengenai optimalkan kecepatan blog. Semoga bagi anda yang lagi gencarnya optimalkan kecepatan berat blognya sudah tidak berat lagi.
Terima kasih kepada Mas Leo untuk artikelnya yang bermanfaat ini ...

See u..
Kanata Blogger Template

Kanata Blogger Template

Kanata Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameKanata Blogger Template
DescriptionKanata is a free blogger template adapted from WordPress with 2 columns, left sidebar and grunge style.
Template Authorhttp://btemplates.com/author/deluxe-templates/
Designer9th Sphere
Instructions URL How to install Blogger Template
Kanata Blogger Template
Source : btemplates.com

Modifikasi Tampilan Read more

Modifikasi Tampilan Read more
Pada pembahasan kali ini akan mempelajari tentang bagaimana caranya customization / modifikasi tampilan read more di homepage blog. Kita bisa merubah segala sesuatu yang kita inginkan sesuai selera kita.

Disini saya hanya akan berbagi sedikit yang diperlukan tentang code HTMLnya, selain dari itu silahkan sobat blogger kreasikan sendiri. Walaupun sudah ada fungsi Insert jump break pada post editor untuk melakukan fungsi auto read more, namun itu hanya akan berfungsi pada templates pendukung langsung dari blogger dan kemungkinan tidak akan mendukung dari templates lain.

Sebelumnya Saya harus berterima kasih kepada Kang Rohman karena telah memberikan ilmu pengetahuannya dan sharing sehingga kami bisa. Nah sekarang ikuti tutorial berikut tentang bagaimana cara modifikasi tampilan read more.

Sebagai dasar pengetahuan, kode read more blogger adalah seperti ini :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.

* Agar read more tampil di sebelah kanan

Secara default " Read more " akan tampil di sebelah kiri. Jika anda berkeinginan agar read more tampil di sebelah kanan, anda bisa menambahkan kode tambahan seperti ini :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>




<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>




</div>
</b:if>
Atau jika anda lebih suka memasang pada CSS, bisa seperti ini ;

Simpan ini di atas kode ]]></b:skin>
.readmore { float:right;padding: 10px 0px 5px 0px; }

dan pasang ini di bagian body nya ;
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='readmore'>


<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>


</div>
</b:if>
* Agar Read more ditampilkan tebal

Agar tampilan "Read more �" atau " Read more � " bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more �</strong> atau <b>Read more � </b>. Contoh :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>
</div>
</b:if>
* Agar Read more tampil plus Judul Posting

Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>


<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/>&#160;&#8594;&#160;
<data:post.title/></a>
</div>
</b:if>
* Agar Read more diganti dengan banner

Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :


mengganti read  more dengan gambar
Format kodenya seperti ini ;
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src='URLgambarmu' alt='read more'/></a>


</div>
</b:if>
Contoh nyata seperti ini :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNzxcVMjem04RqfV6sS6WAbvWmG5G8h0MX2dw80c7j3pYc0qmdp3i7og17QJP47kP227Ig01MrUjvs2MWUM6Tin6PMC-TNNFm2EDQLnRAlQVlZ1COgfH2yiY56zJZZh_kuMzBwIo8dET8/[1].png' alt='read more'/></a>
</div>
</b:if>
Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.

Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "


mengganti read  more dengan gambar
5. Carilah kode yang mirip seperti Ini :
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
6. Silahkan ganti kode di atas dengan hasil kreasimu seperti yang di contohkan kang rohman tadi di atas.
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Selamat berkreasi!

Cara membuat menu Contact Us

Cara membuat menu Contact Us
Cara membuat menu Contact Us - Pertanyaan yang sering saya dengar sampai saat ini. Sebenarnya cara membuat contact Us tidak terlalu sulit. Ok langsung saja, dari pada capek basa-basi silahkan ikuti langkah-langkah cara membuat contact us dibawah ini.

Langkah-langkah cara membuat Contact Us :

Siapkan email anda untuk proses pendaftaran.

Kunjungi www.123contactform.com dan lakukan pendaftaran disana,
ingat pilihlah yang gartis. Kalau ada $$ lebih bagus lagi pilih yang berbayar ( fiturnya lebih lengkap )

Setelah melakukan pendaftaran silahkan cek email anda untuk verifikasi pendaftaran.

Login akun anda dan Creat New Form pilih Contact Form setelah itu beri judul Formnya (tidak pakai judul juga tidak apa-apa)

Terapkan  kemampuan anda disini untuk  mendesain form tersebut ( bebas yang anda suka )

Apabila sudah selesai klik Continue dan anda akan menemui hal seperti dibawah ini
Cara Membuat Contact Us
  • No 1 adalah email yang akan menerima pesan apabila ada yang menghubungi anda lewat form tersebut. Jadi anda haru centang disebelah email. Anda juga bisa menambh email yang akan menerima pesannya dengan cara klik add notification diatas email tsb. Maaf g masuk SS hehe.
  • No 2 adalah pesan yang akan tampil setelah pesan terkirim. Anda bisa mengubahnya sesuai keinginan anda, misalnya " Terima kasih sudah menghubungi kami " dll.
  • Kalau sudah anda bisa klik continue dibagian kanan atas.
  • Sekarang anda tinggal pilih form tersebut ingin di pasang dimana dan beberapa pilihan kode. lihat gambar dibawah ini.
Cara Membuat Contact Us
  • Silahkan dipilih sesuai yang anda inginkan dan anda akan di suguhi kode. langkah selanjutnya copy kodenya dan paste di halaman contact Us anda. Untuk wordpress anda hanya diberikan kode formnya.

Cara membuat Contact Us semacam ini mirip sekali dengan Emailme Form. Kelebihan cara membuat Contact Us ini yaitu pada waktu redirect akan tetap pada halaman blog, ada pilihan untuk mengganti Layout atau tema belakang. Dan desain contact us ini bagus dan mudah. Sampai disini dan semoga artikel cara membuat contact us ini bermanfaat bagi anda yang membutuhkan.
Red Light Blogger Template

Red Light Blogger Template

Red Light Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NameRed Light Blogger Template
DescriptionRed Light is a free blogger template adapted from WordPress with 3 columns, sidebar on the right and left, grunge style and vectorial elements.
Template Authorhttp://btemplates.com/author/falcon-hive/
DesignerTemplateLite
Instructions URL How to install Blogger Template
Red Light Blogger Template
Source : btemplates.com
Menu Dropdown dengan Background

Menu Dropdown dengan Background

Menu Dropdown dengan Background | Tutorial Blog

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.
Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :
  • Login ke blogger Anda, klik menu Design > Edit HTML.
  • Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
  • Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
    <script>
    var last_expanded = &#39;&#39;;
    function showHide(id)
    {
    var obj = document.getElementById(id);
    var status = obj.className;
    if (status == &#39;hide&#39;) {
    if (last_expanded != &#39;&#39;) {
    var last_obj = document.getElementById(last_expanded);
    last_obj.className = &#39;hide&#39;;
    }
    obj.className = &#39;show&#39;;
    last_expanded = id;
    } else {
    obj.className = &#39;hide&#39;;
    }
    }
    </script>
  • Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
    .dropdown-b {
    background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom: 10px;
    margin-top: 4px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .dropdown-bg {
    background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:13px;
    padding-bottom: 10px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .hide{
    display: none;
    }
    .show{
    display: block;
    }
    a{cursor: hand}
  • Lalu klik Save Template.
  • Kemudian klik menu Design > Page Element > Add a Gadget.
  • Pilih HTML/Javascript, lalu masukkan kode berikut ini :
    <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
    <div id="dropdown-b-1" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
    <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
    <div id="dropdown-b-2" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
    <div id="dropdown-b-3" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
    <div id="dropdown-b-4" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
     <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
  • Terakhir klik tombol Save. Selesai...
Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.
Photoplus Blogger Template

Photoplus Blogger Template

Photoplus Blogger Template | Tutorial Blog

Template Features
Platform TypeBlogger / Blogspot
Template NamePhotoplus Blogger Template
DescriptionPhotoplus is a free premium blogger template with 3 columns, gallery-styled, perfect for photologs and minimalist. Excellent layout for blogs about photography.
Template Authorhttp://btemplates.com/author/dante-araujo/
DesignerDante Araujo
Instructions URL How to install Blogger Template
Photoplus Blogger Template
Source : btemplates.com
Cara Membuat Search Engine dengan Background di Blog

Cara Membuat Search Engine dengan Background di Blog

Cara membuat search engine Dengan Background DI Blog - Berjumpa lagi dalam tutorial menarik di blog ini, iya dulu udah pernah posting tentang cara membuat search engine sederhana tapi sekarang saya membuat search engine di blog lebih menarik dengan background gambar dan tombol sumbit juga ada gambarnya, menurut kamu menarik gak sih search engine yang kaya begini... kalau kamu belum faham juga ni dibawah aku kasih contoh search engine yang menarik Gimana? Dari gambar diatas kamu tertarik gak pengen buat search engine yang kaya gituan wkakaak pastinya penegen dunk orang menarik iya kan?

Iya itu adalah background karya aku sendiri dan nanti kamu juga bisa buat Backgroundnya sendiri dan juga tombol submit buatan kamu sendiri oke.

Ikuti Langkah-Langkahnya berikutnya ini:
  1. Log in ke blogger dahulu kalau sudah masuk menu Layout kemudian masuk Edit HTML
  2. Lalu taruh Code Dibawah diatas Code ]]></b:skin>

    #searchform {
    position:letf;
    top: 20px;
    right: 0px;
    background: url(http://sites.google.com/site/anasku2000/search-back.png) no-repeat right bottom;
    height: 59px;
    width: 210px;
    }
    #searchform #s{
    background: #ffffff url(http://sites.google.com/site/anasku2000/form-field-bg.gif) no-repeat ;
    height: 17px;
    width: 148px;
    margin: 30px 5px 0px 10px;
    padding: 3px 7px 2px 5px;
    color: #999999;
    border: none;
    }
    #searchform #searchsubmit {
    background: url(http://sites.google.com/site/anasku2000/searchbtnnk7.png) no-repeat left top;
    height: 24px;
    width: 24px;
    border: none;
    text-indent: -999%;
    line-height: 1px;
    margin-top: 6px;
    }
  3. Kemudian Simpan Template
  4. Lalu langkah selanjutnta adalah masuk menu Layout ---> Page Elements
  5. Pilih tempat yang mau dipasangi Search engine kemudian Add A Gadget
  6. Lalu pilih HTML/JavaScript kemudian Taruh Code Dibawah Kedalamnya

    <form id="searchform" action="/search" method="get">
    <div>
    <input type="text" id="s" value="" name="q" />
    <input id="searchsubmit" value="Go" type="submit" />
    </div>
    </form>
  7. Lalu Simpan dehh

Semoga Bermanfat...
Cara Membuat Status Yahoo messenger Melayang di Blog

Cara Membuat Status Yahoo messenger Melayang di Blog

Cara Membuat Status Yahoo messenger Melayang di Blog. kalau dahulu, blog ini saya berikan status yahoo messenger melayang, namun karena program yahoo messenger saya rusak jadinya saya hilangkan widget ini. namun saya masih memiliki screen short YM melayang tersebut. lihat Status YM yang aku buat melayang. 

Nah dari keterangan diatas apakah Anda minat untuk membuatnya..? kalau berminat Silahkan ikuti trik dibawah ini untuk membuatnya.
  • Langkah pertama yang harus kamu lakukan adalah Log In ke Blogger lalu masuk menu Layout kemudian masuk Edit HTML
  • Lalu taruh Code dibawah ini diatas Code ]]></b:skin>
#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Tulisan yang berwarna merah dan tebal diatas itu adalah posisi widgetnya

  • Langkah selanjutnya taruh code dibawah ini yang merupakan widget sebelum Code </body>

<div id="melayang">
<a href="ymsgr:sendIM?IdYmKamu"> <img src="http://opi.yahoo.com/online?u=IdYmKamu&amp;m=g&amp;t=1&amp;l=us"/>

</a>

</div>

Nah Code yang berwarna merah diatas itu adalah staus YM yang merupakan widgetnya bisa kamu ganti.