Message Actor Codes

<br /><div class="entry-content" style="background-color: white; border: 0px; color: #666666; font-family: 'Lucida Grande', Arial, 'Lucida Sans Unicode', sans-serif; font-size: 13px; line-height: 19.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG991SGy5EciVTrn4B5M3DjC5hMjY4Ov2brHex8iPpQc4rnHJ0cK9b4GCEuXHEt47Yj-W4qdekT4xj_6FL_EjU9c6lzPHLi_OcNdspOQnxKswVmbRm5S-FlZiCokJAD6RT9eWMMwg2doDI/s1600/mac.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG991SGy5EciVTrn4B5M3DjC5hMjY4Ov2brHex8iPpQc4rnHJ0cK9b4GCEuXHEt47Yj-W4qdekT4xj_6FL_EjU9c6lzPHLi_OcNdspOQnxKswVmbRm5S-FlZiCokJAD6RT9eWMMwg2doDI/s1600/mac.jpg" /></a></div><br /></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://adf.ly/1Kpfe8" target="_blank">Download Dropbox Link</a><br /><a href="http://adf.ly/1KpfbM" target="_blank">Download GoogleDrive Link</a></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">This is an add-on for the <a href="http://helpscripts.blogspot.com/2015/07/ace-message-system.html" style="border: 0px; color: #026acb; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="Message Actor Codes">Ace Message System</a>. For those who would like to write out the stats of an actor using codes, insert any of the following codes below to write out their values.</div><pre style="background: rgb(238, 238, 238); border: 0px; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12; font-stretch: normal; line-height: 1.625; margin-bottom: 1.625em; outline: 0px; padding: 1.625em; vertical-align: baseline;">#  Code:        Effect:<br />#    \level[x]  - Writes the level value of actor x. *Note<br />#<br />#    \maxhp[x]  - Writes the MaxHP value of actor x. *Note<br />#    \maxmp[x]  - Writes the MaxMP value of actor x. *Note<br />#    \atk[x]    - Writes the ATK value of actor x. *Note<br />#    \def[x]    - Writes the DEF value of actor x. *Note<br />#    \mat[x]    - Writes the MAT value of actor x. *Note<br />#    \mdf[x]    - Writes the MDF value of actor x. *Note<br />#    \agi[x]    - Writes the AGI value of actor x. *Note<br />#    \luk[x]    - Writes the LUK value of actor x. *Note<br />#<br />#    \hit[x]    - Writes the HIT value of actor x. *Note<br />#    \eva[x]    - Writes the EVA value of actor x. *Note<br />#    \cri[x]    - Writes the CRI value of actor x. *Note<br />#    \cev[x]    - Writes the CEV value of actor x. *Note<br />#    \mev[x]    - Writes the MEV value of actor x. *Note<br />#    \mrf[x]    - Writes the MRG value of actor x. *Note<br />#    \cnt[x]    - Writes the CNT value of actor x. *Note<br />#    \hrg[x]    - Writes the HRG value of actor x. *Note<br />#    \mrg[x]    - Writes the MRG value of actor x. *Note<br />#    \trg[x]    - Writes the TRG value of actor x. *Note<br />#<br />#    \tgr[x]    - Writes the TGR value of actor x. *Note<br />#    \grd[x]    - Writes the GRD value of actor x. *Note<br />#    \rec[x]    - Writes the REC value of actor x. *Note<br />#    \pha[x]    - Writes the PHA value of actor x. *Note<br />#    \mcr[x]    - Writes the MCR value of actor x. *Note<br />#    \tcr[x]    - Writes the TCR value of actor x. *Note<br />#    \pdr[x]    - Writes the PDR value of actor x. *Note<br />#    \mdr[x]    - Writes the MDR value of actor x. *Note<br />#    \fdr[x]    - Writes the FDR value of actor x. *Note<br />#    \exr[x]    - Writes the EXR value of actor x. *Note<br />#<br />#               *Note: If x is 0 or negative, it will show the respective<br />#               party member's face instead.<br />#                   0 - Party Leader<br />#                  -1 - 1st non-leader member.<br />#                  -2 - 2nd non-leader member. So on.</pre><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">— <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">And that’s all, folks!</strong> —</div></div>

VX Ace Core Scripts Message Actor Codes

Download Dropbox Link Download GoogleDrive Link This is an add-on for the  Ace Message System . For those who would like to write out the st...

Read more »

Ace Core Engine

<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN5QYZiLIU7HY7qqT8CSOFbWlSkLOPiR-nvk9iqErh8zrrJ8GRgG-OtvXgP-cAA7hr4M_B5erBwjoA2dyTMCHS1zjjsxb9T3PKqtYevT4p5BrcTi6vFXD-8qXIxrT8bTnIkTdkEjErXepd/s1600/ace-01.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN5QYZiLIU7HY7qqT8CSOFbWlSkLOPiR-nvk9iqErh8zrrJ8GRgG-OtvXgP-cAA7hr4M_B5erBwjoA2dyTMCHS1zjjsxb9T3PKqtYevT4p5BrcTi6vFXD-8qXIxrT8bTnIkTdkEjErXepd/s1600/ace-01.jpg" /></a></div><br /><br /><br /><header class="entry-header" style="background-color: white; color: #666666; font-family: 'Lucida Grande', Arial, 'Lucida Sans Unicode', sans-serif; font-size: 13px; line-height: 19.5px;"><div class="separator" style="clear: both; text-align: center;"><br /></div></header><br /><div class="entry-content" style="background-color: white; border: 0px; color: #666666; font-family: 'Lucida Grande', Arial, 'Lucida Sans Unicode', sans-serif; font-size: 13px; line-height: 19.5px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><a href="http://adf.ly/1KpfP4" style="border: 0px; color: #026acb; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Download Dropbox Link</a><br /><a href="http://adf.ly/1KpfMV" style="border: 0px; color: #026acb; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Download GoogleDrive Link</a></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">This is the core engine for Yanfly Engine Ace, made for RPG Maker VX Ace. This script provides various changes made to the main engine including bug fixes and GUI upgrades.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">First, we’ll go over what bugs were found.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiph-vbg1KlLrkutnt6v_daDm1S0oILGMTr9yE5XGpqbDGqp23IaLjl0-8i_BVXEbV0nP8TeGwTa8Sutb14zOBdwDqD_vHKjfQ1rMkMzz6hYqpDtM05hETR0DhYrQLFyKWpo1EnRYku2cPN/s1600/ace-02.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiph-vbg1KlLrkutnt6v_daDm1S0oILGMTr9yE5XGpqbDGqp23IaLjl0-8i_BVXEbV0nP8TeGwTa8Sutb14zOBdwDqD_vHKjfQ1rMkMzz6hYqpDtM05hETR0DhYrQLFyKWpo1EnRYku2cPN/s1600/ace-02.jpg" /></a></div><br /></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Bug Fix: Animation Overlay</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">It’s the same bug from VX. When an all-screen animation is played against a group of enemies, the animation bitmap is actually made multiple times, thus causing a pretty extreme overlay when there are a lot of enemies on screen. This fix will cause the animation to play only once.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilXJ-nPJlRCv_MGqLYfQtgsgtdOyG8m3ro6I5sbdo39QeuqfSidQwy0JQvlRbnsv7eNw91eObcVKHXmCJGCj7O2WzXhhgeGvLITHxlgBGu134cCrgdOefLIoDzBQwioscpFDWOHGLhHMYQ/s1600/ace-02a.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilXJ-nPJlRCv_MGqLYfQtgsgtdOyG8m3ro6I5sbdo39QeuqfSidQwy0JQvlRbnsv7eNw91eObcVKHXmCJGCj7O2WzXhhgeGvLITHxlgBGu134cCrgdOefLIoDzBQwioscpFDWOHGLhHMYQ/s1600/ace-02a.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Bug Fix: Animation Interruption</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">A new bug. When a character dual wields and attacks a single target, if an animation lasts too long, it will interrupt and/or halt the next animation from occurring. This script will cause the first animation to finish playing and then continue forth.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiXWe6_a9Nnq6vd0A7hOdH-ktFsicjjbrmbwczjHfSwBVj36bCFu-jjwejGR05nhv3zeQGGWeAxZNQx69puAcLQFdD0Se1Me9sHxryLGH-Fi4MGyYdmvqz6GMlhjcqoEsGLXe9qihRyMw/s1600/ace-03.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiXWe6_a9Nnq6vd0A7hOdH-ktFsicjjbrmbwczjHfSwBVj36bCFu-jjwejGR05nhv3zeQGGWeAxZNQx69puAcLQFdD0Se1Me9sHxryLGH-Fi4MGyYdmvqz6GMlhjcqoEsGLXe9qihRyMw/s1600/ace-03.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Bug Fix: Battle Turn Order Fix</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Same bug from VX. For those who use the default battle system, once a turn’s started, the action order for the turn becomes set and unchanged for the remainder of that turn. Any changes to a battler’s AGI will not be altered at all even if the battler were to receive an AGI buff or debuff. This fix will cause the speed to be updated properly upon each action.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1QPEM6sP-sin9gD78iVNukV97lmN-6D2K0ZmUNI7NDAu51fIODTIcyvQdGLwtW8nVjCcJlXbfHpgk25RqsB09lNdlvuRlFpaU4vzo0Y3s8yNchwblutYyMhKOOtnvnIs17ZnmMMKLFoT/s1600/ace-04.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie1QPEM6sP-sin9gD78iVNukV97lmN-6D2K0ZmUNI7NDAu51fIODTIcyvQdGLwtW8nVjCcJlXbfHpgk25RqsB09lNdlvuRlFpaU4vzo0Y3s8yNchwblutYyMhKOOtnvnIs17ZnmMMKLFoT/s1600/ace-04.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Bug Fix: Gauge Overlap Fix</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Same bug from VX. When some values exceed certain amounts, gauges can overextend past the width they were originally designed to fit in. This fix will prevent any overextending from gauges.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbeAENvtwnFJF-fiSr4w03CMQnHQzpcOpQ06_86GyXPZE_3u4ANG1M8VyLj73zTmMbJz0xI8iT2x99BP67-2_TRNqR9LxNNaBi8vp7dSpvJ632j9X-V-OnOewd-u1WzV4uv9ETE1qxer31/s1600/ace-05.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbeAENvtwnFJF-fiSr4w03CMQnHQzpcOpQ06_86GyXPZE_3u4ANG1M8VyLj73zTmMbJz0xI8iT2x99BP67-2_TRNqR9LxNNaBi8vp7dSpvJ632j9X-V-OnOewd-u1WzV4uv9ETE1qxer31/s1600/ace-05.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Bug Fix: Held L and R Menu Scrolling</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Before in VX, you can scroll through menus by holding down L and R buttons (Q and W on the keyboard) to scroll through menus quickly. This fix will re-enable the ability to scroll through menus in such a fashion. Disable it in the module if you wish to.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWWQFjbtuZ1J1PHCZ7wuXHa-Abysne86_fiW60BBmJTG0BkL6XUu4KmjAe7CHM_zqmj1qVU3mLhr0GtPhu421aS8uKhK7R-8KTHAw4SJAKk5aq4E-r2NuQL1PGJBVR0_y59iyDZCXH1CUF/s1600/ace-09.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWWQFjbtuZ1J1PHCZ7wuXHa-Abysne86_fiW60BBmJTG0BkL6XUu4KmjAe7CHM_zqmj1qVU3mLhr0GtPhu421aS8uKhK7R-8KTHAw4SJAKk5aq4E-r2NuQL1PGJBVR0_y59iyDZCXH1CUF/s1600/ace-09.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Substitute Healing</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">If an actor has the substitute (cover) flag on them, they will attempt to take the place of low HP allies when they’re the target of attack. However, this is also the case for friendly skills such as heal. This script will fix it where if a battler targets an ally, no substitutes will take place.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">—</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">And that’s it for bugs. VX Ace fixed a lot of bugs considerably compared to what was there in VX. Sadly, a few remain, and a new one was generated. When newer bugs are found, this script will be updated to fix them.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Now, there’s a few new features added, too.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHTmxRcXTWdgCJCUUf5MKTO6oBFpTpxBG6o9eM5Tda3WF1nTeBuNxSxhEB252wtMyv5iki9s8pUePAPEXKedhUp7Nq7xIXaNH1SlP7_BziPK_k0MXQh3NoUUSfnmXw9gkWmg3iQuWfQMt/s1600/ace-06.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVHTmxRcXTWdgCJCUUf5MKTO6oBFpTpxBG6o9eM5Tda3WF1nTeBuNxSxhEB252wtMyv5iki9s8pUePAPEXKedhUp7Nq7xIXaNH1SlP7_BziPK_k0MXQh3NoUUSfnmXw9gkWmg3iQuWfQMt/s1600/ace-06.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">New Feature: Screen Resolution Size</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">The screen can now be resized from 544×416 with ease and still support maps that are smaller than 544×416. Maps smaller than 544×416 will be centered on the screen without having sprites jumping all over the place.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">RPG Maker VX Ace has the option of having larger width and height for your games. Resizing the width and height will have these changes:</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">Default   Resized   Min Tiles Default   Min Tiles New<br />Width       544       640           17                 20<br />Height      416       480           13                 15</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">* Note: Maximum width is 640 while maximum height is 480. Minimum width is 110 while maximum height is 10. These are limitations set by RPG Maker VX Ace’s engine.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">By selecting resize, all of the default menus will have their windows adjusted, but scripts provided by non-Yanfly Engine sources may or may not adjust themselves properly.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5rMhuwQS84Vb8JIrPwawA6vRdTrBFbeu33DruoKUrGrLsoYZ8BP-99ZN7l8SSElzcuAwpGnacH09jRy1XpdpF9Q543_MqZjJYHVKUyYWQZxE27t7ng2T5JJZICumR7Z4dsLyW-Izm_8ag/s1600/ace-07.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5rMhuwQS84Vb8JIrPwawA6vRdTrBFbeu33DruoKUrGrLsoYZ8BP-99ZN7l8SSElzcuAwpGnacH09jRy1XpdpF9Q543_MqZjJYHVKUyYWQZxE27t7ng2T5JJZICumR7Z4dsLyW-Izm_8ag/s1600/ace-07.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">New Feature: Adjust Animation Speed</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">RPG Maker VX Ace plays animations at a rate of 15 FPS by default. Speed up the animations by changing a simple constant in the module.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg0ANjay1hDl9EEltZGei0rMRiAzzeqiOkfaj6ZBgI4NBeAl-GRJGP9aLANCKnmKhbem2oyCKB8mLZCdiXHb4YC22Er0IbXwBY6Vc4IYZE_kNeCBidLDe2weVCXu2XNi_SrkGRlECzbM8N/s1600/ace-08.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg0ANjay1hDl9EEltZGei0rMRiAzzeqiOkfaj6ZBgI4NBeAl-GRJGP9aLANCKnmKhbem2oyCKB8mLZCdiXHb4YC22Er0IbXwBY6Vc4IYZE_kNeCBidLDe2weVCXu2XNi_SrkGRlECzbM8N/s1600/ace-08.jpg" /></a></div></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">New Feature: GUI Modifications</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">There are quite a lot of different modifications you can do to the GUI. This includes placing outlines around your gauges, changing the colours of  each individual font aspect, and more. Also, you can change the default font setting for your games here.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; text-align: center; vertical-align: baseline;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">New Feature: Numeric Digit Grouping</strong></div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">This will change various scenes to display numbers in groups where they are separated by a comma every three digits. Thus, a number like 1234567 will show up as 1,234,567. This allows for players to read numbers quicker.</div><div style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin-bottom: 1.5em; outline: 0px; padding: 0px; vertical-align: baseline;">— <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">And that’s all, folks!</strong> —</div></div>

VX Ace Core Scripts Ace Core Engine

Download Dropbox Link Download GoogleDrive Link This is the core engine for Yanfly Engine Ace, made for RPG Maker VX Ace. This script provid...

Read more »

Spacegallery: image gallery/slideshow made with jQuery

<div class="post-body"><div id="adsmiddle15286542215318314035"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle25286542215318314035">There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with Time Machine and those who don't, I'm sure will enjoy this type of effect for viewing images.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsBZb4tSklxn64OymgIMra3xA5SwtPfJx-V_AK7_h_omH43A4c5Tfcr7iMtwDPitrNiDFQjdvwCeSZAsYuWwr4w6Zgop2Yv01sNhOSusUKmGMgiXI2V3kOGXFv5ueZgmTUmzsMCe8-xVS/s1600/create-image-gallery-slideshow-using-jquery-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image gallery with jQuery for blogger" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsBZb4tSklxn64OymgIMra3xA5SwtPfJx-V_AK7_h_omH43A4c5Tfcr7iMtwDPitrNiDFQjdvwCeSZAsYuWwr4w6Zgop2Yv01sNhOSusUKmGMgiXI2V3kOGXFv5ueZgmTUmzsMCe8-xVS/s200/create-image-gallery-slideshow-using-jquery-blogger.png" title="create image gallery or slideshow in blogger with jQuery" width="200"></a></div>SpaceGallery is a JQuery based slideshow / image gallery that performs overlaying in a visually appealing manner and provides a smooth fade out effect to images. This 3D image gallery lets you float through your pictures easily by enlarging them with an Apple-like animation.<br><br>To see the SpaceGallery slideshow in action, please visit this demo blog and click on the first image:<br><br><div style="text-align: center;"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/07/blog-post_23.html" rel="nofollow" target="_blank">Demo Blog </a></div><br><h3>How to Add Spacegallery Image Slideshow to Blogger</h3>To implement this gallery is very easy. Just follow the steps below:<br><br><b><span style="color: #3d85c6;">Step 1</span></b>. Log in to your <a href="http://www.blogger.com/" rel="nofollow">Blogger</a> account and select your blog. Next, go to <b>Template</b> and click the <b>Edit HTML</b> button:<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><span style="color: #3d85c6;"><b>Step 2</b></span>. Click anywhere on the code area and search by using the CTRL + F keys for this tag<br><blockquote class="tr_bq"></head></blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640"></a></div><br><b><span style="color: #3d85c6;">Step 3</span></b>. Just before/above the <span style="background-color: yellow;"></head></span> tag, paste the following scripts:<br><blockquote class="tr_bq"><span style="color: #cc0000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></span><br><script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/><br><script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/><br><script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/><br><br><script type='text/javascript'><br>//<![CDATA[<br>(function($){<br>var initLayout = function() {<br>var hash = window.location.hash.replace('#', '');<br>var currentTab = $('ul.navigationTabs a')<br>.bind('click', showTab)<br>.filter('a[rel=' + hash + ']');<br>if (currentTab.size() == 0) {<br>currentTab = $('ul.navigationTabs a:first');<br>}<br>showTab.apply(currentTab.get(0));<br>$('#myGallery').spacegallery({loadingClass: 'loading'});<br>};<br><br>var showTab = function(e) {<br>var tabIndex = $('ul.navigationTabs a')<br>.removeClass('active')<br>.index(this);<br>$(this)<br>.addClass('active')<br>.blur();<br>$('div.tab')<br>.hide()<br>.eq(tabIndex)<br>.show();<br>};<br><br>EYE.register(initLayout, 'init');<br>})(jQuery)<br>//]]><br></script></blockquote><i>Note: if you have already jQuery in your template, please delete the line in red.</i><br><br><span style="color: #3d85c6;"><b>Step 4</b></span>. Next, search (CTRL + F) for this tag:<br><blockquote class="tr_bq">]]></b:skin></blockquote><b><span style="color: #3d85c6;">Step 5.</span></b> Above the <span style="background-color: yellow;">]]></b:skin></span> tag, paste the following CSS style:<blockquote class="tr_bq">#myGallery {<br>width: 100%;<br>height: 400px;<br>}<br>#myGallery img {<br>border: 2px solid #52697E; <br>}<br>a.loading {<br>background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifp1obU9V6HzhOp_FjIibs5bn8Lju6MsQx3kVpRqwR6VhiEopWZB8aDKPFmh2jOoFPeVQhA0AUbGPQwOsmphQGpHV9UBLb0X5k9epZRJjJlYNt7tUi4pvNuhJMJmeZ6eDxSDJof_LFVt4b/s1600/ajax_small.gif) no-repeat center;<br>}<br>.spacegallery {<br>position: relative;<br>overflow: hidden;<br>}<br>.spacegallery img {<br>position: absolute;<br>left: 50%;<br>}<br>.spacegallery a {<br>position: absolute;<br>z-index: 1000;<br>display: block;<br>top: 0;<br>left: 0;<br>width: 100%;<br>height: 100%;<br>}</blockquote><span style="color: #3d85c6;"><b>Step 6</b></span>. Hit the <b>Save template</b> button to save the changes.<br><br><span style="color: #3d85c6;"><b>Step 7</b></span>. Finally, go to <b>Layout </b>> <b>Add a Gadget</b> > <b>HTML/Javascript</b> and copy-paste the code below:<br><blockquote class="tr_bq"><div class="spacegallery" id="myGallery"><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br></div></blockquote>Replace the <span style="color: blue;">Image URL</span> text with the image addresses that you want to appear on the gallery, considering that the last image is the first to be displayed.<br><br>If you want to add this slideshow inside a post, go to your dashboard and create a <b>New Post</b>, then paste the code in the <b>HTML</b> section.<br><br>That's it! Now, you can enjoy this simple image gallery on your blog and although, it has no display options or settings, it is without a doubt a gallery that will draw the attention of your readers.<br><br>Source: <a href="http://www.eyecon.ro/spacegallery/" rel="nofollow" target="_blank">eyecon.ro</a></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle15286542215318314035"); var obj1=document.getElementById("adsmiddle25286542215318314035"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like...

Read more »

How to add a thumbnail image/photo gallery in Blogger

<div class="post-body"><div id="adsmiddle17852508929283257884">For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the selected picture, thus making it easier for you to pick different images on mouse click. <br><br>With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>.<br><br><b>Related:</b><br><a href="/2015/07/create-css-image-slider-with-thumbnails.html" style="color: blue;" target="_blank">Image Slider with Mouse Hover Effect using only CSS</a><b> </b><br><a href="/2014/11/possibly-most-simple-jquery-slider_12.html" style="color: blue;" target="_blank">Possibly the Most Simple jQuery Slider</a><br><a href="/2015/07/spacegallery-image-galleryslideshow.html" style="color: blue;" target="_blank">Spacegallery: A Time Machine-like Slideshow/Image Gallery </a><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CBEzT7Xl7Uw2oRTGR-ritQfOkaMcdlTKmzhOiqU1kV98KQ2gzpXXwrHuJ5UFg7HSTTU5VEyC0qU9FWg9dABQ_b8Mk7N8vdMn9LjxF0jgpZWY4iEnN9-QcKljsqrX4Chg6fMUqGJTt5H6/s1600/add-a-lightweight-image-gallery-to-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CBEzT7Xl7Uw2oRTGR-ritQfOkaMcdlTKmzhOiqU1kV98KQ2gzpXXwrHuJ5UFg7HSTTU5VEyC0qU9FWg9dABQ_b8Mk7N8vdMn9LjxF0jgpZWY4iEnN9-QcKljsqrX4Chg6fMUqGJTt5H6/s1600/add-a-lightweight-image-gallery-to-blogger.png" width="400"></a></div><br><h2>How to Add Image Gallery with Thumbnails to Blogger</h2><b><span style="color: #3d85c6;">Step 1.</span> </b>Log in to your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger account</a>, select your blog and go to Template > Edit HTML<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span> </b>Click anywhere inside the code area and press the CTRL + F keys to open the search box:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640"></a></div><br><b><span style="color: #3d85c6;">Step 3.</span></b> Type the following tag inside the search box and hit Enter to find it:<br><blockquote class="tr_bq"></head></blockquote><b><span style="color: #3d85c6;">Step 4.</span></b> Now pick one of the styles below and copy the code below it:<br><br><span style="color: #3d85c6; font-size: large;"><b>Style 1</b></span><br><script type="text/javascript">//<![CDATA[ var gallery3 = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('image-gallery1')) document.getElementById('image-gallery1').id = 'jquery-gallery1'; var li = document.getElementById('jquery-gallery1').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gallery3.addEvent(li[i],'click',function() { var im = document.getElementById('jquery-gallery1').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; document.getElementById('gallery-caption1').innerHTML = this.title; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gallery3.addEvent(window,'load', function() { gallery3.init(); }); //]]></script> <style type="text/css">#image-gallery1 {display: none;} #jquery-gallery1 {padding:0;margin:0;list-style: none; width: 500px;} #jquery-gallery1 li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; } #jquery-gallery1 li img { position: absolute; top: 100px; left: 0px; display: none;} #jquery-gallery1 li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;} #jquery-gallery1 li.active, #jquery-gallery1 li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);} #gallery-caption1 { position: absolute;color: #000;background: #FFFFFF;font-size: 16px;font-weight: bold;bottom: 0px; } </style><br><div style="height: 500px; margin-left: 110px; position: relative;"><ul id="jquery-gallery1"><li class="active" title="Test Title" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg);"><img alt="Test Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"></li><li title="Title" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg);"><img alt="Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"></li></ul><div id="gallery-caption1"></div></div><blockquote class="tr_bq"><style type='text/css'><br>#image-gallery {display: none;}<br>  #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}<br>  #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }<br>#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}<br>  #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}<br>  #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}<br><span style="color: #fb8733;">#gallery-caption { position: absolute;color: #000;font-weight: bold;background: #FFFFFF; font-size: 16px; bottom: 0px;}</span><br></style></blockquote><br><span style="color: #3d85c6; font-size: large;"><b>Style 2</b></span><br><script type="text/javascript">//<![CDATA[ var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('image-gallery2')) document.getElementById('image-gallery2').id = 'jquery-gallery2'; var li = document.getElementById('jquery-gallery2').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jquery-gallery2').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; document.getElementById('gallery-caption2').innerHTML = this.title; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); //]]></script><style type="text/css">#image-gallery2 { display: none; } #jquery-gallery2 {padding:0;margin:0;list-style: none; width: 200px; } #jquery-gallery2 li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; } #jquery-gallery2 li img { position: absolute; top: 0px; left: 200px; display: none; } #jquery-gallery2 li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; } #jquery-gallery2 li.active, #jquery-gallery2 li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);} #gallery-caption2 { position: absolute; right: 50px;color: #000;background: #FFFFFF; font-weight:bold; font-size: 16px; top: 0px;} </style> <br><div style="height: 310px; margin-left: 80px; position: relative;"><ul id="jquery-gallery2"><li class="active" title="Test title" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg);"><img alt="Test title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"></li><li title="Test" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg);"><img alt="Test" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"></li></ul><div id="gallery-caption2"></div></div><blockquote class="tr_bq"><style type='text/css'><br>#image-gallery { display: none; }<br>#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }<br>#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }<br>#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }<br>#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }<br>#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}<br><span style="color: #fb8733;">#gallery-caption { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;}</span><br></style></blockquote><i>Note: The <b>display: none;</b> of the first ID (<b>#image-gallery</b>) is to prevent images appear with their actual size before they go inside the gallery container, this is while loading the code. In <b>#jquery-gallery</b> we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to count the width of the thumbnail (80px) plus the margins between them. The left declaration of <b>#jquery-gallery li img</b> is to move the larger thumbnail that shows on mouse click so that it won't overlap with the smaller thumbnails. </i><br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle27852508929283257884"><b><span style="color: #3d85c6;">Step 5.</span></b> Paste the code of the chosen style just above the <b></head></b> tag.<br><br><b><span style="color: #3d85c6;">Step 6.</span></b> Now above the same <b></head></b> tag, add this script:<br><blockquote class="tr_bq"><script type='text/javascript'><br>//<![CDATA[<br>var gal = {<br>init : function() {<br>if (!document.getElementById || !document.createElement || !document.appendChild) return false;<br>if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';<br>var li = document.getElementById('jquery-gallery').getElementsByTagName('li');<br>li[0].className = 'active';<br>for (i=0; i<li.length; i++) {<br>li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';<br>li[i].title = li[i].getElementsByTagName('img')[0].alt;<br>gal.addEvent(li[i],'click',function() {<br>var im = document.getElementById('jquery-gallery').getElementsByTagName('li');<br>for (j=0; j<im.length; j++) {<br>im[j].className = '';<br>}<br>this.className = 'active';<br><span style="color: #fb8733;">document.getElementById('gallery-caption').innerHTML = this.title;</span><br>});<br>}<br>},<br>addEvent : function(obj, type, fn) {<br>if (obj.addEventListener) {<br>obj.addEventListener(type, fn, false);<br>}<br>else if (obj.attachEvent) {<br>obj["e"+type+fn] = fn;<br>obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }<br>obj.attachEvent("on"+type, obj[type+fn]);<br>}<br>}<br>}<br>gal.addEvent(window,'load', function() {<br>gal.init();<br>});<br>//]]><br></script></blockquote>Basically, what this script does, is to look if there is any ID named "<b>image-gallery</b>" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do when they are clicked. So, each time we click on a thumbnail, the "<b>active</b>" class will be assigned and the thumbnail should be visible in the larger container.<br><br><span style="color: #3d85c6;"><b>Step 7.</b> </span>Finally, save the changes by clicking the "Save template" button.<br><br>And here's the HTML code providing a normal list with the <b>image-gallery</b> ID, enclosed within a DIV with a relative position, so that it will avoid side effects of other pre-existing positions.<br><br><b><span style="color: #3d85c6;">Step 8.</span></b> Paste the below HTML to where you want to display the gallery by going either to <b>Layout</b> and adding a new gadget (click on the Add a gadget link and choose HTML/JavaScript), or inside a post/page in the HTML section.<br><blockquote class="tr_bq"><div style="position:relative;"><br><ul id="image-gallery"><br><li><img src="<span style="color: blue;">IMAGE-URL1</span>" /></li><br><li><img src="<span style="color: blue;">IMAGE-URL2</span>" /></li><br><li><img src="<span style="color: blue;">IMAGE-URL3</span>" /></li><br><li><img src="<span style="color: blue;">IMAGE-URL4</span>" /></li><br><li><img src="<span style="color: blue;">IMAGE-URL5</span>" /></li><br></ul><br></div></blockquote>Note: if elements on your page overlap with this gallery, you might need to add the <b>height</b> declaration after the "position: relative;" The value of height depends on the size of your gallery.<br><br>Example:<br><blockquote class="tr_bq"><div style="position:relative; <b>height: 500px</b>;"> </blockquote>Change <span style="color: blue;">IMAGE-URL1</span> with the image URL. If you don't know how to get the address of an image, see this tutorial: <a href="http://helplogger.blogspot.ro/2013/09/upload-images-and-get-url-of-image.html">How to Upload Images and Get the URL</a><br><br>In case you need to add links to your images, add this HTML structure instead:<br><blockquote class="tr_bq"><div style="position:relative;"><br><ul id="image-gallery"><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL1</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL2</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL3</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL4</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL5</span>" /><b></a></b></li><br></ul><br></div></blockquote>Again, here you need to replace the <b><span style="color: blue;">page-URL</span></b> text with the URL of your page/post.<br><br>Update: To add captions, please include the lines in orange and then replace the "Caption" with the text that you want to appear on each picture:<br><blockquote class="tr_bq"><div style="position:relative;"><br><ul id="image-gallery"><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL1</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL2</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL3</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL4</span>" /><b></a></b></li><br><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL5</span>" /><b></a></b></li><br></ul><br><span style="color: #fb8733;"><div id="gallery-caption"></div></span><br></div></blockquote><br>Save your widget or publish your page and you're done! </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle17852508929283257884"); var obj1=document.getElementById("adsmiddle27852508929283257884"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design How to add a thumbnail image/photo gallery in Blogger

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image galle...

Read more »

Create a CSS Image Slider with Thumbnails for Blogger

<div class="post-body"><div id="adsmiddle13089627928082240256"><b>Image galleries/sliders</b> are particularly useful for photoblogs, but they could also serve those who occasionally need a gadget like this. As we saw <a href="/2015/07/how-to-add-thumbnail-imagephoto-gallery.html">in a previous tutorial</a>, on the top of the block we had some small thumbnails which were enlarged at the bottom each time an image was selected. The difference is that there we had to click the thumbnail in order to show a larger version and that was acquired with <b>JavaScript</b>.<br><br>This time will use only <b>hover</b> and <b>CSS</b>.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiac4ly1tw0E7ZK9oS7EaPhm2VnimF_j95wi3RY5pzcqYS6oB1wUij53qe19jiskdYlGMUZ6Fyjk-4VKad7vQBZStXrWqzSrSBYJ-0BcWB8JWKUUCQpQLaHDwjcakjHYScsVY1WBYWnGHWI/s1600/how-to-add-image-slider-for-blogger-using-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiac4ly1tw0E7ZK9oS7EaPhm2VnimF_j95wi3RY5pzcqYS6oB1wUij53qe19jiskdYlGMUZ6Fyjk-4VKad7vQBZStXrWqzSrSBYJ-0BcWB8JWKUUCQpQLaHDwjcakjHYScsVY1WBYWnGHWI/s320/how-to-add-image-slider-for-blogger-using-css.png" width="320"></a></div><span style="color: #3d85c6; font-size: large;"><b>DEMO</b></span><br><style type="text/css">.image-container { position: relative; width: 640px; height: 530px; margin: 0 auto; text-align:center; overflow: hidden; } .image-container a { display: inline; text-decoration: none; } /* Mini-thumbnails style */ .mini-thumbnail { width: 18%; /* mini-thumbnails width */ margin:1px; opacity: 1; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); box-shadow: 0px 0px 3px rgba(0,0,0,0.5); } /* Style for the main thumbnail */ .large-thumbnail { position: absolute; width: 100%; top: 800px; left: 20px; text-align: center; display: block; -webkit-transition: top 1s ease; -moz-transition: top 1s ease; -o-transition: top 1s ease; -ms-transition: top 1s ease; transition: top 1s ease; } .feature { top: 110px; width: 100%; opacity: .3; left: 20px; } /* border for the mini-thumbnail selected */ a:hover .mini-thumbnail { opacity: .5; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px rgba(0,0,0,0.5); } /* transition effects for the selected image */ a:hover .large-thumbnail { top: 110px; width: 100%; z-index:3; opacity: 1; -webkit-transition: top 1s ease; -moz-transition: top 1s ease; -o-transition: top 1s ease; -ms-transition: top 1s ease; transition: top 1s ease; } </style> <br><div class="image-container" style="margin-left: 45px;"><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"></a> <a href="javascript:void(0);"><img class="large-thumbnail feature" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwHGU6BDpxDT5qTd8ZyUQXkKJeNz1XnOrIyrE0ez32aGgMi4F41pLK8iEPv5KsilTFqjW2vPs45L5ga1ivk9Tu9ZCoMtyceRtsg3NA3wNKvUZCL1eHE8AUGnmqrj0d0z4FQLEn5REV0Ms/s1600/image-gallery-for-blogger.png"></a> </div><h3><span style="color: #3d85c6;">How to Add A CSS Image Slider with Thumbnails to Blogger</span></h3><br><b><span style="color: #3d85c6;">Step 1.</span></b> Log in to your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a> and go to <b>Template</b> > <b>Edit HTML</b><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span></b> Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box<br><div class="separator" style="clear: both; text-align: center;"></div><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix1fH6VmI_JHMcQdEyJ4MV4XbznQ-NuGVMWRDifUZQm2p067Ovl-yJdaDmZylw9ftTPKU-Sx5fXrhs6TCYv8ty5gYIZ_MjuM4VJhdzi5wvSZLCLyOcZVpMdTpm58P2q7OnNDvTZ6CBDNRo/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix1fH6VmI_JHMcQdEyJ4MV4XbznQ-NuGVMWRDifUZQm2p067Ovl-yJdaDmZylw9ftTPKU-Sx5fXrhs6TCYv8ty5gYIZ_MjuM4VJhdzi5wvSZLCLyOcZVpMdTpm58P2q7OnNDvTZ6CBDNRo/s320/blogger-template-search-box.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 3.</span></b> Paste the <b></head></b> tag inside the search box and hit Enter.<br><br><b><span style="color: #3d85c6;">Step 4.</span></b> Just above the <b></head></b> tag, add this code:<br><blockquote class="tr_bq"><style type='text/css'><br>.image-container {<br>position: relative;<br>width: 640px;<br>height: 530px;<br>margin: 0 auto;<br>text-align:center;<br>overflow: hidden;<br>}<br>.image-container a {<br>display: inline;<br>text-decoration: none;<br>}<br><span style="color: #6aa84f;">/* Mini-thumbnails style */</span><br>.mini-thumbnail {<br>width: 18%; <span style="color: #6aa84f;">/* mini-thumbnails width */</span><br>margin:1px;<br>opacity: 1;<br>-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);<br>-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);<br>box-shadow: 0px 0px 3px rgba(0,0,0,0.5);<br>}<br><span style="color: #6aa84f;">/* Style for the main thumbnail */</span><br>.large-thumbnail {<br>position: absolute;<br>width: 100%;<br>top: 800px;<br>margin:0 auto;<br>text-align: center;<br>display: block;<br>-webkit-transition: top 1s ease;<br>-moz-transition: top 1s ease;<br>-o-transition: top 1s ease;<br>-ms-transition: top 1s ease;<br>transition: top 1s ease;<br>}<br>.feature {<br>top: 110px;<br>width: 100%;<br>opacity: .3;<br>}<br><span style="color: #6aa84f;">/* style for the selected mini-thumbnail */</span><br>a:hover .mini-thumbnail {<br>opacity: .5;<br>-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);<br>-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);<br>box-shadow: 0px 0px 10px rgba(0,0,0,0.5);<br>}<br><span style="color: #6aa84f;">/* transition effects for the selected image */</span><br>a:hover .large-thumbnail {<br>top: 110px;<br>width: 100%;<br>z-index:3;<br>opacity: 1;<br>-webkit-transition: top 1s ease;<br>-moz-transition: top 1s ease;<br>-o-transition: top 1s ease;<br>-ms-transition: top 1s ease;<br>transition: top 1s ease;<br>}<br></style></blockquote>Here we set a specific <b>height </b>(530px) and <b>width</b> (640px) so that we can slide an image out of the bounds of the container and have it be hidden (<b>overflow:hidden</b>);<br>The <b>absolute</b> positioning on the larger thumbnails (<b>.large-thumbnail</b>) pulls them out and places them specifically in the spot that we've chosen using a value of 800px for the <b>top</b> property;<br>The <b>mini-thumbnails</b> which are actually a second image remain all the time above in a static position and are altered only slightly in terms of style for distinguishing the active (<b>a:hover .mini-thumbnail</b>) on mouse over.<br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle23089627928082240256"><b><span style="color: #3d85c6;">Step 5.</span></b> Save the changes by clicking on the <b>Save template</b> button.<br><br>And finally, we need to add the HTML code.<br><br><b><span style="color: #3d85c6;">Step 6.</span></b> Paste the below HTML structure to where you want to display the gallery by going either to <b>Layout </b>and add a new gadget (click on the <b>Add a gadget</b> link and choose <b>HTML/JavaScript</b>), or inside a post or page within the <b>HTML</b> section.<br><blockquote class="tr_bq"><div class="image-container"><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL1</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL1</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL2</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL2</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL3</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL3</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL4</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL4</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL5</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL5</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="large-thumbnail feature" src="<span style="color: blue;">LARGE-THUMB-URL1</span>" /><br></a><br></div></blockquote>In this example we left the link empty (<b>javascript:void(0);</b>) but you can add one if you want - just replace <b>javascript:void(0);</b> with the url of your page/post.<br>To add pics inside the image slider just replace <span style="color: blue;">MINI-THUMB-URL</span> and <span style="color: blue;">LARGE-THUMB-URL</span> texts with the URL of your images. <i>Note: The last <span style="color: blue;">LARGE-THUMB-URL1</span> should be replaced with the URL of the default image that will appear on your slider. </i><br><br>If you need more information on how to get the URL of images, I recommend you reading this tutorial: <br><a href="/2015/07/upload-images-and-get-url-of-image_7.html">How to Upload Images and Get the URL</a><br><br>Finally, save your widget/gadget or publish your page/post and that's it! Enjoy :) </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle13089627928082240256"); var obj1=document.getElementById("adsmiddle23089627928082240256"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Create a CSS Image Slider with Thumbnails for Blogger

Image galleries/sliders are particularly useful for photoblogs, but they could also serve those who occasionally need a gadget like this. A...

Read more »

How to Optimize Images for Better Search Engine Rankings

<div class="post-body"><div id="adsmiddle1782191479649909685"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle2782191479649909685">When search engines start indexing the pages on your site, they don't just focus on the writing. Web crawlers employed by services like Google and Bing shuffle through your site's structural code looking for any relevant information that they might offer to their customers. Some of the information includes things like backlinks, tags and even images.<br><br>Images make up a big part of any website. They help to excite the visual senses of readers and offer a little extra entertainment value. What most blog owners don't realize is that all of the photos that they upload to their site aren't confined to their site alone. Crawlers make sure that these images also show up within their respective search engines sites.<br><br>Image searches can have the effect of drawing in large numbers of new readers that were just looking through content in Google images. You can benefit from this traffic and increase your average subscriber by practicing image optimization.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwrMY4aizjL31G2AVGZOFuw4Ml38h-ygFdWvimDoJqVp2hD3gOCoaPflq7Fxscj9-0vKeedFnkbmaa-CLILRZ70c-nUIsFxkmTkbOnHnkTZf2-vM6xUTRZ79AY894fTVVRLcWyZNWYQnI/s1600/seo-image-optimization-for-blogger.png" imageanchor="1" margin-left:=""><img alt="seo image optimization" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwrMY4aizjL31G2AVGZOFuw4Ml38h-ygFdWvimDoJqVp2hD3gOCoaPflq7Fxscj9-0vKeedFnkbmaa-CLILRZ70c-nUIsFxkmTkbOnHnkTZf2-vM6xUTRZ79AY894fTVVRLcWyZNWYQnI/s1600/seo-image-optimization-for-blogger.png" title="Optimize Images for SEO"></a></div><h2>Image Optimization Tip #1: Alt Tags & File Names</h2>Visitors may love images, but computers don't. Computers are designed to do what you tell them without violating any of the parameters. When web crawlers come across images on a website, they really don't know what to do with it because they are made to collect information, not interpret it. The solution to this problem is to optimize images and appropriately label your alt tags so that they display the correct content when someone goes to look for it.<br><br>For example, let's say you upload a picture of your dog, and label the "alt" tag by the dog's name, 'Frank'. The web crawler is going to read the alt tag without ever realizing it's a picture of a dog; therefore, the crawler will come to the conclusion that it needs to display the image when someone run a search for 'Frank'. <br><br>The minor word choice mistakes may not affect the operations of your website, or how your image is displayed, but it will affect the search results of others and the traffic that comes into your website. Whereas you may have been able to attract the dog lovers in the world using image optimization of your dog tagged 'dog', you are now drawing in crowds searching for their uncle "Frank". <br><br>To include the alt tag, simply add <span style="color: #0b5394;">alt="this is your alt text"</span> to your image tag. Here's an example:<br><blockquote><img src="pug-dog.jpg" <span style="color: #0b5394;">alt="frank dog"</span> /></blockquote>But you don't have to touch the html code of the image. Once the picture is uploaded, click on it and you will see the "Properties" setting. Add the alt text inside the box and hit OK:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUqbPQZjX0bQKZognE8bRotl0OJ9allRp6sXTdafUXCIqhGwJhlXABQSnYDw3j5smesCexTZb_trDqyfjOU7WHymLj0g9DC-rD6ujuBcrtpXdww93jEvsu_sCgoSiLDnAus1Cs3GK0x5M/s1600/frank-dog-seo-alt-tag-to-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image alt tag" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUqbPQZjX0bQKZognE8bRotl0OJ9allRp6sXTdafUXCIqhGwJhlXABQSnYDw3j5smesCexTZb_trDqyfjOU7WHymLj0g9DC-rD6ujuBcrtpXdww93jEvsu_sCgoSiLDnAus1Cs3GK0x5M/s1600/frank-dog-seo-alt-tag-to-image.png" title="optimize image for seo"></a></div><br>This goes the same for file names on a website. You need to optimize images and file names on everything that you decide to save to your website directory so that this information can be appropriately indexed and be used as a search term. You could name the file of your dog Frank, "pug-dog.jpg", which would encourage the search engine to add Frank into searches being performed with the phrase 'pug dog'. Alt tags and file names play an important interpretation role between you and the machine that makes your blog possible.<br><br><h2>Image Optimization Tip #2: Add A Caption</h2>After uploading your images, you should always add a caption to the image, so that average browser understands what they're looking at. This gives your website a more professional appearance and will help to keep people on your page.<br><br>Not everyone that comes across your picture using a Google Image search is looking for your blog. Maybe they just want to download the image, and that's all you'll ever get from them. The important thing is that they found your photo relevant to their search, and decided to navigate to your site in order to save it for their own use.<br><br>The longer those users stay on the site, the better it looks for you because it plays a role in the "bounce rate". Bounce rate refers to when someone clicks on a link, realizes it's not what they're looking for, and then immediately goes back to the search engine. If you can reduce the number of times that this happens by providing captions and intriguing content that will make people want to stick around, your SEO ranking will improve.<br><br><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhelqX_Bv1d4DGv4cHjiORLxlF1tAql-Pfmii9icWlJy5V8ouzDIxK1dYstZO3nOJql2KGt7dZegfAJEyZUU-i9CutQEoKe2QeianFL4-sYe6dmuHmgnrqLInc7yHo5zx5LqiWNsC7L_DKO/s1600/seo-blogger-image-caption.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="blogger image caption" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhelqX_Bv1d4DGv4cHjiORLxlF1tAql-Pfmii9icWlJy5V8ouzDIxK1dYstZO3nOJql2KGt7dZegfAJEyZUU-i9CutQEoKe2QeianFL4-sYe6dmuHmgnrqLInc7yHo5zx5LqiWNsC7L_DKO/s1600/seo-blogger-image-caption.png" title="optimize images for seo"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Image caption and SEO</td></tr></tbody></table><br><h2>Image Optimization Tip #3: File Size</h2>Improving your bounce rate can be tough because the attention span of the everyday Internet user is incredibly short. It may be as short as 8 seconds. High bounce back rates and slow loading sites can be the death of most blogs because no one wants to wait for the content to load. By the time your website finally loads with the content that you need, they could have easily visited two or more sites and found what they need from someone who was better prepared to handle their traffic.<br><br>Optimize images so that you are able to keep the file size as small as possible while retaining the quality of the photo. Images taken from DSLR camera - although they may look great - can be up to 1.4 MB in size if you take them directly off your camera and upload them on your blog. This type of space is massive for any everyday blog, and will hurt your SEO ratings.<br><br>Use Photoshop or one of many online services like Google Picasa to rescale your images or reduce the file size. Two services that can perform this ability for free and do a great job are <a href="http://www.smushit.com/ysmush.it" rel="nofollow" style="color: blue;" target="_blank">Yahoo's Smushit </a>and <a href="https://kraken.io/" rel="nofollow" style="color: blue;" target="_blank">Kraken</a>. When you access either site, they will allow you to upload the picture on the site and download the new image optimization versions for use on your Blogger site.<br><br><h3>Putting It All Together</h3>At the end of the day, the quality of your site and overall SEO ranking isn't just about what you have to say. It's the entire package of what you have to offer. Optimize images every chance you get and use the strategies discussed above. Now that you know that you might have been neglecting images all along, you can make necessary adjustments and start to see even better results from all your hard work. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle1782191479649909685"); var obj1=document.getElementById("adsmiddle2782191479649909685"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design How to Optimize Images for Better Search Engine Rankings

When search engines start indexing the pages on your site, they don't just focus on the writing. Web crawlers employed by services like ...

Read more »

Add Author's Profile Picture and Name in Multi Author Blog

<div class="post-body"><div id="adsmiddle16563153323269856029">In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make your blog not only look more personal but attaching an image to your blog posts in Blogger can help visitors identify, and perhaps gain a level of trust with you. Also, this could be a great addition to blogs with multiple authors, since the info for each of the publisher will be shown below the titles of their respective posts and this way, they will get the proper credit for their work. <br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7n1dWLmO6wxEX2t6oM59-qCHLsxfg2ystmAtUoIQsRDegggfTh4meEsXxWhJupy9OnjAGN1Klepmw79AHQ96kDh2NnQsQRHIceXRwuctzq09JVxwR6SHu1AcJ9ooUSnxQcYB8ONWu6ld/s1600/display-author-profile-picture-and-name-below-blogger-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="multi-author blog, blogger tricks" border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7n1dWLmO6wxEX2t6oM59-qCHLsxfg2ystmAtUoIQsRDegggfTh4meEsXxWhJupy9OnjAGN1Klepmw79AHQ96kDh2NnQsQRHIceXRwuctzq09JVxwR6SHu1AcJ9ooUSnxQcYB8ONWu6ld/s1600/display-author-profile-picture-and-name-below-blogger-posts.png" title="show author's profile picture and name in multi author blog" width="320"></a></div><br><b>Related:</b> <a href="/2015/07/how-to-add-or-invite-multiple-authors_7.html" style="color: blue;" target="_blank">How to Add or Invite Multiple Authors on Blogger</a><br><br><h3><b><span style="color: #3d85c6;">Adding the Author's Profile Picture / Avatar and Name in Blogger</span></b></h3><b><span style="color: #3d85c6;">Step 1.</span></b> From the <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger Dashboard</a>, go to "Template" and click the "Edit HTML" button.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span></b> Click anywhere inside the code area and press the CTRL + F keys to open the search box. Paste the following code inside the search box, then hit Enter to find it:<br><blockquote class="tr_bq"><span class='post-author vcard'></blockquote>Just below this line is the rest of code, which should look something like this:<br><blockquote class="tr_bq">              <span style="background-color: yellow;"><span class='post-author vcard'></span><br>                <b:if cond='data:top.showAuthor'><br>                  <b:if cond='data:post.authorProfileUrl'><br>                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><br>                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/><br>                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><br>                        <span itemprop='name'><data:post.author/></span><br>                      </a><br>                    </span><br>                  <b:else/><br>                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><br>                      <span itemprop='name'><data:post.author/></span><br>                    </span><br>                  </b:if><br>                <span style="background-color: yellow;"></b:if></span>  <br><span style="background-color: yellow;"></span></span></blockquote><b>Note:</b> If you are using a custom template, it could look something like this:<br><blockquote class="tr_bq"><span style="background-color: yellow;"><span class='post-author vcard'> </span><br><b:if cond='data:top.showAuthor'> <br><data:top.authorLabel/> <br><span class='fn'><data:post.author/> <br></span> <br><span style="background-color: yellow;"></b:if> <br></span></span></blockquote><b><span style="color: #3d85c6;">Step 3. </span></b>Now that you found the code, delete it. Please note that it should start and end with the tags marked in yellow. This code is repeated two times and you will need to remove both occurrences.<br><br><b><span style="color: #3d85c6;">Step 4. </span></b>Next, search for this line (you'll find it twice and you should stop at the second one):<br><blockquote class="tr_bq"><div class='post-header-line-1'/></blockquote><b><span style="color: #3d85c6;">Step 5.</span></b> Just below the line, paste the following code:<br><blockquote class="tr_bq"><span class='post-author vcard'><br><b:if cond='data:post.author == &quot;<span style="color: #cc0000;"><b>AuthorName</b></span>&quot;'> <br><span class='author'><a href='<span style="color: blue;">Author-Profile-URL</span>'><img src='<span style="color: blue;">Author-Image-URL</span>'/></a></span><br></b:if> <br>        <i><span style="color: #38761d;"><b><b:if cond='data:top.showAuthor'></b></span></i><br>          <data:top.authorLabel/><br>            <b:if cond='data:post.authorProfileUrl'><br>              <span class='fn'><br>                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'><br>                  <data:post.author/><br>                </a><br>              </span><br>            <b:else/><br>              <span class='fn'><data:post.author/></span><br>            </b:if><br>        </b:if><br>      </span></blockquote>Replace the <b><span style="color: #cc0000;">AuthorName</span></b> text with the EXACT name that appears on the Blogger profile, i.e., the one that appears in the posts or comments. If it is added in a different way, Blogger will not recognize the username, nor the image and the code will not work.<br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle26563153323269856029">To display the author's pic, add the URL of the author's Blogger profile and the image URL by replacing the text in blue. I recommend you to use an image with a maximum height of 40px and 40px wide. Once done, the photo of the author will appear next to the "posted by" text just below the post title.<br><br>Now for those who maintain a blog with more than one author, you will need to add the following code just above <span style="color: #38761d;"><b><i><b:if cond='data:top.showAuthor'></i></b></span><br><blockquote class="tr_bq"><b:if cond='data:post.author == &quot;<b><span style="color: #cc0000;">AuthorName2</span></b>&quot;'> <br><span class='author'><a href='<span style="color: blue;">Author2-Profile-URL</span>'><img src='<span style="color: blue;">Author2-Image-URL</span>'/></a></span><br></b:if> </blockquote>If you have more than two authors, repeat this block of code for each author that you want to add.<br><br>Let's go ahead and add the CSS styles...<br><br><b><span style="color: #3d85c6;">Step 6.</span></b> Search (CTRL + F) this tag:<br><blockquote class="tr_bq">]]></b:skin></blockquote>Just above the ]]></b:skin> tag, paste the following code:<br><blockquote class="tr_bq">.post-header {<br>width: 100%;<br>padding: 2px 5px;<br>margin: 5px;<br>clear: both;<br>float: left;<br>}<br>.author img{<br>float: left;<br>margin: 0px 5px 10px 0px;<br>max-width:100%;<br>height:<b><span style="color: #cc0000;">45px</span></b>; <br>border-radius: 10px;<br>}<br>.post-author{<br>color:#777;<br>font-size: 13px;<br>font-style: italic;<br>}<br>.post-author a {<br>color:#777; }</blockquote><b>Note:</b> to change the size of avatar, increase/decrease the <span style="color: #cc0000;"><b>45px</b></span> value.<br><br><b><span style="color: #3d85c6;">Step 7.</span></b> Click on the "Save template" button and that's it. You should see now the profile picture and name of the Blogger author below the title of each post. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle16563153323269856029"); var obj1=document.getElementById("adsmiddle26563153323269856029"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Add Author's Profile Picture and Name in Multi Author Blog

In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make...

Read more »