This is a (Totally Simple) tutorial to add link to your friend’s site on your sidebar. There is some theme that give an easy way to do this, but i’ll show you how to do this in the most themes.

Click the link below to read more :

On my themes, it will be like this :
I don’t know how it will be on your themes, but basically it’s all the same i think. So, let’s start with the first thing to do.

1. Go to Themes Customization page. You can see that on dashboard’s sidebar , Appearance > Customization or when viewing your site, there is customize button on top bar. The customize page will be your site preview on one side and the bar like this on the other side.
2. Go to widgets area then click on any of it, usually sidebar, but it might be primary or whatever. It will show something like this :
3. After that click Add a widget and select Text (Arbitrary text or HTML), it will give you a new widget that consisted of two box, the title and the content, put something on the title page, in my case it’s “Friend site”, you should change it to whatever you want. Then put the code on the content box. Because i know most of you is from Mr. Nuraksa’s Class so i’ll use the list of the site from the class. Just copy all of it and paste it to content box.

[su_spoiler title=”click for the code”]<ul>
<li><a href=”http://nuraksa.web.ugm.ac.id”>Pak Nuraksa </a></li>
<li><a href=”http://nabilashahnaz.web.ugm.ac.id”>Nabila SH</a></li>
<li><a href=”http://annisapratita.web.ugm.ac.id”>Annisa Pratita</a></li>
<li><a href=”http://liaakhsanuniswati.web.ugm.ac.id”>Lia Akhsanuniswati</a></li>
<li><a href=”http://dananjayarijaluzaman.web.ugm.ac.id”>Dananjaya R.</a></li>
<li><a href=”http://adindaparamitha.web.ugm.ac.id”>Adinda Pradnya P</a></li>
<li><a href=”http://lusifitrianingrum.web.ugm.ac.id”>Lusi F</a></li>
<li><a href=”http://edtinsiti.web.ugm.ac.id”>Edtin Siti</a></li>
<li><a href=”http://annisaria.web.ugm.ac.id”>Annisa Ria</a></li>
<li><a href=”http://miftadian.web.ugm.ac.id”>Mifta Dian</a></li>
<li><a href=”http://bisamawidistuti.web.ugm.ac.id”>Bisama W.</a></li>
<li><a href=”http://debykurnia.web.ugm.ac.id”>Deby Kurnia</a></li>
<li><a href=”http://rikkosajjad.web.ugm.ac.id”>Rikko S</a></li>
<li><a href=”http://caturmartin.web.ugm.ac.id”>Catur Martin</a></li>
<li><a href=”http://candramayliasari.web.ugm.ac.id”>Candra M</a></li>
<li><a href=”http://muhzakif.web.ugm.ac.id”>Muh Zakif</a></li>
<li><a href=”http://nadialatifah.web.ugm.ac.id”>Nadia L</a></li>
<li><a href=”http://ayuintansaraswati.web.ugm.ac.id”>Intan Saraswati</a></li>
<li><a href=”http://esterpuji.web.ugm.ac.id”>Ester Puji</a></li>
<li><a href=”http://almirashaumi.web.ugm.ac.id/”>Almira Shaumi</a></li>
<li><a href=”http://firmanmuhammad.web.ugm.ac.id/”>Firman Muhammad</a></li>
<li><a href=”http://florentinabella.web.ugm.ac.id/”>Florentina Bella</a></li>
<li><a href=”http://aliyanianadya.web.ugm.ac.id/”>Aliyani Anadya</a></li>
<li><a href=”http://wimpiegerdakusuma.web.ugm.ac.id/”>Wimpie G</a></li>
<li><a href=”http://alvigista.web.ugm.ac.id/”>Gista</a></li>
<li><a href=”http://didikdarmadi.web.ugm.ac.id/”>Didik D</a></li>
<li><a href=”http://muherwin.web.ugm.ac.id/”>M. Erwin</a></li>
<li><a href=”http://muhammadaries.web.ugm.ac.id/”>M. Arie</a></li>
<li><a href=”http://anastasiaregina.web.ugm.ac.id/”>Anastasia</a></li>
<li><a href=”http://satriyosriwibowo.web.ugm.ac.id/”>Satriyo S.</a></li>
<li><a href=”http://yessykurnia.web.ugm.ac.id/”>Yessy</a></li>
<li><a href=”http://muhamadirfansuwarna.web.ugm.ac.id/”>M. Irfan</a></li></ul>[/su_spoiler]
[su_spoiler title=”click for the updated code”]

<ul>
<p><a href="http://adindaparamitha.web.ugm.ac.id" target="_blank">Adinda Pradnya</a><br />
<a href="http://alial.web.ugm.ac.id/" target="_blank">Ali Al</a><br />
<a href="http://almirashaumi.web.ugm.ac.id/" target="_blank">Almira Shaumi</a><br />
<a href="http://alvigista.web.ugm.ac.id/" target="_blank">Alvi Gista Nuruli</a><br />
<a href="http://alyanianadya.web.ugm.ac.id/" target="_blank">Alyani Anadya</a><br />
<a href="http://anastasiaregina.web.ugm.ac.id" target="_blank">Anastasia Kanath</a><br />
<a href="http://annisapratita.web.ugm.ac.id" target="_blank">Annisa Pratita Maharani</a><br />
<a href="http://annisaria.web.ugm.ac.id" target="_blank">Annisa Ria Gitanjali</a><br />
<a href="http://bisamawidistuti.web.ugm.ac.id/" target="_blank">Bisama Widistuti</a><br />
<a href="http://candramayliasari.web.ugm.ac.id/" target="_blank">Candra Mayliasari</a><br />
<a href="http://caturmartin.web.ugm.ac.id/" target="_blank">Catur Martin Andrian</a><br />
<a href="http://dananjayarijaluzaman.web.ugm.ac.id/" target="_blank">Dananjaya Rijaluzaman</a><br />
<a href="http://debykurnia.web.ugm.ac.id/" target="_blank">Deby Kurnia Putri</a><br />
<a href="http://didikdarmadi.web.ugm.ac.id/" target="_blank">Didik Darmadi</a><br />
<a href="http://edtinsiti.web.ugm.ac.id/" target="_blank">Edtin Siti</a><br />
<a href="http://esterpuji.web.ugm.ac.id/" target="_blank">Ester Puji Astuti</a><br />
<a href="http://firmanmuhammad.web.ugm.ac.id/" target="_blank">Firman Muhammad</a><br />
<a href="http://florentinabella.web.ugm.ac.id/" target="_blank">Florentina Bella</a><br />
<a href="http://ayuintansaraswati.web.ugm.ac.id/" target="_blank">Intan Saraswati</a><br />
<a href="http://liaakhsanuniswati.web.ugm.ac.id/" target="_blank">Lia Akhsanuniswati</a><br />
<a href="http://lusifitrianingrum.web.ugm.ac.id/" target="_blank">Lusi Fitrianingrum</a><br />
<a href="http://miftadian.web.ugm.ac.id/" target="_blank">Mifta Dian Pratiwi</a><br />
<a href="http://muherwin.web.ugm.ac.id/" target="_blank">Muh. Erwin</a><br />
<a href="http://muhzakif.web.ugm.ac.id/" target="_blank">Muh. Zaki</a><br />
<a href="http://muhamadirfansuwarna.web.ugm.ac.id" target="_blank">Muhamad Irfan Suwarna</a><br />
<a href="http://muhammadaries.web.ugm.ac.id" target="_blank">Muhammad Arie Setiawan</a><br />
<a href="http://nadialatifah.web.ugm.ac.id/" target="_blank">Nadia Latifah</a><br />

<a href="http://nabilashahnaz.web.ugm.ac.id/" target="_blank">Nabilah S</a><br />

<a href="http://nuraksa.web.ugm.ac.id/" target="_blank">Nuraksa Makodian</a><br /> 
<a href="http://rikkosajjad.web.ugm.ac.id" target="_blank">Rikko Sajjad Nuir</a><br /> 
<a href="http://satriyosriwibowo.web.ugm.ac.id" target="_blank">Satriyo Sriwibowo</a><br /> 
<a href="http://wimpiegerdakusuma.web.ugm.ac.id/" target="_blank">Wimpie Gerda Kusuma</a><br />
 <a href="http://yessykurnia.web.ugm.ac.id" target="_blank">Yessy Kurnia Martha</a></p> </ul>

[/su_spoiler]
*don’t forget to remove your own site/name from the list and change the link to my website (this website).

The <a href part means “Attribute” and “Hypertext reference” and it’s used to link the text wrapped in this code to the target. If you put http:// in front of the link it will link to out of your site, and if you put it without http:// it will link to page/post in your own site. It will open the target link on the same page, to make the page opened in new tab, you can add “target = “_blank” command after the link.

Then after closing the opening tag with “>”, put any text there, this is the text that will be shown to the web visitor. So, the visitor won’t be able to see the link or the code (except if they want to).

And finally put the closing tag. Then what’s with the </ul> and </li> tags? That’s to make it as a list with bullet in front of it (or arrow or number or whatever) <ul to start the list, it’s used at the very first and very last. <li used on each item.

It will be shown like this :

That’s all, enjoy your day. If you have some question you can ask at the comment section. If there is something wrong, maybe i put the wrong link, you can tell me too, because on the group note there are some that using .(dot) in between their name, so i assume that the website name is the same but without the .(dot).

This entry was posted on Thursday, May 19th, 2016 at 9:13 am and is filed under Other. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.