Tampilkan postingan dengan label Link. Tampilkan semua postingan
Tampilkan postingan dengan label Link. Tampilkan semua postingan

Senin, 06 Juli 2009

Link Dibuka Dengan New Tab

Sebarang link yang ditambah dalam blog kita samada dibahagian sidebar, posting, atau dimana saja adalah boleh dibuka dengan tab yang baru.. Dengan cara yang sangat mudah. Semudah mengupas kekacang.. Ok untuk yang belum tahu boleh rujuk cara ni yer..

Boleh gunakan salah satu kod dibawah.

1. target="_blank"
2. target="_new"


Caranya, tambah kod diatas tu pada akhir setiap alamat. Contoh dibawah.

1. <a href="http://almansuqie-tips.blogspot.com" target="_blank">
2. <a href="http://almansuqie-tips.blogspot.com" target="_new">


Tambah la kod tu kat mana2 je link yang kita nak bukakan di tab yang baru.. Kat tab vertikal pun boleh yer abang man.

Minggu, 24 Mei 2009

Mengalihkan Alamat Blog Ke Alamat Lain

Orang putih kata "How To Redirect Blogger URL To Another URL". Maksudnya macam tajuk diatas. Contoh boleh klik link ini http://kawafirku.blogspot.com. Caranya..

1. Loggin ke blogger => Layout => Edit HTML.

2. Tambahkah kod dibawah selepas kod <head>. Bahagian paling atas.

<meta http-equiv="refresh" content="0;url=http://alamatbaru.com"/>


3. Gantikan text merah dengan alamat baru Antum. Dah siap save..

Sekian..05

Senin, 04 Mei 2009

Dropdown Menu With Colour


Sebelum ini Ana ada postkan Cara Membuat Dropdown Menu tanpa warna pada backgroundnya. Semalam jalan2 jumpa pula yang boleh diwarnakan. Seperti diatas.

Ok caranya lebih kurang sama, cuma ditambahkan dengan kod warna.

<center><select onchange="window.open(this.options[this.selectedIndex].value)" style=" WIDTH: 150px; COLOR: #146d03; BACKGROUND-COLOR: #ffff66"
name="select" size="1"> <option value="0" <option value="0" selected>Tajuk Menu</option>
<option value="Link 1">Text 1</option>
<option value="Link 2">Text 2</option></select></center>


Gantikan kod merah mengikut warna yang Antum gemari. Kod warna Disini.

Untuk tambahkan link cuma tambah kod dibawah sebelum kod </select></center>

<option value="Link Tambah">Text Tambah</option>

Sabtu, 21 Maret 2009

Cara Membuat Brilliant Button



Ini antara contoh Brilliant Button. kita boleh gunakannya untuk membuat button link kita sendiri atau apa saja laman yang kita rasa berguna untuk disimpan. Untuk membuatnya Antum boleh pergi ke dua laman ini.

LucaZappa.com
Button Maker


Setelah button siap direka, iaitu pada pilihan warna, text dll maka savela button tersebut ke dalam komputer Antum. Pastu upload button tersebut untuk dapatkan linknya seterusnya ditambah ke dalam blog. Boleh upload di Photobucket atau Imageshack

Minggu, 01 Maret 2009

Membuat Link Pelangi Berkerlipan

Nak cantikkan link2 di blog Antum? Jadi warna warni seperti pelangi. Lebih menarik perhatian. Indah berseri.. Ok caranya..

1. Masuk ke Edit HTML dan cari kode <head>

2. Kemudian pastekan kode dibawah selepas kode <head>

<script src='http://www.geocities.com/almansuqie08/pelangi.js'>
</script>


3. Lihat contoh.

<head>
<script src='http://www.geocities.com/almansuqie08/pelangi.js'>
</script>


4. Siap!! Klik Save dan Lihat hasilnya.

Minggu, 25 Januari 2009

Cara Memasukkan Senarai Link

Khas untuk KakWan yang bertanya, bagaimana cara untuk menambahkan senarai link di sidebar? Caranya sangat mudah, semua sudah disediakan oleh blogger. Ada 3 jenis gadget yang disediakan oleh Blogger, List, Link List dan terbaru Blog List. Disini Ana sertakan dengan snapshoot sekali supaya mudah difahami dengan lebih jelas. Caranya begini. Kita abaikan List dan Ana mulakan dengan Link List.

1. Seperti biasa Loggin ke Blogger => Layout => Page Elements.

2. Klik pada Add a Gadget dibahagian sidebar (bahagian lain pun boleh).


3. Seterusnya pilih pada Link List seperti dibawah.


4. Ruangan seperti ini akan muncul. Masukkan link dan Nama Laman pada ruang yang disediakan dan klik ADD LINK. Lakukan cara yang sama untuk link seterusnya. Klik butang save jika sudah selesai.

5. Selesai untuk Link List. Kita berpindah kepada Blog List pula. Ia akan muncul di Sidebar seperti gambar dibawah. Keistimewaannya berbanding Link List adalah ia akan menampilkan sekali posting terkini bagi setiap blog dalam senarai kita.

6. Cara yang sama. Add a Gadget.

7. Pilih pada Blog List


8. Klik Add To List untuk memasukkan link. Cara yang sama untuk link seterusnya. Klik save jika selesai.

Tambahan: Link List akan dibuka di laman yang sama jika diklik. Untuk membukanya di laman yang baru caranya DISINI.

Kamis, 22 Januari 2009

Hilangkan "Subscribe to:Posts (Atom)"

Ok..ni cara untuk hilangkannya. Senang saja.. Macam biasa Loggin dan terus ke Edit HTML. Cari kod dibawah dan tambahkan dengan text berwarna merah.

.feed-links {
clear: both;
line-height: 2.5em;
display:none;
}



Rabu, 14 Januari 2009

Cara Membuat Menu Tab Horizontal

Nak buat link tab macam Ana?Ni caranya.Istimewa link tab ini, bila klik akan dibuka di window/tab yang baru.. Ni contoh tab yang ana guna.Tab ni ana dah tambahkan dengan kotak search. Ok ini caranya.



1.Macam biasa Loggin => Layout => Edit HTML. Tambahkan kode dibawah sebelum kode ]]></b:skin>

/* linktab

================== */

#linktab{
background:url(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif) ;
width: 864px;
height: 30px;
font-size: 11px;
font-family: georgia, Tahoma, Verdana;
color: #ffff66;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
#tabright {
width: 200px;
height: 30px;font-size: 11px;
float: right;
margin-right:10px;
margin-bottom:50px;
padding: 0px;
}
#tabright a img {
border: none;
margin: 5px;
padding: 0px;
}

#linktab ul {
margin:0;
padding:1px 10px 0px 0px;
list-style:none;
}
#linktab li {
display:inline;
margin:0;
padding:0;
}
#linktab a {
float:left;
background:transparent;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#linktab a span {
float:right;
height: 35px;
display:block;
background:transparent;
padding:7px 6px 4px 6px;
color:#ffff66;
border-right: 1px solid #000;
}
#linktab a span {
float:none;
}
#linktab a:hover span {
color:#fff;
}
#linktab a:hover {
background-position:0% -42px;
}
#linktab a:hover span {
background-position:100% -42px;
}


2. Warna kod oren untuk panjang tab,Tukar mengikut size main-wrapper Antum. Warna biru pula untuk text dan ungu untuk border,tukarla mengikut selera Antum. Kod Warna Disini.

3. Juga Gantikan kode gambar ni. Disini Ana ada sediakan beberapa warna. Cuma gantikan text tebal merah.

(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif)




tabbiru.gif


tabhijau.gif


tabkuning.gif


tabmerah.gif



tabungu.gif


4. Kemudian tambah kode berikut dibawah kode ini <div id='content-wrapper'>

<div id='linktab'>
<ul>
<li><a href='URL Link Disini'><span>Home</span></a></li>
<li><a href='http://almansuqie-tips.blogspot.com/' target='_blank'><span>AlmansuQie</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
</ul>

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div></div>


p/s: Kalau xnak kotak carian, buang kod ini.

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>


Siap..

Kamis, 08 Januari 2009

Cara Membuat Top Post


Widget ini akan menampilkan posting yang popular berdasarkan kepada jumlah komen pada setiap posting. Lagi banyak komen lagi topla post tu,hehe. Widget ni ciptaan Amanda Fazani. Ok ni caranya..

1. Loggin ke Blogger =>Layout =>Add a Gadget => HTML/Javascript. Tambahkan dengan kod dibawah.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099&url=http%3A%2F%2Fnamablog.blogspot.com&num=10" type="text/javascript"></script>
<span style="gt;Widget by <a href="http://www.bloggerbuster.com">Blogger Buster </a></span>



2. Gantikan namablog dengan Nama blog Antum.. Angka 10 adalah jumlah top post yang akan ditampilkan.

3. Kalau nak hilangkan nombor pada top post ini just buangkan saja kode ini.

document.write('<ol style="text-transform: capitalize;">'); dan document.write("</ol>");

4. Simpan..

Sumber: O-OM

Minggu, 14 Desember 2008

Menukar Tulisan Older Post

Older Posts, Home, Newer Posts. Link² ini akan ada di bahagian bawah posting. Ok sekarang kita akan tukar link² yang berbentuk tulisan ini dengan icon. Nampak lebih cantik dan menarik. Begini caranya..


1. Loggin ke Blogger => Layout => Edit HTML.Tandakan pada kotak Expand Widget. Cari kode dibawah. Gunakan Ctrl+F.

<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>


2. Gantikan tulisan yang berwarna dengan kode image ini.

<img src="Image URL" />


3. Lihat contoh ini.

<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 src='http://i302.photobucket.com/albums/nn113/aburifaie3/newer.gif'/></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 src='http://i302.photobucket.com/albums/nn113/aburifaie3/older.gif'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/home-1.gif'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='http://i302.photobucket.com/albums/nn113/aburifaie3/home-1.gif'/></a>
</b:if>
</b:if>

</div>



4. Hasilnya begini..



Tambahan: kode² yang asal tu boleh juga di tukar dengan tulisan lain (kalau xmau guna icon)

Sabtu, 06 Desember 2008

Membuat Horizontal Link List/Label

Hari ini nak kongsi dengan Antum cara nak jimatkan ruang sidebar kita dengan membuat "Horizontal Link List/Label". Tau kan rupanya?? Macam gambar dibawah. Jom layan..


1. Loggin ke Blogger => Layout => Edit HTML. Cari kode dibawah.

.sidebar ul {
display:inline;
}

.sidebar li{
display:inline;
}



2.Kekadang ade kode yang digabungkan terus macam ni.

.sidebar ul li {
display:inline;
}



3. Tambah kode warna merah tu yer.. Cara ini akan terkesan untuk semua link list termasuk Archive dan Label.

Ok sekarang kita nak khususkan untuk satu2 link saja.. (Abaikan yang diatas sekiranya Antum memilih cara dibawah).

1. Pertama untuk link list. Cari kode dibawah.

<b:widget id='LinkList2' locked='false' title='My Blogs' type='LinkList'>


Text merah tidak semestinya dalam tulisan diatas.. Kekadang rupa lain yer.. Kalau nak senang, tengok tajuk link yang kita tulis di sidebar tu, contoh yang color biru tu.. Dah jumpa tambahkan kode merah dibawah dalam bahagian sidebar.

/* Sidebar Content */

#LinkList2 li{
display:inline;
}



2. Ini untuk Label pulak..Antum cari guna cara sebelum ni..sama je.. kenalpasti dah tambahkan di bahagian sidebar.

/* Sidebar Content */

#Label1 li{
display:inline;
}



Ok Siap..Alhamdulillah

Cara Membuat Text Area

Text Area ni kita buat untuk isikan link blog kita. Kira kalau kawan2 atau sesape yang nak 'link'kan blog kita boleh terus copy kode yang telah disediakan.Contoh macam ana buat ni... Caranya sangat mudah..




1. Layout => Add Gadget => HTML/Javascript dan tambahkan dengan kode dibawah.


<center><textarea rows="5" cols="20" name="textarea"><a href="http://almansuqie-tips.blogspot.com"><img border="0" width="90" src="http://i302.photobucket.com/albums/nn113/aburifaie/startips.gif" height="17"/></a></textarea></center>



2. Tukarkan text biru dengan alamat blog Antum dan text ungu dengan alamat image Antum. Nombor2 yang merah tu tukarla mengikut kesesuaian blog Antum..

Senin, 24 November 2008

Cara Memasukkan Link Di Postingan

Ada satu cara mudah untuk memasukkan apa2 link ke dalam posting kita. Just hitamkan mana2 text yang hendak dijadikan link, kemudian klik pada icon link yang telah disediakan dan masukkan linknya..


Link ini akan dibuka di halaman yang sama. Untuk membukanya di halaman yang lain, Klik Edit Html dan cari link yang telah dimasukkan kemudian tambahkan kode ini target=_"blank" di akhir link seperti dibawah.



<a href="http://almansuqie-tips.blogspot.com/"target=_"blank">AlmansuQie</a>

Sabtu, 22 November 2008

Cara Membuat Scrolling Links

Scrolling Links ni dapat jimatkan ruang sidebar kita yang terlalu panjang dengan link2. Antum boleh tukar ketinggian dan background color scrolling ni. Lihat text yang dimerahkan..Dapatkan kode warna DiSini.



<marquee direction="up" scrollamount="2" height="100px" bgcolor="#ffffcc">
<ul type="circle">
<li><a href="http://almansuqie.blogspot.com/" target="_blank">AlmansuQie</a></li>
<li><a href="http://ummu-rifaie.blogspot.com/" target="_blank">ummurifaie</a></li>
<li><a href="http://alhuzaifie.blogspot.com/" target="_blank">Huzaifah</a></li>
</ul>
</marquee>





Kamis, 20 November 2008

Membuka Link&Label Di Window/Tab Yang Baru

Ana ingat xde cara untuk buka link&label di window/tab yang baru.. Tengah jalan2 terjumpa satu cara yang sangat mudah. Ana biasa la guna untuk buka gambar atau link di posting.. Ini dia bendalahnye { target='_blank' }. Rupanya boleh tambah bendalah ni untuk buka link&label di window yang lain..Ok ini caranya.

1. Loggin ke Blogger => Layout => Edit HTML". Jangan lupa tandakan pada kotak Expand Widget. Kalau nak selamat download full template dulu yer.

2. Untuk Link sila cari kode dibawah. Pastikan kode yang betul..Perhatikan yang berwarna biru, ni yang default. Kalau Antum dah tukar sila cari tajuk link tersebut. Kemudian tambahkan yang berwarna merah sepeti kode dibawah.


<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target' target='_blank'><data:link.name/></a></li>
</b:loop>



3. Untuk Label pulak sila cari kode dibawah. Caranya sama jugak. Tengok kode ini betul-betul. Tambahkan yang berwarna merah.


<b:widget id='Label1' 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'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url' target='_blank'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>