Highslide 3.3.3 Lastest for Bo-blog 2.1

Mod này có chức năng zoom ảnh khi ta rê chuột lên tấm ảnh đó, rất đẹp đó bạn à, xem demo như blog của mình nhé. Cùng làm nào

Plugin này giống như web 2.0 vậy

Trước tiên, bạn download file nén trên về, giải nén, ulpoad lên host, trong đó có 2 thư mục, inc/ubb.php và highslide

Bạn upload thư mục highslide vào thư mục blog/ và upload fiile inc/ubb.php đè lên file ubb.php cũ.

Tiếp theo ta tiến hành edit 2 file : template/thư mục template mà bạn đang dùng/elements.php và style.css

1. Elements.php

Tìm:

{extraheader}

Thêm vào bên dưới nó:

<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
</script>
<style type="text/css">
    .highslide {
        cursor: url(highslide/graphics/zoomin.cur), pointer;
        outline: none;
    }

    .highslide-active-anchor img {
        visibility: hidden;
    }

    .highslide img {
        border: 1px solid #666666;
        padding: 3px;
        background-color: #292929;
    }

    .highslide:hover img {
        border: 1px solid #666666;
        padding: 3px;
        background-color: #FFFFFF;
    }

    .highslide-image {
        border: 1px solid white;
        padding: 3px;
        background-color: #FFFFFF;
    }

    .highslide-image-blur {}

    .highslide-caption {
        display: none;
        border: 1px solid white;
        border-top: none;
        font-family: Verdana, Helvetica;
        font-size: 10pt;
        padding: 5px;
        background-color: white;
    }

    .highslide-loading {
        display: block;
        color: black;
        font-size: 12pt;
        font-family: sans-serif;
        font-weight: bold;
        text-decoration: none;
        padding: 2px;
        border: 1px solid black;
        background-color: white;
        padding-left: 22px;
        background-image: url(highslide/graphics/loader.white.gif);
        background-repeat: no-repeat;
        background-position: 3px 1px;
    }

    a.highslide-credits,
    a.highslide-credits i {
        padding: 2px;
        color: silver;
        text-decoration: none;
        font-size: 12px;
    }

    a.highslide-credits:hover,
    a.highslide-credits:hover i {
        color: white;
        background-color: gray;
    }

    a.highslide-full-expand {
        background: url(highslide/graphics/fullexpand.gif) no-repeat;
        display: block;
        margin: 0 10px 10px 0;
        width: 34px;
        height: 34px;
    }

    .highslide-display-block {
        display: block;
    }

    .highslide-display-none {
        display: none;
    }
</style>

Save file elements.php lại và upload đè lên file elements.php cũ.

2. styles.css

Thêm vào cuối file đoạn code sau:

.insertimage {
    border: 1px solid #E7F1D4;
    padding: 3px;
    background-color: #FFFFFF;
}

Save file styles.css lại và upload đè lên file styles.css cũ.

Ok, xong rồi, duyệt lại blog và post thử một tấm hình để xem thành quả nào!

Download Highslide for Bo-blog 2.1.1: