widget

Cara Membuat Widget Random Post

Chaerul Akbar - 9/14/2016 04:04:00 pm

<a href="http://chaerulakbar.blogspot.com/2016/09/cara-membuat-widget-random-post.html">Membuat Widget Random Post</a> - bertujuan untuk menampilkan postingan artikel secara acak yang ada di blog kamu, Widget random post ini hanya menampilkan judul dari postingan, Jadi widget ini tidaklah memberatkan loading blog kamu ketika ada pengunjung yang mampir. 
 
Menambah widget random post sangat mudah kamu hanya perlu memasukkan kode script yang ada di bawah di ini. 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://go.ad2upapp.com/afu.php?id=773575" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Cara Membuat Widget Random Post Di Blog" border="0" height="417" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaWbS6eyxOcb5zPThpXC7b4Agg1sP4hMxxjvNdLN-FNgnGqZHIqvhG5mIYOHRwSjGujjqLfvHJhPr697_AftFx1LzLNvB8i3GPGe1PnWH3IOQFcygPCNKSrTWmCW8CUn3A7dh9AqkGIigD/s640/random-post-tanpa-thump-01.jpg" title="Widget Random Post" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Random Post</td></tr>
</tbody></table>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://demo-blog-chaerulakbar.blogspot.co.id/2016/09/postingan-demo-ke-empat.html" target="_blank">Demo</a></li>
<li>Download</li>
</ul>
</div>
<div class="clear">
</div>
 
 #Cara Membuat Widget Random Post 
 
1. Masuk ke blog kamu. 
2. Menu tab Tata letak. 
3. Tambahkan gadget di sidebar yang kamu inginkan. 
4. Pilih HTML/Javascript dan masukkan kode yang ada di bawah ini. 
 
<blockquote class="tr_bq">
<ul id="random-posts"></ul> 
<script> 
//<![CDATA[ 
var homePage = "http://chaerulakbar.blogspot.co.id/", 
numPosts = 5; 
function randomPosts(a){if(document.getElementById("random-posts")){var e=shuffleArray(a.feed.entry),title,link,img,content="",ct=document.getElementById("random-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="random-posts"><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}function shuffleArray(arr){var i=arr.length,j,temp;if(i===0)return false;while(--i){j=Math.floor(Math.random()*(i+1));temp=arr[i];arr[i]=arr[j];arr[j]=temp}return arr}var random_post=document.createElement('script');random_post.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results=999&callback=randomPosts';document.getElementsByTagName('head')[0].appendChild(random_post); 
//]]> 
</script><a href="http://chaerulakbar.blogspot.co.id" target="_blank">Random Post</a></blockquote>
" Tulisan warna merah di atas silakan ganti dengan URL kamu, dan angka 5 yang berwarna biru silakan ganti sesuai jumlah random postingan yang ingin di tampilkan " 
 
5. Klik Simpan dan lihat hasilnya. 
 
Dengan adanya widget random post pengunjung akan dengan mudah melihat isi dari blog kamu yang mungkin berada pada laman blog yang di buka oleh pengunjung, Sekian tutorial <a href="http://chaerulakbar.blogspot.com/2016/09/cara-membuat-widget-random-post.html">cara membuat widget random post</a> semoga bermanfaat.
<div class='hrecipe'>
 Title: Cara Membuat Widget Random Post 
 Posted by:Unknown 
 Published :2016-09-14T16:04:00+08:00 


 Rating: 3.5 
 Reviewer: 5 Reviews 
Cara Membuat Widget Random Post
</div>

9/14/2016 04:04:00 pm

Cara Membuat Sticky Widget Sidebar Di Blog

Chaerul Akbar - 9/12/2016 05:17:00 pm

<a href="http://chaerulakbar.blogspot.com/2016/09/membuat-sticky-widget-sidebar.html" target="">Membuat Efek Sticky widget Di Sidebar</a>, Apa pernah kalian mampir di sebuah blog dan mendapatkan widget di blog itu ada bagian element atau widgetnya ketika kamu melakukan scroll kebawah pada halaman/page widget tersebut diam/tertahan, itulah maksud dari pembahasan kita kali ini. 
 
Baca Juga: 
<ul>
<li><a href="http://chaerulakbar.blogspot.co.id/2016/09/cara-memasang-widget-perlabel-di-blogger.html" target="_blank">Cara memasang widget perlabel di blog</a></li>
<li><a href="http://chaerulakbar.blogspot.co.id/2016/08/membuat-multi-widget-di-blog.html" target="_blank">Membuat multi widget di blog</a> </li>
</ul>
Pada kesempatan kali ini saya akan berbagi tutorial yang saya rangkum dari berbagi sumber untuk membuat sticky widget pada sidebar. 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara membuat sticky widget di sidebar blog" border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgftAi1FSBLAlGtJvmzziHUVrHfhqtz-ZTO1gA8CawiNBrIe4yUiQxD4LK5U028P0yp9c8tpERMHrXLLL4yGalhTwkonbu_PxajstaB8KjIniEocclcnPPEtM47jOUw8PTY3bFGuiRa7vh-/s640/widgetsticky01.jpg" title="Sticky Widget" width="640" /></div>
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://demo-blog-chaerulakbar.blogspot.co.id/2016/09/demo-widget-sticky-sidebar.html" target="_blank">Demo</a></li>
<li><a class="download" href="http://chaerulakbar.blogspot.com/2016/09/membuat-sticky-widget-sidebar.html" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
 
#Cara Membuat Sticky Widget Di Sidebar 
 
1. Masuk blog kamu. 
2. Pilih Edit HTML template blog. 
3. Cari kode </body> dan letakkan kode yang ada di bawah ini tepat di atas </body>. 
<blockquote class="tr_bq">
<script> 
//<![CDATA[ 
bs_makeSticky("Letakkan kode, ID Widget yang mau di Sticky"); 
function bs_makeSticky(elem) { 
    var bs_sticky = document.getElementById(elem); 
    var scrollee = document.createElement("div"); 
    bs_sticky.parentNode.insertBefore(scrollee, bs_sticky); 
    var width = bs_sticky.offsetWidth; 
    var iniClass = bs_sticky.className + ' bs_sticky'; 
    window.addEventListener('scroll', bs_sticking, false); 
    function bs_sticking() { 
        var rect = scrollee.getBoundingClientRect(); 
        if (rect.top < 0) { 
            bs_sticky.className = iniClass + ' bs_sticking'; 
            bs_sticky.style.width = width + "px"; 
        } else { 
            bs_sticky.className = iniClass; 
        } 
    } 
} 
//]]> 
</script> 
<style> 
.bs_sticking {position:fixed; top:0; z-index:9999;} 
</style>  </blockquote>
<div style="text-align: center;">
sumber kode seocips.com</div>
 
Sebelum save, Kamu harus menggati tulisan warna merah sesuai ID Widget yang mau di buat sticky. 
4. Simpan/Save dan lihat hasilnya. 
 
Sekian tutorial<a href="http://chaerulakbar.blogspot.com/2016/09/membuat-sticky-widget-sidebar.html" target=""> membuat efek sticky widget di sidebar</a>, Semoga bermanfaat.
<div class='hrecipe'>
 Title: Cara Membuat Sticky Widget Sidebar Di Blog 
 Posted by:Unknown 
 Published :2016-09-12T17:17:00+08:00 


 Rating: 3.5 
 Reviewer: 5 Reviews 
Cara Membuat Sticky Widget Sidebar Di Blog
</div>

9/12/2016 05:17:00 pm

Cara Memasang Widget Perlabel Di Blogger

Chaerul Akbar - 9/09/2016 11:05:00 pm

Disini saya mencoba untuk berbagi trik yang saya dapat dari blog seocips.com, Mungkin dengan memasang widget berdasarkan label sangat membantu untuk memudahkan pencarian artikel yang ada di blog tanpa mesti klik sana klik sini, dan pemasang widget perlabel ini sangan membantu sekali terutama buat saya sendiri. 
 
Gak usah lama-lama kita langsung saja ke pembahasan kita, Bagaimana Cara Memasang Widget Perlabel Di Blogger? 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://go.ad2upapp.com/afu.php?id=773575" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Widget Perlabel Di Blogger Berdasarkan Kategori" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZDHYcljQrUBXxY5RfYQkwNm5T7D8hHebKEAryevkakbm_lDYkIV6GKFwATF0uHERr0JLeOH74nzx1eQa1ziZsBmiwPtT0kh_m4Pw_NkDN9EXs6KirjN_xaV0Eykxge2DFInx6TUBqdVt/s400/resentpost.jpg" title="Widget Perlabel" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(Widget Perlabel Di Blog)</td></tr>
</tbody></table>
1. Silakan Ke Blogger. 
2. Masuk - Template - Edit HTML. 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://go.ad2upapp.com/afu.php?id=773575" imageanchor="1" style="margin-left: auto; margin-right: auto;" target="_blank"><img alt="Template Edit HTML" border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBONAuFDPD__SE8_ky9S6ZasSEAXjDlLTBp8UqYQXHDAEtS-yEVKL4XcZNyeKBgKymGqE4PeOgf3YtBRwi84qdHoKOD3rnZmWTc5Gzh900IYAYvwfdvlLms86xvsQtSSNg-wvXbPU6X9RL/s640/Edit-HTML.jpg" title="Template Edit HTML" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">(Template-Edit HTML)</td></tr>
</tbody></table>
3. Cari kode ]]></b:skin> dan letakkan kode yang ada di bawah tepat di atas kode ]]></b:skin>. 
 
<blockquote class="tr_bq">
 img.label_thumb{ float:left; padding:5px; border:1px solid #8f8f8f; background:#D2D0D0; margin-right:10px; height:55px; width:55px; } img.label_thumb:hover{ background:#f7f6f6; }      .label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; adding: 0; } ul.label_with_thumbs li { padding:8px 0; min-height:65px; margin-bottom:10px; } .label_with_thumbs a {} .label_with_thumbs strong {}</blockquote>
 
 4. Lanjut cari kode </head> dan letakkan kode yang ada di bawah di atas </head>. 
<blockquote class="tr_bq">
 <script src='https://cdn.rawgit.com/Brando07/share/newbe/perlabel-SEOCIPS.js' type='text/javascript'></script></blockquote>
 
5. Save Template. 
 
Sekarang kamu tinggal menambah widget di sidebar kam. 
 
6. Masukkan kode di bawah ini. 
 
<blockquote class="tr_bq">
<div style="overflow:hidden; width:100%px; height:auto; padding:10px; border:1px dotted #ddd; background-color:#fff"><script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 50;</script><script type="text/javascript" src="http://www.chaerulakbar.blogspot.com/feeds/posts/default/-/template?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div></blockquote>
 
Ganti angka 4 dengan jumlah postingan yang ingin kamu tampilkan, http://www.chaerulakbar.blogspot.com ganti dengan nama blog kamu dan template ganti dengan nama label kamu. 
 
Munkin sekian dulu <a href="http://chaerulakbar.blogspot.com/2016/09/cara-memasang-widget-perlabel-di-blogger.html">Cara Memasang Widget Perlabel Di Blogger </a>Semoga bermanfaat. 
 
Semua kode yang ada di atas di ambil dari www.seocips.com 
<div class='hrecipe'>
 Title: Cara Memasang Widget Perlabel Di Blogger 
 Posted by:Unknown 
 Published :2016-09-09T23:05:00+08:00 


 Rating: 3.5 
 Reviewer: 5 Reviews 
Cara Memasang Widget Perlabel Di Blogger
</div>

9/09/2016 11:05:00 pm

MEMBUAT MULTI WIDGET DI BLOG

Chaerul Akbar - 8/07/2016 04:58:00 pm

Langung saja membuat tab multi widget di blog. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://galeripopart.com/" target="_blank"><img alt="http://galeripopart.com/" border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8dOGtY3Kp6Cui_DKihpUTNbvxgdEG-eV8y3BoyzKUjH-Fd6Ajw9fmx7sr3E1NfwjrbHoXKWhSuBc9nXoEgU1uxBu1lDMmhWFMiqS74Sx2Djzi6UFpsS4mlUjYno2E2Dyu36GEIW89h5dI/s320/Multi-widget-dua.png" width="320" /></a></div>
<ul>
<li>Login ke blog kamu</li>


<li>Masuk template</li>


<li>Pilih Edit HTML</li>


<li>Cntr+F - cari tulisan </head> </li>


<li>Letakkan kode ini di atasnya</li>
</ul>
<code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/></code> 
 
<div class="separator" style="clear: both; text-align: center;">
<code><a href="http://galeripopart.com/" target="_blank"><img alt="http://galeripopart.com/" border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKhXZerjRQMs43hUtXNQg0Z8KtjQ7vJLxOctb4v12yOc2wh25OTlDGjSAIUAssHeGXEOB0GUM9HTHpSczwEz5K4UXT6QamEZRn87b0aWdR83HWaE4FkIuF-UQJuvcSZDSiEcN8EdoVqcU4/s320/Multi-widget-tiga.png" width="320" /></a></code></div>
<code>
</code>
 
<ul>
</ul>
 
<ul>
<li>Klik simpan templated. </li>
</ul>
Selanjutnya kita beralih ke 
<ul>
<li>Tata letak </li>
<li>Tambahkan widget </li>
<li>Pilih HTML/JavaScript </li>
<li>Masukkan kode ini</li>
</ul>
<code>-----------------------------------------------------------------------------------</code> 
<pre><code><style type="text/css">
        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}
        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding:</code></pre>
<pre><code> 3px 5px;border: 1px solid</code></pre>
<pre><code>#bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
        html .blogtabs h2.active {background: #fff;}
        .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background:</code></pre>
<pre><code> #fff;clear:both;margin:0;}
        .btab, #showtabs {display:none;}
        </style>

$(document).ready(function() {
        $('#showtabs').simpleBlogTab ({organictabs: 3});
        });
        </script>

<div id="showtabs"></div></code></pre>
<pre><code>-----------------------------------------------------------------------------------</code></pre>
 
Ganti angkanya ({organictabs: 3}); sesuai banyak tap yang ini anda buat simpan widget dan hasilnya sama seperti gambar di bawah ini.  
 
<div class="separator" style="clear: both; text-align: center;">
<a href="http://galeripopart.com/" target="_blank"><img alt="http://galeripopart.com/" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3heRpWzTjeZhSBi1CYmXOrBdZkvlMnjp4vF3NvrrQb1_5mxfWiM23IkQ6l1AGv9kE43UbBWmlJfgH8DmbnHYXJTg-RLvwjBzMFda4GJqJzOrT9Thyb1AWXvBeqvruJDWdxyErgq2TnVN6/s320/Multi-widget.png" width="243" /></a></div>
<code> </code>
<code>Artikel Keren Lainnya</code> 
<ul>
<li><code> </code><a href="http://chaerulakbar.blogspot.co.id/2016/08/3-game-terbaik-android.html" target="_blank">3 game android terbaik</a><code> </code></li>
<li><a href="http://adf.ly/vDzVN" target="_blank">Peredaran Darah Perifer, Rangsangan Dan Kontraksi Jantung </a></li>
<li><a href="http://adf.ly/vDzgi" target="_blank">Kehidupan Laut Kutub Utara dan Selatan</a><a href="http://adf.ly/vDzgi" target="_blank"> </a><code> </code></li>
<li><code></code><a href="http://chaerulakbar.blogspot.co.id/2011/06/key-gen-nero-7.html" target="_blank">Keygen Nero 7 </a></li>
<li><code></code><a href="http://chaerulakbar.blogspot.co.id/2011/08/sendokbolic-penguat-sinyal-3g.html" target="_blank">Sendokbolic Penguat sinyal 3G</a></li>
</ul>
Di ambil dari berbagai sumber publikasi <a href="http://chaerulakbar.blogspot.co.id/" target="_blank">CA</a><code> </code> 
<ul>
</ul>
<div class="alert-message success" style="text-align: center;">
<div style="text-align: center;">
JANGAN LUPA SHARE YAH KLO BERMANFAAT :D
 </div>
</div>
<div class='hrecipe'>
 Title: MEMBUAT MULTI WIDGET DI BLOG 
 Posted by:Unknown 
 Published :2016-08-07T16:58:00+08:00 


 Rating: 3.5 
 Reviewer: 5 Reviews 
MEMBUAT MULTI WIDGET DI BLOG
</div>

8/07/2016 04:58:00 pm

Chaerul Akbar

Cara Membuat Widget Random Post

Cara Membuat Sticky Widget Sidebar Di Blog

Cara Memasang Widget Perlabel Di Blogger

MEMBUAT MULTI WIDGET DI BLOG

Popular

Blog Labels

Blog Archive

Anime

Template Blog

Other