Showing posts with label Social Media. Show all posts
Showing posts with label Social Media. Show all posts

Friday, June 12, 2020

TC Cup of Codes: Make a Custom Profile Widget

Since, I migrated my blog to a new account, my Profile Widget has changed into a list of contributors which has made the look became unappealing to see.


Thus, in this post, I would like to share how to make a Custom Profile Widget which would show a picture (if you want), your name, a bit of description, and also a link to your profile page from it. Mine looks like below:


Without further ado, here are the steps to reproduce your profile widget:

Step 1: Go To Your Layout

Log to your Blogger account, and click on Layout.


Step 2: Click Add a Gadget

On the right panel, you'll find a structure of your blog and a list of your installed widgets. Click on Add a Gadget.


Step 3: Choose HTML/Java Script

After clicked Add a Gadget, a Pop-up will then show on your browser contains all kinds of widget features that you can add to your blog. In order to put the codes for your profile widget, click on HTML/Javascript.


Step 4: Fill The Title You Want, and Add The Code Below

There will be two columns shown, first is Title. You can fill it with anything you want.


Step 5: Add The Code Below

The second one is Content. Copy Paste all the codes below:


  
1
2
3
4
5
6
7
8
9
<dl class="profile-datablock">
<dt class="profile-data">
<a class="profile-name-link g-profile" href="https://www.blogger.com/profile/17710845953662035683" rel="author" style="background-image: url(//www.blogger.com/img/logo-16.png);">
Your Name
</a>
</dt>
<dd class="profile-textblock">Your Information</dd> </dl><br/>
<a class="profile-link" href="https://www.blogger.com/profile/17710845953662035683" rel="author">View my complete profile</a>
 

  
<a href="https://www.blogger.com/profile/17710845953662035683"><img alt="My Photo" class="profile-img" height="70" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVcAEWsp71eDpspnF3pL8TByPXQwi5ROEHF4KWwxyTp_fYbiA-wrVuXasqXAKgNE97a6GSgJ7KrH4Xkz4rBn2Uza7VSz9I0LUj0ZyVNypdUH70DVHtRUKyH1gnJT7KWNJjlavHTeY7q2pD/s113/favicont.gif" width="80" /></a>
<dl class="profile-datablock">
<dt class="profile-data">
<a class="profile-name-link g-profile" href="https://www.blogger.com/profile/17710845953662035683" rel="author" style="background-image: url(//www.blogger.com/img/logo-16.png);">
Your Name
</a>
</dt>
<dd class="profile-textblock">Your Information</dd> </dl><br/>
<a class="profile-link" href="https://www.blogger.com/profile/17710845953662035683" rel="author">View my complete profile</a>


  • On line 1, 4, and 9, you should change the Blogger ID (mine shown as 17710845953662035683) to your ID. If you want to use other profile such as Facebook, you should change the whole text inside the quotes sign (" ").
  • On line 1, change the picture inside tag "img" to any picture you want to represent you.
  • On line 5, fill your name.
  • On line 9, fill your description.
So there you go, you have a new personalised profile widget on your Blogger.

Source: 

Thursday, April 13, 2017

TC Learning Notes: Add Social Media Links to Youtube Channel

I am not new to Youtube. It has been my go source to find tutorials, entertainment, funny bits, live performances and so on. What I'm new at, is being a creator. And because of the influence of this awesome film-maker, named, Casey Neistat, I finally upload my first video 5 months ago.

Now, in my spare time, I try to learn about video-editing and about the platform some more. Whether about its settings, designs, analytics, and also the main-awesomeness, monetization!

There are so many things to learn and what I want to show you right now is how to put social media links on the channel art.

1. Sign in to your account and open your Youtube channel.



2. Click the gear button on the right side under the channel art.

3. Make sure this option is active. And click save to close the window.


4. Click "Edit Links" on the right top of your channel art to add the links.


5. Add your social media url.


6. Your links are ready to be clicked!