Membuat Sticky Page di Wordpress

Membuat Sticky Page di Wordpress.com | Tutorial Blog

Sebelumnya saya bikin postingan tentang Membuat Sticky Post di WordPress, pada postingan kali ini saya akan berbagi tentang cara membuat Sticky Page di Wordpress.com.

Sticky Page merupakan sebuah page/halaman yang akan di tampilkan pada home page sebuah blog, jadi jika Sobat mengaktifkan fitur ini maka artikel terbaru yang biasa di tampilkan di home page akan di gantikan oleh Sticky Page.

Bagi Sobat yang ingin Membuat Sticky Page di Wordpress.com, Anda dapat mengikuti tutorial dibawah ini :

1. Login ke Wordpress Sobat, buat sebuah Page/halaman yang akan di sticky, lalu Publish halaman tersebut.
2. Pada dashboard klik Settings > Reading.
   
3. Pada Front page displays beri tanda pada static page, lalu pilih halaman yang akan di tampilkan.
   
4. Terakhir klik Save Changes.
   
   Selesai... Sekarang lihat home page Anda.

Semoga tutorial ini bisa membantu sobat yang ingin Membuat Sticky Page di Wordpress.com.

Widget Popular Post Menggunakan Scroll

Membuat Widget Popular Post Menggunakan Scroll | Tutorial Blog

Karena beberapa Sobat ada yang bertanya cara Membuat Widget Popular Post Menggunakan Scroll, jadi kali ini saya akan share triknya. Semoga tutorialnya mudah di mengerti dan bisa membantu Sobat yang ingin Membuat Widget Popular Post Menggunakan Scroll.

Ok Sob, berikut caranya :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Cari kode
  <div class='widget-content popular-posts'>

  atau

  popular-posts

  atau

  popularposts
  Karena setiap template berbeda, jadi intinya cari kode popular posts yang ada di template Anda.
• Lalu tambahkan kode
  <div style='overflow:auto; width:ancho; height:200px;'>

  </div>
  Untuk lebih jelasnya perhatikan kode berikut :
  Kode :

  <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

  <b:includable id='main'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>

  <div style='overflow:auto; width:ancho; height:200px;'>

  <b:loop values='data:posts' var='post'>

  <div>

  <b:if cond='data:showThumbnails == &quot;false&quot;'>

  <b:if cond='data:showSnippets == &quot;false&quot;'>

  <!-- (1) No snippet/thumbnail -->

  <a expr:href='data:post.href'><data:post.title/></a>

  <b:else/>

  <!-- (2) Show only snippets -->

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  <div class='item-snippet'><data:post.snippet/></div>

  </b:if>

  <b:else/>

  <b:if cond='data:showSnippets == &quot;false&quot;'>

  <!-- (3) Show only thumbnails -->

  <div class='item-thumbnail-only'>

  <b:if cond='data:post.thumbnail'>

  <div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

  </a>

  </div>

  </b:if>

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  </div>

  <div style='clear: both;'/>

  <b:else/>

  <!-- (4) Show snippets and thumbnails -->

  <div class='item-content'>

  <b:if cond='data:post.thumbnail'>

  <div class='item-thumbnail'>

  <a expr:href='data:post.href' target='_blank'>

  <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

  </a>

  </div>

  </b:if>

  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

  <div class='item-snippet'><data:post.snippet/></div>

  </div>

  <div style='clear: both;'/>

  </b:if>

  </b:if>

  </div>

  </b:loop>

  </div>

  </b:includable>

  </b:widget>
  Ket : <div style='overflow:auto; width:ancho; height:200px;'> dan </div> adalah kode yang di tambahkan.
• Terakhir klik Save / Simpan Template.
  
  Selesai...

Silakan di coba dan semoga berhasil Membuat Widget Popular Post Menggunakan Scroll.

Membuat Sticky Post di WordPress

Membuat Sticky Post di WordPress.com | Tutorial Blog

Sebelumnya saya posting tentang Membuat Sticky Post di Blogspot, dan kali ini tentang Membuat Sticky Post di WordPress.com.

Untuk membuat sticky post di wordpress.com ada dua cara, pertama melalui halaman All Post. Kedua melalui add new Post.

• Melalui halaman All Post

1. Klik Dashboard > posts > All Posts
   
2. Lalu klik Quick Edit pada bagian bawah judul postingan.
   
3. Kemudian beri centang pada Make this post sticky. Dan klik Update.
   

• Melalui Add new Post

1. Klik Dashboard > posts > Add New, lalu buat postingan yang ingin di sticky.
   
2. Sebelum di Publish, Klik Edit pada bagian Visibility.
   
3. Beri centang pada stick this post to the front page. Agar nantinya ketika Anda mempublish postingan maka akan langsung menjadi postingan sticky.
   
4. Terakhir klik Publish. Selesai...

Sekian Artikel tentang Membuat Sticky Post di WordPress.com.

Membuat Widget Spoiler Recent Comment

Membuat Widget Spoiler Recent Comment | Tutorial Blog

Untuk menghemat tempat di blog dalam memajang daftar artikel, Link dari hasil tukar link, Recent Comment, dll, kita dapat menggunakan Kotak Blogroll, Kali ini saya akan berbagi tentang tutorial Membuat Widget Recent Comment Menggunakan Spoiler, cara ini sangat berguna untuk menghemat tempat di sidebar.

Berikut cara Membuat Widget Spoiler Recent Comment :

• Login ke blogger, klik Design > Page Element.
  
• Klik Add a Widget dan pilih HTML/Javascript.
  
• Lalu letakkan kode berikut di area konten widget :
  Kode Script :

  <div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Recent Comments'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Recent Comments" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"> <div style="display: none;  height: 250px; overflow: auto;">
  <script type="text/javascript" src="http://html-scripts.googlecode.com/files/comments.js"></script>
  <script type="text/javascript">
  var numcomments = 10;
  var showcommentdate = false;var
  showposttitle = true;var
  numchars = 100;var
  standardstyling = true;var
  showfooter = true;
  </script>
  <script type="text/javascript" src="http://wadahtutorial.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments"></script>
  </div></div></div>
  Silakan ganti wadahtutorial.blogspot.com dengan alamat blog Sobat.
• Terakhir klik Save.
  
  Selesai...
  Berikut contoh hasilnya :

Sekian tutorial tentang Membuat Widget Spoiler Recent Comment.

Membuat Sticky Post di Blogspot

Membuat Sticky Post di Blogspot | Tutorial Blog

Sticky post merupakan sebuah postingan yang selalu berada di homepage, dan urutannya tidak akan pernah tergantikan oleh artikel terbaru ketika dipublish. Intinya sticky post adalah sebuah postingan statis / tetap.

Berikut Cara Membuat Sticky Post di Blogspot :

1. Login ke akun blogger anda. Pilih Design/Rancangan > Page Element/Elemen Halaman.
   
2. Klik Add a Gadget/Tambah Gadget.
   
3. Pilih HTML/Java Script.
   
4. Masukkan artikel yang ingin disticky pada area widget.
5. Lalu klik Save.
   
6. Drag widget yang berisi postingan artikel tadi tepat di atas bagian blog post.
   
7. Terakhir klik Save.
   
8. Silakan lihat hasilnya di blog Anda.

Semoga Bermanfaat...

Membuat Spoiler Blogroll

Membuat Spoiler Blogroll | Tutorial Blog

Untuk menghemat tempat di blog dalam memajang daftar artikel, Link dari hasil tukar link, Recent Comment, dll, kita dapat menggunakan Kotak Blogroll, Kali ini saya akan berbagi tentang tutorial Membuat Widget Blogroll Menggunakan Spoiler, widget ini sangat berguna untuk menghemat tempat di sidebar.

Berikut cara Membuat Spoiler Blogroll :

• Login ke blogger, klik Design > Page Element.
  
• Klik Add a Widget dan pilih HTML/Javascript.
  
• Lalu letakkan kode berikut di area konten widget :
  <div style="margin: 1px;"><div class="smallfont" style="margin-bottom: 2px;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Blogroll'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 150px;" type="button" value="Blogroll" /></div>
  <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
  <div style="display: none;  height: 250px; overflow: auto;">
  
  <ul>
  <li><a href="http://wadahtutorial.blogspot.com/" target="_blank">Tutorial Blog</a></li>
  <li><a href="ALAMAT BLOG" target="_blank">TEXT</a></li>
  <li><a href="ALAMAT BLOG" target="_blank">TEXT</a></li>
  </ul>
  
  <div style="text-align: right;"><a href="http://wadahtutorial.blogspot.com/" style="font-size:4px; text-decoration:none; color: #333333;">Tutorial Blog</a></div></div></div></div>
  Silakan ganti ALAMAT BLOG dan TEXT dengan alamat blog Sobat Anda.
• Terakhir klik Save.
  
  Selesai...
  Berikut contoh hasilnya :
  • Tutorial Blog
  • Google
  • Yahoo

Sekian tutorial tentang Membuat Spoiler Blogroll.

Membuat Tombol Home Melayang

Membuat Tombol Home Melayang | Tutorial Blog

Sebelumnya saya pernah posting tentang Membuat Tombol Back To Top, pada postingan kali ini saya akan berbagi cara Membuat Tombol Home page dan Reload page Melayang.

Langsung saja Sob, berikut caranya :

• Login ke Blogger, Klik Design/Rancangan > Edit HTML.
  
• Beri tanda centang pada Expand Template Widget.
  
  Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
• Copy kode berikut dan pastekan di atas ]]></b:skin>
  #floating-home {
  position:fixed;_position:absolute;top:280px; left:0px; clip:inherit;
  _bottom:expression(document.documentElement.scrollTop+
  document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  #floating-home a
  {
  filter:alpha(opacity=65);
  -moz-opacity:0.65;
  opacity:0.65;
  border:0;
  }
  #floating-home img
  {
  border:0;
  }
  #floating-home a:hover
  {
  filter:alpha(opacity=100);
  -moz-opacity:1;
  opacity:1;
  }
• Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
  <div id='floating-home'>
  <div><a expr:href='data:blog.homepageUrl' title='Home'><img alt='Home' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/home-i.png'/></a></div>
  <div><a href='#' onClick='window.location.reload()' title='Reload page'><img alt='Reload page' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/refresh.png'/></a></div>
  </div>
• Terakhir klik Save / Simpan Template.
  

Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Home Melayang.