Coba yang ini

Search

Showing posts with label Blog Tutorial. Show all posts
Showing posts with label Blog Tutorial. Show all posts

Blogger Archive Calendar

This is for New Blogger using Layouts templates only (blogspot or custom domain). Classic Templates not supported.

As with any template modifications, always make a backup before preceding !

Also, feeds for posts must be enabled in your settings (Blogger>Dashboard>Settings>Site Feed> Post Feed can either be set at Full or Short). Private blogs do not have feeds, so they are not supported.

Step #1

Go to Template>Edit HTML. Leave the Expand Widget Templates box UNCHECKED (default)

Image and video hosting by TinyPic

This code will replace your Archive widget. Scroll down and find yours in your template. Will look something like this.

Image and video hosting by TinyPic

Copy the following code, then highlight the archive widget as shown and replace it with a paste.

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>


At this point you may want to save the template. It should save without any errors, if not then make sure you followed the above, and copy/pasted correctly.

Find in your template the ending ]]></b:skin> tag and the ending </head> tag. It should look something like this in your template

Image and video hosting by TinyPic

Copy the following script, and paste it in between these two tags. Here's what you need.

<!-- Blogger Archive Calendar -->
<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Loading....";
var bcArchiveNavText = "View Archive";
var bcArchiveNavPrev = '◄';
var bcArchiveNavNext = '►';
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].href;
}
}
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);

}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}

function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
)
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
)

function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}

//))>
</script>
<script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar -->


Now save your template. It should save without errors, if not recheck your steps above. One more thing needs to be configured in your Archive Widget. Goto the Page Elements page, find your Archive Widget, and click to edit it. You'll see a screen like this

Image and video hosting by TinyPic

The title can be anything you want. The style MUST be Flat List as show. Options should NOT have Show Oldest Posts firsts checked. Archive Frequency MUST be Monthly. The Date Format can be anything you want. The calendar will accept whatever you decide here.

Save the widget. Then try it out. Go view your blog and if everything is correct you should have the calendar working now.

If you've made it this far, and it's working you'll note that without any style associated with it the calendar is a bit plain. But we've got some of that covered as well. Admire your work so far. Make sure it seems to function.

Good Luck


How To Get Carousel Viewer

Today I got an email from blog kang Rohman long I have been taking. Filled in the email about The Magazine Template R.1.2. and after i compare to the Magazine Template 3 was the view that there are called the Carousel Viewer. I try to input into my blog ( Magazine Template 3 ) was successful. You can see my blog under the title Buy Some Products From Me or you can visit Magazine Template R.1.2. live demo with Carousel Viewer in here.

But I do not know if this can be successful or not in template the others, because I only ask permission to post Carousel Viewer, and not how to do so. So please try it and if you do not succeed I apologize because I own fewer understand the code.

Well we do not need to elaborate more, it is better to direct our practice.

How To Get Carousel Viewer

  1. First you must have a photo or picture that you have saved on the web that provide file storage. If you do not have, maybe you can register in http://tinypic.com. After the register and upload you photo / image present to us to the next step
  2. You must first Login in Blogger.com / Blogspot.com
  3. Save your tamplate before edit
  4. Select layout --> edit HTLM
  5. Find this code

]]></b:skin>


6. Copy this code below and paste in the top of the code ]]></b:skin>

.carousel{
float:left;
margin: 0;
padding:0px;
}

.carousel .widget {
width: 920px;
background:#c4d5ec;
margin: 0;
padding:0;
}

.carousel h2{
display:none;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 910px; /*Width of Carousel Viewer itself*/
height: 173px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 10px; /*margin around each panel*/
width: 200px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#d9e5f4; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
padding:10px;
border:1px solid #ccc;
}


7. Find this code

</head>

8. Copy this code below and paste in the top of the code </head>



9. Now save u tamplate
10. Go to Layout Page, Elements tab, click Add a Gadget, click on the HTML / JavaScript
11. Copy the code below and paste to the Gadget



12. save
13. view you template
14. Finish

I hope this can work in your blog because it has been successful in my blog. Good luck.

If you want to see the original code you can download here. I have move to Notapad

Automatic link text and Banner

Automatic ...... maybe this is not news for us. But still I want to share with you, for who may not know, i hope this can help you to create automatic links text and banner. But before I want to thank to Uda & Marcelleno up the information.



Now we start practice

How to get automatic links text

  1. First you may Register in http://www.blenza.com/
  2. Fill in all fields question
  3. Wait for answers in the confirmation email you
  4. Login in accordance with the data that you send via email
  5. After login please click on the menu wizard
  6. At Step 1, please give a sign on the choice of the type of server you use, at this time because the server I use blogspot so I click on the option Blogger (classic template)
  7. On Step 2, please give a sign on the choice of the type of the view that we will choose, because at this time I only Free Member then I click on Original Auto Linkies
  8. On Step 3, the options will appear select a meme (optional), you should ignore it, let it be written *select*
  9. Please click the generate code option
  10. Next will appear a windows that displays the 2 scripts that we have to copy and paste to our blog
  11. For the first script that you must paste to the position of your template under the code . The Way : click Layout tab, click the Edit HTML Tab
  12. For the second script you paste to your gadget. The way : do click Layout tab, click Page Elements tab, click Add a Gadget, click on the HTML / JavaScript


Example of automatic link text



How to get automatic links Banner

  1. Open this website first http://www.plugme.net/
  2. Click on in the CLICK HERE TO GET YOUR FREE PLUGBOARD!
  3. Fill in all fields question, then click Register
  4. Login in accordance with the data that you send via email
  5. After login please click on the HTML Code
  6. Copy of HTML Code or Alternative Code. I suggest select copy HTML Code
  7. Paste to your gadget. The way : do click Layout tab, click Page Elements tab, click Add a Gadget, click on the HTML / JavaScript

Example of automatic link banner








How To Create Animation Label Cloud

A few days ago I get about how to create Animation Label Cloud from Marcellino's. Well now I want to share with you. Here's how to make :

  1. You must first Login in Blogger.com / Blogspot.com
  2. Save your tamplate before edit
  3. Select layout --> edit HTLM
  4. Find this code

<b:section class='sidebar' id='sidebar' preferred='yes'>



5. Then copy this code below and paste directly below the code above

<b:widget id='Label129' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://www.geocities.com/rum_marewa/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.marewa.info'>marewa</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "180", "100", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xfffffff");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

6. Do not save at first. Try to preview, if it has been successfully, stored new

7. Next to resize the width, length and color background

To change the size high, width and color background ((..))

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "((180))", "((100))", "7", "((#000000))");

To change the font color ((..))

so.addVariable("tcolor", "((0xfffffff))");

To change the font size ((..))

values='data:labels' var='label'><a expr:href='data:label.url' ((style='24'))><data:label.name/></a></b:loop></tags>");

To see a color here

I hope you can make it, please try

Pasang Benner Di Header Blog

Bisakah saya memasang banner di header blog. Jawabannya tentu bisa. Nah dibawah ini ada sedikit trik yang bisa dipakai untuk memasang banner di header blog. Yang pertama yang harus dilakukan adalah membuat sebuah banner menguploadnya / menyimpannya pada hosting lain. Contoh saya mengambil banner yang telah saya upload ke www.photbucket.com dan mempunyai alamat banner seperti di bawah ini :


http://i359.photobucket.com/albums/oo32/can301/Header/h17.jpg

h17

Dan berikut cara pemasangannya :

  1. Sign in di blogger
  2. Klik menu Layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
  5. Klik kotak kecil di samping tulisan Expand Template Widget
  6. Tunggu beberapa saat sampai proses selesai.
  7. Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan
/* Header ----------------------------------------------- */

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background:url(http://i359.photobucket.com/albums/oo32/can301/Header/h17.jpg)no-repeat top center;
}
}

8. Klik tombol Pratinjau untuk melihat perubahan yang ada
9. Bila sudah OK, klik tombol SIMPAN TEMPLATE
10. Selesai.

Nah itu langkah pertama, langkah kedua adalah :

  1. Klik menu Elemen Halaman
  2. KLik tulisan Edit yang ada pada elemen Header
  3. Tunggu beberapa saat
  4. Pilih radio button yang ada di samping tulisan dari komputer Anda
  5. Klik tombol Browse...
  6. Pilih banner yang telah di buat yang ada pada komputer sobat
  7. Tunggu beberapa saat sampai proses selesai.
  8. Gambar banner sobat akan di tampilkan
  9. Klik tombol SIMPAN PERUBAHAN
  10. Selesai

Selamat Mencoba.

Cara Mengubah Lebar Kolom Tamplate

Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika sobat mengalami hal yang demikian, lumayan nih ada tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

Silahkan ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan sobat :

  1. Sign in di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template
  5. Ganti kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus diganti sesuai keinginan sobat.


#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

#sidebar-wrapper {
width: 220px;
float: right;
}

#newsidebar-wrapper {
width: 200px;
float: left;
}

Definisi code

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna).

header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan sobat, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel, jika ingin lebih tebal sobat tinggal tambahin nilainya, atau jika sobat menginginkan garis tepi ini tidak ada maka sobat hapus saja kode ini.


#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Ini artinya outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Jadi dengan kata lain outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila sobat memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila sobat ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.

main-wrapper adalah kolom halaman posting, apa-apa yang kita posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan. Apabila sobat merasa kolom ini terlalu sempit atau kekecilan, maka sobat bisa menambahkan nilai, contoh 550 pixel. Apabila sobat berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.

#sidebar-wrapper {
width: 220px;
float: right;
}

Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar.

Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.

#newsidebar-wrapper {
width: 200px;
float: left;
}

Ini artinya kolom newsidebar-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri.


Semoga bermanfaat.


Membuat Sidebar Dalam Kotak Terpisah Pisah

Untuk apa kita membuat sidebar dalam kotak terpisah ? Jawabanya pasti, supaya blog kita kelihatan lebih menarik dari pada yang lainnya, betul kan ! Tekniknya simpel, yaitu anda tinggal memberi warna yang berbeda antara background widget dengan background di mana widget itu berada, kemudian beri jarak antara widget yang satu dengan yang lain dengan menggunakan perintah “margin” dalam hal ini margin-bottom (margin bawah), dan agar lebih terkesan kotak, maka widget tersebut di beri perintah border.

Dimanakan kode widget itu berada? setiap template tentunya berbeda satu sama lain, jadi bagaimana mencarinya ? Gampang, cari aja kode yang ada tulisan Widgetnya pasti ketemu betul gak, hahaha.. seperti contoh dibawah ini :

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

Namun dalam kasus di atas, ada dua kode widget yang di definisikan sama yaitu sidebar widget (halaman sidebar) dengan main widget (halaman posting) sehingga kedua widget tersebut akan selalu sama. Agar lebih flexibel dalam proses pengaturan widget, sebaiknya kode tersebut kita buat terpisah, sehingga kodenya jadi seperti ini :

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


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

Dengan kode di atas, maka anda tinggal menambahkan warnanya saja, gampang bukan.

Contoh untuk memberikan kesan sidebar widget mempunyai kotak yang terpisah-pisah anda bisa membuat variasi kode seperti ini :

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

Sedangkan untuk main.widget tinggal experiment sobat aja gimana bagusnya. Langkahnya sama dengan sidebar.widget

Selamat mencoba


Halaman Element Mempunyai Scroll Roll

Untuk membuat halaman elemen yang mempunyai scroll roll, ikuti langkah-langkah berikut :

1. Sing in ke blog.

2. Masuk ke Pengaturan

3. Tata letak.

4. Elemen Halaman.

5. Tambah Gadget.

6. Pilih untuk JavaScript/HTML.

7. Copy kode dibawah ini :


<div style="overflow:auto;width:300px;height:200px;padding:10px;border:1px solid #eee">

<a href="http://businternet.blogspot.com/2007/04/bikin-blog.html">Panduan membuat blog</a>

<a href="http://businternet.blogspot.com/2007/04/cara-setting-blog.html">Cara setting blog</a>

<a href="http://businternet.blogspot.com/2007/04/memilih-template.html">Memilih template</a>


</div>


Simpan element, view blog untuk melihat hasilnya :


Catatan

Warna merah harus diganti dengan yang punya sobat.

Didalam kode tersebut, yang berperan besar adalah kode yang ada dalam style. Dengan style itulah kita bisa membuat apa yang kita inginkan. Berikut adalah perintah-perintah yg di pakai :

overflow:auto; » kode ini agar tercipta scrolling atau penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.

width:300px; » adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 300 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).

height:200px; » adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 250px atau nilai yang lainnya.

padding:10px; » adalah kode pembuat jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px;

border:1px solid #eee » agar bidang tersebut terlihat ada kotaknya, jika anda tidak menginginkan ada terlihat kotaknya, maka tinggal di hapus saja.

Selain kode-kode tersebut, tentu saja anda bisa menambahkan berbagai variasi sesuai dengan keinginan, misalkan backgroundnya berbentuk gambar, fontnya yang berbeda atau apa saja sesuai dengan keinginan anda.



Selamat bereksperimen !


Cara Mengganti Warna Background

Setiap kali mengunjungi blog orang lain tentu ada sesuatu yang lain yang bisa kita perbandingkan dengan blog kita. Yang paling menonjol adalah warna background yang didtampilkan. Bagi blogger baru tentu ingin sekali kalau bisa merubah background dengan design sendiri. Nah disini ada beberapa tip yang bisa dipakai untuk merubah warna background.

Mengganti Warna Background

Untuk template minima klasik :

1. Sign in

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

5. Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :


 body { 
 background:#fff; 
 margin:0; 
 padding:40px 20px; 
 font:x-small Georgia,Serif; 
 text-align:center; 
 color:#333; 
 font-size/* */:/**/small; 
 font-size: /**/small; 
 } 


Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :


 body { 
 background:#E7E3E3; 
 margin:0; 
 padding:40px 20px; 
 font:x-small Georgia,Serif; 
 text-align:center; 
 color:#333; 
 font-size/* */:/**/small; 
 font-size: /**/small; 
 } 

6. Klik tombol Pratinjau untuk melihat perubahan

7. Jika sudah OK, klik tombol Simpan Perubahan Template

8. Selesai.


Untuk template minima baru :

1. sign in

2. Klik menu Layout

3. Klik menu Fon dan Warna

4. Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)

5. Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah

6. Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN

7. Selesai.



Mudah bukan?


Mengganti Background Dengan Image

Untuk mengganti background dengan image yang pertama tentu harus mempunyai file image tersebut. Setelah itu anda harus menguploadnya pada situs yang biasa sobat pakai. Kalau belum punya ini ada alamatnya silakan sobat kunjungi dan tentu harus regester dulu. (www.photobucket.com ).

Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !

Untuk template minima klasik :

1. Sign in

2. Klik menu Template

3. Klik menu Edit HTML

4. Copy seluruh kede Template, paste pada notepad lalu save untuk backup data

5. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :


 body { 
 background:#fff url('http://amen24.googlepages.com/pattern_096.gif') 
 margin:0; 
 padding:40px 20px; 
 font:x-small Georgia,Serif; 
 text-align:center; 
 color:#333; 
 font-size/* */:/**/small; 
 font-size: /**/small; 
 } 

6. Klik tombol Pratinjau untuk melihat perubahan

7. Jika sudah OK, klik tombol Simpan Perubahan Template

8. Selesai.


Untuk template minima baru :

1. Sign in


2. Klik menu Layout


3. Klik menu Edit HTML


4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data


5. Klik kotak kecil di samping tulisan Expand Template Widget


6. Tunggu beberapa saat sampai proses selesai


7. Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :



 body { 
 background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif') 
 margin:0; 
 color:$textcolor; 
 font:x-small Georgia Serif; 
 font-size/* */:/**/small; 
 font-size: /**/small; 
 text-align: center; 
  


8. Klik tombol Pratinjau untuk melihat perubahan


9. Bila sudah OK, klik tombol SIMPAN TEMPLATE


10. Selesai.



Selamat mencoba !