Assalamualaikum kepada semua pengunjung blog mediasiber,Jika anda semua perasan dibawah sekali blog ini ada terpapar hot news yang memaparkan tajuk post terkini dengan efek slider.
Jika anda ingin memasang ke blog anda,berikut adalah cara-caranya.Terima kasih diucapkan pada maribinablog diatas tutorial ini yang sangat menarik bagi saya.
1)Login ke Dashboard>Design>Edit HTML
nota : sila backup dulu template anda untuk mengelakkan sebarang kecuaian.
2)Tick pada expand widget templates.
3)Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod </head>
4) Copy dan paste kod css ini, di atas atau sebelum kod </head>
<style type='text/css'>
#bd {
float:bottom;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-top:5px;
font-size:12px
}
.text {
color:#98BF2F;
margin-left:8px
}
div#news-1 .gk_news_highlighter {
font-family:Verdana, Arial;
font-size:11px;
color:#666
}
div#news-1 {
width:960px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMiiEhxQKjY1GJJBXVrlOuDWHqk2-QquoA90JWUQqWWp4HxBuevWOB3TO2JPEPyE23URGClr7rk9CpRBxJLLZVETAgg4szMxWvy_Cl-U7-JnNjJszYBvfJWPns6AxQLi8jHbWP5YQHewGr/s320/gradient.png) repeat-x 0 -100px;
clear:both;
overflow:hidden
}
div#news-1 .gk_news_highlighter_wrapper {
float:left;
width:820px;
height:24px;
line-height:24px;
overflow:hidden;
position:relative
}
div#news-1 .gk_news_highlighter_item {
width:auto;
height:24px;
padding-left:20px;
display:none;
position:absolute
}
div#news-1 .nowrap {
white-space:nowrap
}
div#news-1 .gk_news_highlighter_title {
padding-left:5px
}
div#news-1 .gk_news_highlighter_desc {
padding-right:5px
}
div#news-1 .gk_news_highlighter_interface {
float:left;
width:120px;
height:24px;
text-align:right;
line-height:24px;
z-index:1000
}
div#news-1 .gk_news_highlighter_interface .text {
float:left;
display:block;
width:auto;
padding-left:5px;
font-weight:700
}
div#news-1 .gk_news_highlighter_interface div {
width:30px;
float:right
}
div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
cursor:pointer;
width:13px;
height:24px;
display:block;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Q2GldPb8BsnJtm1gIwngF4vsih0QeffLazwO6aFNob_p1yR8hpbSTt3S497zr-lroi-9tLEfQyjE-m60SL3SLvUC2rE1Wc_tyEt2fZHn6Y4YvWeUmrZowUZS_OPHq8jlX0UtJBQyTY8/s1600/play.png') no-repeat 0 50%;
float:left
}
div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position:-13px 50%
}
div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
color:#FFF
}
div#news-1 .gk_news_highlighter_interface a.next {
float:right;
background-position:-26px 50%
}
div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position:-39px 50%
}
</style>
5)Selepas itu,cari pula kod <div id='content-wrapper'>.
Bagi blog yang menggunakan template dari template designer, cari kod </footer>
6) Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>
Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer>
<div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = "no";
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";
label = "";
numposts = 30;
home_page = "http://mediasiber.blogspot.com/";
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick["gk_news_highlighternews-1"] = {
"animationType" : 3,
"animationSpeed" : 200,
"animationInterval" : 2000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 1};
</script>
nota : Gantikan url blog anda dengan perkataan berwarna merah diatas.
7)Klik preview dan jika berpuas hati,klik save.
8)Done.
Jumat, 31 Agustus 2012
Memasang widget Recent comments dengan avatar
Mungkin anda sudah jemu dengan widget recent comment yang macam dibawah ini
apa kata anda dengan recent comments yang ini pula?
Menarik bukan?so kepada anda yang berminat untuk memasang widget ini ke blog anda,sila ikut arahan dibawah.widget ini dibawakan oleh maribinablog.
1)Seperti biasa,login ke akaun blogger anda,dashboard>design>page elements>Add a Gadget>HTML/Java Script
2)Masukkan kode dibawah ini
<style type="text/css">
.recent-comment{
margin-bottom:3px;
padding-bottom:2px;
background-color:#FFF;
border:solid #ddd 1px
}
.recent-comment-ico{
height:26px;
width:26px;
background-color:#FFF;
border:solid #ddd 1px;
float:left;
margin:2px 6px 0px 2px;
padding:2px
}
.recent-comment-body{
padding:3px;
font-size:11px
}
.recent-comment a,.recent-comment a:hover{
font-weight:bold;
font-weight:11px
}
</style>
<script src='http://javscript-code.googlecode.com/files/recentcommentavt.js' type='text/javascript'></script>
3)Klik save,dan lihat hasilnya
apa kata anda dengan recent comments yang ini pula?
Menarik bukan?so kepada anda yang berminat untuk memasang widget ini ke blog anda,sila ikut arahan dibawah.widget ini dibawakan oleh maribinablog.
1)Seperti biasa,login ke akaun blogger anda,dashboard>design>page elements>Add a Gadget>HTML/Java Script
2)Masukkan kode dibawah ini
<style type="text/css">
.recent-comment{
margin-bottom:3px;
padding-bottom:2px;
background-color:#FFF;
border:solid #ddd 1px
}
.recent-comment-ico{
height:26px;
width:26px;
background-color:#FFF;
border:solid #ddd 1px;
float:left;
margin:2px 6px 0px 2px;
padding:2px
}
.recent-comment-body{
padding:3px;
font-size:11px
}
.recent-comment a,.recent-comment a:hover{
font-weight:bold;
font-weight:11px
}
</style>
<script src='http://javscript-code.googlecode.com/files/recentcommentavt.js' type='text/javascript'></script>
3)Klik save,dan lihat hasilnya
Tukar Cursor Dalam Blog
Menggunakan default cursor asal mungkin agar membosankan,jika anda menukar cursor yang anda minati sudah tentu blog anda nampak lain dari yang lain.Anda boleh memilih senarai cursor yang disediakan percuma dengan cara memilih cursor anda di sini .Pastikan anda tidak memilih cursor yang beranimasi (bergerak-gerak)kerana cursor jenis ini cuma berfungsi pada web browser internet explorer sahaja.
Setelah memilih cursor yang menambat hati anda,sila copy code yang diberikan,dan delete code yang telah diwarnakan seperti dibawah
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
Sepatutnya akan jadi seperti ini
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>
1)Kemudian,login ke akaun blogger anda,dashboard>design>page elements>Add a Gadget>HTML/Java Script
2) Masukkan code yang telah diubah diatas kedalam HTML/Java Script anda
3) Save..Siap
Setelah memilih cursor yang menambat hati anda,sila copy code yang diberikan,dan delete code yang telah diwarnakan seperti dibawah
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>
Sepatutnya akan jadi seperti ini
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>
1)Kemudian,login ke akaun blogger anda,dashboard>design>page elements>Add a Gadget>HTML/Java Script
2) Masukkan code yang telah diubah diatas kedalam HTML/Java Script anda
3) Save..Siap
Meletakkan Widget Popular Post With Thumbnail
Tutorial kali ini akan mengajar anda semua bagaimana cara untuk memasukkan widget popular post with thumbnail,mungkin anda sudah pernah meletakkan widget ini di blog anda tetapi tanpa image thumbnail blog anda kelihatan suram,berikut adalah contoh widget yang telah dipasang di blog ini.
1)Login ke akaun blogger anda,dashboard>Design>Page elements>Add a Gadget
2)Pilih popular post
3)Selepas itu,dibahagian show --> Post title and,tick pada bahagian image thumbnail seperti gambar dibawah
nota : Title : masukkan tajuk widget anda,sebagai contoh kiriman popular
Most Viewed : Anda boleh tetapkan samaada sepanjang masa,30 hari yang lalu mahupun seminggu yang lalu,untuk dipaparkan pada widget popular post anda.
Show : Tick pada image thumbnail untuk paparkan image pada popular post anda
4)Klik save dan selesai.
1)Login ke akaun blogger anda,dashboard>Design>Page elements>Add a Gadget
2)Pilih popular post
3)Selepas itu,dibahagian show --> Post title and,tick pada bahagian image thumbnail seperti gambar dibawah
nota : Title : masukkan tajuk widget anda,sebagai contoh kiriman popular
Most Viewed : Anda boleh tetapkan samaada sepanjang masa,30 hari yang lalu mahupun seminggu yang lalu,untuk dipaparkan pada widget popular post anda.
Show : Tick pada image thumbnail untuk paparkan image pada popular post anda
4)Klik save dan selesai.
Daftar Blog Anda Ke Enjin Carian
Seperti tajuk diatas,kali ini saya akan buat satu tutorial khas untuk ada mendaftarkan blog anda ke enjin carian agar mudah blog anda di indekskan kedalam enjin carian seperti google,yahoo,bing dll enjin carian.Tahukah anda,apa itu enjin carian?
Enjin carian adalah laman pengkalan data yang mana fungsi utamanya adalah untuk memberi maklum balas terhadap keyword (kata kunci) atau frasa yang dimasukkan ke dalam ruangan yang disediakan. Maklum balas ini adalah hasil carian. Hasil carian akan dipaparkan dalam SERP atau bahasa melayunya hasil muka carian dalam enjin carian.
Mendaftar dengan Google
1)Buka browser web anda dan masukkan url ini --> http://www.google.com/addurl/
2)Isikan maklumat yang diperlukan
URL: masukkan URL blog anda.
Comments: Masukkan keyword (kata kunci) yang berkaitan dengan blog anda.
Word verification : Masukkan huruf verifikasi untuk mengesahkan anda bukan spam.
3)Klik add URL.Done
Mendaftar bersama Yahoo!
1)Buka browser dan taipkan URL ini --> https://siteexplorer.search.yahoo.com/submit
nota : pastikan anda sudah mempunyai akaun dengan yahoo,jika belum ada sila daftar secara percuma disini
2)Isikan maklumat yang diperlukan
-- Klik Submit a Website or Webpage.
-- URL: masukkan URL blog anda.
-- Kemudian, klik Submit URL. Done.
3)Selepas itu,klik Submit A Website Feed.
-- URL: Masukkan URL blog anda.
--klik Submit Feed.
--Anda hanya perlu masukkan atom.xml dan klik Add Feed.
Submit Blog ke Bing
1)Masuk ke http://www.bing.com/webmaster/SubmitSitePage.aspx
2)Isikan maklumat yang diperlukan
- Word verification: untuk mengesahkan yang anda bukan spam,isikan.
- URL: Masukkan URL blog anda.
3)Done
Enjin carian adalah laman pengkalan data yang mana fungsi utamanya adalah untuk memberi maklum balas terhadap keyword (kata kunci) atau frasa yang dimasukkan ke dalam ruangan yang disediakan. Maklum balas ini adalah hasil carian. Hasil carian akan dipaparkan dalam SERP atau bahasa melayunya hasil muka carian dalam enjin carian.
Mendaftar dengan Google
1)Buka browser web anda dan masukkan url ini --> http://www.google.com/addurl/
2)Isikan maklumat yang diperlukan
URL: masukkan URL blog anda.
Comments: Masukkan keyword (kata kunci) yang berkaitan dengan blog anda.
Word verification : Masukkan huruf verifikasi untuk mengesahkan anda bukan spam.
3)Klik add URL.Done
Mendaftar bersama Yahoo!
1)Buka browser dan taipkan URL ini --> https://siteexplorer.search.yahoo.com/submit
nota : pastikan anda sudah mempunyai akaun dengan yahoo,jika belum ada sila daftar secara percuma disini
2)Isikan maklumat yang diperlukan
-- Klik Submit a Website or Webpage.
-- URL: masukkan URL blog anda.
-- Kemudian, klik Submit URL. Done.
3)Selepas itu,klik Submit A Website Feed.
-- URL: Masukkan URL blog anda.
--klik Submit Feed.
--Anda hanya perlu masukkan atom.xml dan klik Add Feed.
Submit Blog ke Bing
1)Masuk ke http://www.bing.com/webmaster/SubmitSitePage.aspx
2)Isikan maklumat yang diperlukan
- Word verification: untuk mengesahkan yang anda bukan spam,isikan.
- URL: Masukkan URL blog anda.
3)Done
Letak 'Recent Comments' Dalam Blog
Ingin memasang recent comments widget kat blog?caranya sangat senang.
1) Login ke akaun blogger,dashboard>Design>Page Elements>Add a Gadget
2) Klik pada more Gadgets,diruangan search taipkan 'Recent Comments' dan tekan search
3)Klik pada gadgets recent comments dan tetapkan apa yang anda inginkan
nota :
Title : tukarkan kepada tajuk yang anda inginkan,sebagai contoh Komen Terkini
Height : ketinggian gadget,sesuaikan dengan yang inginkan
Number of Comments to Display : Memaparkan jumlah komen yang ingin dipaparkan
Summary lenght : Jumlah bilangan perkataan komen dari pengunjung,sesuaikan ikut citarasa anda
4)Done
1) Login ke akaun blogger,dashboard>Design>Page Elements>Add a Gadget
2) Klik pada more Gadgets,diruangan search taipkan 'Recent Comments' dan tekan search
3)Klik pada gadgets recent comments dan tetapkan apa yang anda inginkan
nota :
Title : tukarkan kepada tajuk yang anda inginkan,sebagai contoh Komen Terkini
Height : ketinggian gadget,sesuaikan dengan yang inginkan
Number of Comments to Display : Memaparkan jumlah komen yang ingin dipaparkan
Summary lenght : Jumlah bilangan perkataan komen dari pengunjung,sesuaikan ikut citarasa anda
4)Done
Memasang Butang 'Back To Top'
Pemasangan butang back to top ke dalam blog kita dapat memudahkan pengunjung blog untuk pergi ke atas blog anda tanpa menggunakan scroll secara automatik.Berikut adalah langkah-langkah untuk memasang widget ini.
contoh demo anda boleh klik disini
1)Macam biasa,login to akaun blogger,Dashboards>Design>Page Elements>Add a Widget>HTML/Java Script
2)Seterusnya copy code dibawah
<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:0;" src="http://www3.picturepush.com/photo/a/9132936/640/9132936.png"/></a></div>
nota :
Hijau : anda boleh ubah samaada mahu meletakkan widget ini kira atau kanan
Merah : Url butang back to top yang anda upload,jika ingin menggunakan yang default,abaikan sahaja
3)Done..senang kan?
Bagaimana Memasang iklan Melayang
Tutorial kali ini akan mengajar anda untuk memasang iklan melayang kedalam blog anda.
Sebagai contoh kali ini,saya menggunakan nuffnang sebagai pengiklanan di dalam blog.
mungkin anda ingin menggunakan adverlets,terpulang pilihan hati masing-masing.
Sebelum itu,anda perlu copy dulu kode yang anda ingin masukkan untuk dijadikan iklan melayang
sebagai contoh code iklan dari nuffnang :-
<!-- nuffnang -->
<script type="text/javascript">
nuffnang_bid = "2cfa4c2822ab10f8d62fe584d003f1fe";
document.write( "<div id='nuffnang_ss'></div>" );
(function() {
var nn = document.createElement('script'); nn.type = 'text/javascript';
nn.src = 'http://synad2.nuffnang.com.my/ss.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(nn, s.nextSibling);
})();
</script>
<!-- nuffnang-->
1)Login ke akaun blogger>Dashboard>Design>page elements>Add a Widget>HTML/Java Script
2)Copy code dibawah ini dan gantikan tulisan merah dengan code pengiklanan yang anda dapat diatas,sebagai contoh yang digunakan iklan dari nuffnang.
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #000000;
background:#F1DEDE;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:<img src="http://www5.picturepush.com/photo/a/9132823/640/9132823.png" title="tawaran menarik" alt="tutup" />:.
</a>
</div>
<center>
masukkan code yang anda dapat dari syarikat pengiklanan disini
</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
3)Preview dan jika berpuas hati klik save.done
Dari Youtube : Tukar Video Player kepada MP3 Player
Teruja dengan tajuk diatas?mungkin ramai yang sudah tahu tetapi tutorial kali ini ditujukan khas kepada anda yang masih belum tahu trick ini.tanpa membuang masa lagi,jom kita lihat cara-cara untuk menukar video player dari youtube kepada MP3 player.
contoh
menjadi
1)Dapatkan link video (URL) dari laman youtube
contohnya untuk video diatas
http://www.youtube.com/watch?v=ky9-CNgStqw
2)Buang 'watch?' dan gantikan '=' kepada '/'
sebagai contoh http://www.youtube.com/watch?v=ky9-CNgStqw
ditukar menjadi http://www.youtube.com/v/ky9-CNgStqw
3)Masukkan link yang telah anda ubah tadi kedalam kode dibawah ini
<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="LINK DISINI"></embed>
contoh untuk kode diatas
<embed allowscriptaccess="always" height="25" src="http://www.youtube.com/v/ky9-CNgStqw" type="application/x-shockwave-flash" width="425"></embed>
4)Hasilnya
Memasukkan Ruangan Komen DiBawah Entri
Memasang ruangan komen untuk setiap entri dapat memudahkan pengunjung blog untuk memberi komen/pendapat atau pertanyaan bagi setiap post yang diterbitkan di blog anda.
Secara asasnya, blogger sudah menyediakan cara mudah untuk membolehkan sistem komen dalam blog anda muncul seperti ini.
Apa yang perlu dilakukan adalah enablekan sistem komen ini cara berikut.
1. Login akaun blogger anda, dari dashboard> settings>comments
Pada comments form placement, pilih 'embedded below post'
2. Save setting dan lihat hasilnya..
JIKA tidak berjaya.
3. Klik pada design>edit html>Expand widget templates
4. Backup template anda dengan klik 'download full template'.
5. Tekan ctrl + F untuk mencari kod dibawah.
6. Letakkan kod ini dibawah kod yang anda jumpa pada langkah 5.
7. Save template anda.
Secara asasnya, blogger sudah menyediakan cara mudah untuk membolehkan sistem komen dalam blog anda muncul seperti ini.
Apa yang perlu dilakukan adalah enablekan sistem komen ini cara berikut.
1. Login akaun blogger anda, dari dashboard> settings>comments
Pada comments form placement, pilih 'embedded below post'
2. Save setting dan lihat hasilnya..
JIKA tidak berjaya.
3. Klik pada design>edit html>Expand widget templates
4. Backup template anda dengan klik 'download full template'.
5. Tekan ctrl + F untuk mencari kod dibawah.
<b:include data='post' name='comments'/>
6. Letakkan kod ini dibawah kod yang anda jumpa pada langkah 5.
<b:include data='post' name='comment-form'/>
7. Save template anda.
Memasukkan Kesan Salji Ke Dalam Blog
Jom memeriahkan blog korang dengan kesan salji
Untuk tutorial ini akan diletakkan 2 kod iaitu untuk salji putih dan salji hitam(ada juga salji hitam ye.:)
Demo untuk salji bewarna hitam boleh dilihat disini. DEMO
Cara untuk meletakkan salji dalam blog adalah seperti berikut.
1)Login ke akaun blogger anda,dashboard>Design>Page Element>Add a Gadget>HTML/Java Script
2) Copy salah satu kod berikut kemudian paste dalam ruangan html/javascript
Kod untuk salji putih (sesuai untuk background hitam)
Kod untuk salji hitam (sesuai untuk background putih)
Untuk tutorial ini akan diletakkan 2 kod iaitu untuk salji putih dan salji hitam(ada juga salji hitam ye.:)
Demo untuk salji bewarna hitam boleh dilihat disini. DEMO
Cara untuk meletakkan salji dalam blog adalah seperti berikut.
1)Login ke akaun blogger anda,dashboard>Design>Page Element>Add a Gadget>HTML/Java Script
2) Copy salah satu kod berikut kemudian paste dalam ruangan html/javascript
Kod untuk salji putih (sesuai untuk background hitam)
<script type="text/javascript" src="http://www.yourjavascript.com/14104214083/snow-white.js"></script>
Kod untuk salji hitam (sesuai untuk background putih)
<script type="text/javascript" src="http://www.yourjavascript.com/03441140321/snow-black.js"></script>3) Done :)
Meletak Gambar Sebelah Tajuk Entri
Tajuk entri adalah antara perkara yang pertama dinilai oleh seseorang pengunjung yang mengunjungi sesebuah blog. Disamping mempunyai tajuk-tajuk entri yang gempak², kehadiran penghias juga dapat menambahkan lagi seri pada entri tersebut.
Antara salah satu perkara untuk menambahkan seri tajuk entri adalah dengan meletakkan gambar disebelah tajuk entri.
Contoh:
Berikut adalah langkah-langkah yang perlu dilakukan.
1.Login akaun blogger, dari dashboard >layout > edit html > expand widget templates
2.Tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian cari kod berikut.
3. Letakkan kod dibawah antara kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>
Contoh kod sepatutnya kelihatan seperti ini
Nota:
a. Tukarkan 'url gambar' dengan url gambar yang anda kehendaki
b. Saiz gambar yang biasa digunakan adalah dalam lingkungan 20x20 hingga 30x30.
4. Done
(Tutorial by unwanted86)
Antara salah satu perkara untuk menambahkan seri tajuk entri adalah dengan meletakkan gambar disebelah tajuk entri.
Contoh:
Berikut adalah langkah-langkah yang perlu dilakukan.
1.Login akaun blogger, dari dashboard >layout > edit html > expand widget templates
2.Tekan ctrl + F untuk menghidupkan fungsi 'find' kemudian cari kod berikut.
<a expr:href='data:post.url'><data:post.title/></a>
3. Letakkan kod dibawah antara kod <a expr:href='data:post.url'> dan kod <data:post.title/></a>
<img src="url gambar"/>
Contoh kod sepatutnya kelihatan seperti ini
Nota:
a. Tukarkan 'url gambar' dengan url gambar yang anda kehendaki
b. Saiz gambar yang biasa digunakan adalah dalam lingkungan 20x20 hingga 30x30.
4. Done
(Tutorial by unwanted86)
Ketahui Bilangan Pengunjung Dalam Blog
whous.amung.us menawarkan widget yang dapat menunjukkan bilangan pengunjung yang online pada masa sebenar.
Antara kelebihan menggunakan widget ini adalah paparan yang menarik, dan juga cara pasang pada blog dengan mudah. Boleh lihat demo widget ini dipasang di blog, DISINI.
Berikut adalah langkah yang diperlukan untuk meletakkan widget ini didalam blog anda.
1. Buka web http://whos.amung.us/
2. Pilih kedudukan widget yang dikehendaki (widget akan berada dalam keadaan statik dalam blog anda), selepas itu copy code yang tersedia.
3. Setelah copy code, pastekan di dalam html/javascript yang terdapat dalam page element blog anda.
Dashboard > Design > page element > add a gadget > html/javascript.
4. Done
Tutorial kredit to unwated86
Antara kelebihan menggunakan widget ini adalah paparan yang menarik, dan juga cara pasang pada blog dengan mudah. Boleh lihat demo widget ini dipasang di blog, DISINI.
Berikut adalah langkah yang diperlukan untuk meletakkan widget ini didalam blog anda.
1. Buka web http://whos.amung.us/
2. Pilih kedudukan widget yang dikehendaki (widget akan berada dalam keadaan statik dalam blog anda), selepas itu copy code yang tersedia.
3. Setelah copy code, pastekan di dalam html/javascript yang terdapat dalam page element blog anda.
Dashboard > Design > page element > add a gadget > html/javascript.
4. Done
Tutorial kredit to unwated86
Menukar Ayat Asal Pada Linkwithin
Bagi sesiapa yang menggunakan linkwithin pada blog, sememangnya akan muncul satu ayat yang telah di'set'kan secara automatik semasa meletakkan gadget tersebut.
Bagi bahasa melayu, akan keluar ayat, "Anda mungkin juga meminati" dan bagi english "You may also like these stories"..
jika ia ditukar menjadi seperti dibawah rasanya lagi cool..betul x?
Untuk menukar ayat seperti diatas sangatlah senang
1)Login akaun blogger anda,kemudian pilih dashboard>Design>Page Elements
2)Cari elemen untuk LinkWithin dan kemudian klik edit
Kod anda sepatutnya seperti ini
4)Done
Bagi bahasa melayu, akan keluar ayat, "Anda mungkin juga meminati" dan bagi english "You may also like these stories"..
jika ia ditukar menjadi seperti dibawah rasanya lagi cool..betul x?
Untuk menukar ayat seperti diatas sangatlah senang
1)Login akaun blogger anda,kemudian pilih dashboard>Design>Page Elements
2)Cari elemen untuk LinkWithin dan kemudian klik edit
3) Daripada kod yang dipaparkan, tambah kod ini dibahagian atasnya
<script>linkwithin_text='AYAT ANDA DISINI'</script>
Kod anda sepatutnya seperti ini
4)Done
Daftar dan letak linkwithin
untuk memaparkan post yang berkaitan di blog,salah satu cara yang popular adalah dengan menggunakan servis dari linkwithin.Dengan menggunakan linkwithin ianya nampak lebih menarik kerana memaparkan paparan thumbnail untuk entri yang berkaitan.
Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.
Cara untuk memasing linkwithin ke blog adalah seperti berikut :-
1)Buka laman www.linkwithin.com
2)Selepas itu,isikan maklumat yang diperlukan
3)Klik pada Get Widget!
4)Klik install widget
5)Pilih blog yang anda ingin masukkan dengan linkwithin
6)Klik save pada page elements anda.Done
Antara kelebihan menggunakan linkwithin adalah:
1.Paparan dengan thumbnail yang lebih menarik perhatian pengunjung
2.Cara yang mudah untuk letak dalam blog tanpa memerlukan ubahan yang kompleks.
Cara untuk memasing linkwithin ke blog adalah seperti berikut :-
1)Buka laman www.linkwithin.com
2)Selepas itu,isikan maklumat yang diperlukan
3)Klik pada Get Widget!
4)Klik install widget
5)Pilih blog yang anda ingin masukkan dengan linkwithin
6)Klik save pada page elements anda.Done
Meletakkan Website lain Ke Dalam Blog
Tutorial ini sangat berguna bagi anda yang mempunyai idea untuk memasukkan website lain ke dalam blog anda tanpa meninggalkan blog anda.seperti gambar dibawah
meletakkan website lain kedalam blog boleh dilakukan cuma dengan menggunakan javascript
contoh demo blog anda boleh klik disini
Tanpa membuang masa,jom kita lihat cara-cara untuk meletakkan website lain ke dalam blog kita
1)Macam biasa,login ke dalam akaun anda,di dashboard>Design>Page Elements>Add a gadget
2)pilih HTML/javascript
3) Copy code dibawah ini
<!--CHANGE LINKS BELOW TO YOUR OWN-->
<a href="javascript:jumpto('http://mediasiber.blogspot.com')">mediasiber</a> |
<a href="javascript:jumpto('http://mediasiber.blogspot.com/search/label/tips')">tutorial blog</a> |
<script language="javascript">
<!--
//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window
var displaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<iframe id="external" style="width:99%;height:400px" src="http://mediasiber.blogspot.com"></iframe>'
/////NO NEED TO EDIT BELOW HERE////////////
if (displaymode==0)
document.write(iframecode)
function jumpto(inputurl){
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=inputurl
else if (document.all&&displaymode==0)
document.all.external.src=inputurl
else{
if (!window.win2||win2.closed)
win2=window.open(inputurl)
//else if win2 already exists
else{
win2.location=inputurl
win2.focus()
}
}
}
//-->
</script>
nota :
warna biru : gantikan dengan nama yang anda mahu
warna jingga : gantikan dengan url
meletakkan website lain kedalam blog boleh dilakukan cuma dengan menggunakan javascript
contoh demo blog anda boleh klik disini
Tanpa membuang masa,jom kita lihat cara-cara untuk meletakkan website lain ke dalam blog kita
1)Macam biasa,login ke dalam akaun anda,di dashboard>Design>Page Elements>Add a gadget
2)pilih HTML/javascript
3) Copy code dibawah ini
<!--CHANGE LINKS BELOW TO YOUR OWN-->
<a href="javascript:jumpto('http://mediasiber.blogspot.com')">mediasiber</a> |
<a href="javascript:jumpto('http://mediasiber.blogspot.com/search/label/tips')">tutorial blog</a> |
<script language="javascript">
<!--
//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window
var displaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<iframe id="external" style="width:99%;height:400px" src="http://mediasiber.blogspot.com"></iframe>'
/////NO NEED TO EDIT BELOW HERE////////////
if (displaymode==0)
document.write(iframecode)
function jumpto(inputurl){
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=inputurl
else if (document.all&&displaymode==0)
document.all.external.src=inputurl
else{
if (!window.win2||win2.closed)
win2=window.open(inputurl)
//else if win2 already exists
else{
win2.location=inputurl
win2.focus()
}
}
}
//-->
</script>
nota :
warna biru : gantikan dengan nama yang anda mahu
warna jingga : gantikan dengan url
Memasang fungsi Signature Dalam Blog
Ada sesetengah dari blogger yang suka meletakkan signature diakhir post,tutorial kali ini akan mengajar anda untuk meletakkan fungsi signature disetiap post dalam blog anda dengan sekali pasang sahaja.
1)Buka web http://www.mylivesignature.com/ untuk create signature anda.
Nota:pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'
2.Setelah selesai signature anda, uploadkan untuk dapat url seperti berikut sebagai contoh
http://www1.picturepush.com/photo/a/9124409/640/9124409.png
Cara pasang dalam Blog
1. Login kepada blog anda, kemudian dari dashboard, Design > Edit Html > Expand Widget Templates (Backup template anda untuk langkah keselematan)
2. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi find kemudian cari kod dibawah
left : kedudukan signature boleh ditukar kepada center ataupun right
URL gambar/signature anda : Masukkan url gambar/signature
4. Selepas selesai letak code, klik preview dan jika anda berpuas hati, klik save.:)
1)Buka web http://www.mylivesignature.com/ untuk create signature anda.
Nota:pada bahagian terakhir untuk selesai signature anda, pilih 'want to download this signature'
2.Setelah selesai signature anda, uploadkan untuk dapat url seperti berikut sebagai contoh
http://www1.picturepush.com/photo/a/9124409/640/9124409.png
Cara pasang dalam Blog
1. Login kepada blog anda, kemudian dari dashboard, Design > Edit Html > Expand Widget Templates (Backup template anda untuk langkah keselematan)
2. Pada keyboard anda, tekan ctrl + F untuk menghidupkan fungsi find kemudian cari kod dibawah
<p><data:post.body/></p>3. Copy code ini dan paste di bawah kod tadi.
<p><div align="left"><img src="URL gambar/signature anda"/></div></p>Penerangan :
left : kedudukan signature boleh ditukar kepada center ataupun right
URL gambar/signature anda : Masukkan url gambar/signature
4. Selepas selesai letak code, klik preview dan jika anda berpuas hati, klik save.:)
Menukar ikon Pada URL Blog
Mempunyai ikon tersendiri dapat membezakan identiti anda dengan blog2 yang lain,sebab jika kita menggunakan default URL ikon untuk blogger,ianya menggunakan ikon B yang berwarna oren putih.
Tutorial hari ini akan mengajar anda bagaimana cara untuk menukar ikon pada url blog anda.
1)pilih ikon kegemaran anda
pilih dulu ikon yang ingin anda jadikan sebagai ikon url blog anda..jika tidak mempunyai idea bolehlah melawat laman web ini untuk panduan pemilihan ikon
http://www.freeiconsweb.com/index.html
http://www.gifanimations.com/
2)Upload ikon yang anda save tadi ke laman penyedia upload image
Saya ambil contoh picture2push.com sebab tidak memerlukan pendaftaran akaun
Selepas upload,sila pastikan anda mempunyai direct link untuk dimasukkan kedalam kode
3)Login ke akaun blogger anda,seterusnya dari dashboard klik design>Edit HTML dan seterusnya tick pada expand widgets templates seperti dibawah
4)untuk mengelakkan sebarang masalah,anda dinasihatkan backup terlebih dahulu template anda,iaitu dengan cara diruangan backup/restore template,anda klik pada download full template dan simpan ke dalam hard disk anda.
5)Seterusnya,gunakan ctrl+F untuk shortcut kemenu find.Dalam bahagian kotak dibawah, taipkan
< /head>
6)Selepas itu,copy kode dibawah ini dan digantikan dengan url ikon yang anda upload tadi.untuk keterangan lanjut sila rujuk gambar dibawah
salin kod dibawah
Tutorial hari ini akan mengajar anda bagaimana cara untuk menukar ikon pada url blog anda.
1)pilih ikon kegemaran anda
pilih dulu ikon yang ingin anda jadikan sebagai ikon url blog anda..jika tidak mempunyai idea bolehlah melawat laman web ini untuk panduan pemilihan ikon
http://www.freeiconsweb.com/index.html
http://www.gifanimations.com/
2)Upload ikon yang anda save tadi ke laman penyedia upload image
Saya ambil contoh picture2push.com sebab tidak memerlukan pendaftaran akaun
Selepas upload,sila pastikan anda mempunyai direct link untuk dimasukkan kedalam kode
3)Login ke akaun blogger anda,seterusnya dari dashboard klik design>Edit HTML dan seterusnya tick pada expand widgets templates seperti dibawah
4)untuk mengelakkan sebarang masalah,anda dinasihatkan backup terlebih dahulu template anda,iaitu dengan cara diruangan backup/restore template,anda klik pada download full template dan simpan ke dalam hard disk anda.
5)Seterusnya,gunakan ctrl+F untuk shortcut kemenu find.Dalam bahagian kotak dibawah, taipkan
< /head>
6)Selepas itu,copy kode dibawah ini dan digantikan dengan url ikon yang anda upload tadi.untuk keterangan lanjut sila rujuk gambar dibawah
salin kod dibawah
<link href='MASUKKAN DIRECT LINK ICON ANDA DISINI' rel='shortcut icon' type='image/x-icon'/>
Seterusnya klik preview untuk melihat ikon anda,jika berjaya klik save.done
Background Dalam Entri
Berikut adalah tutorial untuk memasang customize backgroud dalam blog anda.
Apabila anda login pada blog anda, letakkan kod ini dalam new post anda. (pastikan semasa kod ini di paste, new post anda dalam keadaan 'edit html' bukan 'compose'- ini untuk mengelakkan code warna dicopy sekali.:)
<div style="background:url(Link gambar disini) no-repeat;">- Letakkan link gambar pada tulisan biru (kalau anda upload dalam blog kemudian copy url gambar lagi bagus.:)
Taip segala entri untuk blog anda disini.
</div>
- jika anda menggunakan gambar bersaiz kecil, sila buang no-repeat.
-Taip apa sahaja entri anda seperti biasa dalam kawasan merah. Atau kalau hendak lebih mudah, buat apa sahaja entri, tetapi ending mesti ada </div>
kredit tanpa prejudis kepada unwanted86
Memasang Disable Right Click Pada Blog
Tutorial kali ini juga diambil dari laman unwanted86 melalui blog tutorialuntukblog.
mungkin ada sesetengah dari anda yang tidak suka terjadinya masalah copy paste dari blog anda tanpa memberikan sebarang kredit ataupun backlinks.
jika anda ingin disabled right click seperti dibawah,berikut adalah langkah-langkah,sangat senang untuk dipasang
1)Copy kod dibawah
<script language=JavaScript>
<!--
//edit by mediasiber
var message="Masukkan Mesej Anda Disini";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
2)Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Design>Add a Page element >html/javascript.
4)Tekan save dan selesai
mungkin ada sesetengah dari anda yang tidak suka terjadinya masalah copy paste dari blog anda tanpa memberikan sebarang kredit ataupun backlinks.
jika anda ingin disabled right click seperti dibawah,berikut adalah langkah-langkah,sangat senang untuk dipasang
1)Copy kod dibawah
<script language=JavaScript>
<!--
//edit by mediasiber
var message="Masukkan Mesej Anda Disini";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
2)Paste pada "HTML/javascript" dalam blog anda.
Dashboard >Design>Add a Page element >html/javascript.
4)Tekan save dan selesai
Bagaimana Meletakkan Iklan Nuffnang Secara Statik
Bagi anda yang sudah mempunyai blog sendiri sudah tentu ingin menjana sedikit pendapatan dari hasil blogging,biarpun anda blogging sebab minat semata-mata tapi jika mendapat sedikit suntikan duit dari pihak nuffnang sebagai contoh sudah tentu dapat menjimatkan kewangan anda terutamanya untuk membayar bil streamix mahupun bil broadband.
Tutorial hari ini akan mengajar anda semua bagaimana cara untuk memasang iklan nuffnang(skysscraper) secara statik diblog anda walaupun entri telah di skroll ke bawah.
sebelum tu. Mungkin ada yang bertanya 'Letak iklan statik tidak menyalahi terma dan syarat Nuffang ke.?'
So ini jawapan dari nuffnang sendiri.
Yes, it is allowed for a blogger to place his ad unit static as shared by you. That position is no doubt desirable and advertisers would love to advertise on such placement.
However, bear in mind that the desirability for a Skyscraper ad unit is the same if it\'s placed;
- the top gadget of a sidebar
- visible upon loading of the page
- visible at all time (static ad)
As such, it doesn\'t really make a big difference, but nevertheless, advertisers will pay more attention to blogs which embed the ad units as a static ad.
Cheers,
Robb Chew
Blogger Relations Executive
Nuffnang Sdn Bhd
Cara-cara untuk memasing iklan secara statik adalah seperti berikut :-
1)Login ke akaun nuffnang dan copy kode iklan nuffnang untuk skyscrapter.
2) Copy kod di bawah, kemudian letakkan di HTML/javascript dalam blog anda
( Dashboard >Design > Page elements > Add a gadget > HTML/javascript )
<div style='display:scroll; position:fixed; bottom:5px; right:5px;'>Letak Kod Nuffnang Sini</div>
Penerangan :
i.) Nilai 5px boleh diubah. Nilai ini menentukan jarak dari bawah dan jarak dari kanan.
ii.) Masukkan kod iklan Nuffnang yang diambil dari step 1. (pastikan kod adalah untuk Skyscraper)
Tutorial hari ini akan mengajar anda semua bagaimana cara untuk memasang iklan nuffnang(skysscraper) secara statik diblog anda walaupun entri telah di skroll ke bawah.
sebelum tu. Mungkin ada yang bertanya 'Letak iklan statik tidak menyalahi terma dan syarat Nuffang ke.?'
So ini jawapan dari nuffnang sendiri.
Yes, it is allowed for a blogger to place his ad unit static as shared by you. That position is no doubt desirable and advertisers would love to advertise on such placement.
However, bear in mind that the desirability for a Skyscraper ad unit is the same if it\'s placed;
- the top gadget of a sidebar
- visible upon loading of the page
- visible at all time (static ad)
As such, it doesn\'t really make a big difference, but nevertheless, advertisers will pay more attention to blogs which embed the ad units as a static ad.
Cheers,
Robb Chew
Blogger Relations Executive
Nuffnang Sdn Bhd
Cara-cara untuk memasing iklan secara statik adalah seperti berikut :-
1)Login ke akaun nuffnang dan copy kode iklan nuffnang untuk skyscrapter.
2) Copy kod di bawah, kemudian letakkan di HTML/javascript dalam blog anda
( Dashboard >Design > Page elements > Add a gadget > HTML/javascript )
<div style='display:scroll; position:fixed; bottom:5px; right:5px;'>Letak Kod Nuffnang Sini</div>
Penerangan :
i.) Nilai 5px boleh diubah. Nilai ini menentukan jarak dari bawah dan jarak dari kanan.
ii.) Masukkan kod iklan Nuffnang yang diambil dari step 1. (pastikan kod adalah untuk Skyscraper)
Buat gambar Bergerak (scrolling Image)
Pergerakan setiap gambar bergerak boleh diubah sama ada dari kiri ke kanan,bawah ke atas serta kanan ke kiri.anda juga boleh mengubah kelajuan pergerakan gambar tersebut.
Contoh kod scrolling image adalah seperti berikut,sila tukarkan perkataan yang berwarna merah dengan url gambar apa yang anda ingin masukkan.
<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
</marquee>
kod kredit to blog tutorialuntukblog
Penerangan:
Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.
contoh scrolling image adalah seperti dibawah
Contoh kod scrolling image adalah seperti berikut,sila tukarkan perkataan yang berwarna merah dengan url gambar apa yang anda ingin masukkan.
<marquee direction="left" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" width="150" height="200">
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
<a href="link untuk dibuka" target="_blank"><img src="url gambar" /></a>
</marquee>
kod kredit to blog tutorialuntukblog
Penerangan:
Arah pergerakan gambar : boleh ditukar kepada up, down dan right.
Kelajuan pergerakan gambar : boleh ditukar kepada nombor lain. Semakin tinggi nilai semakin laju.
link untuk dibuka: link yang hendak dibuka apabila gambar diklik.
url gambar: url gambar yang hendak dipamerkan.
contoh scrolling image adalah seperti dibawah
Bagaimana Menukar Template Blog Anda
Mungkin anda sudah bosan dengan rupa blog anda yang suram,untuk menyelesaikan masalah ini,apa kata anda mencari template yang baru dan upload template baru sebagai rupa bentuk baru rumah anda,untuk mencari senarai laman web yang menawarkan senarai template percuma untuk dimuat turun,anda boleh rujuk disini -->
Senarai laman Web Untuk Muat Turun Template Blog
Berikut adalah langkah-langkah untuk menukar template blog anda.
1)Login ke akaun blogger anda,di dashboard kemudian pilih design dan kemudian klik pada edit HTML.
2) klik pada browse dan cari lokasi file template *.xml dari pc/laptop anda,dan klik open dan seterusnya upload
3)Klik upload
4)apabila upload proses berlaku,paparan seperti dibawah akan keluar dan pilih 'keep widget'.
5)Selesai dan anda boleh view blog anda yang sudah berwajah baru.
Langganan:
Postingan (Atom)