Cara Membuat READ MORE Pada Blogspot

Halo gan, kali ini saya akan memberitahu "Cara Membuat Read More Pada Blogspot" seperti yang kita tau, READ MORE membuat blog kita lebih simpel, enak dilihat, da blog tetap Up to Date, sekarang saya akan langsung ke topik aja yaa :  



1. Login ke Blogger sobat menggunakan Gmail
2. Pergi Ke Template >> Edit HTML
3. Cari kode </head> ( menggunakan CTRL + F )
4. Copy paste kode dibawah tepat diatas kode </head> :


<!--ReadMore http://mns-ngeblog.blogspot.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</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(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

5. Setelah itu save template agan
6. Cari kode berikut post' var='post' ( yang ketiga ) lalu klik tanda panah di ujung kiri

7. Setelah diklik pasti akan ada kode lain
8. Setelah itu cari kode berikut  <data:post.body/> ( pastikan tidak menggunakan CTRL + F, carinya normal saja ) 
9. Setelah ketemu ganti kode diatas dg kode dibawah ini : 

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->


10. Ganti tulisan warna "Biru" sesuai keinginan agan masing2
11. Klik SAVE dan lihat hasilnya
12. selesai 

Baca Selengkapnya »

Cara Membuat Text Disekeliling Mouse Pointer Pada Blogspot

Halo gan, sekarang saya akan memberitahu "Cara Membuat Text Disekeliling Mouse Pointer Pada Blogspot" seperti gambar disamping, keren kan, langsung saja deh kecaranya hehehe, sudah dulu basa basinya.

Cara :
1. Login ke BLOGGER menggunakan Gmail
2. Pergi ke TATA LETAK
3. Lalu klik kata "Tambahkan Gadget"
5. Lalu Pilih "Html/Javascript"
6. Copy Kode Berikut :

<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'unkempt', verdana, arial;
color: #000000;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = "Selamat Datang di Blog Ini";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =20;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 15;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.3;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.2;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

7. Rubah kata yang diberi warna "Biru" sesuai keinginan agan masing2
8. Lalu klik Simpan
9. Selesai

NB : Jika masih bingun silahkan berkomentar

Baca Selengkapnya »

Tutorial Cara Membuat Blogspot Beserta Gambarnya

Halo Gan, postingan pertama saya adalah "Tutorial Cara Membuat Blogspot Beserta Gambarnya" nah sekarang saya akan memberitahu apa itu blog. Blog adalalah bentuk Aplikasi Web. Pada dasarnya merupakan bagian dari situs website yang dapat diakses secara online yang memiliki fungsi utama memuat tulisan-tulisan dan gambar (dimuat dalam posting) pada setiap halaman web. Blog biasanya dikelola oleh pengguna tunggal (sebagian lainnya oleh beberapa penulis) dibuat sesuai dengan topik dan tujuan dari si pengguna blog tersebut.

nah langsung saja saya kasih tau cara membuat blog cekidot :

1. Login ke BLOGGER menggunakan Gmail

2. Klik "BLOG BARU"

3. Silahkan tulis judul blog agan "Contoh: Mns ngeBLOG"

4. Silahkan tulis url blog agan "Contoh: mns-ngeblog"

5. Silahkan pilih template agan "Contoh: Jendela gambar"

6. Lalu klik "BUAT BLOG"

 7. Selesai, Blog Sudah Jadi

 NB : Jika Masih Bingun Silahkan Tulis Dikomentar...

 

Baca Selengkapnya »