Tampilkan postingan dengan label HTML element. Tampilkan semua postingan
Tampilkan postingan dengan label HTML element. Tampilkan semua postingan

Jumat

iFrame “Auto Height” dengan Jquery



Dalam tag tidak berlaku untuk elemen style=”height:100%” melainkan yang bisa berlaku hanya style=”width:100%”. Untuk membuatnya menjadi auto height 100% bisa menggunakan jQuery Jadi berapapun ukuran iframe akan tetap menyesuaikan secara otomatis, sehingga seolah-seolah tidak memakai iframe.



Caranya :

- masukkan jQuery library, terserah pakai yang versi keberapa

<script type="text/javascript" src="jquery-1.6.2.js"></script>



- masukkan jQuery buat auto height iframe

<script type="text/javascript" src="https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.iframe-auto-height.js"></script>



- masukkan script iframe, untuk jQuery ini akan otomatis mendeteksi semua iframe menjadi auto height

<iframe src="iframe.html" width="100%" scrolling="no" frameborder="0"></iframe>





- masukkan fungsi javascript iframe autoheight

<script type="text/javascript">
jQuery('iframe').iframeAutoHeight();
</script>



- Simpan dan lihat hasilnya



Download Script Lengkap



Source Script : https://github.com/house9/jquery-iframe-auto-height






at Tidak ada komentar:
Labels: , , , , , , ,

JS Quicktags : alexking.org


JS Quicktags


I’ve released the JavaScript Quicktags used in Tasks Pro™, Tasks and WordPress under the LGPL license.

This is a set of buttons that allow you to insert HTML tags into a content area. The tags are cursor aware – placed around a selection or at the cursor position. This is also an example of how to get the cursor position with JavaScript.


Example Page


A sample insertAtCursor function:


function insertAtCursor(myField, myValue) {
  //IE support
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
  }
  //MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
                  + myValue 
                  + myField.value.substring(endPos, myField.value.length);
  } else {
    myField.value += myValue;
  }
}

// calling the function

insertAtCursor(document.formName.fieldName, 'this value');









JS Quicktags : alexking.org: JS Quicktags






at Tidak ada komentar:
Labels: , , , , , , ,

Minggu

Manually adding a Disqus gadget to Blogg






If the Disqus gadget installer isn't working, you have the option of manually installing the gadget on your Blogger site. This will require editing your Blogger template HTML, so it won't work with Dynamic Views templates.



 Add a new gadget




  1. Go to your Blogger "Layout" section and click Add a gadget in the sidebar




  2. In the Add a Gadget popup, scroll down to find the HTML/Javascript gadget and click the + button




  3. Enter Disqus as the title and the following code for the content:

    <!-- Disqus comments gadget -->


  4. Click save and the window will close

  5. Click Save arrangement in the Layout viewer





Add the Disqus code to your template





  1. Go to your blog's Template section and then click the "Edit template" button



    Edit template button within Blogger template editor

  2. Click inside the text area and search for the widget you just created in your HTML template by pressing Ctrl-F (Command-F on OSX) then typing Disqus. You should find the following line:

    <b:widget id='HTML1' locked='false' title='Disqus' type='HTML'>


  3. Change that line to add mobile='yes' to load Disqus on your mobile template. It will look like this when you're done:

    <b:widget id='HTML1' locked='false' mobile='yes' title='Disqus' type='HTML'>


  4. Below that locate and DELETE the following code right before the closing tag. The section you're deleting should look like this:

    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>
      <b:include name='quickedit'/>
    </b:includable>


  5. BEFORE the closing </b:widget> tag, add the following Disqus code (remember to change EXAMPLE to your site's shortname – you should leave both '&#39;' characters on either side of the shortname):

    <b:includable id='main'>
                <script type='text/javascript'>
                    var disqus_shortname = &#39;EXAMPLE&#39;;
                    var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;

                    if (!disqus_blogger_current_url.length) {
                        disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                    }

                    var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                    var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
                </script>

                <b:if cond='data:blog.pageType == &quot;item&quot;'>
                    <style type='text/css'>
                        #comments {display:none;}
                    </style>

                    <script type='text/javascript'>
                        (function() {
                            var bloggerjs = document.createElement(&#39;script&#39;);
                            bloggerjs.type = &#39;text/javascript&#39;;
                            bloggerjs.async = true;
                            bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_item.js&#39;;
                            (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
                        })();

                    </script>
                </b:if>
                    <style type='text/css'>
                        .post-comment-link { visibility: hidden; }
                    </style>

                    <script type='text/javascript'>
                    (function() {
                        var bloggerjs = document.createElement(&#39;script&#39;);
                        bloggerjs.type = &#39;text/javascript&#39;;
                        bloggerjs.async = true;
                        bloggerjs.src = &#39;http://&#39;+disqus_shortname+&#39;.disqus.com/blogger_index.js&#39;;
                        (document.getElementsByTagName(&#39;head&#39;)[0] || document.getElementsByTagName(&#39;body&#39;)[0]).appendChild(bloggerjs);
                    })();

                </script>
    </b:includable>


  6. Click Save template. Assuming there are no errors, Disqus should properly show up on your site now.

  7. (Optional) Verify that the meta tags in your Blogger Template do not force Internet Explorer to load using IE7 standards. For more information see Troubleshooting Disqus in Internet Explorer 8/9/10









at Tidak ada komentar:
Labels: , , , , , , ,

Selasa

How To Add Scrolling Sticky Bar To Blogger?

On-Scroll Sticky Bar. A simple widget which appears in the upper part of your page as you scroll down and disappears again on reaching the top something similar to the Facebook header bar. It contains social sharing options as well as links to Home Page of your blog. Also present are the Slide to Top and Email subscribe options. This can be easily customized to include options according to your needs. Lets get started and see how to add it in your blog !

To add to sticky bar I will recommend you to use old blogger user interface because as per widget author it throws an unexpected error,you can switch back to old blogger interface by clicking on the Settings Wheel icon at top right of your new blogger dashboard.



Demo.
You can see the live demo on this very page itself ! Please scrool to  down this page, you can see it.



sticky header bar
 



How To Add Scrolling Sticky Bar To Blogger? Please follow the step by step below:


Steps 1 : Adding CSS code The Bar Styles



  1. Go to Blogger Dashboard and open up the Design Tab of the blog in which you want to add the Scrolling Sticky Bar. Now select the Edit HTML option.

  2. find for  ]]></b:skin>

  3. add the following CSS code just before ]]></b:skin> tag 









  


Step 2 : Adding CSS code The Bar Styles




    1. Now find for  </body> tag

    2. add the following script code below just before </body>  tag  







    Note: In case you have already included the jQuery library in
    your blog then remove Line 1 . The same applies for Line 12 ,13 and 14
    as well if you have included Facebook , Google+ and Twitter scripts
    respectively.




    Step 3 : Adding The HTML code


    1. Now search for <body tag  and add the following code just below it If you are using default blogger templates then search for <body tag. See Video tutorial below for more details information. 

    2. add the following code below just below of code  <body tag 

    3. Hit the Save Template button and preview your blog to see how the bar appears.








    Note: before installing the html code, you first have to change the blog url and the url feed first post with a link url and link url fedd blog post from your blog to redirect to your blog.



    Line No. 4 :

    <li class='Home'> <a href='http://helpsblogging.blogspot.com/'>Home</a> </li>

    Replace http://helpsblogging.blogspot.com/ with your blog URL.



    Line 15:

    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=helpsblogging&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='padding:3px;text-align:center;' target='popupwindow'>



    Line 16:

    <input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = "";}' placeholder=' Enter Your Email Address :)' type='text' value=''/> <input name='uri' type='hidden' value='stylifyyourblog'/><input name='loc' type='hidden' value='en_US'/> <input class='SYB-emailsubmit' type='submit' value='Subscribe'/> </form>



    Line 15 and 16 replace instance of stylifyyourblog with your RSS Feed Name.





    Video Tutorial :









    Credit:

    This blogger widget created by Prayag from Stylifyyourblog and I share again on http://helpsblogging.blogspot.com/.

    If you have any ideas or questions about this widget then feel free to share with us. :)





    Happy Blogging....
    at Tidak ada komentar:
    Labels: , , , , , , , ,

    Jumat

    online HTML editor




    This online HTML editor requires JavaScript to run. Your browser either doesn't support JavaScript, or JavaScript is currently disabled (via preferences or options). Because of this, you will see the raw HTML code instead of the rich text / WYSIWYG editor. To view the rich text / WYSIWYG editor, please enable JavaScript (or use a browser that supports JavaScript).
    Use this online HTML editor to create HTML snippets or even whole HTML pages for your website, MySpace page, etc.
    Edit the form as much as you like. When you're ready to see the code, simply click the "Source" button (at the top left of the editor).




    at Tidak ada komentar:
    Labels: , , , , , , , ,

    online HTML editor



    Use this online HTML editor to create HTML snippets or even whole HTML pages for your website, MySpace page, etc.
    Edit the form as much as you like. When you're ready to see the code, simply click the "Source" button (at the top left of the editor).

    Rich Text Editor
    ajabingung.blogspot.com
    at Tidak ada komentar:
    Labels: , , , , , , ,

    Selasa

    Marquee Codes Images and Text




    Images and Text




    Flying bat in a marquee

    Bruce the Bat







    There's nothing to stop you putting more than one HTML element inside your HTML marquee codes. Doing so will make both scroll.






    Source CodeResult


    Flying bat in a marquee

    Bruce the Bat







    at Tidak ada komentar:
    Labels: , , , , , , ,

    Marquee Codes Images and Text

    Images and Text
    Flying bat in a marquee
    Bruce the Bat

    There's nothing to stop you putting more than one HTML element inside your HTML marquee codes. Doing so will make both scroll.
    Source CodeResult
    Flying bat in a marquee
    Bruce the Bat
    at Tidak ada komentar:
    Labels: , , , , , , ,

    HTML Background Code



    This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.








    Shorthand Background Code


    The quickest HTML code for backgrounds is the background property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The background property is a shorthand property for setting all background properties at once.




    Source CodeResult

    This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.



    Page Background


    To set the background for the whole page, simply apply the background property against the body tag.

    Example:




    Alternative Background Codes


    Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.


    Background Color


    This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.

    Choose a color with the HTML color picker.




    Source CodeResult

    This text has got a background color applied. You could also apply background color to the whole page if you like.



    Background Image


    This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.




    Source CodeResult

    This div tag has got a background image. You could also apply a background image to the whole page if you like.



    Fixed Background Image


    You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).




    Source CodeResult

    This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.




    http://ajabingung.blogspot.com/2013/03/html-background-code.html




    at Tidak ada komentar:
    Labels: , , , , , , ,

    HTML Background Code

    This page contains HTML background code. Feel free to copy and paste the HTML background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.


    Shorthand Background Code

    The quickest HTML code for backgrounds is the background property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The background property is a shorthand property for setting all background properties at once.
    Source CodeResult
    This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.

    Page Background

    To set the background for the whole page, simply apply the background property against the body tag.
    Example:

    Alternative Background Codes

    Below are more HTML background codes. In these examples, instead of using the background shorthand property, we use a property more specific to the actual effect we want to achieve. Doing this is simply an alternative - it's your choice which method you use.

    Background Color

    This example code applies a background color to a p tag using the background-color property. You can apply background color to any other HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.
    Choose a color with the HTML color picker.
    Source CodeResult
    This text has got a background color applied. You could also apply background color to the whole page if you like.

    Background Image

    This example code applies a background color to a p tag using the background-color property. You can apply background color to any HTML element, such as a div tag, body tag etc. Here, we also apply color to the text by using the color property.
    Source CodeResult
    This div tag has got a background image. You could also apply a background image to the whole page if you like.

    Fixed Background Image

    You can fix the background image so that it doesn't scroll when you scroll the div (or page, as the case may be).
    Source CodeResult
    This HTML background code demonstrates how to keep the background image fixed. Scroll down to see what I mean - the background image stays in the same position.

    http://ajabingung.blogspot.com/2013/03/html-background-code.html
    at Tidak ada komentar:
    Labels: , , , , , , ,

    HTML Background



    Backgrounds


    HTML and CSS provides many ways of changing backgrounds in web pages.

    This page explains the industry standard way of creating backgrounds in HTML. Feel free to copy and paste the background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you like.

    Also, please consider keeping the link back to this website - if you do it will be very much appreciated!


    HTML Background


    The quickest HTML code for backgrounds is the background property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The background property is a shorthand property for setting all background properties at once.


    Example Code


    The source code (on the left) results in the HTML background (on the right).






    Source CodeResult




    This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.








    Page Background


    To set the background for the whole page, simply apply the background property against the body tag.

    Example:










    at Tidak ada komentar:
    Labels: , , , , , , ,

    HTML Background

    Backgrounds

    HTML and CSS provides many ways of changing backgrounds in web pages.
    This page explains the industry standard way of creating backgrounds in HTML. Feel free to copy and paste the background code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you like.
    Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

    HTML Background

    The quickest HTML code for backgrounds is the background property. Strictly speaking, this is a CSS property but you use it in conjunction with your HTML code. The background property is a shorthand property for setting all background properties at once.

    Example Code

    The source code (on the left) results in the HTML background (on the right).

    Source CodeResult

    This example sets all the background properties with one property - the 'background' property. This keeps the code shorter and easier to read.



    Page Background

    To set the background for the whole page, simply apply the background property against the body tag.
    Example:


    at Tidak ada komentar:
    Labels: , , , , , , ,

    Senin

    Automatic Recent Posts Slider With jQuery For Blogger












    Now save your template.






    Step 3 -Adding The Gadget



    • Now go to Page Layout

    • Add a Gadget > HTML/JavaScript

    • Paste below piece of code and save it.








    • Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.

    • To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4)

    • If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5)



    Now save your all the changes and you are done.Visit your blog to see this beautiful slide.


    Follow this tutorial to show this gadget only on specific page or only in homepage.


    Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I'll glad to help you.


    Good day....

    By: http://www.helperblogger.com/













    at Tidak ada komentar:
    Labels: , , , , , , , , , , , , , ,

    iframe




    CARA MEMBUAT IFRAME


    Kode yang kita gunakan adalah:

       <iframe> </iframe>

    astribut yang biasa di pakai adalah:



    • ALIGN="left/right"


    • FRAMEBORDER="garis batas"


    • WIDTH="lebar"


    • HEIGHT="tinggi"


    • SCROLLING="auto/yes/no"



    • SRC="alamat url yang akan di tampilkan"


    contoh kode iframe




    <iframe align="left" frameborder="1"
    src="http://alltemplate.blogspot.com/"width="585"
    height="400" scrolling="auto"></iframe>




    Semoga berguna !







    at Tidak ada komentar:
    Labels: , , , , , , ,

    iframe

    CARA MEMBUAT IFRAME

    Kode yang kita gunakan adalah:
       <iframe> </iframe>
    astribut yang biasa di pakai adalah:
    • ALIGN="left/right"
    • FRAMEBORDER="garis batas"
    • WIDTH="lebar"
    • HEIGHT="tinggi"
    • SCROLLING="auto/yes/no"
    • SRC="alamat url yang akan di tampilkan"
    contoh kode iframe

    <iframe align="left" frameborder="1" src="http://alltemplate.blogspot.com/"width="585" height="400" scrolling="auto"></iframe>

    Semoga berguna !
    at Tidak ada komentar:
    Labels: , , , , , , ,

    Minggu

    Prepare for a PROFIT EXPLOSION!









    at Tidak ada komentar:
    Labels: , , , , , , ,

    Prepare for a PROFIT EXPLOSION!


    at Tidak ada komentar:
    Labels: , , , , , , ,
    Langganan: Postingan (Atom)

    MAKNA SPIRITUAL DAN FILOSOFIS HANACARAKA: KAJIAN KEBATINAN JAWA DALAM PERSPEKTIF

      MAKNA SPIRITUAL DAN FILOSOFIS HANACARAKA: KAJIAN KEBATINAN JAWA DALAM PERSPEKTIF MAHASISWA   Disusun untuk memenuhi tugas mata kuliah Fils...