Trick Untuk Blogger

Showing posts with label breakingnews. Show all posts

Cara Meletakkan Iklan Di Sebelah Kiri@Kanan Posting

Posted by Tips Trick Blogger Saturday, April 30, 2011 0 comments

Anda ingin menampilkan iklan di kanan atau kiri artikel blog. Pastinya Anda ingin tahu bagaimana cara meletakkannya? ok..Ikut jer cara dibawah ini.

1. Login ke Blogspot .

2. Klik Design - Edit HTML(Tandakan pada Expand Widget)
3.Cari kod dalam kotak nie...

<div class='post-header-line-1'/>

4. Pastu copy kod dalam kotak dibawah ini .

<div style='display:block;float:left;margin: 0px 10px 0px 0px;'>
LETAK KOD IKLAN ANDA DISINI
</div>

5. Pastekan dibawahnya.

6. Preview dan Save template .

Note: Pada highlight biru adalah kedudukan iklan yang korang nak samada kiri atau kanan/yang merah tu korang letak kod iklan korang...

Cara pasang related post tanpa ada gambar

Posted by Tips Trick Blogger Wednesday, April 13, 2011 1 comments

Jika sebelumnya saya pernah posting tentang cara membuat related posts with thumbnails dan untuk kali ini saya akan posting serupa tapi tak sama iaitu "pasang related post tanpa gambar".Okey sambung kembali tutorial ini dan inilah "Widget Related Posts"

Setelah anda login pada blogger .com cari kode dibawah ini : </head>

Kemudian gantikan dengan kode di ini :

<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj40Bw0FcvAcVMhdh2UpWtJ-91BZO8Y659QAQ-22ElMJWOoenUU2yuCQnlhW6U5HwNKdMgLUUcX563SZKraHKb11lV6phiJpPs0AacTVmiyjElX_noKMg8q4vMoJZYQDA2551ew6-kIp8M/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://mastergomaster.googlecode.com/files/related.js' type='text/javascript'/>

</b:if>

</head>

**Tulisan Related Posts boleh anda ganti mengikut kesesuaian dan keinginan anda.

Sekarang cari kode ini : <div class='post-footer-line post-footer-line-1'>

Kalau tak jumpa,cuba yang satu ini :<p class='post-footer-line post-footer-line-1'>

Letakkan kode dibawah ini dibawah kode di atas :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<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&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.mastergomaster.com/2010/03/related-posts-tanpa-gambar-atau-image.html' style='display:none'>Related Posts Widget</a>

<script type='text/javascript'>
var currentposturl="<data:post.url/>";

var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>

</b:if>

**Pada var maxresults=5; gantilah angka 5 jika anda mahu atau lebih mengikut kesesuian anda inginkan.

Simpan dan klik Save Template,
Sekian, dan terima kasih kerana sudi mencuba tutorial yang tak seberapa ini.

Cara Meletakkan Save Energy Mode Di Dalam Blogspot

Posted by Tips Trick Blogger Monday, April 11, 2011 0 comments

Marilah ikuti tutorial nak jimatkan tenaga..atau pun energy save mode kat blog korang

1-buka blog
2-reka bentuk
3-add gadjet
4-pilih html link dan jawa script
5-copy dan pastekan kod bawah ni.

<script src=’http://www.vincentcheung.ca/jsencryption/jsencryption.js’ type=’text/javascript’></script><script type=”text/javascript”>if (window.jstiming) window.jstiming.load.tick(‘headEnd’);</script>
<!– save your energy –><script language=’javascript’ src=’http://www.onlineleaf.com/savetheenvironment.js’ type=’text/javascript’></script><!– save your energy end –><script type=’text/javascript’></script><script type=’text/javascript’>

Cara Nak Buat Gambar Bergerak?

Posted by Tips Trick Blogger Wednesday, February 16, 2011 0 comments

Cara nak buat gambar bergerak,adaptasi dari cara buat tulisan bergerak saya sebelum ini.Ikut sahaja langkah-langkah dibawah ini untuk berjaya,jika tak faham sila rujuk disini.

Nie Kode Dia:

<marquee direction="right"><img src="http://i420.photobucket.com/albums/pp281/goldenphoto_2009/Iconulum.jpg" /></marquee>

Tanda merah tersebut adalah kode yang harus anda letak sebelum link gambar,jika anda ingin mengubah haluan gambar sila rujuk disini

Cara Mempercepatkan Loading Blog Menggunakan Google Chrome Frame

Posted by Tips Trick Blogger Saturday, January 29, 2011 1 comments

1.Log ke dashboard anda - desing-> ->Edit HTML

2.Click pada "Expand Template Widget"

3.Scroll turun ke mana anda melihat ini <head>

4.Copy kod di bawah ini dan paste tepat dibawah kod <head>

                   <meta http-equiv='X-UA-Compatible' content='chrome=1'/>

5.Kemudian cari kod </head>

6.Copy kod di bawah ini dan paste tepat setelah kod </head>

<!--[if IE]>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
<style type='text/css'>
.chromeFrameOverlayContent{top:10px;margin-top:10px;}
</style>
<script>
     window.attachEvent("onload", function() {
       CFInstall.check({
         mode: "overlay"
       });
     });
</script>
<![endif]-->

7.Sekarang Simpan Template anda.

Kira time loading blog anda .. Nikmat!!!

Cara Buat Kotak Iklan 125 x125 di Blog

Posted by Tips Trick Blogger Monday, January 24, 2011 0 comments

* Log in ke account blogger anda

* Pada dasbord --> Design --> Edit HTML

* Cari kode berikut ini ]]></b:skin>

* Kemudian taruh kode CSS dibawah ini diatasnya

#Johan-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Johan-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Johan-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

* Klik Simpan

* Selanjutnya Pada Elemen Laman --> Pilih Tambah Gadget --> Pilih HTML/Javascipt

* Kemudian anda memasukan kode dibawah ini.

<div id="Johan-ads">
<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

<a target="_blank" href="http://johanrakyat.blogspot.com/"><img alt="ads" src="http://penyamun.fileave.com/iklan%20125.jpg" border="0" /></a>

</div>

Klik Save Selesai

Cara Buat Scroll Box untuk Widget

Posted by Tips Trick Blogger Sunday, January 23, 2011 0 comments

Meletakkan sesuatu widget adalah bagus untuk blog. Walau bagaimanapun, adakalanya widget tersebut boleh 'menggangu' pandangan jika mengambil ruang yang agak besar untuk blog.

Salah satu penyelesaianya adalah dengan menjadikan widget tersebut boleh scroll. Ini secara tidak langsung dapat mengurangkan ruang yang digunakan dan menjadikan blog anda nampak lebih kemas.

Scroll box ini juga sesuai dengan apa sahaja widget yang anda mahu.Secara ringkasnya, apa sahaja widget yang guna kod HTML boleh guna cara ini untuk jadikannya scroll.:)

Tutorial untuk membuat scroll box adalah seperti berikut..

1. Dari dashboard > design > add a gadget > HTML/javascript(Jika anda sudah letakkan widget hanya buka HTML/javascript widget yang anda telah letak di blog)

2. Kemudian masukkan/ubah kod widget seperti berikut.

<div style="width:426px;height:100px;overflow:auto; ">

Letakkan kod widget anda disini

</div>

Note :width: ubah mengikut lebar yang anda kehendaki
height: ubah mengikut tinggi yang anda kehendaki

3. Apabila selesai, save dan lihat hasilnya..

Cara Nak Tukar "Older Posts", "Newer Posts", dan "Home" Dengan Image Icon

Posted by Tips Trick Blogger Thursday, January 20, 2011 0 comments

Hi,friend! Sekarang kita belajar cara nak tukar "Older Posts", "Newer Posts", dan "Home" dengan image icon. Usually "Older Posts", "Newer Posts", and "Home"terletak di bawah blog kita.

Fungsi ini mengarahkan kita untuk pergi ke laman lain, baik posting lama halaman atau baru laman posting. Biasanya, arahan ("Older Posts", "Baru Posts", "Home") adalah hanya sebuah kata, maka kita akan mengubah kata itu menjadi sebuah ikon.jika anda ingin trik ini,ikuti langkah-langkah dibawah:

1. Log in to your blogger icon
2. Go to Design>>>Edit HTML
3. Thick "Expand Widget Templates"
4. Then find this code :

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>

5. Tukarkan link yang berwarna biru dengan link image anda

<img border='0' src='ICON URL'/>

Contoh :

<img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/Newer.png'/>

Akan jadi macam nie:

<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/Newer.png'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img border='0' src=''https://sites.google.com/site/genkitemplate/olderpage/previous.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/home.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img border='0' src='https://sites.google.com/site/genkitemplate/olderpage/home.png'/></a>
</b:if>
</b:if>

</div>

6.Jika sudah,Save dan lihat hasilnyer...

Note: Anda boleh menukar link image anda sendiri

Cara Pasang Auto Read More Dengan Gambar

Posted by Tips Trick Blogger Sunday, January 16, 2011 0 comments

Mahu pasang Readmore button? xsusah mana pun...Jom try buat...

Caranya mudah,Hanya ikuti langkah-langkah di bawah ini:

1. Masuk ke Design lalu EDIT HTML
2. Centang Expand Widget Templates
3. Cari kode </head>
4. Tambahkan kode berwarna biru berikut dibawah kode </head>

5.Lalu cari kode <data:post.body/>

6.Ganti kode tersebut dengan kode berwarna hijau di bawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Yang berwarna merah gantikan ayat sesuai dengan keinginan Anda...

7. Save Template.

8.View Blog..!!!

Bagi yang ingin mengganti tulisan 'Readmore' atau 'Baca Selanjutnya' dengan image atau gambar seperti dibawah ini:

1. Cari kode berikut
READ MORE - <data:post.title/>

2. Ganti dengan kode berikut
<img border='0' src='URLGAMBAR' alt='Read More' />

Ganti tulisan warna merah dengan url gambar / image readmore anda,
kalau tidak ada,cuma copy code image readmore berikut:

Cara Sembunyikan Tulisan Di Posting Blog Guna Spoiler

Posted by Tips Trick Blogger Thursday, January 6, 2011 0 comments

Spoiler adalah teknik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk mengjimatkan space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 saat, maka jika dengan Spoiler cukup dengan 30 saat dan mungkin kurang dari itu (tergantung isi content).

Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga boleh sembunyikan gambar dalam ukuran besar serta video.Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya boleh dilihat keseluruhnya oleh pembaca apabila buttonnya diklik.

Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:

Contoh Spoiler

<div><div style="margin: 10px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;"> Contoh Spoiler</span><input value=" please buka!!!" style=" margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = ' Tutup Jer...'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' please buka!!!'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
disinilah tempat untuk meletak content dalam spoiler
</div></div></div></div>

Keterangan:

Copy kod diatas,letak di new post anda....

1. Teks warna Biru adalah Judul Content dan boleh diganti sesuai dengan selera anda, Namun jika tidak ingin menampilkan judul content pada spoiler, silahkan dihapus saja dan nilai margin saya kasih warna biru silahkan diganti menjadi 0 (nol);

2. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda.

3. Teks warna Pink adalah tempat menaruh isi content postingan Anda.

Auto Backlink Generator-Tutorial SEO

Posted by Tips Trick Blogger Monday, January 3, 2011 0 comments

Saya ingin kongsikan dengan anda semua salah satu cara saya mendapat Backlink sesuatu Blog dengan cepat.

1.Auto Backlink Generator

Dan yang ini juga

2. Auto Backlink Feed Generator

Yang ini ada perlu letakkan RSS Feed blog anda.Selesai!

Posting Kod HTML/Javascript di Blogspot

Posted by Tips Trick Blogger 0 comments

Tips pendek kali ini adalah berkenaan kod html/javascript diposting blog anda. Mungkin pernah anda menulis di artikel untuk highlight kod html. Bila anda posting, hilang pula kod html itu... Dan ada juga yang tertanya-tanya bagaimana wak paparkan kod html di blog ini.Sebenarnya ada tools internet yang ada untuk convert html untuk dipaparkan diposting blog anda. salah satunya gadjet dari pakcik google ini pun boleh digunakan.. Tak silap ada beratus tools sebegini.. Anda pilih dan gunakanlah mengikut kesesuaian anda ya..

Posting Kod HTML/Javascript di Blogspot

Posted by Tips Trick Blogger 0 comments

Jquery Tab Menu Accordion versi 2!

Posted by Tips Trick Blogger 0 comments

Jika anda ingin menjimatkan ruang dibahagian sidebar, anda boleh mencuba Jquery Tab Menu Accordion seperti yang boleh dilihat pada demo di sini(sila klik). Pada Jquery Tab Menu Accordion tersebut, anda boleh masukkan berbagai jenis widget seperti Shout box, Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya mengikut citarasa anda sendiri. Jquery tab menu accordion ini semamangnya sangat menarik dan mudah kerana anda hanya perlu meletakkan cursor mouse pada title tab menu tersebut.

Untuk memasang Jquery tab menu accordion sila ikut beberapa langkah yang mudah dibawah.

Langkah 1

Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript.

Copy dan paste kod di bawah pada content HTML/Javascript.

h5 {

font-family: trebuchet-ms, arial, tahoma;

font-size: 13px;

padding: 0 0 1em;

font-weight:bold;

color: #ffffff;

}

.msg_list {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

background-color:#F80680;

margin:1px;

}

.msg_body {

padding: 5px 10px 15px;

background-color:#F4F4F8;

}

</style>

$(document).ready(function()

{

//hide the all of the element with class msg_body

$(".msg_body").hide();

//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked

$("#firstpane h5.msg_head").click(function()

{

$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");

});

//slides the element with class "msg_body" when mouse is over the paragraph

$("#secondpane h5.msg_head").mouseover(function()

{

$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");

});

</script>

<h5 class="msg_head">Tajuk 1</h5>

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>

Masukkan kod disini.

</div>

Untuk mengubah warna background title box, title font dan background accordion box, sila edit kod yang di bold dengan warna biru.

color: #ffffff; ( title font )
background-color:#F80680; ( background title box )
background-color:#F4F4F8; ( background accordion box )

Untuk memasukkan widget seperti Shout box,Top Post,Recent Post, Recent Comment, Top Commentator dan sebagainya, gantikan teks Masukkan kod disini. dengan kod widget yang anda inginkan.

Edit teks Tajuk, 1 Tajuk 2, dan Tajuk 3 dengan title yang anda inginkan.

Langkah 2

Akhir sekali, klik Save

Sumber: maribinablog

Jquery Tab Menu Accordion versi 2!

Posted by Tips Trick Blogger 0 comments

h5 {

font-family: trebuchet-ms, arial, tahoma;

font-size: 13px;

padding: 0 0 1em;

font-weight:bold;

color: #ffffff;

}

.msg_list {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

background-color:#F80680;

margin:1px;

}

.msg_body {

padding: 5px 10px 15px;

background-color:#F4F4F8;

}

</style>

$(document).ready(function()

{

//hide the all of the element with class msg_body

$(".msg_body").hide();

//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked

$("#firstpane h5.msg_head").click(function()

{

$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");

});

//slides the element with class "msg_body" when mouse is over the paragraph

$("#secondpane h5.msg_head").mouseover(function()

{

$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");

});

</script>

<h5 class="msg_head">Tajuk 1</h5>

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>

Masukkan kod disini.

</div>

Buat Scroll Box Untuk Blog Archive-Tutorial

Posted by Tips Trick Blogger Sunday, January 2, 2011 0 comments

Bagi yang rajin update. Blog Arhieve akan jadi panjang. So eloknya buat jenis scroll bagi jimatkan ruang blog dan juga nampak lebih kemas.

STEP 1

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE

*Apa-apa pun sebelum edit html, korang mestilah buat backup sebagai langkah berjaga-jaga.

STEP 2
Tekan keyboard, CTRL+F secara serentak.Cari code; <div id='ArchiveList'>

STEP 3

Di atas coding step 2,
Sila copy dan paste coding; <div style='overflow:auto; width:ancho; height:100px;'>

*height=korang boleh ubah berapa panjang kotak scroll yang korang nak.

STEP 4

Di akhir coding step 2 tue, korang kena masukkan penutup coding bagi step 3 iaitu </div>

Contoh coding;

**hint masukkan code </div> sebelum coding <b:include name='quickedit'/>

STEP 5Klik
Preview dan Save jika tiada sebarang error serta berpuashati.

Selamat mencuba ye...

Buat Scroll Box Untuk Blog Archive-Tutorial

Posted by Tips Trick Blogger 0 comments

Bagi yang rajin update. Blog Arhieve akan jadi panjang. So eloknya buat jenis scroll bagi jimatkan ruang blog dan juga nampak lebih kemas.

STEP 1

DASHBOARD>DESIGN>EDIT HTML>tick kotak EXPAND WIDGET TEMPLATES>DOWNLOAD FULL TEMPLATE

**hint masukkan code </div> sebelum coding <b:include name='quickedit'/>

STEP 5Klik
Preview dan Save jika tiada sebarang error serta berpuashati.

Selamat mencuba ye...

Cara Membuat Multi Kolum Footer Widgets - Terbaru!

Posted by Tips Trick Blogger 0 comments

Widget baru ini boleh menjadi tiga medan, empat medan atau berapa banyak medan yang anda inginkan. Selanjutnya widget footer yang baru mempunyai beberapa kesan CSS yang besar ditambah ke dalamnya yang membuatnya lebih baik. Pertama melihat demo untuk mengetahui apa yang sangat berbeza tentang hal itu.Lihat widget di bahagian bawah blog Demo berikut,

Cara Tambah Multi Kolum Footer Widgets Untuk Blogger ?Pertama kita akan menambah kod CSS untuk anda blogger template dan kemudian HTML. Jadi tanpa membuang masa membolehkan melompat terus ke langkah-langkah berikut,
1. Go To Blogger> Design> Edit HTML
2. Backup Template anda
3. Search for ]]></b:skin>
4. Tepat di atas ]]></b:skin> paste kod di bawah ini,

/*----- MBT MULTI COLUMN FOOTER WIDGET -----*/

    #lower {
    margin:auto;
    padding: 0px 0px 10px 0px;
    width: 100%;
    background:#333333;
    }
    #lower-wrapper {
    background:#333333;
    margin:auto;
    padding: 20px 0px 20px 0px;
    width: 960px;
    border:0;
    }
    #lowerbar-wrapper {
    background:#333333;
    float: left;
    margin: 0px 5px auto;
    padding-bottom: 20px;
    width: 23%;
    text-align: justify;
    color:#ddd;
    font: bold 12px Arial, Tahoma, Verdana;
    line-height: 1.6em;
    word-wrap: break-word;
    overflow: hidden;
    }
    .lowerbar {margin: 0; padding: 0;}
    .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
    .lowerbar h2 {
    margin: 0px 0px 10px 0px;
    padding: 3px 0px 3px 0px;
    text-align: left;
    border:0;
    color:#ddd;
    text-transform:uppercase;
    font: bold 14px Arial, Tahoma, Verdana;
    }
    .lowerbar ul {
    color:#fff;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    }
    .lowerbar li {
    display:block;
    color:#fff;
    line-height: 1.6em;
    margin-left: 0 !important;
    padding: 6px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #444;
    list-style-type: none;
    }
    .lowerbar li a {
    text-decoration:none; color: #DBDBDB;
    }
    .lowerbar li a:hover {
    text-decoration:underline;
    }
    .lowerbar li:hover {
    display:block;
    background: #222;
    }

5 Sekarang cari. </body> dan paste kod berikut persis di atas </body>

<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> </b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

6. Simpan template anda dan anda selesai!
Sekarang, masuklah ke Elemen Laman dan menambah widget anda ke Footer Widgets baru ditambah bahawa akan kelihatan seperti ini,

Anda boleh mengamati bahawa ada empat medan secara lalai dan anda boleh menambah widget yang anda inginkan untuk setiap medan. Jika anda ingin menambah atau mengurangkan jumlah medan menegak kemudian ikuti langkah-langkah di bawah ini.

Cara Customize Widget itu?

Simple jer...Saya fikir warna dan keseluruhan saiz dan padding dan margining cukup sempurna. Satu-satunya hal yang anda perlu menyesuaikan dengan template anda adalah lebar widget dan jumlah medan menegak.

1. Dalam rangka mengurangkan atau menambah lebar keseluruhan widget hanya menukar width: 960px;
2. Jika anda ingin mengurangkan jumlah widget ke tiga maka cukup hapuskan bagian kod,

3. Atau jika anda ingin menambah medan tambahan kemudian tambah kod di bawah ini tepat di atas <div style='clear: both;'/>

Ingat bahawa lowerbar # merujuk pada jumlah medan. Jadi jika anda ingin menambah medan kelima maka cukup mengganti lowerbar # dengan lowerbar5.Selepas anda telah menambah medan kelima maka ingatlah untuk menukar width: 23%; dengan width: 17%;

Pada pendapat saya cukup hanya empat medan sahaja,ia sudah cukup menarik.....

Trick Untuk Blogger

Cara Meletakkan Iklan Di Sebelah Kiri@Kanan Posting

Cara pasang related post tanpa ada gambar

Cara Meletakkan Save Energy Mode Di Dalam Blogspot

Related Post bergambar yang boleh bergerak

Cara Nak Buat Gambar Bergerak?

Cara Mempercepatkan Loading Blog Menggunakan Google Chrome Frame

Cara Buat Kotak Iklan 125 x125 di Blog

Cara Buat Scroll Box untuk Widget

Cara Nak Tukar "Older Posts", "Newer Posts", dan "Home" Dengan Image Icon

Related Posts Selain LinkWithin (Cara Advance)

Cara Pasang Auto Read More Dengan Gambar

Cara Sembunyikan Tulisan Di Posting Blog Guna Spoiler

Auto Backlink Generator-Tutorial SEO

Posting Kod HTML/Javascript di Blogspot

Posting Kod HTML/Javascript di Blogspot

Jquery Tab Menu Accordion versi 2!

Jquery Tab Menu Accordion versi 2!

Buat Scroll Box Untuk Blog Archive-Tutorial

Buat Scroll Box Untuk Blog Archive-Tutorial

Cara Membuat Multi Kolum Footer Widgets - Terbaru!

Cara Customize Widget itu?

Feedjit