August 2009 | BACK UP

Tha, tha, this time I will discuss about how when we reached the bottom of the page to go up to the top of the page, do not use a scroll of your mouse.
Because there are blogs on one page has a post more than five, or even reach a dozen numbers. So we will feel exhausted to return to the top of the page. That in the end, the article at the top who want to read so do not be read, because they are lazy to use the mouse to scroll to reach the top of the page.

So for those of you who are interested in this trick.

You can follow the steps below :
1. You must login to your blogger.
2. Then click Layout -> Edit HTML
3. Then search </body>
4. And place the code below, above </body> code

<!-- Bact to top --> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://i679.photobucket.com/albums/vv159/youkaiichi/Back_black.jpg'/></a>

For example you can see at the bottom right side of this yard.

Hopelly helpfull :D 

Tips and Trick for Blogs

10:42 AM

After several days of learning more I search, I found a new learning more about blogs. That is the menu that can slide on the main screen next to us. Like "Welcome Guys" that I have.

Actually this way can be used to save space on our blog page. By filling it with the links, we can save space. But in my place, I used to put images of thanks. Hehe... But, that's okay, depending on how you will use this application.

Please, download this file before :
http://www.ziddu.com/download/6280139/ssm.zip.html
http://www.ziddu.com/download/6280140/ssmItems.zip.html

Then, extract the that files. Inside are "ssm.js and ssmItems.js".

Then open the ssmItem.js file with notepad. Only this file we will be setting.

Contents :

00 YOffset=200;
01 XOffset=0;
02 staticYOffset=150;
03 slideSpeed=50
04 waitTime=30;
05 menuBGColor="#d1d8ec";
06 menuIsStatic="yes";
07 menuWidth=180;
08 menuCols=2;
09 hdrFontFamily="verdana";
10 hdrFontSize="2";
11 hdrFontColor="#000000";
12 hdrBGColor="#ffffff";
13 hdrAlign="left";
14 hdrVAlign="center";
15 hdrHeight="300";
16 barBGColor="#86629f";
17 barFontFamily="Verdana";
18 barFontSize="2";
19 barFontColor="#ffffff";
20 barVAlign="center";
21 barWidth=15;
22 barText="Welcome guys";

23/24/25 ssmItems[0]=["<center><img src=http://i679.photobucket.com/albums/vv159/youkaiichi/Killua.jpg><br>Thx and keep for visit this site.<br><img src=http://i679.photobucket.com/albums/vv159/youkaiichi/arigatou.jpg> "]

26
27 buildMenu();

Description :

00. mengatur posisi menu pada baris y axis layar monitor (vertical)
01. mengatur posisi menu pada x axis layar monitor (horizontal)
02. mengatur posisi vertical menu, pada layar monitor
03. mengatur kecepatan slide
04. waktu menunggu lamanya menu muncul setelah mouse menjauhi menu
05. untuk mengatur warna background menu, gunakan kolor picker dibawah posting ini untuk melihat kodenya
06. mengeset menu harus tetap statis atau tidak pada layar
07. mengatur lebar menu dengan kelipatan 10
08. jumlah kolom
09. jenis huruf header
10. ukuran huruf header
11. warna teks header
12. warna backround header.
13. rata teks header
14. rata teks vertikal header
15. tinggi header
16. warna background bar
17. jenis huruf bar
18. ukuran huruf bar
19. warna huruf bar
20. rata teks bar secara vertikal
21. lebar bar
22. kata-kata Welcome Guys
23/24/25. ganti http://i679.photobucket.com/albums/vv159/youkaiichi/Killua.jpg dengan gambar kalian sendiri dan http://i679.photobucket.com/albums/vv159/youkaiichi/arigatou.jpg dengan gambar kamu sendiri juga.
27. buat menu

I recommend to use the images revolve around 175X240 pixels. In order to fit the picture.

If so, upload the files had to hosting that provides for a file js upload. If I use ripway.com. You can use other hosting, if there is any better than that.

Now it's time to enter this java script file into our blog.
This is for the steps :
1. Log in to Blogger.
2. Click Layout -> Layout -> Edit HTML
3. Find Code <body>
4. Then you copy the code below on above </head>

<script src='http://h1.ripway.com/Ichisan/ssm.js' type='text/javascript'></script>

<script src='http://h1.ripway.com/Ichisan/ssmItemsss.js' type='text/javascript'></script>

5. Then, replace the red text with a url where you uploaded it javascript files.
6. Then, save.

Wew, this instruction was exhausting me T_T

Tips and Trick for Blogs

8:00 AM

After I read from other bloggers posting a review of the spoiler. I became interested. Then I tried, and failed. And do not try to find the cause of failure :p
But after looking around there I finally found the coding of the spoiler that I can use.

Well, for you are curious and want to try it, please follow the steps below:

Just copy this code.

<div>
<input style="margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button" value="Tampilkan" /></div>
<div style="border: 1px solid #000000; margin: 10px auto; padding: 5px; background: #c9d2ed none repeat scroll 0% 0%; width: 500px;">
<div style="display: none;">
Isikan hal yang ingin kalian sembunyikan disini.</div>
</div>

Nb : you must change that red sentence with writing or pictures that you will hide.

For the result, you can see below...

You want to see what's in this box?

Just try it. Happy blogging :D

Tips and Trick for Blogs

8:22 AM

Are you interested in how to write "upside down"? Hehe ..
If you are interested try to visit this site serv.net.

You can write in text box there :

And the results will appear immediately below it. Just try it.
Hopefully useful :D

Info Blogging Tips and Trick for Blogs

6:30 AM

When I looked for more tips and tricks about blogging. To deepen knowledge. Hehe :D
I found a pretty interesting trick. Here you Hereinafter put various kinds of images on the ends of the pages of your blog.
Therefore, I will share with you about this trick.

Steps:
1. First login to your blogger account
2. Click "Layout -> Edit HTML
3. Search this code ]]></b:skin> if you've found, put the following code above the code had

#gambar {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

4. Save
5. Bold text is the position of that picture, you can vary it by substituting the word "left" with "right". So also with words "bottom", you can change with "top".
6. Then place the code below, before </body>

<div id="gambar">
<a href="http://www.katamichi.co.cc">
<img src="http://i679.photobucket.com/albums/vv159/youkaiichi/hamtaro_s_022.gif?t=1250877828" border="0" /></a>
</div>

"http://www.katamichi.co.cc" is your link.
"http://i679.photobucket.com/albums/vv159/youkaiichi/hamtaro_s_022.gif?t=1250877828" is your picture position. You can change it.

7. Then save.

Nb : Oh yes, you can replace this image with a variety of widgets that you have. Just replace the word red, with the widget code.
Happy blogging :D

Tips and Trick for Blogs

5:41 AM

Maybe you've heard of "Related Posts". You know, the titles of postings that appear on each end of the post title we are reading.

For those who do not understand how to do it all, this time I wanted to share with you how to provide related post at each end of the tip posting titles that are seen.

For The Steps :
1. Check mark in the "Expand Widget Templates"
2. Then find the following sentence,

<p><data:post.body/></p>

3. Then place the following code below the last sentence,

<br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><H2>Artikel Terkait:</H2><br /><DIV class='rbbox'><br /><DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'><br /><DIV id='albri'/><br /><SCRIPT type='text/javascript'><br />var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;<br />var maxNumberOfPostsPerLabel = 4;<br />var maxNumberOfLabels = 10;<br />maxNumberOfPostsPerLabel = 100;<br />maxNumberOfLabels = 3;<br />function listEntries10(json) {<br />var ul = document.createElement(&#39;ul&#39;);<br />var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?<br />json.feed.entry.length : maxNumberOfPostsPerLabel;<br />for (var i = 0; i &lt; maxPosts; i++) {<br />var entry = json.feed.entry[i];<br />var alturl;<br />for (var k = 0; k &lt; entry.link.length; k++) {<br />if (entry.link[k].rel == &#39;alternate&#39;) {<br />alturl = entry.link[k].href;<br />break;<br />}<br />}<br />var li = document.createElement(&#39;li&#39;);<br />var a = document.createElement(&#39;a&#39;);<br />a.href = alturl;<br />if(a.href!=location.href) {<br />var txt = document.createTextNode(entry.title.$t);<br />a.appendChild(txt);<br />li.appendChild(a);<br />ul.appendChild(li);<br />}<br />}<br />for (var l = 0; l &lt; json.feed.link.length; l++) {<br />if (json.feed.link[l].rel == &#39;alternate&#39;) {<br />var raw = json.feed.link[l].href;<br />var label = raw.substr(homeUrl3.length+13);<br />var k;<br />for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);<br />var txt = document.createTextNode(label);<br />var h = document.createElement(&#39;b&#39;);<br />h.appendChild(txt);<br />var div1 = document.createElement(&#39;div&#39;);<br />div1.appendChild(h);<br />div1.appendChild(ul);<br />document.getElementById(&#39;albri&#39;).appendChild(div1);<br />}<br />}<br />}<br />function search10(query, label) {<br />var script = document.createElement(&#39;script&#39;);<br />script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;<br />+ label +<br />&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);<br />script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);<br />document.documentElement.firstChild.appendChild(script);<br />}<br />var labelArray = new Array();<br />var numLabel = 0;<br /><b:loop values='data:posts' var='post'><br /><b:loop values='data:post.labels' var='label'><br />textLabel = &quot;<data:label.name/>&quot;;<br />var test = 0;<br />for (var i = 0; i &lt; labelArray.length; i++)<br />if (labelArray[i] == textLabel) test = 1;<br />if (test == 0) {<br />labelArray.push(textLabel);<br />var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?<br />labelArray.length : maxNumberOfLabels;<br />if (numLabel &lt; maxLabels) {<br />search10(homeUrl3, textLabel);<br />numLabel++;<br />}<br />}<br /></b:loop><br /></b:loop><br /></SCRIPT><br /></DIV><br /><script type="text/javascript">RelPost();</script><br /></DIV><br /></b:if><br />

4. Then find this code ]]></b:skin>
5. Last, written below code, the code above was

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

Hoppelly helpful, hehe :D

Tips and Trick for Blogs

9:05 AM

Cara Membuat Tab View di Blogspot

Sudah lama hanya dipenuhi dengan topik belajar SEO yang saya tidak juga mengerti sepenuhnya, apalagi sejak kontes Stop Drreaming Start Action bergulir, kok tidak pernah lagi membahas masalah mempercantik blog. Kali ini membahas kembali cara memberi sentuhan agar blog semakin cantik dimata manusia, karena tidak ada binatang yang perduli sama yang namanya blog.
Tabulasi sederhana berfungsi meletakkan link, gambar atau apapaun juga terserah selera. Keuntungannya adalah menghemat space sidebar maupun postingan dengan membaginya memiliki kamar sendiri-sendiri yang akan tampil saat tombol tab di klik. Banyak sekali sebenarnya cara membuat tab dan salah satunya dibawah ini.
Tab yang saya maksudkan seperti di blog ini (selama masih terpasang) dibagian bawah ada dua widget tabulasi dengan lain model. Langsung saja cara pemasangannya, O iya karena blog ini menggunakan blogspot sarana hostingnya, maka cara pemasangan juga di platform blogspot saja yang saya uraikan, karena jika anda sudah hosting sendiri dan memakai CMS seperti wordpress atau joomla, pasti tidak kesulitan menyesuaikan cara pemasangannya, saya anggap pemakai WP sudah pinter.

Pada edit HTML silahkan anda masukkan kode dibawah ini di bagian header, antara <head> dan </head>, kalau ada yang bingung silahkan saja diletakkan pas dibawah kode <head>.
<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

Kalau sudah silahkan dipilih kode CSS dibawah ini untuk beberapa model yang telah saya buat, kalau anda sudah pinter CSS silahkan saja diobrak-abrik kodenya sesuai keinginan dan sesuai warna serta bentuk template anda. Pilih salah satu model kemudian letakkan di atas kode ]]></b:skin> dan save template anda.

Model 1 (seperti di blog ini yang sebelah kiri)
/* tab model 1 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: right; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 3px 3px 5px; margin:0 5px 0 0;letter-spacing:-0.07em; background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomleft: 10px; -moz-border-radius-topleft: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background:#E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff url('bg-tabateonsoft.jpg') no-repeat bottom right; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

Model 2 (seperti di blog ini yang sebelah kanan)
/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

Model 3 (Seperti di ayomaju.com di sidebar sebelah kiri bawah)
/* tab model 3 ateonsoft.com */
div.Tabateonsoft {margin:25px 0 0 0; font: normal 11px arial;}
div.Tabateonsoft div.TFs
{height:27px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:3px 4px 3px 4px; margin:0 2px 0 0;letter-spacing:-0.01em;
background:#f0f0f0;
color: #333;
border:1px solid #CCCCCC;
}
div.Tabateonsoft div.TFs a:hover
{
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;}
div.Tabateonsoft div.TFs a.Active
{ background: #FFFFFF;
color:#f58220;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:200px; padding:0;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabateonsoft div.Pages div.Page div.floor li { margin:0; padding:0;}

Model 4 (Seperti di situs Software Akuntansi sebelah kanan bawah)
/* tab model 4 ateonsoft.com */
div.Tabateonsoft {margin:15px 0 0 0; font: normal 11px arial;}
div.Tabateonsoft div.TFs
{height:28px; overflow: hidden; border:1px solid #ccc; border-bottom:0px;background:#f0f0f0;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; padding:7px; margin:0; background:#f0f0f0; color: #333; border-right:1px solid #CCCCCC;}
div.Tabateonsoft div.TFs a:hover
{ background:#ccc;}
div.Tabateonsoft div.TFs a.Active
{ background: #333; color:#FFFFFF;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:150px; padding:0; border:1px solid #ccc; padding:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px; text-align:left;}
#sidebar div.Tabateonsoft div.Pages div.Page div.floor li {
margin:0; padding:0;}

Kalau sudah disimpan templatenya tinggal memasang tabnya di elemen halaman, dengan menambah widget baru dan pilih html/javascript lalu masukkan kode dibawah ini:
<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

OK silahkan dicoba kalau berminat, silahkan diotak-atik dan dipelajar karena kalau diajari terlalu detil selain saya capek ngetiknya juga anda menjadi kurang kreatif, dicoba saja dulu dipasang dan lihat hasilnya kemudian edit sesuai keinginan. Anda juga bisa menambah tab. Silahkan amati pengulangan kode diatas dan coba, semoga berhasil. Bagi pengguna wordpress self hosting tabulasi inii bisa juga diintegrasikan di file function.php template anda dan menjadi makin otomatis. Sekian dulu kawan, pusing kenapa postingan rusli zainal sang visioner bisa ilang dari SERP, bisa gak jadi beramal kalau terus begitu kondisinya. 

Tips and Trick for Blogs

2:15 AM

Ui, ui. Hehehe :D we meet again. Now we will discuss about the dropdown menu. With the dropdown menu we can save space in our blog. So that we can utilize that space for other interests.
You wanna try? Lets go.

Steps :
1. First, login to your blogger.
2. Then click Layout -> Page Element
3. Add widget. Choose Javascript.
4. And place this code to that box.

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>How to Make Dropdown Menu ?</option>
<option value="your url address 1">Text 1</option>
<option value="your url address 2">Text 2</option>
<option value="your url address 3">Text 3</option>
<option value="your url address 4">Text 4</option>
<option value="your url address 5">Text 5</option>
</select>

Results :

Note :
You can change that purple word for your own title. And Red text for your url address.

Tips and Trick for Blogs

10:37 AM

In the discussion this time, I will discuss about how we know how big the price our blog. Perhaps many are wondering how big is the price we blog.
To know you just by visiting this site :

http://www.business-opportunities.biz/projects/how-much-is-your-blog-worth/

You do not need any registration, simply enter the address of your blog, and then press submit. Wait some time and, THA... THA... the results will be out by itself. hehe :D

Info Blogging Tips and Trick for Blogs

9:56 AM

This summary is not available. Please click here to view the post.

Info Blogging Tips and Trick for Blogs

7:08 AM

Yo, now I will discuss about how we are so much easier to do in exchange for a link exchange to other people.

So how do we do ?
1. You just login to your blog,
2. Then choose Layout -> Page Elements
3. And Add a Gadget, then choose HTML/Java Script
4. And and enter the code below

<img border="0" width="150" src="http://i679.photobucket.com/albums/vv159/youkaiichi/Banner_4copycopy.jpg?t=1250941627" height="57"/>

<textarea cols="20" name="textarea"><a href="http://tenshi-ito.blogspot.com"><img border="0" width="90" src="http://i679.photobucket.com/albums/vv159/youkaiichi/Banner_4copycopy.jpg?t=1250941627" height="17"/></a></textarea>

Foe the red text, you can change with your blog url. And fot that green text, you can change that text with your image url address. And for the results you can watch this :D

So easy huh? Hopefully helpful.

Tips and Trick for Blogs

4:09 AM

Wew.. Domain top level dot com, gratis? Siapa yang akan percaya. Mungkin banyaj dari pembaca sekalian yang tidak percaya akan berita ini. Tapi itu semua benar. Walau aku belum mencoba sendiri. Hihi :D
Dan mengapa domain dot com ini gratis? Menurutku bukannya gratis, tapi kita akan barter. Kita mendapatkan domain tersebut. Dan mereka akan menempatkan iklan mereka di blog kita. Tapi tenang saja, mereka akan meletakkannya di bagian bawah halaman dari blog kita. Nah, bagi mereka yang merasa penasaran dan ingin mencoba membuktikannya sendiri, silakan kunjungi lewat sini DOT COM.

Selain daripada itu terdapat juga persyaratan juga yang harus kalian penuhi, diantaranya :
1. Blog ataupun web kita harus memiliki postingan minimal 15 buah perbulan, atau minimal kamu harus memiliki pengunjung 100 orang perharinya.
2. Tidak boleh mengandung unsur pornografi.
3. Anda akan diminta memasang banner di bagian bawah dari halaman blog atau web milik kalian.
4. Dan masih ada beberapa lagi.

Bila anda berminat dan merasa sanggup memenuhi persyaratan itu semua, tidak ada salahnya mencobakan. Toh, sama-sama untung juga :@

Info Blogging Tips and Trick for Blogs

10:38 AM

Today I learn about the drop-down menu made with css style. I learn from the web of others, and try it out on my own blog.
Because this code is very interesting and very simple, I'd like to share with your readers.

This is the code:

<html>
<head>
<style type="text/css">

body { font-family: Verdana; }

div.mainmenu {
position: absolute;
left: 10px;
top: 0px;
font-weight: bold;
z-index: 1;
}

div.menu {
float: left;
margin-left: 10px;
}

div.popup a:hover { background-color: #faa; }
div.menu:hover div:first-child { border-bottom: none; }
div.menu div.popup { display: none; }
div.menu:hover div.popup {
display: block;
background-color: #99f;
}

div.menu div {
width: 175px;
background-color: #66f;
padding: 5px;
border: solid 1px blue;
}

div.popup div, div.popup a { display:block; text-decoration: none; margin: 2px 2px 2px 5px; }
div.popup div + div, div.popup a + a { margin-top: 10px; }

div.content {
position: absolute;
left: 20px;
top: 30px;
border: 1px dashed gray;
}

</style>
</head>
<body>
<div class="mainmenu" id="mainmenu">
<div class="menu">
<div>CSS</div>
<div class="popup">
<a href="index.html">The menu</a>
<a href="#">Nowhere</a>
<a href="#">Nowhere</a>
</div>
</div>

<div class="menu">
<div>Fish</div>
<div class="popup">
<a href="#">One fish</a>
<a href="#">Two fish</a>
<a href="#">Red fish</a>
<a href="#">Blue fish</a>
</div>
</div>

<div class="menu">
<div>JavaScript</div>
<div class="popup">
<a href="highlight.html">Highlighting</a>
<a href="#">Nowhere</a>
<a href="#">Also nowhere</a>
</div>
</div>

<div class="menu">
<div>Oxo</div>
<div class="popup">
<a href="#">Nowhere</a>
<a href="#">Nowhere else</a>
<a href="#">And nowhere</a>
<a href="#">Nowhere too</a>
</div>
</div>
</div>

<div class="content">
... some content
</div>
</body>
</html>

For the example, you can watch at the top of the my blogger.

Hopefully, this lesson gives you the benefits for all :D

Tips and Trick for Blogs

11:15 PM

Hello friend, I had time to learn from other bloggers blog. Then I found about cusor animated. Animated cursor can help beautify your blog. So your blog becomes more attractive for visitors.
Therefore, here I want to share to you all how to make animated cusor this.

Step in :
1. First choose a animation icon picture. To becaome animated cusor. If you do not have, you can browse through the search engine google or yahoo.
2. The second step is save the animation files that you get to keep the server hosting the image, for example: http://www.photobucket.com or blogger also can own. But I recommend more to http://photobucket.com only. To save space. Hehe .. : D

The next step is to insert the code for the cursor. Code to establish the cursor is as follows. As example :

cursor: url("http://cursors4.totallyfreecursors.com/thumbnails/yuki-sohma-ani.gif")

You can change that red sentencewith your own image url.
Then :

Sign in to your blogger
Then click Layout
Then click Edit HTML
Then click Download template seluruhnya, for backup your template
Find a code similar to code below, usually in writing with the body
Paste the code earlier, in the red sentence below

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: justify;
cursor: url("http://cursors4.totallyfreecursors.com/thumbnails/yuki-sohma-ani.gif");
}

7. Click save
8. Finish... :D

hopefully helpful

Tips and Trick for Blogs

10:05 PM

Well now I want to share how to create a mouse over the image using javascript. So when you mouse over your image, the image will change to another picture by itself.

This step is :
1. Upload two images. First and second image you want to use the image hosting site. Then note the url of the image.
2. Enter this code at the bottom of the <head>

<SCRIPT LANGUAGE="JavaScript">

loadImage1 = new Image();
loadImage1.src = "MASUKKAN URL IMAGE KEDUA ANDA DISINI";
staticImage1 = new Image();
staticImage1.src = "MASUKKAN URL IMAGE PERTAMA ANDA DISINI";

</script>

3. Enter this code at the bottom of the <body>

<a href="MASUKKAN URL TUJUAN DARI LINK ANDA DISNI" target="_blank" onmouseover="image1.src=loadImage1.src;" onmouseout="image1.src=staticImage1.src;">
<img name="image1" src="MASUKKAN URL IMAGE PERTAMA ANDA DISINI" border=0></a>

4. Finish.. hehehe :D

Tips and Trick for Blogs

9:48 PM

Bagi semua para blogger-blogger yang ingin agar blognya tidak dicopas ato copy paste, mungkin anda ingin mendisablekan klik kanan. Hmm... Tetapi sebaiknya jangan dech. Kan lebih baik kita saling berbagi ilmu. Hehe.. :D
Tapi kembali lagi pada orangnya sich.. Tapi.. Hmm.. AAAAAAAAAAAAAAAArrrrrrgghh... Binun dech. :# Oc, langsung aja,

Langkah :
1. Pertama anda login ke blogger anda
2. Kedua, click layout -> tambah gadget
3. Pilih code html/ javascript
4. Lalu copas kan code dibawah ini

<script>
var message="Maaf, klik kanan sedang didisable";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Sekarang blog kamu ud terhindar dari orang-orang yang copas. :D hehe
Sekian deh dr saya dulu, kalo ada lagi yang laen, ntar aq share lagi.. Tha. Mw bobo dulu lagi :s

Tips and Trick for Blogs

9:02 PM

These tips are quite helpful. Tips on auto refresh. I accidentally read from a fellow blogger. And I think this is quite helpful. So I want to sharing to all readers here.

How auto refresh refresh like this in general. However, work automatically. So that within a period that has been set up, our blog will refresh automatically. And refreshing to normal condition.

Put the following code at the bottom of the
<head>
...

<meta http-equiv="refresh" content="10"/> 

Figures 10 shows the length interfal refresh time is 10 seconds. So, you can set your own

hopefully helpful :D

Tips and Trick for Blogs

7:49 PM

I see and learn about giving my signature for private blogs, facebook etc.. Very interesting. Therefore I would like to share with you all on this learning.
1. First, please visit the http://www.mylivesignature.com/

2. Then click the word with >>Click Here to Start
3. Then click "Create Signature"
4. Then click "Using the signature creation wizard"
5. Write a word that will become our signature, click "next step"
6. Then select the type of letter you want, click "next step"
7. Select the font size you want, click "next step"
8. Select the color you want, click "next step"
9. Select the slope you want, click "next step"
10. After the signature was made, and select "Want to use this signature"
11. After that, click "Generate HTML code"
12. Then choose "Generate a code for my handwritten signature"
13. Copy that html code to install in our blogger

That signature has been made, and now only how to install on our blog.
How easy are to installing :
a. First, log in to your blogger. Click dashboard
b. Choose setting
c. Choose format
d. Search 'Post Template', then fill in with the html code, so that later we will make every article, the signature is automatically in the post box.

For example, as below :

Tips and Trick for Blogs

7:11 PM

During I surf on the internet I come by chance in scrapur blog. And I see how to make a smiley icon without having to copy and paste the url address. Not very interesting. Hehe ... Thank you for the very interesting tips. This is for you.

Step by step :
-> Login to your blog. Then click Layout. Then click Edit HTML
-> Find this code ]]></b:skin>
-> If you have to find it, copy the code below under the appropriate code before

<script src='http://scrapur.com/index/wp-content/uploads/2008/02/smile.js'
type='text/javascript'/>

-> Save

Note = Before you type Smiley Code on yours blogger post just  press “space” both before and after the smiley code .

   –>    –> :p –>:D –> :$ –> ;) –> :@ –> :# –> :k –> :x –> :o –> :O –> :L –> :r –> :s –> :y –> :~ –> :v –> :f –> :d –> :c –> :z –> 

Good Luck and Enjoy it  

Tips and Trick for Blogs

6:28 AM

Maybe you heard about the "animation label", but you do not know about its html code. I get this from 1910. And want to share with you all.

- First login to your blog
- Then click Layout
- Then click Edit HTML
- If you want safe, "download templatmu" first. So that if an error occurs, the your template will not be lost.
- Find a code similar to this in your html template

<b:section class='sidebar' id='sidebar' preferred='yes'>

- Then copy the code below under the code before

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

- Then click save
- Finish ^_^

Tips and Trick for Blogs

6:16 AM

Perhaps before you write html code in your posting, but what surprised them after you see the results on your blog page. Html code is not out as you write in your posting.
Here are some tips to overcome it:

1. The first step is, open http://centricle.com/tools/html-entities/
2. After that, enter the html code you want to post right in the box that were there

3. Then copy the code encodes, and paste in the HTML editor in your posting
4. Publish Post, view HTML and THA... THA... Hohoho.....

Tips and Trick for Blogs

5:44 AM

Yup, you may want to print a page of a blog directly to your printer? These tips that I have quoted from the o-om. Hopefully useful ^. ^

<a href="javascript:print(document)">Cetak Halaman Ini</a>

Have a nice try ^.^

Tips and Trick for Blogs

5:35 AM

Copyright © 2015 BACK UP | Distributed By My Blogger Themes | Designed By VeeThemes.com