Bikin Blog Lebih Dinamis

kali ini saya akan menulis bagaimana blog kita biar lebih dinamis lagi, atau sedikit merasakan pengelola-an  halaman blog gaya website berbasis content manajemen sistem (CMS). 

terutama mengelola elemen  yang ada di halaman depan blog  berbeda penampilanya dengan halaman yang di buka.

Untuk lebih jelasnya silahkan saudara pilih  salah satu judul tulisan yang ada pada blog ini.kemudian saudara perhatikan perubahan tampilan di bagian sidebarnya. Maka elemen profile, shoutbox dan recent komentar akan menghilang. Sedang elemen lain, yaitu elemen feed yang saya beri judul Template, tiba-tiba Tampak pada halaman yang di buka.

Coba kembali kebagian halaman utama tekan tab menu bertuliskan Home di bagian atas.
Berbeda bukan ? pada hal saya lakukan ini pada satu blog, dan tak perlu membuat blog baru lagi.

Gaya page dinamis ini sangat cocok sekali, bagi blog yang contentnya ingin menampilkan banyak link seputar ilmu pengetahuan, kumpulan tutorial dsb. juga sangat cocok bagi saudara yang ingin menampilkan diri anda dan kesukaannya.- artinya dari pada bernafsu memasang semua  elemennya pada halaman muka, lebih baik jika di bagi pada halaman lainnya.- tinggal kita pandai-pandai memilah dan memilah, elemen mana yang cucok di tampilkan pada halaman depan, dan elemen mana yang pas buat tampil di halaman selanjutnya.

Cara Install.

untuk menginstall-nya ke dalam blog sangatlah mudah, kita hanya menambahkan dua baris kode pada setiap halaman elemen yang di tambahkan atau yang terpasang.

Pertama : Menampilkan elemen hanya ada pada halaman frontpage atau halaman depan.

Pilih salah satu elemen yang hanya tampil di halaman depan blog, misalkan saya memilih elemen text  kemudian buka Template->Edit Html dan jangan lupa tandai kotak kecil di samping tulisan Expand Template Widget. kemudian cari tulisan atau kode elemen Text1. setelah ketemu tambahkan dan letakan dua baris kode pada posisi seperti tulisan yang saya  beri warna.

<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond="data:blog.url == data:blog.homepageUrl">

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>

<div class="widget-content">
<data:content>
</data:content>
</div>
</b:if>

<b:include name="quickedit">  

</b:includable>
</b:widget>

Kedua : Menampilkan elemen hanya ada pada halaman selanjutnya.

Setelah kita memilih elemen mana yang akan tampil pada halaman selanjutnya, lakukan seperti langkah pertama. kemudian tambahkan dan letakan dua baris kode pada posisi seperti di bawah ini.

<b:widget id="Text1" locked="false" title="" type="Text">
<b:includable id="main">
<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->
<b:if cond="data:title != """>
</b:if></b:if></b:includable></b:widget><h2 class="title"><data:title></data:title></h2>

<div class="widget-content">
<data:content>
</data:content>
</div>

<b:include name="quickedit">

</b:if>   

</b:includable>
</b:widget>

Mencari kode elemen atau widget.

Perlu saudara ketahui setiap menambahkan sebuah elemen   secara default blogger telah memberi nama sesuai dengan elemennya. misalkan elemen Html/javascript di namai Html, elemen Daftar Link di namai LinkList, elemen Teks di namai text, Label di namai label. dst.
Dan setiap menambahkan elemen yang sama misalkan elemen text, maka blogger menemainya dengan Text1, Text2, Text3 dst. Html/javascript jadi Html1, Html2,Html3 dst.

Atau agar mudah mencari elemen yang kita tambahkan, bagusnya saudara memberikan judul pada setiap elemen. misalkan untuk elemen daftar liks atau linklist dengan judul bloggrol dst.

Mudah bukan

Sumber tulisan dari :

1. adding-front-page-to-your-blog by Hoctro's place

2. related-posts by purplemoggy

Technorati tags: Blogs, New Blogger

Pasang Navigasi Bar Ala Boogle Blog

Jika ente tidak tertarik dengan Navbar default dari blogger dan ingin menggantikan dengan Navbar seperti yang terdapat pada blog ini, ente bisa menggikuti tutorial di bawah secara step by step.

Langkah Pertama :

Menghilangkan Navbar Blooger dengan cara menambah kode css ini

#navbar-iframe{display:none; height:0; visibility:hidden}

Simpan sebelum tag body ini.

body {
  background:$bgcolor;
  margin:0;
  color:$textcolor;
  dan seterusnya
  }

 

Langkah Kedua :

Tambahkan kode css navigasi ini.

/************** NAV1 *************/

#nav1{
height:32px;
line-height:32px;
background:white;
padding:0 10px;
background:transparent;
border-bottom: 1px solid #cfe4f2;
}
#nav1 ul,
#nav1 ul li
{
margin:0;
padding:0;
list-style:none;text-align:left;
    }
#nav1 ul li{
float:left;
display:block;
    }
#nav1 ul li a:link,
#nav1 ul li a:visited{
color:#0007EE;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;;
display:block;
    }
#nav1 ul li a:hover{
color:black;
    }
#nav1 ul li ul li{
float:none;
display:block;
    }
#nav1 ul li ul li a:link,
#nav1 ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
    }
#nav1 ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
    }
.submenu {
position: absolute;
width: 160px;
background: #fff;
padding:10px;
border:solid 1px #2E4B88;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
    }

#nav1 ul li#nav1_rss {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJD8XlNygftOlloKHWr_NmMMEZwI78RA3DMFPFb3Y9OIxsA29-zsNq88AtyolB8BJNk3wduTdoCeMvgxJOXTmqnKuPuYD3ekQJwfNE6DOOoktMAekqIfWzhzgZdtJghekhdDmSa-Ro_lZ/') no-repeat 10px;
padding-left:26px;
float:right;
}
#nav1 ul li#nav1_cat {
background:transparent;
float:right;
padding-left:10px;
}

Simpan sebelum kode ini.

]]></b:skin>

Langkah Ketiga :

Tambahkan javascript ini

<script src='http://santi23.fileave.com/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
function nav1(){
    $(&quot;div#nav1 ul li&quot;).mouseover(function() {
            $(this).find(&#39;ul:first&#39;).show();
    });
    $(&quot;div#nav1 ul li&quot;).mouseleave(function() {
        $(&quot;div#nav1 ul li ul&quot;).hide();
    });
    $(&quot;div#nav1 ul li ul&quot;).mouseleave(function() {
        $(&quot;div#nav1 ul li ul&quot;).hide();
    });
};
$(document).ready(function(){
    nav1();
});
</script>

Simpan javascript di atas sebelum kode ini

</head>

Langkah Keempat;

Masukan html navigasi ini.

<div id='nav1'>
<ul>
    <li><a href='url / alamat link tujuan' >Home</a></li>
    <li class=''><a href='#' title='About'>About</a></li>
        <li><a href='#' title='Child Pages Test'>Cara Membuat Blog</a>
          <ul class='submenu'>
       <li><a href='url / alamat link tujuan' title='Membuat Blog'>Membuat Blog</a></li>
       <li><a href='url / alamat link tujuan'  title='pengaturan blog'>Pengaturan</a></li>
       <li><a href='url / alamat link tujuan'  title='membuat tulisan'>Menulis</a></li>
          </ul>
        </li>
        <li id='nav1_rss'>    <a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Subscribe to Feed</a></li>
    <li id='nav1_cat'><a href='/'>Categories &#9660;</a>
        <ul class='submenu'>

            <li><a href='url / alamat link tujuan'  title='View all posts filed under Test category'>Test category</a></li>
        <li><a href='url / alamat link tujuan' title='category 2'>Test category 2</a></li>
        <li><a href='url / alamat link tujuan' title='category 3'>Test category 3</a>
        </li>

        </ul>
    </li>
</ul>
</div>

Simpan kode di atas sesudah kode ini.

<body>

Langkah Kelima

Setelah itu klik “ Save Template “ ( Simpan Template )

Bagaimana cara menggedit link pada navigasinya

Setelah Navbar –nya terinstall di blog kita, sekarang yang perlu ente pelajari dan lakukan adalah menggedit link url pada menu –nya sesuai dengan keingginan link tujuan ente.

coba perhatikan ini.

<li><a href='url /alamat blog ente'>Home</a></li>

Url / alamat blog ente = ganti tulisan itu dengan url blog ente misal; http://www.namablog.blogspot.com/ – dengan demikian maka setiap penggunjung menekan menu “ Home “ maka ia akan kembali pada halaman depan blog ente.

begitu juga

Url / alamat link tujuan = ganti dengan url / alamat link yang ingin ente tuju. misalkan jika ente punya alamat facebook jadi www.myfacebookuuu.com dst.

Sesuaikan juga nama menu navigasinya  dengan url / alamat link. misal Membuat Blog di ganti dengan Myfacebook. dst.

Setelah beres menggedit link url –nya seperti biasa Simpan Template

Technorati tags: Ngeblog, New Blogger

related post

V r.Beta Sebenarnya code tentang related post ini sudah ada dan ramai orang memakainya sejak tahun 2006 lalu, namun pada blog ini saya baru memakainya tiga hari yang lalu ...hiksss.. emang gaptek..

Akan tetapi biarpun terlambat, namun akhirnya aku pakai juga dan hasilnya sukses dan sangat senang sekali, karena blog ini ada penambahan "ehem" =)) , seperti pemilik blog lainnya yang sudah pada jago-jago ngeblog.

Cara kerja Related post sendiri, secara default bekerjanya  hiden alias tersembunyi dalam fronpage ( halaman depan ) blog kita, namun ketika pengunjung menekan salah satu judul pada postingan ( atau read more / pemengalan artikel ) maka  otomatis  Related Post dengan label yang sama akan menampakan dirinya ( hixhixhix hantu kale ).

Kalau masih binggung dengan tulisan saya ini coba tekan judul postingan  atau tulisan read more di bawah ini.

Dan coba lihat di bagian sidebar blog saya ada sebuah elemen baru dengan judul VR RELATIF.

kita pun bisa menaruh elemen Related Post-nya di bawah postingan atau di atasnya. terserah kita dan suka-suka kita untuk menaruhnya.

Install Related Post

Pertama :
buka halaman Template -> Edit Html dan jangan lupa tandai kotak di samping tulisan Expand Template Widget. Kemudian simpan kode di bawah ini sebelum tag </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Kedua :
Setelah memasukan kode di atas, kemudian cari kode di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Jika Susah mencarinya, gunakan pencarian pada browser yang kita pake. untuk FireFox dan Ie tekan berbarengan Tab Ctrl+F.

Setelah ketemu kode di atas ganti dengan kode di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Kemudian tekan tulisan Simpan Template.

Ketiga :
Sekarang masuk ke  Template -> Elemen Halaman, kemudian tambahkan sebuah widget atau elemen Html/JavaSricpt. dan masukan kode di bawah ini.
Namai atau beri judul Related Post.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Keempat :
Setelah beres pekerjaan di atas, sekarang kita Kembali buka  Template -> Edit Html dan jangan lupa tandai juga kotak di samping tulisan Expand Template Widget. Kemudian kita cari code widget atau halaman elemen yang kita tambahkan yang di namai Related Post tadi, atau dengan bantuan kotak pencarian cari tulisan Related Post.

dan setelah ketemu kode-nya, kita hanya perlu menambahkan dua baris kode yang saya tandai dengan huruf tebal dan di beri warna.

misalkan kode widget-nya seperti di bawah dan penambahan dua baris kode yang hurufnya di pertebal juga di beri warna.

<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Kemudian Simpan Template.

Pekerjaanya sudah selesai, coba kita periksa apakah berjalan dengan benar dan sesuai.

Note:
Sedangkan untuk jumlah yang akan di perlihatkan oleh RRelated Posts ini.Kita bisa merubahnya sesuai dengan jumlah yang kita inginkan.  kalau kita ingin merubahnya cari saja kode dalam langkah kedua di atas yakni tulisan ini ,  max-results=10. secara default akan tampil sebanyak 10 post, gantilah angkanya sesuai dengan yang kita inginkan.

Perhatian.

Tulisan di atas merupakan hasil terjemahan. Jika merasa kesusahan untuk di mengerti cobalah masuk pada sumber aslinya di blog purplemoggy ini. mudah-mudahan lebih simple dan cepat di pahami.

Sumber dari :

purplemoggy

Technorati tags: Blogs, New Blogger

Photoshop Brush The Simpsons

View Donlot : photoshopessentials.com

Technorati tags: Photoshop Brush, Belajar Photoshop

Gambar Dan Tutorial Header layout

Sebuah header atau image header untuk blog atau weblog, adalah salah satu unsur dari unsur-unsur  visual yang  paling utama. dan sedikit banyak merupakan pesan dan membawa pengaruh bagi keseluruhan dari conten sebuah web atau blog ( heuheuheu... katanya ciiihhh ).

Untuk itu dalam postingan ini, saya mempunyai beberapa link situs tentang header ini, baik itu gambar header yang sudah jadi, dan kita tinggal memakainya, atau juga link tutorial photoshop tentang membuat header.

Mudah-mudahan kumpulan link yang sempat saya bookmarks ini, merupakan sebuah info yang berharga dan dapat membantu bagi yang kesusahan mencari gambar untuk header blognya,  dan juga bagi yang suka dengan photoshop walaupun tidak terlalu banyak, mudah-mudahan tutorial membuat headernya dapat menambah pengalaman dan pengetahuan baru.

selamat menjelajahi.

 

 

View Web : enricocasarosa.com

View Web : freewebpageheaders.com

View Web : www.digitalwestex.com

Tutorial Photoshop Header Layout

 

View Web : adobetutorialz.com

 

View Web : adobetutorialz.com

View Web : www.photoshop-pack.com

View Web : www.dutorials.com

View Web : www.avivadirectory.com

Dalam web yang sama

1.bioshock-website-header
2.spatter-paint-header-navigation
3.designing-a-navigation-header-for-a-portal
4.navigation-header-for-a-jewelry-website
5.smooth-header-tutorial
6.gears-of-war-website-heade

View Web : www.thedesignworld.com

View Web : www.thedesignworld.com

Technorati tags: Blog Layout, Desain Header

Ngedesain Web Layout

Untuk melanjutkan postingan sebelumnya tentang penyedia gambar gratis untuk header dan tutorial membuat header dalam program photoshop (baca di sini ). Sekarang saya akan kasih informasi link tentang tutorial desain web layout dengan photoshop, cukup banyak juga sih yang saya sempat bookmarks, namun di sini saya telah memilih beberapa desain web layout yang menurut saya bagus.

Tentu saja setelah kita sudah paham cara ngedesain web layout tugas selanjutnya memotong-motong gambar ke dalam beberapa bagian yang dalam photoshop di sebut dengan teknik Slicing. jangan kawatir untuk masalah yang satu ini aku nemuin sebuah situs yang kebetulan  berbahasa indonesia, jadi kita akan lebih paham dengan teknik yang satu ini.

Selamat Belajar.

1. grungy-web-layout-2

View Web : photoshopstar.com

2. red-clan-layout

View Web : psdtutz.com

3. band-website-template

View Web : photoshopstar.com

4. Professional-Mobile-Portal-Web-Layout

View Web : adobetutorialz.com

5. Imagination-is-our-power

View Web : adobetutorialz.com

Dalam Web yang sama :

6.Modern-Web-Layout
View Image : Preview 
View Tutor : adobetutorialz.com

7.Online-Consulting-Layout

View Image : Preview
View Tutor : adobetutorialz.com

8.Gaming-source-design

View Web : avivadirectory.com

9.clean-white-business-template

View Web : photoshopbox.com

 

TEKNIK SLICING

View Tutorial : eddy.ptpci.co.id

 

Oke bro semoga sukses. kalau udah berhasil, kontek-kontek aku doank.

Technorati tags: Blog Layout, Web layout

Membuat Header Dgn Stripe Generator 2.0

KIta lanjutkan tulisan tentang header ,namun yang saya akan tulis sekarang yaitu membuat header dengan bantuan Stripe Generator 2.0. dan untuk eksekusinya saya mengunakan template dari Amanda Fazani di situsnya bloggerbuster.com.

karena secara keseluruhan aku suka dengan template ini, cuman warna headernya yang ngeping terlalu gerli bagi saya yang sangat macho.

Setelah mengalami pengeditan di headernya dan beberapa perubahan akhirnya yang ngeping itu menjadi seperti ini. lihat demo.

Jadi yang mau ikutan untuk ngerubah atau ngedit headernya silahkan donlot dulu Girl Web 2.0 Style Template di sini.

STRIPE GENERATOR 2.0

Setelah mendonlot template-nya buat blog baru dengan tata cara dan upacara seperti biasanya kita membuat blog. kemudian buka situsnya Stripe Generator 2.0.com, Setelah terbuka situsnya ganti settingan- nya semua dari mulai stripe size, spacing sampai dengan orientation seperti settingan gambar di bawah ini. ( bila kurang jelas tekan saja di atas gambarnya )

Keterangan Settingan :

Tripe Size : 8
Spacing    : 1
Stripe Color (s) : 97080E
Background Style : yang bergaris kuning ( di tengah )
Gradient Height : 200
Background Color : 404040 dan A80F0F
Stripe Orientasi : yang bergaris kuning.

Setelah beres merubah semuanya kemudian tekan tombol tulisan download, dan  simpan di hardisk.

Tambah Garis Sedikit

Sebenarnya dengan hasil settingan itu, gambarnya sudah cukup untuk di pasang, akan tetapi kita akan membuat dan menambah  aksen garis sedikit  di bawahnya dengan bantuan program Adobe Photoshop. (jika alergi dgn photoshop saya telah membuat hasilnya tenang saja ).

Sekarang file yang tadi di simpan buka di program photoshop.

Buat Kotak Kecil di bawahnya dengan Rectangular Marquee Tool dan beri warna Hitam . Kemudian simpan dengan format PNG Nilai Color 256. ( baca juga cara menyimpan gambar untuk web di sini )

hasilnya jadi seperti ini.

Tiba Saat-nya

Upload gambar di atas ke tempat kita biasa menyimpan gambar.( baca cara mengupload gambar di sini) . Setelah itu buka blog kita dan masuk ke dalam halaman pengeditan Template kemudian tekan tulisan Edit Html.

 

Cari kode di bawah ini.

body { background:$bgcolor url(http://templates.bloggerbuster.com/girly_web_20/background.jpg) repeat-x
top left;
margin:0;
color:$textcolor;
font:x-small Helvetica sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Ganti alamat gambar yang bertuliskan merah di atas yakni http://templates.bloggerbuster.com/girly_web_20/background.jpg dengan alamat gambar kita. ( baca cara mengupload gambar di sini)atau bagi yang biasa terima jadi bisa pake alamat gambar di bawah ini. http://jaloee.googlepages.com/stripe_9f.png

Setelah itu tekan tulisan SIMPAN PERUBAHAN. beres.

Oh kalau mau juga template perubahannya di donlot silahkan donlot saja di sini. ( akan tetapi perlu banyak di edit juga dink ) .

Untuk merubah Logo-nya cari kode di bawah ini. dan ganti alamat ulr-nya dengan alamat logo sendiri.

#header-inner {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/jaloe/Header%20Stripe%
20Generator/Internet_Search.png) left center no-repeat;
padding: 0 0 0 80px;
margin: 0 auto;

Dan untuk menambah alamat url Tab Menu-nya cari kode di bawah ini.  ( baca cara cepat menemukan kode html )

<!-- Home Page Link -->
<a class='nav-section' expr:href='data:blog.url' style='color: #fff; text-decoration:
none;'>Home</a>
<!-- About link add your link here -->
<a class='nav-section' href='(alamat url )' style='color: #fff; text-decoration: none;'>About</a>
<!-- Contact link add your link here -->
<a class='nav-section' href='( alamat url )' style='color: #fff; text-decoration:
none;'>Contact</a></div>

Ganti Tulisan warnah merah di atas dengan link alamat yang kamu inginkan. Sedangkan keterangan yang lainnya baca di bloggerbuster.

Technorati tags: Belajar blog, New Blogger

Banner Button

Setelah lama tertunda karena malezzz, akhirnya tulisan tentang banner button beranimasi kelar juga.nampak sederhana, akan tetapi tulisan ini  di tunjukan bagi yang belum paham cara memainkan animasi dalam program photoshop. untuk mengikuti tutorialnya silahan anda donlot dulu file psd-nya di sini.

Step 1

Buka program photoshop, kemudian buka file Abizs.psd yang kita donlot tadi.

  

Step 2.

Untuk photoshop CS 1 ke bawah, buka menu- file edit in image ready, setelah terbuka program image ready-nya baru buka menu- windows-Animation. Sedangkan untuk photoshop Cs 2 ke atas kita tinggal buka menu-windows- animation.

Step 3.

Setelah terbuka windows animation-nya kemudian,tekan tombol Duplicates Selected Frames ( yg bergambar halaman kecil...lihat gambar. ) sebanyak lima frames.

hasil pengandaan akan terlihat seperti gambar ini.

Step 4.

Pindahkan Pemilhan pada Frame 2.

Step 5.

Pada palet layer , tandai layer penutup sehingga nampak sebuah icon mata.

 

Step 6.

Pindahkan pemilihan pada Frame 3. Kemudian pada palet layer tandai layer penutup seperti langkah ke 5. Setelah itu tekan tombol  Right Arrow , untuk mengeser layer penutup  ke samping kanan hingga menutupi hurup B. lihat gambar

Step 7.

Pindahkan pemilihan pada Frame 4. kemudian ulangi dengan menandai layer penutup. dan setelah itu tekan Right Arrow di keyborad hingga menutup hurup I. ulangi langkah 4, 5 dan 6 sampe frame 6.

Step 8.

Setelah semua frame memiliki aksi animasi, langkah selanjutnya sambil menekan tombol Shift di keyboard pilih frame pertama sampe frame terakhir ( Memilih Frame Semuanya ).

Kemudian tekan tombol Selects Frame Delay Time. Delay-nya sekitar  0.2 second. lihat gambar.

 

Step 9.

Apakah animasi yang akan kita tampilkan secara berulang, sekali atau kita sendiri yang menentukannya. untuk mensetting ini pilih satu dari tombol di samping bawah kiri palet animation.

Tombol Setting Animasi	Pemilihan

 

Step 10.

Sekarang coba tekan tombol plays animation.

Step 10.

Simpan filenya ke dalam format gif.

Technorati tags: Belajar photoshop, Banner

Menambah Kolom di New Blogger

Iseng-iseng liat extremetracking ternyata ada empat orang lebih  yang nyasar ke blog ini nyari cara bikin atau nambah kolom template na menjadi ( 3 ) tiga kolom. Sebab itu sekalian saja saya bikin postingan tentang bagaimana caranya menambah kolom di template new blogger.

Baiklah untuk menambah layout menjadi ( 3 ) tiga kolom, saya lebih suka mengunakan sistem persen ( % )dari pada mengunakan sistem angka. Bukan apa-apa sih, kalau mengunakan angka terkadang menjadi ribet dalam menentukan margin-nya, lagi pula ketika saya buka di Template Tab Elemen Halaman posisinya sering berantakan seperti ini.

" Perlu di Ingat kunci perubahan lebar akibat penambahan kolom terletak pada nilai Outer-wrapper nya. "

Template yang saya pake template minima .-  jadi yg ingin mengikuti tutor ini mesti di istallkan dulu template minima-nya , juga biar seragam kita merubah OUTER-WRAPPER-nya menjadi 80%. 

1. MENAMBAH KOLOM POSISI MAIN CONTENYA DI TENGAH.

 Seperti biasa untuk mengedit layout buka tulisan atau TAB EDIT  HTML. 

Dan untuk kasus ini biarkan  saja Expand Template Widget dalam ke adaan kosong ( tidak di tandai ).

oke sekarang cari kode ini.

<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
      </div>

Setelah itu masukan di atasnya kode berikut ini.

<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section></div>

Sekarang scroll mouse ke atas ke bagian kode Css-nya. temukan kode ini.

#sidebar-wrapper {

width: 220px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

di bawah-nya masukan kode ini.

#newsidebar-wrapper {

width: 220px;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Tugas kita sekarang merubah nilai lebar, margin dan float-nya.
yang pertama rubah nilai WIDTH dari OUTER-WRAPPER -nya menjadi WIDTH : 80%; ( selalu ingat di tutup dengan titik koma.) 

#outer-wrapper {

width: 80%;

margin:0 auto;

padding:10px;

text-align:left;

font: $bodyfont;

}

Yang Kedua rubah  nilai WIDTH dari MAIN-WRAPPER -nya menjadi WIDHT : 55%; dan tambahkan pula sintax Margin left  nilainya sekitar  2% cukup. yaitu : Margin-left: 2%;
jadi bila di bandinghkan dengan kode asli-nya kode  perubahannya seperti di bawah ini.

#main-wrapper {

width: 55%;

margin-left:2%;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

" Sekarang tinggal tersisa 45% lagi, yang dibagikan untuk kedua sidebar. terserah mau nilai sidebarnya sama atau berbeda, yang jelas mesti ada sisa buat nilai marginnya. Jadi kalau mau sidebar keduanya sama berarti nilainya  sekitar 20%. dan sisanya yang 5% untuk nilai margin"
lanjut
Yang ketiga merubah nilai WIDHT dan menambah Margin left  dari SIDEBAR-WRAPPER menjadi seperti di bawah ini.

#sidebar-wrapper {

width: 20%;

margin-left:2%;

float: right;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Yang ke empat NEW SIDEBAR-WRAPPER atau Sidebar Baru. Sidebar ini  yang mesti dirubahnya adalah  nilai WIDHT dan juga merubah nilai FLOAT nya menjadi Left. jadi WIDHT:20%; , Float:Left;  Seperti di bawah ini.

#newsidebar-wrapper {

width: 20%;

float: left;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Pekerjaan terakhir ialah merubah bagian HEADER-WRAPPER -nya menjadi WIDTH :100%;

#header-wrapper {

width:100%;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Dan begitu juga bagian FOOTER -nya sama WIDTH:100%.

#footer {

width:100%;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

 

Kenapa mesti 100% ( seratus persen ) ? ... ingat ! Outer-Wrapper merupakann wadah atau bungkus dari header, content ( main dan sidebar ) juga Footer -nya. ( dan mengunakan 100 % untuk kasus Template Minima )

Setelah beres semuanya, jika kita tekan PRATINJAU ngga terjadi apa-apa ? .. tenang saja jangan panik !!! itu karena memang kita belum menambah widget apapun di sidebar barunya ( kamu harus percaya )... jadi kita tekan saja tulisan SIMPAN TEMPALTE  dan buka tulisan atau  TAB ELEMEN HALAMAN. 
bravo kita sukses sekarang menambah sebuah kolom baru !!.
coba tambahkan di sidebar baru sebuah WIDGET POLLING , karena kita akan melanjutkan tentang menambah kolom di new blogger ini ,yaitu bagaimana menambah kolom kalau  posisi kedua sidebarnya sisi kanan atau sisi kiri ( seperti layout blog ini ).- itu juga kalau ngga malas  nulisnya .
Yes jadi tambahkan sekarang widget polling.. ( hanya sebagai alat untuk acuan  saja ).

 
tunggu saja sambungannya.

del.icio.us tags: Belajar Blogs, New blogger