Cara Memasang Slider Otomatis Bagian 2 di Blog. Seocips.com berikut ini adalah tentang bagaimana cara membuat dan memasang Slider Otomatis di Blogger. Salah satu cara untuk mempercantik tampilan blog atau web adalah sdengan memasang slider yang menampilkan artikel-artikel terbaru diblog secara otomatis. Sebelumnya juga pernah dibahas tentang bagaimana memasang slider otomatis keren ditemplate Blogger.

Cara memasang kodenya tidak jauh berbeda hanya saja kodenya yang berbeda. Slider Berikut ini adalah slider yang saya pasang pada template Tuama Minahasa yang sudah pernah dibagikan sebelumnya. untuk tampilannya adalah seperti gambar dibawah ini jika kurang jelas sobat dapat menuju ke demonya.

Slider Otomatis


Didemonya pada homepage ada 2 slider yang saya pasang disitu untuk slider yang satunya Anda dapat mengeceknya di : Reponsive recentpost Slider. Ok sobat jika sobat tertarik untuk menggunakan slider otomatis ini silahkan simak cara memasangnya berikut ini.

Membuat Slider Otomatis Di Blog.

Masuk ke edit Html template Blogger silahkan cari dan temukan kode ini: ]]></b:skin> setelah ketemu, silahkan. Salin kode di bawah ini, kemudian letakkan di atasnya:
.s3slider {  margin:0 auto 10px;  border:3px solid black;  background:#333 none no-repeat 50% 50%;  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);  box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);  position:relative;  overflow:hidden;}.s3slider.loading {  background-image:url('data:image/gif;base64,R0lGODlhEAAQAPYAAP///wAAANTU1JSUlGBgYEBAQERERG5ubqKiotzc3KSkpCQkJCgoKDAwMDY2Nj4+Pmpqarq6uhwcHHJycuzs7O7u7sLCwoqKilBQUF5eXr6+vtDQ0Do6OhYWFoyMjKqqqlxcXHx8fOLi4oaGhg4ODmhoaJycnGZmZra2tkZGRgoKCrCwsJaWlhgYGAYGBujo6PT09Hh4eISEhPb29oKCgqioqPr6+vz8/MDAwMrKyvj4+NbW1q6urvDw8NLS0uTk5N7e3s7OzsbGxry8vODg4NjY2PLy8tra2np6erS0tLKyskxMTFJSUlpaWmJiYkJCQjw8PMTExHZ2djIyMurq6ioqKo6OjlhYWCwsLB4eHqCgoE5OThISEoiIiGRkZDQ0NMjIyMzMzObm5ri4uH5+fpKSkp6enlZWVpCQkEpKSkhISCIiIqamphAQEAwMDKysrAQEBJqamiYmJhQUFDg4OHR0dC4uLggICHBwcCAgIFRUVGxsbICAgAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA');  text-indent:-9999px;}.s3slider-content,.s3slider-content li {  position:absolute;  top:0;  right:0;  bottom:0;  left:0;  margin:0;  padding:0;  list-style:none;  overflow:hidden;}.s3slider-content li {  position:static;  display:none;}.s3slider-content img {  display:block;  width:100%;  height:100%;  max-width:none;  max-height:none;  border:none;  outline:none;  padding:0;  margin:0;}.s3slider-caption {  position:absolute;  right:0;  bottom:0;  left:0;  height:auto;  font:normal normal 13px/normal Helmet,Freesans,Sans-Serif;  color:white;  background-color:black;  opacity:.8;  filter:alpha(opacity=80);  padding:17px 20px 20px;  display:none;}.s3slider-title,.s3slider-meta {display:block}.s3slider-title a {  font-size:110%;  font-weight:bold;  color:white;  text-decoration:none;}.s3slider-title a:focus,.s3slider-title a:hover {text-decoration:underline}.s3slider-meta-comment:before {content:" - "}
Langka selanjutnya adalah masuk ke menu "tata letak" dan Letakan kode berikut ini di widget HTML sobat, pilih letak yang sesuai misalnya di atas postingan, dsb.
<div id="s3slider-container">  <div class="s3slider loading" style="width:420px;height:270px;">    Memuat...  </div></div><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>var s3slider_config = {    url: 'http://blog.spezer.net',    numPost: 7,    labelName: null,    monthArray: [        "Januari",        "Februari",        "Maret",        "April",        "Mei",        "Juni",        "Juli",        "Agustus",        "September",        "Oktober",        "November",        "Desember"    ],    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',    newTabLink: false,    containerId: 's3slider-container',    slider: {        width: 420,        height: 270,        timeOut: 4000    }};</script><script src="http://dte-project.googlecode.com/svn/trunk/blogger-s3slider.js"></script>
Untuk kode url yang diberi warna biru diatas, silahkan ganti dengan url website saudara dan untuk kode warna merah dihapus jika ditemplate saudara sudah ada kode seperti itu atau jquery versi berapapun. Untuk kode yang lain silahkan sobat sesuaikan sendiri dengan selera sobat dan template sobat.

Slider ini juga dapat sobat pasangi efek animasi loading blog untuk menambah kesan di slider template ini. Sekian tutorial kali ini tentang cara memasang slider otomatis keren diblog semoga bermanfaat.
0 Komentar untuk "Memasang Slider Otomatis Bagian 2 di Blog."