Fajri GridiGray Responsive Blogger Templates by zulfansy

7:06 AM zulfansyah 0 Comments

Fajri GridiGray Responsive Blogger Templates - Kali ini saya akan membagikan sebuah Template yang lumayan keren, dengan desain yang simple dan responsive membuat template ini terlihat indah.

Silahkan dilihat demonya dan silahkan untuk mendownloadnya :

Fajri GridiGray Responsive Blogger Templates
Fajri GridiGray Responsive Blogger Templates


Features

  • Seo and Responsive
  • Breadcrumbs
  • Flat Design
  • Menu Navigation Responsive
  • Search Box Responsive Google Style
  • Comment Notification
  • Popular Post Design
  • Post Label and Post Info
  • Blockquote Design
  • Post ul with Font Awesome List
  • Share Article
  • Articles Related to Box Subscription
  • Threaded Comment Design
  • Bounce to Top
  • And many more..

Customize


1. Untuk mengganti logo cari kode berikut :

<a href='/'><img alt='Fajri Andaviar' 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggV_IphaFF6lKWsANX4yc_6mXo1WxvRsF6s-GPx7Y59DmC51Q6SjxFta_mFH-AQ1nuX0oCc_k5Rqt7OBgyYZxLRCmhxQJeXiHggQI2iofZpjBrb9CeawYWXpLDXDo8muRr_uS56r6k7vQ6/s1600/LOGO.png'
style='max-width:240px;height:auto;float:left;text-align:left'
title='Fajri Andaviar'/></a>


Lalu ganti Url logo diatas, dengan Url  logo anda (Url telah saya tandai dengan warna kuning).

2. Untuk mengganti Menu yang berada diatas Header, cari kode berikut :

<nav id='topmenu'>
<div id='topmenu-dalam'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li id='homenu'><a href='/' title='Home'><i class='icon-home'></i> Home</a></li>
<li><a href='http://fajriandaviar.blogspot.com/p/about-me.html' title='About Me'>About Me</a></li>
<li><a href='http://fajriandaviar.blogspot.com/p/contact.html' title='Contact'>Contact</a></li>
<li><a href='http://fajriandaviar.blogspot.com/p/follow.html' title='Follow'>Follow</a></li>
</ul>
</div>
</nav>

Lalu ganti sesuai keinginan anda.

3. Untuk mengganti Menu yang berada dibawah Header, cari kode berikut :

<nav id='menu'>
<div id='menu-dalam'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title='Home'><i class='icon-home'></i> Home</a></li>
<li><a href='#' title='Templates'><i class='icon-desktop'></i> Menu 1</a></li>
<li><a href='#' title='SEO'><i class='icon-cloud'></i> Menu 2</a></li>
<li><a href='#' title='Tutorial Blogger'><i class='icon-rss'></i> Menu 3</a></li>
<li><a href='#' title='jQuery'><i class='icon-sitemap'></i> Menu 4</a></li>
<li><a class='prett' href='#' title='More'><i class='icon-microphone-off'></i> Menu Drop</a>
<ul class='menus'>
<li><a href='#' title='CSS'>Menu Drop 1</a></li>
<li><a href='#' title='Widget'>Menu Drop 2</a></li>
<li><a href='#' title='Template Hack'>Menu Drop 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>

Lalu ganti sesuai keinginan sobat.

4. Untuk Mengganti Komen Notifikasi, cari kode berikut :

<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://fajriandaviar.blogspot.com",
    max_result: 10,
    t_w: 50,
    t_h: 50,
    summary: 30,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container,
.close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container,
.close-notif').hide();});document.getElementById('notif').onclick =
function(){document.title =
originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick
= function(){document.title =
originalTitle;$('#cm-total').hide();$('#cm-scroll');$('#cm-container').show();};
//]]>
</script>

Lalu ganti fajriandaviar.blogspot.com dengan Url blog sobat (Untuk yang harus disesuaikan telah saya tandai dengan warna kuning).

Terima kasih sobat telah mengunjungi blog saya ini, maaf apabila ada salah kata, Wassalam.

0 comments:

Penampakan Unik yang Saya Temukan di Google Maps by zulfansy

7:56 AM zulfansyah 0 Comments

Penampakan Unik yang Saya Temukan di Google Maps - Hallo sobat, sudah lama saya tidak membuat artikel, kali ini saya akan membagikan sebuah artikel yang tidak biasa di blog saya, biasanya saya membuat artikel mengenai blogger, tapi kali ini saya membuat artikel mengenai Ragam, dan kali ini saya membagikan sebuah artikel yang berjudul "Penampakan Unik yang Saya Temukan di Google Maps" .

1. Desert Breath

Desert Breath

Ini adalah Crop Circle yang pernah menggegerkan Dunia Maya beberapa waktu lalu, banyak yang bertanya "Benarkah ini buatan Alien ?" , sebenarnya ini adalah buatan Manusia, pembuatan seni lingkaran ini bermaksud untuk merayakan "gurun sebagai kondisi pikiran, lanskap alam pikiran." , Jika anda penasaran silahkan sobat temukan di Google Maps pada Koordinat 27.380351, 33.632174 .

2. The Badlans Guardian

The Badlans Guardian

Kali ini adalah sebuah gunung bebatuan yang berada di Alberta, Kanada, North America. Jika dilihat dari atas bebatuan ini menyerupai wajah/muka orang Indian yang menggunakan Topi khas, dan terlihat di daerah seperti telinganya, gambar itu membuat seseoarang indian yang menggunakan earphone, dari beberapa sumber mengatakan, gambar yang seperti earphone itu adalah sebuah jalanan dan sumur minyak, gambar/peta ini bisa sobat liat di Koordinat 50.010607, -110.114145 .

3. Crop Circle Firefox

Crop Circle Firefox

Penampakan kali ini memang sangat unik, di Oregon, Amerika Serikat, ditemukan oleh Google Maps sebuah Crop Circle yang membentuk sebuah logo perusahaan besar yaitu Firefox, Faktanya Crop Circle ini adalah buatan Manusia yang bermaksud untuk merayakan atau memperingatkan 50 Juta pengunduhan Firefox kala itu, Crop Circle ini dapat di temukan pada Koordinat 45.123781, -123.113781 .

4. Pembunuhan yang Tertangkap.

Pembunuhan yang Tertangkap.

Kali ini adalah penampakan yang menggegerkan hampir diseluruh dunia, yaitu penampakan pembunuhan, terhit 1 pria berbaju putih dan 1 pria yang tertidur dengan darah yang sangat banyak, dan terlihat juga seperti anjing yang berada disisi pria yang telah terbunuh, dan yang masih misteri adalah tumpahan atau ceceran darah yang sangat panjang itu, apakah mayat ini dibunuh bukan ditempat itu, dan pria yang membunuh itu ingin menenggelamkan manyat itu ke sungai ? , gambar ini dapat ditemukan pada Koordinat 52.376569,5.198278 .

5. Pesawat Malaysia Airlines MH370 Terlihat di Google Maps?

Pesawat Malaysia Airlines MH370 Terlihat di Google Maps?

Akhir-akhir telah geger gambar yang diperkiraan adalah Pesawat Malaysia Airlines MH370 yang dicari2, tapi fakta mengatakan, bahwa Google Maps yang kita lihat sekarang ini, bukanlah gambar saat ini, melainkan gambar yang diambil dari satelit beberapa waktu lalu (Diperkiraan sudah lama), gambar ini dapat ditemukan di Koordinat 5.164159, 102.649865 .

Itulah beberapa Penampakan Unik yang Saya Temukan di Google Maps, akan saya Share lagi beberapa Penampakan yang di temukan di Google Maps, di Artikel saya berikutnya.

0 comments:

FajriBeri UI Responsive Blogger Templates by zulfansy

5:00 AM zulfansyah 0 Comments

Fajri Blue UI Responsive Templates -Halo sobat bertemu lagi dengan Fajri, artikel kali ini akan saya Share Template buatan saya yang diberinama "FajriBeri UI Responsive Blogger Templates".

Silahkan dilihat demonya dan silahkan di download :

FajriBeri UI Responsive Blogger Templates
FajriBeri UI Responsive Blogger Templates


Features

  • Seo dan Responsive
  • Breadcrumbs
  • Flat Design
  • Menu Navigation Responsive
  • Search Box Google Style
  • Menu Navigation And Latest News in Top
  • Share Artikel
  • Related Posts
  • Threaded Comment Google+ Style
  • Facebook Comment
  • And Many More..

Customize

Apabila sobat ingin mengganti link Lastest News, cari kode berikut :

<div class='newspic'>
<span class='breakingnews'>Latest News</span> 
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 5000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Feed Blog&quot;, &quot;http://berilah.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;span&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>

Lalu ganti berilah.blogspot.com dengan Url blog sobat.

Apabila sobat ingin mengganti Menu Navigasi di sebelah atas, cari kode berikut :

 <ul id='topnav'>
<li class='current'><a href='#'>About</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
<li><a href='#'>Contact</a></li>
</ul>

Lalu sobat sesuaikan sendiri dengan Blog sobat.

Sekian dari saya hari ini, maaf apabila ada kekurangan, sampai jumpa lagi di beberapa artikel saya selanjutnya.

0 comments:

Fakta Mania Seo Responsive Blogger Template by zulfansy

6:41 AM zulfansyah 0 Comments

Fakta Mania Seo Responsive Blogger Template - Walaupun sudah sangat malas online didunia Blogging/Blogger, namun kali ini saya harus memanfaatkan waktu luang yang tak berapa lama ini  :D

Kali ini saya akan membagikan sebuah template dengan nama "Fakta Mania Blogger Template", sebenarnya template ini adalah template Fastest Magz v2, buatan Mas Sugeng, yang telah saya redesign, maaf juga apabila ada pihak yang merasa dirugikan, it is just for fun bro :D

Agar mempersingkat waktu, Sobat langsung saja lihat gambar penampakan dari template ini, dan silahkan di download, di sedot, di koleksi, di comot (etss jangan salah comot :D ) :

Fakta Mania Seo Responsive Blogger Template
Fakta Mania Seo Responsive Blogger Template


Features

  • Seo dan Responsive
  • Breadcrunbs
  • Tooltip
  • Menu Sticky with Search Box
  • Menu Navigation
  • Sticky Widget
  • Bounce To Top
  • Customized Deleted Comment
  • Threaded Comment Design

Customize

Apabila sobat telah mendownload template diatas, dan apabila sobat ingin mengubah atau mengatur atau mengedit lagi template ini.

Jika sobat ingin mengatur ulang Menu Sticky silahkan cari kode ini :

<ul id="navigation">
<li class="current">
<a class="home" href="https://www.blogger.com/" title="Halaman Depan">Home</a></li>
<li><a class="umum" href="https://www.blogger.com/search/label/Umum" title="Informasi Umum">Umum</a></li>
<li><a class="sejarah" href="https://www.blogger.com/search/label/Sejarah" title="Informasi Sejarah">Sejarah</a></li>
<li><a class="misteri" href="https://www.blogger.com/search/label/Misteri" title="Segalanya Tentang Misteri">Misteri</a></li>
<li><a class="unik" href="https://www.blogger.com/search/label/Unik" title="Unik">Unik</a></li>
<li><a class="lelucon" href="https://www.blogger.com/search/label/Aneh" title="Aneh">Aneh</a></li>
<li><a class="hiburan" href="https://www.blogger.com/search/label/Cerita" title="Cerita">Cerita</a></li>
<li><a class="olahraga" href="https://www.blogger.com/search/label/Olahraga" title="Olahraga">Olahraga</a></li>
<li><a class="gayahidup" href="https://www.blogger.com/search/label/Gaya%20Hidup" title="Lifestyle">Gaya Hidup</a></li>
<li><a class="tips" href="https://www.blogger.com/search/label/Tips" title="Tips">Tips</a></li>
<li><a class="travel" href="https://www.blogger.com/search/label/Lelucon" title="Lelucon">Lelucon</a></li>
<li><a class="kata" href="https://www.blogger.com/search/label/Seks" title="Seks">Seks</a></li>
<li class="search">
<form action="/search" id="search" method="get">
<input name="q" placeholder="Search..." size="40" type="text" /><input id="search-button" type="submit" value="" /></form>
</li>
</ul>

Lalu ganti sesuai keingin sobat.

Lalu, Hapus semua kode dibawah ini :

<b:include name='quickedit'/>

OK, cukup sekian artikel hari ini, semoga bermanfaat untuk sobat semua.

Sebagai blogger bocah, Harap hapus Link Credit !!

0 comments:

Membuat Threaded Comments Blogger Ala Kang Ismet by zulfansy

7:09 AM zulfansyah 0 Comments

Membuat Threaded Comment Blogger Ala Kang Ismet - Halo sobat apa kabar ?, semoga sobat semuanya sehat dan semua dalam pelindungan Tuhan yang maha esa  :) , kali ini saya akan membagikan sebuah tutorial yaitu "Membuat Threaded Comment Blogger Ala Kang Ismet".

Maaf sebelumnya sobat apabila postingan ini membuat sobat merasa dirugikan atau semacamnya, saya membuat postingan ini untuk menjawab pertanyaan dan permintaan dari sobat-sobat Blogger saya di Facebook, kalau mereka meminta "Buatkan tutorial membuat Threaded Comment seperti Kang Ismet", jadi sekali lagi, maaf apabila ada belah pihak yang merasa dirugikan atas postingan/artikel ini.

Membuat Threaded Comment Blogger Ala Kang Ismet

Tertarik sobat menggunakan Threaded Comments ini untuk dipasang di blog sobat ?, OK langsung saja kita OTW ke tutorialnya :)

1. Masuk ke Dasboard > Template > Edit HTML.Pertama sobat cari semua kode dibawah ini :

<b:include data='post' name='threaded_comments'/>

Ganti dengan kode ini :

<b:include data='post' name='comments'/>

Jika semua kode diatas tadi telah diganti, lalu cari kode berikut :

<b:includable id='comments' var='post'>...</b:includable>

Ganti dengan kode ini :

<b:includable id='comments' var='post'>
<style type='text/css'>
#origin_cform{font-family:&#39;Oswald&#39;,sans-serif;}
#comments {line-height:1.4em;margin: 60px 0 15px 0;position:relative;background:#2a3542;border-radius:4px;padding:25px 20px 0 20px;font-family:&#39;Open Sans&#39;,sans-serif}
#comments h3 {border-radius:4px 4px 0 0;font-size:14px;font-family:Oswald,Arial,Sans-Serif;text-transform:uppercase;font-weight:normal;left:0;top:-43px;background:#22afa4;color:#fff;width:85%;padding:14px 20px 14px 75px;position:absolute}
#comments h3:before {
content: &quot;\f0e6&quot;;
font-family:fontAwesome;
font-size:22px;
font-style: normal;
background-color:#1a857d;
color:#fff;
border-radius:5px 0 0 4px;
top:2px;
left:0;
margin-top:-1px;
padding:13px 20px 12px 20px;
position:absolute;
}
.comment_avatar_wrap{
width:42px;
height:42px;
border: 1px solid #151d26;
background:#25303c;
padding:4px;
text-align:center;
margin-bottom:20px;
}
#comments .avatar-image-container {
float: left;
margin: 0 10px 0 0;
width: 42px;
height: 42px;
max-width:42px;
max-height:42px;
padding: 0;
margin-bottom:10px;
}
#comments .avatar-image-container img {
width: 42px;
height: 42px;
max-width: 42px;
max-height: 42px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNPHVJZT-5EqbJ4G75Jx1BzLK5I4FO2wlfQxtUl9YMEULUqxFn0_GntGqxBe45ZEFCHVYsqwTguevnJty5YELadF0MAXjPlCG5VY1hsKwc-m97YbjrCmVyUxthdlFmJFuOlyFYXmmvy-rN/s1600/anon.jpg) no-repeat;
}
.comment_name a {
color:#21afa4;
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
text-decoration: none;
}
.comment_name a:hover {
color:#c94e5c;}
.comment_admin .comment_name {
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
text-decoration: none;
}
.comment_admin .comment_date {
font-weight: normal;
font-size:11px;
}
.comment_name {
font-family:Oswald, Arial, Sans-serif;
padding-bottom:10px;
font-size:14px;
font-weight:normal;
position:relative;
}
.comment_service{
margin-top:5px
}
.comment_date {
color: #999;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a{
color: #a9a9a9;
float:right;
font-size:11px;
font-weight:normal;
}
.comment_date a:hover{
color: #a9a9a9;
text-decoration:none;
}
.comment_body{
margin-top:-72px;
margin-left:65px;
background:#25303c;
border:1px solid #1d2630;
border-top:1px solid #171f28;
border-left:1px solid #171f28;
padding:15px;
}
div.comment_inner.comment_admin{
background:#394549;
}
.comment_body p {
line-height: 1.5em;
margin: 5px 0 0 0;
color: #999;
font-size: 13px;
word-wrap:break-word;
padding-bottom:10px;
}
.comment_inner {
padding: 15px;
margin: 5px 0 5px 0;
background-color:#35404d;
}
.comment_child .comment_wrap {padding-left: 5%;}
.comment_reply {
display: inline-block;
margin-top:8px;
margin-left:-5px;
padding: 1px 12px;
color: #fff !important;
text-align: center;
text-decoration: none;
border-radius: 2px;
background: #54687c;
font: 11px/18px sans-serif;
transition: background-color 1s ease-out 0s;
}
.comment_reply:hover {
text-decoration: none !important;;
background: #627c96;
}
.unneeded-paging-control {display: none;}
#comment-editor {width:100% !important;background:#e1e3e6 url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjctcyvvD6mVe-Ik2Yf0ORtvYITL8Fi_LpSahF8MA4Cr5Oijh0ijH8GcKsG6MYR-hhyeGjmJqQwQINIGiqDQ7EwJr6sd2PyM02r71HI89mzW69GfS2RRAV7Wjw0XE2c0XCS0YvSDtPEJVw/s1600/kangis-loader.gif&#39;) no-repeat 50% 30%;border-radius:4px;margin-bottom:20px;position:relative;}
.comment-form {max-width: 100% !important;}
.comment_form a {
margin-bottom:8px;
text-decoration: none;
font-weight: normal;
font-family:&#39;Oswald&#39;,sans-serif;
font-size: 15px;
text-align:center;
color:#54687c;
}
.comment_form a:hover {text-decoration: none;color:#f2f2f2}

.comment_reply_form {
padding: 0 0 0 70px;
}
.comment_reply_form .comment-form {width: 99%;}
img.comment_emo {margin:0;padding:0;vertical-align:middle}
.comment_emo_list{
display:none;
}
.comment_emo_list .item {
float: left;
text-align: center;
margin: 10px 10px 0 0;
height: 40px;
width:41px;
}
.comment_emo_list span {
display: block;
font-weight: bold;
font-size: 11px;
letter-spacing: 1px;
}
.comment_youtube {max-width:100%!important;width:400px;height:225px;display:block;margin:auto}
.comment_img {max-width:100%!important;}

.comment_header{width:50px}
#respond {
overflow: hidden;
padding-left: 10px;
clear: both;
}
.comment_avatar img{width:42px;height:42px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNPHVJZT-5EqbJ4G75Jx1BzLK5I4FO2wlfQxtUl9YMEULUqxFn0_GntGqxBe45ZEFCHVYsqwTguevnJty5YELadF0MAXjPlCG5VY1hsKwc-m97YbjrCmVyUxthdlFmJFuOlyFYXmmvy-rN/s1600/anon.jpg) no-repeat}
.comment-delete img{float:right;margin-left:15px;margin-top:3px;}
.comment_author_flag {display:none}
.comment_admin .comment_author_flag {display:inline;font-size:13px;font-weight:normal;padding:2px 6px;right:-23px;margin-top:-23px;color:#fff;border-radius:4px;text-transform:uppercase;position:absolute;width:36px;height:36px;}
iframe{border:none;overflow:hidden}
.deleted-comment {
background:#db6161 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZyl3y6tDvnIYDHAWI1APJ_jVpkSrJihp1628ZnfeDBRhzEPGhnF5uo6NYck9NNj4WW4J7xnYk7UdYuE3O0e0Wo-X7D2s4w2b8r_RZPM0wmg4W2Jl68iZgvspuH3BA42aS0xzwmeYseUg/s1600/tempat-sampah.png) no-repeat 2% 50%;
color:#efd4d4;
line-height: 22px;
border: 1px solid #c44d4d;
padding:12px 15px 12px 45px;
margin:5px 0;
display: block;
}
.comment-form p {
background: #54687c;
padding: 15px 15px 14px 15px;
margin: 5px 0 5px 0;
color: #f4f4f4;
font-size: 13px;
line-height: 20px;
border-radius:4px;
position:relative;
}
div.comment_avatar img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFWzI4ORwMKkLZ_iE7Qjh2EHczoOPh8zT0GoZfMl460vyRSLANAt9bpsj5BlhyTasX4YhdVVo8laQ4c4588jBOvGKmJPT-nMNW0olA2Og_YIihJVW_4xHngerfyEYdRlqVU0UNFDarrfs/s45-c/gravatar.png);
}
div:target .comment_inner{background:#346656;transition:all 15s ease-out;}
div:target .comment_child .comment_wrap .comment_inner{background:#404c5c;}

iframe{border:none;overflow:hidden}

.center {
text-align:center
}

img.cm-prev {
max-width:100%;
margin:10px auto;
page-break-after:always;
display:block;
text-align:center !important;
}
</style>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<h3>
<b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>
</b:if>
</h3>
</b:if>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<div class='clear'/>
<div id='comment_block'>
<b:loop values='data:post.comments' var='comment'>

<div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:post.adminClass == data:comment.adminClass'>
&lt;div class=&#39;comment_inner comment_admin&#39;&gt;
<b:else/>
&lt;div class=&#39;comment_inner&#39;&gt;
</b:if>

<div class='comment_header'>
<div class='comment_avatar_wrap'>
<div class='comment_avatar'>
<data:comment.authorAvatarImage/>
</div>
<a class='comment_reply' expr:href='&quot;#r_&quot;+data:comment.anchorName' expr:id='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)'>Balas</a>
</div>

<div class='clear'/>
</div>

<div class='comment_body'>
<span class='comment_arrow'/>
<div class='comment_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<span class='comment_service'>
<b:include data='comment' name='commentDeleteIcon'/>
<a class='comment-delete' expr:href='data:comment.deleteUrl' title='Hapus komentar jelek ini'>
<img alt='delete' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigtdlQyIiRHVWDAoN095SSrPOYhBsgm13kZFh0AJ0hD3Bkb3yG0EEzHoyM66RWcOX7JH6Oms8Y3pVDBg1_RwtUsTQszR70WUDsvPicL5jJgeHT-lKzkK-A_F2ZTiADiK7LruwOKBQpdkk/s1600/delete4.png' title='Hapus komentar jelek ini'/>
</a>
<span class='comment_date'><abbr class='published' expr:title='data:post.timestampISO8601'> <data:comment.timestamp/></abbr></span>
</span></div>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
<div class='clear'/>

</b:if>

</div>
<div class='clear'/>
&lt;/div&gt;
<div class='clear'/>

<div class='comment_child'/>
<a expr:name='&quot;r_&quot;+data:comment.anchorName'/>
<div class='comment_reply_form' expr:id='&quot;r_f_&quot;+data:comment.anchorName'/>
</div>
</b:loop>
</div>
<div class='clear'/>
<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>
<div class='clear'/>
<div class='comment_form'>

<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<div class='comment_emo_list'/>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</div>
</b:if>
</div>


<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
<script type='text/javascript'>

<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {&#39;maxThreadDepth&#39;:&#39;0&#39;};
</b:if>
//<![CDATA[
//Global setting
Config.maxThreadDepth = 6;//Kedalaman tingkat threaded comment
Display_Emo = true;//Tampilkan emoticon? ketik "false" untuk menyembunyikan
Replace_Youtube_Link = true;//Embed video YouTube, ketik "false" untuk mendisable
Replace_Image_Link = true;//Auto replace link image, ketik "false" untuk mendisable.
Replace_Force_Tag = true;//Auto replace virtual tag contoh: [pre] menjadi <pre>, dan [/pre] menjadi </pre>, apabila salah menulis, tidak akan berfungsi
Replace_Image_Ext = ['JPG', 'GIF', 'PNG', 'BMP'];//(support: jpg, gif, png, bmp),hanya berfungsi apabila Replace_Image_Link=true

//Pengaturan Emoticon
Emo_List = [
':)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvOFNbJNAG9d2UWcEXMGg_HNYQBNOzNS4UH8OIMDPqwTzqItIck2MjCLMXIHo8BWXsjL6nCCywI8rSnq6ORN0A3S-m7Bn_9Ym_3s9fdN1bkTMqrrr095PcD5lbN44XUsqUI0yVNtrWXa0/s1600/smile1.gif',
':(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_g-ruRXdtYxEANVhq26klJhqJHjJ2saVAYnaycJl9gd04AuJ6LuXCi8VVMPF1zkK0SVenmA7kDAtV2zttzqkZPuXt7onBa7jjNfLdriAt6wHKrVRTmHZBjai7KczQn0DR-_BzsXct3zM/s1600/sad.gif',
'=(' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRgyHVnqD9nU0MWaZ63GDhUQDLOz0pHZSV9bheXBUwqIFwf2n0pJIDf3KtF1HnsHMel_RyIlRItQE8Aal4R_gN63jAGNQ44ONjEprxpVQ9WAAQKnulo3L1Dtw2OJ4KdVvRO85KSwHPkpo/s1600/sadanimated.gif',
'^_^' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX79UIVLm8qX3bgdaiWKz3AvA6G6qIUTWg_AtZmvPzzv5f44_birH4wP-mzBpGkac4f_bbCIudjzdXtS1ah9qZ90LeA_7Vktd57saSeLWuraFvQiO_AC7B2KKOomhB_ZRkKGhHtIzttJc/s1600/smile.gif',
':D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjMW5PcVQHZWWourfQ-Nod6BrOM1h9JYtEB9BUsn09vhVZaoFnNtqg44N0pbFjk2v7PtFQ_s5qdwCjaUeYXVBiYc_bcvIjE3EljZzyTuAHhWf-WPuISobXaNN4_1rUe_0UDCPjawKwmiY/s1600/icon_smile.gif',
'=D' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuCnyuBxn4-i0_KW8WXa-t1bTN5DvgDP9KWfAuXkrw2kpfUKNdWfa3JtrZoOewzdhkuhhf0T_s_GCYKx2Tagc1IypK4fLRg6v_5-XSOa6BIOOnCvv0iaTZcFVBqDdE4qV-yjxZbWi8Uk/s1600/hihi.gif',
'|o|' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0ngId-VVxTMzR7_srnUlKsSV36x-MTG5CStMHhMx9xpQFO81RvBfi5ltI_DuKn7sXleXPA-Efr4pS-uFSRGXJ-IIYs7onqxkBRmDvVe_UCtsRF8U6YmJ7DkH1LkXmAUGpOprxqvgd90s/s1600/applause.gif',
'@@,' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8TTrydhPglXKtEmdXUeSZ59hKvAt72bCL3K7BH4lLSD2UJmB7p6bBL3iUUEabOPgG5N5iaeDgjukzjEWtEnR-XO8RMYqVDcTeapBwpFwBQopodVkXY6VwRL9SqZLwe45nvhfe4mS_gYM/s1600/rolleyes.gif',
';)' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBySnwLVnqujT2_jpo5JYyu05gs_Us-GbwFNPGB-yqCLjLJpxaWQ4ZwX-jjkd8fvezR_I_PiGiuT3Z3B62VATvD6EbiEAUkm61N9jWc8whDElEiscR1zaj8sTUXjPh7ZCZQTG1_Mm0dCw/s1600/wink.gif',
':-bd' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4GuYhNAuDMZy7U7zUjrYoLADRCwfm9uO9B6w8czfPBccUYUwtsRuin_A_ZrSMphkuA0RnshS012I2BuTC4drpFbwtbf41JPltGY6pbWhko_fiHfUlfdKxFu4fy_CR7wBijEMyLDa5QLs/s1600/thumb.gif',
':-d' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGs2Ka9S2DZ7akTnP2jRjqPs7spw0r8i2hmoNH01EF9vKPPaEJxuMpdZ_KmRybqjpjUtjJlaX7d5lER4H0uCLiiV4G2S4OOJhpRG0DPe1GDiurRUoV7VF8I1hEcbCvZLjUv0fZWuCi-hk/s1600/thumbsup.gif',
':p' ,'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4horJym6xC0j5AZXsYxsMEZNQehOHf5UiR65a-vVS1OYteDSpJhoLg4gQn4R9sY2z1-zyOmuuuecpDVzFok-ZLK_gqQ8BsfFUezpw6GnWLDSFGEu5sq5MAaWjZfegtZRAvMk4GCe4yN4/s1600/wee.gif',
];


//Config Force tag list, define all in lower case
Force_Tag = [
'[pre]','<pre>',
'[/pre]','</pre>',
'<pre class="brush: plain; title: ; notranslate" title="">','&lt;code&gt;',
'</pre>','</code>'
];

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 o=\'.1c\';3 1b=$(\'#O-19\').G(\'A\');u 1l(F){3 1j=\' \\n\\r\\t\\f\\1D\\1G\\1F\\1E\\2l\\2k\\2i\\2f\\2c\\26\\25\\23\\1Y\\1S\\1N\\1L\\1H\\2v\\1M\\2p\\24\\22\\1R\';E(3 i=0;i<F.5;i++){9(1j.d(F.1Q(i))!=-1){F=F.b(0,i);11}}z F}$(\'#1P .1i p\').j(u(y,7){9(1J){3 l=\'1v://13.V.W/1y?v=\';3 8=7.d(l);D(8!=-1){1d=7.b(8);J=1l(1d);3 X=J.d(\'&\');3 N=\'\';9(X==-1){N=J.b(l.5)}Y{N=J.b(l.5,X)}3 1r=\'<1u B="1T" A="1v://13.V.W/1U/\'+N+\'?1V=1" 1W="0" 2w></1u>\';7=7.b(0,8)+1r+7.b(8+J.5);8=7.d(l);9(8==-1){l=\'1Z://13.V.W/1y?v=\';8=7.d(l)}}}9(21){3 Z=\'\';3 s=7;E(3 i=0;i<1w.5;i++){3 l=\'.\'+1w[i];3 m=s.C();3 8=m.d(l);D(8!=-1){k=s.b(0,8+l.5);m=k.C();3 q=\'2h://\';3 w=m.d(q);3 I=\'\';D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}q=\'2n://\';m=k.C();w=m.d(q);D(w!=-1){I=q.M();k=k.b(w+q.5);m=k.C();w=m.d(q)}9(I==\'\'||k.5<6){11}k=I+k;Z+=s.b(0,8+l.5-k.5)+\'<10 A="\'+k+\'" B="2r"/>\';s=s.b(8+l.5);m=s.C();8=m.d(l)}}7=Z+s}9(1A){3 5=x.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';8=7.d(x[i]);D(8!=-1){7=7.b(0,8)+S+7.b(8+x[i].5);8=7.d(x[i])}}}9(1I){3 5=R.5;9(5%2==1){5--}E(3 i=0;i<5;i+=2){D(1){3 s=7.M();8=s.d(R[i]);9(8!=-1){7=7.b(0,8)+R[i+1]+7.b(8+R[i].5)}Y{11}}}}z 7});$(\'.1K\').j(u(y,7){9(1A){3 5=x.5;9(5%2==1){5--}3 12=\'\';E(3 i=0;i<5;i+=2){3 1e=\'<1f>\'+x[i]+\'</1f>\';3 S=\'<10 A="\'+x[i+1]+\'" B="1B"/>\';12+=\'<Q B="1O">\'+S+1e+\'</Q>\'}z 12}});$(\'.1g .1i p\').j(u(i,h){T=h.M();y=T.d(\'@<a U="#c\');9(y!=-1){14=T.d(\'</a>\',y);9(14!=-1){h=h.b(0,y)+h.b(14+4)}}z h});u 1k(g){r=g.d(\'c\');9(r!=-1)g=g.b(r+1);z g}u 1m(g){g=\'&1X=\'+g+\'#%1n\';1o=1b.20(/#%1n/,g);z 1o}u 1p(){j=$(o).j();$(o).j(\'\');o=\'.1c\';$(o).j(j);$(\'#O-19\').G(\'A\',1b)}u 1q(e){g=$(e).G(\'15\');g=1k(g);j=$(o).j();9(o==\'.1c\'){1s=\'<a U="#1t" 27="1p()">\'+28.29+\'</a><a 2a="1t"/>\';$(o).j(1s)}Y{$(o).j(\'\')}o=\'#2b\'+g;$(o).j(j);$(\'#O-19\').G(\'A\',1m(g))}16=2d.2e.U;17=\'#O-2g\';18=16.d(17);9(18!=-1){1x=16.b(18+17.5);1q(\'#2j\'+1x)}E(3 i=0;i<P.5;i++){9(\'1z\'2m P[i]){3 g=P[i].1z;3 1a=2o($(\'#c\'+g+\':L\').G(\'1C\'));$(\'#c\'+g+\' .2q:L\').j(u(y,7){3 H=P[i].15;9(1a>=2s.2t){$(\'#c\'+H+\':L .2u\').1h()}3 K=$(\'#c\'+H+\':L\').j();K=\'<Q B="1g" 15="c\'+H+\'" 1C="\'+(1a+1)+\'">\'+K+\'</Q>\';$(\'#c\'+H).1h();z(7+K)})}}',62,157,'|||var||length||oldhtml|check_index|if||substring||indexOf|||par_id|||html|img_src|search_key|upper_html||Cur_Cform_Hdr||http_search||temp_html||function||find_http|Emo_List|index|return|src|class|toUpperCase|while|for|str|attr|child_id|save_http|yt_link|child_html|first|toLowerCase|yt_code|comment|Items|div|Force_Tag|img_html|temp|href|youtube|com|yt_code_index|else|save_html|img|break|newhtml|www|index_tail|id|cur_url|search_formid|search_index|editor|par_level|Cur_Cform_Url|comment_form|ht|img_code|span|comment_wrap|remove|comment_body|whitespace|Valid_Par_Id|trim|Cform_Ins_ParID|7B|n_cform_url|Reset_Comment_Form|Display_Reply_Form|yt_video|reset_html|origin_cform|iframe|http|Replace_Image_Ext|ret_id|watch|parentId|Display_Emo|comment_emo|level|x5b|x7d|x7c|x5d|u2008|Replace_Force_Tag|Replace_Youtube_Link|comment_emo_list|u2007|u200a|u2006|item|comment_block|charAt|u3000|u2005|comment_youtube|embed|autohide|frameborder|parentID|u2004|https|replace|Replace_Image_Link|u2029|u2003|u2028|u2002|u2001|onclick|Msgs|addComment|name|r_f_c|u2000|window|location|xa0|form_|HTTP|x0b|rc|x3e|x3c|in|HTTPS|parseInt|u200b|comment_child|comment_img|Config|maxThreadDepth|comment_reply|u2009|allowfullscreen'.split('|'),0,{}))

//]]>
</script>
</b:includable>

Lebih baik setelah Sobat menggunakan Threaded Comment diatas tadi, silahkan sobat hapus semua css Threaded Comment sebelumnya yang ada pada template sobat.

Jika sudah, klik Simpan Template, cukup sekian artikel saya hari ini, apabila ada kesalahan bisa sobat berkomentar dikolom yang telah disediakan.

0 comments:

Membuat Thumbnail Post Ala Kang Ismet by zulfansy

9:32 AM zulfansyah 0 Comments

Thumbnail Post ala KI
Thumbnail Post Ala KI

Membuat Thumbnail Post Ala Kang Ismet - Halo sobat, kali ini saya akan memberikan Tutorial trik Membuat thumbnail post ala KI (Kang Ismet), banyak teman saya yang menanyakan tutorial ini, dengan lontaran seperti "Gimana yah buat area postingan kayak kang ismet?", mengkin berbeda-beda pertanyaan teman saya yang dilontarkan kepada saya, dan mungkin semua pertanyaan itu hanya ada 1 jawaban.

Sebelumnya saya minta maaf kepada Kang Ismet, karena telah melanggar UUD ala Kang Ismet :D.

Tahap Awal Pembuatan

Disini saya hanya memberikan CSS untuk men-design Thumbnail Post agar nampak mirip layaknya milik Kang Ismet, Sebenarnya Simpel saja cara pembuatannya, yang dibutuhkan hanyalah warna background pada gambar thumbnail, dan berikan CSS border-radius pada gambar thumbnail.


Secara Rinci

Sekarang sudah banyak Template yang sudah memiliki fitur yang kita inginkan, seperti template dengan readmore yang sudah siap,breadcrumbs, thumbnail otomatis, dan Lain-lain.

Element yang saya gunakan pada thumbnail post ini adalah .post-thumbnail , dan dibungkus dengan .post-thumbnail-area (pembungkusan tidak terlalu penting) , dibawah ini adalah css awal thumbnail post :


.post-thumbnail-area {
  width: 180px;
  height: 130px;
  float:left;
  overflow:hidden;
}

.post-thumbnail {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  border:none;
  outline:none;
  position:static;
} 
 
.post-body-area {
  padding:20px;
  margin-left:180px; /* Thumbnail width */
  font-size:11px;
}

Dan akan membuat gambar menjadi seperti ini :

Contoh sebelumnya

Gambar yang dibuat dari CSS diatas, membuat gambar yang hanya simple saja, lalu dibuat CSS seperti berikut (CSS berikut adalah CSS thumbnail post Blog saya sendiri yang telah saya redesign) :

.post-thumbnail-area {
  width: 180px;
  height: 130px;
  float:left;
  overflow:hidden;
}

.post-thumbnail {
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  margin:0;
  padding:11px 0 0 36px;
  border:none;
  outline:none;
  position:static;
background:#e15c5c
}

.post-thumbnail img{
border:0;
padding:0;
width:100px;
height:100px;
border-radius:100px;
border:6px solid #e17676}

.post-thumbnail img:hover{
border:6px solid #e59393
}

._post-body-area {
  padding:20px 5px 20px 13px;
  margin-left:180px; /* Thumbnail width */
  font-size:13px;
}

Dan akan membuat gambar menjadi :

Contoh Sesudah

Simpel bukan ?

Kesimpulannya hanya membuat css seperti ini .post-thumbnail img{ dan .post-thumbnail img:hover{ , dan memberikan css background:#e15c5c pada .post-thumbnail, dan memberikan effect css seperti css diatas.

Tutor Lengkap

Carilah element thumbnail post pada blog sobat, buatlah background pada thumbnailnya, misalkan element thumbnail blog sobat .postthumb, tambahkan css background:#333 pada element tersebut, maka terlihat :

.postthumb{background:#333}


(Ganti warna background sesuai keinginan sobat), lalu pada img (gambar) buatlah gambar tersebut menjadi seperti lingkaran, hanya dengan menambah css border-radius:100px, maka akan terlihat:

.postthumb img{border-radius:100px}


Apabila sobat menginginkan Thumbnail Post seperti saya Ala Kang Ismet , tambahkanlah border yang akan menghias gambar postthumb, buatlah css seperti ini :

border:6px solid #666


(Ganti warna border sesuai keinginan sobat), setelah ditambahkan css diatas pada element .postthumb img, akan terlihat seperti ini :

.postthumb img{border-radius:100px;border:6px solid #666}


Untuk memperindah buatlah hover pada .postthumb img , maksud dari hover adalah memberi efek pada saat suatu element tersentuh kursor, disini kita akan memberi efek hover border pada .postthumb img, buatlah css seperti dibawah ini

.postthumb img:hover{border:6px solid #000}


(Ganti warna border di hover sesuai keinginan sobat), simpel saja bukan sobat ?

sekian dari saya, tentng Cara Membuat Thumbnail Post Ala Kang Ismet, maaf apabila ada kesalahan yang saya perbuat, terima kasih atas kunjungannya, Wassalam.

0 comments:

Cara Membuat Artikel Terkait Ala Kang Ismet by zulfansy

9:31 AM zulfansyah 0 Comments

Artikel Terkait Ala Kang Ismet
Artikel Terkait Ala Kang Ismet
Artikel Terkait Ala Kang Ismet - Artikel terkait memanglah suatu yang lumayan dibutuhkan dalam blog, untuk menguatkan optimasi seo pada blog, kali ini saya akan memberikan Cara Membuat Artikel terkait ala kang ismet, maaf sebelumnya apabila ada yang merasa dirugikan, banyak sekali teman saya di facebook yang menginginkan related ini, dan berikut kode nya :

Masukkan CSS berikut :

.related-post {
margin:2em auto 0;
font-size:13px;
background:#fff;
border-radius:4px;
}
.related-post h4 {
font-size:14px;
margin:0 0 .5em;
background:#9dcb63;
color:#fff;
padding:14px 20px 14px 75px;
font-weight:normal;
border-radius:4px 4px 0 0;
position:relative;
font-family:Oswald,Arial, Sans-Serif;
text-transform:uppercase;
}
.related-post h4:before {
content: "\f074";
font-family:fontAwesome;
font-size:22px;
font-style: normal;
background-color:#8db857;
color:#fff;
border-radius:4px 0 0 0;
top:0;
left:0;
padding:13px 20px;
position:absolute;
}
ul.related-post-style-1 {
padding-left:0 !important;
margin-top:-12px;
}
.related-post-style-1 li {
list-style:none;
padding:15px 20px;
border-top:1px solid #eceef5;
}
.related-post-style-1 li a{
color:#79798d;
text-decoration:none;
}
.related-post-style-1 li a:hover{
color:#33aea5;
text-decoration:none;
}
.related-post-style-1 li:before {
content: "\f08e";
font-family:fontAwesome;
color:#c7cbd4;
font-style: normal;
top:0;
left:0;
margin-right:13px;
}


Masukkan HTML berikut :

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: &quot;<data:blog.homepageUrl/>&quot;,
widgetTitle: &quot;&lt;h4&gt;Artikel Terkait:&lt;/h4&gt;&quot;,
numPosts: 5,
titleLength: &quot;auto&quot;,
containerId: &quot;related-post&quot;,
newTabLink: false,
widgetStyle: 1,
callBack: function() {}
};
</script>
<script type='text/javascript' src='https://kang-is.googlecode.com/svn/trunk/javascript/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

Maaf saya kurang detail untuk memberikan tutorialnya, untuk HTML apa bila di blog sobat telah
ada related post sebelumnya, ganti saja related itu dengan script diatas tadi, terima kasih atas kunjungannya, Wassalam.

0 comments:

Widgetly Responsive Magazine Blogger Template Free by zulfansy

8:38 AM zulfansyah 0 Comments

Widgetly Responsive Magazine Blogger Template
Widgetly Responsive Magazine Blogger Template






Widgetly Responsive Magazine Blogger Template Free - Halo sobat, sudah lama rasanya saya tidak membuka blog, dan akhirnya adapun kesempatan saya untuk membagikan sebuah template, untuk mendaptkan template ini sobat tidak perlu mention, di blog ini semua live, jadi tidak salah deh jika sobat berkunjung ke blog ini :), Template ini menurut saya sangat stylis sekali, dengan fitur magazine dan responsive sudah menjadi dambaan bagi semua blogger, so sobat, tidak perlu panjang lebar, langsung saja download sekarang :)


Features

  • Magazine
  • Responsive
  • Widget Thumbnail
  • Menu Drop Down
  • Search Form
  • Headlines
  • Button to Top


Sedikit Tutorial

Untuk menampilkan Widget Post berdasarkan label pada halaman Homepage, ikuti langkah-langkah di bawah ini :


  1. Pada Dashboard klik Tata Letak
  2. Edit HTML/Javascript widget
  3. Lalu masukkan nama label sobat
  4. Lalu Simpan


Post Widget on Homepage

Allhamdulilah, akhirnya selesai juga artikel saya yang satu ini, semoga sobat semua suka dengan template ini, jangan bosan-bosan mampir di blog ini yah sobat, dan silahkan berkomentar mengenai template ini pada kolom yang telah disediakan di bawah ini, maaf apabila ada salah kata dari saya, Wassalam.

0 comments:

VCard Personal Blogger Template by zulfansy

8:38 AM zulfansyah 0 Comments

VCard Personal Blogger Template
VCard Personal Blogger Template







VCard Personal Blogger Template - Halo sobat, kali ini Fajri Andaviar akan membagikan sebuah Template yang responsive lagi, template ini dirancang untuk menjadikan sebuah template dengan fitur personal, atau template blog pribadi, template buatan Templateism.com ini memang sangat indah sobat, langsung saja ini dia Fiturnya .


Features

  • 100% Responsive Design
  • Total Share Counter Buttons
  • Personal and CV Theme
  • jQuery Page Load Effect
  • Colorful theme
  • Social buttons
  • 1 Column Theme
  • 3 Coolum Footer
  • No Sidebar
  • Full width Template
  • Portfolio and Blog style 2 in one.

Sebenarnya masih ada yang harus sobat modifikasi, yaitu menu thumb, Karena saya malas membuat tutorialnya, sobat langsung saja menuju ke link berikut -> Click Here.

Ok itu saja artikel saya hari ini, maaf apabila ada kesalahan dari saya, Eiit bentar mas, lihat dulu dibawah ini :


Download Fastest Magz Gratis 100% Work


Gratis Fastest Magz Blogger Template



Terima kasih atas kunjungannya sobat, Wassalam.

0 comments: