Subscribe to Revolution Church

Makalah Keperawatan

Blog Accessories

Blogger Pemula

Showing posts with label Blog Accessories. Show all posts
Showing posts with label Blog Accessories. Show all posts

Sunday, July 24, 2011

Memasang Emoticon Smiley Untuk Komentar Pengunjung di Blogspot

1 comments
Assalamualaikum Wr. Wb.

Memasang Emoticon Smiley Untuk Komentar Blog
Semakin meningkatknya para komentator di blogger dan semakin meningkatnya pula keinginan sobat blogger untuk mengubah tampilan di area komentar atau menambah pernak-pernik lainya. Maka dari itu saya juga ingin membuat pernak-pernik komentar di blogger dengan Emoticon Smiley sehingga para komentator bisa mengexpresikan ucapanya dengan sebuah gambar Emoticon Smiley.


Nach.. posting saya kali ini yaitu cara memodifikasi Blogspot sobat Blogger agar tampak menarik, tapi kali ini saya akan share tentang cara Memasang Emoticon Smiley Untuk Komentar Blog.

Lihat gambar dibawah ini :

:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*
:|8-}~x(:-tb-(:-Lx(=))


Gambarnya kurang lebih seperti diatas, teks atau tulisan yang disamping kanan gambar adalah symbol yang jika ditulis di kotak komentar akan berubah menjadi gambar yang ada disamping kirinya.

Okey....capeg juga low cerita panjang lebar..!! Hufttttt....... :D
Jika sobat blogger tertarik untuk memasangnya silahkan ikuti langkah-langkah berikut :
  • Seperti biasa Log in ke Blogger anda. => Blogger.com
  • Pilih Tata Letak/Edit HTML.
  • Jangan lupa centang pada Expand Widget Template.
  • Cari Kode </body> (Gunakan saja pencarian cepat => Ctrl + F) 
  • Copy paste kode Script di bawah ini. Taruh kode Script di bawah ini tepat di atas kode </body>

<script src='http://ary-pratama.googlecode.com/files/smiley.js' type='text/javascript'/>

  • Kalau sudah, sobat cari kode seperti di bawah ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>

  • Kemudian selipkan kode Skript di bawah ini diantara kode berwarna biru dan orange atau tepatnya di bawah kode <p class='comment-footer'>

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>


  • Nah...kalou sudah, Simpan hasil kerja sobat...dan lihat hasilnya.
Bambua*09

Menampilkan Post & Comment Counter Di Blogspot

0 comments
Assalamualaikum Wr. Wb.
Hay...Jumpa lagi dengan sobat blogger, kali ini saya akan share salah satu cara memodifikasi blogspot tepatnya memasang Blog Accessories pada blog sobat.

Salah satu Blog Accessories yang saya maksud tadi adalah cara Membuat Post & Comment Counter Di Blog dengan menggunakan kode script. 

Dengan menggunakan kode script yang saya tampilkan dibawah, dengan otomatis jumlah posting yang telah dipublikasikan akan muncul pada tempat yang anda inginkan di blogspot sobat, misalnya di sidebar blog soba. Sama halnya dengan comment counter, dengan otomatis jumlah comment akan muncul di Blog sobat.

Langsung saja ikuti langkah-langkah berikut :
  • Seperti biasa Log in ke Blogger anda [klik] disini.
  • Pilih Tata Letak/Layout.
  • Pada halaman Page Element/Elemen Laman.
  • [Klik] Add a Gadget.
  • Pilih HTML/Javascript.
  • Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.

Script Post Counter
<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10)
+ '</b><br>');}</script>
<script src="http://namablogsobat.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

Script Comment Counter
<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t +
'</b><br>');}</script>
<script src="http://namablogsobat.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

  • Ganti tulisan yang berwarna merah "http://namablogsobat.blogspot.com/"  dengan URL Blog sobat.
  • Kemudian Save hasil kerja sobat,,,, Coba sobat lihat hasilnya..!!
Semoga bermanfaat...

Bambua*09

Referensi:
EnaL Rhay SyahRinggan Next..>>

Menambahkan Accessories CBox / Buku Tamu di Samping Blog

0 comments

Assalamualaikum Wr. Wb.
Hay sobat blogger.....kali ini saya ingin berbagi pengetahuan sekalian ingin share cara membuat CBox pada blog yang biasanya disebut dengan Buku Tamu,,,Hahayyyy....

Tapi kali ini CBox yang saya akan share yaitu CBox atau biasanya disebut dengan Buku Tamu bukan  yang  sering kali kita lihat di area widget pada blog, Namun CBox yang akan saya Share yaitu CBox yang tepatnya  berada di posisi samping blog sobat.....

Okey...Jika sobat blogger tertarik dengan Cara Membuat CBox / Buku Tamu di Samping Blog ikuti langkah-langkahnya....!!!!

  • Seperti biasa Log in ke Blogger anda [klik] disini.
  • Pilih Tata Letak/Layout.
  • Pada halaman Page Element/Elemen Laman.
  • [Klik] Add a Gadget.
  • Pilih HTML/Javascript.
  • Copy code di bawah ini dan paste ke dalam HTML/Javascript tersebut.


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:200px;
width:30px;
float:left;
cursor:pointer;
background:url('http://th387.photobucket.com/albums/oo318/cem_ply/th_buku-tamu_03.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #F5F5F5;
background:#000000;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www3.cbox.ws/box/?boxid=3261541&amp;boxtag=f2qtm9&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3261541" style="border:#0A19F7 1px solid;" id="cboxmain3-3261541"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www3.cbox.ws/box/?boxid=3261541&amp;boxtag=f2qtm9&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3261541" style="border:#0A19F7 1px solid;border-top:0px" id="cboxform3-3261541"></iframe></div>
</div>
<!-- END CBOX -->
<br/>
<a href="http://forantum.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Hide]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

  • Sobat juga bisa merubah warna dan posisi tempatnya sesuai keinginan sobat.
  • [Klik] Save...!! 
  • Selesai dech....Oya, harap tinggalkan Commennya yach...!!

Semoga bermanfaat...!!
Bambua*09

Referensi:
EnaL Rhay SyahRinggan Next..>>

Cara Mengganti Icon Cursor Keren Pada Blogspot

0 comments
Assalamualaikum Wr. Wb.
Selamat datang di Blog Bambua*09.....!! Mau modifikasi blogger anda....???
Nach sekarang saya nemuin cara memodifikasi blogger.

Dalam posting kali ini saya akan membahas tentang cara memodifikasi blogger anda, Cara yang satu ini termaksud g' sulit kok... Kamu ikutin aja langkah-langkah Cara Mengganti Icon Cursor Pada Blog.

Nach Langkah-langkahnya seperti biasa....yang harus anda lakukan..:

  1. Log in ke Blogger Anda.
  2. Pilih Tata Letak.
  3. Tambah Gadget dan pilih HTML/JavaScript.
  4. Copy paste code script di bawah ini....(paste ke HTML/JavaScript anda)



      * Ket :
  • Ganti tulisan "http://img2.enal.com/img/icon18_rhay_allbkgsyahrenggan.png" dengan alamat URL Cursor Anda...

     5.  Save...Selesai dech.....!!!!

         Coba dech kamu lihat hasilnya......!!!

Bambua*09

Referensi:
EnaL Rhay SyahRinggan Next..>>

Menambahakan Animasi Tulisan Pada Kursor (Berputar-putar) di Blogspot

0 comments
Cara Membuat Animasi Tulisan Pada Kursor (Berputar-putar)

Assalamualaikum Wr. Wb.
Nah...Sekarang saya mau ngasih tau bagaimana Cara Membuat Tulisan Bergerak Pada Kursor (Animasi) Blog... Sesuai dengan permintaan dari sahabat blogger yaitu Cara Membuat Animasi Tulisan Pada Kursor (Berputar-putar) pada blog.

Malas rasanya nge-blogging tanpa ada modifikasi-modifikasi keren pada blog anda. Maka dari itu di posting kali ini saya akan membahas tentang Cara Membuat Animasi Tulisan Pada Kursor (Berputar-putar) pada blog.

Contohnya bisa anda lihat pada gambar di bawah ini..:


Langka-langkah yang harus anda lakukan..:
  1. Log in ke Blogger Anda.
  2. Pilih Tata Letak.
  3. Tambah Gadget dan pilih HTML/JavaScript.
  4. Copy paste code script di bawah ini....(paste ke HTML/JavaScript anda)
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;



/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "***eNaL Rhay SyahRingGan***";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>
* Ket :
  • Ganti  tulisan yang berwarna merah (***eNaL Rhay SyahRingGan***)dengan tulisan yang anda inginkan.
  • Ganti  tulisan yang berwarna merah (#999) dengan warna yang anda inginkan.
Lalu simpan...selesai dech.....!!

Coba Anda lihat hasilnya..n' selipkan komentar sobat sebagai pelengkap posting ini.

Bambua*09

Referensi:
EnaL Rhay SyahRinggan Next..>>

My Facebook

Statistik

 
BAMBUA*09. Copyright 2008 All Rights Reserved by Bambua*09 Blogger Template by BAMBUA*09