Cara Baru Memasang Galery SlideShow Unik Tanpa Edit HTML

Kerjaterus.com - Memiliki rumah yang bersih, indah ,  dan pemandangan tamannya yang asri tentu membuat keluarga dan  tamu anda akan merasa betah dan nyaman tinggal di tumah anda.
Begitu pula dengan Blog atau Website, apabila blog tersebut memiliki pernak pernik gambar yang unik dan enak dilihat, tentu saja akan membuat pengunjung blog menjadi betah jika sedang berkunjung ke blog anda.

Pada kesempatan kali ini, kerjaterus.com akan berbagi sedikit trik simple namun hasilnya akan terlihat memuaskan. yaitu Cara Membuat Gallery SlideShow di Blog Tanpa Harus Edit HTML.
Cara ini banyak di gemari sebagian  banyak blogger pemula seperti saya, karena caranya sangatlah simple dan tidak  ribet harus Edit HTML .
Pada artikel yang sebelumnya juga telah kami bagikan Trik Cara Pasang Slide Out Recommended Post Tanpa Edit HTML

Jika penasaran kita lihat dulu tampilan Gallery SlideShow nya di bawah ini:

 

Untuk melihat DEMO KLIK DISINI

Jika anda tertarik Membuat Gallery SlideShow di Blog Tanpa Edit HTML silahkan ikuti langkah langkahnya di bawah ini:

Cara Pertama:
Masuk ke =>> blogger.com   

Cara Kedua:
Pilih Tata Letak =>> Tambah Gadget seperti gambar di bawah ini:

Kemudian Pilih HTML/ Javasript seperti gambar di bawah ini

Klik Untuk Memperbesar Gambar

Cara Ketiga:

Copy dan Paste Kode di bawah ini di kolom HTML/ Javascript 

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
    overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css"></link>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<br />
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<li><a href="http://dimpost.com/">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuvTLU1HPLA7hAwSelz8sKRhK8q2E2T0vJ2unKv4Z12LKuOg3xQ54QUVY2B3XN18x0a9lHzhIm69R1DtI4stV_x4qN4wb9NLhQLS9Hu7GdvnxJUz-ODOGF_SILc66Jw403g7V2GTCC-38s/s550/sample1.jpg" title="Sunset" />
        </a>A boat with beautiful sunset.</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqcwPVmw16LSpvy8xMWWUCfnecrCXS2guLbWrPc-bSHX5IPyDgyOW4JoA4oSbAB2osjozSpICfYU7NoYyzm5sWYuOeGcQW7755LS6V-yRyB0UCF8K-fBcmZPIx8KsYCVmOASpA7olADdob/s550/sample2.jpg" title="Rainbow" />
        </a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivyjxGtO5_9IWYztUQQzlz1tW0EGIQWk-t8RjngYBvHXsxLfyGPIgPE3_1tyKqMz4sMGRgNy0DaXuk2Bh-PSE2kpQQbvFOHP95koPDDMuuqWG-_Kb6Zaaknmrq-nmo3rk2QqPm7WNlQmbV/s550/sample3.jpg" title="True Nature" />
        </a>Tree in field with blue sky.</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_HccFtvg_5hSFqEC2pXT7VwTYnezOdFxqwdMJlwPu9wKQe10a43_YN00phPCNvIwF1qiOLoXl_PxztcLmzAKi4tKl_livhGcTBP6q1vdWsPB7-Pdm0GmEas6TH32B1WBX9sJMlCp-DiK4/s550/sample4.jpg" title="Sunrise" />
        </a>Amaizing sunrise moment</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNit1al75l5VZI-3nbS5_GbDXCp9UsMJRFC6MJllmMr6BSGuXfzTz0H8JA43K1Omz6F_RkrPvlYjoYVg_eVe9niOdYDmM8VaytBZ4jsbdjdbQAG5XOIfLrKIeZnr1nYfMCUyg1tqYfiUO/s550/sample5.jpg" title="CAR in HDR Nature" />
        </a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO19XsyROU5MBxefBiME5Wovl5dQmr9PlIwAfNG0Xq7KwqsMZTdXwyJTd-_PObeDT70c9eHx8AJv1Y60Q0d8uMHY8avmDLDN4rVgzGmsojvo_b04FlkKH2eynpRlbYxtOQ26RjX_izeWx9/s550/sample6.jpg" title="Sunshine" />
        </a></li>
</ul>
</div>
<div class="jslider_thumbs">
<div>
<a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCI05uD8Og-MaCk4qe8USeg9ibUzZzwqFmzB4qBitoZG9mPI0M6gQvA3ae0xIkcDPc_YyXsm5vCGmomku3mGpqlkoLno1JI5sRAnDMoRa_OtdjcwErRQZwmmMdMtbctbtw9aJvUnQ3RL84/s85/sample1.jpg" /></a>
        <a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkeYsxhzYZb4OOhxSpIs-GTVQmFEcutRgd9N0TeGZUxQy7OUSWw59bkTvd0SQQUBkSiOPrfFCU1NMSNcimOKGijoAwOWjoRdbdx14TIECgrcMeY3jQ52L3K5x4Mi3Zf-Utj390dVajk_e5/s85/sample2.jpg" /></a>
        <a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkUcrrwtWLhe8aPJRWkLTJrnhzkMZc-ljWtXaHtM29kh8b72qidm_UG-61S3sL8w3cr3MNZOu_m0B24yw4QAv-48ZqnjCVrz6-QPKTXGWVY8v1yBzPXB1YQG4eEsUirTIDZFjX-AO4yDL3/s85/sample3.jpg" /></a>
        <a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFkEtpGbYpdC13DJorJFFqkIkvN_jeiqSJuStw6Eyq8E6_1In6aMBrugPJXTHvtxrYB6aOUTrusO6ZyqwW1UTquWrLuZXNVPemO9xVFlmthfISy0M0TczwkRhhbrb38-_BoI9KljaN_cox/s85/sample4.jpg" /></a>
        <a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDKgiE_7n3NLkHK_OauV6gHgl1dHlKumiDjJSXVSVyt3wNxm6GWBKWzZUx_amEpxn_qz9J0fLZH6zWCxFbtoqNhjPWYOnzVB-UAfsDg4AfGm-QhgDyhArqAycFE3RDKjaHjn049vu0RY6B/s85/sample5.jpg" /></a>
        <a href="https://www.blogger.com/blogger.g?blogID=2365866921618955720#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtbDO9KYXpyy9ZCKHyJ81p9fwWNzKmpWWXJPZnykszt7ifoRbFkPEgCisKMwXiS_BTBVMUHn6TVqEwsume9HdBfeqW36QSIg2NscJmvLOi7yscSgI76IE9BHxuMElf35hyphenhyphenZ7kE1mUgZJNE/s85/sample6.jpg" /></a>
        </div>
</div>
</div>
</div>
</div>
<script src="http://dimpost.googlecode.com/files/wow-slider.js" type="text/javascript"></script>

Kemudian  Klik SIMPAN dan selesai..
Demikian tadi trik Cara Membuat Galery SlideSow Unik di Blog yang bisa kami bagikan, jika ada pertanyaan silahkan tinggalkan komentar pada kotak komentar di bawah..

• Tweet
• Share
• Share
• Share
• Share