CoolTips2u

Showing posts with label blogger widget. Show all posts

Tuesday, 12 February 2013

How to make a cool social media sharing widget on blogger

Dear all bloggers, today CoolTips2u want to share one more cool widget on blogger. The widget called a cool social media sharing. You can see the demo on this blog. Yes! a cool social media sharing on every post of this blog! :D Okay, now let me show you how to make the widget.

1. Log-in to your blogger and click on Design tab.

2. Click on Page Elements tab.

3. Click on Add a Gadget.

4. Select on HTML/Java Script section.

5. Place the following codes ON it.

6. Click Save. That's all! :D

7. If you have some questions, please comments on the comment box below. Thanks for coming! :D

Posted by Unknown Tuesday, February 12, 2013

Monday, 11 February 2013

How to make a cool related posts widget on blogger

Dear all bloggers, today CoolTips2u want to share one more cool widget on blogger. The widget called a cool related posts. You can see the demo on this blog. Yes! a cool related posts on every post of this blog! :D Okay, now let me show you how to make the widget.

1. Log-in to your blogger.

2. Click on Template tab.

3. Click on Edit HTML.

4. Tick on Expand Widget Templates checkbox.

5. Find < / head > code.

6. Paste code below BEFORE the code.

<br />

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndopfq6IkPOsJI56nCnNNSHNwrSqco91feUUh5JwU2wKSrDZGomE7ffuPDzuc-dmrukA8AUxKvUNuVG2wF3vMTzFPoOcF4NqDYs8LcT2EtrnXZRKRU-lTRn93IvQPnqJBU4lQSRZTAP1i/s1600/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="<br/>Related Posts to '<data:blog.pageName/>'";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
</b:if>
<br />

7. Find < div class = 'post-footer' > code.

8. Paste code below AFTER the code.

9. Click Save template. That's all! :D

10. If you have some questions, please comments on the comment box below. Thanks for coming! :D

Posted by Unknown Monday, February 11, 2013

Friday, 14 September 2012

Dear all bloggers, today CoolTips2u want to share one more cool floating widget on blogger. The widget called a cool floating social media button. You can see the demo on this blog. Yes! a cool floating social media button on the right-side of this blog! :D Okay, now let me show you how to make the widget.

1. Log-in to your blogger and click on Design tab.

2. Click on Page Elements tab.

3. Click on Add a Gadget.

4. Select on HTML/Java Script section.

5. Place the following codes ON it.

<br />
<br />
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23yUC-EKY7npaXCR8PUD2_L85OuiT826MUm_cQKTvV9zL25hy3HV6D-8plrrQQYo1BkEV3eI0GbpjU8_DRfsJI3psMEHus1a0XBy-lGCKqt8gkoFanRK2xtF-seY_y-4fcQGgkoNnGZCg/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8q0YIb2RTguNv1fKki72iVF6rojCSUwkvMJRj6TxfVwdFiZItPcqjjoiMtotHM3CdNooG467d_oyb9ar6H9TW7m5X6dge3832vlV3odV6rFnR9oJhFHEmD86SVTOpwdS9L_1W_8gfEmvC/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.barconteblogger{margin:0px 0 0 43px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuADldy7YYWSKkbo5BBKzXxm6ZMuE0l_7bmbXmFHjofvI9ZeRSZgzxAEj1IGhaQHE4GmLSEK35-ehHnUpikVz46-nwcw-GEeYwb5gfGpaWoZevy8eyLKOxmOFyvja3L-SBm1i4BWk1mDgj/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYiaAVxibJG8vkDQejkeeINcp8c9xL4ZeI1gwghW4jJR-9o2YJon05RFNkOF87aATf9rq6JiP9rK1C9CBYmJYRXXMzH9CNGIoDBQdONxmxGiw6u83f_RNvB6yZATqEMf1Ybu_TUkHAm1r/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.barcontetwitter{margin:0px 0 0 43px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0y1j-PHDqDnDPIBwejYFlvgfbEOtestFWJO_EJc6bDLoMbcKxnxJWew81SDI1pL2rbETAsGKwQoqMxnPzHhbszBtwj8GOAHt7sJGJxuUtH5kQR74biqZA9IfBZ5lNTdR-Uy-V00S7P0XE/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjymhOGlrjjjaPR05WBw-qdnx7A8H3qfexshhoZe2OiWDkU8TeVb59XZx48Jxp1MPzrMdnmulkVHfOBEUBoxKrNEyXn1GWtuPTBkDd0NtLYUSxcuDm2ZDkEGdw2GLKtaOAoJKvOwhaaX9cY/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.barcontefacebook{margin:0px 0 0 43px}
.barquestionmark{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDUYHS7IlFCsIqSXsJHSn892pJ7r_7WIHrmMsh-CmvNTpnT5wM0sSbpsVrjv44OqAPHIdbFEYKtUfWX7olosk_sNe8nYowmAd0gc4ZNdTEPGHUjCLh65M7oDEg0Q4t1gxJTsqD-AGfZCD/s1600/question+mark+2.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
</style><br />
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger"><a href="https://www.facebook.com/CoolTips2u" target="_blank"><img alt="Like CoolTips2u on Facebook" title="Like CoolTips2u on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4ZWLq2dgGfFZ2iM_nWf5Vg6Y7oG10D77u9HMLYcenL3hMGvNHJH3E7l0GnBp08-9Zgs_zESWL1m0mUKdQpK6UkUnfJYQr2vzXue9v_OrGwJf7fRiggqOV8NtIac6RLUI-JlsMdR9XV_b/s1600/FB-open-new.png"/></a><br />
</div></div><div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter"><a href="https://twitter.com/CoolTips2u" target="_blank"><img alt="Follow CoolTips2u on Twitter" title="Follow CoolTips2u on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRzKvNMMIXkrwAEI3u27UJi53BJXglQ5yYPIWRbV6Jb4kQ1ebuWoH2x0SAsHHB50NCKorDBySyOJGyceGzKUi0xn_E8RhadCTrNYD4_aICK5PkpobVvlJt3YHR7lyNV21THQWCV0jaBIK/s1600/TW-open-new.png"/></a><br />
</div></div><div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook"><a href="https://plus.google.com/104738107757885877986/posts" target="_blank"><img alt="Recommend CoolTips2u on Google Plus" title="Recommend CoolTips2u on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_MH9Zu7Rv9G7IQYmdRAozg4qjoqXOIMGkHsrtaBY88p66jH171WMqs8JUp3Dl8ved36mavea2RD3M6DN8Tz9JR5Dm-wHeXcrj624g1h0MQh2LwyETW7O3NOsVNeNd8yqCzWOhKUZSEjU/s1600/G+-open-new.png"/></a><br />
</div></div><div class="barquestionmark"><a href="http://www.cooltips2u.com/2012/09/how-to-make-cool-floating-social-media.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9NYaAyycJ3qb4Z8qO5czHzEesGTKQtP1d6kPivXOvRBLxpOtwkMbMRJyRRXhQtx2iyorAMZQtwzK7vlxE2sgYQe-j1D4WV9sNCtsoGKQ5cGmhiDzsKuzgs_dE_NygZ7cmLdx7Ny3zSrcq/s1600/blank.png" alt="Add this widget on your blog!" title="Add this widget on your blog!"/></a><br />
</div><br />

6. Click Save. That's all! :D

7. Customization:

1. Replace the https://www.facebook.com/CoolTips2u URL with your Facebook Page URL.

2. Replace the https://twitter.com/CoolTips2u URL with your Twitter Page URL.

3. Replace the https://plus.google.com/104738107757885877986/posts URL with your Google Plus Page URL.

8. If you have some questions, please comments on the comment box below. Thanks for coming! :D

Posted by Unknown Friday, September 14, 2012

Dear all bloggers, today CoolTips2u want to share a cool floating notification widget on blogger. You can see the demo on this blog. Yes! a cool floating notification bar on the top-side of this blog! :D Okay, now let me show you how to make the widget.

1. Log-in to your blogger and click on Design tab.

2. Click on Edit HTML tab.

3. Find (Ctrl+F) the <body> code.

4. Place the following codes AFTER it.

<br />
<br />
<style type='text/css'>
#ut-sticky
{
background: #09C; /* Old browsers */
background: -moz-linear-gradient(top,  #09F 6%, #09F 9%, #09C 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#09F), color-stop(9%,#09F), color-stop(99%,#09C)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* IE10+ */
background: linear-gradient(top,  #09F 6%,#09F 9%,#09C 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09F', endColorstr='#09C',GradientType=0 ); /* IE6-9 */

border-bottom:2px solid #999;

color:#fff;
text-align: center;
margin:-12px auto;
padding-bottom:1px;
border-top: 10px solid #333;
height:40px;
font-size:13px;
position:fixed;
vertical-align: baseline; overflow:hidden;
z-index:999;
width:100%;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
 -moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
}
#ut-sticky:hover
{

background-color:#333;background-image:-moz-linear-gradient(top,#555555,#434343);background-image:-ms-linear-gradient(top,#555555,#434343);background-image:-webkit-gradient(linear,0 0,0 100%,from(#555555),to(#434343));background-image:-webkit-linear-gradient(top,#555555,#434343);background-image:-o-linear-gradient(top,#555555,#434343);background-image:linear-gradient(top,#555555,#434343);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555',endColorstr='#434343',GradientType=0)

-webkit-transition:all 1.3s ease-in-out;-moz-transition:all 1.3s ease-in-out;-o-transition-duration:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;

-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
 -webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);

}

#ut-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white}

#ut-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#ut-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;}
.ut-cross{display:block; position:relative; right:15px; top:4px;float:right;}
.ut-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;}
.ut-cross, a:hover{color:#DDD; text-decoration:none;}

</style><br />
<div id='ut-sticky'><p style='padding-top:5px;'>Get more updates by <br />
<a class='twitter-follow-button' href='https://twitter.com/CoolTips2u'>Follow @CoolTips2u</a><br />
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><br />
</p><a href='http://www.cooltips2u.com/2012/09/how-to-make-cool-floating-notification.html' target='_blank' title='Add this widget on your blog!'><img alt='Add this widget to your blog!' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK75vTJU7mpcpm4a_HS2kzSkfQWtLWQbj_QjeY0Y3vONmbSAmhWRiEedzT7CCJvxDPl_9nZkaRm_JflLyDrj_hSMYQcQ0M5_daoeiVNJKbAYZIBq-Twyu5iMGjVuGg9KLCWdrqAEyqSC_-/s1600/question+mark.png'/></a><br />
<div class='ut-cross'><a href='javascript:hide_cross();'>X</a></div></div><script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("ut-sticky");
crosstbox.style.visibility = 'hidden';
}
</script><br />
<br />

5. Click Save Template. That's all! :D

6. Customization:

1. You can change the background bar to your favorite color. Just replace the color code on background: #09C; on #ut-sticky section (don't forget to change all the background code: background: -moz-linear-gradient(top, #09F 6%, #09F 9%, #09C 99%); | background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#09F), color-stop(9%,#09F), color-stop(99%,#09C)); and so on).

2. You can also change the background bar (when mouse over) to your favorite color. Just replace the color code on background-color:#333; on #ut-sticky:hover section.

3. You can also change the content of the bar with your desired text or widget. Just replace the code within <p style='padding-top:5px;'> and </p>. In this case, I put some texts and my twitter widget.

7. If you have some questions, please comments on the comment box below. Thanks for coming! :D

Posted by Unknown Friday, September 14, 2012