HACK REQUEST 2

Datang dari komentar blog dummie Beben Koben si bloglang anu ganteng kalem tea Embah Google, salah satu sobat blogger berkomentar ...om ajarin donk bikin read more tanpa loading... begitu celetusnya. Memang pada blog dummie akuh dibuat begitu karena biar gaya dikit walaupun blog demo :D Sebenarnya cukup banyak hack dan trik membuat read more tanpa berpindah ke halaman single post. Yang susah itu mencari hacknya yang cocok untuk dipasang pada template.
Aku ambil dari master Hackosphere, semoga cocok dengan keadaan template sobat Dasa Warta sang penanya ;)) Sebelum masuk bagaimana caranya, postingan kali ini akan memberikan bonus berupa 2 buah info template gaya punya.

Pertama-tama yang harus diperlukan sobat Dasa Warta yaitu backup full template ► Expand Widget Templates dan javascript yg peletakannya diatas tag </head> Disikat deh scriptnya disini hackosphere.js or Click expand here hackosphere.js

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
//<![CDATA[
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
spans[i].style.display = 'none';
}
}
//]]>
</script>
</b:if>

Yang sedikit pusing disini ini nih, susah neranginnya :( Agar berjalan hack ini sobat sudah harus menerapkan trik read more yg telah ada kode berikutPostingan yg tampak
<span id="fullpost">
Postingan yg tidak tampak
</span>Kalau sudah ada tinggal lanjutin baca postingan ini, kalau belum ada ya harus buat terlebih dahulu ;)) Cara bikin read more untuk editor blog lama Cara Membuat Read More.

Cari kode mirip-mirip kayak begindang

<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
  <style>#fullpost{display:none}</style>
  <p><data:post.body/></p>
  <span id='showlink'>
   <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);' style='float:right;color:#a00'>Read More ►►</a></p>
 </span>
 <span id='hidelink' style='display:none'>
   <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);' style='float:right;color:#a00'>Hide it ▲▲</a></p>
  </span>
 <script type='text/javascript'>
    checkFull("post-" + "<data:post.id/>");
 </script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Kode baris pertama-tama itu yg biasanya mirip² lalu kode yg diberi warna merah & kuning itu yg musti dimasukin :P (atur-atur saja) :D

Save and Good Luck

Bonus tara...

Image and Details by: Premium Blogger Templates

Image and Details by: BestBloggerTemplates

Bye bye :-h

Related Post Used Google Custom Search for Blogger

Hanya untuk mengkomplitkan tutorial mengenai related post for blogger. Trik ini diambil dari postingan sebelumnya mengenai gaya bloglang blogsite dari sobat kita :D Tadinya mau disatuin disalah satu postingan tersebut tapi takut gak pada tahu bahwasannya Beben Koben si bloglang anu ganteng kalem tea ini suka mengupdate artikel² lawas kalau menemukan yg satu tema ;) Ini juga perlu penjelasan terperinci. Related post kali ini diambil dari Custome Search Engine uncle google ;)) Kalau yang belum punya bisa dibaca terlebih dahulu artikel ini Custome Search Google API Key.
Kalau sudah ada Google Custom Search sobat tinggal meluncur ke http://www.google.com/cse/ lalu tekan tulisan manage your existing search engines.

Klik control panel ► lihat ke bagian kiri ► klik yg bertuliskan Get code Jika sudah perhatikan kode script ini

<hr/>
<b>Related Post:</b>
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
google.load('search', '1');
function OnLoad() {
var customSearchControl = new google.search.CustomSearchControl('YOUR-NUMBER-CUSTOME-SEARCH-ENGINE');
customSearchControl.draw('content');
customSearchControl.execute('<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'> OR </b:if></b:loop></b:if>');}
google.setOnLoadCallback(OnLoad);
</script>
<div id='content' style='height:200px;overflow:auto;width:100%'><blink>Loading</blink>...</div>

Gantikan tulisan YOUR-NUMBER-CUSTOME-SEARCH-ENGINE dengan yang ada pada Get code kalian. Setelah persiapan semua sudah oke, saatnya menempatkan kedalam template ;)

Sebenarnya sobat sudah tauk dimana harus menyimpan itu script. Kalo diliat dari kebanyakan tag, mungkin setelah kode ini<div class='post-footer'>Tapi bisa saja lain, soalnya setiap template bisa berbeda. Yang terpenting dibawah postingan yah simpannya :) Kalau si script postingan terkait ini mau ada hanya pada halaman post saja maka sobat bisa menambahkan kode!!!

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<hr/>
<b>Related Post:</b>
<script src='http://www.google.com/jsapi'/>
<script type='text/javascript'>
google.load('search', '1');
function OnLoad() {
var customSearchControl = new google.search.CustomSearchControl('YOUR-NUMBER-CUSTOME-SEARCH-ENGINE');
customSearchControl.draw('content');
customSearchControl.execute('<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'> OR </b:if></b:loop></b:if>');}
google.setOnLoadCallback(OnLoad);
</script>
<div id='content' style='height:200px;overflow:auto;width:100%'><blink>Loading</blink>...</div>

</b:if>

Karena ini terintegrasi dengan search custome, maka disana nanti sudah ada search engines blog. Untuk melihat demo silahkan kunjungi blog dummie ekeh :P scroll kebawah!!!

demo
Happy related post \m/

Gaya Bloglang

Hati-hati dengan postingan kali ini sobat Beben Koben si bloglang anu ganteng kalem tea tercinta. Blog berikut yang akan saya share berisi tutorial oke punya, edan bgt, keren and top markotop. Jikalau sobat yg selalu pantengin blog ini mungkin sudah bisa menjadi master andai selalu ingat pesan Koben! Saran Beben selalu mengatakan, be a creative, save link (bookmark), acak-acak web/blog jika memang menarik dan berguna bagi kalian.
Blogsite berikut ini sudah saya baca sampai khatam guna melihat ada apa ajah didalamnya ;)) :D Mungkin trik dan hack pilihan akan aku sampein disini selama mengobrak-abrik daleman blog entuh :P Semakin beragam tutorial bisa menjadi pilihan mana yg lebih asoy gito loh :)) buat tampilan terkeren didapatkan b-)

Social Share with Effect CSS3

Download terlebih dahulu imagenya disini yah bos image.
Setiap kode CSS selalu diletakan sebelum/diatas tag ]]></b:skin>
Setiap kode HTML dimasukin didalam/diantara tag <body> ... </body>
Setiap script bisa sobat tempatkan terlebih dahulu diatas tag </body> atau diatas tag </head> gimana aturannya juga:D

Kode CSS

/* SOCIAL ICONS - GENERAL */
.social {
list-style :none;
margin: 15px auto;
width: 90%;
}
.social li {
display: inline;
float: left;
background-repeat: no-repeat;
}
.social li a {
display: block;
width: 48px;
height: 48px;
padding-right: 5px;
position: relative;
text-decoration: none;
}
li.delicious {
background-image:url(".../images/delicious.png");
}
li.digg {
background-image:url(".../images/digg.png");
}
li.facebook {
background-image:url(".../images/facebook.png");
}
li.flickr {
background-image:url(".../images/flickr.png");
}
li.linkedin {
background-image:url(".../images/linkedin.png");
}
li.reddit {
background-image:url(".../images/reddit.png");
}
li.rss {
background-image:url(".../images/rss.png"); }
li.twitter { background-image:url(".../images/twitter.png");
}

/* SOCIAL ICONS - CSS3 */
#css3:hover li {
opacity:0.2;
}
#css3 li {
-webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
-moz-transition-property: opacity;
-moz-transition-duration: 500ms;
}
#css3 li a strong {
opacity: 0;
-webkit-transition-property: opacity, top;
-webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top;
-moz-transition-duration: 300ms;
}
#css3 li:hover {
opacity: 1;
}
#css3 li:hover a strong {
opacity: 1;
top: -10px;
}

Tinggal atur width, margin, padding sesuaikan dengan template masing² :)

Kode HTML

<h3>Social Share</h3>
<ul class="social" id="css3">
<li class="delicious">
<a href="http://www.delicious.com/YOUR-ACCOUNT"></a>
</li>
<li class="digg">
<a href="http://digg.com/YOUR-ACCOUNT"></a>
</li>
<li class="facebook">
<a href="http://www.facebook.com/addfriend.php?id=beben.koben"></a>
</li>
<li class="flickr">
<a href="http://www.flickr.com/YOUR-ACCOUNT"></a>
</li>
<li class="linkedin">
<a href="http://www.linkedin.com/YOUR-ACCOUNT"></a>
</li>
<li class="reddit">
<a href="http://www.reddit.com/YOUR-ACCOUNT"></a>
</li>
<li class="rss">
<a href="http://feeds.feedburner.com/beben-koben"></a>
</li>
<li class="twitter">
<a href="http://twitter.com/bebenkoben"></a>
</li>
</ul>

demo
Gantikan account dg account kamyu yah :) Lanjut, bakalan edan nih pokokke [..]

Link with Effect Tagcloud jQuery

Kalau mau coba ini, tinggal add a gadget ► HTML/Javascript Kalo nggak suka bisa langsung diremove ;)

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

<script type="text/javascript" src="http://htmldrive.net/edit_media/2010/201008/20100821/jquery.tagsphere/ext/jquery.mousewheel.min.js"></script>

<script type="text/javascript" src="http://htmldrive.net/edit_media/2010/201008/20100821/jquery.tagsphere/jquery.tagsphere.min.js"></script>

<script type="text/javascript">
$(function(){
$('#ts1').tagcloud({centrex:250,centrey:250});
$('#ts2').tagcloud({centrex:100,centrey:100,min_font_size:10,max_font_size:16,zoom:100});
});
</script>

<style type="text/css">
a {
text-decoration:none;
}
</style>

<div id="ts1" style="width:100%; height:500px; background-color:#debe94; position:relative;">
<ul>
<li><a href="#" rel="20">Link 1</a></li>
<li><a href="#" rel="15">Link 2</a></li>
<li><a href="#" rel="10">Link 3</a></li>
<li><a href="#" rel="5">Link 4</a></li>
<li><a href="#" rel="1">Link 5</a></li>
<li><a href="#" rel="5">Link 6</a></li>
<li><a href="#" rel="10">Link 7</a></li>
<li><a href="#" rel="15">Link 8</a></li>
<li><a href="#" rel="5">Link 4</a></li>
<li><a href="#" rel="1">Link 5</a></li>
<li><a href="#" rel="5">Link 6</a></li>
<li><a href="#" rel="10">Link 7</a></li>
<li><a href="#" rel="15">Link 8</a></li>
</ul>
</div>

Click expand here mousewheel.min.js

/* Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
*
* Version: 3.0.2
*
* Requires: 1.2.2+
*/
(function(c){var a=["DOMMouseScroll","mousewheel"];c.event.special.mousewheel={setup:function(){if(this.addEventListener){for(var d=a.length;d;){this.addEventListener(a[--d],b,false)}}else{this.onmousewheel=b}},teardown:function(){if(this.removeEventListener){for(var d=a.length;d;){this.removeEventListener(a[--d],b,false)}}else{this.onmousewheel=null}}};c.fn.extend({mousewheel:function(d){return d?this.bind("mousewheel",d):this.trigger("mousewheel")},unmousewheel:function(d){return this.unbind("mousewheel",d)}});function b(f){var d=[].slice.call(arguments,1),g=0,e=true;f=c.event.fix(f||window.event);f.type="mousewheel";if(f.wheelDelta){g=f.wheelDelta/120}if(f.detail){g=-f.detail/3}d.unshift(f,g);return c.event.handle.apply(this,d)}})(jQuery);

Click expand here tagsphere.min.js

/* Copyright 2010 Ian George - http://www.iangeorge.net

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/


(function($){$.fn.tagcloud=function(options){var opts=$.extend($.fn.tagcloud.defaults,options);opts.drawing_interval=1/(opts.fps/1000);$(this).each(function(){new TagCloudClass($(this),opts);});return this;};$.fn.tagcloud.defaults={zoom:75,max_zoom:120,min_zoom:25,zoom_factor:2,rotate_by:-1.75,fps:10,centrex:250,centrey:250,min_font_size:12,max_font_size:32,font_units:'px',random_points:0};var TagCloudClass=function(el,options){$(el).css('position','relative');$('ul',el).css('display','none');var eyez=-500;var rad=Math.PI/180;var basecos=Math.cos(options.rotate_by*rad);var basesin=Math.sin(options.rotate_by*rad);var sin=basesin;var cos=basecos;var hex=new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");var container=$(el);var id_stub='tc_'+$(this).attr('id')+"_";var opts=options;var zoom=opts.zoom;var depth;var lastx=0;var lasty=0;var points=[];points['data']=[];var drawing_interval;var cmx=options.centrex;var cmy=options.centrey;function getgrey(num){if(num>256){num=256;}
if(num<0){num=0;}
var rem=num%16;var div=(num-rem)/16;var dig=hex[div]+hex[Math.floor(rem)];return dig+dig+dig;}
function rotx(){for(var p in points.data)
{var temp=sin*points.data[p].y+cos*points.data[p].z;points.data[p].y=cos*points.data[p].y-sin*points.data[p].z;points.data[p].z=temp;}}
function roty(){for(var p in points.data){var temp=-sin*points.data[p].x+cos*points.data[p].z;points.data[p].x=cos*points.data[p].x+sin*points.data[p].z;points.data[p].z=temp;}}
function rotz(){for(var p in points.data){var temp=sin*points.data[p].x+cos*points.data[p].y;points.data[p].x=cos*points.data[p].x-sin*points.data[p].y;points.data[p].y=temp;}}
function zoomed(by){zoom+=by*opts.zoom_factor;if(zoom>opts.max_zoom){zoom=opts.max_zoom;}
if(zoom<opts.min_zoom){zoom=opts.min_zoom;}
depth=-(zoom*(eyez-opts.max_zoom)/100)+eyez;}
function moved(mx,my){if(mx>lastx){sin=-basesin;roty();}
if(mx<lastx){sin=basesin;roty();}
if(my>lasty){sin=basesin;rotx();}
if(my<lasty){sin=-basesin;rotx();}
lastx=mx;lasty=my;}
function draw(){var normalz=depth*depth;var minz=0;var maxz=0;for(var r_p in points.data){if(points.data[r_p].z<minz){minz=points.data[r_p].z;}
if(points.data[r_p].z>maxz){maxz=points.data[r_p].z;}}
var diffz=minz-maxz;for(var s_p in points.data){var u=(depth-eyez)/(points.data[s_p].z-eyez);var grey=parseInt((points.data[s_p].z/diffz)*165+80);var grey_hex=getgrey(grey);$('#'+points.data[s_p].id+' a',container).css('color','#'+grey_hex);$('#'+points.data[s_p].id,container).css('z-index',grey);$('#'+points.data[s_p].id,container).css('left',u*points.data[s_p].x+cmx-points.data[s_p].cwidth);$('#'+points.data[s_p].id,container).css('top',u*points.data[s_p].y+cmy);}}
points.count=$('li a',container).length;points.largest=1;points.smallest=0;$('li a',container).each(function(idx,val){var sz=parseInt($(this).attr('rel'));if(sz==0)
sz=1;points.data[idx]={id:id_stub+idx,size:sz};var h=-1+2*(idx)/(points.count-1);points.data[idx].theta=Math.acos(h);if(idx==0||idx==points.count-1){points.data[idx].phi=0;}
else{points.data[idx].phi=(points.data[idx-1].phi+3.6/Math.sqrt(points.count*(1-Math.pow(h,2))))%(2*Math.PI);}
points.data[idx].x=Math.cos(points.data[idx].phi)*Math.sin(points.data[idx].theta)*(cmx/2);points.data[idx].y=Math.sin(points.data[idx].phi)*Math.sin(points.data[idx].theta)*(cmy/2);points.data[idx].z=Math.cos(points.data[idx].theta)*(cmx/2);if(sz>points.largest)points.largest=sz;if(sz<points.smallest)points.smallest=sz;container.append('<div id="'+id_stub+idx+'" class="point" style="position:absolute;"><a href='+$(this).attr('href')+'>'+$(this).html()+'</a></div>');});if(opts.random_points>0){for(b=0;b<opts.random_points;b++){points.count++;points.data[points.count]={id:id_stub+points.count,size:1};points.data[points.count].theta=Math.random()*2*Math.PI;points.data[points.count].phi=Math.random()*2*Math.PI;points.data[points.count].x=Math.cos(points.data[points.count].phi)*Math.sin(points.data[points.count].theta)*(cmx/2);points.data[points.count].y=Math.sin(points.data[points.count].phi)*Math.sin(points.data[points.count].theta)*(cmy/2);points.data[points.count].z=Math.cos(points.data[points.count].theta)*(cmx/2);container.append('<div id="'+id_stub+points.count+'" class="point" style="position:absolute;"><a>.</a></div>');}}
var sz_range=points.largest-points.smallest+1;var sz_n_range=opts.max_font_size-opts.min_font_size+1;for(var p in points.data){var sz=points.data[p].size;var sz_n=parseInt((sz/sz_range)*sz_n_range)+opts.min_font_size;if(!$('#'+points.data[p].id,container).hasClass('background')){$('#'+points.data[p].id,container).css('font-size',sz_n);}
points.data[p].cwidth=$('#'+points.data[p].id,container).width()/2;}
$('ul',container).remove();zoomed(opts.zoom);moved(cmx,cmy);drawing_interval=setInterval(draw,opts.drawing_interval);container.mousemove(function(evt){moved(evt.clientX,evt.clientY);});container.mousewheel(function(evt,delta){zoomed(delta);evt.preventDefault();return false;});};})(jQuery);

Take a look Image Galery In Galaxy. Biar sobat bisa acak² silahkan kunjungi Tutorial Blogging by Rully Long Field. Ternyata sobat kita ini pengagum master choen, soalnya ada blognya seperti RedMagazine.

Karena banyak ramuan dikemas dalam bentuk textarea jadi sobat harus ngedit² lagi :)) Serta mungkin karena menggunakan syntax highlighter suka ada kode tambahan yg nyempil² :)) Tinggal kejelian saja sedikit kita pakai ;) Selamat beracak-acak dimalam minggu ini, dan gayakanlah blogsite kalian b-)
Happy gaya \m/

Related Post for Blogger All in One

Kilas balik lagi ah, gak ada bahan postingan lagi nih. Postingan kali ini akan membicarakan mengenai Related Articles. Kalau dilihat-lihat para blogger dari Indo sudah pada memasangnya. Karya dari more tech tips web mengenalkan Smarter Related Posts Google Blogger Widget. Tidak mau kalah gaya juga blogger plugins mengeluarkan Related Posts Widget for Blogger with Thumbnails. Master gema out the product Etiquetas relacionadas en miniaturas de Blogger Widgets.
Kali ini Beben Koben si bloglang anu ganteng kalem tea mau berbagi lagi mengenai related post karya bos Vagabundia.

Untuk yang instant sobat dapat mencoba Asterpix SearchLight Program Application dan linkwithin^{The Ways!} :D Kalau kurang juga this is come from master lasantha Nice Related Post Widget For Bloggers!
Kapan ngebahasnya ini kalau ngumpulin macam² artikel terkait dari para master :)) This hack got title "Entradas relacionadas con slider" or in indo language "Posting Terkait dengan Menggunakan Slider"
Pada sisi kiri & kanan akan ada berupa gambar panah guna slide kesana kemari. Feature secara keseluruhan:

• Thumbnail image display.
• Tittle post to be a link.
• Headlines writed article.

Javascript

Letakin script berikut diatas tag </head>

<script type="text/javascript">
//<![CDATA[
var reltitulosslider = new Array();
var relurlsslider = new Array();
var relresumenslider = new Array();
var relimagenslider = new Array();
var reltituloscantidadslider = 0;
var relmaxamostrarslider = 20;
var relmaxlenslider = 75;
var relimagenpodefectoslider = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisG_RCORNU6cMQ_3ozas0VvCgQbX9mzCIFQ0XgpylbjXAjjQDn6NupJ9aTs9N52jkBUBHiIJ0Zmfsk21XZO9gRxOhRpmBhLokznWseLOn_KKdq6w_kaTJmH-K6cfX7Y5Gea3EJN7qnNZC_/s0/vagaPlantilla_resumenpostsnoimage.gif";
function leerpostetiquetasslider(json) {
 var entry, postimg, postcontent, cat;
 for (var i = 0; i < json.feed.entry.length; i++) {
   if (i==json.feed.entry.length) { break; }
   entry = json.feed.entry[i];
   reltitulosslider[reltituloscantidadslider] = entry.title.$t;
   postcontent = "";
   if ("content" in entry) {
     postcontent = entry.content.$t;
   } else if ("summary" in entry) {
     postcontent = entry.summary.$t;
   }
   relresumenslider[reltituloscantidadslider] = eliminattagsslider(postcontent,relmaxlenslider);
   if ("media$thumbnail" in entry) {
     postimg = entry.media$thumbnail.url;
   } else {
     postimg = relimagenpodefectoslider;
   }
   relimagenslider[reltituloscantidadslider] = postimg;
   for (var k = 0; k < entry.link.length; k++) {
     if (entry.link[k].rel == 'alternate') {
       relurlsslider[reltituloscantidadslider] = entry.link[k].href;
       break;
     }
   }
   reltituloscantidadslider++;
 }
}
function mostrarrelacionadosslider() {
 var tmp = new Array(0);
 var tmp2 = new Array(0);
 var tmp3 = new Array(0);
 var tmp4 = new Array(0);
 for(var i = 0; i < relurlsslider.length; i++) {
   if(!containsslider(tmp, relurlsslider[i])) {
     tmp.length += 1; tmp[tmp.length - 1] = relurlsslider[i];
     tmp2.length += 1; tmp2[tmp2.length - 1] = reltitulosslider[i];
     tmp3.length += 1; tmp3[tmp3.length - 1] = relresumenslider[i];
     tmp4.length += 1; tmp4[tmp4.length - 1] = relimagenslider[i];
   }
 }
 reltitulosslider = tmp2; relurlsslider = tmp; relresumenslider = tmp3; relimagenslider = tmp4;
 for(var i = 0; i < reltitulosslider.length; i++){
   var indice = Math.floor((reltitulosslider.length - 1) * Math.random());
   var tempTitle = reltitulosslider[i]; var tempUrls = relurlsslider[i];
   var tempResumen = relresumenslider[i]; var tempImagen = relimagenslider[i];
   reltitulosslider[i] = reltitulosslider[indice]; relurlsslider[i] = relurlsslider[indice];
   relresumenslider[i] = relresumenslider[indice]; relimagenslider[i] = relimagenslider[indice];
   reltitulosslider[indice] = tempTitle; relurlsslider[indice] = tempUrls;
   relresumenslider[indice] = tempResumen; relimagenslider[indice] = tempImagen;
 }
 var cuantosPosts = 0;
 var r = Math.floor((reltitulosslider.length - 1) * Math.random());
 var rini = r;
 var salida;
 var dirURL = document.URL;
 while (cuantosPosts < relmaxamostrarslider) {
   if (relurlsslider[r] != dirURL) {
     salida = "<div class='relspostsslider'>";
     salida += "<a href='" + relurlsslider[r] + "' rel='nofollow'  target='_blank' title='" + reltitulosslider[r] + "'><img src='" + relimagenslider[r] + "' /></a>";
     salida += "<h6><a href='" + relurlsslider[r] + "' target='_blank'>" + reltitulosslider[r] + "</a></h6>";
     salida += "<p>" + relresumenslider[r] + " ... </p>";
     salida += "</div>";
     document.write(salida);
     cuantosPosts++;
     if (cuantosPosts == relmaxamostrarslider) { break; }
   }
   if (r < reltitulosslider.length - 1) {
     r++;
   } else {
     r = 0;
   }
   if(r==rini) { break; }
 }
}
function eliminattagsslider(cual,longitud){
 var resumen = cual.split("<");
 for(var i=0;i<resumen.length;i++){
   if(resumen[i].indexOf(">")!=-1){
     resumen[i] = resumen[i].substring(resumen[i].indexOf(">")+1,resumen[i].length);
   }
 }
 resumen = resumen.join("");
 resumen = resumen.substring(0,longitud-1);
 return resumen;
}
function containsslider(a, e) {
 for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
 return false;
}

var SRmin = 0;
var SRmax = -2160;
var SRwidth = 144;
function desplazarrels(direccion) {
 var div = document.getElementById("postsrelacionadoscontenedor");
 var pos = parseInt(div.style.left);
 pos = pos + (SRwidth * direccion);
 if(pos > SRmin) { return }
 if(pos < SRmax) { return }
 div.style.left = pos + "px";
}
//]]>
</script>
<script src="http://NAME-BLOG.blogspot.com/feeds/posts/default/-/Blogger?alt=json-in-script&callback=leerpostetiquetasslider&max-results=50" type="text/javascript"></script> 

Keterangan script:
relmaxamostrarslider = 20 // Jumlah postingan yg akan ditampilkan
relmaxlenslider = 75; // Jumlah karakter headlines
relimagenpodefectoslider = "http://URL-IMAGE.gif"; // Link gambar default
NAME-BLOG // Ganti dengan nama blog sobat

Kode CSS

#postsrelacionadosslider {
position:relative;
width:635px;
}
#postsrelacionadosslider br {
display:none;
}
#relleft {
left:0;
}
#relright {
right:0;
}
.sflecha {
height:180px;
position:absolute;
width:25px;
}
.sflecha img {
height:180px;
width:25px;
}
#postsrelacionadosinner {
height:180px;
left:30px;
overflow:hidden;
position:absolute;
width:576px;
}
#postsrelacionadoscontenedor {
height:180px;
position:absolute;
width:2800px;
-moz-transition:all 1s ease 0;
-webkit-transition:all 1s ease 0;
-o-transition:all 1s ease 0;
transition:all 1s ease 0;
}
.relspostsslider {
background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);
background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');
float:left;
height:180px;
overflow:hidden;
text-align:center;
width:130px;
margin:0 2px;
padding:0 5px;
}
.relspostsslider a {
color:#aaa !important;
display:inline;
font-size:11px !important;
line-height:1;
}
.relspostsslider img {
height:72px;
width:72px;
padding:5px;
}
.relspostsslider h6 {
display:table-cell;
height:5em;
overflow:hidden;
vertical-align:middle;
width:130px;
margin:0;
padding:0;
}
.relspostsslider p {
color:#eee;
font-size:10px;
height:4em;
line-height:1;
overflow:hidden;
margin:0;
padding:0;
}

Silahkan diedit-edit dah sesuaikan dgn template agan :)

Kode HTML

<div id="postsrelacionadosslider">

<a onclick="desplazarrels(1);" class="sflecha" id="relleft" href="javascript:void(0);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8FqCWxOwF0pnhtbKy12Hx0uoWUY20qC_yqATJMbmGC7OwHWn_6_KXxNUhxInnfDwajlfAse3lpoQe38Gu_CrfcC_odydIS0vVd9jlrPqGUFhTcFDtEzPEg8cMJjDbNL7SC3ugM2sm0mY/s70/LWicoleft.png"/></a>
<div id="postsrelacionadosinner">
<div id="postsrelacionadoscontenedor" style="left:0">
<script type='text/javascript'>mostrarrelacionadosslider();</script>
</div>
</div>
<a onclick="desplazarrels(-1);" class="sflecha" id="relright" href="javascript:void(0);"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFixwSQvU5Clt4a9clQaTvooro05tttPiWX6XGafYKfp1q6gX2BpRccVW-xDxiqHMUD5bfEUv9fuyWKJHtKxRAM9Ino03DIx5sSGMvFnqe3r2P_4Rp8Ynn4Uk8mptKiVkqPjfiJKXVNko/s70/LWicoright.png"/></a>

</div>

Semoga berhasil :D Begini deh kalau enggak nemuin yg baru-baru, reply ajah yg punya master-master :))

Happy related post \m/

Virtual Tip Jar Like PayPal

Kabar gembira bagi kalian para blogger yang memang menggunakan jasa keuangan atau selalu melakukan kegiatan satu transaksi keuangan. Mungkin money payment (alat pembayaran) yang sudah terkenal adalah PayPal. Kali ini Om Google telah merilis sebuah widget/gadget bagi para blogesphere (blogspoter) yang diberi nama Virtual Tip Jar. Sudah terformat agar terpasang rapih pada sidebar blog, jadi kita tinggal mencomot saja sob :D Setelah ditelusur ternyata kita perlu melakukan 4 langkah guna merasakan layanan satu ini ;)
Karena Beben Koben si bloglang anu ganteng kalem tea ini tidak memiliki account/rekening/kartu kredit atau apalah, maka tidak sampai beres mempelajarinya. Mungkin bagi para sobat yg sudah memiliki rekening/credit card bisa mencoba. Langkah-langkah tersebut yaitu:

1. Lakukan sign up ke Google Checkout Merchant (bagi yg belom memiliki account google), bagi yg sudah punya tinggal login saja Google Checkout.
2. Pastikan untuk mengaktifkan API HTML dengan membuka tab Setting, mengklik link integrasi dan centang "My company will only post digitally signed carts". Lalu, salin Id Merchant untuk digunakan pada langkah 4.
3. Kembali ke Blogger, pada Design → klik tab Page Elements → Add a Gadget dimana sobat ingin menempatkan gadget tersebut.
4. Sesuaikan pengaturan tombol. Id Merchant Checkout adalah yang sobat menyalin pada langkah ke-2. Simpan dan selesai, enjoy!
5. Contoh jadi pada blogspot (lihat pada bagian sisi kanan) Blogger Support Example.

Demikian kabar singkat alakadarnya, karena tidak ada bahan postingan yaaa posting balik saja yang ada di buzz :)) Original posted Add a virtual tip jar to your blog.
Happy virtual \m/

APP ID for Social Plugins Facebook

Salam bloglang semangat membara plugins. Sobat mungkin sudah mengetahui manfaat dari fitur plugins! Mungkin diblog ini postingan mengenai si pug-in jQuery sudah banyak ;)) Diawali dari mencoba live stream kepunyaan si facebook, lalu masuk ke wall dan ada sobat blogger yang kepincut :D Dipikir-pikir dari pada satu-satu neranginnya, mendingan langsung jebret ajah nih Beben share mengenai Social Plugins Facebook Developers. Ketika sobat membuka link facebook developers, maka akan terpampang disana 9 jenis plugins yang sudah ready stock buat kita sikat b-) (wc kaleee main sikat)

Untuk kemulusan rencana ini, diharapkan sobat agan harus sudah memiliki yg namanya App ID. Jika belum punya silahkan membuat dulu Create an App lalu ikutin langkah²nya :D Kalau yg sudah punya tinggal langsung menuju ke My Apps on Facebook, and that will look like this [..]

Perhatikan gambar yg tulisannya dibedakan warna, nah warna merah itu yg sering dibutuhkan dalam pemakaian social plugins facebook. Itulah sobat pakai yah, jika mau membuat salah satu social plug-ins. Coba agan agin buka halaman berikut contoh dari sobat kita yg sudah membuatkan tools add like or recommend every to blogger post.

Contoh profile update dalam cara menterkenalkan blog kita Facebook Profile Update. Balik lagi ke acara social-plugins, jika sudah ini itunya sobat mah tinggal pencet ajah tombol guna mendapatkan kode/script yg nantinya dimasukkan ke template ;)

Get Code

Penempatan kode bisa melalui Add a Gadget ► HTML/Javascript atau juga langsung didalam template asal awas!!! jangan sampai bentrok dengan tag yg lainnya ;) Halaman berikut guna memperjelas penempatan secara default Facebook for Websites.
Segitu ajah deh kayaknya, kurang jelas ini-itunya bisa kita diskusikan bersama :)
Happy social plugins facebook \m/

CSS3 Tools Online for Developing your Skill

Semakin maraknya perkembangan fitur dari CSS3 telah banyak melahirkan pula toolsnya. Mungkin pada artikel sebelumnya sudah ada beberapa tools yang sudah Beben Koben si bloglang anu ganteng kalem tea bagi kepada sobat². Kesempatan kali ini mau mencoba mengumpulkan tools CSS3 berbagai fungsi, agar bisa meningkatkan gaya tampilan pada blog kita tercinta b-) :)) Jadi yg udah pernah dipostingkan ta' kumpulin lagi dimari :D Mulai saja yuk, partisipasi jika menemukan tools CSS3 harap bisa laporan buat mengomplitkan :D

CSS3 Playground

Tools ini memiliki fitur/fungsi guna membuat border radius, box-shadow, text-shadow, transform, columns, gradient, background+, content and text. Contoh: CSS3 Generator.

CSS Gradient Generator

Membuat perpaduan warna atas/bawah, kiri/kanan sehingga melebur menjadi satu kesatuan yang indah ;)) Contoh: Linear and Gradient.

Border Radius

Sudut melengkung agar terlihat lebih dinamis. Contoh: Border Radius Effect.

CSS3 Transforms

Secara keseluruhan tools ini telah mengelompokan fungsi gradients, shadows, transform, and text stroke. Sobat bisa klik sendiri disana ;)) Contoh: Tools CSS by Westciv.

CSS3 Gradient Generator

Seperti tools gradient diatas sebelumnya, ini mirip tapi lain proses saja.

CSS3 Generator ^v1.7

Lumayan komplit yg ini sob, enaknya lagi sudah dikasih tauk browsingan yg supportnya terhadap fitur yg nanti akan kita pilih :-bd

Dotted Background Generator

Melihat hasil background berupa dotted. Bisa menggunakan single or double color.

Button Maker

Membikin tombol bergaya sudut lengkung (border radius) dipadu dengan gradient technique.

CSS3 Maker

Lumayan komplit yang ini dengan dukungan 11 fitur telah ready stock :D

Layer Styles

Terdiri dari 5 feature dengan tampilan layer yang bisa di drag kesana kemari guna mempermudah melihat hasilnya.

CSS3 Buttons Techniques, Tutorials, Tools

CSS3 and HTML5 Toolbox Starter

30 Useful CSS3 Generators

25 Time saving CSS3 tools& Apps for designers

Demikian saja, nanti kalo ada yg teranyar langsung tak masukin ke list :) Semoga bisa meningkatkan skill kita dalam ber-CSS nih bos :D
Happy enjoy tools \m/