Cara Membuat Table of Contents di Postingan Blogger

Table of Contents adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat pada sebuah artikel. Table of Contents bisa kita gunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya. Table of Contents ini sering kita temui pada situs Wikipedia, Ensiklopedia, dan juga file PDF dari E-Book yang biasanya diletakkan setelah tulisan kata pengantar atau ide pokok dari sebuah artikel.

Baiklah, di sini Arlina Design akan memberikan tips tentang bagaimana Cara Membuat Table of Contents di Postingan Blogger dengan mudah.
Selengkapnya »

Memasang Efek Preloading Keren di Blogger

Ada banyak cara usaha untuk mempercantik blog, salah satunya dengan Memasang Efek Preloading Keren di Blogger ini. Bagi yang penasaran, simak tipsnya di bawah ini.

Cara kerja dari Efek Preloading di Blogger ini yaitu transisi yang akan muncul otomatis saat memuat halaman di blog dan akan hilang setelah halaman tersebut termuat dengan penuh. Efek Preloading yang akan saya bagikan ini tidak akan mempengaruhi kecepatan blog karena sangat ringan murni CSS dan SVG tanpa gambar. Sebelumnya saya juga pernah berbagi postingan terkait di sini Cara Memberikan Efek Animasi Loading Sederhana Saat Halaman Dimuat. Berikut tips Cara Memasang Efek Preloading
Selengkapnya »

Cara Memasang Syntax Highlighter di Postingan Blog

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

Syntax Highlighter merupakan 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 dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajarinya.
Selengkapnya »

Cara Membuat Content Pagination di Blogger seperti Wordpress

Content Pagination berfungsi membagi sebuah konten menjadi beberapa halaman dengan menampilkan pager angka sesuai banyak halaman yang dibuat ( umumnya tampilan ini banyak digunakan oleh Template berplatform Wordpress ) sehingga memudahkan navigasi pengunjung untuk melihat konten selanjutnya.

Content Pagination yang diterapkan di blogger ini menggunakan Javascript, tanpa memerlukan jquery library sehingga tidak akan banyak mengganggu loading halaman blog. Ketika pengunjung mengklik pager untuk membaca konten selanjutnya, maka selain konten yang berganti juga otomatis mereload halaman sehingga otomatis konten berikut iklan yang ada di halaman juga ikut berganti.

Jika Anda ingin mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.

Silahkan gunakan ( masukkan ) kode berikut ini pada postingan mode HTML untuk membuat postingan dengan content pagination ini.

 <style>
.button-box{margin:30px 0;text-align:center;}
#page1,#page2,#page3,#page4,#page5{display:none}
#page1.current{display:block}
a.button-pager{height:30px;line-height:30px;padding:0 20px; margin:0 5px 0 0;text-align:center;background:#ddd;color:#333;cursor:pointer;display:inline-block;}
a.button-pager.current{background:#333;color:#fff;}
</style>

<div id='topcontent'></div>

<div id="page1" class="current">
Kontent untuk halaman 1 tulis di sini......
</div>

<div id="page2">
Kontent untuk halaman 2 tulis di sini......
</div>

<div id="page3">
Kontent untuk halaman 3 tulis di sini......
</div>

<div id="page4">
Kontent untuk halaman 4 tulis di sini......
</div>

<div id="page5">
Kontent untuk halaman 5 tulis di sini......
</div>

<div class="button-box">
<a class="button-pager current" id="button1" href="?page1#topcontent">1</a>
<a class="button-pager" id="button2" href="?page2#topcontent">2</a>
<a class="button-pager" id="button3" href="?page3#topcontent">3</a>
<a class="button-pager" id="button4" href="?page4#topcontent">4</a>
<a class="button-pager" id="button5" href="?page5#topcontent">5</a>
</div>

<script>
//<![CDATA[
var p1=document.getElementById("page1"),p2=document.getElementById("page2"),p3=document.getElementById("page3"),p4=document.getElementById("page4"),p5=document.getElementById("page5"),b1=document.getElementById("button1"),b2=document.getElementById("button2"),b3=document.getElementById("button3"),b4=document.getElementById("button4"),b5=document.getElementById("button5");window.location.href.search("page1")>0&&(p1.style.display="block",p1.classList.add("current"),b1.classList.add("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page2")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="block",p2.classList.add("current"),b2.classList.add("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page3")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="block",p3.classList.add("current"),b3.classList.add("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page4")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="block",p4.classList.add("current"),b4.classList.add("current"),p5.style.display="none",p5.classList.remove("current"),b5.classList.remove("current")),window.location.href.search("page5")>0&&(p1.style.display="none",p1.classList.remove("current"),b1.classList.remove("current"),p2.style.display="none",p2.classList.remove("current"),b2.classList.remove("current"),p3.style.display="none",p3.classList.remove("current"),b3.classList.remove("current"),p4.style.display="none",p4.classList.remove("current"),b4.classList.remove("current"),p5.style.display="block",p5.classList.add("current"),b5.classList.add("current"));
//]]>
</script>

Silahkan sesuaikan pembagian konten halaman dan tombolnya sesuai keinginan. Namun Sobat juga bisa menyimpan style CSS dan javascript-nya pada edit HTML agar lebih simple ketika membuat postingannya.

Semoga bermanfaat.

Cara Mebuat Widget Popularpost Keren di Blog Terbaru

Widget Popularpost default atau bawaan Blogger umumnya kurang keren atau sering dari kita ingin menggantinya namun tidak tahu apa yang harus dilakukan, terutama bagi newbie yang belum begitu mengenal koding. Widget Popularpost yang umum dibagikan pada template template gratis juga kebanyakan dengan tampilan yang kurang menarik.

Demo
Click here

Nah…pada kesempatan kali ini CrepictDGZ coba memberikan tips bagaimana cara mengganti Widget Popularpost bawaan template dengan Widget Popularpost seperti pada gambar diatas...

Cara Mebuat Widget Popularpost Keren di Blog Terbaru

1.Sobat harus memperhatikan syarat berikut ini :

Hapus kode CSS Widget Popularpost yang sebelumnya terpasang pada template Sobat sebelum menggantinya dengan Widget Popularpost dari CrepictDGZ.

2.Setelah menghapus, silahkan ganti dengan CSS Widget Popularpost dibawah ini :

/* CSS Popularposts */
.PopularPosts .item-thumbnail{float:none;margin:0 0 10px}
#PopularPosts1{padding:0;}
#PopularPosts1 ul{padding:0;counter-reset:popcount;background: linear-gradient(to right, #2B0C93 0px, #A54098 56%, #F84272 100%) repeat scroll 0% 0% transparent;z-index:999;transition:all .4s ease-in-out;}
#PopularPosts1 ul li{margin:0;padding:15px 10px 15px 45px;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.3);transition:all .3s}
#PopularPosts1 ul li:last-child{border-bottom:none}
#PopularPosts1 ul li .item-title{color:#fff;padding:0 10px 0 0;line-height:1.2em;}
#PopularPosts1 ul li:hover{background:rgba(0,0,0,0.06)}
#PopularPosts1 ul li .item-title a{font-size:14px;font-weight:700;color:#fff}
#PopularPosts1 ul li img { width: 318px;height: auto;}
#PopularPosts1 ul li:first-child{border-bottom:none;padding:0}
#PopularPosts1 ul li:first-child .item-thumbnail {margin:0;width:100%;height:180px;overflow:hidden;display:block;}
#PopularPosts1 ul li:first-child .item-title{position:absolute;left:0;right:0;bottom:0;top:0;text-align:left;padding:15px 20px 15px 45px;background:rgba(45,62,80,.6);z-index:1;transform:translate(0,105px);transition:all .3s}
#PopularPosts1 ul li:hover:first-child .item-title{background:rgba(45,62,80,.6);transform:translate(0,0)}
#PopularPosts1 ul li:first-child .item-title a{font-size:15px;color:#fff}
#PopularPosts1 ul li .item-thumbnail,#PopularPosts1 .item-snippet{display:none}
#PopularPosts1 ul li:first-child .item-snippet{display:block;position:absolute;bottom:0;left:0;right:0;top:0;padding:15px 20px 15px 45px;color:#fff;opacity:0;visibility:hidden;transform:translate(0,180px);font-size:13px;overflow:hidden;text-overflow:ellipsis;height:7.5em;transition:all .3s;text-align:justify;}
#PopularPosts1 ul li:first-child .item-snippet:after{content:'';text-align:right;position:absolute;bottom:0;right:0;width:70%;height:1.2em;background:linear-gradient(to right,rgba(44,62,80,0),rgba(44,62,80,1) 50%)}
#PopularPosts1 ul li:hover:first-child .item-snippet{opacity:1;visibility:visible;transform:translate(0,55px);z-index:2;}
#PopularPosts1 ul li .item-title:before{list-style-type:none;padding:0;counter-increment:popcount;content:counter(popcount);position:absolute;left:5%;top:61%;margin-top:-19px;color:rgba(255,255,255,.65);font-size:24px;line-height:1;z-index:2;text-align:center;font-weight:700;transition:all .3s}
#PopularPosts1 ul li:first-child .item-title:before{top:25%}
#PopularPosts1 ul li:first-child .item-title:before{color:#fff}

3. Simpan kode Javascript dibawah ini sebelum kode</body>

<script type='text/javascript'>
//<![CDATA[
// Popular Post
var newidth=295;var neweight=180;$(".popular-posts .item-thumbnail img,ul.recent_posts_arlina img").each(function(){var t=$(this).attr("width");$(this).attr("width",newidth),$(this).attr("height",neweight),$(this).attr("src",$(this).attr("src").replace("/s72-c/","/w"+newidth+"-h"+neweight+"-c/"))}),$(".PopularPosts .item-snippet").text(function(t,i){return i.substr(0,130)});
//]]>
</script>

4.Pastikan settingan Widget Popularpost seperti dibawah ini

5.Simpan Template, dan lihat hasilnya

Tentu sedikit banyak akan ada permasalahan dibalik semua tutorial yang saya berikan, dan jika ada pertanyaan seputar tutorial diatas silahkan isi kolom komentar yang sudah saya sediakan dibawah…

Demikian dan dan semoga bermanfaat..

Cara Membuat Breadcrumb dengan Markup Microdata Schema.org Terbaru !

Pada umumnya situs situs atau blog masih banyak yang menggunakan breadcrumb dengan markup data-vocabulary.org. Ketika markup microdata schema.org merupakan markup untuk breadcrumb terbaru yang direkomendasikan oleh google, ada baiknya kitapun mengikuti apa yang direkomendasikan oleh Google .

Google Search menggunakan markup breadcrumb dari sebuah halaman web untuk mengkategorikan informasi dari halaman dalam hasil pencarian. Dengan begitu, pengguna dapat tiba di suatu halaman dan pengguna dapat kembali ke halaman web yang sama dengan kategori yang sama dengan halaman sebelumnya.

Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan menggunakan markup microdata schema.org dengan menambahkan ikon SVGsebagai separator pada tiap tiap labelnya.

Untuk mengganti atau membuat Membuat Breadcrumb dengan Microdata Schema.org, silahkan ikuti langkahnya berikut ini :

1. Cari kode ]]></b:skin> Jika sebelumnya sudah ada kode CSS yang mirip seperti itu, silahkan ganti dengan kode CSS style dibawah ini :

 /* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666} 

2. Silahkan cari kode seperti dibawah ini

 <b:includable id='breadcrumb' var='posts'>
.......................
.......................
.......................
</b:includable> 

Jika sudah ketemu, silahkan ganti dengan kode di dibawah ini :

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog#pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post#labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema#org/BreadcrumbList'>
<a expr:href='data:blog#homepageUrl' title='Home'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg> <span>Home</span></a>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label#na#e' itemprop='item' itemscope='itemscope' itemtype='https://schema#org/Thing'>
<span itemprop='name'><data:label.name/></span></a>
<meta expr:content='data:num+1' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if></b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable> 

3. Terakhir, simpan template...

Selamat mencoba dan semoga bermanfaat.

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Salam Blogger, Kali ini CREPICTDGZmau berbagi tips Bagaimana Cara Membuat atau MenggantiHeader Blog Menjadi 2 Kolom dan tentunya Responsive. Mengganti yang dimaksud disini adalah HEADER BLOG yang sebelumnya hanya terdiri 1 kolom yaitu Judul dan Diskripsi blog saja, Nah… disini kita akan menggantinya menjadi 2 kolom yaitu KIRI yang terdiri Judul dan Header Blog dan KANAN umumnya sebagai kolom IKLAN atau ADSENSE.

Pada Tahap awal Sobat harus mencari kode CSS dan HTML yang terkait dengan HEADER BLOG yang ingin Sobat ganti pada Template sebelumnya…..lalu menghapusnya.

DISINI yang WAJIB Sobat Newbie lakukan adalah BACKUP TEMPLATE sebelum melakukan oprek kode CSS dan HTML dalam hal ini sambil belajar koding Newbie butuh ketelitian dan kehati-hatian  …

Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive

Langkah 1

Cari kode CSS yang berkaitan dengan HEADER BLOG umumnya kode CSS seperti berikut ( #header atau .header dan pada body#layout #header dst) termasuk kode CSS yang ada pada Media Query dan jika sudah ketemu HAPUS semuanya….!

Langkah 2

Cari kode seperti dibawah ini atau mirip ( kode HTML Header Blog ini panjang )

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
...........
...........
...........
</b:section>
</div>

Jika sudah ketemu silahkan dihapus semuanya dan GANTI dengan kode yang ada dibawah ini.

<div id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
  <b:section class='header section' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='CREPICTDGZ (Header)' type='Header' version='1'>
      <b:widget-settings>
        <b:widget-setting name='displayUrl'/>
        <b:widget-setting name='displayHeight'>0</b:widget-setting>
        <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
        <b:widget-setting name='useImage'>false</b:widget-setting>
        <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
        <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
        <b:widget-setting name='displayWidth'>0</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
          <div id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
                <b:include name='title'/>
            </div>
            <b:include name='description'/>
          </div>
        <b:else/>
          <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
            <div class='titlewrapper' style='background: transparent'>
                <b:include name='title'/>
            </div>
            <b:include name='description'/>
          </div>
        </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
          <b:include name='title'/>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
      <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
      <b:includable id='title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <h1 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h1>
      <b:else/>
      <h2 class='title'>
        <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
          <span itemprop='name'><data:title/></span>
        </a>
      </h2>
    </b:if>
    <b:else/>
    <h2 class='title'>
      <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'>
        <span itemprop='name'><data:title/></span>
      </a>
    </h2>
      </b:if>
</b:includable>
    </b:widget>
  </b:section>
  <b:section class='header-right section' id='header-right' maxwidgets='1' showaddelement='yes'/>
</div>
<div class='clear'/>

Langkah 3

Kita mengganti semua kode CSS yang sudah kita hapus pada Langkah 1 sebelumnya :

1. Letakkan kode dibawah ini sebelum kode ]]></b:skin>

#header-wrapper {margin:20px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
max-width:468px;}

2. Letakkan kode dibawah ini dibawah kode <b:template-skin>

body#layout #header-wrapper {min-height:0px;width:100%;}
body#layout #header {width:30%;}
body#layout #header-right {width:70%;}
#layout #header-wrapper{min-height:0px;width:100%;margin:10px 0 0 0;}

3. Kemudian letakkan kode dibawah diatas kode</head>

/* CSS Header Wrapper */
#header-wrapper {margin:30px auto;padding:0;overflow:hidden;max-width:920px;overflow:hidden;}
#header {float:left;width:100%;max-width:430px;color:#333;margin:0;}
#header h1, #header h2, #header p {font-family:Roboto;font-size:240%;font-weight:700;color:#333;text-transform:uppercase;}
#header a {color:#333;text-decoration:none;transition:all 0.3s ease-out;}
#header a:hover {color:#398dcc;}
#header .description {font-family:Roboto;font-size:100%;font-weight:400;color:#666;text-transform:none;line-height:normal;margin:0;}
.header img {display:block;}
.header-right {float:right;padding:0;overflow:hidden;margin:0;width:100%;
max-width:468px;}
.header-right img {display:block;}
.Header h1,.Header h2 {margin-bottom:0;}

@media screen and (max-width:960px) {
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
#header {margin:20px auto;padding:0 30px;background:transparent;max-width:80%;}
.header-right img, .header-right iframe{margin:0 auto;max-width:100%;}
#header-wrapper{padding:0;margin:20px auto;}}

@media only screen and (max-width:640px){
#header h1,#header p,#header,.header-right,#header .description{margin:0 auto;width:100%;float:none;text-align:center;}
.header-right{float:none;margin:0 auto;text-align:center;}
.header-right img, .header-right iframe{float:none;margin:0 auto;text-align:center;}
#header-wrapper{padding:0;margin:20px auto;}
#header {min-width:initial;background:none;margin:20px auto;padding:0 5px;}
#header .description {font-size:100%;line-height:1.5;}}

Langkah 4

Save atau Simpan Template… Selesai

Demikian Tutorial Cara Membuat/Mengganti Header Blog Menjadi 2 Kolom Responsive, Jika permasalah terkait dengan tips diatas silahkan isikan problem serta keluhan pada kotak komentar atau hubungi Admin melalui Kontak Form yang tersedia….Terima kasih , semoga bermanfaat….

Jangan lupa share ya…Sob

Cara Membuat Kotak Kode Script untuk Posting Blog

Tutorial kali ini cocok bagi Sobat Blogger yang suka berbagi kode semacam HTML,CSS,Javascript,jQuery pada posting Blognya. Sebenernya cara yang akan saya berikan ini tidak jauh beda dengan pembuatan Synthax Hightlighter yang sudah umum kita temukan tutorialnya.

Namun kali ini saya membuat kotak kode yang lebih sederhana ( simple precode disertai seleksi ) dan memiliki fungsi yang sama dan tampilan yang tidak kalah menariknya di banding Synthax Hightlighter .

Pada konsepnya simple precode ini sama fungsinya dengan Synthax Hightlighter. Langsung aja kepada tahan dan proses pembuatan simple precode dengan seleksi. Sobat bisa melihat DEMO dibawah ini

Demo
Click here

Cara Membuat Simple precode dengan seleksi

1. Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin>  atau </style>

/* CSS Simple Pre Code */
pre {background: #fff;white-space: pre;word-wrap: break-word;overflow: auto;}
pre.code {margin: 20px 25px;border: 1px solid #d9d9d9;border-radius: 2px;position: relative;box-shadow: 0 1px 1px rgba(0,0,0,.08);}
pre.code label {font-family: sans-serif;font-weight: normal;font-size: 13px;color: #444;position: absolute;left: 1px;top: 16px;text-align: center;width: 60px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;pointer-events: none;}
pre.code code {font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display: block;margin: 0 0 0 60px;padding: 15px 16px 14px;border-left: 1px solid #d9d9d9;overflow-x: auto;font-size: 13px;line-height: 19px;color: #444;}
pre::after {content: "double click to selection";padding: 0;width: auto;height: auto;position: absolute;right: 18px;top: 14px;font-size: 12px;color: #aaa;line-height: 20px;overflow: hidden;-webkit-backface-visibility: hidden;transition: all 0.3s ease;}
pre:hover::after {opacity: 0;visibility: visible;}
pre.code-css code {color: #0288d1;}
pre.code-html code {color: #558b2f;}
pre.code-javascript code {color: #f57c00;}
pre.code-jquery code {color: #78909c;}

2. Berikutnya simpan script di bawah ini sebelum tag penutup </body>

<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Script di atas berfungsi untuk menyeleksi otomatis setiap pengunjung blog Anda  melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

3. Setelah itu simpan template.

Cara penerapan pada postingan Blog

Silakan tambahkan kode di bawah ini pada tab HTML post

<pre class='code code-html'><label>HTML</label><code>... kode HTML (yang telah diparse) di sini ...</code></pre>
<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>
<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>
<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Demikian Tutorial Cara penerapan Simple Pre Code dengan Seleksi pada Posting Blog.

Dan apabila Sobat mendapati kendala silahkan tulis kendala/problem pada kotak komentar dibawah….

Semoga bermanfaat.

Cara Menampilkan tombol Pin It ( Pinterest ) pada Gambar Blog

Salam Blogger, Ok kali ini CrepictDGZ akan memerikan tips cara menampilkan tombol Pin It (Pinterest ) otomatis ketika gambar blog disentuh.

Demo Click here

Fungsi dari tombol Pin It ini adalah untuk membagikan gambar blog kita secara langsung ke akun Pinterest milik pengguna atau pengunjung Blog, yang secara otomatis Artikel blog kita di share ke dalam Akun Pinterest pengunjung Blog. Cara kerja dari Tombol share Pin It ini yaitu tombol akan muncul saat sobat memfokuskan kursor pada setiap gambar di dalam blog.

Bagaimana Cara Menampilkan Logo Pin It pada Gambar Blog ?

Sebenernya caranya amat sangat simple dan sederhana, Sobat cukup menambahkan kode dibawah ini sebelum kode </body>

<script async='' data-pin-color='white' data-pin-hover='true' src='//assets.pinterest.com/js/pinit.js'/>

Kemudian Save atau Simpan Template…… Selesai

Selamat mencoba semoga bermanfaat….

Cara Memasang Ikon SVG untuk Mempercepat Loading Blog

CrepictDGZberbagi lagi, kali ini saya akan memberikan Tips Cara Mempercepat Loading Blog dengan menggunakan Ikon SVG. Selama ini Fontawesome adalah ikon yang umum digunakan dalam setiap desain template ( termasuk desain saya sendiri ) hehehehe… ntar ja templatenya diupdate, maklum lagi sibuk kerja.

Namun ada sisi yang kurang enak dengan memasang FontAwesome yaitu memperlambat loading blog. Karena dengan menggunakan  Font Awesome template harus manggil script sebelum menampilkan Ikon FontAwesome. Pemanggilan script eksternaljadi salah satu point penting yang perlu dipertimbangkan bagi pengguna platform Blogger yang tidak bisa mengatur cache dan expired header. FontAwesome memang tak memperlambat blog secara signifikan, namun untuk test page speed loading akan berdampak pada score saat dilakukan test seperti di GTMetrix atau Google Page Speed Insight dll.

Dari judul diatas berarti Anda harus mengganti penggunaan Ikon FontAwesome yang sebelumnya terpasang di Blog dengan SVG ikon.

Contoh HTML script Font Awesome yang terpasang di template seperti dibawah ini :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Dan Anda wajib menghapus kode diatas jika sudah mempergunakan SVG Ikon.

Bagaimana Cara Memasang Ikon SVG di Blog ?

Kita harus masuk ke situsnya untuk mendapatkan Ikon SVG yang akan kita pasangkan di Blog. Silahkan masuk ke  Material Design Icon. Disini Anda bisa milih berbagai jenis icon SVG yang akan kita pasangkan di Blog dengan mengambil kodenya untuk dipasangkan pada template blog.

Silahkan klik pada ikon yang dipilih. Pilih toggle kode '</>'lalu pilih view SVG maka akan tampil kotak dengan kode seperti di bawah ini sebagai contoh saya akan mengambil ikon Account-Multiple.

Kemudian simpan kode SVG di atas pada Edit HTML template. Saya akan contohkan misalnya Anda ingin mengganti  ikon "account" pada link profil ( yang masih menggunakan FontAwesome ) di rubah ke SVG ikon Account-Multiple seperti .

Pada umumnya kode HTML ikon link profile adalah seperti dibawah ini

 <span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
               <b:if cond='data:post.authorProfileUrl'>
                    <span class='fn author'>
                        <a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
                        <span itemprop='name'><data:post.author/></span>
                      </a>
                    </span>
                  <b:else/>
                    <span class='fn author'><span itemprop='name'><data:post.author/></span></span>
                  </b:if>
                </span>

Setelah Anda tambahkan Kode dari SVG ikon akan tampak seperti dibawah ini 

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Pastekan dibawah kode SVG ikon -->
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#000000" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG ikon -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Supaya gambar SVG pas ukuran baik tinggi dan lebarnya di Blog, maka kita pindahkan inline style-nya style="width:24px;height:24px"dan fill="#000000"ke dalam style CSS menjadi seperti dibawah ini

.post-author svg {width:24px;height:24px;}

Dengan menghapus inline style dan menggantinya dengan kode CSS di atas diharapkan kita bisa dengan mudah mengatur besar kecil ukuran ikonnya.

Dan jika ingin mengganti warna ( fill="#000000")  pada ikon-nya, kita gunakan css berikut.

.post-author svg path {fill: white;}

Penting : Jika Anda sudah menambahkan style CSS seperti diatas, maka kode HTML SVG ikon diatas harus di revisi/ganti ( lihat HTML SVG ikon langkah sebelumnya diatas ). Maka perubahannya adalah seperti dibawah ini

<span class='post-author vcard' itemprop='author' itemscope='itemscope' itemtype='https://schema.org/Person'>
<b:if cond='data:post.authorProfileUrl'>
<!-- Jika sudah memasang kode style CSS kode SVG seperti ini -->
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
<!-- Batas kode SVG  -->
<span class='fn author'>
<a expr:href='data:post.authorProfileUrl' itemprop='url' rel='author' target='_blank' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn author'><span itemprop='name'><data:post.author/></span></span>
</b:if>

Demikian Tutorial Cara Menggunakan Ikon SVG untuk Mempercepat Loading Blog, meski mungkin sulit dipahami bagi Sahabat Newbie namun belajar dari kesalahanadalah cara bagaimana agar kita tahu dan menemukan cara yang benar.

Sekian dan Semoga bermanfaat…

Storing Javascript/CSS Files With Google Drive

Storing Javascript/CSS Files With Google Drive

Storing Blogger CSS and JavaScript files with Google Drive will help to eliminate any of the problems mentioned above and reduce the clutter among your services. Taking this method can increase your site speed, increase the opportunities for a successful SEO campaign, and make your life so much easier.

Google Drive provides ample amount of space to store large files, and offers collaboration services so that you can work among different team members on the same project. Some of the files that you upload into the cloud services can remain unpublished and stay within the private site, whereas other files like blog posts can be published or stored to the public site.

Another beneficial feature of storing all your Blogger files on Google Drive is that it is highly secure. Google comes with the backing of one of the leading companies in the technical world so that you can be sure your content is safe from hackers and those looking to compromise your site.

This guide will provide you with step-by-step instructions on how to setup your Blogger site using Google Drive. It's completely free to take advantage of this strategy, and will provide you with a solid platform from which to build your blog.

Step 1. Prepare the CSS/JavaScript Files

·         First, we need to create the file that we need to host. To host a CSS file, open the Notepad and paste the CSS code (if it is enclosed within the <style> and </style> tags, remove them). 

·         In the Notepad menu, select 'File' > 'Save as' and type the file name with the .css extension just like I did with mycssfile.css - see the screenshot below.

·         In the same window, choose "All files" in the "Save as type" option and set the Character Encoding to UTF-8. 

·         If you want to host a JavaScript file, add the .js extension (instead of .css) at the end of your file name (remove the <script>...</script> tags if you see them). Click "Save" and navigate to the location where you want to save the file. 

Step 2. Upload Your File on Google Drive

·         Access https://drive.google.com and log in with your Gmail account. After you logged in, click on the 'Create' button and add a new separate folder to upload your JavaScript and CSS files.

·         Open the newly created folder, and click on the Upload button with the upward arrow to choose the files that you need to upload.

·         Now, navigate to the location where you saved the files, select them (to select multiple files, press and hold down the Ctrl key on your keyboard and then click on them) and press the Open button.

·         After the files have been successfully uploaded, right click on the file names (to select all your files in the folder, click on the checkbox) and select 'Share':

·         In the 'Sharing settings' window, click on the 'Change' link and choose the 'Public on the web' option. Press 'Save' and copy the link(s) of your uploaded file(s) from the 'Links to share' box highlighted in blue, then paste it into a Notepad to use it later.

Step 3. How to Add an External CSS/JavaScript file to Blogger

Before you can use the links, you must replace 'https://drive.google.com/file/d' to 'https://googledrive.com/host' and remove '/edit?usp=sharing' in the link.

For example, the link to mycssfile.css that I copied looks like this:

https://drive.google.com/file/d/0B4n9GL3eVuV-TkphMkc3SFR2Slk/edit?usp=sharing

Notice the part in blue after the "/file/d/" part. That is the file ID which is used to access it via the new hosting service. It should start with the following URL:

https://googledrive.com/host/

Add the file ID like this (remove the '/edit?usp=sharing' part):

https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk

Now log into your Blogger account, select your blog and go to Template > Edit HTML. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

If you want to add a CSS file, type the following tag inside the search box and hit Enter to find it:

<head>

Just BELOW the <head> tag, add this line:

<link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk" />

And replace https://googledrive.com/host/0B4n9GL3eVuV-TkphMkc3SFR2Slk with the link of your CSS file:

If you want to add a Javascript file, search for the following tag:

</body>

And add this line just ABOVE it:

<script src='https://googledrive.com/host/0B4n9GL3eVuV-eVYwLXBrTlZrVDg' type='text/javascript'></script>

Replace the line in blue with your URL:

Finally, press the 'Save template' button to save the changes. And you're done!

In Conclusion

Once you have successfully saved all your file folders and closed out of the drive. Open your site in a browser and make sure that all the changes have completed successfully.

Next time you want to edit any of the information or move internal files, all you have to do is open up the Google Drive folder on your account and make the modifications from that location. Those files will then automatically sync to the online folder and make updates to your site. This works the same if you want to change the appearance by modifying the CSS code to extend the header, footer, or make customizations.

As you can see, changing your file storage out so that is CSS and JavaScript is stored on your Google Drive account is easy to do and only takes a few minutes. After you make the change, you can begin benefiting from faster loading speeds, higher SEO rankings, and overall a more convenient platform to work from to increase the efficiency of your work.

Resource http://helplogger.blogspot

How to Host JavaScript or CSS Files on Google Drive

Many bloggers use a custom template for their blog and a custom template sometimes requires an external JavaScript file, but sadly we can't host the JavaScript or CSS file on Blogger because Blogger only allows us to upload images and videos.

Previously, most bloggers would use Google Code (http://code.google.com/hosting) to host these files because Google Code's project hosting feature is very simple to use and free. But since Google announced that they are deprecating almost all download options for Project hosting on Google Code, we have to switch to Google Drive as recommended by Google itself.

Starting today, existing projects that do not have any downloads and all new projects will not have the ability to create downloads. Existing projects with downloads will see no visible changes until January 14, 2014 and will no longer have the ability to create new downloads starting on January 15, 2014. All existing downloads in these projects will continue to be accessible for the foreseeable future.

If your project is using downloads to host and distribute files and has a need to periodically create new downloads, we recommend you move your downloads to an alternate service like Google Drive before January 15, 2014. Google

Actually it is not so hard to use Google Drive, just create a folder, upload the JavaScript file (or any other file like images, videos, documents including PDFs and Microsoft Office files) and then change the file's sharing settings from "private" to "public on the web", or simply change the folder's sharing settings from "private" to "public on the web" and all files inside that folder will have the same sharing permissions, but the tricky part is getting the proper direct link for the JavaScript or CSS files, so we can use it on the blogger template. Please follow the steps below to host your JavaScript or CSS file using Google Drive:

Method 1

With this method you can get the proper link with the file name:
https://googledrive.com/host/folder-id/filename

Example:
https://googledrive.com/host/0B47Pdqj--olfUENkNGhtX3lSN0U/example.js
https://googledrive.com/host/0B47Pdqj--olfUENkNGhtX3lSN0U/example.css

How to add an external JavaScript to a web page (blogger template)?
<script type='text/javascript' src='https://googledrive.com/host/folder-id/filename.js'></script>

How to add an external CSS to a web page (blogger template)?
<link href='https://googledrive.com/host/folder-id/filename.css' rel='stylesheet' type='text/css'>

Step 1:
Login to your Google Drive account > Click Create > Select Folder

Step 2:
Type a name for the folder and click Create button

Step 3:
Select the folder and then click the Share button

Step 4:
Click Change...

Step 5:
Change the sharing settings from "Private" to "Public on the web" > Click Save > Click Done

Step 6:
Now click on the folder's name to go into it

Step 7:
Click the Upload button > Select Files...

Step 8:
Select file > Click Open

Step 9:
The item will have the same sharing permissions as the selected folder.... Click Upload and share

Step 10:
Copy the string characters after #folders/

Step 11:
Open a new browser tab > paste that string (folder id) into the address bar after
https://googledrive.com/host/ 
Example: https://googledrive.com/host/0B47Pdqj--olfUENkNGhtX3lSN0U

Step 12:
To get the direct link to the file, right click on example.js > Select Copy Link Location (Firefox)

Method 2

With this method you can get the proper link without the file name:
https://googledrive.com/host/file-id

Example: 
https://googledrive.com/host/0B47Pdqj--olfcUNkV3o3SjdoVGM
https://googledrive.com/host/0B47Pdqj--olfVVg3MFgxVlpqd0k

How to add an external JavaScript to a web page (blogger template)?
<script type='text/javascript' src='https://googledrive.com/host/file-id'></script>

How to add an external CSS to a web page (blogger template)?
<link href='https://googledrive.com/host/file-id' rel='stylesheet' type='text/css'>

Step 1:
Login to your Google Drive account > Click Create > Select Folder

Step 2:
Type a name for the folder and click the Create button

Step 3:
Click on the folder's name to go into it

Step 4:
Click the Upload button > Select Files...

Step 5:
Select file > Click Open

Step 6:
Select the checkbox to select the file > Click the Share button

Step 7:
Click Change...

Step 8:
Change the sharing settings from "Private" to "Public on the web" > Click Save

Step 9:
Copy the link > paste in Notepad

Example:  

https://docs.google.com/file/d/0B47Pdqj--olfVVg3MFgxVlpqd0k/edit?usp=sharing
File ID: 0B47Pdqj--olfVVg3MFgxVlpqd0k

Paste the file id after: https://googledrive.com/host/

Direct link to the file:
https://googledrive.com/host/0B47Pdqj--olfcUNkV3o3SjdoVGM

Another article you might be interested in: How to Host a Website on Google Drive
If you found this article helpful, then please share it with someone else by using the buttons below. Thank you!

Read more: http://www.komku.org

Host CSS, HTML or JavaScript Files in Blogger Using Google Drive 

Number of websites available which you can use to upload your CSS, HTML or JavaScript files. Bloggers and webmasters prefers to add their entire StyleSheet coding in single file. But, blogger has not this kind of feature to upload CSS and JavaScript files. Recently one of our readers asked us how he can host files on blogger? Good news, Google Drive has ability to host your CSS, JavaScript and HTML Files for FREE. In this short tutorial, we will show you How to Host CSS Files with Google Drive in Blogger?

Advantages Of Google Drive

• Google Drive Service is Free, Secured and Safe.
• Google Drive Provides 5 GB Storage With Unlimited Bandwidth.
• Create and Host Many Kinds Of Spreadsheets and Presentations.

Also See - Capture and Share Screenshots Easily With Dropbox

How to Host CSS Files with Google Drive in Blogger.

Step#1: Copy CSS Code From Blogger Template

Go to Blogger Dashboard » Template » Edit HTML and search for the <b:skin><![CDATA[ tag. Now, you will see a full CSS coding, copy this coding till the ]]></b:skin> tag. See screenshot below:

Step#2: Make a style.css File

Remove the entire CSS code from your blogger template after copying it and paste the coding in a new notepad. Now save the document and name the file to style.css (the extension of the file should be in .css).

Step#3: Host Your CSS File On Google Drive:

Go to Google Drive and login into your Gmail Account. Create a new folder. Click on “Create” button and from the drop down list select “Folder”. Now name the folder to anything that you like such as HostingFiles, my files and etc. In the end, press "Create" to conclude.  

Click on the new folder. Now, choose the upload icon present on the left side of create button. Select “File”.

In this step select the style.css file that you created few moments ago. Press the open button.

When you will click on open button then you will see a small upload wizard on the right side of your screen. It will take some time.

Press the “Share” button. Make this file public. Press change, and select “public on the web”. Now, click on Save button.

Step#4: Getting a Proper Hosting Link

Right click on the uploaded file and select “Share”. Copy the whole URL present in the text area under “Link to share”. See screenshots:

Now, we will modify hosting link. In link to share section it would somewhat looks like this https://docs.google.com/file/d/your-upload-file-code/.

Replace that link to this format https://googledrive.com/host/your-upload-file-code.

Note:
Make sure “your-upload-file-code” remains the same before and after the changes are made. For Example, if the link of my file is 

https://docs.google.com/file/d/0B66hLK2d2x4VVl9SaXNvb2dPRVU/ so I will change it to 

https://googledrive.com/host/0B66hLK2d2x4VVl9SaXNvb2dPRVU.

Step#5: Adding Google Drive Hosted CSS file in Blogger
Again, go to Blogger » Template » Edit HTML. Now search for the starting <head> tag and just above it paste the following code.

<link href='https://googledrive.com/host/your-uploaded-file-code' rel='stylesheet'/>

Please replace https://googledrive.com/host/your-uploaded-file-code with your own Google drive hosting link

If you want to give your suggestion or you want to ask anything related to this tutorial then please leave a comment below.

Resource http://www.blogsdaddy.com