Tempat Tutorial Blogspot, SEO, HTML5, CSS3, Facebook, Twitter, Software, Game, Motivasi, Tips dan Trik.

Articles by "JQuery"


Hallo Sobat Blogger, kali ini saya akan share bagaimana Cara Menambahkan Emoticon Pada Blog , Emoticon Ini menggunakan konsep JQuery. Ini adalah fasilitas emoticons otomatis yang dapat merubah simbol :), :D, :P, menjadi sebuah gambar yang telah ditentukan. Oke langsung saja lihat langkah langkahnya dibawah ini : 

langkah langkah

1. Masuk ke Blogger > Dashboard Blogger > Template > Edit HTML. Cari kode ]]></b:skin>, agar lebih cepat, gunakan fasilitas Find ( CTRL+F ) lalu pastekan script dibawah ini  tepat diatas kode ]]></b:skin>. 

 /* Emoticon Smiley -------------------------------------------- */ 
.emoWrap {
  background-color:#fff;
  border:2px solid#0B6138;border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
  padding:10px 14px;
  color:black;
  font:bold 12px Tahoma,Arial,Sans-Serif;
  text-align:center;
}

img.emo, input.emoKey {
  display:inline-block; /* Penting! */
  *display:inline;
  vertical-align:middle;
}

input.emoKey {
  border:1px solid #ccc;
  background-color:white;
  font:bold 11px Arial,Sans-Serif;
  padding:1px 2px;
  margin:0px 0px 0px 2px;
  color:black;
} 

2. Kemudian, Cari kode </head>. Lalu pastekan script dibawah ini tepat diatas kode </head>. 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
    putEmoAbove = "iframe#comment-editor",
    emoMessage = "Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode.";
//]]>
</script>
<script src='https://sites.google.com/site/airalokablogspotcom/download/Emoticon%20Smiley.js' type='text/javascript'/>

3. Save/Simpan template

Selamat Mencoba :D

Facebook banyak digunakan para blogger untuk lebih memperkenalkan hasil postingan di blog/website yang dimilikinya salah satunya dengan cara membuat Fans Page blog/web itu sendiri nah sobat blogger. Kali ini Kenama akan menyajikan kepada anda bagaimana cara Membuat Facebook Slide Box Widget jQuery Effect agar Fans Page Facebook Blog/web anda dapat tampil di blog/web anda. untuk previewnya kurang lebih seperti gambar dibawah ini :



LANGKAH LANGKAHNYA

1. Seperti biasa Login dulu ke akun Blogger sobat
2. Kemudian klik "Template" Klik "Edit HTML"
3. Jangan Lupa Cetang "Expand Template Widget"
4. Cari Kode 
<head> Gunakan Ctrl+F untuk mempercepat pencarian
5. Copy Paste Kode JavaScript  Dibawah ini Tepat dibawah kode  
<head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

6. Save Template
7. Kemudian Copy paste Kode HTML dibawah ini, Caranya ;
    a.  Klik Tata Letak
    b.  Klik Add Widget
    c.  Klik HTML/JavaScript dan taruh Kode dibawah ini :

<!-- Facebook Widget Start --><script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function() {jQuery(".rblikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});/*]]>*/</script><style type="text/css">.rblikebox{background: url("URL GAMBAR") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 42px;width: 245px;z-index: 9999999;position:fixed;right:-250px;top:20%;}.rblikebox div{border:none;position:relative;display:block;}.rblikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 999;}.rblikebox span a{color: gray;text-decoration:none;}.rblikebox span a:hover{text-decoration:underline;}</style><div class="rblikebox"><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/kenama.blog&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div><a href='http://Kenama.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqBcEmrpNpcPoIpSUXHDITDhPT0qN8vYo3lREN0HTHh6uacExVe4qkKQE6-nkoYWuRV8yLYYKAmQhW7lDGu17z95gr0UejBssKXdomTghRUC6qJ7Yp-2ZinM2v7jKDdEcPyOA5zrA2NJ4/s1600/1x1juice.png'/></a></div><!--Realcombiz Widgets by realcombiz.com --><!-- Facebook Widget End -->

8. Save and enjoy


Note : Ganti Tulisan URL GAMBAR dengan salah satu url gambar dibawahGanti Tulisan kenama.blog dengan alamat Fans Page facebook Sobat

URl gambar



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6c5U-CfYLV8uPO_X8vO3DXGyH_Qc6SthUE_Tj7jpR3SH8CfOXa1NcgPuD6gRCMkYdClg_-lBY7ydx-ARUOh8aRRW3mbcECkEIKs9rl8KxOePH32IdY6r_hpmljR4DrYtE4QDAI35UXng/s1600/rb%20facebook%20slide%20out%20widget%201.png 




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-NGhOMuqomCXlE0-lecGr8iSr4eRke5kb4X5ZyCoPCHBbBJiNRVgyeaoLK9pE3zS_4AZr8zlyWxQh-c8oWlgdsi2hWeyOZM3THDGahbopadriGh0esZSXdFNrSDmicFivtAeB0CeqFg/s1600/rb%20facebook%20slide%20out%20widget%202.png 




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzSfGWjd4BQrDSvnjtBh1fe1s7k51_01z2YUMpgJultU_WonDeKEUJVXV12PW8fkg_3mFRiVg4Krvhm2zxi5Mqeeo7XG-mdMjh4oaCCzq8QR-9CStUwHTOYo1OHk2j6DqyY-ftCdujxUg/s1600/rb%20facebook%20slide%20out%20widget%203.png 

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget