About

Pages

Jumat, 08 Juli 2011

Membuat Kotak Sidebar Terpisah-Pisah

Membuat kotak sidebar terpisah-pisah bukanlah hal yang sulit di dunia blogger. saat ini berbagai desain blog telha bermunculan. Contohnya mendesain kotak sedebar blog kita. Untuk lebih jelasnya, anda akan mengerti tips ini jika anda melakukan apa yang akan saya berikan kepada anda.
Untuk membuat kotak sidebar blog kita terpisah-pisah ikuti langkah-langkha berikut.

1. Login ke blogger dengan akun saudara
2. Pada dasbor blog, pilih Rancangan
3. Kemudian pilih Edit HTML
4. Cari kode yang mirip seperti ini

.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Biasanya kode di atas berada antara kode <head> ... </head>
5. Modifikasi kode tersebut menjadi seperti ini:

.sidebar .widget {
background:#fff;
border:1px solid #6E6E6E;
margin:0 0 1.5em;
padding:0.5em;
}

Artinya setiap widget yang kamu tambahkan dalam elemen sidebar akan dipisahkan (margin:0 0 1.5em;) sebesar 1,5em ke bawah. Kotak sidebar tersebut berlatar putih (#fff) dan memiliki garis tepi berwarna abu-abu (#6E6E6E), sedangkan jarak teks dengan tepi kotak (padding:0.5em;) sebesar 0.5em.

Sbr: http://kelolablog.blogspot.com

Posted by at 0 comments

Membuat Halaman Intro di Blog

Apa yang dimaksud dengan intro disini? intro adalah apabila website tersebut dikunjungi tidak langsung ke halaman utama, namun terlebih dahulu disuguhkan oleh sebuah halaman yang umumnya adalah ucapan selamat datang atau navigasi, ada juga yang berupa gambar animasi ataupun dalam bentuk flash.
Untuk mempersiapkan file flash sebagai intro-nya, ada beberapa cara yang dapat teman Sobat blogger lakukan. di antaranya menggunakan program populer seperti adobe flash, swish dll. - pastikan file yang kita buat ukuran byte nya sekecil mungkin, jika ingin menggunakan sound/suara sebagai musik latar belakang atur format-nya ke midi file, jika menggunakan format Mp3 atau Wav kompresi file –nya dengan tool cool edit dll.

Baiklah kita langsung aja ke pokok permasalahan :

1. Login ke blogger
2. Pilih Rancangan
3. Pilih Edit HTML
4. Cari kode]]></b:skin>, dan letakkan kode script berikut di atas nya

#intro{
background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWrCnYh6BqNM-Fq7niuE2hQ5bWRjp4ImYJXGxnT3sJWcJ300rdLyduXALMd9L71G0Ifgmcvss3A3EVx1xqJTh9euw2ou3OHl1WlvHWFKcH61s8Pt_jCejtJtmzj3WJY0b0zp-tn6xBYo/) repeat-x top left fixed;
position:fixed;
width:100%;
height:100%;
margin:0;
padding:0;
z-index:100;
text-align:center;
visibility:hidden;
}
* html #intro{
position:absolute;
width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px");
}
#intro .welcome{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
font-size:30px;
margin-top:10%;
margin-bottom:1%;
text-shadow:1px 1px 1px #fff;
}
#intro a img{border:none}
.gohome, .gohome a,.gohome a:visited,.gohome a:active{
color: rgb(255, 0, 0);
font-weight: bold;
font-style: italic;
margin-top:4%;
font-size:25px;
text-shadow:1px 1px 1px #fff
}
.gohome a:hover{
color:#ffffff;
text-shadow:1px 1px 1px #f00;
text-decoration:none
}

5. Kemudian anda cari kode seperti ini </head> dan letakkan kode script berikut tepat
diatasnya

<script type='text/javascript'>
//<![CDATA[
/***********************************************
* Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)
* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
/*************************************************
* Blogger intro by http://www.blogspottutorial.com
**************************************************/
var persistclose=1
var startX = 0
var startY = 0
var verticalpos="fromtop"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}}return returnvalue;}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("intro").style.visibility="hidden";}
function staticbar(){
barheight=document.getElementById("intro").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY; }
return el; }
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y == (pY + startY - ftlObj.y)/0;}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y == (pY - startY - ftlObj.y)/0;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10); }
ftlObj = ml("intro");
stayTopLeft();}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>

6. Kemudian cari kode <body> pada blog anda, kemudian letakkan kode script berikut di bawahnya

<div id="intro">
<div class="welcome">
Welcome to my blog</div>
<a href="http://www.blogger.com/post-create.g?blogID=3865666885036770997" onclick="closebar(); return false"><img alt="go to my homepage" src="http://i234.photobucket.com/albums/ee208/decnote/cute-comment/Cute-hi5-60.gif" title="go to my homepage" /></a>
<div class="gohome">
<a href="http://www.blogger.com/post-create.g?blogID=3865666885036770997" onclick="closebar(); return false">Go to homepage</a></div>

7. Silahkan anda edit sendiri, sesuai dengan keinginan anda. Dan jangan Lupah Simpan Template

Selamt mencoba.....

Sbr:http://kelolablog.blogspot.com
Posted by at 0 comments
Langganan: Postingan (Atom)
 

Blogger news

Blogroll

About