Tampilkan postingan dengan label blogger. Tampilkan semua postingan
Cara membuat background di postingan Blog
Kali ini saya akan share tentang cara membuat backgorund di postingan blog
ya seperti awal postingan saya ini :D
langsung saja cara pembuatanya
- buka blogger
- buka rancangan
-klik edit html
lalu cari kode seperti ini .post {
tambahkan kode berikut tepat di bawah kode tadi
background:url('http://www.yournipplecovers.com/media/catalog/product/cache/3/image/9df78eab33525d08d6e5fb8d27136e95/P/a/Pastease-Black-and-White-Skull-Nipple-Covers_img2_1.jpg');
ganti url berwarna merah dengan url kamu :D
Membuat gambar (icon) di samping judul posting
agan liat di samping judul postingan saya ?
iya di situ terlihat ada gambar (icon) yang menempati ruang yang sama dengan judul posting cara membuat itu tidaklah susah kok
Cara cara nya adalah
- buka blogger
- masuk ke edit html terus jangan lupa centang expand template
- lalu masukkan code berikut <a expr:href='data:post.url'><data:post.title/></a>
- lalu masukkan kode berikut di tengah antara kode <a expr:href='data:post.url'>(Disini)<data:post.title/></a>
tr_bq">
<img border='0' hight='10' src='http://i1242.phoalbums/gg521/drake1020/Emo1.png' width='45'/>
url warna merah ganti dengan url kamu
tampilan image saat memasuki blog
Pada saat anda memasuki blog saya anda melihat image seperti ini kan?? ya itu adalah tampilan sebelum memasuki blog saya yang saya dapat dari teman ..
baiklah langsung saja cara pembuatanya
- buka blogger
- masuk rancangan
- masuk edit html klik expand tempalte widget
- cari kode ]]></skin>lalu masukkan kode berikut tepat di atas kode ]]></skin>
</style></head>
<script language="javascript" type="text/javascript">
/* toggle() checks to see if the images has already been faded
or not and sends the appropriate variables to opacity(); */
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}
/* changeOpacity() uses three different opacity settings to
achieve a cross-browser opacity changing function. This
function can also be used to directly change the opacity
of an element. */
function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}
/* fade() will fade the image in or out based on the starting
and ending opacity settings. The speed of the fade is
determined by the variable milli (total time of the fade
in milliseconds)*/
function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('wise', 3000); this.style.display='none';
document.getElementById('june').style.display=''">
<center><img src=" Masukkan URL Yang kamu Suka"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="wise" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="june" style="display : none;">
<body>
- ganti Masukkan URL Yang kamu Suka dengan URL gambar kamu
Selesai :D
Membuat auto Readmore sekaligus dengan image
tampilan ini juga dapat membuat tampilan blog anda menjadi menarik dan lebih indah dilihat :D
Ok langsung aj cara pembuatan nya
- masuk blogger
- klik rancangan
- edit html
- centang expand template widget
- lalu cari </head> dan paste kode di bawah ini tepat di atas kode </head>
<!-- Auto read more script -http://rizky-black-ops.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 350;
img_thumb_height = 150;
img_thumb_width = 150;
</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 = '<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>
<!-- Auto read more script -http://rizky-black-ops.blogspot.com- End -->
- lalu setelah sudah di paste cari <data:post.body/> lalu ganti dengan kode berikut
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/><span style='padding-top:2px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b><img border='0' src='https://lh3.googleusercontent.com/--ggxKsG6nng/T1MRjH9bGRI/AAAAAAAAALg/wdhkOKi7QJE/w143-h57-k/cooltext656077479.png'/>>></b></a></span>
</b:if>
- Url Warna merah ganti dengan url gambar kamu
- Selesai :D
Membuat Screen saver dengan gambar di Blog
Langsung saja cara membuat screen saver dengan gambar di blog
-login ke blogger
-masuk ke rancangan
-klik add gadget
-cari html/javascript
- pastekan script di bawah ini
<script type="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/screensavervikry.js"></script>
<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(https://lh5.googleusercontent.com/-LimPuwDioLQ/T1CFqoZr2ZI/AAAAAAAAALA/b5u742ULH_s/s775/cooltext654974437.png) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>
<style type='text/css'>
div#energysaving, div#energysaving * { -moz-border-radius: 0; -webkit-border-radius: 0; border: 0; background: url(https://lh5.googleusercontent.com/-LimPuwDioLQ/T1CFqoZr2ZI/AAAAAAAAALA/b5u742ULH_s/s775/cooltext654974437.png) no-repeat center center fixed black; }
div#energysaving p span {display:none;visibility:hidden;}
</style>
Text berwarna merah ganti dengan gambar yang ingin kamu pilih
Selesai !
Membuat link menjadi warna pelangi ketika di sorot mouse
Membuat Efek Link Warna Pelangi - trik ini sangat, sebab semua link yang ada di blog kita bakalan jadi warna-warni kalo disorot ama cursor mouse. Trik ini juga bisa ngebuat tampilan blog kita jadi cantik ‘n lebih terlihat dinamis
Caranya:
Login dulu ke blogger.com
Pilih menu Design
Klik Add a Gadget
Pilih HTML/JavaScript
Masukkan JavaScript di bawah ini
<script src="http://agungxzeg.googlecode.com/files/rainbowlink.js" type="text/javascript"></script>
Membuat cursor blog bertabur bintang
blog agan kurang menarik ?
inilah salah satunya buat blog agan terlihat menarik
cursor bertabur bintang
langsung saja cara membuat cursor bertabur bintang
inilah salah satunya buat blog agan terlihat menarik
cursor bertabur bintang
langsung saja cara membuat cursor bertabur bintang
Tukar Link
