[崁入CSS和Javascript的檔案]
在我這~會變成
https://googledrive.com/host/0B7FtV5AdumvUNGppVDNyUTdYQmM
<link href='你的網址就貼在這裡，小心不要刪到小小的引號' rel='stylesheet' type='text/css'/>
我的網址結合好會長的向下面這樣
<link href='https://googledrive.com/host/0B7FtV5AdumvUNGppVDNyUTdYQmM' rel='stylesheet' type='text/css'/>
接著在內文的地方貼上twentytwenty的空間((不知道該怎麼說...
twentytwenty-container {
width: 800px;
height: 470px;
margin: 0 auto;
}
如果因為語法漏漏長找不到</body>的位置，先在語法的框框內點一下((點一下才會是在框框內搜尋))，然後按鍵盤的ctrl+f 輸入文字就可以搜尋了。
貼上的語法如下，網址一樣記得修改成網頁可用模式((五顆星重要！！
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js' type='text/javascript'/>
<script src='這裡貼上jquery.event.move.js的網址' type='text/javascript'/>
<script src='這裡貼上jquery.twentytwenty.js的網址' type='text/javascript'/>
<script>
$(window).load(function(){
$(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7});
$(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'});
});
</script>
到這裡就可以開心的儲存，然後關掉編輯的頁面~~
要記得儲存唷 =D
[文章中崁入照片]
如果要新增一篇文章並崁入這個功能，只要一如以往開啟一篇新的網誌，然後按下左上方的HTML的按鈕，這時候會發現上面編輯的icon變少了，而且編輯的空間變大了，現在就是在HTML編輯的模式當中，很好很好((點頭
在你要放圖片的位置貼上以下的語法：
<div class="twentytwenty-container">
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<img alt="" src="這裡放上Before照片的網址" />
<img alt="" src="這裡放上After照片的網址" />
</div>
</div>
貼完之後會長得很像上圖中的網址((很長的樣子XD
請注意，google的照片在網址中會設定大小，例如我的照片：
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgph4VBEuCuPq2hXJ-3-B4LRu4Ifnf2HGzk32-7DYIWo0gUUHGi-DgXqzhzc-2_CDgBpILvgZB2vvyGdk0NREoQIEM1rPqk0qdFCvDbcwAZCPb41uLuac9jdLMHmcd1ndGPYjKwsTdiu4E/s1600/P1220189.JPG
其中的s1600就是他的尺寸，直接複製照片網址可能是寫s400，如果比before&after的格子小，就會產生奇怪的白邊，像下面這張圖一樣。
如果一切順利的話，你就會得到像下圖一樣，好可愛豪好用的Before和After照片囉~~~
電腦、手機都可以用，非常不錯的效果唷~~~大家一定要試試看！
如果一切順利的話，你就會得到像下圖一樣，好可愛豪好用的Before和After照片囉~~~
電腦、手機都可以用，非常不錯的效果唷~~~大家一定要試試看！
如果這篇網誌有給你任何的幫助，請一定要留言告訴我阿~~~~拜託~~~
好啦~~我們下次見~~((揮手
沒有留言:
張貼留言