Tampilkan postingan dengan label Tutor Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutor Blog. Tampilkan semua postingan

Minggu, 15 Februari 2015

3 CARA MEMBUAT BLOG Gratis Blogspot Terbaru 2015

22.11


Syarat pertama Anda sudah memiliki akun gmail, jika belum silahkan buat dulu email gmail, silahkan klik link berikut dan ikuti panduannya: Cara Membuat Email Baru Gmail

Jika anda sudah memiliki akun gmail maka langsung saja ikuti langkah ke dua ini, 
masuk ke email gmail

  • Masukkanlah alamat email gmail yang sudah anda buat tadi
  • Masukkan sandi atau password nya
  • Klik SIGN IN
  • Jika anda di bawa kehalaman seperti ini,
  • masuk ke blog
  • Klik Lanjutkan ke Blogger
  • Jika anda di bawa ke halaman seperti ini
cara membuka blog

  • Klik tombol Blog Baru yang ada disebelah kiri, ( lihat gambar )
Jika tampilannya belum dalam bahasa indonesia maka klik tombol yang ada di pojok kanan atas layar anda ( disamping bola gerigi ), pilih bahasa indonesia.
agar blog bahasa indonesia

Setelah anda mengklik tombol Blog Baru maka isilah:
Judul: menggambarkan tema dari artikel-artikel pada blog yang anda buat. Misal: Blog Kumpulan Resep Mama
Alamat: Isi dengan alamat yang anda suka, cari yang unik dan agak panjang, bisa menggunakan huruf dan angka atau tanda hubung minus - . Misal: reseprahasiamama2015 atau tulis4n-budi-jogj4
cara mengisi alamat blog

Alamat blog sering kalinya tidak tersedia karena sudah digunakan oleh orang lain, sehingga anda harus pintar-pintar mengkombinasikan antara angka, huruf, dan tanda minus, bikin se-unik mungkin, agar berhasil membuat alamat blog yang belum digunakan oleh selain anda.

Alamat blog ini nantinya akan di akhiri dengan .blogspot.com . Jika muncul peringatan bahwa alamat blog tidak tersedia, maka hapus semua nama alamat tersebut dan tulis kembali nama unik lainnya hingga berhasil (tersedia).

Template
: Silahkan pilih yang anda suka dari 7 template pilihan tersebut
Semua pilihan tadi: Judul, Alamat dan Template bisa di ubah lagi nanti di menu setelan dasar, jadi anda tenang saja.

Kalau sudah klik tombol Buat Blog, sekarang BLOG ANDA SUDAH JADI
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqgLcdEazxJdUTJeYaaMw_qtb0j8S8xU_AHQ7mtDc0k0FzEHjMABG0Lgfl4qOS_845vaVgBsn3Zozr9zGVogA2KprIRYphuJVTfyCa_vpQSZuQoubc5ouJBHFQnwXBqRz9wAUF-PjMHEQJ/s400/Optimized-buat+blog+4.jpg

Selasa, 20 Januari 2015

Cara Membuat Like Box Facebook Melayang

23.07
Langsung aja berikut cara bikin kotak like facebook melayang :
1. Login ke halaman dashboard blogger kamu.
2. Setelah berada dalam halaman dashboard kamu, silahkan pilih salah satu blog yang ingin kamu sisipkan kotak like facebook melayangnya :
Cara Membuat Like Box Facebook Melayang
Klik Gambar untuk Memperbesar
3. Setelah mengikuti langkah 2, selanjutnya klik “Tata Letak” yang berada pada sisi kiri.
Cara Membuat Like Box Facebook Melayang
Klik Gambar untuk Memperbesar
4. Setelah melakukan langkan no.3 , kamu akan melihat layout blog kamu seperti contoh blog saya ini :
Cara Membuat Like Box Facebook Melayang
Klik Gambar untuk Memperbesar
Klik “Tambah Gadget” maka akan keluar Pop-up window, lalu klik “HTML/Javascript” seperti yang ditunjukan tanda panah di bawah :
Cara Membuat Like Box Facebook Melayang
Klik Gambar untuk Memperbesar
Lalu akan tampil window berikut :
Cara Membuat Like Box Facebook Melayang
Klik Gambar untuk Memperbesar

Selanjutnya copy paste kode berikut ke dalam kotak yang ditunjukan oleh panah di atas :
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/urlpagekamudisini?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>&times;</a>
</div>
5.  Ganti tulisan https://www.facebook.com/urlpagekamudisini dengan URL Facebook Fanpage kamu.
6. Klik “Simpan

Membuat Iklan Melayang dengan Tombol Close

22.51
Objek melayang atau sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. Float Top Bar ini biasanya berisi Content Iklan ataupun sebuah Form SubScribe sehingga pasti terlihat oleh pengunjung Website atau Blog kita. Untuk membuat Iklan melayang seperti ini sangatlah mudah, hanya dengan beberapa langkah, maka Iklan Melayang tersebut sudah bisa terpasang pada Website atau Blog Anda.



 Oke, berikut ini adalah langkah-langkah pembuatannya :
  1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
  2. Masuk ke Tab Tata Letak
  3. Pilih Elemen Halaman
  4. Tambah Gadget Pilih HTML / JAVASCRIPT
  5. Dan copy kode di bawah ini kedalamnya yah
<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilG3ttACR_uKOuSRMlX0lgrkTK51P4LO-a8mMtHJhY40lps7V8PXByJd9MyzR5psBXolR5iYbT50BNhFjbY0dxFR_ASUYXCcfnEnFObLu7HsqsbkmNeAPhlsEQ4nrRPMGQHTUJwHd_2ps/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilG3ttACR_uKOuSRMlX0lgrkTK51P4LO-a8mMtHJhY40lps7V8PXByJd9MyzR5psBXolR5iYbT50BNhFjbY0dxFR_ASUYXCcfnEnFObLu7HsqsbkmNeAPhlsEQ4nrRPMGQHTUJwHd_2ps/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>
    6. Simpan

Untuk tulisan yang berwarna merah, bisa teman-teman ganti dengan kode iklan, gambar ataupun tulisan yang diinginkan, selamat mencoba.

Semoga bermantaat

Memasang Artikel Berlangganan di Blog

22.36
Tujuan kita dalam membuat sebuah blog tentu tidak lepas dengan pengunjung (visitor), baik visitor bertarget maupun tidak, visitor yang datang melalui Search Engine maupun hasil Blogwalking. Nah, biasanya ada suatu visitor yang menganggap blog anda selalu berguna untuknya, selalu dianggap menarik dalam segi isi dan cara penulisannya. Maka dari itu dibutuhkan widget seperti Artikel Berlangganan agar memudahkan visitor mengakses artikel anda apabila suatu saat anda meng-update.

Kali ini saya akan posting tentang cara memasang Feedburner di blog, memang sudah banyak sih artikel tentang cara pemasangan Feedburner ini. Tapi biar blog ini lengkap nggak apa-apa lah saya nulis lagi. Feedburner merupakan situs yang sudah diakuisisi oleh Google, yang bisa kita gunakan saat ini. Mengambil RSS dari suatu blog lalu mengubahnya menjadi fitur yang memuaskan, Artikel Berlangganan melalui email. Berikut selengkapnya:
  1. Kunjungi URL berikut http://feedburner.com/. Maka secara otomatis anda akan di-redirect ke halaman Google.
  2. Klik Claim Your Feeds Now.
    cara pasang kotak berlangganan Feedburner dengan mudah
  3. Login dengan akun Feedburner anda. Kalau anda bingung, jangan pilih metode ini. Pada sebelumnya, anda juga bisa login menggunakan alamat Gmail anda.
    cara pasang kotak berlangganan Feedburner dengan mudah
  4. Tulis URL RSS feed anda. Biasanya seperti ini:
    http://creatingwebsite-maskolis.blogspot.com/feeds/posts/default
    Note: Ganti tulisan berwarna merah (URL blog) dengan URL blog anda)
  5. Langsung klik Next tanpa memberi tanda cek pada kotak I am a podcaster!
  6. Secara otomatis akan tampil Feed Title dan Feed Address dengan format:
    http://feeds.feedburner.com/alamatfeed
    cara pasang kotak form berlangganan Feedburner dengan mudahJika anda sudah selesai menulis Title dan Address-nya, silakan klik Next.
  7. Alamat feed baru anda telah selesai dibuat, simpan alamat feed tersebut.
    cara pasang kotak form berlangganan Feedburner dengan mudah
    Sekarang ganti dulu feed blog anda dengan feed dari feedburner. Caranya:
    • Login pada akun Blogspot anda kemudian pilih Settings
    • Pilih menu Site Feed dan isikan URL feed kamu di kolom yang telah disediakan.
      cara pasang kotak form berlangganan Feedburner dengan mudah
    • Klik Save Settings
  8. Klik Skip directly to feed management pada gambar no. 7 tadi, letaknya sebelah tombol Next.
  9. Pilih menu Publicize dan pada sub menu, pilih Email Subscriptions.
    cara pasang kotak form berlangganan Feedburner dengan mudah
  10. Klik Activate dan kemudian copy kode script form yang muncul ke gadget Blogspot anda. Sebelumnya pada menu dropdown, pilih Blogger sebagai Platform Blog anda.
    Pasang Artikel Berlangganan + Kustomisasi
  11. Jika anda sudah selesai memasangnya pada gadget blog anda, klik Save
  12. Nah, sekarang pasang juga widget penghitung visitor yang telah berlangganan artikel anda. Yaitu klik FeedCount pada sub menu. Pilih Animated jika anda ingin widget tersebut menggunakan efek animasi, dan juga pilih warna yang sesuai dengan selera anda. Kemudian klik Activate.
    Pasang Artikel Berlangganan + Kustomisasi
  13. Secara otomatis akan keluar kode script widget tersebut, letakkan widget tersebut ke gadget Blospot anda juga.
  14. Jangan lupa klik Save
Itu dulu tutorial pemasangan Feedburnernya, untuk cara memodifikasi tampilan artikel berlanggganan Feedburner, akan saya posting kemudian. Selamat mencoba dan semoga bermanfaat.

Membuat Widget Label Tertentu dengan Satu Thumbnail

22.19
ah judulnya kurang pas kayaknya ya...? Bodo amat, yang penting isinya. Kali ini saya akan memberikan satu lagi tutorial blogger tentang membuat widget per label dengan hanya satu thumbnail pada bagian paling atas dan di bawahnya menampilkan judul saja, untuk lebih jelasnya silahkan lihat screenshot gambar dibawah.  Biasanya widget ini banyak digunakan oleh blog konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Sebenarnya tutorial ini sudah lama tapi karena banyak yang tanya di kotak komentar maupun di email, tidak ada salahnya jika saya perjelas lagi di artikel ini. Cara membuat widget per label yang saya gunakan disini sebenarnya mudah dan hanya menggabungkan antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja.

widget per label
di bagian tertentu pada template itu terdapat widget yang menampilkan label dengan susunan satu judul dengan thumbnail dan summary, dan dibawahnya list dari label yang sama tetapi hanya menampilkan judulnya saja. Cara membuatnya adalah sebagai berikut :
  1. Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan widget 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> :
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
    6. Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMSNnoMsGy59wgItP6yFv2a4O2ioNx6LJQuVnjYXXn-RtX7QywaPYAuNRC6ubRC92fNBgcmLAEOh9Plilwdm68MjoPtC0yXvczilkRafVPSwtg3CyMlgy1Ogxpeapce7cPiGihcCKi042y/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan Google Code Anda sendiri atau gunakan kode script di bawah ini yang sudah saya ringkas di Google Code.
<script src='http://yourjavascript.com/425111422721/label.js' type='text/javascript'/>
Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
 
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
Keterangan :
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda.

Selanjutnya save dan lihat hasilnya.
Tampilan dari widget ini mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

Demikian tadi tutorial jadul mengenai membuat widget per label kali ini, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.
 

Selasa, 23 Desember 2014

Membuat Slider Carousel

18.25


slider carousel

  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:980px;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/AVvXsEiCzdCzP_DOIkRN-ZrjV1d8XD7pWE7eXSjYA3oAd0TtGiqsnapRiAS4NQ2_yC1kBxmwEXG2n6Cuf8jGW_Ugz3duVzxs_VqWJFLbPO6gowX6MBZlj2FfCJLnY6s3zyLfwu7176jozOVCOh1T/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/AVvXsEgExsxQ3AdIpmP6wSarVvdR-j3FfJESv2odCAcOZL6yVFLMxBdG88gDheNIVFhWQNIqfA8oV0rlJzy8sYz8SfI6ELqBPF_Z_AqwOIzR2uv79wBDTCQxdAJcOHd3YmVVMlq-mRMEukgx4jS4/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.
  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/AVvXsEi5B79KY68maRcDyT7YCTx3ZBv1SkbCqZ6bVTz5WMG2dQSbnKyzi8oskcZVoMauEqKdoUZ5y_sfMudiyWcHQQSaiNaIugyXb9cWHc_ZwLyDURP2tdWk-4yjIKc58ZRVngNHS9vXk8kVCRo/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 90 adalah panjang dan lebar image yang ada di slider.
  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>
    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.

Senin, 08 Desember 2014

Tab View Menu Tanpa Edit HTML

17.17
abber yang biasa kita lihat di sidebar dapat berfungsi untuk menghemat space dalam sebuah blog, sehingga blog lebih kelihatan rapi. Banyak cara dalam membuat tabber ini, sebelumnya saya juga pernah membuat tutorial membuat tab view menu ini bisa dilihat pada membuat Tab View Menu Tanpa Edit HTML dan Tab View di Blogspot. Kelemahan dari tabber sebelumnya adalah kita mesti memasukkan URL postingan satu persatu ke dalamnya sehingga tidak secara otomatis jika ada postingan baru akan muncul di tabber.
Sebenarnya membuat tabber atau tab view menu ini juga bisa dengan menggunakan fungsi accordion tapi terkadang scriptnya bentrok dengan script lain dengan script silder misalnya, bisa sih diatasi tapi mesti merubah jquery menjadi no conflict, ah ribet deh pokoknya.

tabber sidebar maskolis

Untuk hasil akhir tabber ini gambarnya seperti diatas, jika ingin melihat demonya disini. Baiklah, langsung saja pada cara pemasangannya :
  1. Login ke blogger dengan akun anda
  2. Di dashboard klik Tata Letak > pilih Edit HTML centang expand widget templates
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>
    .widget-wrapper2
    border:1px solid #494e52
    background-color:#636d76
    padding:10px

     
    .widget-tab { 
    background:#c9dbdd
    font-family:Arial,Helvetica,sans-serif
    padding:5px !important

     
    .widget-tab  ul { 
    margin:0px
    padding:0px 5px 0 5px

    .widget-tab  ul li { 
    list-style:none
    border-bottom:1px dotted #a4bddf
    padding-top:4px
    padding-bottom:4px
    font-size:12px

    .widget-tab  ul li:last-child { 
    border-bottom:none

    .widget-tab  ul li a { 
    text-decoration:none
    color:#3e4346

    .widget-tab  ul li a small { 
    color:#8b959c
    font-size:9px
    text-transform:uppercase
    font-family:VerdanaArialHelveticasans-serif
    position:relative
    left:4px
    top:0px

    .tab-content  ul li a:hover { 
    color:#a59c83

    .tab-content  ul li a:hover small { 
    color:#baae8e

     
    .active-tab{ 
    background:#FFFFFF url(http://3.bp.blogspot.com/-F2JucRkielU/Ty7NHVdzBkI/AAAAAAAAFG8/d4ZqQOFH3Bg/s1600/sidebar.png) repeat-x scroll left bottom !important
    color:#282E32 !important;         

     
    ul.tab-wrapper { 
    margin:0pxpadding:0px
    margin-top:5px
    margin-bottom:6px

     
    ul.tab-wrapper li{ 
    background:url(http://1.bp.blogspot.com/-Tjycy0172Vo/Ty7IS2D7OCI/AAAAAAAAFGc/kx8jg6X9ywE/s1600/menu-m1.png) repeat-x top
    color:#FFF
    cursor:pointer
    display:inline;font-family:Verdana,Arial,Helvetica,sans-serif
    font-size:9px
    font-weight:700
    line-height:2em
    list-style-image:none!important
    list-style-position:outside!important
    list-style-type:none!important
    margin-right:1px
    text-align:center
    text-decoration:none
    text-transform:uppercase
    padding:8px 14px 
    }  
  5. Tabber ini butuh sebuah jquery.min.js untuk bisa bekerja dengan baik, anda harus menambahkan kode di bawah ini diatas </head> (jika pada template anda sudah terinstall, langkah ini dilewati saja) :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
  6. Setelah itu, tambahkan kode berikut ini di bawah script jquery diatas
    <script type='text/javascript'>
    var starttab=0;
    var endtab=3;
    var sidebarname=&quot;sidebar&quot;;
    </script>
    <script src='http://yourjavascript.com/229125112341/tabber.js' type='text/javascript'/>
    Keterangan :
    var starttab=0;
    var endtab=3;
    var sidebarname="sidebar";
    Starttab adalah nomor awal untuk widget yang Anda pilih, mulai menghitung dari 0. Endtab adalah jumlah untuk widget terakhir yang ingin ditampilkan dalam tabber. Endtab=3 berarti widget yang ditampilkan dalam tabber ada 4 (0, 1, 2, 3 empat kan jumlahnya).

    Sidebarname adalah id sidebar letak tabber nantinya, bisa anda letakkan di kiri menggantinya dengan sidebarleft atau bisa juga diletakkan di tengah, yang perlu diperhatikan Anda harus mencari id dimana tabber ini akan diletakkan, biasanya tempatnya seperti kode di bawah ini (perhatikan yang warna kuning) :
    <div id='sidebar-wrapper'>
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  7. Setelah itu Save/Simpan template, sudah selesai.
Setelah itu anda tinggal membuat 4 widget yang akan ditampilkan dalam tabber, ingat dikasih judul semua ya widgetnya. Itu tadi tutorial dasar dari saya untuk membuat tabber sederhana dengan jquery, silahkan dimodifikasi sendiri warna serta tampilan lainnya. Sesuaikan dengan komposisi warna blog Anda sehingga tabber ini semakin memperindah tampilan blog dan pengunjung semakin betah berlama-lama di blog Anda. Selamat mencoba dan semoga bermanfaat.....

About Us

Recent

Random