Cara membuat template blog kreasi sendiri

Handal membuat dan modifikasi template blog dengan kreasi kita sendiri merupakan cita-cita para blogger, khususnya bagi yang senang memodifikasi template blog nya sendiri.
Namun kadang kita selalu terbentur dengan masalah coding dalam melakukannya. Apakah dengan begini anda akan menyerah untuk mempercantik template blog anda? saya harap tidak, karena kemajuan teknologi sekarang memungkinkan bagi siapa pun untuk melakukan hal-hal instant yang dulunya rumit sekarang menjadi mudah.

Nah, hari ini saya mengajak anda untuk membuat dan modifikasi template anda sendiri dengan mudah. Saya yakin cara ini siapa pun bisa, malah bagi blogger baru (newbie) sekalipun, karena hanya tinggal klak klik saja. hehee..

Pertama silakan masuk ke www.dotemplate.com

Lalu scroll mouse anda kebawah, dan temukan tombol Browse all templates... lalu diklik

Pilih salah satu dari template yang anda sukai

Dan untuk memodifikasi, silahkan anda klik Customize and download

Ketika sudah masuk, klik aja bagian yang ingin anda edit





Setelah selesai editing, lalu klik Download dan pilih platform yang anda ingin pakai.




Muncul jendela pop-up lalu klik Download your template

Selesai deh, mudah bukan

Akhirnya anda mempunyai template hasil modifikasi anda sendiri :) Jika ada yang ingin sharing tentang cara modifikasi template buatan sendiri, silahkan komentar dibawah ini.


jika ada yang kuang jelas silakan hubungi ke admin kami disini

Read more »

CARA MEMBUAT BLOG/WEBSITE MENJADI VERSI MOBILE (WAPSITE) SECARA GRATIS

Anda ingin membuat website menjadi mobile site/Wapsite ? Atau anda bosan dengan tampilan mobile bawaan dari blog/website anda? Santai sobat, sekarang bukan hal sulit untuk melakukan itu, cukup beberapa menit kalian bisa membuat Website/blog kalian menjadi versi mobile yang menarik secara gratis, dengan begitu anda maupun pengunjung website/blog anda akan mudah meng-akses walaupun hanya lewat handphone.
Dari hasil penulusuran saya hanya dapat menemukan satu situs yang menyediakan alat kompres website menjadi mobile site secara gratis dan sepuasnya, jadi anda bisa membuat website anda menjadi versi mobile sebanyak mungkin, termasuk website orang lain pun bisa anda jadikan mobile untuk kenyamanan anda dalam mengakses website tersebut, Ok langsung saja ikuti sekilas tutorialnya :
1. Buka halaman situs Via PC Http://my.dudamobile.com , jika sobat lewat ponsel klik Http://m.dudamobile.com
2. Anda bisa sign in dulu melalui Email atau facebook, atau anda juga dapat langsung Memasukan Url blog/website yang anda ingin convert menjadi Versi mobile (Sign in setelah selesai membuat). Perhatikan gambar berikut :

Jika memilih mendaftar terlebih dahulu

jika ingin langsung membuat dahulu

3. Setelah anda masukan Url dan klik Make mobile site, tampilan halaman berikutnya adalah Pilihan template, pilih salah satu template yang anda suka, anda juga bisa menggunakan template asli website anda.

4. Setelah anda memilih template, klik Continue (selanjutnya), maka anda akan masuk ke tahap dua Template design artinya tempat di mana anda mengatur tampilan website/blog anda, di sana tersedia dari mulai Pengaturan kepala halaman (logo, warna, dan latar), Pengaturan navigasi untuk merubah warna, logo navigasi atau tulisan, anda juga dapat merubah latar belakang halaman dengan menggunakan warna atau gambar anda sendiri yang di upload, Setelah selesai klik Continued
5. Add futured, abaikan saja, langsung klik lagi Continued
6. Review and publish, coba lihat dulu tampilan website kita dalam versi mobile, jika sudah siap langsung publikasikan umum melalui jejaring sosial seperti twitter, facebook, Google + , atau melalui email (catatan : bagi anda yang awalnya langsung masuk Url tanpa sign in, disini , saat anda mempublikasikan sudah langsung dapat mendaftar).
6. Klik Continued, anda akan masuk pada Mobile redirect , disini jika anda ingin website anda dapat langsung menyesuaikan alat akses pengunjung, jadi jika website / blog anda di buka di ponsel, maka website anda akan otomatis menyesuaikan ke jenis ponsel pengunjung ( Iphone, android, Os symbian, blackbarry, java dan wapsite klasik), caranya dengan mengcopy paste Kode yang tersedia di kolom redirect kepada bagian pengaturan kepala (Head) pada website/blog anda.
Contoh saat saya buat :
Redirect mobile visitors to your mobile website Not Configured
Follow the steps below to redirect your mobile traffic and customize your mobile website domain.
Duda gives you a mobile website address that you can share with people so they can visit your mobile site. If you would like to use a custom website address, we make it easy.
1. I want to use http://mobile.dudamobile.com/site/Sltpn14_bogor
2. I want to use m.sltpn14bogor.webs.com (or any other sub-domain)
Now that you have a mobile website, let’s make sure that people browsing your site on their phones can see it. Copy the code below into the html of your regular website’s homepage to automatically redirect mobile visitors to your mobile site.
DM_redirect(“http://mobile.dudamobile.com/site/sltpn14_bogor”);

Contoh kode

Paste this code into the /head/
tag on your site. You only need to do this once.
Setelah di paste kode tersebut pada pengaturan halaman anda coba cek website/blog anda melalui ponsel, Jreeeeng mantap kan, tampilan mobile website anda.
Oya, ini juga blogspot, wordpress atau blog/website lain yang sudah dalam punya tampilan mobile bisa anda ubah tampilannya menggunakan ini agar terlihat lebih menarik saat di buka dalam ponsel, saya pun pernah mencoba membuat Kaskus.com, Kombes.com atau reverbnation.com dalam versi mobile, agar saya dapat mudah akses di mana saja saya berada, selain itu, dengan tampilan mobile agar lebih murah biaya aksesnya juga kan
Selamat berkreasi sobat, jika ada pertanyaan atau masukan atau sekedar kopi online, silahkan berbagi di kolom komentar.
Salam  sahabat,

jika ada yang kuang jelas silakan hubungi ke admin kami disini

Read more »

Cara Membuat Blog menjadi Versi Mobile trick google

Semakin canggihnya teknologi Selular yang dapat mengakses sebuah website didalam ponsel ( website mobile), membuat blogspot kini mulai menanamkan sebuah fitur baru yaitu mobile template, hanya saja fitur ini masih beta. Apabila anda mengaktifkan fitur ini maka blog milik anda dapat diakses melalui ponsel,yg mana tampilan dari blog anda otomatis berubah menjadi versi mobile, loadingnya pun jauh lebih cepat.

Cara mengaktifkan fitur ini adalah sebagai berikut:

Masuk ke Dashboard blog milik anda dan klik " Pengaturan "

Kemudian didalam menu pengaturan klik menu " Email & Selular "

Dan didalam menu Email & Seluler klik tulisan " Ya.Tampilkan versi seluler template saya pada perangkat seluler "

Langkah yang terakhir klik " Simpan Setelan "

Selesai deh....selamat mencoba ya.....

Gambar dibawah ini adalah contoh blog milik Catatan Pena versi Mobile http://infoelankx.blogspot.com/?m=1

Semoga informasi ini bermanfaat.

jika ada yang kuang jelas silakan hubungi ke admin kami disini
 

Read more »

Modifikasi Popular Post untuk Template Gallery

Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

DEMO

Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :

1. Login ke Blogger dengan akun Anda
2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
   

   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

   .PopularPosts ul{padding:5px 0}

   .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

   .PopularPosts .item-content{position:relative;float:left;margin:0}

   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

   Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :
   
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-thumbnail-only'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
7. Setelah ketemu, ganti dengan kode berikut ini :
   
   <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
8. Terakhir, save templates lihat hasilnya.

Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

jika ada yang kuang jelas silakan hubungi ke admin kami disini
 

Read more »

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

DEMO

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. 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 agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
   #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6Y9X7FaqJLnMG4OvIHlbqofPJyIYMA4kYreXTMh4ixcNgv6PUbVO3fwF7NmFZWHYxXUBlgoQIfNEFPgke5xuauPh4FVqjAYILzRH1V5RkUabEc4yK4Ar0nNCcT0IjuYrNYj5GmkkllsM/s1600/scroller-bg.png) repeat center}
   #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDx277VbGAEnR2R7g9cpFvnGktOTKHGFzsiKb2xOQr8KOP5PaBWLcyupy887uaVPRXD4T2dGcHQea6cqySESx4Zt22ugNAl8fdZgIlZsSmSPtSaJCzV6hqRZQF7lEfbWXep8gd6lQtpMo/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
   #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib6wKOtjdLuvvVn6fiOu0cFmFyCwVBwaynZAaiA_zlN098D8bRP7twG4eExKHkEWU1LJxgwrwKu-fNj12UVnideDYCb_MKAUHzt-WnhvsNdCRXLhTiJLvn_JduJc7bBlvtTtGy5U03G-8/s1600/prev.png) center}
   #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT-uvEtCUea01GRkSp6UfTpSrJqeHBaoceGYKwKlnutjOyxv2va-djhgVitWvsZ8UFcYI-8glS9vGNFyHyueQmDmXi_lBeZCbph9nPHJTjf9wUYo4CFl05-tSYrEUmTkTAXygVjUzcxu8/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
   #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifC8QcD3hq7LaOQJPxhr3ZK4dw7YQTLl37sdtTBS3XlxbYFzJmg_5JK1JXruNcWYPDK_sPSylLh9yqpJKgJ74IIQ2YdDtqCCYl_17K3HWaRRyutWInmPr2P0o4z0BJddh_fwkA_Vdvc78/s1600/next.png) center}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrFJt0BP-YLp0eDSx9B8zyViNYPelfca_H_EshT3MjpkbWqQKg55EUNkqV5bVFTGpyiSwb1oOZwCUjLsXo5jb6NB4SlnhCZkSo3Zk5Bm1wKVvSRVkRYvsGPpT-9vAcNtBQ0Qp9WdOZzXk/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
   #carousel ul li a.slider_title:hover{color:#cd1713}
   #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://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7fFYQEPFXLm4njR29AAdD0aQgcecILdvQV54JqBrV8IQ0b79MO4cN82HH4KImYOh-bwlqkRWITi9YYc_CHMQVNWJTEJ98xTCBAZyl5JkQHBuQJjWt_yN8rwCu30Ycbs6hClpCGPQ7gSI/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 140;
   summaryTitle = 25;
   
   numposts1 = 15;
   label1 = "news";
   
   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 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   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="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></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.
   Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
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/-/&quot;+label1+&quot;?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>
   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.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

jika ada yang kuang jelas silakan hubungi ke admin kami disini

Read more »

Cara memasang musik di blog (Update 2012)

Tips dan triks memasang musik di blog sudah pernah saya tulis disini tapi sekarang situs yang saya rujuk tersebut sudah tidak online lagi. Tapi tenang sobat, berikut saya beberkan Cara memasang musik di blog melalui situs SCM Music Player.

Berikut adalah langkah - langkah memasang musik di blog :

1. Kunjungi http://scmplayer.net/

2. Scroll ke bawah sedikit, lalu sobat pilih skin yang sobat inginkan

3. Selanjutnya klik 'Edit PlayList, masukkan judul lagu dan link lagu tersebut.

Untuk ini sobat harus meng-upload lagu sobat di hosting mp3, tenang sobat saya sudah menyediakan hosting yang cocok untuk mp3 yaitu filefreak.com, silahkan sobat upload terlebih dahulu lagu favorit sobat disini kemudian copy paste link location mp3 sobat. (lihat gambar).
Sobat juga bisa menambah beberapa lagu disini..

4. Terakhir sobat bisa melakukan beberapa settingan dasar, setelah itu klik done.

5. Selanjutnya Copy paste code yang muncul pada gadget  blog sobat, caranya klik Rancangan --> Add Gadget --> HTML/JavaScript --> paste code --> Save

Selamat mencoba..

jika ada yang kuang jelas silakan hubungi ke admin kami disini

Read more »