Free Website Widgets Label Yellow For Blogger

Posted by Unknown


Salam semua sahabat blogger di seluruh penjuru dunia, pada kesempatan ini saya akan membagikan sebuah tutorial atau search engine optimisation tips kali ini yaitu cara menambahkan Custum Widget Label Yellow For Blogger, seperti yang kita  lihat pada gambar terlihat sangat menarik dan sangat berguna bagi blog kita, widget ini berguna untuk membuat kategori semua postingan kita sehinggga para pengunjung sangat mudah menemukan apa yang mereka cari dan pengunjung juga akan betah dihalaman blok kita karena tampilannya menarik dan teratur,,

oke, tanpa memperpanjang mukaddimah saya langsung saja ke pokok permasalahan kita yaitu cara membuat Widget Label Yellow For Blogger, ikuti langkah-langkahnya sebagai berikut :


  • Masuk ke Dashboard Blogger anda
  •      Arahkan kursor ke tanda panah sebelah kanan atas dan Klik menu template Template -> Edit HTML




  • Lalu cari  kode ]]></b:skin> (caranya lihat gambar di bawah ini)

      •      Kalau sudah ketemu Copy Kode dibawah ini dan paste kode ini tepat di atas ]]></b:skin>

            .Label li:before {

              background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);

              border-bottom: 1px solid #D99D38;

              border-left: 1px solid #D99D38;

              content: "";

              height: 1.39em;

              left: -0.69em;

              position: absolute;

              top: 0.2em;

              transform: rotate(45deg);

              width: 1.3em;

              z-index: 1;

          }

          .Label li:after {

              background: none repeat scroll 0 0 #FFFFFF;

              border: 1px solid #D99D38;

              border-radius: 4.167em 4.167em 4.167em 4.167em;

              box-shadow: 0 1px 0 #FAEABA;

              content: "";

              height: 0.5em;

              left: -0.083em;

              position: absolute;

              top: 0.667em;

              width: 0.5em;

              z-index: 9999;

          }

          .Label li {

              background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);

              border-bottom: 1px solid #D99D38;

              border-radius: 0 0.25em 0.25em 0;

              border-right: 1px solid #D99D38;

              border-top: 1px solid #D99D38;

              box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);

              color: #996633;

              float: left;

              font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;

              font-size: 0.75em;

              font-weight: bold;

              list-style: none outside none;

              margin: 0 0 7px 20px;

              padding: 0.417em 0.417em 0.417em 0.917em;

              position: relative;

              text-decoration: none;

              text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

              z-index: 1;

          }

      •      Lalu simpan template anda, dan refres halaman blogger anda selanjutnya lihat hasilnya.
           Demikianlah cara menambahkan Custum Widget Label Yellow For Blogger, Semoga tulisan ini dapat membantu anda dan saya berharap jika ada yang ingin saudara tambahkan silahkan berkomentar di bawah ini, saya akan sangat senang dengan komentar teman-teman blogger,, selamat menikmati dan terima kasih atas perhatiannya telah berkunjung ke blog saya ini..
      Anda juga bisa membaca Free Website Widgets Label Cool Effec di postingan saya sebelumnya

      More aboutFree Website Widgets Label Yellow For Blogger

      Free Website Widgets Label Cool Effec

      Posted by Unknown

      Free Website Widgets Label Cool Effec Untuk Blog >>> Widget ini menampilkan daftar kategori posting yang sesuai dengan pokok permasalahan masing-masing dan sesuai dengan nama label yang kita berikan pada setiap postingan. Hal ini sangat membantu untuk mengkategorikan posting dalam kelompok masing-masing masalah, misalnya kita memiliki 20 postingan tentang tutorial blogger maka semua postingan tentang tutorial yang bersangkutan dengan tutorial blogger akan masuk kedalam lebel tersebut, dan hal ini sangat membantu pengunjung untuk mencari apa yang mereka butuhkan dalam blog kita, dengan demikian tanpa kita sadari bahwa kita telah meningkatkan search engine optimisation tips, hal ini di tandai dengan membantu pengunjung untuk melihat posting di dalam kategori/label.
      Widget Label blogger standar tidak begitu menarik. Jangan khawatir, di sini saya akan berbagi widget label yang menarik dan keren yang bias kita namakan dengan Free Website Widgets Label Cool Effec black labels, widget ini hanya menggunakan kode CSS sederhana. Untuk melakukan hal ini ikuti langkah-langkah di bawah ini.

      *       Masuk ke Dashboard Blogger anda

      (Klik Gambar Untuk Memperbesar)

      *       Klik menu template Template -> Edit HTML

      (Klik Gambar Untuk Memperbesar)

      *       Cari kode ]]></b:skin> 

      (Klik Gambar Untuk Memperbesar)


      *      dan paste kode di bawah ini tepat di atas ]]></b:skin>


      .Label li {
              background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
              border: 1px solid;
              border-radius: 6px 6px 6px 6px;
              float: left;
              font-size: 116%;
              list-style: none outside none;
              margin: 2px;
              padding: 4px;
              transition: all 0.3s ease 0s;
          }
      .Label li:hover {
          transform: rotate(351deg) scale(1.7);
      }
      .Label a {
          color: #fff;
          text-decoration: none;
      }

            
      - Lalu simpan Template anda.

            itulah langkah-langkah atau cara menambahkan Free Website Widgets Label Cool Effec Untuk Blog, mudah-mudahan postingan ini dapat berguna bagi para sobat blogger semua, mohon tanggapannya dalam komentar, saya akan senang dengan komentar anda.. thank...
      More aboutFree Website Widgets Label Cool Effec

      Cara Memasang Widget Related Posts Pada Blog

      Posted by Unknown

      Salam semua sahabat blogger, dalam kesempatan kali ini saya akan membagikan kepada sahabat blogger semua Custum Widget Related Posts Untuk Blog, Berikut ini adalah salah satu tip untuk mempercantik tampilan Widget Related Posts pada blogger, saya pikir ini sangat penting untuk kita tambahkan widget ini pada blog kita karena akan meningkatkan pengunjung di blog kita tanpa menghabiskan banyak waktu di SEO, jika kita pelajari lebih dalam lagi maka kita akan dengan mudah menemukan bahwa widget related post adalah sumber utama untuk meningkatkan seo optimization tips. Jadi, jika kita benar-benar tertarik untuk dan ingin menampilkan posting terkait di mana postingan kita sedang dibaca oleh pengunjung.

      widget yang satu ini mengandung gambar sehingga kita juga dapat melihat gambar jika postingan kita memiliki gambar. lebih kurang ini tampilannya (lihat gambar di bawah)



      Oke, langsung saja ke TKP…!!!
      Langkah pertama yang harus kamu lakukan adalah

      • Buka dashboard blogger kamu
      • Klik pada bagian Template blogger yang ingin Kamu tambahkan widget (jika kamu punya beberapa blog)
      • setelah itu klik tombol/tulisan Edit HTML (lihat gambar di bawah)



      • Selanjutnya Kamu harus mencari kode ini dalam template
      </ head> 
         Kalau susah mencarinya tekan saja Ctrl + F lalu pate kode ini </ head>  di dalam kota pencarian dan tekan Enter
        
        Kalau sudah menemukan kode </ head>  tersebut

      • Sekarang paste kode ini di atas </ head> tag

      <b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; }  #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style><script type='text/javascript'>var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS3y6gMMMSou1ENPmRmmk4uSlQNtAvGvI40nxafZ7id6Ku_ezNuMOiaCv_0w6rA_rE2MC1u4soFJbl4vq6LltUfjUgfDXOIqsC19mm4bX4wb_BNIUbHlivkHWw71cY7hMsXVoSEhm_OhmX/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><!-- remove --></b:if>


      selanjutnya cari kode ini dalam template <div class='post-footer'> lalu
      Tempelkan kode dibawah ini di atas kode class='post-footer'> <div


      <b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
      <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script></div>
      <div style='clear:both'/>
      <!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://mbgadget.blogspot.com/2013/08/blogger-related-post.html'><img alt='Blogger related post widget' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVc1zJNTLmEe0ak1LulLC-CpX7t48_57qu_N9l0vTYh5j2uh7yE6b2ARhLaA5YIB8aHnETlgszwk23bgX15tVl4soA1yuWV0xwEzsKBYkzKB6HEuwmU7DYCcyZUyVXU91A_JYjl5FrlDN6/s1600/best+blogger+tips.png'/></a></b:if></b:if>

      Setelah itu klik tombol simpan template yang ada di atas pojok kanan (warna orange)
      Dan Sekarang Kamu sudah selesai dan widgate Kamu berhasil diinstal.

      Kamu harus me-refresh blog Kamu untuk melihat perubahan, saya juga telah mencobanya pada beberapa blog lain sebelum memposting  di sini.

      Kita sadari dan tahu bahwa ada banyak pilihan dan mengapa kita menggunakan gadget ini untuk blogger kita. Sebenarnya jika kita ingin membangun tampilan halaman sebagian besar blog kita, maka kita harus menambahkan gadget ini dan pastinya itu akan membuat respon yang jauh lebih positif dari pengunjung terhadap tampilan halaman blog kita meningkat dan lebih dari normal.

      Jika ada masalah saat menambahkan Widget Related Posts Untuk Blog silahkan bertanya dalam komentar dan jangan ragu untuk memberi saran anda. hal ini untuk meningkatkan seo optimization tips pada blog ini. Thank..
      More aboutCara Memasang Widget Related Posts Pada Blog

      Cara Membuat Blog di Blogger

      Posted by Unknown


      Assalamu'alaikum Wr.Wb


      Dengan Mengucapkan Bismillahirrahmanirrahim,,, 

      Salam sejahtera kepada semua sahabat blogger di seluruh penjuru dunia,,, Pada malam ini tepatnya hari Sabtu / Malam Minggu Jam 23.11 WIB tanggal 23 November 2013,  saya terinspirasi untuk membuat sebuah catatan kecil sebagai koleksi dan dokumentasi pribadi di dalam sebuah blog/websete, sehingga saya membuat blog yang saya beri nama http://fe-blogger.blogspot.com/ yang artinya.....nanti di postingan selanjutnya akan saya beritahukan...



      Pada postingan pertama ini saya akan membahas tentang bagaimana cara membuat blog di blogger, mungkin ini adalah tutorial yang sudah umum dan pasaran atau bahkan sudah basi dikalangan para blogger, tapi tulisan ini saya khususkan bagi pemula seperti saya ini yang baru belajar membuat blog, setelah saya pelajari dari beberapa sumber dan menerawang kesana-kemari akhirnya saya bertekad untuk membuat sebuah blog karena menurut saya untuk memulai membuat blog itu bukanlah hal yang sangat sulit dan tidak menghabiskan biaya sedikitpun (Gratis), yang kita butuhkan hanyalah koneksi internet, sedikit usaha dan bersabar.




      Saya berpikir bahwa daripada kita menuliskan sebuah diare di buku catatan pribadi, lebih baik kita Buat Website Gratis sebagai catatan pengalaman dan dokumentasi pribadi, dimana kita tidak akan direpotkan dengan membawa semua buku catatan ketika kita bepergian atau kita pindah tempat tinggal, dengan membuat sebuah blog gratis kita bisa membacanya disetiap saat dan dimana pun kita berada jika ada koneksi internet, ke ujung dunia sekalipun.




      Jadi, langkah pertama yang harus kita lakukan untuk Buat Website Gratis di blogger adalah kita harus mempunyai sebuah email, anda bisa mendaftar di https://accounts.google.com/signup?hl=id cara membuat account Gmail nanti akan saya jelaskan secara ter perinci di postingan selanjutnya.


      Karena ini adalah postingan pertama saya, maka sampai disini dulu penjelasan saya dan akan saya lanjutkan di postingan selanjutnya tentang cara Cara Membuat Blog di Blogger.

      fe-blogger mengucapkan Terima kasih banya atas kesempatan anda membaca artikel ini, semoga bermanfaat...amiiin


      More aboutCara Membuat Blog di Blogger

      Recent Rotating Post Gadget with Excerpt For Blogger

      Posted by Unknown

      This is a JavaScript code displaying the latest posts of any feed with the distinction of having two parts which can be used individually or combined.

      At the top we will see a single post with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us.

      At the bottom will be shown a full list with chosen posts and when we mouse over any of them, the post will be on top, breaking the automatic cycle.


      But before installing anything let's see it in action to decide if it does what we want.

      Loading...

      How to Add Recent Rotating Posts Widget to Blogger

      Step 1. Go to Layout > click on Add a Gadget link.


      Step 2. From the pop-up windows, choose the HTML/Javascript gadget


      Step 3. Paste this code inside the empty box:
      <style>
      .gfg-root {
      width: 100%;
      height : auto;
      position : relative;
      overflow : hidden;
      margin: 0 auto;
      text-align : center;
      font-size: 12px;
      border: 2px solid #CAD4E7;
      }
      .gfg-title {
      font-size: 16px;
      font-weight : bold;
      color : #3D5A99;
      background-color: #ECEEF5;
      line-height : 1.4em;
      overflow : hidden;
      white-space : nowrap;
      }
      .gfg-entry {
      background-color : white;
      width : 100%;
      height : 9.2em;
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-top : 3px;
      }
      .gf-title a {
      font-weight: bold;
      color: #3F86C6;
      }
      .gfg-subtitle {
      display: none;
      }
      .gfg-list {
      position : relative;
      overflow : hidden;
      text-align : left;
      }
      .gfg-listentry {
      line-height : 1.5em;
      overflow : hidden;
      white-space : nowrap;
      text-overflow : ellipsis;
      padding-left : 15px;
      padding-right : 5px;
      }
      .gfg-listentry-odd {
      background-color : #eeeeee;
      }
      .gfg-listentry-even {
      background-color : #fefefe;
      }
      .gfg-listentry-highlight {
      background: #748BB7;
      }
      .gfg-listentry-highlight:before {
      position: absolute;
      left: 0;
      content: '\25BA ';
      font-size: 14px;
      color: #eee;
      }
      .gfg-listentry-highlight a {
      color: #eee;
      }
      .gfg-root .gfg-entry .gf-result {
      position : relative;
      background-color : white;
      width : auto;
      height : 100%;
      padding-left : 20px;
      padding-right : 5px;
      }
      .gfg-root .gfg-entry .gf-result .gf-title {
      font-size: 14px;
      line-height : 1.2em;
      overflow : hidden;
      white-space : nowrap;
      text-overflow : ellipsis;
      margin-bottom : 2px;
      }
      .gfg-root .gfg-entry .gf-result .gf-snippet {
      height : 3.8em;
      color: #000000;
      margin-top : 3px;
      }
      .clearFloat {
      clear : both;
      }
      </style>
      <script src="http://www.google.com/jsapi" type="text/javascript"></script><script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>
      <script type="text/javascript">
      function showGadget() {var feeds = [{title:'List',url:'http://fe-blogger.blogspot.com/feeds/posts/default?redirect=false&start-index=5&max-results=10'},];
      new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load("feeds", "1");
      google.setOnLoadCallback(showGadget);
      </script>
      <div id="feedGadget">Loading...</div>

      Customizations:


      First is the feed address to display. The url http://fe-blogger.blogspot.com obviously, should be replaced with yours.

      Next is start-index=5. This number indicates from which post we want to begin to show.

      max-results=10 indicates the maximum number of posts that we will be reading from the feed, which is indicated in the start-index=5. This number always needs to be equal or greater to which we should see later and serves to set the number of posts that will be shown in the gadget. The easy thing would be to put 500 in order not to fail, but the higher the number is, the longer the gadget will take to load, so it's better to adjust to what we need to show.

      Finally there are some parameters of the script:

      title: 'Latest Posts', is the title which goes on top.
      numResults: 10, number of posts that actually will be in the list
      displayTime: 5000, the delay time between posts in the rotator (in milliseconds)
      hoverTime: 500, minimum time for a item in the list to be displayed at the top.

      If we want to hide the list and show only the posts, then change this part:
      .gfg-list {
      position : relative;
      overflow : hidden;
      text-align : left;
      }
       to :
      .gfg-list {
      display:none;
      }
      and if we want to display only the list, then change this part:
      .gfg-entry {
      background-color : white;
      width : 100%;
      height : 9.2em;
      position : relative;
      overflow : hidden;
      text-align : left;
      margin-top : 3px;
      }
      to:
      .gfg-entry {
      display: none; }

      Step 4. Save the gadget and we're done. Enjoy!
      More aboutRecent Rotating Post Gadget with Excerpt For Blogger

      Scriptaculous image slider/carousel for Blogger

      Posted by Unknown

      This is a very nice carousel slideshow made by Brian R. Miedlar which shows a gallery of images having a sliding effect that returns to the beginning once it gets to the last image.

      If you need to see this carousel in action, please visit this demo blog.


      To add this image carousel on your Blogger blog, follow the steps below:

      image carousel

      Step 1. Login to your Blogger Dashboard, go to Template and click on the Edit HTML button:


      Step 2. Search using CTRL + F for the </head> tag.


      Step 3. Just above the </head> tag, add this code:

      <script src='http://www.google.com/jsapi'></script>
      <script>
      google.load("prototype","1.7.0.0");
      google.load("scriptaculous", "1.9.0");
      </script>


      <script language='javascript' src='http://fe-blogger.googlecode.com/svn/trunk/Image Carousel/os.js' type='text/javascript'/>
      <script language='javascript' src='http://fe-blogger.googlecode.com/svn/trunk/Image Carousel/carousel.js' type='text/javascript'/>
      <script language='javascript' src='http://fe-blogger.googlecode.com/svn/trunk/Image Carousel/application.js' type='text/javascript'/>

      Note: If you already have Scriptaculous and Prototype, it's not necessary adding the code in red.

      Step 4. Now search for the following code:
      ]]></b:skin>
      And just above it, add these styles:
      .carousel {
      position:relative;
      clear:both;
      left:20px; /* Distance from left */
      margin-top:10px;
      margin-bottom:20px;
      border:2px solid #000; /* Carousel border */
      background-color:#333333; /* Background color */
      }
      .carousel .navButton { cursor:pointer; display:block;
      text-indent:-9999px;
      background-repeat:none;
      z-index:10;
      }
      .carousel .container {
      position:absolute;
      overflow:hidden;
      }
      .carousel .items {
      position:absolute;  }
      #Carousel2 {
      height:88px; /* height of the container */
      width:685px; /* width of the container */
      }
      #Carousel2 .container {
      left:26px;
      top:12px;
      width:630px; /* width of the images container */
      height:100px; /* height of the images container */
      }
      #Carousel2 .items { top:0; left:2px;
      width:1700px; /* overall width of all the thumbnails */
      }
      #Carousel2 .item { height:70px; width:70px; float:left; clear:right; }
      #Carousel2 .item .icon img { position:relative; left:0px; width:65px !important; height:65px; cursor:pointer;}
      #Carousel2 .navButton { position:absolute; bottom:0px; width:24px; height:87px; }
      #Carousel2 .navButton.previous { left:0px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYBHo1wd55Mcemdpeb2vXyzodBEzQSpUvA97ulrZmXtukEiOgRiK64BlkoJreB1sq65e8wJ7lKoUE06z4mnF-wshpmo4Nx8SubN6hobYqmensNWYzTVQ1z7Mqg5yC440d92RLCpSOMwxk/s1600/button-left.png); }
      #Carousel2 .navButton.next { right:2px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiubHWWQUlt4GCtvFptlcKsh9f3qj3mtCPJNmG9Fir5WRW8uZ3trXLal2Jzofaj5IbImQbdNv2yFWbgS0voJYL1YP_vpkFjGVl9vXHqFHm4jKhJcj41yfxP8DaGXBaq3vDvG3O76NTO6g/s1600/button-right.png); }
      #Carousel2 .item .key { display:none;}
      #Carousel2 .item .picture { display:none;}
      Here, I have put some styles in green that can be customized as you wish, such as the border color and the background color. The arrows are images, so if you want changing their color or use other, you have to change the two URLs in blue.

      The width of the carousel is of 685px, so below the header might look good. If you want to change the length then you have to change the /* width of the container */ (which is the size of the entire carousel), the /* width of the images container*/ (which is the area that shows the thumbnails) and the /* overall width of the thumbnails */ which is the actual width that occupy all the thumbnails together.

      Step 5. Save the Template.

      Step 6. Go to Layout > click on Add a Gadget link > choose HTML/Javascript from the pop-up box and paste the structure of the carousel:
      <div id="Carousel2" class="carousel">
      <div class="button navButton previous" style="display:none;">Back</div>
      <div class="button navButton next" style="display:none;">Forward</div>
      <div class="container">
      <div class="items">

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>

      </div>
      </div>
      </div>

      Add the URLs of the links and the URLs of the images. The link URL is optional if you want to link the images to some posts.

      If you add more images or remove some, you also need to change the width of the thumbnails, otherwise some pictures will appear behind the others.

      To add more pictures, just add before the </div> in red a piece of code like this:
      <div class="item">
      <div class="key caption">Thumb</div>
      <div class="icon">
      <a href="link URL"><img width="65" height="65" src="image URL" /></a></div>
      <div class="picture"></div>
      </div>
      To align the gadget just change the distance from the left (in green) to another value.
      More aboutScriptaculous image slider/carousel for Blogger

      How to Write SEO Optimized Blog Posts

      Posted by Unknown

      I'm not a SEO Expert, nor what we will read further is a top secret, but this is something about basic positioning that everyone should apply in order to optimize the blog posts. So with these techniques, effort, and lots of patience, we can occupy the best places in the search results of different search engines.

      Of course, not all the cases are alike, nor all blogs are positioned similarly, some may have greater competition than others depending on how popular is the topic they handle, so when it comes to positioning there's no specific time that applies for all. Having said this, let's begin.

      Focus on a topic


      Whatever the theme of your blog is, when writing a post, try focusing on a definite subject that has a clear objective and has no distractions, for example, if you write about Digital Cameras, then the beginning and the end of the post should be only about it. Don't start talking about digital cameras and end up telling about what you have done last weekend. A reader goes to a page because is looking for a specific information, so unless it is not a personal blog (where you write about your daily life) do not digress.

      Define the post title


      The post title should be precise, so that you can briefly summarize the content of the post, but you must not abuse this either and although it should be concise, do not save words that might be keys to the search.

      Examples:
      Collection of all the cameras that have been released last year on the market
      The best digital cameras of 2012
      Clearly, the first one hasn't been defined so much and the second is not only more accurate but it is more appropriate for what people are searching on the internet.

      The keywords


      Keywords are those terms that the most people search for on the internet and you should try focusing on them when writing an article; these keywords have to be included throughout the entire article but you should be careful not repeating them too many times.

      Example:
      During the fourth week of the technology, there were many products that are consumed today, and the most famous experts gave a speech on them.
      At the opening of the fourth Technology Week, the experts talked about various topics, including how to choose a digital camera, frequent discussions about the pros and cons of the iPad, and what are the best smartphones.
      In the first example we have written without giving importance to any terms, however in the second one, we used phrases that are searched on the internet by the users.

      So, the most frequent search terms should be included wisely but without cluttering your posts with these words, or it can be counterproductive.

      These keywords should be added in the title of the posts, as well.

      Rely on synonyms


      While it is good using keywords, we should not limit ourselves to a single word. It is recommended using synonyms because users do not name things in same way and using less keywords, you'll avoid leaving the reader under the impression that you are being repetitive and insistent.

      Examples:
      Nikon D7000s Digital Camera is a 16.2 megapixel digital camera that takes great pictures, for those who like good quality pictures.
      Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures, for those who like good quality images.

      In the first example we have repeated the word digital camera and pictures twice meanwhile in the second one, we used the digital camera keyword once and changed the word pictures with images.

      This way, the reader will find a greater diversity of words and could enjoy the article more.

      Using bold and italics


      The main keywords should be highlighted, so that they will stand out from the rest; this is taken into account by the search engine robots being like some kind of lures for them, so the words with which you want to position yourself have to be highlighted with bold, but be careful, this shouldn't be done with CSS, but with HTML, i.e. they should not be tagged with font-weight: bold; but rather with <b> or even better, with <strong>.

      Examples:
      Nikon D7000s is a 16.2 megapixel digital camera that takes excellent pictures, for those who like good quality images.
      The result seems to be the same, but it is not. Although the three sentences are in bold, only one is more attractive to robots, which is the first.
      <strong>Nikon D7000s</strong> is a 16.2 megapixel <b>digital camera</b> that takes excellent pictures, for those who like <span style="font-weight: bold;">good quality images</span>.
      The same goes for the italics, use them for highlighting important words, but do not put them between font-style: italic; but rather between <i> or even better <em>.
      <em>Nikon D7000s</em> is a 16.2 megapixel <i>digital camera</i> that takes excellent pictures, for those who like <span style="font-style: italic;">good quality images</span>.
      Again, the first has a better chance of positioning than the others. So, it is recommended to highlight the keywords in bold and italics, or put them between <strong> and </strong>, or between <em> and </em>.

      Using links


      Some believe that we shouldn't use links in the posts because this way we are giving away our Page Rank. This is not quite true, using referral links to sites that have already shaped their credibility, will also help us to shape our own. Certainly, we should not flood our posts with links, but do it when is necessary, and especially with sites that address the same topics as you.

      Also, avoid putting the typical "click here" or similar texts. When you put a link, the anchor text should be fairly descriptive.

      Examples:
      <a href="Link URL">Click here</a> to know more
      More information about <a href="Link URL">digital cameras</a>
      In the first example, the anchor text is not relevant and descriptive, in the second it is.

      Illustrating with images


      Articles with images are not only visually appealing, but might help the reader to understand what you are talking about, thus, whenever you can, use an image in your post to illustrate the publishing, but do not overdo it, because many images or very large images can slow the loading time of the blog.

      New and relevant content


      You should focus not only on writing many posts, but also making them relevant to your readers. New and original content is more attractive to the search engines than a copy & paste, and actually the last gets penalized. So try to write new stuff, even if you think that all has been said, it isn't so, each person has a different way of saying things.

      Also, always try to get informed before writing an article; do a research and see if the information is valid, based on that you will gain the trust of your readers.

      With these few techniques you can increase the chances of positioning your posts on the internet. As I said earlier, these aren't things that no one heard about, but I know that many start and do not know how to optimize the blog posts.

      It does not hurt repeating that the positioning is not given overnight, but with some effort and patience, you should see the desired results over time.
      More aboutHow to Write SEO Optimized Blog Posts

      How to Add a Tiny jQuery Circleslider to Blogger

      Posted by Unknown

      Tiny Circleslider is a small jQuery plugin that generates a circular carousel of images.

      There is noting complicated about using this type of carousel, however when it's about customizing it, it's necessary to use a bit of arithmetic. All these details can be found in the author's homepage, so I'll just limit myself to show you the basics.


      Obviously, we need to add the javascript jQuery library in our template:

      Step 1. From your Blogger's dashboard, go to Template > press the Edit HTML button


      Step 2. Search for the </head> (CTRL + F) tag and just above it, add the following code:
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
      <script src="http://fe-blogger.googlecode.com/svn/trunk/jquery.tinycircleslider.min.js"/>
      We would lack the CSS styles that we need to add above the </head> tag as well:
      <style>
        #rotatescroll { /* is the rectangle container */
          height: 300px;
          position: relative;
          width: 300px;
        }
        #rotatescroll .viewport { /* is the rectangle containing the images */
          height: 300px;
          position: relative;
          margin: 0 auto;
          overflow: hidden;
          width: 300px
        }
        #rotatescroll .overview { /* is the list with the images */
          left: 0;
          list-style: none;
          margin: 0;
          padding: 0;
          position: absolute;
          top: 0;
        }
        #rotatescroll .overview li { /* each item of the list */
          float: left;
          height: 300px;
          position: relative;
          width: 300px;
        }
        #rotatescroll .overlay { /* the image with the circle overlapping the list */
          background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcq_PkD5Hw4RthyphenhyphenNswjgAmUP05Zwm8GTYHRvc70Z_t4KaPuyvFVrldyXfWCbhh4HPbyoZKFHUwRGREFLxjCwH6V4fN6IIwGzl5gZvimHVeXH4XNFjWJSgEhz-tkTmbFMWB5aeE1wgeRW4f/s1600/bg-rotatescroll.png) no-repeat 0 0;
          height: 300px;
          left: 0;
          position: absolute;
          top: 0;
          width:300px;
        }
        #rotatescroll .thumb { /* the red circle that allows us to navigate */
          background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1PSdIYf1RAOKwGi2m6CjixrZ-qO_a1IPaTg6dDUDMs57ofzU7k-3GMRzzL0Z8Xckt_JcTdjdSeiTeREUan4ohchUvq_4vrYrLnkcVXzg66kkVIsU2qBjTNhwM5_j7qKWt4Ty-0ITt3hYN/s1600/bg-thumb.png) no-repeat 0 0;
          cursor: pointer;
          height: 26px;
          left: 137px;
          position: absolute;
          top: -3px;
          width: 26px;
          z-index: 200;
        }
        #rotatescroll .dot { /* the points indicating the position of each image */
          background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCce_SYe4z80g25IVD1A3RBWxR-m3ebSAAKYmBrrGicH3LbYt-Wj2-j7dpKQmhfeXuwBo8rZT513OH0OY2L5-S5EmCrZO2qUSm-T2RHeJVugET2il46w3vY0eu3ettLgXrnI6GVdRmSkoR/s1600/bg-dot.png) no-repeat 0 0;
          display: none;
          height: 12px;
          left: 155px;
          position: absolute;
          top: 3px;
          width: 12px;
          z-index: 100;
        }
        #rotatescroll .dot span { /* are hidden by default */
          display: none;
        }
      </style>
      Screenshot
      Step 3. Now here's the HTML that has to be added to where we want to display the carousel.
      Create a New post and paste on the HTML section, the code below:
      <div id="rotatescroll">
        <div class="viewport">
          <ul class="overview">
            <li><img src="imageURL" /></li>
            <li><img src="imageURL" /></li>
            <li><img src="imageURL" /></li>
            <li><img src="imageURL" /></li>
            <li><img src="imageURL" /></li>
          </ul>
        </div>
        <div class="dot"></div>
        <div class="overlay"></div>
        <div class="thumb"></div>
      </div>

      <script type="text/javascript">
      $(document).ready(function(){ $('#rotatescroll').tinycircleslider(); });
      $('#rotatescroll').tinycircleslider({ interval: true, snaptodots: true });
      </script>
      Screenshot

      Note: replace the imageURL text with the URL of your images

      and here are other options that could be added, separated by commas:

      snaptodots - false if you want no dots to be shown when dragging them
      hidedots - false if you want to display the internal points (by default is true)
      intervaltime - is the time between slides (by default 3500)
      radius - defines the size of the circle (by default is 140)
      More aboutHow to Add a Tiny jQuery Circleslider to Blogger