" Hi guys, do you know about Facebook Profil Badge ? Facebook Profil Badge is like the profile with image ourself that similiar with Blogger Profile. This badeg just to add the interactive point. Hehehe..

So, if you all interest to want try, watch this more.
Follow this steps :
1. First login to your Facebook account
2. Then click this "profile badge"


3. Click Edit Badge, and will out the screen like this,


In this you can edit your
Facebook Profil Badge,
Layout, you can choose :
Vertical
Horizontal
2 Columns

Items, you can choose items that will show in the Profil Badge :
Profile pic
Name
Networks
Hometown
Current City
Email
Screen name
Birthday
Mobile number
Websites
Status updates
Recent pics by me
Upcoming events
Latest notes
Posts

4. After that save
5. And click Blogger Image, not Typepade or other


You can choose to,
1. Just click Add Widget, and that profile widget will automatically available in your blog
2. Or copy the code in
Edit Content, and paste anywhere in your blog

6. Finish
" Finally I found the coding for "Random Post" really can work properly. Hehehe...


And now I will share with you all, follow this steps :
1. Login to your blogger.
2. Click Layout > Page Element
3. Click Add Widget
4. Choose HTML/Javascript
5. Then paste this code to that widget

<div id="myLuckyPost"></div> <script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'View Random Post'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

6. Save, and look for the result

Everytime you click that widget, will out random articel from your blog. Hehe.. Very interesting.

Nb : It work 100%.
Tonight, I will introduce you about bookmark. What is it, bookmark? For who don't know, bookmark is the button for get the article from other blogger to publish in our blogger. Like share.

If you interest, just follow this steps :
1. Visited this site www.addthis.com


2. Then chhose blogger in first step
3. Then choose share in the second step
4. Skip in the third step
5. And click Get Your Button in the forth step
6. Then copy the code at the bottom

For the next...
1. Login to your blogger.
2. Click Layout > Edit HTML
3. Check the Expand Widget Templates
4. Then paste that code, under <div class='post-footer'>
5. Save

And will be out this button, under each of your postings.


" Hi, everyone. This morning, I will discuss about how to write a word like this.


Have you ever heard? Must have known many from the senior bloggers. Hehe ...
Here I will examine return for the beginner bloggers/ newbie(like me), who want to learn :)

Just do this steps, and you ASAP get the result,

You just give this code <del> and </del>, at the beginning and the end from a word.

For the result :

I don't like an apple.

That's it. You can try. And happy blogging :) "
Hei, fren. After I came there, I finally understood what it was "Page Peel". Previously I was a little confused. Understandably still Newbie. Hehe ..
For those of you who do not know what it was Page Peel, Page Peel is the effect of grooves on the corner of the page. If you still do not understand, then try it and see the effects. Let's try.

Follow this steps :

1. First login to your blogger.
2. Click Layout > Edit HTML.
3. And paste this code

script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

upper this code <b:skin><![CDATA[

4. Then paste this code

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

upper this code ]]></b:skin>

5. For last paste this code

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/namafeedkamu'>
<img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

under this code <body>

Nb : change that red sentence with your own feed.

6. Save.
Alright, now I will discuss about how to add "4 in 1 search" box, like this picture.


You can search many site with just one searching box. Also this widget can save space on your blog page. Hehe...
So, if you interest with this widget just follow this steps
1. First, login to your blooger account.
2. Click Layout > Add a Gadget > HTML/Javascript.
3. Then paste this code into that widget,

<div id="pm-search"> <ul> <li id="li-h" class="pm-search-selected" onclick="selectH()">here</li><li id="li-g" class="pm-search-unselected" onclick="selectG()">google</li><li id="li-b" class="pm-search-unselected" onclick="selectB()">blogger</li><li id="li-t" class="pm-search-unselected" onclick="selectT()">technorati</li> </ul> <div id="pm-search-h"> <form action="http://purplemoggy.blogspot.com/search" method="get"> <input id="pm-f-h" value="" name="q" size="15" type="text"/> <input value="Search" type="submit"/> </form> </div> <div id="pm-search-g"> <form action="http://blogsearch.google.com/blogsearch" method="get"> <input id="pm-f-g" value="" name="as_q" size="15" type="text"/> <input value="Search" type="submit"/> <input value="purplemoggy.blogspot.com" name="bl_url" type="hidden"/> </form> </div> <div id="pm-search-b"> <form action="http://search.blogger.com/" method="get"> <input id="pm-f-b" value="" name="as_q" size="15" type="text"/> <input value="Search" type="submit"/> <input value="purplemoggy.blogspot.com" name="bl_url" type="hidden"/> </form> </div> <div id="pm-search-t"> <form action="http://www.technorati.com/search.php" method="post"> <input id="pm-f-t" maxlength="255" name="s" size="15" type="text"/> <input value="Search" type="submit"/> <input value="searchlet" name="sub" type="hidden"/> <input value="purplemoggy.blogspot.com" name="from" type="hidden"/> <input value="n" name="authority" type="hidden"/> <input value="n" name="language" type="hidden"/> </form> </div> </div>

Nb: Don't forget to change "http://purplemoggy.blogspot.com" sentence with your url address.

4. Save
5. Then click Edit HTML, and paste this code

/** css for the search box */ div#pm-search ul { /* unordered list */ margin-top: 0; margin-right: 0; margin-left: 0px; margin-bottom: 5px; padding: 0; } div#pm-search li { /* each list element */ list-style-type: none; /* don't edit this */ display: inline; /* don't edit this */ cursor: pointer; /* don't edit this */ margin-top: 0; margin-bottom: 0; margin-right: 5px; margin-left: 0px; text-indent: 0px; padding: 0; } div#pm-search form { /* the search form */ margin: 0; padding: 0; } div#pm-search-h { display: block; /* don't edit this */ } div#pm-search-g, div#pm-search-b, div#pm-search-t { display: none; /* don't edit this */ } div#pm-search input { /* the textbox and submit button */ background-color: transparent; border: 1px dotted #999; color: #999; } .pm-search-selected { /* which search service is currently selected */ color: #999; border-bottom: 1px dotted #999; } .pm-search-unselected { /* which search services are not selected */ color: #777; border-bottom: 1px dotted #777; }

under
<b:skin><![CDATA[/*

6. Then paste this code

<script type='text/javascript'> //<![CDATA[ /*********************************************** * Javascript functions for the search box * made by PurpleMoggy :) * http://purplemoggy.blogspot.com/ ***********************************************/ var search_which_one = "pm-f-h"; function selectH() { document.getElementById('li-h').className = 'pm-search-selected'; document.getElementById('li-g').className = 'pm-search-unselected'; document.getElementById('li-b').className = 'pm-search-unselected'; document.getElementById('li-t').className = 'pm-search-unselected'; document.getElementById('pm-search-h').style.display = 'block'; document.getElementById('pm-search-g').style.display = 'none'; document.getElementById('pm-search-b').style.display = 'none'; document.getElementById('pm-search-t').style.display = 'none'; document.getElementById('pm-f-h').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-h"; } function selectG() { document.getElementById('li-h').className = 'pm-search-unselected'; document.getElementById('li-g').className = 'pm-search-selected'; document.getElementById('li-b').className = 'pm-search-unselected'; document.getElementById('li-t').className = 'pm-search-unselected'; document.getElementById('pm-search-h').style.display = 'none'; document.getElementById('pm-search-g').style.display = 'block'; document.getElementById('pm-search-b').style.display = 'none'; document.getElementById('pm-search-t').style.display = 'none'; document.getElementById('pm-f-g').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-g"; } function selectB() { document.getElementById('li-h').className = 'pm-search-unselected'; document.getElementById('li-g').className = 'pm-search-unselected'; document.getElementById('li-b').className = 'pm-search-selected'; document.getElementById('li-t').className = 'pm-search-unselected'; document.getElementById('pm-search-h').style.display = 'none'; document.getElementById('pm-search-g').style.display = 'none'; document.getElementById('pm-search-b').style.display = 'block'; document.getElementById('pm-search-t').style.display = 'none'; document.getElementById('pm-f-b').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-b"; } function selectT() { document.getElementById('li-h').className = 'pm-search-unselected'; document.getElementById('li-g').className = 'pm-search-unselected'; document.getElementById('li-b').className = 'pm-search-unselected'; document.getElementById('li-t').className = 'pm-search-selected'; document.getElementById('pm-search-h').style.display = 'none'; document.getElementById('pm-search-g').style.display = 'none'; document.getElementById('pm-search-b').style.display = 'none'; document.getElementById('pm-search-t').style.display = 'block'; document.getElementById('pm-f-t').value = document.getElementById(search_which_one).value; search_which_one = "pm-f-t"; } //]]> </script>

under
<head>

7. Then save.

Wew ... long article. Wkwkwkwk... But that's okay. I hope this article can be useful. And do not forget to comment y. Hehe..


Nb: thx to purple moggy, I learned a lot from U, hehe..
"Yosh, tonight I will posting about Blogroll.. So, do you know about blogroll ???


Hmm.., if you don't know about blogroll. I will explain it. Blogroll is a list of blogs on a blog (usually placed in the sidebar of a blog) that reads as a list of recommendations by the blogger of other blogs. That is the sense that I quote from the wiki. If you still do not understand, this is an example of the image.


So if you interest to know how that coding, follow this steps :
* Blogroll with Textarea :
1. Login to your acoount blogger.
2. Click Layout
3. Click Add a Gadget
4. Choose HTML/ Javascript
5. Paste this code

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

Nb :
- width: 200px, you can change it for long of blogroll
- height: 200px, you can change it for high of bloggroll
- #link1, #link2, #link3,you can change it for the list of your links

Nah, this steps for Blogroll with marquee.
Blogroll with Marquee :
1. Login to your acoount blogger.
2. Click Layout
3. Click Add a Gadget
4. Choose HTML/ Javascript
5. Paste this code

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>


Nb :
- up, you can change it with right, left, down
- 100, you can change it for high of bloggroll
- 2, for the speed of that blogroll
- #link1, #link2, #link3,you can change it for the list of your links

Now you already know. So, good luck. Don't forget to comment ya. Hehe...
Wehehehe..... Hi, jumpa lagi. Kalian tahu kan tentang "Comment Emoticons"? Emoticons yang muncul dibawah sebuah postingan artikel. Yang seperti gambar dibawah ini nich...


Nah, sudah tahu kan ? Nah bagi kalian yang ingin memiliki comment emoticons seperti diatas, ikuti langkah-langkah sederhana sebagain berikut :
1. Pertama kotak komen kalian harus sudah muncul dibawah postingan artikel kalian, bagi yang belum lihat petunjuk di artikel ini "Comment Box under Post".
2. Jika sudah, lanjut ke dalam Edit HTML.
3. Kopikan kode ini

<script src='http://mizwar.blog.googlepages.com/senyum.js' type='text/javascript'/>

diatas kode
</body>

4. Kemudian save.
5. Masih di halaman Edit HTML, centang "Expang Widget", dan cari kode ini

<p class='comment-footer'>

Setelah ketemu, kopi kode ini diatas kode tadi..

<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>

6. Save. Selesai dach. Hehe..


Huf, lelah juga posting panjang, semoga bermanfaat buat para pembaca...
"Nyahahahahaha....., akhirnya saya memposting sebuah artikel tentang blogger, setelah beberapa saat lalu hanya memposting tentang Animes dan iklan2.....

Nah, sekarang saya akan membahas tentang kotak komen yang muncul langsung dibawah postingan sebuah artikel. Mungkin kalian sudah pernah membaca mengenai artikel seperti ini, dari senior-senior blogger kita. Maka dari itu, disini saya hanya membahasnya kembali.
Bagi kalian yang belum pernah mengetahuinya, dan ingin mencobanya silahkan ikuti langkah-langkah dibawah ini :
1. Login ke account bloggermu.
2. Klik menu Setting > Comments, maka akan ada pilihan seperti ini


3. Kemudian pilihlah pilihan yang ketiga.
4. Dan save.

Kalau setelah melakukan tahapan tadi, kotak komen kalian belum muncul juga. Maka kalian dapat melakukan langkah manual berikut ini :
- Login ke account blogger anda. *tentu saja*
- Klik Layout > Edit HTML
- Centang pada checkbox "expand template widget".
- Kemudian cari kode berikut, dan karena layout-layout masing blogger berbeda, maka konsentrasikan pencarian hanya pada kalimat berwarna pink saja

<p class='comment-footer'>
<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>
</p>

Dan ganti semua kode diatas, dengan kode dibawah ini

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

Jika masih tidak keluar kotak komentarnya, maka silahkan kunjungi blognya Kang Rohman.

Sekian dari saya, semoga dapat membantu para pembaca yang belum mengetahuinya."