03/08/16 | Mys2010 on Codepen

Memasang kode Wallpaper Light Gallery
Code ini menampilkan gambar Slide yang dapat di Zoom. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template
ganti dengan kode blank template, yang tersedia pada sumber berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="Mys2010-styles">

body {
  background-color: #152836;
  color: #eee;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
.small {
  font-size: 11px;
  color: #999;
  display: block;
  margin-top: -10px
}
.cont {
  text-align: center;
}
.page-head {
  padding: 0px 0;
  text-align: center;
}
.page-head .lead {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 50px;
  margin-top: 0;
}
.btn {
  -moz-user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 0px 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-decoration: none;
}
.btn-lg {
  border-radius: 2px;
  font-size: 18px;
  line-height: 1.33333;
  padding: 0px 0px;
}
.btn-primary:hover {
  background-color: #fff;
  color: #152836;
}
.btn-primary {
  background-color: #152836;
  border-color: #0e1a24;
  color: #ffffff;
}
.btn-primary {
  border-color: #eeeeee;
  color: #eeeeee;
  transition: color 0.1s ease 0s, background-color 0.15s ease 0s;
}
.page-head h1 {
  font-size: 42px;
  margin: 0 0 20px;
  color: #FFF;
  position: relative;
  display: inline-block;
}
.page-head h1 .version {
  bottom: 0;
  color: #ddd;
  font-size: 11px;
  font-style: italic;
  position: absolute;
  width: 58px;
  right: -58px;
}
.mys2010-gallery > ul {
  margin-bottom: 0;
  padding-left: 15px;
}
.mys2010-gallery > ul > li {
  margin-bottom: 15px;
  width: 180px;
  display: inline-block;
  margin-right: 15px;
  list-style: outside none none;
}
.mys2010-gallery > ul > li a {
  border: 3px solid #FFF;
  border-radius: 3px;
  display: block;
  overflow: hidden;
  position: relative;
  float: left;
}
.mys2010-gallery > ul > li a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.mys2010-gallery > ul > li a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.mys2010-gallery > ul > li a:hover .mys2010-gallery-poster > img {
  opacity: 1;
}
.mys2010-gallery > ul > li a .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.mys2010-gallery > ul > li a .mys2010-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.mys2010-gallery > ul > li a:hover .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.mys2010-gallery .justified-gallery > a > img {
  -webkit-transition: -webkit-transform 0.15s ease 0s;
  -moz-transition: -moz-transform 0.15s ease 0s;
  -o-transition: -o-transform 0.15s ease 0s;
  transition: transform 0.15s ease 0s;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  height: 100%;
  width: 100%;
}
.mys2010-gallery .justified-gallery > a:hover > img {
  -webkit-transform: scale3d(1.1, 1.1, 1.1);
  transform: scale3d(1.1, 1.1, 1.1);
}
.mys2010-gallery .justified-gallery > a:hover .mys2010-gallery-poster > img {
  opacity: 1;
}
.mys2010-gallery .justified-gallery > a .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-transition: background-color 0.15s ease 0s;
  -o-transition: background-color 0.15s ease 0s;
  transition: background-color 0.15s ease 0s;
}
.mys2010-gallery .justified-gallery > a .mys2010-gallery-poster > img {
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  opacity: 0;
  position: absolute;
  top: 50%;
  -webkit-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
.mys2010-gallery .justified-gallery > a:hover .mys2010-gallery-poster {
  background-color: rgba(0, 0, 0, 0.5);
}
.mys2010-gallery .video .mys2010-gallery-poster img {
  height: 48px;
  margin-left: -24px;
  margin-top: -24px;
  opacity: 0.8;
  width: 48px;
}
.mys2010-gallery.dark > ul > li a {
  border: 3px solid #04070a;
}
</style>

<div class="cont">
<div class="page-head">
<h1>
<font =" color="blue"face="arial"> 
JQUERY LIGHT GALLERY
<span class="version">V1.2.0</span></h1>
<p class="lead">
A lightweight, customizable, modular, responsive, lightbox gallery plugin for jQuery.</p>
<a href="http://codepen.io/Myscript2010/" target="_blank" title="VIEW">CODEPEN</a></div>

<div class="mys2010-gallery">
<ul id="lightgallery">
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0vwXQU_JHcrx9q7bdkKUC7KxPy43V8wM3AxAy-OOgo7eNqiLx04dbymR3BsI9XheXMxkvrrruWD5rNZfHLfVP7Ivg-haBe3Zxnuz9wWKXHs6ou-WYTvYsQpSGxtdAcCsQbyekFd5eZqCL/s1600-r/sule.png  480"
      data-sub-html="<h4>MY LOGO</h4>
<p>
Myscript2010s Learn Editing Script Cibeber Cimahi.</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFktHIUfGt3iKiZAYP5FpeKuy0Oo-r2ZqN3JPJAUQV4I4fkOfiP6BahEZdFizemUeoos8IetcGjZLG98_iYZ5TlLPwlzRvUh9ocr8hTUUKbmG5omclrxoURh0qoWYj_80ZNHpVv37UV3Jb/s1600-r/sule1.png">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 375, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtuXewGyiLoJyTuqLXN21oRF76GzrjzIqoXUYMXQybj_Ew6kMgXKn2CMVcQaiUFiCJhtx81i7yMkBOHgOkw5_Y83wsY-Z93o1NDG_oWaaEZQbcGCBQELFvY1catkCjtUsdK2d7d9G_qIGV/s1600-r/wanita1-mys2010.jpg"
      data-sub-html="<h4>BEAUTIFUL</h4>
<p>
A beautiful Girl could it be mine</p>
">
<a href=""> 
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiixh-Qe4kk8kaDywwHKSBf7YR4pMSQEsEQiQPDewPq-Swcu3CVSzab3T9bHMpWe8ZmuFVPe3gjjk_Gm-gE3rz7N3cB1OLHRpUkIpeFabyA1BLNNKxh9suk5n0h5zs8IqKPYLa1AcUt1e4n/s1600-r/wanita1-mys2010s.jpg">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7oyzokHEnSo8gjLrMjqNqAyLIN6fnXTpf1ZNsFE20ebxU8RpWdfvuVYzVAfzoweGtuZJRQuajVVPTLYQB7somp_MqUG4sL91556cRhPzpGwSsIU2Fv7jVgN5EO250LhO0dZGqtm56S9/s1600-r/Mellisa-Clarke-1920x1200-mys2010.jpg"
      data-sub-html="<h4>MELLISA</h4>
<p>
This girl looks pretty but he is not mine.</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikPN1Jos-Mh6OphzsxD16NY6ikmOBfKjCro437H9L0GSedAMniv9CaIGK4WRJp1M3RNKVZvo4aeMiGk2LlBmil6_UeQK51w1WrQ-U5PKvRhxI_AhZxMyKy1bv7AaJodeDE1ljLadNd5ms/s1600-r/yayang1-mys2010.png">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
<li data-responsive="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg 480, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg 800" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJKZAihiQSl5dh7yp1iEmUU81k-TL_O8QQZjDtCLNTg-uFVBWDaqt5CVNrfy6cP5w5fIra8dYd0FcJqKNFfYx7TdoZbW_5JHOE3Ua9dojYBvBd6ESC9k1KxmglyHifG5q2OXWArSvW41nz/s1600-r/marta-misiak-2560x1600-mys2010.jpg"
      data-sub-html="<h4>MARTA MISIAK</h4>
<p>
Pretty girl dreams</p>
">
<a href="">
<img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4iZG0QlOQRhrT7SytQIRDU0p7mRJzc3YF7fMEvzGO6s-6X412xLgNMPSNoBqP6tSiPGW2Yl3Im3yJjovpFsl8BegfDOpqqsSXl6Eiw7eQlOsdNlXOjU6FlSnmldQM5YYIfUNstmmyHx0Q/s1600-r/marta-misiak-2560x1600-mys2010.jpg">
<div class="mys2010-gallery-poster">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Jjc-QsBVzCmhIx9SZ7nnA_vZFVrXBNHj-lBG94lS7GDmr20rJCFQ9sfeGln0vSyKXitWqU5r1t3GlEsyhKyhvYnNqIp1_go1_-B_u2KIIV9jwl4e5L7SDnHwO08gOUx4BukYjIbnLStS/s1600-r/zoom-mys2010.png">
</div>
</a>
</li>
</ul>
<span class="small">Click on any of the images to see lightGallery</span>
</div>
</div>

<link rel='stylesheet prefetch' href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css'>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'>
</script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>

<script src='https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-fullscreen.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-autoplay.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-zoom.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-hash.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-pager.js'>
</script>

<script src='http://sachinchoolur.github.io/lightGallery/external/jquery.mousewheel.min.js'></script>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>

<script>
      $(document).ready(function () {
    $('#lightgallery').lightGallery({ pager: true });
});      
    </script>

Penjelasan :
Tambahkan code Top Title Header jika diperlukan. Copy code brikut :

/*Top Title Header*/
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #f0f;
  border-bottom: 3px solid #dad;
}

Pastekan dibawah code :

<style class="Mys2010-styles">

Kemudian copy code berikut :

<header> 
<div class="Top Title Header">
<p align="center">
<a href="http:// Link Title" title="Myscript2010"><font size="3" color="#dad"face="arial">MUSIC</a> 
</header>

Pastekan diatas Code :

<link rel='stylesheet prefetch' href='http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css'>

Selanjutnya Ganti Link gambar, link title
dan edit code warna sesuai keinginan, klik pratinjau untuk melihat hasil klik perbarui selesai

Edited by. Mys2010 on GitHubGist
Sources by. Cartoonist ARiF on Codepen

DEMOSHOW

Category: Wallpaper Light Gallery

Mys2010 on Codepen

Wallpaper Light Gallery

POPULAR

Blog Archive