CODING NGEBLOG

Home » Semua Post Berkategori Modifikasi Blog

Showing posts with label Modifikasi Blog. Show all posts

Teknik Seo Untuk Blogger

Teknik Seo Untuk Blogger | SEO

Demikianlah tadi Teknik Seo Untuk Blogger

Cara Membuat Template Blog

Cara Membuat Template Blog |

Demikianlah tadi Cara Membuat Template Blog

Cara Membuat Iklan Melayang Di Blog

Cara Membuat Iklan Melayang Di Blog | Pada kesempatan siang kali ini saya akan berbagi pada agan-agan semuanya yang lagi cari-cari tutorial Cara Membuat Iklan Melayang Di Blog. Banyak dari teman-teman saya sendirin yang kebingungan dalam membuat Iklan Melayang atau bisa disebut juga dengan Floating.

Nah dari pada kelamaan menunggu penjelasan sari saya mending langsung saja pada tutorialnya di bawah ini :

Login Ke akun Blog
Pilih Tata Letak
Kemudian Tambah Gadget
Pilih HTML/Javascript
Kemudian Copas kode script berikut ini pada HTML/Javascript yang baru saja agan-agan tambahkan tadi :

<style type="text/css">
#gb{
position:fixed;
top:10px;right:10px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang agan-agan inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Nah gantilah Tulisan yang berwarna merah di atas (Masukan Kode iklan atau Gambar yang agan-agan inginkan di sini)dengan kode iklan agan-agan.
Yang terakhir tinggal simpan dech. Bagaimana mudah bukan Cara Membuat Iklan Melayang Di Blog.

Cara membuat judul blog bergerak

Cara membuat judul blog bergerak | Selamat siang agan-agan semuanya, pada kesempatan ini jumpa lagi dengan saya yang selalu setia pada agan-agan pengunjung setia Blog saya ini. Pada kesempatan ini saya akan share pada agan-agan semuan tentang bagaimana sih Cara membuat judul blog bergerak? Sebetulnya cata membuatnya tidak rumit kog, bagaimana agan-agan tertarik? Silahkan dibaca sampai selesai tutorialnya di bawah ini :

Login ke Blog agan-agan
Pilih Template
Kemudian agan-agan pilih Edit HTML.
Ceklist atau berikan tanda centang pada Expand Widget Templates
Kemudian agan-agan Cari kode <title><data:blog.pageTitle/></title>
Kemudian ganti kode tersebut dengan kode berikut ini :

<script language="JavaScript"><br />var txt="<data:blog.pagetitle/>";<br />var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;<br />txt=txt.substring(1,txt.length)+txt.charAt(0);<br />segarkan=setTimeout("bergerak()",kecepatan);}bergerak();</script>

Perlu diingat agan-agan semuanya bahwa angka 100 tersebut di atas menunjukkan kecepatan, angka 100 tersebut agan-agan bisa ganti sesuka agan sendiri, dan jika angka tersebut semakin besar maka semakin lambat pula gerakannya, dan begitu juga sebaliknya.

Save dan lihat hasilnya.

Cara Membuat Random Posts Di Blog

Cara Membuat Random Posts Di Blog | Mumpung dikantor lagi sepi kerjaan saya putuskan siang kali ini untuk Update blog saya ini untuk memenuhi keinginan agan-agan semuanya tentang tutorial blog.

Nah pada kesempatan kali ini saya akan share pada agan-agan semuanya tentang Cara membuat random posts Di Blog. Nah bagi agan-agan yang memang sedang mencari tutorialnya disini atau agan-agan yang tersesat diblog saya waktu surfing tidak ada salahnya untuk membaca-baca dan mencobanya.

Nah langsung saja berikut dibawah ini adalah tutorialnya :

Login
Pilih Layout
Tambahakn widget HTML/Javascript
Setelah itu COPAS kode berikut :

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=10;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
callback=randomposts" type="text/javascript"></script>

Ganti var numofpost=10 sesuai jumlah random posts yang ingin agan-agan tampilkan pada blog agan-agan semuanya.

Dan langkah yang terakhir adalah agan-agan tinggal Save dan lihat hasilnya pada template agan-agan semuanya.

Cara Membuat Recent Posts Dengan Thumbnail

Cara Membuat Recent Posts Dengan Thumbnail | Munpung lagi semangat-semangatnya Posting, kali ini saya akan berbagi lagi tips dan trik dalam Perbloggeran,hehehehe. Pada postingan kali ini saya akan share pada agan-agan semuanya tentang Cara Membuat Recent Posts Dengan Thumbnail.

Nah dari tadi saya sudah Ngoceh melulu, sekarang langsung saja yuck kita ke TKPnya :

Loggin ke blogger
Pilih Layout
Tambahkan widget/gadget HTML / Javascript
CPOAS kode berikut ini :

<div style="overflow:auto; width:100%px; height:500px; padding:10px; border:1px solid #999999;">
<right><style>
img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:55px;border:0;float:left;margin:0 0 5px 0px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:13px;font-color:black;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs normal {font-size:13px;}
</style>

<script type="text/javascript" src="http://blogedek-javascript.googlecode.com/files/recent-posts-with-thumb.js"></script>
<script style="text/javascript">
var numposts = 10;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 75;
</script>

<script type="text/javascript" src="http://nama-blog-agan-agan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right></div>

Agan-agan jangan lupa mengganti url blog yang berwarna merah di atas dengan url blog agan-agan sendiri.

Cara menghilangkan navbar

Cara menghilangkan navbar | Banyak teman-teman saya yang bertanya pada saya tentang bagaimana sih Cara menghilangkan navbar bawaan blogger secara default? Dengan tanpa ragu-ragu teman saya pada bertanya semua pada saya tentang blog, sebetulnya saya sendirinpun terbilang masih blogger pemula dibandingkan teman-teman saya yang lainnya yang sudah pada hebat-hebat. Dari pada saya terlalu panjang menjelaskan dan menceritakan perjalanan saya menjadi blogger, langsung saja kita ke tutorialnya saja dech, berikut ini adalah tutorial Cara menghilangkan navbar :

Login
Pilih Template
Kemudian Pilih Edit HTML
Ceklist atau berikan tanda centang pada Expand Widget Templates
Lalu cari kode ]]></b:skin>, Gunakan tombol Ctrl+F lalu untuk mempercepat pencarian kode tersebut
Jika sudah ketemu, letakkan kode dibawah ini tepat sebelum atau di atas Kode ]]></b:skin> :

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Nah langkah yang terakhir yanitu agan-agan tinggal Save Template dan jagi dech.

Cara Memasang Iklan Ditengah Posting Blogger

Cara Memasang Iklan Ditengah Posting Blogger | Memang dalam dunia Blogger tidak dapat dipungkiri lagi untuk melakukan strategi-strategi dalam meraup keuntungan baik itu berupa rupiah maupun dolar. nah pada kesempatan kali ini saya akan berbagi pada agan-agan semuanya tentang Cara Memasang Iklan Ditengah Posting Blogger, nah langsung saja dibawah ini adalah caranya :

Login ke blogger
Pilih Template
Pilih Edit HTML
Ceklist atau berikan tanda centang pada Expand Widget Templates
Cari kode berikut ini :

<data:post.body/>

Jika ada 2 (dua) kode yang agan-agan temukan pada template agan-agan maka pilihlah kode yang kedua yang ada di template agan-agan.
Ganti kode tadi dengan kode berikut ini :

<div expr:id='"iklan1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">



</div>
<div expr:id='"iklan2" + data:post.id'>

<data:post.body/>

</div>
<script type="text/javascript">
var obj0=document.getElementById("iklan1<data:post.id/>");
var obj1=document.getElementById("iklan2<data:post.id/>");
var s=obj1.innerHTML;
var t=s.substr(0,s.length/2);
var r=t.lastIndexOf(" ");
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+1);}
</script>

JANGAN LUPA Ganti tulisan yang berwarna biru di atas dengan scrip iklan agan-agan.
Dan yang terakhir agan-agan tinggal Save dan lihat hasilnya pada blog agan-agan.

Cara Membuat Sitemap Atau Daftar Isi

Cara Membuat Sitemap Atau Daftar Isi | Sebetulnya sudah capek rasanya untuk membuat update posting, namun demi pengunjung setia blog saya ini, rasa lelah, letih, dan capek tidak saya rasa untuk memuaskan hati para agan-agan pengunjung blog saya ini,heheheheheheh # sok puitis

Pada kesempatan ini saya akan berbagi pada agan-agan semuanya tentang bagaimana cara membuat SITEMAP atau bisa desebut dengan Daftar Isi pada blog? Nah yuck langsung saja menuju ke TKP tutorialnya di bawah ini :

Login
Buatlah Postingan baru
Pada halaman Posting agan-agan Pilih HTML
Setelah agan-agan memilih HTML pada halaman posting agan-agan, sekarang agan-agan tinggal COPAS kode di bawah ini :

<div style=overflow:auto;width:485px;height:450px;padding:5px;border:1px solid #0000ff>
<script src="http://blogedek-javascript.googlecode.com/files/categories-seo-friendly.js"
type=text/javascript>
</script>
<script
src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
</div>

Jangan lupa mengganti tulisan yang berwarna merah dengan URL Blog agan-agan sendiri.
Dan langkah yang terakhir agan-agan tinggal mempublish postingan agan-agan tadi.

Cara Membuat Tombol Back To Top Di Blogger

Cara Membuat Tombol Back To Top Di Blogger | Sebelum pulang kantor pada sore ini jam 16.00 rasanya saya ingin Update nich blog dulu. Mungkin setelah sekian lama tersibukkan dengan pembuatan Jaringan LAN dan Instalasinya kini sempat ada waktu luang untuk update blog walaupun tidak bisa banyak-banyak.

Tombol back to top adalah sebuah tombol yang berfungsi untuk mempercepat scrolling dari bawah keatas di sebuah web page sehingga akan mempermudah visitor untuk kembali´pada bagian atas dari blog.

Langsung saja kita menuju tempat tutorialnya dibawah ini dan dicoba aplikasikan diblog agan-agan :

Login di Blogger
Pilih Template > Edit HTML > klik Expand Widget Template
Cari kode </body> (gunakan CTRL+F)
Copy kode dibawah ini dan Paste tepat diatas kode </body> (jika kode dibawah sudah ada di template sobat, kode dibawah tidak usah dipasang lagi)

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

Kemudian Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode diatas(Code warna biru diatas)

<script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img onclick='MGJS.goTop();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqKpCLF3ZfEATpsPiMkOGu5I5jLpRs56TN-OA9PrlAYoaSy6g4KKKkkO4dTaP3hdsxjt-z9fqapGf3jeJ9HU2piGFOUgqcMWO8r79_iHC1j6E22iMUtpIG6fHHtlMHGx0CXq3TTK9KS6k/s1600/back-to-top.gif'/></a>

Terakhir simpan template sobat dan tombol back to top sudah bisa dipakai

Cara Membuat Link Bergerak Atau Bergoyang (Link Nudging)

Cara Membuat Link Bergerak Atau Bergoyang (Link Nudging) | Link Nudging adalah suatu efek yang bergerak atau bergoyang bila tersentuh oleh kursor . hal ini disebabkan karena dari sebuah links yang ditimbulkan dari penerapan jQuery pada template di sebuah website ataupun blog agan-agan.

Untuk mempersingkat waktu, langsung saja dipraktekkan (ini tutorial membuat Link Nudging Pada Label)totorialnya dibawah ini pada blog agan-agan :

Login di Blogger
Masuk ke bagian Edit HTML pada template
Ceklist/Centang pada bagian Expand Widget Template
Cari code </head>
Copy paste script dibawah ini dan letakkan tepat diatas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.nudge, .#Label1 ul li a').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>

Kalau kode yang berwarna merah tersebut sudah ada di template agan-agan, code itu tidak usah di pasang lagi jadi agan-agan hanya perlu memasang kode dibawahnya saja, Kemudian huruf yang berwarna biru diatas adalah widget id pada label, agan bisa sesuaikan pada label id di blog agan-agan. Dibawah ini adalah contoh widget id label dari template blog saya.

<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>

Nah terakhir tinggal Save template agan-agan dech,

Cara Membuat Navigasi Breadcrumbs Terindex Google

Cara Membuat Navigasi Breadcrumbs Terindex Google | Pada kesempatan siang menjelang sore kali ini saya akan membahas tentang bagaimana Cara membuat navigasi breadcrumbs terindex Google. Sebetulnya apasih tujuan dari Breadcrumbs itu sendiri? Tidak lain adalah tujuannya mempermudah pengunjung dalam menjelajahi isi blog / website yang kita miliki.

Bagaimana sudah ingin mencoba membuatnya diblog agan-agan semuanya? Berikut ini adalah tutorialnya :

Login di Blogger
Pilih Template
Pilih Edit HTML (alangkah lebih baiknya jika kita Backup dulu Template yang kita miliki, agar nanti jika terjadi kesalahan bias diperbaiki kembali)
Ceklist/Centang Expand Widget Templates
Kalau sebelumnya agan-agan sudah memasang breadcrumbs silahkan dihapus dulu kode breadcrumb yang lama.
Kemudian cari code ]]></b:skin>
Copy code di bawah ini dan paste tepat di atas kode ]]></b:skin>

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

Kemudian cari code <b:includable id='main' var='top'> gunakanlah CTRL+F untuk mempermudah pencarian
Ganti code <b:includable id='main' var='top'> dengan kode yang dibawah ini :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>

<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>

<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Langkah Terakhir simpan template agan-agan dan navigasi breadcrumbs akan siap di index Google

Mudahnya Share Posting Dengan Widget Share Egg

Mudahnya Share Posting Dengan Widget Share Egg | pada kesempatan ini saya akan sedikit share pada agan-agan semuanya yang suka mempercantik blognya, pada kesempatan ini saya akan share pada agan-agan semuanya tentang Widget Share Egg,

Widget Share Egg bentuknya hamper menyerupai dengan telur, nah bagi agan-agan yang berminat untuk mempercantik blognya silahkan di gunakan dibog agan-agan. Nah caranya cukup mudah kug, silahkan agan-agan ikuti tutorialnya dibawah ini :

Login Blogger
Klik Template
Edit HTML
Ceklist/Centang "Expand Template Widget"
Cari Kode </head>
Copy Kode Di Bawah ini, Lalu Paste Diatas Kode </head>

Lalu Cari Kode </body>
Copy Kode Dibawah ini, lalu Paste Diatas Kode </body>

<div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script>

Langkah yang terakhir adalah agan-agan tinggal Simpan/Save Template agan-agan

Keterangan :
Kode Yang Berwarna Merah Adalah Posisi Widget Tersebut, agan-agan Boleh Mengeditnya Sendiri

CSS3 Buttons For Blogger

CSS3 Buttons For Blogger | Pada kesempatan siang yang cerah ini rasanya kurang pas jika tidak update postingan, pada kesempatan ini saya akan Share Code Css pada agan-agan semuanya tentang CSS3 Buttons For Blogger. Code Css3 ini bisa digunakan untuk bermacam-macam keperluan, salah satunya untuk Tombol Download, Play, Like dan lain-lainya.

Demo CSS3 Buttons For Blogger

Jika agan-agan merasa tertarik silahkan ikuti tutorialnya dibawah ini :

Login Blogger
Klik Template
Edit HTML
Ceklist/Centang Expand Template Widget
Cari Kode Ini ]]></b:skin>
Copy Kode Dibawah, Lalu Paste Diatas ]]></b:skin>

.button { display: inline-block; white-space: nowrap; background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -ms-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); border: 1px solid #777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover { background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa, #ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd); background-image: -ms-linear-gradient(top, #fafafa, #ddd); background-image: -o-linear-gradient(top, #fafafa, #ddd); background-image: linear-gradient(top, #fafafa, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } .button:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .button:focus { outline: 0; background: #fafafa; } .button:before { background: #ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; pointer-events: none; } /* Hexadecimal entities for the icons */ .add:before { content: "\271A"; } .edit:before { content: "\270E"; } .delete:before { content: "\2718"; } .save:before { content: "\2714"; } .email:before { content: "\2709"; } .like:before { content: "\2764"; } .next:before { content: "\279C"; } .star:before { content: "\2605"; } .spark:before { content: "\2737"; } .play:before { content: "\25B6"; }

Simpan Template
Sekarang Kode HTML Pemanggilnya (Pilih Salah Satu)

<a class="button add" href="#">Add</a>
<a class="button delete"href="#">Delete</a>
<a class="button edit" href="#">Edit</a>
<a class="button save" href="#">Save</a>
<a class="button email" href="#">Email</a>
<a class="button like" href="#">Like</a>
<a class="button next" href="#">Next</a>
<a class="button spark" href="#">Spark</a>
<a class="button play" href="#">Play</a>

Kode Itu Silahkan Ditaruh Di HTML, Baik Itu Postingan / Gadget
Keterangan HTML Pemanggil :

<a class="button add" href="#">Add</a> : Tombol Add
<a class="button delete"href="#">Delete</a> : Tombol Delete
<a class="button edit" href="#">Edit</a> : Tombol Edit
<a class="button save" href="#">Save</a> : Tombol Save
<a class="button email" href="#">Email</a> : Tombol Email
<a class="button like" href="#">Like</a> : Tombol Like
<a class="button next" href="#">Next</a> : Tombol Next
<a class="button spark" href="#">Spark</a> : Tombol Spark
<a class="button play" href="#">Play</a> : Tombol Play

Cara Membuat Scroll Pada Widget Label

Cara Membuat Scroll Pada Widget Label | Sroll kelihatannya tidak begitu penting digunakan pada blog, namun menurut saya scroll adalah penting digunakan pada blog kita agar tata letak blog kita terlihat rapid an bagus. Nah pada kesempatan ini saya akan memberikan bagaimana Cara Membuat Scroll Pada Widget Label di blog, dan ini bekerja/valid 100%.

Langsung saja berikut langkah-langkah Cara Membuat Scroll Pada Widget Label :

Pastikan agan-agan login ke akun blogger masing-masing
Jika sudah login, dari bagian dashbord blog pilih Template untuk mengakses halaman edit HTML. ( Baca : Cara Mengakses Halaman Edit HTML Blogspot)
Jika sudah jangan lupa back-up template blog sebelum melakukan edit HTML ( Baca : Cara Upload dan Back-Up Template Blogger)
Jika sudah cari kode ]]></b:skin> (Gunakan tombol CTRL + F dan F3 untuk mempermudah pencarian kode)
Sudah ketemu Copas kode dibawah dan letakan diatas kode ]]></b:skin>

        #Label1 .widget-content{
        height:200px;
        width:auto;
        overflow:auto;
        }

Kode warna biru adalah tinggi kotak Scroll silahkan kamu sesuaikan.

Jika sudah Klik Simpan

Selesai dan lihat hasilnya.

Cara Membuat Menu Horizontal Navigasi

Cara Membuat Menu Horizontal Navigasi | Banyak dari teman-teman saya yang menannyakan bagaimana sih cara membuat NAVBAR / NAVIGASIBAR / MENU HOME dan lainnya diblogger. Sebetulnya jika kita mau googling sudah ada banyak yang menyediakan tutorial cara membuatnya. Namun tidak sedikit pula yang saya temukan bahwa tutorialnya/codenya tidak Valid.

Nah kali ini akan kita bahas bersama bagaimana sih Cara Membuat Menu Horizontal Navigasi yang Valid? Pada kesempatan ini saya ambilkan peng-Codingan dari Miliknya Mas Riyanto yang sudah saya tes dan hasilnya 100% Valid.

Demo

Nah dbagi agan-agan yang sudah tidak sabar lagi silahkan simak tutorialnya dibawah ini :

Login Blogger
Klik Template
Edit HTML
Ceklist/Centang Expand Template Widget
Cari Kode: ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian Code)
Copy Kode Dibawah ini, Kemudian Paste Diatas Kode ]]></b:skin>

/* Menu Navigasi By Art Preview */
#menus {
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
height:31px;
}
#menus li {
display:inline;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
#menus li a {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8I2IDr6XBYVs3SknR_RyWrf875iVMgVjkWDnF6VlSxg5n6RGnFCDwHfMqk1lbraG6HsZ_oheGEx0QBGHwIJ8pjASoHOVO_8FwrCvpiAWDHesbuNMpXkszQjP3a75QgYPjCoG6rTb_i4iV/s1600/menu.gif) no-repeat scroll 0 0;
color:#382E1F;
display:block;
float:left;
font-size:12px;font-weight:normal;font-family:comic sans ms;
height:31px;
line-height:31px;
margin-left:-10px;
padding:0 20px;
text-decoration:none;
z-index:1;
}
#menus li a:hover, #menus li a.current {
background-position:0 -31px;color:#cccccc;font-weight:normal;
}
#menus li.current_page_item a, #menus li.current-cat a {
background-position:0 -62px;
}
#menus li a.home {
background-position:0 -93px;
margin-left:0;
padding:0;
text-indent:-999em;
width:45px;
}
#menus li a.home:hover {
background-position:0 -124px;
}
#menus li.current_page_item a.home {
background-position:0 -155px;
margin-left:-40px;
}
#menus li a.lastmenu:hover {
background-position:0 0;
cursor:default;
}

Langkah selanjutnya adalah :

Lalu Cari Kode <div id='header-inner'>

Kalau agan-agan Tidak menemukannya, agan-agan bisa Cari Code Yang Sejenis, Karena Setiap Template Berbeda-Beda

Copy Kode Dibawah kemudian Paste Dibawah Code <div id='header-inner'>

<ul id='menus'>
<li class='current_page_item'><a class='home' href='#' title='Home'></a></li>
<li><a href='#' title='Menu 1'>Menu 1</a></li>
<li><a href='#' title='Menu 2'>Menu 2</a></li>
<li><a href='#' title='Menu 3'>Menu 3</a></li>
<li><a href='#' title='Menu 4'>Menu 4</a></li>
<li><a href='#' title='Menu 5'>Menu 5</a></li>
<li><a href='#' title='Menu 6'>Menu 6</a></li>
</ul>


Keterangan : Code Diatas Juga Bisa Diletakkan Di HTML/JavaScript

Klik Pratinjau dulu untuk meminimalisir apakah ada kesalahan atau tidak, Jika Berhasil Maka Klik Save Template

Cara Membuat Gambar Header Menjadi Berputar

Cara Membuat Gambar Header Menjadi Berputar | Pada kesempatan kali ini saya akan mencoba berbagi tips coding lagi pada agan-agan semuanya yang sering mengunjungi Coding Ngeblog ini, mungkin saat agan-agan lagi iseng-iseng surfing pernah menemukan blog ataupun website yang menggunakan efek Gambar Header menjadi Berputar.

Nah pada kesempatan kali ini akan saya berikan tutorialnya bagi agan-agan semuanya, namun satu hal yang harus agan-agan ingat, Code CSS yang akan saya berikan ini akan bekerja dengan maksimal jika header agan-agan menggunakan gambar, jika tidak maka Code CSS ini tidak akan bisa berjalan.

Nah berikut in adalah cara ataupun tutorialnya :
1. Login Blogger
2. Klik Template
3. Edit HTML
4. Ceklist/Centang Expand Template Widget
5. Cari Kode : ]]></b:skin> (Gunakan Tombol Ctrl + F pada keyboard agar memudahkan agan-agan dalam mencari kode tersebut)
Coppy Code dibawah ini lalu kemudian Paste Diatas Code ]]></b:skin>

#header a img:hover {
-moz-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(-180deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transition: all 600ms ease-in-out;
-moz-transition: all 600ms ease-in-out;
-ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
}

6. Nah yang terakhir adalah langkkah yang paling mendebar-debarkan yaitu Klik Save Template agan-agan.hehehehe

Keterangan :

Code Yang Berwarna Merah Adalah Besar Rotasi, agan-agan Bisa Mengeditnya Sendiri
Code - (Minus) Menunjukkan Rotasi Berlawanan Terhadap Arah Jarum Jam, agan-agan Bisa Menghilangkan Code Itu (Minus) Kalau agan-agan Mau Gambarnya Berputar Searah Jarum Jam, Contoh (180deg)

Cara Mudah Menghilangkan Tanda Label di Bawah Postingan

Cara Mudah Menghilangkan Tanda Label di Bawah Postingan | selamat siang agan-agan semuanya pengunjung setia Blog saya ini,. Pada kesempatan kali ini saya kan berbagi kepada agan-agan semuanya tentang Cara Mudah Menghilangkan Tanda Label di Bawah Postingan.

Ada salah satu teman saya yang Tanya kepada saya “bagaimana sih caranya Menghilangkan Tanda Label di Bawah Postingan?” terus saya Tanya balik pada teman saya yang satu ini “Lha emangnya kenapa kog mau kamu hilangkan?” dia pun menjawab “ya karena rasanya kurang rapi?”.

Nah dari itulah saya mempostingkan Cara Mudah Menghilangkan Tanda Label di Bawah Postingan pada kesempatan kali ini, apapun itu yang menjadi dasar atau alasan agan-agan untuk menghilangkan Tanda label dibawah postingan itu menjadi pilihan agan-agan sendiri,

Berikut ini adalah Cara Mudah Menghilangkan Tanda Label di Bawah Postingan :

1. Login ke blogger
2. Pilih Tata Letak
3. Pilih Edit HTML
4. Beri tanda Ceklist/centang pada Expand Template Widget
5. Silahkan agan-agan Cari kode berikut ini : <span class='post-labels'> (Supaya memudahkan agan-agan dalam melakukan pencarian gunakan Ctrl + F)
6. Silahkan agan-agan Scroll ke bawah dan agan-agan melihat beberapa code dibawah code tersebut (<span class='post-labels'>). Secara lengkap code tersebut akan terlihat seperti di bawah ini :

<span class='post-labels'>
<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,
</b:if></b:loop></b:if>
</span>

6. Sekarang agan-agan bisa Menghilangkan Tanda Label di Bawah Postingan dengan cara menghapus/men-delete code diatas. Atau jika agan-agan tidak mau menghapusnya agan-agan juga bisa menggantinya dengan code dibawah ini :



7. Nah langkah terakhir adalah Klik Save Template agan-agan semuanya, dan silahkan lihat hasilnya seperti apa.

Cara Cepat Menghilangkan Tanda Oben di Blog

Cara Cepat Menghilangkan Tanda Obeng di Blog | Bagi para agan-agan blogger pemula mungkin merasakan kesulitan untuk menghilangkan atau mendelete tanda obeng yang ada pada blog agan-agan semuanya, maksudnya apa sih tanda obeng ini? Kata teman-teman saya sih tanda obeng ini untuk pengeditan secara cepat, dan perlu agan-agan ingat bahwa tanda obeng ini akan terlihat jika kita Login pada akun Blog kita, lha terus kalau tidak login bearti tidak terlihat? Yupz bener banget,.

Nah bagi agan-agang yang ingin Menghilangkan Tanda Obeng di Blog agan-agan semuanya saya akan berikan tips yang ampuh untuk menghilangkan Tanda obeng tersebut yang sobat tidak ingin ada keberadaannya diblog agan-agan semuanya.

Nah dari pada kebanyakan ceramah kayak Pak Ustadz langsung aja saya kasih tutorialnya dibawah ini untuk agan-agan semuanya :

1. Masuk atau login ke blogger kamu

2. Masuk ke tata letak

3. Pilih edit html

4. Jangan lupa Ceklist/centang kolom expand widget template

5. Cari kode ini : ]]></b:skin> (Gunakan Ctrl + F untuk mempermudah pencarian agan-agan)

6. COPAS (Coppy dan Paste) code dibawah ini dan letakkan tepat diatas kode nomer 3 (]]></b:skin>)tersebut diatas.

.quickedit{ display:none; }

7. Dan langkah yang terakhir adalah agan-agan tinggal klik Save dan lihat hasilnya. Ternya Tanda Obeng miliknya bengkel sebelah udah hilang.hehehehe