Zona Minimum: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Statistik Komentar dan Posting

Sebagai pelengkap widget anda, gak ada salahnya jika anda memasang statistik jumlah komentar dan jumlah postingan dalam blog kita. ini hanya ingin mengetahui seberapa besar ketenaran blog kita. Paling tidak bisa membuat kita lebih semangat untuk melakukan pembenahan-pembenahan terhadap blog kesayangan kita. Slah satu contohnya, blog Kang Fathur ini memiliki komentar yang sedikit jika dibandingkan dengan postingan yaang diteritkan oleh Kang Fathur. Ini menunjukkan kalau blog saya tidak tenar setenar Kang Rohman, Kang O-Om dan lainnya.

Untuk itu, sebagai blog pemula saya harus lebih bekerja agar blog ini melejit terbang.... hehhehe,

Postingan yang diterbitkan oleh Kang Fathur adalah :
Komentar pada blog Kang Fathur adalah :

Contoh diatas hanyalah sebuah statistik perkembangan blog Kang Fathur. Bagaimana dengan blog anda?

Silakan pasang statistik berikut dalam blog anda untuk mengetahui sejauh mana traffick blog anda.

Kodenya adalah :

<div class="widget-content">
<div name="posted" style="float: left; height: 50px; margin-top: 5px; width: 160px;">
<div name="img" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5cc1BKibde4k0XEsFoRAYbhGAQNmFqr5LvklCT8rsnv82MIM2dzqBLF3H2CzkcjCZ-9vzCkL1jQAwXN3bqjk-roMpZJENw_oLveaEMlYm69cYsl08xmm8uUeLqoEiQyA8DKLP5MrKTd8/s1600/posted.png") no-repeat scroll 0% 0% transparent; float: left; height: 46px; margin: 2px 5px 2px 2px; padding: 0pt; width: 46px;">
</div>
<div name="contador" style="font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; margin: 0pt; padding: 6px 0pt 0pt;">
<script type="text/javascript">
function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }
</script><script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount">
</script> Posted</div>
<div name="posting" style="font-family: Arial,Helvetica,sans-serif; font-size: 10px; margin: 5px 0pt 0pt; padding: 0pt;">
posts published</div>
</div>
<div name="comments" style="float: left; height: 50px; margin-left: 10px; margin-top: 5px; width: 160px;">
<div name="img" style="background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqNDAhkSf0FLw_HenGsxsq7dD6zdbQGkm0TAUYEQ6-6CwF61p6UuF2RG8w6v3lr3uB6sS75nFRIXa11ROdznI3oDKe8TEHc1gESUrxJvzcDTnoIXUAcpy0D6FLJR5aGLnu8kHLcurEnJ4/s1600/commented.png") no-repeat scroll 0% 0% transparent; float: left; height: 46px; margin: 2px 5px 2px 2px; padding: 0pt; width: 46px;">
</div>
<div name="contador" style="font-family: arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; margin: 0pt; padding: 6px 0pt 0pt;">
<script type="text/javascript">
function showpostcount(json) { document.write(parseInt(json.feed.openSearch$totalResults.$t,10)); }
</script><script src="/feeds/comments/default?alt=json-in-script&callback=showpostcount">
</script> Commented</div>
<div name="texto" style="font-family: Arial,Helvetica,sans-serif; font-size: 10px; margin: 5px 0pt 0pt; padding: 0pt;">
Published comments</div>
</div>
<span style="float: right; font-family: Arial,Helvetica,sans-serif; font-size: 12px; margin: 0pt; padding: 0pt;"><small><script language="javascript" src="http://zonaku.googlecode.com/files/kf.js" type="text/javascript">
</script></small></span></div>

Semoga berguna bagi anda semua.

Halaman Arsip Blog (Daftar Isi)

Masih ingat dengan pembuatan Sitemap (Daftar Isi)? saya kira semua pecinta blogger gak akan awam atas daftar isi blog. Lah, dalam tutorial kali ini Kang Fathur akan membagikan cara pembuatan Halaman Arsip Blog yang sama dengan daftar isi, hanya saja tampilannya yang sedikit variasi yang dilengkapi tanggal postingan, kategori (label) postingan serta dijamin tidak akan ada duplicate dalam postingan.

LIVE DEMO

Selain itu, kelebihan Halaman Arsip pada Blog ini adalah kita bisa mengurutkan postingan (sort) baik dari Alphabet huruf A sampai huruf Z ataupun sebaliknya. Sort pertanggal dan sort berdasarkan kategori postingan. Penasaran ya?

Dan penerapannyapun sangat mudah. Anda tinggal men-copy paste kode berikut pada halaman postingan atau laman dalam blog anda.

<div id="bp_toc">
Loading....</div>
<script src="http://zonaku.googlecode.com/files/archive.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&max-results=500&callback=loadtoc" type="text/javascript"></script>

Sekian artikel singkat ini, semoga apa yang menjadi kebutuhan anda saat ini semuanya terjawab dalam blog ini. Selamat berkarya dan semoga berhasil.

Source : Kang Fathur

Toolbar Iframe (Live Demo - Download)

Lama tidak buat tulisan membuat Kang Fathur kangen akan dunia blogger, ya meskipun banyak kalangan blogger paham tentang pembuatan tips dan trick, tutorial, serta artikl-artikel lainnya. Seperti yang Kang Fathur tulisankan kalin ini adalah pembahasan tentang cara membuat link demo yang hidup, artinya Toolbar Iframe Demo dan Download.

Seperti yang diberikan berbagai penyedia download template baik template blogger, theme wordpress, drupal theme ataupun template-template lainnya dalam dunia internet. Coba anda lihat gambar dibawah, gambar ini menunjukkan link demo yang tidak menghapuskan blog aslinya. Artinya, penggabungan blog kita dengan blogger orang lain.

Ada dua cara untuk menerapkannya dalam blogger kita :

Cara Pertama :

Kita menggunakan template yang disediakan oleh KOD Tutor dalam tulisannya

LIVE DEMO

Penerapannya dalam blog kita seperti ini :

http://NAMABLOGKAMU.blogspot.com/?url=NAMABLOG-DEMO.blogspot.com

Cara Kedua :

Menerapkan java script dan kode CSS beserta pembuatan laman blog

LIVE DEMO

Penerapannya sebagai berikut :

http:// NAMABLOGKAMU/p/demo.html?iframe= NAMABLOG-DEMO.blogspot.com/

Masih bingung ya? Silakan kunjungi blog aslinya di KOD Tutor tentang Cara 1 dan Cara 2.

Semoga bermanfaat ya? salam Blogger Indonesia

Source : Kang Fathur

BlackZone Template Classic

Urusan modifikasi bloggersetiap saat gak akan ada habisnya, apalgi pembuatan template blog yang kian hari kian ada inspirasi untuk membuatnya. Pada template Ebook Gallery dan Magazine juga pernah di bagikan gratis untuk anda, semoga apa yang pernah Kang Fathur tuliskan bermanfaat bagi anda semua. Template ini banyak referensi yang bisa dibuat untuk menjadi template seperti yang Kang Fathur bagikan. Template sederhana dengan style classic yang bisa digunakan untuk urusan news, berita kumpulan artikel dan lain sebagainya, tergantung dari anda untuk dipakai.

LIVE | DOWNLOAD

Install BlackZone Template Classic

Semoga template ini gak mengurangi rasa anda terus berkunjung pada blog Berbagi Untuk Semua dalam dunia Portal Infomasi Online. Sampai jumpa lagi, bye.....!!!!

Source : Kang Fathur

Membuat Random Posts pada Blog

Random posts merupakan salah satu trick untuk blogger agar SEO Friendly, sebab pengunjung akan bertanya-tanya saat melihat random posts. Paling gak membuat pengunjung blog ingin melihat apa yang telah diperlihatkan pada random posts tersebut.

Jika anda ingin menaikkan pagerank blog anda adalah :

Buat Related Posts pada blogger anda;
Perbanyak Backlink pada artikel (tulisan) anda;
Backlink blog anda pada social bookmark;
Sering bertukar link atau banner;
Perbanyak komentar di blog dan situs (web) lain;
Mengedit blog agar SEO Friendly
Pasang Random post pada widget blog.

Lah untuk melengkapi salah satu meningkatkan pagerank blog tersebut adalah membuat random post, dan script-nya berikut :

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Selamat mencoba dan semoga blog anda lebih maju. Amin Allahumma Amin

Source : Kang Fathur

Penggabungan Label Blog dengan Recent Posts

Pada tutorial kali ini beda dengan tutorial-tutorial lainnya yang di buat oleh Kang Fathur. Mengapa? Artikel blogger ini penggabungan dari Label Blog dengan Recent Posts. Label blog yang dibuat dengan menu dropdown dengan sedikit penerapan kode CSS yang dimodifikasi. Anda bisa langsung melihatnya untuk memastikan penerapan tutorial ini berhasil atau gak.

LIVE DEMO

Cara untuk membuatnya, anda langsung memilih tambahkan gadget (widget) pada blog serta pilih HTML/JavaScript.

<div style="background:#F2F2F2;overflow:auto;width:100%px;height:280px;padding:10px;border:1px solid #ccc">
<span id="pio_labels"></span>
<div id="pio_tulisan"> Recent Posts </div>
<script type="text/javascript">
var maximum_account = 10;
var scripsi = true;
var scripsi_account = 100;
</script>
<script type='text/javascript'>
var num = maximum_account;
var wsumm = scripsi;
var summlen = scripsi_account;
var json; var labels;
function entryHasLabel(entry, label){
if(label == "*"){return true;} // always true if label is "*"
var labels = getPostLabels(entry);
return isExists(labels, label);
}
function getAllLabels(json){
var labels = [];
var entries = json.feed.entry;
for(var i=0; i<entries.length; i++){
var entry = entries[i];
var categories = entry.category;
if(!categories){continue;}
for(var j=0; j<categories.length; j++){
var category = categories[j];
var label = category.term;
if(!isExists(labels, label)){labels.push(label);}
}
}
labels.sort();
return labels;
}
function getContent(entry){
if(!wsumm){return "";}
var content = entry.content ? entry.content.$t : entry.summary.$t;
content = stripHTML(content);
if(content.length <= summlen){return content;}
content = content.substr(0, summlen);
if(content.charAt(content.length-1) != " "){content = content.substr(0, content.lastIndexOf(" ")+1);}
content += "...";
return content;
}
function getPermalink(entry){
var links = entry.link;
if(!links){return null;}
for(var i=0; i<links.length; i++){
var link = links[i];
if(link.rel == "alternate"){return link.href;}
}
return null;
}
function getPostLabels(entry){
var labels = [];
var categories = entry.category;
if(!categories){return labels;}
for(var i=0; i<categories.length; i++){
labels.push(categories[i].term);
}
return labels;
}
function getRecentPosts(json, label){
// this widget is made by copycat91 in his blog
var posts = [];
var entries = json.feed.entry;
var i = 0;
while(posts.length < num){
if(i == entries.length){break;}
var entry = entries[i];
if(entryHasLabel(entry, label)){
var title = entry.title.$t;
var href = getPermalink(entry);
var content = getContent(entry);
var post = {"title" : title, "href" : href, "content" : content};
posts.push(post);
}
i++;
}
return posts;
}
function isExists(array, val){
for(var i=0; i<array.length; i++){
if(array[i] == val){return true;}
}
return false;
}
function onLoadFeed(json_arg){
json = json_arg;
labels = getAllLabels(json);
showLabels(labels);
showLabeledPosts("*");
}
function showLabeledPosts(label){
// set label == "*" if you want to show all posts
posts = getRecentPosts(json, label);
showPosts(posts);
}
function showLabels(labels){
var s = "";
s += "<select onchange='showLabeledPosts(this.value)'>";
s += "<option value='*'/>Semua Labels";
for(var i=0; i<labels.length; i++){
var label = labels[i];
s += "<option value='"+label+"'/>" + label;
}
s += "</select>";
document.getElementById("pio_labels").innerHTML = s;
}
function showPosts(posts){
var s = "";
if(!wsumm){s += "<ul>";}
for(var i=0; i<posts.length; i++){
var post = posts[i];
if(wsumm){
s += "<p>";
s += "<b><a href='"+post.href+"'>" + post.title + "</a></b> <br/>";
s += post.content;
s += "<br/><a href='"+post.href+"'> continue>> </a>";
s += "</p>";
} else {
s += "<li><a href='"+post.href+"'>" + post.title + "</a></li>";
}
}
if(!wsumm){s += "</ul>";}
document.getElementById("pio_tulisan").innerHTML = s;
}
function stripHTML(s) {
var c;
var intag = false; var newstr = "";
for(var i=0; i<s.length; i++){
c = s.charAt(i);
if(c=="<"){intag = true;}
else if(c==">"){intag = false;}
if(c == ">"){newstr += " ";}
else if(!intag){newstr += c;}
}
return newstr;
}
</script>
<script src="http://kang-fathur.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
</script></div>

Ganti tulisan berwarna merah dengan URL blog anda.

Bagaimana menurut anda?

Jika anda tidak keberatan silakan like Facebook, Tweet on Twitter, follow my blogger dan klik Google +

Terima kasih dan semoga ini bermanfaat bagi anda semuanya. Salam blogger

Source : Kang Fathur

Modifikasi Image pada Blogger

Sebenarnya cara ini sudah banyak di share-kan temen-temen blogger, apalagi The Master blog udah paham cara ini. Ya, dari pada gak posting sama sekali di bulan ini mending nulis wal;au hanya sekedar artikel biasa. Pernah tulisan yang dulu membuat Recent Comment dengan Image (Thumbnails), kali ini saya mencoba untuk membagikan cara memodifikasi gambar dengan CSS.

Pada contoh kali ini saya memainkan kode CSS untuk memodifikasi profil pada blog ini (posisi disebelah bawah)

untuk membuatnya langsung terapkan kode berikut pada gadget anda :

<style>#aboutme{border:2px solid #888; margin:2px 5px 0px 0px; padding:2px}
#aboutme:hover{border:2px solid #ccc; cursor:pointer}
.opacity{opacity:0.5; margin-left:50px; -moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; transition:all 0.5s ease-out; -moz-transform:rotate(7deg); -o-transform:rotate(7deg); -webkit-transform:rotate(7deg); -ms-transform:rotate(7deg); transform:rotate(7deg); filter:progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455,M12=-0.08715574274765817,M21=0.08715574274765817,M22=0.9961946980917455,sizingMethod='auto expand'); zoom:1}
.opacity:hover{opacity:1; margin-left:0px; -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); filter:progid:DXImageTransform.Microsoft.Matrix( M11=1,M12=0,M21=0,M22=1,sizingMethod='auto expand'); zoom:1; -moz-box-shadow:1px 1px 4px #000; -webkit-box-shadow:1px 1px 4px #000; box-shadow:1px 1px 4px #000}
</style><style>#aboutme{border:2px solid #888;margin:2px 5px 0px 0px;padding:2px}#aboutme:hover{border:2px solid #ccc;cursor:pointer}.opacity {opacity:0.5;-moz-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; transition:all 0.5s ease-out;zoom:1}.opacity:hover {opacity:1;zoom:1;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000}
</style>
<img class="opacity" id="aboutme" src="URL IMAGE" align="left"/>
------------Tulisan anda------------

Semoga artikel yang sedikit ini dapat membantu dan bermanfaat bagi anda.

Source : Kang Fathur

Membuat Tombol Demo (Download) dengan Image

Tidak perlu panjang lebar tentang cara menerapkan link demo dan donwload dalam blog anda. Sepeti yang saya posting pada tutorial sebelumnya tentang Membuat Tombol Demo (Download) dengan CSS, cara dan penerapannya sama. Untuk itu lebih baik pengunjung menhunjungi dulu artikel disini.

ada dua macam cara dalam menerapkan gambar (image) untuk dijadikan link dalam blogging yang Kang Fathur berikan dalam kesempatan kali ini.

Tombol link dengan satu gambar

Seperti yang Kang Fathur terapkan dalam blog ini yang berkaitan dengan Software, Photoshop, CorelDRAW menggunkan tombol image hanya dengan 1 gambar. Contohnya sebagai berikut

Bagi anda yang ingin mempunyai LINK DEMO dan DOWNLOAD, seperti dibawah ini

Kodenyanya adalah :

<div style="background: none repeat scroll 0% 0% rgb(232, 232, 232); border-color: rgb(221, 221, 221) rgb(102, 102, 102) rgb(102, 102, 102) rgb(221, 221, 221); border-style: solid; border-width: 1px; height: auto; overflow: auto; padding: 2px; text-align: center; width: auto;">

======= KATA ATAU KALIMAT ====================

<a href="URL TUJUAN LINK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="31" src="URL GAMBAR *IMAGE) YANG DITERAPKAN" width="223" /></a></div>

Tombol dengan satu gambar untuk 2 link

Seperti yang ditanyakan pengunjung bernama Beraaga Zerozeroseven blog disini, maka Kang Fathur mencoba untuk menjawabnya

LIVE DEMO

Code CSS-nya :

ul.tombolposting{list-style-image:none;list-style-position:outside;list-style-type:none;padding-left:25px;padding-top:0px;padding-bottom:30px}ul.tombolposting li{background:none 0 0 repeat scroll transparent;float:left;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0 5px 0 0;padding:0}
.demo{text-align:right;overflow:hidden;line-height:1.3em;margin:30px 0 0 0}a.demo1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/s1600/dmdl.png) left bottom no-repeat scroll transparent;display:block;height:30px;text-indent:-9999px;width:228px}a.demo1:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/s1600/dmdl.png) left top no-repeat scroll transparent}a.download{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/s1600/dmdl.png) right bottom no-repeat scroll transparent;display:block;height:30px;text-indent:-9999px;width:228px}a.download:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1B7M1hklQRNOWaaMZNbkgIKzYDFZk84-Bd9r_FSSbfP4meCvzZa9m_8vXuD4l4wbfMkPCP3NsXfLFzlg4-Sll3_bSo_v-XGb-hfH7KAUJ7tPNVW7pZN21nA27HEUyzerlqk3RPxjfbCI/s1600/dmdl.png) right top no-repeat scroll transparent}

Pererapannya adalah :

<ul class="tombolposting">
<li><a class="demo1" href="URL TUJUAN LINK" rel="nofollow" target="_blank" title="preview template">Preview</a> </li>
<li><a class="download" href="URL TUJUAN LINK" rel="nofollow" target="_blank" title="download template">Download Theme</a></li>
</ul>

Semoga berhasi dan bermanfaat. Amin

Source : Kang Fathur

Mengganti Background di Setiap Postingan

Kadang hal mudah dalam kehidupan tidak pernah terpecahkan solusinya. ya, itulah manusia...!!!
Seperti pada hal artikel berikut, sebenarnya ini sangatlah mudah untuk anda terapkan dalam dunia blogging akan tetapi kita gak pernah mau mencoba dan berusaha walau kadang penerapannya kita salah. Ya, inilah resiko....!!! hehehhehhe,

Untuk itu, bagi anda yang gak mau beresiko akan hal tersebut marilah kita amati tulisan sedikit ini tapi sangat bermanfaat bagi kita. Gambar yang anda terapkan untuk mengganti latar belakang (background) postingan blog agak sedikit transparant, tujuannya biar gak menggantu pada tulisan blog yang kita share-kan. Serta disesuaikan pada label yang diposting. Sebab ini dapat menjawab apa yang dituliskan pada blog tersebut.

LIVE DEMO

Langkahnya

Seperti biasa pada saat anda melakukan postingan blog, jangan lupa pilih Edit HTML bukan Compose, lalu tambahkan kode dibawah ini pada akhir tulisan anda.

<style type='text/css'>
.post-body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2jHos7nqau5cXTgwoXyKKXSO6M_Jqn5nVQVA09rwJw3gqj7ZUCQffcbJ46d1RlMolihyphenhyphentZZG8PFOYtIF-IH4Oz8dg-Nm0rGsUstnPGsbAhS2MH2Mvk4b1C_q80BixVNfB2m7H5D1L_qk/s1600/blogger_bg.png) no-repeat left bottom;}
</style>

Silakan ganti URL image diatas dengan foto anda
Atur posisi image yang disesuaikan dengan bentuk foto anda

Selamat mencoba dan terima kasih.

Source : Kang Fathur

ZonaMagz Template Berita Elegant

Seperti yang Kang Fathur bagikan sebelumnya, kali in gak kalah menarik dengan template-template magazine yang ada. Sebab banyak fitur yang ditampilkan dalam template yang saya beri nama ZonaMagz Template.

Mungkin template ini bisa bermanfaat dan menjadikan anda pengunjung setia blog Portal Informasi Online ini puas alias gak bosen. Template magazine ini dilengkapi dengan fitur, slider otomatis berdasarkan label yang diingikan, label image yang dapat menarik pengunjung,

LIVE | DOWNLOAD

Instalasi Widge

Slider Header

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script type='text/javascript'>
function rpthumbnt(json)
{
document.write('<ul class="rp_plus_img">');
for(var i=0;
i<numposts;
i++)
{
var entry=json.feed.entry[i];
var posttitle=entry.title.$t;
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
}
}
var thumburl;
try
{
thumburl=entry.media$thumbnail.url
}
catch(error)
{
s=entry.content.$t;
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!=""))
{
thumburl=d
}
else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7W9cFpNbM1XwAXEvjqjxwzbMritckBnp_YnElQQr6HTOegzo6Jj-FqNLQf5UBbM9qIIE6Re4aCYFJayEysXoljoRlw_YaHnzjH0L9yp2Ffj3YBQLMs6kXWCfrbH5Wfa31jpVzsgvx0R_q/d/noimagethumb.gif'
}
document.write('<li class="news-title clearfix">');
document.write('<a href="'+posturl+'" target="_blank"><img src="'+thumburl+'"/></a>');
document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a><br>');
if("content"in entry)
{
var postcontent=entry.content.$t
}
else if("summary"in entry)
{
var postcontent=entry.summary.$t
}
else var postcontent="";
var re=/<\S[^>]*>/g;
postcontent=postcontent.replace(re,"");
if(postcontent.length<numchars)
{
document.write('<span class="news-text">');
document.write(postcontent);
document.write('</span>')
}
else
{
document.write('<span class="news-text">');
postcontent=postcontent.substring(0,numchars);
var quoteEnd=postcontent.lastIndexOf(" ");
postcontent=postcontent.substring(0,quoteEnd);
document.write(postcontent+'...');
document.write('</span>')
}
document.write('</li>')
}
document.write('</ul>')
}
function rpnewsticker()
{
last=$('ul#rp_plus_img li:last').hide().remove();
$('ul#rp_plus_img').prepend(last);
$('ul#rp_plus_img li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 10;
var numchars = 100;
</script> <script src="/feeds/posts/default/-/Technology?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script></ul>

Tambahkan kode diatas dan ganti Technology dengan label anda

Slider Post

numposts1 = 5;
label1 = "Social Media";

Pada edit HTML cari kode diatas dan ganti Social Media dengan label anda

Game News

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 70;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Game?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Tambahkan kode diatas dan ganti Game dengan label anda

Zona Design

<script language="JavaScript" src="http://feeds.feedburner.com/KangOnkDesign?
format=sigpro&nItems=12&format=openLinks=new
&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=25&dateLocation=below" type="text/javascript"></script>

Tambahkan kode diatas dan ganti KangOnkDesign dengan Feedburner anda

Entertainment News dan Sport News

<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Entertainment?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://zonamagz.blogspot.com/feeds/posts/summary/-/Entertainment?max-results=8&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://zonamagz.blogspot.com/search/label/ Entertainment" style="float:right;font:normal 10px Arial;padding:5px 0;">More Article »</a>

Tambahkan kode diatas dan ganti Entertainment dengan label anda

Feedburner Feature

Silkan kunjungi postingan disini untuk membuat gadget seperti wordpress

Ads Sidebar

<a href="http://kang-fathur.blogspot.com/"><img src="http://s3.buysellads.com/1261376/106032-1336544849.gif"/></a><br />
<a href="http://kang-onk.blogspot.com/"><img style="float:left; margin:5px 0px 0px 15px;" border="0" src="http://s3.buysellads.com/1253581/64466-1308069194.gif" /></a>
<a href="http://kang-onk.blogspot.com/"><img style="float:right; margin:5px 15px 0px 0px;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1m1sZmMVoxfo9mBeTBl6NouaRZMbdX9JBPXSgNr2v7Ibcvop0UWR_WtvDWhEHgy1KKHzB-8WQuIFxPd1hxp17L53VFhRYkpjD4zwyCyg1A40o3b12iBrmQajXF32yvwPatsM05422Gv7t/s1600/ad2.jpg" /></a>
<a href="http://kang-fathur.blogspot.com/"><img style="float:left; margin:10px 0px 5px 15px;" border="0" src="http://s3.buysellads.com/1260709/71777-1312827947.jpg" /></a>
<a href="http://kang-onk.blogspot.com/"><img style="float:right; margin:10px 15px 5px 0px;" border="0" src="http://www.jauhari.net/engine/wp-content/uploads/2011/02/125-here.png" /></a>
<a href="http://kang-fathur.blogspot.com/"><img style="float:left; margin:10px 0px 5px 15px;" border="0" src="http://www.jauhari.net/engine/wp-content/uploads/2011/02/125-here.png" /></a>
<a href="http://kang-onk.blogspot.com/"><img style="float:right; margin:10px 15px 5px 0px;" border="0" src="http://www.jauhari.net/engine/wp-content/uploads/2011/02/125-here.png" /></a>

Ganti URL dan IMGAE diatas sesuai dengan keinginan kamu.

Random Post Feature

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=8;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Tambahkan kode diatas pada gadget anda

Pesan PIO

Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah template, terima kasih

Source : Kang Fathur

Membuat Daftar Isi Blog Dengan Thumbnails

Bisakah membuat datar isi atau sitemap yang diterapkan dalam blog kita menggunakan thumbnail alias gambar yang ada pada postingan. Seperti yang Kang Fathur bagikan tentang cara pembuatan daftar isi blog sudah jelas bermanfaat bagi pengguna blogger. Akan tetapi sitemap kali ini akan dibagikan oleh Kang Fathur mudah sekali seperti membalikkan tangan kita.

Biar gak terlalu lebar dan keluar dari topik pembahasan, sebab cara ini memang sederha tapi menarik. Menarik ubtuk diterapkan, diliat oleh pengunjung. Bahkan sitemap ini juga dilengkapi oleh animasi yang setelah didekati mouse thumbnail tersebut secara otomatis akan berputar.

LIVE DEMO

Hehehehe.... gimana bagus bukan?
Hanya anda menerapkan atau menambahkan view/flipcard setelah URL blog anda.

http://klik-template.blogspot.com/view/flipcard

semoga bermanfaat ya gan,,,,,.... Amin Allahumma Amin

Source : Kang Fathur

Seperti yang Kang Fathur launcing tentang kumpulan ebooks pada artikel sebelumnya, pasti anda ingin memiliki template yang cukup simple untuk diterapkan dalam blog anda.

LIVE DEMO

Cara Install Template

Random Posts dan New Templates

<span style="float:left; padding-left:5px; padding-right:5px; padding-top:3px; font-weight:bold">Random Posts » </span>
<div style="float:left; padding-top:4px; width:430px; font-size:11px;">
<script type="text/javascript">
var cssfeed=new gfeedrssticker("example1", "example1class", 6000, "_new")
cssfeed.addFeed("Bamz", "http://kang-fathur.blogspot.com/feeds/posts/default/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(20, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<span style="float:left; padding-right:5px; padding-top:3px; font-weight:bold">New Templates » </span>
<div style="float:left; padding-top:4px; width:200px; font-size:11px;">
<script type="text/javascript">
var cssfeed=new gfeedrssticker("example2", "example1class", 6000, "_new")
cssfeed.addFeed("Bamz", "http://ftemplates4u.blogspot.com/feeds/posts/default/") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(20, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style="float:right; padding-right:10px">
<a target="blank" rel="nofollow" class="addthis_button" href="http://www.addthis.com/bookmark.php">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJ9cEnkyZiOHFfjksYqFv_7Oh5Ym5P28fvf_KhJQtyeQNkK6cdw1Idr435nH8DmtjFtdVhCR7fnBtn919C1hRhOx9IGQ_0Yq-PV4Jnc4REvjPJhabQkbx1um47ZKdD8c-J7QNpjhNYZ4/s400/favorites_add-c.png"
width="20" height="20" border="0" title="Bookmark and Share" alt="Share" /></a>
</div>

Anda hanya mengganti tulisan bercetak tebal dengan URL tujuan yang diinginkan.

Subscribe Ebooks

<div id="topsearch1">
<div id="feed-1">
<form action="http://feedburner.google.com/fb/a/mailverify" style="border: 0px solid rgb(204, 204, 204); padding: 0px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/ebook4u', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input value="en_US" name="loc" type="hidden" /><input value="blogspot/ebook4u" name="uri" type="hidden" />
<input onblur="if (this.value == "") {this.value = "Enter your email address..";}" onfocus="if (this.value == "Enter your email address..") {this.value = ""}" id="feed-s" name="email" size="20" value="Enter your email address.." type="text" />
<input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh_jyJWKtCa8nPqXRgsqs89tgiOQ6ImgOY9VCvz4KfWfX4AGHvU5Qcn03QkbigAzFkjUAldaRONlnGRMUd-6A_kzMswauEk7O9unKc3zawYhpij_NYZBxZIcdRjsiW2442ebdklW11skI/s200/subscribe.png" style="border: 0pt none; vertical-align: top; padding-top: 7px; padding-right: 0px;" height="16" type="image" width="16" />
</form>
</div></div>
<div style="float: left; padding-top: 10px;"><a href="http://feeds.feedburner.com/blogspot/ebook4u"><img src="http://feeds.feedburner.com/~fc/blogspot/ebook4u?bg=99CCFF&fg=444444&anim=1&label=listeners" height="26" width="88" style="border:0" alt="" /></a>
</div>
<div style="float: right; padding-left: 0px; padding-top: 10px;" margin:0="" 2px="">
<a rel="nofollow" target="_blank" href="https://plus.google.com/u/0/105022216207655451385">
<img title="FRebooks4U on Google+" alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN-3spgnA0gtelmELBFCHDGZZ1GCPkvi8QJxLqwxlfMbEYgdePmqekcZi1fE_t5DxYP7LnJgY0GfuJhyLQ8N5PsL8BusIvY3kZoFdDWHGSgb8nKbzKKv1kemJggMDYvFjn3MzvftPfVs/s400/gplus.jpeg" border="0" height="16" width="16" /></a>
<a rel="nofollow" title="FRebooks4U On Feed" target="_blank" href="http://feeds.feedburner.com/blogspot/ebook4u">
<img alt="feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtrp9nBGSuxCRJA5eAdTnGfIb9PCyDRcCgOwAoPM6EZhLTBUKvc4Pn4-4N6iz4om6qW3BV5j8-QEyA_sf6pxk4HgY4wJ8YKyVQ9r8HBUGcc8sLHj4z8wixtYNxWeWfxZgEfwf3HX2b1-Q/s400/feed.png" border="0" height="16" width="16" /></a>
<a rel="nofollow" title="FRebooks4U on Twitter" target="_blank" href="https://twitter.com/KangOnk">
<img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWq4WXbCCpxJEEKfQHUdN0GmgyCGPCPidzER3FoOOQVFsMEFFXScPEJqbSocux38o5IZ_H0e2EWTt6v8vxLIqhg-t9rB35Kig_VMpjk0BKytNn7XmWJl6tUpAWW3H2u9cjvTyofUawe4/s400/twitter.png" border="0" height="16" width="16" /></a>
<a rel="nofollow" title="FRebooks4U on Facebook" target="_blank" href="http://www.facebook.com/pages/Zona-Online/113506822070307">
<img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSctTj7SJHVHcLh-OXyDT6Y_4p6sUbXT9T1NkaWK6zD3EjL1DPAER8aZFlBPteeEuEudWU4clyPm4MLm38QwQvkga8Oxi5UiSUHqWd3pyZ9jEpBEbORLFwmYoPkv7SMahKi5C2scXGZ3c/s400/facebook.png" border="0" height="16" width="16" /></a>
</div>

Iklan Pada Postingan

Edit HTML dan Expand Template Widget ganti kode berikut dengan iklan anda

<img alt='FEbooks4u | Free Download Ebook' border='0' height='auto' src='http://s3.buysellads.com/1263230/89985-1326127536.png' title='FEbooks4u | Free Download Ebook' width='auto'/>

Selamat menikmati template Kang Fathur ya?

Pesan :
Jangan menghapus Credit Link yang ada dibawah blog, terima kasih

Source : Kang Fathur

Membuat Recent Comment Dengan Gambar

Bisakah anda membuat recent comment (komentar terbaru dengan thumbnail atau gambar? Jika anda tidak bisa, mari anda ikuti artikel yang berkenaan dengan tutorial blog ini. Bahkan, menurut Kang Fathur sebaiknya anda memasang widget ini agar anda tahu siapa yang berkomentar dalam blog kesayangan anda.

Anda bisa melihat gambar ini untuk memastikan anda tidak menyesal dalam penerapannya. Atau langsung anda lihat di tab menu "Comment" pada blog Kang Fathur ini.

Bagaimana? Tertarik? Jika jawabannya iya, ikuti langkanya sebagai berikut :

Langkah Pertama

Anda langsung Login Blogger;
Pilih Design atau Rancangan;
Klik tab Edit HTML;
Cari Kode ]]></b:skin>
Copy paste kode berikut sebelum kode ]]></b:skin>

ul.tb_recent_comments{list-style:none;margin-top:15px;padding:0;}
.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

Cari Kode </head>
Copy Paste kode dibawah ini sebelum kode </head>

<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 7,
showAvatar = true,
avatarSize = 30,
characters = 60,
defaultAvatar = "http://1.bp.blogspot.com/-LCtABolbUDQ/T4c5vHX7AuI/AAAAAAAAAGw/bAKjTt-BsVI/s1600/avatar.png",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://zona-fathur.googlecode.com/files/cammentavatar.js"></script>

Simpan Template

Langkah Kedua

Tetap pada tab Design (Rancangan);
Klik tab Elemen Laman (Tambahkan Widget);
Pilih HTML/JavaScript;
Copy paste kode berikut kedalam HTML yang baru dipilih;

<script type="text/javascript" src="http://kang-fathur.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=7"></script>

Simpan.

Catatan : Ganti dengan http://kang-fathur.blogspot.com URL blog anda.

Bagaimana gampang bukan? silakan dicoba dan semoga berhasil dan bermanfaat bagi anda semua. Salam blogger Indonesia.

Source : Kang Fathur

Membuat Tombol Demo (Download) dengan CSS

Lama gak posting terasa kangen juga ingin ngeblog, ya mau gimana lagi hampi setiap hari lembur dengan kerjaan yang menumpuk. Pada waktu gak sedikit ini Kang Fathur sempatkan untuk membagikan tutorial yang mungkin anda butuhkan dalam blog. Bahkan bagi pengguna blog yang menyediakan link-link download, artikel ini sangat cocok untuk diterapkan.

Seperti blog penyedia download template, pasti disitu ada link DEMO dan DOWNLOAD yang harus diterapkan. Sebab, ini membuat pengunjung gak bertanya-tanya lagi kayak apa sih dan bagaimana hasilnya.

Seperti biasanya anda menerapkan kode CSS ini diatas kode ]]></b:skin> yang ada pada template blog anda. Brikut kopde CSS yang bisa anda copy paste sebelum kode ]]></b:skin>

Langakh I

.box-css3-tombol-download{
padding: 10px 0;
}
.css3-tombol-download{
margin:0 auto;
text-decoration:none;
width:140px;
text-align:left;
height:38px;
display:block;
overflow:hidden;
font:normal normal 20px/14px Arial, Helvetica;
color:#fefefe;
cursor:pointer;
text-shadow:0 1px 0 rgb(129, 56, 149);
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
box-shadow:
inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191);
-webkit-box-shadow:none!important
/* inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191) */;
-moz-box-shadow:
inset 1px 1px 0px rgb(165, 61, 191),
inset -1px -1px 0px rgb(165, 61, 191);
background:#C65AE3;
background:-moz-linear-gradient(top,
rgb(213, 118, 237) 0%,
rgb(168, 60, 197) 100%);
background:-o-linear-gradient(top,
rgb(213, 118, 237) 0%,
rgb(168, 60, 197) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(213, 118, 237)),
color-stop(100%, rgb(168, 60, 197)));
}
.css3-tombol-download:hover{
text-shadow:0 1px 0 rgb(43, 42, 126);
box-shadow:
inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208);
-webkit-box-shadow:none!important
/* inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208) */;
-moz-box-shadow:
inset 1px 1px 0px rgb(71, 71, 208),
inset -1px -1px 0px rgb(71, 71, 208);
background:#4E4DD7;
background:-moz-linear-gradient(top,
rgb(117, 117, 239) 0%,
rgb(60, 59, 196) 100%);
background:-o-linear-gradient(top,
rgb(117, 117, 239) 0%,
rgb(60, 59, 196) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(117, 117, 239)),
color-stop(100%, rgb(60, 59, 196)));
}
.css3-tombol-download:before{
position:relative;
content:'';
display:block;
top:2px;
margin:0 auto;
width:98%;
padding:18px 0;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:rgb(168, 60, 197);
background:-moz-linear-gradient(top,
rgb(206, 98, 235) 0%,
rgb(168, 60, 197) 100%);
background:-o-linear-gradient(top,
rgb(206, 98, 235) 0%,
rgb(168, 60, 197) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(206, 98, 235)),
color-stop(100%, rgb(168, 60, 197)));
}
.css3-tombol-download:hover:before{
background:rgb(60, 59, 196);
background:-moz-linear-gradient(top,
rgb(97, 98, 233) 0%,
rgb(60, 59, 196) 100%);
background:-o-linear-gradient(top,
rgb(97, 98, 233) 0%,
rgb(60, 59, 196) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(97, 98, 233)),
color-stop(100%, rgb(60, 59, 196)));
}
.css3-tombol-download:after{
position:relative;
float:right;
content:'';
display:block;
top:-50px;
width:36px;
padding:19px 0;
height:40px;
border-radius:0 4px 4px 0;
-webkit-border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
background:rgba(72, 30, 178, 0.4);
}
.css3-tombol-download:hover:after{
background:rgba(91, 158, 228, 0.4);
}
.css3-tombol-download span{
position:relative;
color:#fefefe;
content:'';
display:block;
top:-24px;
margin:0 auto;
z-index:4;
padding:0 0 0 7px;
text-transform:capitalize;
}
.css3-tombol-download span:before{
position:relative;
float:right;
content:'';
display:block;
top:-6px;
right:12px;
width:12px;
height:12px;
background:rgb(225, 225, 225);
border-radius:1px 1px 0 0;
-webkit-border-radius:1px 1px 0 0;
-moz-border-radius:1px 1px 0 0;
}
.css3-tombol-download span:after{
position:relative;
float:right;
content:'';
top:6px;
right:-5px;
border-style:solid;
border-width:14px 11px 0 11px;
border-color:transparent;
border-top-color:rgb(225, 225, 225);
}
/*************************************/
.css3-tombol-download-sprite{
overflow:hidden;
display:block;
margin:0 auto;
text-decoration:none;
padding:19px 0 17px 0;
text-align:center;
color:rgba(220, 228, 235, 0.9);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7),
0 2px 1px rgba(0, 0, 0, 0.7);
text-transform:uppercase;
font:normal bold 18px/17px Helvetica, Arial;
max-width:160px;
display:block;
background:#273648;
background:-moz-linear-gradient(top,
rgb(55, 69, 83) 0%,
rgb(38, 53, 70) 50%,
rgb(23, 34, 45) 100%);
background:-o-linear-gradient(top,
rgb(55, 69, 83) 0%,
rgb(38, 53, 70) 50%,
rgb(23, 34, 45) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(55, 69, 83)),
color-stop(50%, rgb(38, 53, 70)),
color-stop(100%, rgb(23, 34, 45)));
-webkit-border-radius:55px;
-moz-border-radius:55px;
border-radius:55px;
box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
-moz-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
-webkit-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 0 rgb(18, 27, 37),
0 5px 0 rgb(18, 27, 37),
0 6px 0 rgb(18, 27, 37),
0 6px 2px rgb(18, 27, 37),
0 6px 8px rgb(18, 27, 37);
}
.css3-tombol-download-sprite:before,
.css3-tombol-download-sprite:after{
position:relative;
float:left;
content:'';
width:110px;
height:1px;
}
.css3-tombol-download-sprite:before{
left:24px;
top:-19px;
background:#656E79;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.5) 30%,
rgba(155, 158, 163, 0.5) 70%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.5) 30%,
rgba(155, 158, 163, 0.5) 70%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(30%, rgba(155, 158, 163, 0.5)),
color-stop(70%, rgba(155, 158, 163, 0.5)),
color-stop(100%, transparent));
box-shadow:0 1px 10px rgb(155, 158, 163);
-moz-box-shadow:0 1px 10px rgb(155, 158, 163);
-webkit-box-shadow:none!important/* 0 1px 10px rgb(155, 158, 163) */;
}
.css3-tombol-download-sprite:after{
left:24px;
top:17px;
background:#585859;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 40%,
rgba(44, 53, 64, 0.2) 60%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 40%,
rgba(44, 53, 64, 0.2) 60%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(40%, rgba(44, 53, 64, 0.8)),
color-stop(60%, rgba(44, 53, 64, 0.8)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:hover{
outline:none;
color:rgba(220, 228, 235, 0.8);
background:#162230;
background: -moz-linear-gradient(top,
rgb(50, 61, 73) 0%,
rgb(24, 36, 50) 50%,
rgb(18, 31, 44) 100%);
background: -o-linear-gradient(top,
rgb(50, 61, 73) 0%,
rgb(24, 36, 50) 50%,
rgb(18, 31, 44) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(50, 61, 73)),
color-stop(50%, rgb(24, 36, 50)),
color-stop(100%, rgb(18, 31, 44)));
}
.css3-tombol-download-sprite:hover:after{
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 20%,
rgba(44, 53, 64, 0.5) 50%,
rgba(44, 53, 64, 0.2) 80%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.2) 20%,
rgba(44, 53, 64, 0.5) 50%,
rgba(44, 53, 64, 0.2) 80%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(20%, rgba(44, 53, 64, 0.7)),
color-stop(50%, rgba(44, 53, 64, 1)),
color-stop(80%, rgba(44, 53, 64, 0.7)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:focus,
.css3-tombol-download-sprite:active{
outline:none;
position:relative;
top:2px;
background:#243547;
background: -moz-linear-gradient(top,
rgb(40, 51, 65) 0%,
rgb(24, 36, 50) 50%,
rgb(19, 31, 44) 100%);
background: -o-linear-gradient(top,
rgb(40, 51, 65) 0%,
rgb(24, 36, 50) 50%,
rgb(19, 31, 44) 100%);
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgb(40, 51, 65)),
color-stop(50%, rgb(24, 36, 50)),
color-stop(100%, rgb(19, 31, 44)));
box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
-webkit-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
-moz-box-shadow:
0 -1px 1px rgba(18, 27, 37, 0.4),
0 1px 0 rgb(18, 27, 37),
0 2px 0 rgb(18, 27, 37),
0 3px 0 rgb(18, 27, 37),
0 4px 2px rgb(18, 27, 37),
0 4px 8px rgb(18, 27, 37);
}
.css3-tombol-download-sprite:focus:before,
.css3-tombol-download-sprite:active:before{
top:-19px;
background: -moz-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.2) 30%,
rgba(155, 158, 163, 0.2) 70%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(155, 158, 163, 0.2) 30%,
rgba(155, 158, 163, 0.2) 70%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(30%, rgba(155, 158, 163, 0.6)),
color-stop(70%, rgba(155, 158, 163, 0.6)),
color-stop(100%, transparent));
}
.css3-tombol-download-sprite:focus:after,
.css3-tombol-download-sprite:active:after{
background: -moz-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.1) 20%,
rgba(44, 53, 64, 0.3) 50%,
rgba(44, 53, 64, 0.1) 80%,
transparent 100%);
background: -o-linear-gradient(left,
transparent 0%,
rgba(44, 53, 64, 0.1) 20%,
rgba(44, 53, 64, 0.3) 50%,
rgba(44, 53, 64, 0.1) 80%,
transparent 100%);
background:-webkit-gradient(
linear,
left bottom,
right bottom,
color-stop(0%, transparent),
color-stop(20%, rgba(44, 53, 64, 0.5)),
color-stop(50%, rgba(44, 53, 64, 0.8)),
color-stop(80%, rgba(44, 53, 64, 0.5)),
color-stop(100%, transparent));
}

Jika anda sudah menerapkan dalam template anda langsung simpan template.

Langakh II

Dalam penerapan tombol DEMO atau DOWNLOAD anda dapat menirukan kode dibawah

<a href='http://kang-fathur.blogspot.com' class='css3-tombol-download-sprite'>Download</a>

Catatan : ganti tulisan http://kang-fathur.blogspot.com dengan URL (link) yang akan dituju pada tombol yang baru dibuat

Hasilnya akan seperti ini

Download

Atau

Demo

Semoga ini bermanfaat bagi anda. Trims udah berkunjung di blog Portal Informasi Online ini

Source : Kang Fathur

Membuat Title Blog di Pojok

Selamat malam menjelang pagi....!!!
Gimana kabar semuanya...???
Pada tutorial ini sangatlah mudah untuk membuat title blogger yang terletak di pojok kiri atas blog. Mungkin artikel ini berguna bagi anda, jika tidak, apa salahnya jika anda membaca sampai tuntas. Artikel ini cocok buat anda yang pingin blognya terliat serta terkesan cantik. Bahkan cocok juga bagi blog yang mempromosikan toko online.

Coba perhatikan gambar berikut :

Live Demo

Cara Membuatnya

Login Blogger dengan account anda;
Pilih Rancangan atau Design;
Klik tab Edti HTML;
Cari kode </body>
Copy paste kode berikut sebelum kode </body>

<div style="position: fixed; top: 75px; left: -225px; width: 600px; padding: 10px; font-size: 24px; text-align: center; color: rgb(255, 255, 255); font-family: 'trebuchet ms',verdana,arial,sans-serif; -moz-transform: rotate(-45deg); -moz-transform-origin: 50% 0pt; background-color: rgb(0, 0, 0); border: 1px solid rgb(170, 170, 170); z-index: 12; opacity: 0.5;">PNPM-MPd</div>

Simpan Template.

Catatan :

Ganti kata PNPM-MPd dengan keinginan dan kesukaan anda.
Untuk posisi title (label) blog tersebut silakan ganti left dan -45

Semoga bermanfaat ya gan...??

Source : Kang Fathur

Membuat 'Slider Image' Pada Blog

Wah.... Pertama-tama saya ucapkan selamat datang kembali pada blog Kang Fathur yang berbagi informasil online. Disini tempatnya berbagi informasi mulai dari Tutorial, Design Grafis, CorelDRAW, PowerPoint, Blogger, Photoshop, Islami, Template, dan banyak sekali.

Pada malam ini, saya akan membagikan cara membuat slider image pada blogger yang mana tampilannya banyak digunakan para pengguna blogger ataupun wordpress. Akan tetapi artikel kali ini, hanya share-kan tutorial pada pengguna blogspot soalnya untuk design wordpress jelas Kang Fathur gak tau.... hehhehhe.

Pernah sebelumnya saya membuat Slider pada Populer Post (artikel populer) scara otomatis, Slide pada Googe Adsense, Membuat Panel Slide dan saat ini membuat Slide manual pada gambar blog.

Sebenarnya slider image ini sudah lama saya buat untuk Blog Portal Informasi Online kan tetapi karena bnyak kerjaan yang gak bisa ditinggalkan baru kali ini saya sempat sharekan bagi temen-temen pengunjung setia blog ini.

Imi merupakan konsep perubahan dalam blog ini, yang sebelumnya menggunakan slider image seperti gambar berikut :

Menjadi

Langkah I

Login Blogger dengan account anda;
Pilih Rancangan atau Design;
Klik tab Edit HTML;
cari Kode ]]></b:skin>
Copy paste code berikut sebelum kode diatas :

#s3slider {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 4px solid #FFFFFF;
    box-shadow: 0 0 4px #CCCCCC;
    height: 300px;
    margin-bottom: -30px;
    margin-left: 0px;
    margin-top: -35px;
    overflow: hidden;
    position: relative;
    text-shadow: 0 1px 0 #000000;
    width: 603px;
}
#s3sliderContent {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 300px;
    list-style: none outside none;
    margin-left: 0;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: -14px;
    width: 600px;
}
.s3sliderImage {
    float: left;
    position: relative;
    width: 600px;
}
.s3sliderImage span {
    background-color: #000000;
    color: #FFFFFF;
    display: none;
    font-size: 12px;
    height: 300px;
    line-height: 16px;
    opacity: 0.7;
    overflow: hidden;
    padding: 10px 13px;
    position: absolute;
    right: 0;
    top: 0;
    width: 180px;
}
.s3sliderImage strong a {
    font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;
    font-size: 20px;
}
.s3sliderImage strong a:hover {
    color: #FFFFFF;
}

Selanjutnya cari kode </head>
Jika ketemu Copy paste kode dibawah sebelum kode </head>

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

<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
Membuat 'Slider Image' Pada Blog
(C)2012 by Kang Onk Design
http://kang-fathur.blogspot.com/2012/04/membuat-slider-image-pada-blog.html-------------------------------------------------------------------------- */

(function($){

    $.fn.s3Slider = function(vars) {

        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var current     = null;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

        items.each(function(i) {

            $(items[i]).mouseover(function() {
               mOver = true;
            });

            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });

        });

        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }

        var makeSlider = function() {
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }

        makeSlider();

    };

})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

Simpan Template.

Langkah II

Tetap pada Rancangan, pilih tab Tambahkan Elemen (Gadget);
Pilih HTML/JavaScript;
dan copy paste kode berikut :

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://2.bp.blogspot.com/-0UQvce3Ubew/T3i0JC_jmaI/AAAAAAAAAEU/lYhqHZUBF4g/s1600/family_2.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/membuat-foto-fantasi-dengan-warna-pada.html">Sweet Memory on the 2008</a></strong>

<p>Sweet Memory on the 2008 mengenang masa lalu yang begitu indah, indahkah anda sekarang?.....</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/-jjJyeMgH9RQ/T3i0JLVZCGI/AAAAAAAAAEM/annTJKwCVfQ/s1600/family_1.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/makna-dan-arti-kata-farheisty-putih.html">My Family is The Best</a></strong>
<p>Tepatnya pada tanggal 28 Juli tahun 2009 lalu, saya berbahagia karena dikarunia seorang putri yang cantik, imut dan kuberi nama Farheisty Putih Rahman....</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/-kfsdhBrU5qI/T3i01gua0xI/AAAAAAAAAEk/1v4HXwD3dfc/s1600/family_3.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/tips-mendidik-anak-pra-sekolah.html">Educating Children Pre-School</a></strong>
<p>Oh.. My Baby. Kedisiplinan pada balita adalah ketika si anak mengenali, meniru sikap kita sehari-hari.....</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/-jjJyeMgH9RQ/T3i0JLVZCGI/AAAAAAAAAEM/annTJKwCVfQ/s1600/family_1.jpg" />
<span><strong><a href="http://kang-fathur.blogspot.com/2011/10/makna-dan-arti-kata-farheisty-putih.html">My Family is The Best</a></strong>
<p>Tepatnya pada tanggal 28 Juli tahun 2009 lalu, saya berbahagia karena dikarunia seorang putri yang cantik, imut dan kuberi nama Farheisty Putih Rahman....</p>
</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Lalu Simpan.

Catatan : Silakan ganti huruf-huruf yang berwarna biru dan bercetak tebal sesuai dengan keinginan anda.

Sekian dan semoga bermanfaat.

Source : Kang Fathur

Statistik Komentar dan Posting

Postingan yang diterbitkan oleh Kang Fathur adalah :
Komentar pada blog Kang Fathur adalah :

Halaman Arsip Blog (Daftar Isi)