Cara bikin Slide Konten di situs atau blogspot

Opera Seo – Tempat Berbagi Ilmu, dibawah adalah teknik Kesehatan yang saya bagikan

Cara bikin Slide Konten di situs atau blogspot

Cara bikin Slide Konten di situs atau blogspot – Poetra Pakumis | kini saya akan membagikan Tutorial situs atau blog tentang Cara bikin Slide Konten di situs atau blogspot. Cara ini saya perlajari template ciptaan maskolis. sesungguhnya kita para situs atau blogger newbie bisa belajar template-template ciptaan maskolis, mengapa ? kok bisa belajar template mas kolis. Jadi begini saya jelaskan maskolis memproduksi sesuatu template template lama dia yang di mudif ulang menjadi template yang lebih fress dan maskolis senantiasa membagikan templatenya dalam bentuk Notepad agar kita para situs atau blogger bisa belajar template-template maskolis memang sih agak sukar tapi bila kita sudah mengerti apa itu HTML, JavaScript, CSS3 pasti mudah. Oke langsung aja kita ketopik artikel, selanjutnya screenshotnya :

selanjutnya Ini Cara bikin Slide Konten :

1. Login account situs atau blogger sahabat yah pasti udah pada ngertilah soal itu mah. tapi saya ingatkan lagi biar jelas gitu.

2. Masuk ke Template – Edit HTML (Jagan lupa sob Centang Expand Widget Templates).

3. kalo sudah silahkan sahabat cari kode ]]></b:skin> bila seudah ketemu silahkan masukan kode di bawah ini tepat diatas kode ]]></b:skin>.

/* Slide Content- */.slide1-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;word-wrap: break-word; overflow: hidden;}.slide1 ul {list-style:none;margin:0;padding:0;}.slide1 .widget {margin:0}#bot-wrapper {padding-top:10px;width:970px;float:left;word-wrap:break-word;overflow:hidden}#bot1-wrapper{width:620px;float:left;word-wrap:break-word;overflow:hidden}#bot2-wrapper{padding-left:10px;width:340px;float:right;word-wrap:break-word;overflow:hidden}.bot .widget,.bot1 .widget,.bot2 .widget{margin:0;padding:0 0 8px}.bot ul,.bot1 ul,.bot2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}

4. Dan masukan juga kode di bawah ini diatas ]]></b:skin> 

#carousel {background:url(http://4.bp.situs atau blogspot.com/-WSvEnOsMvxA/UTa3FTJO_EI/AAAAAAAACb0/bCwQLPSmIBk/s1600/sidebar.png);width: 970px; position: relative; float: left; margin:0 0 10px 0;height:230px;overflow:hidden;}#carousel .judul{margin-left:10px;font:18px Oswald;padding:5px;color:#FF0000}#carousel .container {position: absolute;left: 0px;width: 970px;overflow:hidden;}#carousel ul{width:10000px;position: relative;overflow:hidden;margin-top:0px;}#carousel ul li {display: inline; float: left; margin:1px 0px 2px 10px; padding:1px; width: 180px; overflow: hidden;height:178px}#carousel .thumb{height:128px;width: 170px;background:#fff;padding:4px;border:1px solid #ccc;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;}#carousel  #previous_button { position: absolute; top:8px;right: 39px; width: 25px; height: 22px; cursor: pointer; background: url(http://4.bp.situs atau blogspot.com/-IkX_jjs9Gls/UTYfxPvaEtI/AAAAAAAACbU/S4cXeti3S-I/s1600/paginate.png) no-repeat; background-position: 0 0; }#carousel #next_button { position: absolute; top:8px; right:10px; width: 25px; height: 22px; cursor: pointer; background: url(http://4.bp.situs atau blogspot.com/-IkX_jjs9Gls/UTYfxPvaEtI/AAAAAAAACbU/S4cXeti3S-I/s1600/paginate.png) no-repeat; background-position: -27px 0; }#carousel #next_button:hover, #previous_button:hover { -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=80)”; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }#carousel ul li a.slider_title{color:#FF0000;display:block;text-align:center;font:bold 12px Bookman Old Style;margin-top:8px}#carousel ul li a.slider_title:hover{color:#111}

 5. Bila cara diatas sudah dikerjakan jangan kemana-mana dulu tetap ada yang lainya. Silahkan sahabat cari kode   <div id=’main-wrapper’> dan masukan lagi kode di bawah ini tepat diatas kode <div id=’main-wrapper’>.

<div class=’clear’/>      <div id=’slide1-wrapper’><div id=’carousel’><div class=’judul’>Tutorial situs atau blog</div><div id=’previous_button’/><div id=’next_button’/><div class=’container’><ul><script>document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Software PC?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);</script> </ul><div class=’clear’/></div><div class=’clear’/></div>

Note :Cara diatas itu untuk menjadikan Slide konten perlabel jika sahabat ingin membuat tampil Artikel paling baru atau bisa dikatakan baru saja dibuat silahkan sahabat Hapus kode yang mempunyai warna biru itu.namun kode mempunyai warna merah ada judul Slide konten tersebut, silahkan cocok atau sepadankan kemauan sahabat.

6. Silahkan preview dulu kalo sudah cuco sama sahabat baru di save.

Nah, sekian artikel tentang Cara bikin Slide Konten di situs atau blogspot semoga artikel yang saya catat berguna bagi sahabat seluruh.

Apa bila Anda mendapatkan BROKEN LINK silahkan bersaran pada tempat yang sudah disiapkan.

Terima kasih telah berkunjung, semoga artikel Cara bikin Slide Konten di situs atau blogspot bermanfaat.