tag:blogger.com,1999:blog-23635667150016641282024-03-13T11:15:26.536-07:00Magazine Web DesignAnonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.comBlogger2095125tag:blogger.com,1999:blog-2363566715001664128.post-78986603897555819132013-09-21T05:31:00.000-07:002013-09-23T11:44:17.197-07:00Jual Produk Crystal X Murah Asli Obat Untuk KeputihanKeputihan adalah suatu masalah yang harus ditangani ( Jual Crystal X Murah Asli ). Banyak sekali wanita baik itu mudah maupun yang sudah dewasa belum memahami apa itu keputihan dan menganggap sepele keputihan. Sebenarnya apabila tidak ditangani dengan benar, akan mengakibatkan suatu masalah. Jika membiarkan keputihan dan dianggap sepele akan berakibat buruk apabila keputihan tersebut Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com2tag:blogger.com,1999:blog-2363566715001664128.post-14742466077635255872013-09-20T05:31:00.000-07:002013-09-23T11:41:53.938-07:00Customizing Numbered Lists in Posts + 3 ExamplesFrom the Compose tab of a Blogger post, we can create numbered lists using the "Numbered List" tool.<br /><br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-5-APlWcC8sM/Ujw-Tz7IbQI/AAAAAAAAD-w/a14js0t4tgk/s1600/customizing-numbered-list-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-5-APlWcC8sM/Ujw-Tz7IbQI/AAAAAAAAD-w/a14js0t4tgk/s1600/customizing-numbered-list-in-blogger.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-MIkAYPfQWgU/Ujw0AcaljWI/AAAAAAAAD9g/bIoaPYef_5Y/s1600/blogger-post-editor-numbered-list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets" border="0" src="http://2.bp.blogspot.com/-MIkAYPfQWgU/Ujw0AcaljWI/AAAAAAAAD9g/bIoaPYef_5Y/s1600/blogger-post-editor-numbered-list.png" title="how to customize numbered lists on Blogger" /></a></div><br />A numbered list is achieved through the HTML code of a "ordered list". You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this:<br /><blockquote class="tr_bq"> <ol><br /><li>The content of the 1st. element</li><br /><li>The content of the 2nd. element</li><br /><li>The content of the 3rd. element</li><br /><li>The content of the 4th. element</li><br /> etc...<br /> </ol></blockquote>This tool will automatically number each element of the list taking an "order", hence the name "ordered lists in HTML". In each element a number is successively generated (from 1 onwards), though you can not see this in the HTML code.<br /><br /><h3><span style="color: #3d85c6;">Using ordered lists in posts</span></h3><br />Creating numbered lists is very suitable for giving any instructions. It is ideal for cooking blogs where the steps in a recipe has to be numbered, or in those blogs that share tutorials... but can be used in any type of blog that need to number something.<br /><br />By default, when using this tool, the numbered elements will look like:<br /><br /><ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol><br />However, we can <b>customize the elements on the list with CSS</b>. To achieve this, we will rely on this interesting tutorial from <a href="http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/" rel="nofollow">456 Berea ST</a>, that explains a technique in which using some key properties of CSS, we could customize both the numbers of each element in the list, also the content of each element.<br /><br />The trick basically involves canceling the default numbering with "<span style="background-color: #cfe2f3;">list-style: none</span>", and then use automatic numbering properties: "<span style="background-color: #cfe2f3;">counter-reset</span>" and "<span style="background-color: #cfe2f3;">counter-increment</span>". Then the property "<span style="background-color: #cfe2f3;">content</span>" is added to the index of the counter that is created using the previous two properties.<br /><br /><b><span style="color: #0b5394;"><span style="font-size: large;">Examples</span></span></b><br /><br />Here are three examples that I have prepared for those of you who want to customize <b>numbered lists</b> and if you will like one of them, simply copy and paste the CSS code by going to <b>Template</b> > <b>Customize </b>> <b>Advanced</b> > <b>Add CSS</b>. Of course, later, you can customize the background colors, borders, etc..<br /><br /><span style="color: #3d85c6;"><b><span style="font-size: large;">Style 1.</span></b></span><br /><style>#style1 ol{ counter-reset:li; margin-left:0; padding-left:0 } #style1 ol li{ position:relative; margin:0 0 20px 2em !important; padding:4px 8px !important; list-style:none; *list-style: decimal; } #style1 ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:-8px; left:-39px; font-family:'Oswald', serif; font-size:40px; width:34px; margin:0 0 10px 0; padding:4px !important; color:#727272; text-align:center; } </style> <br /><div id="style1"><ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol></div><blockquote class="tr_bq">.post-outer ol{<br /> counter-reset:li;<br /> margin-left:0;<br /> padding-left:0<br />}<br />.post ol li{<br /> position:relative; <br /> margin:0 0 20px 2em !important;<br /> padding:4px 8px !important;<br /> list-style:none;<br /> *list-style: decimal;<br />}<br />.post ol li:before{<br /> content:counter(li);<br /> counter-increment:li;<br /> position:absolute;<br /> top:-8px;<br /> left:-39px;<br /> font-family:'Oswald', serif;<br /> font-size:<span style="color: #cc0000;">40px</span>; <span style="color: #38761d;">/* font size*/</span><br /> width:34px;<br /> margin:0 0 10px 0;<br /> padding:4px !important;<br /> color:<span style="color: #cc0000;">#727272</span>;<span style="color: #38761d;"> /* font color */</span><br /> text-align:center;<br />}</blockquote><span style="font-size: large;"><b><span style="color: #3d85c6;">Style 2.</span></b></span><br /><style>#style2 ol{ counter-reset:li; margin-left:0; padding-left:0 } #style2 ol li{ position:relative; margin:0 0 20px 2em !important; padding:4px 8px !important; list-style:none; *list-style: decimal; border:1px solid #e2e3e2; background:#f2f2f2; text-indent:10px; } #style2 ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:-5px; left:-5px; font-family:'Oswald', serif; font-size:14px; width:12px; margin:0 0 10px 0; padding:4px !important; color:#727272; text-align:left; background:#e2e2e2; text-indent:2px } #style2 ol li:after{ content:""; position:absolute; top:-5px; left:14px; width: 0px; height: 0px; border-style: solid; border-width: 5px 0 0 5px; border-color: transparent transparent transparent #aeaeae; } </style> <br /><div id="style2"><ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol></div><blockquote class="tr_bq">.post-outer ol{<br />counter-reset:li;<br />margin-left:0;<br />padding-left:0<br />}<br />.post ol li{ <span style="color: #38761d;">/* the style of each element */</span><br />position:relative;<br />margin:0 0 20px 2em !important;<br />padding:4px 8px !important;<br />list-style:none;<br />*list-style: decimal;<br />border:1px solid <span style="color: #cc0000;">#e2e3e2</span>; <span style="color: #38761d;">/* border color */</span><br />background:<span style="color: #cc0000;">#f2f2f2</span>; <span style="color: #38761d;">/* background color */</span><br />text-indent:10px;<br />}<br />.post ol li:before{ <span style="color: #38761d;">/* the numbers' style */</span><br />content:counter(li);<br />counter-increment:li;<br />position:absolute;<br />top:-5px;<br />left:-5px;<br />font-family:'Oswald', serif;<br />font-size:14px;<br />width:12px;<br />margin:0 0 10px 0;<br />padding:4px !important;<br />color:<span style="color: #cc0000;">#727272</span>; <span style="color: #38761d;">/* text color */</span><br />text-align:left;<br />background:<span style="color: #cc0000;">#e2e2e2</span>; <span style="color: #38761d;">/* background color */</span><br />text-indent:2px<br />}<br />.post ol li:after{<br />content:"";<br />position:absolute;<br />top:-5px;<br />left:14px;<br />width: 0px;<br />height: 0px;<br />border-style: solid;<br />border-width: 5px 0 0 5px;<br />border-color: transparent transparent transparent <span style="color: #cc0000;">#aeaeae</span>; <span style="color: #38761d;">/* triangle color */</span><br />}</blockquote><span style="color: #3d85c6;"><b><span style="font-size: large;">Style 3.</span></b></span><br /><style>#style3 ol{ counter-reset:li; margin-left:0; padding-left:0 } #style3 ol li{ position:relative; margin:0 0 13px 2em !important; padding:4px 8px !important; list-style:none; *list-style:decimal; } #style3 ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:0; left:-2em; width:27px; margin-right:8px; padding:3px 1px 4px 0 !important; color:#fff; font-size:16px; background:url(http://1.bp.blogspot.com/-advsxll9P48/Ujw1oxWHrZI/AAAAAAAAD9s/1iaAm2aHqyk/s1600/blue.png) no-repeat left top; font-weight:bold; text-align:center } </style> <br /><div id="style3"><ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol></div><blockquote class="tr_bq">.post ol{<br />counter-reset:li; <br />margin-left:0; <br />padding-left:0<br />}<br />.post ol li{<br />position:relative; <br />margin:0 0 13px 2em !important; <br />padding:4px 8px !important; <br />list-style:none; <br />*list-style:decimal; <br />}<br />.post ol li:before{<br />content:counter(li); <br />counter-increment:li; <br />position:absolute; <br />top:0; <br />left:-2em; <br />width:27px; <br />margin-right:8px; <br />padding:3px 1px 4px 0 !important; <br />color:<span style="color: #cc0000;">#fff</span>; <span style="color: #38761d;">/* text color */</span><br />font-size:16px; <br />background:url(<span style="color: blue;">http://1.bp.blogspot.com/-advsxll9P48/Ujw1oxWHrZI/AAAAAAAAD9s/1iaAm2aHqyk/s1600/blue.png</span>) no-repeat left top; <br />font-weight:bold; <br />text-align:center<br />}</blockquote>In this last example, I decided to use an image for the circle (highlighted <span style="color: blue;">in blue</span>) as the background of the number. We can create the circle with CSS, but it will be squared in Internet Explorer 8.<br /><br />Anyway, here I leave other images of circles with other colors that you can use if you want.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="http://2.bp.blogspot.com/-wifEzrrffjA/Ujw1qInFznI/AAAAAAAAD-Q/LdzrmaUE20k/s1600/violet.png" /><img border="0" src="http://1.bp.blogspot.com/-9itA4gjoNcc/Ujw1oxVDIOI/AAAAAAAAD94/tSzKW8R0Jec/s1600/circle2.png" /><img border="0" src="http://1.bp.blogspot.com/-xDFWcysl60Q/Ujw1o38HmwI/AAAAAAAAD-g/A-wgHlUhSBM/s1600/blue2.png" /><img border="0" src="http://1.bp.blogspot.com/-WdKiqqTwwKM/Ujw1qe3z0sI/AAAAAAAAD-c/RduWI8EY0rw/s1600/violet2.png" /><img border="0" src="http://1.bp.blogspot.com/-UaD9t0gghnI/Ujw1pVNNB7I/AAAAAAAAD-M/nF3-cz3LDJ8/s1600/circle3.png" /><img border="0" src="http://3.bp.blogspot.com/-nf1-C-KJdHs/Ujw1p0MifSI/AAAAAAAAD-E/63dCJyx7WMo/s1600/green.png" /></div><br /><b>Note:</b> <span style="color: #cc0000;">With red </span>are highlighted the values that can be edited in the CSS of these three examples, and added some comments highlighted in<span style="color: #6aa84f;"> <span style="color: #38761d;">/* green */</span></span>, so that you can know what each thing does.<br /><br /><b>Compatibility:</b><br /><br />This will work in all browsers including IE8 - in the case of Internet Explorer 7, the number' styles will not be seen as it does not support the :before or :after pseudo-elements. However, I have added a line in the CSS that's specific for that browser and will bring up the default numbering of the ordered list.<br /><br />Hopefully it will be useful for you ;) Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-30421026128178829192013-09-20T03:24:00.000-07:002013-09-23T11:41:53.957-07:004 Different Styles For the Popular Posts WidgetBlogger allows us to easily add a "<b>Popular Posts</b>" widget, that we select from its list of gadgets, and we can do that by going to the "Layout" of our Blog.<br /><br />This gadget, as the name implies, shows which are the most visited blog posts, and you can set it to display the info you want in <b>four possible combinations</b>: (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet.<br /><br />This is an element that you shouldn't miss in your blog because it encourages your visitors to navigate through your content, which can result in higher income if you're monetizing your blog because it would generate an increase in the number of pages visited, and in turn, can attract the users' interest to subscribe to the blog and to read interesting content.<br /><br /><h3><b>Preliminary steps: Add the gadget, if you haven't done it yet.</b></h3><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>1.</b></span></span> Select the "<b>Layout</b>" tab and add the "<b>Popular Posts</b>" gadget in that part of your blog you want to appear, such as in your sidebar, by clicking on "<b>Add a Gadget</b>".<br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>2.</b> </span></span>Configure the widget to show only the post titles. You can do this by clicking on the "image thumbnail" and "snippet" checkboxes, as shown in the following image.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-WmrNP9oGIUA/UjwejvWKwEI/AAAAAAAAD9Q/DYeGq8YUVbc/s1600/configure-blogger-popular-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="297" src="http://3.bp.blogspot.com/-WmrNP9oGIUA/UjwejvWKwEI/AAAAAAAAD9Q/DYeGq8YUVbc/s320/configure-blogger-popular-posts.png" width="320" /></a></div><span style="color: #3d85c6;"><span style="font-size: large;"><b>3. </b></span></span>After configuring the widget, save the changes by clicking on Save, and then Save arrangement.<br /><br /><h3>How to add the CSS to create the style of the Popular Posts widget</h3><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>1.</b> </span></span>Choose a style, then copy the CSS that appears below the image that shows the style.<br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>2.</b></span></span> Select the "<b>Template</b>" tab, then click on <b>Customize </b>> <b>Advanced </b>> <b>Add CSS </b>and then paste the CSS style that you like the most.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-yT51_OjYO_M/UjweP9rQseI/AAAAAAAAD9I/CDBI9mHg2YI/s1600/adding-css-in-blogger-template-designer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tutorials" border="0" height="206" src="http://3.bp.blogspot.com/-yT51_OjYO_M/UjweP9rQseI/AAAAAAAAD9I/CDBI9mHg2YI/s640/adding-css-in-blogger-template-designer.png" title="adding css in blogger template designer" width="640" /></a></div><span style="color: #3d85c6;"><span style="font-size: large;"><b>3.</b> </span></span>Once you add the CSS, Save changes by clicking on the "<b>Apply to Blog</b>" button.<br /><br />And that's it! I've already customized the popular posts widget, when it only shows post titles.<br /><br /><span style="color: #0b5394;"><span style="font-size: large;"><b>Styles</b></span></span><br /><br />Here is the CSS of each style, just choose the one you like the best and put it on your blog. You can see each of these styles in action in the following demo blog:<br /><br /><a href="http://demo-blog343.blogspot.com/" rel="nofollow">http://demo-blog343.blogspot.com</a><br /><br /><span style="color: #3d85c6;"><i><b><span style="font-size: large;">Style 1:</span></b></i></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-mtYa4sgHtJk/UjwdD4L4-LI/AAAAAAAAD8k/lyi1bcnWI4U/s1600/style-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets" border="0" src="http://1.bp.blogspot.com/-mtYa4sgHtJk/UjwdD4L4-LI/AAAAAAAAD8k/lyi1bcnWI4U/s1600/style-1.png" title="styles for blogger popular posts gadget" /></a></div><blockquote>#PopularPosts1 h2{<br />padding:7px 0 3px 0;<br />width:100%;<br />margin:0;<br />font-size:1.3em;<br />text-indent:-12px;<br />font-size:18px;<br />text-align:center;<br />color: #000; <span style="color: #38761d;">/* Color of the widget's title */</span><br />}<br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:8px 0px 1px;<br />left:-8px;<br />width:290px;<br />}<br />#PopularPosts1 li{<br />position:relative;<br />margin:0 0 10px 0;<br />padding: 3px 2px 0 7px;<br />left:-5px;<br />width:285px;<br />border:1px solid #ccc;<br />}<br />#PopularPosts1 ul li:before{<br />content:counter(li);<br />counter-increment:li;<br />position:absolute;<br />display:block;<br />top:-5px;<br />left:-5px;<br />font-size:18px;<br />width:14px;<br />margin:0 0 10px 0;<br />padding:4px 4px 4px 3px;<br />color:#333;<br />text-align:left;<br />background:#E8E8E8;<br />text-indent:2px;<br />}<br />#PopularPosts1 ul li:after{<br />content:"";<br />position:absolute;<br />top:-5px;<br />left:15px;<br />width: 0px;<br />height: 0px;<br />border-top:5px outset transparent;<br />border-left:5px solid #aeaeae; <br />}<br /><br />#PopularPosts1 ul li a{<br />font-size:17px; <span style="color: #38761d;">/* Font size of the links */</span><br />color:#444; <span style="color: #38761d;">/* Color of the links */</span><br />font-style: italic;<br />margin-left:17px;<br />display:block;<br />min-height:25px;<br />text-decoration:none;<br />padding:0 4px 3px 0;<br />}<br />#PopularPosts1 ul li:hover{<br />background:#f9f9f9;<br />border:1px solid #aaa;<br />}<br />#PopularPosts1 ul li a:hover{<br />color:#0174DF;<br />}</blockquote><br /><span style="color: #3d85c6;"><span style="font-size: large;"><i><b>Style 2:</b></i></span></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-GIA1ddwSGrc/UjwdKPGAyPI/AAAAAAAAD8s/K__bxbw-XSY/s1600/style-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets" border="0" src="http://2.bp.blogspot.com/-GIA1ddwSGrc/UjwdKPGAyPI/AAAAAAAAD8s/K__bxbw-XSY/s1600/style-2.png" title="styles for blogger popular posts gadget" /></a></div><blockquote>#PopularPosts1 h2{<br />position:relative;<br />padding:8px 10px 6px 10px;<br />width:100%;<br />margin:0;<br />font-size:17px;<br />background: #bada55;<br />color:#222;<span style="color: #38761d;"> /* Color of the widget's title */</span><br />text-align:center;<br />}<br />#PopularPosts1 h2:before{<br />position:absolute;<br />content:"";<br />top:-6px;<br />right:-5px;<br />width: 0px;<br />height: 0px;<br />border-bottom:24px outset transparent; <br />border-top:24px outset transparent; <br />border-right:24px solid #fff; <span style="color: #38761d;">/* Color of the triangle */</span><br />}<br /><br />#PopularPosts1 h2:after{<br />position:absolute;<br />content:"";<br />top:-7px;<br />left:-5px;<br />width: 0px;<br />height: 0px;<br />border-bottom:24px outset transparent; <br />border-top:24px outset transparent;<br />border-left:24px solid #fff; <span style="color: #38761d;">/* Color of the triangle */</span><br />}<br /><br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:10px;<br />left:-8px;<br />width:100%;<br />}<br /><br />#PopularPosts1 li{ <span style="color: #38761d;">/* Styles of each element */</span><br />width:100%;<br />position:relative;<br />left:0;<br />margin:0 0 1px 12px;<br />padding:4px 5px;<br />}<br /><br />#PopularPosts1 ul li:before{ <span style="color: #38761d;">/* style of the numbers */</span><br />content:counter(li);<br />counter-increment:li;<br />position:absolute;<br />top:2px;<br />left:-23px;<br />font-size:35px; <span style="color: #38761d;">/* Font size of the numbers */</span><br />width:20px;<br />color:#666; <span style="color: #38761d;">/* Color of the text */</span><br />}<br />#PopularPosts1 ul li a{<br />display:block;<br />position:relative;<br />left:-30px;<br />width:100%;<br />margin:0;<br />padding: 9px 3px 10px 29px;<br />font-size:15px; <span style="color: #38761d;">/* Font size of the links */</span><br />font-style: italic;<br />color:#333; <span style="color: #38761d;">/* Color of the links */</span><br />text-decoration:none;<br />transition: all .1s ease-in-out;<br />}<br />#PopularPosts1 ul li a:hover{<br />color:#3366ff;<br />margin-left:3px;<br />}</blockquote><br /><span style="color: #3d85c6;"><b><i><span style="font-size: large;">Style 3:</span></i></b></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-mo5wY-BEpgI/UjwdPdrQiWI/AAAAAAAAD80/CSUIt2HuU_c/s1600/style-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets" border="0" src="http://4.bp.blogspot.com/-mo5wY-BEpgI/UjwdPdrQiWI/AAAAAAAAD80/CSUIt2HuU_c/s1600/style-3.png" title="styles for blogger popular posts gadget" /></a></div><blockquote class="tr_bq">#PopularPosts1 h2{<br />position:relative;<br />right:-2px;<br />padding:8px 63px 6px 17px; <br />width:100%;<br />margin:0;<br />font-size:16px;<br />background:#C00000; <span style="color: #38761d;">/* Background color */</span><br />color:#f2f2f2; <span style="color: #38761d;">/* Color of the widget's title */</span><br />text-align:left;<br />text-indent:18px;<br />}<br />#PopularPosts1 h2:before{<br />position:absolute;<br />content:"";<br />top:33px;<br />right:0px;<br />width: 0px;<br />height: 0px;<br />border-bottom:12px outset transparent;<br />border-left:12px solid #800000; <br />}<br />#PopularPosts1 h2:after{<br />position:absolute;<br />content:"";<br />top:-6px;<br />left:-5px;<br />width: 0px;<br />height: 0px;<br />border-bottom:24px outset transparent;<br />border-top:24px outset transparent;<br />border-left:24px solid #fff;<br />}<br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:10px;<br />left:-8px;<br />width:100%;<br />}<br />#PopularPosts1 li{ <br />width:100%;<br />position:relative;<br />left:0;<br />margin:7px 0 16px 12px;<br />padding:10px 4px 0 5px;<br />}<br />#PopularPosts1 ul li:before{ <br />content:counter(li);<br />counter-increment:li;<br />position:absolute;<br />top:-2px;<br />left:-20px;<br />font-size:33px;<br />width:20px;<br />color:#888888; <br />}<br /><br />#PopularPosts1 ul li a{<br />display:block;<br />font-size:14px; <span style="color: #38761d;">/* Font size of the links */</span><br />color: #666; <span style="color: #38761d;">/* Color of the links */</span><br />text-decoration:none;<br />transition: all .1s ease-in-out;<br />}<br />#PopularPosts1 ul li a:hover{<br />color:#3366FF;<br />margin-left:3px;<br />}</blockquote><br /><span style="color: #3d85c6;"><b><i><span style="font-size: large;">Style 4:</span></i></b></span><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-6GuA18PxX0I/UjwdTL7FFOI/AAAAAAAAD88/8C4Ev_4jNlc/s1600/style-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets" border="0" src="http://4.bp.blogspot.com/-6GuA18PxX0I/UjwdTL7FFOI/AAAAAAAAD88/8C4Ev_4jNlc/s1600/style-4.png" title="styles for blogger popular posts gadget" /></a></div><blockquote class="tr_bq">#PopularPosts1 h2{<br />padding:8px 10px 3px 0;<br />width:100%;<br />margin:0;<br />font-size:16px;<br />position:relative;<br />left:-20px;<br />display:block;<br />border-bottom:2px solid #ccc;<br />}<br />#PopularPosts1 ul{<br />list-style:none;<br />counter-reset:li;<br />padding:10px;<br />width:100%;<br />}<br />#PopularPosts1 li{ /* Styles of each element */<br />width:100%;<br />position:relative;<br />left:0;<br />margin:0 0 6px 10px;<br />padding:4px 5px;<br />}<br />#PopularPosts1 ul li:before{<span style="color: #38761d;"> /* Style of the numbers */</span><br />content:counter(li);<br />counter-increment:li;<br />position:absolute;<br />top:3px;<br />left:-39px;<br />font-size:21px;<br />width:28px;<br />height:28px;<br />border-radius: 50%;<br />color:#777;<span style="color: #38761d;"> /* Text color */</span><br />border: 2px solid #ddd;<span style="color: #38761d;"> /* Rounded border color */</span><br />padding:0;<br />text-indent:9px;<br />}<br />#PopularPosts1 ul li a{<br />display:block;<br />position:relative;<br />left:-45px;<br />width:100%;<br />margin:0;<br />min-height:28px;<br />padding: 5px 3px 3px 39px;<br />color:#333; <span style="color: #38761d;">/* color of the links */</span><br />text-decoration:none;<br />font-size:14px; <span style="color: #38761d;">/* Font size of the links */</span><br />font-style: italic;<br /><br />}<br />#PopularPosts1 ul li a:hover{<br />color:#3366ff;<br />margin-left:3px;<br />}</blockquote><br /><b><span style="color: #0b5394;"><span style="font-size: large;">Final Notes</span></span></b><br /><br />All the CSS is valid. I just have to mention that the numbering is not visible in Internet Explorer 7, since that version of the browser does not support properties that make the numbers appear. For example in the 4th style, the circles look squared in IE8 and earlier versions since, these versions do not support a property that makes them look as circles. <br /><br />Fonts will be inherited from the template, since they have not been declared in the CSS. Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-51104781643572604182013-09-19T20:49:00.000-07:002013-09-23T11:44:17.224-07:00Tips SEO Onpage <br />Tips SEO Onpage | Ketika mendengar kata SEO lalu ditambah kata Onpage maka yang terpikir dalam benak atau pikiran saya adalah sebuah teknik search engine optimization yang mana bertumpu pada optimasi halaman, tidak ada backlink dari luar situs. Itu yang ada dipikiran saya mengenai Onpage SEO. Dikatakan bahwa pengoptimalan mesin pencari itu sangatlah banyak tekniknya, dari teknik onpage yang Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-29084134910459572392013-09-19T06:44:00.000-07:002013-09-23T11:44:17.239-07:00Pakar SEOPakar SEO | Search Engine Optimization adalah sebuah teknik yang biasa digunakan oleh para pemilik situs baik itu blog maupun website demi tujuan meningkatkan pengunjung/visitor, mencari pembeli, mempromosikan produk dan lain sebagainya. Pemahaman SEO menurut saya pribadi adalah suatu cara demi menuju target mencapai page one didalam search engine yang memilik tujuan berbeda dari masing-masing Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-2141027384590682602013-09-19T05:23:00.000-07:002013-09-23T11:41:53.967-07:00Adding a Youtube Video in the Background of a Blogger blogSome of you might have wondered how to put a video to play in the blog's background, so that instead of having just a color or an image, to have a video. We can do this thanks to the <b>jQuery plugin Tubular </b>that lets you use a YouTube video as a background of a web page.<br /><br />Although the result can be very original and attractive, I must say it has three drawbacks: they can not be silenced, if the video has ads, they will also appear, and it can slow the loading time of the blog, so if anyone wants to use it, may consider putting it only on special occasions, or on blogs that load very quickly.<br /><br />Also it can be done in HTML5, the problem with this method is that you need to load the video in 3 different formats (.mp4, .webm and .ovg) along with a picture for browsers that do not support them, so this YouTube option seems more practical to me, despite the drawbacks.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-nzSqtvpm5-U/UjrsQTCOZHI/AAAAAAAAD8M/syMWqcNjjME/s1600/youtube-video-for-blogger-background1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger tricks, blogger widgets" border="0" height="243" src="http://1.bp.blogspot.com/-nzSqtvpm5-U/UjrsQTCOZHI/AAAAAAAAD8M/syMWqcNjjME/s400/youtube-video-for-blogger-background1.png" title="add a youtube video in the background of blogger " width="400" /></a></div><br />You can see it working on this <a href="http://tubulardemo.blogspot.ro/" rel="nofollow">demo blog</a><br /><br /><span style="font-size: large;"><span style="color: #3d85c6;"><b>Steps </b></span></span><br /><br /><span style="color: #3d85c6;"><b>1.</b></span> The first step is to just above the <b></head> </b>tag, this script:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />/* jQuery tubular plugin<br />|* by Sean McCambridge<br />|* http://www.seanmccambridge.com/tubular<br />|* Copyright 2012<br />|* licensed under the MIT License<br />|* Enjoy.<br />|* <br />|* Thanks,<br />|* Sean */<br /><br />var videoWidth = 853; <br />var videoRatio = 16/9; <br />var defaultDiv = 'wrapper-video';<br /><br />jQuery.fn.tubular = function(videoId,wrapperId) {<br />wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;<br />t = setTimeout("resizePlayer()",1000); <br /><br />jQuery('html,body').css('height','100%');<br />jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');<br />jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});<br /><br />var ytplayer = 0;<br />var pageWidth = 0;<br />var pageHeight = 0;<br />var videoHeight = videoWidth / videoRatio;<br />var duration;<br /><br />var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>'; <br /><br />jQuery('#ytapiplayer').html(iframe);<br />jQuery(window).resize(function() {<br />resizePlayer();<br />});<br />return this;<br />}<br /><br />function onYouTubePlayerReady(playerId) {<br />ytplayer = document.getElementById("myytplayer");<br />ytplayer.setPlaybackQuality('medium');<br />ytplayer.mute();<br />}<br /><br />function resizePlayer() {<br />var newWidth = jQuery(window).width(); <br />var newHeight = jQuery(window).height(); <br />jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);<br />if (newHeight > newWidth / videoRatio) { <br />newWidth = newHeight * videoRatio; <br />}<br />jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);<br />}<br /><br />//]]><br /></script></blockquote>And this one too: <br /><blockquote class="tr_bq"><script type='text/javascript'><br />//<![CDATA[<br />$().ready(function() {<br />$('body').tubular('<span style="color: #cc0000;"><b>61BLn00AN_w</b></span>','wrapper-video'); <br />});<br />//]]><br /></script></blockquote><span style="color: #3d85c6;"><b>2. </b></span>Then locate the <b><body</b>> tag (CTRL + F)<br />Or if you are using a template from Template Designer, find this line:<br /><blockquote><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote><b><span style="color: #3d85c6;">3.</span></b> Under either of these two, add this:<br /><blockquote><div id='wrapper-video'></blockquote><span style="color: #3d85c6;"><b>4. </b></span>Now search for the<b> </body></b> tag, and before it put this:<br /><blockquote></div></blockquote>Save the changes and that's it. In red you must put the ID of Youtube video, the ID are the characters that appear at the end of the URL:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-fJz3chh8Ofs/UjrovfGXORI/AAAAAAAAD7w/Ix4ZKl5tgv8/s1600/youtube-video-for-blogger-background.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="30" src="http://3.bp.blogspot.com/-fJz3chh8Ofs/UjrovfGXORI/AAAAAAAAD7w/Ix4ZKl5tgv8/s320/youtube-video-for-blogger-background.png" width="320" /></a></div><br /><b>Remember:</b> There is no option to mute, so if you don't want to have sound as in the demo blog, you have to choose a video that has no sound. I also recommend using a video in HD in case you don't want any black parts to show around it.<br /><br />If you are using jQuery, remove other versions that you have to avoid duplication and have problems.<br /><br /><b>Author | </b><a href="http://code.google.com/p/jquery-tubular/" rel="nofollow">jQuery Tubular</a>Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-11386878115941443502013-09-19T03:46:00.000-07:002013-09-23T11:41:53.977-07:00Create a Background Slideshow for BloggerIn the previous post we saw <a href="http://helplogger.blogspot.ro/2013/09/how-to-make-background-image-of-blog.html">how to make the blog's background fill the screen regardless of the resolution of the monitor</a>. The method that we'll use now with jQuery is a plugin called <b>BackStretch</b> which also has the option of creating a slideshow of pictures as a blog wallpaper without losing the property of adjusting to the width and height of the screen.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-tTG7gdYx5Y8/UjrVRgiK1qI/AAAAAAAAD7c/dgzCL56zjPo/s1600/background-slideshow-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="slideshow for blogger, blogger widgets" border="0" height="250" src="http://2.bp.blogspot.com/-tTG7gdYx5Y8/UjrVRgiK1qI/AAAAAAAAD7c/dgzCL56zjPo/s400/background-slideshow-for-blogger.png" title="how to create a background slideshow for blogger" width="400" /></a></div><br />What we will do in this entry is just this, try to make the blog's background to have some images that are changing, all with fade effect between each transition.<br /><br />You can see an example in this <span style="color: blue;"><a href="http://demoblog12131.blogspot.ro/" rel="nofollow">demo blog</a></span>.<br /><br />To put this slideshow in the blog's background, just go to <b>Template</b> - <b>Edit HTML</b> and before <b></head></b> add the following code:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><br /><script><br />//<![CDATA[<br />/*<br />* jQuery Backstretch<br />* Version 1.2.8<br />* http://srobbin.com/jquery-plugins/jquery-backstretch/<br />* Add a dynamically-resized background image to the page<br />* Copyright (c) 2012 Scott Robbin (srobbin.com)<br />* Licensed under the MIT license<br />* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt<br />*/<br />;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);<br />//]]><br /></script></blockquote><blockquote class="tr_bq"><script><br />//<![CDATA[<br />var images = [<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br /> ];<br /><br /> $(images).each(function(){<br /> $('<img/>')[0].src = this;<br /> });<br /> var index = 0;<br />$.backstretch(images[index], {speed: 1000});<br /> var slideshow = setInterval(function() {<br /> index = (index >= images.length - 1) ? 0 : index + 1;<br /> $.backstretch(images[index]);<br /> }, <b><span style="color: #cc0000;">5000</span></b>);<br />//]]><br /></script></blockquote>Here add the URLs of the images that will be the background of your blog.<br />If you would like to add more pictures, just add after the <b>var images = [ </b>another line like this:<br /><blockquote> "<span style="color: blue;">Image URL</span>",</blockquote>The images will be changing in the order you have added them, if you want these to appear in a random order, then change the second part of the code with this:<br /><blockquote class="tr_bq"><script><br />//<![CDATA[<br />var images=new Array();<br />images[ <span style="color: #0b5394;"><b>1</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>2</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>3</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>4</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>5</b></span> ]="<span style="color: blue;">Image URL</span>";<br /><br /> Array.prototype.shuffle = function() {<br /> var len = this.length;<br /> var i = len;<br /> while (i--) {<br /> var p = parseInt(Math.random()*len);<br /> var t = this[i];<br /> this[i] = this[p];<br /> this[p] = t;<br /> }<br />};<br /><br /> images.shuffle();<br /> $(images).each(function(){<br /> $('<img/>')[0].src = this;<br /> });<br /> var index = 0;<br />$.backstretch(images[index], {speed: 1000});<br /> var slideshow = setInterval(function() {<br /> index = (index >= images.length - 1) ? 0 : index + 1;<br /> $.backstretch(images[index]);<br /> }, <span style="color: #cc0000;"><b>5000</b></span>);<br />//]]><br /></script></blockquote>You can also add more pictures by adding a line like this:<br /><blockquote>images[ <span style="color: #0b5394;"><b>6</b></span> ]="<span style="color: blue;">Image URL</span>";</blockquote>But you will see that in this case there are some consecutive numbers in blue, so if you add another such as 6, then the next one should be 7, etc..<br /><br />In both cases you can change the duration of each image which is in the <span style="color: #cc0000;"><b>5000</b></span> value that is at the end of the script.<br />The advantage of this slideshow in the blog's background is that images are automatically resized to the size of the monitor, so that, no matter of the resolution, it should look good.<br /><br />It is worth remembering that if you are using Scriptaculous, you have to make some changes, and if you already use jQuery, should leave <a href="http://jquery.com/" rel="nofollow">only one version</a>.<br /><br /><b>Author page |</b> <a href="http://srobbin.com/jquery-plugins/backstretch/" rel="nofollow">Backstretch</a>Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-19254762182221930212013-09-18T06:51:00.000-07:002013-09-23T11:41:53.988-07:00Rounded Corners and Shadows for Images using CSSHere are some unique border styles that you can apply to blogger images by using the <b>border-radius </b>property and defining either all four corners simultaneously or applying the rounded border only to some of them.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-PUVrQQTWk94/Ujm75jQ00OI/AAAAAAAAD6M/ZpDdETHnieQ/s1600/rounded-borders-and-shadows-for-blogger-with-css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="http://3.bp.blogspot.com/-PUVrQQTWk94/Ujm75jQ00OI/AAAAAAAAD6M/ZpDdETHnieQ/s320/rounded-borders-and-shadows-for-blogger-with-css.jpg" width="320" /></a></div><br />One of the advantages of CSS3 is that we can apply rounded borders without complicating things too much and one of the options would be to use these edges or borders to images in the blog posts, to which we can also add some hover effects such as shading and rounded borders accompanied by transitions. <br /><br />Note: if you need more info about how to add rounded corners on images, follow these links:<br />- <a href="http://helplogger.blogspot.ro/2013/03/css-basics-how-to-apply-rounded-corners.html">CSS Basics. How to Apply Rounded Corners On Images #1</a><br />- <a href="http://helplogger.blogspot.ro/2013/03/css-basics-how-to-apply-rounded-corners_19.html">CSS Basics. How to Apply Rounded Corners On Images #2</a><br /><br />Below are a few examples of these borders and how the images behave when you hover over them.<br />If you want to use one of these styles, just copy the code below the image, then go to <b>Template</b>, click on the <b>Edit HTML</b> button and paste that code before <b>]]></b:skin></b> (CTRL + F to find it)<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="firstpicround" height="290" src="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />border:0;<br />padding:0;<br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />border-radius: 50%; <span style="color: #38761d;">/* Rounded border */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="secondpicround" height="290" src="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />background:#FFF; <span style="color: #38761d;">/* background color around the image */</span><br />padding:15px; <span style="color: #38761d;">/* space between border and image */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />border-radius: 0% 50%; <span style="color: #38761d;">/* Rounded border */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="thirdpicround" height="290" src="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />background:#FFF; <span style="color: #38761d;">/* the background color around the image *</span>/<br />padding:15px; <span style="color: #38761d;">/* The Space Between Border and Image */</span><br />border-radius: 50% 0; <span style="color: #38761d;">/* Rounded border */</span><br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />border-radius:0; <span style="color: #38761d;">/* This removes the border roundness (value 0) */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="fourthpicround" height="290" src="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />box-shadow: 0px 0px 15px #000;<span style="color: #38761d;"> /* Shadow */</span><br />border-radius: 50%;<span style="color: #38761d;"> /* Rounded border */</span><br />border:0;<br />padding:0;<br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />box-shadow: 0; <span style="color: #38761d;">/* With this we remove the shadow (value 0) */</span><br />border-radius: 0; <span style="color: #38761d;">/* This removes the border roundness (value 0) */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="fifthpicround" height="291" src="http://1.bp.blogspot.com/-uagPvAOtQGQ/Ujm75XRb0cI/AAAAAAAAD6Q/KUd5j8rfjPE/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />border-radius: 45% / 20%; <span style="color: #38761d;">/* Rounded border */</span><br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />padding:0;<br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />border-radius: 0; <span style="color: #38761d;">/* This removes the roundness of border (value 0) */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><style type="text/css"> .firstpicround { border:0; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .firstpicround:hover { box-shadow: 0px 0px 15px #000; border-radius: 50%; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .secondpicround { padding:15px; background:#FFF; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .secondpicround:hover { border-radius: 0% 50%; box-shadow: 0px 0px 15px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .thirdpicround { background:#FFF; padding:15px; border-radius: 50% 0; box-shadow: 0px 0px 15px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .thirdpicround:hover { border-radius:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .fourthpicround { box-shadow: 0px 0px 15px #000; border-radius: 50%; border:0; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .fourthpicround:hover { box-shadow: 0; border-radius: 0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .fifthpicround { border-radius: 45% / 20%; box-shadow: 0px 0px 15px #000; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .fifthpicround:hover { border-radius: 0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } </style> So these effects will apply to all images uploaded to your Blogger posts. But if you want to apply them only on certain pictures then change <b>.post-body img</b> with <b>.rounded</b> and <b>.post-body img:hover</b> with <b>.rounded:hover</b><br />Then add the <b><span style="color: #990000;">rounded</span></b> class selector in the image's code:<br /><blockquote class="tr_bq"><img <span style="color: #990000;"><b>class="rounded"</b></span> src="<span style="color: blue;">Image URL</span>"/></blockquote>These are just some examples, however, you can modify them anytime by adding or deleting more CSS styles, it depends on everybody's tastes or needs. But as you have seen, we can make the images look way more attractive and this has been done only with CSS ;)Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-71598564618615306702013-09-17T14:50:00.000-07:002013-09-23T11:41:54.001-07:00How to make the background image of the blog fill the entire screenA constant question is how to make the background image of the blog always fill the entire screen regardless of the resolution of the monitor. And that is when we put a background image as measured by our monitor forgetting that there are actually monitors of all resolutions, very small and very large. So if we put an image according to our screen, there will be someone with a bigger monitor that surely will not see the whole picture or it will be repeated, and in this case, using very small monitors, the image will be seen incomplete.<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-f_ZsVjthb04/UjjN1cHMoXI/AAAAAAAAD58/NzH3zB_NzZw/s1600/background-image-of-the-blog-cover-the-entire-screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, blogger tutorials, blogger blogspot" border="0" height="282" src="http://2.bp.blogspot.com/-f_ZsVjthb04/UjjN1cHMoXI/AAAAAAAAD58/NzH3zB_NzZw/s400/background-image-of-the-blog-cover-the-entire-screen.png" title="how to make the background image of a blog cover the entire screen" width="400" /></a></div><br />Here I will discuss two solutions to this, one using <b>CSS3</b>, and another with <b>jQuery</b>. With either of these two, we'll make the background image of the page to fill the entire screen regardless of the resolution of it.<br /><br /><h3><span style="color: #0b5394;">CSS3</span></h3><br />The first option is using CSS3, the advantage with this method is that we do not overload the blog with scripts, we use only the <b>background-size</b> property that is responsible for conducting what we want.<br />The disadvantage is that this property is supported only by modern browsers, so in the case of Internet Explorer, it will only be seen for version 9 and above, in other browsers there should be no problem.<br /><br />The method is very simple, just go to <b>Template</b> - <b>Edit HTML</b>, locate the background that is within <b>body { </b>and replace it with this:<br /><blockquote class="tr_bq">background: url(Image URL) no-repeat center center fixed;<br />background-size: cover;</blockquote>It would look something like this:<br /><blockquote class="tr_bq">body {<br /><i>background: url</i>(<span style="color: blue;"><b>URL of the image</b></span>) <i>no-repeat center center fixed;</i><br /><i>background-size: cover;</i><br />margin:0;<br />color:#000;<br />font:x-small Georgia Serif;<br />font-size/* */:/**/small;<br />font-size: /**/small;<br />text-align: center;<br />}</blockquote>Just put the URL of the image and that's it.<br /><br /><h3><span style="color: #0b5394;">jQuery</span></h3><br />With this method we will use jQuery with <b>BackStretch</b> plugin, the advantage is that it works in all browsers, including IE7 and above. The disadvantage is not major if you already use jQuery, because the plugin is actually small.<br /><br />To use this method in your blog, go to <b>Template</b> - <b>Edit HTML</b> and before <b></head></b> paste this script:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><br /><script type='text/javascript'><br />//<![CDATA[<br />/*<br />* jQuery Backstretch<br />* Version 1.2.8<br />* http://srobbin.com/jquery-plugins/jquery-backstretch/<br />* Add a dynamically-resized background image to the page<br />* Copyright (c) 2012 Scott Robbin (srobbin.com)<br />* Licensed under the MIT license<br />* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt<br />*/<br />;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);<br />//]]><br /></script><br /><script><br />$.backstretch("<b><span style="color: blue;">URL of the image</span></b>");<br /></script></blockquote><br />Put the URL of the image where indicated and ready.<br /><br />As you can see both systems are easy to apply, each with its pros and cons, but the result is the same, extending the background image to fit the screen of any monitor regardless of the resolution of it.<br /><br />Remember that in the case of jQuery method, you should verify that you are not using Mootools or Scriptaculous, if so you will have to implement some changes in the script to make it compatible.<br />And if you already use jQuery <a href="http://jquery.com/" rel="nofollow">remember having only one version</a>, the last one.Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-79467823271098927852013-09-17T12:18:00.000-07:002013-09-23T11:41:54.012-07:00Vertical drop down menu with jQueryjGlideMenu is a vertical menu that can be dragged and dropped so that the reader can place it anywhere, and in addition, he can browse through the tabs in a very peculiar manner that comes with a sliding effect giving a sexy touch.<br /><br />One of the advantages is that it can store a large number of links and can be removed anytime if we want.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-Z4Esq5o-a_g/UjipNclicOI/AAAAAAAAD4A/bfPBKc1K37I/s1600/vertical-drop-down-menu-with-jquery-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="vertical menu, menu for blogger" border="0" src="http://4.bp.blogspot.com/-Z4Esq5o-a_g/UjipNclicOI/AAAAAAAAD4A/bfPBKc1K37I/s1600/vertical-drop-down-menu-with-jquery-for-blogger.png" title="vertical drop down menu with jQuery" /></a></div><br />To understand this menu better and to see it in action, visit this <a href="http://helploggerdemo.blogspot.com/">demo blog</a>. There we can drag the menu, navigate through its tabs or close.<br /><br />To add this vertical menu on your blog, just follow these steps:<br /><br />1) From your Blogger dashboard, go to <b>Template</b> > <b>Edit HTML</b> and before the <b></head></b> tag, add these scripts:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><i><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js' type='text/javascript'/></i><br /><script src='http://helplogger.googlecode.com/svn/trunk/jQuery.jGlideMenu.min.js' type='text/javascript'/><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />$(document).ready(function(){<br />$('#jGlide_001').jGlideMenu({<br />tileSource : '.jGlide_001_tiles' , <br />demoMode : false <br />}).show();<br /><br />$('#switch').click(function(){$(this).jGlideMenuToggle();});<br />});<br />//]]><br /></script></blockquote>2) Now paste before<b> ]]></b:skin></b> these styles:<br /><blockquote class="tr_bq">.jGM_box {<br />position: absolute; <span style="color: #6aa84f;">/* Change absolute with fixed if you want it to float */</span><br />top: 50px;<span style="color: #6aa84f;"> /* Distance from above */</span><br />right: 760px; <span style="color: #6aa84f;">/* Distance from right */</span><br />width: 227px; <br />height: 317px;<br />background: #fff; <span style="color: #6aa84f;">/* Background color */</span><br />margin: 0;<br />padding: 0;<br />border: 1px solid #ccc; <span style="color: #6aa84f;">/* Border */</span><br />overflow: hidden;<br />}<br />.jGM_header {<br />position: absolute;<br />top: 0;<br />left: 0;<br />height: 18px;<br />width: 227px;<br />background: #d1d1d1; <span style="color: #6aa84f;">/* Background color for the up bar */</span><br />color: #fff;<br />text-align: right;<br />vertical-align: middle;<br />line-height: 18px;<br />cursor: move;<br />}<br />.jGM_header a {<br />margin-right: 12px;<br />text-decoration: none;<br />color: #000 !important;<br />cursor: pointer;<br />}<br />.jGM_wrapper {<br />position: absolute;<br />top: 19px;<br />left: 0;<br />width: 2270px;<br />height: 288px;<br />margin: 0;<br />padding: 0;<br />border: 0;<br />}<br />.jGM_tile {<br />position: absolute;<br />top: 0;<br />left: 7px;<br />width: 213px;<br />height: auto;<br />overflow: hidden;<br />margin: 0;<br />padding: 0;<br />border: 0;<br />display: block;<br />}<br />.jGM_cats {<br />width: 100%;<br />height: 64px;<br />overflow: hidden;<br />vertical-align: middle;<br />text-align: left;<br />}<br />.jGM_cats h4 {<br />font-family: Verdana,Arial,serif;<br />font-size: 1.8em;<br />margin: 0;<br />padding: 2px 0;<br />line-height: 1.8em;<br />color: #414141;<br />font-weight: normal;<br />}<br />.jGM_cats p {<br />font-family: Verdana,tahoma,arial;<br />font-size: 1em; <span style="color: #6aa84f;">/* Font size of the description */</span><br />margin: 0;<br />padding: 0;<br />line-height: 1.2em;<br />color: #858585; <span style="color: #6aa84f;">/* Description color */</span><br />font-weight: normal;<br />}<br />.jGM_pager {<br />height: 18px;<br />width: 213px;<br />line-height: 18px;<br />margin: 0;<br />border: 0;<br />padding: 0;<br />background: #f6f6f6; <br />text-align: center;<br />vertical-align: middle;<br />}<br />.jGM_pager a {<br />text-decoration: none;<br />font-weight: bold;<br />text-decoration: none;<br />display: block;<br />}<br />.jGM_pager a:hover { background: #d1d1d1; }<br />.jGM_pager img { border: 0; margin: 6px 0; }<br />.jGM_content {<br />width: 213px;<br />height: 150px;<br />margin: 1px 0;<br />padding: 0;<br />border: 0;<br />overflow: hidden;<br />}<br />.jGM_content a {<br />font-family: Tahoma,arial;<br />text-decoration: none;<br />color: #333 !important;<br />height: 18px;<br />width: 100%;<br />display: block;<br />line-height: 18px;<br />padding: 0 0 0 10px;<br />background-color: #e6e7e9;<br />margin: 1px 0;<br />}<br />.jGM_content a:hover {<br />color: #fff !important;<br />background-color: #4D4E67;<span style="color: #6aa84f;"> /* Bar color on mouseover */</span><br />}<br />.jGM_more {<br />background-image: url(http://3.bp.blogspot.com/-n6XI5wLg8og/UjiLQ10dQpI/AAAAAAAAD3Q/cOVY1gTiruc/s1600/arrow.gif);<br />background-repeat: no-repeat;<br />background-position: 203px 50%;<br />}<br />.jGM_back {<br />position: absolute;<br />top: 255px;<br />right: 0;<br />height: 18px;<br />width: 52px;<br />background: #d1d1d1;<br />line-height: 18px;<br />vertical-align: middle;<br />text-align: center;<br />margin: 10px 0 0 0;<br />padding: 0;<br />border: 0;<br />z-index: 99;<br />}<br />.jGM_back a {<br />height: 100%;<br />width: 100%;<br />text-decoration: none;<br />color: #000 !important; /<span style="color: #6aa84f;">* Color of the "Back" link */</span><br />display: block;<br />}<br />.jGM_back a:hover {<br />color: #fff !important;<span style="color: #6aa84f;"> /* Color of the "Back" link on mouseover */</span><br />background: #4D4E67; <br />}<br />.jGM_reset {<br />position: absolute;<br />top: 255px;<br />right: 62px;<br />height: 18px;<br />width: 52px;<br />background: #d1d1d1;<br />line-height: 18px;<br />vertical-align: middle;<br />text-align: center;<br />margin: 10px 0 0 0;<br />padding: 0;<br />border: 0;<br />z-index: 99;<br />}<br />.jGM_reset a {<br />height: 100%;<br />width: 100%;<br />text-decoration: none;<br />color: #000 !important; <span style="color: #6aa84f;">/* Color of the "Home" link */</span><br />display: block;<br />}<br />.jGM_reset a:hover { <br />color: #fff !important; <span style="color: #6aa84f;">/* Color of the "Home" link on mouseover */</span><br />background: #4D4E67;<br />}</blockquote>3) Now go to <b>Layout </b>and paste the structure of the menu inside a<b> HTML/Javascript</b> gadget:<br /><blockquote class="tr_bq"><div class="jGM_box" id="jGlide_001"><br /><br /><b><i><!-- Here all the links of the first level --></i></b><br /><ul id="tile_001" class="jGlide_001_tiles" title="Menu" alt="Description of the first level"><br /><li rel="tile_002">Link 1</li><br /><li rel="tile_003">Link 2</li><br /><li rel="tile_004">Link 3</li><br /><li rel="tile_006">Link 4</li><br /><li rel="tile_007">Link 5</li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 6</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 7</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 8</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 9</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 10</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 11</span></a></li><br /></ul><br /><br /><b><i><!-- Here all the links of the second level --></i></b><br /><ul id="tile_002" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li rel="tile_005">Link 1.1</li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.2</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.3</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.4</span></a></li><br /></ul><br /><br /><ul id="tile_003" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 2.1</span></a></li><br /><li rel="tile_008">Link 2.2</li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 2.3</span></a></li><br /></ul><br /><br /><ul id="tile_004" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 3.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 3.2</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 3.3</span></a></li><br /></ul><br /><br /><br /><ul id="tile_006" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 4.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 4.2</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 4.3</span></a></li><br /></ul><br /><br /><ul id="tile_007" class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 5.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 5.2</span></a></li><br /></ul><br /><br /><br /><i><b><!-- Here all the links of the third level --></b></i><br /><ul id="tile_005" class="jGlide_001_tiles" title="Menu" alt="Description of the third level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.1.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.1.2</span></a></li><br /></ul><br /><br /><br /><ul id="tile_008" class="jGlide_001_tiles" title="Menu" alt="Description of the third level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.2.1</span></a></li><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 1.2.2</span></a></li><br /></ul><br /><br /></div></blockquote>Add the URLs of the links and the names of the tabs and that's it.<br />If you want to add more links to the first level, then add another line like this:<br /><blockquote class="tr_bq"><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 12</span></a></li></blockquote>If you want to add another level to the link, then the line should be like this:<br /><blockquote><li <b>rel="tile_0010"</b>>Link 5</li></blockquote>Then in the area of the second or third level, add a piece like this:<br /><blockquote class="tr_bq"><ul <b>id="tile_0010"</b> class="jGlide_001_tiles" title="Menu" alt="Description of the second level"><br /><li><a href="<span style="color: blue;">URL address</span>"><span style="color: #cc0000;">Link 5.1</span></a></li><br /><li><a href="<span style="color: blue;">Url address</span>"><span style="color: #cc0000;">Link 5.2</span></a></li><br /></ul></blockquote>Here you should keep something in mind, if you look closely the link takes the REL attribute which must be the same as the ID we put on the second level, these IDs should not repeat and always be unique.<br />Yes, it sounds complicated, but once you understand the concept, you'll see that is actually pretty simple.<br /><br />In the area of the styles, there are the parts that can be customized. If you want the menu to be static, let's say you want to add it in the sidebar, then delete the first code of the script that is in italics. And in the CSS styles, remove this part:<br /><blockquote class="tr_bq">position: absolute; <span style="color: #6aa84f;">/* Change absolute with fixed if you want it to float */</span><br />top: 50px; <span style="color: #6aa84f;">/* Distance above */</span><br />right: 760px; <span style="color: #6aa84f;">/* Distance to the right */</span></blockquote>When there are many links then, there will be showing some arrows, so when you mouseover them, it will show the rest of the links either up or down.<br /><br />Throughout the menu structure we can change the Menu name and the descriptions as well.<br /><br />As this menu is made with JQuery, it is recommended to verify to have only one version of it.Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-40879588175398400962013-09-17T08:44:00.000-07:002013-09-23T11:41:54.022-07:00How to embed a youtube playlist on your blogger blogIn this post we will see how to create a YouTube video gallery using jQuery. It is an elegant gallery in which we can add 5 videos and for its dimensions, we could put it below the blog header. Actually you can put it anywhere, but it is recommended in that area considering that 765px is the width of the gallery.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-9d2T9vZX4Hc/Ujh4DAkp-iI/AAAAAAAAD3A/m99DdoazpVo/s1600/how-to-add-a-youtube-playlist-on-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="youtube to blogger" border="0" height="300" src="http://1.bp.blogspot.com/-9d2T9vZX4Hc/Ujh4DAkp-iI/AAAAAAAAD3A/m99DdoazpVo/s640/how-to-add-a-youtube-playlist-on-blogger.png" title="how to add a video gallery to blogger" width="640" /></a></div>To add this video slider to your blog go to <b>Template</b> ><b> Edit HTML</b> and before the <b></head></b> tag, add these scripts:<br /><div class="code1"><br /><script><br />//<![CDATA[<br />/*hoverscroll v.0.2.4*/<br />(function($) {<br />$.fn.hoverscroll = function(params) {<br />if (!params) { params = {}; }<br />params = $.extend({}, $.fn.hoverscroll.params, params);<br />this.each(function() {<br />var $this = $(this);<br />if (params.debug) {$.log('[HoverScroll] Trying to create hoverscroll on element ' + this.tagName + '#' + this.id);}<br />if (params.fixedArrows) {<br />$this.wrap('<div class="fixed-listcontainer"></div>')<br />}<br />else {<br />$this.wrap('<div class="listcontainer"></div>');<br />}<br /><br />$this.addClass('list');<br />var listctnr = $this.parent();<br />listctnr.wrap('<div class="ui-widget-content hoverscroll' +<br />(params.rtl && !params.vertical ? " rtl" : "") + '"></div>');<br />//listctnr.wrap('<div class="hoverscroll"></div>');<br /><br />var ctnr = listctnr.parent();<br /><br />var leftArrow, rightArrow, topArrow, bottomArrow;<br />if (params.arrows) {<br />if (!params.vertical) {<br />if (params.fixedArrows) {<br />leftArrow = '<div class="fixed-arrow left"></div>';<br />rightArrow = '<div class="fixed-arrow right"></div>';<br /><br />listctnr.before(leftArrow).after(rightArrow);<br />}<br />else {<br />leftArrow = '<div class="arrow left"></div>';<br />rightArrow = '<div class="arrow right"></div>';<br /><br />listctnr.append(leftArrow).append(rightArrow);<br />}<br />}<br />else {<br />if (params.fixedArrows) {<br />topArrow = '<div class="fixed-arrow top"></div>';<br />bottomArrow = '<div class="fixed-arrow bottom"></div>';<br /><br />listctnr.before(topArrow).after(bottomArrow);<br />}<br />else {<br />topArrow = '<div class="arrow top"></div>';<br />bottomArrow = '<div class="arrow bottom"></div>';<br /><br />listctnr.append(topArrow).append(bottomArrow);<br />}<br />}<br />}<br />ctnr.width(params.width).height(params.height);<br /><br />if (params.arrows && params.fixedArrows) {<br />if (params.vertical) {<br />topArrow = listctnr.prev();<br />bottomArrow = listctnr.next();<br /><br />listctnr.width(params.width)<br />.height(params.height - (topArrow.height() + bottomArrow.height()));<br />}<br />else {<br />leftArrow = listctnr.prev();<br />rightArrow = listctnr.next();<br /><br />listctnr.height(params.height)<br />.width(params.width - (leftArrow.width() + rightArrow.width()));<br />}<br />}<br />else {<br />listctnr.width(params.width).height(params.height);<br />}<br /><br />var size = 0;<br /><br />if (!params.vertical) {<br />ctnr.addClass('horizontal');<br />$this.children().each(function() {<br />$(this).addClass('item');<br /><br />if ($(this).outerWidth) {<br />size += $(this).outerWidth(true);<br />}<br />else {<br />size += $(this).width() + parseInt($(this).css('padding-left')) + parseInt($(this).css('padding-right'))<br />+ parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right'));<br />}<br />});<br />$this.width(size);<br /><br />if (params.debug) {<br />$.log('[HoverScroll] Computed content width : ' + size + 'px');<br />}<br />if (ctnr.outerWidth) {<br />size = ctnr.outerWidth();<br />}<br />else {<br />size = ctnr.width() + parseInt(ctnr.css('padding-left')) + parseInt(ctnr.css('padding-right'))<br />+ parseInt(ctnr.css('margin-left')) + parseInt(ctnr.css('margin-right'));<br />}<br /><br />if (params.debug) {<br />$.log('[HoverScroll] Computed container width : ' + size + 'px');<br />}<br />}<br />else {<br />ctnr.addClass('vertical');<br />$this.children().each(function() {<br />$(this).addClass('item')<br /><br />if ($(this).outerHeight) {<br />size += $(this).outerHeight(true);<br />}<br />else {<br />size += $(this).height() + parseInt($(this).css('padding-top')) + parseInt($(this).css('padding-bottom'))<br />+ parseInt($(this).css('margin-bottom')) + parseInt($(this).css('margin-bottom'));<br />}<br />});<br />$this.height(size);<br /><br />if (params.debug) {<br />$.log('[HoverScroll] Computed content height : ' + size + 'px');<br />}<br />if (ctnr.outerHeight) {<br />size = ctnr.outerHeight();<br />}<br />else {<br />size = ctnr.height() + parseInt(ctnr.css('padding-top')) + parseInt(ctnr.css('padding-bottom'))<br />+ parseInt(ctnr.css('margin-top')) + parseInt(ctnr.css('margin-bottom'));<br />}<br /><br />if (params.debug) {<br />$.log('[HoverScroll] Computed container height : ' + size + 'px');<br />}<br />}<br />var zone = {<br />1: {action: 'move', from: 0, to: 0.06 * size, direction: -1 , speed: 16},<br />2: {action: 'move', from: 0.06 * size, to: 0.15 * size, direction: -1 , speed: 8},<br />3: {action: 'move', from: 0.15 * size, to: 0.25 * size, direction: -1 , speed: 4},<br />4: {action: 'move', from: 0.25 * size, to: 0.4 * size, direction: -1 , speed: 2},<br />5: {action: 'stop', from: 0.4 * size, to: 0.6 * size},<br />6: {action: 'move', from: 0.6 * size, to: 0.75 * size, direction: 1 , speed: 2},<br />7: {action: 'move', from: 0.75 * size, to: 0.85 * size, direction: 1 , speed: 4},<br />8: {action: 'move', from: 0.85 * size, to: 0.94 * size, direction: 1 , speed: 8},<br />9: {action: 'move', from: 0.94 * size, to: size, direction: 1 , speed: 16}<br />}<br /><br />ctnr[0].isChanging = false;<br />ctnr[0].direction = 0;<br />ctnr[0].speed = 1;<br />function checkMouse(x, y) {<br />x = x - ctnr.offset().left;<br />y = y - ctnr.offset().top;<br /><br />var pos;<br />if (!params.vertical) {pos = x;}<br />else {pos = y;}<br /><br />for (i in zone) {<br />if (pos >= zone[i].from && pos < zone[i].to) {<br />if (zone[i].action == 'move') {startMoving(zone[i].direction, zone[i].speed);}<br />else {stopMoving();}<br />}<br />}<br />}<br /><br />function setArrowOpacity() {<br />if (!params.arrows || params.fixedArrows) {return;}<br /><br />var maxScroll;<br />var scroll;<br /><br />if (!params.vertical) {<br />maxScroll = listctnr[0].scrollWidth - listctnr.width();<br />scroll = listctnr[0].scrollLeft;<br />}<br />else {<br />maxScroll = listctnr[0].scrollHeight - listctnr.height();<br />scroll = listctnr[0].scrollTop;<br />}<br />var limit = params.arrowsOpacity;<br />var opacity = (scroll / maxScroll) * limit;<br /><br />if (opacity > limit) { opacity = limit; }<br />if (isNaN(opacity)) { opacity = 0; }<br /><br />var done = false;<br />if (opacity <= 0) {<br />$('div.arrow.left, div.arrow.top', ctnr).hide();<br />if(maxScroll > 0) {<br />$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', limit);<br />}<br />done = true;<br />}<br />if (opacity >= limit || maxScroll <= 0) {<br />$('div.arrow.right, div.arrow.bottom', ctnr).hide();<br />done = true;<br />}<br /><br />if (!done) {<br />$('div.arrow.left, div.arrow.top', ctnr).show().css('opacity', opacity);<br />$('div.arrow.right, div.arrow.bottom', ctnr).show().css('opacity', (limit - opacity));<br />}<br />}<br /><br />function startMoving(direction, speed) {<br />if (ctnr[0].direction != direction) {<br />if (params.debug) {<br />$.log('[HoverScroll] Starting to move. direction: ' + direction + ', speed: ' + speed);<br />}<br /><br />stopMoving();<br />ctnr[0].direction = direction;<br />ctnr[0].isChanging = true;<br />move();<br />}<br />if (ctnr[0].speed != speed) {<br />if (params.debug) {<br />$.log('[HoverScroll] Changed speed: ' + speed);<br />}<br /><br />ctnr[0].speed = speed;<br />}<br />}<br /><br />function stopMoving() {<br />if (ctnr[0].isChanging) {<br />if (params.debug) {<br />$.log('[HoverScroll] Stoped moving');<br />}<br /><br />ctnr[0].isChanging = false;<br />ctnr[0].direction = 0;<br />ctnr[0].speed = 1;<br />clearTimeout(ctnr[0].timer);<br />}<br />}<br /><br />function move() {<br />if (ctnr[0].isChanging == false) {return;}<br /><br />setArrowOpacity();<br /><br />var scrollSide;<br />if (!params.vertical) {scrollSide = 'scrollLeft';}<br />else {scrollSide = 'scrollTop';}<br /><br />listctnr[0][scrollSide] += ctnr[0].direction * ctnr[0].speed;<br />ctnr[0].timer = setTimeout(function() {move();}, 50);<br />}<br /><br />if (params.rtl && !params.vertical) {<br />listctnr[0].scrollLeft = listctnr[0].scrollWidth - listctnr.width();<br />}<br /><br />ctnr<br />.mousemove(function(e) {checkMouse(e.pageX, e.pageY);})<br />.bind('mouseleave', function() {stopMoving();});<br /><br />this.startMoving = startMoving;<br />this.stopMoving = stopMoving;<br /><br />if (params.arrows && !params.fixedArrows) {<br />// Initialise arrow opacity<br />setArrowOpacity();<br />}<br />else {<br />// Hide arrows<br />$('.arrowleft, .arrowright, .arrowtop, .arrowbottom', ctnr).hide();<br />}<br />});<br /><br />return this;<br />};<br /><br />if (!$.fn.offset) {<br />$.fn.offset = function() {<br />this.left = this.top = 0;<br /><br />if (this[0] && this[0].offsetParent) {<br />var obj = this[0];<br />do {<br />this.left += obj.offsetLeft;<br />this.top += obj.offsetTop;<br />} while (obj = obj.offsetParent);<br />}<br /><br />return this;<br />}<br />}<br /><br />$.fn.hoverscroll.params = {<br />vertical: false, <br />width: 400,<br />height: 50, <br />arrows: true,<br />arrowsOpacity: 0.7, <br />fixedArrows: false, <br />rtl: false, <br />debug: false <br />};<br />$.log = function() {<br />try {console.log.apply(console, arguments);}<br />catch (e) {<br />try {opera.postError.apply(opera, arguments);}<br />catch (e) {}<br />}<br />};<br />})(jQuery);<br /><br />$(function(){<br />$("#videoslider-tabs a").click(function(){<br />var container = $("#videoslider-content");<br />container.html("<img src='http://3.bp.blogspot.com/-5iLHgsmg5gE/UjhXqejYSNI/AAAAAAAAD2Y/x5jtMwID_X4/s1600/loading.png' class='loading-vid' />");<br />var id = $(this).attr("href").slice(1);<br />loadvideo(id);<br />return false;<br />});<br />$("#videoslider-tabs").hoverscroll({vertical:true,width:300,height:330,arrows:false});<br />$("#videoslider-tabs li").hover(function(){$(this).addClass("hover");},function(){$(this).removeClass("hover");});<br />loadvideo();<br />});<br /><br />function loadvideo (hash){if(hash){hash = hash.slice(3);$("#videoslider-content").html(video[hash]);$("#videoslider-tabs li").removeClass("actVid");$("#videoslider-tabs a[href=#vid"+hash+"]").parent().addClass("actVid");}else{$("#videoslider-content").html(video[1]);$("#videoslider-tabs li").removeClass("actVid");$("#videoslider-tabs a[href=#vid1]").parent().addClass("actVid");}}<br />//]]><br /></script></div><br />Then add the styles before <b>]]></b:skin></b><br /><br /><blockquote class="tr_bq">/* Video Gallery for Blogger<br />----------------------------------------------- */<br />#videoslider {<br />background:#000; <span style="color: #6aa84f;">/* Background color */</span><br />clear:both;<br />margin:0 auto;<br />padding:5px;<br />width:765px;<br />border-radius: 5px;<br />-moz-background-clip: padding;<br />-webkit-background-clip: padding-box;<br />background-clip: padding-box;<br />}<br />#videoslider, #videoslider-content, #videoslider-tabs {height:350px;overflow:hidden;}<br />#videoslider-content {color:#fff;float:left;text-align:center;width:460px;z-index:1;}<br />.loading-vid {display:block;margin:165px auto 0;}<br />#videoslider-tabs {float:right;width:300px;margin:0;}<br />#videoslider-tabs li {background:url(http://2.bp.blogspot.com/-8Sc_tkZkXt8/UjhXqct9-xI/AAAAAAAAD2c/ch0OftBErXE/s1600/tab_backgr.jpeg) repeat-x top left;float:left;height:60px;padding:5px;width:290px;list-style:none;}<br />#videoslider-tabs li a {padding:0 !important;border:0 !important;}<br />#videoslider-tabs li.hover {background:#333;}<br />#videoslider-tabs li.actVid {background:#555;}<br />#videoslider-tabs li img.thumb-vid {background-color:#fff;float:left;height:52px;margin:0 8px 0 0;padding:5px;width:52px;}<br />#videoslider-tabs li span.vidTit {<br />display:block;<br />color:#CD332D; <span style="color: #6aa84f;">/* Titles color */</span><br />font-size:14px; <span style="color: #6aa84f;">/* Titles font size */</span><br />font-weight:bold;<br />text-decoration:none;<br />}<br />#videoslider-tabs li .vidDesc {<br />display:block;<br />color:#fff; <span style="color: #6aa84f;">/* Color of the description */</span><br />font-size:12px; <span style="color: #6aa84f;">/* Font size of the description */</span><br />font-weight:bold;<br />text-decoration:none;<br />}<br />#videoslider-tabs a {text-decoration:none;}<br />#videoslider-tabs li.actVid .vidDesc {color:#fff;}<br />.ui-widget-content{float:right;}<br />.tabs-outer {background-image: none !important;}<br />#videoslider-tabs li a:hover {background: none !important;}</blockquote>Now in a HTML/Javascript gadget paste the structure of the slider, this is the one you should put under the header:<br /><blockquote class="tr_bq"><script><br />var video = [];<br />video[1] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/<span style="color: #cc0000;"><b>video_ID_1</b></span>" frameborder="0" allowfullscreen></iframe>';<br />video[2] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/<span style="color: #cc0000;"><b>video_ID_2</b></span>" frameborder="0" allowfullscreen></iframe>';<br />video[3] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/<span style="color: #cc0000;"><b>video_ID_3</b></span>" frameborder="0" allowfullscreen></iframe>';<br />video[4] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/<span style="color: #cc0000;"><b>video_ID_4</b></span>" frameborder="0" allowfullscreen></iframe>';<br />video[5] = '<iframe width="460" height="345" src="http://www.youtube.com/embed/<span style="color: #cc0000;"><b>video_ID_5</b></span>" frameborder="0" allowfullscreen></iframe>';<br /></script><br /><div id="videoslider"><br /><div id="videoslider-content"></div><br /><ul id="videoslider-tabs"><br /><li><a href="#vid1"><img src="//i2.ytimg.com/vi/<span style="color: #cc0000;"><b>video_ID_1</b></span>/default.jpg" class="thumb-vid" /><span class="vidTit"><span style="color: #3d85c6;"><b>Video Name</b></span></span><span class="vidDesc"><span style="color: #3d85c6;"><b>Video Description</b></span></span></a></li><br /><br /><li><a href="#vid2"><img src="//i2.ytimg.com/vi/<span style="color: #cc0000;"><b>video_ID_2</b></span>/default.jpg" class="thumb-vid" /><span class="vidTit"><span style="color: #3d85c6;"><b>Video Name</b></span></span><span class="vidDesc"><span style="color: #3d85c6;"><b>Video Description</b></span></span></a></li><br /><br /><li><a href="#vid3"><img src="//i2.ytimg.com/vi/<span style="color: #cc0000;"><b>video_ID_3</b></span>/default.jpg" class="thumb-vid" /><span class="vidTit"><span style="color: #3d85c6;"><b>Video Name</b></span></span><span class="vidDesc"><span style="color: #3d85c6;"><b>Video Description</b></span></span></a></li><br /><br /><li><a href="#vid4"><img src="//i2.ytimg.com/vi/<span style="color: #cc0000;"><b>video_ID_4</b></span>/default.jpg" class="thumb-vid" /><span class="vidTit"><span style="color: #3d85c6;"><b>Video Name</b></span></span><span class="vidDesc"><span style="color: #3d85c6;"><b>Video Description</b></span></span></a></li><br /><br /><li><a href="#vid5"><img src="//i2.ytimg.com/vi/<span style="color: #cc0000;"><b>video_ID_5</b></span>/default.jpg" class="thumb-vid" /><span class="vidTit"><span style="color: #3d85c6;"><b>Video Name</b></span></span><span class="vidDesc"><span style="color: #3d85c6;"><b>Video Description</b></span></span></a></li><br /><br /></ul><br /></div></blockquote><br />Add the IDs of the videos, their names and their description and that's it. The description should be brief so you wont have space problems.<br />If you do not know how to get the ID of a video, then open the video on YouTube and look at the address bar... the last characters are the ID you need.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-J4Hy9-ujI84/Ujhx6GJk_EI/AAAAAAAAD2w/Pul_FwmAULs/s1600/add-youtube-playlist-to-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-J4Hy9-ujI84/Ujhx6GJk_EI/AAAAAAAAD2w/Pul_FwmAULs/s1600/add-youtube-playlist-to-blogger.png" /></a></div><br />Note that the ID of each video should be added two times, one is for displaying the video and one for the tabs thumbnail.<br /><br />As this gallery works with jQuery we should make sure to not repeat the version of the script if we already have jQuery.Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-155814941400142072013-09-12T07:27:00.000-07:002013-09-23T11:44:17.255-07:00Perlukah Jasa Update Status Mengelola Facebook Fanpage ?Jasa Update Status Mengelola Facebook FanpagePerlukah Jasa Update Status Mengelola Facebook Fanpage ? adalah sebuah pertanyaan yang sungguh perlu dan harus memiliki jawaban bagi setiap admin fanpage dari facebook, sebelum kita menjawab pertanyaan tadi maka saya akan membawa anda ke dalam pemahaman facebook fanpage. Siapa yang tidak kenal dengan Facebook, sebuah website yang termasuk dalam Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-88738344459012754582013-09-06T06:17:00.000-07:002013-09-23T11:44:17.270-07:00Jalantikus.com Download Game PC dan Android Gratis TerbaruJalantikus.com Download Game PC dan Android Gratis Terbaru dengan server lokal - Sebelum meranjak kepada topik utama saya akan menjelaskan sedikit tentang Internet, browsing, dan download. Internet sekarang menjadi sebuah kebutuhan bagi segelintir orang terutama bagi yang mereka melakukan bisnis yang mengandalkan internet. Internet digunakan oleh banyak orang untuk melakukan tindakan browsing danAnonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-83264325218887976022013-09-05T09:12:00.000-07:002013-09-23T11:41:54.035-07:00Making a gadget visible only to the blog administratorAnd the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to our blog readers, perhaps a Survey already ended that we want to keep, a counter, or any gadget that while we customize, we don't want anyone else to see until the final result is ready.<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-euOwT9PADmQ/UiixTkYpvWI/AAAAAAAAD1A/QaPWiB0FyM4/s1600/blogger_widgets_visible_only_to_admin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger widgets, blogger tutorials" border="0" src="http://3.bp.blogspot.com/-euOwT9PADmQ/UiixTkYpvWI/AAAAAAAAD1A/QaPWiB0FyM4/s1600/blogger_widgets_visible_only_to_admin.jpg" title="Make a blogger widget visible only to admin " /></a></div> The procedure is simple, we just have to add two lines to our gadget that we want to hide.<br /><br />First thing to do is to go to <b>Template > Edit HTML</b> and then search for the gadget's code we want to hide. It will be easier using the CTRL + F keys and locating the name of the gadget/widget.<br /><br />For example, in a HTML/Javascript gadget, we will see a code like this:<br /><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='' type='HTML'><br /><b:includable id='main'><br /><span style="color: #cc0000;"><span class='item-control blog-admin'></span><br /><!-- only display title if it's non-empty --><br /><b:if cond='data:title != &quot;&quot;'><br /><h2 class='title'><data:title/></h2><br /></b:if><br /><div class='widget-content'><br /><data:content/><br /></div><br /><br /><b:include name='quickedit'/><br /><span style="color: #cc0000;"></span></span><br /></b:includable><br /></b:widget></blockquote>All you have to do is add the parts in red and ready. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.<br /><br />Not all gadgets have the same structure like in my example, but it will be easier to guide you, just place the first code in red <u>just after</u> <b><b:includable id='main'></b><br /><br />And the second red code <u>just before</u> <b></b:includable></b><br /><b>Note: </b>to look inside the widget's code, click on the sideways arrow next to the widget's id.<br /><br />And with that the gadget will be hidden for readers except you.Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-23704327953121974082013-09-04T11:58:00.000-07:002013-09-23T11:41:54.046-07:00Upload images and get the URL of the imageAs each day there are lots of new users joining the world of blogging, is necessary to discuss about some basic topics that bring up some recurring questions such as<b> how we could get the URL of an image</b>?<br /><br />On the Internet there are many both free as well as paid web hosting where we can <b>host images</b>, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.<br /><br />The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the <b>New post</b> button. And preferably from the <b>Edit HTML</b> tab, click on the image icon. <br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-sDuFAPpz6H0/Uid2-QZbafI/AAAAAAAADzQ/NgUEurM58o0/s1600/upload-image-on-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-sDuFAPpz6H0/Uid2-QZbafI/AAAAAAAADzQ/NgUEurM58o0/s1600/upload-image-on-blogger-blogspot.png" /></a></div><br />A pop-up window will open, then click on the <b>Choose files</b> button, browse for your image(s), double click or click on <b>Open </b>and then hit <b>Add selected</b>. <br /><br />When you have uploaded you will see that in the post editor shows the code of the image.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-vV0wlDgqmhU/Uid45Cu3RvI/AAAAAAAADzs/TYt_bSC5HRg/s1600/upload-image-on-blogger-blogspot1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-vV0wlDgqmhU/Uid45Cu3RvI/AAAAAAAADzs/TYt_bSC5HRg/s1600/upload-image-on-blogger-blogspot1.png" /></a></div><br />That code is the URL of the image. You'll see two URLs (Web addresses):<br /><blockquote class="tr_bq"><a href="<span style="color: blue;">http://1.bp.blogspot.com/-dmCxXMKIIa0/Uid4grOEDSI/AAAAAAAADzk/nhzmCUTJhZs/s1600/Bliss-Windows-XP.png</span>" imageanchor="1"><img border="0" src="http://1.bp.blogspot.com/-dmCxXMKIIa0/Uid4grOEDSI/AAAAAAAADzk/nhzmCUTJhZs/s320/Bliss-Windows-XP.png" /></a></blockquote><br />The first is the URL of the image that you need to take. It is not necessary to publish this entry where you uploaded the picture, you could as well not publish it, leave it as a draft or delete it, the image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the image to remove). You could also upload image directly from Picasa. Just login to <a href="https://picasaweb.google.com/home" rel="nofollow">PicasaWeb</a>, select the album where you want to host the image, and click on <b>Add photos</b>.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-OClF6P8YEvQ/Uid7K3bgctI/AAAAAAAADz4/Tjm8uAFYj3k/s1600/upload-pictures-on-picasaweb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-OClF6P8YEvQ/Uid7K3bgctI/AAAAAAAADz4/Tjm8uAFYj3k/s1600/upload-pictures-on-picasaweb.png" /></a></div><br />Select the image from your computer and upload it.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-cTq4t99a-0E/Uid7g-Pmh6I/AAAAAAAAD0A/eSgrRRujSG4/s1600/upload-pictures-on-picasaweb1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-cTq4t99a-0E/Uid7g-Pmh6I/AAAAAAAAD0A/eSgrRRujSG4/s1600/upload-pictures-on-picasaweb1.png" /></a></div><br />After we have uploaded, click on <b>OK</b>.<br /><br />There you will see the thumbnail, along with other photos, if there are more.<br /><br />If you want to get the URL of the image from Picasa then click on the image to open in full size. <br />With the right mouse button click on the picture and select option depending on the browser you use...<br /><br />If using <b>Google Chrome</b>, then select <b>Copy Image URL</b>:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-VA5LQDhcwgY/UieBKEfhk-I/AAAAAAAAD0w/ADObqyv1sKk/s1600/how-to-get-image-url-address-on-google-chrome.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-VA5LQDhcwgY/UieBKEfhk-I/AAAAAAAAD0w/ADObqyv1sKk/s1600/how-to-get-image-url-address-on-google-chrome.png" /></a></div><br />If you are using <b>Mozilla Firefox</b> select <b>Copy Image Location</b>:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-Vtyrg97s_Vk/UieA21AbyhI/AAAAAAAAD0o/Jj4s1BOZBU0/s1600/how-to-get-the-url-address-of-an-image-on-mozilla-firefox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-Vtyrg97s_Vk/UieA21AbyhI/AAAAAAAAD0o/Jj4s1BOZBU0/s1600/how-to-get-the-url-address-of-an-image-on-mozilla-firefox.png" /></a></div><br />If you are using <b>Opera </b>select <b>Copy Image URL</b>:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-cslKV0mvYR8/UieAWHviRnI/AAAAAAAAD0Y/_dnhyXalpn0/s1600/how-to-get-image-url-address-on-opera.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-cslKV0mvYR8/UieAWHviRnI/AAAAAAAAD0Y/_dnhyXalpn0/s1600/how-to-get-image-url-address-on-opera.png" /></a></div><br />If you are using <b>Safari </b>select<b> Copy Image Address</b>:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-SsFW2C2WE1Q/UieAjrs-FDI/AAAAAAAAD0g/FRCsjDIwTP4/s1600/how-to-get-image-url-address-on-safari.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-SsFW2C2WE1Q/UieAjrs-FDI/AAAAAAAAD0g/FRCsjDIwTP4/s1600/how-to-get-image-url-address-on-safari.png" /></a></div><br />If you are using <b>Internet Explorer</b> (I hope not), first select <b>Properties</b>, a window will open, there you will find the Address section from where you can select the URL of the image and copy it:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-Mu8oSH24S7g/Uid_NxpjrSI/AAAAAAAAD0M/JzZ9VOfykmY/s1600/how-to-get-the-url-address-of-an-image-on-internet-explorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-Mu8oSH24S7g/Uid_NxpjrSI/AAAAAAAAD0M/JzZ9VOfykmY/s320/how-to-get-the-url-address-of-an-image-on-internet-explorer.png" width="260" /></a></div><br />Having selected any of these options you'll have in the clipboard the URL of the image. Simple isn't it?<br /><br />Remember that all images you upload on Blogger are stored in your Picasa account, so if you find an image previously uploaded to your blog, go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The procedure to obtain the URL of the image is the same as explained above.Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-8728722054317623122013-09-04T06:20:00.000-07:002013-09-23T11:44:17.289-07:00Beli Cireng Bandung Online di Cirenglugina.comBeli Cireng Bandung Online di Cirenglugina.com - Cireng merupakan sejenis makanan ringan yang terkategorikan makanan tradisional. Pada tahun 1980-an jajanan ini melejit dipasaran terutama didaerah sunda sehingga disetiap dagangan gorengan selalu tersajikan cireng tersebut disamping gehu, bala-bala, pisang goreng, dan gorengan lezat lainnya.<br /><br />Makanan ini populer didaerah sunda, namun untuk daerah Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-41382643417350981072013-09-03T06:15:00.000-07:002013-09-23T11:41:54.057-07:00Possibly the most simple jQuery SliderDo you have jQuery in your blog and space to insert 10 lines of code? If the answer is yes and you also want to have an automatic slideshow, this is the simplest code I've seen so far.<br /><br />That code having a succession of simple images placed inside a box with a common general container would give this result:<br /><script type="text/javascript">//<![CDATA[ $(function(){ $('#slider div:gt(0)').hide(); setInterval(function(){ $('#slider div:first-child').fadeOut(0) .next('div').fadeIn(1000) .end().appendTo('#slider');}, 4000); }); //]]></script> <script type="text/javascript">//<![CDATA[ $(function(){ $('#slider1 div:gt(0)').hide(); setInterval(function(){ $('#slider1 div:first-child').fadeOut(0) .next('div').fadeIn(1000) .end().appendTo('#slider1');}, 4000); }); //]]></script> <style> #slider { overflow: hidden; width: 600px; height: 400px; margin: 0 auto; padding: 0; position: relative; } #slider > div { position:absolute; top:0; left:0; } #slider img { width:100%; min-height:400px; margin:0; padding:0; border:0; } </style><br /><div id="slider"><div><img src="http://4.bp.blogspot.com/-TIl7LiJYgLk/UiT-GlUZZQI/AAAAAAAADy0/0AXlV18jI1g/s1600/african-lions-tanzania_25990_600x450.jpg" /></div><div><img src="http://3.bp.blogspot.com/-q8CIGgEXkBY/UiT-GghGcGI/AAAAAAAADy4/ABlqAJNTfHQ/s1600/beautiful-photography-random-sweet-Favim.com-676597_large.jpg" /></div><div><img src="http://1.bp.blogspot.com/-rAha-ONj8iY/UiT-Goj_oxI/AAAAAAAADyw/0cH7oUY4dhU/s1600/beautiful-photography-tree-Favim.com-459078_large.jpg" /></div></div><br /><b><span style="color: #0b5394;">1. Adding the JavaScript</span></b><br /><br />If you do not have jQuery, then you should add this line just after <span style="color: #990000;">]]></b:skin></span> to load this popular slideshow:<br /><blockquote><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/></blockquote><br />Once confident that we have the library in our template, we need to add the same line to make the series of images function as a slider:<br /><blockquote class="tr_bq"><script type="text/javascript">//<![CDATA[<br />$(function(){<br /> $('#slider div:gt(0)').hide();<br /> setInterval(function(){<br /> $('#slider div:first-child').fadeOut(0)<br /> .next('div').fadeIn(1000)<br /> .end().appendTo('#slider');}, 4000);<br />});<br />//]]></script></blockquote><br />We can save changes to the template because that is all. It is simple but you will see that it works and does what it has to do. Now we just have to put the images where we want to display, in the manner discussed below.<br /><br /><span style="color: #0b5394;"><b>2. Create the slider</b></span><br /><br />After adding the codes above in our template (although you could add it directly into a gadget, on a page or even in an entry as you see here) we can create a viewer as you saw above. We just have to use this HTML structure below to add the images:<br /><blockquote class="tr_bq"><div id="slider"><br /> <div><img src="<span style="color: blue;">IMAGE_URL</span>"/></div><br /> <div><img src="<span style="color: blue;">IMAGE_URL</span>"/></div><br /> <div><img src="<span style="color: blue;">IMAGE_URL</span>"/></div><br /></div></blockquote><br />I do not know how you see it but it is all you need.<br /><br />For me this is quite lightweight and efficient, much more than most libraries that are used perhaps too often.<br /><br /><h4><span style="color: #0b5394;">Settings</span></h4><br />The last three numbers of the plugin allow us to adjust some things. All are expressed in milliseconds (4000 = 4 seconds)<br /><br />fadeOut(<span style="color: #0b5394;">0</span>): Time for the outgoing image <br />fadeIn(<span style="color: #0b5394;">1000</span>): Time for the next image<br />('#slider');},<span style="color: #0b5394;">4000</span>): Time spent in each image<br /><br /><h4><span style="color: #0b5394;">How it Works</span></h4><br />And for the curious who want to learn things...<br /><br /><span style="color: #990000;">$('#slider div:gt(0)').hide();</span><br />With<span style="color: #134f5c;"> <span style="color: #990000;">gt(x)</span></span><span style="color: #990000;"> </span>we select all the <span style="color: #0b5394;">div</span>s from number x. In this case 0 is the first, so what we do with this line is to hide (<span style="color: #990000;">hide</span>) all the boxes except the first, which will be the image visible initially.<br /><br /><span style="color: #990000;">setInterval(function(){ [<span style="color: #0b5394;">what we will do</span>] }, 4000);</span><br />We need to reiterate a few things from time to time and we do with<span style="color: #134f5c;"> <span style="color: #990000;">setInterval</span></span>, indicating the delay time between each set.<br /><br /><span style="color: #990000;">$('#slider div:first-child').fadeOut(0)</span><br />Within each of these intervals we remove (<span style="color: #990000;">fadeOut</span>) the first box (<span style="color: #990000;">div:first-child</span>) that is in the relationship of images...<br /><br /><span style="color: #990000;">.next('div').fadeIn(1000)</span><br />...and we make the following box (<span style="color: #990000;">next</span>) appearing gradually (<span style="color: #990000;">fadeIn</span>).<br /><br /><span style="color: #990000;">.end().appendTo('#slider');</span><br />Finally we have the first image and place it at the end<span style="color: #134f5c;"> </span>(<span style="color: #990000;">appendTo</span>) of the "list".<br /><br /><span style="color: #134f5c;"><span style="color: #990000;">end()</span> </span>resets the count of elements that we move forward with <span style="color: #990000;">next()</span>. Thus, the first child made earlier to disappear is the one we sent down the stack and not the image that is now visible.<br /><br /><h3><span style="color: #0b5394;">Variants and customization</span></h3><br />As you have seen CSS is not necessary for the slider to work, but using it we can change its look, allow the use of images of different sizes, include labels and even improve the transition. Here are some ideas.<br /><style> #slider1 { overflow: hidden; width: 500px; height: 300px; border:3px solid #B8B8B8; border-radius: 40px; margin: 0 auto; padding: 0; position: relative; } #slider1 > div { position:absolute; top:0; left:0; } #slider1 img { width:100%; min-height:300px; margin:0; padding:0; border:0; } #slider1 p{ position: absolute; bottom: 30px; left: 0; display: block; width: 400px; height: 24px; margin:0; padding: 5px 0; color: #eee; background: #990000; font-size: 22px; line-height:22px; text-align:center; } </style> <br /><div id="slider1"><div><img src="http://4.bp.blogspot.com/-TIl7LiJYgLk/UiT-GlUZZQI/AAAAAAAADy0/0AXlV18jI1g/s1600/african-lions-tanzania_25990_600x450.jpg" /><br /><p>DEMO TEXT1</p></div><div><img src="http://3.bp.blogspot.com/-q8CIGgEXkBY/UiT-GghGcGI/AAAAAAAADy4/ABlqAJNTfHQ/s1600/beautiful-photography-random-sweet-Favim.com-676597_large.jpg" /><br /><p>DEMO TEXT2</p></div><div><img src="http://1.bp.blogspot.com/-rAha-ONj8iY/UiT-Goj_oxI/AAAAAAAADyw/0cH7oUY4dhU/s1600/beautiful-photography-tree-Favim.com-459078_large.jpg" /><br /><p>DEMO TEXT3</p></div></div><br /><br />We can limit the overall container size and prevent overflow for larger images. And then we will put rounded corners, border and then center them. <br /><blockquote class="tr_bq">#slider { <br />overflow: hidden;<br />width: 500px; <br />height: 300px; <br />border:3px solid #b8b8b8;<br />border-radius: 40px;<br />margin: 0 auto;<br />padding: 0;<br />position: relative;<br />}</blockquote><br />If we place the parent boxes of the images absolutely with respect to the general container (for that we put before the <span style="color: #990000;">relative</span>), these will overlap each other. In this way the <span style="color: #990000;">fadeOut</span> may give them some time to be "visible" (we changed 0 to 1000) and a smoother transition between images. The mixture of images is produced in the second demo.<br /><br />In the images, the<span style="color: #134f5c;"> <span style="color: #990000;">max-width</span></span> serves us to always take up the entire width and <span style="color: #990000;">min-height </span>so that even if they are distorted, there will remain no space below when they are less than 300px.<br /><blockquote class="tr_bq">#slider > div {<br />position:absolute;<br />top:0;<br />left:0;<br />}<br />#slider img {<br />width:100%;<br />min-height:300px;<br />margin:0;<br />padding:0; <br />border:0;<br />}</blockquote><br />And if we add other elements on the images (in this example a text), we'll just label them with a <span style="color: #990000;">span</span> or paragraph (<span style="color: #990000;">p</span>) and position them in the CSS in an absolute manner, placing them in the exact place where we want with top/bottom - left/right.<br /><blockquote class="tr_bq">#slider p {<br />position: absolute;<br />bottom: 30px;<br />left: 0;<br />display: block;<br />width: 400px;<br />height: 24px;<br />margin:0;<br />padding: 5px 0;<br />color: #eee;<br />background: #990000;<br />font-size: 22px;<br />line-height:22px;<br />text-align:center;<br />}</blockquote><br />The markup in the HTML for this last, includes also a link to the image, so it would be like this:<br /><blockquote class="tr_bq"><div id="slider"><br /><div><a href="<span style="color: blue;">Link_URL1</span>"><img src="<span style="color: blue;">Image_URL1</span>" /></a><p>TEXT1</p></div><br /><div><a href="<span style="color: blue;">Link_URL2</span>"><img src="<span style="color: blue;">Image_URL2</span>" /></a><p>TEXT2</p></div><br /><div><a href="<span style="color: blue;">Link_URL3</span>"><img src="<span style="color: blue;">Image_URL3</span>" /></a><p>TEXT3</p></div><br /></div></blockquote><br />Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-80245776560716582202013-08-22T15:38:00.000-07:002013-08-23T12:33:12.132-07:00how to write attractive headlines<div dir="ltr" style="text-align: left;" trbidi="on">Learning How to write headlines isn't that difficult, especially if you know the basics to what grabs the consumer's minds into reading what you wrote. <br /><br />Whether it's for a sales page, article, or your website, it's vital that your headlines are eye catching, interesting, and contain the something that makes them read the rest. <br /><br />How to write headlines <br /><br />Explain what you have to offer through curiosity <br /><br />Many people are able to write powerful sales pages because their headlines grab people by the gut. <br /><br />For those make money products, they always try to add the hook "Find out how an old man made over $130,000 in one year from home". <br /><br />This is how curiosity works, and if you can push some small little buttons on the headline, you can expect for your readers to climb down the article. <br /><br />Curiosity is what pulls people in to read the rest of the article o the sales page, so keep this part as interesting as possible. <br /><br />Use a HOW TO Headline <br /><br />A How To headline for an article shows the reader that he or she is going to learn something. <br /><br />Many people usually want to learn How To do something by going online, and if you provide for them an interesting headline with these two words, it'll pull people in to actually reading the article or the blog post. <br /><br />The headlines are extremely important to write. They need to be created perfectly, formatted nicely, and they also need to be completely grammar free. <br /><br />When they aren't grammar free, people will think that the rest of the sales page or the article is badly written. <br /><br />The headline is what catches people attention, and it's what makes you look like a real professional. The tips above are definitely going to be helpful, and implementing them in your headlines will surely boost more readers. </div>Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-67299453126638557792013-08-15T12:07:00.000-07:002013-08-23T12:33:12.151-07:00cara buat toko online pada tripleclicks atau ECA store <div dir="ltr" style="text-align: left;" trbidi="on">Cara membuat toko online pada tripleclicks.com atau lebih dikenal ECA store. Sebelumnya saya jelaskan dulu sedikit tentang tripleclicks.com. website ini adalah bagian dari sfimg.com sfi adalah singkatan six figure income. Dengan menjadi member sfi anda bisa mendapatkan penghasilan ganda dari referral dan dari toko online yang anda buat di tripleclicks. Anda juga bisa hanya menjadi member tripleclicks saja untuk membuat toko online. <br /><br />Metode pembayaran dengan paypal atau credit card. Tripleclicks sendiri mempunyai jutaan member diseluruh dunia. Kebanyakan member tripleclicks adalah member sfi juga. <br /><br />Nah sekarang mari kita mulai pelajaran kita………… <br /><br />Langkah pertama<br /><br />Buka link ini <a href="http://www.tripleclicks.com/12807101/ECA" target="_blank"><b>tripleclicks.com</b></a> anda akan melihat tampilan sebagai berikut<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-TwJQhuQNWQo/Ug0jpvp6J5I/AAAAAAAAALw/uAJielXkM1Q/s1600/triple.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="337" src="http://1.bp.blogspot.com/-TwJQhuQNWQo/Ug0jpvp6J5I/AAAAAAAAALw/uAJielXkM1Q/s640/triple.JPG" width="640" /></a></div> kemudian klik sign up here. setelah anda klik anda akan menuju halaman aplikasi silahkan perhatikan<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-WjEEmWuD1os/Ug0kOyTmWMI/AAAAAAAAAL4/5rC7FKw69uE/s1600/apli+1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="http://4.bp.blogspot.com/-WjEEmWuD1os/Ug0kOyTmWMI/AAAAAAAAAL4/5rC7FKw69uE/s640/apli+1.JPG" width="640" /></a></div>maaf untuk untuk country anda ganti dengan<i> Indonesia</i><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/-WRz0ZLpLf94/Ug0kja-JIbI/AAAAAAAAAMA/Jzn8Ze8s-7I/s1600/apli+2.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="388" src="http://2.bp.blogspot.com/-WRz0ZLpLf94/Ug0kja-JIbI/AAAAAAAAAMA/Jzn8Ze8s-7I/s640/apli+2.JPG" width="640" /></a></div>pada pertanyaan do you have physical store? jawab ya jika anda punya toko di dunia nyata jawab no jika tidak.<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-zutwkS3ECrI/Ug0k6qpsL0I/AAAAAAAAAMI/aWG8sInbB0w/s1600/apli+3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="368" src="http://3.bp.blogspot.com/-zutwkS3ECrI/Ug0k6qpsL0I/AAAAAAAAAMI/aWG8sInbB0w/s640/apli+3.JPG" width="640" /></a></div>setelah selesai semua klik coninue anda akan mengarah ke halaman aggreement ( persetujuan)<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/-BY2yqIkDhrM/Ug0lgLvbVdI/AAAAAAAAAMQ/FiJfsGrxTKI/s1600/agree.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="248" src="http://1.bp.blogspot.com/-BY2yqIkDhrM/Ug0lgLvbVdI/AAAAAAAAAMQ/FiJfsGrxTKI/s640/agree.JPG" width="640" /></a></div>klik saja agree dan continue<br />anda akan menuju halaman upload KTP anda yang sudah di scan dan tagihan listrik atau telepon yang nama dan alamatnya sesuai dengan KTP anda. jika tidak sesuai anda bisa menggunakan NPWP anda yang di scan.<br /><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-Gg3SWT7_dz0/Ug0mGL1bWKI/AAAAAAAAAMY/00FJXhevq9Q/s1600/upload.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="http://4.bp.blogspot.com/-Gg3SWT7_dz0/Ug0mGL1bWKI/AAAAAAAAAMY/00FJXhevq9Q/s640/upload.JPG" width="640" /></a></div>klik browse dan cari file KTP dan tagihan listrik/telepone atau NPWP anda<br />setelah semua di upload akan kelihatan hasil uploadan anda setelah itu selesai dan click continue setelah semua selesai anda tinggal menunggu persetujuan kira-kira 2 atau tiga hari. selamat mencoba <br /><br /><br /></div>Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-9412294191902530362013-08-14T14:38:00.000-07:002013-08-23T12:33:12.170-07:00Effective Business Txt Messaging Tips That Will Help Explode Your OrganizationIn any kind of business or enterprise, the importance of effective communication is not underestimated and it’s correct to assume that it contributes straight away to the achievements of the business. Without proper communication within a business, co-ordination of activities becomes impossible and so slows or hinders the entire process of production. <br /><br />The emergence in the internet has quickly wiped the standard postal mails which for years were the preferred mode of communication. The online world provides a provision for emails which have quickly rose more and more almost the de facto mode of communication nowadays by every other business; but emails will also be slow and therefore many organisations have now use an efficient means of sending messages across their organization named business texting. <br /><br />One of many factors which have renedered business text messaging so well received lately is the fact virtually every person carries a mobile gadget and unlike computers phones are easily portable thus making it simpler to supply a message instantly as many people carry their devices everywhere they're going. Thus, when you are the boss and you want to summon your team for a meeting it makes the task easier and intensely effective. Another huge competitive advantage that business texts has over email or any other means of business communication is it’s real-time. The ability of mobile gadgets and smart phones to deliver notifications and alert you any time you get a new message allows for real-time delivery of messages thus easing communication. <br /><br />Thus, incorporating business texting as part of your organization not only provides you with competitive advantage but in addition ensures efficiency. But as much as they are effective, sms messages can be very sensitive when used inappropriately. Below are 5 quick good ideas to effectively implement business text messaging to help you achieve optimum results; <br /><br />I. Use the right language: When sending a business text message, be sure you take advantage of the right official language rather than to address your customers or employees much like your friends. Using proper correct English is one of the ways of utilizing the right language in running a business text messaging. <br /><br />II. Proper timing is necessary: Which means you can't send a business text message in the middle of the evening because it is not just rude but your message can be ineffective. A business message isn't a social conversation so keep your timing inside the stipulated business hours whenever necessary. Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-51033873832746306902013-08-11T20:32:00.000-07:002013-09-23T11:44:17.323-07:00Jasa Like Facebook Fanpage Murah - Menambah Like TertargetAnda Seorang Pemilik atau Owner di sebuah Fanpage Facebook ? Anda Ingin Memasarkan Produk di Fanpage anda dan anda ingin produk yang di pasarkan dapat diketahui orang banyak ? Kami beri Solusi atas pertanyaan anda di artikel berjudul Jasa Like Facebook Fanpage Murah - Menambah Like Tertarget.<br />Fanpage Facebook adalah sebuah fasilitas yang diberikan facebook terhadap penggunanya untuk memiliki Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-42912813606241300512013-08-11T12:04:00.000-07:002013-08-23T12:33:12.183-07:005 Tips To Writing Better Copy<div dir="ltr" style="text-align: left;" trbidi="on">Writing web copy for your website is an important part to make sure that you educate your readers to the extent that they can possibly buy something from you or join your list. <br /><br />Writing better copy than you normally can could help tremendously when you're trying to get sales and develop yourself as an expert. If you need some instant help, here's 5 tips to writing better copy. <br /><br />1. Proofread <br /><br />Proofreading your work can help a lot with your success at writing good copy. Most people tend write good articles with the best content, but they don't really know how to write grammar free. <br /><br />2. Proofread outloud <br /><br />Proofreading outloud is often thought of as weird and useless. You can actually capture up to 70% more of your mistakes when you proofread your articles outloud. <br /><div class="separator" style="clear: both; text-align: center;"><a href="http://bc5f8655ec0d8ce3b16c-67245749e7a5dacabb139b9ac5e160a3.r91.cf3.rackcdn.com/Stock_export_4--2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="writing" border="0" height="228" src="http://bc5f8655ec0d8ce3b16c-67245749e7a5dacabb139b9ac5e160a3.r91.cf3.rackcdn.com/Stock_export_4--2.jpg" title="writing" width="320" /></a></div> <br />3. Explain how it can help them <br /><br />People just want to find something that will help them, and when you're writing web copy, you need to make sure that you tell them how this service or product is going to *help* them. <br /><br />When you explain everything in a concise and powerful manner, they will respond better to what you're trying to offer. <br /><br />4. Format (but not always) <br /><br />Formatting is a great way to get your copy done quickly and almost instantly. The only problem that you may experience is that not formatting your articles may give you better ideas than you thought. <br /><br />So, make sure to format your web copy, but don't format everything all the time so you can let your natural words flow through. <br /><br />5. Read sales pages <br /><br />When you read other convincing sales pages of other products, try looking at the way the copy was written. Pay attention to the detail as to how they deliver what the product is offering. <br /><br />These 5 tips to writing better copy are extremely effective. Each one can be done and followed, and following them in your writing can make you a better writer than you thought. <br /><br /></div>Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-24686365683624094162013-08-10T23:52:00.000-07:002013-09-23T11:44:17.349-07:00GSMLokal | Portal Berita Teknologi TerbaruSaya baru saja pulang mudik terasa cape namun rasa cape tersebut tidak menghalangi saya untuk membuat post yang memiliki tema review yang berjudul GSMLokal | Portal Berita Teknologi Terbaru . Sebenarnya saya sudah ada rencana hengkang dari blog kesiangansekolah.blogspot.com dan ingin menjualnya karena blog ini adalah blog gagal menurut saya tetapi saya melihat ada kabar kontes pada grup DBP maka Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0tag:blogger.com,1999:blog-2363566715001664128.post-39320124321852281132013-08-06T07:04:00.000-07:002013-09-23T11:51:12.628-07:00Panduan Membuat Website Gratis<br /> Setelah kemaren saya melakukan uji coba dengan membuat sebuah website yang sederhana dan akhirnya berhasil maka dari pengalaman saya tersebut, pada kesempatan ini saya akan berbagi sedikit cara membuat sebuah situs web gratis. <br /><br /> Website dan Blog sebenarnya memiliki kesamaan dalam proses pembuatan dan memanajemennya, yang membedakan adalah nama domain saja, jika situs dengan domain blogspot Anonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0Indonesia-6.3550565999999993 106.88594369999998-37.2339076 65.577349699999985 24.5237944 148.19453769999998tag:blogger.com,1999:blog-2363566715001664128.post-46299538818403006612013-08-06T05:06:00.000-07:002013-09-23T11:44:17.373-07:00Tempat Beli Komputer Laptop Online TerpercayaSelamat datang di blog kami, langsung saja ke topik. Tempat beli Komputer laptop Online terpercaya dimana sih ? Masih bingung mba/mas ? Dijaman era modern dan canggih seperti ini kebutuhan akan laptop sangat diperlukan. Semisal laptop dibutuhkan untuk menyimpan berbagai data dan tempat bekerja para blogger , misalkan anda seorang blogger yang kerjaannya menulis dan mengatur blog maupun websitenyaAnonymoushttp://www.blogger.com/profile/02922861827431415498noreply@blogger.com0