Cara Membuat Button/Tombol Efek Animasi Bubble Menggunakan CSS3

Oleh Unknown 9/08/2011 10 komentar

Cara Membuat Button/Tombol Efek Animasi Bubble dengan Menggunakan CSS3 - Pastinya sobat blogger sudah pernah melihat di blog lain ada dipasang button/tombol dengan animasi bubble atau seperti ada gelembung-gelembung balon didalam button/tombol tersebut. Button/tombol biasanya dibuat untuk meletakkan link download atau link lain tergantung kemauan si pengguna atau si pemasang tombol. Pada tips blogging ini saya mau berbagi mengenai cara membuat button/tombol dengan efek animasi bubble menggunakan CSS3. Namun sebelumnya silahkan dilihat dulu preview dari button animated bubble yang dibuat menggunakan CSS3 dibawah ini.

Demo BIG Demo MEDIUM Demo SMALL

Button/tombol yang dibuat terdiri dari 3 size atau ukuran yaitu besar, sedang dan kecil. Untuk kode button/tombolnya seperti yang saya tuliskan dibawah ini yang terbagi dalam 4 warna pilihan, sobat tinggal pilih ukuran dan warna yang sesuai yang diinginkan.

Kode button/tombol besar :

<a class="button big blue" href="LINK">LINKNAME</a>

<a class="button big green" href="LINK">LINKNAME</a>

<a class="button big orange" href="LINK">LINKNAME</a>

<a class="button big gray" href="LINK">LINKNAME</a>

Kode button/tombol sedang :

<a class="button blue medium" href="LINK">LINKNAME</a>

<a class="button green medium" href="LINK">LINKNAME</a>

<a class="button orange medium" href="LINK">LINKNAME</a>

<a class="button gray medium" href="LINK">LINKNAME</a>

Kode button/tombol kecil :

<a class="button small blue" href="LINK">LINKNAME</a>

<a class="button small green" href="LINK">LINKNAME</a>

<a class="button small orange" href="LINK">LINKNAME</a>

<a class="button small gray" href="LINK">LINKNAME</a>

Ganti tulisan Link dengan link referensi tujuan jika button/tombol animasi bubble tersebut diklik, kemudian ganti juga tulisan Link-Name dengan nama button atau tulisan yang akan terlihat didalam button. Untuk penempatan kodenya bisa ditempatkan didalam postingan atau kalo mau meletakkannya didalam template maka letakkan dimana saja atau diantara kode <body> dan kode </body> pada template anda. Eeiiitt…sabar jangan di save dulu templatenya karena masih ada kode CSS yang harus sobat masukkan pada template agar button/tombol dengan efek animasi bubble tadi berfungsi dengan baik.

.button{
 font:15px Calibri, Arial, sans-serif;
 text-shadow:1px 1px 0 rgba(255,255,255,0.4);
 text-decoration:none !important;
 white-space:nowrap;
 display:inline-block;
 vertical-align:baseline;
 position:relative;
 cursor:pointer;
 padding:10px 20px;
 background-repeat:no-repeat;
 background-position:bottom left;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png');
 background-position:bottom left, top right, 0 0, 0 0;
 background-clip:border-box; 
 -moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;  
 -moz-box-shadow:0 0 1px #fff inset;
 -webkit-box-shadow:0 0 1px #fff inset;
 box-shadow:0 0 1px #fff inset;
 -webkit-transition:background-position 1s;
 -moz-transition:background-position 1s;
 transition:background-position 1s;
}
.button:hover{
 background-position:top left;
 background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
 bottom:-1px;
}

/* The three buttons sizes */

.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* BlueButton */

.blue.button{
 color:#0f4b6d !important;
 border:1px solid #84acc3 !important;
 background-color: #48b5f2;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'),
 -moz-radial-gradient( center bottom, circle,
 rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
 -moz-linear-gradient(#4fbbf7, #3faeeb);
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'),
 -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
 background-color:#63c7fe;
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'),
 -moz-radial-gradient( center bottom, circle,
 rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
 -moz-linear-gradient(#63c7fe, #58bef7);
 background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'),
 -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
 from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* Green Button */

.green.button{
 color:#345903 !important;
 border:1px solid #96a37b !important; 
 background-color: #79be1e;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
 background-color:#89d228;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

/* Orange Button */

.orange.button{
 color:#693e0a !important;
 border:1px solid #bea280 !important; 
 background-color: #e38d27;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
 background-color:#ec9732;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

/* Orange Button */

.gray.button{
 color:#525252 !important;
 border:1px solid #a5a5a5 !important; 
 background-color: #a9adb1; 
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
 background-color:#b6bbc0;
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
 background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmAjwKskD730HPWWABcfofUio4htVsKdzZfQuFFZzo0fRaIyitQg1zdvmk_fbfRY-dZ93MW2DAAe7Y_lgk8-pzoiiIiKOfyuMa9fsY_gTSGyj6kX7RAFx-FAapxbB5aHt5XMduBtA6cLDx/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Copy kode CSS diatas kemudian paste tepat diatas kode ]]></b:skin> pada template anda. Nah sekarang barulah SAVE template anda dan coba lihat hasilnya. Dengan menggunakan button/tombol efek animasi bubble ini pastinya button yang dibuat jadi kelihatan keren dan menarik. Selamat mencoba

10 komentar untuk "Cara Membuat Button/Tombol Efek Animasi Bubble Menggunakan CSS3"

agen xamthone plus bandung22 September 2011 pukul 13.14
waahh ternyata masih banyak yang mesti dipejari nich,,,,
BalasHapus
Balasan
obat alami batu ginjal22 September 2011 pukul 13.16
ilmu yang sangat bermanfaat nich,,, langsung saja yuk ke tkp....
BalasHapus
Balasan
Djawa26 Oktober 2011 pukul 01.37
ini untuk blogger ya.,? klo untuk wp gmn gan.,?
BalasHapus
Balasan
Uzumaki Lovers6 November 2011 pukul 19.00
Mas, kalo mau dimasukin kedalam postingan (didadikan link download), cara masangnya gimana? (kodenya diletakan dimana, saya masih belum jelas)
Maaf ya mas, saya masih newbie jadi mohon bimbingannya :);)
BalasHapus
Balasan
tutorial blog | tips blog | seo blogspot4 Februari 2012 pukul 19.40
saya mau coba ya gan, terima kasih telah di share
BalasHapus
Balasan
blogger bondowoso14 Februari 2012 pukul 13.33
silaturahmi sob
BalasHapus
Balasan
Deppyna9 Maret 2012 pukul 08.51
thank gan....
BalasHapus
Balasan
Indah Iswara12 April 2012 pukul 01.04
wahhh.. sangat bermanfaat, tengkyu
BalasHapus
Balasan
Rendy Note19 Agustus 2012 pukul 11.04
Nice Share Mas :)
Di tunggu Followback dan kunjungan nya :)
www.cheatermaninjau.net :D
BalasHapus
Balasan
Unknown13 September 2012 pukul 15.14
wah boleh juga nih artikel , ty ya mas :D
kunjungi juga blog saya Maharandhibk.blogspot.com
BalasHapus
Balasan

Tambahkan komentar