Cara Membuat Favicon Animasi

Favicon adalah logo atau gambar yang muncul di address bar saat url sebuah website/blog dibuka. Ada banyak website yang menyediakan pembuatan favicon secara online, tapi kebanyakan penyajian dalam bentuk gambar saja, bukan dalam bentuk Animasi. 

Nah, kali ini postingan saya khusus tutorial cara membuat favicon sendiri dengan bantuan beberapa tols, seperti paint dan photoscape.

Cara ini mungkin terlihat cukup kuno, kalian bisa memilih, mengikuti cara saya ini, membuat favicon secara online di situs penyedia pembuatan favicon online atau bahkan mencari di google favicon yang sudah jadi.

Berikut langkah pembuatan favicon animasi versi saya :

Buka paint, tuliskan teks yang ingin kamu jadikan favicon

Save masing-masing teks "per karakter"

Buka photoscape, pilih "Animated Gif" , buka direktori tempat menyimpan gambar karakter tadi.

Drag satu per satu gambar karakter tersebut, seting timer, dan jenis animasinya

Klik simpan. 

Gambar tersebut masih berformat Gif, dan sizenya terlalu besar untuk dijadikan Favicon. Convert dahulu gambar Gif tersebut menjadi Ico. gunakan Tols Favicon Converter.

Upload file Gif tadi, tunggu proses upload selesai, kemudian download ulang file gif yang sudah menjadi icon tersebut.

Langkah selanjutnya adalah mengupload kembali file icon yang sudah jadi tadi bisa menggunakan photobucket maupun aplikasi favorite saya, Post Image.

Setelah favicon terupload dan kamu sudah mempunyai URLnya, Slanjutnya ikuti langkah-langkah berikut :

1. Masuk ke Dashboard lalu pilih Template

2. Edit Html jangan lupa centang Expand Template Widget

3. Cari kode <b:skin><![CDATA[

4. Kemudian pastekan kode di bawah ini tepat di ATAS kode <b:skin><![CDATA[

<link href=’URL favicon disini’ rel=’icon’ type=’image/gif’/> 

Nah, itu dia cara ribet membuat favicon versi saya, jika berkenan, silahkan ikuti, jika tidak, anda boleh mencari alternatfi lain :"

Syalaaaaaam......

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Membuat Recent Post Atau Artikel Terbaru Dalam Widget

utorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.

1. 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> :

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto} #terbaru{margin:0px} .mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px} .mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px} .mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111} .mas-elemen:hover{background-color:#c3c3c3} .mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0} #mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgltYBHEGhS9edjYERzUYz5jkudnaeWF912aBIJ2_lwJbNiCfXY-dyTrhSPkBSNbroPwnvsAARiaL3lqwOzE9x2-DvzHT6Q-vTUxb8qz0b9IRaoP9HF6ME9uhXV2qRlCCNrPfZhH0GiJ80/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3} #mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px} #mas-navigasifeed:hover{background-color:#c3c3c3} #mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} #mas-navigasifeed span{padding:5px 10px} #mas-navigasifeed .next{float:right} #mas-navigasifeed .previous{float:left} #mas-navigasifeed .home{text-align:center} #mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image. 

Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script type='text/javascript'> //<![CDATA[ var numfeed = 5; var startfeed = 0; var urlblog = "http://johny-gantengbanget.blogspot.com/"; var charac = 100; var urlprevious, urlnext; function maskolisfeed(johny,banget){ var showfeed = johny.split("<"); for(var i=0;i<showfeed.length;i++){ if(showfeed[i].indexOf(">")!=-1){ showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length); } } showfeed = showfeed.join(""); showfeed = showfeed.substring(0,banget-1); return showfeed; } function showterbaru(json) { var entry, posttitle, posturl, postimg, postcontent; var showblogfeed = ""; urlprevious = ""; urlnext = ""; for (var k = 0; k < json.feed.link.length; k++) { if (json.feed.link[k].rel == 'previous') { urlprevious = json.feed.link[k].href; } if (json.feed.link[k].rel == 'next') { urlnext = json.feed.link[k].href; } } for (var i = 0; i < numfeed; i++) { if (i == json.feed.entry.length) { break; } entry = json.feed.entry[i]; posttitle = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } if ("content" in entry) { postcontent = entry.content.$t; } else if ("summary" in entry) { postcontent = entry.summary.$t; } else { postcontent = ""; } if ("media$thumbnail" in entry) { postimg = entry.media$thumbnail.url; } else { postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSvaONAIQ5MRMnf-wH9dSQxeae-1I5qm4ET_ewps3DjlI18_dN_cmxqpj4KiAp2j60Gc5v9gL5Sf9pyrzAE7GOXb3wY3UVjNT-dlH1RNnLyfwvPQ1bwAJ3858oIpPODCfj32xzjQxEDyM/s1600/no+image.jpg"; } showblogfeed += "<div class='mas-elemen'>"; showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; showblogfeed += "<h6> <a href='" + posturl + "'>" + posttitle + "</a></h6> "; showblogfeed += "<p> " + maskolisfeed(postcontent,charac) + "...</p> "; showblogfeed += "</div> "; } document.getElementById("terbaru").innerHTML = showblogfeed; showblogfeed = ""; if(urlprevious) { showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>"; } else { showblogfeed += "<span class='noactived previous'>◄ Previous</span>"; } if(urlnext) { showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>"; } else { showblogfeed += "<span class='noactived next'>Next ►</span>"; } showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>"; document.getElementById("mas-navigasifeed").innerHTML = showblogfeed; } function navigasifeed(url){ var p, parameter; if(url==-1) { p = urlprevious.indexOf("?"); parameter = urlprevious.substring(p); } else if (url==1) { p = urlnext.indexOf("?"); parameter = urlnext.substring(p); } else { parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script" } parameter += "&callback=showterbaru"; incluirscript(parameter); } function incluirscript(parameter) { if(startfeed==1) {removerscript();} document.getElementById("terbaru").innerHTML = "<div id='mas-loading'> </div> "; document.getElementById("mas-navigasifeed").innerHTML = ""; var archievefeed = urlblog + "/feeds/posts/default"+ parameter; var terbaru = document.createElement('script'); terbaru.setAttribute('type', 'text/javascript'); terbaru.setAttribute('src', archievefeed); terbaru.setAttribute('id', 'MASLABEL'); document.getElementsByTagName('head')[0].appendChild(terbaru); startfeed = 1; } function removerscript() { var elemen = document.getElementById("MASLABEL"); var parent = elemen.parentNode; parent.removeChild(elemen); } onload=function() { navigasifeed(0); } //]]> </script>

Keterangan :

var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget

var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda

var charac = 100; >> Jumlah karakter atau huruf pada setiap post. 

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 : 

<div id="terbaru"> </div> <div id="mas-navigasifeed"> </div>

Terakhir save dan lihat hasilnya.

Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat.....

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Mengubah Tampilan Sscrollbar Jadi Keren

Pada postingan kali ini, Tugasku4u akan berbagi tutorial bagaimana cara mengubah tampilan scrollbar pada blog. Seperti kita tahu, scrollbar adalah alat penggeser yang digunakan untuk melihat bagian bawah suatu blog atau website. Scrollbar ini akan muncul bila blog/website Anda melebihi kapasitas layar monitor sobat.

Secara standart tampilan scrollbar seperti gambar diatas, namun dengan menambahkan CSS pada template, kita bisa mendapatkan tampilan yang berbeda, namun CSS ini setahu saya hanya bekerja pada browser Google Chrome. Apabila sobat semua menggunakan browser Mozilla Firefox, maka tidak bisa melihat perubahan ketika sobat menambah CSS scrollbar pada template sobat.

Nah, berikut ini adalah panduan singkat bagaimana cara mengubah tampilan scrollbar untuk blog sobat: :

1. Login ke akun blog Anda
2. Pilih menu Template = Edit HTML
3. Cari kode ]]></b:skin>
4. Copy dan pastekan kode di bawah ini tepat di atas kode  ]]></b:skin>  

::-webkit-scrollbar {width: 13px; background: #CCCCCC; -moz-border-radius: 10px; border-radius: 10px;} ::-webkit-scrollbar-thumb {background-color: #252525; -moz-border-radius: 10px; border-radius: 10px;}

Ket :

Ganti angka 13 adalah  ukuran scroll yang Anda inginkan.
Ganti tulisan #CCCCCC dengan warna background scrollbar kesukaan Anda.
Ganti tulisan #252525 dengan warna scroll yang Anda inginkan.

5. Selesai, lihat blog Anda !!

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Memasang Fans Page Facebook Di Blog

1. Login ke akun blog Anda

2. Pilih Tata Letak

3. Kemudian Klik Tambahkan Gadget => Pilih HTML/javascript.

4. Copy Kode di bawah ini dan pastekan di HTML/javascript tadi. kemudian simpan/save !!!

<style type='text/css'> #kotak-facebook { position:fixed !important; position:absolute; bottom:-1000px; left:50%; margin:0px 0px 130px -182px; width:auto; height:auto; padding:16px; -webkit-box-shadow: 0px 0px 7px #222; -moz-box-shadow: 0px 0px 7px #222; box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif; color:#111; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomright: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px;} #kotak-facebook a.close { position:absolute; top:-10px; right:-10px; background:#333; font:bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#fff; border:2px solid #fff; -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; cursor:pointer; } </style> <script src='http://tugasku4u.googlecode.com/files/tombol-close-menu.js'/></script> <div id='kotak-facebook'> <font size="3"><b>Bantu Like Dong Sobat... ^_^</b></font size> <br/> <div class="fb-like-box" data-href="http://www.facebook.com/ar.hukoem" data-width="292" data-height="250" data-show-faces="true" data-stream="false" data-header="false"> </div> <a class='close' href='#'>×</a></div>

Keterangan:

#FFFFFF = ganti dengan warna background yang Anda sukai

Bantu Like Dong Sobat... ^_^ = ganti dengan kata-kata yang Anda sukai

http://www.facebook.com/ar.hukoem = ganti dengan URL Fanspage sobat.

5. Simpan, kemudian pilih Template, Edit Template

6. Cari kode <body> Setelah dapat, copy dan letakkan kode di bawah ini tepat di bawah kode <body>

<div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Keterangan:

Kode di atas ditambah jika Anda belum memasang Fanspage pada sidebar blog Anda.

Jika ada yang kurang dimengerti, silahkan berkomentar di blog ini....

8. Simpan template Anda, Selesai...

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Membuat Teks Berjalan Di Header Blog:

1. Log In ke Blogger
2. Pilih Template => Edit Html.
3. Cari kode script </head> Untuk mempermudah mencari silahkan tekan ctrl+F pada keyboard dan silahkan tulis kode di atas.
4. Setelah dapat, letakkan kode di bawah ini tepat di bawah kode tadi !!!

<marquee direction='left' scrollamount='5'><font color='black' size='3'>Tuliskan Deskripsi Yang Akan Anda Tampilkan</font></marquee>template Anda.</span></div>

Keterangan:

left = arah Teks berjalan yaitu dari kiri ke kanan. Anda dapat merubah left menjadi right

5 = kecepatan Teks berjalan, semakin tinggi angkanya maka akan semakin cepat pula mode action marquenya

black =arna font.
3 = ukuran font (size)

jika dalam keterangan diatas masih ada yang kurang jelas, silahkan berkomentar di kotak komentar di bawah.

5. Selesai, simpan

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Memasang Tombol Kembali Ke Atas Dengan Mudah Di Blog

1. Login ke blog kamu.
2. Pilih Tata Letak
3. Tambahkan Gadget
4. HTML/JavaScript => Copy kode di bawah ini.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>

3. Simpan dan lihatlah hasilnya.

Semoga postingan Tutorial Tugasku-4u ini bisa bermanfaat bagi sobat semua...

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Menampilkan Kode HTML di postingan blog

Ada seorang teman bertanya begini, bang rohman gimana caranya agar kode HTML bisa tampil di posting-an blog? Nah dari situ muncul ide untuk membuat posting-an ini, barangkali ada diantara kawan-kawan semua yang juga mempunyai pertanyaan seperti itu? jawabannya mungkin begini. Agar kode-kode HTML dapat muncul pada posting-an blog kita, kita hanya hanya butuh kolom bawah ini :

Caranya mudah..
Kamu hanya butuh tambahan bantuan HTML saja..
Copy Code dibawah ini ke HTML bukan COMPOSE, lalu di lanjutkan dengan HTML POST KAMU setelah itu coba kamu balik ke Compose ...
taraaaaaaaaaa . . . . .

<br/><br/> <p align="left"> <textarea name="code" rows="6" cols="50">HTML KAMU DI SINI INGAT DILANJUTKAN DI HTML BUKAN DI COMPOSE
gimana sukseskan???
 Sekian dulu yaa tips dari saya . . hehehe
Terima Kasih Telah Berkunjung !!

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Membuat Kotak Spoiler pada postingan Blog dengan Buka Tutup

Sebenarnya saya sudah lama mau share tentang cara membuat spoiler buka tutup pada blog, tapi kenapa akhirnya saya kelupaan,nah mumpung sekarang saya sudah ingat lagi, jadi langsung saja saya tulis tutorial ini.

Spoiler ini bisa di gunakan jika artikel sobat cukup panjang dan bermanfaat untuk menyembunyikan gambar, script,tulisan atau lain-lain sehingga membuat halaman blog sobat menjadi sedikit lebih ringan loadingnya, kenapa lebih ringan? karena postingan sobat yang panjang lebar bisa di sembunyikan dan tidak terbuka semua secara langsung, sebagai contoh silahkan sobat klik tulisan ''BUKA'' pada spoiler di bawah ini :

Batuk Gan . . .

1. Pertama pilih tempat yang akan di pasang spoiler ini,baik di postingan atau di sidebar.
2. Copy script di bawah ini,
3. Kalau sobat ingin pasang di postingan,maka sobat taruh di bagian HTML bukan COMPOSE

 <div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: center;"> <input value="Buka" style="margin-top: 5px; width: 100px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div> <div style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> GANTI DENGAN TULISAN ATAU SCRIPT SOBAT DISINI </div> </div> </div> <br> <br> <br>

• jika sudah lihat hasilnya ,maka tombol buka tutup ini siap untuk di gunakan..

Bagaimana sobat semuanya,,apakah tertarik dengan tutorial ini,jika ia silahkan di coba dulu,semoga berhasil,dan..

SEMOGA BERMANFAAT

Terimakasih Telah Berkunjung !!

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Memasang Slideshow Artikel Terbaru Di Blog

1.Login ke akun blog Anda
2. Pilih Tata Letak
3. Kemudian Klik Tambahkan Gadget
4. Pilih HTML/javascript
5. Copy Kode di bawah ini dan pastekan di HTML/javascript di bawah ini :

<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;border:0;padding:2px 3px 3px 2px;background:transparant}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #ccc; margin:0;height:82px;padding:5px; list-style:none;-moz-border-radius: 10px; border-radius: 5px}
#rp_plus_img li:hover{background-color: #EFFBEF;}
#rp_plus_img a{color:#d90000;font-weight:bold}
#rp_plus_img .news-title{display:block;font-weight:400 !important;margin-bottom:3px;font-size:11px;}
#rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #ccc;width:65px; height:65px;-moz-border-radius: 10px; border-radius: 5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tugasku4u.googlecode.com/files/Slideshow-artikel-terbaru-New-2013.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 40;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>

Keterangan :
#EFFBEF; Warna saat disorot kursor
#d90000; Warna Judul Postingan
var numposts = 20; Jumlah postingan yang akan di tampilkan
var numchars = 40; Jumlah character/huruf yang akan di tampilkan

6. Simpan/save !!! Selesai... Untuk yang belum terlalu mengerti atau ada yang ingin ditanyakan silahkan komentar saja diblog ini.

Semoga postingan Tutorial ini bisa bermanfaat bagi teman-teman blogger semua...

Terima kasih telah berkunjung !!

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Membuat Gambar SlideShow di Blog / Website

Untuk beberapa kategori blog atau website, pemakaian gambar slide show pada blog / website sangat diperlukan, disamping untuk mempercantik penampilan blog / website itu sendiri, ada beberapa alasan kenapa gambar slide show sangat diperlukan dalam tampilan blog / website.

Untuk blog / kategory Movie misalnya, hal ini diperlukan, agar penyampaian isi konten dalam blog / website dapat tersampaikan kepada para pengunjung blog / web tersebut, begitu juga dengan blog / website dari sebuah perusahaan, penggunaan gambar slide show banyak diaplikasikan. Lalu bagaimana cara membuat atau memasang gambar slide show di blog atau website? ada banyak cara diantaranya dengan menggunakan gambar dengan format Flash, bisa juga dengan menggunakan script / kode HTML / Javascript tertentu.

Kini HTML 5 telah mendukung penggunaan gambar slide show dengan menggunakan kode script tanpa harus menggunakan gambar dengan format file flash. Nah untuk kali ini saya akan berbagi panduan cara membuat gambar slide show dengan kode html / javascript pada blogger.

Langkah-langkahnya sebagai berikut :

1. Siapkan beberapa gambar dengan ukuran tertentu sesuai dengan kebutuhan anda. 
2. Upload gambar-gambar tersebut di media penyimpanan online (anda dapat menyimpan gambar dipicasaweb.google.com). 
3. Catat url link dari masing-masing gambar yang sudah anda upload tersebut. 
4. Masuk / Login ke Blog anda. (Blogger) 
5. Pilih "Template" >> Klik "Edit HTML" >> beri tanda centang pada "Expand Template Widget". 
6. Untuk keamanan jika terjadi kesalahan sebaiknya anda "COPY" terlebih dahulu script HTML anda dan "PASTE" kan ke dalam NOTEPAD untuk backup. 
7. Cari kode </head> pada bidang HTML template blog anda (gunakan tombol "Ctrl+F" untuk memudahkan pencarian) 
8. Masukkan kode script berikut tepat diatas kode </head> 

Kode Script-1 :

<br />
<br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><br />
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('
<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container">
<h3>
</h3></div></li>
');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
        function () {
                clearInterval(timer);
        },
        function () {
                timer = setInterval('gallery()',speed);
        }
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
                //Display the content
                $('#slideshow-caption h3').html(title);
                $('#slideshow-caption p').html(desc);
                $('#slideshow-caption').animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script><br />
<style type="text/css">
ul.slideshow {
list-style:none;
width:500px;        // ukuran lebar gambar
height:200px;       // ukuran tinggi gambar
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:500px;
height:200px;
border:none;
}
#slideshow-caption {
width:500px;
height:60px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style><br />
<br /> 

Simpan Template" blog anda.


1. Sekarang beralih ke menu "Tata Letak" 
2. >> Klik "Tata Letak" >> Klik "Tambahkan Widget" >> pilih "HTML / JAVASCRIPT". 
3. Masukkan kode script berikut kedalam bidang widget "HTML / Javascript" tersebut. 

Kode script -2

<br />
<br />
<ul class="slideshow"><li><a href="http://url link tujuan"><img src="http://Url gambar-1" title="Judul Slideshow 1" alt="Masukan Deskripsi Gambar-1 Slideshow Disini" /></a></li>
<li><a href="http://url link tujuan"><img src="http://Url gambar-2" title="Judul Slideshow 2" alt="Masukan Deskripsi Gambar-2 Slideshow Disini" /></a></li>
<li><a href="http://url link tujuan"><img src="http://Url gambar-3" title="Judul Slideshow 3" alt="Masukan Deskripsi Gambar-3 Slideshow Disini" /></a></li>
<li><a href="http://url link tujuan"><img src="http://Url gambar-4" title="Judul Slideshow 4" alt="Masukan Deskripsi Gambar-4 Slideshow Disini" /></a></li>
</ul><br />
<br />


Keterangan :

- Untuk kode script-1 silahkan atur size / ukuran gambar sesuai dengan ukuran gambar yang sudah anda upload tadi.
- Untuk kode script-2 silahkan atur Url link gambar, judul, deskripsi kamu dan link tujuan kamu ( sesuai dengan url masing-masing gambar anda yang sudah anda simpan di media penyimpanan online tadi).


Demikian tutorial cara membuat gambar slideshow pada blog, semoga bermanfaat.

Bagikan Ke :

Facebook Google+ Twitter

Read More

Memasang Tombol Share di Blog

Share Button atau Tombol Berbagi sudah merupakan hal yang harus di punyai bagi setiap blog karena dapat meningkatkan popularitas artikel yang di-share kan. Dan juga tombol share salah satu Teknik SEO Onpage. Backlink yang diberikan pun sangatlah berkualitas, itu bergantung dari situs mana yang akan artikel yang anda miliki untuk di submitkan. Namun banyak sekali Social Bookmark dan Social Profile yang memberikan backlink dofollow.

Pada kesempatan ini saya akan memberikan sedikit Tutorial Memasang Tombol Share di Blog. Tombol share ini terdiri dari Social Bookmark dan Social Profile yang sudah terkenal, yaitu : Facebook, Twitter, Google+, Digg, Technorati, Reddit dan LintasME. Tombol share ini sangatlah sederhana, tidak memerlukan javascript yang memberatkan atau mendaftar ke penyedia Tombol Share seperti Add This/Share This, dll. Anda cukup dengan mengcopy kode dibawah ini dan meletakkannya di template blog anda.Tombol share berikut ini adalah tombol share yang sedang saya gunakan saat ini.

Nah, berikut Tutorial Memasang Tombol Share di Blog :

1.Buka Dasbor > Template > Edit HTML

2.Tekan Ctrl + F, dan cari kode ]]></b:skin> serta Copy-Pastekan kodeCSS dibawah ini tepat diatasnya

/* SHARE BUTTON */#share-just4rt{font-size:13px;margin:10px 0px 10px;padding:8px 5px;}#share-just4rt p{float:left;display:block;padding:4px 0px 5px 0px;margin:5px 3px 0;}#share-just4rt a{position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:5px 5px;display:block;color:#fafafa;padding:5px 8px;margin:2px 3px 3px;border:2px solid #fff;}#share-just4rt a:hover{top:1px;left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1)}

3.Cari kode <data:post.body/>, Jika ada 2 pilih yang kedua dan Copy-Pastekan kode HTML dibawah serta letakkan dibawah kode <data:post.body/>

<div id='share-just4rt'><p><b>Bagikan ke : </b></p><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank' title='Bagikan ke Facebook'>Facebook</a><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#c0361a;' target='_blank' title='Bagikan ke Google+'>Google+</a><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=Just4rtBlog&amp;lang=id&quot;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Bagikan ke Twitter'>Twitter</a><a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#111111;' target='_blank' title='Bagikan ke Digg'>Digg</a><a expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' style='background:#67b500;' target='_blank' title='Bagikan ke Technorati'>Technorati</a><a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#4E7DA9;' target='_blank' title='Bagikan ke Reddit'>Reddit</a><script>//<![CDATA[var uri = window.location.href;var ttle = document.title;document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' target='_blank' rel='nofollow' style='background:#FF9900;' title='Bagikan ke LintasME'>Lintaskan</a>");//]]></script><div class='clear'/></div>

4.Lalu klik 'Simpan'

Sekarang blog anda sudah terdapat tombol share Facebook, Twitter, Google+, Digg, Technorati, Reddit dan LintasME. Demikianlah  Memasang Tombol Share di Blog dari saya. Semoga Bermanfaat.

Terimakasih Telah Bekunjung !

Bagikan Ke :

Facebook Google+ Twitter

Read More

Membuat Kotak Komentar Facebook Di Blogger

Mungkin kamu pernah menemui blog yang kotak komentarnya pakai facebook dan blogger. Nah, sekarang kita akan belajar membuat kotak komentar facebook dan blogger jadi satu dalam bentuk tab. Tab komentar facebook berdampingan dengan kotak komentar dari bawaan blog, yaitu blogspot atau blogger.com

Dulu, kita telah belajar bersama untuk membuat kotak komentar blog hanya dengan memakai kotak komentar dari facebook. Salah satu manfaat memakai kotak komentar facebook adalah percakapan tentang blog tidak hanya sebatas di blog tapi bisa juga di bawa ke laman facebook, sehingga semakin mudah blog kita menyebar di facebook.

Dengan membuat pilihan kotak komentar, akan bisa lebih memudahkan pengunjung blog untuk memberikan tanggapan terhadap postingan blog. Karena tidak semua orang punya akun blogger ataupun blog. Tetapi hampir semua orang punya akun facebook, dengan demikian pembaca akan lebih mudah meninggalkan komentar.

Cara Membuat Komentar Facebook dan Blogger

1. Login ke akun blogger.com

2. Pilih Template kemudian Edit HTML

3. Tekan Ctrl F dan cari kode ]]></b:skin>

4. Taruh kode berikut di atas ]]></b:skin>

.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px;cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}

5. Kemudian cari kode </head>

6. Taruh kode berikut di atas kode di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDfacebook' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

7. Ganti IDfacebook dengan ID sendiri (facebook.com/IDfacebook)

8. Kemudian cari kode <div class='comments' id='comments'>

9. Kamu akan menemukan 2 kode yang sama. Letakkan kode di bawah ini tepat di bawah 2 kode tersebut

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'><img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div><div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

10. 5 adalah banyaknya komentar yang ditampilkan dan 450 adalah lebar kotak komentar facebook.

11. Simpan Template jika sudah selesai.

Kabar terbaru dari blogspot adalah, sekarang blogger bisa mengaktifkan atau mengganti komentar bawaan dengan kotak komentar Google+. Semakin banyak pilihan kotak komentar yang bisa dipakai, karena sebuah blog sejatinya adalah komunikasi dua arah, bukan hanya konten tetapi juga percakapan (komentar).

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Menghapus atau menghilangkan Langganan Entri Atom pada Blog

Pada Template blogger yang letaknya paling bawah sering kita jumpai link dengan tulisan “Langganan Entri : Atom” dan “Diberdayakan oleh : Blogger” Tulisan tersebut sebenarnya bisa dihilangkan/disembunyikan kalau tidak berkenan untuk menampilkannya. Apabila kita memakai blogger template, footer ini secara default akan memuat atribut Blogger sehingga tampil tulisan tersebut akan ditampilkan diblog kita. Itu semua karena template memang sudah di desain seperti itu. untuk menghilangkan ataupun menyembunyikan tulisan 'Diberdayakan oleh blogger' dibagian footer tempelate dapat dilakukan langkah-langkah sebagai berikut :

1. Sign in Ke Blogger .
2. Klik Opsi lainnya.
3. Klik Tempelate
4. Klik Edit HTML.
5. Cari Kode ]]></b:skin>   (biar lebih gampang gunakan tombol CTRL+F.)
6. Kemudian Copy dan Paste kode dibawah ini dan letakkan Diatasnya.
7. Klik Simpan
Kode HTML untuk menghilangkan tulisan Langganan Entri : Atom

.feed-links{
display:none;
}


Kode HTML untuk menghilangkan tulisan Diberdayakan Oleh Blogger klik DISINI

Demikian postingan kali ini dan kalau berkenan silahkan dicoba, mungkin dengan menyembunyikan atribut blogger sehingga bisa meminimalisir pengunjung yang iseng terhadap blognya kawan.


Selamat mencoba

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara Mengatur Ukuran Header, Halaman Posting dan Sidebar

Cara Mengatur Ukuran Header, Halaman Posting dan Sidebar - Jika kita belum bisa membuat HTML blog, kadang mencari template yang kita inginkan sangatlah sulit, baik dari tampilan header, sidebar, Halaman Posting artikel, maupun footer.  Mungkin juga kita ingin memiliki template blog yang tidak terlalu lebar,  namun tak kunjung ditemukan. Nah, Jika sobat ingin mengatur ukuran halaman blog sobat, baik mengecilkan ataupun melebarkannya, caranya tidaklah terlalu sulit. Sobat tinggal ikuti langkah-langkahnya dibawah ini : 

1. Login ke Blogger sobat.

2.Pilih Menu Rancangan-Edit HTML-Centang Expand Widget template

3. Cari kode yang mau diganti dengan cara menekan Ctrl+F 

4. Ubah ukuran Header dengan mencari kode berikut :

#header-wrapper{width:850px;margin:0 auto 0;height:60px;padding:34px 0px 34px 0px;overflow:hidden;}

Ukuran 850px adalah lebar header dan 60px adalah panjang headernya yang bisa sobat ganti sesuai dengan keinginan sobat

5.  Ubah ukuran lebar halaman dengan mencari kode berikut :

#outer-wrapper{width:850px;margin:10px auto 0px;padding:0;text-align:$startSide;font:$bodyfont;background:url(……..)

Ubah ukuran 850px harus sesuai dengan lebar Header yang kita buat.

6.  Ubah ukuran Halaman Posting artikel dengan mencari kode seperti ini :

#main-wrapper{width:470px;padding-top:10px;padding-left:0px;padding-right:0px;float:left;word-wrap:break-word;/* fix for long text breaking sidebar float in IE */

Ubah Ukuran 470px dengan lebar halaman postingan blog sobat

7.  Langkah selanjutnya adalah mengubah Ukuran Sidebar blog dengan cara mencari kode berikut :

#lsidebar-wrapper{width:160px;float:left;padding-left:10px;margin-top:10px;margin-left:0px;margin-right:10px;word-wrap:break-word;

Ubah Ukuran  160px dengan ukuran sidebarnya

Sama seperti langkah diatas, ubah juga ukuran sidebar sesuai keperluan sobat dan jika pada blog anda terdapat 2 sidebar, maka bagi ukuran sidebar jadi dua. Misalkan ukuran sidebar yang sobat buat adalah 300px, maka anda bisa membagi sama persis 150px-150px atau bisa juga berbeda.

Jika anda mengubah ukuran blog sobat, sedangkan sobat sudah memposting gambar yang ukurannya lebih besar dari Main-Wrapper (Halaman Posting) maka sobat juga harus mengecilkan ukuran gambar tersebut agar terlihat lebih menarik dan tidak melewati Halaman posting sobat.

Keterangan :

#header-wrapper     : Lebar Header Blog

#outer-wrapper        : Lebar Halaman Blog

#main-wrapper        :  Lebar Tempat posting

#sidebar wrapper    :  Lebar Sidebar

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara menghilangkan tulisan Diberdayakan oleh Bloger pada blogspot

Cara menghilangkan tulisan diberdayakan oleh blogger pada blogspot  sebenarnya sangatl begitu mudah, yuupzz.. oke langsung aja caranya :

1. kamu Login ke bloger yang kamu punya.

2. Trus ke Template, Klik Edit HTML

3. Setelah itu centang "Expand Template Widget"

4. Cari kode ]]></b:skin, atau tekan Ctrl+f untuk memudahkan pencarian

5. Copy kode dibawah ini dan letakkan tepat diatas  kode ]]></b:skin :

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

6. Klik Simpan Template

Nah sekarang coba kamu liat blognya kamu.. Tulisan "Diberdayakan oleh blogger" apakah sudah hilang.
Terimakasih sudah berkunjung.. :D

Bagikan Ke :

Facebook Google+ Twitter

Read More

Cara upload gambar atau foto di Bloger

1. Masuk ke dasboard blogger 

2. Buatlah sebuah posting (Entri baru)
3. Jika sudah pada form editor klik "Compose"

4. Klik ikon kecil kotak (lihat gambar dibawah ini)

5. Dan akan muncul jendela baru Klik tombol "Pilih File" dan silahkan pilih gambar atau foto dari komputer yang akan diupload, gambar bisa diupload secara bersamaan sekaligus. tunggu sampai gambar atau foto muncul seperti dibawah ini.

6. Jika sudah manteb dengan gambar yang mau diupload klik "Add selected" 
Seperti itulah kurang lebihnya upload gambar di blogger cukup mudah bukan? kamu bisa menambahkan gambar atau foto kamu yang ganteng dan cantik lebih banyak lagi.

Mengatur posisi dan besar kecil gambar :
Klik pada gambar yang telah terupload dan akan muncul sebuah kotak kecil untuk mengatur ukuran dan posisi gambar pada posting.
Lihat gambar dibawah ini :

pada bagian yang saya tandai dengan kotak merah itu untuk mengatur besar/kecil juga posisi gambar.

Jika ingin mengambil Kode gambar atau URL gambar, cara ini digunakan bila ingin menampilkan gambar  di blog lain atau disedebar, klik pada tab Edit HTML maka akan terlihat kode dan URL dari gambar tersebut

lihat  HTML di atas :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrnIXbnpFHII4VY-4O0x3OFGIxEQrDzWipK_nVX7kZhhBB8gkgDBzBS6-KJSng1JrnVBmTdIxZYr-g7jNDdEu1uZDmJreef4kSGQrsbcLgUHqR02i-W1Hrqmxcps1uVS6EqHtPgGRblq1/s1600/upload+gambar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrnIXbnpFHII4VY-4O0x3OFGIxEQrDzWipK_nVX7kZhhBB8gkgDBzBS6-KJSng1JrnVBmTdIxZYr-g7jNDdEu1uZDmJreef4kSGQrsbcLgUHqR02i-W1Hrqmxcps1uVS6EqHtPgGRblq1/s1600/upload+gambar.png" /></a>

Kode URL gambar saja :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrnIXbnpFHII4VY-4O0x3OFGIxEQrDzWipK_nVX7kZhhBB8gkgDBzBS6-KJSng1JrnVBmTdIxZYr-g7jNDdEu1uZDmJreef4kSGQrsbcLgUHqR02i-W1Hrqmxcps1uVS6EqHtPgGRblq1/s1600/upload+gambar.png

Keterangan :

• Upload : Upload foto atau gambar dari drive komputer anda sendiri
• From this blog : Upload gambar atau foto dari blog andasendiri yang pernah anda upload sebelumnya, jadi tidak perlu mengupload dari awal.
• From Picasa Web Albums : upload gambar atau foto dari situs Album Picasa
• From a URL : Upload gambar dari situs lain, jadi kamu tinggal menyantumkan URL gambar yang dimaksud misalnya kamu mengupload gambar dari photobucket.com
• Semua gambar atau foto yang kamu upload diblogger dapat kamu lihat di Album Web Picasa, karena Album picasa merupakan salah satu produk google, kamu tinggal login dengan akun google kamu, disitu kamu dapat mengedit gambar atau menghapus gambar yang pernah diupload.

Seperti itulah kurang lebihnya mengenai cara  upload gambar di blogspot

Bagikan Ke :

Facebook Google+ Twitter

Read More