Membuat Headline News Di Bawah Header

Membuat Headline News Di Bawah Header

Pagi ini akan saya coba share cara Membuat Headline News Di Bawah Header seperti yang ada pada blog Kompi Ajaib ini yang letaknya di bawah header. Kebetulan pada waktu yang lalu ada nanya bagaimana cara membuat latest post / headline news seperti blog Kompi Ajaib. Headline News ini menampilkan 10 postingan terbaru dari blog Anda.

Silahkan Anda masuk di Dashboard >> Template >> klik Edit HTML >> centang pada Expand Widget Templates karena kita akan sedikit mengobok-obok HTML. Setelah itu silahkan cari kode ]]></b:skin> , gunakan CTRL + F pada keyboard untuk memudahkan pencarian. Setelah ketemu silahkan copy kode di bawah ini dan paste DI ATAS kode tadi.

.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:960px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:960px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0 auto;padding:0 auto;text-shadow: 1px 1px 1px #000}
.headline a:hover{color:#eace12;text-decoration:none}

Perhatikan tulisan https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png yang berwarna merah. Itu adalah gambar yang akan menjadi background headline news. Silahkan sesuaikan warnanya dengan warna dari tema blog Anda. Silahkan buat gambar yang kecil saja kira-kira ukuran sizenya sekitar 200 - 300 byte saja. Di sini saya bikin gambar dengan pixel dimensinya lebar 7 pixels dan tingginya 38 pixels di Photoshop dan save dengan format png. Kemudian upload gambar Anda tadi dan ganti url yang berwarna merah tersebut dengan url gambar Anda tadi. Untuk tulisan 960px, itu ukuran lebar headline news. Silahkan sesuaikan dengan lebar headernya atau header-wrapper.

Kemudian cari kode </head> dan copy kode di bawah ini kemudian letakan DI ATAS  kode tadi.

<script src='http://kompiajaib.googlecode.com/files/newsticker2.js' type='text/javascript'/>
<style type='text/css'>

Kemudian cari kode <b:section class='header' id='header' dan Anda akan melihat kode seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>

Silahkan copy kode di bawah ini dan letakan SETELAH / DI BAWAH kode tadi. 

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Latest Posts :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://kompiajaib.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Tulisan Latest Posts yang berwarna merah tersebut bisa Anda ganti dengan Headline News atau yang lainnya. Tulisan kompiajaib.blogspot.com silahkan Anda ganti dengan blog Anda. Namun di sini Anda harus sudah membuat atau mempunyai akun Feedburner blog Anda agar headlinenya bisa berjalan.

Sehingga penampakannya akan tampak seperti di bawah ini.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Latest Posts :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://kompiajaib.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Setelah itu silahkan lakukan review untuk memastikan pemasangannya sudah benar atau belum. Kemudian save dan selesai.

Demikian sharing cara Membuat Headline News Di Bawah Header kali ini. Sebenarnya headline ini bisa juga Anda letakan di atas header tergantung bagaiman selera Anda saja. Yang penting jangan takut untuk mencoba sesuatu yang baru. Semua orang pernah mengalami trial and error.

Membuat Tab View Di Blog

Membuat Tab View Di Blog

Pagi ini saya akan share cara Membuat Tab View Di Blog seperti yang Anda lihat pada gambar di atas atau pada Tab View blog saya di samping kanan. Sebenarnya saya dapat kode scriptnya dari Maskolis (pembuat template blog ini), namun karena ada temen yang request scriptnya, sekalian saja saya buat postingannya.

Cara Membuat Tab View Di Blog sedikit gampang karena kita tidak usah mengobok-obok kode HTML blog kita, cukup menambahkan kode scriptnya di gadget HTML sidebar blok kita. Bagi yang ingin mencobanya, silahkan copy kode script Tab View di bawah ini, kemudian paste di gadget HTML sidebar blog Anda.

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 2px solid #393939; /* Warna border kotak Tab */
border-bottom: 2px solid #393939; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: none; /* Warna border Kotak Konten */
overflow: hidden;
background-color: none; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Title Tab 1</span></a>
<a><span style="color: #fff">Title Tab 2</span></a>
<a><span style="color: #fff">Title Tab 3</span></a>
</div>
<div style="width: 300px; height: 350px;" class="Pages">

<div class="Page">
<div class="Pad">

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
 document.write('<ul>');
 for (var i = 1; i < json.feed.entry.length; i++)
 {
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
 document.write(item);
 }
 document.write('</ul>');
 }
</script>
<script src="http://kompiajaib.blogspot.com/feeds/posts/summary/-/Software?max-results=30&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://kompiajaib.blogspot.com/search/label/Software" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>

</div>
</div>

<div class="Page">
<div class="Pad">

Kode HTML Anda Di Sini

</div>
</div>

<div class="Page">
<div class="Pad">

Kode HTML Anda Di Sini

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

<script src="http://kompiajaib.googlecode.com/files/tab_view2.js">

</script>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-tab-view-di-blog.html' target='_blank'>widget</a></div>

Keterangan:

Perhatikan tulisan yang berwarna hijau, itu keterangan untuk tiap kode di sampingnya, silahkan rubah kode-kodenya dan sesuaikan dengan theme blog Anda.

Tulisan 300px merupakan lebar widget tab view ini, sesuaikan dengan lebar sidebar blog Anda.

Tulisan 350px merupakan tinggi untuk widget tab view, silahkan sesuaikan dengan keinginan Anda.

Tulisan berwarna ungu muda adalah kode script untuk recent post berdasarkan katagori/label dengan 1 buah thumbnail untuk postingan terakhir. Tulisan Software untuk label postingan Anda yang ingin ditampilkan. kompiajaib.blogspot.com silahkan ganti dengan blog Anda. 30 merupakan banyaknya recent post yang ditampilkan, dan http://kompiajaib.blogspot.com/search/label/Software silahkan ganti dengan URL label yang Anda tampilkan.

Kode HTML Anda Di Sini silahkan ganti dengan kode script widget yang lain seperti recent comment atau yang lainnya. Atau Anda bisa isi semua tab dengan kode script recent post yang warna ungu muda di atas, tinggal ganti nama labelnya saja. Seperti pada tab view di blog saya ini.

Jika Anda ingin membuat dua buah tab view seperti pada blog saya ini, hapus kode <script src="http://kompiajaib.googlecode.com/files/tab_view2.js"> </script> pada tab view kedua. Kemudian tambahkan angka 2 pada setiap tulisan TabView sehingga menjadi TabView2. Begitu juga kalau Anda ingin membuat tiga buah tab view di sidebar blog Anda.

Demikian sharing cara Membuat Tab View Di Blog kali ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu yang baru, setiap orang pasti melakukan try and error.

Membuat Permalink Otomatis Di Blog

Membuat Permalink Otomatis Di Blog

Kali ini saya akan mencoba sharing cara Membuat Permalink Otomatis Di Blog. Namun sebelumnya saya akan membahas sedikit tentang Permalink itu sendiri. Bagi kita sebagai blogger pemula tentunya asing dengan yang namanya Permalink. Menurut para ahli, Permalink adalah singkatan dari Permanent Link yang artinya adalah alamat permanen url atau link yang menuju ke blog atau web tertentu yang langsung menuju ke postingan blog/web itu sendiri.

Nah dengan Membuat Permalink Otomatis Di Blog, diharapkan dapat menambah internal link postingan atau artikel blog kita sehingga lebih SEO lagi dan dapat bersaing dan bertahan di search engine dan tentunya juga diharapkan dapat meningkatkan optimasi onpage blog kita. Biasanya permalink otomatis di simpan di bawah postingan. Anda mungkin pernah melihat seperti gambar di bawah ini:

Membuat Permalink Otomatis Di Blog

Gambar di atas adalah contoh untuk permalink otomatis yang ada di setiap postingan blog. Nah bagi yang ingin Membuat Permalink Otomatis Di Blog silahkan simak uraian cara membuatnya di bawah ini.

Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.

Kemudian cari kode ]]></b:skin> agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode ]]></b:skin> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode ]]></b:skin> tadi.

.buatpermalinkblogger {border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666; padding: 5px; background: #444;-moz-border-radius:5px;}
.buatpermalinkblogger a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

Perhatikan tulisan berwarna merah #444 itu menunjukkan warna untuk kotaknya. Silahkan sesuaikan dengan warna blog Anda.

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Kemudian copy kode di bawah ini dan pastekan SETELAH kode di atas tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='buatpermalinkblogger'><center><small>Anda sedang membaca artikel tentang <strong><i><data:blog.pageName/></i></strong> dan bila berkenan Anda bisa share artikel <strong><i><data:blog.pageName/></i></strong> ini dengan tombol share di bawah. Bila Anda bermaksud COPAS artikel <strong><i><data:blog.pageName/></i></strong> untuk diposting di blog Anda, mohon untuk meletakkan link <strong><i><a expr:href='data:post.url'><data:blog.pageName/></a></i></strong>
sebagai Sumbernya dengan mengcopy kode di bawah ini.</small></center>
&lt;div&gt;
&lt;form name=&quot;kompi ajaib&quot;&gt;
&lt;p align=&quot;center&quot; style=&quot;margin-top: 0; margin-bottom: 0&quot;&gt;&lt;textarea style=&quot;width: 98%; height: 10&quot; name=&quot;txt&quot; rows=&quot;1&quot; cols=&quot;45&quot; onmouseover=&quot;this.form.txt.select()&quot; readonly ;&gt;<small>&lt;a href=&#39;<data:post.url/>&#39;target=&#39;_blank&#39;&gt;&lt;strong&gt;&lt;i&gt;Sumber&lt;/i&gt;&lt;/strong&gt;&lt;/a&gt;</small>&lt;/textarea&gt;&lt;/p&gt;
&lt;/div&gt;
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-permalink-otomatis-di-blog.html' target='_blank'>widget</a></div>
</div></b:if>

Silahkan lakukan preview untuk memastikan penerapan kodenya sudah betul atau belum, kemudian save template blog Anda.

Demikian postingan Membuat Permalink Otomatis Di Blog, mudah-mudahan bermanfaat.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan

Pagi ini saya share salah satu trik untuk mempercantik tampilan blog kita yaitu Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan. Setelah saya berhasil mengaplikasikannya pada blog saya ini, akhirnya saya berkesempatan untuk mengsharingnya untuk Anda semua. Tentunya bagi Anda yang belum tahu, bagi yang sudah tahu dan paham mohon koreksinya bila menjumpai hal yang kurang pas. Maklum saja saya belajar otodidak. Saya hanya senang dengan hal-hal yang baru, try and error sudah menjadi kebiasaan akhirnya. Dengan mencoba sesuatu hal yang baru, kita mendapat ilmu yang baru juga. Related posts ini akan bergerak ke kiri dan ke kanan dan akan berhenti ketika mouse di arahkan ke atasnya.

Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan sebenarnya cukup mudah. Kenapa demikian? Karena Anda hanya tinggal mengcopy kode-kodenya dan mengikuti petunjuknya. Kali ini kita akan sedikit mengobok-obok kode HTML template blog. Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula. 

Kemudian cari kode </head>, agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode </head> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode </head> tadi.

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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: 1.6em;
font-weight: bold;
color: #585858;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://kompiajaib.googlecode.com/files/relatedpostwiththumbnails2.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Lalu copy kode di bawah ini dan paste SETELAH salah satu kode di atas yang sobat temukan.

<!-- Marquee Kompiajaib Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Baca Juga Artikel Terkait Lainnya: </b></h3>
<div style='background:#444; border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666;margin: 0px auto; padding: 5px;width:98%;float:left;height:100%'>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=12;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-related-post-dengan-thumbnail.html' target='_blank'>widget</a></div>
</div>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if>
</b:if>
<!-- Marquee Kompiajaib Related Posts with Thumbnails Code End-->

Perhatikan tulisan Baca Juga Artikel Terkait Lainnya: bisa Anda ganti dengan kalimat yang Anda kehendaki.

#444 untuk warna background kotaknya.

Dan angka 12 untuk menunjukan jumlah related post yang ditampilkan.

Silahkan lakukan preview untuk memastikan widgetnya berjalan atau tidak, setelah itu silahkan simpan templatenya kemudian lihat hasilnya....menarik bukan...

Demikian sharing Membuat Related Post Dengan Thumbnail Bergeser Di Bawah Postingan ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu hal yang baru. Setiap orang pasti mengalami try and error.

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Memberi Efek Marquee Pada Popular Posts Widget Blogger

Pagi ini saya akan share trik mempercantik blog yaitu Memberi Efek Marquee Pada Popular Posts Widget Blogger. Seperti telah kita ketahui, blogger menyediakan fasilitas popular posts. Kita bisa memunculkan popular posts dengan menyertakan thumbnail maupun tanpa thumbnail pada blog kita. Tentunya popular posts ini berdasarkan konten yang paling banyak diklik pengunjung blog.

Memberi Efek Marquee Pada Popular Posts Widget Blogger sangatlah mudah, namun tentunya Anda harus mengaktifkan dulu widget popular posts pada blog Anda. Dashboard >> Layout >> Add a Gadget >> Kemudian pilih Popular Posts.

Kemudian masuk ke Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates karena kita akan sedikit mengobok-obok kode HTML. Namun alangkah baiknya back up dulu template Anda untuk berjaga-jaga kemungkinan kesalahan pada edit HTML. Setelah itu silahkan cari HTML widget popular posts. Untuk memudahkan kita cari title dari widget tersebut dengan CTRL + F pada keyboard kemudian masukan titlenya ke kotak pencarian. Secara default, Anda akan menemukan kode HTML yang cukup panjang seperti di bawah ini.

<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 class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <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>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Kemudian kita akan menambahkan kode <marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> di atas kode <div class='widget-content popular-posts'> dan menambahkan kode </marquee> di bawah kode </div>

Perhatikan pada height='350px', itu menuntukan tinggi widget yang akan tampil pada blog kita, silahkan Anda atur sesuai keinginan dan scrollamount='2' untuk mengatur kecepatan scroll-nya.

Sehingga penampakan kodenya akan menjadi seperti di bawah ini.

<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>
<marquee direction='up' height='350px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <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>
...........................
...........................

              <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>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>
</marquee>
</b:includable>
</b:widget>

Setelah itu silahkan lakukan preview untuk melihat apakah perubahannya sudah betul atau tidak, kemudian simpan template Anda, selesai.

Untuk demo, silahkan lihat pada Popular Posts Widget blog ini. Demikian sharing Memberi Efek Marquee Pada Popular Posts Widget Blogger kali ini mudah-mudahan bermanfaat.

Membuat Egg Share Slide Open Widget Di Pojok Blog

Membuat Egg Share Slide Open Widget Di Pojok Blog

Kali ini saya akan share sebuah sharing widget yang menurut saya cukup unik untuk disimpan di blog kita. Selain bentuknya yang unik karena berbentuk egg atau telur, egg share ini juga akan terbelah dan belahannya akan bergeser ke kanan ketika disorot mouse.

Cara Membuat Egg Share Slide Open Widget Di Pojok Blog cukup mudah, seperti biasa silahkan Anda masuk ke blog Anda >> Dashboard >> Template >> Edit HTML. Jangan lupa centang expand widget template karena kita akan mengobok-obok kode HTML.

Silahkan cari kode </head> (gunakan CTRL + F pada keyboard untuk memudahkan pencarian), lalu copy kode di bawah ini dan paste tepat DI ATAS kode tadi.

<!-- Start Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ --><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ -->

Kemudian cari kode </body>, dan kemudian copy kode di bawah ini dan paste DI ATAS kode tadi.

<!-- Start Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ --><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><noscript><a href="http://kompiajaib.blogspot.com/">Blogger Gadgets</a></noscript><!-- End Egg Share Slide Open Widget from http://kompiajaib.blogspot.com/ -->

Perhatikan tulisan berwarna merah, itu menunjukan posisi widget berada di pojok kiri bawah. Kalau widget ingin berada di pojok kanan bawah, ganti left dengan right. Agar Widget berada di pojok atas, ganti bottom dengan up.

Terakhir silahkan preview untuk melihat penempatan widgetnya sudah benar atau belum, kemudian  save template Anda.

Demikian sharing cara Membuat Egg Share Slide Open Widget Di Pojok Blog mudah-mudahan bermanfaat.

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Membuat Widget Jam Dan Kalender Di Pinggir Blog

Kenapa saya memberi judul Membuat Widget Jam Dan Kalender Di Pinggir Blog, karena memang tempat jam dan kalendernya berada di pinggir blog sebelah kiri dan tersembunyi sehingga tidak memakan tempat. Untuk melihat jam atau kalendernya kita tinggal klik pada tanda panah warna kuning dan kemudian jam atau kalendernya akan keluar.

Untuk melihat demo Membuat Widget Jam Dan Kalender Di Pinggir Blog silahkan lihat dengan klik di tombol demo di bawah ini, kemudian lihat di sebelah kiri blog.

Untuk mengaplikasikannya ke blog Anda cukup mudah, tinggal tekan tombol Add To Blogger di bawah ini, kemudian setelah terbuka jendela baru tinggal tekan tombol Add Widget.

Untuk waktu dan kalendernya sudah otomatis menyesuaikan dengan waktu internet. Bagaimana mau mencoba Membuat Widget Jam Dan Kalender Di Pinggir Blog? Silahkan...mudah-mudahan bermanfaat.

Membuat Widget I Love Indonesia Di Pojok Blog

Membuat Widget I Love Indonesia Di Pojok Blog

Pagi ini saya share cara Membuat Widget I Love Indonesia Di Pojok Blog yang cukup sederhana namum besar maknanya. Kita sebagai bangsa Indonesia tentunya bangga menjadi orang Indonesia, dan tentunya bangga juga menjadi blogger Indonesia. Widget ini bisa dipasang di blog Anda yang menandakan bahwa Anda orang dan blogger Indonesia. 

Untuk demo silahkan klik tombol demo di bawah ini, kemudian lihat di pojok kanan atas blog.

Cara Membuat Widget I Love Indonesia Di Pojok Blog cukup mudah, Anda tinggal klik tombol add to blogger di bawah ini.

Setelah terbuka jendela baru, silahkan klik pada tombol Add Widget, selesai. Mudah kan...? Demikian sharing cara Membuat Widget I Love Indonesia Di Pojok Blog mudah-mudahan bermanfaat.

Add To Blogger Button Generator

Add To Blogger Button Generator

Bagi Anda yang sedang belajar membuat blog seperti saya khususnya yang senang dengan tutorial blog seperti membuat widget untuk diaplikasikan ke blog atau membuat widget yang dapat dipakai oleh orang lain tentunya akan memudahkan jika kita mempunyai tool Add To Blogger Button Generator.

Dengan adanya Add To Blogger Button Generator, orang lain dapat dengan mudah mengaplikasikan widget yang kita buat ke blognya dengan hanya menekan Add To Blogger Button, tanpa harus mengcopy kode script dan mempastenya di gadget HTML/JavaScript. Dengan Add To Blogger Button Generator dapat menghasilkan Add To Blogger Button yang akan otomatis menambahkan gadget HTML/JavaScript yang sudah berisi kode script dari widget yang kita buat.

Penampakan dari Add To Blogger Button yang dihasilkan dari Add To Blogger Button Generator seperti di bawah ini.

Di bawah ini contoh dari Add To Blogger Button Generator yang bisa Anda coba. Tool ini sebenarnya untuk memudahkan saya dalam belajar membuat widget blog. Cara menggunakannya cukup mudah, yang terpenting masukan kode script widget yang kita buat ke kotak Paste kode script widget (html/javascript), kemudian tekan tombol Generate dan hasilnya pada kotak paling bawah silahkan copy ke postingan HTML Anda.

Add To Blogger Button Generator

Settings

Masukan Judul Widget
Blog Url / Profile URL
Masukan URL Logo Blog
Paste kode script widget (html/javascript)

Demikian postingan kali ini tentang Add To Blogger Button Generator, mudah-mudahan bermanfaat.

Sumber

Membuat Share Button Melayang Di Pinggir Blog

Membuat Share Button Melayang Di Pinggir Blog

Salah satu sarana untuk mempublikasikan postingan blog kita ke berbagai sosial media yaitu dengan membuat share button atau dalam bahasa Indonesianya yaitu tombol berbagi. Nah untuk itu kini saya share cara Membuat Share Button Melayang Di Pinggir Blog yang sederhana namun besar manfaatnya. Share button ini akan tetap tampil di depan halaman meskipun halaman di roll ke atas atau ke bawah.

Cara Membuat Share Button Melayang Di Pinggir Blog cukup mudah, silahkan Anda masuk ke blog Anda. Dashboard >> Layout >> Add a gadget >> pilih HTML/JavaScript, kemudian copy kode di bawah ini ke dalam gadget tersebut. Jangan dikasih title untuk gadget ini, biarkan kosong.

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="background:#FFFFFF; border: 0px solid #000000; top:120px;left:80px;"><div class="addthis_toolbox addthis_default_style"><span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span><span><a class="addthis_button_tweet" tw:count="vertical"></a></span><span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span><span><a class="addthis_counter"></a></span><span><div style='border: 0px; padding: 0px; background-color: none; text-align: center; font-size:9px;'> <a href='http://kompiajaib.blogspot.com/2012/05/membuat-share-button-melayang-di.html' target='_blank'>Get Widget</a></div></span></div></div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Mudah kan...? Demikianlah cara Membuat Share Button Melayang Di Pinggir Blog mudah-mudahan bermanfaat.

Membuat FB Like Box Melayang Slide Close

Membuat FB Like Box Melayang Slide Close

Pagi ini saya akan mencoba sharing sebuah widget facebook like box yang melayang dengan tombol close dengan efek slide ketika di tekan. Saya mencoba menggabungkan kode-kode script yang saya dapat dari bloger-bloger lain selama belajar blogging yang saya tekuni selama ini dan hasilnya menurut saya lumayan untuk diterapkan di blog. Bagi para master, tolong kasih masukan tentang widget ini kalau ada kesalahan. Widget ini lumayan simpel karena tidak perlu mengobok-obok HTML template blog Anda.

Bagi yang ingin mencoba menggunakannya di blog, silahkan ikuti caranya di bawah ini.

1. Seperti biasa silahkan login ke blog Anda.

2. Dashboard >> Layout >> add a gadget >> pilih HTML/JavaScript,kemudian copy kode di bawah ini.

<div style="display:scroll;position:fixed;top:50px;left:400px;">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://kompiajaib.googlecode.com/files/slidefbnew.js" type="text/javascript">
</script>
<style>
#kompiajaib_slidefb2012{
font-family: "Consolas", "Courier New", Courier, mono, serif;
border: 1px solid;
width: 355px;
margin: 10px 0px;
padding:5px 0px 0px 5px;
background-repeat: no-repeat;
position:relative;
color: #00529B;
background-color: #000000;
}
</style>
<div id="kompiajaib_slidefb2012">
<a class="close"  href="#close" style='position:absolute;right:0px;top:0px;margin-right:-1px;margin-top:-1px;'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipEAkbiZkIuue__JaiT2g3g-9aUWtbafsPpBv8Izp-qZLYieyiycz2-GVHv-SLex1jsH5xjp-WFlhbDL28l2NsOI6jzxYOsR_2cxKUjG-_91zZdTu0HGvhFtYG_NTuI_twiXJqTgwJ229h/s1600/popover-close-button.gif" /></a>
<div style='width:99%;padding:8px 0px;background-color:#737373;font-family:arial;text-align:center;'><div style='color:#FFF;font-size:13px;font-weight:bold;'>Like us and get updates</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Kompi-Ajaib/395526477133955&amp;width=350&amp;height=255&amp;colorscheme=dark&amp;show_faces=true&amp;border_color=%23FFFFFF&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:255px;" allowtransparency="false"></iframe><div style="border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;">Powered by <a href="http://kompiajaib.blogspot.com/2012/05/membuat-fb-like-box-melayang-slide.html" target="_blank">blogger widget</a></div>
</div></div>

Warna background widgetnya hitam atau dark.

#000000 adalah background widget, silahkan sesuaikan dengan template Anda. Untuk mengetahui kode warna silahkan masuk  

http://www.facebook.com/pages/Kompi-Ajaib/395526477133955 silahkan ganti dengan URL facebook Anda.

Jika background widgetnya terang, silahkan ganti dark dengan light. 

Demikin sharing Membuat FB Like Box Melayang Slide Close kali ini mudah-mudahan bermanfaat.

Cara Membuat Link Dengan Tombol Sederhana Di Blog

Pada kesemptan ini saya akan share Cara Membuat Link Dengan Tombol Sederhana Di Blog. Biasanya tombol ini digunakan untuk tombol download atau tombol apa saja untuk menggantikan link teks sehingga berkesan lebih rapih. Bagi yang belum mengetahui Cara Membuat Link Dengan Tombol Sederhana Di Blog simak tutorial sederhana saya di bawah ini.

Cara Membuat Link Dengan Tombol Sederhana Di Blog cukup mudah, Anda tinggal mengcopy kode di bawah ini.

<a href="LINK ANDA DI SINI" target="_blank"><button>Download</button></a>

dan penampakannya akan seperti di bawah ini.

Silahkan ganti tulisan LINK ANDA DI SINI dengan link yang ingin Anda masukan ke tombol tersebut, dan ganti tulisan Download dengan tulisan yang ingin Anda tampilkan pada tombol tersebut.

Mudah kan...? Demikian postingan sederhana tentang Cara Membuat Link Dengan Tombol Sederhana Di Blog, mudah-mudahan bermanfaat.

Cara Membuat Efek Marquee Di Blog

Pagi ini saya share salah satu trik blogger cara membuat efek marquee di blog atau lebih umumnya kita kenal efek tulisan berjalan. Sebenarnya cara membuat efek marquee di blog sudah banyak di share oleh blogger-blogger lain namun untuk melengkapi trik blogger di blog ini, kini saya kembali meng-share-nya bagi Anda yang belum paham atau belum tahu kode script untuk membuat efek marquee di blog.

Dengan membuat tulisan atau apapun dengan efek marquee, membuat blog tersebut terkesan lebih hidup. Cara membuat efek marquee di blog cukup mudah. Kita bisa mengaplikasikannya di widget atau di psotingan blog kita. Ada beberapa cara membuat efek marquee di blog, diantaranya:

1. Efek marquee yang berjalan dari kiri ke kanan.

 Kode scriptnya seperti di bawah ini:

<marquee align="center" direction="right" scrollamount="2" width="100%" height="20">
    Tulisan Anda di sini
    </marquee>

Penampakannya akan seperti di bawah ini:

Contoh untuk efek marquee yang berjalan dari kiri ke kanan.

Untuk tulisan agar berjalan dari kanan ke kiri, tinggal ganti right menjadi left.

2. Efek marquee yang berjalan ke kanan dan ke kiri.
Kode scriptnya seperti di bawah ini:

<marquee align="center" direction="left" scrollamount="3" behavior="alternate" width="100%" height="20">
    Tulisan Anda di sini
    </marquee>

Penampakannya akan seperti di bawah ini:

Contoh untuk efek marquee yang berjalan dari kiri ke kanan.

3. Efek marquee dengan background warna.
Kode scriptnya seperti di bawah ini:

    <div align="left"><span><marquee scrollamount="3" behavior="alternate" bgcolor="RED" width="100%">
    Tulisan Anda di sini
    </marquee></span></div>

Contoh efek marquee dengan background warna

4. Efek marquee yang berhenti ketika mouse berada pada teks area.
Kode scriptnya seperti di bawah ini:

    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="left" align="center" width="100%" height="20">
    Tulisan Anda di sini
    </marquee>

Penampakannya akan seperti di bawah ini:
Silahkan Anda coba arahkan mouse ke teks area di bawah ini.

Contoh efek marquee yang berhenti ketika mouse diarahkan ke teks area.

Agar berjalan ke kanan ganti left dengan right
Agar berjalan ke atas ganti left dengan up
Agar berjalan ke bawah ganti left dengan down

Demikian sharing Cara Membuat Efek Marquee Di Blog kali ini. Anda bisa berkreasi lebih banyak lagi dan lebih berpariasi lagi dengan menggunakan efek-efek marquee di atas. Jangan pernah takut untuk mencoba...karena kegagalan adalah awal dari sebuah keberhasilan.

Membuat Teks Area Keren Di Blog

Membuat Teks Area Keren Di Blog

Sesuai dengan namanya Membuat Teks Area Keren Di Blog, memang menurut saya teks area ini benar-benar keren. Dengan teks area ini, meskipun kita sebenarnya bukan profesional tapi kita seakan-akan profesional. Cara membuat atau menampilkannya di blog kita cukup mudah. Bagi yang tertarik untuk mencoba Membuat Teks Area Keren Di Blog silahkan simak postingan sederhana saya di bawah ini.

1. Login ke blog anda.
2. Masuk menu 'Layout-->Edit HTML
3. Centang kotak 'Expand Widgets Template
4. Cari kode ini </head> (gunakan CTRL + F di keyboard untuk memudahkan pencarian)
5. Letakkan script berikut ini di bawah kode </head> tadi.

<link type="text/css" href="http://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dmd-styles.css" rel="stylesheet" />

6. Simpan Template Anda.

Nah untuk menampilkan teks area kerennya di postingan HTML gunakan kode-kode di bawah ini.

1. <div class="md1">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

2. <div class="md2">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

3. <div class="md3">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

4. <div class="md4">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

5. <div class="md5">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

6. <div class="md6">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

7. <div class="md7">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

8. <div class="md8">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

9. <div class="md9">TEKS ANDA DI SINI</div> maka penampakannya akan seperti di bawah ini.

Ini contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode di atas pada postingan HTML Anda.

Demikian cara dan contoh untuk Membuat Teks Area Keren Di Blog, Anda dapat mengkopi kode-kode di atas pada postingan HTML Anda. Bagaimana tertarik untuk mencoba Membuat Teks Area Keren Di Blog?

Atau Anda bisa mengunjungi sumbernya

Membuat Related Post Di Bawah Postingan

Membuat Related Post Di Bawah Postingan

Salah satu sarana untuk menyarankan agar pengunjung membaca postingan kita yang lainnya yaitu dengan Membuat Related Post Di Bawah Postingan. Ada banyak macam related post atau artikel terkait baik yang beserta thumbnailnya maupun tidak dengan thumbnailnya. Namun khususnya saya lebih memilih related post yang tanpa thumbnail karena dengan related post seperti ini memuat cukup banyak related post, sehingga memberikan lebih banyak alternatif kepada pengunjung blog kita.

Untuk demo Membuat Related Post Di Bawah Postingan, silahkan Anda lihat di bagian bawah postingan ini. 

Cara Membuat Related Post Di Bawah Postingan silahkan simak langkah-langkahnya di bawah ini:

1. Login ke blog anda.
2. Masuk menu Layout >> Edit HTML >> Centang kotak 'Expand Widgets Template' >> Cari kode ini <data:post.body/> (gunakan CTRL + F di keyboard untuk memudahkan pencarian).

3. Letakkan script berikut ini di bawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<h3>Baca Juga Artikel Terkait Lainnya:</h3>

<div style='overflow: auto;border: 1px #000000 solid; background-color:#414141; margin: 0px auto; padding: 5px; height: 200px;width: 98%;text-align: left;'>
<div class='widget-content'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 20;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>

</div>
</b:if><br/>

Anda bisa mengganti tulisan 'Baca Juga Artikel Terkait Lainnya' dengan kalimat lain misalnya 'posting terkait', 'artikel terkait', dll. 

#414141 untuk warna background kotaknya, silahkan sesuaikan dengan warna template Anda. Jika memerlukan kode warna silahkan pilih di sini.

20 menunjukan banyaknya jumlah postingan per lebelnya.

4. Simpan template. Selesai.

Demikian postingan Membuat Related Post Di Bawah Postingan kali ini mudah-mudahan bermanfaat.

Membuat Teks Area Dengan Blok Otomatis

Membuat Teks Area Dengan Blok Otomatis

Anda semua tentunya sudah paham dan mengenal yang namanya teks area kan? Yup...pengertian secara sederhana yaitu sekumpulan kata-kata atau kalimat yang berada di dalam kotak. Tujuannya tentunya untuk menghemat tempat. Teks area banyak macamnya dan telah banyak juga diposting oleh banyak blogger. Namun kali ini saya sharing salah satu cara Membuat Teks Area Dengan Blok Otomatis. Bagi Anda yang belum tahu cara Membuat Teks Area Dengan Blok Otomatis silahkan simak penjelasan sederhana saya di bawah ini.

Untuk demonya silahkan Anda coba arahkan pointer mouse di atas teks area di bawah ini:

Untuk demo Membuat Teks Area Dengan Blok Otomatis, silahkan Anda coba arahkan pointer mouse di atas teks area ini

Kira-kira seperti itulah Membuat Teks Area Dengan Blok Otomatis. Anda tertarik untuk mencobanya? Caranya cukup mudah, silahkan kopi kode script di bawah ini, dan pastekan di widget HTML sidebar blog Anda atau di postingan HTML blog Anda.

<div>
<form name="kompi ajaib">
<p align="center" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 200; height: 30" name="txt" rows="3" cols="45" onmouseover="this.form.txt.select()" readonly ;>TEKS ANDA DISINI</textarea></p>
</div>

center menunjukan posisi teks area berada di tengah-tengah, ganti dengan left bila anda menginginkan teks area berada di sebelah kiri, dan ganti dengan right bila ingin ada di sebelah kanan.

200, 30, 3 menunjukan lebar, tinggi dn jumlah baris, silahkan sesuaikan dengan yang Anda inginkan.

Mudah kan? Demikian sharing Membuat Teks Area Dengan Blok Otomatis kali ini mudah-mudahan bermanfaat.

Membuat Back To Top Button

Pada waktu yang lalu saya sudah memposting cara membuat scroll to top button dengan efek scroll atau menggulung halaman ke atas. Nah sekarang saya mencoba untuk share cara Membuat Back To Top Button.

Berbeda dengan scroll to top yang mempunyai efek menggulung halaman, Back To Top Button membawa pengguna langsung menuju ke atas halaman ketika di klik. Cara Membuat Back To Top Button juga berbeda dengan scroll to top yaitu pada scroll to top kita harus memasukan kode scriptnya pada template dengan mengedit kode HTML template blog. Sedangkan pada cara Membuat Back To Top Button kita tidak perlu mengobok-obok HTML template blog, hanya menambahkan kode scriptnya pada gadget HTML sidebar blog.

Cara Membuat Back To Top Button seperti di bawah ini:

1. Kita login ke dashboard >> Layout/Tata Letak >> Add a gadget >> Pilih HTML/JavaScript >> kemudian copas kode di bawah ini:

<div style="display:scroll;position:fixed;bottom:5px;right:5px; moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter:
progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;"><a href="#" title="Back to Top"> Back To Top </a></div>

right menunjukan button berada di sebelah kanan, ganti dengan left apabila Anda menginginkan button berada di sebelah kiri.

2. Simpan widget Anda dan lihat penampakannya di halaman blog Anda.

Demikian sharing Membuat Back To Top Button kali ini mudah-mudahan bermanfaat.

Membuat Icon Yahoo! Messenger Di Blog

Setelah pada waktu yang lalu saya sharing cara membuat YM Pingbox Chat widget di blog, kini saya akan share cara Membuat Icon Yahoo! Messenger Di Blog.

Membuat Icon Yahoo! Messenger Di Blog merupakan salah satu sarana yang diberikan oleh author blog untuk pengunjung. Dengan Membuat Icon Yahoo! Messenger Di Blog, pengunjung dapat dengan mudah mengetahui bahwa status YM author blog sedang ON atau OFF. Ketika status YM author sedang On maka pengunjung dapat langsung berchating ria dengan si empunya blog. Caranya cukup mudah, hanya mengkopi kode di bawah ini, kemudian pastekan di gadget HTML sidebar blog Anda.

<a target="_blank" href="http://ymgen.com/chat.php?idne=ID YM ANDA">
<img border="0" src="http://opi.yahoo.com/online?u=ID YM ANDA&m=g&t=2"></a>

Silahkan ganti ID YM ANDA dengan id ym Anda (id yahoo tanpa @yahoo.com).

Dan angka 2 merupakan jenis tampilan untuk icon YM, silahkan pilih dan sesuaikan dengan selera Anda, bisa dicoba dari angka 0 sampai dengan angka 24, seperti gambar di bawah ini.

Icon YM: 0	Icon YM: 1	Icon YM: 2
Icon YM: 3	Icon YM: 4	Icon YM: 5
Icon YM: 6	Icon YM: 7	Icon YM: 8
Icon YM: 9	Icon YM: 10	Icon YM: 11
Icon YM: 12	Icon YM: 13	Icon YM: 14
Icon YM: 15	Icon YM: 16	Icon YM: 17
Icon YM: 18	Icon YM: 19	Icon YM: 20
Icon YM: 21	Icon YM: 22	Icon YM: 23
Icon YM: 24

Demikian sharing Membuat Icon Yahoo! Messenger Di Blog kali ini mudah-mudahan bermanfaat.

Sumber