Short Description:
Content Glider is featured contents on your page, by turning ordinary pieces of HTML content into an interactive "glide in" slideshow. In Monezine, The Glider is exactly below the menu and above the mainpost. It has 960px width with Thumbnails picture (450x180), short text teaser, read-more button, and 468x80 adsense place. Please see the screenshot below.
HOW TO FILL THE CONTENT GLIDER WIDGET
Every single content in Content Glider is coded by HTML combination. I will show you the HTML structure of per content glider.
Per Content
<div class="glidecontent">
<div class="glidim">
<a href="POST-LINK-LOCATION" title="TITLE" > <img src="IMAGE-LINK-LOCATION" style=”width:450px; height:180px" alt="IMAGE TITLE"/> </a>
</div>
<div class="glidmeta">
<h2><a href=" POST-LINK-LOCATION " title="TITLE">POST TITLE</a></h2>
TEASER TEXT, ...
<div class="ad2">
YOUR-ADSENSE-CODE HERE
</div>
<div class="gmore">
<a href="POST-LINK-LOCATION">Read more</a>
</div>
</div>
</div>
Change the word:
- POST-LINK-LOCATION with your featured article link address
- IMAGE-LINK-LOCAION with your image address
- YOUR-ADSENSE-CODE HERE with your 468x60 adsense code
- TITLE with your short description. TITLE is hover, that will show when your mouse put over the link.
- IMAGE TITLE with your own image title. IMAGE TITLE is hover, the title will show when your mouse put over the image.
- POST-TITLE with your article title.
You can edit it in word processor, notepad or alike
SET YOUR ADSENSE COLOR CODE FOR CONTENT GLIDER
Go to your adsense account, then change the color with this below
| Border |
| ||
| Title |
| ||
| Background |
| ||
| Text |
| ||
| URL |
|
save it...
Copy that code
MAKE MORE THAN ONE (RECOMMENDED MAX 12 IMAGE SLIDE)
Just copy another content below the previous. You can make it three, four, or five content glider. After that, Change all link, image source, Teaser Text, and hover short description. No need to change the adsense code. You only need to copy-paste again.
AFTER MAKE YOUR OWN CUSTOMIZATION
- Go to Add Page Element
- You'll see the Glider Widget
- Then Press Edit
- Paste your content into the HTML/javascript box
- Save it, then you're done (Your Adsense maybe appear for next 10 minutes)
:) have a nice try .......
EXAMPLE CODE
<div class="glidecontent">
<div class="glidim">
<a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html" title="Superbowl"> <img width="450" alt="Superbowl" src="http://web2feel.com/tribune/wp-content/uploads/sports.jpg" height="180"/> </a>
</div>
<div class="glidmeta">
<h2><a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html" title="Superbowl">Superbowl</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, ...
<div class="ad2"> <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
/* 468x60, created 3/15/09 */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div> <div class="gmore">
<a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html">Read more</a>
</div>
</div>
</div>
<div class="glidecontent">
<div class="glidim">
<a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html" title="Bond with a vengeance"> <img width="450" alt="Bond with a vengeance" src="http://web2feel.com/tribune/wp-content/uploads/bond.jpg" height="180"/> </a>
</div>
<div class="glidmeta">
<h2><a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html" title="Bond with a vengeance">Bond with a vengeance</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, ...
<div class="ad2"> <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxx";
/* 468x60, created 3/15/09 */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div> <div class="gmore">
<a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html">Read more</a>
</div>
</div>
</div>
<div class="glidecontent">
<div class="glidim">
<a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html" title="Speed race"> <img width="450" alt="Speed race" src="http://web2feel.com/images/a7.jpg" height="180"/> </a>
</div>
<div class="glidmeta">
<h2><a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html" title="Speed race">Speed race</a></h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus ...
<div class="ad2"> <script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxxx";
/* 468x60, created 3/15/09 */
google_ad_slot = "xxxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script
src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript">
</script>
</div> <div class="gmore">
<a href="http://www.cahayabiru.com/2009/03/blogger-template-zinmag-monezine.html">Read more</a>
</div>
</div>
</div>
No comments:
Post a Comment