Cara Memasang Spoiler Responsive di Blog

Cara Memasang Spoiler Responsive di Blog- Pada kesempatan ini NTechno akan membagikan cara untuk membuat spoiler keren dan responsive untuk blog kamu , langsung saja kita simak caranya dibawah ini :

1. Login ke Dashboard , lalu Edit Template

2. Copykan script dibawah ini tepat diatas kode </style> atau kode ]]></b:skin> .

#flippy {

text-align: center;
}

#flippy button {
background: #aa65c7;
color: #fff;
text-align: center;
margin: 0 auto;
border: none;
border-radius: 3px;
padding: 8px 16px;
margin: 10px auto;
font-size: 14px;
font-weight: bold;
box-shadow: 0px 3px 0px 0px #883da7;
vertical-align: middle;
cursor: pointer;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
transition: background 0.1s ease-in-out;
}

#flippy button:hover, #flippy button:focus {
background: #9e4fbf;
outline: none;
}

#flippanel {
padding: 1px;
text-align: left;
background: #f5f5f5;
border: 0px;
}

#flippanel {
padding: 24px;
display: none;
}

 3. Lalu copykan jquery dibawah ini tepat diatas kode </body>

<script>
$(document).ready(function() {
    $("#flippy").click(function() {
        $("#flippanel").slideToggle("normal");
    });
});
</script>

4. Kemudian jika kamu ingin menggunakan spoiler nya copy kan script ini pada mode HTML di postingan.

<div id="flippy"><button>NTechno</button></div>
<div id="flippanel">
Deskripsikan Karyamu !
</div>

5. Jika berhasil maka hasilnya akan seperti ini :

Deskripsikan Karyamu !

Share

• Twitter
• Facebook
• Google+

Cara Membuat Daftar Isi Menurut Label

Cara Membuat Daftar Isi Menurut Label - Ingin memiliki Daftar Isi yang keren?mungkin kalo daftar isi yang sudah bawaan dari blogger itu masih biasa aja,ataupun ada daftar isi yang menggunakan thumbnail gambar,itu tentunya berat sekali . NTechno kali ini akan membagikan script " Daftar Isi Menurut Label " , lebih responsive , lebih seo tentunya .




Jika kamu ingin melihat demonya , kebetulan juga NTechno menerapkan ini pada daftar isi dari blog ini , lihat saja pada form nya .
Untuk itu langsung simak saja caranya berikut :

1. Login ke Dashboard - Laman - Buat Laman Baru
2. Tuliskan terlebih dahulu judul nya isikan judul dengan Daftar Isi ataupun Sitemap
3. Baru buat ke mode HTML , lalu copykan script widget ini :

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://newbietechnoo.blogspot.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">Baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

Ganti URL Blog nya dengan URL blog kamu .

4. Lalu Simpan laman nya . Dan lihat hasilnya .

Cek Hasil

Share

• Twitter
• Facebook
• Google+

Cara Memasang Responsive Recent Post Slider

Cara Memasang Responsive Recent Post Slider - Pada kesempatan kali ini NTechno akan mencoba membagikan widget recent post dengan slider , slider ini tidak akan membuat blog lambat,dan tentunya membuat blog lebih menarik.
Langsung saja simak cara dibawah ini :

1. Login ke Dashboard Blogger,lalu tambahkan Gadget -> JavaScript

<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<div id="featuredpost"></div>
<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG-ANDA",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

 Ganti URL dengan URL blog kamu , lalu Simpan Template
MaxPost : Jumlah Post Yang Akan Ditampilkan,Maksimalnya adalah 6
Jika lebih dari 6 akan membuat blog lama .

ImageSize : kualitas pixel gambar , semakin besar pixel nya semakin bagus resolusi gambar tetapi semakin lambat gambar dimuat , NTechno sarankan image size disetting 200 saja .

Interval : ini adalah waktu pergantian post nya , 10000 = 10 detik .
Autoplay : untuk dimuat secara otomatis , kamu bisa menggantinya dengan "false" jika kamu tidak ingin slide nya otomatis .

2. Penerapan Add Gadget nya harus tepat diatas Blog Posting pada Tata Letak di Blog Kamu .
Lihat hasilnya akan lebih keren!

Share

• Twitter
• Facebook
• Google+

Cara Memasang Tombol Follow Twitter di Blog

Cara Memasang Tombol Follow Twitter di Blog - Pada kesempatan kali ini NTechno akan membagikan script untuk memasang tombol follow twitter di blog kita , secara simple langsung saja perhatikan cara berikut ini :

1. Login ke Dashboard blogger , lalu Add Widget .

2 . Masukkan script dibawah ini :

<a href="https://twitter.com/aanes__" class="twitter-follow-button" data-show-count="true">Ikuti @aanes__</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

3. Maka hasilnya akan seperti ini :

Ikuti @aanes__


4. Selesai

Selamat Mencoba!

Share

• Twitter
• Facebook
• Google+

Cara Menampilkan Widget Di Halaman Tertentu

Cara Menampilkan Widget Hanya Di Halaman Tertentu - Banyak blogger yang masih tidak tahu bagaimana menempatkan sebuah widget tapi hanya di laman tertentu,bisa kita tentukan , contohnya hanya ada di homepage saja,atau pun hanya ada saat posting blog dibuka saja,atau lainnya .

Bagi NT cara ini sangat efektif untuk menurunkan bounce rate pada sebuah blog, misalkan anda menambahkan widget random post itu hanya di halaman posting saja, maka sudah tentu widget yang anda pasang di halaman posting ini akan berguna untuk memberi sebuah pilihan artikel lainnya, selain itu sudah tentu ini juga efektif untuk menghemat ruang di halaman hompage .

NTechno akan menampilkan kode pilihan untuk anda, silahkan pilih sesuai dengan keinginan anda dimana anda akan menentukan widget tersebut .

1. Widget muncul hanya di homepage (halaman depan) saja
Tambahkan script : 

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Widget muncul di semua halaman kecuali Homepage.
Tambahkan script : 

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Widget muncul hanya di halaman Archive saja

Tambahkan script :

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

4. Widget muncul di semua halaman kecuali halaman Archive.
Tambahkan script : 

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if> 

5. Widget muncul hanya di halaman posting

Tambahkan script : 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

6. Widget muncul di semua halaman, kecuali halaman posting

Tambahkan script :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

7. Widget muncul hanya di postingan tertentu saja.

Tambahkan script :

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Widget muncul selain di postingan tertentu.
Tambahkan script :

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Widget muncul hanya di halaman staticpages.
Tambahkan script :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

10. Widget muncul di semua halaman, kecuali halaman staticpages.
Tambahkan script :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

NB : Kode titik-titik itu adalah ID widget yang nantinya akan jadi penempatan setiap kode yang di pilih.

Cara Menambahkannya :

Jika kamu ingin menambahkan widget "Sosial Media" Maka untuk penempatannya seperti contoh di bawah ini : perhatikan kode warna merah yang saya tandai!!

<b:widget id='HTML3' locked='false' title='Sosial Media type='HTML'>
    <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
  </b:if>
</b:includable>
  </b:widget>

Perlu Diketahui :

• Untuk penempatannya kode pertama di letakan setelah <b:includable id='main'>
• Untuk penempatan kode kedua, silahkan letakan sebelum kode </b:includable> 

Selamat Mencoba!

Share

• Twitter
• Facebook
• Google+

Cara Membuat Author Profil di Blog

Cara Membuat Author Profil di Blog  - Banyak diantara kita apalagi blogger pemula seperti saya yang sangat ingin membuat profil kita di blog , tentunya dengan menampilkan deskripsi diri kita , dan foto profil yang ganteng atau cantik,hehe.

Kesempatan kali ini, NTechno akan membagikan script sederhana dalam membuat profil tersebut dengan mudah , oke langsung saja simak caranya berikut ini .

Contoh dari Author Profile

1. Masuk ke Dashboard Blogger

2. Tata Letak > Add Widget > HTML/Javascript

3. Tambahkan judul bisa Profile atau lainnya

4. Masukkan script dibawah ini lalu gantilah data dirinya sesuai keinginan kamu :

<span style="border-width: 1px; height: 77px;"><img alt="Blog" src="http://i1066.photobucket.com/albums/u416/Aness_Silitonga/Ma_zpsn3qhjcsp.jpg" style="border: 1px ridge #b7b7b7; float: left; height: 77px; margin: 4px; padding: 2px;" / /></span><span style="font-weight: bold;"><a href="http://newbietechnoo.blogspot.com/" target="_blank"><i><span style="color:#33ff33;"> Aness Silitonga</span></i><br /><strong style="font-style: normal;"><img alt="fromdr.png" src="http://newbietechnoo.mywapblog.com/files/fromdr.png" / /><span style="color:dimgrey;"> </span><span style="color:#3333ff;">Medan, Indonesia</span></strong></a></span><br />" Masih muda, dan masih tekun belajar coding dan jadi developer web,peminat Google Adsense,dan very interested sama Google . "

5. Selesai .

Share

• Twitter
• Facebook
• Google+

Cara Membuat Tombol Back to Top dengan Efek Bounce

Cara Membuat Tombol Back to Top dengan Efek Bounce 

Pada kesempatan kali ini NTechno akan mencoba memberikan tutorial membuat widget back to top dengan efek bounce , langsung to the point saja , silahkan ikuti tutorial berikut ini :

1. Login ke Dashboard Blogger
2. Klik Template > Edit HTML
3. Copy script dibawah ini lalu letakkan tepat diatas kode </head>

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

kamu bisa lewati langkah ini apabila di blog kamu sudah ada versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.

4. Copy jQuery dibawah ini lalu letakkan juga tepat diatas kode </head>

<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>

5. Lalu Add Widget/Javascript pada blog , terserah mau dimana .
Lalu copykan script dibawah ini :

<style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPqdkELe5On0aI4sQdaFmBAPK7G3_EfBmVTmisg5LNRPv3eTY6UliZNTaVuQiJRvBMI1Fycw6AekppursyrpoVQzH7b6eLWl3K92rYYZK_Ap5cDEq76r1s_digaVPmnSL4oQAYPMF_exrc/s1600/arrow-up_basic_blue.png'/></div>

6. Selesai

Share

• Twitter
• Facebook
• Google+

Cara Memasang Tabel Kode Warna di Blog

Cara Memasang Tabel Kode Warna di Blog - Untuk mengedit atau mendesain blog kita pasti butuh referensi kode warna. Untuk itu terkadang kita harus bolak balik situs yang memiliki postingan tabel kode warna, capek nggak? Mungkin kalau capek tidak ya, tapi pernah kah terlintas dibenak sobat bagaimana cara menampilkan tabel code warna tersebut dalam postingan atau pada elemen blog kita sebagai widget?
Contoh lihat Disini

Langsung saja simak tutorial nya dibawah ini :

1. Login ke Blogger Dashboard
2. Masuk ke Template lalu Edit HTML
3. Copy script dibawah ini lalu copykan tepat diatas kode </head>

<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
<script type='text/javascript'>
var hue;
var picker;
//var gLogger;
var dd1, dd2;
var r, g, b;
function init() {
if (typeof(ygLogger) != "undefined")
ygLogger.init(document.getElementById("logDiv"));
pickerInit();
//ddcolorposter.fillcolorbox("colorfield1", "colorbox1") //PREFILL "colorbox1" with hex value from "colorfield1"
//ddcolorposter.fillcolorbox("colorfield2", "colorbox2") //PREFILL "colorbox1" with hex value from "colorfield1"
}
// Picker ---------------------------------------------------------
function pickerInit() {
hue = YAHOO.widget.Slider.getVertSlider("hueBg", "hueThumb", 0, 180);
hue.onChange = function(newVal) { hueUpdate(newVal); };
picker = YAHOO.widget.Slider.getSliderRegion("pickerDiv", "selector", 0, 180, 0, 180);
picker.onChange = function(newX, newY) { pickerUpdate(newX, newY); };
hueUpdate();
dd1 = new YAHOO.util.DD("pickerPanel");
dd1.setHandleElId("pickerHandle");
dd1.endDrag = function(e) {
// picker.thumb.resetConstraints();
// hue.thumb.resetConstraints();
};
}
executeonload(init);
function pickerUpdate(newX, newY) {
pickerSwatchUpdate();
}
function hueUpdate(newVal) {
var h = (180 - hue.getValue()) / 180;
if (h == 1) { h = 0; }
var a = YAHOO.util.Color.hsv2rgb( h, 1, 1);
document.getElementById("pickerDiv").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
pickerSwatchUpdate();
}
function pickerSwatchUpdate() {
var h = (180 - hue.getValue());
if (h == 180) { h = 0; }
document.getElementById("pickerhval").value = (h*2);
h = h / 180;
var s = picker.getXValue() / 180;
document.getElementById("pickersval").value = Math.round(s * 100);
var v = (180 - picker.getYValue()) / 180;
document.getElementById("pickervval").value = Math.round(v * 100);
var a = YAHOO.util.Color.hsv2rgb( h, s, v );
document.getElementById("pickerSwatch").style.backgroundColor =
"rgb(" + a[0] + ", " + a[1] + ", " + a[2] + ")";
document.getElementById("pickerrval").value = a[0];
document.getElementById("pickergval").value = a[1];
document.getElementById("pickerbval").value = a[2];
var hexvalue = document.getElementById("pickerhexval").value ='#'+
YAHOO.util.Color.rgb2hex(a[0], a[1], a[2]);
ddcolorposter.initialize(a[0], a[1], a[2], hexvalue)
if (hexvalue!="#FFFFFF") document.getElementById("pickerhexval").select();
}
</script><!--[if gte IE 5.5000]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
YAHOO.util.Event.addListener(window, "load", correctPNG);
</script>
<![endif]-->

4. Sebelum save / simpan template bisa klik tab pratinjau dulu, kalau blognya tampilannya seperti semula berarti langkah-langkahnya udah benar .

Nah untuk menampilkan kode warna pada postingan lengkap dengan label, copy kode warna berikut dan paste di tab Edit HTML, sedang untuk menambahkannya pada elemen halaman blog :

1. Masuk ke Tata Letak > Add Widget > HTML/JavaScript
2. Tambahkan script dibawah ini :

<center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="10"><td>
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table>
<table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna yang terpilih : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

3. Save Widget lalu lihat Hasilnya
4. Selesai

Share

• Twitter
• Facebook
• Google+

Cara Membuat Kotak Script dengan Scroll

Cara Membuat Kotak Script dengan Scroll - Pada kesempatan ini NTechno akan mencoba membagikan bagaimana caranya membuat kotak script atau yang sering disebut border box dengan menggunakan scroll yang lebih simple tentunya .
Untuk itu langsung saja simak tutorial lengkap dari NTechno :

1. Masuk ke Posting Blog
2. Pilih ke modem " HTML"
3. Masukkan script dibawah ini ke dalam modem HTML di postingan kamu .

<div style="border: 3px #eeeeee solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 90px; width: 500px;
text-align: left;">
.kode script disini.</div>

4. Lalu langsung ubah dari mode HTML ke Compose .

Keterangan : 

 Solid = bentuk garis - garis pada border box
MODEL tersebut bisa anda ganti dengan ; Double , Dashed , Dotted , Groove, Inset , Outset , Ridge

background-color:#ffffff; = menjelaskan tentang warna background yang anda gunakan pada border box tersebut , #ffffff bisa diganti dengan warna kesukaan mu , silahkan Cek Kode Warna

height: 90px = ukuran tinggi pada border 
width: 500px = ukuran lebar pada border

5. Selesai

LEBIH LENGKAP NYA LIHAT VIDEO TUTORIAL BERIKUT :

Share

• Twitter
• Facebook
• Google+

Cara Membuat Tombol Show and Hide pada Blog

Cara Membuat Tombol Show and Hide pada Blog - Tombol untuk menyembunyikan dan menampilkan konten ini biasanya disebut spoiler. Sangat berfungsi untuk menghemat panjangnya suatu postingan atau gadget akibat gambar atau kata-kata yang sobat buat dengan sangat banyaknya.
Singkat kata singkat cerita langsung aja ya .

Silahkan copy script yang ada di bawah ini kemudian terserah sobat mau paste kemana ajee .

<div><div style="margin-bottom: 2px;"><i><b><small>SPOILER</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'show'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">NewbieTechno
</div>
</div>
</div>

Sangat mudah bukan?jika kamu berhasil membuat nya maka hasilnya akan seperti ini :

Spoiler for NTechno 

NewbieTechno

Semoga berhasil ^^

Share

• Twitter
• Facebook
• Google+

Membuat Widget Social Share Button di Blog

1. Login di Blogger.com
2. Masuk ke Dashboard > Template
3. Terus click Edit HTML > "CTRL + F"
Kemudian cari kode ]]></b:skin>  , jika sudah masukkan kode CSS ini diatas kode tersebut .

 ul.social_ntechno {
    list-style:none;
    display:inline-block;
    margin:15px auto;
    }
    ul.social_ntechno li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
    }
    ul.social_ntechno li a {
    display:block;
    width:50px;
    height:50px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
    }
    ul.social_ntechno li a strong {
    font-weight:400;
    position:absolute;
    left:20px;
    top:-1px;
    color:#fff;
    z-index:9999;
    text-shadow:1px 1px 0 rgba(0,0,0,0.75);
    background-color:rgba(0,0,0,0.7);
    -moz-border-radius:3px;
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
    border-radius:3px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    padding:3px;
    }
    ul.social_ntechno li.abfacebook {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHH7xZhFmB6IupikH4s6QF3jW0qQXKAEuSjGHa60jxeM8nLpcEOGsM4tU613CBz_cyXkSaPvys3eT4qZgc3YfswTlYZ7hUvnCDiIVdzNLEvNb1vedTZ2jMjpfMA7hgktklJydjrCfBQRu2/s1600/btrix-facebook-icon.png);
    }
    ul.social_ntechno li.abtwitter {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK7Xr2ec7hi_oL5Wxavi6SHUvGzGsfzqOprmfFHVZunliZ0V2x7ME226z_sNW5Tn6tNNuOxSZbXQ7ODDDP3UIqmDkW2mQjED8fMNWg4fD4nLPiv6iOZp28Nbs2jYiA0buB-seyEl9z666e/s1600/btrix-twitter-icon.png);
    }
    ul.social_ntechno li.abgoogleplus {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqg_G3DC8F2RvGG2jpMZqe2wipK7HvnYSuDwm4vu7eTkKmu9oB91T52jUSE7tgYpIAF9UZC0uJuz-4aLefLuS5m8W8RpTkS4ky2K7HzqiTAUaT2ij8TmzdwX_oOj-M9BHWAYio75XJ5_JW/s1600/btrix-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvymAoU5gMHhNoMNF4QxfkVVY8aLrZpgQHPtJ1Db1Hnx1zKdlh1Z84AIASqh1sy6lyYKyv5w_iK4QRTZ8yDVkcsskdzPVt95GT211O1expoUDcXe6LksJnCOZsh5568Ug6junouS4u-vTn/s1600/btrix-Pinterest-icon.png);
    }
    ul.social_ntechno li.abstumbleupon {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8htUJ2RflbcZtaoKHImW_HGXc5PjamzYR8VRW-OJdk-u11JxyQ8cgSQoZI8zJKlWrVEZevifqNqyikCJgOrgz85HEGBj_IJO_zz9U8mGROsvd4MRNJ17kmc1IccQ6nB5jeZ7jbwQoP7Mv/s1600/btrix-StumbleUpon-icon.png);
    }
    ul.social_ntechno li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUkkQKlBVVv5RQDPpgoDerSjbgt5blIVxs2zQKcJFGCoccjKh8-m2Xg4f6CM9qbbSLYbjG9Di4DgF60nZ3esrxoydRRhTYxkiZ-YLn7wsCMQoxlKp62cTj_JXRACZUMVcrTXf6OJi_h09k/s1600/btrix-Digg-icon.png);
    }
    ul.social_ntechno li.ablinkedin {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXlXeNlfFIJRCwtpElRmcTYm9h_Sc0R6fb6QruHCyZx7o8Xy5n61e95FfmS_3Tew4M3v5JxkuFTpBykA5evEuy2ymBr2AzNt7652qSQ_g7cmAyad-MmVM0ndfg7RTQB8eLfLel8vpONgHw/s1600/btrix-Linkedin-icon.png);
    }
    #animation_ntechno:hover li {
    opacity:0.2;
    }
    #animation_ntechno li {
    -webkit-transition-property:opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    }
    #animation_ntechno li a strong {
    opacity:0;
    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:300ms;
    -moz-transition-property:opacity, top;
    -moz-transition-duration:300ms;
    }
    #animation_ntechno li:hover {
    opacity:1;
    }

#animation_ntechno li:hover a strong {
    opacity:1;
    top:-10px;
    }

4. Kemudian cari kode <data:post.body/>  jika kamu menemukan beberapa kode tersebut ( biasanya ada 4 ) pilih yg nomor pertama atau terakhir saja jika kalian sudah memasang read more otomatis .

5. Jika sudah pastekan kode Pemanggilnya dibawah ini :

<!-- Share Button Ntechno Widget Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>
<div style='text-align:center'>
    <ul class='social_Ntechno' id='animation_Ntechno'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' ><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' title='G+'  target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'  target='_blank' title='Pinterest'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Stumbleupon'  target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Dig'  target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;'  target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>
    </li>
  </ul></div>
</b:if>
<!-- Share Button Ntechno Widget Selesai-->

6. Setelah itu cari kode <head> lalu pastekan kode css berikut dibawah kode <head> :

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

7. Kemudian Save Template dan lihat hasilnya .

Share

• Twitter
• Facebook
• Google+

Cara Membuat Widget Berlangganan dibawah postingan Blog

Cara Membuat Widget Berlangganan dibawah postingan Blog - Widget subscribe atau berlangganan adalah widget update posting anda yang dikirim melalui email pengguna yang berlangganan ke blog anda, widget ini sangat berguna untuk memudahkan dalam update posting terbaru anda, dan ini berguna untuk menjaring pengunjung dengan mudah, jadi sangat dianjurkan sekali untuk memasang widget berlangganan ini, supaya pengunjung tidak ketinggalan update artikel terbaru di blog anda, dan tentu saja keuntungan untuk anda meningkatkan traffic blog, bagi anda yang ingin memasang widget berlangganan ini, anda bisa ikuti tutorialnya.

Dibawah ini adalah contoh gambar untuk widget subscribe atau berlangganan yang akan kita buat :

Widget FeedBurner Subscribe

Cara Membuat Widget Berlangganan / Subscribe di Bawah Postingan Blog

1. Buka akun blogger anda.

2. Pilih menu template > Klik Edit HTML.

3. Pertama cari kode seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

4. Lalu letakan kode dibawah ini tepat dibawah kode tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='submit-email'>
  <span style='font-size:10px'>Masukan email Anda untuk Dapatkan Update terbaru dari <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='publisher' target='_blank' title='Publisher Profile'>Blog Newbie Techno</a>.Gratis!</span>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=NewbieTechno&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='enteryouremail' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email....&quot;;}' onfocus='if (this.value == &quot;Enter your email....&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email....'/>
<input name='uri' type='hidden' value='NewbieTechno'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Subscribe'/></form>
  </div>
</b:if>

- Ganti nama "Newbie Techno" dengan nama blog anda.

- Ganti nama "NewbieTechno" dengan url feedburner anda.

5. Selanjutnya letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>

.submit-email{text-align:left;margin:0;padding:0;}
.submitbutton {background: #FF8000;border: 2px ridge #F66303;font: 12px Oswald;color: #fff;height: 25px;padding:0 12px;margin: 0 0 0 5px;text-transform:uppercase;cursor: pointer;}
.enteryouremail {background: #fff !important;border: 1px solid #d2d2d2;padding: 0px 7px;color: #a19999;font-size: 12px;height: 23px;width: 165px;margin: 0px;}
.enteryouremail:focus{outline:none}

6. Klik Save template anda.

Share

• Twitter
• Facebook
• Google+