2014-02-02 ~ Ron1st Blog

Sunday, February 2, 2014

Cara Mudah Membuat Search box Yg elegan dengan CSS

11:13 AM Blogger

Untuk itu saya akan membagi kotak search box tapi saya akan membagikannya bukan yg biasa tapi menggunakan CSS .kotak search box ini sangat cantik,elegan, dan juga tidak repot.bagi sobat yang ingin menggunakan search box ini ikutilah tutorial berikut ini :

Login ke akun blogger anda
Pilih menu ''Tata Letak''
Klik Tambah Gadget
Pilih HTML/JavaSript

Udah itu pilih salah satu search box yang di inginkan, copy kode scriptnya dan masukkan di dalam HTML/JavaScript

Script kode search box 1

<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-Cm6Ya53Wj6g/TeixHY3LRDI/AAAAAAAAA6I/jJkMnJEN60s/way2blogging_searchbox1.png) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script search box 2

<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-peHEeRB58M8/TeixHZml3oI/AAAAAAAAA6E/J2_zg9Fn8PI/way2blogging_searchbox3.png) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script kode search box 3

<style type="text/css">
#w2b-searchbox{background:url(http://lh3.googleusercontent.com/-bk2Si48eZSo/TeixHMdeiII/AAAAAAAAA6A/eQEEa1tyZkI/way2blogging_searchbox2.png) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script kode search box 4

<style type="text/css">
#w2b-searchbox{background:url(http://lh5.googleusercontent.com/-TN5qYaRnSR4/TeixH2TVJlI/AAAAAAAAA6U/gYrDmDItWJQ/way2blogging_searchbox6.png) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script kode search box 5

<style type="text/css">
#w2b-searchbox{background:url(http://lh6.googleusercontent.com/-wu3eH4N9D1Q/TeixH8dOd9I/AAAAAAAAA6Q/taoILP-y0vE/way2blogging_searchbox5.png) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script kode Search box 6

<style type="text/css">
#w2b-searchbox{background:url(http://lh4.googleusercontent.com/-Pd1zyUMhsVo/TeixHnaB1hI/AAAAAAAAA6M/p-Iz_WGMQ3M/way2blogging_searchbox4.png) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

klik simpan dan lihat hasilnya

Cara Mudah cek Pagerank dan Memasang Widgetnya di Blogspot

11:11 AM Blogger

saya akan membagikan widget pagerank dari mypagerank.net bagi sobat yang ingin mencoba dan memasangnya di blog sobat,ikutilah tutorialnya di bawah ini.

silahkan anda berkunjung mypagerank.net di sampingnya ada tulisan google pagerank button atau anda bisa langsung aja klik link ini >> Google pagerank button
udah itu isikan URL Blog anda dan klik Check PR

Tunggu sebentar,setelah itu pilih salah satu style gambarnya dan klik gambarnya
setelah itu, copy kodenya
sekarang masuk ke blogger
pilih menu ''Tata Letak''
klik ''Tambah Gadget''
Pilih ''HTML/JavaScript''

Setelah itu,Paste code yang tadi di copy dan letakkan di kolom yg disedia
Klik simpan

Dan demikianlah tutorial tentang Cara Mudah cek Pagerank dan Memasang Widgetnya di Blogspot .

semoga bermanfaat.

Cara Membuat Artikel Terkait Dengan Scroll di Bawah Postingan Blog

11:10 AM Blogger

Artikel terkait ni pun bisa membuat blog kita menjadi lebih cantik, lebih rapi dan lebis profesional blog sobat hehehe. bagi sobat yang ingin mengunakannya ikutilah tutorial berikut ini :

Masuk ke dasbor blogger sobat
Pilih menu ''Template''
Setelah itu, klik ''Edit HTML''
Udah itu ada banyak kode, kebawah sedikit klik panah ► warna hitam yg disampingnya ada kode bskin untuk melihat semua kode css (di tampilan baru Edit hml)
cari kode <data:post.body> gunakan tombo CTR+F, biasanya kode ini ada 3 pilih yang ke 2 saja
Letakkan kode di bawah ini di bawah kode <data:post.body>

<b:if cond='data:blog.pageType == "item"'><div style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('ardi33').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </div> </b:if>

Setelah itu Simpan template den selesai
Note : ganti Artikel Terkait Dengan kata kata lain terserah anda

Cara Menghapus atau Menyembunyikan Attribute Blogger

11:08 AM Blogger

Tapi sudah banyak teman teman kita yang menghilangkan ataupun menyembunyikan Attribute Blogger. terlalu simple dan membuat blog tidak begitu indah dan profesional, untuk itu saya akan membagi tutorialnya dengan 2 cara menyembunyikannya saja atau menghilangkan secara permanen seperti di bawah ini :

1. Menyembunyikan Saja Dengan kode CSS

Menyembuyikan tidak secara permanen dengan kode css seperti di bawah ini:

Login ke Dasbor Blogger sobat
klik menu ''Template''
pilih ''Edit HTML''
Cari kode ]]></bskin> dan copy kode di bawah ini dan letakkan di atas kode ]]></bskin>

#attribution1 { height:0px; visibility:hidden; display:none }

Simpan Template

2. Menghilangkan Attribute blogger secara Permanen

Menghilangkan widget secara permanen seperti dibawah ini :

Masuk dashbor Blogger anda
Klik menu ''Template''
Pilih ''Edit HTML''
Cari kata sepeti ini attribution1, gunakan CTRL+F [ Untuk mempermudahkan pencarian ]
Ubah kata locked='true' menjadi locked='false'

Simpan Template
Sekarang masuk Ke ''Tata Letak''
klik edit pada widget attribution

Klik hapus pada konfigurasi Atribusi

Klik simpan

Cara Memasang Widget Parse HTML di Blog

11:06 AM Blogger

Pada Kesempatan hari ini kita akan membahas tutorial Cara Memasang Widget Parse HTML di Blog. Apakah kalian tahu apa itu Parse HTML ? Parse HTML itu adalah Widget untuk mengurai suatu text html / javascript agar lebih sempurna

Kalau kita ingin mengeview suatu code bisa menggunakan widget ini. Bagi sobat yang ingin membuat dan memasang widget ini tidak begitu sulit tutorial seperti di bawah ini :

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=430&h=300&title=Post-Code%3A+code+converter&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js">
</script>

Masuk dulu ke blogger sobat masing masing
Klik ''Entri Baru''
Setelah itu, Klik ''HTML'' di samping ''Compose''
Copy code yang di atas dan Paste codenya di dalamnya HTML
Udah itu, klik ''Publikasikan''
Dan sudah jadi Parse HTML anda di postingan anda. silakan menggunakannya

Cara Membuat Widget Sosial Media + Email Berlangganan di Blog

11:04 AM Blogger

Pastinya yang pertama kita harus masuk ke dasbor blogger kita
Pilih Menu ''Tata Letak'
Klik ''Tambah Gadget''
Pilih Gadget ''HTML/JavaScript''
Copy kode di bawah ini dan simpan di kotak yang tersedia

<style>
    /* Social Widget */
    #MBT-mashable-bar {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:250px;
    }
    .fb-likebox {
        background: #fff;
        padding: 10px 13px 0 10px;
        border-right: 1px solid #D8E6EB;
       border-left: 1px solid #D8E6EB;
       border-bottom: 1px solid #D8E6EB;
        margin:0px;
            height:45px;
    }
    .googleplus {
        background: #F5FCFE;
        border-top: 1px solid #FFF;
        border-bottom: 1px solid #ebebeb;
        border-right: 1px solid #D8E6EB;
        border-left: 1px solid #D8E6EB;
        border-image: initial;
        font-size: .90em;
        font-family: "Arial","Helvetica",sans-serif;
        color: #000;
        padding: 9px 11px;
        line-height: 1px;}
    .googleplus span {
        color: #000;
        font-size: 11px;
        position: absolute;
        display:inline-block;
        margin: 9px 70px;}
    .g-plusone {    float: left;}
.gplus {
        background: #fff;
        padding: 0px;
        border: 0px solid #C7DBE2;
        margin-bottom:-13px;}

    .twitter {
        background: #EEF9FD;
        padding: 10px;
        border: 1px solid #C7DBE2;
        border-top: 0;}
    #mashable {
        background: #EBEBEB;
        border: 1px solid #CCC;
        border-top: 1px solid white;
        padding: 2px 8px 2px 3px;
        text-align: right;
        border-image: initial;}
    #mashable .author-credit {}
    #mashable .author-credit a {
        font-size: 10px;
        font-weight: bold;
        text-shadow: 1px 1px white;
        color: #1E598E;
        text-decoration:none;}
    #email-news-subscribe .email-box{
        background: #EEF9FD;
        padding: 5px 10px;
        font-family: "Arial","Helvetica",sans-serif;
        border-top: 0;
        border-right: 1px solid #C7DBE2;
        border-left: 1px solid #C7DBE2;
        border-image: initial;
       height:35px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}
    #email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
        background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
        -pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:white;
        text-shadow:#d08d00 1px 1px 0;
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}
    #email-news-subscribe .email-box input.subscribe:hover{
        background: #ff9b00;
        background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
        background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
        background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #cc7c00;
        color:#FFFFFF;
        text-shadow:#d08d00 1px 1px 0}
    #other-social-bar {
        background-color: #D8E6EB;
        box-shadow: 0 1px 1px #FFFFFF inset;
        padding: 0px;
        font-family: "Arial","Helvetica",sans-serif;
        font-weight:bold;
        overflow: hidden;
        border: 1px solid #B6D0DA;
           height:37px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}
    #other-social-bar .other-follow {
        float: left;
        color:#1E598E;
        overflow: hidden;
        height:20px;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow ul li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow ul li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li {
        font-size: 12px;
        font-weight: bold;
        display:inline;
        border:0;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#1E598E;
        font-weight: bold;
        display:inline;
        text-shadow: 1px 1px white;}
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Rt1f6bP-vk74bcqTvSqnr9Suw4VaHMlH3ZZKMB7FfVs8bsKP7I-KkDkdVospbAo69TFLwZKOrVaBtbgBH3hzZDmB2nVIAM-5qbWjNXEDEbTKNUF6qr-A9aWVFsGVUYaa1Tqq7ZWpUXU/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}
    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSEfMniFytzPdlDkpZ5qpEurab4OXjpvGC2SN8A6mI_laGtsZNTcH2ALnOXPtCMyXCKURIpMjPudVZn4xWdTLfW8HFWdk2HZSHWrO4eCuk8m02ulbYfTUYhXw_KCvM_xiny-6DZ2Aw13g/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsT8a32V2DoWGtMJya3oIqyfN_GqdBFeNVTZtNEXoer516PAwgL9G96YHv56YdzlwAYQ3Mq4b6yMgUfK7oi_QTtQBUnfh0BGNakOypB57eCQ2wyr41Nu01ykZpiSaT-a4rTw5r2JSPoWI/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

    </style>

    
 <div style="margin-bottom:10px;"> <div id="MBT-mashable-bar" >


<div class="gplus"> <link href="http://plus.google.com/108021608037797119476" rel="publisher" />
<script type="text/javascript"> window.___gcfg = {lang: 'en'}; undefinedfunctionundefined) {var po = document.createElementundefined"script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagNameundefined"script")[0]; s.parentNode.insertBeforeundefinedpo, s); })undefined);</script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.pushundefined['_setAccount', 'UA-29131740-1']); _gaq.pushundefined['_trackPageview']); undefinedfunctionundefined) { var ga = document.createElementundefined'script'); ga.type = 'text/javascript'; ga.async = true; ga.src = undefined'https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagNameundefined'script')[0]; s.parentNode.insertBeforeundefinedga, s); })undefined); </script>
 <g:plus href="http://plus.google.com/108021608037797119476" width="250" height="69" margin="0px" theme="light"></g:plus> </div>
<div class="fb-likebox">


<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2F/Masukan id facebook kalian&send=false&layout=standard&width=230&show_faces=false&font=arial&colorscheme=light&action=like&height=80&appId=179027942166719" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:230px; height:80px;" allowtransparency="true"></iframe> </div>

<div class="googleplus">

 <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="230"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter">

 <iframe title="" style="width: 250px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=/Masukan id twittter kalian&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>

<div id="email-news-subscribe">

 <div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Masukan id feedburner kalian', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input class="email" type="text" style="width: 100px; font-size: 12px;" id="email" name="email" value="Masukan Email Anda" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" /> <input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div> <div id="other-social-bar">

<ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/Masukan id feedburner kalian" target="_blank">RSS Feed</a> </li> <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href=http://twitter.com/Masukan id twittter kalian target="_blank">Twitter</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="http://plus.google.com/108021608037797119476" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.way2blogging.org/" target="_blank" > Get This Blogger Widget »</a></span></div></div>  </div>

Ubah tulisan warna kuning dengan id facebook kalian
Ubah tulisan warna Merah dengan id google plus kalian
Ubah tulisan warna Biru dengan id twitter kalian
Ubah tulisan warna Orange dengan id feedburner kalian

Cara Membuat Daftar isi Akordion Berdasarkan Label

11:01 AM Blogger

Masuk Ke Blogger.com dengan akun anda
Pilih Menu Laman
Kemudian pada menu Laman Baru, pilih Laman Kosong
Setelah muncul Klik HTML di samping COMPOSE
Salin kode di bawah ini dan letakkan pada mode HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" type="text/css" /> <script type="text/javascript"> var showNew = true, accToc = true, openNewTab = true, maxNew = 10, baru = "Baru!", sDownSpeed = 600, sUpSpeed = 600; </script> <script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js"></script> <script src="http://tes.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

kode yang saya kasih garis panjang itu adalah Jquery, Bagi sobat yang di dalam templatenya sudah ada kode Jquery, singkirkan kode tersebut !
Ganti http://tes.blogspot.com dengan url blog/website sobat

Ron1st Blog

Ingin pasang iklan di slide 3

Ingin pasang iklan di slide 4

Ingin pasang iklan di slide 5

Sunday, February 2, 2014

Cara Mudah Membuat Search box Yg elegan dengan CSS

Cara Mudah cek Pagerank dan Memasang Widgetnya di Blogspot

Cara Membuat Artikel Terkait Dengan Scroll di Bawah Postingan Blog

Cara Menghapus atau Menyembunyikan Attribute Blogger

Cara Memasang Widget Parse HTML di Blog

Cara Membuat Widget Sosial Media + Email Berlangganan di Blog

Cara Membuat Daftar isi Akordion Berdasarkan Label

follow

Popular Posts

Blog Archive

Statistik Blog

…

…

…

Sponsor

Halaman

Populer

Kategori

Sunday, February 2, 2014

Social Profiles

follow

Popular Posts

Blog Archive

Statistik Blog

…

…

…

Sponsor

Halaman

Populer

Kategori