BACK UP: Tips and Trick for Blogs

Showing posts with label Tips and Trick for Blogs. Show all posts

Haloooo sobat blogger sekalian. Setelah lama ga posting lagi. Karena sekarang sudah mulai kerja. Sibuk. Pulang kerja capek. Udah ga sempet ngerawat blog lg. Sekarang aq sempatkan waktu untuk posting sebuah artikel untuk menambah pengetahuan mengenai blog kita ini.

Sama seperti fasilitas "Recent Post", kali ini kita akan menggunakan javascript yg lgs diletakkan di widget kita.

Langkah :
1. Login ke blogger.com
2. Masuk ke Design, yg dulu bernama Layout
3. Pilih Page Element.
4. Klik "Add a Gadget".
5. Pilih HTML
6. Masukkan kode ini

<script language="JavaScript">

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 298;

cellspacing = 8;

borderColor = "#ffffff";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 4;

home_page = "http://www.katamichi.co.cc/";
</script>

<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Penjelasan :
boxwidth : Lebar widget
cellspacing : Jarak tepi antara cell
borderColor : Warna Border
thumbwidth & thumbheight : Lebar dan Tinggi dari thumbnail
fntsize : Ukuran font judul
acolor : Warna judul
aBold : (Pilih true or false)
numposts : Banyak postingan yang ingin Anda tampilkan
home_page : address url blog anda

7. Save
8. Lihat bagaimana hasilnya.

Nah, mudah kan. Silakan sobat blogger mencobanya.

,"Sampai ketemu di Tips and Tricks berikutnya. Byee~"

Credits: Andika Web

Tips and Trick for Blogs

6:17 AM

Hi, sobat-sabat blogger sekalian. Setelah saya mejelajah antara blog satu ke blog lainnya. Aq tertarik dengan suatu gambar-gambar yang bergerak secara otomatis disebelah atas pada suatu blog. JQueri Slider lah namanya.
Kemudian aku berusaha mempelajarinya dan mencoba menerapkannya di blogku sendiri.

Mungkin sebagian dari anda bertanya-tanya. Seperti apa JQuer Slider itu. Sebagai contoh kalian dapat melihatnya di bagian atas blogku.

Penjelasan :
Slider ato JQuerySlider adalah slide-slide berisi berbagai gambar beserta link pada setiap gambarnya, yang secara otomatis berganti-ganti sendiri layaknya slide gambar yg diset automatic.

Langsung saja bagaimana penerapannya di dalam blog :
1. Login ke blog.
2. Klik Layout > Edit HTML
3. Masukkan script ini sebelum </head>

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

4. Masukan javascript jQuery Slider dibawah ini, dibawah script tadi.



<script type='text/javascript'>var _siteRoot='index.html',_root='index.html';</script>

<script src='http://blogspot-choen.googlecode.com/files/scriptsSlider.js' type='text/javascript'/>

<script type='text/javascript'>
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"Code-code-an","desc":"Media Dokumentasi Tutorial dan Desain "},

{"id":"slide-img-2","client":"sIFR 02","desc":"Free Blogger Template"},

{"id":"slide-img-3","client":" ","desc":"Bukan CoklatFree Blogger Template"},

{"id":"slide-img-4","client":"Ini Minimaliskah ?","desc":"Free Blogger Template"},

{"id":"slide-img-5","client":"Cufon","desc":"Free Blogger Template"},

{"id":"slide-img-6","client":"jQuery 2","desc":"Free Blogger Template"},

{"id":"slide-img-7","client":"jQuery 1","desc":"Free Blogger Template"}];

</script>



Nb: kata-kata berwarna merah diatas adalah deskripsi tiap gambar, kalian dapat merrubahnya sesuai keinginan anda.

5. Masukan kode dibawah ini, diatas kode <div id='content-wrapper'>



<div id='headerSlider'><div class='wrapSlider'>
<div id='slide-holder'>
<div id='slide-runner'>
<a href='http://deconstructioncode.blogspot.com/'><img alt='code-code-an' class='slide' id='slide-img-1' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpPsZSrB6OI/AAAAAAAACKY/i80SCyD44BI/deconstructioncode2.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/08/nge-grunge-dengan-sifr-20-free-blogger.html'><img alt='sIFR in Blogger Template' class='slide' id='slide-img-2' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpPuiTccecI/AAAAAAAACKc/KwKDFX51CnM/sifr2bloggertemplate.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/bukan-template-coklat.html'><img alt='Free Blogger Template' class='slide' id='slide-img-3' src='http://lh3.ggpht.com/_dfnTVAxeWMI/SpPwKSdCtVI/AAAAAAAACKg/7gFw2HZFlaE/CoklatBloggertemplate.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/ini-minimal-kah-free-blogger-template.html'><img alt='Free Blogger Template' class='slide' id='slide-img-4' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUi5ovp8xI/AAAAAAAACLA/4XpsH63UaMk/iniminimal.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/07/free-blogger-template-cufon-sifr.html'><img alt='Free Blogger Template' class='slide' id='slide-img-5' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUkbuipkAI/AAAAAAAACLE/2327FKbifQE/cufontypo.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/06/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-6' src='http://lh5.ggpht.com/_dfnTVAxeWMI/SpUlomDRo6I/AAAAAAAACLI/PYsLvvqqenE/jQ2.jpg'/></a>

<a href='http://deconstructioncode.blogspot.com/2009/05/free-blogger-templates-dengan-sentuhan.html'><img alt='Free Blogger Template' class='slide' id='slide-img-7' src='http://lh6.ggpht.com/_dfnTVAxeWMI/SpUmknxumWI/AAAAAAAACLM/slg5rmBUmBo/jQ1.jpg'/></a>

<div id='slide-controls'>
<p class='text' id='slide-client'><strong>post: </strong><span/></p>
<p class='text' id='slide-desc'/>
<p id='slide-nav'/>
</div>
</div>


</div>

</div></div>



Nb:
- Warna biru diatas menandakan id image ke berapa (jangan diapus atau dirubah).
- Sedangkan 'alamat URL', 'alt', dan 'alamat gambar' dapat anda rubah sesuai kebutuhan anda.

6. Masukan kode dibawah ini, diatas ]]></b:skin>

/* CSS div#slide-holder */

div#headerSlider div.wrapSlider{
width:810px; /* mesti disesuaikan */
height:288px;
background:#000;
border: 4px solid #333;
margin: 0 auto;
}

div#headerSlider div#slide-holder{
z-index:40;
height:288px;
position:absolute;
}
div#headerSlider div#slide-holder div#slide-runner{
top:5px;
left:5px;
width:800px; /* mesti disesuaikan */
height:278px; /* mesti disesuaikan */
overflow:hidden;
position:absolute;
}

div#headerSlider div#slide-holder img{
margin:0;
display:none;
position:absolute;
}

div#headerSlider div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:800px; /* mesti disesuaikan */
height:46px;
display:none;
position:absolute;
background:transparent url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpUhSXvvaFI/AAAAAAAACK8/eYHketamvoc/slide-bg.png) repeat scroll 0 0;
}

div#headerSlider div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
color:#ccc;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}

div#headerSlider div#slide-holder div#slide-controls p#slide-nav a{
background-image:url(http://lh6.ggpht.com/_dfnTVAxeWMI/SpPogDg6qzI/AAAAAAAACKU/DhQZk2y7GtE/s800/silde-navSlider.png);
}

7. Selesai sudah. Dan save semuanya.

SEkian pembahasan tutorial JQUery Slider yg telah saya pelajari dari berbagai sumebr, dan saya sharingkan dengan anda. Semoga bermanfaat bagi kita semua.
Terima kasih =)

Tips and Trick for Blogs

11:00 AM

Hi hi.. Semuanya setelah kita kemarin sempat merayakan hari Natal, dan berhenti posting apapun. Hihihi... Alasannya tentu saja karena kita sedang merayakan Natal tersebut.
Nah, pada hari ini saya akan kembali memposting sesuatu yaitu mengenai "Related Post w/ Thumbnail". Tentu bagi para blogger-blogger senior sudah pada tahu apa itu "Related Post w/ Thumbnail". Nah disini saya akan membahas kembali bagaimana cara memunculkan "Related Post w/ Thumbnail" di halaman Blogger kita.

Langsung saja:
1. Login ke akun blogger kamu.
2. Klik Layout > Edit HTML, dan jangan lupa untuk klik Expand Widget Templates
3. Ganti kode </head> atau replace kode </head> dengan


<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://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</head>

4. Keempat, temukan kode ini
<div class='post-footer-line post-footer-line-1'>

atau
<p class='post-footer-line post-footer-line-1'>

Dan letakkan kode dibawah ini, dibawah kode diatas


<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=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>


5. Kamu dapat mengganti kata-kata berwarna merah dengan yang kamu inginkan,
var maxresults=5 menandakan jumlah Related Post dibawah suatu Post
Related Posts dapat diganti dengan kata-kata semisal "Coba ini juga", atau apapun lah :)

6. Save Template
7. Dan coba klik salah satu postingan kalian, akan nampak seperti dibawah ini

Nah, selesai sudah tutorial bagaimana cara membuat "Related Post with Thumbnail". Semoga bermanfaat bagi kalian semua. Dan jangan lupa komennya ya. Jadi aku bisa tahu apa kekurangannya :)

Tips and Trick for Blogs

11:17 PM

Kalian tahu kan gambar profile pada blog kita masing-masing? Nah, di blogger tersayang kita ini telah mendukung feature menampilkan gambar avatar profile kita ini disamping komentar-komentar pada tiap postingan artikel kita.

Bagi kalian yang belum menambahkan feature ini, maka buruan untuk mencobanya. Sangat menarik.
Cukup ikuti langkah-langkah dibawah ini :
1. Login to your blogger account
2. Masuk ke Setting > Comments
3. Centang pada bagian "Tampilkan gambar profile di komen ?"
4. Jika sudah klik Layout > Edit HTML
5. Letakkan kode ini

/* Avatar */ .avatar-image-container img { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ0oquuYoRYCAE8XeKkGpXStp_4U0hwyNtZgAuJhUlrF7erK15vGlk1W3LFS-hW-pofuZ9b_02F5A4oV-HPtaVnk3zDkg52IJX5v-ZeF8Vwjs3K3BlX5LI1PEp3YbBVH67xe5YRVplw6WU/s320/AvatarBlogger.png); width:35px; height:35px; }

diatas kode ]]></b:skin>

Nb : ganti alamat url berwarna merah diatas dengan alamat url gambar profile kamu sendiri.

6. Cari kode ini

<a expr:name='data:comment.anchorName'/>

dan ganti kode tersebut dengan kode dibawah ini

<b:if cond='data:comment.favicon'> <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/> </b:if>

7. Save.

Maka akan tampil seperti dibawah ini :

" Begitulah cara memunculkan gambar profile disamping komentar. Sangat menarik. Silahkan praktekkan sendiri, dan jangan lupa komentarnya y agar tahu kekurangan saya.

Happy blogging. "

Tips and Trick for Blogs

8:12 AM

Have you ever seen? An image that is located beside the left post an article title. Like in my blog. Interesting is not it? That is what will be my discussion this time. I will guide you how to do that.

So, if you interest with this discussion, follow this steps :
1. Get one picture that you want
2. Upload that picture in the image uploader site, ex: photobucket.com
3. After that, copy that image url
4. Then, login to your blogger.
5. Click Layout > Edit HTML
6. Check in the Expand Widget Templates
7. Copy that images url

<img src="http://i679.photobucket.com/albums/vv159/youkaiichi/50x50.jpg" height="50" width="50">

Nb :
- you can change that red sentence with your own image url
- you change the size of height and width with your own height and width size

8. Before <data:post.title/>
9. Then save.

I hope this simple guide will help you.
Thank you :)

Tips and Trick for Blogs

8:53 AM

" 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

Tips and Trick for Blogs

2:01 AM

" 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%.

Tips and Trick for Blogs

1:18 AM

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.

Tips and Trick for Blogs

11:49 AM

" 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 :) "

Tips and Trick for Blogs

10:49 AM

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
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 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.

Tips and Trick for Blogs

4:14 AM

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

Tips and Trick for Blogs

2:02 AM

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

Tips and Trick for Blogs

9:20 AM

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

Tips and Trick for Blogs

7:14 AM

BACK UP

Ad Banner

Social Share Icons

Popular Posts

Label Cloud

Blog Archive

About Us

My Blog List

Sekarang Jual Action Figures, Sarung Bantal Guling Seprei, dan Poster dengan Harga Terjangkau :

SUBSCRIBE

SUBSCRIBE

Labels

Contact Form

Like

Available For

Pages

Instagram

Phrens :

Try your lucky ???

Exchange Banner

Free Download Anime Images :

Popular Posts

BLOGROLL

Newsletter

Subscribe Our Newsletter

Recent Comments