Cara Membuat Text Efek Untuk Blog

---

Assalammualaikum wr. wb.

Salam sejahtera untuk Sobat blogger semua. Sebelumnya saya ucapkan terimakasih pada Sobat blogger yang sudah berkunjung ke blog saya yang sederhana ini. Pada kesempatan kali ini saya akan berbagi tutorial mengenai "Cara Membuat Text Efek Untuk Blog". Sebenarnya sih banyak cara yang dapat digunakan untuk membuat text efek, tapi buat sobat blogger saya akan memberikan cara mudahnya saja (text efek yang sering digunakan untuk : header, banner, iklan, dll). Dengan memanfaatkan jasa situs image cool text, Sobat bisa membuat bermacam-macam gaya tulisan. Karena style dan text-nya sangat bervariatif, sangat cocok untuk blog Sobat agar lebih terlihat atraktif.

Cara Membuat Text Efek Untuk Blog (Online) :

1. Kunjungi CoolText
2. Login dengan Account sobat, jika belum punya silahkan daftar terlebih dahulu
3. Pilih gaya tulisan/logo style
4. Tentukan tampilan sesuai keinginan
5. Silahkan Clik salah satu pilihan
6. Download Image - Edit this Foto - Get HTML Code - Email Image

Oke, sudah siap text efek tingkat professional dalam waktu singkat. Selesai sudah postingan saya kali ini mengenai "Cara Membuat Text Efek Untuk Blog", mohon maaf atas segala keterbatasannya.

Wassalammualaikum wr. wb.

Cara Memasang Kalender di Blog

---

Assalammualaikum wr. wb.
Salam sejahtera untuk Sobat blogger semua. Pada kesempatan kali ini saya akan berbagi tutorial ringan tentang "Cara Memasang Kalender di Blog". Kalender merupakan salah satu aksesoris blog yang dipergunakan untuk mempercantik tampilan blog. Kalender juga berguna untuk pengunjung blog kita supaya mereka bisa mengetahui tanggal dan hari. Selain itu, tampilan blog juga sangat berarti bagi para blogger, karena sangat mempengaruhi minat pengunjung terhadap blog yang kita miliki yang tentunya akan sangat berpengaruh kepada trafik. Nah, yang pengen tau cara bikin kalender di blog ikuti aja langkah mudah berikut ini.

1. Klik di sini.
2. Silakan pilih jenis kalender yang Sobat suka.
3. Selanjutnya tinggal di copas aja kode HTML nya ke blog kamu dengan menggunakan widget HTML.

Ok, berakhir sudah postingan saya kali ini mengenai "Cara Memasang Kalender di Blog". Mudah-mudahan tutorial ini berhasil diterapkan, mohon maaf atas segala kekurangannya.
Wassalammualaikum wr. wb.

Cara Membuat Readmore di Blog

---

Assalammualaikum wr. wb.
Salam sejahtera untuk Sobat blogger semua. Terimakasih kepada Sobat blogger semua yang masih setia mengunjungi blog saya yang sederhana ini. Pada kesempatan kali ini, saya akan share sebuah tutorial yang semoga bermanfaat mengenai "Cara Membuat Readmore di Blog". Readmore sangat bermanfaat bagi para blogger, karena sangat membantu meringankan dan memperluas  ruang untuk blog. Selain itu tampilan blog juga akan terlihat lebih indah dan terlihat lebih profesional. Nah, bagi yang ingin tau cara membuat readmore di blog, silahkan ikuti step-step di bawah ini.

1. Cara Manual 

Cara manual pertama, kita bisa menggunakan fungsi "Jump-Break" di teks editor blogspot yang baru dengan mengklik tombol/ icon "Jump-Break" yang biasanya terletak di pojok paling kanan atas dari menu teks editor blogspot setelah Sobat menetapkan kursor pada akhir teks yang akan Sobat pakai sebagai ringkasan artikel Sobat.

Cara manual kedua, bisa dengan cara memasukkan kode tag   dalam mode Edit HTML pada posisi akhir/batas teks yang ingin Sobat tampilkan sebagai ringkasan posting Sobat.

Lalu, untuk kustomisasinya agar kata-kata "Readmore" nya sesuai dengan yang Sobat inginkan, misalnya diganti dengan kata "Baca Selanjutnya" , "Lanjutkan" bisa dengan mensetting pada widget blog post pada tab Layout (Page Element) akun blogger Sobat. 

2. Cara otomatis

Sobat bisa menggunakan fungsi Auto-Readmore. Tentu fungsi ini belum ada pada blogspot. Maka dari itu Sobat perlu untuk menambahkannya sendiri. bila ingin menambahkannya, berikut caranya.

Tentu Sobat harus sudah login dalam akun blogger dulu. Kemudian masuk ke Template ► Edit HTML ► Lanjutkan. Jangan lupa untuk mencentangi kotak kecil bertuliskan "Expand Widget Templates". Cari kode </head> . Kemudian salin kode dibawah ini dan letakan di atas kode </head> tersebut.

    <script type='text/javascript'>

    var thumbnail_mode = "float" ;

    summary_noimg = 250;

    summary_img = 250;

    img_thumb_height = 120;

    img_thumb_width = 120;

    </script>

    <script type='text/javascript'>

    //<![CDATA[

    function removeHtmlTag(strx,chop){

    if(strx.indexOf("<")!=-1)

    {

    var s = strx.split("<");

    for(var i=0;i<s.length;i++){

    if(s[i].indexOf(">")!=-1){

    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

    }

    }

    strx = s.join("");

    }

    chop = (chop < strx.length-1) ? chop : strx.length-2;

    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

    strx = strx.substring(0,chop-1);

    return strx+'...';

    }

    function createSummaryAndThumb(pID){

    var div = document.getElementById(pID);

    var imgtag = "";

    var img = div.getElementsByTagName("img");

    var summ = summary_noimg;

    if(img.length>=1) {

    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

    summ = summary_img;

    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

    div.innerHTML = summary;

    }

    //]]>

    </script>

Lalu, cari kode <data:post.body/> . Sobat bisa menggunakan CTRL+F untuk mencari kode tersebut. Kalau sudah ketemu ganti kode <data:post.body/> dengan semua kode dibawah ini.

<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:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Save template sobat. Selesai deh langkah-langkah cara membuat readmore di blog.

Keterangan :

1. var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float))
2. summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
3. summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
4. img_thumb_height = 120; (Thumbnail 'tinggi gambar dalam piksel)
5. img_thumb_width = 120; (Thumbnail 'lebar gambar dalam piksel)

Nah, berakhir sudah artikel saya kali ini yang membahas "Cara Membuat Readmore di Blog", mohon maaf atas segala kekurangannya.
Wassalammualaikum wr. wb.

Cara Membuat Cursor Bertaburan Bintang di Blog

---

Assalammualaikum wr. wb.
Salam sejahtera untuk Sobat blogger semua. Para blogger tidak ada habisnya nyari cara buat bikin blognya tambah cantik dan keren. Berbagai cxara dilakukan untuk memperindah tampilan blog. Selain karna hobi dan menyenangkan, memperindah tampilan blog juga membuat pengunjung blog betah berlama-lama diblog.

Nah, kali ini saya akan memberikan tips mempercantik blog dengan membuat cursor di blog menjadi bertaburan bintang. Tanpa banyak basa-basi, langsung ke langkah-langkahnya.

     1. Login ke dashboard  blogger sobat

     2. Masuk ke Layout à Page Element

     3. Tambahkan gadget HTML/JavaScript

     4. Pilih salahsatu kode taburan bintang dibawah dan salin ke gadget HTML/JavaScript tersebut

Bintang Putih : <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

Bintang Merah : <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script>

Bintang Ungu : <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script>

Bintang Hijau : <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script> 

Bintang Biru : <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script>

5. Jangan lupa di simpan widgetnya

Ok, selesai sudah postingan saya kali ini yang berjudul "Cara Membuat Cursor Bertaburan Bintang di Blog", mohon maaf atas segala kekurangannya.

Wassalammualaikum wr. wb.

Cara Membuat Like Box di Blog Valid XHTML

---

Assalammualaikum wr. wb.

Salam sejahtera untuk Sobat blogger semua. Setelah kemarin saya memposting artikel mengenai Cara Membuat Widget Followers Valid XHTML, pada kesempatan kali ini saya juga memposting artikel yang hampir mirip yaitu "Cara Membuat Like Box Di Blog Valid XHTML". Widget like box (kotak suka terhadap suatu website) saat ini telah banyak di pasang pada website dan blog-blog oleh para webmaster, namun ternyata script like box yang dibuat oleh developer facebook tersebut tidak valid XHTML.

Manfaat Membuat Like Box Di Blog Valid XHTML

Perlu diketahui bahwa valid XHTML bagi sebuah website atau blog itu sangat penting karena dapat mempengaruhi dukungan (support) website terhadap berbagai macam browser. Selain itu, bila website atau blog kita valid XHTML maka website atau blog kita akan semakin disukai oleh crawler yang berasal dari google, yahoo, dan juga bing, yang artinya Valid XHTML juga mempengaruhi nilai SEO bagi suatu website atau blog.

Langkah-Langkah Membuat Like Box Di Blog Valid XHTML

1. Pertama Sobat harus Login dulu
2. Kemudian Sobat masuk ke Dashboard blog Sobat
3. Setelah itu masuk ke menu Tata Letak
4. Klik Tambah Gadget kemudian pilih yang HTML/JavaScript
5. Lalu masukkan kode dibawah ini kedalam gadget tersebut
   

   <div id="fb-root"></div>
   <script type="text/javascript">
   (function() {
   var e = document.createElement('script'); e.async = true;
   e.src = document.location.protocol +
   '//connect.facebook.net/en_US/all.js#xfbml=1';
   document.getElementById('fb-root').appendChild(e);
   }());
   </script>
   <div id="FbCont">
   <script type="text/javascript">
   <!--//--><![CDATA[//><!--
   var fb = document.createElement('fb:like-box');
   fb.setAttribute("href","Masukan alamat fan pages FB Sobat disini");
   fb.setAttribute("show_faces","true");
   fb.setAttribute("header","false");
   fb.setAttribute("stream","false");
   fb.setAttribute("width","200");
   fb.setAttribute("font","segoe");
   document.getElementById("FbCont").appendChild(fb);
   //--><!]]>
   </script>
   </div>

6. Ganti kode yang harus dan ingin diganti sesuai dengan kebutuhan
7. Simpan dan lihat hasilnya

Ok, berakhirlah sudah artikel kali ini mengenai Cara Membuat Like Box Di Blog Valid XHTML, mohon maaf atas segala kekurangannya.
Wassalammualaikum wr. wb.