Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

How To Make Youtube Videos Autoplay in blog

youtube autoplay on blog

MY BACKLINK - Hello guys, in the following trick is a youtube video to be installed or included on our blog, and the video will automatically rotate automatically (autoplay) when we opened the pages of our blog visitors. Video sample below my take on youtube. I chose the video track "I'm With You - Avril Lavigne | Cover by Keesamus" as an example tutorial, because I like the song and Keesamus.

Live Demo Here


How To Make Youtube Videos Autoplay in blog.

Okay, now we begin to discuss the tutorial.

Here's how:


1.First you must take the first on youtube embed code.

2. Open the YouTube video you want to put on the blog. Video should you play or you turn off. Up to you.

3. Note the below video. Please click Share or Share, and then click Pin or Embed. See the picture below.

Youtube Videos Autoplay


4. After that please copy the embed code that appears there. See picture on the blue background.

5. Paste embed code / embedded this code in notepad. Then add the code: ?rel=0&autoplay=1

The results will be as follows:


<iframe width="500" height="350" src="https://www.youtube.com/embed/5fUpc8tGNy4?rel=0&amp;autoplay=1" frameborder="0" allowfullscreen></iframe>

Note:
500 is high and the 350 is the width of the video. Please adjust the height and width of her YouTube videos. <
LEARN MORE

How to Make Text Walking in Blog

How to Make Text Walking in Blog

How to Make Text Walking in Blog - Ever not you see the writing / text - paced sector in the blog? I think you must have seen it, the kind of writing such a marquee name, the actual function merely as decoration on the blog alone, almost the same as headline news, only that it is easier ngaturnya, especially in regulating the movement / behavior in the desired text. You are interested in making the running in the blog posts, please consider the following ways.

1. Login to blogger.
2. Click Layout >> Add a Gadget >> HTML/JavaScript(If you want to display on your blog widget).
3. Click save and see the results.

How to Make Walking in Blog Posts


1. The text moves from right to left

<marquee direction="left" scrollamount="2" align="center">MY BACKLINK 86</marquee>

The result

MY BACKLINK 86


2. The text moves from left to right

<marquee direction="right" scrollamount="2" align="center">MY BACKLINK 86</marquee>

The result

MY BACKLINK 86


3. The text moves back and forth from left to right

<marquee direction="left" scrollamount="2" align="center" behavior="alternate">MY BACKLINK 86</marquee>

The result

MY BACKLINK 86


4. The text moves back and forth from right to left

<marquee direction="right" scrollamount="2" align="center" behavior="alternate">MY BACKLINK 86</marquee>

The result

MY BACKLINK 86


5. The text moves from top to bottom

<marquee direction="down" scrollamount="2" align="center">MY BACKLINK 86</marquee>

The result

MY BACKLINK 86


6. The text moves from bottom to top

<marquee direction="up" scrollamount="2" align="center">MY BACKLINK 86</marquee>

The result

MY BACKLINK 86


7. The text moves back and forth from top to bottom

<marquee direction="up" scrollamount="2" align="center" behavior="alternate">MY BACKLINK 86</marquee>

The result

MY BACKLINK 86


8. Text moving zig - zag (diagonal) bounces

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> MY BACKLINK 86</marquee></marquee></center>

The result

MY BACKLINK 86


9. Text moving zig - zag (diagonal) translucent

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right">MY BACKLINK 86</marquee></marquee></center>

The result

MY BACKLINK 86


Note:
  • Direction: to regulate the movement patterns of text (left, right, up and down).
  • Scrollamount: to regulate the speed of movement of the text. Raise the numbers (from 2 to 3) to accelerate the movement and vice versa.
  • Behavior (scroll / slide / alternate): to set the movement behavior.
LEARN MORE

How to display widget only on certain pages in the blog

This time My Backlink 86 discusses how to display the widget on a particular page on the blog as the main page / post pages and other pages.

Blogger Widget
illustration


Its function is to save space of your blog page as well as to speed up the loading blog besides your blog page is neat and professional look for the management of your blog.

This method is quite easy just to add some code, by adding the code then you can display the widget you want to appear on the page just as you want it.

Well without a lot of strings attached and practice you can see the code below:


1. Displays widgets only on page Archive alone.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>


2. View the widget on all pages except the archive page.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>



3. Displays widgets only on post pages.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>


4. View the widget on all pages, except the post page.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>


5. Displays widgets only on certain posts.

<b:if cond='data:blog.pageType == &quot;address-posts&quot;'>
......................................................
</b:if>


6. View the widget in addition to the specific post.

<b:if cond='data:blog.pageType != &quot;address-posts&quot;'>
......................................................
</b:if>


7. Displays widgets only on page staticpages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>


8. Displaying a widget on all pages, except staticpages page.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>


9. Code widget displays only the particular url.

<b:if cond='data:blog.url == "URL page here"'>
......................................................
</b:if>


Note: Signs point - the point above is the widget code that must be in place.

Examples of applicability can do on an existing widget on your blog, for example, you only want to display the widget "Popular Posts" only appear on any item, then the following steps:

Example: popular posts widget code below:

<b:widget id='HTML4' locked='false' title='Popular posts' type='HTML'> <b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
LEARN MORE

How To Change the List Bullet Image in Blogger

List Bullet Image in Blogger

One of the steps that you can do to beautify your blog or to beautify your blog posts is by replacing Bullet Bullet Point List or your default template.


How To Change the List Bullet Image in Blogger

  1. Login to blogger.com
  2. In the drop down menu, select a template
  3. Click the Customize button
  4. You will be taken to a page Blogger Template Designer
  5. Click Advanced and select Add CSS

   6. Copy Paste the following code in column Add CSS.

.post ul li { list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJi32xLs8DaMqi9aOtBcnhzEbmv0USIFcm40JZ2q8eW7E7rDhtoHG5og-0VW3vn2RhZOuoC4SJZxizz93uTSK-gq-jqI3MAGw1i551YjzOj1bJ4zUbc3Odj6JMBSzyvk1IZMFCBQ7Z4s/s1600/star_bullet.png'); }

List Bullet Image in Blogger

   7. Finally click the Apply to Blog

Reload your blog to see the results. CSS code above will display the List Bullet like the picture above.

LEARN MORE

Easy Ways to Make Banner Animation

Creating animated banner may be said to be useful for those who want to promote a product or website. Animated banners attract more attention than usual. Definitely my friend never saw a banner that arrived - arrived move / change the writing, and ask - and confusion wondering why the image could move: D. That's called an animated banner. Maybe for you guys who are proficient in the field of graphic design never mind no stranger to create animated banner with the software.


However, unlike me. I am not very proficient in the field of graphic design. I usually create animated banner using online services are either free or paid that we can use. Typically, animated banner format and extension .gif or flash. Below are some websites that provide services create animated banner:

Gif banner:


Flash banner:

To make this animated banner, I recommend using the services of picasion website. Please refer below to find out how to How to make an animated banner.

1. Make 2-3 more images (according to your needs) with a size of 125 x 125 px. example:


2. Now that you visit the site http://picasion.com.
3. Next, click Browse and select the image that has been my friend made earlier.


4. Select the image size in the Size dropdown menu.
5. Select the animation speed also on the dropdown menu Speed.
6. If so, click Create animation.
7. If you use the example picture No. 1 result will be like this.


9. You can save the animated banner or can also simply copy the image url.
10. Done.

How? is not how to create an animated banner?.

Hopefully useful
LEARN MORE

Script Code Ctrl + U Effect Redirect

My Backlink 86 - A lot of people who want to steal a script code from our blog by using button Ctrl + U to see a good script code CSS, HTML, or JavaScript that exist in our blog. To avoid theft this code using ctrl + u i have a blog tips obtained from Kang Ismet. Here if we press Ctrl + U then we would be transferred to a page, which is where this function to the results page redict or redirect (divert).


With the use Script Ctrl + U then it will be a little safer and can give a little warning to those who would steal the script of our blog. Script ctrl + u is given effect to divert to another page so that no one can see our blog script code. Immediately, who want to know the script ctrl + u to redirect effects please refer to the following:


For DEMO please you press Ctrl + U on this blog (My Backlink 86).

1. Log into your Blogger.com account
2. Click the Template => Edit HTML
3. Copy the code below, then paste the above / before the code is </body>


Note :
Please replace the text links with the blue color (http://mybacklink86.blogspot.com/p/terms-of-use.html) of your Destination URL

5. Save Template.

6. Try press Ctrl + U on your blog is in Redirect

Hopefully Helpful
LEARN MORE

How to Hide Active Link In Blog Comments Automatically

How to Hide Active Link In Blog Comments Automatically

My Backlink - These tips are very helpful for your blog that has a lot of visitors and is relatively stable, because the install script code to hide active link to the blog comments will automatically be easier for you to remove the active link there on your blog comments. Imagine if the comment there are hundreds or thousands of comments on your articles, and there are some people commenting using active links in order to find backlinks.

Active link is very telling to get a link from a website or a blog, but the effect is very high for a blog with comments, if the active link is dead alias is not there on the Internet again, it will be a broken link Broken Link which is a dead link but there on your blog and this will degrade the quality of your blog's SEO. Very dangerous is not it? Therefore I suggest that you install the script code to hide the existing active link on your blog comments automatically.

To hide the active links in the blog comments are automatically we can use two ways, namely by using CSS and can also use jQuery. But I would suggest a better use for that use jQuery css code can still be detected in the html code.

Usually the active link in the blog comments will be undertaken by people who are not responsible, and we can say with SPAM. Because they did not comment after the article topic, instead they trade or advertise in our comment box and it is spam in our blog comments and very disturbing, therefore it is time we use a script to remove active links automatically blog comments to avoid spammers.

Immediately menyembunikan how active links automatically on blog comments?

Please refer to the tutorial you menyembunikan active links automatically on blog comments below:

How to Hide Links Using CSS Automatically Active:

1. Copy one of the following CSS code:

#comments p a {display:none;}

or

#comments p a{display:none!important}

2. Go to Blogger.com
3. Click the Template => Edit HTML
4. Find the script code ]]></b:skin> (press ctrl + f to speed up the search)
5. Paste if you have found one of the CSS code above, right before or at the top of code ]]></b:skin>
6. Click Save Template



How to Hide Active Links Using jQuery Automatically:

1. Go to Blogger.com
2. Click the Template => Edit HTML
3. Find the code </body>
4. Copy the jQuery code below, then paste the above code </body>

<script type='text/javascript'>
//<![CDATA[ function blockLinks(parentID, children) { var parent = document.getElementById(parentID),
content = parent.getElementsByTagName(children);
for(var i = 0; i < content.length; i++) { if(content[i].innerHTML.indexOf('</a>') !== -1) { content[i].innerHTML = "Sorry, Not Shown <span style='background-color: red; color: white; padding: 3px;'><b>Link Active</b></span> Here";
content[i].className = "spammer-detected";}}}
blockLinks('comment_block', 'p');
//]]>
</script>

5. Click Save Template

A few articles on How to Hide Active Link In Blog Comments Automatically.

Hopefully Helpful.
LEARN MORE

Creating Links Redirect to another URL on the Blog


My Backlink - Creating Links Redirect to another URL on the Blog - One trick is very useful for those of you who want to divert the visitors at the old blog to the new blog. This might be because you have made a new blog with new address or better than the previous blog. As always, if we create a new blog with a new URL, traffic would also have to start from zero, then the trick of it is useful for us who want to utilize our old blog traffic by implementing the redirect trick that directs visitors to the old blog new blog, so that we do not need to start from zero again our traffic ... fun is not it? : D

For those of you who want to implement this redirect tricks on the blog, please see the following steps:

1 Log in to your blogger
2 Go to the "settings" of your old blog (which already has quite a lot of traffic)
3 Then click >> Edit HTML
4 Find the code <head> tag and place the following code at the bottom

<meta content='3; URL= http://your-order-links- redirect.blogspot.com' http-equiv='refresh'/>

Description:
Figures 3 intends to redirect to your new blog then it takes 3 seconds (the smaller the faster, for example: 1 then it means 1 second). Then link http: // your-order-links- redirect.blogspot.com you can replace with your new blog address (URL blogs that serve as the transfer target).

5. Click save template.

Please see the results in your blog: D
LEARN MORE

The widget displays at Blogspot Templates Mobile version

Widget Blogger

My Backlink - For those of you who use the template has two versions of a particular blog that possess features custom mobile templates may be wondering, "why yes in the mobile version of my blog widget does not appear?" well, in this post will be a bit of explaining Display Widget in Blogspot Templates Mobile version.


The reason why you put the widget does not appear on the mobile version is due in the default widgets that appear on the mobile version only the following widgets:
  1. header
  2. blog
  3. Profile
  4. PageList
  5. AdSense
  6. attribution


If you put aside widget widget above, such popular post or the archive, then the widget will not appear on the mobile version. Well, the question, the widget can be set in order to perform in the mobile version, the answer could be.

To set the widget that you can attach to appear on the mobile version of how you just need to add a new attribute to the tag <b:widget/>.

For example, the widget displays popular posts in the mobile version, the first way is to go to dashboard > template > edit HTML. after the search tag on the popular post widget in the template. Approximately Popular Post widget code it like this:


<b:widget id='PopularPosts3' locked='false' title='Entri Populer' type='PopularPosts'>


Now we need to do is add a new attribute to the tag of the widget, including mobile. Attribute mobile itself has three values​​, ie Yes, No, and Only. As this application:

<b:widget id='PopularPosts3' mobile='yes' locked='false' title='Entri Populer' type='PopularPosts'>

The above code is to display the mobile version of the popular post widgets and also appear in the display the desktop version.

<b:widget id='PopularPosts3' mobile='only' locked='false' title='Entri Populer' type='PopularPosts'>

The above code is to display the mobile version of the popular post widget but does not appear in the desktop version.

<b:widget id='PopularPosts3' mobile='no' locked='false' title='Entri Populer' type='PopularPosts'>

While the above code is to hide the widgets on the mobile version.

To note is that each widget has a different id, so you should be careful in finding the widget code tag.

Yup, probably just that much alone. Hopefully this short tutorial helpful.
LEARN MORE