SEMUA ADA DISINI: link

Showing posts with label link. Show all posts

Tuesday, 26 November 2013

Menu Navigasi dengan Image Hover

Sudah banyak postingan saya tentang Navigasi maupun Navbar ada yang menggulung atau menggelinding alias berputar begitu juga dengan yang saya beri nama Navbar Auto Hidden disisi kanan :q; yang merupakan kreasi untuk membuat Blog Tampil Beda :z;

Sekarang saya akan berbagi lagi dengan kawan Cara Membuat Menu Navigasi dengan Image, yang kalau di-Klik akan berubah warnanya seperti hover

Tampilan Menu Navigasi

Seperti Judul Artikel ini Menu Navigasi sedangkan pada Demo hanya Navigasi Sosial itu hanyalah contoh saja, kalau kawan ingin untuk Menu, caranya sangat gampang, cukup siapkan image seperti berikut. :y;

Coba kawan perhatikan image tersebut, yang atas sedikit agak gelap, sedangkan yang bawahnya agak terang :r;

Oke kawan langsung ke Cara Membuatnya :

Siapkan Image sesuai kebutuhan
Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas kode berikut diatas ]]></b:skin>

ul#bbc{width: 180px; margin: 0px auto 0px auto;list-style: none;padding-bottom:30px}
* html ul#bbc{width: 185px;list-style: none;padding-left:10px;padding-bottom:0px;margin:0;}
ul#bbc li {display: inline;}
ul#bbc li a {display: block;float: left; height: 30px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3l6cGCmRHfqmoFn6d2nbVvYiQFntgZNipe893ow68Ly0U7f_BUVEnCt_xGvEIgsDiumjF8LsamGXq_8YP3IheAk5OB6X8u_u58Zy83r812q8joIMg07FuVPeraiLix9K7HtdxyJTF_7J/s1600/sprite_thumb.png'); text-indent: -9999px;}
ul#bbc li a.facebook {width:30px;background-position:0 0;}
ul#bbc li a.twitter {width:30px; background-position: -34px 0;}
ul#bbc li a.gplus {width:30px;background-position: -68px 0;}
ul#bbc li a.email {width:30px;background-position: -102px 0;}
ul#bbc li a.rss {width:30px;background-position: -136px 0;}
ul#bbc li a.facebook:hover,ul#bbc li a.facebook:focus {background-position: 0 -30px;}
ul#bbc li a.twitter:hover,ul#bbc li a.twitter:focus{background-position:-34px -30px;}
ul#bbc li a.gplus:hover, ul#bbc li a.gplus:focus {background-position: -68px -30px;}
ul#bbc li a.email:hover, ul#bbc li a.email:focus {background-position: -102px -30px;}
ul#bbc li a.rss:hover, ul#bbc li a.rss:focus {background-position: -136px -30px;}

Teks yang saya beri warna merah [180px dan 185px] untuk lebar image, silahkan disesuaikan kalau kawan ingin menambah atau menguranginya, sedangkan teks yang berwarna merah berikutnya untuk nama dan Link yang ditampilkan, nilainya silahkan dihitung sendiri

Selanjutnya Copas script berikut dan simpan sesuai keinginan kawan masih pada Template atau bisa disimpan pada gadget untuk pemanggilan

<ul id='bbc'><li><a class='facebook' href='http://www.facebook.com/pages/KASTAONE/19292868552' title='facebook'>Facebook</a></li><li><a class='twitter' href='https://twitter.com/BLOGBEGO' title='Twitter'>Twitter</a></li><li><a class='gplus' href='https://plus.google.com/101141011579420362463' title='GPlus'>GPlus</a></li><li><a class='email' href='http://feedburner.google.com/fb/a/mailverify?uri=blogbegocreation' title='Email'>Email</a></li><li><a class='rss' href='http://feeds.feedburner.com/blogbegocreation' title='RSS'>RSS</a></li></ul>

Silahkan kawan ganti Link-link saya tersebut dengan Link kawan
Simpan Template / Blog kawan

Friday, 22 November 2013

Pasang Avatar disamping Nama Author

Sebelumnya saya berbagi Cara Pasang Image disamping Judul Artikel dan Cara Pasang Avatar Author disamping Judul Artikel :q; yang sekarang masih tetap pada Avatar cuma penempatannya disamping Nama Author atau Admin :q;

Nama Admin [pemilik Blog] biasanya diikuti dengan tanggal dan waktu posting yang penempatannya dibawah Judul atau dibawah Isi Artikel :r;

Kalau kawan ingin memasangnya di Blog Kodenya hampir sama dengan Cara Pasang Avatar Author disamping Judul Artikel, yang beda cuma ukurannya :y; kalau ditempatkan dibawah Judul ukurannya lebih kecil disebabkan memakai huruf lebih kecil sedangkan kalau dibawah Isi Artikel ukurannya sedikit lebih besar dibandingkan yang lainnya :x;

Cara membuatnya :

Seperti biasa masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Cari tag ]]></b:skin>
Kalau sudah ketemu hapus atau ganti dengan script berikut

.avatar-author{float:left;margin:0 5px 5px 0;border:0px solid #999;border-radius:50%;padding:0;width:20px;height:20px}
]]></b:skin>
<script>
//<![CDATA[
function av(a){var b=a.entry.author[0];c=b.name.$t;d=b.gd$image.src.replace(/\/s[0-9]+(-*c*)\//,'/s30$1/');document.write('<img alt="'+c+'" class="avatar-author" src="'+d+'" title="'+c+'"/>')}
//]]>
</script>

Teks yang saya beri warna biru adalah posisi penempatannya - disesuaikan

Teks yang saya beri warna merah adalah besarnya Avatar - disesuaikan

Selanjutnya cari <data:post.body/> yang kedua, terus scroll keatas untuk mencari Judul atau kebawah untuk akhir Isi Artikel, yang kodenya kurang lebih seperti berikut :

<span class='vcard author'><span class='fn'>
<span itemprop='reviewer'><data:post.author/>
</span></span></span>,
<data:post.dateHeader/>
<script>document.write(date);</script>
- <span class='updated'>
<data:post.timestamp/></span>
-------------------dstnya
<data:post.body/>

Tambahkan kode berikut diatasnya <script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/> sehingga menjadi seperti berikut

<script expr:src='"/feeds/posts/default/" + data:post.id + "?alt=json-in-script&amp;callback=av"'/>
<span class='vcard author'><span class='fn'>
<span itemprop='reviewer'><data:post.author/>
</span></span></span>,
<data:post.dateHeader/>
<script>document.write(date);</script>
<span class='updated'>
<data:post.timestamp/></span>
--------------- dstnya
<data:post.body/>

Simpan Template kawan

Monday, 11 November 2013

Tuesday, 22 October 2013

Slide Carousel Recent Post untuk Blogger

Kawan masih ingat postingan saya tentang Slide Carousel untuk Daftar Isi, :y; sekarang masih tetap tentang Slide Carousel cuma tampilannya sangat berbeda dengan yang dulu setelah saya adakan perbaikan-perbaikan maupun pengurangan atau menghilangkan kode-kode yang tidak perlu, :z; hal ini terispirasi dari Artikel Terkait berisi Thumbnail perhatikan screenshotnya dibawah ini :q;

Tampilan Carousel sekarang

Carousel lama

Cara Membuatnya :
Bagian Template

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Script berikut diatas ]]></b:skin>

#bbccarousel{width: 100%;height:175px;position:relative; display:block;background: transparent;margin:0 10px 8px auto;}
#bbccarousel h3{color:#00f;margin:0 2px 2px;font-size:10px;}
#bbccarousel .container{position:absolute;left:0px;width:580px; height:175px; overflow:hidden;padding:0;margin:0 auto 0;}
#bbccarousel .thumb{float:left;margin-right:10px;}
#bbccarousel .thumb:hover{filter:alpha(opacity=70);opacity:.7}
#bbccarousel ul{width:100000px;position:relative;margin-top:10px;}
#bbccarousel ul li{background:#FFF;display:inline;text-align:center; font:bold 12px Arial;width:102px;height:150px;border:1px solid #000;margin:0 2px 20px 4px;padding:6px;}
#bbccarousel ul li a.slider_title{color:#222;display:block;margin:0;padding:0;}
#bbccarousel ul li a.slider_title:hover{color:#F00;}
#bbccarousel a img{display:block;background:none;margin-top:0;}

Teks yang saya beri warna merah silahkan disesuaikan dengan lebar penempatannya
Selanjutnya Copas Script berikut dibawah ]]></b:skin> atau diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://sites.google.com/site/blogbegocreation/javascript/bbccarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAH9dy09Chpwjh4oO5HUA3kSET13uhcNqyAHmHQjR17pSl0mAxFag3tC8zpkQiCxeNs5XNnjQzNDmQMfuiQMJyiDWdGV5T6S3oO6ibNCTM9NV6Fmd-nkhC7Nk-czJfFN120BqCLvHvKv0/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
recentposts1 = 10;
function removeHtmlTag(strx,chop){
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);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < recentposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel =='alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Ags","Sep","Okt","Nov","Des"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="80" class="alignnone" src="'+img[i]+'"/></a></div><h3>'+daystr+'</h3><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Teks yang beri warna merah [jquery], kalau pada Template kawan sudah ada walau sejenisnya, jquery tersebut bisa kawan hilangkan
Teks yang berwarna Biru untuk lebar dan tinggi image
Simpan Template kawan

Bagian Tata Letak

Pada Tata Letak pilih Tambah Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas Kode berikut kedalamnya

<div id='bbccarousel'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+recentposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/></div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#bbccarousel .container").bbcCarousel({
auto:800,
scroll: 1,
speed: 3000,
visible: 5,
start: 1,
circular: true,
});
})})(jQuery)
</script></div></div>

Visible: 5, adalah jumlah yang ditampilkan - disesuaikan
Simpan Blog kawan

Friday, 18 October 2013

Cara Membuat Artikel Terkait berisi Thumbnail

Seharusnya Cara Membuat Artikel Terkait berisi Thumbnail ini sudah lama saya bagikan biar ngumpul dengan Cara Membuat Artikel Terkait lainnya :y; tapi dasar saya sedikit pelupa ya terlupakan jadinya,

Screenshot

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas script berikut dibawah ]]></b:skin> atau diatas </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {float:center;text-align:left;margin: 0 auto 0;text-transform:none;height:100%;min-height:100%;padding:5px 5px 0 5px;}
#related-posts h2{font-size: 1.6em;font-weight: normal;color: black;font-family: Georgia, “Times New Roman”, Times, serif;margin-bottom: 0.75em;padding-top: 0em;}
#related-posts a{color:black;padding:0 2px;margin:0 5px 0;}
#related-posts a:hover{color:black;padding:0;background-color:#999;}
</style>
<script type='text/javascript'>
var defaultnoimage='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9j2XeQxCMpUvWVuNSoRtWW_gWx6__C4UA_1i8MSdlppPBZ6pu-_uwGkp113iIiUTZ_7zNxy4wsVsm9ntnprYM5xVPkFcBtaUpW4WrCvPO6OomPuhrzsrtUMqHVQfz0J_qbFnfoLxGn2A/s400/noimage.png';
var maxresults=6;
var splittercolor="#ff0000";
var relatedpoststitle="Artikel Terkait";
</script>
<script src='https://sites.google.com/site/blogbegocreation/javascript/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

Selanjutnya cari <div class='post-footer-line post-footer-line-1'>
Copas Kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

</b:if>

Teks [angka 6 dan 7] yang saya beri warna merah adalah jumlah yang ditampilkan, dengan selisih 1[satu]
Teks yang saya beri warna Biru adalah Judul silahkan disesuaikan
Simpan Tmplate kawan

Tuesday, 1 October 2013

Menu Navigasi Pilihan BlogBego

Sekarang saya akan berbagi dengan kawan beberapa Menu Navigasi yang kelihatan sedikit unik lain dari yang lain hasil karya oleh Master-master Blogger :q; mudah-mudahan selera kawan sama dengan selera saya, yang semuanya ini saya temukan saat Blogwalking. Silahkan kawan Lihat langsung Demonya maupun untuk mendownload kalau ingin mencoba memakainya

How to Create a CSS3 Wheel Menu

Selengkapnya....

CREATIVE CSS3 ANIMATION MENUS

Selengkapnya...

CSS3 vertical multicolor 3D menu

Selengkapnya....

Elegant Dark CSS3 Menu Template

Selengkapnya.....

Flat Turquoise Vertical

Selengkapnya....

Pure CSS DropDown Menu

Selengkapnya...

Sweet tabbed navigation using CSS3

Selengkapnya....

Sebenarnya masih banyak lagi yang lainnya, kalau ada waktu lain waktu saya sambung lagi :q; untuk sekarang saya cukupkan hanya sampai disini dulu
Selamat mencoba

Wednesday, 25 September 2013

Perpendek Link.......... dibayar ?!

Kawan masih ingat postingan saya Ngeblog.... mau cari apa ?! yang isinya tentang cara mendapatkan Ceperan atau Penghasilan Tambahan pada Blog, :z; itulah yang akan saya bahas sekarang dengan Judul Perpendek Link....... dibayar ?! :q;

Sebenarnya diluaran sana banyak web/site yang menyediakan layanan seperti ini cuma yang saya bahas sekarang khusus untuk P.pw kenapa ?! :r; karena saya bergabung dan mencoba cara ini yang khususnya sampai saat ini tersimpan untuk Template yang sudah saya bagikan :x;

Program yang ditawarkan disamping Memperpendek Link juga ada program Referralsnya yang dengan kata lain kita bisa mengajak teman untuk bergabung yang tentunya dibayar juga, bagaimana seruuu bukan :y; kelebihan lainnya ini merupakan pengalaman saya pribadi kita bisa mendownload file sendiri, dihitung dan dibayar juga nantinya :q; selanjutnya kalau kawan berminat dan ikut bergabung dengan saya di P.pw, saya bisa menrekomendasikan » selanjutnya pilih dan isikan Data kawan sesuai Form yang tersedia untuk membuat Account, kalau semuanya sudah terisi dengan benar, nanti kawan akan mendapatkan Email Konfirmasi

contoh : jumlah penghasilan saya

System pembayaran : Penghasilan kawan akan dibayar setiap bulannya setelah minimal berjumlah $5. untuk Paypal dan $10 untuk Payoneer, sedangkan untuk Paypal bisa menyusul pembuatannya.

Cara Kerja : setiap pengunjung yang meng-Klik Link kita yang sudah dipendekan itu akan menunggu 5 detik untuk dialihkan ke P.pw atau selengkapnya silahkan kawan baca disini
cuma satu pesan saya sesuai aturan mainnya, kawan jangan meminta, menyuruh untuk meng-Klik Link tersebut dengan menjanjikan Hadiah, Bonus atau sejenisnya

Selamat Bergabung !!!

Saturday, 21 September 2013

Daftar Isi berdasarkan Katagori Pilihan

Daftar Isi sekarang ini diciptakan oleh Master Duy Pham, Blogger tetangga :q; kita yang hampir mirip modelnya seperti yang diciptakan oleh Master Taufik Nurrohman :z; yang masing-masing mempunyai kelebihan dan kekurangannya seperti Katagori [Label] bisa dipilih untuk ditampilkan maupun disembunyikan begitu juga dengan jumlah Judul yang ditampilkan dengan kata lain ada selanjutnya / sebelumnya [Next - Prev] perhatikan screenshotnya :

Langsung ke Cara membuatnya silahkan kawan mampir karena toolnya sudah tersedia, kawan cukup memasukan datanya saja

screenshot

Masukan url Blog kawan pada Địa chỉ blog
Tentukan Judul yang ingin ditampilkan pada Số lượng bài hiển thị trên 1 trang
Ketik Katagori yang tak ingin kawan tampilkan pisahkan dengan Koma [,] pada Tên nhãn không cho hiển thị, phân cách bởi dấu phẩy (,)
Selanjutnya pilih Get code
Copas scriptnya pada HTML
Kawan bisa edit kembali script tersebut supaya sesuai selera

<div style='width:96%;padding:5px;margin:0;border:1px solid #999;background:#ccc;'><style type='text/css'>
#show-cat{float:left;margin-right:5px;width:95px;height:310px;overflow-x:hidden;overflow-y:auto;line-height:.8em}#show-cat ul{margin:0;padding:0;border-top:1px solid #333;}#show-cat ul li{list-style-type:none;margin:0;border:1px solid #333;padding:0}#show-cat ul li a{display:block;padding:10px}#show-cat ul li a,#navi-cat a{background:#fff;color:#00F;text-decoration:none}#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}#show-cat ul li a:hover,#navi-cat a:hover{background:#999;color:#fff}#show-post{float:left;width:77%;font-size:12px;line-height:1.8em;}#show-post ul li{list-style-type:none}#navi-cat{padding:20px 0}#navi-cat a{margin-right:5px;border:1px solid #333;}#navi-cat a,#navi-cat span{padding:5px 10px;}#navi-cat span{float:right}</style>
<div id='show-cat'></div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://blogbego-creation.blogspot.com';cat_numb=10;cat_pre='Prev';cat_nex='Next';cat_remove=['Admin','software','blog','Blogger','link'];
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#464546!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){for(var j=0;j<cat_remove.length;j++){if(cat[i].term==cat_remove[j]){cat.splice(i,1)}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<div style='clear:both'></div>
</div>

Teks yang saya beri warna Biru adalah kode tambahan

Teks yang berwarna Merah adalah kode setelah saya Edit

Hasilnya seperti screenshot pertama

Selamat Mencoba

Wednesday, 18 September 2013

Animasi Gadget Social Bookmark

Kali ini saya tetap berbagi tentang Gadget Social BookMarking dengan model Animasi :q; yang saya dapatkan pada tempat yang sama, terus terang sekarang ini saya lagi males membuat postingan dikarenakan saya fokus pada merancang Template, :z; sedangkan postingan harus tetap ditambah untuk mengecilkan posisi yang tempo hari membengkak hampir 200% [maaf nggak nyambung] :r;

screenshot

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Script berikut diatas atau sebelum </body>

<div class='shr_ss shr_publisher'/>


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

Simpan Template kawan

Refrensi : Paul Crowe

Sunday, 15 September 2013

Slide Social Bookmarking Gaya Telor

Kali ini saya akan berbagi dengan kawan Cara Membuat Slide Social Bookmarking Gaya Telor :r; yang saya dapatkan saat jalan-jalan ke Webnya Master Paul Crowe yang tampilannya tetap ditempat [fixed] dan saat mouse didekatkan maka akan terbuka untuk melihat isinya

screenshot

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Script berikut dibawah ]]></b:skin> atau diatas </head>

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

Selanjutnya Copas Script berikut diatas </body>

<div style='position: fixed; bottom: 2%; right: 2%;'>
<div class='shareEgg' id='shareThisOrnament'/>
<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>

Teks yang saya beri warna merah bisa kawan ganti sesuai keinginan untuk tampilan

Simpan Template kawan

Thursday, 5 September 2013

Navigasi Menu Widget untuk Blogger

Lagi-lagi Navigasi Menu, mudah-mudahan kawan tidak bosan dengan Navigasi :q; yang saya posting sekarang, kalau tak unik atau spesial sekali tak mungkin saya bagikan sama kawan walau ini bukan ciptaan saya, terus terang Navigasi Menu Widget untuk Blogger ini saya dapatkan pada W2B :z; memakai jQuery library dan Blogger JSON feed API memang sedikit berat untuk Blog kita, makanya saya tidak menyarankan harus dicoba dan dipasang pada Blog kawan

screenshot

Kalau memperhatikan screenshot-nya Menu - Sub Menu [Katagori] - Isi / Judul + Imagenya, cuma masing-masing sub Menu - Judul jumlahnya dibatasi karena menyangkut tempat, lebih jelasnya silahkan lihat

Bagaimana kawan setelah melihat Demonya !!!
Cara Membuatnya

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML
Copas Css berikut tepat diatas ]]></b:skin>

/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

Selanjutnya Copas Script berikut dibawah ]]></b:skin> atau diatas </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function($) { $('#w2bajaxmenu').ajaxBloggerMenu({ numPosts : 4, // Number of Posts to show defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image });});
</script>

Seandainya pada Template kawan sudah ada plugin jQuery teks yang saya beri warna merah diatas bisa dihilangkan

numPost :4, merupakan 4 Judul yang ditampilkan, hal ini bisa disesuaikan / ditambah jumlahnya asal Height diatasnya harus disesuaikan lagi, :x; dan hasilnya akan memakai tempat melorot kebawah

Sampai disini Simpan Template kawan
Selanjutnya pillih Tata Letak - Tambahkan Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas kode berikut kedalamnya

<ul id="w2bajaxmenu" class="w2bmenu">
<li> <a href="#">Home</a> </li>
<li> <a href="#">Example 1</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li><li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a></li>
</ul> </li>
<li> <a href="#">Example 2</a>
<ul>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li>
<li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li>
</ul> </li>
<li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li>
</ul>

Jangan lupa ganti URL / Link diatas sesuai kebutuhan
Simpan Blog kawan

Sunday, 18 August 2013

Tampilkan Artikel Berdasarkan Katagori

Kawan masih ingat dengan postingan saya Tampilkan Artikel berdasarkan Katagori plus Thumbnail :q; karena berisi image secara otomatis akan sedikit memberatkan Blog, walau Thumbnail / image-nya bisa tidak ditampilkan :y; disebabkan scriptnya sedikit lebih banyak atau postingan saya tentang Tampilkan Judul saja dari Katagori

Sekarang yang akan saya bagikan dengan kawan Tampilkan Artikel Berdasarkan Katagori yang sedikit berbeda karena tanpa image :z;

Caranya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambahkan Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas kode berikut kedalamnya

<script src="https://sites.google.com/site/blogbegocreation/javascript/kategori.js"></script>
<script>
var numposts = 15;
var showpostdate = false;
var showpostsummary =false;
var numchars = 125;
</script>
<script src="http://blogbego-creation.blogspot.com/feeds/posts/default/-/tips%20trik?orderby=published&alt=json-in-script&callback=rp">
</script>

Silahkan kawan ganti teks yang saya beri warna merah :

Angka 15 adalah jumlah Katagori dari Artikel yang ingin kawan tampilkan
blogbego-creation dengan URL Blog kawan
tips%20trik dengan Katagori dari Artikel yang ingin kawan tampilkan, [%20] adalah spasi yang aslinya [tips trik]
var showpostdate untuk menampilkan tanggal [false/true = pilih]
var showpostsummary untuk menampilkan sedikit isi postingan dari Katagori [false/true = pilih]
Simpan Blog kawan

Script ini bisa digabung pada gadget yang sudah ada atau pada satu gadget bisa diisi beberapa script Katagori asal masing-masing diberi Judulnya
Sebenarnya pada Google [Blogspot] widget ini sudah ada cuma Katagori yang bisa ditampilkan dalam satu widget maksimal [5] dan tidak bisa digabung

Tuesday, 23 July 2013

Komentar GPlus untuk Template yang Gagal

Sebelumnya saya sudah berbagi dengan kawan cara meng-Aktifkan Komentar GPlus :q; tentunya bagi kawan yang sudah mempunyai Account G+ ditambah Template yang support dengan Blogspot, begitu juga dengan janji saya bagi kawan yang memakai Template Designer :r; atau yang gagal meng-Aktifkan Komentar GPlus.

Triks ini saya dapatkan pada master kita setelah sebelumnya saya mencari kesana kemari tidak ketemu yang akhirnya menemukan pada dte :z; yang caranya hampir sama dengan meng-Aktifkan Thread Comment sebelumnya

Oke langsung saja ke cara meng-Aktifkan Komentar GPlus di Blog

Masuk Account Blogger dengan ID kawan
Sebaiknya simpan Template kawan dulu
Pada Dasbor pilih Template - Edit HTML
Untuk cepatnya, langsung saja menuju Widget - Blog1 lanjut jabarkan

Cari <b:includable id='comments' var='post'>
Copas Script berikut tepat diatasnya

<b:includable id='g-comments' var='post'>
<div id='g-comments-outer'>
<div class='g-comments' expr:data-href='data:blog.canonicalUrl' data-width='600' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD'> <a href='#g-comments-outer' id='g-comments-loader'>Berikan Komentar</a>
</div> </div>

<script type='text/javascript'>
//<![CDATA[
(function() {
var btn = document.getElementById('g-comments-loader'), showGC = function() {
var script = document.createElement('script'),
head = document.getElementsByTagName('head')[0], old;
script.type = "text/javascript";
script.id = "g-comments-script";
script.src = "//apis.google.com/js/plusone.js"; if (document.getElementById('g-comments-script')) {
old = document.getElementById('g-comments-script'); old.parentNode.removeChild(old); } head.appendChild(script); };
btn.onclick = function() {
this.innerHTML = "Memuat...";
showGC(); return false; };
})();
//]]>
</script>
</b:includable>

Teks yang saya beri warna merah silahkan disesuaikan dengan Blog kawan
Teks yang saya beri warna biru bisa kawan ganti dengan Page-Loading atau dihilangkan

Selanjutnya cari <b:includable id='main' var='top'> yang kodenya kurang lebih seperti berikut

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comment_picker'/>
</b:if>

Hapus atau Ganti dengan Kode berikut :

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>

<b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='g-comments'/>
</b:if>

Atau seperti kode berikut

<b:include data='post' name='post'/>
<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>

Hapus atau Ganti dengan Kode berikut

<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == "static_page"'>

<b:include data='post' name='g-comments'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>

<b:include data='post' name='g-comments'/>
</b:if>

Simpan Template kawan

Tuesday, 16 July 2013

Cara meng-Aktifkan Komentar GPlus

Komentar GPlus yang sudah diperkenalkan kurang lebih 2 bulan yang lalu adalah Komentar lanjutan setelah Thread Comment yang dikhususkan untuk Komentar Blogspot tentunya yang modelnya mirip Kotak Komentar FaceBook itulah yang akan saya bahas sekarang, seandainya kawan ada yang bertanya "mengapa harus Komentar GPlus...?1

Jawabannya pasti berbeda-beda sesuai dengan kepentingan yang sipenjawab, tapi bagi saya pribadi sudah pasti ada alasan yang ingin saya harapkan dengan memakai Komentar GPlus yang salah satunya agar traffic Rank Blog saya bisa normal atau kembali mengecil

Baik buruknya Komentar GPlus sebenarnya lebih banyak buruknya [jeleknya] dibandingkan dengan Komentar FaceBook maupun Thread Comment, disini saya akan mencoba memberikan gambaran [penilaian] pada Komentar tersebut

Komentar GPlus berisi 2[dua] model Komentar yaitu secara keseluruhan dan sesama GPlus dan sipemberi Komentar tidak bisa memakai nama Anonim tanpa URL sedangkan sisi jeleknya kita tidak bisa menjawab biar keterkaitan.
Komentar Thread punya kelebihan kita bisa menjawab dan bersifat keterkaitan, sisi jeleknya sipemberi Komentar bisa memakai Anonim dan sejenisnya yang selanjutnya mirip SPAM
Komentar FaceBook bagi saya yang paling lengkap tanpa ada sisi jeleknya saya lihat, cuma kita bernaung atau numpang di Blogspot mau tak mau wajib mengikuti aturan mainnya

Oh maaf ceritanya ngelantur, mari kita langsung saja ke Cara Meng-Aktifkan Komentar GPlus

Masuk Account Blogger dengan ID kawan
Pada Dasbor lihat disisi kiri dan pilih Google+
Beri tanda centang pada Gunakan Google+ Komentar di Blog ini ? perhatikan image berikut

Maaf kelupaan, cara ini khusus untuk Template Standar Blogspot [Template yang belum dimodifikasi tentunya]
Kalau ada kawan bertanya bagaimana dengan Template yang sudah dimodifikasi [Design] jawabannya tunggu postingan saya berikut

Contoh Komentar G+ dan Komentar Global

Monday, 17 June 2013

Cara Membuat Top Komentator

Setelah sekian lama Nge-Blog yang sudah pasti sudah banyak Artikel / Posting yang kawan buat, :q; begitu juga dengan Komentar Blog yang kawan dapatkan dari para Blogger Pengunjung. :z; Pernahkan kawan berfikir kira-kira siapa ya Blogger Pengunjung yang paling sering dan paling banyak memberikan Komentar :y; di Blog kita, itulah sekelumit pengantar Artikel yang akan saya bahas dan bagikan sekarang ini

Kalau kawan ingin lihat Demonya » disini

Oke langsung saja ke Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas Script berikut kedalamnya

<div style="overflow: hidden;margin:0; padding:10px 5px; width:100%; border:1px solid #369;">
<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count
ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + "</a>";
display = display + ccLName + " ";
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://tips-blogbego.blogspot.com/ &Exclusions=BLOGBEGO,TIPS BLOGBEGO
&ShowHowMany=20 &Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
</div></div>

Teks yang berwarna merah [tips-blogbego] silahkan ganti dengan Link kawan
Sedangkan BLOGBEGO, TIPS BLOGBEGO silahkan ganti dengan Nama Admin / Athour Blog kawan termasuk aliasnya juga
Teks yang berwarna biru [20] adalah jumlah Komentator yang akan ditampilkan dari Komentar terbanyak, silahkan disesuaikan
Simpan Blog kawan

Monday, 13 May 2013

Daftar Isi berisi beberapa Pilihan.....

Daftar Isi yang akan dibahas sekarang ini saya tidak tahu penciptanya dan sudah ada atau pernah saya lihat sekitar tahun 2011 pada beberapa Blogger Senior ya setingkat Master Blog-lah :q; Kelebihan dari Daftar Isi ini kawan bisa memilih berdasarkan Publication Date - Post Title dan Catagory

Kalau kawan menginginkan untuk ditampilkan di Blog caranyapun cukup gampang

Oke langsung saja ke TKP :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget
Pilih tanda [+] pada HTML / JavaScript
Copas Script berikut kedalamnya

<h2>Daftar Isi</h2>
<div style="background-color: white; border: 2px solid #00F; height: 450px; margin: 0 50px; overflow: auto; padding: 10px 10px 10px 30px; text-align: left; width: 400px;">
<div id="cl_option">
Loading.... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 500;
</script>
<script src="https://sites.google.com/site/blogbegocreation/javascript/sitemap-BB.js">
</script>
<script src="http://blogbego-creation.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=9999">
</script> </div>
<div style="clear: both;">
</div>

Hasilnya seperti Daftar Isi dibawah ini

Daftar Isi

Loading....

Teks yang saya beri warna Biru bisa kawan Edit atau hilangkan
Simpan Blog kawan dan lihat hasilnya

Wednesday, 8 May 2013

Cara Membuat Daftar Isi berisi Thumbnail

Cara Membuat Daftar Isi Blog selanjutnya yang akan saya bagikan sama kawan Blogger adalah Daftar Isi berisi Thumbnail ini yang setahu saya diciptakan oleh Blogger senior [Master] Abu Farhan :z; tapi ada beberapa scriptnya saya ganti / rubah karena mengalami masalah [maaf saya bukannya lebih hebat dari penciptanya], maksud saya menjadi masalah disini kemungkinan karena banyak yang menggunakan atau tempat menyimpannya terjadi masalah :q;

Pada awalnya Script Daftar Isi ini dibuat untuk Recent Post alias Posting Terakhir yang kita Publish :y;

Oke langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget
Pilih tanda [+] pada HTML / JavaSript
Copas Script berikut kedalamnya

<div style="border: 0px solid black; height: 300px; overflow: auto; width: 100%;">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitdm5KMVc6QffnhrLKZgMtyi-I0UXNwZ6Gubqy8ngnIRVHQe733hRLlppkFCczUuUuKw_n2c27OqWZ4LRDo40IQMYDFg3tqMnlMnshmkb4u9l225_uSJea3AiGrSllIL7PjX89ON5QxXFv/s1600/bloglogo.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcO0z_kU2l-j8gDC6-ewQkKiQMWNaAp5uKkiv0uj6BMcHc3GiBT9-JgnN6f6IkatMlwfjtLYMzyU9DvuwaeZvI9PtJUT8Xsd5guje159Xhekxdpyrhme0505pHDEGKhv13ZDBFwYxDCJl/s1600/logoblog.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCvdB0iSafvqr4m-WxUZvc7k0DFa9hwKF9yj-wwSUByk8tNO8laFaA6IvPMVx2scD6AaSXKqVdzDC7iEt2d_h4WNZkCtQjRUJ4bZKU8leomJRmQqIZHc5y6DD6oVlw8kS0kZCXArkWbSCa/s1600/bloglogo1.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcO0z_kU2l-j8gDC6-ewQkKiQMWNaAp5uKkiv0uj6BMcHc3GiBT9-JgnN6f6IkatMlwfjtLYMzyU9DvuwaeZvI9PtJUT8Xsd5guje159Xhekxdpyrhme0505pHDEGKhv13ZDBFwYxDCJl/s1600/logoblog.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkcO0z_kU2l-j8gDC6-ewQkKiQMWNaAp5uKkiv0uj6BMcHc3GiBT9-JgnN6f6IkatMlwfjtLYMzyU9DvuwaeZvI9PtJUT8Xsd5guje159Xhekxdpyrhme0505pHDEGKhv13ZDBFwYxDCJl/s1600/logoblog.png";
showRandomImg = true;
boxwidth = 270;
cellspacing = 6;
borderColor = "#ffffff";
bgTD = "#0000ff";
thumbwidth = 30;
thumbheight = 30;
fntsize = 10;
acolor = "#999";
aBold = false;
icon = " ";
text = "Pendapat";
showPostDate = true;
summaryPost = 50;
summarFontsize = 10;
summaryColor = "#00f";
icon2 = " ";
numposts = 100;
home_page = "http://NAMA BLOG KAWAN.blogspot.com/";
</script>
<script src="https://sites.google.com/site/blogbegocreation/javascript/recentposts_thumbnail.js"type="text/javascript"></script>
</div>

Teks yang berwarna biru adalah besarnya Thumbnail
Teks yang berwarna merah adalah jumlah Post yang sudah di Publish
Teks yang berwarna violet ganti dengan URL Blog kawan
Kalau peng-Editan sudah selesai Jangan lupa simpan Blog kawan

SEMUA ADA DISINI

IKLAN BULAN INI

Tuesday, 26 November 2013

Menu Navigasi dengan Image Hover

Friday, 22 November 2013

Pasang Avatar disamping Nama Author

Monday, 11 November 2013

Recent Post Thumbnail plus Komentar

Tuesday, 22 October 2013

Slide Carousel Recent Post untuk Blogger

Friday, 18 October 2013

Cara Membuat Artikel Terkait berisi Thumbnail

Tuesday, 1 October 2013

Menu Navigasi Pilihan BlogBego

Pure CSS DropDown Menu

Wednesday, 25 September 2013

Perpendek Link.......... dibayar ?!

Saturday, 21 September 2013

Daftar Isi berdasarkan Katagori Pilihan

Wednesday, 18 September 2013

Animasi Gadget Social Bookmark

Sunday, 15 September 2013

Slide Social Bookmarking Gaya Telor

Thursday, 5 September 2013

Navigasi Menu Widget untuk Blogger

Sunday, 18 August 2013

Tampilkan Artikel Berdasarkan Katagori

Tuesday, 23 July 2013

Komentar GPlus untuk Template yang Gagal

Tuesday, 16 July 2013

Cara meng-Aktifkan Komentar GPlus

Monday, 17 June 2013

Cara Membuat Top Komentator

Monday, 13 May 2013

Daftar Isi berisi beberapa Pilihan.....

Daftar Isi

Wednesday, 8 May 2013

Cara Membuat Daftar Isi berisi Thumbnail