Sunday, 10 August 2014

Widget Animated Recent Post Dengan Thumbnail

Widget Animated Recent Post Dengan Thumbnail

Animated Recent Post merupakan antara widget yang mampu memaparkan artikel anda yang terkini dalam bentuk yang lebih menarik lagi. Ia memaparkan artikel terkini yang disertakan dengan timer untuk bertukar ke artikel yang lain dalam bentuk animasi. Sebelum ini saya ada berkongsi tutorial menghasilkan recent post tanpa gambar.

Widget ini akan memaparkan jumlah artikel terkini anda iaitu tajuk artikel, serta jumlah komen pada artikel tersebut. Anda boleh tetapkan seberapa banyak kandungan artikel terkini yang anda mahu ianya animated pada blog anda.

Cara Meletekan Widget Animated Recent Post Dengan Gambar

Langkah 1:
Login ke akaun blogspot anda

Langkah 2:
Dashboard >> Layout

Langkah 3:
Klik add gadget pada side bar anda

Langkah 4:
Add Html/Javascript

Langkah 5:
Copy kode di bawah kemudian Pastekan pada Html/JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>



    <style type="text/css" media="screen">
    <!--

    #rahmadgraphic {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:350px;
    }
    #rahmadgraphic ul{
    width:298px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #rahmadgraphic li {
    width:298px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff url(http://1.bp.blogspot.com/-6Yrt9wUoCCA/UsiNzs49iVI/AAAAAAAAA44/NsEEdO5WBdc/s1600/easytins-com.jpg) repeat-x;
    border:1px solid #ddd;
    }
    #rahmadgraphic li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #rahmadgraphic li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }
    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->

    </style>

    <script language='JavaScript'>

    imgr = new Array();
    imgr[0] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
    imgr[1] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
    imgr[2] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
    imgr[3] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
    imgr[4] = "http://1.bp.blogspot.com/-Zw_qVJpyqUI/Uq8VbD5YZEI/AAAAAAAAAsE/VN-TEDq0Y3Y/s1600/no+image.png";
    showRandomImg = true;
    boxwidth = 600;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = false;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;

    home_page = "http://seo.rahmadgraphic.my/";

    limitspy=4
    intervalspy=4000
    </script>
    <div id="rahmadgraphic">
    <script style="text/javascript" src="https://googledrive.com/host/0B7pOQPLcBrlSdFU4SjRZTEl1QUE"></script></div>
<a href="http://goo.gl/0394O4" style="font-size: 8px; text-decoration:none; color: #cccccc; target="_blank">Get This Widget</a>


Langkah 6:
Ubah Suai

width:298px ~ Lebar widget, tukar 298 kepada lebar yang anda mahukan.
numposts = 10 ~ Jumlah post yang akan animated
http://seo.rahmadgraphic.my/ ~ Tukar kepada url Blog Anda
limitspy=4 ~ Jumlah paparan post yang statik
intervalspy=4000 ~ Speed animasi recent post ke post yang lain

Langkah 7:
Klik Save dan Lihat hasilnya
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 
banner

Delivered by FeedBurner