clean-5

Blogger

CSS

Widget

Classic

Tutorial

Others

Cara membuat tombol sosial share menggunakan CSS

Widget Sosial Share sangat diperlukan di dalam sebuah blog atau website, karena dapat mempermudah kita ataupun pengunjung membagikan artikel yang sudah kita posting, sehingga dapat di sebar keberbagi media sosial yang ada, seperti Facebook, Twitter, Google Plus dan sebagainya. Kalau sebelumnya saya sudah pernah memposting tentang widget recent-post dengan thumbnail, kali ini saya akan coba menjelaskan sedikit mengenai cara membuat widget sosial share di blogspot.  Untuk membuat tombol sosial share menggunakan CSS dapat dilakukan dengan cara sebagai berikut: 
Non-blog CSS widget

Contohnya Seperti ini:

Share to :

Facebook Twitter Google+

1. Masuk ke akun blogger: klik Template >> Edit HTML 
2. Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat di atasnya.
#non-jok{background:transparent;color:#000;line-height:40px;padding-left:3px; text-align:left; border:1px solid #ddd}
#non-jok h4{font-size:18px;line-height:40px;margin:0;text-transform:uppercase;display:inline}
#non-jok h4 span{background:#2c3e50}
#non-jok a{position:relative;font:normal 12px/14px 'Yanone Kaffeesatz',sans-serif;color:#fff;text-transform:uppercase;padding:10px 10px 7px 10px;box-shadow:1px 1px 1px #222}
#non-jok a:hover{background:#222}#non-jok a:hover span{color:#222}
#non-jok a span{line-height:20px;width:40px;padding:6px 0;top:0}
#non-jok a span.fb{background:transparent}.fb{background:#1e90ff}
#non-jok a span.tw{background:transparent}.tw{background:#00bfff}
#non-jok a span.gp{background:transparent}.gp{background:#f83124}
#non-jok a span.me{background:transparent}.me{background:#f1c40f}

3. Cari kode <data:post.body/> lalu letakan kode berikut ini tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='non-jok'>
<h4><span><i class='fa fa-external-link'/></span> Share to :</h4>
<a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'><span class='fb'><i class='fa fa-facebook'/></span> Facebook</a> 
<a class='tw' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'><span class='tw'><i class='fa fa-twitter'/></span> Twitter</a> 
<a class='gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'><span class='gp'><i class='fa fa-google-plus'/></span> Google+</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a class='me' href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' title='Share ke Lintasme' rel='nofollow'><span class='me'><i class='fa fa-plus'></i></span> Lintasme</a>");
//]]>
</script>
</div>
</b:if>

4. Terakhir cari kode </head> lalu letakan kode berikut tepat di atasnya.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5. Save Template
6. Selesai.

Cara membuat widget recent post dengan thumbnail

Widget recent post, selamat sore sobat blogger semuanya, ketemu lagi dengan antoncabon di non-blog, kali ini saya akan berbagi cara membuat widget recent post dengan thumbnail, widget ini perlu di pasang di blog, karena fungsinya dapat menampilkan posting terbaru dari blog anda. Untuk memasangnya sangatlah mudah, ikuti langkah berikut:
1. Masuk ke akun blogger
2. Pilih tata letak
3. Lalu klik tambahkan gadget atau add gadget
4. Pilih HTML/Javascript
4. Masukan kode dibawah ini
5. Save template
6. Selesai

Recent Post with thumbnail
<style scoped="scoped">
#bon_recent-post {
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
  color:#000000;
  margin:0 auto;
  padding:0;
  min-height:100px;
  background:#ffffff;
}
#bon_recent-post li {
  list-style:none;
  margin:0;
  padding:7px;
  background-color:#ffffff;
  border-bottom:0px solid #eee;
}
#bon_recent-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0;
  border:none;
  background:none;
  outline:none;
}
#bon_recent-post li a.title {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:#FE9E01;
}
#bon_recent-post li a.title:hover {
  color:#FD0202;
  text-decoration:none;
}
#bon_recent-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:0px;
  font-size:10px;
}
</style>
<ul id="bon_recent-post"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://non-blog.blogspot.com", 
    rp_numPosts = 7, // How many posts?
    rp_thumbWidth = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars = 150, // Number of posts summary
    rp_sortByLabel = false, // Replace `false` with your specific label name to display posts by specific label
                            // Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
    rp_noImage = "http://2.bp.blogspot.com/-q74K0MOB8bQ/VFmKXBSceEI/AAAAAAAACeA/7fQtfKKEt0Q/s1600/noimage.png", // A 'no-image' image
    rp_monthNames = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab
    rp_loadTimer = "3000"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script src="https://myprojecthos.googlecode.com/svn/recent-post.js"></script>
Keterangan:
Ganti Url  http://non-blog.blogspot.com  dengan Url blog anda.

Mr Moto Blogger classic template

mr moto classic template
TEMPLATE FEATURES

Mr Moto Blogger classic template is a classic blogger template for simple blog. The theme have 2 columns layout post widget content. Responsive  to any device. The theme is packed with widgetized sections, right sidebar.
Template Name : Mr. Moto Rising (Ellington style)

Url Instruction : Here
Designer : Jeffrey Zeldman
Url Designer : www.zeldman.com
Publisher: The Real Blog

Live colorfull responsive template

minibox-livecolorfull template
TEMPLATE FEATURES

Minibox-livecolorfull Responsive is a classic blog template for blogger and much more. The theme have 3 columns layout post widget content and advertising. 
Template Name : Minibox-livecolorfull
Author : Antoncabon
Url Instruction : Here
Designer : Antoncabon
Url Designer : Bon-Template
Publisher: The Template Blog

Cara membuat Blog Offline atau under maintenance

Ketika kita dalam tahap perancangan atau pembuatan suatu situs atau blog biasanya membutuhkan waktu, nah permasalahannya ketika sedang membangun sebuah situs website ada kalanya pengunjung mendatangi website tersebut, ini akan membuat pengunjung tersebut menjadi bingung karena tataletak situs kita yang masih berantakan karena dalam proses pembuatan.  Untuk menghindari hal di atas sebaiknya kita menonaktifkan terlebih dahulu situs atau website kita, untuk websita yang mempunyai hosting sendiri dapat dilakukan di pengaturan file manager pada hosting tersebut.
Pada kesempatan ini saya akan membagikan trik menonaktifkan sementara situs blogger.
Tahapnya sebagai berikut:
Under maintenance nonblog

  • Masuk ke akun blogger 
  • Pilih Template
  • Edit HTML
  • Letakan kode berikut tepat di atas ]]></b:skin>
  • Lalu save.

html { height: 100%; background: url(http://2.bp.blogspot.com/-tfqlbgndC4Q/VAgX5mQyk-I/AAAAAAAABtY/frUvmy_Daz0/s1600/under%2Bmaintenance%2Bcbn.jpg) no-repeat center 50%; margin: 0; } body { display: none; }

Lihat hasilnya.:

Note: Seteleh selesai maintenance atau pembuatan blog jangan lupa untuk menghapus kode di atas ya.... :D
Selamat Mencoba.

Cara baru template responsive

Ini adalah halaman test posting Ignore it, Thanks...
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
<div id='top-Nav'>
<ul>
<li><a href='http://antoncabon.blogspot.com/' target='_blank' title='antoncabon'>Antoncabon4u</a></li>
<li><a href='http://antoncabon.blogspot.com/' target='_blank' title='Sitemap'>Sitemap</a></li>
<li><a href='http://antoncabon.blogspot.com/' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://antoncabon.blogspot.com/' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://antoncabon.blogspot.com/' target='_blank' title='Contact'>Contact</a></li></ul>
<div class='Navsosial' style='margin:-30px 50px 0 0;'>
<a class='rss' href='http://antoncabon.blogspot.com/' rel='external nofollow' target='_blank' title='RSS Link'>
</a>
<a class='googleplus' href='https://plus.google.com/+antoncabon' rel='external nofollow' target='_blank' title='googleplus'>
</a>
<a class='facebook' href='https://www.facebook.com/antoncabon' rel='external nofollow' target='_blank' title='facebook'>
</a>
<a class='twitter' href='https://twitter.com/antoncabon' rel='external nofollow' target='_blank' title='twitter'>
</a>
</div> 
</div>
Table Header 1Table Header 2Table Header 3Table Header 4
Division 1.1Division 1.2Division 1.3Division 1.4
Division 2.1Division 2.2Division 2.3Division 2.4
Division 3.1Division 3.2Division 3.3Division 3.4
Example Heading 6
Example Heading 5

Example Heading 4

Example Heading 3

Example Heading 2

Example Heading 1

This is a Default Lorem Ipsum

Non blog
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Lorem ipsum abbr dolor strong sit amet, underline consectetuer italic adipiscing elit, sed emphasis diam nonummy bold nibh euismod another example code tincidunt ut laoreet this is a link dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  • This is an example list 1
  • This is an example list 2
  • This is an example list 3
  • This is an example list 4
  1. This is an example list 1
  2. This is an example list 2
  3. This is an example list 3
  4. This is an example list 4
Table Header 1Table Header 2Table Header 3Table Header 4
Division 1.1Division 1.2Division 1.3Division 1.4
Division 2.1Division 2.2Division 2.3Division 2.4
Division 3.1Division 3.2Division 3.3Division 3.4

Example Heading 1

Example Heading 2

Example Heading 3

Example Heading 4

Example Heading 5
Example Heading 6

Template