Naruto Age of the Past
Widget Coding IxCAs2G
Naruto Age of the Past
Widget Coding IxCAs2G
Naruto Age of the Past
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Naruto Age of the Past

Join Naruto Age of the Past where you travel back in time before the legendary Madara Uchiha and Hashirama Senju were even born. This is the forum to go to.
 
HomeHome  Latest imagesLatest images  SearchSearch  RegisterRegister  Log inLog in  

 

 Widget Coding

Go down 
2 posters
AuthorMessage
Yoshi Dichimaru
Special Jounin
Yoshi Dichimaru


Posts : 129
Join date : 2015-04-16
Age : 29

Character sheet
Character Name: Yoshi Dichimaru
Clan: Shiroyin
Element: Fire

Widget Coding Empty
PostSubject: Widget Coding   Widget Coding EmptyTue Apr 21, 2015 5:25 pm

Here I will post the codings for widgets whether they be advanced or simplistic. As asked by Roland and Kirito I will post the widgets asked of me to make.

Basic Staff Widget Coding:
Code:

<img src="http://i.imgur.com/IEoRvho.png" border="0" alt="" /><a rel="nofollow" target="_blank" class="postlink" href="http://narutoageofthepast.rpg-board.net/u4"><img alt="" border="0" src="http://i.imgur.com/wASNxTS.png" /></a> <a href="http://narutoageofthepast.rpg-board.net/u93" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/Box8miT.png" border="0" alt="" /></a><a href="http://narutoageofthepast.rpg-board.net/u39" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/Kp1Eha8.png" border="0" alt="" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://narutoageofthepast.rpg-board.net/u14"><img alt="" border="0" src="http://i.imgur.com/vTBEpT3.png" /></a><a href="http://narutoageofthepast.rpg-board.net/u58" class="postlink" target="_blank" rel="nofollow"><img src="http://i.imgur.com/NObA1P1.png" border="0" alt="" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://narutoageofthepast.rpg-board.net/u20"><img alt="" border="0" src="http://i.imgur.com/lhxTQ8j.png" /></a><a rel="nofollow" target="_blank" class="postlink" href="http://narutoageofthepast.rpg-board.net/u15"><img alt="" border="0" src="http://i.imgur.com/3amSumS.png" /></a> <a rel="nofollow" target="_blank" class="postlink" href="http://narutoageofthepast.rpg-board.net/u19"><img alt="" border="0" src="http://i.imgur.com/900p4HI.png" /></a>

How it looks:
Spoiler:

What it does:
If a viewer of the site hovers their mouse over the image that has a certain Staff username on it, the viewer can click the image which hyperlinks to the staff members profile picture so that one could get a hold of them if needed.

How to do it:
Code:
[url="Link of user profile here"][img]image here jpg,png,gif[/img][/url]

Side Notes:
you can repeat this process as many times as you want, make sure if the image takes up two spots hit enter and use the same code again so not to stretch out the site. This is simplistic coding.

If you want use this coding you need to Select no in the option that says: "Use a table type"
Back to top Go down
Enzeru The New Workaholic
GFX/Coder
Enzeru The New Workaholic


Posts : 253
Join date : 2015-04-25

Character sheet
Character Name: Enzeru Metsuki
Clan: Metsuki/CLN
Element: Lightning

Widget Coding Empty
PostSubject: Re: Widget Coding   Widget Coding EmptyMon May 04, 2015 3:01 pm

Hover Over Image Coding:
Code:
<img src="http://i.imgur.com/vf1dDmz.png" border="0" alt="" /> <a href="http://narutoageofthepast.rpg-board.net/u59"><img onmouseout="this.src='http://i.imgur.com/5cm65ZY.png'" onmouseover="this.src='http://i.imgur.com/2a1HTfw.png'" src="http://i.imgur.com/5cm65ZY.png" /></a> <a href="http://narutoageofthepast.rpg-board.net/u39"><img src="http://i.imgur.com/GvlWZjj.png" onmouseover="this.src='http://i.imgur.com/YDoU1a8.png'" onmouseout="this.src='http://i.imgur.com/GvlWZjj.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u69"><img src="http://i.imgur.com/Qrzt1d6.png" onmouseover="this.src='http://i.imgur.com/lBWeSJ3.png'" onmouseout="this.src='http://i.imgur.com/Qrzt1d6.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u58"><img src="http://i.imgur.com/yDIEcFk.png" onmouseover="this.src='http://i.imgur.com/rAA6GKN.png'" onmouseout="this.src='http://i.imgur.com/yDIEcFk.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u71"><img src="http://i.imgur.com/pFPm90K.png" onmouseover="this.src='http://i.imgur.com/2hzIyEa.png'" onmouseout="this.src='http://i.imgur.com/pFPm90K.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u118"><img src="http://i.imgur.com/VD4AAqq.png" onmouseover="this.src='http://i.imgur.com/HfIHMch.png'" onmouseout="this.src='http://i.imgur.com/VD4AAqq.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u62"><img src="http://i.imgur.com/x2IE8h0.png" onmouseover="this.src='http://i.imgur.com/ZZ9ymmI.png'" onmouseout="this.src='http://i.imgur.com/x2IE8h0.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u84"><img src="http://i.imgur.com/TMNQrvo.png" onmouseover="this.src='http://i.imgur.com/QQVaQTS.png'" onmouseout="this.src='http://i.imgur.com/TMNQrvo.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u77"><img src="http://i.imgur.com/sNyG7ur.png" onmouseover="this.src='http://i.imgur.com/MgsbA1n.png'" onmouseout="this.src='http://i.imgur.com/sNyG7ur.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u85"><img src="http://i.imgur.com/NJbTwNY.png" onmouseover="this.src='http://i.imgur.com/N1ss5Ei.png'" onmouseout="this.src='http://i.imgur.com/NJbTwNY.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u32"><img src="http://i.imgur.com/P3szUCV.png" onmouseover="this.src='http://i.imgur.com/9uJoVkb.png'" onmouseout="this.src='http://i.imgur.com/P3szUCV.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u3"><img src="http://i.imgur.com/PEbAD1F.png" onmouseover="this.src='http://i.imgur.com/z9zWTXC.png'" onmouseout="this.src='http://i.imgur.com/PEbAD1F.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u110"><img src="http://i.imgur.com/gmgFO8I.png" onmouseover="this.src='http://i.imgur.com/K4wXsnM.png'" onmouseout="this.src='http://i.imgur.com/gmgFO8I.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u19"><img src="http://i.imgur.com/KwkMVXk.png" onmouseover="this.src='http://i.imgur.com/DjsY8RH.png'" onmouseout="this.src='http://i.imgur.com/KwkMVXk.png'" /></a> <a href="http://narutoageofthepast.rpg-board.net/u23"><img src="http://i.imgur.com/dUTdgrl.png" onmouseover="this.src='http://i.imgur.com/ll4XtuZ.png'" onmouseout="this.src='http://i.imgur.com/dUTdgrl.png'" /></a>

How it looks:
Spoiler:

What it does:
When you hover over the image it trails over to a second image, this can be used for organizations such as Staff or even groups.

How to do it:
Code:
 <a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Side Notes:
you can repeat this process as many times as you want, make sure if the image takes up two spots hit enter and use the same code again so not to stretch out the site. This is simplistic coding.

If you want use this coding you need to Select no in the option that says: "Use a table type"
Back to top Go down
 
Widget Coding
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
Naruto Age of the Past :: Rules and News :: Suggestions-
Jump to: