Cara Membuat Kutipan Rotator Animasi jQuery di Blogger

Kadang-kadang sebuah artikel tidak dapat diselesaikan tanpa kutipan yang tepat atau kutipan dari sumber yang otentik. Orang ingin berita yang akurat dan tepat. Oleh karena itu, mereka selalu mengandalkan sumber yang dapat dipercaya. Stuffing artikel Anda dengan terlalu banyak kutipan mungkin membuat posting blog Anda terlihat panjang, tapi Anda mungkin merasa sulit pengguna untuk menggulir terlalu banyak. Bagaimana Kutipan Rotator jQuery dan animator, yang tidak hanya akan membuat kutipan Anda terlihat luar biasa tetapi juga akan mengumpulkan semua tanda kutip di satu tempat. Pada artikel ini, kami akan menunjukkan Cara Membuat Kutipan Rotator Animasi jQuery di Blogger?

Berikut adalah preview dari widget:

• Blogging bukan tentang penghasilan. Ini tentang melayani Kemanusiaan.
• Jangan memilih Blogging sebagai profesi Anda, kecuali jika Anda benar-benar tidak punya pilihan!!!
• Pendidikan adalah senjata paling kuat yang dapat Anda gunakan untuk mengubah dunia.
• The Lift is too shorT, Live it or be dead.
• Ini baik untuk merayakan kesuksesan, tetapi adalah lebih penting untuk memperhatikan pelajaran dari kegagalan.
• You can't have a light without a dark to stick it in.
• If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.

Hal pertama yang perlu Anda lakukan adalah untuk login ke account blogger Anda. Sekarang dari blogger dashboard pergi ke Buat Posting baru >> Edit HTML Tab dan hanya paste JavaScript berikut dan Kode CSS dalam Editor Blogger HTML.

<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>

Setelah menambahkan coding di atas, Anda perlu menambahkan kode HTML berikut ke Editor Blogger HTML sehingga akan membantu Anda dalam menciptakan berputar dan kutipan animasi. Anda dapat mengubah transaksi animasi tergantung pada kebutuhan Anda.

<!-- TempatBlogging Quote Rotator -->
<br />
<div id="words">
<ul class="word-container">
<li data-author="---  Mubasir Alamsah" data-easeout="lightSpeedOut">Blogging bukan tentang penghasilan.
Ini tentang melayani Kemanusiaan.</li>
<li data-author="---  Mubasir Alamsah">Jangan memilih Blogging sebagai profesi Anda, kecuali jika Anda benar-benar tidak punya pilihan!!!</li>
<li data-author="---  Mubasir Alamsah" data-easeout="fadeOutDown">Pendidikan adalah senjata paling kuat yang dapat Anda gunakan untuk mengubah dunia.</li>
<li data-author="---  Mubasir Alamsah" data-easein="fadeInDown">The Lift is too shorT, Live it or be dead. </li>
<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">Ini baik untuk merayakan kesuksesan, tetapi adalah lebih penting untuk memperhatikan pelajaran dari kegagalan.</li>
<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li>
<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>

Selamat: Sekarang mempublikasikan artikel Anda dan menikmati keajaiban. Kutipan akan berputar secara otomatis. Namun, Anda dapat melompat ke kutipan berikutnya dengan mudah. Ini akan terus berputar sampai Anda pindah ke halaman web lain.

Kami harap tutorial ini telah membantu Anda untuk belajar Cara Membuat Kutipan Rotator Animasi jQuery di Blogger. Jangan biarkan kami tahu apa yang Anda pikirkan tentang widget ini. Bagi pemikiran dan pendapat melalui komentar di bawah ini. 

Read more ...

Membuat Widget Related Post dengan Efek CSS Hover

Hari ini saya berbagi  Membuat Widget Related Post dengan Efek CSS Hover. Ini widget related post dibuat dengan javascript dan didesain dengan css. mudah untuk diinstal pada blogger template tidak perlu menggunakan linkwithin dan layanan lainnya untuk menciptakan widget ini.

Cukup tambahkan script ini untuk template blogger Anda yang ditunjukkan pada bawah langkah demi langkah tutorial. dengan fitur widget ini Anda bisa mendapatkan tampilan halaman lebih banyak dari pengunjung dan mendapatkan lebih banyak uang dari adsense.


Bagaimana kerjanya?

Widget terkait ini bekerja seperti tag label, ini java script memanggil semua tag label terkait dan menyelaraskan dalam jenis script ini menangkap semua posting gambar dan link terkait di bingkai dalam ukuran yang sama.

Cara Memasang  Widget Related Post :


Langkah 1
Pertama backup template Anda
Pergi ke > Edit Template> dan tekan Ctrl + F
Sekarang cari ]]> </ b: skin>

Langkah 2
Sekarang Paste kode ini di atas ]]> </ b: skin>

/*--- ------Related Posts --------------------*/
#related-posts {
margin: 1px 0px 15px 0px!important;
background: white;
height: 265px;
width: 600px!important;
padding: 0px 0px 0px 0px!important;
border-radius: 5px 5px 5px 5px;
}
#related-posts h2{
margin: 10px 0px!important;
padding: 15px 15px!important;
font-family: Helvetica,Arial,sans-serif;
font-size: 16px;
color: white;
font-weight: 600;
line-height: 14px;
text-transform: capitalize;
none repeat scroll 0% 0% rgb(255, 255, 255) !important;
background: #900000;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0px 2px 4px #333;
}
#related-posts-text {
font-size: 1.1em !important;
font-weight: 600 !important;
line-height: 1.45em !important;
font-family: Helvetica,Arial,sans-serif !important;
width: 120px;
padding-left: 3px;
height: 65px;
border: 0pt none;
margin: 3px 0pt 0pt;
}
#related-posts img {
border: 2px solid #ccc ;
padding: 3px !important;
overflow: hidden;
width: 110px;
height: 90px;
margin:3px;
border-radius:4px;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
opacity:1;
}
#related-posts img:hover {
border: 2px solid #333;
opacity:0.5;
}
#related-posts a {
color:#666;
}
#related-posts a:hover{
color:#333;
}

 Langkah 3
Sekarang Cari </ head>
dan paste kode ini di atasnya

<!--Related Posts Scripts and Styles Start-->
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh28m_D31A4IcaISlko8zt3m5pDnonsjxqTm8tikNFh2unLkgC5vfJORz1BiDdAXcFC1NHdImTCNoM0yDZTwF1gSKF50E5e2ekE1G6YFNjBAlfgGwkbDPKp9BAN0UTXWViDP9PwrLmUu8Y/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Topics:";
</script>
<script>
//<![CDATA[
var relatedTitles = new Arrayundefined);
var relatedTitlesNum = 0;
var relatedUrls = new Arrayundefined);
var thumburl = new Arrayundefined);
function related_results_labels_thumbsundefinedjson) {
for undefinedvar i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}

catch undefinederror){
s=entry.content.$t;a=s.indexOfundefined"<img");b=s.indexOfundefined"src=\"",a);c=s.indexOfundefined"\"",b+5);d=s.substrundefinedb+5,c-b-5);
ifundefinedundefineda!=-1)&&undefinedb!=-1)&&undefinedc!=-1)&&undefinedd!=""))
{thumburl[relatedTitlesNum]=d;} else {ifundefinedtypeofundefineddefaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]
="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh28m_D31A4IcaISlko8zt3m5pDnonsjxqTm8tikNFh2unLkgC5vfJORz1BiDdAXcFC1NHdImTCNoM0yDZTwF1gSKF50E5e2ekE1G6YFNjBAlfgGwkbDPKp9BAN0UTXWViDP9PwrLmUu8Y/s1600/no_image.jpg";}
}
ifundefinedrelatedTitles[relatedTitlesNum].length>45) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substringundefined0, 45)+"...";
for undefinedvar k = 0; k < entry.link.length; k++) {
if undefinedentry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;

}
}
}
}
function removeRelatedDuplicates_thumbsundefined) {
var tmp = new Arrayundefined0);
var tmp2 = new Arrayundefined0);
var tmp3 = new Arrayundefined0);
forundefinedvar i = 0; i < relatedUrls.length; i++) {
ifundefined!contains_thumbsundefinedtmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;

}
function contains_thumbsundefineda, e) {
forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true;
return false;
}

function printRelatedLabels_thumbsundefinedcurrent) {
var splitbarcolor;
ifundefinedtypeofundefinedsplittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
forundefinedvar i = 0; i < relatedUrls.length; i++)
{
ifundefinedundefinedrelatedUrls[i]==current)||undefined!relatedTitles[i]))
{
relatedUrls.spliceundefinedi,1);
relatedTitles.spliceundefinedi,1);
thumburl.spliceundefinedi,1);
i--;
}
}

var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined));
var i = 0;
ifundefinedrelatedTitles.length>0) document.writeundefined'<h2>'+relatedpoststitle+'</h2>');
document.writeundefined'<div style="clear: both;"/>');
while undefinedi < relatedTitles.length && i < 20 && i<maxresults) {
document.writeundefined'<a style="text-decoration:none;padding:5px;float:left;');
ifundefinedi!=0) document.writeundefined'border-left:solid 0.5px '+splitbarcolor+';"');
else document.writeundefined'"');
document.writeundefined' href="' + relatedUrls[r] + '"><img  src="'+thumburl[r]+'"/><br/><div id="related-posts-text">'+relatedTitles[r]+'</div></a>');
i++;

if undefinedr < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.writeundefined'</div>');
relatedUrls.spliceundefined0,relatedUrls.length);
thumburl.spliceundefined0,thumburl.length);
relatedTitles.spliceundefined0,relatedTitles.length);
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->

Langkah 4
Langkah akhir
sekarang mencari <div class='post-footer'>
setelah menemukan kode ini pastekan kode di bawah ini di atas kode  <div class='post-footer'>
jika widgetnya tidak muncul taruh kode berikut dibawah kode <data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<!--Related Post Start-->
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-
results=10&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><br/><div style='clear:both'/>
<div style='clear:both;'/>
</b:if>

 Langkah 5

Save Template anda.

Sekian dulu Postingan Artikel kali ini yang membahas tentang  Membuat Widget Related Post dengan Efek CSS Hover semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Read more ...

Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger

Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger - Dalam tutorial kali ini saya akan menjelaskan bagaimana menambahkan Menu Efek Bouncing menggunakan jQuery. menu ini memiliki efek Hover yang bagus. Setiap menu Warnanya Berbeda beda. Saya Menggunakan HTML dan jQuery untuk membuat menu ini, menu ini mudah untuk di tambahkan ke blogger anda, untuk melihat Menu Lainya klik disini.

1. Buka Akun "Blogger" anda.

2. Sekarang Pilih "Template".

3. Sekarang Anda dapat melihat Langsung pada blog, klik "EDIT HTML" Button.

4. Sekarang klik tombol Lanjutkan.

5. Cari tag ini dengan menggunakan Ctrl + F </ head>.

6. Paste kode di bawah Sebelum </ head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1' type='text/javascript'/>
<script src='https://mycodewebsite.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://mycodewebsite.googlecode.com/files/animated-menu.js' type='text/javascript'/>

7. Pergi ke blogger dan klik Layout
8. Klik Tambah Gadget dan pilih "HTML / Javascript"
9. Paste kode di bawah ini. 

 color:#FFFFFF;
font-size:15px;
 text-decoration:none;
}
p{
 padding:0px 5px;
}
 .subtext{
  padding-top:15px;
 }
/*Menu Color Classes*/
.green{background:#6AA63B url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4WUUSBAjSI5YWMijDs2HBDsDG73HeQ7ls5YOQBpLMxD9olyAiKsjTZEXUPvRALb63ZSnqjc9kECA6bpNWqLdq0tXYf95XMceE7WM60zIP2g8Vvm9zKzYEc6E_jeXcHihnonkSTT04qck/s1600/btrix_green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB9rWrAzvOeDzfAyYOF22SkkTQ66ZOW0nLA8nqE4KF27rg0rYtz77zS5M8mJe3bb6TYV2eEV9zX5VGMbd7KMytozw7WENR3YydwjxzMYpB85oeKI6tM8kHo56N0G3LWwMQI78CzZoAKL4/s1600/btrix_purple-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9hevtjIV3K90k5ys8aSPpZKix4C1fgfpPWqOWX3Us07kkv4_wwlLNSkL0Pkv03w2FjMqkXXfsYws5lV4hwbvPw4roVMw52FbAwB2KJWAXcDYbPdaADti3gLeVtfS1hgNI2L2Kqp_IjU4/s1600/btrix_red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimCGqHR5xzsS1eWE1oGpBkvwSJvaITr0KWTS7NC_e8r_lvyBAZUeFp9VHJtLfRiHDTSME6Z9dU_3hxOuLgN-CkaxFVKSEKhgiB8_bMLvaclA60J1RDjL8DdTOIbvKCuY873SZqI6z6_Yg/s1600/btrix_blue-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQrpCi5t4KS6jk00FNvfeaOspGBSyuhoiDfB-97jnc3AzS76HjloZe6TcS1Acm-znxK6bpAB8JclYAsYoXDezE3NeFgX_o6B8Jb8VcULoFz7PcEjHiTal9dHTayphtwKDznvKYWUTO9Rg/s1600/btrix_yellow-item-bg.jpg') top left no-repeat;}
</style>
<ul>
  <li style="overflow: hidden; height: 50px; display: block;" class="green">
   <p><a href="#">Home</a></p>
   <p class="subtext">The front page</p>
  </li>
  <li style="overflow: hidden; height: 48px; display: block;" class="yellow">
   <p><a href="#">About</a></p>
   <p class="subtext">More info</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="red">
   <p><a href="#">Contact</a></p>
   <p class="subtext">Get in touch</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="blue">
   <p><a href="#">Submit</a></p>
   <p class="subtext">Send us your stuff!</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="purple">
   <p><a href="#">Terms</a></p>
   <p class="subtext">Legal things</p>
  </li>
 </ul>
 <script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 <script type="text/javascript">
 try {
 var pageTracker = _gat._getTracker("UA-6444047-1");
 pageTracker._trackPageview();
 } catch(err) {}</script>

Informations :
Ganti tanda # Link kamu.

10. Sekarang menyimpan HTML / Javascript '.

Sekian dulu tentang Artikel Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.

Read more ...

Cara Membuat Blog Anda Siap untuk Ponsel

Cara Membuat Blog Anda Siap untuk Ponsel - Anda dapat membuat blog Anda untuk ponsel browsing. sehingga orang dapat mengunjungi blog Anda dari ponsel. ketika yang normal butuh waktu lama waktu untuk memuat halaman. tapi setelah hal ini akan bisa memuat cepat,

1. Pergi ke Akun blogger Anda >> Desain >> Edit HTML

2. Cari tag ini dengan menggunakan Ctrl + F

                                             <b:include data='blog' name='all-head-content'/>

3.Paste kode di bawah ini setelah tag diatas

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

 4. Sekarang klik Preview dan klik simpan template. Anda telah selesai.

Itulah Cara membuat blog Anda siap untuk ponsel. Semoga Bermanfaat dan Suksess. :D

Read more ...

Slideshow jQuery Keren untuk Blogger

Dalam posting ini im akan menjelaskan bagaimana menambahkan jQuery menarik geser menunjukkan kepada blogger. Anda dapat menambahkan slideshow ini atas posting Anda. Sebenarnya ini juga sangat mudah untuk menambahkan di widget.

1. Masuk ke akun blogger dan klik drop down.

2. Sekarang pilih "Layout" Seperti bawah.

3. Klik Tambah Gadget dan pilih 'HTML / Javascript

4. Paste di bawah salah satu kode di bawah ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#btrix_slider3').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#btrix_slider3 {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#btrix_slider3Content {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.btrix_slider3Image {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>
<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKjNVg7zrq8FjW1g2jQDJlZerbuRdWd4a97JKmMlEc6yyt7DGWr-_SdjLd8CocLadefeuSW-M96aFLMq1Lo3FrIOUNGqPgUdsM4sfg0_ABh2ILQ2LuMRtZTdNArGEgWBEi0jwLuUQAlFY/s1600/btrix_image1.jpg" />
<span class="left"><h3>
HEADING-1 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz-hx3trV6xsZ8P7a0rRKe8JPld0LHCWSXAihFPwppsKZH9ewpmqXqX-ma7LcZ2eDQTwAJyVb7myLdTcDeN-D7jdmOW-Wuh0Dz0F8Sokct-qK_XLnyOILR0AY0mXP4hhvatIGWFDR2KN4/s1600/btrix_image2.jpg" />
<span class="left"><h3>
HEADING-2 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEDRuJ0gq4_tODBXaI3i705lUA2hL20rNf5jIP9sdkYwnEmXbw_KHsQRAEWoLv1z1gzVEjfYevKwkpMoILQgSJ8PW7SC3SBV2Fj69_E-V49N0676ZY3JXyM25nPn9xclAT3MjVGeAW2yQ/s1600/btrix_image3.jpg" />
<span class="top"><h3>
HEADING-3 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZscrxDwO_eMbtF-_NONbWcWDjpNHPZ8J7_mrizD2nBBWI4lz-4TcNfK2qHmBReFep1ir_XhiAyKHYOayLcpfVpOHYaZszjEqjAe82zn9cdro3GPTeRWrBfXaXK7sTIfdggoZMVe8ZN8/s1600/btrix_image4.jpg" />
<span class="bottom"><h3>
HEADING-4 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2YRj7oFCsadR4T7VyB8iiK2zYSpsYVca1yuIczP4mbUEoXB9v2UNmDYWxVkN1Rx9Sb4utc_RosBxTg_ojAfg9bZBfH69jrvHUR2sDj7ukKiDXXUc3YNsfcRrE2dtTFhJAMA4xYuuRGuU/s1600/btrix_image5.jpg" />
<span class="bottom"><h3>
HEADING-5 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />

Anda dapat mengubah foto dengan mengubah URL Gambar


7. Sekarang menyimpan HTML / Javascript '.

     Anda telah selesai ... 

Read more ...