API tools faq
paste
mhango

Hide / Show Updates Tab

mhango
May 18th, 2021 (edited)
324
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.50 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Theme: Hide / Show Updates Tab by @mhango | @themesbyeva
  4. Version 1 (18th May 2021)
  5.  
  6. Rules:
  7.  
  8. > don't alter / remove the credit
  9. > don't copy parts of this code or use as a base
  10. > don't edit this code and redistribute
  11. > don't claim as your own
  12.  
  13. Credits / Resources:
  14.  
  15. > Hide / Show Effect
  16. @sophiasthemage
  17.  
  18. -->
  19.  
  20. Additional information can be found below the Installation Guide.
  21.  
  22. INSTALLATION GUIDE:
  23.  
  24. 1. Paste the following code within your meta section at the beginning of your theme (somewhere below <head>):
  25.  
  26. <meta name="if:News Tab" content="1"/>
  27. <meta name="if:Stats Tab" content="1"/>
  28. <meta name="if:Blogs Tab" content="1"/>
  29. <meta name="if:Groups Tab" content="1"/>
  30. <meta name="if:Always Show Tabs" content="0"/>
  31.  
  32. <meta name="color:Tab Text" content="#000000" />
  33. <meta name="color:Tab Background" content="#ffffff" />
  34. <meta name="color:Tab Borders" content="#dddddd" />
  35. <meta name="color:Tab Buttons" content="#f1f1f1" />
  36.  
  37. <meta name="text:News Title" content="NEWS" />
  38. <meta name="text:News Text" content="your news go here" />
  39. <meta name="text:Stats Title" content="STATS" />
  40. <meta name="text:Stats Text" content="your stats go here" />
  41. <meta name="text:Blogs Title" content="BLOGS" />
  42. <meta name="text:Blog 1 Username" content="mhango" />
  43. <meta name="text:Blog 2 Username" content="breathings" />
  44. <meta name="text:Blog 3 Username" content="timelhess" />
  45. <meta name="text:Blog 4 Username" content="luhcent" />
  46. <meta name="text:Groups Title" content="GROUPS" />
  47. <meta name="text:Group 1 Badge Code" content="badge code here" />
  48. <meta name="text:Group 2 Badge Code" content="badge code here" />
  49. <meta name="text:Group 3 Badge Code" content="badge code here" />
  50. <meta name="text:Group 4 Badge Code" content="badge code here" />
  51.  
  52.  
  53.  
  54. 2. Paste the following code right above <style type="text/css">:
  55.  
  56. <!-- jquery library + hide / show effect -->
  57.  
  58. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  59.  
  60. {block:ifnotalwaysshowtabs}
  61. <script>
  62. $(document).ready(function(){
  63. $("#newsclick").click(function(){
  64. $("#newsshow").slideToggle("slow");
  65. });
  66. });
  67. $(document).ready(function(){
  68. $("#statsclick").click(function(){
  69. $("#statsshow").slideToggle("slow");
  70. });
  71. });
  72. $(document).ready(function(){
  73. $("#blogsclick").click(function(){
  74. $("#blogsshow").slideToggle("slow");
  75. });
  76. });
  77. $(document).ready(function(){
  78. $("#groupsclick").click(function(){
  79. $("#groupsshow").slideToggle("slow");
  80. });
  81. });
  82. </script>
  83. {/block:ifnotalwaysshowtabs}
  84.  
  85.  
  86.  
  87. 3. Paste the following code right above </style>:
  88.  
  89. #rightbar {
  90. background:transparent;
  91. padding: 1.2%;
  92. color: {color:Tab text};
  93. width: 11%;
  94. height:100%;
  95. line-height:1.2em;
  96. top: 0;
  97. right: 0;
  98. position:fixed;
  99. margin-top:2%;
  100. margin-right:2%;
  101. }
  102.  
  103. .plugin {
  104. position:relative;
  105. display:block;
  106. margin:20px 10px;
  107. }
  108.  
  109. .plugin img {
  110. width:28px;
  111. height:auto;
  112. border-radius:100%;
  113. -moz-border-radius: 100%;
  114. display:inline-block;
  115. padding:0 2px;
  116. }
  117.  
  118. .plugin_title {
  119. background:{color:Tab Buttons};
  120. border:1px solid {color:Tab Borders};
  121. -moz-border-radius: 3%;
  122. border-radius:3%;
  123. padding:8px 10px;
  124. text-align:center;
  125. }
  126.  
  127. .plugin_body {
  128. background:{color:Tab background};
  129. border:1px solid {color:Tab Borders};
  130. border-top:0px;
  131. -moz-border-radius: 3%;
  132. border-radius:3%;
  133. padding:8px 10px;
  134. }
  135.  
  136. {block:ifnotalwaysshowtabs}
  137. #statsclick,#blogsclick, #newsclick, #groupsclick {cursor:help;}
  138. #statsshow, #blogsshow, #newsshow, #groupsshow {display:none;}
  139. {/block:ifnotalwaysshowtabs}
  140.  
  141.  
  142.  
  143. 4. Now paste the following code below <body>
  144.  
  145. <aside id="rightbar">
  146. {block:ifnewstab}<div class="plugin" title="tab by mhango">
  147. <div id="newsclick" class="plugin_title">{text:news title}</div>
  148. <div id="newsshow" class="plugin_body">{text:news text}<br>tab code by <a href="https://mhango.tumblr.com">mhango</a></div>
  149. </div>
  150. {/block:ifnewstab}
  151. {block:ifstatstab}<div class="plugin">
  152. <div id="statsclick" class="plugin_title">{text:stats title}</div>
  153. <div id="statsshow" class="plugin_body">{text:stats text}{block:ifnotnewstab}<br>tab code by <a href="https://mhango.tumblr.com">mhango</a>{/block:ifnotnewstab}</div>
  154. </div>
  155. {/block:ifstatstab}
  156. {block:ifblogstab}<div class="plugin">
  157. <div id="blogsclick" class="plugin_title">{text:blogs title}</div>
  158. <div id="blogsshow" class="plugin_body">
  159. <center>
  160. {block:ifblog1username}<a href="https://{text:blog 1 username}.tumblr.com" title="{text:blog 1 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 1 username}.tumblr.com/avatar/512"></a>{/block:ifblog1username}
  161. {block:ifblog2username}<a href="https://{text:blog 2 username}.tumblr.com" title="{text:blog 2 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 2 username}.tumblr.com/avatar/512"></a>{/block:ifblog2username}
  162. {block:ifblog3username}<a href="https://{text:blog 3 username}.tumblr.com" title="{text:blog 3 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 3 username}.tumblr.com/avatar/512"></a>{/block:ifblog3username}
  163. {block:ifblog4username}<a href="https://{text:blog 4 username}.tumblr.com" title="{text:blog 4 username}" target="_blank"><img src="https://api.tumblr.com/v2/blog/{text:blog 4 username}.tumblr.com/avatar/512"></a>{/block:ifblog4username}
  164. {block:ifnotnewstab}{block:ifnotstatstab}<a href="https://themesbyeva.tumblr.com" title="tab code by themesbyeva" target="_blank"><img src="https://api.tumblr.com/v2/blog/themesbyeva.tumblr.com/avatar/512"></a>{/block:ifnotstatstab}{/block:ifnotnewstab}
  165. </center>
  166. </div>
  167. </div>
  168. {/block:ifblogstab}
  169. {block:ifgroupstab}<div class="plugin">
  170. <div id="groupsclick" class="plugin_title">{text:groups title}</div>
  171. <div id="groupsshow" class="plugin_body">
  172. <center>
  173. {block:ifGroup1badgecode}{text:Group 1 Badge Code}{/block:ifGroup1badgecode}
  174. {block:ifGroup2badgecode}{text:Group 2 Badge Code}{/block:ifGroup2badgecode}
  175. {block:ifGroup3badgecode}{text:Group 3 Badge Code}{/block:ifGroup3badgecode}
  176. {block:ifGroup4badgecode}{text:Group 4 Badge Code}{/block:ifGroup4badgecode}
  177. {block:ifnotnewstab}{block:ifnotstatstab}{block:ifnotblogstab}<a href="https://themesbyeva.tumblr.com" title="tab code by themesbyeva" target="_blank"><img src="https://api.tumblr.com/v2/blog/themesbyeva.tumblr.com/avatar/512"></a>{/block:ifnotblogstab}{/block:ifnotstatstab}{/block:ifnotnewstab}
  178. </center>
  179. </div>
  180. </div>
  181. {/block:ifgroupstab}
  182. </aside>
  183.  
  184.  
  185.  
  186.  
  187. ADDITIONAL INFORMATION:
  188.  
  189. - Each section can be chosen individually by sliding the particular toggle in the theme options
  190. - Tumblr is full of bugs so please make sure to switch each toggle on and off first in order to get it to work properly
  191. - The content of the News & Stats sections can be edited by using basic html:
  192. <b>bolded text</b>
  193. <i>italic text</i>
  194. <u>underlined text</u>
  195. line break<br>
  196. <p>paragraph</p>
  197. - The badge code for the Groups section should look something like this:
  198. <a href="https://mhango.tumblr.com" title="Group Name"><img src="https://image.png"></a>
  199. - To add more blogs to the Blogs section, please refer to this tutorial: https://pastebin.com/tHgg7dsf
  200. - A credit link is shown inside the tab (position depends on the sections you have chosen). Do NOT delete the credit link!!!
  201. - Any questions or trouble with this code? Contact me at @themesbyeva.
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!