Tuesday, December 31, 2013

Online Games - Bilijar









Social Widget - 4 in 1




Your first priority should always be Facebook, Google+, Twitter, Linkedin and Feedburner for social subscription widget. All these social media, play well in circulating your content over a wide range of visitors. Social Media is a non-stoppable engine, which, if driven correctly and carefully can bring tons of valuable traffic each visitor worth a dollar. You should always encourage your readers to share, like, pin your post or articles. provides the best sharing, social, recommended content, and conversion tools to help you make your website smarter.







How to install:

1. Log into your blogger account
2. Design --> Edit HTML
3. Copy this code bellow and past before
</body> tag






Save template:





Now add widget:

Layout--> Page Elements --> Add Gadget
Choose "HTML/JavaScript"
Add Code Beloow and Change URL to Your URL





Click  "Save" - That's All.


Floating Social Bookmarks Widget

Floating Social Bookmarks sa mouseover efektom, korisna i primamljiva stvar. Widget kao i svaki drugi samo što ovaj stoji na vrhu stranice i reaguje na dodir miša.



1. Log in na blogger account
2. Design --> Page Elements --> Add Gadget
3. Izaberite "HTML/Java Script"

4. Dodajte kod ispod u HTML i zamenite URL sa vašim facebook, twitter itd. adresama



Kliknite save i gotovo.

Kako da "Skinete" Video sa Facebooka



Da ne dužim pričom, postoji sajt koji skida video i daću vam link. Skida u svim formatima a i skida sa youtube-a takodje. 


Kopirajte link
Odete na downvids.net
Paste URL i kliknite DOWNLOAD
To je sve.

Dog vs.Cat


Monday, December 30, 2013

Super Social Widget



Još jedna u nizu odličnih widgeta za blog ili sajt. Lako se instalira i super funkcioniše. 


Live Demo


Idemo kao i uvek: 

Templates > Edit HTML 
Nadjite  ]]></b:skin> i odmah iznad, dodajte sledeći kod

ul#icon-socialmn{float:right}ul#icon-socialmn li{float:left;display:inline-block;position:relative}ul#icon-socialmn li a{background-image:url(http://3.bp.blogspot.com/-JWxzfuPXWDQ/ULykR51IjoI/AAAAAAAABfk/GUjrfkEH7hc/s1600/team-social-icons.png);background-repeat:no-repeat;display:block;width:40px;height:47px;text-indent:-9999px;-webkit-transition:background .2s ease-out;-moz-transition:background .2s ease-out;-o-transition:background .2s ease-out;transition:background .2s ease-out}ul#icon-socialmn li.social-twitter a{background-position:4px 7px}ul#icon-socialmn li.social-twitter a:hover{background-color:#2DAAE1}ul#icon-socialmn li.social-facebook a{background-position:-25px 7px}ul#icon-socialmn li.social-facebook a:hover{background-color:#3C5B9B}ul#icon-socialmn li.social-google a{background-position:-54px 7px}ul#icon-socialmn li.social-google a:hover{background-color:#F63E28}ul#icon-socialmn li.social-rss a{background-position:-85px 7px}ul#icon-socialmn li.social-rss a:hover{background-color:#FA8C27}ul#icon-socialmn li.social-linkedin a{background-position:-116px 7px}ul#icon-socialmn li.social-linkedin a:hover{background-color:#0173B2}ul#icon-socialmn li.social-dribbble a{background-position:-146px 7px}ul#icon-socialmn li.social-dribbble a:hover{background-color:#F9538F}ul#icon-socialmn li.social-pinterest a{background-position:-176px 7px}ul#icon-socialmn li.social-pinterest a:hover{background-color:#CB2027}


"Save" template i to je prvi deo
Widget izgleda otprilike ovako, zavisi od bloga i šablona jer neće isto izgledati na svakom blogu, nemojte se iznenaditi ako vam izgleda drugačije. Ako želite još ikonica, potražite na net-u, postoji pregršt sajtova za ikonice.


Sada dodajte ovaj kod bilo gde, gde želite da vam se widget pojavi.

<div dir="ltr" style="text-align: left;" trbidi="on"><ul class="sociico" id="icon-socialmn"><li class="social-twitter" style="background-color: black;"><a href="Your Link Here" target="_blank">twitter</a></li><li class="social-facebook" style="background-color: black;"><a href="Your Link Here#" target="_blank">facebook</a></li><li class="social-google" style="background-color: black;"><a href="Your Link Here" target="_blank">google</a></li><li class="social-rss" style="background-color: black;"><a href="Your Link Here" target="_blank">rss</a></li><li class="social-pinterest" style="background-color: black;"><a href="Your Link Here" target="_blank">pinterest</a></li></ul></div>

Ako želite da zamenite pozadinu, vidite gde piše "black" zamenite bilo kojom vašom bojom a ako ne želite nijednu odnosno transparentno, samo sklonite ovo style="background-color: black;" gore podvučeno sivom bojom. 
Dodajte vaše URL adrese i to je sve. 

Saturday, December 28, 2013

Multi Tabbed Widget za Bloger


Ovo je widget sa 3 kolumne i vrlo je prikladan za većimu blogova, imate demo pa ako vam se svidi vi iskoristite. 

Ovaj widget već ima FollowersPopular PostsBlog Archive ali vi napravite po vašem ukusu i kako vama odgovara

Screenshot


Kliknite Ctrl+F i nadjite ]]></b:skin>

Odmah iznad toga dodajte sledeći kod:

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#4E4840;background:#EBEBE5;padding:5px 16px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#756857;color:#FFF;text-decoration:none}
.tabs-widget-content{}

.tabviewsection{margin-top:10px;margin-bottom:10px;}

Ako koristite difolt template, to su vam "fabrički" tj. blogger original a ne custom onda pronadjite neke od ovih kodova:

<div class='column-right-inner'>

<div id='sidebar-wrapper'>

<div id='rsidebar-wrapper'>



Kada nadjete neki od njih, odmah iznad dodajte sledeći kod:


<div class='tabviewsection'>
<script type='text/javascript'>
            jQuery(document).ready(function($){
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
                $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
       
                $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
                    $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); 
                    $(this).addClass(&quot;tabs-widget-current&quot;); 
                    $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); 
                    var activeTab = $(this).attr(&quot;href&quot;); 
                    $(activeTab).fadeIn();
                    return false;
                });
            });
        </script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>Followers</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Popular</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Blog Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
<b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>                                       
</div>                            
                                
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>                                         
</div>                            
                                
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>                                     
</div>
</div>


Kliknite "Save"  i pogledajte vaš blog, Srećan bloging blogeri :)

Jquery and Css Vertical Drop Down Menu

Great Widget because it does not takes a lot space even makes you more valuable space and still is the main thing, the navigation menu just as this is the on the side bur and if you have a little more knowledge of jquery or css area, then you can also do custom variants. I looks nice and is very functional. You have a a demo, it is easy to install and easy to uninstall. Just remove the widget.



First and most important for the widget, to work is to add this code into the blogger immediately after <head> tag

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Place the following code into the HTML / JavaScript box in the sidebar and that's all.






Replace all with this COLOR with your titles or tags

Replace  hashtag #' with your link

Replace this - width,  width: 300px;   as needed

You can make some more custom variation because it's very easy to handle

That's all, click save and your done, happy bloging



Thursday, December 26, 2013

JQuery Image Zoom Effect





Live Demo


A few words about the effect 
This is actually a WordPress plug -in that was rebuilt for the blog , with a little hard working, everything is possible. It would be selfish to keep it to yourself because many keep such things as the greatest treasure and wan't to share with us. All praise to the people who selflessly help everyone and for those who can rightfully say that they are real bloggers . Those others who selfishly kept widgets and everything to make their blog "In" are actually worthless. But not to whine but to get down to business . Easy Zoom is , as I said, the WP plug -in and converted now in blog form for you . It's working Somehow - but that 's ok and fair , I do not know if you agree . With these things need to be careful when installing , not because you will break something or disrupt a system , but simply because you must install correctly .
Note : Photos must be bigger than 500px it is, they should be the size of Wallpapers. Or less , but not less than 500px because it will not have an effect .
Original WP effect is  cssglobe  property with gratitude for the use and modification.


Really means a lot when you need to look something up close and do not have the space , it happens to exceed the dimensions of the monitor photos , rare but it happens. Or if you want to see the details.
Remind you, it is very difficult to implement this plugin in blogger, but learning and sleeples nights, you can achieved quite a lot . The effect of space-saving and beautiful with decorative side .
Let me show you how to install but be careful because it may happen that there is no effect, ok we can easily fix but better to do it right.

Step by Step >> dashboard > Template> Edit HTML >CTRL + F and find </head> 
Just above this code ( </head> ) paste next code :


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>
<script src='http://wierdwalker.googlecode.com/files/easyzoom.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
$(&#39;a.zoom&#39;).easyZoom();
});
</script>


Now, same CTL + F and find ]]></b:skin> tag and just above that, add next one line ( code):


#easy_zoom{width:600px;height:400px; border:5px solid #eee;background:#fff;color:#333;position:fixed;top:35px;left:50%;overflow:hidden;-moz-box-shadow:0 0 10px #555;-webkit-box-shadow:0 0 10px #555;box-shadow:0 0 10px #555;/* vertical and horizontal alignment used for preloader text */line-height:400px;text-align:center;}


Save template. 
Now we are going to add photos. By default, settings are different but still blogger decrease regardless of size. Medium is always one size when you upload photos. Note: Always upload photo otherwise it will not work if you add on some other way or copy/paste.


This is zoom image after all settings and adding in template. The end is always easy. The only difference compared to the "regular" photo is class = "zoom" and nothing more but before that everything had to be done properly.
1. Upload photo
2. Replace a "separator" that is already there by default when you upload the photo with "zoom" tag and that's it.
<a class="zoom" href="http://3.bp.blogspot.com/-REsmEZucXM4/Urw-qfV2l5I/AAAAAAAAQxs/F4N2HomjPFk/s1600/strumf.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-REsmEZucXM4/Urw-qfV2l5I/AAAAAAAAQxs/F4N2HomjPFk/s1600/strumf.jpg" height="205" width="320" /></a><br />
Now when you added effect, feel free to share, please leave a comment if you like and that's happy bloging.


New Multi-Tabbed Widgets For Blogger / BlogSpot Blogs



One of the space efficient widget for blogs, is of course a multi-tabbed widget, which is almost a must for any blog. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.
Although you can find some other methods on Internet, but they are all quite confusing, so you can use this method, which is quite easy, but of course needs to tweak the template.

The complete process has mainly two steps:


STEP 1

Log in to Blogger. Now go to Layout and then click on "Edit HTML" tab.
Then download the present template as a backup.

Now find [CTRL+F] this code:


</head>


Then immediately ABOVE / BEFORE it, paste this code:


<!--NEW-MUTITABBED-STARTS--><link href='http://dsai.588.googlepages.com/tabcontent.css' rel='stylesheet' type='text/css'/>
<script src='http://dsai.588.googlepages.com/tabcontent.js' type='text/javascript'>
/***********************************************
* Tab Content script v2.2- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Via http://BloggerStop.Net
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script><!--NEW-MUTITABBED-STOPS-->


 Now click Save Template and Click on "Page Elements" tab. 
 Then click on "Add a Gadget" and select it as "HTML/JavaScript" type. 
 In the new widget, paste any of the 3 codes displayed below (the screen-shots are displayed  above the codes, and demo link has already been given above ): 




Code Here:

<h3>Demo #1- Basic implementation</h3>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://mix--er.blogspot.com/">Dynamic</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>





Code Here: 

<h3>Demo #2- Different Tab Style, expanding of arbitrary DIVs on the page enabled</h3>
<div id="flowernote" style="display:none; position:absolute; right: 30px; width:150px; height:150px; background-color:red; color:white">
Arbitrary DIV 1
</div>
<div id="flowernote2" style="display:none; position:absolute; right: 200px; width:80px; height:80px; background-color:black; color:white">
Arbitrary DIV 2
</div>
<div id="flowernote3" style="display:none; position:absolute; right: 30px; width:140px; height:140px; background-color:navy; color:white">
Arbitrary DIV 3
</div>
<div style="border:1px solid gray; width:350px; height: 250px; background-color: #EAEAEA; padding: 5px">
<div id="tcontent1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="tcontent2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="tcontent3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="tcontent4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<div id="flowertabs" class="modernbricksmenu2">
<ul>
<li><a href="#" rel="tcontent1" class="selected">Tab 1</a></li>
<li><a href="#" rel="tcontent2" rev="flowernote,flowernote2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4" rev="flowernote3">Tab 4</a></li>
<li><a href="http://mix--er.blogspot.com/">Tab Content</a></li>
</ul>
</div>
<br style="clear: left" />
<script type="text/javascript">
var myflowers=new ddtabcontent("flowertabs")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()
</script>
<p><b><a href="javascript: myflowers.expandit(2)">Click here to select 3rd tab</a></b></p>
<p><b><a href="current.htm?flowertabs=1">Reload page and select 2nd tab using URL parameter</a></b></p>





Code Here: 
<h3>Demo #3- Different Tab Style, "slideshow mode" enabled</h3>
<div id="pettabs" class="indentmenu">
<ul>
>Tab 1</a></li> <li><a href="#" rel="dog2">Tab 2</a></li>
<li><a href="#" rel="dog1" class="selected "<li><a href="#" rel="dog3">Tab 3</a></li> <li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>
e="border:1px solid gray; width:550px; height: 150p
<li><a href="http://www.google.com">Google</a></li> </ul> <br style="clear: left" /> </div> <div sty lx; padding: 5px; margin-bottom:1em"> <div id="dog1" class="tabcontent"> Tab content 1 here<br />Tab content 1 here<br />
<div id="dog2" class="tabcontent"> Tab content 2 here<br />Tab content 2 here<br /> </div> <div id="dog3" class="t
<p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p> </div >abcontent"> Tab content 3 here<br />Tab content 3 here<br /> </div> <div id="dog4" class="tabcontent"> Tab content 4 here<br />Tab content 4 here<br /> </div> </div> <script type="text/javascript"> var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true) mypets.setselectedClassTarget("link") mypets.init(2000)
</script>






NOW CLICK SAVE





Add Simple Social Sharing Below Your Blogger Posts



Social media buttons is a great way to boosting your blog traffic. The shares of your blog content made through these social buttons circulate over different social networks will help your blog engaged with long term traffic. Twitter, Facebook and Pinterest all offer JavaScript that they'd LOVE for you to add to your site. Tracking is one of the reasons that they'd love you to add these. That may or may not be a strong reason not to add their JavaScript, but a concrete reason not to is speed. When you add three services' JavaScript you're adding three DNS lookups, three (or 20) HTTP requests for their JavaScript and images, and on and on. That JavaScript has to execute as well, of course, but the value it provides isn't justified over the speed and hassle involved in our opinion. We add just one third party (addtoany) script in this widget. I wanted to add social sharing links without adding JavaScript. Fortunately all these services support sharing via simply visiting a URL. Stated differently, you can share via an HTTP GET. This widget uses a total of 9 Icons but believe it or not it is super-fast and loads with in seconds. 



1. Go to Blogger Dashboard > Select the Blog > Go to Template page of the Blog

2. Click Edit HTML button.


3. Add the Following CSS Code before ]]></skin>



div#social-sharing   {
width:550px; 
height: 90;
background: radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -o-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -ms-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -moz-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -webkit-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
padding:10px;
margin:0 auto;
border: 1px solid #999;
border-radius:5px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
div#social-sharing:hover {
-webkit-box-shadow: 1px 1px 3px #CCC inset;
-moz-box-shadow: 1px 1px 3px #CCC inset;
box-shadow: 1px 1px 3px #CCC inset;
}
#social-sharing img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
opacity:1;
filter:alpha(opacity=1); /* For IE8 and earlier */
}
#social-sharing img:hover {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.social-sharing-title {
text-align: center;
padding: 3px 10px 2px 0px;
margin: 0 0px 0 0;
color: #8d0303; text-transform: uppercase;
line-height: 25px;
vertical-align: middle;
font-size: 14px;
}


You can replace the Statement Text Color Highlighted in Blue.  You can also change the Background width by changing the width: 550px; highlighted above in Red color.

4. Next, locate the Second instance of <data:post.body/> tag and paste the following code Below/After it:


<b:if cond='data:blog.pageType == &quot;item&quot;'><
center>
<div id='social-sharing'>
<div class='social-sharing-title'>Do You Like This ? Please Take Five Second To Share It!</div>
<!-- Facebook -->
<a class='face-book' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook' src='http://3.bp.blogspot.com/-tdQqSrGyK0A/UixIE6-nIHI/AAAAAAAADZw/L1_oZ77XZZI/s1600/Facebook.gif'/></a>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter' src='http://4.bp.blogspot.com/-qvZuf9kWuVw/UixIHKAZdSI/AAAAAAAADao/7AOSXVkuwdc/ s1600/twitter_bird.gif'/></a>
<!-- Pinterest -->
<a class='pint-er-est' href='javascript:void((function()%7Bvar%20e= document.createElement(&apos; script&apos;);e.setAttribute(&apos;type&apos; ,&apos;text/javascript&apos;);e.setAttribute(&apos; charset&apos;,&apos;UTF-8&apos;);e.setAttribute (&apos;src&apos;, &apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body. appendChild(e)%7D)());'><img alt='Pinterest' src='http://4.bp.blogspot.com/-48BGp-jLpfA/ UixIFoAoAHI/AAAAAAAADaA/a4SMqKDRqno/s1600/ Pinterest.gif'/></a>
<!-- Stumbleupon -->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img alt='StumbleUpon' src='http://3.bp.blogspot.com/-Wa5Tyh1r3Ng/UixIG9GvWrI/AAAAAAAADas/yzizUt7zQ9k/ s1600/stumbleupn.gif'/></a>
<!-- Delicious -->
  <a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Delicious'><img alt='Delicious' src='http://1.bp.blogspot.com/-4EdR0vYOqGM/ Ui3DwhBBxHI/AAAAAAAADbA/CI5Tremd7D8/s1600/ Delicious.gif'/></a>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this'><img alt='Reddit' src='http://2.bp.blogspot.com/-Q0wmiZUSwRA/UixIGRda0xI/AAAAAAAADaU/ U1hgC4cviXc/s1600/reddit.gif'/></a>
<!-- Digg -->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='nofollow' target='_blank' title='Digg This'><img alt='Digg' src='http://3.bp.blogspot.com/-jrj7YxfIPgE/UixIFjv-vfI/AAAAAAAADaE/an-JwfXh9KI/s1600/digg.gif'/></a>
<!-- Email -->
<a href='mailto:?Subject=My Blogger Tricks&amp;Body=Check out this site.. http://www.myblogger-tricks.com' rel='nofollow' target='_blank' title='Email This'><img alt='Email' src='http://1.bp.blogspot.com/-1-6g64zlV8E/UixIGPBkoKI/AAAAAAAADaQ/S_vYcUEpZ4M/s1600/ email.gif'/></a>
<!-- addtoany -->
  <a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share On Others Networks'><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/><img alt='Delicious' src='http://3.bp.blogspot.com/-d5s1xCQ1FaA/Ui3FWCqhUBI/AAAAAAAADbM/j5EYPxb_hz4/ s1600/share-to-any.gif'/></a>
</div>
</center>


5. See Preview before saving.
Note:- The buttons will only appear on post pages. We place this limit  because the 

Pin-it button only pins the page on which it appears. As such  on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).

Troubleshooting

While finding the <data:post.body/> code is coming three time.This Problem comes when we install Auto Read More Hack in our Blogs. For this Problem Search for any one line from below and Put Above Section of Widget HTML Code after it!

This:
         
  <div class='post-footer-line post-footer-line-1'>


Or this:

 <div class='post-footer'>




Or this:


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



 I hope you will enjoy this tutorial and take a 5 seconds to share it.Cheers






Add "Social Bookmark" widget


This is awesome and very cool widget for everyone. Very atractive and it's easy to install. But I will say again, don't underestimate social networks because it's real potential in them. People who are on facebook or twitter, are yours visitors of your blog. Keep in touch with them all the time with widgets like this one. People like things that moving around. I like too, why not. Looks awesome and it's usefull.
Here is code: just add this code in HTML/Javascript box where you wish to se it


<div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="http://www.facebook.com/xxxxxxxx" target="blank"> <abbr title="Follow us at Facebook"><img src="http://3.bp.blogspot.com/-5QIHreJnNjs/UVfcvUGusHI/AAAAAAAAFJY/ hU52X7HJMnw/s1600/Social-Truck_fb2.png" width="120px" height="100px"/> </abbr> </a> <a href="http://feeds.feedburner.com/xxxxxxxx" target="blank"> <abbr title="Subscribe Our Feeds"><img src="http://4.bp.blogspot.com/-RLtBIrJOZII/UVfcwigIc2I/AAAAAAAAFJg/uKKtDZGlwOk/s1600/Social-Truck_rss.png" width="120px" height="100px"/> </abbr> </a><a href="http://twitter.com/xxxxxxxxxx" target="blank"> <abbr title="Follow Us on Twitter"><img src="http://3.bp.blogspot.com/-HZV2Agt3tLI/UVfcxJitLuI/AAAAAAAAFJo/yuuhQf1IQ_8/s1600/Social-Truck_twi.png" width="120px" height="100px"/> </abbr> </a> </marquee></div>

Change this with yours URL adress:
1. http://www.facebook.com/xxxxxxxx
2. http://feeds.feedburner.com/xxxxxxxx
3. http://twitter.com/xxxxxxxxxx

Click "Save" and Happy Blogging.


Wednesday, December 25, 2013

Jquery Post Slideshow za Blogger

Live Demo


1. blogger dashboard--> layout- -> Edit HTML
2. CTRL + F i nadjite </head> tag .
3. Kopirajte kod ispod i pastujte iznadand ili pre </head> tag-a .

Napomena: Da promenite brzinu slajda, nadjite ovaj deo "timeOut: 4000" i dodajte vrednost koja vam odgovara.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
 s3Slider

 
 Version: 1.0

 Copyright: Feel free to redistribute the script/modify it, as
      long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>

Širina je 550px a dužina 200px ali to je difolt, vi možete da promenite po vašoj želji.

Sejvujte template.

Sada idite u layout>page elements i dodajte HTML/JavaScript box i u nju stavite kod koji je ispod:


<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://3.bp.blogspot.com/_4HKUHirY_2U/S9aKt3KHrsI/AAAAAAAAA-w/I2U4SlmRPss/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://1.bp.blogspot.com/_4HKUHirY_2U/S9aKuMsQ8wI/AAAAAAAAA-4/-cMpslEWrDI/halo-11.jpg" /><span>Halo 3 : Play Game Online</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtHKBCTI/AAAAAAAAA-g/mzOzqFjF2FQ/avatar-11.jpg" /><span>Avatar : Watch Movie Now !!!</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="http://2.bp.blogspot.com/_4HKUHirY_2U/S9aKtosfYNI/AAAAAAAAA-o/GTCV0pnicVk/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class='clear'></div>

Samo zamenite "YOUR-LINK-HERE" sa vašim linkom i "s3sliderImage" sa vašim slikama

To je to. Kliknite save i gotovo.