remoxp

Setelah mencari-cari tutorial membuat footer 3 kolom dengan background di google akhirnya saya menemukannya. ternyata sekarang cukup sulit untuk menemukan tutorial yang tepat di google, selain dikarenakan maraknya blog auto content juga di karenakan banyak blogger yang menembak keyword demi kepentingan pribadi. Saya menemukan beberapa tutorial membuat footer tiga kolom di google tapi hanya beberapa yang dapat di praktekkan dan yang lainnya bermasalah. Beberapa masalah itu adalah sebagai berikut:

• 1. Bukannya tiga kolom, tetapi footer 3 baris. Haha, buatnya 3 kolom, kok jadinya 3 baris. Saya sampe bingung, apalagi saya belum ahli dengan kode CSS template blogger.
• 2. Warna atau tampilan background tidak dapat diganti. Inilah yang mendorong saya untuk mencari tutorial membuat footer 3 kolom dengan background di google, karena tutorial saya tentang menambah footer 3 kolom yang dahulu backgroundnya tidak dapat diganti.
• 3. Template tidak dapat disimpan karena Error. Tapi akhirnya bisa, fyuh....

Setelah belajar CSS blogger template , akhirnya saya sedikit mengerti cara membuat footer 3 kolom dengan background di blogspot dan jadi juga footer 3 kolom blog forantum ini. Walaupun saya belum mengerti benar, berikut ini cara Membuat Footer 3 Kolom dengan Background di blogspot:

• 1. Login ke blogger dan masuk ke Dasbor.
• 2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand Template Widget")
• 3. Cari kode ]]></b:skin>
• 4. Letakkan kode CSS berikut ini diatas ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
background:#444 url(http://img169.imageshack.us/img169/937/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}

• 5. Cari kode <b:section class='footer' id='footer'>  dan ganti dengan kode pengganti di bawah ini:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>

• 6. Apabila tidak ada kode yang saya maksud, letakkan kode pangganti diatas kode <!-- end content-wrapper -->
• 7. Apabila masih belum ketemu, letakkan kode yang pengganti tadi dibawah kode CSS bagian footer atau bottom.
• 8. Lalu simpan....

Maaf ya tutorial ini agak membingungkan, karena saya sendiri bingung, hehehe. Yang penting sobat belajar saja mempelajari kode-kodenya, semoga berhasil aja ya....

Free Template Blogger collection template Hot Deals SEO

Jika kamu telah memiliki sebuah blog, pastinya kamu pingin buat blogmu menjadi blog yang memiliki penampilan yang semenarik mungkin kan?. salah satu cara untuk membuat tampilan blog menarik adalah dengan menggunakan template yang bagus, tapi ada lagi nih masalahnya, jika aja kamu udah cari muter-muter sampek berkunjung dari satu website ke website yang lain, dan akhirnya dapet template yang cocok, tapi ukuran kotak postingan, sidebar, Header dan Footernya yang gak cocok sesuai keinginan kamu jadinya bakal jelek kan dan bikin kita jengkel kan jadi buat ngebenerinnya, kamu gak usah mencari-cari template lain lagi, soalnya bakal butuh waktu yang lama dan di sini saya bakal kasih solusinya, untuk mengubah ukuran Halaman Blog, Halaman postingan, side bar, Header dan Footer Blog agar bisa di tampilkan sesuai keinginan kita cukup dengan mengedit Code HTML Blog mu.

Untuk itu ikuti langkah-langkah berikut ini :
1. Login ke Blog Kamu
2. Klik tata Letak
3. Klik Edit HTML
4. Disarankan sebelum mengedit Kode Html kamu,silahkan kamu membackup Code HTML kamu, demi keamanan, jika terjadi sesuatu yang tidak di inginkan.

• Untuk mengedit ukuran Halaman Blog

Cari kode di bawah ini:

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

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar halaman blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Halaman Posting

Cari kode di bawah ini:

#main-wrapper {
width: 410px;
float: $startSide;
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 */
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Halaman Posting, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Sidebar Blog

Cari Code di bawah ini:

#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Side Bar Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Header Blog,

Cari Code di bawah ini:

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

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Header Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

• Untuk mengedit ukuran Footer Blog

Cari Code di bawah ini:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Keterangan :
Untuk memudahkanmencari Code di Atas gunakan bantuan dengan mengeklik Ctrl + F
Untuk untuk merubah ukuran lebar Footer Blog, kamu cukup merubah angka pada width sesuai dengan keinginan kamu.

Catatan:
Jika lebar salah satu dari kelima elemen yang telah di sebut di atas (Halaman Blog, Halaman Posting, Side Bar Blog, Header Blog, dan Footer Blog) diubah, maka akan mempengaruhi Keserasian elemen yang lain. Oleh karena itu, jika Anda ingin merubah lebar salah satu elemen, maka anda juga harus menyesuaikan dengan lebar elemen yang lain, karena jika antara satu elemen yang satu dengan yang lain tidak serasi, maka tampilan blog anda akan menjadi kacau, anda tidak mau kan. Kalau tujuan anda yang mulanya ingin mempercantik blog anda justru ujung-ujungnya malah merusak blog anda sendiri maka dari itu. Hati-hati,,,

Sumber: http://teoringeblog.blogspot.com

Share By: ForAntum

Free Template Blogger collection template Hot Deals SEO

Comment Owner Berbeda dengan Pengunjung maksudnya adalah kotak komentar dari pemilik website akan berbeda dengan kotak komentar milik pengunjung apabila memberikan komentar.

Cara Membuat Comment Owner Berbeda dengan Pengunjung adalah sebagai berikut :

Langkah pertama yang harus Anda lakukan adalah Log in ke blogger dan masuk menu Layout kemudian masuk menu Edit HTML

Jangan Lupa centang "expand widget templates"
Lalu taruh Code dibawah ini diatas code ]]></b:skin

.comment-body-author {
background: #FFFF29; /* Warna Background */
border:1px dotted #FF2929; /*Border*/
margin:0;
padding:0 0 0 20px;
}

Silahkan Edit Code CSS diatas sesuai kreasi Anda sehingga tampilan comments owner Anda menarik

Langkah selanjutnya masih di menu Edit HTML dan tanda "Expand Widget Templates" masih tercentang
Kemudian Cari Code dibawah ini

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>


<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>


<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>


</b:if>


<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Kalau sudah kemudian Simpan dan lihat hasilnya

(Sumber=http://tutorial-jitu.blogspot.com)

Free Template Blogger collection template Hot Deals SEO

Apakah anda pernah melihat tab view yang bisa berganti ganti gambar (slide show) antara satu artikel dengan artikel yang lain. apabila belum silakan gambar screen shout disamping sebagai contohnya. Tab view disamping hampir sama dengan website berita terkini kompas.com. Saya pertama kali melihat Tab view seperti disamping dari blognya ndyteen yang berisi tips trik facebook, free Template blogger, dan Tips SEO atau belajar SEO. Akhirnya Saya mendapat tutorial ini dari blog milik kang rohman yang berisi Blog Tutorial | Free Template | Download Software yang beralamat di http://kolom-tutorial.blogspot.com.


Cara membuatnya adalah sebagai berikut :

1. Login ke blogger dengan ID anda.

2. Klik Tata Letak.

3. Klik tab Edit HTML.

Copy kode di bawah ini, lalu paste persis di atas kode ]]></b:skin>

.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/


}


.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}


.indentmenu ul li{
display: inline;
}


.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}


.indentmenu ul li a:hover{
background:#ddd;
}


.indentmenu ul li a:visited{
color: white;
}


.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}


.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}


.tabcontent{
display:none;
}


@media print {
.tabcontent {
display:block !important;
}
}

4. Download dulu script ini, copy lalu paste persis di atas kode </head>

5. Klik tombol SIMPAN TEMPLATE.

6. Klik tab Elemen Halaman.

7. Klik Tambah Gadget

8. Klik tombol plus (+) Untuk HTML/JavaScript.

9. Copy lalu paste kode berikut pada kolom yang tersedia :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">


<div id="pettabs" class="indentmenu">


<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>


</ul>
<br style="clear: left"/>
</div>


<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">


<div id="tab1" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="obamabush" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWx3u1-is5dyfgFZjq1ZoFTMcRotCi21N6_m24_heI-OUB_GzspodHOLCpuzhvrw7DsaXwkM9Qj21j_v7bc1zUvkUu4P9MUxmHg0oHAVN8VpOJyHLzgFwVh81NBACFfVeGcJ0_rKbNSHU/?imgmax=800" height="152" title="obamabush"/></a>


<p><h3><a href="http://magazine-1.blogspot.com/2008/11/obama-will-change-bush-policy.html">Obama Will Change Busf Policy</a></h3></p>
U.S. President Barack Obama will change several numbers of controversial policies by President George W. Bush, including the restriction of the parent embryo cell research [...]
</div>


<div id="tab2" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh00JkpaxgooJUlp2uIjOopFATc9ZgxX4UnbRRsFjWwBYd7wXFzn1HtufkZXciIInGGRgXLYmZxjJwD_yTmx2DZkoPpMivQaLtHz-pd3HTcnf855gIcGwS2Vpek3lvoTiojLq3wboeFSlE/?imgmax=800" height="152" title="beyone"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/beyonce-will-never-sell-her-wedding.html">Beyone Will Never Sell Her Wedding Photo</a></h3></p>


Beyonce said, she will never consider to sells her wedding photo with Jay-Z to a celebrity magazine that offering a large amount of money as rewards, even she wonder with the amount of money that offered to her [...]
</div>


<div id="tab3" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNdZ7945aJrQ3oIxmf8OqpvOkdUw2a82Z_NBYervhqm4UtCoKxn7QVVj1yN6A3W5fVY_AkOFTXgmgNf3vRBjUmVMLBSQDqEFer8yYGMdVAV2HCCpmAj3kPF1kyYCLH5JFHMhZ_i47cUkY/?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/guns-n-roses-will-back.html">Guns N 'Roses Will Back</a></h3></p>


After 15 years not releasing album, the group rock Guns N ' Roses will launch a new album in the United States on 23 November. The band's latest album is "The Spaghetti Incident", released in 1993 [...]
</div>


<div id="tab4" class="tabcontent">
<a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY4AAktWAjCHUCRSDqb-F5NvP_t2zOdcUzxmEm4jyPYfFEpYn1ANYk6Wq7ooR0A2Uzhjjgat7hn_XHO_kpMRKYd5vD4I5l9h9Dfk6dESgRAS63Lnk7twElfmt7IBLqYwkQ6jd9HSjZ1gY/?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="http://magazine-1.blogspot.com/2008/11/i-pod-can-make-your-ear-buzz.html">Ipod Can Make Your ear Buzz</a></h3></p>


Music is one way to wake the spirit, to create happy life, but what happens if the music makes the ears buzz? of course, not the music that makes the ear 'buzzy',[...]
</div> </div>


<script type="text/javascript">


var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)


</script>

10. Klik tombol SIMPAN TEMPLATE.

11. Selesai. Silahkan lihat hasilnya.

Ket :

Pada langkah pertama, ada deretan kode CSS, kode tersebut bisa anda kreasikan sendiri agar menghasilkan bentuk deretan tab yang cantik.

Perhatikan kode berikut :

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">


<div id="pettabs" class="indentmenu">


<ul>
<li><a href="#" class="selected" rel="tab1">1</a></li>
<li><a href="#" rel="tab2">2</a></li>
<li><a href="#" rel="tab3">3</a></li>
<li><a href="#" rel="tab4">4</a></li>


</ul>
<br style="clear: left"/>
</div>

Untuk mengatur tinggi dari widget tersebut, anda tinggal mengganti nilai height:350px; menjadi nilai yang lain. Misal : height:400px;

Perhatikan kode berikut :

<script type="text/javascript">


var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)


</script>

Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain, anda tinggal mengganti nilai 2000 menjadi nilai yang lain. Misal : 2100. Semakin besar nilainya maka semakin lama pindah.

Kode dalam “Slide Show Tab View” di atas memuat artikel milik kang Rohman, silahkan di ganti sesuai keinginan.

Free Template Blogger collection template Hot Deals SEO

Fungsi dari artikel berhubungan atau related post adalah membari rujukan kepada pengunjung untuk membuka artikel yang lain di blog kita. Related post akan memunculkan judul postingan dengan label yang sama. Contoh apabila label postingan adalah "Animasi" maka judul postingan yang akan muncul adalah postingan - postingan kita yang mempunyai label "Animasi". Related post akan memunculkan judul artikel lain dengan label yang sama di bawah artikel utama.

Cara membuatnya sebagai berikut :

1. Login --->>> Tata Letak --->>> Edit HTML.

2. Centang "Expand widgets template".

3. Letakkan script dibawah ini di bawah kode <data:post.body/> ( apabila anda telah membuat read more, biasanya kode ini ada dua. Taruh kode di bawah kode yang pertama ).

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>


<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>


var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;


maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;




function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;


for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;


if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {


var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}


var labelArray = new Array();
var numLabel = 0;


<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;


var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>


</div>
</b:if>

4. Simpan.

Ket :
Setelah jadi, jika kamu ingin merubah tulisan "Related Posts by Categories" maka cari kode tersebut di HTML, trus ganti dengan text/tulisan yg kamu suka.

( Sumber : http://trik-tips.blogspot.com )

Free Template Blogger collection template Hot Deals SEO

Slide Headline adalah suatu efek animasi pergantian halaman headlines. Cara membuatnya seperti ini :

1. Pastekan kode CSS di bawah ini di atas kode ]]></b:skin>

#slider {
background:#101010;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}

#mover {
width: 600;
position:absolute;
overflow:hidden;
}

.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}

.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}

.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

2. Pasang kode script ini di atas kode </head>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

3. Buat Element baru HTML/JAVA SCRIPT kemudian Pastekan kode HTML di bawah ini :

<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://forantum.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://forantum.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://forantum.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://forantum.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://forantum.blogspot.com/">JUDUL DEMO SLIDE</a></h2>
<p>isi artikel disini</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>

4. Untuk mengganti warna background dan lain-lain silakan sobat otak-atik sendiri.

Selamat Berkreasi...

( Sumber : http://1-1y4n9.blogspot.com )

Free Template Blogger collection template Hot Deals SEO

Pada saat ini saya akan memberi tutorial tentang cara memberi efek blur pada gambar. Efek gambar blur adalah efek gambar akan terlihat samar-samar apabila mouse melewati gambar. Biar anda tidak penasaran silahkan ikuti saja langkah-langkah berikut ini.

A. Langkah Pertama

1. Masuk ke Dasbor

2. Klik Tab Tata Letak

3. Klik Tab Edit HTML

4. Beri tanda centang pada kotak kecil Expand Template Widget

5. Silahkan cari di dalam template anda kode ]]></b:skin>

6. Persis sebelum kode tersebut, pastekan scirpt di bawah ini

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

7. Klik Simpan Template

B. Langkah Kedua

Script ini merupakan script standar tanpa efek blur

<a href="http://forantum.blogspot.com" target="_blank" title="kumpulan blog tutorials"><img alt="kumpulan blog tutorials" style="border: 0;" src="http://img36.imageshack.us/img36/6594/forantumbanner3.gif"/></a>

Maka hasilnya akan seperti di bawah ini



Sekarang kita akan mengubah gambar di atas dengan memberi efek blur, caranya hanya cukup dengan menambah script class="linkopacity" pada script URL yang dituju, maka scriptnya akan menjadi seperti ini

<a href="http://forantum.blogspot.com" target="_blank" title="kumpulan blog tutorials" class="linkopacity"><img alt="kumpulan blog tutorials" style="border: 0;" src="http://img36.imageshack.us/img36/6594/forantumbanner3.gif"/></a>

Maka hasilnya akan seperti di bawah ini




Selamat mencoba, semoga bermanfaat...

( Sumber : http://pinginbelajar.blogspot.com )

Free Template Blogger collection template Hot Deals SEO

Saat ini saya akan membahas bagaimana cara membuat gambar melayang di blog. gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh scrool mouse. Apakah sobat tertarik membuatnya ???. Sebelum membuatnya, sobat harus menyiapkan gambar. terserah sobat mau gambar bergerak yang biasanya berformat .gif atau gambar bisa yang berformat .jpeg atau bisa juga gambar foto kita...hehehe biar narsis.

Gambar yang ingin dipasang lalu di upload atau disimpan di image hosting. sobat bisa menyimpannya di photobucket.com, imageshack.com, flickr.com atau image hosting lain. Tetapi untuk gambar dengan format .gif saya biasa menyimpannya di imageshack.com. ooo...iya saya sarankan, gambar yang ingin dibuat melayang sebaiknya gambarnya jangan besar-besar karena dapat mengganggu pengunjung blog kita.

Nah untuk step-step selanjutnya akan saya tulis lebih ringkas. Setelah sobat menyimpan di image hosting, inilah yang harus sobat lakukan :

1. Login Acount blogger anda.

2. Masuk pada Pengaturan.

3. Pilih Tata letak.

4. Edit html.

5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Ket : Kode yang tercetak kuning ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.

6. Berikutnya cari lagi di dalam template anda kode < /body >
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.

<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>

Ket : kode yang berwarna kuning diganti dengan url tempat gambar anda disimpan.

7. Simpan, jadi deh........

o....ya, kalo anda suka dengan blog ini pasang banner saya atuh.....Okeeey

Free Template Blogger collection template Hot Deals SEO