MAS ARIE69

Default Thumbnail Pada Auto Readmore Tanpa Javasript

11:48 PM Readmore, tips blogger No comments

Gambar yang diberi panah merah di atas adalah default thumbnail (gambar default) artikel atau postingan yang tidak berisi gambar di dalamnya. Bagi yang mempertahankan validasi HTML5 templatenya, harap tetap tenang, karena cara ini tetap valid HTML5. Untuk membuatnya cukup mudah, hal pertama yang anda sediakan adalah secangkir kopi panas yang anda buat sendiri. Hehehehe

Berikut cara membuat Default Thumbnail pada Auto Readmore Tanpa Javascript.
Langkah 1: Simpan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

.post-thumbnail{background:#4e4d4d;width:88px;height:88px;text-align:center;float:left;position:relative;margin-right:10px;margin-top:10px;border:1px solid #555;}
.post-thumb {width:72px;height:72px;transition:all .3s ease-in;padding:0;margin-top:5px;margin-left:5px;border:3px solid #5e5e5e;}
.post-thumb:hover{transition:all .3s ease-in;opacity:.7}

Langkah 2: Copy kode di bawah ini dan letakkan di bawah kode <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.url'>
<div class='post-thumbnail'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumb' expr:alt='data:title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title' height='72' width='72'/>
<b:else/>
<img class='post-thumb' expr:alt='data:title' expr:title='data:post.title' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_p-Hey8cLxph2EM9SMQ8zgVNuOkX8wRxH7BucYHDNHqjFiaf65jM2QvtUPU5RNlF3zC3Eoce2odiyWE5-tQJh4Hid3DoE1WZf6E6292UfBCRvRsn7KsD4p0mOZ2KrcbO8SeQaamBnFw/s1600/icon72x72.png' width='72'/>
</b:if>
</div>
</b:if>

</b:if>
</b:if>

Kode disetiap template berbeda, cara di atas adalah yang saya gunakan di template yang saya gunakan ini. Anda juga bisa menyimpannya di bawah

<h2 class='post-title'>...</h2>

atau di atas

<h3 class='post-title'>

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

Intinya, sesuaikan dengan template anda.
Langkah 3: Simpan template.
Demikian artikel ini, selamat mencoba.

Cara Memasang PRISM SyntaxHighlighter di Blog

11:46 PM Syntax Highlighter, tips blogger No comments

| Bagi sahabat yang sering berbagi tutorial, saya kira sudah tidak asing lagi dengan istilah Syntax Highlighter. Tapi mungkin juga masih ada yang bertanya, apa sih sintaxhighlighter itu? Bahasa mudah nya membuat kode berwarna warni. Menurut pengalaman saya PRISM SyntaxHighlighter ini paling ringan loadingnya.

Untuk pemasangannya, hanya memerlukan dua langkah mudah, yaitu memasang kode CSS dan JavaScript. Sebelum memasang kode CSS, silahkan pilih tema Dark atau Light.Untuk Menambahkan jQuery Pada Template Blogger ikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan salah-salahsatu kode CSS di bawah ini sebelum/di atas ]]></b:skin>

CSS Light Theme:

/* Tema : LightSyntax oleh Blog Krizeer
URL: http://yoga-tc.blogspot.com/2013/12/cara-memasang-prism-syntaxhighlighter-di-blog.html */ 
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Dark Theme

/* Tema RDark oleh DTE:] berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

4. Tambahkan JavaScript dibawah ini di atas </body>

<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>

5. Simpan template

Cara penggunaan:

Setiap tipe bahasa mempunyai kelas masing-masing

HTML, XML, PHP ⇒ language-markup
CSS ⇒ language-css
JavaScript ⇒ language-javascript

Detail penulisan seperti ini:

<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape/konversi`) di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

Memasang Syntax Highlighter di Blogger

11:09 PM Syntax Highlighter, tips blogger No comments

Pernah melihat kode program di blog yang berwarna-warni layaknya melihat kode program di text editor komputer sampeyan ?... itu namanya Syntax Highlighter. Syntax Highlighter untuk menempatkan kode HTML yang biasa di posting di blog menjadi sama seperti di text editor layaknya memakai Notepad atau Dreamweaver ataupun program text editor lainnya. Jadi akan terasa lebih indah, berwarna-warni, lebih enak dilihat, dan lebih enak dibaca. Cara membuat untuk blogger berikut ini langkahnya :

Backup terlebih dahulu template blogger sampeyan.
Setelah dibackup, masuk ke Dasbor - Design - Edit HTML
Tekan CTR+F dan cari kode </head>
Pasang code berikut diatasnya;

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

Cara penulisan untuk menggunakan dalam tampilan posting sebagai berikut;

<pre class="brush:html">
tulis disini kode 'HTML' sampeyan
</pre>

Contoh hasil penulisan seperti srkinsyot dibawah ini... Demikian mase, dipake sukur gak dipake juga gak apa-apa

Cara Membuat Efek Sticky Pada Menubar

11:01 PM Sticky, tips blogger No comments

Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini :
Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

TAMBAHKAN JAVASCRIPT
Simpan kode ini di atas </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML7').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();   
if (scrollTop > stickyWidgetTop) {
    $('#HTML7').addClass('sticky');
} else {
    $('#HTML7').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
    stickyWidget();
});
});
</script>

MAS ARIE69

10.000 GAMBAR KEREN UNTUK BACKGROUND BLOG

This is default featured slide 2 title

This is default featured slide 3 title

This is default featured slide 4 title

This is default featured slide 5 title

Thursday, May 15, 2014

Default Thumbnail Pada Auto Readmore Tanpa Javasript

Cara Memasang PRISM SyntaxHighlighter di Blog

Memasang Syntax Highlighter di Blogger

Cara Membuat Efek Sticky Pada Menubar

Labels

Blog Archive

sponsor

comment

Thursday, May 15, 2014

Social Profiles

Labels

Blog Archive

sponsor

comment