Blog Equator : Tutorial Blog

How to make link exchange banner on blog?

We will do it in a simple way.

First, you can use graphical software to make an image, like Corel draw, Adobe Photosoh or anothers.

Then uplaod it to Photobucket .

Open your control pannel -->layout-->page element -->add html/javascript and insert this code

<center><textarea cols="20" name="textarea"><a href="http://blogequator.blogspot.com"><img border="1" width="90" src="http://i293.photobucket.com/albums/mm46/christbirawan/blogequator.jpg" height="20"/></a></textarea>
<br/>
<a href="http://s293.photobucket.com/albums/mm46/christbirawan/?action=view&current=blogequator.jpg" target="_blank"><img border="0" alt="banner" src="http://i293.photobucket.com/albums/mm46/christbirawan/blogequator.jpg"/></a></center>

<a href="http://blogequator.blogspot.com"><img border="1" width="90" src="http://i293.photobucket.com/albums/mm46/christbirawan/blogequator.jpg" height="20" /></a>

Thanks for correction mr. naga

You have to be more user friendly with your readers. For instance in this post, you wanted to give out the code for link exchange, but you have given the code in a image file. Which means, no one will ever know the code and they cant add them to their own blog.

Your previous post about the social network plugin, your codes in notepad are not readable. Try downloading and you will get a lot of boxes. And trust me its not a decoding problem.

Now we are going to see like putting them:

1.Go to Template -> Edit HTML -> Tick into Expand Widget Templates

3. That line with the following code replaces:

<p class='post-footer-line post-footer-line-3'>


<div class='rsociales'>
Share this post with:
<ul>
<li><a expr:href='"http://www.technorati.com/faves?add=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Technorati' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihX2r5A0LCJ1YsM8e0ddQNUEI2gaIApcI-nvCs2tvLWbDnoHfzRlmJWuLEsmNeLYigbZVLyVfxhCLz6bW9MuDxkBMDaX-oohT8dcR3Sv7hz5li0_tbmPp_kEKv4t8cbgjXzPsRBTl9BKo/s1600/technorati.gif'/></a></li>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEKwV3dsLv_joBqI5atHy4GQXTGKPKCvU7V2ZKEuFFmHGaDAgiz8-t22Sn6WIbzJuNrmsITVRYZYAr0_cXtV-Lr0sDHuAmmGMun51xjf2e9Ro1UOKH6Gc2X_6Z_n1IwyElB-Rk5i2-5VQ/s1600/delicious.gif'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&amp;amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSn_T_ZWcq5zdbMJF9XFB7fZSBfonGqqFbJDSCsuLcoOo8Wc1TRUaSpb5ztkAkGtK2JiqNZY9l1hKX_N0mVm_xVIzc1Hdnca0JTeK0aAaO0UeEq2_cpLmne8iew41RFgqw_6ClzSBA1qM/s1600/digg.png'/></a></li>
<li><a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgofsiTzn8-uFX0fNafzve9rg0bOR6Mmfeda34m88nnIpmiwG8NwqOGianVAFqVk9UR3rmwMZvI3GBiHrVgX47JN0yF_iyucdRomv2YofxVG1YZFGBI6nhe7uSo1jFx3KX15J62P4KORro/s1600/yahoo.png'/></a></li>
<li><a expr:href='"http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Google' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnX77-YCw6AHSDmZYJ2zyTskgBO5_WGwHE04APiA0JwIfjydtiRnBSNKGC6Cz-bARROvMfdNyl7BxF1vKvC2EGXDQy4sTRNZCucKfGhAbaK-Z-PwaYr2sjQ1DRHOIKHpGzGGN4auJz14/s1600/google.gif'/></a></li>
<li><a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Meneame' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhivx_SnnCylHQgnBpe2fLRCMhnRRf4sHSBHQOWVCzBMWT6Ife_fYw8I40k3unL2SRqo4JkAiBGHo6X2MnV3EgRd5QomgWJQvUaVOCnLuR4WufoNI0G12czuN28XziqCxSXXwsXjP-TNJk/s1600/meneame.png'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Furl' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyeUQaUGUdtz5fqnftMABOE7POgZ4D2f4jSs9dHMOcuqKruCMlIRdyMLxp5K2nlebmUXxzPP2cEU1BI58q_0Xw7nQDpjOaz2tqcS3JcGebytm0DVgrgafhHRI8_-U2JSfnSD_oYHAF724/s1600/furl.png'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Reddit' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvHwWBvtzUfVeJmF4eH8RjRDfIP4SVIUYSKmi9sx7fJj6eW4ZjJEd_t6_PAM_hgsf89MvE733SUlMVOch3CBavL5l8jJV9C-Tv-Kz_htX7Or51_hlcd5pnWZbGYnME2f-HFsr9gUq4gMg/s1600/reddit.gif '/></a></li>
<li><a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Magnolia' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6AR9Q9qKtGZBy_yA6K71NsHnWJDx-rl6PAG3E5GRrrlrdVqE3PDyRNgBmy76XBW1C7Hsb5WFNyPzuoC4MvKcM2LCWWmt_EltUGmFgQkHZjlxAD3K4uwzISeQ77jDgqSHUqgNcSAjuiD4/s1600/magnolia.gif'/></a></li>
<li><a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeL5j2-6Y-HWJ5fQUGQY8fqtxbOllJbpK6GhqzgJdSp6LWU2khZM_fcl-RuEAaW6XsBFayvGsARz6_Bbx6gnrw1Wsx2NiBKMZbeA6M6UGRF2HfPKsAc_ebaHN7Vjh0TjIRWPBWV3JGyic/s1600/blinklists.gif'/></a></li>
<li><a expr:href='"http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoe7UBGCiUyISxyPr9gMWrAuvqbfHCZX7CW2c8dHxaVeeukeCFAOEnbci9WoqNH71uynE09zWmEDzuyQbxIJMNwi-n9FIr1nb-hrCL3hysjyjGaaXKgl_vzj56bFRUFPAoYSBRWLAN4FU/s1600/blogmarks.gif'/></a></li>
</ul>
</div>

</p>

]]></b:skin>

.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

Link exchange atau tukar link menjadi salah satu cara ampuh untuk menaikan pagerank. Bagi para expert menambahkan link exchange pada sidebar widget mereka bukanlah suatu masalah. Tutorial ini dimaksudkan untuk para pe-blogger pemula yang mulai belajar ngeblog,dan ingin menambahkan link exchange dalam sidebar widget mereka.

Cara menambahkan widget link exchange pada sidebar :

1. Perhatikan blog yang dikunjugi, apakah mereka menyediakan bertukar link dalam bentuk Link banner atau html script.atau
   
2. Masuk dalam panel kontrol blog anda klik layout==>page element
   klik pada page element, tampilan yang muncul seperti dibawah ini :

   

   
   klik html /javascript kemudian copy kode link banner blog yang anda kunjungi dan paste pada text areakemudian klik simpan perubahan, atau anda bisa menambahkan link pada blog anda dengan mengklik add link dan masukan alamat situs blog yang anda kunjungi dan simpan perubahan.
3. Untuk pengaturan posisi letak dari widget, gunakan mouse untuk men-drag ( move ) page element yang sudah anda simpan.
4. Lihat di tampilan blog anda. Selesai

Tutorial ini menjelaskan bagaimana menambahkan Tab Bar pada Blogger dengan menggunakan CSS dengan satu background warna untuk setiap tab navigasi. Hasilnya seperti dibawah ini

Anatomi Tab Bar

Kita lihat gambar diatas terdiri dari 3 elemen :

• Aktif elemen ( Home )
• Standar Tab ( Comunity, Blog,Contact )
• On Mouse Over ( Blog )

Setiap elemen memiliki rounded-corners dan text-width nya sesuai dengan width tab.
Ok. Langsung saja, buka edit template blogger dan kopikan CSS code nya.CSS code :

ul, li{border:0; margin:0; padding:0; list-style:none;}<br />ul{<br />border-bottom:solid 1px #DEDEDE;<br />height:29px;<br />padding-left:20px;<br />}<br />li{float:left; margin-right:2px;}<br /><br />.tab a:link, .tab a:visited{<br />background:url(img/tab-round.png) right 60px;<br />color:#666666;<br />display:block;<br />font-weight:bold;<br />height:30px;<br />line-height:30px;<br />text-decoration:none;<br />}<br />.tab a span{<br />background:url(img/tab-round.png) left 60px;<br />display:block;<br />height:30px;<br />margin-right:14px;<br />padding-left:14px;<br />}<br />.tab a:hover{<br />background:url(img/tab-round.png) right 30px;<br />display:block;<br />}<br />.tab a:hover span{<br />background:url(img/tab-round.png) left 30px;<br />display:block;<br />}<br /><br />/* -------------------------------- */<br />/* ACTIVE ELEMENTS */<br />.active a:link, .active a:visited, .active a:visited, .active a:hover{<br />background:url(img/tab-round.png) right 0 no-repeat;<br />}<br />.active a span, .active a:hover span{<br />background:url(img/tab-round.png) left 0 no-repeat;<br />}

Jangan Lupa Expand widget Template harus di checklist dulu, kemudian kopikan HTML code nya sperti dibawah ini :

HTML Code :


<br /><ul class="tab"><br /><li class="active"><a href="home.html"><span>Home </span></a></li><br /><li><a href="community.html"><span>Community </span></a></li><br /><li><a href="blog.html"><span>Blog </span></a></li><br /><li><a href="messages.html"><span>Messages </span></a></li><br /><li><a href="contact.html"><span>Contact </span></a></li><br /></ul><br />
Lihat tampilan blog anda. Untuk link page sesuaikan dengan kebutuhan blog.

Selamat mencoba

author: Antonnio Lupeti

Sebelum anda mengubah template, pastikan bahwa template yang lama sudah di save sehingga apabila anda ingin mengembalikan ke setting defaultnya tinggal upload saja. Dan penting juga anda memiliki program text-editor di komputer sperti Notepad++ untuk melihat template yang bakal di upload.

Ada beberapa instruksi sederhana yang dapat anda ikuti disini.

Default template blogger

Metode Install Blogger Template :

Metode I. Upload the xml file:

1. Download template yang ingin anda gunakan, simpan di komputer dan pastikan file ext nya XML.
   
2. Klik Layout > Template > Edit HTML page.
3. Pilih file klik Browse... button, dan kemudian klik tombol Upload, jangan lupa untuk mencentang expand template widget
4. Selesai. Anda bisa melihat tampilan blog anda dengan mengklik lihat blog
   

1. Buka file template yang ingin anda copy
   
2. Buka Layout > Template > Edit HTML page.
3. Klik Tombol Expand Widget Templates (EWT)
   
4. Select all Kode di Blog editor dan delete kemudian paste ( ctrl+v ) template baru anda
5. Bila ada pertanyaan untuk menghapus widget, hapus saja
6. Selesai.

Langkah 1

Kunjungi website Blogger.com homepage dan klik "Create Your Blog Now". Tapi sebelumnya harus punya email, karena nanti login ke panel kontrol menggunakan email. Layanan freemail populer www.yahoo.com, www.gmail.com atau www.hotmail.com.