Lukman Info: Februari 2013
Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

LiveZilla Live Help

Kamis, 28 Februari 2013

Cara Membuat Cursor Blog Selalu Diikuti Oleh Text

Tutorial Belajar Blog | Tips Blog | Desain BlogCara Membuat Cursor Blog Selalu Diikuti Oleh Text,
Mungkin Tutorial ini sudah sangat lama tetapi tidak apa anggap saja tutorial baru karena untuk seorang blogger profesional sudah paham dengan tutorial ini.

Cara Menambahkan Cursor Selalu di ikuti oleh teks tidak susah Banyak cara yang bisa sobat blogger lakukan untuk memperindah blog atau mempercantik blog sobat. Salah satu cara adalah dengan cara menambahkan cursor selalu di ikutin di blog. Cara ini terbukti memberikan kesan dan nuansa yang berbeda  pada blog Jika sobat tertarik untuk menciptakan cursor dengan text sendiri.

Berikut ini langkah-langkah Untuk Membuat nya :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='Tutorial Blog '.split('').reverse().join('');
var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;
// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;
// Alter no variables past here!, unless you are good
//---------------------------------------------------
var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";
if (ie)
window.pageYOffset=0
// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}
if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}
var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}
var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}
}
cursor_text_circle();
</script>
7. Silahkan ganti tulisan berwarna merah dengan tulisan pilihan anda

8. Klik Simpan
9. Selesai

Selamat mencoba, semoga bermanfaat, dengan Tutorial Cara Membuat Cursor Blog Selalu Diikuti Oleh Teks.

Posted By: Unknown on Kamis, 28 Februari 2013

Rabu, 27 Februari 2013

Cara Memasang Fans Page Facebook Tersembunyi

BOS TUTORIAL - Cara Memasang Fans Page Facebook Tersembunyi. Blog kesayangan kita ini baru saja memasang Fans Page Facebook secaara tersembunyi. Sepertinya terlihat bagus. Dan tentunya tidak mengganggu space halaman pada blog.

Tidak abdol rasanya apabila Bos Tutorial tidak membaginya kepada kawan-kawan semua. Pada kesempatan ini, saya mencoba berbagi kepada anda kawan.

Cara Memasang Fans Page Facebook Tersembunyi

Cara Memasang Fans Page Facebook Tersembunyi ini tidaklah susah, anda hanya menambah sedit script pada template blog anda. Namun ada syarat yang anda penuhi.

Syaratnya adalah :
1. Anda harus memiliki Akun Facebook (bisa juga minjam) sebaiknya punya sendiri lebih bagus.
2. Anda juga harus punya sebuah Halaman Facebook (Fans Page Facebook)

Apabila anda belum memiliki syarat di atas, abaikan dulu tutorial kali ini. Oh iya, bagaimana cara membuat facebook dan halaman facebook, nanti kita bahas selanjutnya yah.

Apabila anda sudah memiliki syarat-syarat di atas, langsung saja ikuti langkah-langkah bagaimana Cara Memasang Fans Page Facebook Tersembunyi di bawah ini.

Ada 2 Cara Memasang Fans Page Facebook Tersembunyi
Cara Pertama
1. Bukalah akun blog anda kawan
2. Masuk Elemen Template, lalu pilih Edit Widget, slanjutnya Centang : Expand Template Widget
3. Carilah kode </head> lalu copylah kode script di bawah ini tepat persis di atas kode </head> tadi
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
4. Simpan tempalate blog anda.

Catatan :
Apabila template anda sudah menyediakan kode script diatas, abaikan saja. Artinya anda tidak perlu memasukkannya lagi ke dalam template blog anda. Selanjutnya ikuti cara kedua.

Cara kedua
1. Apabila cara pertama sudah beres, maka masuklah ke Elemen Tata Letak, pilih Add Widget / Tanmah Gadget
2. Lalu pilih HTML/Jawascript
3. Selanjutnya copylah kode script di bawah ini ke dalam Widget/Gadget Baru yang anda buat.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4dGdUXs2hyphenhyphenRCau5FdUQs7sRTbNK1fzolLDpQvZid6R5nSQLQ91bavjTrFmNryPpfpe-RhISwL_ZD3aDYTHhKaCuBCxcNqbRLR_rUHdxB5_g-AJOdghxcxJ597nTib36uV1bOmJvWzbSk/s1600/fans-page-facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/BosTutorialBlog&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://bos-tutorial.blogspot.com/2013/02/cara-memasang-fans-page-facebook.html">Get Widget Here</a></span></div></div>
4. Simpat Widget/Gadget Baru yang anda buat tersebut.
5. Lihat hasilnya.

Catatan :
1. Gantilah tulisan https://www.facebook.com/BosTutorialBlog dengan alamat / URL Halaman Facebook Anda.
2. Lihat contoh hasilnya di sebelah kanan blog ini.

Demikian tutorial kali ini mengenai Cara Memasang Fans Page Facebook Tersembunyi, semoga bermanfaat. Salam Blogger. Jangan lupa LIKE juga Halaman Facebook Bos Tutorial yah :

Bila anda belum memiliki Facebook, silahkan baca di bawah ini.
1. Cara Membuat Facebook di Facebook
2. Cara Membuat Halaman Facebook di Facebook

Posted By: Unknown on Rabu, 27 Februari 2013

Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial

BOS TUTORIAL - Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial. Judulnya panjang yah. Tidak apa-apa yah. Biar lebih paham saja. Dan langsung melihat contohnya.

Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial

Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial ini sebenarnya bertujuan untuk mempercantik blog saja. Biar terlihat rapi. Kalau kawan-kawan suka, boleh deh mencobanya.

Inilah Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial
1. Buka akun blogger kawan sendiri
2. Masuk Elemen Tata Letak
3. Pilih Add Widget atau Tambah Gadget
4. Apabila kotak baru muncul lalu pilih HTML/Javascript
5. Copy atau salin kode script di bawah ini
<div id='bp_recent'></div>
<script style='text/javascript' src='http://yourjavascript.com/02415211738/artikel-terkait.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://bos-tutorial.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
6. Simpan Widget / Gadget yang baru anda buat.
7. Lihat hasilnya.

Catatan :
  • Tulisan http://bos-tutorial.blogspot.com silahkan anda ganti dengan alamat URL / Blog anda.
  • Silahkan anda atur sedemikian rupa, mengenai jumlah artikel yang akan dipajang dalam recent post blog anda, sesuai keinginan anda. Blog ini sementara jumlah artikel yang dipajang dalam recent post sebanyak 20
Sebagai dari hasl Cara Membuat Widget Recent Post Dengan Gambar Seperti Bos Tutorial, lihat saja Recen Post pada blog ini. Karena menggunakan widget di atas. Selamat mencoba, salam sukses. Salam.

Posted By: Unknown on

Cara Membuat Related Post Dengan Gambar

BOS TUTORIAL - Cara Membuat Related Post Dengan Gambar. Masih ingat tulisan sebelum postingan ini bukan, yaitu Cara Membuat Related Post Pada Blog. Jangan tanya lagi apa gunanya Related Post atau Artikel Terkait yah (heheheh... canda), soalnya disini sudah dibahas lebih detail. Kita langsung saja ke lokasi (kayak mau kemana aja nih...). Maksudnya langsung membuat tutorialnya, gitu loh....

Cara Membuat Related Post Dengan Gambar

Beginilah Cara Membuat Related Post Dengan Gambar
1. Tentunya anda harus buka akun blogger anda kawan.
2. Masuk Elemen Template - Lalu Klik Edit HTML
3. Carilah kode ]]></b:skin> (gunakan CTRL + F untuk mempermudah pencarian)
4 Apabila sudah ketemu, copylah kode di bawah ini lalu tempatkan persis di atas kode ]]></b:skin> tadi.

/* Related Post Dengan Tooltips Membuat Blog Keren --- */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 100px;
height: 100px;
margin: 0; display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left; position: relative;
width: 108px;
height: 108px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;float: left; background: #00B366;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.related-post:hover .related-post-title {display: block;}

5. Jangan beranjank dulu, masih ada yang harus di cari. Lihat kode selanjutnya di bawah ini, lalu cari kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/> (gunakan CTRL + F untuk mempermudah pencarian)

6. Apabila sudah ketemu dan anda yakin, copy kode di bawah ini dan pastekan tepat di bawah kode <div class='post-footer-line post-footer-line-1'/> atau <div class='post-footer-line post-footer-line-2'/>

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAangMZpl16nVTKeaiogP7X8G_74cLfvy6JZ9I6Dsh236YyJaN63KBX3sQKuJ496JsluZSeBYAHlUNiCt9Fp9QB_ZZBd5xHHXO0V0MgMU-i0_WKEr_l7eRYtxXfR7LcNWypyBcV_GGFH1V/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>
7. Selesai
8. Simpan template blog anda kawan.

Catatan Yang harus anda perhatikan.
  • maxresults=5 adalah jumlah artikel yang anda tapilkan pada Related Post. Silahkan anda tambahi atau kurangi sesuai keingan anda.
  • 100px adalah ukuran gambar, baik tinggi maupun lebarnya. Silahkan anda ganti bila anda ingin memperkecil atau memperbesarnya.
  • Tulisan Related Post silahkan anda ganti dengan sesuka anda, misalnya jadi Artikel Terkait, atau Mungkin Ini Anda suka" dan lain-lain sesuka anda.
  • Bila gagal, coba ulangi lagi perlahan-lahan. Biasanya sih bisa.
Dah cuma segitu, tutorial mengenai Cara Membuat Related Post Dengan Gambar. Silahkan di coba yah. Semoga bermanfaat. Bila anda kendala silahkan bertanya di kolom komentar. Dan Salam Blogger.

Posted By: Unknown on

Cara Membuat Animasi Loading Page Blog dengan jQuery



Tutorial Belajar Blog - Cara Membuat Animasi Loading Page Blog dengan jQuery,Merupakan Tutorial edit blog tidak beda jauh dari tips sebelum nya Cara Membuat Animasi Loading Page di Blog dan  , Untuk membedakan coba sendiri ataupun liat dari gambar yang sudah ada.

Sekilas Tentang  Animasi loading page memberikan tampilan yang penuh dan sesuai, artinya setelah loading page selesai, maka animasi loading juga selesai. Waktu loading page bisa diukur dengan adanya animasi ini, karena animasi ini menggunakan hitungan persen.


Script animasi loading page ini saya dapat dari om Google yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog Anda, langsung saja ikuti tutorial/panduan di bawah.

  1. masuk ke Design > Edit HTML lalu cari kode ]]></b:skin> dan letakan kode berikut ini diatas ]]></b:skin>.
  2. /* ---------------
    jquery animation loading page
    ---------------------------------- */
    .QOverlay {
    background-color: #000000; /* background color loading */
    z-index: 9999;
    }
    .QLoader {
    background-color: #CCCCCC; /* color bar loading */
    height: 10px;
    }
    .QAmt {
    color:#FF530D; /*loading Color number*/
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
    }
  3. kemudian cari kode </head> dan letakan kode berikut ini di atasnya.
  4. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script src='http://tutorialbelajarblogger.googlecode.com/files/loadingpage.js' type='text/javascript'/>
  5. Untuk kode yang diberi warna merah (jQuery), tidak usah dipasang lagi jika sudah terdapat di template Anda (cukup 1 saja).
  6. Selanjutnya cari kode </body> dan letakankode berikut ini di atasnya.
  7. <script>
    QueryLoader.selectorPreload = &quot;body&quot;;
    QueryLoader.init();
    </script>
  8. Save template Anda dan coba buka blog Anda untuk melihat hasilnya.
  9. Bila script tidak berfungsi silakan cek ulang apakah Anda sudah mengukuti langkah di atas dengan benar. Jika Anda sudah mengikuti semua langkah dengan benar namun scriptnya tidak berfungsi juga, berarti script tersebut bentrok dengan script yang lain.

Posted By: Unknown on

Selasa, 26 Februari 2013

Cara Membuat Salam Pembuka Sesuai Waktu Berkunjung

Tutorial Belajar Blog | Tips Blog - Cara Membuat Salam Pembuka Sesuai Waktu Berkunjung ,Berikut ini merupakan Script secara otomatis akan memberikan pesan atau ucapan sapaan selamat datang dengan menyesuaikan settingan waktu yang ada pada perangkat komputer .

Prinsip kerja script ini adalah memberikan pesan berdasarkan waktu, saya contohkan saat Anda membaca postingan ini maka teks pesan yang akan muncul seperti dibawah ini :

Selamat Pagi! Terima Kasih Sudah Berkunjung

-pesan pagi hari (05.00-11.00) "Selamat Pagi! Terima Kasih Sudah Berkunjung"
-pesan siang hari (12.00)  "Selamat Siang ! Terima Kasih telah berkunjung"
-pesan sore hari(13.00-17.00) "Selamat Sore! Terima Kasih Sudah Berkunjung"
-pesan petang hari (18.oo-20.00) "Selamat Petang! Terima Kasih Sudah Berkunjung"
-pesan malam hari (21.00-23.00) "Selamat Malam! Terima Kasih Sudah Berkunjung"
-pesan malam mejelang pagi(00.00-04.00) "Wow, Sudah Larut Malam Anda Masih Sempat Berkunjung, Terima Kasih!"


Silahkan copy kode script dibawah ini


<script>
var Digital=new Date()
var hours=Digital.getHours()
//Silahkan sesuaikan dengan pesan yang Anda inginkan
if (hours>=5&&hours<=11) //pesan pagi hari (05.00-11.00)
document.write('<b>Selamat Pagi! Terima Kasih Sudah Berkunjung</b>')
else if (hours==12) //pesan siang hari (12.00)
document.write('<b>Selamat Siang ! Terima Kasih telah berkunjung</b>')
else if (hours>=13&&hours<=17) //pesan sore hari(13.00-17.00)
document.write('<b>Selamat Sore! Terima Kasih Sudah Berkunjung.</b>')
else if (hours>=18&&hours<=20) //pesan petang hari (18.oo-20.00)
document.write('<b>Selamat Petang! Terima Kasih Sudah Berkunjung</b>')
else if (hours>=21&&hours<=11) //pesan malam hari (21.00-23.00)
document.write('<b>Selamat Malam! Terima Kasih Sudah Berkunjung</b>')
else //pesan malam mejelang pagi(00.00-04.00)
document.write('<b>Wow, Sudah Larut Malam Anda Masih Sempat Berkunjung, Terima Kasih!</b>')
//tutorialbelajarblogger.blogspot.com
</script>

Note : Silahkan sesuaikan teks yang berwarna merah dengan pesan atau sapaan yang Anda inginkan.

Cara pasangnya Login blogger > Tata Letak > Tambah Gadget > Html / Javascript copy kode diatas dan paste didalamnya.
Semoga postingan ini bermanfaat untuk Anda, tunggu script menarik lainnya Tutorial Belajar Blogger

Posted By: Unknown on Selasa, 26 Februari 2013

Cara Membuat Related Post Dengan Scroll

BOS TUTORIAL - Cara Membuat Related Post Dengan Scroll. Masih kelanjutan dari Membuat Related Post Pada Blog. Apa itu related post atau artikel terkait silahkan baca disini.

Kali ini kita akan membicarakan tentang Cara Membuat Related Post Dengan Scroll. Kenapa menggunakan Scroll? Agar bisa menghemat tempat, dengan begitu akan terlihat ramping.

Seperti yang saya paparkan sebelumnya, bahwa Cara Membuat Related Post Dengan Scroll akan menampilkan Label / Kategori sejumlah yang kita inginkan. Dan akan dibagi berdasarkan Label / Katergori. Misalnya dalam postingan anda ada 3 atau lebi kategori, maka Cara Membuat Related Post Dengan Scroll akan menampilkan maksimal 3 kategori. Anda bisa merombaknya sesuai keinginan anda.
Contoh Cara Membuat Related Post Dengan Scroll - Sumber : Kumpulan Adsen Blogspot
Langsung saja yah, Inilah Cara Membuat Related Post Dengan Scroll
1. Seperti biasa, buka akun blogger kawan
2. Masuk ke Elemen Template, piluh Edit HTML
3. Carilah kode <div class='post-footer-line post-footer-line-1'> gunakan CTRL + F untuk mempermudah pencarian
4. Apabila anda menemukan 2 kode tersebut, anda pilih yang pertama.
5. Sudah ketemu belum nih, bila sudah Copy lah kode script dibawah ini.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<Div class='rbbox'>
<Div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<Div id='albri'/>
<Script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</Script>
</Div>
<script type="text/javascript">RelPost();</script>
</Div>
</b:if>
6. Lalu tempatkan (paste) kode tersebut tepat di bawah kode <div class='post-footer-line post-footer-line-1'>.
7. Simpan template blog anda. Lalu lihat hasilnya.
8. Selesai.

Catatan :
  • <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda ( misal : Related post, artikel yang berhubungan dll ) atau anda juga bisa menghapusnya.
  • <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200px menjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
  • maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
Demikianlah postingan mengenai Cara Membuat Related Post Dengan Scroll. Sama seperti yang ada di Kumpulan Adsen Blogspot. Silahkan lihat contoh hasilnya disini.

Tambahan : Pilih salah satu yah Related Post yang anda suka. Jangan gunakan semuanya secara bersamaan, akan mempengaruhi loading blog.

Posted By: Unknown on

Cara Membuat Related Post di Bawah Postingan

BOS TUTORIAL - Cara Membuat Related Post di Bawah Postingan. Melanjutkan tulisan saya mengenai Cara Membuat Related Post Pada Blog, maka postingan ini akan berisikan tentang Cara Membuat Related Post di Bawah Postingan.

Cara Membuat Related Post di Bawah Postingan
Seperti inilah hasilnya (mirip)
Tidak perlu berlama-lama lagi, langsung saja simak di bawah ini. (Sekali lagi saya sebutkan, apabila template blog anda sudah menyajikan Related Post, abaikan saja ini). Sekedar berbagi saja untuk kawan-kawan.

Cara Membuat Related Post di Bawah Postingan
1. Bukalah akun blogger anda dengan tenang dan damai sejahtera.
2. Pilihlah Elemen Template. Lalu Pilit Edit HTML, jangan lupa centang Expand Template Widget <<<== cara edit html lawas.... lewati langkah ini / langsung lakukan langkah no 3 yah... (update)
3. Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian), setelah anda menemukannya, letakkanlah kode javascript di bawah ini (Copy) persis di atas kode </head> tadi (Pastekan)

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisg-xhxbsclBnD9shjwpG82rkRLy6ahJDMIk82zGsQ_OiBljM60krYJ5nAEWtt5pjEM4-Typd9RZChLg1ViDxsSk6zNuyXJqWgXrZer99pzzEyDZ4vqBAa_fBzSVK50rENP2gUxlHs5Ho/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>

4. Aplagi cara no 3 diatas sudah anda lakukan, selanjutnya cari lagi kode berikut : <data:post.body/>, Sudah ketemu belum kode itu, kalau sudah ketemu, letakkan lagi kode di bawah ini (copy) tepat di bawah kode <data:post.body/> (pastekan)

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

5. Setelah selesai, lalu simpan template blog anda.
6. Lihat hasilnya seperti apa.

Catatan :
Kode <data:post.body/> mungkin anda akan temukan banyak, pilih saja satu, tidak apa-apa kok anda coba-coba yang penting anda paham.

Ok, demikian tutorial mengenai Cara Membuat Related Post di Bawah Postingan kali ini. Selamat mencoba. Salam Sukses.

Posted By: Unknown on

Cara Membuat Related Post Pada Blog

BOS TUTORIAL - Cara Membuat Related Post Pada Blog. Artikel Terkait itu bahasa Indonesianya. Namun para blogger lebih familiar dengan sebutan RELATED POST. Blog ini menggunakan bahasa RELATED ARTICLE, kebenaran bawaan dari template yang diberikan oleh mas kolis secara cuma-cuma. Tujuan cuma satu membantu para Pembaca / Pengunjung / Visitor agar bisa lebih gampang mencari postingan /artikel kita yang menyerupai atau satu Kategori / Label dengannya (postingan).

Cara Membuat Related Post Pada Blog

Cara Membuat Related Post Pada Blog
Disamping membantu para pengunjung, membuat Related Post / Related Article / Artikel Terkait / Kamu Harus Menyukai Ini / You Must Like This (ntah apalagi istilahnya... hehehe) juga Mempercantik Blog, sehingga terlihat Elegan/Profesional.

Tutorial ini berlaku bagi kawan-kawan yang menggunakann Related Post di dalam blognya. Apalbila sudah ada, silahkan jangan digubris yah... abaikan saja (baca-baca boleh dong).

Ada beberapa Cara Membuat Related Post Pada Blog
1. Dengan membuat Related Post tanpa gambar
2. Dengan membuat Related Post dengan gambar (thumbail)

Saya jelasin dulu yah satu-satu biar lebih paham.
1. Membuat Related Post tanpa gambar
Membuat Related Post tanpa gambar pada blog biasanya dilakukan di bawah Postingan. Meskipun ada yang ditempatkan di sidebar, namun lebih sering kita temukan di bawah postingan.

Ada banyak cara para blogger membuat related post di dalam blog yang mereka kelola. Antara lain dengan menggunakan Scroll dan tanpa menggunakan Scroll. Semua tergantung selera masing-masing. Pada blog Bos Tutorial ini sementara menggunakan Related Post tanpa Scroll. Terlihat lebih simpel sih. Tanpa menggunakan Scroll biasanya paling banyak artikel terkaitnya 10 artikel (lebih banyak juga tidak apa-apa), dan hanya di kaitkan pada 1 label atau kategori. Apabila Label / Kategori yang anda buat didalam blog anda lebih dari 1 Label/Kategori biasanya yang di kaitkan hanya 1 label / kategori saja. Sedangkan yang menggunakan Scroll bisa lebih dari 1 kategori / label.

2. Membuat Related Post dengan gambar (thumbail)
Penjelasannya hampir sama saja dengan diatas, bedanya ya related post menggunakan Gambar. Kelemahannya adalah apabila dalam postingan kawan-kawan tidak menggunakan Gambar, maka gambarnya tidak muncul.

Membuat Related Post dengan gambar (thumbail) ada 2 cara juga, pertama dengan menyatukan script (kode) related post pada blog kita. Cara kedua adalah dengan memanfaatkan pihak ketiga. Yang paling populer adalah menbuat related post dengan Linkwithin. Linkwithin adalah salah satu penyedia script untuk memasang related post di dalam blog kita. Masih ada lagi situs-situs pihak ketiga yang menyediakan cara ini, tapi Linkwihtin lebih familiar di mata para blogger.

Menggunakan related post ini semua tergantung anda mau pilih yang mana. Yang penting anda paham apa fungsi dan kegunaan related post.

Kelanjutannya simak Cara Membuat Related Post Pada Blog : (Bos Tutorial akan posting satu-persatu, yang sabar yah)
1. Cara Membuat Related Post di bawah Postingan (KLIK DISINI)
2. Cara Membuat Related Post Dengan Scroll (KLIK DISINI)
3. Cara Membuat Related Post Dengan Gambar (KLIK DISINI)
4. Cara Membuat Related Post Dengan Linkwithin.(KLIK DISINI)

Posted By: Unknown on

Kriteria Blog Mendapat PageRank Tinggi

Tutorial Blog | Tips Blog - Kriteria Blog Mendapat PageRank Tinggi , kali Ini tutorial belajar blog ingin berbagi info tentang kriteria blog yang mendapatkan page rank tinggi sebenernya blog ini belum pantas untuk postingkan artikel ini karena pagerank blog ini saja masih nol besar, tetapi tidak apa apa sebab beberapa teman blogger banyak yang setuju dengan kriteria ini.

Berikut Ini kriteria - kriteria Blog Page Rank tinggi:

1.       SEO Friendly Blog
> adalah salah satu cara penting agar blog kita mudah terindex oleh Google dan mendapatkan pagerank. Blog SEO Friendly bisa berasal dari pemilihan template yang SEO Friendly, loading blog yang tidak berat atau penanaman Meta Tag di HTML.

2.       Link Wheel
Link wheel ternyata sangat penting pengaruhnya untuk SEO dan page rank. Berbeda dengan Related Post yang di- generate oleh script, link wheel yang baik di mata SEO adalah link wheel manual yang menghubungkan link post yang satu dengan yang lain. Misalnya adalah post A, B, C, D, dan E memiliki link rujukan ke post F, G, dan H, kemudian post F-G-H memiliki rujukan ke post J. Link Wheel yang seperti ini juga cocok sekali jika Anda sedang mengikuti Kontes SEO, karena Google akan meng- crawl post J sebagai post yang sangat penting atau direkomendasikan sehingga akan memiliki posisi yang bagus di Search Engine.

3.       Backlink Berkualitas
Tidak perlu repot- repot membeli backlink berkualitas dengan harga mahal, cara memperoleh backlink berkualitas yang murah sekaligus legal di mata Search Engine cukup sederhana, yaitu rajin- rajin memberi komentar pada blog yang ber- PR tinggi.

4.       Maksimalkan Meta Tag yang dapat men- support SEO
5.       Berikan penekanan terhadap keyword

Selalu memberi penekanan terhadap keyword atau kata kunci tertentu dengan memberigaris bawah atau cetak tebal ternyata membuat robot Google meng- crawl keyword tersebut lebih cepat karena menganggapnya lebih penting dari pada yang lain. Semakin sering kebiasaan ini dilakukan, maka semakin baik nilai postingan Anda di mata SEO dan berpengaruh terhadap pagerank Anda.

6.       Artikel Unik, Menarik dan Original
7.       Posting secara teratur

Untuk blog baru minimal satu artikel per hari selama sebulan atau maksimal tiga bulan, sedangkan blog lama, minimal setiap dua kali seminggu.
      8. Promosikan Blog,Social Bookmark, Social Network atau melalui Blogwalking.

*Berbagai Sumber dengan beberapa perubahan
nah apa blog kamu sudah termasuk kriteria tersebut??

Posted By: Unknown on

Senin, 25 Februari 2013

Cara Membuat Accordion Menu dengan Efek Transisi Keren

Tutorial Blog | Tips Blog - Membuat Accordion Menu dengan Efek Transisi Keren Masih tentang Trik Blogger, sesuai judul post ini , yaitu Menu Accordion / Menu Vertikal yang ada di header blog demo tutorial belajar blog.

Berikut ini Langkah - Langkahnya :

1. Masuk ke dashboard blogger, Klik rancangan, pilih Edit HTML
2. Cari kode ]]></b:skin> lalu letakkan atau paste kode berikut di atas kode ]]></b:skin> tadi

.navbox {position:relative;float:left;}ul.nav {list-style:none;display:block;width:220px;position:relative;padding:0px 0 0px 0;-webkit-background-size: 50% 100%;-moz-background-size: 50% 100%;}li {margin: 10px 0 0 50px;}ul.nav li a { font-family:Arial,Helvetica,Sans-serif;font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;-webkit-transition:all 0.3s ease-out;-moz-transition: all 0.3s ease-out;background:#ffc000 ;color:#1e1e1e;padding:3px 15px 3px 15px;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;-moz-border-radius-topright:0px;-moz-border-radius-bottomright:0px;width:150px;display:block;text-decoration:none;-webkit-box-shadow:4px 2px 0px #1e1e1e;-moz-box-shadow:4px 2px 0px #1e1e1e;}ul.nav li a:hover {background:#1e1e1e;color:#fff;padding: 3px 15px 3px 30px;}
3. Simpan Template
4. Klik Elemen Laman, Tambah Gadget > HTML/Javascript > lalu masukkan kode berikut:

<div class="navbox">
<ul class="nav">
<li><a href="http://tutorialbelajarblogger.blogspot.com/">Accordion Menu</a></li>
<li><a href="YOURLINK">Menu1</a></li>
<li><a href="YOURLINK">Menu2</a></li>
<li><a href="YOURLINK">Menu3</a></li>
<li><a href="YOURLINK">Menu4</a></li>
</ul>
</div>

Edit:
Ganti teks berwarna Hijau dengan link yang mau dijadikan menu
Ganti Teks berwarna Biru dengan Nama Menu sobat

5. Klik simpan, Lalu lihat hasilnya :D



Semoga Bermanfaat Tutorial Belajar Blog - Membuat Accordion Menu dengan Efek Transisi Keren

Posted By: Unknown on Senin, 25 Februari 2013

Senin, 18 Februari 2013

Cara Blog Jadi Terkenal : Promosi Blog Anda

BOS TUTORIAL - Cara Blog Jadi Terkenal : Promosi Blog Anda. Masih berhubungan dengan "Hal-Hal Yang Blogger Harus Perhatikan dalam Blog". Point penting adalah Promosi Blog.

Cara Blog Jadi Terkenal : Promosi Blog Anda Sebuah perusahaan, tidak akan pernah maju apabila hanya memproduksi produknya saja. Perusahaan tersebut haruslah memperkenalkan produk yang dia ciptakan kepada konsumen atau masyarakat. Perusahaan tersebut akan mengatakan bahwa produk yang dia ciptakan adalah produk bagus dan layak untuk dimiliki. Maka, produk tersebut pun akan dikenal banyak orang. Dan tidak sedikit orang ingin memilikinya. Awalnya adalah ketika perusahaan tersebut memperkenalkan produknya kepada konsumen.

Anda adalah pemilik blog. Blog yang anda kelola sama dengan perusahaan tersebut. Anda dan saya memberikan informasi baru di dalam blog kita. Ntah itu tutorial, film, tips-tips, berita, software atau apa sajalah. Kita juga harus memperkenalkan kepada calon pembaca blog kita.

Cara Blog Jadi Terkenal : Promosi Blog Anda
Banyak cara untuk memperkenalkan blog kita kepada calon pengunjung. Namun ada 2 yang paling utama.

1. Promosi Blog dengan cara mengeluarkan uang alias Berbayar
Pasanglah iklan di situs-situs komersial dan ramai pengunjung situs-situs tersebut. Misalnya pasang iklan di Facebook, pasang iklan di Google, atau situs-situs teman anda yang kira-kira pengunjungnya banyak. Sesuaikan budget yang anda punya. Ingat... ini anda harus mengeluarkan uang. Omong-omong nih, anda juga bisa pasang iklan di blog ini, tentunya anda bayar juga... hehehe (sekalian promosi nih...)

2. Promosi Blog dengan cara tanoa mengeluarkan uang alias Gratis
Tentunya ini adalah pilihan yang kita sukai bukan. Cara ini haruslah benar-benar kita manfaatkan. Facebook dan twitter serta Google Plus merupakan situs jejaring sosial yang sudah dikenal orang dan penggunaannya tidak berbayar. Manfaatkan situs-situs tersebut sebagai alat promosi blog anda. Buatlah Halaman atau Group khusus untuk anda di situs-situs tersebut. Tariklah mereka bergabung menjadi anggotanya. Jadikan mereka sebagai target pembaca anda. (mengenai pembuatan halaman di facebook nanti kita bahas selanjutnya). Atau bergabunglah di group-group yang sejenis (sesuai dengan deskripsi blog anda), bergabung dengan forum-forum portal berita online yang anda. Dan jangan lupa promosikan blog anda di situ. Maka anda akan mendapatkan pengunjung blog dan blog anda pun mulai dikenal. (silahkan bergabung di Halaman Facebook kami)

Cara kedua di atas tentunya sudah lazim anda temukan. Saya akan bagikan cara yang ekstrim :
  1. Pakailah baju dengan bertuliskan nama blog anda. Bila perlu sebarkan dan bagikan baju itu kepada siapa pun (mirip kampanye partai).
  2. Tempelkan pamflet atau brosur atau stiker di setiap sudut kota dimana anda tinggal.
  3. Bila anda kuliah, coretin saja kamar mandi disana dengan tulisan Tolong Kunjungi Blog saya.
  4. Setiap anda ketemu orang, bilang sama dia... tolong Kunjungi Blog Saya...
  5. Sewa semua warnet yang ada di kota anda, dan onlinelah sesuka hatimu dengan tujuan hanya mengunjungi blog anda.
Ya sudah... mungkin segitu dulu yah tulisan mengenai Cara Blog Jadi Terkenal : Promosi Blog Anda. Semoga bisa bermanfaat yah. Salam sukses. [Bos Tutorial]

Kunjungi dan pasang iklan anda di: IKLAN BOS, Gratis dan Tanpa Daftar, Kentungannya Anda langsung dapat backlink Otomatis.

Posted By: Unknown on Senin, 18 Februari 2013

Agar Blog Selalu di Kunjungi : Selalu Uptodate

BOS TUTORIAL - Agar Blog Selalu di Kunjungi : Selalu Uptodate. Saya pernah memposting tentang "Hal-Hal Yang Blogger Harus Perhatikan dalam Blog", masih ingat bukan? Coba deh lihat lagi biar ingat. (klik disini bila lupa atau ingin baca lagi). Postingan kali ini berhubungan dengan itu. Karena salah satu poin penting di dalam postingan itu adalah Selalu Uptodate.

Agar Blog Selalu di Kunjungi : Selalu Uptodate
Jujur yah, saya minta kepada kawan-kawan karena baru bisa memberikan tips kepada kawan-kawan. Karena mengurus blog yang lainnya (seperti : Kumpulan Adsen Blogspot, Lapo Kita, Becak Siantar). Di samping itu, alamat email ini saya lupa, hehehe. Cuma intermiso saja ini kawan. Sekali lagi maaf yah.

Kembali kepada topik yah coy....
Pada dasarnya, orang atau sebut saja pengunjung blog, akan senang membaca bila melihat temannya membuat tulisan baru di dalam blog yang kita kelola. Apapun itu, tapi tanda " kutip " (yang bagus-bagus sesuai dengan deskripsi blog anda). Artinya ketika pengunjung sudah interes dengan blog anda kelola, maka dia akan haus dan haus untuk membaca informasi yang anda berikan. Nah... salah satunya adalah Selalu Uptodate.

Kita harus memposting sesuatu di dalam blog kita. Bagaimana orang akan berkunjung bila yang dikunjungi selalu yang itu-itu saja alias basi. So... postinglah selalu tulisan anda dan berikan info-info yang baru. Di satu sisi, rating blog pun akan semakin meningkat.

Singkat bukan. Tidak perlu ribet dan tidak perlu bertele-tele. Hanya satu Selalu Uptodate.

Caranya Agar Blog Selalu di Kunjungi : Selalu Uptodate. Salam sukses. [Bos Tutorial]

Posted By: Unknown on

Tampilan Template Baru Lagi di Blog

BOS TUTORIAL - Tampilan Template Baru Lagi di Blog. Ini yang kesekian kalinya saya mengganti template blog ini. Oh iya, kembali lagi saya update artikel di blog ini, setelah sekian lama tak pernah buka. Sebelumnya saya minta maaf kepada kawan-kawan karena baru bisa menyapa dan memberikan info terbaru.

Tampilan Template Baru Lagi di Blog

Tampilan Template Baru Lagi di Blog
Tampilan blog ini sebelumnya memang bagus. Cuma setelah saya pikir-pikit kok masih lambat. Akhirnya saya mencoba menggunakan template blog buatan Mas Kolis yang lumayan terkenal di jajaran perbloggeran. Memang terlihat sederhana. Namun untuk standar penulisan tutor cocok. Karena menurut saya, bahwa tampilan blog disesuaikan dengan isinya. Jadi singkron.

Tampilan template blog saya yang lama bisa anda lihat di bawah ini.

Tampilan Lama Template Blog Bos Tutorial

Demikian sekilas info mengenai Tampilan Template Baru Lagi di Blog yang hanya sekedar pemberitahuan saja. Oh iya bila ingin mengetahui Cara Mengganti Template Blog Pada Blogspot, silahkan KLIK SAJA DISINI. Salam dari kami. [Bos Tutorial]

Posted By: Unknown on

Jumat, 08 Februari 2013

Cara Merampingkan Alexa Rank


Teknik / Cara Merampingkan Alexa Rank
Tips Blog - Mempunyai sebuah blog yang mempunyai Alexa Rank yang kecil adalah salah satu hal yang diinginkan oleh para blogger, namun untuk mewujudkan hal tersebut, bukanlah sebuah perkara yang sulit karena ada banyak cara yang bisa dilakukan sehingga hal tersebut bisa terwujud. 
Apa Itu Alexa Rank?
Alexa Internet, Inc. adalah perusahaan berbasis di California yang mengoperasikan situs yang menyediakan informasi mengenai banyaknya pengunjung suatu situs dan urutannya. Alexa Internet didirikan pada tahun 1996 oleh Brewster Kahle dan Bruce Gilliat
Untuk mengetahui bagaiman teknik yang dilakukan oleh Alexa dalam mengukur Ranking Blog, berikut kutipan pada web Alexa yang sudah saya translate ke dalam bahasa indonesia.
Traffic rank didasarkan pada tiga bulan agregasi data lalu lintas historis dari jutaan pengguna Toolbar Alexa dan data yang diperoleh dari lainnya, sumber data lalu lintas yang beragam dan merupakan ukuran gabungan tampilan halaman dan pengguna (pencapaian). Sebagai langkah awal, Alexa menghitung jangkauan dan jumlah tampilan halaman untuk semua situs di Web setiap hari. Trafik Alexa Rank utama didasarkan pada nilai yang berasal dari kedua jumlah rata-rata dari waktu ke waktu (sehingga peringkat situs mencerminkan baik jumlah pengguna yang mengunjungi situs tersebut serta jumlah halaman di situs dilihat oleh para pengguna ). Perubahan tiga bulan ditentukan dengan membandingkan peringkat saat ini situs dengan peringkatnya dari tiga bulan lalu. Misalnya, pada tanggal 1 Juli, perubahan tiga bulan akan menunjukkan perbedaan antara peringkat berdasarkan lalu lintas selama kuartal pertama tahun ini dan peringkat berdasarkan lalu lintas selama kuartal kedua.
Nah, pada kesempatan kali ini saya akan berbagi tips atau teknik untuk mengecilkan peringkat alexa blog/website. Berikut caranya :
1. Update / Buat postingan secara berkala
Artinya, buatlah postingan blog 2 hari sekali dan lebih bagus lagi melakukan update setiap hari tapi dengan catatan, buatlah postingan original dan jangan melakukan copy paste konten karena selain akan membuat blog tidak disukai search engine juga akan merugikan orang yang membuat konten tersebut.
2. Pasang widget Alexa Rank
Memasang widget alexa rank pada blog akan mempermudah dalam memantau ranking blog. Berikut contoh Alexa Rank Widget :

THIS WIDGET HAS BEEN REMOVE BY ADMIN
3. Bookmark blog sebagai Homepage browser
Membookmark blog pada homepage browser merupakan salah satu teknik untuk memperkecil Alexa rank dan juga akan meningkatkan traffict pengunjung. Hal ini bisa dilakukan pada browser-browser yang ada pada komputer warnet, kantor atau teman-teman dekat anda.
4. Buat sebuah artikel tentang Alexa
Arikel yang memuat konten tentang alexa akan menarik minat para pembaca serta bisa membuat pageviews blog akan meningkat secara derastis dan alami.
5. Cari backlink yang berkualitas
Mencari backlink berkualitas dapa dilakukan dengan berkomentar pada blog/website dofollow dan memiliki pagerank yang cukup lumayan/kecil.
6. Install Alexa Toolbar pada blog
Menginstall alexa toolbar akan memberikan nilai tambah untuk merampingkan alexa rank blog/web dan untuk menginstall toolbar ini pada browser Google Chrome silahkan klik DISINI dan DISINI untuk Mozilla Firefox
Sebenarnya masih banyak teknik-teknik yang bisa dilakukan untuk memperkecil alexa rank ini, namun point-point di atas merupakan point yang sudah saya anggap bisa dan mampu untuk memperkecil peringkat alexa, akan tetapi jika sahabat blogger ingin menambahkannya, silahkan memberikan komentar di bawah. Terima kasih dan salam bloggers...!!!

Posted By: Unknown on Jumat, 08 Februari 2013

Efek Foto Menggunakan jQuery & CSS pada Blog

5 Efek Foto dengan jQuery & CSS pada Blog
Tutorial Blog | Tips Blog - Hampir semua blogger selalu menggunakan gambar pada setiap postingan mereka dan memang salah satu yang membuat postingan tersebut terlihat rapi dan menarik yakni dengan menambahkan image / gambar ke dalamnya. Tetapi kadang gambar yang ditampilkan tidak mempunyai efek apa-apa alias standard sehingga terkesan kaku dan kurang menarik.
Nah, dari hal tersebut di atas, maka pada kesempatan kali ini saya akan berbagi tentang bagaimana cara menambahkan 5 buah efek dengan menggunakan jQuery dan beberapa potong CSS kedalam template serta bagaimana cara penggunaannya. Untuk live demonya sendiri, silahkan sobat klik link di bawah ini dan jika sudah terbuka, silahkan sorot pada image dan lihat sendiri efeknya.
D E M O 
Bagaimana, menarik bukan...??? Untuk pemasangan kode dan cara penggunaannya sendiri, berikut tutorial singkatnya :

  • Seperti biasa, login ke blogger terlebih dahulu.
  • Pilih Template » Edit HTML » Proceed (jangan lupa beri centang pada Expand Template Widget)
  • Copy CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>
.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}
  • Selanjutnya copy Script di bawah ini dan pastekan tepat di atas tag penutup </head>
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});
});
/*]]>*/
</script>
  • Simpan template.
  • Selanjutnya, untuk menerapkannya pada postingan blog, berikut caranya :
Pada saat selesai mengupload gambar ke dalam postingan, pilih HTML kemudian cari kode gambar tersebut dan tambahkan attribut class="effect1" sampai class="effect1" untuk kategory efek yang ingin ditampilkan. Berikut contohnya :

Ketika membuka HTML pada postingan, biasanya kode anchor untuk gambar akan terlihat seperti di bawah ini :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLsLBgSyH0vxwqFwXwse9bvnbgZs_Yqx97_m3pQB6zklm1pxfnisMiMGnLP21XX0LZSL2mW-5qPG09ZmLWkwKk0RAf_LhnlULAXamDI2WI37C3YK41cNIOSnKYbd1iBqjdfus-YLLwb2Y/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLsLBgSyH0vxwqFwXwse9bvnbgZs_Yqx97_m3pQB6zklm1pxfnisMiMGnLP21XX0LZSL2mW-5qPG09ZmLWkwKk0RAf_LhnlULAXamDI2WI37C3YK41cNIOSnKYbd1iBqjdfus-YLLwb2Y/s1600/naruto.jpg" /></a>
Nah untuk menambahkan efek pada gambar tersebut, berikut caranya :
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLsLBgSyH0vxwqFwXwse9bvnbgZs_Yqx97_m3pQB6zklm1pxfnisMiMGnLP21XX0LZSL2mW-5qPG09ZmLWkwKk0RAf_LhnlULAXamDI2WI37C3YK41cNIOSnKYbd1iBqjdfus-YLLwb2Y/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqLsLBgSyH0vxwqFwXwse9bvnbgZs_Yqx97_m3pQB6zklm1pxfnisMiMGnLP21XX0LZSL2mW-5qPG09ZmLWkwKk0RAf_LhnlULAXamDI2WI37C3YK41cNIOSnKYbd1iBqjdfus-YLLwb2Y/s1600/naruto.jpg" /></a>
class="effect1" adalah kategory image dengan efek zoom pada saat gambar tersentuh oleh pointer mouse. Ganti kode tersebut dengan effect yang lain (class="effect1" sampai dengan class="effect5").

Semoga Bermanfaat
Belajar Blog , Tips Edit Blog, Tutorial Belajar Blog, Tips dan Trik Blog, Cara Membuat Blog Lebih Menarik
Sumber

Posted By: Unknown on

Selasa, 05 Februari 2013

Cara Mendaftarkan Blog di Webmaster Google

Google Webmaster Tools merupakan layanan gratis milik perusahaan search engine raksasa, Google yang memungkinkan kita untuk untuk memantau dan mengoptimalkan blog atau web kita agar dapat dicrawl dan diindex dengan baik oleh Google. Layanan ini juga memungkinkan untuk meminta search engine melakukan crawling terhadap blog atau web dan memantau 'kesehatan' suatu blog/web. Tentunya hal  ini sangat penting manfaatnya bagi para blogger dalam melakukan optimalisasi blognya.
Untuk dapat menggunakan layanan Google Webmaster Tools anda harus mendaftar terlebih dahulu menggunakan akun Gmail atau akun Google lainnya. Bagi yang belum memiliki akun Google silakan mendaftar terlebih dahulu.
Berikut ini cara mendaftar dan melakukan verifikasi blog di Google Webmaster Tools :

1.)  Buka halaman www.google.com/webmasters/tools/ lalu Login lah menggunakan akun Gmail atau akun Google anda.
2.)  Kemudian pada halaman Google Webmaster Tools , Klik tombol Add a Site lalu masukkan alamat blog anda yang ingin didaftarkan. Setelah itu klik Continue.

3.)  Lalu pada halaman Verify Ownership kita diminta untuk melakukan verifikasi blog. Ada 4 pilihan dalam melakukan verifikasi blog, yaitu :

    >> Use your Google Analytics account
         Menggunakan kode Google Analitycs pada blog anda

    >> Add a DNS record to your domain's configuration
         Menambahkan DNS record pada domain registrar atau hosting provider

    >> Add meta tag to your site's home page
         Menyisipkan kode meta tag yang disediakan kedalam kode HTML blog.

    >> Upload an HTML file to your server
         Kita akan diminta untuk mendownload sebuah file HTML yg disediakan
         kemudian menguploadnya ke blog kita.
 
     Saya sarankan menggunakan metode Add meta tag to your site's home 
     page karena lebih mudah.

    Adapun berikut ini cara melakukan verifikasi menggunakan meta tag:
    a.) Pada halaman Verify Ownership tadi, klik Add meta tag to yous site's
         homepage
    b.) Kemudian, copy kode meta tag yang ada disana.
    c.) Login ke akun Blogger anda di Tap baru
    d.) Pilih Design >> Edit HTML
     e.) Sebaiknya backup dulu template anda dengan cara klik Download Full
          Template
    f.) Masukan kode meta tag tadi diantara tag <head> dan <body> (anda
        boleh meletakkannya dibawah tag <head> atau diatas tag <body> , pilih
        salah satu saja)
    g.) Klik Save Template. Sekarang meta tag sudah terpasang di blog anda,
        ikuti langkah selanjutnya

4.)  Setelah memasang kode meta tag, kembali ke halaman Verify Ownership lalu klik Verify.
Sekarang Blog anda sudah terdaftar dan terverifikasi di Google Webmaster Tools. Langkah selanjutnya agar blog lebih mudah dicrawl oleh spiderbot adalah dengan mensubmit sitemap blog anda ke Google Webmaster Tools. Sitemap digunakan untuk memberiahu search engine tentang suatu halaman blog atau web agar dicrawl. Dengan membuat dan mensubmit sitemap ke Google Webmaster Tools, blog anda memiliki kemungkinan lebih besar untuk cepat dicrawl dan diindex search engine Google.

Adapun cara mensubmit sitemap ke Google Webmaster Tools adalah sebagai berikut :

1.)  Masuk ke dashboard Google Webmaster Tools blog anda

2.)  Klik Site Configuration, lalu pilih Sitemaps.

3.)  Klik Submit a Sitemap, lalu masukkan sitemap blog anda. Setelah itu Klik Submit Sitemap.
Contoh sitemap blog http://blablabla.blogspot.com/sitemap.xml jadi di kolom sitemap isi dengan sitemap.xml

Sekarang blog anda sudah terdaftar di Google Webmaster Tools dan sitemap blog anda sudah tersubmit.

Sumber :

Posted By: Unknown on Selasa, 05 Februari 2013

Contact Us

Nama

Email *

Pesan *

 

Latest post

About Us

Recent Comment

Copyright © . SkillBlogger. All Rights Reserved.
Designed by :-Way2themes