19 Maret 2017

Cara Membuat Salju Berjatuhan Di Blog


Biasa nya pada perayaan natal identik dengan salju,beberapa web ada yang menerapkan efek salju pada blog nya,tapi karena natal sudah lewat,apa salah nya kita menerapkan efek ini tanpa momen natal wkwkkwk,efek salju yang saya berikan ini menggunakan sedikit jquery tidak perlu bantuan css,dan html,efek ini lumayan memberatkan browser kalian,penasaran? yuk kita terapkan

1. Login ke blogger > template > edit html

2. Cari kode </head> letakkan kode dibawah ini diatas kode tadi

<script src="//cdn.rawgit.com/tutorialku/usagilabs/master/lib/snowfall.min.js" type="text/javascript"></script>
<script type='text/javascript'>$(function(){$(document).snowfall()});</script>

3. simpan template

ada beberapa style yang saya berikan dibawah ini,cukup ganti kode yang saya tandai di atas,dengan beberapa kode dibawah ini,pilih salah satu

Salju Bulat



$(function(){$(document).snowfall({round:!0,minSize:5,maxSize:8})});

Salju Dengan Bayangan



$(function(){$(document).snowfall({shadow:!0,flakeCount:200})});

Salju Bulat Dengan Bayangan



$(function(){$(document).snowfall({shadow:!0,round:!0,minSize:5,maxSize:8})});

Salju Dengan Custom Gambar



$(function(){$(document).snowfall({image:"urlgambar",minSize:10,maxSize:32})});

sekian postingan kali ini

http://www.usagiproject.com/2016/12/how-to-make-snowfall-effect-in-blog.html

16 Maret 2017

Download Template Simplify 2 V4


Beberapa minggu yang lalu,saya pernah share template simplify 2 v3,kali ini saya akann share template simplify juga namun versi yang berbeda,yaitu versi ke 4 dari template premium simplify 2,tidak ada perubahan yang banyak pada versi ini,cuma ada penambahan blogger comment yang bikin template ini berbeda

liat fitur nya dibawah ini


Features Availability
Responsive True
Google Testing Tool Validator
SEO Friendly True
Mobile Friendly True
Dynamic Heading True
Adsense True
Valid Schema.org True
High CTR True
Personal Blog True
2 Column True
Auto Read More with Thumbnail True
Responsive Ad Slot True
Breadcrumbs True
Footer Link True
Related Posts with Thumb True
Search Box True
Social Share Button True
Responsive Sticky Navigation True
Back to Top Button True
Shortcodes True
Unlimited Page Numbered True
Recent Post with Thumbnail True
Custom Contact Form Widget True

password: www.zynationdesign.net

sekian postingan kali ini
jangan lupa klik iklan sebagai donasi

15 Maret 2017

Cara Membuat Efek Loader Mirip Arlina Design


Pernah liat kan? ketika kamu membuka sebuah blog,akan muncul sebuah loading pada blog tersebut? namun banyak versi loader untuk blog yang bisa kita gunakan.ada beberapa loader menggunakan jquery ataupun yang tidak

kali ini saya akan memberikan cara membuat loader pada blog,namun kita hanya menggunakan sedikit jquery,jadi tidak terlalu memberatkan blog,loader ini mirip dengan blog nya arlina design,banyak yang bertanya bagaimana cara membuat efek loading seperti blog arlina design? ikuti tutorial di bawah ini

Cara membuat efek loader mirip arlina design


1. Login ke blogger > template > edit HTML

2. cari kode </style> letakkan kode dibawah ini di atas kode tadi

.cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000}
myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite}
myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''}
myloader [role="progressbar"][aria-busy="true"]::before{right:50%}
myloader [role="progressbar"][aria-busy="true"]::after{left:50%}
@-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}}
@-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}
@keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}

3. lalu cari lagi kode <body> letakkan kode dibawah ini dibawah kode tadi

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

kode di atas bebas di letakkan di mana saja

4. cari kode </body> letakkan kode dibawah ini diatas kode tadi

<script type='text/javascript'>
//<![CDATA[
// Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>

simpant template dan lihat hasil nya
selebih nya bisa kalian kreasikan sendiri

demikian tutorial kali ini

12 Maret 2017

Modifikasi Breaking News Widget Arlina Design

Pada kesempatan kali ini zynation akan berbagi tutorial terbaru tentang Cara Modifikasi Breaking News Widget Arlina Design.

Lalu apa sih kegunaan widget Breaking News itu?


Breaking News yang anda pasang di blog akan berfungsi untuk menampilkan beberapa konten terbaru anda di blog. Widget Breaking News yang akan saya bagikan sangatlah ringan. Jadi, anda tidak perlu khawatir blog anda akan berat. Jika anda tertarik untuk Memasang Widget Headline Breaking News di Blog, silakan ikuti tutorial :

Cara Modifikasi Breaking News Widget Arlina Design


1. Seperti biasa login dulu ke blogger > Template > Edit HTML > Salin dan tambahkan CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* CSS Breaking News */
#breakingnews{position:relative;font-family:'Roboto Condensed',sans-serif;margin:20px 20px 0 20px;height:50px;line-height:26px;overflow:hidden;padding:4px 0;border-top:2px solid #ecf0f1;border-bottom:2px solid #ecf0f1}
#breakingnews:after{content:'\f0c9';font-family:fontawesome;color:#bdc3c7;position:absolute;right:18px;font-size:1.2rem;font-weight:normal;top:12px;text-align:center}
#breakingnews .breakhead{background:#e74c3c;color:#fff;display:inline-block;float:left;font-size:17px;font-weight:700;padding:6px 12px}
#adbreakingnews{float:left;margin-left:12px;margin-top:6px;line-height:28px}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
#adbreakingnews li a {font-weight:400;color:#000;margin-top:10px;}
#adbreakingnews li a:hover {color:#e74c3c;}
#adbreakingnews li a:before{content:'\f079';font-family:fontawesome;display:inline-block;float:left;margin:0 8px 0 0;line-height:29px;}

2. Setelah itu salin dan tambahkan kode di bawah ini tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://www.zynationdesign.net",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});
//]]>
</script>

Jangan lupa untuk mengganti url blog ini dengan blog anda

3. Kemudian salin kode di bawah ini dan tambahkan bebas dimanapun diantara area <body> dan </body> dalam template. Seperti contoh di blog ini saya tambahkan di dalam konten dengan id content-wrapper

<div id='breakingnews'><span class='breakhead'>Breaking News</span>
<div id='adbreakingnews'>Loading...</div></div>

4. Simpan template.

Nah itulah tutorial Cara Modifikasi Breaking News Widget Arlina Design yang bisa saya berikan kali ini, terima kasih sudah berkunjung dan salam blogger Indonesia.

10 Maret 2017

Cara Membuat Link Reload on Hover di Blog


Pengertian sederhananya adalah sebuah link yang disematkan pada sebuah teks artikel akan reload/memuat halaman secara otomatis jika kita meng hover link, fungsi dari reload ini tentunya sangat bermanfaat untuk meningkatkan traffic blog karena pengunjung akan diarahkan ke halaman artikel lain secara otomatis.

Kekurangan dari link reload ini tentunya sangat tidak disukai oleh pengunjung blog atau web, karena bisa jadi pengunjung merasa tidak nyaman saat mengunjungi halaman atau artikel yang menyematkan link reload tersebut. Apapun pilihan Anda semoga artikel ini bermanfaat dalam penggunaanya.

Berikut cara sederhana yang bisa Anda lakukan untuk membuat link teks efek reload pada sebuah artikel :

Buatlah sebuah artikel pada blog dengan format HTML / bukan compase

Pada artikel yang ingin di buat link reload sobat bisa menggunakan kode berikut :

<a href='URL-TUJUAN' onmouseover='window.location=this.href' target='_blank' title='TITLE-LINK'>DESKRIPSI-LINK</a>

Efek reload akan berfungsi jika Anda menambahkan kode yang saya tandai pada sebuah link.

Semoga penjelasan Cara Membuat Link Reload on Hover di Blog ini bermanfaat untuk Anda semua.

7 Maret 2017

Cara Menambahkan Tombol Surprise Me Di Blog


Kalian sering gak klik "I'm feeling lucky" di google,jika di klik akan muncul sebuah pencarian random,yang siapa tau pengunjung akan tertarik dengan pencarian tersebut,kegunaan nya apa? gak ada sih,untuk menghilangkan bosan saja

nah,kali ini saya akan share tutorial serupa,yaitu cara membuat tombol surprise me di blog,sama aja dengan "i'm feeling lucky" di google,cuma yang ini akan memunculkan artikel random,di blog kamu
ikuti tutorial dibawah ini untuk cara membuat nya

Cara membuat tombol surpise me di blog


1. masuk ke blog > template > edit html

2. cari kode </head> letakkan kode dibawah ini di atas kode tadi

<script type='text/javascript'>
//<![CDATA[
function showLucky(e){for(var t=e.feed,a=(t.entry||[],t.entry[0]),c=0;c<a.link.length;++c)"alternate"==a.link[c].rel&&(window.location=a.link[c].href)}function fetchLuck(e){script=document.createElement("script"),script.src="/feeds/posts/summary?start-index="+e+"&max-results=1&alt=json-in-script&callback=showLucky",script.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(script)}function readLucky(e){var t=e.feed,a=parseInt(t.openSearch$totalResults.$t,10),c=Math.floor(Math.random()*a);c++,fetchLuck(c)}function feelingLucky(){var e=document.createElement("script");e.type="text/javascript",e.src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky",document.getElementsByTagName("head")[0].appendChild(e)}
//]]>
</script>

3. simpan template

Menambahkan tombol surprise me


jika kamu ingin menambahkan tombol nya di navigasi template kamu,letakkan kode dibawah ini di dalam html navigasi kamu

<li><a id='btn-randrom' href='#random' onclick='feelingLucky()' title='Surprise me'><i class='fa fa-random'></i> Surprise me</a></code></li>

untuk menaruh nya didalam menu navigasi,letakkan kode dibawah ini

<a id='btn-randrom' href='#random' onclick='feelingLucky()' title='Surprise me'><i class='fa fa-random'></i> Surprise me</a>

Untuk css nya letakkan kode dibawah ini di atas kode ]]></b:skin> atau </style>

/* Button Suprise Me */
#btn-randrom:hover{background:#75c15d}
#btn-randrom>i{font-size:14px;background:#6ca75a;margin:-10px 5px -10px -10px;padding:0 13px;border-radius:3px 0 0 3px;display:inline-block;line-height:38px}
#btn-randrom{background:#7ec169;border-radius:3px;display:inline-block;color:#FFF;padding:10px}
a{text-decoration:none;}

Demo


Surprise me

sekian postingan kali ini

https://almost-a-technocrat.blogspot.co.id/2010/08/create-random-post-link-in-blogger.html

2 Maret 2017

Cara Mengatasi Gambar Thumbnail Yang Blur Di Blog


Kemarin,saya sempat kaget,kenapa tiba tiba gambar thumbnail blog saya jadi blur semua? padahal saya lagi tidak mengotak ngatik template di hari itu,terus kenapa bisa jadi blur? apakah ada file js yang tidak terbaca? setelah saya cek,ternyata tidak ada,file js di template ini tidak ada yang error,saya pun jadi binggung,kenapa ya? ah,mungkin blogger nya lagi error,jadi saya abaikan saja

dan hari ini,saya iseng baca baca di forum forum blogger,ternyata ada yang senasip dengan saya,dia juga mengalama hal yang sama,yaitu gambar thumbnail nya menjadi blur,ternyata bukan saya saja yang mengalami nya,syukur deh,emang dari sana nya lagi error

setelah saya googling,ternyata benar,beberapa forum luar,juga mengatakan kalo blogger lagi mengalami perbaikan,makanya semua gambar thumbnail di blogger jadi blur

setelah saya baca baca,ternyata kita bisa mengatasi nya,begini cara nya

Cara mengatasi gambar thumbnail blur di blog



1. Login ke blogger > template > edit HTML > cari kode yang dibawah ini

s72-c

2. Ganti semua kode yang di atas,dengan kode yang dibawah ini

s72-c-k-no

Simpan template,gambar thumbnail yang blur tadi,jadi seperti semula

Update

blogger udah memberbaiki gambar thumbnail nya,buat kalian yang udah masukin kode yang di atas
rubah kembali dari s72-c-k-no ke s72-c

sekian postingan kali ini

1 Maret 2017

Cara Membuat Syntax Highlighter di Blog


Membahas tentang Syntax Highlighter tentunya tidak luput dari kode-kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman. Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? Saya akan menjelaskan tentang Syntax Highlighter.

Pengertian Syntax Highlighter


Syntax Highlighter adalah fitur khusus sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk di pindahkan maupun di copas ke dalam bentuk tulisan lain supaya lebih mudah dalam membaca atau mempelajarinya.

Syntax Highlighter hampir persis dengan fitur Blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi intinya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Selain mempercantik tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenal jenis kode yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi pengurus atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Di sini saya akan berikan tutorialnya seperti contoh pada blog saya sendiri, namun akan saya berikan kepada anda dengan beberapa pilihan warna background.

Cara Membuat Syntax Highlighter pada Blog


1. Login Blogger > Template > Klik Edit HTML

2. Simpan kode di bawah ini sebelum kode </head>

<script src="https://rawgit.com/Ojikkidiw/parsescript/master/kamutetapcantik.js"/>
<script>hljs.initHighlightingOnLoad();</script>

3. Simpan kode di bawah ini sebelum kode ]]></b:skin> atau </style>

Pilih salah satu kode CSS di bawah ini yang anda sukai warna backgroundnya maupun teksnya

/* POJOAQUE STYLE WWW.ZYNATIONDESIGN.NET */
pre code{display:block;padding:0.5em;color:#DCCF8F;background:url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .css .rule .keyword,pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .clojure .title,pre .nginx .title{color:#B64926}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#468966}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .clojure .built_in,pre .identifier,pre .id{color:#FFB03B}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .css .attribute{color:#b89859}
pre .css .number,pre .css .hexcolor{color:#DCCF8F}
pre .css .class{color:#d3a60c}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

Atau

/* SOLARIZED DARK STYLE WWW.ZYNATIONDESIGN.NET */
pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

Atau

/* RAINBOW STYLE WWW.ZYNATIONDESIGN.NET */
pre::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none}
pre::selection{background:#FF5E99;color:#fff;text-shadow:none}
pre code{display:block;padding:0.5em;background:#474949;color:#D1D9E1}
pre .body,pre .collection{color:#D1D9E1}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#969896;font-style:italic}
pre .keyword,pre .clojure .attribute,pre .winutils,pre .javascript .title,pre .addition,pre .css .tag{color:#cc99cc}
pre .number{color:#f99157}
pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#8abeb7}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .identifier{color:#b5bd68}
pre .class .keyword{color:#f2777a}
pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label,pre .id,pre .lisp .title,pre .clojure .title .built_in{color:#ffcc66}
pre .tag .title,pre .rules .property,pre .django .tag .keyword,pre .clojure .title .built_in{font-weight:bold}
pre .attribute,pre .clojure .title{color:#81a2be}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata{color:#f99157}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Atau

/* MONOKAI STYLE WWW.ZYNATIONDESIGN.NET */
pre code{display:block;padding:0.5em;background:#272822}
pre .tag,pre .tag .title,pre .keyword,pre .literal,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#F92672}
pre code{color:#DDD}
pre code .constant{color:#66D9EF}
pre .class .title{color:white}
pre .attribute,pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#BF79DB}
pre .tag .value,pre .string,pre .subst,pre .title,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#A6E22E}
pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .deletion,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#75715E}
pre .keyword,pre .literal,pre .css .id,pre .phpdoc,pre .title,pre .haskell .type,pre .vbscript .built_in,pre .sql .aggregate,pre .rsl .built_in,pre .smalltalk .class,pre .diff .header,pre .chunk,pre .winutils,pre .bash .variable,pre .apache .tag,pre .tex .special,pre .request,pre .status{font-weight:bold}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

Atau

/* TOMMOROW NIGHT BLUE STYLE WWW.ZYNATIONDESIGN.NET */
.tomorrow-comment,pre .comment,pre .title{color:#7285b7}
.tomorrow-red,pre .variable,pre .attribute,pre .tag,pre .regexp,pre .ruby .constant,pre .xml .tag .title,pre .xml .pi,pre .xml .doctype,pre .html .doctype,pre .css .id,pre .css .class,pre .css .pseudo{color:#ff9da4}
.tomorrow-orange,pre .number,pre .preprocessor,pre .built_in,pre .literal,pre .params,pre .constant{color:#ffc58f}
.tomorrow-yellow,pre .class,pre .ruby .class .title,pre .css .rules .attribute{color:#ffeead}
.tomorrow-green,pre .string,pre .value,pre .inheritance,pre .header,pre .ruby .symbol,pre .xml .cdata{color:#d1f1a9}
.tomorrow-aqua,pre .css .hexcolor{color:#99ffff}
.tomorrow-blue,pre .function,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword,pre .perl .sub,pre .javascript .title,pre .coffeescript .title{color:#bbdaff}
.tomorrow-purple,pre .keyword,pre .javascript .function{color:#ebbbff}
pre code{display:block;background:#002451;color:white;padding:0.5em}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

Atau

/* SUNBURST STYLE WWW.ZYNATIONDESIGN.NET */
pre code{display:block;padding:0.5em;background:#000;color:#f8f8f8}
pre .comment,pre .template_comment,pre .javadoc{color:#aeaeae;font-style:italic}
pre .keyword,pre .ruby .function .keyword,pre .request,pre .status,pre .nginx .title{color:#E28964}
pre .function .keyword,pre .sub .keyword,pre .method,pre .list .title{color:#99CF50}
pre .string,pre .tag .value,pre .cdata,pre .filter .argument,pre .attr_selector,pre .apache .cbracket,pre .date,pre .tex .command{color:#65B042}
pre .subst{color:#DAEFA3}
pre .regexp{color:#E9C062}
pre .title,pre .sub .identifier,pre .pi,pre .tag,pre .tag .keyword,pre .decorator,pre .shebang,pre .prompt{color:#89BDFF}
pre .class .title,pre .haskell .type,pre .smalltalk .class,pre .javadoctag,pre .yardoctag,pre .phpdoc{text-decoration:underline}
pre .symbol,pre .ruby .symbol .string,pre .number{color:#3387CC}
pre .params,pre .variable,pre .clojure .attribute{color:#3E87E3}
pre .css .tag,pre .rules .property,pre .pseudo,pre .tex .special{color:#CDA869}
pre .css .class{color:#9B703F}
pre .rules .keyword{color:#C5AF75}
pre .rules .value{color:#CF6A4C}
pre .css .id{color:#8B98AB}
pre .annotation,pre .apache .sqbracket,pre .nginx .built_in{color:#9B859D}
pre .preprocessor{color:#8996A8}
pre .hexcolor,pre .css .value .number{color:#DD7B3B}
pre .css .function{color:#DAD085}
pre .diff .header,pre .chunk,pre .tex .formula{background-color:#0E2231;color:#F8F8F8;font-style:italic}
pre .diff .change{background-color:#4A410D;color:#F8F8F8}
pre .addition{background-color:#253B22;color:#F8F8F8}
pre .deletion{background-color:#420E09;color:#F8F8F8}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

4. Bila sudah memasang style atau tema syntax highlighter yang anda inginkan pada tempelate anda, sekarang save tempelate anda.

Cara Penulisan Syntax Highlighter


Gunakan markup HTML di bawah ini untuk mengaktifkan Syntax Highlighter pada saat anda ingin menampilkan source code, seperti kode Javascript, CSS, dan markup HTML pada postingan anda.

<pre><code>
Isi Kode jQuery, Javascript atau Kode CSS atau Kode HTML di sini
</code></pre>

27 Februari 2017

Bagaimana Cara Membuat Gambar Thumbnail Ala Zynation


Banyak yang bertanya,"bagaimana sih cara membuat gambar thumbnail di postingan lebih menarik?" atau "pake software apa gan?" sebenar nya sangat mudah,saya menggunakan software Adobe photoshop cc untuk membuat gambar thumbnail di setiap postingan,tidak perlu skill dewa hanya untuk membuat gambar thumbnail saja,cukup manfaatkan saja fitur basic dari adobe photoshop

kunci nya disini,hanya kerapian dan pemilihan font saja,gunakan gambar background dengan kualitas yang bagus

Ikuti tutorial dibawah ini,untuk cara membuat nya

Cara membuat gambar thumbnail lebih menarik ala zynation


1. Biasanya sebelum membuat thumbnail saya mencari dulu,background yang cocok,sesuai postingan
silahkan dicari di google images

2. jika sudah,tekan CTRL+O untuk memasukkan background yang kamu download tadi

3. kemudian tekan CTRL+ALT+I setting seperti gambar dibawah ini,jangan lupa dirubah menjadi pixels


4. tekan CTRL+U untuk membuka hue/saturation,jangan lupa centang colorize,atur warna nya hue,saturation,dan lightness sesuai selera


5. sekarang kita akan membuat text,tekan T di keyboard kamu,lalu tulis di atas background nya


6. selesai,mainkan rectagle tool agar lebih menarik,tekan tombol U di keyboard,mainkan seseuai selera,sehingga menjadi seperti dibawah ini


Bagaimana cara membuat gambar thumbnail flat design?


cara nya hampir sama,hanya memainkan icon,warna,dan action long shadow,untuk membuat nya
download dulu action long shadow nya,dibawah ini


1. Tekan tombol CTRL+ALT+N untuk membuat new layer,resolusi sesuaikan dengan selera

2. klik seperti gambar dibawah ini,dibagian warna,atur warna sesuai selera,untuk referensi flat color silahkan kesini http://flatcolors.net/


3. download action flat shadow,yang sudah saya berikan di atas,untuk memunculkan action nya,klik window > action


4. upload file action,yang sudah saya berikan tadi,ikuti seperti gambar dibawah ini


5. jika sudah,tulis text di atas nya,klik play action,seperti gambar dibawah ini


6. hasil nya seperti gambar dibawah ini


Lalu,bagaimana dengan icon pada gambar thumbnail nya? cara nya sama,kita hanya perlu gambar icon format PNG,lalu kita gunakan long shadow action tadi


jadi intinya,untuk membuat gambar thumbnail lebih menarik,kita hanya perlu menguasai permainan warna dan font saja

FAQ:
A: emang nya harus menggunakan software adobe photoshop cc ya gan?
Q: gak harus,tapi ada bagus nya,gunakan photoshop versi cs4 ke atas
A: warna warna nya cari dimana gan?
Q: disini http://flatcolors.net/
A: icon nya gan?
Q: banyak di google,cari aja dengan keyword "download icon png" nanti akan muncul banyak banget web penyedia icon gratis
A: font nya cari dimana gan?
Q: disini banyak http://www.dafont.com/

sekian postingan kali ini