Kode Script HTML Rodja (Bag. 1)

adsense 336x280
Dari Abu Mas’ud Uqbah bin Amir Al Anshari Radhiyallahu‘anhu, ia berkata bahwa Rasulullah Shallallahu‘alaihi Wa Sallam bersabda,

مَنْ دَلَّ عَلَى خَيْرٍ فَلَهُ مِثْلُ أَجْرِ فَاعِلِهِ

“Barangsiapa yang menunjuki kepada kebaikan maka dia akan mendapatkan pahala seperti pahala orang yang mengerjakannya.” (HR. Muslim no. 1893)

Kali ini ane membawakan tema artikel yang berbeda, yaitu tentang dakwah melalui kode - kode. Tepatnya kode script HTML.

Nah di sini ane khususkan bagi ikhwan atau akhwat yang sudah punya blog untuk berdakwah dengan kode berikut :


<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script><script language="javascript">'use strict';$(function() {var width = 300; var animationSpeed = 1000; var pause = 3000; var currentSlide = 1;var $sdr0844 = $('#sdr0844'); var $slideContainer = $('.sld', $sdr0844); var $sld = $('.slide', $sdr0844); var interval; function startsdr0844() { interval = setInterval(function() { $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {if (++currentSlide === $sld.length) {currentSlide = 1; $slideContainer.css('margin-left', 0); }});}, pause);} function pausesdr0844() {clearInterval(interval);}$slideContainer.on('mouseenter', pausesdr0844).on('mouseleave', startsdr0844);startsdr0844();});</script><div style="width: 300px; margin: 0 auto;"><div style="position: relative; width: 300px; "><style type="text/css">#gpoy {position: absolute; right:-126px; top:2px; padding: 6px 0px 3px; z-index:99; opacity: 0.9; transition: 1s;  line-height: 12px;}.repper {width: 304px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 13px; box-shadow: 7px 7px 9px #888888 ;}.repper:hover #gpoy {transition: 2s; right:15px; }</style><div class="repper"><div id="gpoy"><A style="font-weight: normal;  text-shadow: 1px 1px #555555; color: #FFFFFF; text-decoration:none; font-size: 6pt; line-height:10px; font-family: arial;" HREF="http://www.123-slideshow.com" TARGET="_blank">&#127817; pencipta slideshow</A></div><style type="text/css">#sdr0844 {width: 300px; height: 250px; border: 2px solid #FFFFFF; border-radius: 13px; overflow: hidden; position: relative; cursor: pointer; }#sdr0844 .sld {width: 8400px; height: 250px;  display: block; margin: 0; padding: 0;}#sdr0844 .slide {width: 300px; height: 250px; float: left; list-style-type: none;}.DOT180308 {position: absolute; max-width: 300px; margin: 0px;}.c111839  {position: absolute; bottom: 0px; width:100%;  padding: 10px; background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF; font-size:8pt; font-family:Tahoma; text-align:center; line-height:16px; z-index:33; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}</style>

<div id="sdr0844">
<ul class="sld">

<li class="slide slide1">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-1.jpg">
 </figure>
 </li>

<li class="slide slide2">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-2.jpg">
 </figure>
 </li>

<li class="slide slide3">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-23.jpg">
 </figure>
 </li>

<li class="slide slide4">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-5.jpg">
 </figure>
 </li>

<li class="slide slide5">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-27.png">
 </figure>
 </li>

<li class="slide slide6">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-24.jpg">
 </figure>
 </li>

<li class="slide slide7">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-26.png">
 </figure>
 </li>

<li class="slide slide8">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-3.jpg">
 </figure>
 </li>

<li class="slide slide9">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-4.jpg">
 </figure>
 </li>

<li class="slide slide10">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-7.jpg">
 </figure>
 </li>

<li class="slide slide11">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-6.jpg">
 </figure>
 </li>

<li class="slide slide12">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-25.jpg">
 </figure>
 </li>

<li class="slide slide13">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-8.jpg">
 </figure>
 </li>

<li class="slide slide14">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-9.jpg">
 </figure>
 </li>

<li class="slide slide15">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-21.jpg">
 </figure>
 </li>

<li class="slide slide16">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-19.jpg">
 </figure>
 </li>

<li class="slide slide17">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-18.jpg">
 </figure>
 </li>

<li class="slide slide18">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-17.png">
 </figure>
 </li>

<li class="slide slide19">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-16.jpg">
 </figure>
 </li>

<li class="slide slide20">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-20.jpg">
 </figure>
 </li>

<li class="slide slide21">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-13.png">
 </figure>
 </li>

<li class="slide slide22">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-12.png">
 </figure>
 </li>

<li class="slide slide23">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-15.png">
 </figure>
 </li>

<li class="slide slide24">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-11.jpg">
 </figure>
 </li>

<li class="slide slide25">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-10.png">
 </figure>
 </li>

<li class="slide slide26">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-14.jpg">
 </figure>
 </li>

<li class="slide slide27">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-1.jpg">
 </figure>
 </li>

<li class="slide slide1">
 <figure class="DOT180308">
  <IMG SRC="https://sites.google.com/site/eeljunaydcom/blog/111839-22.jpg">
 </figure>
 </li>

</ul></div></div></div>

</div>


Cara penggunaan :
  • Antum copy kode tersebut 
  • Masuk ke akun blogger
  • Pilih Tata Letak
  • Pilih Tambah Gadget
  • Pilih HTML/ Javascript
  • Sekarang antum paste di kolom Konten
  • Simpan
  • Kemudian pilih Simpan Setelan
Dan sekarang antum lihat di blog antum. Akan ada tampilan SlideShow berupa dakwah.

Semoga antum mendapatkan pahala seperti orang yang mengamalkannya. Bagaimana caranya, yaitu dengan di Share.

Demikian semoga bermanfaat.
adsense 336x280

0 Response to "Kode Script HTML Rodja (Bag. 1)"

Posting Komentar