FSKIK, UPSI: July 2017

Tuesday, July 11, 2017

Labelling and how to change cloud labels to block labels

Fyi, you need to add every post with one or two labels. Just look at this post, I label it with "fyi"

How to add Labels??

1. Choose "new post" - add title, and content
2. At the right bar, there is "Post Settings"

Labels Setting

3. Add your label.

**********************************************
For each post, please label it with tugasan and tugasan#

tugasan# refer to 1st or 2nd and more. Example:

tugasan 1 = tugasan1
tugasan 2 = tugasan2

**************
Change cloud display labels into Blocks
credit to mybloggertricks.com for the tips.

Just follow these steps:

1. Go to Layouts and click add a gadget
2. Choose Labels
3. Make sure to choose the cloud display

Configure Labels

4. Save the widget and go to Theme
5. Choose Edit HTML

Theme's Settings

and you will get this HTML code for your template

HTML Code

6. Make sure to copy and paste the code: Right click the HTML code in the box and click Copy, and Paste at the Notepad or Microsoft Word. Save it first.

7. Click anywhere at the HTML code in the box. Enter "Ctrl + F" for searching word.

8. In the searching box, search ]]></b:skin>

9. Make sure your cursor is above the ]]></b:skin> and then paste the following CSS code:

/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

10. Save it. DONE!

Example of Block Labels

Monday, July 10, 2017

How to add Music to Your Blogspot. Cepat dan Mudah

Let's start.

1. Go to scmplayer.co

2. Follow the instructions given

3. Choose skin you prefer
4. Click "edit playlist"

5. Add your "song title" and "song URL". You can copy and paste URL from youtube like I did.
6. You can add more songs and sort playlist.

7. Click "Configure Setting"

8. You can tick "auto play" and choose the appearence "on top or bottom"
9. Click "Done" and you will get your HTML template.
10. Copy the HTML code

11. Open your blogspot.
12. Choose "layout" and "Add a Gadget"
13. Choose "HTML/Java Script"