Showing posts with label Blog Tips dan Trik. Show all posts

code warna

kode warna untuk blog bingung untuk mencari kode warna, langsung aja pakai color generator, lebih mudah dan praktis. cara pakai nya mudah tinggal klik aja warnanya ntar akan dikasih kode warnanya. untuk memasang color generator ini di blog silahkan copy kode dibawah ini :

Cara membuat read more pada blog

Cara membuat read more pada blog, blogspot, Blogger OTOMATIS ini sangat mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template anda, dengan begitu andapun tidak perlu repot lagi dalam hal pembuatan readmore ini, oke tanpa panjang lebar silahkan ikuti langkah-langkahnya seperti yang di bawah ini.:

Membuat Read More Di Blogspot

► Silahkan Login di akun blogger anda
► Lalu klik Rancangan dan klik Edit HTML
► Jangan lupa untuk mencentang Expand Template Widget
► Untuk menghindari hal2 yang tidak diinginkan maka simpan/backup terlebih dahulu template saudara, untuk menghindari hal yang tidak diinginkan.
► Kemudian Cari kode </head>. Dan untuk mempermudah pencarian kode nya anda tekan aja ( CTRL + F )
► Lalu silahkan tambahkanlah kode yang ada dibawah ini tepat diatas kode </head> tersebut.

Bila anda ingin merubah ukuran pada Read More di Blogger anda tersebut, kamu tinggal merubah di bagian-bagian kode yang berwarna merah bawah ini, dan Ubahlah angkanya sesuai dengan keinginan.

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>»»  READMORE...</a></span> </b:if><b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

► dan untuk tulisan " READ MORE " bisa diganti sesuai dengan selera anda.

setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Menghilangkan Tang dan Obeng pada Blog

Waktu itu salah seorang sobat sempat bertanya kepada saya..."sob cara hilangin gambar tang dan obeng itu bagaimana sih? Jawab aku: ini dia bro tutorialnya! Tang dan obeng pada tampilan blog anda berfungsi untuk melakukan pengeditan gadjet tanpa harus masuk ke Rancangan blog. Tang dan obeng tersebut muncul ketika anda sedang login pada akun anda. Tapi jika anda merasa terganggu dengan keberadaan gambar ini maka anda dapat menghapusnya...Pengen tau caranya gimana hilangin tang dan obeng, ikuti langkah berikut ini:

1. Login ke blogger
2. Masuk ke Rancangan, klik pada Edit HTML
3. Cari kode ini ]]></b:skin>
4. Kopi dan paste kode dibawah ini tepat diatas kode ini ]]></b:skin>

.quickedit{
display:none;
}

5. Simpan template anda dan lihat hasilnya....
Selamat mencoba....happy blogging

Cara Membuat Indikator Loading Page / Halaman

Posted by Indra × 05.44

Ada beberapa blog yang pernah saya kunjungi menggunakan indikator loading halaman. Biasanya sebuah gambar akan muncul ketika kita sedang membuka halaman sebuah web. Gambar tersebut menunjukan halaman tersebut sedang dalam proses loading. Blog Trik dan Tips kali ini akan memberikan tutorial bagaimana membuat loading page atau indikator loading halaman yang sederhana pada blog anda. Untuk membuatnya tidaklah sulit, ikuti saja langkahnya dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Back up (upload) template anda terlebih dahulu untuk mencegah kesalahan editing
3. Cari kode <body>
4. Hapus kode tersebut lalu ganti dengan kode dibawah ini:

<body onLoad='init()'>
<span id='loading' style='position:absolute; text-align: center; top:10px; right: 10px;'><img border='0' src='http://1.bp.blogspot.com/-l6kpGSbwlAk/T4QyAAmu78I/AAAAAAAAC8M/3JL_qrskbEs/s400/kotak.gif'/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>

5. Ganti kode berwarna biru dengan url gambar loading page yang anda suka
6. Simpan template anda lalu lihat hasilnya

Membuat Widget Selamat Datang pada Blog

1. Masuk ke Rancangan --> Edit HTML
2. Carilah kode </head>
3. Letakkan kode dibawah ini diatas kode </head>

<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/leightbox.js</span>"></script>
<script type="text/javascript" src="<span style="color: red; margin: 0px; padding: 0px;">http://wierdwalker.googlecode.com/files/prototype.js</span>"></script>

4. Masuk lagi ke Rancangan --> Edit Laman
5. Tambahkan gadjet lalu pilih HTML/Javascript
6. Masukkan kode berikut ini pada gadjet tersebut

<style>a.lbAction {
padding: 0 3px;
text-decoration: none;
float: right;
position: absolute;
top: -20px;
right: -20px;
color: #000000;
border: 5px solid #000000;
background: #CCCCCC;
z-index: 102;
}
a.lbAction:hover {
background: #FFFFFF;
}
a.lbAction:active {
background: #999999;
}

div.leightbox {
color: #333;
display: none; /* toggle display to show/hide the popups when designing & previewing */
position: absolute;
top: 50%;
left: 50%;
margin: -250px 0 0 -200px;
width: 500px;
height: 400px;
padding: 0;
border: 1em solid #000000;
background: #FFFFFF;
z-index: 101;
overflow: none;
}
div.scrollbox {
margin: 0 auto;
width: 100%;
height: 100%;
text-align: left;
overflow: auto;
}

.scrollbox h1{text-align: center;}
.scrollbox p{text-align: center;}
.scrollbox img{float:left;margin:0px 0px 0xp 10px;}
div#overlay {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background-color:#000000;
-moz-opacity: 0.80;
opacity: .80;
filter: alpha(opacity=80);
}

div.lightbox[id]{ position:fixed; }
div#overlay[id]{ position:fixed; }
</style><div style="padding-top:15px;">
<a id="EPEntryButton" onclick="document.getElementById("HTML88").style.display="none";document.getElementById("Text88").style.display="none"">ENTER</a>
</div>
<div id="EPGrab"><a href=" http://blogtrikdantips.blogspot.com/" target="_blank">Make your own</a></div>
<div id="EPDarkLayer"></div>

<style>
#welcome-wrapper{width:40%;margin:0 auto;height:0px;text-align:center;}
/* welcome message widget */
#Text88, #EPEntryButton, #EPGrab {position:relative;z-index:510;top:100px;}
#Text88 {background-color:#fff;border:solid 10px orange;color:#222;display:none;padding:15px;}
#HTML88 {z-index:499;display:none;}
/* DarkLayer div */
#EPDarkLayer {background-color:#000;opacity:0.6;filter:alpha(opacity=60);top:0px;left:0px;z-index:500;position:fixed;}
/* Entry button */
#EPEntryButton {background-color:lawngreen;border:outset 3px #000;color:#333;cursor:pointer;font-size:25px;padding:5px;text-decoration:none;}
#EPGrab {color:white;padding-top:10px;}
</style>


<div id="pop01" class="leightbox">

<div class="scrollbox">
<h1>Welcome To My Blog</h1>
<p>A blog by <a href=" http://rivaldoatthoriqputrasetyadi.blogspot.com/ ">Blog Trik dan Tips</a></p>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGawCYZHew6ZSDsuA0nBmJNnaz66LtlvIeKZhEsguFitlKx-n_ic2E2_bwBk2eOFioomGzbBrNCQmqklQMtGggsfVmB0fzOQ4OviOaDm-wzWVHl1B64ldGJ8hPrqnEkft7-UsAZXM4SL0d/s1600/WelcomeToMyPageRdFlower2.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="294" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGawCYZHew6ZSDsuA0nBmJNnaz66LtlvIeKZhEsguFitlKx-n_ic2E2_bwBk2eOFioomGzbBrNCQmqklQMtGggsfVmB0fzOQ4OviOaDm-wzWVHl1B64ldGJ8hPrqnEkft7-UsAZXM4SL0d/s320/WelcomeToMyPageRdFlower2.jpg" /></a>

</div>
<a href="#" class="lbAction" rel="deactivate">Enter The Blog</a></div>


<script type="text/javascript">
lb = new lightbox();
lb.initCallable('pop01');
lb.activate();
</script>

7. Gantikan kode berwarna biru dengan url blog dan judul blog anda
8. Simpan template anda lalu lihat hasilnya

Membuat Komentar Terbaru dengan Gambar

Halo sobat blog trik dan tips, kali ini kita akan membuat komentar terbaru dengan gambar. Widget ini menggunakan javascript dan sangat mudah untuk diinstal. Sobat dapat memasang widget ini pada blog anda untuk sekedar memperindah atau mempercantik blog. Anda dapat mengetahui apabila seseorang berkomentar pada blog anda. Gambar komentator ditampilkan dalam bentuk lingkaran sehingga memberikan efek yang sangat menarik. Jika sobat ingin memasangnya pada blog ikuti langkah berikut ini:

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 30,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blogtrikdantips.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

5. Selanjutnya sobat tinggal menganti kode berwarna merah dengan url blog anda.
6. Jika sobat ingin mengedit tampilan widget ini berikut adalah penjelasannya:
- Kode berwarna hijau adalah jumlah komentar yang ditampilkan
- Kode berwarna biru aadalah ukuran gambar komentator
- Kode berwarna orens adalah rincian komentar dari komentator
7. Terakhir simpan gadjet anda.

Cara Membuat Efek Gelembung di Blog

Sebelumnya blog trik dan tips telah memberikan info cara membuat efek love berjatuhan. Kali ini seperti judul diatas saya akan berbagi trik terbaru cara membuat efek gelembung di blog. Ada dua efek gelembung yang akan saya bagikan triknya ke sobat blogger. Efek yang pertama yaitu efek gelembung berwarna biru muda yang berjatuhan di blog sementara efek kedua yaitu efek gelembung terapung (float effect). Jika sobat penasaran bagaimana tampilan efeknya silahkan dicoba aja langkahnya dibawah ini:

Efek Pertama:
1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode <body>
4. Paste kode dibawah ini dibawah kode <body>

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/bubble.js'/>

5. Simpan template sobat

Efek Kedua:
1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkkan kode berikut ini:

<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/bubble2.js"></script>

5. Simpan gadjet

Cara Membuat Efek Meteor Jatuh di Blog

Sobat blogger sudah pernah belum melihat efek meteor yang jatuh pada blog. Efek yang satu ini bisa dikatakan cukup menarik karena disertai dengan suara saat meteor bertabrakan. Efek meteor jatuh merupakan efek yang cukup saya sukai karena berbeda dengan efek-efek lainnya. Efek ini dibuat oleh Stephen Chapman. Jika sobat blogger penasaran bagaimana tampilan dari efek meteor jatuh silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode dibawah ini:

<script language="javascript">
nd_mode="meteor";
nd_sound="on";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_top";
</script>
<script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/meteor_jatuh.js">
</script>

5. Simpan gadjet lalu lihat hasilnya

Membuat Efek Daun Berguguran di Blog

Selalu saja ada berbagai macam efek menarik yang bisa kita tampilkan di blog, salah satunya yaitu membuat efek daun berguguran. Efek ini tentunya berbeda dari efek-efek sebelumnya karena pola jatuhnya daun berayun-ayun. Cara membuat efek ini sangat mudah, ikuti saja langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML Javascript
4. Masukkan kode dibawah ini:

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/daun.js'/></script>

5. Simpan gadjet lalu lihat hasilnya

Membuat Efek pada Cursor

Membuat Efek Gelembung pada Cursor

Jika sobat ingin membuat cursor terlihat lebih bergaya dan menarik maka cobalah trik yang satu ini. Kali ini blog trik dan tips akan membahas bagaimana cara membuat efek gelembung pada cursor. Efek gelembung akan muncul apabila cursor digerakan dihalaman blog anda. Gelembung akan timbul lalu melayang ke atas halaman blog. Jika sobat penasaran dengan tampilkan efek cantik ini silahkan coba langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan gadjet lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:

<noscript></noscript><script type="text/javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/cursor_gelembung.js"></script><script type="text/javascript">

// <![CDATA[
var colours=new Array("#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE", "#2E9AFE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

5. Simpan gadjet lalu lihat hasilnya

Jika sobat ingin mengubah warna gelembung pada cursor silahkan ganti kode yang berwarna biru diatas kode kode warna yang anda sukai. Selamat mencoba!

Cara Membuat Efek Kelap Kelip Pada Link

Bulan lalu saya pernah menulis sebuah posting cara membuat link berwarna warni, kali ini kita akan membuat link tersebut dengan efek bintang berkedip. Efek ini akan muncul apabila link tersebut disorot oleh cursor. Jika sobat ingin membuat blog lebih menarik dengan berbagai macam animasi maka trik yang satu ini mungkin saja bermanfaat. Efek bintang pada link udah saya terapkan di demo blog dan hasilnya sukses. Berikut ini saya akan berikan langkahnya kepada sobat:

1. Login ke blogger
2. Masuk ke Rancangan -- Edit HTML
3. Carilah kode a:link{ atau a:visited{
4. Lalu letakkan kode dibawah ini dibawah kode tadi

a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_zrbFajz_lFROBQXL_qD8sdLSYMzDEQj8Im4F3paeLPvsMV0WfxsYGdYbIyfH7q0S3pwwJpRKGgtir2-c-NY9e4LAk3zNAaVx3IH31BWejTSOyiggS9F_HT7cgUGFuhEjljxxBAZ0Zg/s1600/stars.gif);}

Link akan mengeluarkan gambar seperti ini:

5. Simpan template anda lalu lihat hasilnya

Jika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. Selamat mencoba!

Membuat Efek Telur Ceplok di Blog

Ada yang lapar gak? Kalau makan mie goreng paling lezat pakai telur ceplok. Kebetulan karena ada waktu memposting artikel kali ini saya akan memberikan tips bagaimana cara membuat efek telur ceplok. Efek ini cukup mengganggu penampilan blog, tapi kalau ingin mencobanya gak ada salahnya:

1. Login ke blogger.
2. Masuk ke Tata Letak / Rancangan
3. Tambah gadjet, lalu pilih HTML/Javascript
4. Masukkan kode berikut ini:

<script language="javascript"> nd_mode="eggs"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efektelur.js"></script>

5. Simpan gadjet

Kini sobat bisa melihat hasilnya diblog. Selamat mencobanya!

CARA MEMBUAT EFEK BANJIR DI BLOG

Halo Sobat blogger kembali lagi bersama Blog Trik dan Tips. Sobat sudah pernah belum ngalamin rasanya banjir ditempat sobat tinggal. Banjir pasti sangat menggangu aktivitas yang sobat ingin lakukan. Namun kali ini, blog trik dan tips akan membahas cara membuat efek banjir di blog. Ingin tau caranya, langsung saja ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Pilih Tata Letak / Rancangan
3. Tambahkan gadjet
4. Pilih HTML/Javascript
5. Masukan kode berikut ini:

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/efek_banjir.js"></script>

6. Simpan gadget

Sekarang sobat sudah bisa melihat hasilnya. Efek ini akan membuat blog anda tenggelam akibat banjir. Akan muncul ikan dan gelembung udara di screen blog anda. Menarik bukan? Selamat mancobanya!!

Cara Membuat Blog

Menurut RidwanAZ.com, ada dua layanan blogging yang telah diakui kehebatannya oleh para blogger di seluruh dunia. Yaitu Blogspot (blogger.com; sebuah layanan yang dimiliki oleh google) dan WordPress.com. Namun karena judul artikel ini adalah cara membuat blog di blogspot, jadi artikel kali ini akan membahas blogspot saja. Bagi kamu yang ingin membaca panduan wordpress silahkan baca di sini.

Untuk selanjutnya silahkan ikuti langkah-langkah cara membuat blog lengkap di berikut ini :

1. Untuk memulai mendaftar blog di blogspot silahkan kunjungi alamat situs www.blogger.com, setelah itu cari tombol Sign up (daftar) yang ada di pojok kanan atas, seperti gambar di bawah ini

2. Setelah tombol sign up diklik, nanti akan muncul aplikasi pendaftaran pembuatan akun gooogle, seperti gambar di bawah ini. Silahkan lengkapi aplikasi tersebut. Gambar di bawah ini merupakan contoh pengisiannya.

Penjelasan pengisian : pada bagian Name, Isi nama depan dan nama belakang kamu.

Pada Choose your username, isi sesuai dengan keinginanmu, username ini nantinya berfungsi sebagai email login untuk akses ke dashboard blogspot kamu dan bisa juga untuk login ke Gmail. (jika username tidak tersedia, tambahka angka atau huruf di belakangnya),

Pada Create a Password, isi password kamu (gunakan yang mudah diingat), pada Confirm your passwordsilahkan isi dengan password yang sama dengan password pada kolom pada create a possword tadi.

Pada birth day isi tanggal lahir kamu. Pada Phone, isi dengan nomor ponsel kamu, untuk Curent your email, dikosongkan saja. Pada type the two pieces of text, ketikan dua buah teks kode yang ada di atasnya. Selanjutnya beri tanda centang pada dua kotak kecil di bawahnya, dan yang terakhir Klik pada tombol Next step.

3. Setelah kamu klik pada tombol next, akan ditampilkan perintah verifikasi akun, silahkan masukan nomor ponsel kamu. Kemudian klik tombool Send Verifikation Code. Nanti kamu akan mendapat sms dari google yang berisi kode aktifasi.

4. SMS kode verifikasi dari google ke ponsel kamu akan tampak seperti gambar di bawah ini.

5. Masukkan kode verikasi sms di atas pada kolom yang tampil, seperti gambar di bawah ini. kemudian klik tombol Verify

6. Jika langkah sebelumnya berhasil, kamu akan menjumpai halaman seperti gambar di bawah ini. Untuk menambahkan foto silahkan klik add profile photo, jika ingin langsung ke langkah selanjutnya silahkan klik tombol Next Step.

7. Selanjutnya akan tampil halaman seperti gambar di bawah ini. Ini merupakan tanda bahwa kamu telah memiliki sebuah akun google berupa alamat email yang bisa digunakan untuk login ke Gmail.com danblogger.com, selanjutnya silahkan klik tombol Back to blogger.

8. Jika melihat halaman seperti gambar di bawah ini abaikan saja , biar lebih cepat dalam membuat blog. SIlahkan klik tombol lanjutkan ke blogger.
cara membuat blog

9. Setelah itu kamu akan masuk ke halaman utama Dashboard blogger. Di dashboard ini kamu bisa membuat blog, menulis posting, mengatur tema dan lain-lain. Untuk membuat blog pertama kali klik tombol Blog Baru.
cara membuat blog

10. Setelah tombol blog baru diklik, akan muncul jendela pembuatan blog. Pada bagian Judul isi Judul blog kamu, pada bagian Alamat isi dengana alamat blog yang kamu inginkan. Pada template, pilih salah satu template yang kamu inginkan. Kemudian klik tombol buat blog
cara membuat blog

11. Setelah langkah-langkah di atas, blog kamu sudah berhasil di buat. Untuk menulis posting silahkan klik tombol Pensil, sedangkan untuk melihat tampilan blog yang masuk kosong (belum ada artikelnya) silahkan klik tombol lihat blog.
cara membuat blog

Mendaftar Blogger dengan Akun Gmail

Jika kamu sudah mempunyai alamat email di Gmail.com, kamu tidak perlu mendaftar dari awal… Kamu dapat langsung memasukkan alamat email gmail dan password kamu, kemudian klik tombol masuk. Selanjutnya kamu tidak perlu mengisi berbagai macam kolom. Kamu hanya perlu masukkan Nama Tampilan dan alamat situs.

Cara Mengisi Artikel di Blogger pada Tampilan Antarmuka baru

Belum lama ini Blogger meluncurkan tampilan antar muka pada seluruh bagian Dashboard nya. Mulai dari bagian posting artikel, bagian setting, bagian pengaturan template, bagian komentar, dan lain-lain telah berubah semua. Jadi bagi kamu yang secara otomatis diarahkan ke tampilan antar muka yang baru, silahkan simak panduan cara mengisi artikel pada tampilan antar muka baru di bawah ini ;

1. Berikut ini merupakan gambar tampilan antar muka baru halaman dashboard blogger. Perhatikan gambar di bawah ini, beberapa tombol penting masih diikut sertakan, hanya saja posisinya dirubah sesuai dengan bentuk tampilan baru. Jadi untuk masuk ke halaman pengisian artikel pada blogspot, silahkan klik tombol Orange yang ada gambar pensilnya.

cara mengisi artikel blogspot tampilan antarmuka baru

2. Setelah itu akan tampil halaman posting seperti gambar di bawah ini. Untuk lebih jelasnya silahkan pahami keterangan pada gambar di bawah ini.

3. Masukkan judul artikel, isi artikel, dan labelnya pada kolom yang telah disediakan. Sehingga hasilnya seperti contoh di bawah ini. Setelah semua diisi, silahkan klik tombol publikasikan yang berwarna orange.

4. Setelah kamu klik tombol publikasikan, halaman akan berubah seperti gambar di bawah ini. Jika muncul seperti gambar di bawah ini, berarti artikel kamu sudah berhasil di posting atau diterbitkan. Untuk melihat artikel yang telah diterbitkan silahkan klik tombol Lihat. Sedangkan tombol Edit berfungsi untuk menge edit atau merubah artikel kamu. Lalu untuk tombol Hapus berfungsi untuk menghapus artikel.

posting telah berhasil muncul diterbitkan

Cara Login dan Logout akses dashboard Blogspot.

Jika komputer yang kamu gunakan untuk membuat blog adalah komputer warnet atau laptop pinjaman, sebaiknya sebelum menutup laptop silahkan logout dulu dari Dashboard sebagai antisipasi keamanan akun blogspot kamu. Cara klik pada tombol di pojok kanan atas nama profilmu, kemudian klik tombol keluar. perhatikan gambar di bawah ini.

Sedangkan Untuk masuk kembali ke blogspot, caranya hampir sama dengan langkah paling awal tadi. Yaitu kunjungi www.blogger.com, kemudian masukkan email dan password yang telah kamu dapatkan tadi. sebagai contoh lihat gambar di bawah ini.

Cara Mengatur Setting Form Komentar Blogspot

Menurut kami mengatur setting pada form komentar di blogspot ini wajib untuk segera dilakukan. Mengapa ? Karena secara defaul, tampilan antar muka form komentar pada blogspot dibatasi hanya untuk pemilik akun tertentu, misalnya akun blogger, akun wordpress, akun typepad. Sehingga orang lain yang memiliki blog ketika ingin berkomentar pada artikel kita, ia tidak bisa memasukkan alamat situs atau blog mereka. karena di formnya tidak tersedia seperti gambar di bawah ini.

gambar cara seting form komentar blogspot

Berikut ini penjelasan singkat dan mudah bagaiman setting form komentar pada blogspot.

1. Langkah pertama adalah login dulu ke dashboard blogspot milikmu, kemudian masuk ke jendela setelan/setting, dengan cara klik pada tombol segitiga kecil yang ada di sebelah kiri tombol lihat blog, kemudian klik tombol setelan. Perhatikan gambar di bawah ini agar lebih jelas.
gambar cara seting form komentar blogspot

2. Setelah berhasil masuk ke jendela setelan, silahkan klik pada tombol pos dan komentar
gambar cara seting form komentar blogspot

3. Tampilan jendela pos dan komentar akan tampak seperti gambar di bawah ini. Untuk mengatur setting agar orang yang berkomentar dapat mengisikan alamat situs mereka, silahkan klik pada opsi SEMUA ORANG. Agar lebih jelas silahkan perhatikan gambar di bawah ini
gambar cara seting form komentar blogspot

4. Setelah opsi pada SEMUA ORANG diaktifkan, selanjutnya tekan tombol SIMPAN SETELAN yang ada dipojok kanan atas.
gambar cara seting form komentar blogspot

cara membuat like box di sisi kiri blog

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Ini dia salah satu widget yang sangat menakjubkan.

Dimana orang-orang selama bertahun-tahun hanya menggunakan tombol facebook like saja di blog, akan tetapi hari ini saya ingin memperkenalkan dan share ke Anda Cara membuat kotak like facebook melayang di blog (floating facebook likebox).

Floating facebook likebox adalah sebuah slider yang menyembunyikan Likebox di dalam wadah dan ketika visitor (pengunjung) mengarahkan crusor ke tombol maka akan terbuka kotak Facebook likenya.

Langkah-langkahnya sebagai berikut:

LANGKAH 1. Menambahkan Plugin JQuery ke Blog Anda :

Masuk ke Dashboard Anda> klik Design (rancangan)> Edit HTML.
Cari kode </head> Gunakan Control + f untuk memudahkan pencarian, kemudian pastekan kode jquery berikut sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
3. (Abaikan langkah ini jika Anda telah menambahkan Plugin JQuery ke blog)Save (simpan) template.

4. Save (simpan) template

LANGKAH 2. Tambahkan floating likebox ke blog Anda :

Buka halaman Tata Letak
Klik tambah gadget > pilih tambah HTML/Javascript
<script type="text/javascript"> // </script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Ms8F4hV6lVuWRVZk7C5WKnvBNeWARBjPeg0HApeKcgWt6ofow9BaFyq4xZ52FxDruvGunVFONNjAGt-0bTJnxAI96vMLbBiokZ8okfAnS8RTy7V8lWVE4n1m_8Ko9tha_hZ_ePltFovL/s1600/facebook1.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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;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=http:///www.facebook.com/pages/Eyang-anom/427305383989192&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http:/sijalupangna.blogspot.com">Tips dan trik, science dan bisnis</a></span></div></div>
copy dan pastekan kode script atas ini

Anda bisa mengganti "url fans page facebook Anda" dengan alamat url fans page facebook Anda sendiri

contoh fans page facebook blog ini : http://www.facebook.com/RivaldoAtthoriqPutraSetyadi?ref=hl.

Sedangkan untuk gambar logo facebooknya seperti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Ms8F4hV6lVuWRVZk7C5WKnvBNeWARBjPeg0HApeKcgWt6ofow9BaFyq4xZ52FxDruvGunVFONNjAGt-0bTJnxAI96vMLbBiokZ8okfAnS8RTy7V8lWVE4n1m_8Ko9tha_hZ_ePltFovL/s1600/facebook1.png", bisa diganti dengan koleksi gambar logo facebook Anda sendiri.

Save template, selesai sudah Cara membuat kotak like facebook melayang di blog (floating facebook likebox).

Semoga bermanfa'at.

Random Post

code warna

Cara membuat read more pada blog

Membuat Read More Di Blogspot

Menghilangkan Tang dan Obeng pada Blog

Menghilangkan Tang dan Obeng pada Blog

Cara Membuat Indikator Loading Page / Halaman

Cara Membuat Indikator Loading Page / Halaman

Membuat Widget Selamat Datang pada Blog

Membuat Komentar Terbaru dengan Gambar

Membuat Komentar Terbaru dengan Gambar

Cara Membuat Efek Gelembung di Blog

Cara Membuat Efek Gelembung di Blog

Cara Membuat Efek Meteor Jatuh di Blog

Cara Membuat Efek Meteor Jatuh di Blog

Membuat Efek Daun Berguguran di Blog

Membuat Efek Daun Berguguran di Blog

Membuat Efek pada Cursor

Membuat Efek Gelembung pada Cursor

Cara Membuat Efek Kelap Kelip Pada Link

Cara Membuat Efek Kelap Kelip Pada Link

Membuat Efek Telur Ceplok di Blog

Membuat Efek Telur Ceplok di Blog

CARA MEMBUAT EFEK BANJIR DI BLOG

Cara Membuat Blog

Cara Membuat Blog

Mendaftar Blogger dengan Akun Gmail

Cara Mengisi Artikel di Blogger pada Tampilan Antarmuka baru

Cara Login dan Logout akses dashboard Blogspot.

Cara Mengatur Setting Form Komentar Blogspot

cara membuat like box di sisi kiri blog

Blogger templates

Kategori