Our Blog! Top News! Be a Web Designer with Joomla! Be a Good Blogger with Blogger Lessons Download Operating Systems FREE!
Topics :

Sunday, December 7, 2014

Add a Automated Featured Post Widget on your Web or Blog Site!

By DJ Niraj  |  7:41 AM 2 comments



Automatic වෙනස්වෙන Featured Post විජේට්ටුවක් ඔබේ වෙබ් අඩවියටත්....


ඔන්න එහෙනම් ටික දවසක නිවාඩුවකින් පස්සේ මම අද ආවා අලුත්ම දෙයක් ඔයාලට අරගෙන... මේ දවස් ටිකේම ජොබ් එක නිසා ගොඩාක් කාර්යබහුල වෙලා හිටපු නිසා මේ පැත්තේ එන්නවත් වෙලාවක් තිබුනේ නැ. එත් ඉතින් ඔන්න නිවාඩු දවසේ අලුත් දෙයක් ඔයාලට දෙන්න ඕනි කියලා හිතුන නිසා අරගෙන ආවා.

ඔයාලගේ බ්ලොග් වල සාමානයෙන් ගූගල් ලා දෙන මෙලෝ රහක් ලස්සනක් නැති Featured Post විජේට්ටු දානවා. එත් ඒවා එච්චර ලස්සන නැනේ. ඉතින් එකට අලුත්ම සහ ලස්සන විසදුමක් තමයි මම අරගෙන ආවා. මේක ඔටෝම update වෙනවා වගේම සෑම තත්පර 5කට සැරයක්ම වෙනස් වෙනවා. ඇත්තම කිව්වොත් ඇනිමේට් වෙනවා. ඉතින් මම කියනවට වඩා demo එකක් බලලම ඉන්නකෝ.



හරි එහෙනම් අපි බලමුකෝ ඒක කොහොමද බ්ලොග් එකට හරි වෙබ් අඩවියට හරි යොදාගන්නේ කියලා. බ්ලොග් එකක්නම් බ්ලොගර් වල විදිය විතරක් මම කියන්නම් අනිත් ඒවත් ඒ වගේම තමයි ලොකු වෙනසක් නැ. 

ඉස්සෙල්ලම Layout > Add a Gadget > HTML/Javascript විදියට ගිහින් HTML විජේට්ටුවක් අරගන්න. දැන් මේ පල්ලෙහා තියන කෝඩ් එක ඒ HTML box එකට කොපි කරන්න.

<center>
<div id="headerbox">Featured Posts</div>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.myblog.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>
<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/>
<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.abt-sidebar-slider {
    font: 11px Verdana,Geneva,sans-serif;
}
ul.abt-sidebar-slider, ul.abt-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.abt-sidebar-slider {
    height: 500px;
    width: 100%;
}
ul.abt-sidebar-slider li {
    display: none;
    float: left;
    height: 24.5%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(1), ul.abt-sidebar-slider li:nth-child(2), ul.abt-sidebar-slider li:nth-child(3), ul.abt-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.abt-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.abt-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.abt-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
ul.abt-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.abt-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .overlayx, ul.abt-sidebar-slider img {
    border: 4px solid #2E8DCE;
    border-radius: 3px 3px 3px 3px;
}
ul.abt-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.abt-sidebar-slider h4 {
    color: white;
    font-family: Oswald;
    font-size: 25px;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: 2;
}
ul.abt-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}
ul.abt-sidebar-slider li:nth-child(2) .autname, ul.abt-sidebar-slider li:nth-child(3) .autname {
    display: none;
}
.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #535353 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #535353;
    margin-left: -3px;
}
.date {
    background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
    bottom: 93px;
    padding: 8px;
    position: relative;
    right: 6px;
}
#headerbox {
    background: #8FB93D;
    font-family: Oswald;
    padding: 4px;
}
</style>
</center>
දැන් මේ කෝඩ් එකේ http://www.myblog.com කියලා තියන තැනට ඔයාගේ බ්ලොග් එකේ හරි වෙබ් අඩවියේ හරි URL එක දෙන්න. දැන් විජේට්ටුව save කරන්න. දැන් ගිහින් preview එක බලන්නකෝ. එතකොට වැඩ කරන හැටි බලන්න පුළුවන්. වෙන වෙබ් අඩවියක වුනත් body කොටස තුල ඔයා කැමති තැනකට මේ කෝඩ් එක කොපි කරලා බලන්න.

එහෙනම් මම දැන් යනවා. ආයිත් ඉතින් සතියකින් තමයි එන්න වෙන්නේ. එත් කමක් නැනේ එහෙම හරි එනවනේ. ඔයාලට මොකක්ම හරි ප්‍රශ්නයක් තියනවා නම් මගෙන් අහන්න.

Author: DJ Niraj

Hello My Name is Sandun Isuru Niraj, And I'm from beautifull island Sri Lanka which is called the pearl of the Indian Ocean. I Love the blogging and web designing. Not only that I love programming much.....

2 comments:

  1. පස්සේ ඉඩ තියෙන වෙලාවක බලන්නම්.

    ReplyDelete

ඔබගේ අදහසත් එකතු කරන්න. මට ඒක ගොඩාක් වටිනවා..


Connect with Google+

All Rights Reserved

Protected by Copyscape Web Plagiarism Software

Safety First....

E-mail Newsletter

Sign up now to receive breaking news and to hear what's new with us.

Recent Articles

TOP