Add Christmas Social Bookmark Widgets to Blogger

This is a cool Christmas ornament sits on the corner of your blog with social bookmarking options for readers.On hover the ornament slides open with share buttons for Facebook, Twitter, Pinterest, StumbleUpon, Google Plus, LinkedIn, Email and the ShareThis button that offers even more options.

Add The Christmas Bookmark Gadget To Your Blog

Step 1. In The New Blogger Dashboard Click The Drop Down Menu For Your blog And Choose > Template > Under your blogs screenshot choose “Edit Html” > Then Proceed,

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code -

</head>

Step 3. Copy and Paste the following code Directly Above / Before </head>

<script type=”text/javascript” src=”http://w.sharethis.com/gallery/shareegg/shareegg.js”></script>
<script type=”text/javascript” src=”http://w.sharethis.com/button/buttons.js”></script>
<script type=”text/javascript”>stLight.options({publisher: “bea50586-2b9f-448d-947a-01385f28e305″, onhover:false});</script>
<link media=”screen” type=”text/css” rel=”stylesheet” href=”http://w.sharethis.com/gallery/shareegg/shareegg.css”></link>

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code

</body>

Step 5. Now Copy And Paste This Code Directly Above / Before </body>

<div style=’position: fixed; bottom: 2%; left: 2%;’><div id=’shareThisOrnament’ class=’shareEgg’></div>
<script type=’text/javascript’>stlib.shareEgg.createEgg(‘shareThisOrnament’, ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:’holiday’});</script>
</div><a href=”http://www.spiceupyourblog.com/”>Blogger WordPress Tips</a><!– End Christmas Share Code From http://www.spiceupyourblog.com/ –>

Read More »

Add Comment

Pramudya Ksatria Budiman Blogger EN , WIDGET

Widget Thumbnail Related Post for blogger with Tooltips

Creating Widget Thumbnail Related Post for blogger with Tooltips is another awesome and must have widget for blogger templates, and that is Related Posts Widget With Thumnail and hover Tooltip

How to add Related Post to blogger :

Please make a backup of your template before proceeding.
Step 1: Go to Blogger Dashboard>Template>Select 'Expand Widget'

Step 2: Now Search for ]]></b:skin> and add this code above it

.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;}

 

Step:3 Now search for these lines in your template.

 

  <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>

 

Once you find similar code in your template, paste this code below it.

 

<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/AVvXsEhqtVavYjdsj9dTxn-VYU7TxHkI6HUSt-KxZadMNTsTWMsdoozW4B9uzn3WsMLbXuOE87EGkJfOTKTL_1mrrSfYo8BKvpVN_uXv_87O41KdYtbIgLEdEYz4zXC-I5aIX6G-AaAGgUotKfK9/'};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'/>

 

That's All! Now save your template and preview it.

-You can change the number of posts display,Search for maxresults=6 and replace “6” with your desired number of related articles.
-To change the Widget and height of the thumbnails replace the four 98px with your desired numbers.

Read More »

Add Comment

Pramudya Ksatria Budiman Blogger EN , WIDGET

Membuat Widget Recent Post auto Scrolling

Widget Recent Post auto Scrolling adalah widget pada blogspot yang berisi dengan list daftar artikel artikel terbaru dengan efek bergulir kebawah secara otomatis.

Widget ini dilengkapi dengan judul posting, thumbnail pos, tanggal ketika pos itu diterbitkan dan jumlah komentar pada post. Jadi bahwa semua pilihan di atas sepenuhnya disesuaikan, sehingga Anda dapat dengan mudah menyesuaikan widget ini. Di atas adalah beberapa fitur widget ini sekarang mari kita lihat kode apa saja yang di gunakan untuk membuat widget ini. Pemasang widget ini sama dengan pemasang widget sebelumnya.

Sebagai contoh pertimbangan silahkan lihat saja ada blog saya ini, widget ini terpasang dengan baik dan menarik.

Untuk pemasangan ikuti petunjuk dibawah ini.

• Pertama anda masuk dahulu ke editing template blog

• Tambahkan kode dibawah ini diarea bawah kode <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Keterangan :
Bila kode diatas sudah ada silahkan abaikan saja, jangan sampai ada dua kode seperti diatas.

• Simpan Template

• masuk ke Layout - Add Gadgets - pilih HTML / java Script, tambahkan kode barikut ini kedalamnya

<style type="text/css" media="screen"><!-- /* ========== Scrolling Recent Posts Widget By masihpopuler.blogspot.com ======== */ #otowebsite-widget { overflow: hidden; margin-top: 5px; padding: 0px 0px; height: 385px; } #otowebsite-widget ul { width: 295px; overflow: hidden; list-style-type: none; padding: 0px 0px; margin: 0px 0px; } #otowebsite-widget li { width: 282px; padding: 5px 5px; margin: 0px 0px 5px 0px; list-style-type: none; float: none; height: 80px; overflow: hidden; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgc84KyOTxeNCyfeHHuvQFt65_NBZblG7vYdsjpuciuRAgk6pMjCHM4Bv4opEitI0TOv8ORtFLAhyphenhyphenYyFgu2tJXl9W2gS7FYyOLiuDEXQvZc4_17ZuRSlsggEIch-N35tDUa9I_5Oqtqw/s1600/otowebsite.blogspot.com-post.jpg) repeat-x; border: 1px solid #ddd; } #otowebsite-widget li a { text-decoration: none; color: #4B545B; font-size: 15px; height: 18px; overflow: hidden; margin: 0px 0px; padding: 0px 0px 2px 0px; } #otowebsite-widget img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; } #otowebsite-widget img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7); } #otowebsite-widget img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); } .spydate { overflow: hidden; font-size: 10px; color: #0284C2; padding: 2px 0px; margin: 1px 0px 0px 0px; height: 15px; font-family: Tahoma,Arial,verdana, sans-serif; } .spycomment { overflow: hidden; font-family: Tahoma,Arial,verdana, sans-serif; font-size: 10px; color: #262B2F; padding: 0px 0px; margin: 0px 0px; } /* ========== Scrolling Recent Posts Widget By masihpopuler.blogspot.com ======== */ --></style> <script language='JavaScript'>imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTWGSCz4-udBMkp0-yoyC3t8TnQSXcQaIn8xxUnJhX_6NVSlzGbupKn-GKGqaFimKBBesJUdVlkmnNa9zC1iOG-2a0ZqiTKd_Bz2OCNY8aD4wND36m3uQkfOjIQxU0xgnhd6qvjNJLQ/s1600/otowebsite-no-thumbnail.png"; imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTWGSCz4-udBMkp0-yoyC3t8TnQSXcQaIn8xxUnJhX_6NVSlzGbupKn-GKGqaFimKBBesJUdVlkmnNa9zC1iOG-2a0ZqiTKd_Bz2OCNY8aD4wND36m3uQkfOjIQxU0xgnhd6qvjNJLQ/s1600/otowebsite-no-thumbnail.png"; imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTWGSCz4-udBMkp0-yoyC3t8TnQSXcQaIn8xxUnJhX_6NVSlzGbupKn-GKGqaFimKBBesJUdVlkmnNa9zC1iOG-2a0ZqiTKd_Bz2OCNY8aD4wND36m3uQkfOjIQxU0xgnhd6qvjNJLQ/s1600/otowebsite-no-thumbnail.png"; imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTWGSCz4-udBMkp0-yoyC3t8TnQSXcQaIn8xxUnJhX_6NVSlzGbupKn-GKGqaFimKBBesJUdVlkmnNa9zC1iOG-2a0ZqiTKd_Bz2OCNY8aD4wND36m3uQkfOjIQxU0xgnhd6qvjNJLQ/s1600/otowebsite-no-thumbnail.png"; imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqTWGSCz4-udBMkp0-yoyC3t8TnQSXcQaIn8xxUnJhX_6NVSlzGbupKn-GKGqaFimKBBesJUdVlkmnNa9zC1iOG-2a0ZqiTKd_Bz2OCNY8aD4wND36m3uQkfOjIQxU0xgnhd6qvjNJLQ/s1600/otowebsite-no-thumbnail.png"; showRandomImg = true; boxwidth = 255; cellspacing = 6; borderColor = "#232c35"; bgTD = "#000000"; thumbwidth = 50; thumbheight = 50; fntsize = 15; acolor = "#666"; aBold = true; icon = " "; text = "comments"; showPostDate = true; summaryPost = 40; summaryFontsize = 10; summaryColor = "#666"; icon2 = " "; numposts = 10; home_page = "http://www.masihpopuler.blogspot.com/"; limitspy=4; intervalspy=4000; </script> <div id="otowebsite-widget"><script src='http://www.otowebsite.16mb.com/recent-posts-spy.js' type='text/javascript'></script></div>

• Selesai

Read More »

Add Comment

Pramudya Ksatria Budiman Tips Blogging , WIDGET

membuat Recent Post keren dengan Thumnail gambar

Tips kali ini adalah cara untuk membuat Recent Post / daftar list Artikel Terbaru disertai dengan thumbnail gambar.
Recent post keren ini hanya menggunakan metode Java Script jadi tidak perlu untuk menambahkan script ke dalam editing Template HTML.

Untuk contoh dari Recent Post blog keren ini lihat pada gambar dibawah

tertarik dengan widget Recent Post terbaru untuk blogger nya ?
silahkan langsung saja pasang pada halaman blogspot anda dengan cara seperti yang akan saya jelaskan dibawah ini:

Langkah untuk menambahkan Recent Post menarik dengan gambar di blog:

Step 1 : Pada halaman home blogger pilih Layout ( Tata Tetak )
Step 2 : pilih add gadgets pada lokasi dimana anda mau - Add Html / java script
Step 3 : masukan code dibawah ini kedalamnya

<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwAlciV_1CgF0U_9RsH-4XqaQRBiSfsdKJ12_GwcXsSmbJf63efi-3wbh1T9xfjZZU1W-p9S1HqJWKEUtRyMkYWYYhRhwxLQFyOMHsByP1ol59reRlUWhg5bKbFlQYJFMscGsp4yY54uOd/s1600/recent+post.png" width="145" height="43" alt="Recent Posts" /></center><br /><style type="text/css"><br />img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin:10px; border:1px solid #ccc;<br /> border-bottom:3px solid #87CEEB;<br /> border-top:1px solid #ddd;<br /> border-radius:10px;<br /> -webkit-border-radius:10px;<br /> -moz-border-radius:10px;}<br />img.recent_thumb:hover {padding:1px;width:65px;height:65px;border:1px;float:left;margin:10px; }<br />.recent_posts_with_thumbs {float:left;width: 100%;min-height: 70px;margin: 5px 5px 5px 5px;padding:0;font-size:12px;}<br />ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px; border:1px solid #ccc;<br /> border-bottom:3px solid #87CEEB;<br /> border-top:1px solid #ddd;<br /> border-radius:10px;<br /> -webkit-border-radius:10px;<br /> -moz-border-radius:10px;}<br />.recent_posts_with_thumbs a {text-decoration:none;}<br />.recent_posts_with_thumbs strong {font-size:10px;}<br /></style><br /><script style='text/javascript' src='http://bluekut-widgets.googlecode.com/files/recent-posts-widget-with-images.js'></script><br /><script style='text/javascript'><br />var numposts = 5;<br />var showpostthumbnails = true;<br />var displaymore = false;<br />var displayseparator = false;<br />var showcommentnum = false;<br />var showpostdate = false;<br />var showpostsummary = true;<br />var numchars = 100;</script><br /><script src='http://www.masihpopuler.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script><br /><div class='clear'></div><br /><span class='widget-item-control'><br /><span class='item-control blog-admin'><br /><a class='quickedit' href='//www.blogger.com/rearrange?blogID=1251654968934554442&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML1"));' target='configHTML1' title='Edit'><br /><img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/><br /></a><br /></span><br /></span><br /><div class='clear'></div>

Keterangan lebih lanjut :

URL www.masihpopuler.blogspot.com silahkan ganti dengan home page blogspot anda.

Step 5 : Save!

Read More »

Add Comment

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET

Cara membuat widget Recent post berdasarkan label blog

Recent post adalah sebuah widget yang berfungsi untuk menampilkan postingan terbaru pada suatu blog. Salah satu manfaat memasang Recent posts di blog adalah membuat pengunjung mengetahui topik apa yang sedang dibahas di blog kita. Bagi yang penasaran ini dia penampakannya.

Widget Recent Post Berdasarkan Label / Kategori

Nah itu adalah contoh hasil dari widget recent post berdasarkan label / kategori. Sekarang kita mulai pada langkah-langkah / proses pembuatan widget tersebut.

Langkah-Langkah Membuat Widget Recent Post Berdasarkan Kategori

1. Langkah pertama tentunya Sobat harus masuk ke blogger dengan akun Sobat.
2. Kemudian pilih halaman tata letak (Layout).
3. Pilih elemen laman >> pilih tambah gadget ( add a gadget).
4. Kemudian pilih HTML/Javascript.
5. Selanjutnya silahkan salin code di bawah ini dan masukkan pada widget tersebut kemudian simpan.

<div style="overflow:auto;width:100%px;height:300px;padding:10px;border:1px solid #0f0f0f"> <span id="pbl_labels"></span> <div id="pbl_posts"> Recent Posts </div><script type="text/javascript"> var jumlah_maksimum_post = 10; var dengan_ringkasan = true; var jumlah_karakter_ringkasan = 100; </script> <script src="http://septiamujizat.googlecode.com/files/recent-post.js"> </script> <script src="http://masihpopuler.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed"> </script></div>

Keterangan :

• Ganti huruf yang berwarna merah dengan alamat (url) blog Sobat
• var jumlah_maksimum_post = 10 adalah jumlah maksimum post yang ingin ditampilkan
• var dengan_ringkasan = true ganti "true" dengan "false" jika tidak mau disertai ringkasan
• var jumlah_karakter_ringkasan = 100 adalah jumlah karakter ringkasan post Anda

Read More »

Add Comment

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Cara untuk membuat Thread Comments di blogger

Cara untuk membuat atau mengaktifkan fitur Thread Comment di blogger, untuk penjelsan mengenai Thread comment pada blogger dan fungsinya serta tampilannya bagaimana bisa disimak dibawah ini.

Apa itu thread comment ? Thread Comments adalah fitur terbaru dari blogger/blogspot. Fungsingya adalah membuat komentar pada postingan berulir dan lebih menarik di bandingkan fitur komentar sebelumnya. :aneh
System Thread Comments ini belum diterapkan bebas di Custom Template, dan saat ini otomatis berlaku bagi tampilan dynamic views kamu. Template bawaan dari Blogger support thread comments ini. Tapi sebenarnya meski kamu menggunakan template custom, maka thread comment ini sudah aktif, tapi cuman pada tampilan hape/mobile. Coba Anda masukkan ?m=1 pada belakang URL postingan Anda. Halaman blog Anda akan ditampilkan secara sederhana gaya mobile dan thread comments ini bisa digunakan. Lalu bagaimana cara mengaktifkannya agar thread comments ini bekerja pada custom template blog kamu ? Silakan ikuti langkah-langkahnya dibawah ini:

• Agar reply/thread comments bekerja kamu cuman perlu ubah feed kamu menjadi penuh. Untuk mengaturnya silahkan pergi ke Settings - Other, pada Allow Blog Feed pilih Full
  
  
  
  
• Pada pilihan tampilan komentar, pilih Embed. Untuk mengaturnya silahkan pergi ke bagian Settings - Posts And Comments, pada Comment Location pilih Embedded.
  
  
  
  
  
• Jangan lupa simpan, lalu lihat hasilnya.

Bagimana mudah kan ? Eiiits.. jangan kemana-mana dulu.. Ada lagi cara yang kedua, yakni pada Edit HTML. Akan tetapi kalau thread comments sudah aktif hanya dengan cara diatas, kamu tidak perlu pake cara yang kedua ini.
Okelah langsung saja saya kasih tau cara yang kedua ini, yakni dengan cara mengaktifkannya pada Edit HTML. Berikut Cara-caranya:

• Pertama tentu anda harus mengaktifkan pengaturan komentar anda, ke halaman setting > Comments. Pilih show dan Embedded below post untuk Comment Form Placement
• Kedua jangan lupa backup templates untuk menjaga hal yang tidak di inginkan.
• Buka halaman Design > Edit HTML > centang expand widgets templates
• Cari kode <b:include data='post' name='comments'/>. Kira kira kodenya seperti di bawah ini.
  
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:include data='post' name='comments'/>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
  </b:if>
   
• Jika sudah ketemu, silahkan anda ganti semua kode tersebut dengan kode di bawah ini.
  
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threaded_comments'/>
  <b:else/>
  <b:include data='post' name='comments'/>
  </b:if>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:if cond='data:post.showThreadedComments'>
  <b:include data='post' name='threaded_comments'/>
  <b:else/>
  <b:include data='post' name='comments'/>
  </b:if>
  </b:if>
   
• Lalu kamu Simpan template dan lihat hasilnya.
  

Naah.. sudah selesai.. cukup sekian yaa.. oh iya, nantikan postingan Kamu Klik selanjutnya mengenai Fitur Thread Comments ini yaa :cool

Read More »

Add Comment

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Cara membuat scroll di widget archive blog

Membuat widget Archive blog dengan fungsi scroll tentunya akan memberiklan sebuah gaya tampilan yang lebih menarik.
tidak hanya itu jika archive tersebut memiliki jumlah artikel yang banyak maka akan begitu memakan ruang kosong di halaman blog kita.
untuk mensiasatinya kita perlu menambahkan fungsi scroll down di dalam widget archive blog tersebut.
caranya cukup mudah, silahkan simak langkahnya berikut ini,

Cara Membuat Scroll Pada Blog Archive (Arsip Blog) Tampilan Lebih Menarik

1. Login ke Blogger.
2. Di halaman Dasboard, kita pilih Rancangan Blogger.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Kemudian carikan kode berikut ini :

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

Bila sudah ketemu lalu sesuaikan template bloggnya seperti berikut

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:300px;'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>

Keterangan kode diatas :
Warna hijau adalah kode yang perlu diperhatikan.
Warna biru adalah kode yang perlu untuk ditambahkan

Sudah paham ? silahkan dicoba dan semoga berhasil.  :cool

Read More »

Add Comment

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET

Membuat daftar isi blog paling menarik berdasarkan label

Tips blogger saat ini adalah bagaimana cara untuk membuta Daftar Isi blog secara lengkap dengan tampilan yang lebih menarik, pada akhirnya daftar isi ini akan berurut berdasarkan label label dari artikel tersebut.
Daftar isi pada blog sangat membantu pengunjung untuk menjelajahi lebih dalam lagi terhadap isi isi atau postingan dari blog kita, makanya ayo mulai sekarang pasang saja tips ini.
Daftar isi atau blog Index kali ini berbeda dari yang sebelumnya, dengan tampilan yang lebih menawan dan cantik untuk dipandang.
terlebih ini mnggunakan fungsi buka tutup dengan klik pada setiap labelnya.
untuk contoh silahkan klik demo berikut ini :
DEMO

Sudah jelas dengan penegertian dan maksudnya, sekarang tiba saatnya untuk penerapan di blog kita.
caranya pertama pastikan login ke akun blogger anda, bukan milik orang lain.

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Cari kode ]]></b:skin> "agar mudah dengan CTRL + F"
4. Paste kan kode CSS dibawah ini tepat diatas kode no. 3

/*--------BBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
    background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}

Belum selesai, simpan dulu template bloggnya.
Sekarang ke pemasangan daftar isi blog nya, caranya :

1. Buat dahulu Page blogger (bukan New Posting tapi new Page) dengan Blank Page.
2. kemudian edit HTML

Beri nama Page dengan Daftar Isi / bisa terserah anda. dan masukan kode dibawah ini ke HTML tadi

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://masihpopuler.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Note: ganti url http://masihpopuler.blogspot.com dengan alamat blog kamu.
sekarang simpan dan publish.
selesai sudah dan coba dibuktikan hasilnya.

Read More »

Add Comment

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET