Detailed tutorial on how to make a personalized music box

Effect description: Click on the song (music) name, and a personalized music box of your own style will pop up in the upper left corner of the page. Effect demonstration: Demonstration 1 Demonstration 2

Detailed production process: 1. Production of music box template

1. Select a picture of appropriate size as your music box background. You can first use image processing software to slightly process the background image (cutting, polishing, etc.);

2. Add an article list to the page where your song (music) is located, and hide the article list;

p>

3. Publish a new article in the article list and upload the background image of the music box you selected. After the upload is successful, copy the URL address of the background image;

4. Publish another article in the article list A new article for making and debugging your music box. Method: In the visual editing mode, click "Insert Table", select (input) N rows × 1 column in the pop-up dialog box (table properties) (you can decide how many rows to insert, mainly to position the text and player in the music box etc.), enter the width and height values ??of your background image size in the table width and height fields, paste the background image address you just copied in the "Background Image" field, and press "Confirm".

5. Enter your music box name in the background of the music box, such as XX home music audio-visual (room), song (music) name, performer, etc.;

6. Switch Go to html editing mode and insert the player code in the appropriate position of the music box: lt;EMBED loop=-1 src=song (music address) width=width height=height type=audio/x-pn-realaudio-plugin mime-types= mime.types Initfn=load-types controls=ControlPanel,StatusBar,TACCtrl maintainaspect=true loop=false autostart=true (This code basically applies to any format of music, where: the autostart value "true" means that the music automatically plays , if you don’t want to play automatically, you can change true to false; the width and height values ??cannot be greater than the width and height of the background image). Tip: If you don't know where to insert the above code in html mode, you can first enter any text such as "China" in the visual mode where you want to place the player, and then switch to html mode and insert it. Just replace "China" with the player code.

7. After inserting the player code, switch to the visual mode, and add the music download address under the player (this is entirely for the convenience of viewers to download, it is recommended to have no less than 2 download addresses) , Broken link report (to facilitate viewers to report invalid music links to the webmaster).

8. After completing steps 4-7 above, click "Confirm" to publish the article.

9. Open the article you just published (that is, the music box template you just made), and you can see what the music box looks like. At this time, you can use a combination of visualization and HTML mode to further beautify the position, text size, color, etc. of the player in the music box. The general principle is to make your player the most beautiful. Once you're satisfied, change the Music Box Table Border Size value to 0.

10. Finally, in html mode, add lt in front of the code you see; DIV id=Layer1 style=Z-INDEX: 8; LEFT: 0px; WIDTH: 299px; POSITION: absolute ; TOP: 0px; HEIGHT: 44px, followed by lt;/DIV. Press "Confirm" to publish the article. Note: The above code is added to position the music box in the upper left corner of the article page.

Of course, if you are using a blank template for VIP users, this step can be omitted. However, due to some defects of the blank template, the effect is not as good as using code.

11. At this point, your personalized music box has been created! From now on, each song (music) will use the music box template you made. Just modify the song (music) name, performer, music link address, and music download address. Note: The song list can be published in the article list you created in step 2.

2. Create a link to the song (music) page

The purpose of this step is to create a link to your song in the article list on the song (music) page you are on. This step uses the following code: lt; a href=# onClick=window.open('The article address of the corresponding song in your song list', 'aaa', 'toolbar=0, location=0, directories=0, status=0 , menubar=0, scrollbars=0, resizable=no, width=width (same as the width of the music box), height=height (same as the height of the music box), left=0, top=0, fullscreen=0, channelmode=0 ','-blank');Song namelt;/a

Note: For the positioning of song links, please refer to the player positioning method in step 6.