Pramudya Ksatria Budiman: WIDGET

Home » Semua post berkategori WIDGET

Showing posts with label WIDGET. Show all posts

Showing posts with label WIDGET. Show all posts

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.

gadgets blogger

gadgets blogger

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:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:’holiday’});</script>
</div><a href=”http://www.spiceupyourblog.com/”>Blogger WordPress Tips</a><!– End Christmas Share Code From http://www.spiceupyourblog.com/ –>

Pramudya Ksatria Budiman Blogger EN , WIDGET

Widget Thumbnail Related Post for blogger with Tooltips

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 == "item"'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>   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='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</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.

Pramudya Ksatria Budiman Blogger EN , WIDGET

Membuat Widget Recent Post auto Scrolling

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

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

membuat Recent Post keren dengan Thumnail gambar

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!

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

Recent Post

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

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

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

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.

Cara untuk membuat Thread Comments di blogger

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 == "static_page"'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<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 == "static_page"'>
<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 == "item"'>
<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

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Cara membuat scroll di widget archive blog

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 + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<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

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET

Membuat daftar isi blog paling menarik berdasarkan label

Membuat daftar isi blog paling menarik berdasarkan label blogger

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.

Go To Blogger > Design > Edit HTML

Back up your template

Cari kode ]]></b:skin> "agar mudah dengan CTRL + F"

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 :

Buat dahulu Page blogger (bukan New Posting tapi new Page) dengan Blank Page.
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&alt=json-in-script&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.

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET

Menambahkan Efek hujan salju di blog

tips blogger Menambahkan Efek hujan salju di blog

Mempercantik tampilan blog di bagiaan halaman posting dengan menggunakan efek hujan salju yang berjatuhan ini sangat bagus "very cool" lah pokoknya.
makin segar tampak dari blog yang menggunakan widget yang satu ini, berguna juga untuk menyegarkan suasana pengunjung blog kita.

Pemasangannya sangat mudah, ikuti saja langkah berikut ini .
hujan salju yang bertebaran di blog ini merupakan widget yang bagus untuk dipasang, mau pasang ? silahkan.

Pertama anda harus login terlebih dahulu ke akun blogger.
bila sudah jangan tutup blog ini terlebih dahulu, karena anda akan membutuhkan link berikut ini untuk pemasangannya.

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Cara menambah twitter button follower di blog

Twitter follower disni akan lebih lengkap karena disisipi dengan jumlah Follower yang ada di akun twitter kita.
bisa menambahkan button untuk follow twitter dan juga button untuk berbagi (share) ke twitter. Kali ini kita juga akan masih belajar tentang blog yang akan menambahkan button twitter follower counter. Maksudnya adalah menampilkan button yang akan menampilkan jumlah follower twitter. Selain itu juga bisa untuk mempromosiin twitter kita, agar ada yang mengklik button itu lalu melihat profil twitter kita dan siapa tahu akan difollow. yang pasti bukan untuk pamer jumlah follower :D

Untuk mendapatkan button twitter follower counter, kunjungi http://twittercounter.com/ dan lalu login dengan menggunakan akun twitter. Lalu pilih My Buttons dan akan muncul beberapa pilihan button yang bisa kita tambahkan di blog kita. Jika kita mengambil kode dari sana maka yang didapat adalah java script yang jika itu ditambhakan ke blog, maka saat kita mengklik button itu akan di bawa ke akun profil yang ada di twittercounter.com bukan akun twitter. Jadi untuk bisa memodifikasinya kita hanya butuh melihat source gambar (image). Dengan cara menaruh cursor di gambar button lalu kita klik kanan dan klik lihat gambar. Dan kita akan bisa melihat URL gambar button di adrres bar, misalnya untuk milik saya;

http://srv2.twittercounter.com/counter/index_bird.php?username=GetzHitzh

http://srv2.twittercounter.com/counter/ani/GetzHitzh/ffffff/11111

Jika kamu sudah login di http://twittercounter.com/, bisa saja langsung mengganti username GetzHitzh dengan username twittermu sendiri.

Cara Menambahkan Button Twitter Follower Counter
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<a href="http://twitter.com/GetzHitzh" target="_blank"><img alt="follow me on twitter" src="http://srv2.twittercounter.com/counter/index_bird.php?username=GetzHitzh" title="follow me on twitter"/></a>

5. Ganti GetzHitzh dengan username twitter kamu sendiri. Dan Simpan jika sudah selesai.

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Membuat facebook recommendation Bar untuk dipasang di blog

Membuat facebook recommendation Bar untuk dipasang di blog

Cara untuk membuat widget facebook Recommendation Bar yang kali ini kita bahas sebenarnya sudah banya sekali tersebar di blog-blog teman sebelah, saya sendiri menemukan tips yang lumayan menguntungkan untuk dipakai di blog ini dari blogger juga
Facebook menyediakan plugin atau widget untuk blogger yang bisa lebih menyatukan blog kita dengan situs jejaring sosial terpopuler facebook. Ada kotak komentar facebook, tombol like, selain itu salah satu widget yang bisa dimanfaatkan oleh blogger adalah facebook recommendation bar, yaitu berupa widget yang berbentuk kotak di dalamnya ada link (post) yang disarankan untuk juga dlihat.

Widget facebook yang berbentuk bar ini akan muncul otomatis, di pojok bawah blog ketika pembaca men-scroll ke bawah sejauh tertentu. Kotak kecil itu akan membuka kotak besar yang berisi link (post) yang diajurkan untuk dibaca juga berdasarkan jumlah like atau yang sudah disukai teman di facebook. Ada juga tombol like (suka), sehingga akan bisa membuat blog kita lebih menyatu dengan facebook dan bisa meningkatkan traffik blog.

Manfaat atau keuntungan menambahkan facebook recommendation bar yang mempunyai judul "Simak juga yang berikut ini" ini adalah agar pembaca banyak pilihan. Tentu dengan muncul sendiri di bar bawah, akan menarik pengujung blog untuk melihat link (post) yang disarankan, link itu pun disertai thumbnail. Sehingga akhirnya, pemasangan facebook recommendation bar ini dapat membuat pengunjung berlama-lama di blog kita atau meningkatkan page view blog.

Cara Membuat Facebook Recommendation Bar.
1. Kunjungi Facebook Apps, bisa https://developers.facebook.com/apps/.
2. Klik tombol Create New App yang ada di pojok kanan atas.

Cara Menambahkan Facebook Recommendation Bar

3. Lalu akan muncul kotak, beri nama aplikasi yang dibuat, terserah mau diberi nama apa, biarkan yang lain kosong (dafault). Kemudian klik Lanjutkan.

Cara Menambahkan Facebook Recommendation Bar

4. Ketik kode keamanan captcha, lalu klik Lanjutkan.

Cara Menambahkan Facebook Recommendation Bar

5. Muncul halaman baru, klik tab Website with Facebook Login dan masukan URL blog kamu, seperti gambar di bawah ini. Yang lain biarkan saja, kemudian klik Simpan Perubahan.

Cara Menambahkan Facebook Recommendation Bar

6. Di atas kita akan melihat dua nomor kode, yaitu App ID dan App Secret, yang kita butuhkan hanyalah kode App ID.

Cara Menambahkan Facebook Recommendation Bar pada Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode <html lalu ganti kode berikut ini:

<html xmlns:fb='http://ogp.me/ns/fb#'

4. Cari kode <head> dan taruh kode berikut di bawahnya:

<meta content='article' property='og:type'/>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

5. Cari kode <body> atau jika ketemu tag <body lalu taruh kode berikut di bawah tag tersebut:

<div id='fb-root'/>
<script>
//Facebook Recommendation Bar
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=5424684134567889";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.pageType != "static_page"'><div style='z-index:999999; position:absolute;'>
<fb:recommendations-bar action='like' max_age='0' num_recommendations='3' read_time='10' side='right' site='http://www.masihpopuler.blogspot.com' trigger='40%'/></div>
</b:if></b:if>

6. Kamu harus mengganti kode yang berwarna merah dengan App ID yang sudah didapatkan tadi dan ganti http://www.masihpopuler.blogspot.com dengan URL blogmu sendiri. Kamu dapat mengatur tampilan, seperti: 3 adalah banyak judul yang akan ditampilkan, 10 waktunya muncul setelah detik ke 10, right adalah letaknya di kanan. Widget tersebut akan muncul ketika membuka salah satu halaman post tidak di homepage utama.

7. Simpan Template jika sudah selesai.

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Mengganti tanggal postingan menjadi icon calender

Sepertinya ini baru bagi saya, namun bila ada yang sudah tahu dahulu sebelumnya ya jangan terlalu mengabaikan postinganku ini :D

untuk mengganti atau merubah tanggal terbit postingan menjadi ikon kalender tidak begitu sulit, namun sebenarnya ini juga agak rumit. Tapi seberapa susah sih bagi teman teman yang sudah pada master :D

oiyaa, buruan saja deh ke tutorial cara mengganti icon Calender di tanggal postingan saya jelaskan sedikit :
Simak dengan benar benar ya,

Yang pertama kita lakukan adalah mengganti format tanggal terbit postingan dengan seperti ini (mm.dd.yyy). trobos saja caranya begini

Login ke blogger >> Setting >> Formating >> ganti "Date header Format" / format penganggalan menjadi (mm.dd.yyy)

Langkah kedua adalah menyeting HTML Template blog

Edit Template >> Expand Widget templates

1. Cari kode berikut ini ya <TITLE><data:blog.pageTitle/></TITLE> , kalo dah ketemu pasang kode dibawah ini dibawahnya kode tadi.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. langsung cari kode ini juga

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

Kalo gak ketemu cari kode ini :

h2.date-header {
margin:1.5em 0 .5em;
}

3. jika kode di no.2 dah ketemu pasang kode dibawah ini di bawahnya kode no.2

.dateblock {
background: url("http://img600.imageshack.us/img600/3576/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Note : kode http://img600.imageshack.us/img600/3576/bluecalend.gif adalah alamat gambar icon tanngalnya, bisa dirubah kok.
Saya bagikan sedikit contohnya :

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif
http://img805.imageshack.us/img805/9918/blue2calend.gif
http://img600.imageshack.us/img600/3576/bluecalend.gif
http://img837.imageshack.us/img837/4311/greencalend.gif
http://img137.imageshack.us/img137/3329/orangecalend.gif
http://img196.imageshack.us/img196/8339/pinkcalend.gif
http://img818.imageshack.us/img818/1760/yellowcalend.gif

4. langkah selanjutnya kamu cari kode yang seerti ini di templates blog nya <data:post.dateHeader/> .
kalo udah ketemu tinggal hapus kode tadi dan diganti dengan yang dibawah ini:

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan dulu template nya untuk cek silahkan dicoba udah jadi apa belum,
Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET

Menambahkan Popup Facebook Like Button dengan Timmer di blog

Hasilnya sangat bagus nih, setiap kali artikel kita terbuka maka Popup Facebook like button ini akan selalu muncul, lumayan kan untuk memperbanyak yang nge- like fanpage facebook kita.

Preview Popup Facebook Like Button with Timing

Popup Facebook Like Button with Timing

Cara Memasang Popup Facebook Like Button with Timming di Blog

Untuk memasangnya pada blogger caranya sangat mudah, tutorialnya :

Step pertama :

Adding To Blogger

Go To Blogger > Design > Edit HTML
Backup your template
Copy Paste kode dibawah sebelum kode </body>

<style>#fblikepop {    background-color: #fff;
    display: none;
    position: fixed;
    top: 200px;
    _position: absolute;
/* hack for IE 6*/
    width: 450px;
    border: 10px solid #6F6F6F;
    z-index: 200;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin: 0pt;
    padding: 0pt;
    color: #333333;
    text-align: left;
    font-family: arial,sans-serif;
    font-size: 13px;
}#fblikepop body {
    background: #fff none repeat scroll 0%;
    line-height: 1;
    margin: 0pt;
    height: 100%;
}

.fbflush {
    cursor: pointer;
    font-size: 11px !important;
    color: #FFF !important;
    text-decoration: none !important;
    border: 0 !important;
}
#fblikebg {
    display: none;
    position: fixed;
    _position: absolute;
/* hack for IE 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 100;
}#fblikepop #closeable {
    float: right;
    margin: 7px 15px 0 0;
}#fblikepop h1 {
    background: #6D84B4 none repeat scroll 0 0;
    border-top: 1px solid #3B5998;
    border-left: 1px solid #3B5998;
    border-right: 1px solid #3B5998;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}#fblikepop #actionHolder {
    height: 30px;
    overflow: hidden;
}#fblikepop #buttonArea {
    background: #F2F2F2;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    min-height: 50px;
}#fblikepop #buttonArea a {
    color: #999999 !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 10px !important;
}#fblikepop #buttonArea a:hover {
    color: #333 !important;
    text-decoration: none !important;
    border: 0 !important;
}#fblikepop #popupMessage {
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 22px;
    padding: 8px;
    background: #fff !important;
}#fblikepop #counter-display {
    float: right;
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 5px 0 0 0;
    text-align: right;
    line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
kakinetworkdotcom01username="allbloggingtips",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="04",
kakinetworkdotcom01time="20",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://allbloggingtips.com/wp-content/uploads/2012/06/popup-with-timer-codez.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>

Step tertakhir tinggal simpan templatenya

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET

Animated Social Sharing Widget with Cool Hover untuk blogger

Social Sharing Widget pada blogger

Social Sharing Widget ini sangat menarik dengan efek yang mengembang dan terlihat begitu cantik saat ketika terkena kursor, lihat saja sebagai bukti pada blog saya ini.
penempatan yang berada dipojok kiri bagian bawah blog ini juga membuat Widget Social Sharing ini jadi lebih ringan dan tidak menggangu isi konten blog.

Tujuan sharing sitenya juga banyak dan pastinya adalah yang paling populer seerti Facebook dan Twitter .

Kegunaan Social Sharing Widget pada blogger

Manfaat utama widget Social Sharing ini masih sama dengan yang sebelumnya pada artikel membuat Widget Social Boomark melayang di blog .

Cara memasang Social Sharing Widget with Cool Hover pada Blog

Step pertama :

Menambahkan ke Blogger/Blogspot!

Go to Blogger Dashboard > Template
Take a backup of your template.
Cari kode </body>
Tambahkan kode dibawah ini sebelum kode </body>

<div class="shr_ss shr_publisher">

</div>


<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>


<script type="text/javascript">
       (function() {
            var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
            sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
            var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
        })();
        </script>

Step selanjutnya tinggal kita Save dan selesai

Pramudya Ksatria Budiman Tips Blogging , WIDGET

membuat widget JQuery and CSS3 Social Sharing keren di blogger

Widget Social Sharing ini sangat cantik dan menarik sob, untuk pemasangannya sangat mudah dan tidak memakan banyak tempat, jelas saja karena ini mengunakan JQuery dan CSS3 ada scriptnya.
Tampilan Social Sharing ini sangat menarik, yaitu terletak pada bagian pojok halaman blogger.
Bagusnya lagi ini widget bisa di minimize atau diminimalkan.

ayo yang tertarik untuk memasang JQuery and CSS3 Widget Social Sharing di Blognya pribadi segera ikuti tutorial singkat berikut ini :

Cara menambahkan JQuery and CSS3 Widget Social Sharing Blogger?

Step Pertama :

Go to blogger-->design--->edit HTML
Cari kode </head>
Copy and paste kode dibawah ini tepat diatas kode </head> .

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dshare.js" type="text/javascript">
</script>
<script src="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Djquery.cookie.js" type="text/javascript">
</script>
<link href="https://gj37765.googlecode.com/svn/trunk/html/%5Bwww.gj37765.blogspot.com%5Dshare-style.css" rel="stylesheet" type="text/css"></link>

Step terakhir yaitu tinggal Save

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Membuat Notice Box atau Papan Informasi dengan animasi di Blogger

Notice Box animasi

Yang terbaru kali ini adalah cara untuk membuat Notice Box animated untuk dipasang pada widget blogger.

Notice Box animasi / Papan Pemberitahuan pada Blog

Notice Box adalah kotak untuk memberikan pemberitahuan berupa apa saja yang berkaitan dengan blog kita, yang pemberitahuan ini ditujukan dan akan dibaca oleh pengunjung.
Banyak juga fungsinya kok, selain untuk keperluan pribadi ini juga menarik untuk hiasan dinding halaman blog.

Silahkan yang berminat memilikinya pasangkan segera pada halaman blog anda dengan mengikuti tutorial berikut ini.

Cara membuat Notice Box dengan Animasi

Step Pertama :

Login ke Blogger pilih >> Layout.
pilih add a Gadget of HTML/JavaScript type.
Dan tinggal masukan kode berikut ini :

<script src="http://code.jquery.com/jquery-1.2.3.min.js" type="text/javascript">
</script>
<script src="https://making-different.googlecode.com/svn/trunk/makingdifferent_widget2012.js" type="text/javascript">
</script>
<style>
#makingdifferent_widget2012{
font-family: "Consolas", "Courier New", Courier, mono, serif;
border: 1px solid;
margin: 10px 0px;
padding:15px 15px 15px 50px;
background-repeat: no-repeat;
background-position: 5px center;
position:relative;
color: #00529B;
background-color: #BDE5F8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuRaLeTX_eA-BOowuxJpDN_N3ApYBvQZO7fVVES-Y0OPCF9qwS36Xp0lhzj6Bm5oPyu_q13drDnmHwL5rx5S6SPPic1y2bIB3A7s1AvRWYneqRgo3AHYhAdPNiaIdN-fCyEzvuaVB2_lDS/s1600/icon-info.png');
}
</style>
<div id="makingdifferent_widget2012">
<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/AVvXsEjLlar8hjthQpNTw-NGii7XYGAsp_0DgrOJrEl-uUR-mr9Vh94YIp79JDQWGIJM1I5NBoTgi4uo5_FtUoXMEgv_AW4A628cOtWUiOUEVAvSZU_bnmRhFX0Sb2fj1CKnaJScKPekWLN_92kO/s1600/popover-close-button.gif" /></a>This Is Your Message .You can change it to Your need. Click on close button on right to exit this box.
</div>

Step terahir tinggal Save

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Membuat Related Post di Blogger dengan mudah

Membuat Related Post atau sering juda dikenal dengan Artikel Terkait memang diperlukan ada di halaman blog kita.

Kegunaan Related Post atau Artikel terkait

Selain untuk hanya mempercantik halaman blog, Related Post / Artikel Terkait ini juga sangat membantu bagi pengunjung untuk lebih leluasa mencari artikel yang dikehendakinya saat berada di blog kita.
Related post disini akan menunjukan beberapa Artikel / Postingan yang isi kontennya masih ada kaitannya dengan artikel yang sedang dibaca.
manfaat lain dengan adanya widget atau fitur Related Post di blog adalah dapat membuat pengunjung akan jauh dari rasa bosan.

untuk membuat Related Post / Artikel terkait simak tutorial berikut ini:

Cara membuat Related Post atau Artikel Terkait dibawah Postingan

Step : - 1

masuk ke Blogger-->Template-->Edit HTML-->Procees.
Klik pada "Expand Widget Template"
Cari kode </head> di dalam blog HTML
Copy & paste kode dibawah ini tepat sebelum kode diatas

<style> #related-posts { float : left; width : 480px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; font-weight: bold; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL4qtAv2kZl1EGCDTV6WuRCU5HskTxSNCNrUp-ny_7tMIzgW4RaDL5I3QqN9PVf3j9UTvocrDHGK-xsMjzKQps8OV6hlK4lOJl5FtmoKNOpiEugI-snQJsa5It8h9497-Pn6fF2fJeA6ZJ/s1600/%5Bwww.gj37765.blogspot.com%5Drp.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/bloggerwidgets01/related-posts-widget.js' type='text/javascript'/>

Step : - 2

Selanjutnya cari kode <data:post.body/>
Copy & paste kode dibawah ini tepat setelah kode diatas.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Step : - 3

Save the template.

Note: Kode berikut ini dapat diganti sesua keinginan untuk berpa banyaknya artikel yang akan ditampilkan (max-results=5).

Pramudya Ksatria Budiman Tips Blogging , Tips Populer , WIDGET

membuat Widget Social Boomark melayang di blog

membuat Widget Social Boomark melayang di blog

Berbeda dengan yang sebelumnya saya bagikan yaitu Cara membuat wigdet share button social bookmarking diatas artikel , pada kali ini yaitu dengan metode melayang di dalam blog.
Namun fungsi dan kegunaan masih sama yaitu sama sama untuk bertujuan untuk mempermudahkan bagi pengunjung blon untuk membagikan artikel blog kita ke sosial media, contoh saja yang paling Top adalah facebook dan twitter.
untuk hasilnya silahkan dicoba terlebih dahulu ya kawan.

untuk langkah pemasangannya sebagai berikut:

Cara untuk membuat Widget Social Boomark melayang di blog

1. Login Ke Blogger.

2. Masuk Dashboard

3. Pilih Edit Tata Letak

4. Pilih "Add gadget"

5. Setelah itu Pilih "HTML/JavaScript".

6. Lalu copy paste-kan kode di bawah ini ke dalam box "konten"

Kode Script Social Boomark melayang

<style><br />/*-------ELMAZZ Social Share------------*/<br />#floatdiv {<br />    position:absolute;<br />    width:94px;<br />    height:229px;<br />    top:0;<br />    left:0;<br />        z-index:100<br />}<br /><br /><br />#mbtsidebar {<br />        border:1px solid #ddd;<br />        padding-left:5px;<br />    position:relative;<br />    height:220px;<br />    width:55px;<br />    margin:0 0 0 5px;<br />}<br /></style><br /><br /><br /><br /><br /><div id="floatdiv"><br /><div id="mbtsidebar"><br />    <table cellpadding="1px" cellspacing="0"><br /><tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;"><br /><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like><br />    </td><br />    </tr><br /><tr><br />    <td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;"><br /><g:plusone size="Tall" expr:href="data:post.url"><br />    </g:plusone></td><br />    </tr><br /><tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;"><br /><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="<b style="color: #6aa84f;">GetzHitzh</b>">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br />    </td><br />    </tr><br /><tr><br />    <td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;"><br /><p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://ageboy.blogspot.com/" target="_blank">Widgets</a></p><br />    </td><br />    </tr><br />    </table><br /></div><br /></div><br /><script type="text/javascript"><br />// JavaScript Document<br /><br /><br />   <br /></script>

Keterangan lebih lanjut

untuk kode yang berwarna Hijaun GeztHitzh diatas silahkan diganti dengan username twitter kalian kalau punya. kalau belum silahkan lewati saja.
Terimakasih.

Pramudya Ksatria Budiman Tips Blogging , WIDGET

Subscribe to: Comments ( Atom )