— category

Home > All posts

Bagaimana Membina Page Feel Pada Penjuru Atas Blog

Posted by TerbaikLaH on Saturday, September 1, 2012 at 4:19 PM

Anda ingin memasang page peel pada blog anda?Sebelum itu tahukah anda apa itu page peel,page peel adalah efek yang memaparkan muka surat yang boleh diselak dan biasanya dipasang pada penjuru atas kanan pada blog.anda semua boleh melihat demo disini.
Berminat?jom kita lihat cara-cara untuk memasangnya.tutorial ini dikreditkan kepada maribinablog

1)Log in blog => Dashboard => Layout => Edit HTML. Seterusnya klik pada kotak Expand Widget Templates.

Dengan menggunakan keyboard, tekan Ctrl + F. Salin atau taipkan kod ]]></b:skin> dan seterusnya tekan Enter.

2)Salin kod yang berwarna biru di bawah dan pastekan di bawah atau selepas kod ]]></b:skin> pada script template.

<style type='text/css'>
    img { behavior: url(iepngfix.htc) }
    #pageflip {
    position: relative;
    right: 0; top: 0;
    float: right;
    }
    #pageflip img {
    width: 50px; height: 52px;
    z-index: 99;
    position: absolute;
    right: 0; top: 0;
    -ms-interpolation-mode: bicubic;
    }
    #pageflip .msg_block {
    width: 50px; height: 50px;
    overflow: hidden;
    position: absolute;
    right: 0; top: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1xz07r1UEusx8ufMGq8O_v4H00vGlB7FmmXzq-35grEARjhQ32T2CBv37TCJkld6ocDXpKG6hVBikyXFHPiNGcgOv8kj3rrENENGEhKzVtJfiL3EFXcQ_2CzK8tMkeoKAxhM6OCb3CMQ/s320/PageSubscribe.png) no-repeat right top;
    }
    </style>

    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){

    //Page Flip on hover

    $("#pageflip").hover(function() {
    $("#pageflip img , .msg_block").stop()
    .animate({
    width: '307px',
    height: '319px'
    }, 500);
    } , function() {
    $("#pageflip img").stop()
    .animate({
    width: '50px',
    height: '52px'
    }, 220);
    $(".msg_block").stop()
    .animate({
    width: '50px',
    height: '50px'
    }, 200);
    });

    });
    </script>

3)Selepas itu,tekan Ctrl + F. Salin atau taipkan kod <body> dan seterusnya tekan Enter.
4)Salin kod yang berwarna merah di bawah dan pastekan di bawah atau selepas kod <body> pada script template.

nota: Tukar URL yang di bold dengan URLblog anda.

<div id='pageflip'>
<a href='http://mediasiber.blogspot.com/feeds/posts/default'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHmoOHtnE024L8W4xv2jTee_hYoMoF54Z2O_g6nsSnMllkyKFsUcltZ8cMR6p_0karf_XRGdwJ_Dg2zL7AchfStIZxgGmWGvWFRr5Vjh9awc2N2vMnFl4ZDmRWeFv0rmFNUiXvncaoUOo/s320/pageflip.png'/></a>
<div class='msg_block'/>
</div>

Bagaimana Memasang Random Post Widget

Posted by TerbaikLaH at 3:30 PM

Widget ini akan memaparkan tajuk-tajuk post anda secara rawak seperti dibawah

Berikut adalah langkah-langkah untuk memasang widget ini ke dalam blog anda

1)Salin kod dibawah dan gantikan pada line yang berwarna merah.Untuk mengubah bilangan paparan post pada widget tersebut, anda boleh mengubah nilai 5 kepada nilai yang anda inginkan.

.random_post_content{width:100%;}

.random_post_content img {width:32px;height:32px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;}

.random_post_content_item {border-top:#888 thin dashed;}

.random_post_content_item table, .random_post_content_item tr, .random_post_content_item td {vertical-align: middle;}

.random_post_content_item table {margin-bottom:2px;margin-top:3px;}

.random_post_content_item:hover {background-color:#4A3829;}

.random_post_title a{text-transform:uppercase;font-size:12px;text-decoration:none;font-weight:bold}

.random_post_info a{font-size:11px;text-decoration:none;}

.random_post_content_item:hover .random_post_title a{color:#FFFFCC;}

.random_post_content_item:hover .random_post_info a{color:#888;}

.random_post_content_item:hover .random_post_title a:hover{color:#FFCC00;}

.random_post_content_item:hover .random_post_info a:hover{text-decoration:underline;}

--></style>

var Random_Max = 5;

var Total_Posts_Number = 0;

var Rand_Posts_Title = [];

var Rand_Posts_Url = [];

var Rand_Posts_Author = [];

var Rand_Posts_Comment_Number = [];

var Rand_Posts_Thumbnail = [];

var Rand_Posts_Snippet = [];

function Install_Random_Posts(){var str_out = "";for (var i = 0; i < Random_Max; i++){str_out += '<div class="recent_post_content_item">';str_out += '<table width="0%" border="0">';str_out += '<tr>';str_out += '<td>';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += '<img src="' + Rand_Posts_Thumbnail[i] + '" width="32px" height="32px"/>';str_out += '</a>';str_out += '</td>';str_out += '<td>';str_out += '<div class="recent_post_title">';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += Rand_Posts_Title[i];str_out += '</a>';str_out += '</div>';str_out += '<div class="recent_post_info">';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += 'By ' + Rand_Posts_Author[i] + ' - ' + Rand_Posts_Comment_Number[i] + ' comments';str_out += '</a>';str_out += '</div>';str_out += '</td>';str_out += '</tr>';str_out += '</table>';str_out += '</div>';}document.getElementById('random_posts_id').innerHTML = str_out;}

function Vbs_Get_Post_Num(json){Total_Posts_Number = json.feed.openSearch$totalResults.$t;if (Total_Posts_Number <= Random_Max){var start_index = 1;Random_Max = Total_Posts_Number;}else{var start_index = 1 + Math.floor(Math.random() * (Total_Posts_Number - Random_Max));

}document.write('<script type="text/JavaScript" src="http://URL-blog-anda.blogspot.com/feeds/posts/default?start-index=' + start_index + '&max-results=' + Random_Max + '&orderby=published&alt=json-in-script&callback=Vbs_Random_Post"><\/script>');}

--></script>

2)Kemudian,log in dalam akaun blogger anda,dashboard>design>page elements>Add a Gadget>HTML/Java Script.
3)Selepas itu,paste kode diatas dan tekan save
4)Siap

Cara Pasang Efek Zoom Pada Gambar

Posted by TerbaikLaH at 3:08 PM

Untuk memasang efek zoom pada gambar,sebagai contoh gambar diatas(gerakkan cursor kebahagian gambar zoom diatas),caranya amatlah senang.

1)Log in ke blogger,dashboard>design>Edit HTML
2) Tekan kekunci F3 atau Ctrl+F. Seterusnya taip atau paste kod
]]></b:skin> pada ruang Find dan kemudian tekan Enter
3)Masukkan kod dibawah ini sebelum ]]></b:skin>

.post img {
filter:alpha(opacity=60); /* Internet Explorer */
opacity:0.6; /* standard CSS3 */
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3);
}

4)Klik preview,dan jika tiada error,klik save dan lihat hasilnya

Bagaimana Memasang Recent posts floating bar widget di Blogspot

Posted by TerbaikLaH at 2:52 PM

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/AVvXsEi2sbeCwhyciULSPbten0w4eGAtUO3IGLXcvpwbZMRosaqF8_O8Et4yI6QYC55HqqQwDuK-0r2dZEeyEHUj6gPpBilpN8mRL_14LI5_aFtEfJ3wHQzVQRQZdoa8EcZj-TxxsWKxkEu0n7CT/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/AVvXsEg1vP3CAwUqeg0UD8d6FXFVvny2u17_uWkE05QcDUdKLFRDPjiglUfjeXaRzRRwye8imuxy0WwAQSZJ8uDLVR0V-M1jgyZr5APwR3hRjU0IqUqOOhUnCJmZIrhbYhv4NR4TP949KspH6n8/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.

Memasang widget Recent comments dengan avatar

Posted by TerbaikLaH at 2:31 PM

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

Tukar Cursor Dalam Blog

Posted by TerbaikLaH at 2:03 PM

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

Meletakkan Widget Popular Post With Thumbnail

Posted by TerbaikLaH at 1:51 PM

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.

TerBaikLaH