Skip to main content

Create a multi-profile badge for your Blog

Check out another version of this profile badge here



I just realized that there is no way to add multiple profile's link on your blog. It is either Google+ profile badge or you have to copy your badge code from other sites like facebook in a widget.
How about we make a custom badge with multiple links to our different profiles.

To do so I am going to use a simple CSS trick to encircle my profile picture and simply add the links to my various profiles.

We are making a profile badge which would end up looking like this


Step 1. We need to define some CSS for the box and list of profiles. Add following code in your CSS.

.profileBadge img {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    margin: auto;
    display: block;
    padding: 5px;
    text-align: center; 

}
.profileBadge li {
text-transform: uppercase;
list-style: none;
line-heigth: 1.4px;
text-align: center; 
padding: 5px;
}
.profileBadge{
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}

Step 2. Since we are using fontawesome here. we need to call that CSS as well. For that add following line just before the </HEAD> in your template.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css' rel='stylesheet'/>


Step 3. Go to page layout and add a gadget of HTML/Javascript. Leave the title part empty if you like and add following code in the next part.

<div class="profileBadge">
<img src="YOUR_PROFILE_PICTURE.png" alt="profile_picture" width="200" height="200" />
<p align='center'>Whatever you want to say goes here..</p>
<li><i class='fa fa-google-plus'></i> <a href="http://plus.google.com/u/0/+YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-instagram'></i> <a href="http://instagram.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
<li><i class='fa fa-facebook'></i> <a href="http://facebook.com/YOUR_USER_ID">YOUR_USER_ID</a></li>
</div>

And change everything with your credits. Your custom profile badge is ready.

Comments

Popular posts from this blog

Unity Mobile Game Optimization Checklist

- On Image and Text components that aren’t interacted with you can uncheck “Raycast Target” on it, as it will remove them from any Raycast calculus. - Click on your textures in your “Project” window. Click on the “Advanced” arrow, and now check “Generate Mip Maps”, Unity especially recommends it for faster texture loading time and a lower rendering time. - Set the “Shadow Cascades” to “No Cascades” (Quality settings) - If you have dynamic UI elements like a Scroll Rect with a lot of elements to visualize, a good practice is to turn off the pixel perfect check box on the canvas that contains the list and disable the items that aren’t visible on the screen. - Set all non moving objects to "Static" - Above Unity3d 2017.2 you should turn off "autoSyncTransforms" on the Physics tab - Always use Crunch Compression Low on textures - Try to keep the “Collision Detection Mode” on “Discrete” if possible, as “Dynamic” demands more performance. - You can go to the TimeManager w...

How to make RPC in Unreal Engine Steam Online Subsystem and EOS

Remote Procedure Calls, also known as RPCs, are a way to call something on any other instance.  In the Unreal Engine, RPCs are used to ship events from the patron to the server, the server to the customer, or from the server to a specific group. It's important to word that RPCs cannot have a return cost. If you want to return something, you'll ought to use a seconds RPC within the contrary path. There are precise policies that RPCs observe, which are unique in the official Documentation. Some of these regulations encompass wherein the RPC must be run, such as the server instance of an Actor, on the owner of the Actor, or on all instances of the Actor. There are some necessities for RPCs. First, they must be referred to as on Actors or replicated Subobjects. The Actor (and component) have to additionally be replicated. If the server is looking an RPC to be executed on a customer, handiest the patron who owns that Actor will execute the function. Similarly, if a client is calling...

How to drag and drop item in Unity3D

  For dragging and dropping to work we will need to first grab the Game Object and ensure while the Game Object remains grabbed it's position reciprocates the mouse position. This will work fine for not only PC bug mobile devices as well. First define GameObject which we will be dragging. public GameObject selectedPiece; Now inside Update method we will give reference to touched/clicked object and while there is a reference available to an game object(selectedPiece;) we will move that object to mouse position. When the reference is remove, object won't move therefore dropped. void Update(){ RaycastHit2D hit = Physics2D.Raycast(Camera.main.ScreenToWorldPoint(Input.mousePosition), Vector2.zero); if (Input.GetMouseButtonDown(0)){ if(hit.transform != null)             {                 if (hit.transform.CompareTag("PIECE"))                 {     ...