A story with tens of thousands of articles.

A story with tens of thousands of articles.
life and death, blessing and cursing, from the main character in the hands of readers.

Friday, May 8, 2015

Cara membuat Slider Carousel Otomatis di Blog.


Need a professional writer? Fiction and non-fiction? contact richard.nata@yahoo.co.id

BERANDA    ABOUT US    ADS : 1 USD FOREVER     ASMARA    BIOGRAFI     BUKU     BUKU PINTAR 

CHRISTIAN FAITH     DISCLAIMER     DUNIA KERJA     ENTREPRENEURS     GO PUBLIC (IPO)     

KESEHATAN     LIST OF ALL ARTICLES     MARKETING     MY STARTUP     OTHERS     

TIP SUKSES DAN KAYA     TIPS BLOGGER     TIP SEO     CONTACT ME    PROFESSIONAL WRITER

Ditolak google adsense seperti gue ( richard nata ) ? tenang... ada cliksor. ha...7x http://richardnata.blogspot.com/2015/04/ditolak-google-adsense-seperti-gue.html
SELAIN CLICKSOR, MASIH ADA PROPELLER ADS. HA...7X

(out of 100's of systems, this is my number #1 recommendation ^^)

KALAU SUKA BERMAIN GAME JANGAN LUPA KLIK PLAY NOW ATAU DOWNLOAD.

Penulis : cakar lele on Saturday, 4 January 2014 | 04:18

Cara membuat Slider Carousel Otomatis di Blog berikut cara - caranya :
  1. Pertama Anda mesti login ke blogger dengan akun Anda.
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates.
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin>
#carousel{width:098px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5e7I7ht1b9SEnKAzyh3URiNlNh0D0l89UTsx06Rxq8nmsun0omimdBJL8XjKWmzFw_kHuXodGKQKRyj9B2zuDgFHDn0jlaqa293WEluno3zEVWQ-XvUlPjVOjIiRQVkinZLo5bWSFax7u/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB7yAsvfT0kMQOd1IvZafm6r3bGs9CWwR10E6vkak1wt3BNNWm52GL9Mi3mo_2wgylrDQDdKuQRdKv2OgARUbYR1kGsGLZx8aEC2ty4ohTWFkiAFYDK6g0o1clm50RcDyT1TquaajH9yCm/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

   6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode    </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM_abkPTRVblcFT-07KnqzHrZraX6n6PTyqgGyP8SvA_mUDqeVs51Y_mlRqDH4zsmxsSqy4MHvSF45k7V_NHyy3HgyIDT7hpjR9QH18ag6DeDj56fn5ptlXVCnKjSmIdSe6lL5FOxySXA/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Keterangan :
Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90adalah panjang dan lebar image yang ada di slid

7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode<div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if>

Keterangan :
Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.

8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

by maskholis 


Love this Post? Spread the Word.

DO NOT FORGET TO CLICK THE PLAY NOW OR DOWNLOAD.



Need a professional writer? Fiction and non-fiction? contact richard.nata@yahoo.co.id

My STARTUP :


A story with millions of choices in it.

Try to imagine this. When you're reading a story on the web or blog, you are given two choices. You can choose the next story based on your own choice. After selecting then you can continue reading the story. Shortly afterwards you will be presented back to the 2 other options. The next choice is up to you. Then you continue the story you are reading. After that you will be faced again with 2 choices. So onwards.

If you feel curious then you can re-read the story by changing your selection. Then you will see a different story with the story that you have read previously. The question now is why is this so? Because the storyline will be varying according to your choice. 

Based on the above, then you are faced with two choices. Are you interested in reading my story is? Or you are not interested at all. The choice is in your hands.
If you are interested then spread widely disseminated this article to your family, friends, neighbors, and relatives. You can also distribute it on facebook, twitter, goggle +, or other social media that this article be viral in the world. By doing so it is a new entertainment industry has been created.

Its creator named Richard Nata.

The full articles that talks about this: 
  

Are you interested in my offer?

Do you want to be an investor in my startup?


If yes, don't hesitate to contact me as soon as possible.

Thank you.
Lord Jesus bless you.
Amen
P.S. The offer letter I gave also to the hedge funds and venture capital and other major companies in the entire world. So who is fast then he will get it.
P.P.S. If you are not interested in my offer, it is a good idea to periodically review my blog to see the development of my blog.  http://richardnata.blogspot.com
If I've made a story on my blog and get a multiplication of clicks then you should know that the readers liked my story

Diposkan oleh di
Label: , , , , , , , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Related Posts

Related Posts Plugin for WordPress, Blogger...