Cara Mudah Membuat Widget Sticky di Sidebar Blogger Anda

Cara Paling Mudah Membuat dan Memasang Widget Sticky di Sidebar Blogger sobat - Apakah widget Sticky itu dan bagaimana cara pemasangan pada blog ? widget Sticky merupakan widget yang tetap melayang / menempel meskipun mouse sobat di scroll ke bawah . biasanya widget sticky ini terletak di bagian sidebar blog sobat , entah itu dibagian sidebar kiri maupun sidebar kanan , widget sticky ini dipasang supaya dengan jelas pengunjung dapat melihat widget yang kita buat sticky seperti widget follower , widget fans page dan masih banyak lainya , namun dalam penggunaanya widget sticky di larang untuk memasang iklan adsense dalam gaya sticky

Berikut Tips Memasang Widget Sticky di Sidebar Blog

1. Pertama yang pastinya sobat harus login ke Blogger
2. Setelah Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky { position:fixed; top:10px;/* jarak dari atas*/ z-index: 100;}

4. Tambahkan Kode JavaScript
Simpan kode ini di atas </body>[ kode ini biasanya berda paling ngisor pisan ]


<script type='text/javascript'>$(document).ready(function() {var stickyWidgetTop = $('#HTML7').offset().top;
var stickyWidget = function(){var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML1').addClass('sticky');} else { $('#HTML1').removeClass('sticky');
}};stickyWidget();$(window).scroll(function() { stickyWidget();});});</script>

Silahkan Sobat Ganti #HTML1 dengan ID widget yang ingin sobat buat sticky.

Nah itu dia cara Membuat sekaligus Memasang Widget Sticky di Sidebar Blog Paling Mudah , semoga tutorial sticky ini bermanfaat bagi sobat dan selamat mencoba

Cara Membuat Widget Email Subscribe Tema Flat UI

Kali ini CaraMembuat-Di.BlogSpot.Com ingin berbagi kepada anda tentang bagaimana caranya membuat widget email subscribe yang keren dan bisa diletakkan dimana saja, dengan tema Flat UI desain yang cukup modern pada tahun 2015 ini.

Widget ini dipasang berguna untuk pengunjung yang ingin berlangganan pada blog anda, nanti jika anda menulis postingan maka akan muncul pada email yang telah berlangganan dengan blog anda tadi, jika mereka menyukai artikel anda, maka mereka tidak akan segan-segan berkunjung.

Jadi, intinya widget ini sangat banyak sekali guna dan manfaatnya. Bagi anda yang ingin memasang widget keren ini langsung saja kita bahas, bagaimana cara memasang atau mengaplikasikannya.

1. Seperti biasa login www.blogger.com
2. Kita tidak akan mengedit Html
3. Langsung kemenu Tata Letak
4. Tambah gadget ▶ Html/Javascript
5. Kemudian anda masukkan kode dibawah ini.

<style type='text/css'>
#subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #E0E0DF;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
#subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #95A5A6;text-align: center;background: #F1F1F1;text-transform:uppercase;border-radius:2px 2px 0 0;}
#subscribe-box p {font-family: &#39;Droid Serif&#39;;font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
#subscribe-box .emailfield {padding: 0px 20px 10px;}
#subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: &#39;Droid Serif&#39;;width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #008287;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;box-shadow: 0px 3px 0px 0px #00686C}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
#subscribe-box .emailfield .submitbutton:hover{background: #00686C;}
</style>
<div id='subscribe-box'>
              <div class='title'>
               Subscribe Here
              </div>
                 <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Fikrisuka&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='Fikrisuka'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>
              </form>
             </div>
</div>

6. Silahkan anda ganti Fikrisuka dengan feed blog anda di FeedBurner.
7. Simpan.

Bagaimana? apakah tampilan email subscribe nya keren dan modern. So pasti dong sobat CaraMembuat-Di.BlogSpot.Com, nah mungkin hanya ini saja yang bisa saya share hari ini. Ditunggu ya tutorial-tutorial menarik lainnya. Terima kasih...

Cara Membuat Catatan Kaki Artikel Di Blog

CARA MEMBUAT CATATAN KAKI ARTIKEL DI BLOG – Seperti pada umumnya catatan kaki berfungsi untuk menyampaikan catatan-catan yang dianggap penting, tidak jauh berbeda dengan catatan kaki artikel di blog, biasanya catatan kaki pada blog dibuat untuk memberikan atau menyampaikan informasi kepada pengunjung blog tersebut, bisa berupa ucapan terima kasih, pesan-pesan bahkan peringatan terhadap pengunjung blog.  Letak catatan kaki biasanya di ahir dari sebuah artikel.

Selain catatan kaki, biasanya para blogger menyertakan rich snippet sebagai pendamping catatan kaki tersebut. Tidak sedikit blogger yang memasang catatan kaki untuk memberikan peringatan kepada pengunjung blog mereka agar tidak menjiplak artikelnya, sehingga catatan kaki dianggap perlu.

Bagaimana dengan anda, apakah anda tertarik untuk memasangnya untuk berinteraksi dengan pengunjung blog anda? Atau hanya sekedar untuk mengucapkan terima kasih karena sudah berkunjung. Jika anda tertarik jadi mari kita mulai saja cara membuatnya.

Cara membuat Catatan Kaki Artikel

• Pada dashboar blog anda silahkan pilihTEMPLATE
• Klik EDIT HTML
• Ketika halaman html sudah terbuka silahkan klik sembarang didalam template anda dan tekan CTRL + F
• Setelah kotak kecil muncul dipojok kanan atas, masukan kode <data:post.body/> dan klik enter.
• Maka anda akan menemukan kode tersebut, silahkan geser kursor anda kebawah pasti akan ada dua kode <data:post.body/>.
• Setelah itu letakan kode berikut tepat dibawah kode <data:post.body/>.

        <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <div class='vcard' id='hcard-Riswan-Sucess' style='margin-top: 30px; padding: 10px; font-size: 12px; font-family: Arial; background: #dcdcdc; line-height: 1.3em; color: #777'>
        <span style='color:#777; font-size:18px; margin-top:10px'>Terima Kasih Telah Berkunjung</span><br/>
        Judul: <span itemprop='itemreviewed'><data:post.title/></span><br/>
        Ditulis Oleh <span class='fn n'><span class='given-name'><span itemprop='reviewer'><data:post.author/></span></span></span><br/>
        <span style='text-align: justify'>Jika mengutip harap berikan link DOFOLLOW yang menuju pada artikel <b><a expr:href='data:post.url'><data:post.title/></a></b> ini. Sesama blogger mari saling menghargai. Terima kasih atas perhatian anda</span>
        </div>
        </b:if>

• Simpan atau Save Template anda.

Keterangan:

• Gantilah RISWAN-SUCCESS dengan nama anda.

• Anda bisa mengubah warna backround, jenis font, dan ukuran font berdasarkan keinginan anda.

• Untuk yang sudah membaca artikel saya mengenai cara membuat read more otomatis, anda hanya perlu meletakan kode catatan kaki diatas tepat dibawah kode read more, karena kode <data:post.body/> sudah diganti dengan readmore.

Jika anda berhasil membuatnya maka hasilnya akan seperti gambar dibawah ini:

Demikianlah tutorial tentang cara membuat catatan kaki artikel pada blog, semoga artikel ini bisa membantu dan bermanfaat tentunya.

Cara Mudah Membuat Read More Otomatis Di Blog

Cara Mudah Membuat Read More Otomatis di Blog – banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Untuk demonya silahkan klik link dibawah ini.

CONTOH "READ MORE"

Cara membuat readmore otomatis dengan gambar

• Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
• Cari Kode </head>.
• Copy paste kode dibawah ini tepat di atas kode </head>

<!--ReadMore http://trikseosimple.blogspot.com-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9;  text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx =  s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

<!--Auto Read More Akhir-->

• Save Template anda.
• Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

• Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
• Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

• Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
• Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
• selanjutnya akan terbuka kode kode yang lain.
• geser atau scrol ke bawah dan cari kode 

 <data:post.body/>

•  Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

• Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.

Cara Menghapus Angka Pada Label

Cara Menghapus Angka Pada Label – Seperti pada umumnya setiap masing-masing label mempunyai angka-angka yang menunjukan jumlah artikel pada sebuah label. Label sendiri adalah sebuah tags untuk mengelompokan masing-masing dari setiap jenis atau katagori tertentu.

Para blogger umumnya menyukai label dengan angka karena menunukan jumlah artikel dalam label tersebut tetapi tidak sedikit yang ingin menghilangkan angka tersebut karena beberapa faktor. Jika saudara perhatikan navbar di bawah header dari blog ini adalah label-label yang saya hilangkan angkanya sehingga terlihat seperti navbar, sedangkan navbar yang asli berada di atas header.

Jika sahabat tertarik untuk menghilangkan angka-angka pada label silahkan ikuti tuorial simple berikut ini:

Cara Menghapus Angka Pada Label

• Tentu saja berhubungan dengan template anda, silahkan pilih TEMPLATE dan klik EDIT HTML.
• Setelah kotak HTML terbuka silahkan klik di sembarang tempat selanjutnya tekan Ctrl+F. Kotak kecil akan muncul di pojok kanan kotak HTML.
• Masukan kode (<data:label.count/>) di kotak tersebut dan tekan enter.
• Setelah ketemu hapus kode tersebut.
• Selanjutnya klik SAVE / SIMPAN
• Lihat hasilnya.

Setelah langkah-langkah di atas selesai anda telah berhasil menghilangkan angka pada label, jika anda tertarik angka pada arsip juga bisa di hapus.

Saya ahiri saja tutorial cara menghapus angka pada label semoga bisa membantu anda.

Cara Membuat Artikel Terkait / Related Post Untuk Blogger

Artikel terkait / Related post sangat bermanfaat untuk para pengunjung blog anda, karena akan memudahkan pengunjung untuk membaca artikel-artikel yang masih mempunyai topik yang sama. Bahkan jika anda perhatikan ketika anda menggunakan google search di bagian bawah ada beberapa saran pencarian yang masih berhubungan  dengan artikel atau sesuatu yang sedang anda cari, saya berkesimpulan itu adalah sesuatu yang hampir sama fungsinya dengan related post atau artikel terkait tetapi mungkin beda penamaan saja.

setelah mengetahui beberapa hal diatas jadi saya setuju dengan para master seo bahwa memasang related post atau artikel terkait adalah salah satu tehnik seo yang disarankan, karena google pun menggunakan hal yang sama.

Selanjutnya jika anda tertarik untuk memasang artikel terkait / related post ikuti langkah-langkah yang saya berikan. Gambar di bawah adalah contoh related post yang akan saya jelaskan cara memasangnya.

Cara membuat related Post

1. Masuk ke Blogger >> Template

2. Pilih EDIT HTML >> Tunggu sampai Kode HTML terbuka

3. Temukan kode ]]></b:skin> dan letakan kode dibawah tepat di atasnya.

/* Belajar blog dan seo Related Posts --- */
    .related-post .post-thumbnail {
    z-index: 1;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0;
    display: block;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 2px 2px 5px #444;
    -moz-box-shadow: inset 2px 2px 5px #444;
    box-shadow: inset 2px 2px 5px #555;
    }
    .related-post {
    float: left;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0 10px 10px 0;
    background: #F6F6F6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    .related-post .related-post-title {
    display: none;
    float: left;
    background: #000;
    color: #fff;
    text-shadow: none;
    font-weight: bold;
    padding: 10px;
    position: absolute;
    top: -20px;
    left: 40px;
    z-index: 2;
    width: 200px;
    -webkit-box-shadow: 0 0 2px #444;
    -moz-box-shadow: 0 0 2px #444;
    box-shadow: 0 0 2px #444;
    }
    .related-post:hover .related-post-title {display: block;}

4. Selanjutnya cari kode yang mirip dengan kode dibawah >> cari kode yang pertama dan jika tidak ada cari kode-kode selanjutnya.

<div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'/>
          <div class='post-footer-line post-footer-line-2'/>
          <div class='post-footer-line post-footer-line-3'/>
        </div>
      </div>

5. Jika anda sudah menemukan kode yang mirip dengan kode diatas, copy kode dibawah tepat dibawah kode di atas.

<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjayyOAxwml6B2-xzEAGhJQuFtKkkIsN23W0Qe1CiRBxDKeqwfK6AT5IrbSK_TNbxKPWRHdMdGRhNdxZ1bsFLgwFYvLcvj73W8xqiXsaHPy9cw9z1ICK3CzIoLDUxTe6lKDTKKGHzoLLR64/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>
    <div class='clear'/>

Keterangan:

• Warna Orange Bisa anda sesuaikan dengan ukuran template anda
• warna Merah Jumlah artikel yang akan anda tampilkan.

6. Simpan Template anda >> Selesai

Sekarang template anda sudah memeliki artikel terkait atau related post untuk memudahkan pengunjung menjelajahi blog anda.

semoga bermanfaat trimakasih telah mampir ke blog ini.