Home » Archive for February 2014

Cara Membuat / Memasang Widget Burung Twitter Terbang Di Blog

sumber:http://mari-berbagi244.blogspot.com

Halo semuanya sobat blogger. Kali ini saya akan share artikel mengenai tentang Cara Membuat / Memasang Widget Burung Twitter Terbang Di Blog. Untuk para sobat blogger yang sudah lama berkecimpung di dunia Blog atau ada dari sobat semua yang suka blogging, mungkin trik ini sudah tidak asing lagi dimata sobat blogger. Sudah banyak sekali sobat-sobat blogger yang lainnya memasang widget burung Twitter terbang ini dengan berbagai style dan warna burung yang berbeda-beda. Kali ini saya akan mengulas kembali bagaimana Cara Membuat / Memasang Widget Burung Twitter Terbang Di Blog khusus buat sobat yang baru membuat blog dengan platform Blogspot.

Twitter adalah salah satu jejaring sosial yang sangat populer saat ini selain Facebook dan Google+. Banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis atau hanya sekedar berteman saja. Untuk itu, bagi sobat yang sudah mempunyai blog tidak ada salahnya memasang widget burung Twitter terbang ini. Selain untuk membuat blog sobat menjadi cantik, widget ini juga berguna untuk menjalin hubungan pertemanan baru dengan pengunjung blog sobat dan bisa menaikan page rank blog sobat dengan cepat.

Bagi sobat blogger yang ingin memasang widget burung Twitter terbang ini, berikut saya beritahukan caranya.

Login ke akun Blog sobat.
Pilih Tata Letak.
Pilih Add Gedget.
Kemudian Pilih HTML/Javascript.
Copy kode dibawah ini, kemudian Paste di kolom HTML/Javascript.

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWccfUt1M0Mdj-a8HjMMnWz5Rz5WuCT2uQd4jHQg6SY3mCxwHZOswNJMCQGtRDzTu4-nV-3mhzi4Nban5f9FyF0HYuLcIl9l1MdSfEEgm9EWTRWXgYOJDunFnwM9vT2kX-BmTyt8XGfTd/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/UserID";var tweetThisText = "Twitter - UserID http://mari-berbagi244.blogspot.com/";tripleflapInit(); </script>

Ganti kode yang berwarna Merah dengan nama pengguna (username) akun Twitter sobat.
Simpan dan liat hasilnya.

Warna Pilihan Burung Terbang Twitter

Bagi sobat blogger yang ingin menggunakan warna burung Twitter yang lain, sobat bisa mengganti kode yang berwarna Biru dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan.

Warna Kuning

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj15_X6q8jya-noZCdFoTl2ADH28uAVYSHTR86LIQhZS-rsjJLX4lqtwrcYvHOOa-RPjghLR0oIhvlhG-4NyUxmUsDV3OQB5rHu8YtcL0GERd0QxriXwrWo2WE-YqKusWVjva3u2g4zfM4/s1600/yellow+bird.png

Warna Hitam

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyJfXiaGhPm_wPoec1omxRRQ62sN-sGC8d9cbniZGrz2V3mKtFcMS47YvtLbSryTZCgcm4CGJcQNaT1DM1p8KD5LkcOQroTTJN0nAqiEtv2pzvSFmauYJ_29yItih8_BZGXVrMxV24XKA/s1600/black+bird.png

Warna Ungu

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2eSwTJbQnuqClLQrsTwVx-IcrjeJA3BJwv_b09NfdtNUTqL84Hv0NENHgYeQCwzubmVO9kMrBJ5S3z1mfKs9GX3xNJkYsvFYSC1fbWvv8c6PKcLFCLvQjLEg4pNnOuZxtr01C7RGJl24/s1600/purple+bird.png

Warna Hijau

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_uFz8krks6N2-016uIqnagVytZT42VcsJjPqG5V3GAmzZ1r1cUi8Y-j150aAf7NXQxIClsoIOaRtmJORCmiuibXNBZ9fRdS1plVlMIuw4X2Bdu3Aa-LmDFUmIRcvtcr3hVdY9ka5Qvt0/s1600/Green+bird.png

Warna Biru

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq4JR14S2uhD45d4mAx0Hxyf8XjeSWZ4w7bN7bMxVebEKNYFrXxlvlJU6QWHLl6FZqYJg-oWVUol5eRZlZcXtJrZwgiOuR63ZMRT2LwrX2w5p29JJNcVmx4axBcv6OFpfeiCjBk7fNCT4/s1600/Blue+bird.png

Warna Putih

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPN_bkNMJNXJfSeGSClFhUXNoU_rP1s_SztBCXFFEofb5YoElmBOn_Ogp5812DkF6heP5gmzw6v9MxPEX4jdxbaM9iABEGTQQjcJw49r6TJkfQoqIQhVVfH47sdzMtnYV3_X9EDN4Pqfc/s1600/white+bird.png

Warna Merah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnuiPcle1xH6ezWFEMX99QqkXZ2WGlDQ14MAotyLN5mY6qWCnrliWAxhrpqf7qbww2uBc3IAmKOH88MnmVb2hlHWDy-hJCnA3tib7UzGu5dLNo0SH-bO13oi7UdeBLIeeO7-H53Dx8ak/s1600/red+bird.png

Warna Biru Tua

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDWWwd75-VRCfueB80oOPrLJAyDY4q9C_b02O6c5pDdFtCYZB8efqZn359x0XO_naD1ktg33nw0YC0wQiMiCWV3ZnumOfGzkxOlrMCXsJZpU3EmdIGZFpHr4JVYj2Yhv4qI2vHjW6pXSc/s1600/burung+twitter+terbang.png

Warna Cokelat

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD-xTDL2V4HdxlZaI2iJoRCYmIZsEDfuUajaGJmhG0a1p86Iqq9ALfTdSPNvoEzBj57_KFrQ6d43kP61Y-b51Iw3lPdAJ07w9UJjchZD5bXOMQXSZNgPKJMrhOvyNjINvuvCJxDOhAv9E/s1600/brown+bird.png

Warna Pink / Merah Muda

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtFiB6s4-T4qv3QjBYKYStbVmU-b5AsDqwKNMGsV4PdhL8uaaolaMZRYvwhakTmWRAMAvx7plmEeIT-ITRX2ft5jpHFacya11Ni-k2yzqPZGOkDQ1vRxuMgRCoBB2bJFzPLJOvIoy13TM/

Warna Silver

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtu-Cm_J1QwkZvfH6aQmZhxY0mfHt5PSQUDAHFsy8s7SEUqka6TN_kESkGt_tbL65bfajCukl3iCHYskeJoAVD75bNLUJ8zJE5xqyuOOFBsB5EDTszkiL7OVi3BFFthXyYzx2-viaqGS0/s1600/grayscale.png

Warna Pelangi

http://i1059.photobucket.com/albums/t427/momongz/Widget%20Burung%20Terbang%20Twitter/Pelangi.png

Special Karakter

Karakter Manusia Berenang

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc__UR1rnBF7nqtjsmUifgICyb6qMAVasJshgrDFxP0tjc9OlEuMqdc6eC7Ny8bw_fA7O5608z4X22ulJ2RUb3G3h0pStlOSirS9p5uuKfcOxXBnCOnbGPKpr_RLb7VUoykKDy1F142Exx/s1600/Cara+membuat+burung+twitter+terbang+di+blospot.png

Karakter Naga Terbang

http://i1212.photobucket.com/albums/cc454/Achmadi_Silvanto/MonozCoreblogspotcom_Dragon_Twitter.png

Bagaimana sobat blogger, silahkan dipilih style yang ingin sobat gunakan. Sekian info dari saya, Semoga artikel yang saya buat ini dapat berguna dan bermanfaat bagi sobat. Bila ada yang kurang jelas silahkan tanyakan di kolom komentar. Selamat mencoba sobat blogger.

Cara Membuat Chat Box Auto Hide Pada Blog

sumber:http://mari-berbagi244.blogspot.com

Cara Membuat Chat Box Auto Hide Pada Blog - Sobat blogger, setelah tadi saya share artikel mengenai Cara Membuat Chat Box di Blog, sekarang saya akan buat artikel mengenai Cara Membuat Chat Box Auto Hide Pada blog. Berbeda dengan artikel sebelumnya, dimana chat box ditampilkan pada widget slidebar, kali ini chat box akan dibuat dengan efex auto hide di samping blog saat kursor mouse mengenai chat box sobat.

Kegunaan dari efek chat box auto hide ini adalah untuk meminimalkan / mengefisienkan halaman blog sobat agar terlihat lebih dinamis dan tidak terlalu panjang kebawah.

Jika sobat berminat pada efek auto hide chat box ini silahkan sobat ikuti langkah-langkah dibawah ini :

Login ke akun blog sobat masing-masing.
Pilih Tata Letak =>> Add Gedget/Tambah Gedget =>> Pilih HTML/Javascript.
Kemudian Copy kode dibawah ini :

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 25 ? 25 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()">

</div>

<div class="gbcontent">

<center>



<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=799750&boxtag=g5nje&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-799750" style="border:#ababab 1px solid;" id="cboxmain7-799750"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=799750&boxtag=g5nje&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-799750" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-799750"></iframe></div>

</div>



<br />

<div style="text-align:center">

<span style="float:right; color:#000000;"><a href="http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-chat-box-auto-hide-pada.html"

target="_blank">.: Get this widget! :.</a></span>

</div>

</center>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>

Ganti Kode yang berwarna Biru dengan Script kode Chat Box sobat.
Terakhir sobat klik Simpan. Kemudian liat hasilnya.

Demikian artikel mengenai Cara Membuat Chat Box Auto Hide Pada Blog. Semoga artikel yang saya buat ini dapat berguna dan bermanfaat bagi sobat yang membutuhkan. Jika ada kesulitan atau sobat mengalami error dalam pembuatan atau masih ada yang kurang jelas silahkan berkomentar di kolom komentar dan ChatBox. Salam Blogger.

Cara Membuat Chat Box di Blog

sumber:http://mari-berbagi244.blogspot.com

Cara Membuat Chat Box di Blog - Hai sobat blogger, bagaimana kabarnya? Baik-baik saja kan. Oke kalo begitu saya akan share artikel buat sobat mengenai Cara Membuat Chat Box di Blogger. Perlu sobat blogger ketahui, kegunaan dari chat box ini sendiri adalah sebagai buku tamu yang bisa dikatakan penting buat blog sobat, dimana pengguna buku tamu atau chat box untuk memberi jejak bagi pengunjung yang mengunjungi blog sobat.

Untuk membuat Chat Box caranya cukup mudah. Silahkan sobat blogger ikuti langkah-langkah berikut :

Silahkan sobat masuk ke URL ini : http://cbox.ws/
Klik Sign Up. Lihat Gambar dibawah.

Pada halaman Get your own Cbox, silahkan sobat isi data dengan lengkap : Cbox name – Isi sesuai selera sobat tanpa spasi. Email address – Isi dengan alamat email sobat. Password – Buat password sobat. Confirm password – Masukkan ulang password sobat. Website - Isi dengan alamat web atau blog sobat. Language - Pilih bahasa aplikasi pada menu drop down. Style - Sobat bisa merubah tampilan aplikasi sesuai selera dengan selera sobat. Cheklist I have read and do agree to the Cbox terms and conditions of service.
Setelah selesai diisi klik ‘Create my Cbox!’ Lihat contoh gambar isian aplikasi di bawah ini :

Jika pendaftara sukses akan ada ucapan dalam bahasa inggris.
Kemudian Silahkan cek inbox email sobat kemudian klik link yang ditunjukan Cbox admin yang akan menuju halaman Cbox dan silahkan sobat login masukkan Cbox name dan password sobat dan klik tanda panah di sampingnya.
Setelah login, pada control panel Cbox sobat Copy kode yang telah disiapkan buat sobat oleh Cbox. Lihat contoh gambar dibawah ini :

Cara memasang chat box ini di blog ikuti langkah-langkah berikut.

Login ke akun blog sobat.
Pilih Tata Letak =>> Add Gedget/Tambah Gedget =>> Pilih HTML/Javascript.
Kemudian Paste Kode CBox yang sudah sobat dapatkan tadi di kolom HTML/Javascrip.
Simpan.

Sekian artikel mengenai Cara Membuat Chat Box di Blog. Semoga artikel ini dapat berguna dan bermanfaat bagi sobat blogger yang membutuhkannya. Salam Blogger.

Cara Membuat Kolom / Form Contact Me Pada Blog

Cara Membuat Kolom / Form Contact Us Pada Blog

sumber:http://mari-berbagi244.blogspot.com

Cara Membuat Form Contact Me Pada Blog - Sobat blogger, kali ini saya akan share artikel Cara Membuat Kolom / Form Contact Me Pada Blog. Bagi sobat blogger mungkin membuat form contact us dapat dikatakan penting. Mengapa demikian? membuat contact form di blog, fungsinya untuk mempermudah pengunjung memberikan kritk / saran pada suatu blog. Dengan itu, kedua pihak antara pemilik suatu blog/website dan pengunjung suatu blog/website dapat menjaga privacy masing-masing karena contact form ini. Selain itu, memasang contact form juga berfungsi untuk menghindari spam yang dikirim melalui email.

Biasanya pemilik blog/website menaruh contact formnya di suatu halaman yang biasanya dinamai dengan Contact Me / Contact Us. Sayangnya blogger/blogspot belum menyediakan halaman contact me secara default. Berbeda dengan blogger, Wordpress sudah menyediakan halaman contact me secara default. Tapi sobat blogger jangan khawatir, kita dapat membuat halaman contact me sendiri dan menggunakan contact form dari layanan external suatu situs.

Daripada berlama-lama lagi, berikut langkah-langkah dalam membuat form Contact Me.

Sobat Blogger masuk ke Alamat URL ini untuk mendapatkan form Contact Me : http://www.foxyform.com/
Setelah sobat masuk ke alamat URL tersebut silahkan pilih Setting Options yang akan ditampilkan pada kolom form sobat nanti.

Cara Membuat Kolom / Form Contact Me Pada Blog

Pada kasus ini saya hanya memilih Name dan E-Mail saja.
Kemudian atur Setting-an kolom Contact Me sesuai dengan keinginan sobat.

Pada kasus ini saya memilih Background Color berwarna Putih, Font Color warna Hitam, Jenis Font Arial, dan Font Size Normal.
Setelah itu masukan Alamat Email sobat dan masukan Chapta yang ada.

Setelah itu klik tombol Create Formular.
Setelah itu Copy kode yang sudah sobat dapatkan.

Setelah itu Paste Kode yang sudah sobat dapatkan tadi di postingan blog. Sobat Paste kode yang didapat tadi di halaman HTML, bukan pada Halaman Compose.

Setelah itu Publikasikan dan lihat hasilnya.

Mudah bukan membuatnya sobat?

Semoga artikel yang saya buat ini dapat berguna dan bermanfaat bagi sobat yang membutuhkan. Jika mengalami kesulitan ataubingung silahkan berkomentar pada kolom dibawah atau pada ChatBox. Salam Blogger.

Cara Membuat Efek Bintang Berjatuhan Pada Cursor Di Blog

sumber:http://mari-berbagi244.blogspot.com

Cara Membuat Efek Bintang Berjatuhan Pada Cursor Di Blog - Sobat blogger yang ingin mempercantik tampilan blognya kali ini saya akan share artikel untuk mempercantik tampilan blog sobat, yaitu Membuat Efek Bintang Berjatuhan Pada Cursor Di blog. Animasi bintang jatuh adalah sebuah animasi kursor yang berupa bintang bertaburan yang jatuh dari cursor atau mouse sobat ketika digerakkan. Hal ini mungkin sangat menarik untuk dipasang, selain dapat mempercantik blog sobat keuntungan lainnya adalah dapat membuat pengunjung blog sobat betah bertahan lama di blog sobat untuk membaca blog sobat.

Buat sobat yang senang memodifikasi blog sobat dengan hal-hal yang unik dan berbeda mungkin perlu untuk mencoba animasi bintang berjatuhan ini. Cara membuat efek bintang berjatuhan ini tidaklah susah. Sobat hanya perlu meng-copy kode yang saya berikan ini, kemudian di paste di gedget HTML/Javascript. Oke, daripada berlama-lama lagi, silahkan sobat ikuti langkah-langkahnya dibawah ini.

Login ke akun blog sobat.
Pilih Tata Letak.
Pilih Add Gedget / Tambah Gedget.
Kemudian Pilih HTML/Javascript.
Kemudian Copy kode dibawah ini dan Paste di HTML/Javascript.

<script type='text/javascript'>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Simpan dan Lihat hasilnya.

Jika sobat ingin mengganti warna bintang berjatuhan silahkan ganti kode yang berwarna Merah dengan kode warna yang sobat inginkan. Demikian artikel tentang Cara Membuat Efek Bintang Berjatuhan Pada Cursor Di Blog. Semoga artikel dari saya dapat berguna dan bermanfaat bagi sobat blogger yang membutuhkan. Jika ada yang ditanyakan atau kurang jelas silahkan bertanya pada kolom komentar / ChatBox. Salam Blogger.

Cara Membuat Related Post / Artikel Terkait Dibawah Postingan Dengan Gambar

sumber:http://mari-berbagi244.blogspot.com

Cara Membuat Related Post / Artikel Terkait Dengan Gambar - Hai sobat blogger, gimana kabarnya nih? Maaf baru bisa posting lagi dikarnakan kemaren-kemaren saya lagi sibuk dengan tugas kuliah yang menumpuk. Jika kemaren saya ada membuat artikel mengenai Cara Membuat Artikel Terkait Dibawah Postingan, kali ini saya akan membuat artikel mengenai Cara Membuat Related Post / Artikel Terkait Dibawah Postingan Dengan Gambar. Untuk lebih jelasnya silahkan sobat liat gambar dibawah ini.

Jika sobat blogger ingin memasang / menggunakan Artikel Terkait / Related Post ini di blog sobat, silahkan ikuti langkah-langkah cara membuatnya dibawah ini :

Sobat Login ke akun blog sobat.
Pilih Template =>> Edit HTML. (Saya sarankan untuk mem-backup dulu template sobat untuk menghindari hal-hal yang tidak diinginkah / error)
Sobat cari kode berikut </head> Untuk mempercepat pencarian sobat tekan Ctrl+F di kotak script Edit HTML sobat.
Kemudian letakan kode dibawah ini tepat diatas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
</b:if>

Jangan disimpan dulu template sobat.
Kemudian sobat cari lagi kode <data:post.body/> Untuk mempermudah pencarian gunakan Ctrl+F di kotak Edit HTML. (biasanya ada 3 kode seperti ini. Jika memang benar, pilih kode yang ke 2)
Copy kode berikut, dan letakan di bawah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://mari-berbagi244.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>

Kode yang berwarna Orange bisa sobat ganti dengan kata-kata sobat sendiri apakah Artikel Terkait / Related Post.
Kode yang berwarna Merah adalah kode banyaknya artikel terkait yang akan di tampilkan di blog sobat, jadi modifikasikan sesuai dengan keinginan dan kebutuhan sobat.
Kode yang berwarna Biru sobat ganti dengan alamat URL blog sobat.
Kemudian Simpan Template dan lihat hasilnya.

Demikian artikel yang saya buat mengenai Cara Membuat Related Post / Artikel Terkait Dibawah Postingan Dengan Gambar. Semoga artikel yang saya buat ini dapat bermanfaat dan berguna buat sobat blogger yang membutuhkan. Jika ada yang ingin ditanyakan atau mengalami error dalam pembuatan silahkan berkomentar di kolom komentar atau di chatbox. Terima kasih dan Salam blogger.

Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog

sumber:http://mari-berbagi244.blogspot.com

Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog - Sobat blogger, jika sebelumnya saya ada membuat artikel mengenai Cara Membuat Efek Bintang Berjatuhan Pada Cursor Di Blog, kali ini saya akan share artikel yang sedikit berbeda dengan artikel sebelumnya, yaitu Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog.

Oke, langsung saja. Jika sobat blogger ingin menggunakannya di blog sobat, ikuti langkah-langkah berikut.

Login ke akun blog sobat.
Pilih Tata Letak =>> Add Gedget / Tambahkan Gedget.
Pilih HTML/Javascript.
Kemudian Copy kode dibawah ini, kemudian Paste di HTML/Javascript.

<script type="text/javascript">// <![CDATA[
var colours=new Array("#0000FF", "#0BE019", ":#0A0DE6", ":#FF0000", "#66FFFF"); // Warna untuk atas, kanan, bawah dan kiri border dan background gelembung
var bubbles=140; // jumlah maksimum gelembung pada layar

var x=ox=400;
var y=oy=200;
var swide400;
var shigh=300;
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>

Kode yang berwarna Biru adalah kode yang bisa sobat ganti untuk warna Gelembung / Bubbles. Kode yang berwarna Merah adalah kode jumlah maksimum gelembung yang ditampilkan pada layar.
Simpan dan lihat hasilnya.

Demikian artikel mengenai Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog. Semoga artikel ini dapat berguna dan bermanfaat. Salam blogger.

Cara Membuat / Memasang Widget Burung Twitter Terbang Di Blog

Related Posts:

Cara Membuat Chat Box Auto Hide Pada Blog

Related Posts:

Cara Membuat Chat Box di Blog

Related Posts:

Cara Membuat Kolom / Form Contact Me Pada Blog

Related Posts:

Cara Membuat Efek Bintang Berjatuhan Pada Cursor Di Blog

Related Posts:

Cara Membuat Related Post / Artikel Terkait Dibawah Postingan Dengan Gambar

Related Posts:

Cara Membuat Efek Gelembung Udara / Air Bubbles Pada Cursor Blog

Related Posts: