Senin, 13 Agustus 2012

Mengedit/Menambahkan HTML pada Template Blog

~Pilih menu 'Template' pada dashboard blog Sobat





~Pilih 'Edit HTML' untuk menambah dan mengedit template, lalu klik 'Lanjutkan'.




~ Jangan lupa checklist 'Expand Template Widget' biar template Sobat gak rusak.





~ Tekan Ctrl+F untuk mencari kode/script yang Sobat pengen.
~ Setelah memasukkan semua kodenya, jangan lupa klik 'Pratinjau' dulu sebelum mengeklik 'Simpan'. Hal ini bertujuan untuk mengantisipasi kalau ada script yang salah maka pada halaman pratinjau akan rusak. Kalau hal ini terjadi, segera cari dan temukan script yang salah lalu diperbaiki. Kalau ada script yang salah namun tetap di simpan, maka Sobat akan susah untuk mengedit Template Sobat lagi. Bahkan, pada beberapa kejadian template tidak bisa di edit lagi.


Demikian Cara Mengedit/Menambahkan HTML pada Template Blog. Semoga bermanfaat...
Haturnuwun... :)



Read More >>

Memasang Widget HTML/JavaScript di Blogspot

Memasang Widget HTML/JavaSript pada tampilan blogspot yang baru.

~ Pilih menu 'Tata Letak' pada dashboard blog kamu.

~ Pilih 'Tambah Gadget' dimana kamu mau meletakkan gadget itu.

~ Pilih Gadget 'HTML/JavaSript'

~ Masukkan kode HTML/JavaSript yang pengen kamu pasang

~ Kemudian klik 'Simpan/Save'

Demikian artikel tentang Cara Memasang Widget HTML/JavaScript di Blogspot.
Semoga bermanfaat...
Haturnuwun., :)
Read More >>

Membuat Read More Otomoatis Dengan Gambar dan Hanya Teks di Blog

Hai Sobat Saling Follow...!!!
Apa kabar ni..?? moga baik-baik aja ya... :)
Buat para blogger yang sudah lama berkecamuk dalam dunia blog mungkin artikel ini sama sekali tidak ada gunanya. Tapi tidak ada salahnya dong Saling Follow berbagi ilmu dengan teman-teman blogger pemula... :D
Sebelum Saling Follow ngasih tahu cara Membuat Read More Otomatis di Blog, perlu kalian ketahui read more itu bisa dilakukan dengan manual juga lho. Caranya adalah Klik "Insert Jump Break" pada tulisan dimana Sobat ingin memotongnya. Lihat gambar dibawah ini supaya Sobat lebih jelas :
Klik Insert Jump Break
 Maka hasil akan seperti ini :
Hasil Readmore manual
Tapi kelemahan menggunakan read more manual ini adalah sobat mesti tidak boleh lupa mengeklik "Insert Jump Break" setiap kali Sobat mau posting tulisan. Selain itu juga tidak akan teratur tampilan di beranda antara gambar dan tulisan.
So, Saran Saling Follow jangan gunakan Read More Manual deh...!

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

1.  Masuk ke desain template, kalo Sobat ada yg belum tahu Cara Desain Template bisa klik Cara Desain Template.
2. Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>
3. Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>
4. Untuk Read More Otomatis Menggunakan Gambar hapus kode tersebut dan gantilah dengan kode berikut :
<b:if cond='data:blog.pageType != &quot;item&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 style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>
5. Sedangkan untuk Read More Otomatis yang Hanya Teks hapus kode <data:post.body/> atau <p><data:post.body/></p> dan gantilah dengan kode berikut :
<b:if cond='data:blog.pageType != &quot;item&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 style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
Catatan :
~  Untuk tulisan yang berwarna hijau Sobat bisa menggantinya dengan angka sesuai dengan keinginan Sobat :
summary_noimg = 150; => jumlah karakter di beranda tanpa gambar
summary_img = 150; => jumlah karakter di beranda dengan gambar
img_thumb_height = 100; => tinggi gambar di beranda
img_thumb_width = 120; =>lebar gambar di beranda

~ Untuk tulisan yang berwarna merah 'Read More...' bisa sobat ganti dengan 'Baca Selengkapnya', 'Baca Selanjutnya...' atau apapun sesuai selera Sobat.

6. Sebelum disimpan, Klik Pratinjau dulu. Karena kalau ada script yang salah maka di halaman Pratinjau akan gagal memuat. Segera temukan dan perbaiki script Sobat yang salah, karena kalau tidak pada Template Blogger yang baru sobat akan kesusahan dalam masuk ke Desain Template lagi.

7. Untuk yang sudah terlanjut menggunakan Read More Manual seperti yang sebutkan di paling atas tadi, Sobat tinggal hapus kode :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
8. Kemudian gantilah dengan cara nomer 4 atau nomer 5 sesuai keinginan Sobat.

Demikianlah artikel tentang Cara Membuat Read More Otomoatis Dengan Gambar dan Hanya Teks di Blog. Semoga bermanfaat...
Haturnuwun... :)


Read More >>

Minggu, 12 Agustus 2012

Aksesoris Keren Untuk Menghias Blog

Sering kamu melihat blog yang banyak pernak-perniknya (hiasan-hiasan) kaya 'I Love Indonesia', 'Blogger Indonesia', dan sejenisnya. Sekarang Saling Follow akan ngasih tahu bagaimana blog kamu bisa menjadi lebih berwarna dan menarik dengan adanya hiasan-hiasan berupa gambar itu.

Silakan langsung saja copas kode-kode dibawah gambar yang sobat sukai untuk ditambahkan di blog sobat.
Perhatian : Jangan Mengubah Kode Sedikitpun!

Hati-hati kalau nulis (atau ngopi?) posting, jangan sembarangan ya!!!


<a href="http://saling-follow.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRIiTUsx05ms-JG-2rU4hNJiKZQD50RrGfzl8oUpS_PRpFMuiYlfanXVx2bW0_cDlclFVJjfZFziRc-f2jkItjBi8jPFcc_IvmovuLYX0oArLDxFM_xnbJjlD5RZK2NBJ_Gteb9zemlvaX/s1600/Nulis+Posting.jpg" alt="Nulis Posting Jangan Sembarangan"></a>




Pay Attention, I'm moody blogger... :)

<a href="http://saling-follow.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcgicd1eE5MKqG-8mJV2KJx8hSfbUHXwpvvHI_WWTSEFhInmDcyxp-UXZu5MTZbtae-UaXr-xjjR8vWiBWMEO3SveJ_64dVnwtvC73g8qsi7MFWWSEV4YoV6GL8Jx8p_HPkF3W7E6bD8Oz/s1600/Blogger+Moody.jpg" alt="Blogger Moody"></a>







Bangga menjadi bagian dari Indonesia


<a href="http://saling-follow.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjnUDA7v25xT4BTD8wu3m7e_SuOPJt76PNSXGJpkKchEJiI9xni46pdJaT6bSl9qI0PA5EBqNDwwqp0zCjYBE38XTI0MaWF7Cuhwc8pu50ar0ky5wCAkT9jk6DY4ZtnKZM9P6n6G-l2aYE/s1600/Blogger+Indonesia.jpg" alt="Blogger Indonesia"></a>









Nah, cukup tiga itu dulu ya tentang Aksesoris Keren Unuk Menghias Blog. Semoga bermanfaat buat Sobat Saling Follow yang sedang belajar membuat blog yang keren.

Haturnuwum...
Read More >>