ChiNa
08-04-2012, 10:00 PM
[CM] Twitter SlideBox (Widget)
Notice: Please be adviced that the Twitter code has changed since this mod was created. All though you can still use the new Code using our method. You just have to play arround with the new code befor implementing the code in your modfication.
::::::::::::::: Other Social Mods Related to this :::::::::::::::
Facebook SlideBox: Click Here (https://vborg.vbsupport.ru/showthread.php?t=286333)
Floating SideBar: Click Here (https://vborg.vbsupport.ru/showthread.php?t=286400)
Download Mod For vBulletin 3.8.x. CLICK HERE! (https://vborg.vbsupport.ru/showthread.php?t=286356) (NEW)
Hey Everyone, I made this first as a Facebook LikeBox, and now you can get it as Twitter Widget too. Its very small and simple! I hope you will like it.. And what you will achieve with this tutorial is that when mouse over the image, it will shift / slide your Twitter-Box Widget.
Lets Start with the Example Images First, and then the Modification!
https://vborg.vbsupport.ru/external/2012/08/8.gif
The modification may look a bit scary or confusing, but its very easy and after 1 time, you will install it without any help the next time!
Only 3 Template Edits
Image: Slide In
https://vborg.vbsupport.ru/external/2012/08/38.png
Image: Slide Out
https://vborg.vbsupport.ru/external/2012/08/39.png
==================== Modification Starts =====================
Step 1: Go to your ADMINCP, and then Styles & Templates.
Now to your right in the Dropdown menu, click on Edit Template, now find the "headinclude" template, which is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...
Code to add:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".twitbox").hover(function(){
jQuery(".twitbox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".twitbox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Step 2: Now we have to add the CSS, Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Edit Templates"!
Now scroll down till you find the CSS Templates. In the CSS Templates click and open the "additional.css" template! And add the following code below all the other codes: (If its empty, just add it in the front)
Code to add:
.twitbox {
float:right;
width:288px;
height:345px;
background: url(images/twitbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap iframe {margin:-1px}
Step 3: Go to this Site https://twitter.com/settings/widgets
Login with your own account... Or if you dont have an account then signup for one!
The Widget option can also be seen in your PROFILE, below! Its called WIDGETS! Now you can click on it and on you right side click on options are on your right side it says "Create new"!
Click on CREATE NEW, and after creating your widget, simply COPY the code from BELOW! We need to embed the code on your webpage, but in a bit...
Widget Settings: You can leave the Width and Height as it is. It will also ask you for a Scrollbar, and make sure to Click and mark it YES! Click SAVE on your twitter accounts widget that you created...
When you are done, Click on Finish & Grab Code!
Step 4: Now add the CODE inside the original code showen below, instead of the BLUE TEXT. After you have added the code, your full code should be ready!
Look for the BLUE TEXT below, and replace it with the code you just got for the Widget!:
Code to add:
<div class="twitbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='twitboxwrap'>PUT THE WIDGET CODE HERE</div></span></div></div> REPLACE THIS PART --> "PUT THE WIDGET CODE HERE" WITH THE WIDGET CODE.
STEP 5: When your are done putting the WIDGET CODE inside the real code, Then now we need to put it all in your HEADER template, or footer...
Put the code below everything else in the tempplate. And you are DONE! (You can see an example of my CODE, used on my site below this post, so you get an idea of how it looks like when finished)
STEP 6: Now copy the "twitbox.png" image from the attachment below, or from below the text, and upload it in your "images" folder in the root of your ftp!
We are DONE, Please its very important that you click INSTALLED after Installing, for future support! Thank you!
=================== Modification End ==================
Extra Troubleshoots & Info
Below you see example of the full code used in my forum:
The code in BLUE color is the twitter widget code:
<div class="twitbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='twitboxwrap'><a class="twitter-timeline" href="https://twitter.com/ChiNaCheats" data-widget-id="267073824858710017">Tweets by @ChiNaCheats</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></span></div></div>
Notice: Please be adviced that the Twitter code has changed since this mod was created. All though you can still use the new Code using our method. You just have to play arround with the new code befor implementing the code in your modfication.
::::::::::::::: Other Social Mods Related to this :::::::::::::::
Facebook SlideBox: Click Here (https://vborg.vbsupport.ru/showthread.php?t=286333)
Floating SideBar: Click Here (https://vborg.vbsupport.ru/showthread.php?t=286400)
Download Mod For vBulletin 3.8.x. CLICK HERE! (https://vborg.vbsupport.ru/showthread.php?t=286356) (NEW)
Hey Everyone, I made this first as a Facebook LikeBox, and now you can get it as Twitter Widget too. Its very small and simple! I hope you will like it.. And what you will achieve with this tutorial is that when mouse over the image, it will shift / slide your Twitter-Box Widget.
Lets Start with the Example Images First, and then the Modification!
https://vborg.vbsupport.ru/external/2012/08/8.gif
The modification may look a bit scary or confusing, but its very easy and after 1 time, you will install it without any help the next time!
Only 3 Template Edits
Image: Slide In
https://vborg.vbsupport.ru/external/2012/08/38.png
Image: Slide Out
https://vborg.vbsupport.ru/external/2012/08/39.png
==================== Modification Starts =====================
Step 1: Go to your ADMINCP, and then Styles & Templates.
Now to your right in the Dropdown menu, click on Edit Template, now find the "headinclude" template, which is the best place to add your Javascript or Jquery codes. And thats whats what we are going to do! Scroll all the way down, and to add the code below everything else...
Code to add:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function (){
jQuery(".twitbox").hover(function(){
jQuery(".twitbox").stop(true, false).animate({right:"0"},"medium");
},function(){
jQuery(".twitbox").stop(true, false).animate({right:"-250"},"medium");
},500);
return false;
});
</script>
Step 2: Now we have to add the CSS, Go back to your Styles & Templates in (ADMINCP) and in your Templates Dropdown choose "Edit Templates"!
Now scroll down till you find the CSS Templates. In the CSS Templates click and open the "additional.css" template! And add the following code below all the other codes: (If its empty, just add it in the front)
Code to add:
.twitbox {
float:right;
width:288px;
height:345px;
background: url(images/twitbox.png) no-repeat !important;
display:block;
right:-250px;
padding:0;
position:fixed;
top: 130px;
z-index:1002;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap {
margin-top:2px;
margin-left:-5px;
background: #fff;
width:238px;
height:325px;
overflow:hidden;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
div.twitboxwrap iframe {margin:-1px}
Step 3: Go to this Site https://twitter.com/settings/widgets
Login with your own account... Or if you dont have an account then signup for one!
The Widget option can also be seen in your PROFILE, below! Its called WIDGETS! Now you can click on it and on you right side click on options are on your right side it says "Create new"!
Click on CREATE NEW, and after creating your widget, simply COPY the code from BELOW! We need to embed the code on your webpage, but in a bit...
Widget Settings: You can leave the Width and Height as it is. It will also ask you for a Scrollbar, and make sure to Click and mark it YES! Click SAVE on your twitter accounts widget that you created...
When you are done, Click on Finish & Grab Code!
Step 4: Now add the CODE inside the original code showen below, instead of the BLUE TEXT. After you have added the code, your full code should be ready!
Look for the BLUE TEXT below, and replace it with the code you just got for the Widget!:
Code to add:
<div class="twitbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='twitboxwrap'>PUT THE WIDGET CODE HERE</div></span></div></div> REPLACE THIS PART --> "PUT THE WIDGET CODE HERE" WITH THE WIDGET CODE.
STEP 5: When your are done putting the WIDGET CODE inside the real code, Then now we need to put it all in your HEADER template, or footer...
Put the code below everything else in the tempplate. And you are DONE! (You can see an example of my CODE, used on my site below this post, so you get an idea of how it looks like when finished)
STEP 6: Now copy the "twitbox.png" image from the attachment below, or from below the text, and upload it in your "images" folder in the root of your ftp!
We are DONE, Please its very important that you click INSTALLED after Installing, for future support! Thank you!
=================== Modification End ==================
Extra Troubleshoots & Info
Below you see example of the full code used in my forum:
The code in BLUE color is the twitter widget code:
<div class="twitbox"><div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='twitboxwrap'><a class="twitter-timeline" href="https://twitter.com/ChiNaCheats" data-widget-id="267073824858710017">Tweets by @ChiNaCheats</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div></span></div></div>