Cara Memasang Video Responsive dan Valid HTML5

Cara Memasang Video Responsive dan Valid HTML5 - Sekarang ini model responsive sedang popular di kalangan blogger ( khususnya blog yang memberikan informasi atau tutor tentang design blog ) , kali ini saya akan memberikan trik bagaimana membuat dan memasang video ( entah itu video youtube maupun video lainya , oh ya saya bukan hanya sekedar memberikan trik responsive pada video , melainkan saya juga akan memberikan trik dan tips cara membuat video youtube maupun video lainya menjadi valid , karena pada umumnya video default yang kita pasang belom valid

Cara Memasang Video Responsive dan Valid HTML5

Berikut Cara Memasang Video Responsive dan Valid HTML5 :

1. Pertama sobat pasang dulu widget CSS di bawah ini . diatas kode ]]></b:skin> atau </style>

.Video-Responsive {
position:relative;padding-bottom: 56.25%;
padding-top:25px;
height:0;
}
.Video-Responsive iframe, video, object, embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

2. Setelah anda Memasang CSS nya , sekarang saatnya anda pasang HTML nya untuk memanggil css tadi. Berikut Contoh penerapan kontrol koding pada iframe pada embed video YOUTUBE

<div class="Video-Responsive">
<object data="//www.youtube.com/embed/5nxxWzPSXso" height="329" width="592"></object></div>


Yang Perlu anda Perhatikan dalam kode diatas . anda hanya perlu mengganti url video //www.youtube.com/embed/5nxxWzPSXso dengan url video anda . Bagi anda yang belum tahu cara mendapatkan embed video silahkan googling dulu ( Caranya mudah kok ) kapan-kapan kalau ada waktu lagi saya buatkan tutorialnya 

Berikut merupakan demo hasil Video Responsive dan Valid HTML5 di atas :

Membuat Popular Post Keren Ala Kompi Ajaib

Membuat Popular Post Keren Ala Kompi Ajaib - Tadi setelah blogwalking ke kompi ajaib saya menemukan tutorial mengenai modifikasi popular post Sederhana Tanpa Thumbnails yang disertai title di link-nya . mungkin tutorial ini merupakan request dari pengunjung kompi ajaib yang meminta untuk membuat widget popular post yang digunakan oleh kompi ajaib .

Membuat Popular Post Keren Ala Kompi Ajaib

Berikut Cara Membuat Popular Post Keren Ala Kompi Ajaib :

1. Pertama sobat harus sudah memasang widget popular postnya
2. Setelah anda sudah memasang widget popular postnya kemudian sobat copy kode CSS di bawah ini dan simpan di atas kode ]]></b:skin> atau </stytle>

.PopularPosts .widget-content ul{margin-top:-7px;padding:7px !important;list-style-type:none;}
.PopularPosts .widget-content ul li{position:relative;padding:10px !important;width:100%;margin-bottom:1px}
.PopularPosts .widget-content ul li:nth-child(1){background:#444}
.PopularPosts .widget-content ul li:nth-child(2){background:#555}
.PopularPosts .widget-content ul li:nth-child(3){background:#666}
.PopularPosts .widget-content ul li:nth-child(4){background:#777}
.PopularPosts .widget-content ul li:nth-child(5){background:#888}
.PopularPosts .widget-content ul li:nth-child(6){background:#999}
.PopularPosts .widget-content ul li:nth-child(7){background:#aaa}
.PopularPosts .widget-content ul li:nth-child(8){background:#bbb}
.PopularPosts .widget-content ul li:nth-child(9){background:#c1c1c1}
.PopularPosts .widget-content ul li:nth-child(10){background:#ccc}
.PopularPosts .widget-content ul li a{color:white;text-decoration:none;}
.PopularPosts .widget-content ul li a:hover{color:#20c1ea;}

Bila sobat ingin merubah warna background pada tiap itemnya, silahkan ganti background pada kode .PopularPosts .widget-content ul li:nth-child(1) - (10)

Sebetulnya sampai , popular post ala kompi ajaib sudah jadi . tapi jika anda ingin menambahkan title di link popular post tersebut maka anda cari dulu

<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>

Ganti kode di atas dengan kode dibawah ini

<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>

Simpan Template dan lihat hasilnya

Note :
Jangan lupa setiap anda menambahkan widget baru hapus lah kode <b:include name='quickedit'/> , supaya blog anda tetap valid . :)

Resource : http://www.kompiajaib.com/2014/01/modifikasi-popular-post-sederhana-tanpa.html

Cara Membuat Scroll Timer Pada Blog

Cara Membuat Scroll Timer Pada Blog - tadi karena ada yang request tentang Membuat Scroll Timer Pada Blog , kali ini saya akan mencoba untuk menjawabnya , sebetulnya sangat mudah untuk membuat Scroll Timer , hanya di butuhkan css dan javascript , Fungsi dari Scroll Timer  adalah untuk mengukur jarak tinggi pada sebuah halaman blog, di homepage maupun dipostingan/laman. Scroll Timer ini mengukurnya dengan persen, dan tentu saja batas angkanya hanya mencapai 100%, selain untuk mengukur pada halaman blog, Scroll Timer ini punya keunikan, diantaranya adalah membuat blog terlihat keren, dll. Oke

 Cara Membuat Scroll Timer Pada Blog

Berikut  Cara Membuat Scroll Timer Pada Blog :

1. Cari kode </body> . Setelah ketemu taruh kode javascript dibawa ini diatas kode </body> tersebut .

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</script>

2. Langkah terkahir Pasang CSS-nya  ( pasang kode dibawah ini diatas kode ]]></b:skin> )

#scroll {
display:none;
position:fixed;
top:0;
right:20px;
z-index:500;
padding:3px 8px;
background-color:#2187e7;
color:#fff;
border-radius:3px;
}

#scroll:after {
content:"";
position:absolute;
top:50%;
right:-8px;
height:0;
width:0;
margin-top:-4px;
border:4px solid transparent;
border-left-color:#2187e7;
}

Note :
Kode yang berwarna Kuning merupakan kode warna scroll timer, Anda bisa ganti dengan kode warna sesuai keinginan. ( oh ya untuk demo anda bisa lihat di samping kanan scrollbar blog saya )

BAGAS31.com, Tempatnya Download Software Gratis

BAGAS31.com, Tempatnya Download Software GratisBAGAS31.com, Tempatnya Download Software Gratis - Munggkin bagi anda pecinta dunia maya tak asing lagi dengan BAGAS31.com . karena web BAGAS31.com tersebut menyediakan berbagai macama software yang dapat anda download secara gratis , mulai dari Antivirus ,Game Full Version, Full Crack,  Antivirus, Reload, RIP, Audio Video, Portable  Hingga Repack dan masih banyak lainya . Salah satu keistimewaan blog BAGAS31.com adalah blog tersebut merupakan blog yang niche ( Blog yang membahas satu tema saja yaitu tentang software ) jadi buat anda yang ingin mendownload tentang software , BAGAS31.com itulah blog yang tepat buat anda , karena blog tersebut software-softwarenya sangat lengkap sekali ( selain itu softwarenya juga gratis . hehehehheh)

Saya Sangat betah berlama -lama di BAGAS31.com , karena selain softwarenya yang lengkap .BAGAS31.com web desginnya sangat seo friendly . penasaran kayak apa tampilan dari web tersebut , kalau anda penasaran langsung saja kunjungi BAGAS31.com atau sobat bisa liat gambar Screenshoot dibawah ini ( gimana menurut anda , tampilannya yang seo friendly membuat kita bertahan lama - lama di blog tersebut , iya kan ,,,hehhhe )

BAGAS31.com, Tempatnya Download Software Gratis


Cara Mendownload Software di BAGAS31.com

Bagi anda yang ingin mendownload software di bagas31.com jangan khawatir , jika anda tidak tahu cara mendownloadnya , sebenarnya cara mendownloadnya sangat mudah , karena sudah disediakan kategori dan kotak pencarian , namun jika sobat belum tahu tenang saja , kali ini saya akan menjelaskan bagaimana cara mendownload software-software yang ada di bagas31.com


  1. Pertama sobat harus masuk dulu ke webnya dengan alamat www.bagas31.com
  2. Setelah anda masuk kesitu , kemudian pilih-lah software yang ingin anda download ( anda dapat mencari software tersebut berdasarkan kategori , atau juga bisa mencari di kotak pencarian )
  3. Setelah anda menentukan software yang ingin anda download , kemudian anda tinggal klik artikel postingan ( jika anda masih di homepage ) kemudian klik download
  4. Done 

Cara Instalasi Software di BAGAS31.com

Cara instalasi software di bagas31.com sangat mudah , karena Petunjuk instalasi dan penggunaan  sudah include di dalam masing masing file.

Keunggulan BAGAS31.com sebagai Tempatnya Download Software Gratis

1. Peringkat Alexa yang Langsing

Karena BAGAS31.com, Tempatnya Download Software Gratis , jadi tak heran kalau peringkat global alexa rank peringkatnya sangat langsing sekali ( peringkatnya tinggi ) lihat saja Screenshootnya yang saya ambil dari blog bagas31.com tersebut dibawah ini :

Peringkat Alexa Rank Bagas31.com

Lihat saja screenshot alexa rank dari bagas31.com diatas . dari screenshot tersebut terbukti bahwa bagas31.com merupakan salah satu blog yang sangat terkenal sebagai penyedia Software Gratis di Indonesia

2. Loading Blognya Sangat Cepat

Benar kata-kata orang-orang kalau blog bagas31.com fast loading , saya telah membuktikan sendiri bahwa loading dari blog bagas31.com ini sangat fast sekali , meskipun banyak iklan dan widget-widget , tapi karena adminnya jago tentang webdesign , tak salah jika loadingnya sangat fast

3. Proses Download Sangat Mudah 

Di Bagas21.com ini prosed downloadnya sangat mudah karena menggunakan host yang mempunyai speed yang maximal, dan juga simple, tidak banyak iklan, maka tak salah jika proses downloadnya sangat mudah

4. Hampir Setiap Hari Update Software

Mungkin berbeda dengan kita yang hanya update 2-5 artikel dalam 1 minggu , namun berbeda dengan blog bagas31.com , yang 99% update setiap hari ( saluut deh buat adminnya ) selain itu bagas31.com juga selalu update software versi terbau

5. Softwarenya Lebih lengkap

Ya betul sekali Software di bagas31.com sangat lengkap mengani software ( karena niche blogger ). di blog terebut juga banyak sekali kategori-kategori . berikut kategorinya .
  1. Antivirus ( silahkan anda lihat label Antivirus disini )
  2. Android  ( silahkan anda lihat label Android disini )
  3. Audio Video
  4. Crak
  5. Games
  6. Internet
  7. Multimedia
  8. Portable
  9. Tools
  10. Windows
  11. Dan Masih Banyak Lagi
Yang membedakan Blog Bagas31.com dengan Blog lainnya :

1. Niche Blog

Seperti yang saya sampaikan bahwa yang membedakan blog bagas dengan yang lainya adalah bahwa blog bagas merupakan blog niche blogger ( Blog yang membahas satu tema saja yaitu tentang software)

2. Adminnya sangat ramah dan fast Respons

Mungkin yang dikatakan mas ufie benar , ketika ada seorang  yang ingin copas artikelnya.daei blog bagas , adminnya punmemberikan ijin , ( hehehehe ) selain itu juga adminnya fast respons dalam menanggapi komentar pengunjung

BAGAS31.com, Tempatnya Download Software Gratis

Kesimpulan
Nah, bagaimana Mas atau mbak brow, sekarang percayakan bahwa  bagas31.com, adalah sebuah blog penyedia Download Software Gratis yang profesional . Jadi jika anda membutuhkan sebuah software, entah itu game, antivitus, maupun yang lainya , kunjungi saja bagas31.com. 

Cara Membuat Daftar Isi di Blog Secara Otomatis

Cara Membuat Daftar Isi di Blog Secara OtomatisMembuat Daftar Isi di Blog Secara Otomatis - Kali ini saya akan share cara membuat daftar isi di blog secara otomatis , karena biasanya kita membuat daftar isi dengan cara manual , dan cara tersebut mungkin sangat melalahkan dan membutuhkan waktu lama , mungkin dengan daftar isi di blog secara otomatis ini , dapat mempermudahkan anda dalam membuat daftar isi , cara membuat daftar isi otomatis ini tidak terlalu sulit ( mudah ) , bahkan seorang newbie pun seperti saya bisa membuatnya .

Oh ya , nanti demo daftar isi di blog secara otomatis ini , demonya akan seperti di bawah ini :

daftar isi di blog secara otomatis

Berikut Cara Membuat Daftar Isi di Blog Secara Otomatis :

1. Pertama sobat buat terlebih dahulu artikel baru 
2. Kemudian sobat Pilih HTML untuk memasukan kodenya nanti ( ingat brow HTML bukan Kompos ) . untuk lebih jelasnya lihat gambar dibawah ini

Cara Membuat Daftar Isi di Blog Secara Otomatis


4. Di dalam HTML tersebut kemudian sobat copy kan kode html di bawah ini

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:270px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://ahmadsuyadi.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Note :
Sebelum anda menyimpan dan mempublikasikan daftar isi tersebut maka 1 hal yang harus anda perhatikan adalah sobat harus mengganti ahmadsuyadi.blogspot.com dengan nama blog anda sendiri

Cara Membuat Title Pada Breadcrumbs

Cara Membuat Title Pada BreadcrumbsCara Membuat Title Pada Breadcrumbs - Karena kemaren banyak yang tanya tentang membuat breadrumbs yang seo  friendly dan valid HTML5 yang di sertai dengan title secara otomatis , maka kali ini saya akan menjawab pertanyaan mengenai Breadcrumbs yang di sertai dengan title . sebenarnya cara untuk memberikan title pada  Breadcrumbs ini sangat mudah , namun kayaknya karena belum ada yang share tutorial ini , mungkin anda kebingungan atau kesulitan untuk membuat title pada breadcrumbs . Anda hanya perlu menambahkan sedikit kode expr:title='bla.bla.bla' pada label dan home yang dapat membuat Breadcrumbs tersebut ada titlenya

Untuk demo anda bisa mengarahkan post anda di link Breadcrumbs atau melihat gambar di bawah ini

Cara Membuat Title Pada Breadcrumbs

Berikut Cara Membuat dan Memasang Title Pada Breadcrumbs :

1. Pertama sobat cari dulu kode

<b:includable id='breadcrumb' var='posts'>...</b:includable>

Lalu ganti kode diatas dengan kode dibawah ini

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'><span itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<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' title='Beranda'>Beranda</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' property='v:title' rel='v:url'><data:label.name/></a><b:if cond='data:label.isLast == &quot;true&quot;'/></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div></span>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Semua Posting</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#187; <span>Posting dalam <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

2. Langkah yang kedua Pasang CSS-nya telebih dahulu . ( pasang kode dibawah ini diatas kode ]]</b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}a

Perhatian Brow :)
CSS di atas digunakan atau di pasang bagi yang belum memasang CSS Breadcrumbs , tapi jika anda sudah memasang CSS Breadcrumbs maka CSS di atas sebaiknya di abaikan saja , atau anda bisa mengganti css yang lama dengan css diatas

Membuat Auto Readmore dengan Post Snippet

Membuat Auto Readmore dengan Post Snippet - Banyak cara yang dilakukan untuk membuat read more , ada yang menggunakan java script . ada yang menggunakan bantuan textarea dan masih banyak lagi . namun kali ini saya akan membagikan readmore yang sangat simple dan fast loading karena hanya menggunakan post snippet saja .

Membuat Auto Readmore dengan Post Snippet

Berikut Cara Membuat Auto Readmore dengan Post Snippet :

1. Pasang CSS-nya telebih dahulu . ( pasang kode dibawah ini diatas kode ]]</b:skin> )

.thumb img{float:left;margin-right:10px;width:72px;height:72px}
.jump-link{display:inline;float:right;padding:5px;background:#ddd;margin-top:20px}

2. Kemudian sobat cari kode

<b:includable id='post' var='post'>

3. Setelah ketemu kode <b:includable id='post' var='post'> tersebut , maka nanti dibawahnya akan terdapat dua kode <data:post.body/>, kemudian replace kode <data:post.body/> yang kedua dengan kode berikut ini:

<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.hasJumpLink'>
<data:post.body/>
<b:else/>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='thumb'>
<a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img expr:src='data:post.thumbnailUrl'/></a>
</div>
<b:else/>
<div class='thumb'>
<a expr:href='data:post.url' expr:title='data:post.title' expr:alt='data:post.title'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBu9f4UbH1ps8HXB8E39dl9tWrMuoWF9mRUr8i72H7-3DdY9cU7x_cFdq_icZdArnsSKUJiNx8igXjHS9KDdoUg2WxFML1YSjRSJ4VFPxRju-XGFMjajR8mOBqRCQOiGoFWqhK_W2LB0E/h120/no-image.jpg'/></a>
</div>
</b:if>
<data:post.snippet/>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
</b:if>
</b:if>

4. Langkah terakhir simpan template dan lihat hasilya

Catatan Kecil
Auto Readmore dengan Post Snippet di atas merupakan dasar , jika anda ingin agar readmorenya keren , silahkan anda modif sendiri css-nya dengan penambahan background, border,dll

Download Template Bule Faster SEO Responsive

Download Template Bule Faster Blogger SEO Valid HTML5 Responsive - kali ini saya akan membagikan template karya ridwan hex yang sangat keren , karena di home page auto read morenya seperti ala kang ismet , tapi sayangnya belum berganti-ganti sesuai labe hehhehehe ( just kidding ) . langsung aja liat demo di bawah ini :

Download Template Bule Faster SEO Responsive

Fitur Template Bule Faster  ini :


  • SEO 100%
  • Responsive Layout
  • Elegant
  • Valid HTML5
  • Auto Readmore Keren ( Ala kang ismet )
  • Navigation Dropdown Keren
  • Related Post Keren
  • Fast Loading

Jika sobat tertarik dengan Template Bule Faster Blogger SEO Valid HTML5 Responsive silahkan anda download sob , template ini gratis kok hehhehe
Dilarang untuk mengganti atau menghilangkan link credit pembuat.

Cara Membuat icon Author comment

Cara Membuat icon Author comment - Kali ini saya akan membagikan tutorial tentang bagaimana membuat komentar admin berbeda dengan komentar pengunjung dengan menggunakan icon komentar . tahukah anda apa itu Comment author ? Comment author adalah pesan komentar yang dipublish oleh pemilik akun situs web atau blog.

Berikut Cara Membuat icon Author comment

  1. Login dulu ke akun blog sobat
  2. Pilih " Template "
  3. Kemudian Klik " Edit HTML "
  4. Setelah itu cari code ]]></b:skin> atau pun </style>, setelah ketemu silahkan copy code CSS dibawah ini dan pastekan didalam ataupun diatas code ]]></b:skin> atau pun </style>. kalo lebih bagusnya silahkan pastekan code dibawah ini dekat dengan atau bersamaan dengan code CSS (comments ) agar lebih mudah suatu saat anda untuk mengeditnya.
.comments .comments-content 
.icon.blog-author {
position:absolute;
top:-8px;
right:-12px;
margin:0;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirFtaHhWEE1W2DiOL8XS4DpYMOiM5oxNuxadqJCTqdTNgdhW9aAjxkMWGZ9xI3mULWqR-UP8kH8_9WykCv0FjToVSRQBrK6acteaHcgDfUdXpA_J_vje3b-PMpCh_TNyctPqUruAqipv8/s1600/Merah-autor.png);
width:56px;
height:56px;
}

Sobat bisa mengganti url kuning di atas dengan salah satu url di bawah ini

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsH8bMkYhkTZNOFz8MB8rXnhdMhzY7hn-PaGd1irtNkMpN71woJfeqRn_3WMiJ7rXK3IJ2U2-OBfAuZE-Ia83_S4fJVxcBIUUnPO0tjQXd9OUPRJJuuQN0f-NIKxngaQoHSuWuKc7oci8/s1600/autor-biru.png
Author 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFXkw94edTOi4t1_4EBhUCdCU_UGrI_h_S0KEQU1vogD8ghVgWkZOknw6oJyck_cU9TRQd2nVeZtr4uu48EHUDup9yTtpOFUS3gCeoVu-zOez69M4nxjFtzdWaEUX2rE9ABruH3SlmPHA/s1600/autor-black.png
author 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF_L4Jj9gUr6Hvv7tTUtzwjlYWd0vYHJxFFU5MAqXR-mGet5XKnSobCuBbn6bDgPXEeHn1RfPmejJQoDYobjeNyUFf0zPH9_ILu5YD809rAWN02YG_ITLgR2zO_pNxP2PSGnAw4ZI_5PE/s1600/autor-hijau.png
author 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMtmtOaJOf7Hv3ftmjNFOuR2EyqbCHAqoKS9XNUzgsgsn5fLAKJGxz3c_DOxLz21RMqei5ZrjhL2do7a55FqjZuEAdS8TUxp0WjE3j_l387CRZtliKxVM0JRfU9JaS-iJl5fYENG2fyzc/s1600/autor-kuning.png
author 4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNLvZwvohdV-OUssRFIIFjYwEOYxhuupPNmdXOf97Qo-oR7ZBf_xn1G_vaMP9W6nb-bEFdU6m6t5pMug6IsOi0Mo3o9faQP3Fo9Sq4IHw0cOgXhtGp3QDPZLI2rA6uFYNcKtGNfwMHnU/s1600/authorpink.png
author 5

Simpan Template anda dan lihat hasilnya

Perbedaan author comment dengan para komentator dengan menambahkan icon gambar User Author pada postingan kali ini, akan mempermudah para komentator melihat Komentar author pada suatu halaman blog form Comment.

Trik Auto Heading H1 so that become Heading Article

Trick Auto Heading H1 so that become Heading Article - Basically H1 tag is the main thing that concerns the search engine compared to H2, H3, H4. Put the H1 tag on the title of the article would be more effective than putting it in the title of Home blog. The main objective is the article indexed in search engines. Setting the default template blogger certainly put in the H1 Tag Title Home blog, so you will need to modify the template so that article SEO Friendy.

Trik Auto Heading H1 so that become Heading Article

How to change the title of the article become the H1 tag, consider these steps carefully to avoid mistakes in the application.

Go to the blogger account. on the dashboard, select and click > Template > Edit HTML. Find the code below :

<b:includable id='post' var='post'>
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>
<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Replace with the code below :

<b:includable id='post' var='post'>
<div class='post hentry'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' target='_blank'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>

Find the code below :

  <h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Replace with the code below :  

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>

Catatan :
Remember re-edit your post CSS template. setting CSS .post h1, .post h2 or .post h3.

Cara Membuat Menu Header Responsive

Cara Membuat Menu Header Responsive - Karena kemaren ada yang request tentang bagaimana cara membuat menu navigasi yang responsive di blog , kali ini di waktu luang ini saya akan menjawab teman saya yang request menu responsive tadi . sebenarnya cara ini sangat mudah , kita hanya memasang css dan html untuk memanggilnya. wkwkwk

 Cara Membuat Menu Header Responsive


Gimana anda tertarik nggak dengan demonya , jika tertarik ikuti  Cara Membuat Menu Header Responsive di blogger dengan mudah di bawah ini :

1. Pasang CSS-nya telebih dahulu . ( pasang kode dibawah ini diatas kode ]]</b:skin> )

#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}

Langkah yang terakhir pasang Html ini untuk memanggil CSS di atas
<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href='/' title="Home">Home</a></li>
<li><a href='#' title="Menu 1">Menu 1</a></li>
<li><a class='prett' href='#' title="Drop Menu">Drop Menu</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href='#' title="Menu 2">Menu 2</a></li>
<li><a class='prett' href='#' title="Drop Menu1">Drop Menu 1</a>
<ul class='menus'>
<li><a href='#' title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href='#' title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href='#' title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open(&apos;http://translate.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&amp;amp;langpair=id%7cen&amp;amp;hl=en&apos;); return false;' rel='nofollow' target='_blank' title='English'>Translate</a></li>
</ul>
</nav>

3. Simpan Template dan lihat hasilnya ( keren kan hasilnya )
Oh ya enu navigasi yang responsive ini sudah di lengkapi dengan Translate , jadi anda tidak usah susah payah lagi untuk membuat  widget translate ini .

Jika sobat mengalami kusulitan atau request tutorial lainya , silahkan tuliskan di kotak komentar bawah

Sumber :http://www.kompiajaib.com/2013/10/membuat-menu-header-responsive-pure-css.html

Membuat Auto Read-More dengan Bantuan TextArea

Membuat Auto Read-More dengan Bantuan TextArea - Di waktu luang ini saya akan membagikan tutorial mengenai auto read more atau yang bisa disebut dengan baca selengkapnya . Auto read more ini merupakan auto read more yang saya gunakan di template ini . oh ya tanpa panjang dan lebar mari kita buat auto read more yang keren dan fast loading ini :

Membuat Auto Read-More dengan Bantuan TextArea

Berikut Cara Membuat Auto Read-More dengan Bantuan TextArea :

1. Pasang CSS-nya telebih dahulu . ( pasang kode dibawah ini diatas kode ]]</b:skin> )

.post-thumbnail{height: 100px !important;float: left;margin: 3px;border: 5px solid #DFDFDF;}.post-more-link {text-align: right;float: right;}.post-footer{display:none;}

2. Langkah ke-dua Cari kode <data:post.body/> yang ke-2 kemudian ganti kode yang seperti berikut :

 <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

<data:post.body/>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>

Ganti dengan  berikut :

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

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

<data:post.body/>

<b:else/>

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

<data:post.body/>

<b:else/>

<textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>

<p class='post-summary' expr:id='&quot;summaryContainer-&quot; + data:post.id'>

<!-- for non/inactive JavaScript browsers -->

<b:if cond='data:post.thumbnailUrl'>

<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' itemprop='image' width='72'/>

</b:if>

<b:if cond='data:post.snippet'>

<data:post.snippet/>

</b:if>

<!-- end for non/inactive JavaScript browsers -->

</p>

<p class='post-more-link'>

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText + &quot; &quot; + data:post.title'>

<data:post.jumpText/>

</a>

</p>

<script>createPostSummary(&quot;postData-<data:post.id/>&quot;,&quot;summaryContainer-<data:post.id/>&quot;,&quot;<b:if cond='data:post.thumbnailUrl'><data:post.thumbnailUrl/></b:if>&quot;);</script>

</b:if>

</b:if>

<div style='clear:both;'/> <!-- clear for photos floats -->

</div>

Langkah yang terakhir sobat pasang Java script di bawah ini tepat diatas kode </head>

<script type='text/javascript'>
// Lightweight `auto read-more` hack for Blogger using `Textarea` by Taufik Nurrohman
// URL: https://plus.google.com/108949996304093815163/about
//<![CDATA[
var configSummary = {
thumbnailSize: 100, // Define the post thumbnail size
summaryLength: 300, // Define the summary length
noThumbUrl: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png" // `no image` URL
};
function createPostSummary(a,b,c) {
var text, doc = document, d = configSummary,
copyFrom = doc.getElementById(a).value,
pasteTo = doc.getElementById(b),
postThumbnail = (c === "") ? d.noThumbUrl : c;
text = copyFrom.replace(/<(.*?)>/g,"").replace(/[\n\r]+/g," ");
pasteTo.innerHTML = '<img class="post-thumbnail" src="'+postThumbnail.replace(/\/s[0-9]+(\-c)?\//,'/s'+d.thumbnailSize+'-c/')+'" alt="thumbnail" style="width:'+d.thumbnailSize+'px;height:'+d.thumbnailSize+'px;">' + text.substring(0,d.summaryLength) + '&hellip;';
}
//]]>
</script>
Nah gimana Tutorial Membuat Auto Read-More dengan Bantuan TextArea cukup mudahkan , oh ya bila sobat mengalamai kesulitan dalam Membuat Auto Read-More dengan Bantuan TextArea silahkan bertanya melalui kotak komentar sumber:http://www.dte.web.id/2013/01/konsep-auto-read-more-dengan-bantuan.html

Materi Senam Lantai Kelas X Semester 2

Materi Senam Lantai Kelas X Semester 2 - Karena di sekolah saya ( Man 1 Semarang ) ada tugas penjasorkes di suruh untuk mencari artikel tentang materi Senam Lantai , maka dari itu saya sambil mengerjakan tugas juga akan share kepada teman-teman

Materi Senam Lantai Kelas X Semester 2


A. Pengertian SENAM LANTAI

            Senam lantai (bahasa Inggris: floor exercise) adalah salah satu bagian dari rumpun senam. Sesuai dengan istilahnya, maka gerakan-gerakan senam dilakukan di atas lantai yang beralaskan matras atau permadani. Senam lantai sering juga di sebut dengan senam bebas, sebab pada waktu melakukan gerakan tidak membawa alat atau menggunakan alat. Senam lantai menggunakan area yang berukuran 12 X 12 m dan dapat ditambahkan matras sekeliling area selebar 1 meter untuk menjaga keamanan pesenam yang baru melakukan latihan atau rangkaian gerakan. Unsur-unsur gerakannya terdiri mengguling, melompat berputar di udara, menumpu dengan dua tangan atau kaki untuk mempertahankan sikap seimbang pada waktu melompat ke depan atau ke belakang. Bentuk gerakannya merupakan gerakan dasar senam perkakas, bentuk latihannya pada putera maupun puteri pada dasarnya adalah sama, hanya untuk puteri dimasukkan unsur-unsur gerakan balet.

PENGERTIAN SENAM DAN JENIS-JENIS SENAM LANTAI

         Senam merupakan suatu cabang olahraga yang melibatkan performa gerakan yang membutuhkan kekuatan, kecepatan dan keserasian gerakan fisik yang teratur. Bentuk modern dari senam ialah : Palang tak seimbang, balok keseimbangan, senam lantai. Bentuk-bentuk tersebut konon berkembang dari latihan yang digunakan oleh bangsa Yunani kuno untuk menaiki dan menuruni seekor kuda dan pertunjukan sirkus.
Senam biasa digunakan orang untuk rekreasi, relaksasi atau menenangkan pikiran, biasanya ada yang melakukannya di rumah, di tempat fitness, di gymnasium maupun di sekolah.Sekarang, sejak kecil banyak anak sudah terbiasa diajarkan senam, baik oleh orang tua, maupun oleh pengajar olahraga di sekolah.
Senam sangat penting untuk pembentukan kelenturan tubuh, yang menjadi arti penting bagi kelangsungan hidup manusia.
Senam ada berbagai macam, diantaranya senam lantai, senam hamil, senam aerobik, senam pramuka, Senam Kesegaran Jasmani (SKJ), dll. Biasanya di sekolah dasar, guru-guru mengajarkan senam-senam yang mudah dicerna oleh murid, seperti SKJ dan senam pramuka. Namun ketika beranjak remaja, banyak orang melakukan senam aerobik, ataupun senam lain termasuk meditasi untuk menenangkan diri.
Gerakan-gerakan senam sangat sesuai untuk mengisi program pendidikan jasmani.Gerakannya merangsang perkembangan komponen kebugaran jasmani seperti kekuatan dan daya tahan otot dari seluruh bagian tubuh. Di samping itu, senam juga berpotensi mengembangkan keterampilan gerak dasar, sebagai landasan penting bagi penguasan keterampilan teknik suatu cabang olah raga. Pengertian senam begitu luas cakupannya yang meliputi berbagai karakteristik geraknya.

Rol depan

Guling ke depan adalah berguling ke depan atas bagian belakang badan (tengkuk,punggung,pinggang,dan panggul bagian belakang). Latian guling ke depan dapat dilakukan dengan dua cara,yaitu : guling ke depan dengan sikap awal jongkok dan guling ke depan dengan sikap awal berdiri.

Roll Depan


 Cara melakukannya sebagai berikut:
1. Sikap permulaan jongkok,kedua tangan menumpu pada matras selebar bahu.
2. Kedua kaki diluruskan, siku tangan ditekuk, kepala dilipat sampai dagu menyentuh dada.
3. Mengguling ke depan dengan mendaratkan tengkuk terlebih dahulu dan kedua kaki di lipat rapat pada dada.
4. Kedua tangan melemaskan tumpuan dari matras, pegang mata kaki dan berusaha bangun.
5. Kembali berusaha bangun.

Rol Belakang

Guling ke belakang adalah menggulingka badan ke belakang ,dimana posisi badan tetap harus membulat,yaitu kaki dilipat,lutut tetap melekat di dada,kepala ditundukan sampai dagu melekat di dada.

Roll Belakang


Cara melakukan guling ( Roll ) ke belakang :
Sikap permulaan dalam posisi jongkok,kedua tangan di depan dan kaki sedikit rapat
Kepala ditundukan kemudian kaki menolak ke belakang
Pada saat panggul mengenai matras,kedua tangan segera dilipat ke samping telinga dan telapak tangan menghadap ke bagian atas untuk siap menolak
Kaki segera diayunkan ke belakang melewati kepala,dengan dibantu oleh kedua tangan menolak kuat  dan kedua kaki dilipat sampai ujung kaki dapat mendarat di atas matras,ke sikap jongko Lompat Harimah
a)      Sikap awal:
  berdiri tegak kemudian mengambil sikap siap berlari dengan kecepatan tertentu.
  jarak pengambilan awalan bisa bervariasi beberapa langkah atau banyak langkah tergantung ketinggian penanda yang ada.
b)      Rangkaian loncat harimau dan berguling ke depan:
  Mengambil posisi berdiri tegak kemudian berlari cepat.
  Setelah mendekati penanda segera melakukan tolakan dengan menumpu pada kedua kaki.
  Badan terangkat keatas atau meloncat melewati penanda yang ada, setelah melewati penanda tangan bersiap-siap untuk menumpu pada matras diikuti tengkuk kemudian punggung yang menyentuh matras dilanjutkan dengan gerakan guling ke depan.
c)      Sikap akhir
  Melakukan guling depan sampai 2 atau 3 kali,kemudian kembali ke posisi jongkok,
  Kedua kaki menapak sempurna, tangan lurus kedepan badan tidak terjatuh ke samping kanan atau ke samping kiri, kemudian berdiri tegak,kembali ke sikap.
Berdiri dengan Kepala (Headstand)
Headstand adalah posisi keseimbangan yang memanfaatkan kekuatan kedua lengan dan kepala (otot leher) sebagai titik tumpunya. Posisi ini diawali dari posisi jongkok dan menempatkan ujung kepala dan kedua telapak tangan di lantai. Ketika titik tumpu (kepala dan kedua lengan) sudah siap, pelan-pelan titik berat badan dipindahkan ke titik tumpu dan secara perlahan mengangkat kedua kaki yang dibengkokkan ke atas, sehingga panggul dan kedua kaki berada di atas kepala. Kemudian, secara perlahan pula, luruskan kedua kaki hingga terbentuk posisi badan dan kaki lurus membentuk satu garis
Berdiri dengan kepala adalah sikap tegak dengan bertumpu pada kepala dan ditopang oleh kedua tangan.
Sikap permulaan membungkuk bertumpu pada dahi dan tangan. Dahi dan tangan membentuk segitiga sama sisi.
Angkat tungkai ke atas satu per satu bersamaan. Untuk menjaga agar badan tidak mengguling ke depan, panggul ke depan, dan punggung membusur.
Berakhir pada sikap badan tegak, dan tungkai rapat lurus ke atas.

Berdiri Atas Tangan (Handstand)

Hands stand adalah sikap tegak dengan bertumpu pada kedua tangan ,kedua kaki rapat dan lurus ke atas .suatu hal yang perlu diperhatikan dalam melakukan hands stand adalah harus di lakukan di atas landasan atau alas yang keras (misal lantai).karena akan memudahkan dalam bertumpu,jika dibandingkan melakukannya di atas alas yang lunak (misal kasur).

Cara melakukan gerakan handstand yaitu:
Berdiri tegak kaki diceraikan ke muka dan belakang.
Bungkukkan badan, tangan menumpu selebar bahu, lengan lurus, pandangan agak ke depan, pantat diangkat setinggi-tinginya, tungkai ke depan bengkok, sedang tungkai belakang lurus.
Ayunkan tungkai belakang ke atas diikuti tungkai yang lain.
Kedua tungkai rapat clan lurus, membentuk satu garis dengan badan dan lengan.
Pertahankan keseimbangan.

MERODA

       Sikap permulaan Bagi yang baru belajar, berdiri menyampingi arah gerakan, kedua kaki dibuka lebar, kedua lengan lurus ke atas di samping kepala serong ke samping dan telapak tangan menghadap ke atas
Cara melakukan gerakan handstand yaitu:
Awali dengan sikap siap melakukan dengan mengakat salah satu tangan
Bertumpu tangan, mencoba melewatkan kedua kaki secara bergantian
Seperti di atas, benda yang dilewati harus lebih tinggi.
kemudian turunkan kaki satu persatu dengan kaki terbuka lebar
dan akhir dengan sikap  sempuran dengan kedua tanggan di angakat.

ROUND OFF

Bagi yang baru belajar, berdiri tegak, kedua kaki rapat, kedua lengan di samping badan.
Cara melakukan gerakan round off
Ayunkan kedua lengan keatas sejajar bahu lurus kedepan serong ke atas.
Sambil mengangkat dan melangkahkan kaki ke kiri ke depan, badan putar kesamping kiri.
Bersamaan dengan meletakkan kedua telapak tangan pada matras sejajar bahu, lemparkan kaki kanan lurus ke atas, kemudian diikuti kaki kiri hingga pada posisi handstand.
Lemparkan kedua kaki sejauh mungkin.
Mendarat pada kedua kaki dan badan menghadap ke tempat semula.

Loncat Kangkang

Loncat kangkang adalah gerakan melompati suatu alat dengan cara bertumpu pada alat tersebut. Dalam latihan gerakan ini dapat dapat dilakukan pada peti lompat atau pada teman yang membungkuk.
Cara melakukan loncat kangkang:
Awalan lari cepat badan condong ke depan.
Kedua kaki menolak pada papan tolak sekuat-kuatnya disertai ayunan dari belakang bawah ke depan. Badan lurus, tungkai dipisahkan.
Saat tangan menyentuh pada bagian pangkal kuda-kuda segera menolak sekuat-kuatnya.
Badan melayang di atas kuda-kuda sikap lurus, lengan direntangkan, tungkai lurus dipisahkan (dibuka lebar) pandangan ke depan.
Mendarat dengan ujung kaki mengeper lengan direntangkan ke atas.

Lompat Jongkok

Teknik gerakannya sama dengan lompat kangkang menggunakan kuda-kuda, tetapi karena peti lompat lebih panjang maka memerlukan awalan yang lebih panjang dan tolakan yang lebih kuat lagi.
Cara melakukan lompat jongkok:
  Awalan lari cepat badan condong ke depan.
  Kedua kaki menolak pada papan tolak sekuat-kuatnya, badan condong ke depan dan kedua tangan diayun ke depan dengan sasaran tumpuan tangan pada ujung akhir bagian peti lompat.
  Saat melayang badan lurus kaki rapat, kemudian dengan tangan lurus menumpu pada peti lompat.
  Kedua tangan menolak kuat pada peti lompat dan dibuka selebar bahu, kemudian kedua kaki ditekuk di dekatkan pada dada dan masuk di antara kedua lengan.
  Luruskan badan dan kedua kaki rapat,sesaat sebelum mendarat, pandangan tetap ke depan.
  Mendarat lunak, pertahankan keseimbangan.

 KAYANG

Kayang adalah posisi kaki bertumpu dengan empat titik dalam keadaan terbalik dengan meregang dan mengangkat perut dan panggul. Nilai dari pada gerakan kayang yaitu dengan menempatkan kaki lebih tinggi memberikan tekanan pada bahu dan sedikit pada pinggang.
Manfaat dari gerakan kayang adalah untuk meningkatkan kelentukan bahu,bukan kelentukan pinggang.

Kayang


Cara melakukan gerakan kayang sebagai berikut.
Sikap permulaan berdiri, keduan tangan menumpu pada pinggul.
Kedua kaki ditekuk, siku tangan ditekuk, kepala di lipat ke belakang.
Kedua tangan diputar ke belakang sampai menyentuh matras sebagai tumpuan.
Posisi badan melengkung bagai busur.

Demikian materi tentang Senam Lantai Kelas X Semester 2 , semoga materi senam lantai tersebut dapat bermanfaat bagi anda , akhirul kalam wassalam wr.wb.

Membuat Artikel Terkait Ala Kang Ismet

Cara Membuat Artikel Terkait Ala Kang Ismet - di pagi yang cerah ini saya akan menjawab request teman saya tentang bagaimana sih cara atau trik dan tutorial membuat related post ( artikel terkait ) ala kang ismet .? sebetulnya cara ini sudah ada di blog kang ismet itu sendiri namun di blog kang ismet tutorialnya  masih menggunakan css yang sederhana , al-hasil hasilnya pun sederhana , oke  kali ini saya akan memberikan tutorial kepada anda related post seo , keren dan valid html5 dan css ala kang ismet

Membuat Artikel Terkait Ala Kang Ismet

Berikut Cara Membuat Artikel Terkait Ala Kang Ismet :
1- Pertama sobat harus Simpan kode CSS ini di atas ]]></b:skin> atau </style>

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

2- Setelah anda pasang kode diatas kemudian langkah selanjutnya adalah sobat pasang HTML ini di bawah kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat pilih aja yang terakhir atau di coba satu persatu )

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

Oh ya , karena widget related post ini menggunakan font awasome maka anda harus memasang dahulu css awesome ini dibawah kode <head>

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

Langkah Terakhir sebelum anda menyimpannay alangkah baiknya jika anda pratinjau dulu , jika sudah tidak ada kesalahan maka simpan template anda dan lihat hasilnya . Taraaa kini anda sudah dapat Membuat Artikel Terkait Ala Kang Ismet . ( selamat ya )

Free Download Template SEO Keren Terbaru 2014

Download Template SEO Keren Terbaru 2014 - Assalamaulakum wr.wb  kali ini saya akan membagikan template yang resmi ( bukan ilegal atau bukan clonningan ) melainkan resmi dari pembuatnya yaitu mastah bintang , template seo terbaru 2014 ini mempunyai beberapa fitur keunggulan , yaitu responsive , design menarik , seo , fast loading dan masih banyak lagi , Mau tau kayak apa demo , dari template seo , responsive keren nan keren itu , liat aja demo dibawah ini ..

Free Download Template SEO Keren Terbaru 2014

Download

  • Responsive
  • FullScreen
  • Simple
  • Breadcrumbs
  • PageList
  • SearchBox
  • Share Button
  • Threaded Comment
  • Related Posts
  • etc
Gimana keren gak template SEO Keren Terbaru 2014 karya mas bintang , jika anda tertarik silahkan di download , oh ya ada satu hal yang tak bleh dilupakan yaitu jangan menghapus link creditnya ya 

Cara Memasang Tools Kode Warna Di Blog

Cara Memasang Tools Kode Warna Di Blog Ala Kang Ismet - Sebetulnya sudah banyak cara yang digunakan untuk membuat tool warna ini di blog , namun tool ini berbeda dari yang lain , karena tool warna ini saya ambilkan dari kang ismet . awalnya saya penasaran dengan tool warna kang ismet yang keren , kemudian saya tertarik dengan tool tersebut dan akhirnya saya ambil deh kode tool warnanya

Cara Memasang Tools Kode Warna Di Blog

Cara Memasang Tools Kode Warna Di Blog sangat mudah anda tinggal menyalin kode ini di tempat yang anda inginkan , misalnya jika anda ingin menampilkanya di bacaan atau postingan , maka salin dan paste kode ini di HTML ( bukan compose ) . Berikut kodenya

<center>
<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="500" id="obj1" width="500"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie"><param value="High" name="quality"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="500" height="500"> </object> <object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="500" id="col" width="500"> <param value="sameDomain" name="allowScriptAccess"><param value="http://www.2createawebsite.com/build/col.swf" name="movie"><param value="high" name="quality"><param value="#ffffff" name="bgcolor"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="500" align="middle" height="500"> </object> </center>


Setelah anda menyalin dan mempaste kode di atas , Al-Hasil nanti hasilnya seperti di bawah ini :

Download Template simple Templateku Mas Sugeng

Download Template simple Templateku Mas Sugeng - Tadi saya tertarik dengan blog mas sugeng yang berdomain www.templateku.com , karena saya punya rasa untuk membuat template semacam itu , maka templatenya saya gandakan deh ,  sebenarnya saya buat 100% sama dan berhasil (kayak template ini ) namun , karena saya ingin membuatnya agak berbeda sedikit ( hanya di read more ) jadinya templatenya kayak demo dibawah ini :

Super SEO Blogger Template



Fitur-Fiture dari templateku ( mas sugeng )


  • Elegant Design 
  • Cross Browser Optimization 
  • Fast Loading 
  • Valid HTML5 
  • Custom Error Page 
  • Quick Search Form Blogger Template 
  • Designer Integration 
  • Read More manipulasi
  • Dan Masih Buanyak Lagi

Gimana Gan Tertarik gak dengan template design saya yang terimpirasi dari mas sugeng , jika tertarik langsung saja download gan tanpa nunngu lama

Perhatikan : Anda tidak di perbolehkan menghapus link credit 

Download Template Simple Fast 2014 Responsive

Download Template Simple Fast 2014 Responsive  - Bagi anda yang sedang cari-cari template yang seo , responsive dan valid , kini anda tidak perlu repot-repot untuk membuatnya sendiri , karena kini mastah masbintang telah share templatenya secara free , Langsung saja Berikut Demonya

Download Template Simple Fast 2014 Responsive


Fitur - Fitur Template Simple Fast 2014 Responsive
  1. Responsive
  2. 2 Column Header
  3. Breaking News
  4. Search Box
  5. Breadcrumbs
  6. 3 Column Footer
  7. Light Skin
  8. Ads Ready
  9. Navigation Bar
  10. Related Posts
  11. Simple Share Button
  12. Threaded Comment
  13. Dll
Dilarang untuk menghapus dan mengganti LINK CREDIT

Macam Macam Kode Warna

Macam Macam Kode WarnaMacam Macam Kode Warna - Mungkin kita sering kali mengganti warna pada template blogspot , tapi apakah kita hafal semua kode warna tersebut ,.......? wkwkwk , mungkin kita hanya hafal warna dasar saja seperti putih , hitam , biru , kuning dll. Maka dari itu saya akan memberikan tool jepada anda yang mungkin dapat membantu anda dalam menemukan kode warna berikut toolnya . cara pemakaian tool kode warna ini sangat mudah , anda tinggal klik warna yang anda inginkan ,

Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label

Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label - Karena tadi ada yang request tutorial tentang membuat tampilan posting Berbeda-Beda Berdasarkan Label , sebetulnya cara ini tidak terlalu sulit , anda hanya butuh memahami css , java script serta html , ok langsung saja tanpa panjang lebar mari kita buat tampilan posting Berbeda-Beda Berdasarkan Label

Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label

Berikut Tutorial Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label :

Langkah Pertama adalah sobat  harus temukan terlebih dahulu elemen yang biasanya digunakan untuk membungkus daftar label . cara mengetahuinya dengan cara inspect elemen

Membuat Tampilan Posting Berbeda-Beda Berdasarkan Label

Langkah yang kedua Lihat semua posting yang ada kemudian cek masing-masing tautan di dalam span.post-labels Cek apakah di dalamnya terdapat kata tertentu atau tidak (misalnya: Android)
Jika ada, tambahkan satu kelas spesifik baru pada posting tersebut

Setelah itu Pasang kode Java Script  di bawah ini tepat diatas kode </body>

<script type='text/javascript'>
$('.post').each(function() {
if ($(this).find('.post-labels a:contains(Android)').length) {
$(this).addClass('red');
} else if ($(this).find('.post-labels a:contains(Jelek)').length) {
$(this).addClass('green');
} else if ($(this).find('.post-labels a:contains(Bosan)').length) {
$(this).addClass('blue');
} else if ($(this).find('.post-labels a:contains(Mamamia)').length) {
$(this).addClass('yellow');
}
});
</script>

Nah langkah yang terkahir sobat pasang CSS ini di atas ]]></b:skin> atau </style>

.post.red    {background-color:red;   }
.post.green {background-color:green; }
.post.blue {background-color:blue; }
.post.yellow {background-color:yellow;}

Kemudian Simpan Template . Untuk memudahkan cara ini , saya sarankan untuk menggunakan Tool  ini

Jika sobat ingin Tampilan Posting Berbeda-Beda Berdasarkan Label seperti pada blog ini , maka sobat harus kembangkan sendiri ya css nya :)

source:http://www.dte.web.id/

Cara Membuat Demo JSFiddle di Blog dengan JQuery

Cara Membuat Demo JSFiddle di Blog dengan JQuery - Kali ini saya akan menjawab request dari teman saya kemaren , yaitu tentang Cara Membuat Demo JSFiddle di Blog dengan JQuery di blog , sebetulnya banyak sekali tutorial yang dapat anda lakukan untuk membuat demo suatu blog

Cara Membuat Demo JSFiddle di Blog dengan JQuery


Pasti anda penasaran kayak apa demonya , Nih dia demo dari JSFiddle di Blog dengan JQuery di Blog
Nah gimana menggunakan Demo JSFiddle di Blog dengan JQuery ? Mudah sekali Untuk menerapkannya,
Langkah Pertama sobat harus memasang  CSS ini di atas ]]></b:skin> atau </style>

jsfiddle-demo {
display:block;
width:99%;
height:300px;
border:2px solid #bbb;
}

Langkah yang kedua yaitu pasang javasript ini di atas </body>


<script type='text/javascript'>
//<![CDATA[
setTimeout(function() {
$('.jsfiddle-demo').each(function() {
$(this).replaceWith('<iframe class="jsfiddle-demo loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen"></iframe>');
});
}, 5000);
//]]>
</script>

Namun Bagimana cara penggunaanya ? . Cara anda pemasanganya mudah yaitu
Simpan kode ini pada postingan Anda bagian HTML ( bukan Compose ):

<div class="jsfiddle-demo loader" data-src="URL Hostingan Demo Anda Disini"></div>

Mungkin hanya itu yang dapat saya jawab dari reques teman saya yang tidak mau disebutkan namanya tentang bagaimana Cara Membuat Demo JSFiddle di Blog dengan JQuery . bila anda mengalami kesulitan dalam Membuat Demo JSFiddle di Blog dengan JQuery silahkan berkomrmtar

Cara Membuat Notifikasi Komentar Ala Google Plus

Cara Membuat Notifikasi Komentar Ala Google Plus - Askum , kemaren ada yang request entang bagaimana cara membuat notifikasi komentar ala google + , sebetulnya cara ini awalnya kang ismet dulu lah yang menemukannya . namun karena ada teman saya yang request notifikasi keren ini , maka akan saya buat triknya , meskipun terlambat :) oh ya demonya seperti dibawah ini .

Cara Membuat Notifikasi Komentar Ala Google Plus


Berikut Cara Membuat Notifikasi Komentar Ala Google Plus

1- Pertama sobat harus Simpan kode CSS ini di atas ]]></b:skin> atau </style>

#cm-total{position:fixed;top:14px;right:0;width:188px;text-align:left;z-index:9999;cursor:pointer}
.total-counter{background-color:#d11919;color:white;padding:1px 4px;font-family:Arial,Sans-serif;font-size:11px;border-radius:5px;font-weight:bold}
#notif{position:fixed;top:20px;right:180px;z-index:9999;height:22px;width:19px;opacity:.4;cursor:pointer}
#notif:hover{opacity:1}
.close-notif{position:fixed;top:92px;right:20px;z-index:9999;cursor:pointer;display:none}
#cm-container{width:355px;position:fixed;top:67px;right:0;z-index:9999;background-color:#e5e5e5;padding:60px 20px 10px 20px;color:#666;box-shadow:0 4px 15px -4px rgba(0,0,0,.4)!important;text-align:left;border:1px solid rgba(0,0,0,.2);background-clip:padding-box;display:none}
#cm-container:before{content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo4lZFgVxghLdaX0WV3I7ZH4u2TlSpHU9V6e013ry-_eDD455E8ETm9mERTQQYJvRhT2kLhhyJCnpU-P51_zmH15iApNivN5Aq4oA-IM2C5hF8n8c8CfYl8X0hdy9QLZCqpUZw9WxsmOc/s1600/arrow-notif.png');position:absolute;top:-14px;left:196px}
#cm-container:after{content:"Komentar Terbaru";position:absolute;top:22px;left:150px;text-align:center;font:normal 14px Arial;color:#333}
.cm-outer{margin:0 auto;padding:0;font-size:11px;text-align:left;font:normal 12px Arial}
.cm-outer ul{margin-bottom:5px}
.cm-outer li{padding:9px 10px 14px;list-style:none;clear:both;position:relative;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2);background-color:white;margin-bottom:10px}
.cm-text{color:#797979}
.cm-outer{margin:0 0 5px}
.cm-header{margin:4px 0 8px 90px;font-size:11px;font-weight:normal!important}
.cm-header a{color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover{color:#74a2c3;text-decoration:none}
.cm-outer .cm-content{overflow:hidden}
.cm-content{margin-left:90px}
.cm-outer img{display:block;float:left;background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4QXvwGBYmt_7Oc1LvcRJhTuQRDU-qQMF0zl5ScdMnNsVxwXx4xS4QprKk7ar-qVm-bRY5DB6n9RP-ly9xt8dhMqSUrRnwZaEQpVkGwR0cEx1XNTQw_g4fW5eCyQKtaNc6Jnsdd7rel7g/s1600/anon80.png') no-repeat 50% 50%;overflow:hidden;border-radius:3px 0 0 3px;position:absolute;top:0;left:0}
.cm-footer{margin-top:7px}
.cm-footer a{color:#5886a7;text-decoration:none}
.cm-footer a:hover{color:#74a2c3;text-decoration:none}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif']{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQGmBTzB2uhmjIkeaPKGZ3kqQcILwNNZnHnUyVc0y30HY8k6Y1Ll1h96JiRHlgD74e4VUYH35hL15v8xeq6VUE11NCzqbdKPNIHXAF7H79fNIf_p607qN-e13gHK_LsGTJEoU2l6g_nlk/s80-c/gravatar.png)}

2- Setelah anda pasang kode diatas kemudian langkah selanjutnya  adalah sobat Simpan kode Java script ini di atas </body>


<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxdjtmu91QrU9mcLTvcljUDKUqaCfidTQ9KMBYsziw0Vdgy1fjDqRf7DOZR1t8bM9E7qsEuETHbVGqcY0E2Mgb8KaIhtz3pmq034uSFWqpkTlZxjLPl5WIS5whL_Dw8_9HCukIEGFl3WQ/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEietq_MPIZzjWrFJc5LHeLNivgKHSePuiodHd49Tv4pTdL_hcIb-L6gtfSZUaHgqi1r3TlH2St71761zuPOu5BvhQaITlYs_09c-YoPnpYETA_32DtbCgWtsHriNd11tVAUAYiEW0Ud3oM/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
home_page: "http://blog.kangismet.net",
max_result: 6,
t_w: 80,
t_h: 80,
summary: 40,
new_tab_link: true,
ct_id: "cm-container",
new_cm: " Komentar Baru!",
interval: 30000,
alert: true,
alert: function(total) {
document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
document.title = '(' + total + ') ' + originalTitle;
}
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>

3-Langkah yang Terkahir adalah Sobat Harus Simpan jQuery dibawah <head>

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

Oh ya , apabila di template sobat sudah terdapat jQuery maka lewati saja langkah diatas

4- Simpan Template dan lihat hasilnya . Gimana sob , mudahkan Cara Membuat Notifikasi Komentar Ala Google Plus , oh ya trima kasih banyak to +Kang Ismet

sumber : http://blog.kangismet.net/2013/11/notifikasi-komentar-ala-google-plus.html