Terkait Tutorial Blog, Posting kali ini yaitu Cara membuat Menu Tab View keren dengan Efek jQuery Tanpa Edit HTML di Blog akan sama sama kita bahas. saya Menemukan Menu Tab View yang caem ini dari infodariom beberapa waktu lalu saat Blogwalking, dan Tertarik untuk memposting nya karena memiliki Beberapa Kelebihan Tersendiri, dan keunggulan dari Menu Tab View Ini diantaranya :
» Tampilanya akan Mengikuti Gaya dari Template Kita, yaitu Bentuk dan Warnanya, jadi jika tidak di kostumasi terkait warna dan bentuknya pun sudah bisa sesuai dan serasi dengan Blog kita.
» Mempunyai Efek jQuery, atau efek smooth saat kita mengalihkan Menu Tab, yang tentu menambah nilai keindahan untuk Blog kita.
» Cara Instalasi atau Pemasanganya yang sangat Mudah karena kita mengaturnya Hanya lewat Tata Letak, yang tidak Perlu Ribet Menyisipkan script ke dalam Satu Widget HTML/JavaScript.
» Tidak Memerlukan embel embel atau tambahan CSS atau script untuk dimasukkan di Edit HTML.
Cara Mudah Membuat Tombol Follow Twitter disertai Jumlah followers | Twitter follow Button.
1. Masuk Blogger » Tata Letak » Tambah Gadget : HTML/JavaScript, isi dengan kode berikut :
Cara mudah membuat dan memasang Widget Update Status dan follow Twitter di Blog | kali ini masih terkait widget untuk Blog, saya sering posting seputar widget karena pembahasanya tak perlu membutuhkan waktu panjang, mengingat durasi koneksi yang saya punyai terbilang pendek. .
Langsung saja berikut Langkahnya :
1. Masuk Blogger » Tata Letak » Tambah Gadget : HTML/JavaScript, isi dengan kode berikut : .
<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4VbZf0IZfq0XxJHJjZc7RhaBf45S8Os7uD7LrM853UUuhxqTs2U2_t7IarhDFU3L6r65lBZ2wc8EuqTG8P6bzeO1c8Or89xQ6jzynSNM9ubkVSGduKWI3usSkafVp6gvImXAgz2tt1Ck/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
(new TWTR.Widget({version:2,type:"profile",rpp:10,interval:3e3,width:285,height:118,theme:{shell:{background:"transparent",color:"#000000"},tweets:{background:"transparent",color:"#000000",links:"#B45F04"}},features:{scrollbar:true,loop:true,live:true,hashtags:true,timestamp:true,avatars:true,behavior:"default"}})).render().setUser("Nur_qholis").start()
</script>
Note : Kode yang berwarna merah ganti dengan Username Twitter Anda.
Cara membuat widget Spiderman melayang keren di Blog dengan pesan cihuy | banyak cara untuk membuat pengunjung merasa tertarik dengan blog kita. salah satunya dengan menghadirkan widget keren seperti ini, yang tentunya akan membuat pengunjung semakin betah nongkrong di blog kita, tapi juga perlu diperhatikan blog yang kebanyakan widget juga bisa mendapat efek negatif, sebut saja jika widget yang kita pasang diblog terlalu banyak, yang disitu terdapat banyak script dan link link tertentu yang harus dimuat, tentu akan membuat loading blog kita semakin lama, lemot gitoe!!
jadi terserah anda mau mencoba memasang widget ini atau tidak, dan bagi anda yang tertarik berikut selengkapnya, Cara membuat widget Respidey melayang di pojok atas Blog.
1. Login ke Akun Blogger sobat masuk Rancangan/edit HTML centang expand template widget
2. Kemudain cari (ctrl + f) kode : </body>
3. kemudian copy dan paste kode berikut di atas kode </body>
Pada url to
comment on isikan dengan alamat blog anda, contoh : http://javakahuripan.blogspot.com/, Pada number of post tentukan berapa jumlah komentar yang ingin
sahabat tampilkan. pada width atur angkanya sesuai dengan lebar halaman posting
dari blog anda. pada color scheme pilih warna yang anda inginkan.
4. Setelah itu klik Get Code» pilih atau ambil script yang bagian bawah.
Lajut ke cara
memasang Script tersebut ke blog anda.
Login ke Blogger » untuk
mengantisipasi kesalahan silahkan unduh template lengkap (cadangkanTemplate)
jika
sudah » masuk Rancangan/Edit HTML (Centang Expand Template widget) »
kemudian cari (ctrl +f) script seperti ini : <b:includable
id='status-message'>,
perhatikan diataskode tersebut terdapat kode</b:includable>
copy script facebook comments
anda lalu pastekan di atas code </b:includable>.
Pratinjau dulu, jika
tidak ada masalah silahkan simpan template anda dan lihat hasilnya.
Akhir kata semoga Artikel dan uraian diatas bermanfaat, terima kasih.
Jika anda sobat blogger bosan dengan tampilan recent post yang itu itu saja, tidak salahnya mencoba tampila recent post keren berikut ini. recent post ini dilengkapi fitur Thumbnail dan Next-Previous page, saya mendapatkan widget ini dari maskolis.com. bagi anda yang tertarik untuk mencoba menggunakan recent post keren seperti gambar dibawah, berikut ini Langkah dan cara membuatnya.
1. Pertama anda harus Login ke akun Blogger » Masuk ke template » Edit HTML, kemudian centang expand widget templates
2. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
3. Setelah semua langkah diatas anda lakukan, cari (ctrl + f) kode ]]></b:skin>, letakkan kode berikut ini diatas kode tadi :
Perhatikan kode warna merah diatas, itu adalah lebar dan tinggi thumbnail image.
4. Selanjutnya masih pada posisi Edit HTML, cari kode </head> masukkan kode berikut ini diatas kode</head> :
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://javakahuripan.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/AVvXsEgDM1FRldBU0aDwyHubklSH0gYBaI6STvmGxDv2LhmE5lpQHItU_DFJ-08UNstWTUBaPmRq2tO2l_wy1c0QBG_-6lbkBusJT4tdU1vLb4T4YMTmjg2sCPx4QJ69s55yQNV04A4-i-Q-3qA/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 akan ditampilkan.
» pada widget
var urlblog = "http://javakahuripan.blogspot.com/"; = ganti dengan URL blog Anda.
» var charac = 100; = Jumlah karakter atau huruf pada setiap post.
5. 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 :
Cara membuat Follow Button facebook di blog tak begitu sulit, hanya di perlukan sedikit kemauan. langsung saja untuk Membuat Follow Facebook Button dengan Mudah seperti yang ada di bawah berikut caranya:
Pertama anda wajib follow akun diatas ;-), kemudian anda login dulu ke akun facebook anda, jika belum login
Isikan Nama Pengguna facebook anda pada form pengisian.
4. Pada gambar di atas ganti zuck dengan nama pengguna akun facebook anda, nama pengguna bisa anda lihat dengan mengeklik profil anda dan lihat pada address bar, ambil yang saya beri kotak orange dan letakkan pada menu pengisian Profil URL
5. Setelah semua anda atur, klik Get code untuk mendapatkan kode atau scriptnya, ambil yang bagian bawah dan pastekan di blog sobat, bisa di Template atau add Gadget - HTML/JavaScript.
Dunia Blog memang tidak bisa di pisahkan dengan yang namanya kode kode tertentu, begitu juga tentang tampilan atau desain yang dasar pokoknya berupa warna warna tertentu,jelas merepotkan jika kita menghafalkanya semua, untuk itu tool ini memudahkan kita untuk menemukan kode html suatu warna / color. Tanpa panjang kata langsung saja berikut cara memasang kode warna HTML di Blog / postingan sobat,
Parse HTML memang biasa di lakukan bagi seorang Blogger, Apalagi bagi Blogger yang tiap harinya mempublish artikel tentang Tutorial Blog , maka untuk preview nya sering meletakan kode / script agar muncul di suatu postingan, . Parse HTML ini maksudnya supaya kode atau script yang kita tulis
dalam format HTML tersebut bisa muncul atau terlihat pada postingan, jadi harus
diconvert atau di-parse dulu maksudnya. Nah seperti apa cara membuat widget
parse HML ini ? Mudah kok, Berikut saya share cara membuat widget parse HTML untuk anda.
Kemudian paste di dalam postingan sobat (jangan lupa
pilih opsi edit HTML), sehingga hasilnya akan terlihat seperti ini :
(Letakkan kode / script sobat pada kolom di atas lalu klik Parse Script untuk memparsenya.)
Berikut ini adalah kode-kode HTML dasar
yang akan dirubah kedalam bentuk sederhananya secara otomatis supaya
bisa di masukkan kedalam postingan, kotak komentar, dll seperti yang
sudah dijelaskan sebelumnya.